mky-vent-base/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'"
          :style="{ width: sysOrgCode == 'sdmtjtdltmk' ? '50%' : '33.33%' }"
          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="安全监控测点信息" :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>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted } from 'vue';
  import { sysTypeWarnList, sysWarn } 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 gasParamter from '../common/gasParamter.vue';
  import { getMonitorComponent } from '../common.data';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useGlobSetting } from '/@/hooks/setting';
  import MeasurePoint from '../common/measurePoint.vue';

  let typeMenuListGas = getMonitorComponent();
  const { sysOrgCode } = useGlobSetting();
  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');

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(deviceID, flag?) {
    timer = setTimeout(
      async () => {
        await getSysWarnList(deviceID, 'gas');
        if (timer) {
          timer = null;
        }
        getMonitor(deviceID);
      },
      flag ? 0 : 1000
    );
  }

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

  //获取预警详情弹窗右侧数据
  function getSysWarnList(id, type) {
    sysWarn({ sysid: id, type: type }).then((res) => {
      // listData.common = res;
      topAreaListWs.length = 0;
      cardListWs.length = 0;
      chartListWs.length = 0;
      if (JSON.stringify(res) != '{}') {
        res.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 : '-' },
            ],
          });
        });

        res.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 },
            ],
          });
          chartListWs.push({
            label: el.strinstallpos,
            data: [],
          });
        });
      }
    });
  }

  //获取左侧菜单列表
  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: '低风险',
          deviceID: el.id,
          strtype: el.strtype,
        });
      });
      getMonitor(menuList[0].deviceID, true);
    }
  }

  //监测/预警指标选项切换
  function btnClick(ind) {
    activeIndex.value = ind;
    clearTimeout(timer);
    switch (ind) {
      case 0:
        activeIndex1.value = 0;
        isShow.value = 'yjjc';
        break;
      case 1:
        activeIndex1.value = 0;
        isShow.value = 'yjzb';
        break;
      case 2:
        activeIndex1.value = 0;
        isShow.value = 'wscs';
        break;
    }
  }

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

  onMounted(() => {
    getMenuList();
  });
  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>