mky-vent-base/src/views/vent/home/colliery/index.vue

<template>
  <div v-if="pageType == 'home'" style="position: relative; width: 100%; height: 100%">
    <div class="home-container">
      <div class="header">
        <div class="head-time">
          <span>{{ nowTimeYear }}</span>
          <span>{{ nowTimeWeek }}</span>
          <span>{{ nowTime }}</span>
        </div>
        <div class="main-title">{{ title }}</div>
      </div>
      <div class="home-contents">
        <div class="left-content">
          <!-- 主通风机 -->
          <div class="monitor-box">
            <mainMonitor :maindata="mainList" @goDetail="goDetail" />
          </div>
          <!-- 局部通风机 -->
          <div class="monitor-box monitor-box1">
            <fanMonitor @goDetail="goDetail" :fandata="fanLocalList" />
          </div>
          <!-- 通风设备远程控制 -->
          <div class="monitor-box">
            <windDevice :devicedata="deviceData" @goDetail="goDetail" />
          </div>
        </div>
        <div class="center-content">
          <!-- 三维模型 -->
          <div class="three-box">
            <div class="three-nav" v-if="!hasPermission('monitor:show')">
              <template v-for="(item, index) in navList" :key="index">
                <div class="nav-item" v-if="(item.valList && item.valList.length > 0) || item.val">
                  <div class="item-label">{{ item.name }}</div>
                  <div class="item-value">
                    <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
                      <div class="box-line"></div>
                      <div class="value-text">{{ ite.val }}</div>
                    </div>
                    <div v-else class="value-text1">{{ item.val }}</div>
                  </div>
                </div>
              </template>
            </div>
            <div class="three-modal" id="modalBox" style="position: relative">
              <!-- <div class="btn-icon" @click="goModalDetail"></div> -->
              <!-- 展会不显示按钮 -->
              <div v-if="sysOrgCode !== 'mkyzhpt'" class="btn-icon" @click="goModalDetail"></div>
              <VentModal
                ref="centerModalRef"
                style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; background-color: #fff"
              />
            </div>
          </div>
          <!-- 风量监测 -->
          <div class="wind-box">
            <windMonitor :flList="flList" @goDetail="goDetail" />
          </div>
        </div>
        <div class="right-content">
          <!-- 关键通风路线 -->
          <div class="monitor-box">
            <windLine :lineList="lineList" @goDetail="goDetail" />
          </div>
          <!-- 工作面智能管控 -->
          <div class="monitor-box monitor-box1">
            <workMonitor :workList="workList" @goDetail="goDetail" />
          </div>
          <!-- 设备预警 -->
          <div class="monitor-box">
            <deviceWarn :warnData="warnData" @goDetail="goDetail" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <Network ref="NetworkRef" v-if="pageType == 'timesolution'" :pageResult="pageResult" @changePageType="changePageType" style="position: absolute" />
  <VentModal
    v-if="pageType == 'model3D' || pageType == 'timesolution'"
    ref="fullModalRef"
    style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"
  />
