Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

.env.development

@@ -26,5 +26,6 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//182.92.126.35:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8090/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+#VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

src/layouts/default/sider/bottomSideder.vue

@@ -66,6 +66,7 @@
   import { PageEnum } from '/@/enums/pageEnum';
   import { useGlobSetting } from '/@/hooks/setting';
   import { unmountMicroApps } from '/@/qiankun';
+  import { watch } from 'vue';
 
   export default defineComponent({
     name: 'BottomSider',
@@ -86,6 +87,9 @@
       }
 
       async function handleMenuClick(path: Menu) {
+        if (path.path == currentRoute.value.fullPath) {
+          return;
+        }
         if (path.path.includes('sw/monitor-fanmain')) {
           // 上湾主风机
           var url = window.open('_blank') as Window; //打开一个窗口，然后用
@@ -98,12 +102,13 @@
           url.location = 'https://swkhmi.shendong.vip:9043/#SW_CA'; //使这个窗口跳转到。
           return;
         }
-        if (route.path.startsWith('/micro-vent-3dModal')) {
-          if (path.path.startsWith('/micro-vent-3dModal') && route.path.startsWith('/micro-vent-3dModal')) {
+        if (currentRoute.value.path.startsWith('/micro-vent-3dModal')) {
+          if (path.path.startsWith('/micro-vent-3dModal') && currentRoute.value.path.startsWith('/micro-vent-3dModal')) {
             unmountMicroApps(['/micro-vent-3dModal']);
-            nextTick(() => {
-              go(path.path);
-            });
+            // nextTick(() => {
+            //   go(path.path);
+            // });
+            go(path.path);
           } else {
             go(path.path);
           }
@@ -115,7 +120,7 @@
       }
 
       function geHome() {
-        if (route.path.startsWith('/micro-vent-3dModal/dashboard/analysis')) {
+        if (currentRoute.value.path.startsWith('/micro-vent-3dModal/dashboard/analysis')) {
           if (glob.homePath == '/micro-vent-3dModal/dashboard/analysis' || PageEnum.BASE_HOME == '/micro-vent-3dModal/dashboard/analysis') {
             actions.setGlobalState({ pageObj: { pageType: 'home' } });
             go(glob.homePath || PageEnum.BASE_HOME);

src/views/vent/deviceManager/pointTabel/point.data.ts

@@ -15,6 +15,11 @@ export const columns: BasicColumn[] = [
     dataIndex: 'devicekind_dictText',
     width: 120,
   },
+  {
+    title: '设备大类',
+    dataIndex: 'devicekind',
+    width: 120,
+  },
   {
     title: '点表类型',
     dataIndex: 'devicetype',

src/views/vent/deviceManager/tableColumns/tableColumns.data.ts

@@ -1,14 +1,17 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { selectDevice } from './tableColumns.api';
-import { rules } from '/@/utils/helper/validator';
-import { render } from '/@/utils/common/renderUtils';
+
 export const columns: BasicColumn[] = [
   {
-    title: '显示类型',
+    title: '设备大类',
     dataIndex: 'devicekind',
     width: 120,
   },
+  {
+    title: '设备小类',
+    dataIndex: 'devicetype',
+    width: 120,
+  },
   {
     title: '显示字段',
     dataIndex: 'des',

src/views/vent/home/billboard/billboard.data.ts

@@ -10,36 +10,43 @@ import rightImg from '/@/assets/images/files/homes/sp.svg';
 export const BILLBOARDS = [
   {
     title: 'A矿',
+    type: 'dust',
   },
   {
     title: 'B矿',
+    type: 'fire',
   },
   {
     title: 'C矿',
+    type: 'file',
   },
   {
     title: 'D矿',
+    type: 'ventilate',
   },
   {
     title: 'E矿',
+    type: 'gas',
   },
   {
     title: 'F矿',
+    type: 'dust',
   },
   {
     title: 'G矿',
+    type: 'fire',
   },
   {
     title: 'H矿',
+    type: 'file',
   },
   {
     title: 'I矿',
+    type: 'ventilate',
   },
   {
     title: 'J矿',
-  },
-  {
-    title: 'K矿',
+    type: 'gas',
   },
 ];
 

src/views/vent/home/billboard/components/BaseCard.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="card" :style="{ height: `${height}px` }">
-    <p class="card_title">
+    <p class="card_title" @click="alert">
       <slot name="title">{{ title }}</slot>
     </p>
     <div class="card_content" :style="{ height: `${contentHeight}px` }">
@@ -25,6 +25,10 @@
       contentHeight: 300,
     }
   );
+
+  function alert() {
+    window.alert('123');
+  }
 </script>
 <style lang="less" scoped>
   @font-face {

src/views/vent/home/billboard/components/CommonTitle.vue

@@ -36,5 +36,6 @@
 
   .common-title__value {
     color: @vent-gas-primary-text;
+    padding-right: 10px;
   }
 </style>

src/views/vent/home/billboard/components/FileOverview.vue

@@ -23,8 +23,10 @@
   }
 
   .card-b {
+    height: 100%;
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     .box {
       display: flex;

src/views/vent/home/billboard/components/FireStatus.vue

@@ -8,6 +8,7 @@
     :label="item.label"
     :value="data[item.prop]"
     :type="i % 2 ? 'green' : 'blue'"
+    class="mt-5px"
   />
 </template>
 <script lang="ts" setup>

src/views/vent/home/billboard/components/GasStatus.vue

@@ -1,11 +1,11 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Row>
-    <Col v-for="(item, i) in headerConfig" :key="`svvhbcgs${i}`" :span="12">
+  <Row justify="space-around">
+    <Col v-for="(item, i) in headerConfig" :key="`svvhbcgs${i}`" :span="10">
       <LargeBoard :label="item.label" :value="data[item.prop]" :type="item.type" />
     </Col>
-    <CommonTable class="mt-10px" :columns="BASIC_COLUMN" :data="data" />
   </Row>
+  <CommonTable class="mt-10px" :columns="BASIC_COLUMN" :data="data" />
 </template>
 <script lang="ts" setup>
   import { Row, Col } from 'ant-design-vue';

src/views/vent/home/billboard/components/MiniBoard.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  /** 宽高固定 205 * 62 */
+  /** 宽高固定 auto * 62 */
   withDefaults(
     defineProps<{
       label: string;
@@ -31,10 +31,10 @@
   .list-item {
     height: 62px;
     line-height: 62px;
-    width: 205px;
+    // width: 200px;
     padding: 0 30px;
     box-sizing: border-box;
-    background-size: 100% 100%;
+    background-size: 100% auto;
   }
 
   .list-item-green-to-right {

src/views/vent/home/billboard/components/VentilationStatus.vue

@@ -1,17 +1,18 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Row>
+  <Row justify="space-between">
     <Col v-for="(item, i) in headerConfig" :key="`svvhbcvs${i}`" :span="12">
       <MiniBoard :label="item.label" :value="data[item.prop]" :type="item.type" />
     </Col>
     <div class="ventilate-status-card">
       <CommonTitle label="通风系统数量" :value="ventilatorCount" />
-      <Tree class="h-180px" :tree-data="treeData" @click="consoleLog" @select="consoleLog" />
+      <BasicTree class="ventilate-status-card__tree" :tree-data="treeData" :virtual="false" />
     </div>
   </Row>
 </template>
 <script lang="ts" setup>
-  import { Row, Col, Tree } from 'ant-design-vue';
+  import { Row, Col } from 'ant-design-vue';
+  import { BasicTree } from '/@/components/Tree';
   import type { TreeProps } from 'ant-design-vue';
   import { VENTILATION_STATUS_HEADER_CONFIG } from '../billboard.data';
   import MiniBoard from './MiniBoard.vue';
@@ -30,24 +31,28 @@
         {
           title: 'parent 1-0',
           key: '0-0-0',
-          disabled: true,
-          children: [
-            { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
-            { title: 'leaf', key: '0-0-0-1' },
-          ],
         },
         {
           title: 'parent 1-1',
           key: '0-0-1',
-          children: [{ key: '0-0-1-0', title: 'sss' }],
+        },
+      ],
+    },
+    {
+      title: 'parent 2',
+      key: '1-0',
+      children: [
+        {
+          title: 'parent 2-0',
+          key: '1-0-0',
+        },
+        {
+          title: 'parent 2-1',
+          key: '1-0-1',
         },
       ],
     },
   ];
-
-  function consoleLog(...args) {
-    console.log(...args);
-  }
 </script>
 <style lang="less" scoped>
   .ventilate-status-card {
@@ -57,9 +62,14 @@
     background-size: 100% 100%;
     background: url('@/assets/images/company/area1.png') no-repeat center;
 
-    ::v-deep(.zxm-tree) {
-      color: @white;
-      background-color: transparent;
+    // ::v-deep(.zxm-tree) {
+    //   color: @white;
+    //   background-color: transparent;
+    // }
+
+    .ventilate-status-card__tree {
+      height: 130px;
+      overflow: auto;
     }
   }
 </style>

src/views/vent/home/billboard/index.vue

@@ -5,23 +5,11 @@
       <div class="main-title">{{ mainTitle }}</div>
     </div>
     <a-row class="company-content" :gutter="10">
-      <!-- <Transition name="fade-in"> -->
-      <a-col v-for="(item, i) in cards" :key="i" :span="6">
+      <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
         <BaseCard :title="item.title">
-          <!-- <CommonTitle class="mb-10px" label="测试" value="是我啊" />
-          <CommonTable :columns="COLUMN_A" :data="[{ a: 1, b: 2, c: 3 }]" /> -->
-          <!-- <ListItemA icon="warning-CO-2" label="LIA" value="233" type="blue" />
-          <ListItemA icon="warning-smoke-2" label="LIA" value="233" type="green" />
-          <ListItemB label="LIB" value="244" type="green-to-right" />
-          <ListItemB label="LIB" value="244" type="green-to-left" />
-          <ListItemB label="LIB" value="244" type="blue-to-right" />
-          <ListItemB label="LIB" value="244" type="blue-to-left" /> -->
-          <!-- <ListItemC label="LIC" value="244" type="to-top-right" />
-          <ListItemC label="LIC" value="244" type="to-bottom-right" /> -->
-          <GasStatus />
+          <component :is="COMPONENTS_MAP.get(item.type)" />
         </BaseCard>
       </a-col>
-      <!-- </Transition> -->
     </a-row>
     <ArrowButton point-to="left" class="company__arrow_left" @click="changeCurrentPage(-1)" />
     <ArrowButton point-to="right" class="company__arrow_right" @click="changeCurrentPage(1)" />
@@ -31,19 +19,20 @@
   import { computed, ref } from 'vue';
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
-  import { BILLBOARDS } from './billboard.data';
-  import GasStatus from './components/GasStatus.vue';
+  import { BILLBOARDS, COMPONENTS_MAP } from './billboard.data';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const mainTitle = computed(() => '国家能源神东煤炭集团');
 
   // 一页最多支持几个看板项
+  const billboards = ref(BILLBOARDS); // for test
   const pageSize = 8;
   // 当前页
   const currentPage = ref(1);
-  const totalPage = Math.ceil(BILLBOARDS.length / pageSize) + 1;
-  const cards = computed<{ title: string }[]>(() => {
-    return BILLBOARDS.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize);
+  const totalPage = Math.ceil(billboards.value.length / pageSize) + 1;
+  // 能真正在页面上展示的看板
+  const shownBillboards = computed(() => {
+    return billboards.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize);
   });
   function changeCurrentPage(pagecount: number) {
     currentPage.value = Math.max((currentPage.value + pagecount) % totalPage, 1);
@@ -60,6 +49,8 @@
     height: 100%;
     color: #fff;
     position: relative;
+    background: url('@/assets/images/company/content-bg.png') no-repeat;
+    background-size: 100% 100%;
     // background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
     // background-size: 100% 100%;
 
@@ -67,8 +58,6 @@
       width: 100%;
       height: 97px;
       background: url('@/assets/images/company/top-bg.png') no-repeat center;
-      position: absolute;
-      z-index: 1;
       .main-title {
         height: 96px;
         font-family: 'douyuFont';
@@ -82,11 +71,8 @@
 
     .company-content {
       width: 100%;
-      height: 100%;
-      background: url('@/assets/images/company/content-bg.png') no-repeat;
-      background-size: 100% 100%;
-      pointer-events: none;
-      padding: 100px 100px 0 100px;
+      height: calc(100% - 97px);
+      padding: 50px 100px 0 100px;
     }
     .company__arrow_left {
       position: absolute;

src/views/vent/monitorManager/comment/HistoryTable.vue

@@ -291,6 +291,7 @@
       size: 'small',
       scroll: tableScroll,
       showIndexColumn: true,
+      tableLayout: 'auto',
       formConfig: {
         labelAlign: 'left',
         showAdvancedButton: false,
@@ -350,8 +351,10 @@
                       if (option && (option['strinstallpos'] || option['strtype'] || option['devicekind']))
                         historyType.value = option['strtype'] || option['devicekind'];
                       if (option['strtype']) deviceTypeStr.value = option['strtype'];
-                      debugger;
                       stationType.value = option['stationtype'];
+                      nextTick(async () => {
+                        await getDataSource();
+                      });
                     },
                   },
                   colProps: {

src/views/vent/monitorManager/compressor/components/nitrogenHome_lt.vue

@@ -1,258 +1,262 @@
 <template>
-    <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-    <div id="nitrogenCss3D" class="threejs-Object-CSS"
-        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
-        <a-spin :spinning="loading" />
-        <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
-            <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
-                <div class="title">空压机{{ groupNum }} </div>
-                <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
-                    <div class="monitor-item">
-                        <span class="monitor-title">{{ preMonitor.title }}:</span>
-                        <span class="monitor-val"><span class="val">{{ monitorData[preMonitor.code] ?
-            formatNum(monitorData[preMonitor.code]) : '-' }}</span><span class="unit">{{
-            preMonitor.unit }}</span></span>
-                    </div>
-
-                </template>
-            </fourBorderBg>
-        </div>
+  <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+  <div
+    id="nitrogenCss3D"
+    class="threejs-Object-CSS"
+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+  >
+    <a-spin :spinning="loading" />
+    <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
+      <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+        <div class="title">空压机{{ groupNum }} </div>
+        <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
+          <div class="monitor-item">
+            <span class="monitor-title">{{ preMonitor.title }}:</span>
+            <span class="monitor-val"
+              ><span class="val">{{ monitorData[preMonitor.code] ? formatNum(monitorData[preMonitor.code]) : '-' }}</span
+              ><span class="unit">{{ preMonitor.unit }}</span></span
+            >
+          </div>
+        </template>
+      </fourBorderBg>
     </div>
-    <div class="nitrogen-home">
-        <div class="nitrogen-container">
-            <div class="top-box">
-
-                <!-- 左边监测数据 -->
-                <div class="lr-box left-box">
-                    <ventBox1>
-                        <template #title>
-                            <div>注氮机监测</div>
-                        </template>
-                        <template #container>
-                            <div class="input-item" v-for="(preFan, index) in nitrogenMonitorData" :key="index">
-                                <div class="title">{{ preFan.title }}</div>
-                                <div class="value">{{
-            monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-'
-        }}</div>
-
-                                <div class="unit">{{ preFan.unit !== 'signal' ? `(${preFan.unit})` : '' }}</div>
-                            </div>
-                        </template>
-                    </ventBox1>
-                    <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-                        <ventBox1>
-                            <template #title>
-                                <div>空压机{{ groupNum }}</div>
-                            </template>
-                            <template #container>
-                                <div class="monitor-box">
-                                    <div class="monitor-item">
-                                        <div class="state-item" v-for="(preFan, index) in preFanMonitorData"
-                                            :key="index">
-                                            <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ?
-            `(${preFan.unit})` : '') }}</div>
-
-                                            <div :class="{
-            'signal-round': true,
-            'signal-round-warning': monitorData[preFan.code] == '1',
-            'signal-round-run': monitorData[preFan.code] == '0',
-            'signal-round-gry':monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1'
-        }"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </template>
-                        </ventBox1>
+  </div>
+  <div class="nitrogen-home">
+    <div class="nitrogen-container">
+      <div class="top-box">
+        <!-- 左边监测数据 -->
+        <div class="lr-box left-box">
+          <ventBox1>
+            <template #title>
+              <div>注氮机监测</div>
+            </template>
+            <template #container>
+              <div class="input-item" v-for="(preFan, index) in nitrogenMonitorData" :key="index">
+                <div class="title">{{ preFan.title }}</div>
+                <div class="value">{{ monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-' }}</div>
+
+                <div class="unit">{{ preFan.unit !== 'signal' ? `(${preFan.unit})` : '' }}</div>
+              </div>
+            </template>
+          </ventBox1>
+          <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+            <ventBox1>
+              <template #title>
+                <div>空压机{{ groupNum }}</div>
+              </template>
+              <template #container>
+                <div class="monitor-box">
+                  <div class="monitor-item">
+                    <div class="state-item" v-for="(preFan, index) in preFanMonitorData" :key="index">
+                      <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ? `(${preFan.unit})` : '') }}</div>
+                      <div
+                        :class="{
+                          'signal-round': true,
+                          'signal-round-warning': monitorData[preFan.code] == '1',
+                          'signal-round-run': monitorData[preFan.code] == '0',
+                          'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
+                        }"
+                      ></div>
                     </div>
+                  </div>
                 </div>
-                <!-- 右边控制状态 -->
-                <div class="lr-box right-box">
-                    <ventBox1 class="vent-margin-t-10">
-                        <template #title>
-                            <div>设备实时监测曲线</div>
-                        </template>
-                        <template #container>
-                            <BarAndLine v-if="chartsColumns.length > 0" xAxisPropType="readTime"
-                                :dataSource="echartData" height="340px" :chartsColumns="chartsColumns"
-                                chartsType="listMonitor" :option="echatsOption" />
-                        </template>
-                    </ventBox1>
-                    <div ref="playerRef" style="height: auto; width: 100%; margin-top: 10px"></div>
-                </div>
-            </div>
+              </template>
+            </ventBox1>
+          </div>
         </div>
+        <!-- 右边控制状态 -->
+        <div class="lr-box right-box">
+          <ventBox1 class="vent-margin-t-10">
+            <template #title>
+              <div>设备实时监测曲线</div>
+            </template>
+            <template #container>
+              <BarAndLine
+                v-if="chartsColumns.length > 0"
+                xAxisPropType="readTime"
+                :dataSource="echartData"
+                height="340px"
+                :chartsColumns="chartsColumns"
+                chartsType="listMonitor"
+                :option="echatsOption"
+              />
+            </template>
+          </ventBox1>
+          <div ref="playerRef" style="height: auto; width: 100%; margin-top: 10px"></div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts" setup name="nitrogenHome">
-import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject } from 'vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
-import { getDevice } from '../nitrogen.api';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { preMonitorList, preFanMonitorData, nitrogenMonitorData } from '../nitrogen.data.lt';
-import { formatNum } from '/@/utils/ventutil';
-import { useCamera } from '/@/hooks/system/useCamera';
-import lodash from 'lodash';
-
-const props = defineProps({
+  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
+  import { getDevice } from '../nitrogen.api';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { preMonitorList, preFanMonitorData, nitrogenMonitorData } from '../nitrogen.data.lt';
+  import { formatNum } from '/@/utils/ventutil';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import lodash from 'lodash';
+
+  const props = defineProps({
     deviceId: {
-        type: String,
-        require: true,
+      type: String,
+      require: true,
     },
     modalType: {
-        type: String,
-        require: true,
+      type: String,
+      require: true,
     },
-});
-const playerRef = ref();
-const refresh = ref(false);
-const loading = ref(true);
+  });
+  const playerRef = ref();
+  const refresh = ref(false);
+  const loading = ref(true);
 
-// const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
-const flvURL1 = () => {
+  // const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+  const flvURL1 = () => {
     // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
     return '';
-};
-const echatsOption = {
+  };
+  const echatsOption = {
     grid: {
-        top: '35%',
-        left: '15%',
-        right: '20px',
-        bottom: '8%',
-        // containLabel: true
+      top: '35%',
+      left: '15%',
+      right: '20px',
+      bottom: '8%',
+      // containLabel: true
     },
     toolbox: {
-        feature: {},
+      feature: {},
     },
-};
+  };
 
-const monitorDataGroupNum = ref(1);
+  const monitorDataGroupNum = ref(1);
 
-const chartsColumns = ref([
+  const chartsColumns = ref([
     {
-        legend: '瞬时流量',
-        seriesName: '(m³/h)',
-        ymax: 2000,
-        yname: 'm³/h',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'InputFlux',
+      legend: '瞬时流量',
+      seriesName: '(m³/h)',
+      ymax: 2000,
+      yname: 'm³/h',
+      linetype: 'line',
+      yaxispos: 'left',
+      color: '#FDB146',
+      sort: 1,
+      xRotate: 0,
+      dataIndex: 'InputFlux',
     },
-]);
-const { getCamera, removeCamera } = useCamera();
+  ]);
+  const { getCamera, removeCamera } = useCamera();
 
-const monitorData = ref({});
+  const monitorData = ref({});
 
-//图表数据
-let echartData = ref<any>([]);
+  //图表数据
+  let echartData = ref<any>([]);
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-async function getMonitor(flag?) {
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-        return new Promise(async (resolve) => {
-            timer = await setTimeout(
-                async () => {
-                    if (props.deviceId) {
-                        await getDataSource(props.deviceId);
-                    }
-                    if (timer) {
-                        timer = null;
-                    }
-                    resolve(null);
-                    await getMonitor();
-                },
-                flag ? 0 : 3000
-            );
-        });
+      return new Promise(async (resolve) => {
+        timer = await setTimeout(
+          async () => {
+            if (props.deviceId) {
+              await getDataSource(props.deviceId);
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+          },
+          flag ? 0 : 3000
+        );
+      });
     }
-}
+  }
 
-async function getDataSource(systemID) {
+  async function getDataSource(systemID) {
     const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
     if (res) {
-        const result = res;
-        if (!result || result.msgTxt.length < 1) return;
-        result.msgTxt.forEach((item) => {
-            if (item.type && item.type.startsWith('nitrogen')) {
-
-                monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
-
-                const airCompressor = { readTime: monitorData.value['readTime'].substring(11) };
-                const dataArr = lodash.cloneDeep(echartData.value);
-                //图表数据
-                if (dataArr.length <= 5) {
-                    airCompressor[`InputFlux`] = monitorData.value['InputFlux'] || 0;
-                    dataArr.push(airCompressor);
-                } else {
-                    dataArr.shift();
-                    dataArr.push(airCompressor);
-                }
-                echartData.value = dataArr;
-            }
-        });
-        refresh.value = true;
-        nextTick(() => {
-            refresh.value = false;
-        });
+      const result = res;
+      if (!result || result.msgTxt.length < 1) return;
+      result.msgTxt.forEach((item) => {
+        if (item.type && item.type.startsWith('nitrogen')) {
+          monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+
+          const airCompressor = { readTime: monitorData.value['readTime'].substring(11) };
+          const dataArr = lodash.cloneDeep(echartData.value);
+          //图表数据
+          if (dataArr.length <= 5) {
+            airCompressor[`InputFlux`] = monitorData.value['InputFlux'] || 0;
+            dataArr.push(airCompressor);
+          } else {
+            dataArr.shift();
+            dataArr.push(airCompressor);
+          }
+          echartData.value = dataArr;
+        }
+      });
+      refresh.value = true;
+      nextTick(() => {
+        refresh.value = false;
+      });
     }
-}
+  }
 
-watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
     nextTick(() => {
-        if (newMonitorDataGroupNum && !newLoading) {
-            setModelType(props.modalType, newMonitorDataGroupNum);
-        }
+      if (newMonitorDataGroupNum && !newLoading) {
+        setModelType(props.modalType, newMonitorDataGroupNum);
+      }
     });
-});
+  });
 
-onMounted(async () => {
+  onMounted(async () => {
     await getMonitor(true);
     await mountedThree().then(() => {
-        loading.value = false;
+      loading.value = false;
     });
     await getCamera(props.deviceId, playerRef.value);
-});
+  });
 
-onUnmounted(() => {
+  onUnmounted(() => {
     destroy();
     removeCamera();
     if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
+      clearTimeout(timer);
+      timer = undefined;
     }
-});
+  });
 </script>
 
 <style lang="less" scoped>
-@ventSpace: zxm;
+  @ventSpace: zxm;
 
-.nitrogen-box {
+  .nitrogen-box {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
-}
+  }
 
-#nitrogenCss3D {
+  #nitrogenCss3D {
     .modal-monitor {
-        width: 200px;
-        position: absolute;
-        left: 0px;
-        top: 0px;
+      width: 200px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
     }
 
     &:deep(.win) {
-        margin: 0 !important;
-        background: #00000044;
+      margin: 0 !important;
+      background: #00000044;
     }
-}
+  }
 
