mky-vent-base/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="card-btn">
          <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>
      <div class="ventilate-content">
        <a-spin :spinning="loading">
          <div class="work-nav">
            <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
              <div class="pic" v-if="item.imgSrc"></div>
              <div class="content" v-if="item.label && item.value">
                <span>{{ item.label }}</span>
                <span>{{ item.value }}</span>
              </div>
              <div
                :style="{ color: item.text == '正常' ? 'var(--vent-table-action-link)' : '#ff2313' }"
                style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold"
                v-if="item.text"
              >
                {{ item.text }}
              </div>
              <div class="percent" v-if="item.list.length != 0">
                <div class="title">{{ item.label }}</div>
                <div class="value">
                  <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
                    <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
                    <span style="color: var(--vent-table-action-link); margin-left: 10px">{{ items.value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bot-area">
            <div class="title-t">
              <div class="text-t">通风信息状态监测</div>
            </div>
            <div class="echart-boxd">
              <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
            </div>
          </div>
        </a-spin>
      </div>
      <div class="tun-box">
        <MonitorTable
          ref="tunMonitorRef"
          :columns="ventTunColumns"
          :dataSource="ventTunDataSource"
          :isShowSelect="false"
          :scroll="{ y: 300 }"
          title="巷道阻力分析"
        />
      </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 } from '../common.data';
  import MonitorTable from '../../comment/MonitorTable.vue';
  import CustomHeader from '/@/components/vent/customHeader.vue';
  import echartLine from '../common/echartLine.vue';
  import MeasurePoint from '../common/measurePoint.vue';
  import { ventTunColumns } from '../alarm.data';
  import { realTimeNetCal } from '../alarm.api';
  // import moment from 'moment';

  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);
  const loading = ref(false);
  const currentDeviceId = ref('');
  let echartDw = ref('(m³/min)');
  //通风图表数据
  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('');
  //点击切换实时\报表数据
  let handlerToggle = () => {
    monitor.value = !monitor.value;
    ventilateTopList[0].value = monitor.value ? toggleData.jin : toggleData.faceIntM3;
    ventilateTopList[1].value = monitor.value ? toggleData.hui : toggleData.faceRetM3;
    if (monitor.value && toggleData.history.length != 0) {
      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);
      });
    } else {
      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);
      });
    }
  };
  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    timer = setTimeout(
      async () => {
        await getSysWarnList(currentDeviceId.value, 'vent');
        await getWindDeviceList();
        getMonitor(false);
      },
      flag ? 0 : 1000
    );
  }
  //返回首页
  function getBack() {
    router.push('/monitorChannel/monitor-alarm-home');
  }
  //获取左侧数据列表
  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: '低风险',
          deviceID: el.deviceID,
          strtype: el.deviceType,
        });
      });
      currentDeviceId.value = menuList[0].deviceID;
      // getMonitor(, true);
    }
  }
  //菜单选项切换
  function cardClick(ind, item) {
    activeIndex1.value = ind;
    if (timer) clearTimeout(timer);
    loading.value = true;
    setTimeout(() => {
      currentDeviceId.value = item.deviceID;
      getMonitor(true);
      loading.value = false;
    }, 1000);
  }
  //获取预警详情弹窗右侧数据
  function getSysWarnList(id, type) {
    sysWarn({ sysid: id, type: type }).then((res) => {
      echartDataFc1.maxData.data.length = 0;
      echartDataFc1.minData.data.length = 0;
      echartDataFc1.aveValue.data.length = 0;
      echartDataFc1.xData.length = 0;
      if (JSON.stringify(res) != '{}') {
        toggleData = Object.assign({}, res);
        ventilateTopList[2].value = res.xufengliang || '--';
        ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
        if (showToggle.value == 'monitor') {
          ventilateTopList[0].value = res.jin;
          ventilateTopList[1].value = res.hui;
          if (res.history.length != 0) {
            res.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 = res.faceIntM3;
          ventilateTopList[1].value = res.faceRetM3;
          if (res.history_report.length != 0) {
            res.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 {
          ventilateTopList[0].value = monitor.value ? res.jin : res.faceIntM3;
          ventilateTopList[1].value = monitor.value ? res.hui : res.faceRetM3;
          if (monitor.value && res.history.length != 0) {
            res.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 {
            res.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);
            });
          }
        }

        let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
          return acr > cur ? acr : cur;
        });
        let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
          return acr1 > cur1 ? acr1 : cur1;
        });
        maxY.value = max1 >= max2 ? max1 : max2;
        maxY.value =
          maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
        if (maxY.value.length < 2 && Number(maxY.value) < 1) {
          maxY.value = 1;
        } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
          maxY.value = 10;
        } else if (maxY.value.length < 3) {
          maxY.value = (Number(maxY.value[0]) + 1) * 10;
        } else if (maxY.value.length < 4) {
          maxY.value = (Number(maxY.value[0]) + 1) * 100;
        } else if (maxY.value.length < 5) {
          maxY.value = (Number(maxY.value[0]) + 1) * 1000;
        } else if (maxY.value.length < 6) {
          maxY.value = (Number(maxY.value[0]) + 1) * 10000;
        }
      }
    });
  }
  //获取通风监控测点信息
  async function getWindDeviceList() {
    const cardTfList = [];
    const chartTfList = [];
    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 res = await realTimeNetCal({ modelID: '8110' });
    debugger;
    if (res && res['result']) ventTunDataSource.value = res['result']['tuns'];
  }

  onMounted(async () => {
    const { sysOrgCode, sysDataType } = useGlobSetting();
    showToggle.value = sysDataType;
    getMenuList();
    getMonitor();
    await getRealTimeNetData();
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = 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: 200px;
        padding: 10px;
        box-sizing: border-box;

        .card-btn {
          width: 240px;
          height: 100%;
          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: 11px;
              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: 11px;
              font-size: 14px;
              color: var(--vent-font-color);
              text-align: center;
              transform: translate(-60%, 0);
            }
          }
        }
      }

      .ventilate-content {
        height: 100%;
        width: 1300px;
        padding: 10px 0px;
        box-sizing: border-box;
        margin-right: 10px;

        .work-nav {
          height: 30%;
          width: 100%;
          background: var(--image-bj1) no-repeat center;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 3px solid;
          border-image: var(--border-image-1) 1 1 1;

          .nav {
            display: flex;
            justify-content: center;
            align-items: center;

            &:nth-child(1) {
              flex: 1;
              height: 100%;
              border-right: 2px solid;
              border-image: var(--border-image-2) 1 1 1;
            }

            &:nth-child(2) {
              flex: 1;
              height: 100%;
              border-right: 2px solid;
              border-image: var(--border-image-2) 1 1 1;
            }

            &:nth-child(3) {
              flex: 1;
              height: 100%;
              border-right: 2px solid;
              border-image: var(--border-image-2) 1 1 1;
            }

            &:nth-child(4) {
              flex: 1;
              color: #b3b8cc;
              font-size: 16px;
              height: 100%;
              border-right: 2px solid;
              border-image: var(--border-image-2) 1 1 1;
            }

            /**
            &:nth-child(5) {
              flex: 1.4;
              height: 100%;

              .percent {
                width: 100%;
                height: 82%;
                padding: 0px 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .title {
                  font-size: 14px;
                  padding: 5px 0px;
                  color: #b3b8cc;
                  text-align: center;
                }

                .value {
                  display: flex;
                  justify-content: space-between;

                  span {
                    font-family: 'douyuFont';
                    font-size: 18px;
                  }
                }
              }
            }*/

            .pic {
              width: 90px;
              height: 90px;
            }

            .content {
              height: 82%;
              margin-left: 15px;
              color: var(--vent-font-color);
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              span {
                font-size: 14px;

                &:nth-child(1) {
                  padding: 5px 0px;
                  color: #b3b8cc;
                }

                &:nth-child(2) {
                  font-family: 'douyuFont';
                  font-size: 16px;
                  color: var(--vent-table-action-link);
                }
              }
            }
          }

          .nav:nth-child(1) .pic {
            background: var(--image-jinfengliang) no-repeat center;
            background-size: 100% 100%;
          }

          .nav:nth-child(2) .pic {
            background: var(--image-huifengliang) no-repeat center;
            background-size: 100% 100%;
          }

          .nav:nth-child(3) .pic {
            background: var(--image-xufengliang) no-repeat center;
            background-size: 100% 100%;
          }
        }

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

          .title-t {
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .text-t {
              font-family: 'douyuFont';
              font-size: 14px;
              color: var(--vent-font-color);
            }
          }

          .echart-boxd {
            width: 100%;
            height: 250px;
          }
        }
      }
    }
    .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>