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

<template>
  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
  <div class="gasWarn">
    <a-button v-if="!hasPermission('gasWarn:return')" preIcon="ant-design:rollback-outlined" type="text" size="small"
      style="position: absolute; left: 15px; top: 15px; color: #fff" @click="getBack">
      返回
    </a-button>
    <div class="alarm-menu">
      <div class="type-btn">

        <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas" :key="index"
          @click="btnClick(index)">
          {{ item.name }}
        </div>
      </div>
      <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="gas-content">
      <div style="width: 100%; height: 100%" v-if="isShow == 'yjjc'">
        <div class="top-area" v-if="topAreaListWs.length != 0">
          <div class="title-t">
            <div class="text-t">瓦斯抽采泵信息</div>
          </div>
          <div class="content-t">
            <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
              <div class="box-label">{{ item.label }}</div>
              <div class="box-values">
                <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
                  <span>{{ `${items.name} : ` }}</span>
                  <span :class="{
                    'box-value': items.val == 0 && items.name == '报警状态',
                    'box-value1': items.val == 101 && items.name == '报警状态',
                    'box-value2': items.val == 102 && items.name == '报警状态',
                    'box-value3': items.val == 103 && items.name == '报警状态',
                    'box-value4': items.val == 104 && items.name == '报警状态',
                    'box-value5': (items.val == 201 || item.val == 1001) && items.name == '报警状态',
                  }">{{
                    items.val == 0 && items.name == '报警状态'
                      ? '正常'
                      : items.val == 101 && items.name == '报警状态'
                        ? '较低风险'
                        : items.val == 102 && items.name == '报警状态'
                          ? '低风险'
                          : items.val == 103 && items.name == '报警状态'
                            ? '中风险'
                            : items.val == 104 && items.name == '报警状态'
                              ? '高风险'
                              : items.val == 201 && items.name == '报警状态'
                                ? '报警'
                                : items.val == 1001 && items.name == '报警状态'
                                  ? '网络断开'
                                  : items.val
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
          <MeasurePoint title="安全监控测点信息" :timeout="1000" :cards="cardListWs" :charts="chartListWs" />
        </div>
      </div>
      <div style="width: 100%; height: 100%" v-else-if="isShow == 'yjzb'">
        <warnTargetGas />
      </div>
      <div style="width: 100%; height: 100%" v-else-if="isShow == 'wscs'">
        <gasParamter />
      </div>
      <div style="width: 100%; height: 100%" v-else-if="isShow == 'gzzd'">
        <faultDiagnose :timeData="gzTime" :topData="topData" :xAxisPropType="xAxisPropType"
          :hisEchartData="hisEchartData" :echartData="echartData" @getSearchHis="getlistdaysData1"></faultDiagnose>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import { sysTypeWarnList, sysWarn, getDevice, listdays, bjlist, getHistoryData } from '../common.api';
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
import { useRouter } from 'vue-router';
import CustomHeader from '/@/components/vent/customHeader.vue';
import warnTargetGas from '../common/warnTargetGas.vue';
import PipeWarn from '../common/PipeWarn.vue';
import gasParamter from '../common/gasParamter.vue';
import faultDiagnose from '../common/faultDiagnose.vue'
import { getMonitorComponent } from '../common.data';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import MeasurePoint from '../common/measurePoint.vue';
import dayjs from 'dayjs';

let typeMenuListGas = getMonitorComponent();
const { hasPermission } = usePermission();
const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
//当前左侧激活菜单的索引
let activeIndex1 = ref(0);
//左侧数据列表
let menuList = reactive<any[]>([]);
//瓦斯顶部区域数据
let topAreaListWs = reactive<any[]>([]);
//瓦斯监控列表数据
let cardListWs = reactive<any[]>([]);
const chartListWs = reactive<any[]>([]);
let router = useRouter();
//监测/指标激活索引
let activeIndex = ref(0);
let isShow = ref('yjjc');
//故障诊断开始时间
let gzTime = ref('')
//故障诊断顶部区域数据
let topData = ref<any[]>([])
//根据诊断类型判断调用哪个历史数据接口
let zdType = ref('')
let historySearch = reactive({
  ttime_begin: '',
  ttime_end: '',
})
//实时历史图表
let xAxisPropType = ref('')
let hisEchartData = ref<any[]>([])
//报警历史图表
let echartData = reactive<any>({
  maxData: {
    lengedData: '',
    data: [],
  },
  minData: {
    lengedData: '',
    data: [],
  },
  xData: [],
});

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(flag?) {
  timer = setTimeout(
    async () => {
      const { sysOrgCode } = useGlobSetting();
      if (sysOrgCode == 'sdmtjtbdmk') {
        await getBjlist()
      } else {
        await getMenuList()
      }

      if (timer) {
        timer = null;
      }
      getMonitor(false);
    },
    flag ? 0 : 1000
  );
}

