提交文件

src/views/vent/home/configurable/index copy.vue

@@ -1,550 +0,0 @@
-<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">
-              <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>
-              <VentModal ref="centerModalRef" style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
-            </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>
-  <VentModal v-if="pageType == 'model3D'" 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 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 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';
-  const { currentRoute } = useRouter();
-  const { title, logoUrl } = 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²)', 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();
-
-  function goDetail(deviceType) {
-    //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 };
-              })
-          : [];
-      navList[2].valList =
-        centerList && centerList.dengjikong
-          ? (Number(centerList.dengjikong) > 10 ? centerList.dengjikong.toFixed(2) : `0${centerList.dengjikong.toFixed(2)}`)
-              .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/modelchannel/model3D/home?deviceType=model3D');
-    // history.pushState({}, '', '/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
-    // location.reload()
-  }
-
-  onMounted(() => {
-    const currentRouteObj = unref(currentRoute);
-    if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
-      pageType.value = 'model3D';
-    } else {
-      pageType.value = 'home';
-    }
-    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: 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>
-./configurable.api

src/views/vent/monitorManager/groutMonitor/components/groutHomeHjt.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="monitor-container">
+    <div class="header-box">
+      <div class="header-container">
+        <div class="device-detail">
+          <div class="device-val">注浆站流量计瞬时流量 :</div>
+          <div class="device-val">注浆站流量计累计流量 :</div>
+          <div class="device-val">注浆站流量计运行时间 :</div>
+        </div>
+        <div class="device-detail">
+          <div class="device-val">
+            <span :style="{ color: '#10BC79' }">{{ monitorData['InputFlux'] !== undefined ? monitorData['InputFlux'] : '-' }}</span>
+          </div>
+          <div class="device-val">
+            <span :style="{ color: '#10BC79' }">{{
+              monitorData['CurrentCumulativeFlow'] !== undefined ? monitorData['CurrentCumulativeFlow'] : '-'
+            }}</span>
+          </div>
+          <div class="device-val">
+            <span :style="{ color: '#10BC79' }">{{
+              monitorData['AccumulateRunDuration'] !== undefined ? monitorData['AccumulateRunDuration'] : '-'
+            }}</span>
+          </div>
+        </div>
+        <div class="device-detail">
+          <div class="device-val">
+            <span :style="{ color: '#BFBFBF' }">m³</span>
+          </div>
+          <div class="device-val">
+            <span :style="{ color: '#BFBFBF' }">m³/min</span>
+          </div>
+          <div class="device-val">
+            <span :style="{ color: '#BFBFBF' }">h</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; height: 100%; margin: auto; pointer-events: none"> </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, defineProps, watch } from 'vue';
+  import { mountedThree, destroy, setModelType } from '../grout.threejs';
+  import { list } from '../grout.api';
+  import { useCamera } from '/@/hooks/system/useCamera';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    deviceType: {
+      type: String,
+      require: true,
+    },
+  });
+
+  const loading = ref(false);
+  const monitorData = ref({ InputFlux: undefined });
+  const playerRef = ref();
+  const { getCamera, removeCamera } = useCamera();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      return new Promise(async (resolve) => {
+        timer = setTimeout(
+          async () => {
+            if (props.deviceId) {
+              await getDataSource(props.deviceId);
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+          },
+          flag ? 0 : 1000
+        );
+      });
+    }
+  }
+
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      if (item.type.startsWith('pulping')) {
+        monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
+      loading.value = false;
+    }
+  }
+
+  watch(
+    () => props.deviceId,
+    async (deviceId) => {
+      if (deviceId) {
+        await getCamera(deviceId, playerRef.value);
+      }
+    }
+  );
+
+  onMounted(() => {
+    timer = null;
+    getMonitor(true);
+    loading.value = true;
+    mountedThree().then(async () => {
+      await setModelType('bertaiBase');
+      loading.value = false;
+    });
+  });
+  onUnmounted(() => {
+    destroy();
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  .monitor-container {
+    width: 100%;
+    height: 100%;
+    // height: 550px;
+    // border: 1px solid #fff;
+    margin-top: 40px;
+    display: flex;
+    // justify-content: space-between;
+    justify-content: center;
+    padding: 0 5px;
+
+    .header-box {
+      // width: 100%;
+      margin-top: 50px;
+      .header-container {
+        height: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        color: #fff;
+        box-shadow: 0 0 30px rgb(0, 153, 184) inset;
+      }
+      .device-title {
+        width: 110px;
+        text-align: center;
+        border-top: 1px solid #00baffd4;
+        border-left: 1px solid #00baffd4;
+        line-height: 46px;
+        color: #00e5ff;
+        background-color: #00bbff21;
+      }
+      .device-detail {
+        text-align: center;
+        width: 250px;
+        &:first-child {
+          background-color: #00bbff11;
+        }
+        &:last-child {
+          .device-val,
+          .device-title {
+            border-right: 1px solid #00baffd4;
+          }
+        }
+        .device-val {
+          line-height: 36px;
+          border-top: 1px solid #00baffd4;
+          border-left: 1px solid #00baffd4;
+          &:last-child {
+            border-bottom: 1px solid #00baffd4;
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
+
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+
+    .input-title {
+      color: #73e8fe;
+      width: auto;
+    }
+
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88 !important;
+    }
+
+    margin-right: 10px;
+  }
+</style>