vent-template/src/views/vent/monitorManager/alarmMonitor/DetailModalFire.vue

<template>
  <BasicModal @register="register" :title="titleName" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
    <div class="alarm-modal">
      <div class="containers">
        <div class="alarm-menu">
          <div class="type-btn" v-if="isShowModule">
            <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="alarm-content">
          <component :is="componentName[current]" :listData="listData" :strType="strType" />
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { typeMenuList, componentName } from './fire.data';
  import { sysTypeWarnList, sysWarn } from './alarm.api';

  let props = defineProps({
    moduleObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  let listData = reactive({
    common: {},
    bundletube: [],
    fiber: [],
    fire: [],
    smoke: [],
    spray: [],
    temperature: [],
  }); //详情数据
  let isShowModule = ref(true); //是否显示内外因火灾切换按钮
  let titleName = ref('');
  let menuList = reactive<any[]>([]); //左侧菜单列表
  let menuList1 = reactive({
    external: [],
    internal: [],
  });
  //内外因火灾激活索引
  let activeIndex = ref(0);
  //当前激活菜单的索引
  let activeIndex1 = ref(0);
  //当前加载组件
  let current = ref('');

  let strType = ref(''); //火灾外因-区别工作面和煤层

  const emit = defineEmits(['close', 'register']);

  // 注册 modal
  const [register, { closeModal }] = useModalInner();

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

  //清空数据
  function getClearList() {
    listData.common = {};
    listData.bundletube.length = 0;
    listData.fiber.length = 0;
    listData.fire.length = 0;
    listData.smoke.length = 0;
    listData.spray.length = 0;
    listData.temperature.length = 0;
  }

  async function onSubmit() {
    activeIndex1.value = 0;
    activeIndex.value = 0;
    getClearList();
    clearTimeout(timer);
    emit('close');
    closeModal();
  }
  //内外因火灾选项切换
  function btnClick(ind) {
    activeIndex.value = ind;
    switch (ind) {
      case 0:
        activeIndex1.value = 0;
        menuList.length = 0;
        current.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;
        current.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);
          current.value = '';
        }
        break;
    }
  }
  //菜单选项切换
  function cardClick(ind, item) {
    activeIndex1.value = ind;
    strType.value = item.strtype;
    clearTimeout(timer);
    getClearList();
    if (props.moduleObj.moduleName == 'fire') {
      current.value = '';
    }
    getMonitor(item.deviceID, true);
  }

  //加载组件
  function loadZj() {
    if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
      current.value = 'fireWork';
    } else if (!activeIndex.value && listData.bundletube.length != 0) {
      current.value = 'closeWall';
    } else if (activeIndex.value) {
      current.value = 'mainWell';
      // current.value = ''
    } else {
      current.value = '';
    }
  }

  //获取预警详情弹窗左侧数据
  function getSysTypeWarnList(data) {
    sysTypeWarnList({ type: data }).then((res) => {
      if (props.moduleObj.moduleName == 'vent') {
        res.forEach((el) => {
          menuList.push({
            name: el.deviceName,
            warn: el.netStatus ? '高风险' : '低风险',
            type: 'on',
            deviceID: el.deviceID,
            strtype: el.deviceType,
          });
        });
        getMonitor(menuList[0].deviceID, true);
      } else if (props.moduleObj.moduleName == 'fire') {
        menuList1.external = res.external;
        menuList1.internal = res.internal;
        menuList1.internal.forEach((el) => {
          menuList.push({
            name: el.systemname,
            warn: '低风险',
            type: 'on',
            deviceID: el.id,
            strtype: el.strtype,
          });
        });
        getMonitor(menuList[0].deviceID, true);
      } else if (props.moduleObj.moduleName == 'dust') {
        res.forEach((el) => {
          menuList.push({
            name: el.systemname,
            warn: '低风险',
            type: 'on',
            deviceID: el.id,
            strtype: el.strtype,
          });
        });
        getMonitor(menuList[0].deviceID, true);
      } else if (props.moduleObj.moduleName == 'gas') {
        res.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) => {
      if (type == 'fire') {
        (listData.bundletube = res.bundletube), (listData.fiber = res.fiber);
        (listData.fire = res.fire), (listData.smoke = res.smoke), (listData.spray = res.spray), (listData.temperature = res.temperature), loadZj();
      } else if (type == 'vent' || type == 'dust' || type == 'gas') {
        listData.common = res;
      }
    });
  }

  watch(
    () => props.moduleObj,
    (val) => {
      if (val.moduleName == 'fire') {
        menuList.length = 0;
        menuList1.external.length = 0;
        menuList1.internal.length = 0;
        current.value = '';
        titleName.value = '火灾监测';
        isShowModule.value = true;
        getSysTypeWarnList('fire');
      } else if (val.moduleName == 'dust') {
        menuList.length = 0;
        current.value = '';
        titleName.value = '粉尘监测';
        isShowModule.value = false;
        current.value = 'dustPage';
        getSysTypeWarnList('dust');
      } else if (val.moduleName == 'vent') {
        menuList.length = 0;
        current.value = '';
        titleName.value = '通风监测';
        isShowModule.value = false;
        current.value = 'ventilate';
        getSysTypeWarnList('vent');
      } else if (val.moduleName == 'gas') {
        menuList.length = 0;
        current.value = '';
        titleName.value = '瓦斯监测';
        isShowModule.value = false;
        current.value = 'gasPage';
        getSysTypeWarnList('gas');
      }
    },
    { immediate: true, deep: true }
  );

  onMounted(async () => {});
</script>
<style scoped lang="less">
  @import '/@/design/vent/color.less';
  @import '/@/design/vent/modal.less';

  .alarm-modal {
    position: relative;
    z-index: 999;

    max-height: calc(100vh - 150px);

    .@{ventSpace}-tabs {
      max-height: calc(100vh - 100px);
    }

    .containers {
      width: 100%;
      height: calc(100vh - 159px);
      display: flex;
      justify-content: space-between;

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

        .type-btn {
          width: 68%;
          height: 28px;
          line-height: 28px;
          border: 1px solid #0058ee;
          margin-bottom: 20px;
          border-radius: 5px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;

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

          .btn1 {
            width: 50%;
            height: 100%;
            font-size: 14px;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            background: #0058ee;
            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;

            @media screen and (max-width: 1920px) {
              .text {
                width: 80%;
                position: absolute;
                left: 50%;
                top: 22px;
                font-size: 16px;
                color: #01fefc;
                text-align: center;
                transform: translate(-50%, 0);
              }
            }

            @media screen and (min-width: 1921px) and (max-width: 2560px) {
              .text {
                width: 100%;
                position: absolute;
                left: 50%;
                top: 38px;
                font-size: 16px;
                color: #01fefc;
                text-align: center;
                transform: translate(-50%, 0);
              }
            }

            @media screen and (max-width: 1920px) {
              .warn {
                width: 100%;
                position: absolute;
                left: 50%;
                top: 70px;
                font-size: 16px;
                color: #fff;
                text-align: center;
                transform: translate(-50%, 0);
              }
            }

            @media screen and (min-width: 1921px) and (max-width: 2560px) {
              .warn {
                width: 100%;
                position: absolute;
                left: 50%;
                top: 103px;
                font-size: 16px;
                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;

            @media screen and (max-width: 1920px) {
              .text {
                width: 80%;
                position: absolute;
                left: 50%;
                top: 22px;
                font-size: 16px;
                color: #01fefc;
                text-align: center;
                transform: translate(-62%, 0);
              }
            }

            @media screen and (min-width: 1921px) and (max-width: 2560px) {
              .text {
                width: 100%;
                position: absolute;
                left: 50%;
                top: 38px;
                font-size: 16px;
                color: #01fefc;
                text-align: center;
                transform: translate(-60%, 0);
              }
            }

            @media screen and (max-width: 1920px) {
              .warn {
                width: 100%;
                position: absolute;
                left: 50%;
                top: 70px;
                font-size: 16px;
                color: #fff;
                text-align: center;
                transform: translate(-60%, 0);
              }
            }

            @media screen and (min-width: 1921px) and (max-width: 2560px) {
              .warn {
                width: 100%;
                position: absolute;
                left: 50%;
                top: 103px;
                font-size: 16px;
                color: #fff;
                text-align: center;
                transform: translate(-60%, 0);
              }
            }
          }
        }
      }

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

  :deep(.@{ventSpace}-tabs-tabpane-active) {
    height: 100%;
  }

  :deep(.@{ventSpace}-tabs-card) {
    .@{ventSpace}-tabs-tab {
      background: linear-gradient(#2cd1ff55, #1eb0ff55);
      border-color: #74e9fe;
      border-radius: 0%;

      &:hover {
        color: #64d5ff;
      }
    }

    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
      color: aqua;
    }

    .@{ventSpace}-tabs-nav::before {
      border-color: #74e9fe;
    }

    .@{ventSpace}-picker,
    .@{ventSpace}-select-selector {
      width: 100% !important;
      background: #00000017 !important;
      border: 1px solid @vent-form-item-boder !important;

      input,
      .@{ventSpace}-select-selection-item,
      .@{ventSpace}-picker-suffix {
        color: #fff !important;
      }

      .@{ventSpace}-select-selection-placeholder {
        color: #b7b7b7 !important;
      }
    }

    .@{ventSpace}-pagination-next,
    .action,
    .@{ventSpace}-select-arrow,
    .@{ventSpace}-picker-separator {
      color: #fff !important;
    }

    .@{ventSpace}-table-cell-row-hover {
      background: #264d8833 !important;
    }

    .@{ventSpace}-table-row-selected {
      background: #00c0a311 !important;

      td {
        background-color: #00000000 !important;
      }
    }

    .@{ventSpace}-table-thead {
      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
      background: #3d9dd45d !important;

      & > tr > th,
      .@{ventSpace}-table-column-title {
        // color: #70f9fc !important;
        border-color: #84f2ff !important;
        border-left: none !important;
        border-right: none !important;
        padding: 7px;
      }
    }

    .@{ventSpace}-table-tbody {
      tr > td {
        padding: 12px;
      }
    }

    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
      background-color: #26648855 !important;
    }

    .jeecg-basic-table-row__striped {
      // background: #97efff11 !important;
      td {
        background-color: #97efff11 !important;
      }
    }
  }
</style>