更新

src/hooks/system/useCameraPianation.ts

@@ -11,7 +11,7 @@ import { createPlayerVNode } from '../component/createPlayer';
 I18N.use(ZH);
 
 export function useCamera() {
-  const cameraList = (params) => defHttp.get({ url: '/safety/ventanalyCamera/listNew', params });
+  const cameraList = (params) => defHttp.get({ url: '/safety/ventanalyCamera/list', params });
   const cameraAddrList = (params) => defHttp.post({ url: '/monitor/camera/info', params });
   const cameraAddr = (params) => defHttp.get({ url: '/monitor/camera/queryByCameraCode', params });
 

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

@@ -1,36 +0,0 @@
-<template>
-    <div class="ces-demo">
-        <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-        
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue'
-import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay } from '../gateMonitor/gate.threejs';
-
-
-onMounted(() => {
-    mountedThree('')
-        .then(async () => {
-                // 韩咀无风门设备,只有报警历史数据,无其他数据
-                setModelType('fm3').then(async () => {
-                  
- });
-            
-        })
-        .catch(() => {
-            debugger;
-        });
-})
-
-</script>
-
-<style lang="less" scoped>
-.ces-demo {
-    position: relative;
-    width: calc(100% - 30px);
-    height: calc(100% - 84px);
-    margin: 15px;
-}
-</style>

src/views/vent/monitorManager/compressor/components/ceshi.json