</template>
<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';
  import fanMonitor from './components/fan-monitor.vue';
  import mainMonitor from './components/main-monitor.vue';
  import windDevice from './components/wind-device.vue';
  import windMonitor from './components/wind-monitor.vue';
  import windLine from './components/wind-line.vue';
  import workMonitor from './components/work-monitor.vue';
  import deviceWarn from './components/device-warn.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { list } from './clique.api';
  import Network from '../../monitorManager/deviceMonitor/components/network/index.vue';
  import { useRouter } from 'vue-router';
  import { router } from '/@/router';
  // import { Modal } from 'ant-design-vue';
  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import dayjs from 'dayjs';
  import { getActions } from '/@/qiankun/state';
  import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
  import { getDate } from './clique.data';
  import VentModal from '/@/components/vent/micro/ventModal.vue';
  import { usePermission } from '/@/hooks/web/usePermission';

  const { currentRoute } = useRouter();
  const { hasPermission } = usePermission();

  const { title, logoUrl, sysOrgCode } = useGlobSetting();
  const actions = getActions();
  let timer: NodeJS.Timeout | null = null;
  let fanLocalList = reactive<any[]>([]); //局部风机数据
  let mainList = ref<any[]>([]); //主通风机数据
  let centerList = reactive<any[]>([]); //中间区域数据
  let flList = ref<any[]>([]); //风量监测数据
  let lineList = ref<any>([]); //关键路线数据
  let workList = ref<any>([]); //工作面数据
  let warnData = ref<any>([]); //预警数据
  let deviceData = ref<any>({}); //设备监测数据
  let navList = reactive([
    { name: '总回风量(m³/min)', isShow: true, valList: [] },
    { name: '总进风量(m³/min)', isShow: true, valList: [] },
    { name: '计划风量(m³/min)', isShow: true, valList: [] },
    // { name: '有效风量(m³/min)', isShow: true, valList: [] },
    // { name: '等积孔(m²)', isShow: true, valList: [] },
    // { name: '外部漏风率', isShow: false, val: 0 },
    { name: '有效风量率', isShow: false, val: '0%' },
  ]);
  let nowTimeYear = ref('');
  let nowTimeWeek = ref('');
  let nowTime = ref('');

  const centerModalRef = ref();
  const fullModalRef = ref();

  const globSetting = useGlobSetting();
  const pageType = ref('');
  let router = useRouter();
  const pageResult = ref({});

  function goDetail(deviceType) {
    //lxh
    // pageType.value = deviceType;
    if (deviceType == 'fanMain') {
      router.push('/monitorChannel/monitor-fanmain');
    } else if (deviceType == 'fanLocal') {
      if (sysOrgCode !== 'ymdnymdn') {
        router.push('/monitorChannel/monitor-fanlocal');
      } else {
        router.push('/fanlocal-page/home');
      }
    } else if (deviceType == 'windrect') {
      router.push('/monitorChannel/monitor-windrect');
    } else if (deviceType == 'warning') {
      router.push('/monitorChannel/monitor-alarm-home');
    }
  }
  function goHome() {
    pageType.value = 'home';
  }

  function getList() {
    list({}).then((res) => {
      console.log(res, 'res-----------');
      fanLocalList.length = 0;
      fanLocalList.push(res.fanlocal);
      mainList.value = res.fanmain;
      centerList = res.midinfo[0].sysdata;
      // 窝兔沟模拟风量
      // centerList = {
      //   zongfengliang: "8010", // 总风量
      //   xufengliang: '7232', // 有效风量
      //   zonghuifeng: '8188' // 总会风
      // }
      // 总回
      navList[0].valList =
        centerList && centerList.zonghuifeng
          ? centerList.zonghuifeng.split('').map((el) => {
              return { val: el };
            })
          : [];
      // 总进
      navList[1].valList =
        centerList && centerList.zongjinfeng
          ? centerList.zongjinfeng
              .toString()
              .split('')
              .map((el) => {
                return { val: el };
              })
          : [];
      // 计划风量
      navList[2].valList =
        centerList && centerList.xufengliang
          ? centerList.xufengliang
              .toString()
              .split('')
              .map((el) => {
                return { val: el };
              })
          : [];
      if (centerList && centerList.zongfengliang && centerList.zongjinfeng) {
        // 外部漏风率  （zongfengliang-zongjinfeng)/zongfengliang
        navList[3].val =
          (((parseFloat(centerList.zongfengliang) - parseFloat(centerList.zongjinfeng)) / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) +
          '%';
        // navList[4].val = ((centerList.xufengliang / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) + '%';
      } else {
        navList[3].val = '0%';
      }

      if (res.midinfo[0] && res.midinfo[0].sysinfo) {
        navList[4].val = (res.midinfo[0].sysinfo.useM3Perent ? res.midinfo[0].sysinfo.useM3Perent : '0') + '%';
      }

      flList.value = res.windrect || res.sys_wind;

      if (res.sys_majorpath.length != 0) {
        lineList.value = res.sys_majorpath;
      } else {
        let paramArr: any = [];
        // paramArr.push({
        //   deviceName: '关键路线1',
        //   deviceType: 'sys_majorpath',
        //   deviceID: Math.random() * 100,
        //   majorpath: {
        //     drag_1: 380,
        //     drag_2: 167,
        //     drag_3: 333,
        //     drag_total: Math.abs(
        //       Number(
        //         res.fanmain && res.fanmain[0]
        //           ? res.fanmain[0].readData.Fan1FanPre ||
        //               res.fanmain[0].readData.Fan2FanPre ||
        //               res.fanmain[0].readData.DataPa ||
        //               680 + (Math.random() * 2 - 1 * 5)
        //           : 680 + (Math.random() * 2 - 1 * 5)
        //       )
        //     ),
        //     m3_total: Number(
        //       res.fanmain && res.fanmain[0]
        //         ? res.fanmain[0].readData.Fan1m3 ||
        //             res.fanmain[0].readData.Fan2m3 ||
        //             res.fanmain[0].readData.m3 ||
        //             8138 + (Math.random() * 2 - 1 * 20)
        //         : 8138 + (Math.random() * 2 - 1 * 20)
        //     ),
        //   },
        // });
        lineList.value = paramArr;
      }

      if (res.sys_surface_caimei.length != 0) {
        workList.value = res.sys_surface_caimei;
      } else {
        let paramArr: any = [];
        // paramArr.push({
        //   deviceName: '工作面',
        //   deviceType: 'sys_surface_caimei',
        //   deviceID: '11111',
        //   history: [],
        //   jin: 100,
        //   hui: 200,
        //   xufengliang: 300,
        // });
        workList.value = getDate(paramArr);
      }
      warnData.value = res.warn || [];
      deviceData.value = res.device || {};
    });
  }

  //获取当前时间年月日时分秒
  function getNowTime() {
    setInterval(() => {
      nowTimeYear.value = dayjs().format('YYYY/MM/DD');
      let week = dayjs(new Date().getTime()).day();
      switch (week) {
        case 0:
          nowTimeWeek.value = '星期日';
          break;
        case 1:
          nowTimeWeek.value = '星期一';
          break;
        case 2:
          nowTimeWeek.value = '星期二';
          break;
        case 3:
          nowTimeWeek.value = '星期三';
          break;
        case 4:
          nowTimeWeek.value = '星期四';
          break;
        case 5:
          nowTimeWeek.value = '星期五';
          break;
        case 6:
          nowTimeWeek.value = '星期六';
          break;
      }
      let date = new Date();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      if (minutes >= 0 && minutes <= 9) {
        minutes = `0${minutes}`;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = `0${seconds}`;
      }
      nowTime.value = `${hours}:${minutes}:${seconds}`;
    }, 1000);
  }

  function goModalDetail() {
    router.push('/micro-vent-3dModal/dashboard/analysis?type=model3D');
  }

  const changePageType = (pageType) => {
    actions.setGlobalState({ pageObj: { pageType: pageType } });
  };

  onMounted(() => {
    const currentRouteObj = unref(currentRoute);
    if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
      pageType.value = 'model3D';
    } else {
      pageType.value = 'home';
    }
    actions.onGlobalStateChange((newState) => {
      for (const key in newState) {
        if (key === 'pageObj') {
          const pageObj = newState[key];
          if (pageObj && pageObj.pageType) {
            pageType.value = pageObj.pageType;
            if (pageObj.timesolution) {
              pageResult.value = pageObj.timesolution;
            }
          }
        }
      }
    });
    getNowTime();
    getList();
    timer = Number(
      setInterval(() => {
        getList();
      }, 10000)
    );
  });
  onBeforeUnmount(() => {
    clearInterval(timer);
    timer = null;
  });
  onUnmounted(() => {
    pageType.value = '';
  });
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  @font-face {
    font-family: 'yjsz';
    src: url('../../../../assets/font/yjsz.TTF');
  }

  .home-container {
    width: 100%;
    height: 100%;
    position: relative;

    .header {
      width: 100%;
      height: 76px;
      position: relative;
      background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;

      .head-time {
        position: absolute;
        top: 14px;
        left: 15px;
        color: #b5c9e9;
        font-size: 14px;

        span {
          margin-right: 20px;
          letter-spacing: 2px;
        }
      }

      .main-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 24px;
        font-family: 'douyuFont';
      }
    }

    .home-contents {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 76px);
      padding: 10px;
      box-sizing: border-box;

      .left-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-between;
        height: 100%;

        .monitor-box {
          display: flex;
          flex: 1;
          width: 100%;
          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
          background-size: 100% 100%;
        }

        .monitor-box1 {
          margin: 10px 0px;
        }
      }

      .center-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 2;
        height: 100%;
        margin: 0px 10px;

        .three-box {
          position: relative;
          display: flex;
          background-color: #fff;
          flex: 2;
          width: 100%;
          margin-bottom: 15px;
          background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
          background-size: 100% 100%;

          .three-nav {
            position: absolute;
            z-index: 9999;
            left: 50%;
            top: 38px;
            transform: translate(-50%, 0);
            width: 812px;
            height: 89px;
            padding: 0px 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;

            .nav-item {
              display: flex;
              flex: 1;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              height: 80%;

              .item-label {
                color: #98f5ff;
              }

              .item-value {
                position: relative;
                width: 125px;
                height: 37px;
                padding: 0px 5px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: url('../../../../assets/images/home-container/item-value.png') no-repeat;

                .bg-box {
                  position: relative;
                  width: 20px;
                  height: 26px;
                  border-bottom: 2px solid #063493;
                  background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));

                  .box-line {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                    height: 1px;
                    width: 100%;
                    background-color: rgba(6, 52, 147, 0.6);
                  }

                  .value-text {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: #fff;
                    font-size: 22px;
                    font-family: 'yjsz';
                    font-weight: 500;
                  }
                }

                .value-text1 {
                  width: 100%;
                  text-align: center;
                  color: #fff;
                  font-size: 22px;
                  font-family: 'yjsz';
                  font-weight: 500;
                }
              }
            }
          }

          .three-modal {
            width: 100%;
            height: 100%;
            padding: 20px 17px 20px 15px;
            box-sizing: border-box;
            // position: absolute;
            // background-color: var(--vent-base-color);

            .btn-icon {
              width: 40px;
              height: 40px;
              background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
              background-size: 100% 100%;
              position: absolute;
              z-index: 99999;
              bottom: 30px;
              right: 30px;
            }
          }
        }

        .wind-box {
          display: flex;
          flex: 1;
          width: 100%;
          background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .right-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 100%;

        .monitor-box {
          display: flex;
          flex: 1;
          width: 100%;
          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
          background-size: 100% 100%;
        }

        .monitor-box1 {
          margin: 10px 0px;
        }
      }
    }
  }

  // #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
  //   width: 100% !important;
  //   height: 100% !important;
  // }
</style>