更新

src/utils/threejs/useThree.ts

@@ -11,7 +11,8 @@ import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import { useModelStore } from '/@/store/modules/threejs';
-import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+// import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 
 // import * as dat from 'dat.gui';

src/utils/threejs/util.ts

@@ -4,7 +4,8 @@ import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
 import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+// import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 import gsap from 'gsap';
 import { useAppStore } from '/@/store/modules/app';

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

@@ -0,0 +1,444 @@
+{
+  "success": true,
+  "message": "",
+  "code": 200,
+  "result": {
+    "cmd": "monitordata",
+    "msgTxt": [
+      {
+        "datalist": [
+          {
+            "msgType": null,
+            "deviceID": "1705212847586627586",
+            "strname": "N12上302注氮泵房馈电2",
+            "strinstallpos": "N12上302注氮泵房馈电2",
+            "fsectarea": "null",
+            "stationname": "12s302kd馈电分站2",
+            "deviceType": "kd_12s302kd",
+            "typeName": "12s302kd系统",
+            "netStatus": 0,
+            "warnFlag": 0,
+            "warnLevel": null,
+            "warnLevel_str": null,
+            "warnTime": null,
+            "readTime": "2023-09-25 16:07:26",
+            "warnDes": "",
+            "frontGateOpenCtrl": null,
+            "rearGateOpenCtrl": null,
+            "readData": {
+              "Unbalance": "0",
+              "EndShortCutFault": "0",
+              "ShortCurrent": "1",
+              "OverloadFault": "0",
+              "PhaseSensitive": "0",
+              "sign": "0",
+              "SysVoltage": "1195",
+              "OverVoltageDelay": "1000",
+              "OnStatus": "0",
+              "SelectiveLeakage": "0",
+              "PhaseLossFault": "0",
+              "HMIReset": "0",
+              "OverVoltageMul": "1150",
+              "ShortCutFault": "0",
+              "UnbalanceDelay": "0",
+              "RatedCurrent": "150",
+              "GasLock": "0",
+              "LossVoltageFault": "0",
+              "LeakageProtect": "0",
+              "SwitchOff": "0",
+              "LeakageDelay": "0",
+              "ShortMul": "800",
+              "LeakageValue": "2200",
+              "StartQuickBreak": "1",
+              "RatedVoltage": "1140",
+              "UnderVoltageSet": "850",
+              "HMILeakageTest": "0",
+              "Ia": "0",
+              "Ib": "0",
+              "LeakageLock": "0",
+              "Ic": "0",
+              "isRun": "-2",
+              "Power": "0",
+              "PhaseSensitiveMul": "12"
+            },
+            "readDataDes": null,
+            "summaryHour": [],
+            "summaryDay": [],
+            "history": [],
+            "totalInfo": null,
+            "sign": null,
+            "cameras": [],
+            "links": []
+          },
+          {
+            "msgType": null,
+            "deviceID": "1705212719714881537",
+            "strname": "N12上302注氮泵房馈电1",
+            "strinstallpos": "N12上302注氮泵房馈电1",
+            "fsectarea": "null",
+            "stationname": "12s302kd馈电分站1",
+            "deviceType": "kd_12s302kd",
+            "typeName": "12s302kd系统",
+            "netStatus": 0,
+            "warnFlag": 0,
+            "warnLevel": null,
+            "warnLevel_str": null,
+            "warnTime": null,
+            "readTime": "2023-09-25 16:07:26",
+            "warnDes": "",
+            "frontGateOpenCtrl": null,
+            "rearGateOpenCtrl": null,
+            "readData": {
+              "Unbalance": "0",
+              "EndShortCutFault": "1",
+              "OverloadFault": "0",
+              "ShortCurrent": "1",
+              "PhaseSensitive": "0",
+              "sign": "0",
+              "SysVoltage": "1198",
+              "OverVoltageDelay": "1000",
+              "SelectiveLeakage": "0",
+              "PhaseLossFault": "0",
+              "HMIReset": "0",
+              "ShortCutFault": "0",
+              "OverVoltageMul": "1150",
+              "UnbalanceDelay": "0",
+              "SwitchOn": "0",
+              "RatedCurrent": "150",
+              "GasLock": "0",
+              "LossVoltageFault": "0",
+              "LeakageProtect": "0",
+              "SwitchOff": "0",
+              "LeakageDelay": "0",
+              "ShortMul": "800",
+              "LeakageValue": "2200",
+              "StartQuickBreak": "1",
+              "RatedVoltage": "1140",
+              "UnderVoltageSet": "850",
+              "HMILeakageTest": "0",
+              "Ia": "0",
+              "Ib": "0",
+              "LeakageLock": "0",
+              "Ic": "0",
+              "isRun": "-2",
+              "Power": "0",
+              "PhaseSensitiveMul": "11"
+            },
+            "readDataDes": null,
+            "summaryHour": [],
+            "summaryDay": [],
+            "history": [],
+            "totalInfo": null,
+            "sign": null,
+            "cameras": [],
+            "links": []
+          }
+        ],
+        "avginfo": {
+          "warnFlag": {
+            "value": 0
+          }
+        },
+        "typeName": "12s302kd系统",
+        "type": "kd_12s302kd"
+      },
+      {
+        "datalist": [
+          {
+            "msgType": null,
+            "deviceID": "1705212847586627587",
+            "strname": "N12上302注氮泵房移变",
+            "strinstallpos": "N12上302注氮泵房移变",
+            "fsectarea": "null",
+            "stationname": "12s302kd移变分站",
+            "deviceType": "yb_12s302yb",
+            "typeName": null,
+            "netStatus": 0,
+            "warnFlag": 0,
+            "warnLevel": null,
+            "warnLevel_str": null,
+            "warnTime": null,
+            "readTime": "2023-09-25 16:09:03",
+            "warnDes": "",
+            "frontGateOpenCtrl": null,
+            "rearGateOpenCtrl": null,
+            "readData": {
+              "LowVoltSwitch_RunState": "255",
+              "sign": "0",
+              "HighVoltSwitch_ZeroSeqVoltageEnable": "0",
+              "HighVoltSwitch_DifferentialEnable": "0",
+              "HighVoltSwitch_GasLockEnable": "0",
+              "HighVoltSwitch_HMIElectricalReset": "0",
+              "LowVoltSwitch_LowVoltageEnable": "0",
+              "HighVoltSwitch_OverVoltageEnable": "0",
+              "HighVoltSwitch_PhaseLossEnable": "0",
+              "HighVoltSwitch_SwitchOnRe": "1",
+              "HighVoltSwitch_WindPowerLockEnable": "0",
+              "LowVoltSwitch_HMIReset": "0",
+              "HighVoltSwitch_LossVoltageEnable": "0",
+              "HighVoltSwitch_HMISwitchOff": "0",
+              "HighVoltSwitch_OverCurrentEnable": "0",
+              "HighVoltSwitch_RatedCurrent": "100",
+              "LowVoltSwitch_ShortCurrentSet": "2000",
+              "HighVoltSwitch_InterlockEnable1": "0",
+              "LowVoltSwitch_LeakageFaultEnable": "0",
+              "HighVoltSwitch_ShortEnable": "0",
+              "HighVoltSwitch_InterlockEnable2": "0",
+              "LowVoltSwitch_OverCurrentEnable": "0",
+              "LowVoltSwitch_OverVoltageEnable": "0",
+              "LowVoltSwitch_ShortCurrent": "2000",
+              "HighVoltSwitch_HMIReset": "0",
+              "HighVoltSwitch_CtrlMode": "1",
+              "LowVoltSwitch_RatedCurrent": "500",
+              "HighVoltSwitch_ElectricalInterlockEnable": "0",
+              "LowVoltSwitch_OverCurrentSet": "400",
+              "HighVoltSwitch_Current": "0",
+              "HighVoltSwitch_ChamberInterlockEnable": "0",
+              "LowVoltSwitch_LeakageResistance": "999",
+              "HighVoltSwitch_UnbalanceEnable": "0",
+              "LowVoltSwitch_ShortEnable": "0",
+              "LowVoltSwitch_Current": "0",
+              "LowVoltSwitch_OverCurrent": "400",
+              "HighVoltSwitch_EarthEnable": "0",
+              "HighVoltSwitch_SysVoltage": "10190",
+              "LowVoltSwitch_UnbalanceEnable": "0",
+              "HighVoltSwitch_LowVoltageEnable": "0",
+              "HighVoltSwitch_ShortCurrentSet": "240",
+              "HighVoltSwitch_OverCurrentSet": "40",
+              "HighVoltSwitch_ZeroSeqCurrentEnable": "0",
+              "LowVoltSwitch_HMILeakageTest": "0",
+              "HighVoltSwitch_OverCurrent": "40",
+              "HighVoltSwitch_ShortCurrent": "240",
+              "HighVoltSwitch_Temp": "39",
+              "HighVoltSwitch_OverTempEnable": "0",
+              "HighVoltSwitch_KWHH": "55",
+              "HighVoltSwitch_KWHL": "-4232",
+              "isRun": "-2",
+              "HighVoltSwitch_RunState": "255",
+              "LowVoltSwitch_SysVoltage": "1133",
+              "HighVoltSwitch_HMISwitchOn": "0"
+            },
+            "readDataDes": null,
+            "summaryHour": [],
+            "summaryDay": [],
+            "history": [],
+            "totalInfo": null,
+            "sign": null,
+            "cameras": [],
+            "links": []
+          }
+        ],
+        "avginfo": {
+          "warnFlag": {
+            "value": 0
+          }
+        },
+        "type": "yb_12s302yb"
+      },
+      {
+        "datalist": [
+          {
+            "msgType": null,
+            "deviceID": "1705212847586627589",
+            "strname": "N12上302注氮机2",
+            "strinstallpos": "N12上302注氮机2",
+            "fsectarea": "null",
+            "stationname": "12s302kd制氮分站2",
+            "deviceType": "zd_12s302zd",
+            "typeName": null,
+            "netStatus": 0,
+            "warnFlag": 0,
+            "warnLevel": null,
+            "warnLevel_str": null,
+            "warnTime": null,
+            "readTime": "2023-09-25 16:07:04",
+            "warnDes": "",
+            "frontGateOpenCtrl": null,
+            "rearGateOpenCtrl": null,
+            "readData": {
+              "RunTime4": "2000",
+              "RunTime3": "1770",
+              "RunTime2": "36",
+              "RunTime1": "7",
+              "sign": "0",
+              "AirCompressor_ShortCutFaul": "0",
+              "HMIReset": "0",
+              "AirCompressor_Status": "1",
+              "AirCompressor_OilGasBarrel_HighPressureFault": "0",
+              "AirCompressor_PhaseFailureFault1": "0",
+              "AirCompressor_OverVoltageFault": "0",
+              "AirCompressor_TotalFailureSignal1": "0",
+              "AirCompressor_PhaseFailureFault": "0",
+              "InputFlux": "0.0",
+              "AirCompressor_LoadTime": "762",
+              "AirCompressor_Fan_Current": "0",
+              "FluxTotal1": "8601.859",
+              "FluxTotal2": "96.0",
+              "AirCompressor_OilGasBarrel_SeparatorFault": "0",
+              "AirCompressor_TotalFailureSignal": "0",
+              "AirCompressor_RunTime": "1",
+              "AirCompressor_MainMotor_OverTempFault": "0",
+              "AirCompressor_PhaseSequenceFault1": "0",
+              "AirCompressor_LoadorUnload": "0",
+              "AirCompressor_OilPressureLowFault": "0",
+              "AirCompressor_ExhaustTemp": "47",
+              "HMIStartStop": "0",
+              "AirCompressor_MainMotor_Current": "0",
+              "AirCompressor_ExhaustPre": "0",
+              "AirCompressor_CtrlMode": "0",
+              "AirCompressor_UnbalanceFault": "0",
+              "AirCompressor_NoWaterFault": "0",
+              "AirCompressor_MainMotor_OverloadFault": "0",
+              "AirCompressor_OilGasBarrel_OverTempAlarm": "0",
+              "NitrogenPurity": "88.08513",
+              "AirCompressor_LowVoltageFault": "0",
+              "AirCompressor_Fan_OverloadFault": "0",
+              "AirCompressor_LeakageLock": "0",
+              "AirCompressor_PowerFault": "0",
+              "AirCompressor_ExhaustPreHighFault": "0",
+              "AirCompressor_SysVoltage": "1152",
+              "AirCompressor_CloseFail": "0",
+              "AirCompressor_ExhaustTemp1": "0",
+              "PreMembraneTemperature": "26.85",
+              "AirCompressor_OilGasBarrel_FilterBlockageFault": "0",
+              "AirCompressor_OpenFail": "0",
+              "AirCompressor_OilGasBarrel_OverTempAlarm1": "0",
+              "isRun": "-2",
+              "AirCompressor_PhaseSequenceFault": "0"
+            },
+            "readDataDes": null,
+            "summaryHour": [],
+            "summaryDay": [],
+            "history": [],
+            "totalInfo": null,
+            "sign": null,
+            "cameras": [],
+            "links": []
+          },
+          {
+            "msgType": null,
+            "deviceID": "1705212847586627588",
+            "strname": "N12上302注氮机1",
+            "strinstallpos": "N12上302注氮机1",
+            "fsectarea": "null",
+            "stationname": "12s302kd制氮分站1",
+            "deviceType": "zd_12s302zd",
+            "typeName": null,
+            "netStatus": 0,
+            "warnFlag": 0,
+            "warnLevel": null,
+            "warnLevel_str": null,
+            "warnTime": null,
+            "readTime": "2023-09-25 16:08:44",
+            "warnDes": "",
+            "frontGateOpenCtrl": null,
+            "rearGateOpenCtrl": null,
+            "readData": {
+              "RunTime4": "2000",
+              "RunTime3": "72",
+              "RunTime2": "28",
+              "RunTime1": "30",
+              "sign": "0",
+              "AirCompressor_ShortCutFaul": "0",
+              "HMIReset": "0",
+              "AirCompressor_Status": "0",
+              "AirCompressor_OilGasBarrel_HighPressureFault": "0",
+              "AirCompressor_PhaseFailureFault1": "0",
+              "AirCompressor_OverVoltageFault": "0",
+              "AirCompressor_TotalFailureSignal1": "0",
+              "AirCompressor_PhaseFailureFault": "0",
+              "InputFlux": "0.0",
+              "AirCompressor_LoadTime": "1592",
+              "AirCompressor_Fan_Current": "0",
+              "FluxTotal1": "0.0",
+              "FluxTotal2": "145.0",
+              "AirCompressor_OilGasBarrel_SeparatorFault": "0",
+              "AirCompressor_TotalFailureSignal": "0",
+              "AirCompressor_RunTime": "1",
+              "AirCompressor_MainMotor_OverTempFault": "0",
+              "AirCompressor_PhaseSequenceFault1": "0",
+              "AirCompressor_LoadorUnload": "0",
+              "AirCompressor_OilPressureLowFault": "0",
+              "AirCompressor_ExhaustTemp": "53",
+              "HMIStartStop": "0",
+              "AirCompressor_MainMotor_Current": "0",
+              "AirCompressor_ExhaustPre": "0",
+              "AirCompressor_CtrlMode": "0",
+              "AirCompressor_UnbalanceFault": "0",
+              "AirCompressor_NoWaterFault": "0",
+              "AirCompressor_MainMotor_OverloadFault": "0",
+              "AirCompressor_OilGasBarrel_OverTempAlarm": "0",
+              "NitrogenPurity": "0.0",
+              "AirCompressor_LowVoltageFault": "0",
+              "AirCompressor_Fan_OverloadFault": "0",
+              "AirCompressor_LeakageLock": "0",
+              "AirCompressor_PowerFault": "0",
+              "AirCompressor_ExhaustPreHighFault": "0",
+              "AirCompressor_SysVoltage": "1152",
+              "AirCompressor_CloseFail": "0",
+              "AirCompressor_ExhaustTemp1": "0",
+              "PreMembraneTemperature": "0.0",
+              "AirCompressor_OilGasBarrel_FilterBlockageFault": "0",
+              "AirCompressor_OpenFail": "0",
+              "AirCompressor_OilGasBarrel_OverTempAlarm1": "0",
+              "isRun": "-2",
+              "AirCompressor_PhaseSequenceFault": "0"
+            },
+            "readDataDes": null,
+            "summaryHour": [],
+            "summaryDay": [],
+            "history": [],
+            "totalInfo": null,
+            "sign": null,
+            "cameras": [],
+            "links": []
+          }
+        ],
+        "avginfo": {
+          "warnFlag": {
+            "value": 0
+          }
+        },
+        "type": "zd_12s302zd"
+      },
+      {
+        "datalist": [
+          {
+            "msgType": null,
+            "deviceID": "1704756343960027137",
+            "strname": "N12上302注氮系统",
+            "strinstallpos": "N12上302注氮系统",
+            "fsectarea": "null",
+            "stationname": null,
+            "deviceType": "sys_nitrogen",
+            "typeName": "注氮",
+            "netStatus": 0,
+            "warnFlag": 0,
+            "warnLevel": null,
+            "warnLevel_str": null,
+            "warnTime": null,
+            "readTime": "2023-09-25 16:36:48",
+            "warnDes": "",
+            "frontGateOpenCtrl": null,
+            "rearGateOpenCtrl": null,
+            "readData": {
+              "sign": "0",
+              "isRun": "-2"
+            },
+            "readDataDes": null,
+            "summaryHour": [],
+            "summaryDay": [],
+            "history": [],
+            "totalInfo": null,
+            "sign": null,
+            "cameras": [],
+            "links": []
+          }
+        ],
+        "typeName": "综合监测系统",
+        "type": "sys"
+      }
+    ]
+  },
+  "timestamp": 1695631027239
+}

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

