mky-vent-base/src/views/vent/safetyList/index.vue

<template>
  <div class="safetyList">
    <customHeader>监控分站管理</customHeader>
    <div class="content">
      <div class="left-box">
        <div class="left-title">
          <div class="title-fz">
            <span>分站：</span>
            <span>
              [通讯正常]
              <span class="zd-open">{{ openNum || 0 }}</span>
            </span>
            <span>
              [通讯中断]
              <span class="zd-close">{{ clsoeNum || 0 }}</span>
            </span>
          </div>
          <!-- <div class="title-cd">
            <span>测点：</span>
            <span>
              [通讯正常]
              <span class="zd-open">407</span>
            </span>
            <span>
              [通讯中断]
              <span class="zd-close">0</span>
            </span>
          </div> -->
        </div>
        <div class="left-content">
          <div class="card-box" v-for="(item, index) in cardList" :key="index">
            <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'"
              @click="cardClick(item, index)">
              <div class="card-item-label">{{ item.strname }}</div>
            </div>
            <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
              <div class="modal-name">站点名称：</div>
              <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
              <div class="modal-lj">连接状态：</div>
              <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="right-title">详细信息：</div>
        <a-table size="small" :scroll="{ y: 710 }" :columns="columns" :data-source="tableData" :pagination="pagination"
          @change="pageChange">
          <template #action="{ record }">
            <a-button v-if="!record.devInfoList" type="primary" style="margin-right:10px" :disabled="record.linkId != '0'" size="small"
              @click="handlerunDeviceMonitor(record, '启动')">启动</a-button>
            <a-button type="success" size="small" @click="handlerunDeviceMonitor(record, '编辑')">编辑</a-button>
          </template>
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'valueJc' && text">
              <div v-for="item in text.split(',')" :key="item">
                <span v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
                  style="display: inline-block;width: 45%;text-align: right; color:rgb(0, 242, 255);margin-right:5px">{{
                    item.substring(0, item.indexOf(':') + 1) }}</span>
                <span  v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
                  style="display: inline-block; width:50%;text-align: left; color:#fff">{{
                    item.substring(item.indexOf(':') + 1)==='1' ? '正风' :   item.substring(item.indexOf(':') + 1)==='2' ? '反风' :  item.substring(item.indexOf(':') + 1) }} </span>
              </div>
            </template>

          </template>
        </a-table>
        <!-- 一键启动弹窗 -->
        <a-modal style="top:300px;left:360px" v-model:visible="visibleModal" :width="450" title="一键启动" @ok="handleOk"
          @cancel="handleCancel">
          <a-form :model="startupData" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="安装位置">
              <a-input v-model:value="startupData.address"  placeholder="请输入" style="width: 260px" />
            </a-form-item>
          </a-form>
        </a-modal>
        <!-- 编辑弹窗 -->
        <a-modal style="top:300px;left:360px" v-model:visible="visibleModalEdit" :width="450" title="编辑信息"
          @ok="handleOkEdit" @cancel="handleCancelEdit">
          <a-form :model="startupDataEdit" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="安装位置">
              <a-input v-model:value="startupDataEdit.address"  placeholder="请输入" style="width: 260px" />
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
import customHeader from '/@/components/vent/customHeader.vue';
import { subStationList, getList, getEdit, runDeviceMonitor, update158DevName } from './safetyList.api';
import { columns } from './safetyList.data'

let paramId = ref('')
let isShow = ref(false)
let stationName = ref('')
let stationStatus = ref(null)
let stationId = ref(null)
let ljList = reactive<any[]>([
  { value: 0, label: '断开' },
  { value: 1, label: '连接' }
])
let activeIndex = ref(null)
let cardList = ref<any[]>()
let openNum = ref(0)
let clsoeNum = ref(0)

//分页参数配置
let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 20, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['10', '20', '30', '40', '50', '100'], // 可选的每页显示条数
});
let tableData = ref<any[]>([])
//一键启动弹窗
let visibleModal = ref(false);
let startupData = reactive({
  address: '',
})
let devId = ref('')