@@ -0,0 +1,425 @@
+{
+    "success": true,
+    "message": "",
+    "code": 200,
+    "result": {
+        "cmd": "monitordata",
+        "msgTxt": [
+            {
+                "datalist": [
+                    {
+                        "msgType": null,
+                        "deviceID": "1998575087573454850",
+                        "strname": "副井制氮机房",
+                        "strinstallpos": "副井制氮机房",
+                        "fsectarea": "null",
+                        "stationname": "副井制氮机房",
+                        "stationtype": "plc",
+                        "deviceType": "nitrogen_new",
+                        "typeName": null,
+                        "netStatus": 1,
+                        "warnFlag": 0,
+                        "warnLevel": 0,
+                        "warnLevel_str": "正常",
+                        "syswarnLevel": null,
+                        "syswarnLevel_str": null,
+                        "syswarnLevel_des": null,
+                        "warnTime": null,
+                        "readTime": "2025-12-10 13:33:53",
+                        "warnDes": "",
+                        "frontGateOpenCtrl": null,
+                        "rearGateOpenCtrl": null,
+                        "readData": {
+                            "kyj2_klqsy_sj": "0.00",
+                            "kyj1_rhysy_sj": "703.00",
+                            "zd2_ld": "0.00",
+                            "kyjf_wjwd": "7.21",
+                            "kyj1_yy": "0.00",
+                            "kyj1_ylqsy_sj": "203.00",
+                            "zd2_kz": "0",
+                            "kyj1_xqwd_a": "6.00",
+                            "kyj2_xqwd_c": "5.00",
+                            "kyj1_xqwd_b": "7.00",
+                            "kyj2_xqwd_b": "4.00",
+                            "kyj2_xqwd_a": "5.00",
+                            "kyj1_djq_zd": "0.00",
+                            "kyj1_zjq_zd": "0.00",
+                            "kyj1_xqwd_c": "6.00",
+                            "kyj2_zjq_zd": "0.00",
+                            "kyj2_djq_zd": "0.01",
+                            "kyjf_hjsd": "37.21",
+                            "zd1_gz": "0",
+                            "kyj2_pqwd": "4.00",
+                            "kyj2_rhysy_sj": "0.00",
+                            "kyj1_klqsy_sj": "703.00",
+                            "cqg3_wd": "6.37",
+                            "kyj2_zjscdy": "393.00",
+                            "kyj1_jqwd": "9.30",
+                            "kyj2_zjscdl": "0.00",
+                            "kyj2_gqyl": "-0.29",
+                            "kyj1_yfqsy_sj": "703.00",
+                            "kyj1_rhzsy_sj": "703.00",
+                            "zd1_ljll": "0.00",
+                            "cqg1_wd": "11.33",
+                            "kyj2_jzsj": "0.00",
+                            "kyj1_hzc_wd": "7.00",
+                            "kyj2_xtwd": "6.00",
+                            "zd2_zt": "0",
+                            "zg_ssll": "0.00",
+                            "kyj2_yxzt": "2",
+                            "zd2_sd": "0",
+                            "kyj1_yxzt_str": "设备已停止",
+                            "zd2_cd": "0.00",
+                            "zd2_ssll": "0.00",
+                            "cqg3_yl": "0.00",
+                            "kyj1_zjh_zd": "0.00",
+                            "kyj2_yxsj": "0.00",
+                            "kyj2_gz": "19",
+                            "zd1_sd": "0",
+                            "zg_yl": "0.00",
+                            "zd2_gz": "0",
+                            "cqg1_yl": "0.00",
+                            "kyj2_zjscgl": "0.00",
+                            "sign": "0",
+                            "kyj1_zjscgl": "0.00",
+                            "pds_hhsd": "43.03",
+                            "zd1_cd": "79.00",
+                            "cqg2_wd": "4.35",
+                            "pds_hjwd": "4.18",
+                            "zd1_ssll": "0.00",
+                            "zd2_yl": "0.00",
+                            "kyj1_djh_zd": "0.00",
+                            "kyj2_yy": "0.00",
+                            "pds_zs": "64.10",
+                            "kyj1_yxsj": "703.00",
+                            "zd1_kz": "0",
+                            "kyj2_zjdl1": "0.00",
+                            "kyj2_zjdl2": "0.00",
+                            "kyj2_zjdl3": "0.00",
+                            "zg_ljll": "0.00",
+                            "zd1_ld": "-80.00",
+                            "kyj1_qzc_wd": "7.00",
+                            "kyj2_zjh_zd": "0.00",
+                            "kyj1_gz_str": "无",
+                            "kyj1_xtwd": "8.00",
+                            "zd2_yx": "0",
+                            "kyj2_yfqsy_sj": "0.00",
+                            "kyj2_rhzsy_sj": "0.00",
+                            "zd1_yl": "0.00",
+                            "kyj1_yxzt": "10",
+                            "kyj2_hzc_wd": "5.00",
+                            "kyjf_zs": "74.30",
+                            "kyj1_jzsj": "595.00",
+                            "cqg2_yl": "0.00",
+                            "kyj1_gz": "0",
+                            "zd1_yx": "0",
+                            "kyj2_jqwd": "9.20",
+                            "kyj2_ylqsy_sj": "0.00",
+                            "kyj1_gqyl": "-0.30",
+                            "kyj2_djh_zd": "0.08",
+                            "tTime": "2025-12-10 13:33:50",
+                            "zd2_ljll": "0.00",
+                            "kyj1_zjdl3": "0.00",
+                            "kyj1_zjdl2": "0.00",
+                            "kyj1_pqwd": "7.00",
+                            "kyj1_zjdl1": "0.00",
+                            "kyj1_zjscdl": "0.00",
+                            "kyj2_yxzt_str": "急停,请复位!",
+                            "zg_wd": "7.08",
+                            "kyj1_zjscdy": "391.00",
+                            "zd1_zt": "0",
+                            "kyj2_gz_str": "电压过高",
+                            "isRun": "-2",
+                            "kyj2_qzc_wd": "6.00"
+                        },
+                        "readDataDes": null,
+                        "summaryHour": [],
+                        "summaryDay": [],
+                        "history": [],
+                        "dayhistory": [],
+                        "totalInfo": null,
+                        "sign": null,
+                        "cameras": [],
+                        "links": [],
+                        "avgParam": {},
+                        "other1": null,
+                        "other2": null,
+                        "other3": null,
+                        "remarkInfo": null,
+                        "linkInfo": null,
+                        "addrIndex": null,
+                        "warnLogNotOkCount": 0,
+                        "otherInfo": null,
+                        "orderNum": 3,
+                        "testFlag": 0,
+                        "strRemark": null,
+                        "isUnderground": "0",
+                        "groupNumber": "",
+                        "deviceId": 1998575087573454850
+                    },
+                    {
+                        "msgType": null,
+                        "deviceID": "1998596138558738434",
+                        "strname": "副井空压机",
+                        "strinstallpos": "副井空压机",
+                        "fsectarea": "null",
+                        "stationname": "副井空压机",
+                        "stationtype": "plc",
+                        "deviceType": "nitrogen_kyj",
+                        "typeName": null,
+                        "netStatus": 1,
+                        "warnFlag": 0,
+                        "warnLevel": 0,
+                        "warnLevel_str": "正常",
+                        "syswarnLevel": null,
+                        "syswarnLevel_str": null,
+                        "syswarnLevel_des": null,
+                        "warnTime": null,
+                        "readTime": "2025-12-10 13:33:53",
+                        "warnDes": "",
+                        "frontGateOpenCtrl": null,
+                        "rearGateOpenCtrl": null,
+                        "readData": {
+                            "kyj2_klqsy_sj": "1186.00",
+                            "kyj1_rhysy_sj": "464.00",
+                            "kyj3_pqwd": "85.00",
+                            "kyjf_wjwd": "14.89",
+                            "kyj1_yy": "0.00",
+                            "kyj3_gqyl": "0.73",
+                            "kyj1_ylqsy_sj": "464.00",
+                            "kyj1_xqwd_a": "6.00",
+                            "kyj2_xqwd_c": "48.00",
+                            "kyj1_xqwd_b": "6.00",
+                            "kyj2_xqwd_b": "50.00",
+                            "kyj2_xqwd_a": "52.00",
+                            "kyj1_djq_zd": "0.02",
+                            "kyj1_zjq_zd": "0.00",
+                            "kyj3_xqwd_a": "73.00",
+                            "kyj3_xqwd_b": "78.00",
+                            "kyj1_xqwd_c": "7.00",
+                            "kyj2_zjq_zd": "1.21",
+                            "kyj3_xqwd_c": "77.00",
+                            "kyj3_zjdl2": "0.00",
+                            "kyj3_djq_zd": "1.63",
+                            "kyj3_zjq_zd": "1.65",
+                            "kyj3_zjdl3": "0.00",
+                            "kyj2_djq_zd": "1.93",
+                            "kyj3_zjdl1": "0.00",
+                            "kyjf_hjsd": "30.95",
+                            "kyj2_pqwd": "84.00",
+                            "kyj2_rhysy_sj": "1186.00",
+                            "kyj3_yxsj": "1938.00",
+                            "kyj1_klqsy_sj": "464.00",
+                            "kyj2_zjscdy": "391.00",
+                            "kyj3_yxzt": "8",
+                            "kyj1_jqwd": "13.70",
+                            "kyj2_zjscdl": "0.00",
+                            "kyj2_gqyl": "0.77",
+                            "kyj1_yfqsy_sj": "464.00",
+                            "kyj1_rhzsy_sj": "464.00",
+                            "kyj3_jzsj": "1852.00",
+                            "kyj2_jzsj": "4646.00",
+                            "kyj3_jqwd": "37.10",
+                            "kyj1_hzc_wd": "9.00",
+                            "kyj2_xtwd": "63.00",
+                            "zg_ssll": "0.00",
+                            "kyj3_yxzt_str": "自动加载运行",
+                            "kyj2_yxzt": "7",
+                            "kyj3_rhzsy_sj": "1938.00",
+                            "kyj3_yfqsy_sj": "1938.00",
+                            "kyj1_yxzt_str": "加热中",
+                            "kyj3_zjscdy": "390.00",
+                            "kyj1_zjh_zd": "0.00",
+                            "kyj3_zjscdl": "0.00",
+                            "kyj3_ylqsy_sj": "1437.00",
+                            "kyj2_yxsj": "5965.00",
+                            "kyj2_gz": "0",
+                            "zg_yl": "0.00",
+                            "kyj3_zjscgl": "0.00",
+                            "kyj2_zjscgl": "0.00",
+                            "sign": "0",
+                            "kyj1_zjscgl": "0.00",
+                            "pds_hhsd": "18.94",
+                            "pds_hjwd": "20.16",
+                            "kyj3_gz": "0",
+                            "kyj1_djh_zd": "0.04",
+                            "kyj2_yy": "0.36",
+                            "pds_zs": "48.30",
+                            "kyj1_yxsj": "4478.00",
+                            "kyj3_qzc_wd": "56.00",
+                            "kyj2_zjdl1": "0.00",
+                            "kyj2_zjdl2": "0.00",
+                            "kyj3_djh_zd": "2.84",
+                            "kyj2_zjdl3": "0.00",
+                            "zg_ljll": "0.00",
+                            "kyj1_qzc_wd": "10.00",
+                            "kyj2_zjh_zd": "1.34",
+                            "kyj3_gz_str": "无",
+                            "kyj1_gz_str": "无",
+                            "kyj3_rhysy_sj": "1938.00",
+                            "kyj1_xtwd": "9.00",
+                            "kyj2_yfqsy_sj": "1186.00",
+                            "kyj2_rhzsy_sj": "1186.00",
+                            "kyj3_xtwd": "79.00",
+                            "kyj3_yy": "0.73",
+                            "kyj1_yxzt": "27",
+                            "kyj2_hzc_wd": "26.00",
+                            "kyj3_hzc_wd": "30.00",
+                            "kyjf_zs": "62.90",
+                            "kyj1_jzsj": "2528.00",
+                            "kyj1_gz": "0",
+                            "kyj2_jqwd": "41.40",
+                            "kyj2_ylqsy_sj": "1186.00",
+                            "kyj1_gqyl": "0.75",
+                            "kyj2_djh_zd": "1.11",
+                            "tTime": "2025-12-10 13:33:50",
+                            "kyj1_zjdl3": "0.00",
+                            "kyj1_zjdl2": "0.00",
+                            "kyj1_pqwd": "4.00",
+                            "kyj1_zjdl1": "0.00",
+                            "kyj1_zjscdl": "0.00",
+                            "kyj2_yxzt_str": "自动卸载运行",
+                            "zg_wd": "14.35",
+                            "kyj1_zjscdy": "390.00",
+                            "kyj2_gz_str": "无",
+                            "kyj3_klqsy_sj": "1938.00",
+                            "isRun": "-2",
+                            "kyj2_qzc_wd": "45.00",
+                            "kyj3_zjh_zd": "1.92"
+                        },
+                        "readDataDes": null,
+                        "summaryHour": [],
+                        "summaryDay": [],
+                        "history": [],
+                        "dayhistory": [],
+                        "totalInfo": null,
+                        "sign": null,
+                        "cameras": [],
+                        "links": [],
+                        "avgParam": {},
+                        "other1": null,
+                        "other2": null,
+                        "other3": null,
+                        "remarkInfo": null,
+                        "linkInfo": null,
+                        "addrIndex": null,
+                        "warnLogNotOkCount": 0,
+                        "otherInfo": null,
+                        "orderNum": 4,
+                        "testFlag": 0,
+                        "strRemark": null,
+                        "isUnderground": "0",
+                        "groupNumber": "",
+                        "deviceId": 1998596138558738434
+                    },
+                    {
+                        "msgType": null,
+                        "deviceID": "1765978085252931586",
+                        "strname": "空压机",
+                        "strinstallpos": "空压机",
+                        "fsectarea": "null",
+                        "stationname": "空压机",
+                        "stationtype": "plc",
+                        "deviceType": "nitrogen_air_compressor",
+                        "typeName": "空压机",
+                        "netStatus": 0,
+                        "warnFlag": 0,
+                        "warnLevel": 0,
+                        "warnLevel_str": "正常",
+                        "syswarnLevel": null,
+                        "syswarnLevel_str": null,
+                        "syswarnLevel_des": null,
+                        "warnTime": null,
+                        "readTime": null,
+                        "warnDes": null,
+                        "frontGateOpenCtrl": null,
+                        "rearGateOpenCtrl": null,
+                        "readData": {
+                            "tTime": null
+                        },
+                        "readDataDes": null,
+                        "summaryHour": [],
+                        "summaryDay": [],
+                        "history": [],
+                        "dayhistory": [],
+                        "totalInfo": null,
+                        "sign": null,
+                        "cameras": [],
+                        "links": [],
+                        "avgParam": {},
+                        "other1": null,
+                        "other2": null,
+                        "other3": null,
+                        "remarkInfo": null,
+                        "linkInfo": null,
+                        "addrIndex": null,
+                        "warnLogNotOkCount": 0,
+                        "otherInfo": null,
+                        "orderNum": 11,
+                        "testFlag": 0,
+                        "strRemark": null
+                    },
+                    {
+                        "msgType": null,
+                        "deviceID": "1765901318806863873",
+                        "strname": "注氮机",
+                        "strinstallpos": "注氮机",
+                        "fsectarea": "null",
+                        "stationname": "注氮机",
+                        "stationtype": "plc",
+                        "deviceType": "nitrogen_auto",
+                        "typeName": "制氮机",
+                        "netStatus": 0,
+                        "warnFlag": 0,
+                        "warnLevel": 0,
+                        "warnLevel_str": "正常",
+                        "syswarnLevel": null,
+                        "syswarnLevel_str": null,
+                        "syswarnLevel_des": null,
+                        "warnTime": null,
+                        "readTime": null,
+                        "warnDes": null,
+                        "frontGateOpenCtrl": null,
+                        "rearGateOpenCtrl": null,
+                        "readData": {
+                            "tTime": null
+                        },
+                        "readDataDes": null,
+                        "summaryHour": [],
+                        "summaryDay": [],
+                        "history": [],
+                        "dayhistory": [],
+                        "totalInfo": null,
+                        "sign": null,
+                        "cameras": [],
+                        "links": [],
+                        "avgParam": {},
+                        "other1": null,
+                        "other2": null,
+                        "other3": null,
+                        "remarkInfo": null,
+                        "linkInfo": null,
+                        "addrIndex": null,
+                        "warnLogNotOkCount": 0,
+                        "otherInfo": null,
+                        "orderNum": 12,
+                        "testFlag": 0,
+                        "strRemark": null,
+                        "isUnderground": "0",
+                        "groupNumber": "",
+                        "deviceId": 1765901318806863873
+                    }
+                ],
+                "avginfo": {
+                    "warnFlag": {
+                        "value": 0
+                    }
+                },
+                "typeName": "制氮",
+                "type": "nitrogen",
+                "locallist": []
+            }
+        ]
+    },
+    "timestamp": 1765344835845
+}

