vent-template/src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

<template>
  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
  <div class="ventilateWarn">
    <div v-if="showToggle == 'all'" class="icon-toggle" @click="handlerToggle">
      <img v-if="!monitor" src="@/assets/images/vent/monitor-toggle.png" alt="" />
      <img v-else src="@/assets/images/vent/report-toggle.png" alt="" />
    </div>
    <div class="ventilate-top">
      <a-button v-if="!hasPermission('ventilateWarn:return')" preIcon="ant-design:rollback-outlined" type="text"
        size="small" style="position: absolute; left: 15px; top: 15px; color: var(--vent-font-color)" @click="getBack">
        返回
      </a-button>
      <div class="alarm-menu">
        <div class="type-btn">
          <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListTf" :key="index"
            @click="btnClick(index)">
            {{ item.name }}
          </div>
        </div>
        <div class="card-btn">
          <div style="width: 100%; height: 100%" v-if="menuList.length">
            <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
              @click="cardClick(ind, item)">
              <div class="text">{{ item.name }}</div>
              <div class="warn">{{ item.warn }}</div>
            </div>
          </div>
          <div v-else class="hd-content">
            <div class="hd-content-text">巷道阻变型故障预警分析</div>
            <div class="hd-content-val">{{ hdData.maxLevel }}</div>
          </div>
        </div>
      </div>
      <div class="ventilate-content">
        <a-spin :spinning="loading">
          <TopArea :activeIndex="activeIndex" :statusData="ventilateTopList" :echartData="echartDataFc1"
            :ventTunDataSource="ventTunDataSource" :maxY="maxY" :minY="minY"></TopArea>
        </a-spin>
      </div>
    </div>
    <div class="ventilate-bottom">
      <div class="bot-area">
        <MeasurePoint title="通风监控测点信息" :timeout="1000" :cards="cardListTf" :charts="chartListTf" chartWidth="420px" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import { useRouter } from 'vue-router';
import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
import { ventilateTopList, typeMenuListTf, getMaxY, getMinY } from '../common.data';
import CustomHeader from '/@/components/vent/customHeader.vue';
import MeasurePoint from '../common/measurePoint.vue';
import { realTimeNetCal, modalParam } from '../alarm.api';
import TopArea from '../common/top-area.vue';

//巷道阻力分析数据
let hdData = reactive({
  maxLevel: '',
  address: '',
});
//通风选项激活索引
let activeIndex = ref(0);
let monitor = ref(true);
let toggleData = reactive<any>({});
const { hasPermission } = usePermission();
const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
let router = useRouter();
//左侧数据列表
let menuList = reactive<any[]>([]);
const ventTunDataSource = ref([]);
//当前左侧激活菜单的索引
let activeIndex1 = ref(0);
let maxY = ref<any>(0);
let minY = ref<any>(0)
const loading = ref(false);

//通风图表数据
const echartDataFc1 = reactive<any>({
  maxData: {
    lengedData: '进风量',
    data: [],
  },
  minData: {
    lengedData: '回风量',
    data: [],
  },
  aveValue: {
    lengedData: '需风量',
    data: [],
  },
  xData: [],
});
let cardListTf = ref<any[]>([]);
const chartListTf = ref<any[]>([]);
let showToggle = ref('report');

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(flag?) {
  timer = setTimeout(
    async () => {
      //获取左侧菜单数据
      await getMenuList();
      await getWindDeviceList();
      getMonitor(false);
    },
    flag ? 0 : 2000
  );
}
//获取巷道阻力分析数据
let timer1: null | NodeJS.Timeout = null;
function getMonitor1(flag?) {
  timer1 = setTimeout(
    async () => {
      await getRealTimeNetData();
      getMonitor1(false);
    },
    flag ? 0 : 30000
  );
}

//返回首页
function getBack() {
  router.push('/monitorChannel/monitor-alarm-home');
}
//点击切换实时\报表数据
let handlerToggle = () => {
  monitor.value = !monitor.value;
  echartDataFc1.maxData.data.length = 0;
  echartDataFc1.minData.data.length = 0;
  echartDataFc1.aveValue.data.length = 0;
  echartDataFc1.xData.length = 0;
  getData()
};
//实时报表数据
function getData(){
  ventilateTopList[0].value = monitor.value ? toggleData.faceIntM3 : toggleData.jin;
  ventilateTopList[1].value = monitor.value ? toggleData.faceRetM3 : toggleData.hui;
  if (monitor.value) {
    toggleData.history_report.forEach((v) => {
      echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
      echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
      echartDataFc1.aveValue.data.push(0);
      echartDataFc1.xData.push(v.time);
    });
  } else {
    toggleData.history.forEach((v) => {
      echartDataFc1.maxData.data.push(parseFloat(v.jin));
      echartDataFc1.minData.data.push(parseFloat(v.hui));
      if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
        echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
      } else {
        echartDataFc1.aveValue.data.push(0);
      }
      echartDataFc1.xData.push(v.time);
    });
  }
}
//获取左侧数据列表
async function getMenuList() {
  let res = await sysTypeWarnList({ type: 'vent' });
  if (res.length != 0) {
    menuList.length = 0;
    res.forEach((el) => {
      menuList.push({
        name: el.deviceName,
        warn: el.warnDes.indexOf('预警') != -1 ? '风量不足' : el.warnDes,
        deviceID: el.deviceID,
        strtype: el.deviceType,
        detail: el.detail
      });
    });
    //获取右侧详情数据
    getDetailList(menuList[activeIndex1.value].detail)
  }
}