//返回首页
function getBack() {
  router.push('/monitorChannel/monitor-alarm-home');
}

//获取右侧详情数据列表
function getDetailList(param) {
  // listData.common = res;
  topAreaListWs.length = 0;
  cardListWs.length = 0;
  chartListWs.length = 0;
  if (JSON.stringify(param) != '{}') {
    param.pump.forEach((v) => {
      topAreaListWs.push({
        label: v.strinstallpos || '--',
        list: [
          // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
          { name: '报警状态', val: v.warnLevel || 0 },
          { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal && v.readData.coVal != '0' ? v.readData.coVal : '-' },
          { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
          { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
          { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
          { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
          { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
          {
            name: '输入管道内标况流量(m³/min)',
            val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-',
          }, //v.readData.standardTraffic
          { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
        ],
      });
    });

    param.gas.forEach((el) => {
      el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
      cardListWs.push({
        label: '甲烷',
        value: el.readData.gasC + '%' || '--',
        // value: 0,
        listR: [
          { id: 0, label: '测点类型', value: '瓦斯' },
          { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
          // { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
          { id: 2, label: '数据时间', value: el.readTime || '--' },
          { id: 3, label: '测点状态', value: el.warnFlag },
        ],
      });
      // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
      const avgParam = el.avgParam || {
        avg_gas_value: 0,
        max_gas_value: 0,
        min_gas_value: 0,
      };
      chartListWs.push({
        label: el.strinstallpos,
        time: new Date(),
        data: [avgParam.avg_gas_value, avgParam.max_gas_value, avgParam.min_gas_value, el.readData.gasC],
      });
    });
  }
}

//获取左侧菜单列表
async function getMenuList() {
  let res = await sysTypeWarnList({ type: 'gas' });
  if (res.length != 0) {
    menuList.length = 0;
    res.forEach((el) => {
      menuList.push({
        name: el.systemname,
        warn: el.warnDes,
        deviceID: el.id,
        strtype: el.strtype,
        detail: el.detail,
      });
    });
    getDetailList(menuList[activeIndex1.value].detail);
  }
}
//寸草塔二矿左侧菜单
async function getBjlist() {
  let res = await bjlist({ devicetype: 'gasmonitor*', pageNo: 1, pageSize: 100, isok: '0', })
  console.log(res, '寸草塔二矿左侧菜单')
  if (res && res.records.length != 0) {
    menuList.length = 0;
    res.records.forEach((el) => {
      menuList.push({
        name: el.devicename,
        warn: '故障',
        deviceID: el.deviceid,
        time: el.createTime
        // strtype: el.strtype,
        // detail: el.detail
      });
    });
    gzTime.value = menuList[activeIndex1.value].time
    let index = gzTime.value.indexOf(' ')
    let specificTime = dayjs(`${gzTime.value.substring(0, index)}T${gzTime.value.substring(index + 1)}`)
    if (!historySearch.ttime_begin && !historySearch.ttime_end) {
      historySearch.ttime_begin = specificTime.subtract(30, 'minute').format('YYYY-MM-DD HH:mm:ss')
      historySearch.ttime_end = specificTime.add(30, 'minute').format('YYYY-MM-DD HH:mm:ss')
    }
    //获取实时数据-报警历史
    getDeviceList(menuList[activeIndex1.value].deviceID)
    //获取历史数据
    getlistdaysData(menuList[activeIndex1.value].deviceID, historySearch)
  }
}

//获取实时数据-寸草塔二矿-报警历史
async function getDeviceList(param) {
  let res = await getDevice({ ids: param, devicetype: "gasmonitor" })
  if (res && res.msgTxt.length != 0) {
    echartData.maxData.data.length = 0
    echartData.minData.data.length = 0
    echartData.xData.length = 0
    let data = res.msgTxt[0].datalist[0]
    topData.value = [
      {
        id: 0,
        label: '瓦斯浓度(%)',
        imgSrc: true,
        icon: 'link',
        value: data.readData.gasC || '--',

      },
      {
        id: 1,
        label: '二氧化碳浓度(%)',
        imgSrc: true,
        icon: 'co2val',
        value: data.readData.co2val || '--',

      },
      {
        id: 2,
        label: '瓦斯抽采混量',
        imgSrc: true,
        icon: 'link',
        value: data.readData.gasMixMass || '--',

      },
      {
        id: 3,
        label: '报警状态',
        imgSrc: true,
        icon: 'alarm-warning',
        value: data.warnLevel == '101' ? '低风险' : data.warnLevel == '102' ? '一般风险' : data.warnLevel == '103' ? '较大风险' : data.warnLevel == '104' ? '重大风险' : data.warnLevel == '201' ? '报警' : data.warnLevel == '10000' ? '数据超限' : data.warnLevel == '1001' ? '网络中断' : '正常',

      },
      {
        id: 4,
        label: '通信状态',
        imgSrc: true,
        icon: 'link',
        value: data.netStatus == '0' ? '断开' : '连接',
      },
    ]
    zdType.value = data.stationtype || ''
    let list = JSON.parse(data.readData.gasGlFaultDia)
    echartData.maxData.data = [list.y1 || 0, list.y2 || 0]
    echartData.minData.data = [list.y3 || 0,  list.y4 || 0]
    echartData.xData = [...new Set([list.x1, list.x2, list.x3, list.x4])].sort((a, b) => a - b)
  }

}
//获取历史数据-寸草塔二矿
async function getlistdaysData(Ids, param) {
  if (zdType.value != 'redis') {
    let res = await listdays({ strtype: 'gasmonitor_normal', gdeviceid: Ids, ...param })
    console.log(res, '获取历史数据-寸草塔二矿')
    xAxisPropType.value = 'ttime'
    let data = res.datalist.records;
    if (data.length != 0) {
      data.forEach((el) => {
        Object.assign(el, el.readData);
      });
    }
    hisEchartData.value = data;
    console.log(hisEchartData.value, '  hisEchartData.value')
  } else {
    let res = await getHistoryData({ pageNum: 1, pageSize: 100, deviceId: Ids, isEmployee: true, ...param })
    console.log(res, '获取历史数据-寸草塔二矿')
    xAxisPropType.value = 'time'
    hisEchartData.value = res['records'];
  }

}
async function getlistdaysData1(param) {
  historySearch.ttime_begin = param.ttime_begin
  historySearch.ttime_end = param.ttime_end
  let res = await listdays({ strtype: 'gasmonitor_normal', gdeviceid: menuList[activeIndex1.value].deviceID, ...historySearch })
  console.log(res, '获取历史数据-寸草塔二矿')

  if (zdType.value != 'redis') {
    let res = await listdays({ strtype: 'gasmonitor_normal', gdeviceid: menuList[activeIndex1.value].deviceID, ...historySearch })
    console.log(res, '获取历史数据-寸草塔二矿')
    xAxisPropType.value = 'ttime'
    let data = res.datalist.records;
    if (data.length != 0) {
      data.forEach((el) => {
        Object.assign(el, el.readData);
      });
    }
    hisEchartData.value = data;
  } else {
    let res = await getHistoryData({ pageNum: 1, pageSize: 100, deviceId: menuList[activeIndex1.value].deviceID, isEmployee: true, ...param })
    console.log(res, '获取历史数据-寸草塔二矿')
    xAxisPropType.value = 'time'
    hisEchartData.value = res['records'];
  }
}

//监测/预警指标选项切换
function btnClick(ind) {
  activeIndex.value = ind;
  clearTimeout(timer);
  switch (ind) {
    case 0:
      activeIndex1.value = 0;
      isShow.value = 'yjjc';
      break;
    case 1:
      const { sysOrgCode } = useGlobSetting();
      if (sysOrgCode == 'sdmtjtbetmk') {
        activeIndex1.value = 0;
        isShow.value = 'yjzb';
      } else if (sysOrgCode == 'sdmtjtbdmk') {
        activeIndex1.value = 0;
        isShow.value = 'gzzd';
        getMonitor(true);
      } else {
        activeIndex1.value = 0;
        isShow.value = '';
      }
      break;
    case 2:
      activeIndex1.value = 0;
      isShow.value = 'wscs';
      break;
  }
}

//菜单选项切换
function cardClick(ind, item) {
  clearTimeout(timer);
  activeIndex1.value = ind;
  gzTime.value = item.time
  chartListWs.length = 0;
  getMonitor(true);
}

onMounted(() => {
  const { sysOrgCode } = useGlobSetting();
  if (sysOrgCode == 'sdmtjtbdmk') {
    getBjlist()
    getMonitor(true);
  } else {
    getMenuList();
    getMonitor(true);
  }
});
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

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

@{theme-deepblue} {
  .gasWarn {
    --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
    --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
    --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
  }
}

.gasWarn {
  --image-no-choice: url('/@/assets/images/fire/no-choice.png');
  --image-choice: url('/@/assets/images/fire/choice.png');
  --image-border: url('/@/assets/images/fire/border.png');
  --image-bj1: url('/@/assets/images/fire/bj1.png');
  --image-top-area: url('/@/assets/images/fire/top-area.png');
  width: 100%;
  height: 100%;
  padding: 80px 10px 15px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .alarm-menu {
    height: 100%;
    width: 15%;

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

      .btn {
        width: 33.33%;
        height: 100%;
        font-size: 14px;
        text-align: center;
        color: #fff;
        cursor: pointer;
      }

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

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

      .btn {
        position: relative;
        width: 81%;
        height: 14%;
        margin-bottom: 10%;
        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: 16px;
          color: var(--vent-table-action-link);
          text-align: center;
          transform: translate(-50%, 0);
        }

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

      .btn1 {
        position: relative;
        width: 100%;
        height: 14%;
        margin-bottom: 10%;
        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: 16px;
          color: var(--vent-table-action-link);
          text-align: center;
          transform: translate(-62%, 0);
        }

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

  .gas-content {
    position: relative;
    width: calc(85% - 10px);
    height: 100%;
    margin-left: 10px;
    padding: 15px;
    background: var(--image-border) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;

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

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

        .text-t {
          font-family: 'douyuFont';
          font-size: 14px;
          color: #fff;
        }
      }

      .content-t {
        width: 100%;
        height: 276px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
        box-sizing: border-box;

        .top-box {
          position: relative;
          width: 724px;
          height: 100%;
          background: var(--image-top-area) no-repeat center;
          background-size: 100% 100%;

          .box-label {
            position: absolute;
            left: 50%;
            top: 198px;
            transform: translate(-50%, 0);
            width: 80%;
            font-family: 'douyuFont';
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            word-wrap: break-word;
            color: #fff;
          }

          .box-values {
            position: absolute;
            left: 50%;
            top: 26px;
            transform: translate(-50%, 0);
            width: 84%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            .value-b {
              width: calc(50% - 10px);
              height: 25px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #fff;
              font-size: 14px;

              span {
                font-size: 14px;

                &:last-child {
                  font-family: 'douyuFont';
                  color: var(--vent-table-action-link);
                }
              }

              .box-value {
                color: rgb(145, 230, 9) !important;
              }

              .box-value1 {
                color: var(--vent-table-action-link) !important;
              }

              .box-value2 {
                color: #ffff35 !important;
              }

              .box-value3 {
                color: #ffbe69 !important;
              }

              .box-value4 {
                color: #ff6f00 !important;
              }

              .box-value5 {
                color: #ff0000 !important;
              }
            }
          }
        }
      }
    }

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

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

      .title-b {
        height: 30px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text-b {
          font-family: 'douyuFont';
          font-size: 14px;
          color: #fff;
        }
      }

      .content-b {
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;

        .content-b-item {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;

          .card-b {
            position: relative;
            width: 30%;
            height: 128px;
            margin: 0px 15px 15px 15px;
            background: var(--image-bot-area) no-repeat center;
            background-size: 100% 100%;

            .item-l {
              position: absolute;
              left: 32px;
              top: 50%;
              transform: translate(0, -50%);
              width: 89px;
              height: 98px;
              background: var(--image-bot-area1) no-repeat center;

              .label-l {
                position: absolute;
                left: 50%;
                top: 7px;
                font-size: 14px;
                color: #fff;
                transform: translate(-50%, 0);
              }

              .value-l {
                position: absolute;
                left: 50%;
                top: 50px;
                transform: translate(-50%, 0);
                font-family: 'douyuFont';
                font-size: 14px;
                color: var(--vent-table-action-link);
              }
            }

            .item-r {
              position: absolute;
              left: 132px;
              top: 50%;
              transform: translate(0, -50%);
              height: 128px;
              padding: 5px 0px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              box-sizing: border-box;

              .content-r {
                display: flex;

                span {
                  font-size: 14px;
                  color: #fff;

                  &:first-child {
                    display: inline-block;
                    width: 68px;
                  }

                  &:last-child {
                    display: inline-block;
                    width: calc(100% - 68px);
                  }
                }

                .status-f {
                  color: #ff0000;
                }

                .status-l {
                  color: var(--vent-table-action-link);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>