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

<template>
  <div style="position: relative; width: 100%; height: 100%">
    <div class="home-container" v-if="pageType == 'home'">
      <div class="header">
        <div class="head-time">
          <span>{{ nowTime }}</span>
          <span>{{ weeks }}</span>
          <span>{{ timeDate }}</span>
        </div>
        <div class="main-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">
              <div class="nav-item" v-for="(item, index) in navList" :key="index">
                <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>
            </div>
            <div class="three-modal" id="modalBox">
              <div class="btn-icon" @click="goModalDetail"></div>
              <!-- <iframe
                id="iframe"
                ref="iframe"
                src="http://182.92.126.35:8091/user/autologin"
                scrolling="auto"
                frameborder="0"
                width="100%"
                height="100%"
              ></iframe> -->
            </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>
    <DeviceMonitor v-else-if="pageType" :pageType="pageType" @goHome="goHome" />
    <div id="content" style="width: 100%; height: 100%; position: fixed"></div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref, nextTick, computed } 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 DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
import { useRouter } from 'vue-router';
// import { Modal } from 'ant-design-vue';
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import moment from 'moment';
import { getActions } from '/@/qiankun/state';

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²)', isShow: true, valList: [{ val: '1' }, { val: '0' }, { val: '.' }, { val: '5' }, { val: '4' }] },
  { name: '外部漏风率', isShow: false, val: 0 },
  { name: '有效风量率', isShow: false, val: 0 },
]);

const globSetting = useGlobSetting();
const pageType = ref('home');
let router = useRouter();

function goDetail(deviceType) {
  // Modal.confirm({
  //   content: () => '暂未连接井下设备！',
  //   icon: () => createVNode(ExclamationCircleOutlined),
  //   title: '消息提示',
  //   onOk() {
  //     return new Promise((resolve, reject) => {
  //       setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
  //     }).catch(() => console.log('Oops errors!'));
  //   },
  //   cancelText: () => '取消',
  //   onCancel() {
  //     Modal.destroyAll();
  //   },
  // });

  //lxh
  // pageType.value = deviceType;
  // changeModalBox();
  if (deviceType == 'zhu') {
    router.push('/monitorChannel/monitor-fan-main');
  } else if (deviceType == 'ju') {
    router.push('/monitorChannel/monitor-fan-local');
  } else {
    router.push('/monitorChannel/monitor-gate');
  }
}
function goHome() {
  pageType.value = 'home';
  nextTick(() => {
    changeModalBox();
  });
}
function changeModalBox() {
  if (pageType.value === 'home') {
    const dom = document.getElementById('modalBox') as HTMLElement;
    if (dom && dom.parentElement) {
      const contentDom = document.getElementById('content') as HTMLElement;
      contentDom?.setAttribute(
        'style',
        `top: ${dom.parentElement.offsetTop + 20}px; left: ${dom.parentElement.offsetLeft + 20}px; width: ${dom.offsetWidth - 40}px; height: ${dom.offsetHeight - 40
        }px; position: fixed;`
      );
    }
  } else {
    const dom = document.getElementById('modalBox') as HTMLElement;
    if (dom && dom.parentElement) {
      const contentDom = document.getElementById('content') as HTMLElement;
      contentDom?.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed;`);
    }
  }
}
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;
    navList[0].valList = centerList.zongfengliang
      ? centerList.zongfengliang.split('').map((el) => {
        return { val: el };
      })
      : [];
    navList[1].valList = centerList.xufengliang
      ? centerList.xufengliang
        .toString()
        .split('')
        .map((el) => {
          return { val: el };
        })
      : [];

    if (centerList.zongfengliang && centerList.zonghuifeng) {
      navList[3].val =
        (((parseFloat(centerList.zongfengliang) - parseFloat(centerList.zonghuifeng)) / parseFloat(centerList.zonghuifeng)) * 100).toFixed(2) + '%';
      navList[4].val = ((centerList.xufengliang / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) + '%';
    } else {
      navList[3].val = '0%';
      navList[4].val = '0%';
    }

    flList.value = res.windrect;
    lineList.value = res.sys_majorpath;
    workList.value = res.sys_surface_caimei;
    warnData.value = res.warn;
    deviceData.value = res.device;
  });
}
let weeks = computed(() => {
  let week = moment(new Date().getTime()).day();
  switch (week) {
    case 0:
      return '星期日';
      break;
    case 1:
      return '星期一';
      break;
    case 2:
      return '星期二';
      break;
    case 3:
      return '星期三';
      break;
    case 4:
      return '星期四';
      break;
    case 5:
      return '星期五';
      break;
    case 6:
      return '星期六';
      break;
  }
});
let nowTime = computed(() => {
  return moment().format('YYYY/MM/DD');
});
let timeDate = computed(() => {
  return moment().format('HH:MM:SS');
});

function goModalDetail() {
  actions.setGlobalState({ pageObj: { pageType: 'model3D' } });
}

onMounted(() => {
  getList();
  changeModalBox();
  const renderModal = () => {
    const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__');
    if (element) {
      element?.setAttribute('style', 'width: 100%; height: 100%');
    } else {
      setTimeout(() => {
        renderModal();
      }, 2000);
    }
  };
  renderModal();
  timer = Number(
    setInterval(() => {
      getList();
    }, 10000)
  );
});
</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: relative;

          .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>