//获取右侧详情数据
function getDetailList(param) {
  echartDataFc1.maxData.data.length = 0;
  echartDataFc1.minData.data.length = 0;
  echartDataFc1.aveValue.data.length = 0;
  echartDataFc1.xData.length = 0;
  if (JSON.stringify(param) != '{}') {
    toggleData = Object.assign({}, param);
    ventilateTopList[2].value = param.xufengliang || '--';
    ventilateTopList[3].text = param.warnFlag ? param.warnDes : '正常';
    if (showToggle.value == 'monitor') {
      ventilateTopList[0].value = param.jin;
      ventilateTopList[1].value = param.hui;
      if (param.history.length != 0) {
        param.history.forEach((v) => {
          echartDataFc1.maxData.data.push(parseFloat(v.jin));
          echartDataFc1.minData.data.push(parseFloat(v.hui));
          if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
            echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
          } else {
            echartDataFc1.aveValue.data.push(0);
          }
          echartDataFc1.xData.push(v.time);
        });
      }
    } else if (showToggle.value == 'report') {
      ventilateTopList[0].value = param.faceIntM3;
      ventilateTopList[1].value = param.faceRetM3;
      param.history_report.forEach((v) => {
        echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
        echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
        echartDataFc1.aveValue.data.push(0);
        echartDataFc1.xData.push(v.time);
      });
    } else {
      getData()
    }

    let echartD = [echartDataFc1.maxData.data, echartDataFc1.minData.data]
    maxY.value = getMaxY(echartD)
    minY.value = getMinY(echartD)
  }
}


//通风选项切换
function btnClick(ind) {
  activeIndex.value = ind;
  switch (ind) {
    case 0:
      if (timer1) clearTimeout(timer1);
      activeIndex1.value = 0;
      getMenuList();
      break;
    case 1:
      if (timer) clearTimeout(timer);
      activeIndex1.value = 0;
      menuList.length = 0;
      getRealTimeNetData();
      getMonitor1();
      break;
  }
}

//菜单选项切换
function cardClick(ind, item) {
  clearTimeout(timer);
  if (!activeIndex.value && !loading.value) {
    activeIndex1.value = ind;
    loading.value = true;
    setTimeout(() => {
      getMonitor();
      loading.value = false;
    }, 2000);
  } 
}

//获取通风监控测点信息
async function getWindDeviceList() {
  const cardTfList: any[] = [];
  const chartTfList: any[] = [];
  let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
  if (res && res.msgTxt[0]) {
    let list = res.msgTxt[0].datalist || [];
    if (list.length > 0) {
      list.forEach((el: any) => {
        const readData = el.readData;
        el = Object.assign(el, readData);
        cardTfList.push({
          label: '通信状态',
          value: el.netStatus == '0' ? '断开' : '连接',
          listR: [
            { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
            { id: 1, label: '风量', dw: 'm³/min', value: el.m3 || '--' },
            { id: 2, label: '风速', dw: 'm/s', value: el.va || '--' },
            { id: 4, label: '时间', dw: '', value: el.readTime },
            {
              id: 3,
              label: '是否报警',
              dw: '',
              value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
            },
          ],
        });
        // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
        const avgParam = el.avgParam || {
          avg_vent_value: 0,
          max_vent_value: 0,
          min_vent_value: 0,
        };
        chartTfList.push({
          label: el.strinstallpos,
          time: new Date(),
          data: [avgParam.avg_m3_value, avgParam.max_m3_value, avgParam.min_m3_value, el.readData.m3],
        });
      });
    }
    cardListTf.value = cardTfList;
    chartListTf.value = chartTfList;
  }
}
async function getRealTimeNetData() {
  const modalData = await modalParam({});
  if (modalData && modalData.param && modalData.param.records.length && modalData.param.records.length > 0) {
    const res = await realTimeNetCal({ modelID: modalData.param.records[0]['defaultmodelid'] });
    if (res && res['result']) ventTunDataSource.value = res['result']['tuns'];
    let data = [];
    ventTunDataSource.value.forEach((el) => {
      if (el['dHTotal'] && el['oldHTotal']) {
        el['leveld'] = ((el['dHTotal'] - el['oldHTotal']) / el['oldHTotal']) * 100;
        data.push(el['leveld']);
      } else {
        data = [];
      }
    });
    hdData.maxLevel = '正常';
  }
}

onMounted(async () => {
  const { sysOrgCode, sysDataType } = useGlobSetting();
  showToggle.value = sysDataType || 'report';
  await getMenuList();
  await getMonitor();
});
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
  if (timer1) {
    clearTimeout(timer1);
    timer1 = undefined;
  }
});
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .ventilateWarn {
    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
    --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
    --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
    --image-jinfengliang: url('/@/assets/images/themify/deepblue/fire/jinfengliang.png');
    --image-huifengliang: url('/@/assets/images/themify/deepblue/fire/huifengliang.png');
    --image-xufengliang: url('/@/assets/images/themify/deepblue/fire/xufengliang.png');
  }
}

