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>{{ 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" style="position: relative;">
              <div class="btn-icon" @click="goModalDetail"></div>
              <div id="vent-model" style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"></div>
            </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 :pageType="pageType" @goHome="goHome" /> -->

  </div>
  <div v-else id="vent-model" style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"></div>
</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 DeviceMonitor from '../../monitorManager/deviceMonitor/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 moment from 'moment';
import { getActions } from '/@/qiankun/state';
import { unmountMicroApps, mountMicroApp } from '/@/qiankun'
import { resetMicroContentWH } from '/@/utils/domUtils'
import { getDate } from './clique.data'

const { currentRoute } = useRouter();
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²)', isShow: true, valList: [{ val: '0' }, { val: '6' }, { val: '.' }, { val: '2' }, { val: '0' }] },
  { 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;
  if (deviceType == 'fanMain') {
    router.push('/monitorChannel/monitor-fanmain');
  } else if (deviceType == 'fanLocal') {
    router.push('/monitorChannel/monitor-fanlocal');
  } 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.zongfengliang
      ? centerList.zongfengliang.split('').map((el) => {
        return { val: el };
      })
      : [];
    navList[1].valList = centerList && centerList.xufengliang
      ? centerList.xufengliang
        .toString()
        .split('')
        .map((el) => {
          return { val: el };
        })
      : [];

    if (centerList && centerList.zongfengliang && centerList.zonghuifeng) {
      navList[3].val =
        (((parseFloat(centerList.zonghuifeng) - parseFloat(centerList.zongfengliang)) / 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 || 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: 680 + (Math.random() * 2 - 1 * 5),
          m3_total: 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: '12204工作面',
        deviceType: 'sys_surface_caimei',
        deviceID: Math.random() * 100,
        history: [],
        jin: 100,
        hui: 200,
        xufengliang: 300,
      })
      workList.value = getDate(paramArr)
    }
    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() {
  router.push('/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D')
  // history.pushState({}, '', '/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
  // location.reload()
  pageType.value = 'model3D'
}

onMounted(() => {
  const currentRouteObj = unref(currentRoute)
  if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
    pageType.value = 'model3D'
  }

  mountMicroApp('/micro-vent-3dModal')

  getList();
  timer = Number(
    setInterval(() => {
      getList();
    }, 10000)
  );
  resetMicroContentWH('vent-model')
});
onBeforeUnmount(() => {
  unmountMicroApps(['/micro-vent-3dModal'])
  actions.setGlobalState({ url: { path: '', query: {} } });
  clearInterval(timer);
  timer = null
});

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