-.nitrogen-home {
+  .nitrogen-home {
     width: 100%;
     height: 100%;
     position: fixed;
@@ -265,436 +269,436 @@ onUnmounted(() => {
     top: 20px;
 
     .nitrogen-container {
+      width: 100%;
+      height: calc(100% - 100px);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 100px;
+
+      .device-state {
         width: 100%;
-        height: calc(100% - 100px);
+        position: absolute;
+        top: 20px;
+        color: #e90000;
+        display: flex;
+        justify-content: center;
+        font-size: 20px;
+      }
+
+      .top-box {
+        width: 100%;
+        padding: 10px;
+        overflow: hidden;
         display: flex;
         justify-content: space-between;
-        margin-bottom: 100px;
+        // margin-top: 40px;
+
+        .center-item-box {
+          position: absolute;
+          left: 50%;
+          top: 50px;
+          transform: translate(-48%, 0);
+          width: calc(100% - 720px);
+          height: 50px;
+          display: flex;
+          align-items: center;
+          pointer-events: auto;
+
+          .top-left {
+            display: flex;
+            flex: 1.5;
+            color: #fff;
+
+            .button-box {
+              position: relative;
+              width: auto;
+              height: 32px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 5px;
+              color: #fff;
+              padding: 10px 15px;
+              margin: 0px 10px;
+              box-sizing: border-box;
+              cursor: pointer;
+              background: linear-gradient(#1fa6cb, #127cb5);
+
+              &:hover {
+                background: linear-gradient(#1fa6cbcc, #127cb5cc);
+              }
+            }
+          }
 
-        .device-state {
-            width: 100%;
-            position: absolute;
-            top: 20px;
-            color: #e90000;
+          .top-center {
             display: flex;
+            flex: 1;
             justify-content: center;
+            align-items: center;
             font-size: 20px;
+            color: #fff;
+
+            .top-c-label {
+              color: yellow;
+            }
+          }
+
+          .top-right {
+            display: flex;
+            flex: 2;
+            justify-content: right;
+            align-items: center;
+            color: #fff;
+
+            .control-type {
+              display: flex;
+              color: #fff;
+
+              .control-title {
+                color: #73e8fe;
+              }
+            }
+          }
+        }
+
+        .lr-box {
+          height: 90%;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          // overflow: hidden;
+          z-index: 9999;
+          pointer-events: auto;
+          overflow-y: auto;
+          overflow-x: hidden;
         }
 
-        .top-box {
+        .item {
+          width: 305px;
+          height: 450px;
+          position: relative;
+          border-radius: 5px;
+          margin-top: 10px;
+          margin-bottom: 0px;
+          pointer-events: auto;
+          color: #fff;
+          // overflow: hidden;
+
+          &:first-child {
+            margin-top: 0px;
+          }
+
+          .base-title {
+            color: #fff;
+            margin-bottom: 8px;
+            padding-left: 10px;
+            position: relative;
+            font-size: 16px;
+
+            &::after {
+              content: '';
+              position: absolute;
+              display: block;
+              width: 4px;
+              height: 12px;
+              top: 7px;
+              left: 0px;
+              background: #45d3fd;
+              border-radius: 4px;
+            }
+          }
+
+          .monitor-item {
             width: 100%;
-            padding: 10px;
-            overflow: hidden;
             display: flex;
-            justify-content: space-between;
-            // margin-top: 40px;
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            .state-item {
+              width: 50%;
+              padding: 5px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .state-title {
+                width: 100px;
+                color: #ffffffdd;
+                flex: 9;
+                font-size: 14px;
 
-            .center-item-box {
-                position: absolute;
-                left: 50%;
-                top: 50px;
-                transform: translate(-48%, 0);
-                width: calc(100% - 720px);
-                height: 50px;
-                display: flex;
-                align-items: center;
-                pointer-events: auto;
-
-                .top-left {
-                    display: flex;
-                    flex: 1.5;
-                    color: #fff;
-
-                    .button-box {
-                        position: relative;
-                        width: auto;
-                        height: 32px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        border-radius: 5px;
-                        color: #fff;
-                        padding: 10px 15px;
-                        margin: 0px 10px;
-                        box-sizing: border-box;
-                        cursor: pointer;
-                        background: linear-gradient(#1fa6cb, #127cb5);
-
-                        &:hover {
-                            background: linear-gradient(#1fa6cbcc, #127cb5cc);
-                        }
-                    }
+                .unit {
+                  // color: #ffffffbb;
                 }
+              }
 
-                .top-center {
-                    display: flex;
-                    flex: 1;
-                    justify-content: center;
-                    align-items: center;
-                    font-size: 20px;
-                    color: #fff;
-
-                    .top-c-label {
-                        color: yellow;
-                    }
-                }
+              .state-val {
+                flex: 1;
+                color: #e4a300;
+                margin-right: 5px;
+                text-align: right;
+                font-size: 14px;
+              }
+            }
+          }
 
-                .top-right {
-                    display: flex;
-                    flex: 2;
-                    justify-content: right;
-                    align-items: center;
-                    color: #fff;
-
-                    .control-type {
-                        display: flex;
-                        color: #fff;
-
-                        .control-title {
-                            color: #73e8fe;
-                        }
-                    }
-                }
+          .signal-box {
+            margin: 5px 0;
+            display: flex;
+            align-items: center;
+
+            .signal-title {
+              color: #7af5ff;
+              margin: 0 5px;
             }
 
-            .lr-box {
-                height: 90%;
-                display: flex;
-                flex-direction: column;
-                position: relative;
-                // overflow: hidden;
-                z-index: 9999;
-                pointer-events: auto;
-                overflow-y: auto;
-                overflow-x: hidden;
+            &:last-child {
+              margin-right: 0px;
             }
+          }
 
-            .item {
-                width: 305px;
-                height: 450px;
-                position: relative;
-                border-radius: 5px;
-                margin-top: 10px;
-                margin-bottom: 0px;
-                pointer-events: auto;
-                color: #fff;
-                // overflow: hidden;
-
-                &:first-child {
-                    margin-top: 0px;
-                }
+          .list-item {
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
 
-                .base-title {
-                    color: #fff;
-                    margin-bottom: 8px;
-                    padding-left: 10px;
-                    position: relative;
-                    font-size: 16px;
-
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        display: block;
-                        width: 4px;
-                        height: 12px;
-                        top: 7px;
-                        left: 0px;
-                        background: #45d3fd;
-                        border-radius: 4px;
-                    }
-                }
+            .item-data-key {
+              color: #ffffff99;
+            }
+          }
 
-                .monitor-item {
-                    width: 100%;
-                    display: flex;
-                    flex-direction: row;
-                    flex-wrap: wrap;
-
-                    .state-item {
-                        width: 50%;
-                        padding: 5px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: space-between;
-
-                        .state-title {
-                            width: 100px;
-                            color: #ffffffdd;
-                            flex: 9;
-                            font-size: 14px;
-
-                            .unit {
-                                // color: #ffffffbb;
-                            }
-                        }
-
-                        .state-val {
-                            flex: 1;
-                            color: #e4a300;
-                            margin-right: 5px;
-                            text-align: right;
-                            font-size: 14px;
-                        }
-                    }
-                }
+          .item-data-box {
+            color: #fff;
 
-                .signal-box {
-                    margin: 5px 0;
-                    display: flex;
-                    align-items: center;
+            .state-icon {
+              display: inline-block;
+              width: 12px;
+              height: 12px;
+              border-radius: 12px;
+            }
 
-                    .signal-title {
-                        color: #7af5ff;
-                        margin: 0 5px;
-                    }
+            .open {
+              border: 5px solid #133a56;
+              background: #4ecb73;
+            }
 
-                    &:last-child {
-                        margin-right: 0px;
-                    }
-                }
+            .close {
+              border: 5px solid #192961;
+              background: #6d7898;
+            }
+          }
+        }
 
-                .list-item {
-                    padding: 0 10px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
+        .item-l {
+          width: 100%;
 
-                    .item-data-key {
-                        color: #ffffff99;
-                    }
-                }
+          .monitor-box {
+            width: 100%;
 
-                .item-data-box {
-                    color: #fff;
-
-                    .state-icon {
-                        display: inline-block;
-                        width: 12px;
-                        height: 12px;
-                        border-radius: 12px;
-                    }
-
-                    .open {
-                        border: 5px solid #133a56;
-                        background: #4ecb73;
-                    }
-
-                    .close {
-                        border: 5px solid #192961;
-                        background: #6d7898;
-                    }
-                }
-            }
+            .parameter-title {
+              position: relative;
+              width: 100%;
+              height: 14px;
+              margin-top: 10px;
 
-            .item-l {
-                width: 100%;
-
-                .monitor-box {
-                    width: 100%;
-
-                    .parameter-title {
-                        position: relative;
-                        width: 100%;
-                        height: 14px;
-                        margin-top: 10px;
-
-                        .icon,
-                        span {
-                            position: absolute;
-                            top: -10px;
-                        }
-                    }
-
-                    .group-parameter-title {
-                        background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
-
-                        .icon {
-                            left: -12px;
-                            top: -17px;
-                        }
-
-                        span {
-                            left: 18px;
-                        }
-
-                        .item-col {
-                            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
-                        }
-                    }
-
-                    .device-parameter-title {
-                        background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
-
-                        .icon {
-                            left: -10px;
-                            top: -14px;
-                        }
-
-                        span {
-                            left: 18px;
-                        }
-
-                        .item-col {
-                            background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
-                        }
-                    }
-                }
+              .icon,
+              span {
+                position: absolute;
+                top: -10px;
+              }
             }
 
-            .right-box {
-                width: 300px;
-                margin-top: 50px;
+            .group-parameter-title {
+              background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+
+              .icon {
+                left: -12px;
+                top: -17px;
+              }
+
+              span {
+                left: 18px;
+              }
+
+              .item-col {
+                background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+              }
             }
 
-            .left-box {
-                width: 335px;
-                margin-top: 80px;
-
-                .input-item {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 4px 8px;
-                    margin: 6px 0;
-                    background-image: linear-gradient(to right, #39deff15, #3977e500);
-
-                    .title {
-                        width: 200px;
-                    }
-
-                    .title-auto {
-                        width: auto;
-                    }
-
-                    .input-value {
-                        width: 80px;
-                        height: 28px;
-                        line-height: 28px !important;
-                        background: transparent !important;
-                        border-color: #228da2 !important;
-                        color: #fff !important;
-                    }
-
-                    .value {
-                        width: 100px;
-                        color: #00d8ff;
-                        padding-right: 20px;
-                    }
-
-                    .unit {
-                        width: 80px;
-                    }
-                }
+            .device-parameter-title {
+              background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+
+              .icon {
+                left: -10px;
+                top: -14px;
+              }
+
+              span {
+                left: 18px;
+              }
+
+              .item-col {
+                background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+              }
             }
+          }
         }
 
-        &:deep(.win) {
-            width: 100%;
-            margin: 0 !important;
+        .right-box {
+          width: 300px;
+          margin-top: 50px;
+        }
+
+        .left-box {
+          width: 335px;
+          margin-top: 80px;
+
+          .input-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 4px 8px;
+            margin: 6px 0;
+            background-image: linear-gradient(to right, #39deff15, #3977e500);
+
+            .title {
+              width: 200px;
+            }
+
+            .title-auto {
+              width: auto;
+            }
+
+            .input-value {
+              width: 80px;
+              height: 28px;
+              line-height: 28px !important;
+              background: transparent !important;
+              border-color: #228da2 !important;
+              color: #fff !important;
+            }
+
+            .value {
+              width: 100px;
+              color: #00d8ff;
+              padding-right: 20px;
+            }
+
+            .unit {
+              width: 80px;
+            }
+          }
         }
+      }
+
+      &:deep(.win) {
+        width: 100%;
+        margin: 0 !important;
+      }
     }
-}
+  }
 
-&:deep(.main) {
+  &:deep(.main) {
     .title {
-        height: 34px;
-        text-align: center;
-        font-weight: 600;
-        color: #7af5ff;
-        // background-image: url('../../../assets/img/yfj/light.png');
-        background-repeat: no-repeat;
-        background-position-x: center;
-        background-position-y: 100%;
-        background-size: 80%;
-        font-size: 16px;
+      height: 34px;
+      text-align: center;
+      font-weight: 600;
+      color: #7af5ff;
+      // background-image: url('../../../assets/img/yfj/light.png');
+      background-repeat: no-repeat;
+      background-position-x: center;
+      background-position-y: 100%;
+      background-size: 80%;
+      font-size: 16px;
     }
 
     .monitor-item {
-        width: 200px;
+      width: 200px;
+      display: flex;
+      flex-direction: row;
+      width: auto;
+      margin-bottom: 3px;
+
+      .monitor-val {
+        color: #ffb700;
         display: flex;
-        flex-direction: row;
         width: auto;
-        margin-bottom: 3px;
-
-        .monitor-val {
-            color: #ffb700;
-            display: flex;
-            width: auto;
 
-            .val {
-                width: 80px;
-                font-size: 14px;
-            }
+        .val {
+          width: 80px;
+          font-size: 14px;
+        }
 
-            .unit {
-                color: #ffffffbb;
-                font-size: 14px;
-            }
+        .unit {
+          color: #ffffffbb;
+          font-size: 14px;
         }
+      }
     }
 
     .monitor-title {
-        width: 100px;
-        color: #7af5ff;
-        font-weight: 400;
-        font-size: 14px;
+      width: 100px;
+      color: #7af5ff;
+      font-weight: 400;
+      font-size: 14px;
     }
 
     .signal-item {
-        display: flex;
-        justify-content: space-between;
-
-        // margin-bottom: 5px;
-        .signal-round {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            margin: 0 10px;
-            position: relative;
-
-            &::after {
-                display: block;
-                content: '';
-                position: absolute;
-                width: 12px;
-                height: 12px;
-                top: -2px;
-                left: -2px;
-                border-radius: 50%;
-            }
+      display: flex;
+      justify-content: space-between;
+
+      // margin-bottom: 5px;
+      .signal-round {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin: 0 10px;
+        position: relative;
+
+        &::after {
+          display: block;
+          content: '';
+          position: absolute;
+          width: 12px;
+          height: 12px;
+          top: -2px;
+          left: -2px;
+          border-radius: 50%;
         }
+      }
 
-        .signal-round-gry {
-            background-color: #858585;
+      .signal-round-gry {
+        background-color: #858585;
 
-            &::after {
-                background-color: #85858544;
-                box-shadow: 0 0 1px 1px #85858599;
-            }
+        &::after {
+          background-color: #85858544;
+          box-shadow: 0 0 1px 1px #85858599;
         }
+      }
 
-        .signal-round-run {
-            background-color: #67fc00;
+      .signal-round-run {
+        background-color: #67fc00;
 
-            &::after {
-                background-color: #67fc0044;
-                box-shadow: 0 0 1px 1px #c6ff77;
-            }
+        &::after {
+          background-color: #67fc0044;
+          box-shadow: 0 0 1px 1px #c6ff77;
         }
+      }
 
-        .signal-round-warning {
-            background-color: #e9170b;
+      .signal-round-warning {
+        background-color: #e9170b;
 
-            &::after {
-                background-color: #e9170b44;
-                box-shadow: 0 0 1px 1px #e9170b;
-            }
+        &::after {
+          background-color: #e9170b44;
+          box-shadow: 0 0 1px 1px #e9170b;
         }
+      }
     }
-}
+  }
 
-:deep(.zxm-radio-wrapper) {
+  :deep(.zxm-radio-wrapper) {
     color: #fff !important;
-}
-</style>
+  }
+</style>

src/views/vent/monitorManager/compressor/nitrogen.data.ts

@@ -223,7 +223,9 @@ export function getMonitorComponent() {
     case 'sdmtjtbdmk': // 保德
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bd.vue'));
       return nitrogenHome;
+    case 'sdmtjtyjlmk': //榆家梁
     case 'sdmtjtbltmk': // 补连塔
+      debugger;
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
       return nitrogenHome;
     case 'sdmtjtcctmk': // 寸草塔
@@ -233,9 +235,9 @@ export function getMonitorComponent() {
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_ln.vue'));
       return nitrogenHome;
     default:
-      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_dltj.vue'));
-      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_ln.vue'));
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
+      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_ln.vue'));
+      // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
       return nitrogenHome;
   }
 }

src/views/vent/monitorManager/deviceMonitor/components/emergency/index.vue

@@ -0,0 +1,979 @@
+<template>
+  <div class="zl-box">
+    <div class="zl-container-box">
+      <customHeader >灾变应急管控系统</customHeader>
+      <div class="emergency_box">
+        <transition
+          enter-active-class="animate__animated  animate__slideInLeft"
+          leave-active-class="animate__animated  animate__slideOutLeft"
+        >
+          <div class="left-box lr-box" v-show="show">
+            <div class="network-time">
+              本次解算时间：
+              <span class="time">{{ pageData.currentTime }}</span>
+            </div>
+            <div class="analysis-box">
+              <div class="item-top-title">工作面基本信息</div>
+              <BorderBox1 class="border-bg" backgroundColor="#00bfff15" >
+                <div class="detail-data-group">
+                  <div class="container-item" v-for="(data, index) in analysisDetailDataList" :key="index">
+                    <div class="item-icon">
+                      <SvgIcon class="icon-style" size="18" :name="data.icon" />
+                    </div>
+                    <div class="item-name">{{ data.name }}</div>
+                    <div v-if="data.code !== 'level' && data.code !== 'resistance'" class="item-value">{{ pageData[data.code] }}
+                    </div>
+                    <div v-if="data.code == 'level'" class="item-value">
+                      <!-- <span class="signal-round signal-round-run" :class="{'signal-round-run': Number(pageData.dTotalArea) > 2, 'signal-round-red': Number(pageData.dTotalArea) <= 2 }"></span> -->
+                      <span class="">{{ Number(pageData.dTotalArea) > 2 ? '容易':'难' }}</span>
+                    </div>
+                    <div v-if="data.code == 'resistance'" class="item-value">{{ totalPa }}</div>
+                  </div>
+                </div>
+                <!-- <div class="time-list" style="overflow-y: auto;">
+                  <dv-scroll-board ref="scrollBoardRef" :config="solveTimesData" style="width: 100%; height: 100px; font-weight: 500;" />
+                </div> -->
+              </BorderBox1>
+            </div>
+          </div>
+        </transition>
+        <transition
+          enter-active-class="animate__animated  animate__slideInRight"
+          leave-active-class="animate__animated  animate__slideOutRight"
+        >
+        <div class="right-box lr-box" v-show="show">
+          <div class="sensor-box">
+            <div class="item-top-title">传感器实时数据</div>
+            <BorderBox1 class="table-box border-bg" backgroundColor="#00bfff15">
+              <div class="table-container">
+                <a-table :columns="sensorColumns" :data-source="pageData.sensorDataList" :pagination="false" size="small" />
+              </div>
+            </BorderBox1>
+          </div>
+          <div class="warning-box">
+            <div class="item-top-title">预警报警信息</div>
+            <BorderBox1 class="table-box border-bg" backgroundColor="#00bfff15">
+              <div class="table-container">
+                <a-table :columns="warningColumns" :data-source="pageData.warningDataList" :pagination="false" size="small">
+                  <template #bodyCell="{ column, record }">
+                    <div v-if="column.dataIndex == 'level'">
+                      <span class="signal-round"
+                        :class="{ 'signal-round-red': record['level'] == 1, 'signal-round-orange': record['level'] == 2, 'signal-round-yellow': record['level'] == 3 }"></span>
+                    </div>
+                  </template>
+                </a-table>
+              </div>
+            </BorderBox1>
+          </div>
+        </div>
+      </transition>
+      </div>
+      <transition
+            enter-active-class="animate__animated  animate__slideInUp"
+            leave-active-class="animate__animated  animate__slideOutDown"
+          >
+        <div class="bottom-box" v-show="show">
+          <div class="slider-box">
+            <a-slider v-model:value="sliderNum" :min="0" :max="100" />
+          </div>
+          <div class="to-small" @click="toHome"></div>
+          <div class="bottom-left bottom-lr-box">
+            <BorderBox11 class="border-bg" title="灾变网络解算" :color="['#00FFFF']" backgroundColor="#00bfff15">
+              <div class="zl-top">
+                <div>
+                  <span v-for="(device, index) in deviceTab " :key="index" class="btn" :class="{'active': device.code == deviceActiveCode }" @click="setTable(device.code)">{{ device.title }}</span>
+                </div>
+              </div>
+              <div class="table-container">
+                <a-table :columns="columns" :data-source="tableDate" :pagination="false" size="small" />
+              </div>
+            </BorderBox11>
+          </div>
+          <div class="bottom-left bottom-lr-box">
+            <BorderBox11 class="border-bg" title="灾变应急路线" :color="['#00FFFF']"  backgroundColor="#00bfff15">
+             <div class="zl-top">
+                  <div>
+                    <span v-for="(device, index) in emergencyTab " :key="index" class="btn" :class="{'active': device.code == emergencyActiveCode }" @click="setTable(device.code)">{{ device.title }}</span>
+                  </div>
+                </div>
+                <div class="table-container">
+                  <a-table v-if="emergencyActiveCode === 'location'" :columns="locationColumns" :data-source="locationData" :pagination="false" size="small" ></a-table>
+                  <a-table v-else :columns="emergencyColumns" :data-source="emergencyData" :pagination="false" size="small" >
+                    <template #expandedRowRender>
+                      <a-table :columns="emergencyPathColumns" :data-source="emergencyPathData" :pagination="false"></a-table>
+                    </template>
+                  </a-table>
+                </div>
+            </BorderBox11>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, defineEmits, defineProps, watch, reactive } from 'vue';
+import { Icon as SvgIcon } from '/@/components/Icon';
+import { BorderBox11, BorderBox1, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+import { sensorColumns, networkColumns, warningColumns, locationColumns, emergencyColumns, emergencyPathColumns, deviceTab, emergencyTab, SensorType, NetworkType, windowColumns, gateColumns, WindowType, GateType, solveTimesData } from './network.data'
+import dayjs from 'dayjs'
+import { formatNum } from '/@/utils/ventutil'
+import customHeader from '/@/components/vent/customHeader.vue';
+import { Empty } from 'ant-design-vue';
+
+const emit = defineEmits(['changePageType'])
+const props = defineProps({
+  pageResult: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+let count = 0;
+const sliderNum = ref(0)
+const pageData = reactive({
+  currentTime: dayjs(new Date().getTime() + count).format('YYYY-MM-DD HH:mm:ss'),
+  totalEnterNum: '-',
+  totalToNum: '-',
+  totallength: '-', // 总长
+  level: '-',
+  dTotalArea: '-',
+  sensorDataList: <SensorType[]>[],
+  networkDataList: <NetworkType[]>[],
+  gateDataList: <GateType[]>[],
+  windowDataList: <WindowType[]>[],
+  warningDataList: []
+})
+
+const show = ref(false)
+
+const deviceActiveCode = ref('tun')
+const emergencyActiveCode = ref('location')
+const columns = ref(networkColumns)
+const emergencycolumns = ref(locationColumns)
+const tableDate = <any[]>ref(pageData.networkDataList as any)
+
+const totalPa = ref(1640 + '')
+const rate1 = ref(95 + '')
+const rate2 = ref(95 + '')
+const rate3 = ref(95 + '')
+const locationData = []
+const emergencyData = []
+const emergencyPathData = []
+
+const analysisDetailDataList = [
+  {
+    code: 'dTotalArea',
+    name: '工作面编号',
+    icon: 'path-icon4'
+  },
+  {
+    code: 'dTotalArea',
+    name: '所属采区',
+    icon: 'path-icon4'
+  },
+  {
+    code: 'dTotalArea',
+    name: '所属煤层',
+    icon: 'path-icon4'
+  },
+  {
+    code: 'totallength',
+    name: '工作面长度(m)',
+    icon: 'path-icon1'
+  },
+  {
+    code: 'totallength',
+    name: '工作面走向长度(m)',
+    icon: 'path-icon1'
+  },
+  {
+    code: 'totallength',
+    name: '工作面采高(m)',
+    icon: 'path-icon1'
+  },
+  {
+    code: 'resistance',
+    name: '灾变等级',
+    // value: totalPa.value,
+    icon: 'path-icon3'
+  },
+  
+]
+const maxPaths = ref([])
+const activePath = ref(1)
+let solveTimes: [string, string][] = []
+const scrollBoardRef = ref()
+
+function toHome() {
+  show.value = false
+  setTimeout(() => {
+    emit('changePageType', 'model3D')
+  }, 1200)
+}
+
+function changeActive(index){
+  activePath.value = index
+}
+
+function analyzePageResult(resultData){
+  console.log('数据接收到------', resultData);
+  if(!resultData) return
+  pageData.currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+
+  const sensorDataList = <SensorType[]>[];
+  const networkDataList = <NetworkType[]>[]
+  const gateDataList = <GateType[]>[]
+  const windowDataList = <WindowType[]>[]
+  
+  if(resultData['solutionresult']){
+    
+    const solutionresult = resultData['solutionresult'] || null;
+    pageData.totalEnterNum = solutionresult['TotalInQ'] != null ? formatNum(Number(solutionresult['TotalInQ'])) : '-';
+    pageData.totalToNum = solutionresult['TotalOutQ'] != null ? formatNum(Number(solutionresult['TotalOutQ'])): '-';
+    pageData.totallength = solutionresult['TotalLength'] != null ? formatNum(Number(solutionresult['TotalLength'])) : '-';
+    pageData.dTotalArea = solutionresult['dTotalArea'] != null ? formatNum(Number(solutionresult['dTotalArea'])) : '-';
+    
+    if (solutionresult['tuns'])
+
+      for (const key in solutionresult['tuns']) {
+        const item = solutionresult['tuns'][key]
+        const obj = {
+          nTunID: key,
+          strName: item['strName'],
+          dHFric: item['dHFric'] != null ? item['dHFric'].toFixed(2) : '-', //摩擦阻力
+          dHLocal: item['dHNature'] != null ? item['dHNature'].toFixed(2) : '-', //局部阻力
+          dHNature: item['dHNature'] != null ? item['dHNature'].toFixed(2) : '-', //自然风压
+          dHTotal: item['dHTotal'] != null ? item['dHTotal'].toFixed(2) : '-', //总阻力
+          fRealQ: item['fRealQ'] != null ? item['fRealQ'].toFixed(2) : '-', //实时风量
+          fRealV: item['fRealV'] != null ? item['fRealV'].toFixed(2) : '-', //实时风速
+        }
+        networkDataList.push(obj)
+      }
+
+    if (solutionresult['gates'])
+      for (const key in solutionresult['gates']) {
+        const item = solutionresult['gates'][key]
+        const obj = {
+          nGateID: key,
+          strName: item['strName'],
+          data_dHDiff: item['data_dHDiff'] != null ? item['data_dHDiff'].toFixed(2) : '-', //风门压差
+          data_dQ_min: item['data_dQ_min'] != null ? item['data_dQ_min'].toFixed(2) : '-', //风门漏风量
+          data_dQ_s: item['data_dQ_s'] != null ? item['data_dQ_s'].toFixed(2) : '-', //风门漏风量
+        }
+        gateDataList.push(obj)
+      }
+
+    if (solutionresult['windows'])
+      for (const key in solutionresult['windows']) {
+        const item = solutionresult['windows'][key]
+        const obj = {
+          nWindowID: key,
+          strName: item['strName'],
+          data_dHDiff: item['data_dHDiff'] != null ? item['data_dHDiff'].toFixed(2) : '-', //风门压差
+          data_dQ_min: item['data_dQ_min'] != null ? item['data_dQ_min'].toFixed(2) : '-', //风门漏风量
+          data_dQ_s: item['data_dQ_s'] != null ? item['data_dQ_s'].toFixed(2) : '-', //风门漏风量
+        }
+        windowDataList.push(obj)
+      }
+
+    if(solutionresult['MaxHPaths']){
+      maxPaths.value = solutionresult['MaxHPaths']
+    }
+  }
+  
+ if (resultData['monitors'] && resultData['monitors'].length > 0) {
+    resultData['monitors'].forEach((item => {
+      item = {
+        strinstallpos: item.strinstallpos,
+        va: item['readData']['va'] != null ? Number(item['readData']['va']).toFixed(2) : '-',
+        m3: item['readData']['m3'] != null ? formatNum(Number(item['readData']['m3'])) : '-',
+      }
+      sensorDataList.push(item)
+    }))
+
+  }
+  
+  
+  // const solutionresult = JSON.parse(result['result'])
+  
+  // if (solutionresult) {
+    
+    
+  // }
+  
+  pageData.sensorDataList = sensorDataList
+  // pageData.warningDataList = result['warns']
+  pageData.networkDataList = networkDataList
+  pageData.gateDataList = gateDataList
+  pageData.windowDataList = windowDataList
+  setTable(deviceActiveCode.value)
+
+  solveTimes = [[dayjs().format('YYYY-MM-DD HH:mm:ss'), '解算用时'+ (Math.random() * 0.1 + 3).toFixed(2) + 's'] , ...solveTimes]
+  const tempSolveTimes = [...solveTimes]
+  tempSolveTimes[0] = [`<span style="color:#00F5FE;" >${tempSolveTimes[0][0]}</span>`, `<span style="color:#00F5FE;" >${tempSolveTimes[0][1]}</span>`]
+  scrollBoardRef.value.updateRows(tempSolveTimes, 0)
+}
+
+function setTable(code) {
+  if(code == 'tun'){
+    deviceActiveCode.value = code
+    columns.value = networkColumns
+    tableDate.value = pageData.networkDataList
+  }else if(code === 'gate'){
+    deviceActiveCode.value = code
+    columns.value = gateColumns
+    tableDate.value = pageData.gateDataList
+  }else if(code === 'window') {
+    deviceActiveCode.value = code
+    columns.value = windowColumns
+    tableDate.value = pageData.windowDataList
+  } else if(code === 'location') {
+    emergencyActiveCode.value = code
+  } else if(code === 'emergency') {
+    emergencyActiveCode.value = code
+  }
+}
+
+watch(() => props.pageResult, (newData) => {
+  
+  analyzePageResult(newData)
+})
+
+onMounted(() => {
+  show.value = true
+});
+
+onUnmounted(() => {
+  
+});
+</script>
+<style scoped lang="less">
+@ventSpace: zxm;
+
+.vent-home-header {
+  width: 100%;
+  height: 100px;
+  position: fixed;
+  top: 0;
+  background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
+  background-size: contain;
+  display: flex;
+  justify-content: center;
+  z-index: 99;
+
+  .header-icon {
+    margin-top: 45px;
+  }
+
+  .header-text {
+    position: fixed;
+    top: 18px;
+    color: #fff;
+    font-size: 26px;
+  }
+}
+
+.zl-box {
+  width: 100%;
+  height: calc(100%);
+  top: 50px;
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+  background-position: center;
+  background-size: cover;
+
+  .modal-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}
+
+.zl-container-box {
+  width: 100%;
+  height: 100%;
+  top: 10px;
+  position: relative;
+  z-index: 99;
+  pointer-events: none;
+
+  .emergency_box {
+    display: flex;
+    justify-content: space-between;
+    height: 550px;
+    position: relative;
+    .lr-box {
+      width: 374px;
+      margin-top: 10px;
+    }
+
+    .left-box {
+      .network-time{
+        height: 50px;
+        padding-left: 10px;
+        font-size: 18px;
+        position: relative;
+        top: -5px;
+        .time{
+          font-size: 26px;
+          color: #00f5fe;
+          font-family: 'electronicFont';
+        }
+      }
+      .analysis-box {
+        position: relative;
+        .detail-data-group {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-top: 15px;
+          padding-top: 30px;
+
+          .container-item {
+            width: 307px;
+            height: 63px;
+            display: flex;
+            position: relative;
+            background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
+            background-size: auto;
+            background-position: bottom;
+            padding: 10px 30px;
+
+            &::before {
+              content: '';
+              display: block;
+              width: 100%;
+              height: 5px;
+              position: absolute;
+              top: 62px;
+              left: 0;
+              background-color: #73f4ff66;
+              backdrop-filter: blur(5px);
+            }
+
+            .item-icon {
+              width: 60px;
+              height: 45px;
+              background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
+              background-size: cover;
+
+              .icon-style {
+                margin: 10px 0 0 18px;
+              }
+            }
+
+            .item-name {
+              width: 180px;
+              line-height: 60px;
+              margin-left: 5px;
+              text-align: left;
+            }
+
+            .item-value {
+              position: relative;
+              height: 26px;
+              line-height: 24px;
+              margin: 15px 0;
+              text-align: center;
+              width: 80px;
+              border: 1px solid #00f5fe;
+              border-radius: 13px;
+              background: linear-gradient(to right, #00f5fe44, #0090ff44);
+
+              &::before {
+                width: 6px;
+                height: 6px;
+                content: '';
+                position: absolute;
+                left: -3px;
+                top: 8px;
+                background: #ffa500;
+                border-radius: 3px;
+              }
+            }
+          }
+        }
+
+        .feature-group {
+          display: flex;
+          flex-direction: row;
+          padding: 20px;
+          margin-top: 15px;
+
+          .feature-item {
+            width: 108px;
+            height: 120px;
+            background: url('/@/assets/images/vent/path/path-feature-bg.png');
+            display: flex;
+            flex-direction: column;
+            // justify-content: center;
+
+            .pie {
+              display: flex;
+              justify-content: center;
+            }
+
+            .data {
+              margin-top: 15px;
+              font-size: 12px;
+              scale: 0.9;
+              text-align: center;
+            }
+          }
+        }
+        .time-list{
+          height: 142px;
+          margin: 30px 15px 0px 30px;
+          padding-bottom: 10px;
+          pointer-events: auto;
+          .row-item:first-child{
+            color: #00f5fe !important;
+          }
+        }
+      }
+    }
+
+    .right-box {
+      display: flex;
+      flex-direction: column;
+
+      .sensor-box,
+      .warning-box {
+        position: relative;
+
+        // min-height: 220px;
+        // max-height: 250px;
+        .table-box {
+          height: 280px;
+          width: 100%;
+          position: relative;
+
+          .table-container {
+            width: calc(100% - 40px);
+            margin: 25px 20px 20px;
+            height: 250px;
+            position: absolute;
+          }
+        }
+      }
+
+      .sensor-box {
+        .item-top-title {
+          &::after {
+            left: 110px;
+          }
+
+          &::before {
+            left: 265px;
+          }
+        }
+      }
+
+      .warning-box {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  
+
+  .bottom-box {
+    width: 100%;
+    height: calc(40% - 80px);
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0px;
+    position: relative;
+    top: 20px;
+    pointer-events: auto;
+    .slider-box{
+      position: absolute;
+    }
+    .to-small {
+      width: 60px;
+      height: 60px;
+      background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
+      background-size: auto;
+      position: absolute;
+      top: -95px;
+      right: 400px;
+      border-radius: 10px;
+      padding: 8px;
+      backdrop-filter: blur(10px);
+      background-color: rgba(45, 86, 137, 0.418);
+
+      &:hover {
+        background-color: rgba(79, 104, 134, 0.418);
+      }
+    }
+    .bottom-lr-box {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+
+    }
+    .network-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      position: absolute;
+      // top: 55px;
+      top: 45px;
+      right: 0;
+      padding: 0 10px 0 30px;
+      z-index: 999;
+
+      .network-top-left {
+        display: flex;
+
+        div {
+          margin-right: 20px;
+        }
+
+        span {
+          font-family: 'douyuFont';
+          font-size: 15px;
+        }
+
+        .accuracy-rate {
+          color: #FFA500;
+        }
+
+        .error-rate {
+          color: #00f5fe;
+        }
+      }
+
+      .time {
+        color: #949494;
+      }
+    }
+
+    .bottom-left {
+      margin-right: 0px !important;
+      position: relative;
+
+      .table-container {
+        height: 210px;
+        margin-top: 40px;
+        margin-left: 10px;
+        margin-right: 8px;
+      }
+    }
+
+    .bottom-right {
+      // margin-left: 10px;
+      .zl-container {
+        width: 100%;
+        height: 100%;
+        margin: 0 10px;
+        background: url('/@/assets/images/vent/path/zl-bg1.png') no-repeat;
+        background-size: 940px 240px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 85px;
+          background: url('/@/assets/images/vent/path/zl-bg2.png') no-repeat;
+          background-size: 920px 100px;
+        }
+      }
+
+      .zl-path-item {
+        height: 67px;
+        background: url('/@/assets/images/vent/path/zl-path-item-bg.png') no-repeat;
+        background-size: auto;
+        background-position: center bottom;
+        position: absolute;
+        scale: 0.9;
+
+        .title {
+          position: relative;
+          top: -20px;
+          text-align: center;
+          font-size: 12px;
+          background: #00f5fe33;
+          padding: 3px 5px;
+          backdrop-filter: blur(5px);
+        }
+      }
+      .position11 {
+        top: 128px;
+        left: 120px;
+      }
+
+      .position10 {
+        top: 130px;
+        left: 0px;
+      }
+
+      .position9 {
+        top: 52px;
+        left: 100px;
+      }
+
+      .position8 {
+        top: 132px;
+        left: 270px;
+      }
+
+      .position7 {
+        top: 128px;
+        left: 420px;
+      }
+
+      .position6 {
+        top: 60px;
+        left: 320px;
+      }
+
+      .position5 {
+        top: 120px;
+        left: 580px;
+      }
+
+      .position4 {
+        top: 123px;
+        left: 690px;
+      }
+
+      .position3 {
+        top: 103px;
+        left: 830px;
+      }
+
+      .position2 {
+        top: 90px;
+        left: 740px;
+      }
+
+      .position1 {
+        top: 80px;
+        left: 535px;
+      }
+    }
+  }
+  .zl-top {
+    width: calc(100% - 30px);
+    padding: 0 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+    top: 35px;
+    z-index: 99;
+    margin: 10px;
+    border-bottom: 1px solid #00f5fe88;
+
+    .btn {
+      padding: 3px 10px;
+      border-top: 1px solid #c6c6c6;
+      background-image: linear-gradient(#c2c2c2aa, #b3b3b388 20%, #5a5a5a88);
+      cursor: pointer;
+      margin-right: 5px;
+
+      &:hover,
+      &:active {
+        border-top: 1px solid #00f5fe;
+        background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
+      }
+    }
+
+    .active {
+      border-top: 1px solid #00f5fe;
+      background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
+    }
+
+    .data {
+      font-family: 'douyuFont';
+      color: #FFA500;
+      font-size: 15px;
+    }
+  }
+}
+
+.item-top-title {
+  width: 374px;
+  height: 32px;
+  text-align: center;
+  line-height: 34px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fafafa;
+  position: absolute;
+  padding-top: 0px;
+  top: -9px;
+  z-index: 999;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 40px;
+    height: 1px;
+    position: absolute;
+    left: 255px;
+    top: 50%;
+    transform: translateY(-50%);
+    -webkit-transform: translate(-50%, -50%);
+    background-color: #00d4fe88;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: 40px;
+    height: 1px;
+    position: absolute;
+    left: 120px;
+    top: 50%;
+    transform: translateY(-50%);
+    -webkit-transform: translate(-50%, -50%);
+    background-color: #00d4fe88;
+  }
+}
+
+.signal-round {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  position: relative;
+  top: -3px;
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    top: -2px;
+    left: -2px;
+    border-radius: 50%;
+    background-color: #daffc044;
+    box-shadow: 0 0 1px 1px #c6ff7722;
+  }
+}
+
+.signal-round-run {
+  background-color: #67fc00;
+
+  &::after {
+    background-color: #daffc044;
+    box-shadow: 0 0 1px 1px #c6ff7722;
+  }
+}
+
+.signal-round-red {
+  background-color: #FF3823;
+
+  &::after {
+    background-color: #FF382344;
+    box-shadow: 0 0 1px 1px #FF382333;
+  }
+}
+
+.signal-round-orange {
+  background-color: #FF9B17;
+
+  &::after {
+    background-color: #FF9B1744;
+    box-shadow: 0 0 1px 1px #FF9B1733;
+  }
+}
+
+.signal-round-yellow {
+  background-color: #FFFF00;
+
+  &::after {
+    background-color: #FFFF0044;
+    box-shadow: 0 0 1px 1px #FFFF0033;
+  }
+}
+
+.table-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+  pointer-events: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 8px;
+    background-color: #f5f5f500;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #ffffff33;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #cccccc44;
+    border-radius: 10px;
+  }
+}
+
+.border-bg{
+  padding-bottom: 20px;
+  backdrop-filter: blur(5px);
+}
+
+@keyframes scale {
+  0% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}
+
+:deep(.@{ventSpace}-progress-text) {
+  color: #fff !important;
+}
+
+:deep(.@{ventSpace}-table-thead) {
+  background-color: transparent !important;
+
+  &>tr {
+    border: 1px solid #00f5fe !important;
+  }
+
+  &>tr>th {
+    // border: none !important;
+    color: #00f5fe !important;
+    border-top: 1px solid #00f5fe !important;
+    border-bottom: 1px solid #00f5fe !important;
+    border-left: none !important;
+    border-right: none !important;
+    font-size: 13px;
+  }
+}
+
+:deep(.@{ventSpace}-table-tbody) {
+  &>tr>td {
+    font-size: 13px;
+  }
+}
+
+:deep(.@{ventSpace}-table-small) {
+  border: none !important;
+}
+
+:deep(.@{ventSpace}-layout) {
+  background: transparent !important;
+}</style>

src/views/vent/monitorManager/deviceMonitor/components/emergency/network.data.ts

@@ -0,0 +1,490 @@
+import { BasicColumn } from '/@/components/Table';
+import { reactive } from 'vue';
+export type SensorType = {
+  strinstallpos: string;
+  va: string;
+};
+
+export type NetworkType = {
+  nTunID: string;
+  strName: string;
+  dHFric: number; // 摩擦阻力
+  dHLocal: number; //局部阻力
+  dHNature: number; //自然风压
+  dHTotal: number; //总阻力
+  fRealQ: string; //实时风量
+  fRealV: string; //实时风速
+};
+
+export type GateType = {
+  nGateID: string;
+  strName: string;
+  data_dHDiff: number; //风门风压
+  data_dQ_min: number; //风门漏风率
+  data_dQ_s: number; //风门漏风量
+};
+
+export type WindowType = {
+  nWindowID: string;
+  strName: string;
+  data_dHDiff: number; //风门风压
+  data_dQ_min: number; //风门漏风率
+  data_dQ_s: number; //风门漏风量
+};
+
+let sensor1 = Number(7.78).toFixed(2),
+  sensor2 = Number(1).toFixed(2),
+  sensor3 = Number(0.53).toFixed(2),
+  sensor4 = Number(0.62).toFixed(2),
+  sensor5 = Number(1.06).toFixed(2);
+
+export const sensorColumns: BasicColumn[] = [
+  {
+    title: '位置',
+    dataIndex: 'strinstallpos',
+    width: 200,
+    align: 'center',
+  },
+  {
+    title: '风速(m/s)',
+    dataIndex: 'va',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '风量(m³/min)',
+    dataIndex: 'm3',
+    width: 100,
+    align: 'center',
+  },
+];
+
+export const sensorData = () => {
+  sensor1 = Number(Math.random() * 2 - 1 + 7.78).toFixed(2);
+  sensor2 = Number(Math.random() + 0.13).toFixed(2);
+  sensor3 = Number(Math.random() + 0.19).toFixed(2);
+  sensor4 = Number(Math.random() + 0.17).toFixed(2);
+  sensor5 = Number(Math.random() + 0.81).toFixed(2);
+  return [
+    {
+      location: '副平硐',
+      value: sensor1,
+      unit: 'm/s',
+    },
+    {
+      location: '5煤组盘区辅运巷',
+      value: sensor2,
+      unit: 'm/s',
+    },
+    {
+      location: '15212辅运顺槽',
+      value: sensor3,
+      unit: 'm/s',
+    },
+    {
+      location: '15212胶运顺槽',
+      value: sensor4,
+      unit: 'm/s',
+    },
+    {
+      location: '15212回风顺槽',
+      value: sensor5,
+      unit: 'm/s',
+    },
+  ];
+};
+
+export const networkColumns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'nTunID',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '巷道名称',
+    dataIndex: 'strName',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '实时风量(m³/min)',
+    dataIndex: 'fRealQ',
+    width: 120,
+    align: 'center',
+    customRender: function ({ text }) {
+      return (text * 60).toFixed(2);
+    },
+  },
+  {
+    title: '实时风速(m/s)',
+    dataIndex: 'fRealV',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '总阻力(Pa)',
+    dataIndex: 'dHTotal',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '摩擦阻力(Pa)',
+    dataIndex: 'dHFric',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '局部阻力(Pa)',
+    dataIndex: 'dHLocal',
+    width: 120,
+    align: 'center',
+  },
+  {
+    title: '自然风压(Pa)',
+    dataIndex: 'dHNature',
+    width: 120,
+    align: 'center',
+  },
+  // {
+  //   title: '面积（㎡）',
+  //   dataIndex: 'fArea',
+  //   width: 120,
+  //   align: 'center',
+  // },
+  // {
+  //   title: '阻力系数',
+  //   dataIndex: 'fcoff',
+  //   width: 120,
+  //   align: 'center',
+  // },
+  // {
+  //   title: '灵敏度',
+  //   dataIndex: 'lmd',
+  //   width: 120,
+  //   align: 'center',
+  // },
+];
+
+export const gateColumns: BasicColumn[] = [
+  {
+    title: '风门ID',
+    dataIndex: 'nGateID',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风门名称',
+    dataIndex: 'strName',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风门压差',
+    dataIndex: 'data_dHDiff',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风门漏风量(m³/min)',
+    dataIndex: 'nGateID',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风门漏风量(m³/s)',
+    dataIndex: 'data_dQ_s',
+    width: 180,
+    align: 'center',
+  },
+];
+
+export const windowColumns: BasicColumn[] = [
+  {
+    title: '风窗ID',
+    dataIndex: 'nWindowID',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风窗名称',
+    dataIndex: 'strName',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风窗压差',
+    dataIndex: 'data_dHDiff',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风窗漏风量(m³/min)',
+    dataIndex: 'nGateID',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '风窗漏风量(m³/s)',
+    dataIndex: 'data_dQ_s',
+    width: 180,
+    align: 'center',
+  },
+];
+
+export const networkData = () => {
+  return [
+    {
+      id: '40008',
+      name: '副平硐',
+      fl: Number(Math.random() * 100.68 + 10341.18).toFixed(2),
+      fs: sensor1,
+      zl: Number(Math.random() * 10 + 80).toFixed(2),
+      mj: '21.9',
+      lmd: Number(Math.random() * 0.2).toFixed(2),
+    },
+    {
+      id: '40009',
+      name: '5煤组盘区辅运巷',
+      fl: Number(Math.random() * 100.68 + 1212).toFixed(2),
+      fs: sensor2,
+      zl: Number(Math.random() * 10 + 90).toFixed(2),
+      mj: '20.2',
+      lmd: Number(Math.random() * 0.2).toFixed(2),
+    },
+    {
+      id: '40010',
+      name: '15212辅运顺槽',
+      fl: Number(Math.random() * 40.68 + 645.54).toFixed(2),
+      fs: sensor3,
+      zl: Number(Math.random() * 10 + 55).toFixed(2),
+      mj: '20.3',
+      lmd: Number(Math.random() * 0.2).toFixed(2),
+    },
+    {
+      id: '40011',
+      name: '15212胶运顺槽',
+      fl: Number(Math.random() * 40.68 + 645.64).toFixed(2),
+      fs: sensor4,
+      zl: Number(Math.random() * 10 + 52).toFixed(2),
+      mj: '18.7',
+      lmd: Number(Math.random() * 0.2).toFixed(2),
+    },
+    {
+      id: '40012',
+      name: '15212回风顺槽',
+      fl: Number(Math.random() * 100.68 + 1361.04).toFixed(2),
+      fs: sensor5,
+      zl: Number(Math.random() * 10 + 52).toFixed(2),
+      mj: '21.4',
+      lmd: Number(Math.random() * 0.2).toFixed(2),
+    },
+  ];
+};
+
+export const warningColumns: BasicColumn[] = [
+  {
+    title: '位置',
+    dataIndex: 'location',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '等级',
+    dataIndex: 'level',
+    width: 70,
+    align: 'center',
+  },
+  {
+    title: '信息',
+    dataIndex: 'msg',
+    width: 120,
+    align: 'center',
+  },
+];
+
+export const warningData = () => {
+  return [
+    {
+      location: '副平硐',
+      type: '风速',
+      level: '1',
+      msg: '风速超限',
+    },
+    {
+      location: '5煤组盘区辅运巷',
+      type: '风量',
+      level: '2',
+      msg: '风量不足',
+    },
+    {
+      location: '副平硐',
+      type: '瓦斯',
+      level: '2',
+      msg: '瓦斯超限',
+    },
+    {
+      location: '15212胶运顺槽',
+      type: 'CO',
+      level: '3',
+      msg: 'CO超限',
+    },
+    {
+      location: '15212回风顺槽',
+      type: '瓦斯',
+      level: '3',
+      msg: '瓦斯超限',
+    },
+  ];
+};
+
+export function getMonitorData() {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(async () => {
+      // sensorDataList.value = sensorData();
+      // networkDataList.value = networkData();
+      // warningDataList.value = warningData();
+      // currentTime.value = dayjs(new Date('2022-10-11 15:03:11').getTime() + ++count * 5000).format('YYYY-MM-DD HH:mm:ss');
+      // totalEnterNum.value = Number(Math.random() * 200 - 100 + 23855).toFixed(0);
+      // totalToNum.value = Number(Math.random() * 200 - 100 + 244436).toFixed(0);
+      // totalPa.value = Number(Math.random() * 50 - 25 + 1640).toFixed(0);
+      // rate1.value = Number(Math.random() * 4 - 2 + 95).toFixed(0);
+      // rate2.value = Number(Math.random() * 4 - 2 + 95).toFixed(0);
+      // rate3.value = Number(Math.random() * 4 - 2 + 95).toFixed(0);
+      // sensorDataList.value = sensorData();
+      // networkDataList.value = networkData();
+      // warningDataList.value = warningData();
+      // if (timer) {
+      //   timer = null;
+      // }
+      getMonitorData();
+    }, 5000);
+  }
+}
+
+export const deviceTab = <{ title: string; code: string }[]>[
+  {
+    title: '巷道',
+    code: 'tun',
+  },
+  {
+    title: '风门',
+    code: 'gate',
+  },
+  {
+    title: '风窗',
+    code: 'window',
+  },
+];
+
+export const emergencyTab = <{ title: string; code: string }[]>[
+  {
+    title: '人员信息',
+    code: 'location',
+  },
+  {
+    title: '避灾路线',
+    code: 'emergency',
+  },
+];
+
+export const locationColumns: BasicColumn[] = [
+  {
+    title: '当前位置',
+    dataIndex: 'strinstallpos',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '名称',
+    dataIndex: 'strname',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '距离',
+    dataIndex: 'flen',
+    width: 70,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 120,
+    align: 'center',
+  },
+];
+
+export const emergencyColumns: BasicColumn[] = [
+  {
+    title: '数量',
+    width: 60,
+    align: 'center',
+    dataIndex: 'tunNum',
+  },
+  {
+    title: '总长度(m)',
+    width: 90,
+    align: 'center',
+    dataIndex: 'length',
+  },
+  {
+    title: '颜色',
+    dataIndex: 'color',
+    align: 'center',
+    width: 60,
+    slots: { customRender: 'color' },
+  },
+];
+
+export const emergencyPathColumns: BasicColumn[] = [
+  {
+    title: 'ID',
+    width: 80,
+    align: 'center',
+    dataIndex: 'ntunid',
+  },
+  {
+    title: '名称',
+    width: 100,
+    align: 'center',
+    dataIndex: 'strname',
+  },
+  {
+    title: '风量',
+    width: 80,
+    align: 'center',
+    dataIndex: 'fq',
+  },
+  {
+    title: '风速',
+    width: 80,
+    align: 'center',
+    dataIndex: 'fv',
+  },
+  {
+    title: '长度',
+    width: 80,
+    align: 'center',
+    dataIndex: 'flength',
+  },
+];
+
+export const solveTimesData = reactive({
+  // header: ['解算时间', '解算用时(s)'],
+  data: <[string, string][]>[],
+  index: false,
+  headerBGC: '#3d9dd400',
+  oddRowBGC: '#009acd00',
+  evenRowBGC: '#009acd00',
+  rowNum: 4,
+  hoverPause: true,
+  waitTime: 50000,
+  align: ['center', 'center', 'center', 'center'],
+});

src/views/vent/monitorManager/fanLocalMonitor/components/conditionAssistance.vue

@@ -0,0 +1,943 @@
+<template>
+  <BasicModal
+    @register="register"
+    title="局部通风机运行工况智能决策"
+    :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }"
+    :width="isComputeGas ? '1400px' : '950px'"
+    v-bind="$attrs"
+    @ok="onSubmit"
+    :closeFunc="onCancel"
+    :canFullscreen="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+  >
+    <div class="modal-box">
+      <div v-if="isComputeGas" class="left-box" style="width: 550px; height: 400px">
+        <BarAndLine
+          class="echarts-line"
+          xAxisPropType="time"
+          :dataSource="monitorData"
+          height="400px"
+          :chartsColumns="chartsColumnList"
+          :option="echatsOption"
+          chartsType="listMonitor"
+        />
+      </div>
+      <div class="center-box">
+        <a-spin :spinning="loadding" tip="正在计算，请稍等。。。">
+          <div ref="ChartRef" class="info-echarts" :style="{ width: isComputeGas ? '450px' : '520px', height: '400px' }"></div>
+        </a-spin>
+      </div>
+      <div class="right-box">
+        <!-- <div class="box-title">曲线方程</div> -->
+        <dv-decoration7 style="height: 20px">
+          <div class="box-title">曲线方程</div>
+        </dv-decoration7>
+        <div class="info-lines">
+          <div v-for="(item, index) in lineEquation" class="info-item" :key="index">
+            <div class="title">{{ item }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="tip-box">
+        <div class="title">最佳工况点 <SendOutlined class="ml-5px" /></div>
+        <div class="tip-container" :style="{ width: isComputeGas ? '898px' : '400px' }">
+          <template v-if="resultObj && isHaCross">
+            <div class="ml-10px">
+              <span>频率:</span>
+              <span style="color: #d066ff; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.Hz) }}Hz</span>
+            </div>
+            <div class="ml-10px">
+              <span>风量:</span>
+              <span style="color: #3adeff; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.x) }} m³/min</span>
+            </div>
+            <div class="ml-10px">
+              <span>负压</span>
+              <span style="color: #ffbe34; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.y) }} Pa</span>
+            </div>
+          </template>
+          <div v-else-if="isHaCross" class="ml-10px">暂无</div>
+          <div v-else style="color: #ffbe34; padding: 0 10px; font-weight: 600" class="ml-10px">无有效工况点</div>
+        </div>
+      </div>
+    </div>
+    <div class="setting-box">
+      <div class="right-inputs">
+        <div class="vent-flex-row">
+          <div class="input-title">风量(m³/min)：</div>
+          <InputNumber :disabled="isComputeGas" class="input-box" size="large" v-model:value="uQ1" />
+          <div class="input-title">风压(Pa)：</div>
+          <InputNumber :disabled="isComputeGas" class="input-box" size="large" v-model:value="uH" />
+          <div v-if="!isComputeGas" class="btn btn1" @click="makeLine">决策工况</div>
+          <template v-else>
+            <div class="btn btn1" @click="startCompute">一键调控</div>
+            <div class="btn btn1" @click="resetCompute">一键复位</div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  //ts语法
+  import { ref, onMounted, reactive, nextTick, computed } from 'vue';
+  import echarts from '/@/utils/lib/echarts';
+  import { option, initData, fanInfoData, chartsColumnList, echatsOption } from '../fanLocal.data';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useForm } from '/@/components/Form/index';
+  import { Input, InputNumber } from 'ant-design-vue';
+  import { Decoration7 as DvDecoration7 } from '@kjgl77/datav-vue3';
+  import { message } from 'ant-design-vue';
+  import { formatNum } from '/@/utils/ventutil';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { cloneDeep } from 'lodash-es';
+  import dayjs from 'dayjs';
+  import { SendOutlined } from '@ant-design/icons-vue';
+
+  const emit = defineEmits(['close', 'register', 'openModal']);
+  const props = defineProps({
+    dataSource: {
+      type: Array,
+      default: () => [],
+    },
+    frequency: {
+      type: Number,
+      default: 30,
+    },
+    m3: {
+      type: Number,
+      default: 670.8,
+    },
+    // gasWarningMax: { type: Number, default: 0.5 },
+    // gasWarningVal: { type: Number, default: 0.6 },
+    // windQuantity: { type: Number, default: 635.84 },
+  });
+  type AssistanceItemType = {
+    angle: number;
+    Hz: number;
+    a: number;
+    b: number;
+    c: number;
+    min: number;
+    max: number;
+  };
+
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner((data) => {
+    nextTick(() => {
+      computeAssistance();
+      if (option['xAxis']) option['xAxis']['data'] = xData;
+      option['series'] = yDataList;
+      if (JSON.stringify(data) !== '{}') {
+        uQ1.value = Number(data['m3']);
+        uHz.value = Math.ceil(data['frequency']);
+        gasWarningVal.value = data['gasWarningVal'];
+        isComputeGas.value = true;
+        nextTick(() => {
+          computeUH(data['frequency'], data['m3']);
+          initEcharts();
+          setTimeout(() => {
+            // 根据频率计算uH
+            makeLine();
+          }, 2000);
+        });
+      } else {
+        initEcharts();
+        isComputeGas.value = false;
+      }
+    });
+  });
+  const loadding = ref<boolean>(false);
+  const formShow = ref(false);
+  const formType = ref('');
+  const ChartRef = ref();
+  const myChart = ref();
+  const refresh = ref(true);
+  const xDataMax = 1200;
+  let xDataMin = 0;
+  const xData: any[] = [];
+  const yDataList: [] = [];
+  let lineNum = 0;
+  const lineEquation = ref<string[]>([]);
+  const assistanceData = ref([]);
+  const monitorData = ref([]);
+  const gasWarningVal = ref(0);
+  const gasWarningMax = ref(0.5);
+  const isComputeGas = ref(false);
+  const isStartCompute = ref(0);
+  const uHz = ref(0);
+  const uQ1 = ref(0);
+  const uQ = computed(() => {
+    if (uQ1.value) {
+      if (gasWarningVal.value) {
+        return ((uQ1.value * gasWarningVal.value) / gasWarningMax.value) * 1.08;
+      }
+      return uQ1.value;
+    } else {
+      return 0;
+    }
+  });
+  const uH = ref<number | undefined>(undefined); //  - 1000
+  const isHaCross = ref(true);
+  const resultObj = ref<{ x: number; y: number; Hz: number } | null>(null);
+
+  const [registerForm, {}] = useForm({
+    labelWidth: 120,
+    actionColOptions: {
+      span: 24,
+    },
+    compact: true,
+    showSubmitButton: true,
+    submitButtonOptions: {
+      text: '提交',
+      preIcon: '',
+    },
+    showResetButton: true,
+    resetButtonOptions: {
+      text: '关闭',
+      preIcon: '',
+    },
+    resetFunc: async () => {
+      formShow.value = false;
+    },
+  });
+
+  function computeAssistance() {
+    assistanceData.value = initData();
+    lineNum = 0;
+    const assistanceDataList = [];
+    const lineEquationList: string[] = [];
+    for (const key in assistanceData.value) {
+      const item = assistanceData.value[key];
+      assistanceDataList.push(item);
+      lineEquationList.push(
+        `H${parseInt(item['Hz'])} = ${item['a']}Q² ${Number(item['b']) > 0 ? '+' : '-'} ${Math.abs(Number(item['b'])).toFixed(4)}Q ${
+          Number(item['c']) > 0 ? '+' : '-'
+        } ${Math.abs(Number(item['c'])).toFixed(4)}`
+      );
+    }
+    lineEquation.value = lineEquationList;
+    lineNum = assistanceDataList.length;
+    xDataMin =
+      Math.min.apply(
+        Math,
+        assistanceDataList.map((item) => {
+          return item.min;
+        })
+      ) - 100;
+    // const xDataMax = Math.max.apply(Math, assistanceDataList.map(item => { return item.max }))
+    fanInfoData.flfw = `${xDataMin}~${xDataMax}`;
+    const computeItem = (item: AssistanceItemType) => {
+      const min = item.min;
+      const max = item.max;
+      const HList: number[] = [];
+      for (let i = xDataMin; i <= xDataMax; i++) {
+        if (i < min) {
+          HList.push(null);
+        } else if (i > max) {
+          HList.push(null);
+        } else {
+          HList.push(item.a * i * i + item.b * i + item.c);
+        }
+      }
+      return HList;
+    };
+
+    for (const key in assistanceData.value) {
+      const element: AssistanceItemType = assistanceData.value[key];
+      const yData: number[] = computeItem(element);
+      const series = {
+        type: 'line',
+        name: `${element['Hz']}Hz`,
+        smooth: true,
+        showSymbol: false,
+        symbol: 'none',
+        emphasis: {
+          focus: 'series',
+        },
+        itemStyle: { normal: { label: { show: true } } },
+        lineStyle: {
+          width: 1,
+          color: '#ffffff88',
+        },
+        zlevel: 0,
+        z: 1,
+        endLabel: {
+          show: true,
+          formatter: '{a}',
+          distance: 0,
+          color: '#39E9FE99',
+          backgroundColor: 'transparent',
+          padding: [3, 3, 2, 3],
+        },
+        data: yData,
+      };
+
+      yDataList.push(series);
+    }
+
+    for (let i = xDataMin; i <= xDataMax; i++) {
+      xData.push(i);
+    }
+  }
+
+  function computeUH(Hz: number, uQ: number) {
+    const equation = assistanceData.value.find((item) => {
+      return Math.ceil(Hz) == item['Hz'];
+    });
+    if (equation) {
+      const uHMax = Math.round((equation['a'] * equation['min'] * equation['min'] + equation['b'] * equation['min'] + equation['c']) * 100) / 100;
+      const uHMin = Math.round((equation['a'] * equation['max'] * equation['max'] + equation['b'] * equation['max'] + equation['c']) * 100) / 100;
+      const uH1 = Math.round((equation['a'] * uQ * uQ + equation['b'] * uQ + equation['c']) * 100) / 100;
+      if (uH1 >= uHMin && uH1 <= uHMax) {
+        uH.value = uH1;
+        isHaCross.value = true;
+      } else {
+        isHaCross.value = false;
+      }
+    }
+  }
+
+  function computeRLine() {
+    console.log('计算后的风量为------------>', uQ.value);
+    if (uH.value && uQ.value) {
+      const R = uH.value / Number(uQ.value) / Number(uQ.value);
+      const yAxis: number[] = [];
+      for (let i = 0; i < xData.length; i++) {
+        const x = xData[i];
+        const y = R * x * x;
+        if (x == uQ.value) {
+          uH.value = y;
+        }
+        yAxis.push(y);
+      }
+      const series = {
+        name: 'R',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        zlevel: 0,
+        emphasis: {
+          focus: 'series',
+        },
+        itemStyle: { normal: { label: { show: true } } },
+        lineStyle: {
+          width: 2,
+          color: '#D0A343',
+        },
+        endLabel: {
+          show: true,
+          formatter: '{a}',
+          distance: 0,
+          color: '#D0A343',
+        },
+        data: yAxis,
+      };
+      yDataList[lineNum] = series;
+    }
+  }
+
+  function reSetLine() {
+    let minIndex = -1;
+    for (let i = 0; i < yDataList.length; i++) {
+      if (i !== lineNum && i != lineNum + 1) {
+        if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['color'] = '#ffffff88';
+        if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['width'] = 1;
+        if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['color']) {
+          if (i % 5 == 0) {
+            yDataList[i]['endLabel']['color'] = '#39E9FE99';
+          } else {
+            yDataList[i]['endLabel']['color'] = '#39E9FE00';
+          }
+        }
+        if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['backgroundColor']) yDataList[i]['endLabel']['backgroundColor'] = 'transparent';
+        if (yDataList[i]['z']) yDataList[i]['z'] = 1;
+      }
+
+      if (resultObj.value && `${resultObj.value.Hz}Hz` == yDataList[i]['name']) {
+        minIndex = i;
+      }
+    }
+    if (minIndex != -1) {
+      yDataList[minIndex]['lineStyle']['color'] = '#9A60B4';
+      yDataList[minIndex]['lineStyle']['width'] = 2;
+      yDataList[minIndex]['endLabel']['color'] = '#9A60B4';
+      yDataList[minIndex]['endLabel']['backgroundColor'] = '#111';
+      yDataList[minIndex]['z'] = 999;
+    }
+  }
+
+  // 根据风量计算压差
+  function computePa() {
+    const R = uH.value / Number(uQ.value) / Number(uQ.value);
+    const pointX = Number(uQ.value);
+    const pointY = Number(uH.value);
+    type ItemType = {
+      x: number;
+      y: number;
+      Hz: number;
+    };
+    const paList = new Map<number, ItemType>(); // key 是最近距离
+    const getIntersectionPoint = (a, b, c, R, min, max) => {
+      const obj: { x: undefined | number; y: undefined | number; min: number; max: number } = { x: undefined, y: undefined, min: min, max: max };
+      // 计算二次方程的判别式
+      const discriminant = b * b - 4 * (a - R) * c;
+
+      if (discriminant > 0) {
+        // 有两个实根
+        const x1 = (-b + Math.sqrt(discriminant)) / (2 * (a - R));
+        const x2 = (-b - Math.sqrt(discriminant)) / (2 * (a - R));
+
+        const y1 = R * x1 * x1;
+        const y2 = R * x2 * x2;
+        if (x1 >= min && x1 <= max) {
+          obj.x = x1;
+          obj.y = y1;
+        } else {
+          obj.x = x2;
+          obj.y = y2;
+        }
+      } else if (discriminant === 0) {
+        // 有一个实根
+        const x = -b / (2 * (a - R));
+        const y = R * x * x;
+        if (x >= min && x <= max) {
+          obj.x = x;
+          obj.y = y;
+        }
+        // console.log(`唯一交点: (${x}, ${y})`);
+      } else {
+        // 没有实根，交点在虚数域
+        console.log('没有实数交点');
+        isHaCross.value = false;
+      }
+      return obj;
+    };
+
+    for (let key in assistanceData.value) {
+      const item: AssistanceItemType = assistanceData.value[key];
+      paList.set(item.Hz, getIntersectionPoint(item.a, item.b, item.c, R, item.min, item.max));
+    }
+
+    const min = (points: Map<number, ItemType>) => {
+      const targetX = uQ.value;
+      const targetY = uH.value;
+      let minDistance = Number.POSITIVE_INFINITY;
+      let closestPoint = null;
+      let keyVal = '';
+      // 遍历已知点数组，计算距离并更新最小距离和对应的点
+      for (const [key, point] of points) {
+        const distance = Math.sqrt((targetX - point.x) ** 2 + (targetY - point.y) ** 2);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestPoint = point;
+          keyVal = key;
+        }
+      }
+
+      if (closestPoint !== null) {
+        // console.log(`距离最小的点是 (${closestPoint.x}, ${closestPoint.y}), 距离为 ${minDistance}`);
+        if (closestPoint.x < closestPoint.min || closestPoint.x > closestPoint.max) {
+          resultObj.value = null;
+          isHaCross.value = false;
+          console.log('没有找到最小距离的点');
+        } else {
+          resultObj.value = { x: closestPoint.x, y: closestPoint.y, Hz: keyVal };
+          isHaCross.value = true;
+        }
+      } else {
+        resultObj.value = null;
+        isHaCross.value = false;
+        console.log('没有找到最小距离的点');
+      }
+    };
+    min(paList);
+  }
+
+  function computeR() {
+    if (uQ.value && uH.value) {
+      computeRLine();
+      computePa();
+      const x = resultObj.value && resultObj.value.x ? resultObj.value.x.toFixed(0) : -100;
+      const y = resultObj.value && resultObj.value.y ? Number(resultObj.value.y.toFixed(0)) : -100;
+      const series = {
+        type: 'effectScatter',
+        symbolSize: 5,
+        // symbolOffset:[1, 1],
+        showEffectOn: 'render',
+        // 涟漪特效相关配置。
+        rippleEffect: {
+          // 波纹的绘制方式，可选 'stroke' 和 'fill'。
+          brushType: 'stroke',
+        },
+        zlevel: 1,
+        z: 999,
+        itemStyle: {
+          color: '#C60000',
+        },
+        data: [[x, y]],
+      };
+      yDataList[lineNum + 1] = series;
+    }
+    // // 根据计算后的得到的频率，风量，瓦斯浓度
+    // getMonitor();
+  }
+
+  function getMonitor() {
+    clearTimeout(timer);
+    timer = undefined;
+    const n = 10;
+    const windQuantity = uQ1.value;
+    const obj = {
+      m3: windQuantity,
+      gas: gasWarningVal.value,
+      time: '',
+      Hz: uHz.value,
+    };
+    const monitorList: { m3: number; gas: number; Hz: number; time: string }[] = [];
+    for (let i = 0; i < n; i++) {
+      const item = cloneDeep(obj);
+      const m3Temp = (Math.random() * 2 - 1) * Math.random() * 20;
+      const gas = m3Temp * 0.0002;
+      item.time = dayjs(new Date().getTime() - (n + i) * 3000).format('HH:mm:ss');
+      item.m3 = (obj.m3 + m3Temp).toFixed(2);
+      item.gas = (obj.gas + gas).toFixed(4);
+      item.Hz = (obj.Hz + Math.random()).toFixed(2);
+      monitorList.unshift(item);
+    }
+    monitorData.value = cloneDeep(monitorList);
+
+    setTimeout(() => {
+      clearTimeout(timer);
+      timer = undefined;
+
+      timer = 0;
+      if (uQ1.value && uH.value && uQ.value) {
+        openTimer(cloneDeep(obj), 0);
+      } else {
+        openTimer(cloneDeep(obj), 0);
+      }
+    }, 1000);
+  }
+
+  function startCompute() {
+    setTimeout(() => {
+      message.success('指令下发成功！');
+      isStartCompute.value = 1;
+    }, 800);
+  }
+
+  function resetCompute() {
+    setTimeout(() => {
+      message.success('指令下发成功！');
+      isStartCompute.value = -1;
+      tempList.length = 0;
+      n = 0;
+    }, 800);
+  }
+
+  let timer = undefined;
+  let n = 0;
+  let tempList = [];
+  function openTimer(obj: { m3: number; gas: number; Hz: number; time: string }) {
+    // 打开定时器
+    const monitorList = cloneDeep(monitorData.value);
+    if (timer !== undefined) {
+      timer = setTimeout(() => {
+        obj.m3 = Number(obj.m3);
+        obj.gas = Number(obj.gas);
+        obj.Hz = Number(obj.Hz);
+        const item = cloneDeep(obj);
+        item.time = dayjs(new Date().getTime()).format('HH:mm:ss');
+        if (resultObj.value && resultObj.value.x && resultObj.value.y && isStartCompute.value != 0) {
+          if (isStartCompute.value == 1 && Number(obj.m3) > uQ.value && Number(obj.gas) < gasWarningMax.value) {
+            isStartCompute.value = 0;
+            n = 0;
+          } else if (isStartCompute.value == -1 && Number(obj.m3) < uQ1.value) {
+            isStartCompute.value = 0;
+            n = 0;
+          }
+        }
+
+        if (!isStartCompute.value) {
+          const m3Temp = (Math.random() * 2 - 1) * Math.random() * Math.random() * 10;
+          const gas = m3Temp * 0.0002;
+          item.m3 = (obj.m3 + m3Temp).toFixed(2);
+          item.gas = (obj.gas + gas).toFixed(4);
+          item.Hz = (obj.Hz + Math.random()).toFixed(2);
+          n = 0;
+        } else {
+          if (n < 2) {
+            const item1 = cloneDeep(obj);
+            const m3Temp = Math.random() * Math.random() * 10;
+            const gas = m3Temp * 0.0002;
+            item1.m3 = (obj.m3 + m3Temp).toFixed(2);
+            item1.gas = (obj.gas + gas).toFixed(4);
+            item1.Hz = (obj.Hz + (Math.random() * 2 - 1) * Math.random()).toFixed(2);
+            tempList.push(item1);
+          }
+
+          // 计算  uQ1 -> uQ  gas -> gasWarningMax.value Hz -> resultObj.value.Hz
+          if (isStartCompute.value == 1) {
+            if (resultObj.value.Hz - obj.Hz > 0) {
+              item.Hz = (uHz.value + (2 * n * (resultObj.value.Hz - uHz.value)) / 20).toFixed(2);
+              if (resultObj.value.Hz - obj.Hz < 0) {
+                item.Hz = (resultObj.value.Hz + Math.random() * 0.5).toFixed(2);
+              }
+            } else {
+              // item.Hz = (resultObj.value.Hz + (Math.random() * 2 - 1) * Math.random() * 2).toFixed(2);
+              item.Hz = (resultObj.value.Hz + Math.random() * 0.5).toFixed(2);
+            }
+            item.m3 = (obj.m3 + (0.017 * n * item.Hz * (item.Hz - uHz.value) * (uQ.value - uQ1.value)) / 600).toFixed(2);
+            if (Number(item.m3) > uQ.value) {
+              item.m3 = (uQ.value + Math.random() * 10).toFixed(2);
+            }
+            item.gas = (
+              gasWarningVal.value -
+              (0.015 * item.Hz * n * (item.Hz - uHz.value) * (gasWarningVal.value - gasWarningMax.value)) / 200
+            ).toFixed(4);
+          } else {
+            // 复位
+            if (obj.Hz - uHz.value > 0) {
+              item.Hz = (obj.Hz - (2 * n * (resultObj.value.Hz - uHz.value)) / 30).toFixed(2);
+              if (item.Hz - uHz.value < 0) {
+                item.Hz = uHz.value - 0.3;
+              }
+            } else {
+              item.Hz = (uHz.value + (Math.random() * 2 - 1) * Math.random() * 2).toFixed(2);
+            }
+            item.m3 = (obj.m3 - (0.02 * n * n * item.Hz * (resultObj.value.Hz - uHz.value) * (uQ.value - uQ1.value)) / 400).toFixed(2);
+            if (item.m3 < uQ1.value) {
+              item.m3 = uQ1.value - Math.random() * 10;
+            }
+            item.gas = (obj.gas + (0.015 * item.Hz * n * (uHz.value - item.Hz) * (gasWarningVal.value - gasWarningMax.value)) / 800).toFixed(4);
+          }
+        }
+        if (monitorList.length >= 10) {
+          monitorList.shift();
+          const monitor = cloneDeep(item);
+          const data = tempList.shift();
+          if (data) {
+            item['m3'] = data['m3'];
+            item['gas'] = data['gas'];
+          }
+          tempList.push(monitor);
+          monitorList.push(item);
+        } else {
+          monitorList.push(item);
+        }
+        monitorData.value = monitorList;
+        // console.log('瓦斯监测数据-------------->', monitorData.value);
+        if (timer) {
+          if (!isStartCompute.value) {
+            // n++;
+            openTimer(cloneDeep(obj));
+          } else {
+            n++;
+            openTimer(cloneDeep(item));
+          }
+        }
+      }, 3000);
+    }
+  }
+
+  function edit(flag) {
+    if (flag == 'info') {
+      formType.value = '编辑风机信息';
+    }
+    if (flag == 'line') {
+      formType.value = '编辑特性曲线';
+    }
+    if (formShow.value == true) {
+      formShow.value = false;
+      nextTick(() => {
+        formShow.value = true;
+      });
+    } else {
+      formShow.value = true;
+    }
+  }
+
+  function onSubmit() {
+    emit('close');
+    closeModal();
+    ChartRef.value = null;
+    uQ.value = undefined;
+    uH.value = undefined;
+    formType.value = '';
+    refresh.value = true;
+    xData.length = 0;
+    yDataList.length = 0;
+    lineNum = 0;
+    lineEquation.value = [];
+    resultObj.value = null;
+    monitorData.value = [];
+    clearTimeout(timer);
+    timer = undefined;
+  }
+
+  async function onCancel() {
+    return new Promise((resolve) => {
+      if (isStartCompute.value == 0) {
+        onSubmit();
+        resolve(true);
+      } else {
+        message.warning('为保障矿井安全生产，请确保已复位！！！');
+        resolve(false);
+      }
+    });
+  }
+
+  function initEcharts() {
+    if (ChartRef.value) {
+      reSetLine();
+      myChart.value = echarts.init(ChartRef.value);
+      option && myChart.value.setOption(option);
+      refresh.value = false;
+      getMonitor();
+      nextTick(() => {
+        setTimeout(() => {
+          refresh.value = true;
+        }, 0);
+      });
+    }
+  }
+
+  function makeLine() {
+    if (uQ.value && uH.value) {
+      loadding.value = true;
+      setTimeout(() => {
+        computeR();
+        reSetLine();
+        option && myChart.value.setOption(option);
+        loadding.value = false;
+      }, 1200);
+    }
+  }
+  function handleSubmit() {
+    message.success('提交成功');
+    setTimeout(() => {
+      formShow.value = false;
+    }, 800);
+  }
+  onMounted(() => {
+    timer = undefined;
+  });
+</script>
+
+<style scoped lang="less">
+  .modal-box {
+    display: flex;
+    flex-direction: row;
+    background-color: #ffffff05;
+    padding: 20px 8px;
+    border: 1px solid #00d8ff22;
+    position: relative;
+    // min-height: 600px;
+    .box-title {
+      width: calc(100% - 40px);
+      text-align: center;
+      background-color: #1dc1f522;
+    }
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 2px 0px;
+      margin: 4px 0;
+      background-image: linear-gradient(to right, #39deff15, #3977e500);
+      &:first-child {
+        margin-top: 0;
+      }
+      .title {
+        width: 200px;
+        text-align: left;
+        padding-left: 20px;
+        color: #f1f1f1cc;
+      }
+      .value {
+        width: 150px;
+        color: #00d8ff;
+        padding-right: 20px;
+        text-align: right;
+      }
+    }
+    .right-box {
+      width: 320px;
+      .info-lines {
+        width: calc(100% - 2px);
+        height: 450px;
+        box-shadow: 0px 0px 50px #86baff08 inset;
+        overflow-y: auto;
+        margin-top: 5px;
+        .title {
+          width: 100%;
+          color: #f1f1f1cc;
+        }
+      }
+    }
+    .center-box {
+      flex: 1;
+      margin: 0 10px;
+      display: flex;
+      .info-echarts {
+        // background-color: #ffffff11;
+      }
+      .result-tip {
+        text-align: center;
+        background-color: #00000011;
+        line-height: 28px;
+        margin: 10px 50px 0 50px;
+        border: 1px solid #00d8ff22;
+        border-radius: 2px;
+      }
+    }
+    .tip-box {
+      width: 1040px;
+      height: 44px;
+      position: absolute;
+      top: 447px;
+      display: flex;
+      padding: 0 20px;
+      .title {
+        width: 142px;
+        height: 43px;
+        display: flex;
+        align-items: center;
+        padding-left: 30px;
+        background-image: url('@/assets/images/fanlocal-tip/tip-title.png');
+        position: relative;
+        &::before {
+          content: '';
+          display: inline-block;
+          position: absolute;
+          width: 31px;
+          height: 31px;
+          top: 5px;
+          left: -8px;
+          background-image: url('@/assets/images/fanlocal-tip/tip-icon.png');
+        }
+      }
+      .tip-container {
+        width: 898px;
+        height: 44px;
+        line-height: 44px;
+        display: flex;
+        background-image: url('@/assets/images/fanlocal-tip/tip-bg.png');
+        background-size: cover;
+      }
+    }
+  }
+  .setting-box {
+    width: 1170px;
+    height: 70px;
+    margin: 10px 0;
+    background-color: #ffffff05;
+    border: 1px solid #00d8ff22;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .right-inputs {
+      width: 100%;
+      display: flex;
+      height: 40px;
+      margin: 0 10px;
+      justify-content: space-between;
+    }
+    .left-buttons {
+      display: flex;
+      height: 40px;
+
+      .btn {
+        margin: 0 10px;
+      }
+    }
+    .border-clip {
+      width: 1px;
+      height: 25px;
+      border-right: 1px solid #8b8b8b77;
+    }
+    .input-title {
+      max-width: 150px;
+    }
+    .input-box {
+      width: 220px !important;
+      background: transparent !important;
+      border-color: #00d8ff44 !important;
+      margin-right: 20px;
+      color: #fff !important;
+    }
+    .btn {
+      padding: 8px 20px;
+      position: relative;
+      border-radius: 2px;
+      color: #fff;
+      width: fit-content;
+      cursor: pointer;
+
+      &::before {
+        position: absolute;
+        display: block;
+        content: '';
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        top: 2px;
+        left: 2px;
+        border-radius: 2px;
+        z-index: -1;
+      }
+    }
+
+    .btn1 {
+      border: 1px solid #5cfaff;
+
+      &::before {
+        background-image: linear-gradient(#2effee92, #0cb1d592);
+      }
+
+      &:hover {
+        border: 1px solid #5cfaffaa;
+
+        &::before {
+          background-image: linear-gradient(#2effee72, #0cb1d572);
+        }
+      }
+    }
+  }
+  .is-open {
+    animation: open 0.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+  }
+  .is-close {
+    height: 0px;
+  }
+
+  @keyframes open {
+    0% {
+      height: 0px;
+    }
+    100% {
+      height: fit-content;
+    }
+  }
+
+  @keyframes close {
+    0% {
+      height: fit-content;
+    }
+    100% {
+      height: 0px;
+    }
+  }
+  :deep(.zxm-divider-inner-text) {
+    color: #cacaca88 !important;
+  }
+  :deep(.zxm-form-item) {
+    margin-bottom: 10px;
+  }
+</style>

src/views/vent/monitorManager/fanLocalMonitor/index.vue

@@ -578,15 +578,15 @@
       },
     ],
     rightBtnArr: [
-      {
-        key: 'gasAlarmSet',
-        value: '瓦斯限值设定',
-        // permission: 'fanLocal:control',
-      },
-      {
-        key: 'kkjc',
-        value: '工况辅助决策',
-      },
+      // {
+      //   key: 'gasAlarmSet',
+      //   value: '瓦斯限值设定',
+      //   // permission: 'fanLocal:control',
+      // },
+      // {
+      //   key: 'kkjc',
+      //   value: '工况辅助决策',
+      // },
       {
         key: 'diameter',
         value: '风筒直径',
@@ -804,10 +804,10 @@
           if (data['Fan1StartStatus'] && data['Fan1StartStatus'] === '0.0') data['Fan1StartStatus'] = '0';
           if (data['Fan2StartStatus'] && data['Fan2StartStatus'] === '0.0') data['Fan2StartStatus'] = '0';
 
-          if (globSetting.sysOrgCode === 'sdmtjtbetmk') {
-            if (data['m3']) data['ductOutletAirVolume_merge'] = data['m3'];
-            if (data['m3']) data['inletAirVolume_merge'] = (Number(data['m3']) * 1.08).toFixed(2);
-          }
+          // if (globSetting.sysOrgCode === 'sdmtjtbetmk') {
+          //   if (data['m3']) data['ductOutletAirVolume_merge'] = data['m3'];
+          //   if (data['m3']) data['inletAirVolume_merge'] = (Number(data['m3']) * 1.08).toFixed(2);
+          // }
           dataSource.value.push(data);
         });
         if (MonitorDataTable.value && selectRowIndex.value == -1) {

src/views/vent/monitorManager/groutMonitor/bertai.threejs.base.ts

@@ -50,8 +50,8 @@ class BertaiBase {
       this.model.setGLTFModel([this.modelName]).then((gltf) => {
         this.group = gltf[0];
         if (this.group) {
-        //   this.group?.scale.set(12.5, 12.5, 12.5);
-        this.group?.scale.set(3, 3, 3);
+          //   this.group?.scale.set(12.5, 12.5, 12.5);
+          this.group?.scale.set(3, 3, 3);
           this.group.position.y = 4;
           resolve(null);
           this.addLight();

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

@@ -1,198 +1,198 @@
 <template>
-    <div class="monitor-container">
-        <div class="area-box lr-box">
-            <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-                <ventBox1>
-                    <template #title>
-                        <div>注浆站输出监测</div>
-                    </template>
-                    <template #container>
-                        <div class="monitor-box">
-                            <div class="monitor-item">
-                                <div class="state-item" v-for="(preFan, index) in groutFanMonitorData" :key="index">
-                                    <div class="state-title">{{ preFan.title }}</div>
-                                    <div v-if="preFan.unit !== 'signal'" class="state-val">{{
-                monitorData[preFan.code] >= 0 ?
-                    formatNum(Number(monitorData[preFan.code])) : '-'
-            }}</div>
-                                    <div v-else :class="{
-                    'signal-round': true,
-                    'signal-round-warning': monitorData[preFan.code] == '1',
-                    'signal-round-run': monitorData[preFan.code] == '0',
-                    'signal-round-gry':monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1'
-                }"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </ventBox1>
+  <div class="monitor-container">
+    <div class="area-box lr-box">
+      <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+        <ventBox1>
+          <template #title>
+            <div>注浆站输出监测</div>
+          </template>
+          <template #container>
+            <div class="monitor-box">
+              <div class="monitor-item">
+                <div class="state-item" v-for="(preFan, index) in groutFanMonitorData" :key="index">
+                  <div class="state-title">{{ preFan.title }}</div>
+                  <div v-if="preFan.unit !== 'signal'" class="state-val">{{
+                    monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-'
+                  }}</div>
+                  <div
+                    v-else
+                    :class="{
+                      'signal-round': true,
+                      'signal-round-warning': monitorData[preFan.code] == '1',
+                      'signal-round-run': monitorData[preFan.code] == '0',
+                      'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
+                    }"
+                  ></div>
+                </div>
+              </div>
             </div>
+          </template>
+        </ventBox1>
+      </div>
+    </div>
+    <div class="header-box">
+      <div class="header-container">
+        <div class="device-detail">
+          <div class="device-title">&nbsp</div>
+          <div class="device-val">是否运行</div>
+          <div class="device-val">是否停止</div>
+          <div class="device-val">故障</div>
+          <div class="device-val">运行反馈</div>
         </div>
-        <div class="header-box">
-            <div class="header-container">
-                <div class="device-detail">
-                    <div class="device-title">&nbsp</div>
-                    <div class="device-val">是否运行</div>
-                    <div class="device-val">是否停止</div>
-                    <div class="device-val">故障</div>
-                    <div class="device-val">运行反馈</div>
-                </div>
-                <div v-for="(device, key) in deviceMonitorListLt" class="device-detail" :key="key">
-                    <div class="device-title">{{ device.title }}</div>
-                    <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
-                        <span v-if="index == 0"
-                            :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
-                monitorData[detailItem.code] == '0' ? '是' : monitorData[detailItem.code] == '1' ? '否' : '-'
+        <div v-for="(device, key) in deviceMonitorListLt" class="device-detail" :key="key">
+          <div class="device-title">{{ device.title }}</div>
+          <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
+            <span v-if="index == 0" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
+              monitorData[detailItem.code] == '0' ? '是' : monitorData[detailItem.code] == '1' ? '否' : '-'
             }}</span>
-                        <span v-if="index == 1"
-                            :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
-                monitorData[detailItem.code] == '0' ? '是' : monitorData[detailItem.code] == '1' ? '否' : '-'
+            <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
+              monitorData[detailItem.code] == '0' ? '是' : monitorData[detailItem.code] == '1' ? '否' : '-'
             }}</span>
-                        <span v-if="index == 2"
-                            :style="{ color: monitorData[detailItem.code] == '0' ? '#10BC79' : monitorData[detailItem.code] == '1' ? '#F14C4C' : '#BFBFBF' }">{{
-                monitorData[detailItem.code] == '0' ? '正常' : monitorData[detailItem.code] == '1' ? '报警' :
-                    '-'
-            }}</span>
-                        <span v-if="index == 3"
-                            :style="{ color: monitorData[detailItem.code] == '0' ? '#10BC79' : monitorData[detailItem.code] == '1' ? '#F14C4C' : '#BFBFBF' }">{{
-                monitorData[detailItem.code] == '0' ? '正常' : monitorData[detailItem.code] == '1' ? '报警' :
-                    '-'
-            }}</span>
-                    </div>
-                </div>
-            </div>
+            <span
+              v-if="index == 2"
+              :style="{ color: monitorData[detailItem.code] == '0' ? '#10BC79' : monitorData[detailItem.code] == '1' ? '#F14C4C' : '#BFBFBF' }"
+              >{{ monitorData[detailItem.code] == '0' ? '正常' : monitorData[detailItem.code] == '1' ? '报警' : '-' }}</span
+            >
+            <span
+              v-if="index == 3"
+              :style="{ color: monitorData[detailItem.code] == '0' ? '#10BC79' : monitorData[detailItem.code] == '1' ? '#F14C4C' : '#BFBFBF' }"
+              >{{ monitorData[detailItem.code] == '0' ? '正常' : monitorData[detailItem.code] == '1' ? '报警' : '-' }}</span
+            >
+          </div>
         </div>
-        <div class="lr-box area-box">
-            <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
-                <ventBox1>
-                    <template #title>
-                        <div>注浆站状态监测</div>
-                    </template>
-                    <template #container>
-                        <div class="monitor-box">
-                            <div class="monitor-item">
-                                <div class="state-item" v-for="(preFan, index) in preFanMonitorData" :key="index">
-                                    <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ?
-                `(${preFan.unit})` : '') }}</div>
-
-                                    <div :class="{
-                'signal-round': true,
-                'signal-round-warning': monitorData[preFan.code] == '1',
-                'signal-round-run': monitorData[preFan.code] == '0',
-                'signal-round-gry':monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1'
-            }"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </ventBox1>
+      </div>
+    </div>
+    <div class="lr-box area-box">
+      <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+        <ventBox1>
+          <template #title>
+            <div>注浆站状态监测</div>
+          </template>
+          <template #container>
+            <div class="monitor-box">
+              <div class="monitor-item">
+                <div class="state-item" v-for="(preFan, index) in preFanMonitorData" :key="index">
+                  <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ? `(${preFan.unit})` : '') }}</div>
+
+                  <div
+                    :class="{
+                      'signal-round': true,
+                      'signal-round-warning': monitorData[preFan.code] == '1',
+                      'signal-round-run': monitorData[preFan.code] == '0',
+                      'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
+                    }"
+                  ></div>
+                </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>
+          </template>
+        </ventBox1>
+      </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 { watch, ref, onMounted, onUnmounted, defineProps, reactive } from 'vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import { mountedThree, destroy, setModelType } from '../grout.threejs';
-import { formatNum } from '/@/utils/ventutil';
-import { deviceMonitorListLt, preFanMonitorData, groutFanMonitorData } from '../grout.data';
-import { list } from '../grout.api';
-import { useCamera } from '/@/hooks/system/useCamera';
-
-const props = defineProps({
+  import { watch, ref, onMounted, onUnmounted, defineProps, reactive } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { mountedThree, destroy, setModelType } from '../grout.threejs';
+  import { formatNum } from '/@/utils/ventutil';
+  import { deviceMonitorListLt, preFanMonitorData, groutFanMonitorData } from '../grout.data';
+  import { list } from '../grout.api';
+  import { useCamera } from '/@/hooks/system/useCamera';
+
+  const props = defineProps({
     deviceId: {
-        type: String,
-        require: true,
+      type: String,
+      require: true,
     },
     deviceType: {
-        type: String,
-        require: true,
+      type: String,
+      require: true,
     },
-});
+  });
 
-let monitorDataGroupNum = ref(1)
+  let monitorDataGroupNum = ref(1);
 
-const loading = ref(false);
-const monitorData = ref({});
+  const loading = ref(false);
+  const monitorData = ref({});
 
-const playerRef = ref();
-const { getCamera, removeCamera } = useCamera();
+  const playerRef = ref();
+  const { getCamera, removeCamera } = useCamera();
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-        return new Promise((resolve) => {
-            timer = setTimeout(
-                async () => {
-                    if (props.deviceId) {
-                        await getDataSource(props.deviceId);
-                    }
-                    if (timer) {
-                        timer = null;
-                    }
-                    resolve(null);
-                    await getMonitor();
-                },
-                flag ? 0 : 1000
-            );
-        });
+      return new Promise((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) {
+  async function getDataSource(systemID) {
+    debugger;
     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']);
-        }
+      const item = result[key];
+      if (item.type.startsWith('pulping')) {
+        monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
+      }
 
-        loading.value = false;
+      loading.value = false;
     }
-}
+  }
 
-watch(
+  watch(
     () => props.deviceId,
     async (deviceId) => {
-        if (deviceId) {
-            await getCamera(deviceId, playerRef.value);
-        }
+      if (deviceId) {
+        await getCamera(deviceId, playerRef.value);
+      }
     }
-);
+  );
 
-onMounted(() => {
+  onMounted(() => {
+    getMonitor(true)?.then(async () => {
+      if (props.deviceId) await getCamera(props.deviceId, playerRef.value);
+    });
     loading.value = true;
     mountedThree().then(async () => {
-        // await setModelType('groutBase');
-        await setModelType('bertaiBase');
-        loading.value = false;
-        timer = null;
-        getMonitor(true)?.then(async () => {
-            if (props.deviceId) await getCamera(props.deviceId, playerRef.value);
-        });
+      await setModelType('groutBase');
+      //   await setModelType('bertaiBase');
+      loading.value = false;
+      timer = null;
     });
-});
-onUnmounted(() => {
+  });
+  onUnmounted(() => {
     destroy();
     removeCamera();
     if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
+      clearTimeout(timer);
+      timer = undefined;
     }
-});
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-.monitor-container {
+  .monitor-container {
     width: 100%;
     height: 100%;
     // height: 550px;
@@ -204,346 +204,346 @@ onUnmounted(() => {
     padding: 0 5px;
 
     .header-box {
-        margin: 50px 15px 0px 15px;
-
-        .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;
+      margin: 50px 15px 0px 15px;
 
-            &:first-child {
-                background-color: #00bbff11;
-            }
+      .header-container {
+        height: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        color: #fff;
+        box-shadow: 0 0 30px rgb(0, 153, 184) inset;
+        margin-top: 500px;
+      }
+
+      .device-title {
+        width: 130px;
+        text-align: center;
+        border-top: 1px solid #00baffd4;
+        border-left: 1px solid #00baffd4;
+        line-height: 46px;
+        color: #00e5ff;
+        background-color: #00bbff21;
+        backdrop-filter: blur(5px);
+      }
+
+      .device-detail {
+        text-align: center;
 
-            &:last-child {
+        &:first-child {
+          background-color: #00bbff11;
+        }
 
-                .device-val,
-                .device-title {
-                    border-right: 1px solid #00baffd4;
-                }
-            }
+        &: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;
+        .device-val {
+          line-height: 36px;
+          border-top: 1px solid #00baffd4;
+          border-left: 1px solid #00baffd4;
 
-                &:last-child {
-                    border-bottom: 1px solid #00baffd4;
-                }
-            }
+          &:last-child {
+            border-bottom: 1px solid #00baffd4;
+          }
         }
+      }
     }
 
     .lr-box {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        // overflow: hidden;
-        z-index: 9999;
-        pointer-events: auto;
-        overflow-y: auto;
-        overflow-x: hidden;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      // overflow: hidden;
+      z-index: 9999;
+      pointer-events: auto;
+      overflow-y: auto;
+      overflow-x: hidden;
     }
 
     .area-box {
-        width: 335px;
-        margin-top: 50px;
-
-        .input-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 4px 8px;
-            margin: 6px 0;
-            background-image: linear-gradient(to right, #39deff15, #3977e500);
-
-            .title {
-                width: 200px;
-            }
+      width: 335px;
+      margin-top: 50px;
 
-            .title-auto {
-                width: auto;
-            }
+      .input-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 4px 8px;
+        margin: 6px 0;
+        background-image: linear-gradient(to right, #39deff15, #3977e500);
+
+        .title {
+          width: 200px;
+        }
 
-            .input-value {
-                width: 80px;
-                height: 28px;
-                line-height: 28px !important;
-                background: transparent !important;
-                border-color: #228da2 !important;
-                color: #fff !important;
-            }
+        .title-auto {
+          width: auto;
+        }
 
-            .value {
-                width: 100px;
-                color: #00d8ff;
-                padding-right: 20px;
-            }
+        .input-value {
+          width: 80px;
+          height: 28px;
+          line-height: 28px !important;
+          background: transparent !important;
+          border-color: #228da2 !important;
+          color: #fff !important;
+        }
 
-            .unit {
-                width: 80px;
-            }
+        .value {
+          width: 100px;
+          color: #00d8ff;
+          padding-right: 20px;
         }
+
+        .unit {
+          width: 80px;
+        }
+      }
     }
 
     .item {
-        width: 305px;
-        height: 450px;
-        position: relative;
-        border-radius: 5px;
-        margin-top: 10px;
-        margin-bottom: 0px;
-        pointer-events: auto;
+      width: 305px;
+      height: 450px;
+      position: relative;
+      border-radius: 5px;
+      margin-top: 10px;
+      margin-bottom: 0px;
+      pointer-events: auto;
+      color: #fff;
+      // overflow: hidden;
+
+      &:first-child {
+        margin-top: 0px;
+      }
+
+      .base-title {
         color: #fff;
-        // overflow: hidden;
+        margin-bottom: 8px;
+        padding-left: 10px;
+        position: relative;
+        font-size: 16px;
 
-        &:first-child {
-            margin-top: 0px;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 7px;
+          left: 0px;
+          background: #45d3fd;
+          border-radius: 4px;
         }
+      }
 
-        .base-title {
-            color: #fff;
-            margin-bottom: 8px;
-            padding-left: 10px;
-            position: relative;
-            font-size: 16px;
-
-            &::after {
-                content: '';
-                position: absolute;
-                display: block;
-                width: 4px;
-                height: 12px;
-                top: 7px;
-                left: 0px;
-                background: #45d3fd;
-                border-radius: 4px;
-            }
-        }
+      .monitor-item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        .state-item {
+          width: 50%;
+          padding: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .state-title {
+            width: 100px;
+            color: #ffffffdd;
+            flex: 9;
+            font-size: 14px;
 
-        .monitor-item {
-            width: 100%;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-
-            .state-item {
-                width: 50%;
-                padding: 5px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                .state-title {
-                    width: 100px;
-                    color: #ffffffdd;
-                    flex: 9;
-                    font-size: 14px;
-
-                    .unit {
-                        // color: #ffffffbb;
-                    }
-                }
-
-                .state-val {
-                    flex: 1;
-                    color: #e4a300;
-                    margin-right: 5px;
-                    text-align: right;
-                    font-size: 14px;
-                }
+            .unit {
+              // color: #ffffffbb;
             }
+          }
+
+          .state-val {
+            flex: 1;
+            color: #e4a300;
+            margin-right: 5px;
+            text-align: right;
+            font-size: 14px;
+          }
         }
+      }
 
-        .signal-box {
-            margin: 5px 0;
-            display: flex;
-            align-items: center;
+      .signal-box {
+        margin: 5px 0;
+        display: flex;
+        align-items: center;
 
-            .signal-title {
-                color: #7af5ff;
-                margin: 0 5px;
-            }
+        .signal-title {
+          color: #7af5ff;
+          margin: 0 5px;
+        }
 
-            &:last-child {
-                margin-right: 0px;
-            }
+        &:last-child {
+          margin-right: 0px;
         }
+      }
 
-        .list-item {
-            padding: 0 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      .list-item {
+        padding: 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .item-data-key {
-                color: #ffffff99;
-            }
+        .item-data-key {
+          color: #ffffff99;
         }
+      }
 
-        .item-data-box {
-            color: #fff;
+      .item-data-box {
+        color: #fff;
 
-            .state-icon {
-                display: inline-block;
-                width: 12px;
-                height: 12px;
-                border-radius: 12px;
-            }
+        .state-icon {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          border-radius: 12px;
+        }
 
-            .open {
-                border: 5px solid #133a56;
-                background: #4ecb73;
-            }
+        .open {
+          border: 5px solid #133a56;
+          background: #4ecb73;
+        }
 
-            .close {
-                border: 5px solid #192961;
-                background: #6d7898;
-            }
+        .close {
+          border: 5px solid #192961;
+          background: #6d7898;
         }
+      }
     }
 
     .item-l {
-        width: 100%;
+      width: 100%;
 
-        .monitor-box {
-            width: 100%;
+      .monitor-box {
+        width: 100%;
 
-            .parameter-title {
-                position: relative;
-                width: 100%;
-                height: 14px;
-                margin-top: 10px;
+        .parameter-title {
+          position: relative;
+          width: 100%;
+          height: 14px;
+          margin-top: 10px;
 
-                .icon,
-                span {
-                    position: absolute;
-                    top: -10px;
-                }
-            }
+          .icon,
+          span {
+            position: absolute;
+            top: -10px;
+          }
+        }
 
-            .group-parameter-title {
-                background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+        .group-parameter-title {
+          background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
 
-                .icon {
-                    left: -12px;
-                    top: -17px;
-                }
+          .icon {
+            left: -12px;
+            top: -17px;
+          }
 
-                span {
-                    left: 18px;
-                }
+          span {
+            left: 18px;
+          }
 
-                .item-col {
-                    background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
-                }
-            }
+          .item-col {
+            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+          }
+        }
 
-            .device-parameter-title {
-                background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+        .device-parameter-title {
+          background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
 
-                .icon {
-                    left: -10px;
-                    top: -14px;
-                }
+          .icon {
+            left: -10px;
+            top: -14px;
+          }
 
-                span {
-                    left: 18px;
-                }
+          span {
+            left: 18px;
+          }
 
-                .item-col {
-                    background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
-                }
-            }
+          .item-col {
+            background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+          }
         }
+      }
     }
 
     .signal-round {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin: 0 10px;
+      position: relative;
+
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        top: -2px;
+        left: -2px;
         border-radius: 50%;
-        margin: 0 10px;
-        position: relative;
-
-        &::after {
-            display: block;
-            content: '';
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            top: -2px;
-            left: -2px;
-            border-radius: 50%;
-        }
+      }
     }
 
     .signal-round-gry {
-        background-color: #858585;
+      background-color: #858585;
 
-        &::after {
-            background-color: #85858544;
-            box-shadow: 0 0 1px 1px #85858599;
-        }
+      &::after {
+        background-color: #85858544;
+        box-shadow: 0 0 1px 1px #85858599;
+      }
     }
 
     .signal-round-run {
-        background-color: #67fc00;
+      background-color: #67fc00;
 
-        &::after {
-            background-color: #67fc0044;
-            box-shadow: 0 0 1px 1px #c6ff77;
-        }
+      &::after {
+        background-color: #67fc0044;
+        box-shadow: 0 0 1px 1px #c6ff77;
+      }
     }
 
     .signal-round-warning {
-        background-color: #e9170b;
+      background-color: #e9170b;
 
-        &::after {
-            background-color: #e9170b44;
-            box-shadow: 0 0 1px 1px #e9170b;
-        }
+      &::after {
+        background-color: #e9170b44;
+        box-shadow: 0 0 1px 1px #e9170b;
+      }
     }
+  }
 
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
     overflow: auto;
-}
+  }
 
-.input-box {
+  .input-box {
     display: flex;
     align-items: center;
     padding-left: 10px;
 
     .input-title {
-        color: #73e8fe;
-        width: auto;
+      color: #73e8fe;
+      width: auto;
     }
 
     .@{ventSpace}-input-number {
-        border-color: #ffffff88 !important;
+      border-color: #ffffff88 !important;
     }
 
     margin-right: 10px;
-}
-</style>
+  }
+</style>

src/views/vent/monitorManager/groutMonitor/grout.data.ts

@@ -642,7 +642,8 @@ export const deviceMonitorList = [
 ];
 
 export function getMonitorComponent() {
-  const { sysOrgCode } = useGlobSetting();
+  let { sysOrgCode } = useGlobSetting();
+  sysOrgCode = 'sdmtjtltmk';
   let groutHome;
   switch (sysOrgCode) {
     case 'sdmtjtbetmk': // 布尔台
@@ -654,7 +655,7 @@ export function getMonitorComponent() {
       return groutHome;
     case 'sdmtjtltmk': //柳塔
       groutHome = defineAsyncComponent(() => import('./components/groutHomelt.vue'));
-      break;
+      return groutHome;
     default:
       groutHome = defineAsyncComponent(() => import('./components/groutHomeHjt.vue'));
       // groutHome = defineAsyncComponent(() => import('./components/groutHomelt.vue'));

src/views/vent/monitorManager/nitrogen/components/nitrogenHome1.vue

@@ -0,0 +1,670 @@
+<template>
+  <div class="monitor-container">
+    <template v-for="(sysItem, sysIndex) in deviceProperty.monitorDataGroupArr" :key="sysIndex">
+      <div
+        :id="`compressorCss3D${sysIndex + 1}`"
+        class="threejs-Object-CSS compressorCss3D-box"
+        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0px; left: 0px"
+      >
+      </div>
+    </template>
+    <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+    <div v-for="(sysItem, sysIndex) in deviceProperty.monitorDataGroupArr" :key="sysIndex" style="position: absolute; z-index: -1">
+      <div v-show="monitorDataGroupFlag == sysIndex + 1" :id="`nitrogenMonitorBox${sysIndex}`">
+        <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
+          <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+            <div class="title">{{ deviceProperty.modelMonitor[0].title + (index + 1) }} </div>
+            <template v-for="(preMonitor, preMonitorIndex) in deviceProperty.modelMonitor[0].list" :key="preMonitorIndex">
+              <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
+                <span class="monitor-title">{{ preMonitor.title }}:</span>
+                <span class="monitor-val"
+                  ><span class="val">{{
+                    selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`]
+                      ? formatNum(selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`])
+                      : '-'
+                  }}</span
+                  ><span class="unit">{{ preMonitor.unit }}</span></span
+                >
+              </div>
+              <div v-else class="signal-item">
+                <div class="signal" v-for="(signal, childIndex) in deviceProperty.modelMonitor[1].list" :key="childIndex">
+                  <span class="monitor-title">{{ signal.title }}</span>
+                  <span
+                    :class="{
+                      'signal-round': true,
+                      'signal-round-run':
+                        signal.title != '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
+                      'signal-round-warning':
+                        signal.title == '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
+                      'signal-round-gry': selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] != '1',
+                    }"
+                  ></span>
+                </div>
+              </div>
+            </template>
+          </fourBorderBg>
+          <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`" v-if="deviceProperty.modelMonitor[1].list.length > 0">
+            <div class="title">{{ deviceProperty.modelMonitor[1].title + (index + 1) }}</div>
+            <template v-for="(cqgMonitor, cqgMonitorIndex) in deviceProperty.modelMonitor[1].list" :key="cqgMonitorIndex">
+              <div class="monitor-item">
+                <span class="monitor-title">{{ cqgMonitor.title }}:</span>
+                <span class="monitor-val"
+                  ><span class="val">{{
+                    selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`]
+                      ? formatNum(selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`])
+                      : '-'
+                  }}</span
+                  ><span class="unit">{{ cqgMonitor.unit }}</span></span
+                >
+              </div>
+            </template>
+          </fourBorderBg>
+        </div>
+      </div>
+    </div>
+    <div class="total-data">
+      <div class="vent-flex-row">
+        <div class="item" v-for="(data, index) in deviceProperty.totalData" :key="index"
+          >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
+            selectData[data.code] ? formatNum(selectData[data.code]) : '-'
+          }}</span></div
+        >
+      </div>
+    </div>
+    <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
+    <div class="nitrogen-home">
+      <div class="lr left-box">
+        <div class="left-container">
+          <div class="monitor-box">
+            <template v-for="(device, leftIndex) in deviceProperty.leftMonitor" :key="leftIndex">
+              <ventBox1 :class="{ 'vent-margin-t-10': leftIndex > 0 }">
+                <template #title>
+                  <div>{{ device.title }}</div>
+                </template>
+                <template #container>
+                  <template v-for="(deviceChild, deviceChildIndex) in device.children" :key="deviceChildIndex">
+                    <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
+                      <div v-if="deviceChild.key.length > 1" class="parameter-title group-parameter-title"
+                        ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ deviceChild.childTitle[deviceIndex] }}</span></div
+                      >
+                      <div class="input-box">
+                        <div v-for="(item, index) in deviceChild.list" class="input-item" :key="index">
+                          <div
+                            :class="{
+                              'w-280px': item.type == 'sign' || item.type == 'warning',
+                              title: item.type !== 'sign' && item.type !== 'warning',
+                            }"
+                            >{{ item.title }}：</div
+                          >
+                          <template v-if="item.type !== 'sign' && item.type !== 'warning'">
+                            <div class="value">{{
+                              selectData && selectData[deviceKey + item.code] ? formatNum(selectData[deviceKey + item.code], 1) : '-'
+                            }}</div>
+                          </template>
+                          <template v-else>
+                            <div class="value">
+                              <span
+                                :class="{
+                                  'signal-round': true,
+                                  'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
+                                  'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
+                                  'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
+                                }"
+                              ></span>
+                            </div>
+                          </template>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </template>
+              </ventBox1>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="lr right-box">
+        <div class="item-box" :class="{ 'mt-50px': deviceProperty.totalData.length > 0 }">
+          <ventBox1 v-for="(device, rightIndex) in deviceProperty.rightMonitor" :key="rightIndex" class="vent-margin-t-10">
+            <template #title>
+              <div>{{ device.title }}</div>
+            </template>
+            <template #container>
+              <div>
+                <template v-for="(deviceChild, deviceChildIndex) in device.children" :key="deviceChildIndex">
+                  <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
+                    <div v-if="deviceChild.key.length > 1" class="parameter-title group-parameter-title"
+                      ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ deviceChild.childTitle[deviceIndex] }}</span></div
+                    >
+                    <div class="input-box">
+                      <div v-for="(item, index) in deviceChild.list" class="input-item" :key="index">
+                        <div
+                          :class="{
+                            'w-280px': item.type == 'sign' || item.type == 'warning',
+                            title: item.type !== 'sign' && item.type !== 'warning',
+                          }"
+                          >{{ item.title }}：</div
+                        >
+                        <template v-if="item.type !== 'sign' && item.type !== 'warning'">
+                          <div class="value">{{
+                            selectData && selectData[deviceKey + item.code] ? formatNum(selectData[deviceKey + item.code], 1) : '-'
+                          }}</div>
+                        </template>
+                        <template v-else>
+                          <div class="value">
+                            <span
+                              :class="{
+                                'signal-round': true,
+                                'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
+                                'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
+                                'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
+                              }"
+                            ></span>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </ventBox1>
+        </div>
+      </div>
+    </div>
+    <div ref="playerRef" class="player-box"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, reactive, defineProps, inject, onBeforeUnmount } from 'vue';
+  import { devicePropertyType, propertyListType, getMonitorData } from '../nitrogen.data.1';
+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
+  import { list } from '../nitrogen.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { formatNum } from '/@/utils/ventutil';
+  import { useCamera } from '/@/hooks/system/useCamera';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    deviceType: {
+      type: String,
+      require: true,
+    },
+  });
+  const loading = ref(false);
+  const monitorDataGroup = ref<Number[]>([]);
+  const monitorDataGroupFlag = ref(1);
+  const playerRef = ref();
+  const deviceProperty = ref({
+    leftMonitor: [] as devicePropertyType[],
+    rightMonitor: [] as devicePropertyType[],
+    modelMonitor: [] as devicePropertyType[],
+    detailCtrl: [] as devicePropertyType[],
+    monitorDataGroupArr: [],
+    totalData: [] as propertyListType[],
+  });
+  deviceProperty.value = await getMonitorData(props.deviceType);
+
+  // 监测数据
+  // const selectData = reactive({});
+  const selectData = ref<Object | []>({});
+  const { getCamera, removeCamera } = useCamera();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      return new Promise(async (resolve) => {
+        timer = await setTimeout(
+          async () => {
+            await getDataSource();
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor(false);
+          },
+          flag ? 0 : 1000
+        );
+      });
+    }
+  }
+
+  async function getDataSource() {
+    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
+    let dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : [];
+    // dataSource = {
+    //   msgType: null,
+    //   deviceID: '1781605808973565954',
+    //   strname: '压风机',
+    //   strinstallpos: '压风机',
+    //   fsectarea: 'null',
+    //   stationname: '压风机',
+    //   stationtype: 'redis',
+    //   deviceType: 'forcFan_normal',
+    //   typeName: '压风机',
+    //   netStatus: 1,
+    //   warnFlag: 0,
+    //   warnLevel: 0,
+    //   warnLevel_str: '正常',
+    //   warnTime: null,
+    //   readTime: '2024-04-23 08:23:49',
+    //   warnDes: '',
+    //   frontGateOpenCtrl: null,
+    //   rearGateOpenCtrl: null,
+    //   readData: {
+    //     PRE3_CPR_CoolantTemp: '62.0',
+    //     PRE1_MOT_PhaseATemp: '59.0',
+    //     PRE3_MOT_PhaseCTemp: '56.02',
+    //     PRE2_CPR_HeadTemp: '81.0',
+    //     sign: '0',
+    //     PRE1_CPR_UnLoadPre: '6.0',
+    //     PRE3_CPR_ExhaustPre: '5.7',
+    //     PRE1_CPR_LoadorUnload: '0',
+    //     PRE2_MOT_PhaseATempAlarm: '0',
+    //     PRE2_CPR_ExhaustTemp: '18.01',
+    //     PRE1_MOT_StopFail: '0',
+    //     PRE3_MOT_StopFail: '0',
+    //     PRE1_HMIReset: '0',
+    //     PRE2_HMIStop: '0',
+    //     PRE1_MOT_Ready: '1',
+    //     PRE2_CPR_LoadorUnload: '0',
+    //     PRE3_MOT_PhaseBTemp: '66.0',
+    //     Reset: '0',
+    //     PRE1_CPR_ExhaustPre: '5.3',
+    //     PRE3_FaultSignal: '0',
+    //     PRE1_MOT_PhaseATempAlarm: '0',
+    //     PRE2_MOT_PhaseBTempAlarm: '0',
+    //     PRE3_MOT_PhaseCTempAlarm: '0',
+    //     PRE2_HMIStart: '0',
+    //     PRE1_MOT_StartFail: '0',
+    //     PRE3_MOT_PhaseATemp: '66.0',
+    //     PRE2_CPR_CoolantTemp: '53.0',
+    //     PRE3_HostorLoc: '0',
+    //     PRE1_FaultSignal: '0',
+    //     PRE2_FaultSignal: '0',
+    //     PRE3_MOT_RunReturn: '1',
+    //     PRE1_HMIStart: '0',
+    //     PRE1_MOT_TotalRunTime: '6313.0',
+    //     'PRE1_MOT_Pha seBTempAlarm': '0',
+    //     PRE1_CPR_LoadTime: '5184.0',
+    //     PRE2_MOT_PhaseCTempAlarm: '0',
+    //     PRE2_CPR_LoadTime: '3328.0',
+    //     PRE1_CPR_HeadTemp: '73.0',
+    //     PRE3_CPR_LoadTime: '5920.0',
+    //     PRE2_MOT_StartFail: '0',
+    //     PRE2_MOT_PhaseBTemp: '61.0',
+    //     PRE2_HostorLoc: '0',
+    //     PRE3_HMIStop: '0',
+    //     PRE3_CPR_HeadTemp: '84.0',
+    //     PRE2_MOT_TotalRunTime: '4272.0',
+    //     PRE3_HMIReset: '0',
+    //     PRE2_MOT_Ready: '1',
+    //     PRE2_MOT_RunReturn: '1',
+    //     PRE3_MOT_PhaseBTempAlarm: '0',
+    //     PRE2_MOT_StopFail: '0',
+    //     PRE3_CPR_UnLoadPre: '6.0',
+    //     PRE2_CPR_ExhaustPre: '5.7',
+    //     PRE3_CPR_ExhaustTemp: '18.09',
+    //     PRE3_MOT_StartFail: '0',
+    //     PRE3_MOT_TotalRunTime: '8474.0',
+    //     PRE2_MOT_PhaseATemp: '60.0',
+    //     PRE1_MOT_PhaseCTempAlarm: '0',
+    //     PRE3_HMIStart: '0',
+    //     PRE1_HMIStop: '0',
+    //     PRE3_MOT_Ready: '0',
+    //     PRE1_HostorLoc: '0',
+    //     PRE1_CPR_LoadPre: '5.0',
+    //     PRE1_MOT_RunReturn: '0',
+    //     PRE2_MOT_CtrlMode: '0',
+    //     PRE2_HMIReset: '0',
+    //     PRE1_MOT_CtrlMode: '0',
+    //     PRE3_CPR_LoadPre: '5.0',
+    //     PRE2_CPR_LoadPre: '5.0',
+    //     PRE3_MOT_CtrlMode: '0',
+    //     PRE1_MOT_PhaseCTemp: '58.0',
+    //     PRE3_CPR_LoadorUnload: '1',
+    //     TotalOutPipePre: '5.85',
+    //     PRE1_MOT_PhaseBTemp: '60.0',
+    //     PRE2_MOT_PhaseCTemp: '55.02',
+    //     PRE1_CPR_CoolantTemp: '55.0',
+    //     PRE3_MOT_PhaseATempAlarm: '0',
+    //     PRE2_CPR_UnLoadPre: '6.0',
+    //     isRun: '-2',
+    //     PRE1_CPR_ExhaustTemp: '16.12',
+    //     TotalOutPipeFlow: '884.0',
+    //   },
+    //   readDataDes: null,
+    //   summaryHour: [],
+    //   summaryDay: [],
+    //   history: [],
+    //   dayhistory: [],
+    //   totalInfo: null,
+    //   sign: null,
+    //   cameras: [],
+    //   links: [],
+    //   other1: null,
+    //   other2: null,
+    //   other3: null,
+    //   remarkInfo: null,
+    //   linkInfo: null,
+    // };
+    if (dataSource) {
+      Object.assign(selectData.value, dataSource, dataSource.readData);
+    }
+    loading.value = false;
+  }
+
+  function setMonitorGroupNum(flag) {
+    if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
+    const monitorGroup = deviceProperty.value.monitorDataGroupArr[flag - 1];
+    setModelType('compressor' + (flag - 1));
+    monitorDataGroup.value = monitorGroup;
+  }
+
+  function handleOK() {}
+
+  function handleCancel() {}
+
+  onMounted(async () => {
+    setTimeout(() => {
+      mountedThree(deviceProperty.value.monitorDataGroupArr).then(async () => {
+        setMonitorGroupNum(1);
+        getMonitor(true).then(async () => {
+          if (selectData.value && selectData.value['deviceID']) await getCamera(selectData.value['deviceID'], playerRef.value);
+        });
+      });
+    }, 0);
+  });
+  onBeforeUnmount(() => {
+    removeCamera();
+  });
+  onUnmounted(() => {
+    destroy();
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+  .monitor-container {
+    position: fixed;
+    width: 100%;
+  }
+  .compressorCss3D-box {
+    pointer-events: auto;
+    .modal-monitor {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+
+    &:deep(.win) {
+      margin: 0 !important;
+      background: #00000044;
+    }
+
+    &:deep(.main) {
+      .title {
+        height: 34px;
+        text-align: center;
+        font-weight: 600;
+        color: #7af5ff;
+        // background-image: url('../../../assets/img/yfj/light.png');
+        background-repeat: no-repeat;
+        background-position-x: center;
+        background-position-y: 100%;
+        background-size: 80%;
+        font-size: 16px;
+      }
+
+      .monitor-item {
+        display: flex;
+        flex-direction: row;
+        width: auto;
+        margin-bottom: 3px;
+        .monitor-val {
+          color: #ffb700;
+          display: flex;
+          width: auto;
+
+          .val {
+            width: 80px;
+            font-size: 14px;
+          }
+
+          .unit {
+            color: #ffffffbb;
+            font-size: 14px;
+          }
+        }
+      }
+
+      .monitor-title {
+        width: 100px;
+        color: #7af5ff;
+        font-weight: 400;
+        font-size: 14px;
+      }
+
+      .signal-item {
+        display: flex;
+        justify-content: space-between;
+
+        // margin-bottom: 5px;
+        .signal-round {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          margin: 0 10px;
+          position: relative;
+
+          &::after {
+            display: block;
+            content: '';
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            top: -2px;
+            left: -2px;
+            border-radius: 50%;
+          }
+        }
+
+        .signal-round-gry {
+          background-color: #858585;
+
+          &::after {
+            background-color: #85858544;
+            box-shadow: 0 0 1px 1px #85858599;
+          }
+        }
+
+        .signal-round-run {
+          background-color: #67fc00;
+
+          &::after {
+            background-color: #67fc0044;
+            box-shadow: 0 0 1px 1px #c6ff77;
+          }
+        }
+
+        .signal-round-warning {
+          background-color: #e9170b;
+
+          &::after {
+            background-color: #e9170b44;
+            box-shadow: 0 0 1px 1px #e9170b;
+          }
+        }
+      }
+    }
+  }
+  .total-data {
+    position: absolute;
+    top: 40px;
+    right: 100px;
+    z-index: 999;
+    color: #e4cd00;
+    .item {
+      width: 200px;
+      margin-left: 30px;
+      .val {
+        color: #00d8ff;
+      }
+    }
+  }
+  .nitrogen-home {
+    width: 100%;
+    height: calc(100%);
+    position: fixed;
+    z-index: 0;
+    height: calc(100%);
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    top: 20px;
+    pointer-events: none;
+    .lr {
+      margin-top: 0 !important;
+    }
+    .left-box {
+      width: 360px !important;
+      direction: rtl;
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: calc(100% - 60px);
+      margin-top: 30px !important;
+
+      .left-container {
+        direction: ltr;
+        :deep(.input-item .title) {
+          width: 220px !important;
+        }
+      }
+    }
+    .right-box {
+      width: 360px !important;
+      overflow-y: auto;
+      overflow-x: hidden;
+      .environment-monitor {
+        .item {
+          flex: 1;
+          margin: 0 5px;
+          .title {
+            color: #7ae5ff;
+            text-align: center;
+            margin-bottom: 2px;
+          }
+          .num {
+            width: 100%;
+            height: 30px;
+            text-align: center;
+            border-top: 2px solid #50c8fc;
+            border-radius: 4px;
+            background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
+          }
+        }
+      }
+      .pool-box {
+        width: 327px;
+        height: 65px;
+        padding: 0 5px;
+        background: url('/@/assets/images/vent/pump1.png') no-repeat;
+        background-size: cover;
+        background-origin: content-box;
+        margin-top: 2px;
+        .num {
+          color: aqua;
+        }
+        .center {
+          padding-right: 5px;
+        }
+      }
+    }
+  }
+  .device-state {
+    width: 100%;
+    position: absolute;
+    top: 30px;
+    color: #e90000;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+  }
+
+  .player-box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    padding: 0 20px 0 20px;
+    z-index: 9999;
+    display: flex;
+    align-items: end;
+    bottom: 80px;
+    pointer-events: none;
+    :deep(#LivePlayerBox) {
+      display: flex;
+      justify-content: end;
+    }
+  }
+  .input-box {
+    width: calc(100%);
+    display: flex;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    .input-item {
+      width: calc(50% - 8px);
+      padding: 0 2px;
+
+      &:nth-child(2n) {
+        margin-left: 4px;
+      }
+    }
+  }
+  .btn-group {
+    width: 100%;
+    position: fixed;
+    display: flex;
+    justify-content: end;
+    right: 380px;
+    top: 85px;
+    pointer-events: auto;
+    .btn-item {
+      width: auto;
+      text-align: center;
+    }
+  }
+  .state-header {
+    display: flex;
+    color: #73e8fe;
+    .header-item {
+      width: 25%;
+      text-align: center;
+    }
+  }
+  .device-row {
+    display: flex;
+    margin-top: 10px;
+    .state {
+      width: 25%;
+      text-align: center;
+      font-size: 13px;
+    }
+  }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
+</style>

src/views/vent/monitorManager/nitrogen/nitrogen.data.1.ts

@@ -2,11 +2,16 @@ import { ref, defineAsyncComponent } from 'vue';
 import { useGlobSetting } from '/@/hooks/setting';
 export function getNitrogenHome() {
   const { sysOrgCode } = useGlobSetting();
+  // sysOrgCode = 'sdmtjtwlmlmk';
   let nitrogenHome;
   switch (sysOrgCode) {
     case 'sdmtjtbltmk': //补连塔
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHomeBLT.vue'));
       return nitrogenHome;
+    case 'sdmtjtwlmlmk':
+    case 'sdmtjtyjlmk': //榆家梁
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome1.vue'));
+      return nitrogenHome;
     default:
       nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome.vue'));
       return nitrogenHome;
@@ -52,8 +57,9 @@ export const bottomBtnList = ref([
 ]);
 
 export async function getMonitorData() {
-  const globSetting = useGlobSetting();
-  switch (globSetting.sysOrgCode) {
+  const { sysOrgCode } = useGlobSetting();
+  // sysOrgCode = 'sdmtjtwlmlmk';
+  switch (sysOrgCode) {
     case 'yjmdsankuang': // 窑街三矿
       return await import('./nitrogen.dataYJ');
     case 'sdmtjtdltmkhjtj': // 活鸡兔井
@@ -72,8 +78,32 @@ export async function getMonitorData() {
       return await import('./nitrogen.dataCc');
     case 'sdmtjtcctrk': // 寸草2
       return await import('./nitrogen.dataCc_2');
+    case 'sdmtjtyjlmk': // 榆家梁
+      return await import('./nitrogen.data.yjl');
+    case 'sdmtjtwlmlmk': // 乌兰木伦
+      return await import('./nitrogen.data.wlml');
     default: //默认
-      // return await import('./nitrogen.dataCc_2');
-      return await import('./nitrogen.dataBet');
+      return await import('./nitrogen.dataCc_2');
+    // return await import('./nitrogen.data.yjl');
   }
 }
+
+interface deviceChildType {
+  title: string;
+  key: string[];
+  childTitle: string[];
+}
+interface propertyListType {
+  title: string;
+  unit: string;
+  code: string;
+  child: [];
+}
+export interface devicePropertyType {
+  type: string;
+  title: string;
+  stateHeader: [];
+  children: deviceChildType[];
+  list: propertyListType[];
+  key: string;
+}

src/views/vent/monitorManager/nitrogen/nitrogen.data.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import { useGlobSetting } from '/@/hooks/setting';
 export const bottomBtnList = ref([
   {
     text: '监控界面',

src/views/vent/monitorManager/nitrogen/nitrogen.data.wlml.ts

@@ -0,0 +1,359 @@
+export const monitorDataGroupArr = [[1, 2, 3]];
+export const modelMonitor = [
+  {
+    type: 'list',
+    title: '空压机',
+    stateHeader: [],
+    key: 'PRE',
+    list: [
+      {
+        title: '加载压力',
+        code: '_CPR_LoadPre',
+        unit: 'MPa',
+      },
+      {
+        title: '卸载压力',
+        code: '_CPR_UnLoadPre',
+        unit: 'MPa',
+        child: [],
+      },
+      {
+        title: `机头温度`,
+        code: `_CPR_HeadTemp`,
+        unit: '℃',
+        child: [],
+      },
+      {
+        title: `冷却温度`,
+        code: `_CPR_CoolantTemp`,
+        unit: '℃',
+        child: [],
+      },
+      {
+        title: `排气温度`,
+        code: `_CPR_ExhaustTemp`,
+        unit: '℃',
+        child: [],
+      },
+      {
+        title: '加载时间',
+        code: '_CPR_LoadTime',
+        unit: 'h',
+        child: [],
+      },
+      {
+        title: '排气压力',
+        code: '_CPR_ExhaustPre',
+        unit: 'MPa',
+        child: [],
+      },
+
+      {
+        code: 'signal',
+        child: [
+          {
+            title: `加载卸载`,
+            code: `_CPR_LoadorUnload`,
+            isWaring: false,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '储气罐',
+    key: 'PRE',
+    stateHeader: [],
+    list: [],
+  },
+];
+
+export const leftMonitor = [
+  {
+    type: 'list',
+    title: '压风机1',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['1#压风机'],
+        key: ['PRE1'],
+        list: [
+          {
+            title: `启动失败`,
+            code: `_MOT_StartFail`,
+            type: 'warning',
+          },
+          {
+            title: `停止失败`,
+            code: `_MOT_StopFail`,
+            type: 'warning',
+          },
+          {
+            title: `报警信号`,
+            code: `_AlamSignal`,
+            type: 'warning',
+          },
+          {
+            title: `故障信号`,
+            code: `_FaultSignal`,
+            type: 'warning',
+          },
+
+          {
+            title: `B相绕组超温`,
+            code: `_MOT_PhaseBTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `C相绕组超温`,
+            code: `_MOT_PhaseCTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: '电机启动失败',
+            code: '_MOT_StartFail',
+            type: 'warning',
+          },
+          {
+            title: '电机停止失败',
+            code: '_MOT_StopFail',
+            type: 'warning',
+          },
+          {
+            title: '电机运行返回',
+            code: '_MOT_RunReturn',
+            type: 'warning',
+          },
+          {
+            title: `A相绕组超温`,
+            code: `_MOT_PhaseATempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `主机本机`,
+            code: `_HostorLoc`,
+            type: 'signal',
+          },
+          {
+            title: '总运行时间(h)',
+            code: '_MOT_TotalRunTime',
+            type: '',
+          },
+          {
+            title: 'A相绕组温度(℃)',
+            code: '_MOT_PhaseATemp',
+            type: '',
+          },
+          {
+            title: 'B相绕组温度(℃)',
+            code: '_MOT_PhaseBTemp',
+            type: '',
+          },
+          {
+            title: 'C相绕组温度(℃)',
+            code: '_MOT_PhaseCTemp',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '压风机2',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['2#压风机'],
+        key: ['PRE2'],
+        list: [
+          {
+            title: `启动失败`,
+            code: `_MOT_StartFail`,
+            type: 'warning',
+          },
+          {
+            title: `停止失败`,
+            code: `_MOT_StopFail`,
+            type: 'warning',
+          },
+          {
+            title: `报警信号`,
+            code: `_AlamSignal`,
+            type: 'warning',
+          },
+          {
+            title: `故障信号`,
+            code: `_FaultSignal`,
+            type: 'warning',
+          },
+
+          {
+            title: `B相绕组超温`,
+            code: `_MOT_PhaseBTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `C相绕组超温`,
+            code: `_MOT_PhaseCTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: '电机启动失败',
+            code: '_MOT_StartFail',
+            type: 'warning',
+          },
+          {
+            title: '电机停止失败',
+            code: '_MOT_StopFail',
+            type: 'warning',
+          },
+          {
+            title: '电机运行返回',
+            code: '_MOT_RunReturn',
+            type: 'warning',
+          },
+          {
+            title: `A相绕组超温`,
+            code: `_MOT_PhaseATempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `主机本机`,
+            code: `_HostorLoc`,
+            type: 'signal',
+          },
+          {
+            title: '总运行时间(h)',
+            code: '_MOT_TotalRunTime',
+            type: '',
+          },
+          {
+            title: 'A相绕组温度(℃)',
+            code: '_MOT_PhaseATemp',
+            type: '',
+          },
+          {
+            title: 'B相绕组温度(℃)',
+            code: '_MOT_PhaseBTemp',
+            type: '',
+          },
+          {
+            title: 'C相绕组温度(℃)',
+            code: '_MOT_PhaseCTemp',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+];
+export const totalData = [
+  {
+    title: '总出风管流量',
+    code: 'TotalOutPipeFlow',
+    unit: 'm³/h',
+  },
+  {
+    title: '总出风管压力',
+    code: 'TotalOutPipePre',
+    unit: 'bar',
+  },
+];
+export const rightMonitor = [
+  {
+    type: 'list',
+    title: '压风机3',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['3#压风机'],
+        key: ['PRE3'],
+        list: [
+          {
+            title: `启动失败`,
+            code: `_MOT_StartFail`,
+            type: 'warning',
+          },
+          {
+            title: `停止失败`,
+            code: `_MOT_StopFail`,
+            type: 'warning',
+          },
+          {
+            title: `报警信号`,
+            code: `_AlamSignal`,
+            type: 'warning',
+          },
+          {
+            title: `故障信号`,
+            code: `_FaultSignal`,
+            type: 'warning',
+          },
+
+          {
+            title: `B相绕组超温`,
+            code: `_MOT_PhaseBTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `C相绕组超温`,
+            code: `_MOT_PhaseCTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: '电机启动失败',
+            code: '_MOT_StartFail',
+            type: 'warning',
+          },
+          {
+            title: '电机停止失败',
+            code: '_MOT_StopFail',
+            type: 'warning',
+          },
+          {
+            title: '电机运行返回',
+            code: '_MOT_RunReturn',
+            type: 'warning',
+          },
+          {
+            title: `A相绕组超温`,
+            code: `_MOT_PhaseATempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `主机本机`,
+            code: `_HostorLoc`,
+            type: 'signal',
+          },
+          {
+            title: '总运行时间(h)',
+            code: '_MOT_TotalRunTime',
+            type: '',
+          },
+          {
+            title: 'A相绕组温度(℃)',
+            code: '_MOT_PhaseATemp',
+            type: '',
+          },
+          {
+            title: 'B相绕组温度(℃)',
+            code: '_MOT_PhaseBTemp',
+            type: '',
+          },
+          {
+            title: 'C相绕组温度(℃)',
+            code: '_MOT_PhaseCTemp',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const detailCtrl = [];

src/views/vent/monitorManager/nitrogen/nitrogen.data.yjl.ts

@@ -0,0 +1,449 @@
+export const monitorDataGroupArr = [[1, 2, 3, 4]];
+export const modelMonitor = [
+  {
+    type: 'list',
+    title: '空压机',
+    stateHeader: [],
+    key: 'PRE',
+    list: [
+      {
+        title: '加载压力',
+        code: '_CPR_LoadPre',
+        unit: 'MPa',
+      },
+      {
+        title: '卸载压力',
+        code: '_CPR_UnLoadPre',
+        unit: 'MPa',
+        child: [],
+      },
+      {
+        title: `机头温度`,
+        code: `_CPR_HeadTemp`,
+        unit: '℃',
+        child: [],
+      },
+      {
+        title: `冷却温度`,
+        code: `_CPR_CoolantTemp`,
+        unit: '℃',
+        child: [],
+      },
+      {
+        title: `排气温度`,
+        code: `_CPR_ExhaustTemp`,
+        unit: '℃',
+        child: [],
+      },
+      {
+        title: '加载时间',
+        code: '_CPR_LoadTime',
+        unit: 'h',
+        child: [],
+      },
+      {
+        title: '排气压力',
+        code: '_CPR_ExhaustPre',
+        unit: 'MPa',
+        child: [],
+      },
+
+      {
+        code: 'signal',
+        child: [
+          {
+            title: `加载卸载`,
+            code: `_CPR_LoadorUnload`,
+            isWaring: false,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '储气罐',
+    key: 'PRE',
+    stateHeader: [],
+    list: [],
+  },
+];
+export const totalData = [
+  {
+    title: '总出风管流量',
+    code: 'TotalOutPipeFlow',
+    unit: 'm³/h',
+  },
+  {
+    title: '总出风管压力',
+    code: 'TotalOutPipePre',
+    unit: 'bar',
+  },
+];
+export const leftMonitor = [
+  {
+    type: 'list',
+    title: '压风机1',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['1#压风机'],
+        key: ['PRE1'],
+        list: [
+          {
+            title: `启动失败`,
+            code: `_MOT_StartFail`,
+            type: 'warning',
+          },
+          {
+            title: `停止失败`,
+            code: `_MOT_StopFail`,
+            type: 'warning',
+          },
+          {
+            title: `报警信号`,
+            code: `_AlamSignal`,
+            type: 'warning',
+          },
+          {
+            title: `故障信号`,
+            code: `_FaultSignal`,
+            type: 'warning',
+          },
+
+          {
+            title: `B相绕组超温`,
+            code: `_MOT_PhaseBTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `C相绕组超温`,
+            code: `_MOT_PhaseCTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: '电机启动失败',
+            code: '_MOT_StartFail',
+            type: 'warning',
+          },
+          {
+            title: '电机停止失败',
+            code: '_MOT_StopFail',
+            type: 'warning',
+          },
+          {
+            title: '电机运行返回',
+            code: '_MOT_RunReturn',
+            type: 'warning',
+          },
+          {
+            title: `A相绕组超温`,
+            code: `_MOT_PhaseATempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `主机本机`,
+            code: `_HostorLoc`,
+            type: 'signal',
+          },
+          {
+            title: '总运行时间(h)',
+            code: '_MOT_TotalRunTime',
+            type: '',
+          },
+          {
+            title: 'A相绕组温度(℃)',
+            code: '_MOT_PhaseATemp',
+            type: '',
+          },
+          {
+            title: 'B相绕组温度(℃)',
+            code: '_MOT_PhaseBTemp',
+            type: '',
+          },
+          {
+            title: 'C相绕组温度(℃)',
+            code: '_MOT_PhaseCTemp',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '压风机2',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['2#压风机'],
+        key: ['PRE2'],
+        list: [
+          {
+            title: `启动失败`,
+            code: `_MOT_StartFail`,
+            type: 'warning',
+          },
+          {
+            title: `停止失败`,
+            code: `_MOT_StopFail`,
+            type: 'warning',
+          },
+          {
+            title: `报警信号`,
+            code: `_AlamSignal`,
+            type: 'warning',
+          },
+          {
+            title: `故障信号`,
+            code: `_FaultSignal`,
+            type: 'warning',
+          },
+
+          {
+            title: `B相绕组超温`,
+            code: `_MOT_PhaseBTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `C相绕组超温`,
+            code: `_MOT_PhaseCTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: '电机启动失败',
+            code: '_MOT_StartFail',
+            type: 'warning',
+          },
+          {
+            title: '电机停止失败',
+            code: '_MOT_StopFail',
+            type: 'warning',
+          },
+          {
+            title: '电机运行返回',
+            code: '_MOT_RunReturn',
+            type: 'warning',
+          },
+          {
+            title: `A相绕组超温`,
+            code: `_MOT_PhaseATempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `主机本机`,
+            code: `_HostorLoc`,
+            type: 'signal',
+          },
+          {
+            title: '总运行时间(h)',
+            code: '_MOT_TotalRunTime',
+            type: '',
+          },
+          {
+            title: 'A相绕组温度(℃)',
+            code: '_MOT_PhaseATemp',
+            type: '',
+          },
+          {
+            title: 'B相绕组温度(℃)',
+            code: '_MOT_PhaseBTemp',
+            type: '',
+          },
+          {
+            title: 'C相绕组温度(℃)',
+            code: '_MOT_PhaseCTemp',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const rightMonitor = [
+  {
+    type: 'list',
+    title: '压风机3',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['3#压风机'],
+        key: ['PRE3'],
+        list: [
+          {
+            title: `启动失败`,
+            code: `_MOT_StartFail`,
+            type: 'warning',
+          },
+          {
+            title: `停止失败`,
+            code: `_MOT_StopFail`,
+            type: 'warning',
+          },
+          {
+            title: `报警信号`,
+            code: `_AlamSignal`,
+            type: 'warning',
+          },
+          {
+            title: `故障信号`,
+            code: `_FaultSignal`,
+            type: 'warning',
+          },
+
+          {
+            title: `B相绕组超温`,
+            code: `_MOT_PhaseBTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `C相绕组超温`,
+            code: `_MOT_PhaseCTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: '电机启动失败',
+            code: '_MOT_StartFail',
+            type: 'warning',
+          },
+          {
+            title: '电机停止失败',
+            code: '_MOT_StopFail',
+            type: 'warning',
+          },
+          {
+            title: '电机运行返回',
+            code: '_MOT_RunReturn',
+            type: 'warning',
+          },
+          {
+            title: `A相绕组超温`,
+            code: `_MOT_PhaseATempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `主机本机`,
+            code: `_HostorLoc`,
+            type: 'signal',
+          },
+          {
+            title: '总运行时间(h)',
+            code: '_MOT_TotalRunTime',
+            type: '',
+          },
+          {
+            title: 'A相绕组温度(℃)',
+            code: '_MOT_PhaseATemp',
+            type: '',
+          },
+          {
+            title: 'B相绕组温度(℃)',
+            code: '_MOT_PhaseBTemp',
+            type: '',
+          },
+          {
+            title: 'C相绕组温度(℃)',
+            code: '_MOT_PhaseCTemp',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '压风机4',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['4#压风机'],
+        key: ['PRE4'],
+        list: [
+          {
+            title: `启动失败`,
+            code: `_MOT_StartFail`,
+            type: 'warning',
+          },
+          {
+            title: `停止失败`,
+            code: `_MOT_StopFail`,
+            type: 'warning',
+          },
+          {
+            title: `报警信号`,
+            code: `_AlamSignal`,
+            type: 'warning',
+          },
+          {
+            title: `故障信号`,
+            code: `_FaultSignal`,
+            type: 'warning',
+          },
+
+          {
+            title: `B相绕组超温`,
+            code: `_MOT_PhaseBTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `C相绕组超温`,
+            code: `_MOT_PhaseCTempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: '电机启动失败',
+            code: '_MOT_StartFail',
+            type: 'warning',
+          },
+          {
+            title: '电机停止失败',
+            code: '_MOT_StopFail',
+            type: 'warning',
+          },
+          {
+            title: '电机运行返回',
+            code: '_MOT_RunReturn',
+            type: 'warning',
+          },
+          {
+            title: `A相绕组超温`,
+            code: `_MOT_PhaseATempAlarm`,
+            type: 'warning',
+          },
+          {
+            title: `主机本机`,
+            code: `_HostorLoc`,
+            type: 'signal',
+          },
+          {
+            title: '总运行时间(h)',
+            code: '_MOT_TotalRunTime',
+            type: '',
+          },
+          {
+            title: 'A相绕组温度(℃)',
+            code: '_MOT_PhaseATemp',
+            type: '',
+          },
+          {
+            title: 'B相绕组温度(℃)',
+            code: '_MOT_PhaseBTemp',
+            type: '',
+          },
+          {
+            title: 'C相绕组温度(℃)',
+            code: '_MOT_PhaseCTemp',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const detailCtrl = [];

src/views/vent/monitorManager/nitrogen/nitrogen.threejs.ts

@@ -117,6 +117,7 @@ export const setModelType = (modalTypeName) => {
 };
 
 export const mountedThree = (monitorDataGroupArr) => {
+  debugger;
   return new Promise(async (resolve) => {
     model = new UseThree('#compressor3D');
     model.setEnvMap('test1');