gasInjection-project/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) {
  timer = setTimeout(
    async () => {
      await getSysWarnList(deviceID, props.moduleObj.moduleName);
      if (timer) {
        timer = null;
      }
      getMonitor(deviceID);
    },
    500
  );
}

//清空数据
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)
      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)
        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)
}

//加载组件
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);
    } 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);
    } 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);
    } 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);
    }
  });
}
//获取预警详情弹窗右侧数据
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: 64px;
              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: 64px;
              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>