src/views/vent/monitorManager/compressor/components/nitrogenHome_ln copy.vue

@@ -0,0 +1,829 @@
+<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 v-if="preMonitor.code !== 'signal'" class="monitor-item">
+            <span class="monitor-title">{{ preMonitor.title }}:</span>
+            <span class="monitor-val"
+              ><span class="val">{{ monitorData[groupNum] ? monitorData[groupNum][preMonitor.code] : '-' }}</span
+              ><span class="unit">{{ preMonitor.unit }}</span></span
+            >
+          </div>
+        </template>
+      </fourBorderBg>
+    </div>
+  </div>
+  <div class="nitrogen-home">
+    <div class="nitrogen-container">
+      <div class="top-box">
+        <!-- 中间区域控制按钮 -->
+        <div class="center-item-box">
+          <div class="top-left">
+            <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机启动')">制氮机启动</div>
+            <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机停止')">制氮机停止</div>
+            <div class="button-box" @click="handlerDevice(airCompressorState, '空压机启动')">空压机启动</div>
+            <div class="button-box" @click="handlerDevice(airCompressorState, '空压机停止')">空压机停止</div>
+          </div>
+          <div class="top-center">
+            <div>
+              <span class="top-c-label">注氮机通信状态：</span>
+              <span class="top-c-val">{{ monitorData[0] && monitorData[0].netStatus ? '连接' : '网络断开' }}</span>
+            </div>
+            <div>
+              <span class="top-c-label">空压机通信状态：</span>
+              <span class="top-c-val">{{ monitorData[1] && monitorData[1].netStatus ? '连接' : '网络断开' }}</span>
+            </div>
+          </div>
+          <div class="top-right">
+            <div class="control-type">
+              <div class="control-title">空压机状态切换：</div>
+              <a-radio-group v-model:value="statusKyj">
+                <a-radio :value="`1`">工作</a-radio>
+                <a-radio :value="`0`">停机</a-radio>
+              </a-radio-group>
+            </div>
+            <div class="control-type">
+              <div class="control-title">制氮机远近控切换：</div>
+              <a-radio-group v-model:value="statusZdj">
+                <a-radio :value="`1`">远程</a-radio>
+                <a-radio :value="`0`">就地</a-radio>
+              </a-radio-group>
+            </div>
+          </div>
+        </div>
+        <!-- 左边监测数据 -->
+        <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 v-if="preFan.unit !== 'signal'" class="value">{{ monitorData[0] ? formatNum(Number(monitorData[0][preFan.code])) : '-' }}</div>
+                <div
+                  v-else
+                  :class="{
+                    'signal-round': true,
+                    'signal-round-warning': monitorData[0][preFan.code] == '1',
+                    'signal-round-run': monitorData[0][preFan.code] == '0',
+                  }"
+                ></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 !== '' ? `(${preFan.unit})` : '') }}</div>
+                      <div v-if="preFan.unit !== 'signal'" class="state-val">{{
+                        monitorData[groupNum] ? monitorData[groupNum][preFan.code] : '-'
+                      }}</div>
+                      <div
+                        v-else
+                        :class="{
+                          'signal-round': true,
+                          'signal-round-warning': monitorData[groupNum][preFan.code] == '1',
+                          'signal-round-run': monitorData[groupNum][preFan.code] == '0',
+                        }"
+                      ></div>
+                    </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"
+                :option="echatsOption"
+              />
+            </template>
+          </ventBox1>
+          <div v-if="renderPlayer" 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 { deviceControlApi } from '/@/api/vent/index';
+  import { preMonitorList, preFanMonitorData, nitrogenMonitorData } from '../nitrogen.data.ln';
+  import { formatNum } from '/@/utils/ventutil';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { message } from 'ant-design-vue';
+  import lodash from 'lodash';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+
+  const globalConfig = inject('globalConfig');
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    modalType: {
+      type: String,
+      require: true,
+    },
+  });
+  const renderPlayer = ref(true);
+  const playerRef = ref();
+  const refresh = ref(false);
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const loading = ref(true);
+  let kzParam = reactive<any>({
+    data: {},
+    isFw: null,
+  });
+
+  // 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 colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9'];
+  const echatsOption = {
+    grid: {
+      top: '35%',
+      left: '15%',
+      right: '20px',
+      bottom: '8%',
+      // containLabel: true
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+
+  const monitorDataGroupNum = ref(0);
+  const statusKyj = ref(''); //空压机工作状态
+  const statusZdj = ref(''); //制氮机远近程状态
+
+  let airCompressorState = reactive<any[]>([]);
+
+  const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
+  const { getCamera, webRtcServer } = useCamera();
+
+  const monitorData = reactive<any[]>([]);
+
+  //图表数据
+  let echartData = ref<any>([]);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(
+        async () => {
+          if (props.deviceId) {
+            await getDataSource(props.deviceId);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+        },
+        flag ? 0 : 3000
+      );
+    }
+  }
+
+  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;
+      airCompressorState.length = 0;
+      monitorData.length = 0;
+      result.msgTxt.forEach((item) => {
+        if (item.type && item.type.startsWith('nitrogen_auto')) {
+          monitorData.splice(0, 0, { ...item['datalist'][0], ...item['datalist'][0].readData });
+        } else if (item.type && item.type.startsWith('nitrogen_air_compressor')) {
+          monitorData.push({ ...item['datalist'][0], ...item['datalist'][0].readData });
+        }
+        statusKyj.value = monitorData[1] ? monitorData[1]['operation_shutdown'] : '';
+        statusZdj.value = monitorData[0] ? monitorData[0]['remote_local'] : '';
+        monitorDataGroupNum.value = monitorData.length - 1;
+        airCompressorState.push({
+          id: monitorData[1] ? monitorData[1]['deviceID'] : '',
+          deviceType: monitorData[1] ? monitorData[1]['deviceType'] : '',
+        });
+        const airCompressor = { readTime: monitorData[0]['readTime'].substring(11) };
+        const dataArr = lodash.cloneDeep(echartData.value);
+        //图表数据
+        if (dataArr.length <= 5) {
+          airCompressor[`nitrogen_flow_rate`] = monitorData[0]['nitrogen_flow_rate'] || 0;
+          dataArr.push(airCompressor);
+        } else {
+          dataArr.shift();
+          airCompressor[`nitrogen_flow_rate`] = monitorData[0]['nitrogen_flow_rate'] || 0;
+          dataArr.push(airCompressor);
+        }
+        echartData.value = dataArr;
+      });
+      refresh.value = true;
+      nextTick(() => {
+        refresh.value = false;
+      });
+    }
+  }
+
+  function handlerDevice(data, bol) {
+    kzParam.data = data;
+    kzParam.isFw = bol;
+    if (bol == '制氮机启动' || bol == '空压机启动') {
+      modalTitle.value = bol;
+      modalType.value = '1';
+      modalIsShow.value = true;
+      kzParam.data.start = true;
+      kzParam.data.stop = false;
+    } else {
+      modalTitle.value = bol;
+      modalType.value = '2';
+      modalIsShow.value = true;
+      kzParam.data.start = false;
+      kzParam.data.stop = true;
+    }
+  }
+  function handleOK(passWord, handlerState) {
+    console.log(kzParam, 'kz----------');
+    // if (passWord !== '123456') {
+    //   message.warning('密码不正确，请重新输入');
+    //   return;
+    // }
+
+    let data = {};
+    if (kzParam.isFw == '制氮机启动' || kzParam.isFw == '空压机启动') {
+      data = {
+        deviceid: kzParam.data.id,
+        devicetype: kzParam.data.deviceType,
+        password: passWord,
+        start: kzParam.data.start,
+      };
+    } else {
+      data = {
+        deviceid: kzParam.data.id,
+        password: passWord,
+        devicetype: kzParam.data.deviceType,
+        stop: kzParam.data.stop,
+      };
+    }
+
+    deviceControlApi(data).then((res) => {
+      // 模拟时开启
+      if (res.success) {
+        modalIsShow.value = false;
+        getDataSource(props.deviceId);
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
+        } else {
+          message.success('指令已下发成功！');
+        }
+      }
+    });
+  }
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+  }
+
+  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+    nextTick(() => {
+      if (newMonitorDataGroupNum && !newLoading) {
+        setModelType(props.modalType, newMonitorDataGroupNum);
+      }
+    });
+  });
+
+  onMounted(async () => {
+    await getMonitor(true);
+    await mountedThree().then(() => {
+      loading.value = false;
+    });
+    await getCamera(props.deviceId, playerRef, renderPlayer);
+  });
+
+  onUnmounted(() => {
+    destroy();
+    if (webRtcServer.length > 0) {
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
+    }
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  @ventSpace: zxm;
+
+  .nitrogen-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  #nitrogenCss3D {
+    .modal-monitor {
+      width: 200px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+
+    &:deep(.win) {
+      margin: 0 !important;
+      background: #00000044;
+    }
+  }
+
+  .nitrogen-home {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    top: 20px;
+
+    .nitrogen-container {
+      width: 100%;
+      height: calc(100% - 100px);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 100px;
+
+      .device-state {
+        width: 100%;
+        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-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;
+            width: 42%;
+            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);
+              }
+            }
+          }
+
+          .top-center {
+            display: flex;
+            flex-direction: column;
+            //   flex: 1;
+            width: 15%;
+            justify-content: center;
+            align-items: left;
+            font-size: 14px;
+            color: #fff;
+            .top-c-label {
+              color: yellow;
+            }
+          }
+
+          .top-right {
+            display: flex;
+            //   flex: 2;
+            width: 43%;
+            justify-content: right;
+            align-items: center;
+            color: #fff;
+
+            .control-type {
+              display: flex;
+              color: #fff;
+
+              .control-title {
+                color: #73e8fe;
+              }
+            }
+          }
+        }
+
+        .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: calc(100% - 70px);
+        }
+
+        .item {
+          width: 305px;
+          height: auto;
+          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%;
+            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;
+              }
+            }
+          }
+
+          .signal-box {
+            margin: 5px 0;
+            display: flex;
+            align-items: center;
+
+            .signal-title {
+              color: #7af5ff;
+              margin: 0 5px;
+            }
+
+            &:last-child {
+              margin-right: 0px;
+            }
+          }
+
+          .list-item {
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .item-data-key {
+              color: #ffffff99;
+            }
+          }
+
+          .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;
+            }
+          }
+        }
+
+        .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);
+              }
+            }
+          }
+        }
+
+        .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) {
+    .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 {
+      width: 200px;
+      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;
+      width: 125px;
+      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;
+        }
+      }
+    }
+  }
+
+  :deep(.zxm-radio-wrapper) {
+    color: #fff !important;
+  }
+</style>

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

