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"
              :disabled="record.linkId != '0'"
              size="small"
              @click="handlerunDeviceMonitor(record, '启动')"
              >启动</a-button
            >
            <a-button type="success" size="small" style="margin: 0px 10px" @click="handlerunDeviceMonitor(record, '编辑')">编辑</a-button>
            <a-button type="primary" size="small" @click="debugClick(record)">{{ record.debugTitle }}</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>
        <!-- 调试弹窗 -->
        <a-modal
          style="top: 300px; left: 360px"
          v-model:visible="visibleModalDebug"
          :width="450"
          title="调试信息"
          @ok="handleOkDebug"
          @cancel="handleCancelDebug"
        >
          <a-form :model="startupDataDebug" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="风速">
              <a-input v-model:value="startupDataDebug.speed" placeholder="请输入" style="width: 260px" />
            </a-form-item>
            <a-form-item label="风向">
              <a-select v-model:value="startupDataDebug.direction" style="width: 260px">
                <a-select-option v-for="file in derictList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
              </a-select>
            </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, updateDebugStatus } from './safetyList.api';
  import { columns } from './safetyList.data';

  let visibleModalDebug = ref(false);
  let debugFlag = ref('');
  let debugStationId = ref('');
  let debugDeviceId = ref('');
  let startupDataDebug = reactive({
    speed: '',
    direction: '',
  });
  let derictList = reactive<any[]>([
    { label: '正向', value: '1' },
    { label: '反向', value: '0' },
  ]);
  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' });
    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) {
    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 });
    getSubStationList();
    isShow.value = false;
  }
  //获取详细信息列表
  async function getStationList() {
    let res = await getList({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
    res.forEach((el) => {
      el.key = el.id;
      el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
      el.linkIdC = el.linkId || '';
      el.linkstatusC = el.linkstatus ? '连接' : '断开';
      el.debugTitle = '调试';
      el.children = el.devInfoList;
      el.children.forEach((v) => {
        v.key = v.id;
        v.debugTitle = '调试';
        v.linkstatusC = v.netStatus ? '连接' : '断开';
        v.linkIdC = v.linkId == '0' ? '未启用' : v.linkId == '1' ? '启用' : v.linkId == '2' ? '设备异常' : '';
        v.updateTime = v.time;
        v.gdmsC = v.gdms == '1' ? '直流供电' : v.gdms == '0' ? '交流供电' : '';
        v.valueJc = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.pa || ''}Pa,压差:${
          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;
    }
  }
  //分站，设备调试
  function debugClick(record) {
    if (record.debugTitle == '调试') {
      //正在调试中
      startupDataDebug.speed = '';
      startupDataDebug.direction = '';
      visibleModalDebug.value = true;
      if (record.devInfoList) {
        debugFlag.value = 'station';
        debugStationId.value = record.id;
        tableData.value.forEach((el) => {
          el.debugTitle = '结束调试';
          el.devInfoList.forEach((v) => {
            v.debugTitle = '结束调试';
          });
        });
      } else {
        debugFlag.value = 'device';
        debugDeviceId.value = record.id;
        tableData.value.forEach((el) => {
          el.devInfoList.forEach((v) => {
            if (v.id == debugDeviceId.value) {
              debugStationId.value = el.id;
            }
          });
        });
        record.debugTitle = '结束调试';
      }
    } else {
      if (record.devInfoList) {
        debugFlag.value = 'station';
        debugStationId.value = record.id;
        tableData.value.forEach((el) => {
          el.debugTitle = '调试';
          el.devInfoList.forEach((v) => {
            v.debugTitle = '调试';
          });
        });
        stopDebug();
      } else {
        debugFlag.value = 'device';
        debugDeviceId.value = record.id;
        tableData.value.forEach((el) => {
          el.devInfoList.forEach((v) => {
            if (v.id == debugDeviceId.value) {
              debugStationId.value = el.id;
            }
          });
        });
        record.debugTitle = '调试';
        stopDebug();
      }
    }
  }
  //调试确认
  async function handleOkDebug() {
    if (debugFlag.value == 'station') {
      let res = await updateDebugStatus({
        stationId: debugStationId.value,
        speed: startupDataDebug.speed,
        direction: startupDataDebug.direction,
        debugFlag: '1',
      });
      visibleModalDebug.value = false;
      getStationList();
    } else {
      let res = await updateDebugStatus({
        stationId: debugStationId.value,
        deviceId: debugDeviceId.value,
        speed: startupDataDebug.speed,
        direction: startupDataDebug.direction,
        debugFlag: '1',
      });
      visibleModalDebug.value = false;
      getStationList();
    }
  }
  //调试取消
  function handleCancelDebug() {
    visibleModalDebug.value = false;
    tableData.value.forEach((el) => {
      el.debugTitle = '调试';
      el.devInfoList.forEach((v) => {
        v.debugTitle = '调试';
      });
    });
    debugFlag.value = '';
    debugStationId.value = '';
    debugDeviceId.value = '';
  }
  //停止调试
  async function stopDebug() {
    if (debugFlag.value == 'station') {
      let res = await updateDebugStatus({ stationId: debugStationId.value, debugFlag: '0' });
      getStationList();
    } else {
      let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
      getStationList();
    }
  }
  async function handleOk() {
    let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address });
    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);
    getStationList();
  });
  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>