mky-vent-base/src/views/vent/monitorManager/alarmMonitor/warn/fireWarn.vue

<template>
  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 火灾监测预警 </customHeader>
  <div class="fireWarn">
    <a-button
      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 typeMenuList" :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="fire-content">
      <component :is="componentName[currentLoad]" :listData="listData" :strType="strType" :tableList="tableLists" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted, defineAsyncComponent } from 'vue';
  import { typeMenuList, componentName } from '../common.data';
  import { sysTypeWarnList, sysWarn } from '../common.api';
  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useRouter } from 'vue-router';
  import CustomHeader from '/@/components/vent/customHeader.vue';

  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
  //当前加载组件
  let currentLoad = ref('');
  //内外因火灾激活索引
  let activeIndex = ref(0);
  //当前激活菜单的索引
  let activeIndex1 = ref(0);
  let menuList = reactive<any[]>([]); //左侧菜单列表
  let menuList1 = reactive({
    external: [],
    internal: [],
    info: [],
  });
  //详情数据
  let listData = reactive({
    common: {},
    bundletube: [],
    fiber: [],
    fire: [],
    co: [],
    smoke: [],
    spray: [],
    temperature: [],
  }); //详情数据
  let strType = ref(''); //火灾外因-区别工作面和煤层
  let router = useRouter();
  let tableLists = ref<any[]>([]);

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

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

  //获取左侧菜单列表
  async function getMenuList() {
    let res = await sysTypeWarnList({ type: 'fire' });
    console.log(res, '火灾左侧菜单列表-------');
    if (res.length != 0) {
      menuList.length = 0;
      menuList1.external = res.external;
      menuList1.internal = res.internal;
      menuList1.info = res.info;
      if (menuList1.internal && menuList1.internal.length > 0) {
        menuList1.internal.forEach((el) => {
          menuList.push({
            name: el.systemname,
            warn: '低风险',
            type: 'on',
            deviceID: el.id,
            strtype: el.strtype,
          });
        });
      }

      getMonitor(menuList[0].deviceID, true);
    }
  }

  //获取预警详情弹窗右侧数据
  function getSysWarnList(id, type) {
    sysWarn({ sysid: id, type: type }).then((res) => {
      listData.bundletube = res.bundletube;
      listData.fiber = res.fiber;
      listData.fire = res.fire;
      listData.co = res.co;
      listData.smoke = res.smoke;
      listData.spray = res.spray;
      listData.temperature = res.temperature;
      loadZj();
    });
  }
  //内外因火灾、预警指标选项切换
  function btnClick(ind) {
    activeIndex.value = ind;
    switch (ind) {
      case 0:
        activeIndex1.value = 0;
        menuList.length = 0;
        currentLoad.value = '';
        menuList1.internal.forEach((el) => {
          menuList.push({
            name: el.systemname,
            warn: '低风险',
            type: 'on',
            deviceID: el.id,
            strtype: el.strtype,
          });
        });
        clearTimeout(timer);
        getClearList();
        getMonitor(menuList[0].deviceID, true);
        break;
      case 1:
        activeIndex1.value = 0;
        menuList.length = 0;
        currentLoad.value = '';
        if (menuList1.external.length != 0) {
          menuList1.external.forEach((el) => {
            menuList.push({
              name: el.systemname,
              warn: '低风险',
              type: 'out',
              deviceID: el.id,
              strtype: el.strtype,
            });
          });
          clearTimeout(timer);
          getClearList();
          getMonitor(menuList[0].deviceID, true);
          strType.value = menuList[0].strtype;
        } else {
          menuList.length = 0;
          clearTimeout(timer);
          currentLoad.value = '';
        }
        break;
      case 2:
        clearTimeout(timer);
        menuList.length = 0;
        activeIndex1.value = 0;
        menuList1.info.forEach((el) => {
          menuList.push({
            name: el.sysname,
            warn: '正常',
            deviceID: el.sysid,
            strtype: '',
          });
        });
        loadZb();
        break;
    }
  }
  //加载预警指标组件
  function loadZb() {
    // menuList1.info.forEach((el) => {
    //     if (el.list.length != 0) {
    //         el.list.forEach(v => {
    //             if (v.alarmName == '缓慢氧化阶段（吸氧蓄热期）') {
    //                 v.warnGrade = '绿色预警'
    //             } else if (v.alarmName == '加速氧化阶段（自热期）') {
    //                 v.warnGrade = '黄色预警'
    //             } else if (v.alarmName == '剧烈氧化阶段（燃烧期）') {
    //                 v.warnGrade = '红色预警'
    //             }
    //         })
    //     } else {
    //         tableLists.value.length = 0
    //     }
    // });
    tableLists.value = menuList1.info[0].list;
    const { sysOrgCode } = useGlobSetting();
    switch (sysOrgCode) {
      case 'sdmtjtbdmk': // 宝德
        currentLoad.value = 'warnFireBd';
        return currentLoad.value;
      case 'sdmtjtbetmk': // 布尔台
        currentLoad.value = 'warnFireBrt';
        return currentLoad.value;
      default:
        currentLoad.value = 'warnFireBrt';
        return currentLoad.value;
    }
  }
  //菜单选项切换
  function cardClick(ind, item) {
    if (activeIndex.value != 2) {
      activeIndex1.value = ind;
      strType.value = item.strtype;
      clearTimeout(timer);
      getClearList();
      currentLoad.value = '';
      getMonitor(item.deviceID, true);
    } else {
      clearTimeout(timer);
      activeIndex1.value = ind;
      tableLists.value = menuList1.info[ind].list;
    }
  }
  //加载组件
  function loadZj() {
    if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
      currentLoad.value = 'fireWork';
    } else if (!activeIndex.value && listData.bundletube.length != 0) {
      currentLoad.value = 'closeWall';
    } else if (activeIndex.value && activeIndex.value != 2) {
      currentLoad.value = 'mainWell';
    } else {
      currentLoad.value = '';
    }
  }
  //清空数据
  function getClearList() {
    listData.common = {};
    listData.bundletube.length = 0;
    listData.fiber.length = 0;
    listData.fire.length = 0;
    listData.co.length = 0;
    listData.smoke.length = 0;
    listData.spray.length = 0;
    listData.temperature.length = 0;
  }

  onMounted(() => {
    getMenuList();
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>

<style lang="less" scoped>
  .fireWarn {
    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;
        background-color: rgba(15, 55, 108, 0.8);
        border: 2px solid #1b6eab;
        margin-bottom: 20px;
        border-radius: 5px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

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

        .btn1 {
          width: 33%;
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          color: #fff;
          text-align: center;
          border-radius: 2px;
          background: #209dfc;
          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: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

          .text {
            width: 80%;
            position: absolute;
            left: 50%;
            top: 28px;
            font-size: 16px;
            color: #01fefc;
            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: url('../../../../../assets/images/fire/choice.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

          .text {
            width: 80%;
            position: absolute;
            left: 50%;
            top: 28px;
            font-size: 16px;
            color: #01fefc;
            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);
          }
        }
      }
    }

    .fire-content {
      width: calc(85% - 10px);
      height: 100%;
      margin-left: 10px;
      background: url('../../../../../assets/images/fire/border.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  // .fireWarn1 {
  //     width: 100%;
  //     height: 100%;
  //     padding: 80px 10px 15px 10px;
  //     box-sizing: border-box;

  //     .alarm-menu {
  //         width: 100%;

  //         .type-btn {
  //             width: 25%;
  //             height: 36px;
  //             line-height: 36px;
  //             background-color: rgba(15, 55, 108, .8);
  //             border: 2px solid #1b6eab;
  //             border-radius: 5px;
  //             box-sizing: border-box;
  //             display: flex;
  //             justify-content: space-between;

  //             .btn {
  //                 width: 33%;
  //                 height: 32px;
  //                 line-height: 32px;
  //                 font-size: 14px;
  //                 text-align: center;
  //                 color: #fff;
  //                 cursor: pointer;
  //             }

  //             .btn1 {
  //                 width: 33%;
  //                 height: 32px;
  //                 line-height: 32px;
  //                 font-size: 14px;
  //                 color: #fff;
  //                 text-align: center;
  //                 border-radius: 2px;
  //                 background: #209dfc;
  //                 cursor: pointer;
  //             }
  //         }

  //         .card-btn {
  //             width: 100%;
  //             height: calc(100% - 36px);
  //             overflow-y: auto;
  //             display: none;

  //         }
  //     }

  //     .fire-content {
  //         height: calc(100% - 30px)
  //     }
  // }
</style>