.ventilateWarn {
  --image-border: url('/@/assets/images/fire/border.png');
  --image-no-choice: url('/@/assets/images/fire/no-choice.png');
  --image-choice: url('/@/assets/images/fire/choice.png');
  --image-bj1: url('/@/assets/images/fire/bj1.png');
  --image-jinfengliang: url('/@/assets/images/fire/jinfengliang.png');
  --image-huifengliang: url('/@/assets/images/fire/huifengliang.png');
  --image-xufengliang: url('/@/assets/images/fire/xufengliang.png');
  --border-image-1: linear-gradient(to bottom, #2d74a0, #2d74a0, #2d74a0);
  --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
  position: reactive;
  width: 100%;
  height: 100%;
  padding: 80px 10px 15px 10px;
  box-sizing: border-box;

  .ventilate-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 50%;
    margin-bottom: 15px;
    background: var(--image-border) no-repeat center;
    background-size: 100% 100%;
    padding-right: 15px;

    .alarm-menu {
      height: 100%;
      width: 332px;
      padding: 10px;
      box-sizing: border-box;

      .type-btn {
        width: 100%;
        height: 28px;
        line-height: 28px;
        background-color: var(--vent-warn-tab-bg);
        border: 2px solid var(--vent-warn-tab-border);
        margin-bottom: 20px;
        border-radius: 5px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .btn {
          width: 50%;
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          text-align: center;
          color: var(--vent-font-color);
          cursor: pointer;
        }

        .btn1 {
          width: 50%;
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          color: var(--vent-font-color);
          text-align: center;
          border-radius: 2px;
          background: var(--vent-warn-tab-bg-actived);
          cursor: pointer;
        }
      }

      .card-btn {
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;

        .btn {
          position: relative;
          width: 81%;
          height: 24%;
          margin-bottom: 6%;
          font-family: 'douyuFont';
          background: var(--image-no-choice) no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

          .text {
            width: 80%;
            position: absolute;
            left: 50%;
            top: 28px;
            font-size: 14px;
            color: var(--vent-table-action-link);
            text-align: center;
            transform: translate(-50%, 0);
          }

          .warn {
            width: 100%;
            position: absolute;
            left: 50%;
            bottom: 8px;
            font-size: 12px;
            color: var(--vent-font-color);
            text-align: center;
            transform: translate(-50%, 0);
          }
        }

        .btn1 {
          position: relative;
          width: 100%;
          height: 24%;
          margin-bottom: 6%;
          font-family: 'douyuFont';
          background: var(--image-choice) no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

          .text {
            width: 80%;
            position: absolute;
            left: 50%;
            top: 28px;
            font-size: 14px;
            color: var(--vent-table-action-link);
            text-align: center;
            transform: translate(-62%, 0);
          }

          .warn {
            width: 100%;
            position: absolute;
            left: 50%;
            bottom: 8px;
            font-size: 14px;
            color: var(--vent-font-color);
            text-align: center;
            transform: translate(-60%, 0);
          }
        }

        .hd-content {
          position: relative;
          width: 100%;
          height: 300px;
          padding: 0 20px;
          background: var(--image-no-choice) no-repeat;
          background-size: 100% 100%;

          .hd-content-text {
            display: flex;
            width: 100%;
            height: 200px;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--vent-font-yellow-color);
          }

          .hd-content-val {
            position: absolute;
            width: calc(100% - 40px);
            display: flex;
            justify-content: center;
            font-family: 'douyuFont';
            bottom: 80px;
            font-size: 20px;
            color: var(--vent-table-action-link);
          }
        }
      }
    }

    .ventilate-content {
      height: 100%;
      width: calc(100% - 332px);
      padding: 10px 0px;
      box-sizing: border-box;
      margin-right: 10px;
    }
  }

  .tun-box {
    width: 600px;
    height: 300px;
  }

  .ventilate-bottom {
    height: calc(50% - 15px);
    background: var(--image-border) no-repeat center;
    background-size: 100% 100%;
    padding: 10px;
    box-sizing: border-box;

    .bot-area {
      height: 100%;
      padding: 10px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;
    }
  }

  .icon-toggle {
    position: absolute;
    right: 220px;
    top: 17px;

    img {
      width: 26px;
      height: 26px;
      cursor: pointer;
    }
  }
}
</style>