@@ -1,726 +1,212 @@
 <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 v-if="preMonitor.code !== 'signal'" class="monitor-item">
-            <span class="monitor-title">{{ preMonitor.title }}:</span>
-            <span class="monitor-val"
-              ><span class="val">{{ monitorData[groupNum] ? monitorData[groupNum][preMonitor.code] : '-' }}</span
-              ><span class="unit">{{ preMonitor.unit }}</span></span
-            >
-          </div>
-        </template>
-      </fourBorderBg>
+  <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+  <template v-for="(sysItem, sysIndex) in 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: 2; top: 0px; left: 0px">
+    </div>
+  </template>
+  <!-- 模型卡片 -->
+  <div v-for="(sysItem, sysIndex) in 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">{{ `空压机${groupNum}` }} </div>
+          <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :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">{{
+                monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
+                  ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
+                  : preMonitor.value
+                    ? preMonitor.value
+                    : '-'
+              }}</span><span class="unit">{{ preMonitor.unit }}</span></span>
+            </div>
+            <div v-else class="signal-item">
+              <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
+                <span class="monitor-title">{{ signal.title }}</span>
+                <span :class="{
+                  'signal-round': true,
+                  'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
+                  'signal-round-warning':
+                    signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
+                  'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
+                }"></span>
+              </div>
+            </div>
+          </template>
+        </fourBorderBg>
+        <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`"
+          v-if="cqgMonitorList && cqgMonitorList.length > 0">
+          <div class="title">{{ `风包${groupNum}` }}</div>
+          <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
+            <div class="monitor-item">
+              <span class="monitor-title">{{ cqgMonitor.title }}:</span>
+              <span class="monitor-val"><span class="val">{{
+                monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
+                  ? formatNum(monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
+                  : cqgMonitor.value
+                    ? cqgMonitor.value
+                    : '-'
+              }}</span><span class="unit">{{ cqgMonitor.unit }}</span></span>
+            </div>
+          </template>
+        </fourBorderBg>
+      </div>
     </div>
   </div>
   <div class="nitrogen-home">
+
+    <!-- 顶部导航提示 -->
+    <!-- <div class="total-data" v-if="totalData && totalData.length > 0">
+      <div class="vent-flex-row">
+        <div class="item" v-for="(data, index) in totalData" :key="index"
+          >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
+            monitorData[data.code] ? formatNum(monitorData[data.code]) : data.value ? data.value : '-'
+          }}</span></div
+        >
+      </div>
+    </div> -->
+
     <div class="nitrogen-container">
+      <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
       <div class="top-box">
-        <!-- 中间区域控制按钮 -->
-        <div class="center-item-box">
-          <div class="top-left">
-            <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机启动')">制氮机启动</div>
-            <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机停止')">制氮机停止</div>
-            <div class="button-box" @click="handlerDevice(airCompressorState, '空压机启动')">空压机启动</div>
-            <div class="button-box" @click="handlerDevice(airCompressorState, '空压机停止')">空压机停止</div>
-          </div>
-          <div class="top-center">
-            <div>
-              <span class="top-c-label">注氮机通信状态：</span>
-              <span class="top-c-val">{{ monitorData[0] && monitorData[0].netStatus ? '连接' : '网络断开' }}</span>
-            </div>
-            <div>
-              <span class="top-c-label">空压机通信状态：</span>
-              <span class="top-c-val">{{ monitorData[1] && monitorData[1].netStatus ? '连接' : '网络断开' }}</span>
-            </div>
-          </div>
-          <div class="top-right">
-            <div class="control-type">
-              <div class="control-title">空压机状态切换：</div>
-              <a-radio-group v-model:value="statusKyj">
-                <a-radio :value="`1`">工作</a-radio>
-                <a-radio :value="`0`">停机</a-radio>
-              </a-radio-group>
-            </div>
-            <div class="control-type">
-              <div class="control-title">制氮机远近控切换：</div>
-              <a-radio-group v-model:value="statusZdj">
-                <a-radio :value="`1`">远程</a-radio>
-                <a-radio :value="`0`">就地</a-radio>
-              </a-radio-group>
-            </div>
-          </div>
-        </div>
         <!-- 左边监测数据 -->
         <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 v-if="preFan.unit !== 'signal'" class="value">{{ monitorData[0] ? formatNum(Number(monitorData[0][preFan.code])) : '-' }}</div>
-                <div
-                  v-else
-                  :class="{
-                    'signal-round': true,
-                    'signal-round-warning': monitorData[0][preFan.code] == '1',
-                    'signal-round-run': monitorData[0][preFan.code] == '0',
-                  }"
-                ></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 !== '' ? `(${preFan.unit})` : '') }}</div>
-                      <div v-if="preFan.unit !== 'signal'" class="state-val">{{
-                        monitorData[groupNum] ? monitorData[groupNum][preFan.code] : '-'
-                      }}</div>
-                      <div
-                        v-else
-                        :class="{
+          <div class="left-container" v-if="preFanMonitorData && preFanMonitorData.length > 0">
+            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroup" :key="index">
+              <div class="monitor-box">
+                <ventBox1>
+                  <template #title>
+                    <div>{{ groupNum }}号压风机</div>
+                  </template>
+                  <template #container>
+                    <div class="state-item">
+                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
+                        <span class="state-title">{{
+                          preFan.title + (preFan.unit !== 'signal' && preFan.unit !== 'warning' ? `(${preFan.unit})` :
+                            '')
+                          }}</span>
+                        <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
+                          monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)] >= 0
+                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)]))
+                            : preFan.value
+                              ? preFan.value
+                              : '-'
+                        }}</span>
+                        <span v-else :class="{
                           'signal-round': true,
-                          'signal-round-warning': monitorData[groupNum][preFan.code] == '1',
-                          'signal-round-run': monitorData[groupNum][preFan.code] == '0',
-                        }"
-                      ></div>
+                          'signal-round-run':
+                            preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
+                          'signal-round-warning':
+                            preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
+                          'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
+                        }"></span>
+                      </div>
                     </div>
-                  </div>
-                </div>
-              </template>
-            </ventBox1>
+                  </template>
+                </ventBox1>
+              </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"
-                :option="echatsOption"
-              />
-            </template>
-          </ventBox1>
-          <div v-if="renderPlayer" ref="playerRef" style="height: auto; width: 100%; margin-top: 10px"></div>
-        </div>
+        <div v-if="renderPlayer" ref="playerRef" class="playerBox"> </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 { deviceControlApi } from '/@/api/vent/index';
-  import { preMonitorList, preFanMonitorData, nitrogenMonitorData } from '../nitrogen.data.ln';
-  import { formatNum } from '/@/utils/ventutil';
-  import { useCamera } from '/@/hooks/system/useCamera';
-  import { message } from 'ant-design-vue';
-  import lodash from 'lodash';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-
-  const globalConfig = inject('globalConfig');
-
-  const props = defineProps({
-    deviceId: {
-      type: String,
-      require: true,
-    },
-    modalType: {
-      type: String,
-      require: true,
-    },
-  });
-  const renderPlayer = ref(true);
-  const playerRef = ref();
-  const refresh = ref(false);
-  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-  const modalIsShow = ref<boolean>(false); // 是否显示模态框
-  const loading = ref(true);
-  let kzParam = reactive<any>({
-    data: {},
-    isFw: null,
-  });
-
-  // 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 colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9'];
-  const echatsOption = {
-    grid: {
-      top: '35%',
-      left: '15%',
-      right: '20px',
-      bottom: '8%',
-      // containLabel: true
-    },
-    toolbox: {
-      feature: {},
-    },
-  };
-
-  const monitorDataGroupNum = ref(0);
-  const statusKyj = ref(''); //空压机工作状态
-  const statusZdj = ref(''); //制氮机远近程状态
-
-  let airCompressorState = reactive<any[]>([]);
-
-  const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
-  const { getCamera, webRtcServer } = useCamera();
-
-  const monitorData = reactive<any[]>([]);
-
-  //图表数据
-  let echartData = ref<any>([]);
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  async function getMonitor(flag?) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
+import { onMounted, onUnmounted, ref, onBeforeUnmount } from 'vue';
+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 { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix,  totalData,  } from '../nitrogen.data.lh';
+import { formatNum } from '/@/utils/ventutil';
+import { useCamera } from '/@/hooks/system/useCamera';
+
+const loading = ref(true);
+const monitorDataGroupFlag = ref(1);
+const monitorDataGroup = ref<Number[]>([]);
+const monitorData = ref<Object | []>({});
+const playerRef = ref();
+const renderPlayer = ref(true);
+
+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 () => {
-          if (props.deviceId) {
-            await getDataSource(props.deviceId);
-          }
+          await getDataSource();
           if (timer) {
             timer = null;
           }
-          await getMonitor();
+          resolve(null);
+          await getMonitor(false);
         },
-        flag ? 0 : 3000
+        flag ? 0 : 1000
       );
-    }
+    });
   }
+}
 
-  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;
-      airCompressorState.length = 0;
-      monitorData.length = 0;
-      result.msgTxt.forEach((item) => {
-        if (item.type && item.type.startsWith('nitrogen_auto')) {
-          monitorData.splice(0, 0, { ...item['datalist'][0], ...item['datalist'][0].readData });
-        } else if (item.type && item.type.startsWith('nitrogen_air_compressor')) {
-          monitorData.push({ ...item['datalist'][0], ...item['datalist'][0].readData });
-        }
-        statusKyj.value = monitorData[1] ? monitorData[1]['operation_shutdown'] : '';
-        statusZdj.value = monitorData[0] ? monitorData[0]['remote_local'] : '';
-        monitorDataGroupNum.value = monitorData.length - 1;
-        airCompressorState.push({
-          id: monitorData[1] ? monitorData[1]['deviceID'] : '',
-          deviceType: monitorData[1] ? monitorData[1]['deviceType'] : '',
-        });
-        const airCompressor = { readTime: monitorData[0]['readTime'].substring(11) };
-        const dataArr = lodash.cloneDeep(echartData.value);
-        //图表数据
-        if (dataArr.length <= 5) {
-          airCompressor[`nitrogen_flow_rate`] = monitorData[0]['nitrogen_flow_rate'] || 0;
-          dataArr.push(airCompressor);
-        } else {
-          dataArr.shift();
-          airCompressor[`nitrogen_flow_rate`] = monitorData[0]['nitrogen_flow_rate'] || 0;
-          dataArr.push(airCompressor);
-        }
-        echartData.value = dataArr;
-      });
-      refresh.value = true;
-      nextTick(() => {
-        refresh.value = false;
-      });
-    }
-  }
+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] : [];
 
-  function handlerDevice(data, bol) {
-    kzParam.data = data;
-    kzParam.isFw = bol;
-    if (bol == '制氮机启动' || bol == '空压机启动') {
-      modalTitle.value = bol;
-      modalType.value = '1';
-      modalIsShow.value = true;
-      kzParam.data.start = true;
-      kzParam.data.stop = false;
-    } else {
-      modalTitle.value = bol;
-      modalType.value = '2';
-      modalIsShow.value = true;
-      kzParam.data.start = false;
-      kzParam.data.stop = true;
-    }
+  if (dataSource) {
+    Object.assign(monitorData.value, dataSource, dataSource.readData);
   }
-  function handleOK(passWord, handlerState) {
-    console.log(kzParam, 'kz----------');
-    // if (passWord !== '123456') {
-    //   message.warning('密码不正确，请重新输入');
-    //   return;
-    // }
-
-    let data = {};
-    if (kzParam.isFw == '制氮机启动' || kzParam.isFw == '空压机启动') {
-      data = {
-        deviceid: kzParam.data.id,
-        devicetype: kzParam.data.deviceType,
-        password: passWord,
-        start: kzParam.data.start,
-      };
-    } else {
-      data = {
-        deviceid: kzParam.data.id,
-        password: passWord,
-        devicetype: kzParam.data.deviceType,
-        stop: kzParam.data.stop,
-      };
-    }
-
-    deviceControlApi(data).then((res) => {
-      // 模拟时开启
-      if (res.success) {
-        modalIsShow.value = false;
-        getDataSource(props.deviceId);
-        if (globalConfig.History_Type == 'remote') {
-          message.success('指令已下发至生产管控平台成功！');
-        } else {
-          message.success('指令已下发成功！');
-        }
-      }
+  loading.value = false;
+}
+
+function setMonitorGroupNum(flag) {
+  if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
+  const monitorGroup = monitorDataGroupArr[flag - 1];
+  setModelType('compressor' + (flag - 1));
+  monitorDataGroup.value = monitorGroup;
+}
+
+onMounted(async () => {
+  setTimeout(() => {
+    mountedThree(monitorDataGroupArr).then(async () => {
+      setMonitorGroupNum(1);
+      getMonitor(true).then(async () => {
+        if (monitorData.value && monitorData.value['deviceID']) await getCamera(monitorData.value['deviceID'], playerRef, renderPlayer);
+      });
     });
+  }, 0);
+});
+onBeforeUnmount(() => {
+  removeCamera(playerRef);
+});
+onUnmounted(() => {
+  destroy();
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
   }
-  function handleCancel() {
-    modalIsShow.value = false;
-    modalTitle.value = '';
-    modalType.value = '';
-  }
-
-  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
-    nextTick(() => {
-      if (newMonitorDataGroupNum && !newLoading) {
-        setModelType(props.modalType, newMonitorDataGroupNum);
-      }
-    });
-  });
-
-  onMounted(async () => {
-    await getMonitor(true);
-    await mountedThree().then(() => {
-      loading.value = false;
-    });
-    await getCamera(props.deviceId, playerRef, renderPlayer);
-  });
-
-  onUnmounted(() => {
-    destroy();
-    if (webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        item.disconnect();
-      });
-    }
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
+});
 </script>
 
 <style lang="less" scoped>
-  @ventSpace: zxm;
-
-  .nitrogen-box {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
+@import '../../comment/less/workFace.less';
+@ventSpace: zxm;
+
+.compressorCss3D-box {
+  .modal-monitor {
+    position: absolute;
+    left: 0px;
+    top: 0px;
   }
 
-  #nitrogenCss3D {
-    .modal-monitor {
-      width: 200px;
-      position: absolute;
-      left: 0px;
-      top: 0px;
-    }
-
-    &:deep(.win) {
-      margin: 0 !important;
-      background: #00000044;
-    }
-  }
-
-  .nitrogen-home {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    top: 20px;
-
-    .nitrogen-container {
-      width: 100%;
-      height: calc(100% - 100px);
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 100px;
-
-      .device-state {
-        width: 100%;
-        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-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;
-            width: 42%;
-            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);
-              }
-            }
-          }
-
-          .top-center {
-            display: flex;
-            flex-direction: column;
-            //   flex: 1;
-            width: 15%;
-            justify-content: center;
-            align-items: left;
-            font-size: 14px;
-            color: #fff;
-            .top-c-label {
-              color: yellow;
-            }
-          }
-
-          .top-right {
-            display: flex;
-            //   flex: 2;
-            width: 43%;
-            justify-content: right;
-            align-items: center;
-            color: #fff;
-
-            .control-type {
-              display: flex;
-              color: #fff;
-
-              .control-title {
-                color: #73e8fe;
-              }
-            }
-          }
-        }
-
-        .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: calc(100% - 70px);
-        }
-
-        .item {
-          width: 305px;
-          height: auto;
-          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%;
-            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;
-              }
-            }
-          }
-
-          .signal-box {
-            margin: 5px 0;
-            display: flex;
-            align-items: center;
-
-            .signal-title {
-              color: #7af5ff;
-              margin: 0 5px;
-            }
-
-            &:last-child {
-              margin-right: 0px;
-            }
-          }
-
-          .list-item {
-            padding: 0 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .item-data-key {
-              color: #ffffff99;
-            }
-          }
-
-          .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;
-            }
-          }
-        }
-
-        .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);
-              }
-            }
-          }
-        }
-
-        .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(.win) {
+    margin: 0 !important;
+    background: #00000044;
   }
 
   &:deep(.main) {
@@ -738,7 +224,6 @@
     }
 
     .monitor-item {
-      width: 200px;
       display: flex;
       flex-direction: row;
       width: auto;
@@ -762,8 +247,7 @@
     }
 
     .monitor-title {
-      // width: 100px;
-      width: 125px;
+      width: 100px;
       color: #7af5ff;
       font-weight: 400;
       font-size: 14px;
@@ -822,8 +306,335 @@
       }
     }
   }
+}
+
+.nitrogen-home {
+  width: 100%;
+  height: calc(100%);
+  position: fixed;
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  top: 60px;
+
+  .total-data {
+    position: absolute;
+    color: #e4cd00;
+    z-index: 9;
+    top: 20px;
+    right: 30px;
+    // display: flex;
+    font-size: 18px;
+
+    .item {
+      margin-left: 20px;
+
+      .val {
+        display: inline-box;
+        width: 150px;
+        color: #00d8ff;
+      }
+    }
+  }
+
+  .nitrogen-container {
+    width: 100%;
+    height: calc(100%);
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+
+    .device-state {
+      width: 100%;
+      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;
+
+      .lr-box {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        z-index: 9999;
+        pointer-events: auto;
+      }
+
+      .item {
+        width: 285px;
+        height: auto;
+        position: relative;
+        border-radius: 5px;
+        margin-top: 10px;
+        margin-bottom: 0px;
+        pointer-events: auto;
+        color: #fff;
+        overflow: hidden;
+
+        .control-item {
+          height: auto;
+          min-height: 35px;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          padding: 5px;
+          margin: 0 10px 0 3px;
+          pointer-events: auto;
+          background: linear-gradient(to right, #0063cd22, #0063cd04);
+
+          margin-bottom: 5px;
+          border-width: 1px;
+          border-style: dashed;
+
+          border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
+          border-radius: 5px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .control-item-l {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+
+            .round {
+              display: inline-block;
+              width: 3px;
+              height: 3px;
+              padding: 1px;
+              border-radius: 50%;
+              background-color: #3df6ff;
+              margin-right: 5px;
+              box-shadow: 0 0 1px 1px #64f7ff;
+            }
+          }
+
+          .control-item-r {
+            text-align: right;
+          }
+
+          .button-box {
+            position: relative;
+            padding: 5px;
+            border: 1px transparent solid;
+            background-clip: border-box;
+            border-radius: 5px;
+            margin-left: 8px;
+          }
+
+          .a-button {
+            pointer-events: auto;
+          }
+
+          &::v-deep .a-button--mini {
+            padding: 6px 10px;
+          }
+
+          &::v-deep .a-button--mini.is-round {
+            padding: 6px 10px;
+          }
+        }
+
+        .base-title {
+          width: calc(100% - 60px);
+          text-align: center;
+          color: #00d8ff;
+        }
+
+        .state-item {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+
+          flex-wrap: wrap;
+
+          .item-col {
+            width: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 5px;
+
+            .state-title {
+              color: #ffffffcc;
+              flex: 9;
+              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-title {
+            color: #7af5ff;
+            margin: 0 5px;
+          }
+
+          &:last-child {
+            margin-right: 0px;
+          }
+        }
+
+        .list-item {
+          padding: 0 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .item-data-key {
+            color: #ffffff99;
+          }
+        }
+
+        .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;
+          }
+        }
+      }
+
+
+      .left-box {
+        height: calc(100% - 50px);
+        overflow-x: hidden;
+        overflow-y: auto;
+        pointer-events: auto;
+        direction: rtl;
+
+        .item-l {
+          width: 335px;
+
+          .monitor-box {
+            background-color: #ffffff05;
+          }
+        }
+
+        .left-container {
+          direction: ltr;
+        }
+
+        .control-item {
+          height: 36px;
+        }
+      }
+    }
+  }
+
+  .playerBox {
+    z-index: 9999;
+    position: fixed;
+    // top: 200px;
+    right: 15px;
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow-y: auto;
+    margin: auto;
+    pointer-events: none;
+    display: flex;
+    justify-content: end;
+
+    &:deep(#LivePlayerBox) {
+      width: auto !important;
+      height: auto !important;
+      display: flex;
+      flex-flow: column;
+      justify-content: end;
+    }
+  }
+}
+
+.btn {
+  padding: 2px 12px;
+  position: relative;
+  border-radius: 2px;
+  color: #fff;
+  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);
+    }
+  }
+}
+
+.btn2 {
+  border: 1px solid #e91927;
+  margin-left: 10px;
 
-  :deep(.zxm-radio-wrapper) {
-    color: #fff !important;
+  &::before {
+    background-image: linear-gradient(#b02533, #a31f2e);
+  }
+
+  &:hover {
+    &::before {
+      background-image: linear-gradient(#bd2e3ccc, #a31f2ecc);
+    }
   }
+}
 </style>

src/views/vent/monitorManager/compressor/index copy.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="nitrogen-box">
+    <customHeader
+      :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+      :options="options"
+      @change="getSelectRow"
+      :optionValue="optionValue"
+    >
+      智能注氮管控系统
+    </customHeader>
+    <nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
+    <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'" />
+    <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'" />
+    <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'" />
+    <nitrogenAlarmHistory ref="handlerHistoryTable" v-if="activeKey == 'yfj_faultRecord'" />
+    <BottomMenu :nav-list="navList" @change="changeActive" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import nitrogenEcharts from './components/nitrogenEcharts.vue';
+  import nitrogenHistory from './components/nitrogenHistory.vue';
+  import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue';
+  import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import { useRouter } from 'vue-router';
+  import { navList, getMonitorComponent } from './nitrogen.data';
+  import { getTableList, systemList } from './nitrogen.api';
+
+  const nitrogenHome = getMonitorComponent();
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const { currentRoute } = useRouter();
+  const activeKey = ref('nitrogen_page');
+
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  //关联设备
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  const options = ref();
+  const optionValue = ref('');
+  const optionType = ref('');
+  const modalType = ref('');
+  const isRefresh = ref(true);
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+  }
+
+  function deviceChange(index) {
+    deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
+    isRefresh.value = false;
+    nextTick(() => {
+      isRefresh.value = true;
+    });
+  }
+
+  async function getDeviceList() {
+    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
+    const result = res.msgTxt;
+    if (!result || result.length < 1) return;
+    const deviceArr = <DeviceType[]>[];
+    result.forEach((item) => {
+      const data = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (item.type !== 'sys') {
+        deviceArr.unshift({
+          deviceType: item.type,
+          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+          datalist: data,
+        });
+      }
+    });
+    deviceList.value = deviceArr;
+    deviceActive.value = deviceArr[0].deviceType;
+    deviceChange(0);
+  }
+
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: 'sys_nitrogen', pagetype: 'normal' });
+    if (!options.value) {
+      // 初始时选择第一条数据
+      options.value = res.records || [];
+      if (!optionValue.value) {
+        getSelectRow(options.value[0]['id']);
+        getDeviceList();
+      }
+    }
+  }
+
+  // 切换检测数据
+  async function getSelectRow(deviceID) {
+    const currentData = options.value.find((item: any) => {
+      return item.id == deviceID;
+    });
+    optionValue.value = deviceID;
+    changeModalType(currentData);
+    getDeviceList();
+  }
+
+  // 获取模型类型
+  function changeModalType(currentData) {
+    optionType.value = currentData['strtype'];
+    if (currentData['strsystype'] === '1') {
+      // 地上
+      modalType.value = 'nitrogen';
+    } else if (currentData['strsystype'] === '2') {
+      // 地下
+      modalType.value = 'nitrogenUnderground';
+    } else {
+      // 默认是地下的注氮
+      modalType.value = 'nitrogenUnderground';
+    }
+  }
+
+  onMounted(async () => {
+    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
+    await getSysDataSource();
+    // getSelectRow(optionValue.value)
+  });
+
+  onUnmounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+  .nitrogen-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;
+
+    .header-icon {
+      margin-top: 45px;
+    }
+
+    .header-text {
+      position: fixed;
+      top: 18px;
+      color: #fff;
+      font-size: 24px;
+    }
+  }
+  .nitrogen-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    .bottom-btn-group {
+      display: flex;
+      position: fixed;
+      width: calc(100% - 400px);
+      height: 100px;
+      bottom: 10px;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+      .btn-item {
+        width: 200px;
+        height: 60px;
+        margin: 10px;
+        color: #fff;
+        cursor: pointer;
+        pointer-events: auto;
+      }
+    }
+    &:deep(.win) {
+      margin: 0 !important;
+    }
+  }
+</style>

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

@@ -0,0 +1,216 @@
+import { values } from 'xe-utils';
+
+export const monitorDataGroupArr = [[1, 2, 3]];
+export const prefix = ['ac', 'cqg',];
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export const preMonitorList = [
+  {
+    title: '运行时间',
+    code: 'ac_yxsj',
+    unit: 'h',
+    value: '',
+  },
+  {
+    title: '卸载压力',
+    code: 'ac_xzyl_set',
+    unit: 'bar',
+    child: [],
+    value: '',
+  },
+  {
+    title: '卸载停机时间',
+    code: 'ac_xztjsj',
+    unit: 'h',
+    child: [],
+    value: '',
+  },
+  {
+    title: '停机再启动时间',
+    code: 'ac_tjzqdsj',
+    unit: 'h',
+    child: [],
+    value: '',
+  },
+  {
+    title: '排气压力',
+    code: 'ac_pqyl',
+    unit: 'bar',
+    child: [],
+    value: '',
+  },
+  {
+    title: `排气温度`,
+    code: `ac_pqwd`,
+    unit: '℃',
+    child: [],
+    value: '',
+  },
+  {
+    title: `机组温度`,
+    code: `ac_jzwd`,
+    unit: '℃',
+    child: [],
+    value: '',
+  },
+  {
+    title: `主机温度`,
+    code: `ac_zjwd`,
+    unit: '℃',
+    child: [],
+    value: '',
+  },
+  {
+    title: '分离压力',
+    code: 'ac_flyl',
+    unit: 'bar',
+    child: [],
+    value: '',
+  },
+  {
+    title: '加载压力',
+    code: 'ac_jzyl_set',
+    unit: 'bar',
+    child: [],
+    value: '',
+  },
+  {
+    title: '加载时间',
+    code: 'ac_jzsj',
+    unit: 'h',
+    child: [],
+    value: '',
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `加载信号`,
+        code: `ac_jzxh`,
+        isWaring: false,
+      },
+    ],
+  },
+
+
+];
+export const cqgMonitorList = [];
+
+export const preFanMonitorData = [
+  {
+    title: `故障信号`,
+    code: `ac_gz`,
+    unit: 'signal',
+  },
+  {
+    title: `运行信号`,
+    code: `ac_yxxh`,
+    unit: 'signal',
+  },
+
+  {
+    title: `停止`,
+    code: `ac_stop`,
+    unit: 'warning',
+  },
+  {
+    title: `运行`,
+    code: `ac_start`,
+    unit: 'warning',
+  },
+  {
+    title: `油位`,
+    code: `ac_youwei`,
+    unit: 'warning',
+  },
+   {
+    title: '储气罐流量',
+    code: 'cqg_liuliang',
+    //unit: 'm³/min',
+    unit: '',
+    value: '0',
+  },
+  {
+    title: '储气罐压力',
+    code: 'cqg_yl',
+    unit: 'Pa',
+    value: '0',
+  },
+  {
+    title: '储气罐温度',
+    code: 'cqg_wd',
+    unit: '℃',
+    value: '0',
+  },
+ //{
+ //  title: '振动',
+ //  code: 'ac_zd',
+ //  unit: 'Hz',
+ //  value: '0',
+ //},
+ //{
+ //  title: '排气温度模拟输入',
+ //  code: 'ac_pqwd_mnsr',
+ //  unit: '℃',
+ //  value: '0',
+ //},
+  
+];
+export const totalData = [
+  {
+    title: '总出风管流量',
+    code: 'TotalOutPipeFlow',
+    unit: 'm³/h',
+    value: '8435.67',
+  },
+  {
+    title: '总出风管压力',
+    code: 'TotalOutPipePre',
+    unit: 'bar',
+    value: '1435.12',
+  },
+];
+export const totalData1 = [];
+export const btnSet = [
+  {
+    title: '上位启动',
+    code: 'PRE_HMIStart',
+    type: 'btn',
+  },
+  {
+    title: '上位复位',
+    code: 'PRE_HMIReset',
+    type: 'btn',
+  },
+  {
+    title: '上位停止',
+    code: 'PRE_HMIStop',
+    type: 'btn',
+  },
+];
+
+//export function getSysState(monitorData) {
+//  const stateArr = <State[]>[];
+//  monitorDataGroupArr.forEach((group) => {
+//    const stateObj = { isRun: false, fault: false };
+//    group.forEach((item) => {
+//      if (monitorData['PRE_CPR_LoadorUnload'.replace('PRE', 'PRE' + item)]) {
+//        stateObj.isRun = monitorData['PRE_CPR_LoadorUnload'.replace('PRE', 'PRE' + item)] == '1';
+//      }
+//
+//      if (
+//        monitorData['PRE_FaultSignal'.replace('PRE', 'PRE' + item)] ||
+//        monitorData['PRE_FaultSignal1'.replace('PRE', 'PRE' + item)] ||
+//        monitorData['PRE_MOT_PhaseAOverTemp'.replace('PRE', 'PRE' + item)] ||
+//        monitorData['PRE_MOT_PhaseBOverTemp'.replace('PRE', 'PRE' + item)] ||
+//        monitorData['PRE_MOT_PhaseCOverTemp'.replace('PRE', 'PRE' + item)]
+//      ) {
+//        stateObj.fault = true;
+//      }
+//    });
+//    stateArr.push(stateObj);
+//  });
+//  return stateArr;
+//}

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

@@ -253,7 +253,8 @@ export function getMonitorComponent() {
     default:
       // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_blt.vue'));
       // nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_bet.vue'));
-      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome.vue'));
+      //nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome.vue'));
+      nitrogenHome = defineAsyncComponent(() => import('./components/nitrogenHome_ln.vue'));
       return nitrogenHome;
   }
 }