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 v-if="!hasPermission('fireWarn: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 typeMenuList" :key="index"
          @click="fireMenuToggle(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">
      <a-spin :spinning="loading">
        <component :is="componentName[currentLoad]" :listData="listData" :strType="strType" :tableList="tableLists" />
      </a-spin>
    </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';
import { usePermission } from '/@/hooks/web/usePermission';

let loading = ref(false); //加载状态
const { hasPermission } = usePermission();
const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
//当前加载组件
let currentLoad = ref('');
//内外因火灾激活索引
let activeIndex = ref(0);
//当前激活菜单的索引
let activeIndex1 = ref(0);
let menuList = ref<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(flag?) {
  timer = setTimeout(
    async () => {
      await getMenuList();
      if (timer) {
        timer = null;
      }
      getMonitor(false);
    },
    flag ? 0 : 1500
  );
}

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

//获取左侧菜单列表
async function getMenuList() {
  let res = await sysTypeWarnList({ type: 'fire' });
  if (res.length != 0) {
    menuList1.external = res.external.filter((v) => v.strtype != 'sys_surface_caimei');
    menuList1.internal = res.internal;
    menuList1.info = res.info;
    if (!activeIndex.value && menuList1.internal && menuList1.internal.length > 0) {
      menuList.value = menuList1.internal.map((el: any) => {
        return {
          name: el.systemname,
          warn: el.warnDes,
          type: 'on',
          deviceID: el.id,
          strtype: el.strtype,
          detail: el.detail,
        }
      });
      getDetailList(menuList.value[activeIndex1.value].detail);
    } else if (activeIndex.value == 1 && menuList1.external && menuList1.external.length > 0) {
      menuList.value = menuList1.external.map((el: any) => {
        return {
          name: el.systemname,
          warn: el.warnDes,
          type: 'out',
          deviceID: el.id,
          strtype: el.strtype,
          detail: el.detail,
        }
      });
      strType.value = menuList.value[activeIndex1.value].strtype;
      getDetailList(menuList.value[activeIndex1.value].detail);
    } else {
      menuList.value = menuList1.info.map((el: any) => {
        return {
          name: el.sysname,
          // warn: '正常',
          deviceID: el.sysid,
          strtype: '',
          detail: el.list,
        }
      });
      getDetailList(menuList.value[activeIndex1.value].detail);
     
    }
  }
}
//获取右侧详情弹窗数据
function getDetailList(param) {
  if (activeIndex.value != 2) {
    listData.bundletube = param.bundletube;
    listData.fiber = param.fiber;
    listData.fire = param.fire;
    listData.co = param.co;
    listData.smoke = param.smoke;
    listData.spray = param.spray;
    listData.temperature = param.temperature;
    loadZj();
  } else {
    tableLists.value = param;
    loadZb();
  }
}
//内外因火灾、预警指标选项切换
function fireMenuToggle(ind) {
  activeIndex.value = ind;
  switch (ind) {
    case 0:
      loading.value = true;
      setTimeout(() => {
        clearTimeout(timer);
        activeIndex1.value = 0;
        currentLoad.value = '';
        getClearList();
        getMonitor();
        loading.value = false;
      }, 1000);
      break;
    case 1:
      loading.value = true;
      setTimeout(() => {
        clearTimeout(timer);
        activeIndex1.value = 0;
        currentLoad.value = '';
        getClearList();
        getMonitor();
        loading.value = false;
      }, 1000);
      break;
    case 2:
      loading.value = true;
      setTimeout(() => {
        clearTimeout(timer);
        activeIndex1.value = 0;
        currentLoad.value = '';
        getMonitor();
        loading.value = false;
      }, 1000);
      break;
  }
}
//加载预警指标组件
function loadZb() {
  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) {
    loading.value = true;
    setTimeout(() => {
      clearTimeout(timer);
      activeIndex1.value = ind;
      getClearList();
      strType.value = item.strtype;
      currentLoad.value = '';
      getMonitor();
      loading.value = false;
    }, 1000);
  } else {
    loading.value = true;
    setTimeout(() => {
      clearTimeout(timer);
      activeIndex1.value = ind;
      getMonitor();
      loading.value = false;
    }, 1000);
  }
}
//加载组件
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();
  getMonitor();
});
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

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

@{theme-deepblue} {
  .fireWarn {
    --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');
  }
}

.fireWarn {
  --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');
  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: 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: 33%;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        text-align: center;
        color: var(--vent-font-color);
        cursor: pointer;
      }

      .btn1 {
        width: 33%;
        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% - 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: var(--vent-font-color);
          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: var(--vent-font-color);
          text-align: center;
          transform: translate(-60%, 0);
        }
      }
    }
  }

  .fire-content {
    width: calc(85% - 10px);
    height: 100%;
    margin-left: 10px;
    background: var(--image-border) no-repeat;
    background-size: 100% 100%;
  }
}

::v-deep .zxm-spin-nested-loading {
  height: 100%;
}

::v-deep .zxm-spin-container {
  height: 100%;
}
</style>