@@ -0,0 +1,673 @@
+<template>
+    <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>
+          <div class="monitor-item">
+            <span class="monitor-title">注氮压力:</span>
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenPressure'] ?
+              monitorData[groupNum - 1]['nitrogenPressure'] : '-' }}</span><span class="unit">Mpa</span></span>
+          </div>
+          <div class="monitor-item">
+            <span class="monitor-title">氮气实时流量:</span>
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['instantaneousFlow'] ?
+              monitorData[groupNum - 1]['instantaneousFlow'] : '-' }}</span><span class="unit">m³/h</span></span>
+          </div>
+          <div class="monitor-item">
+            <span class="monitor-title">氮气浓度:</span>
+            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenContent'] ?
+              monitorData[groupNum - 1]['nitrogenContent'] : '-' }}</span><span class="unit">%</span></span>
+          </div>
+          <div class="signal-item">
+            <div class="signal"><span class="monitor-title">运行信号</span><span
+                :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressRunSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressRunSigF1'] }"></span>
+            </div>
+            <div class="signal"><span class="monitor-title">加载信号</span><span
+                :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressLoadSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressLoadSigF1'] }"></span>
+            </div>
+          </div>
+        </fourBorderBg>
+      </div>
+    </div>
+    <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+    <div class="nitrogen-home">
+      <div class="nitrogen-container">
+        <div class="top-box">
+          <!-- 左边监测数据 -->
+          <div class="lr-box left-box">
+            <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="parameter-title group-parameter-title"><SvgIcon class="icon" size="38" name="device-group-paramer"/><span>机组参数</span></div>
+                    <div class="state-item" v-for="(data, index) in groupParameterData" :key="index">
+                      <div class="item-col">
+                        <span class="state-title">{{ Object.values(data)[0] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
+                      </div>
+                      <div class="item-col" v-if="Object.keys(data)[1]">
+                        <span class="state-title">{{ Object.values(data)[1] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="monitor-box">
+                    <div class="parameter-title device-parameter-title"><SvgIcon class="icon" size="32" name="device-paramer"/><span>电机数据</span></div>
+                    <div class="state-item" v-for="(data, index) in deviceParameterData" :key="index">
+                      <div class="item-col">
+                        <span class="state-title">{{ Object.values(data)[0] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
+                      </div>
+                      <div class="item-col" v-if="Object.keys(data)[1]">
+                        <span class="state-title">{{ Object.values(data)[1] }} :</span>
+                        <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
+                          >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </ventBox1>
+            </div>
+          </div>
+          <!-- 右边控制状态 -->
+          <div class="lr-box right-box">
+            <ventBox1>
+              <template #title>
+                <div>远程控制</div>
+              </template>
+              <template #container>
+                <div class="control-group">
+                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+                    <div class="control-item-title">{{ zdjs[groupNum - 1] }}</div>
+                    <div class="control-item-state">
+                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
+                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
+                        @change="handlerDevice(airCompressorState[groupNum - 1])">
+                      </a-switch>
+                    </div>
+                  </div>
+                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+                    <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
+                    <div class="control-item-state">
+                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
+                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
+                        @change="handlerDevice(airCompressorState[groupNum - 1])">
+                      </a-switch>
+                    </div>
+                  </div>
+                  <div class="control-item">
+                    <div class="control-item-title">是否开启联动</div>
+                    <div class="control-item-state">
+                      <a-radio v-model:checked="isLink">开启</a-radio>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </ventBox1>
+            <ventBox1 class="vent-margin-t-10">
+              <template #title>
+                <div>设备实时监测曲线</div>
+              </template>
+              <template #container >
+                <BarAndLineCustom xAxisPropType="readTime" :chartData="monitorData" height="240px" :propTypeArr="['flowRate']" :option="zhudanOption" />
+              </template>
+            </ventBox1>
+            <div class="vent-margin-t-10">
+              <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+  </template>
+  <script lang="ts" setup name="nitrogenHome">
+  import { onMounted, onUnmounted, ref, watch, reactive } from 'vue'
+  import ventBox1 from '/@/components/vent/ventBox1.vue'
+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue'
+  import { mountedThree, destroy } from '../nitrogen.threejs'
+  import { list } from '../nitrogen.api'
+  import { SvgIcon } from '/@/components/Icon'
+  import LivePlayer from '@liveqing/liveplayer-v3';
+  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
+  import { zhudanOption } from '../nitrogen.data.ts'
+  
+  const loading = ref(true)
+  const isLink = ref(true)
+  
+  const zdjs = ['1号制氮机', '2号制氮机', '3号制氮机', '4号制氮机'];
+  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 monitorDataGroupNum = ref(0);
+  
+  const airCompressorState = reactive([
+    {
+      id: '',
+      compressRunSigF1: false,
+      controlModel: false
+    },
+    {
+      id: '',
+      compressRunSigF1: false,
+      controlModel: false
+    },
+    {
+      id: '',
+      compressRunSigF1: false,
+      controlModel: false
+    },
+    {
+      id: '',
+      compressRunSigF1: false,
+      controlModel: false
+    }
+  ]);
+  
+  const groupParameterData = [
+    {
+      cumulativeFlow: '累计流量(m³)',
+      centerTemperature: '加热器中心温度',
+    },
+    {
+      outletTemperature: '加热器出口温度',
+    },
+  ];
+  const deviceParameterData = [
+    {
+      Ia: 'A项电流(A)',
+      Ib: 'B项电流(A)',
+    },
+    {
+      Ic: 'c项电流(A)',
+      Vab: 'AB项间电压(V)',
+    },
+    {
+      Vac: 'AC项间电压(V)',
+      Vbc: 'BC项间电压(V)',
+    },
+  ];
+  
+  const monitorData = ref(new Array(3).fill({
+    strName: '空压机',
+    cumulativeFlow: '-',
+    centerTemperature: '-',
+    outletTemperature: '-',
+    Ia: '-',
+    Ib: '-',
+    Ic: '-',
+    Vab: '-',
+    Vac: '-',
+    Vbc: '-',
+    compressGroupName: '',
+    compressExhaustPressF1: '-',
+    compressSeparatePressF1: '-',
+    compressHostTempF1: '-',
+    compressCrewTempF1: '-',
+    compressRunTimeF1: '-',
+    controlModel: 'LOC'
+  }));
+  
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(async () => {
+        await getDataSource();
+        if (timer) {
+          timer = null;
+        }
+        await getMonitor();
+      }, flag ? 0 : 1000);
+    }
+  };
+  
+  async function getDataSource() {
+    const res = await list({ devicetype: 'nitrogen', pagetype: 'normal' });
+    const dataSource = res.msgTxt[0].datalist || [];
+    monitorData.value = dataSource.filter((data) => {
+      const item = data.readData;
+      Object.assign(data, item);
+      return item
+    });
+    console.log(monitorData,'000')
+    monitorDataGroupNum.value = monitorData.value.length
+    loading.value = false
+  };
+  
+  function handlerDevice(data) {
+    // if (data.length < 1) return
+    // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
+    //   if (res.success) {
+    //     message.success('操作成功')
+    //   } else {
+    //     message.warning(data.msg)
+    //   }
+    // })
+  };
+  function resetDevice(data) {
+  
+  }
+  
+  function handlerControlModel(data) {
+  
+  }
+  
+  watch(monitorDataGroupNum, (newVal) => {
+    if (newVal) {
+      destroy()
+      mountedThree(newVal)
+    }
+  })
+  onMounted(async () => {
+    await getMonitor(true)
+  })
+  
+  onUnmounted(() => {
+    destroy();
+    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: 99;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    top: 60px;
+    .nitrogen-container {
+      width: 100%;
+      height: calc(100%);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 100px;
+  
+      .top-box {
+        width: 100%;
+        padding: 10px;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+  
+        .lr-box {
+          height: fit-content;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          overflow: hidden;
+          z-index: 9999;
+          pointer-events: auto;
+        }
+  
+        .item {
+          width: 335px;
+          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;
+            }
+          }
+  
+          .state-item {
+            display: flex;
+            flex-direction: row;
+            padding: 5px;
+  
+            .item-col {
+              width: calc(50% - 5px);
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding-right: 4px;
+              background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
+              &:first-child{
+                margin-right: 10px;
+              }
+  
+              .state-title {
+                color: #ffffffcc;
+                flex: 9;
+                font-size: 14px;
+              }
+  
+              .state-val {
+                flex: 1;
+                color: #00eefffe;
+                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: 330px;
+          .control-group{
+            display: flex;
+            // justify-content: space-around;
+            flex-wrap: wrap;
+            .control-item {
+              
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              padding: 0 4px;
+              .control-item-title{
+                color: #A6DCE9;
+                position: relative;
+                top: 5px;
+              }
+              .control-item-state{
+                width: 94px;
+                height: 47px;
+                background: url('/@/assets/images/vent/control-switch-bg.png');
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+              }
+            
+              .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;
+              }
+            }
+  
+          }
+        }
+  
+        .left-box {
+          width: 365px;
+          
+        }
+      }
+      &: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;
+      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/index.vue

@@ -2,7 +2,8 @@
  
   <div class="nitrogen-box">
     <customHeader>智能注氮管控系统</customHeader>
-    <nitrogenHome v-if="btnActive == 'nitrogen_page'" />
+    <!-- <nitrogenHome v-if="btnActive == 'nitrogen_page'" /> -->
+    <nitrogenHome1 v-if="btnActive == 'nitrogen_page1'" />
     <nitrogenEcharts v-if="btnActive == 'yfj_monitor_echarts'"/>
     <nitrogenHistory v-if="btnActive == 'yfj_history'"/>
     <nitrogenHandleHistory v-if="btnActive == 'yfj_handler_history'"/>
@@ -14,18 +15,19 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import customHeader from '/@/views/vent/comment/components/customHeader.vue';
-import nitrogenHome from './components/nitrogenHome.vue'
+// import nitrogenHome from './components/nitrogenHome.vue'
+import nitrogenHome1 from './components/nitrogenHome1.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';
 const loading = ref(true)
-const btnActive = ref('nitrogen_page')
+const btnActive = ref('nitrogen_page1')
 const navList = ref([
   {
     title: '监控界面',
-    pathName: 'nitrogen_page',
+    pathName: 'nitrogen_page1',
     isHover: true
   },
   {