//编辑弹窗
let visibleModalEdit = ref(false)
let startupDataEdit = reactive({
  address: ''
})

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(flag = false) {
  timer = setTimeout(
    async () => {
      // await getSubStationList()
      await getStationList()
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    flag ? 0 : 5000
  );
}
//获取分站信息
async function getSubStationList() {
  let res = await subStationList({ strtype: "modbus" })
  console.log(res, '分站-----------')
  if (res.length != 0) {
    cardList.value = res
    openNum.value = cardList.value?.filter(v => v.linkstatus == 1)['length']
    clsoeNum.value = cardList.value?.filter(v => v.linkstatus == 0)['length']
  } else {
    cardList.value = []
  }
}
//站点选项点击
function cardClick(item, index) {
  console.log(item, '站点选项------------')
  activeIndex.value = item.isNewAccess ? index : null
  stationName.value = item.strname
  stationStatus.value = item.linkstatus
  stationId.value = item.id
  isShow.value = true
  getStationList()
}
//站点名称编辑
function changeName(val) {
  getChangeStation()
}
//站点连接状态修改
function changeStatus(val) {
  getChangeStation()
}
async function getChangeStation() {
  let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value })
  console.log(res, '站点编辑')
  getSubStationList()
  isShow.value = false
}
//获取详细信息列表
async function getStationList() {
  let res = await getList({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize, })
  console.log(res, '详细信息列表--------')
  res.forEach(el => {
    el.key = el.id
    el.linkstatusC = el.linkstatus ? '连接' : '未连接'
    el.children = el.devInfoList
    el.children.forEach(v => {
      v.key = v.id
      v.linkstatus = v.linkId
      v.linkstatusC = v.linkstatus == '0' ? '待启用' : v.linkstatus == '1' ? '连接' : '断开'
      v.updateTime = v.time
      v.valueJc = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.difPress || ''}Pa,温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,断面积:${v.area || ''}㎡`

    })
  })
  tableData.value = res
  pagination.total = res.total
}
//分页切换
function pageChange(val) {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  getStationList();
}
//启动新设备
function handlerunDeviceMonitor(record, val) {
  devId.value = record.id
  switch (val) {
    case '编辑':
      visibleModalEdit.value = true
      startupDataEdit.address = record.strinstallpos
      paramId.value = record.devInfoList ? 'subId' : 'devId'
      break;
    case '启动':
      visibleModal.value = true
      startupData.address = record.strinstallpos
      break;
  }
}
async function handleOk() {
  let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address })
  console.log(res, '新设备启动---')
  visibleModal.value = false
  getStationList();
}
function handleCancel() {
  visibleModal.value = false
  startupData.address = ''
}
//编辑
async function handleOkEdit() {
  if (paramId.value == 'subId') {
    let res = await update158DevName({ subId: devId.value, devName: startupDataEdit.address })
    console.log(res, '设备名称编辑---')
    visibleModalEdit.value = false
    getStationList();
  } else {
    let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address })
    console.log(res, '设备名称编辑---')
    visibleModalEdit.value = false
    getStationList();
  }
}
//取消编辑
function handleCancelEdit() {
  visibleModalEdit.value = false
  startupDataEdit.address = ''
}

onMounted(() => {
  getSubStationList()
  getMonitor(true);
})
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

<style lang="less" scoped>
.safetyList {
  width: calc(100% - 20px);
  height: calc(100% - 90px);
  position: relative;
  margin: 80px 10px 10px 10px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-box {
      width: 40%;
      height: 100%;
      margin-right: 15px;
      padding: 10px;
      box-sizing: border-box;
      background: url('@/assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;

      .left-title {
        display: flex;
        height: 30px;
        align-items: center;
        font-size: 14px;
        margin-bottom: 10px;

        span {
          color: #fff;
        }

        .zd-open {
          color: rgb(0, 242, 255);
        }

        .zd-close {
          color: #ff0000;
        }

        .title-fz {
          margin-right: 25px;
        }
      }

      .left-content {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        height: calc(100% - 40px);
        overflow-y: auto;

        .card-box {
          position: relative;
          // width: 242px;
          width: 182px;
          height: 110px;
          margin-bottom: 15px;
          display: flex;
          justify-content: center;

          .card-itemN {
            position: relative;
            width: 85px;
            height: 110px;
            background: url('../../../assets/images/zd-2.png') no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;

            .card-item-label {
              width: 100%;
              position: absolute;
              bottom: 5px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
          }

          .card-itemL {
            position: relative;
            width: 85px;
            height: 110px;
            background: url('../../../assets/images/zd-3.png') no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;

            .card-item-label {
              width: 100%;
              position: absolute;
              bottom: 5px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
          }

          .card-itemD {
            position: relative;
            width: 85px;
            height: 110px;
            background: url('../../../assets/images/zd-1.png') no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;

            .card-item-label {
              width: 100%;
              position: absolute;
              bottom: 5px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
          }

          .card-modal {
            width: 86px;
            position: absolute;
            left: 140px;
            color: #FFF;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 12px;
          }

          .card-modal1 {
            width: 86px;
            position: absolute;
            left: -42px;
            color: #FFF;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 12px;
          }

        }
      }
    }

    .right-box {
      width: calc(60% - 15px);
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      background: url('@/assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;

      .right-title {
        display: flex;
        height: 30px;
        align-items: center;
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;
      }
    }
  }
}

.zxm-form {
  padding-top: 20px !important;
  box-sizing: border-box;
}

::v-deep(.zxm-radio-wrapper) {
  font-size: 12px;
}

::v-deep(.zxm-input) {
  font-size: 12px;
}
</style>