[Feat 0000]添加东泰永聚注氮页面数据列表渲染

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

@@ -63,55 +63,36 @@
       <div class="top-box">
         <!-- 左边监测数据 -->
         <div class="lr-box left-box">
-          <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+          <div class="item item-l"  v-for="(prefixItem, i) in leftHalfZDMonitorData" :key="i">
             <ventBox1>
               <template #title>
-                <div>{{ monitorData[groupNum - 1]['strname'] }}</div>
+                <div>{{ MonitorTitleDic[prefixItem.prefix] || prefixItem.prefix }}</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 class="state-item" v-for="(monitorItem, j) in prefixItem.valuelist" :key="j">
+                    <div class="item-col" >
+                      <span class="state-title">{{ monitorItem.label}}</span>
+                      <span class="state-val">{{ formatValue(monitorItem.val) || monitorItem.val }}</span>
+                      <span class="state-unit">{{ monitorItem.unit}}</span>
                     </div>
                   </div>
                 </div>
+              </template>
+            </ventBox1>
+          </div>
+          <div class="item item-l"  v-for="(prefixItem, i) in leftHalfKYMonitorData" :key="i">
+            <ventBox1>
+              <template #title>
+                <div>{{ MonitorTitleDic[prefixItem.prefix] || prefixItem.prefix }}</div>
+              </template>
+              <template #container>
                 <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 class="state-item" v-for="(monitorItem, j) in prefixItem.valuelist" :key="j">
+                    <div class="item-col" >
+                      <span class="state-title">{{ monitorItem.label}}</span>
+                      <span class="state-val">{{ formatValue(monitorItem.val) || monitorItem.val }}</span>
+                      <span class="state-unit">{{ monitorItem.unit}}</span>
                     </div>
                   </div>
                 </div>
@@ -121,57 +102,41 @@
         </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">{{ monitorData[groupNum - 1]['strname'] }}</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])"
-                    />
-                  </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])"
-                    />
+          <div class="item item-r"  v-for="(prefixItem, i) in rightHalfZDMonitorData" :key="i">
+            <ventBox1>
+              <template #title>
+                <div>{{ MonitorTitleDic[prefixItem.prefix] || prefixItem.prefix }}</div>
+              </template>
+              <template #container>
+                <div class="monitor-box">
+                  <div class="state-item" v-for="(monitorItem, j) in prefixItem.valuelist" :key="j">
+                    <div class="item-col" >
+                      <span class="state-title">{{ monitorItem.label}}</span>
+                      <span class="state-val">{{  formatValue(monitorItem.val) || monitorItem.val }}</span>
+                      <span class="state-unit">{{ monitorItem.unit}}</span>
+                    </div>
                   </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>
+              </template>
+            </ventBox1>
+          </div>
+          <div class="item item-r"  v-for="(prefixItem, i) in rightHalfKYMonitorData" :key="i">
+            <ventBox1>
+              <template #title>
+                <div>{{ MonitorTitleDic[prefixItem.prefix] || prefixItem.prefix }}</div>
+              </template>
+              <template #container>
+                <div class="monitor-box">
+                  <div class="state-item" v-for="(monitorItem, j) in prefixItem.valuelist" :key="j">
+                    <div class="item-col" >
+                      <span class="state-title">{{ monitorItem.label}}</span>
+                      <span class="state-val">{{  formatValue(monitorItem.val) || monitorItem.val }}</span>
+                      <span class="state-unit">{{ monitorItem.unit}}</span>
+                    </div>
                   </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 /> -->
+              </template>
+            </ventBox1>
           </div>
         </div>
       </div>
@@ -179,15 +144,12 @@
   </div>
 </template>
 <script lang="ts" setup name="nitrogenHome">
-  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick } from 'vue';
+  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
   import { mountedThree, destroy, setModelType } 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';
+  import { ZDOptionList, KYOptionList} from '../nitrogen.data.dtyj.ts';
 
   const props = defineProps({
     deviceId: {
@@ -200,12 +162,6 @@
     },
   });
   const loading = ref(true);
-  const isLink = ref(true);
-  const isRefresh = 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 ''
@@ -213,52 +169,6 @@
   const monitorNetStatus = ref(0);
   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(4).fill({
@@ -281,7 +191,90 @@
       controlModel: 'LOC',
     })
   );
+  // 模块标题字典
+  const MonitorTitleDic = {
+    ZD1: '1号制氮机',
+    ZD2: '2号制氮机',
+    ZD3: '3号制氮机',
+    ZD4: '4号制氮机',
+    KY1: '1号空压机',
+    KY2: '2号空压机',
+    KY3: '3号空压机',
+    KY4: '4号空压机',
+  };
+  // 制氮机数据项
+  const ZDMonitorData = ref<{ prefix: string; valuelist: { label: string; key: string; val: string; unit: string }[] }[]>([])
+  // 初始化 ZDMonitorData，按照 prefix 分类
+  ZDOptionList.prefix.forEach(prefix => {
+    const valuelist: { label: string; key: string; val: string; unit: string }[] = [];
+    ZDOptionList.item.forEach(item => {
+      if(item.isShow) {
+        valuelist.push({
+          label: item.label,
+          key: `ZD.ZD01.SHARE.ZD_${prefix}_${item.ident}_${item.prop}`,
+          val: '-',
+          unit: item.unit || '-'
+        });
+      }
+
+    });
+    ZDMonitorData.value.push({
+      prefix: prefix,
+      valuelist: valuelist
+    });
+  });
+    // 计算属性，用于获取 ZDMonitorData 的前半部分
+  const leftHalfZDMonitorData = computed(() => {
+    const middle = Math.floor(ZDMonitorData.value.length / 2);
+    return ZDMonitorData.value.slice(0, middle);
+  });
+
+  // 计算属性，用于获取 ZDMonitorData 的后半部分
+  const rightHalfZDMonitorData = computed(() => {
+    const middle = Math.floor(ZDMonitorData.value.length / 2);
+    return ZDMonitorData.value.slice(middle);
+  });
+
+  // 空压机数据项
+  const KYMonitorData = ref<{ prefix: string; valuelist: { label: string; key: string; val: string; unit: string }[] }[]>([])
+  // 初始化 KYMonitorData，按照 prefix 分类
+  KYOptionList.prefix.forEach(prefix => {
+    const valuelist: { label: string; key: string; val: string; unit: string }[] = [];
+    KYOptionList.item.forEach(item => {
+      if(item.isShow) {
+        valuelist.push({
+          label: item.label,
+          key: `ZD.ZD01.SHARE.ZD_${prefix}_${item.ident}_${item.prop}`,
+          val: '-',
+          unit: item.unit || '-'
+        });
+      }
+
+    });
+    KYMonitorData.value.push({
+      prefix: prefix,
+      valuelist: valuelist
+    });
+  });
+  // 计算属性，用于获取 ZDMonitorData 的前半部分
+  const leftHalfKYMonitorData = computed(() => {
+    const middle = Math.floor(KYMonitorData.value.length / 2);
+    return KYMonitorData.value.slice(0, middle);
+  });
 
+  // 计算属性，用于获取 ZDMonitorData 的后半部分
+  const rightHalfKYMonitorData = computed(() => {
+    const middle = Math.floor(KYMonitorData.value.length / 2);
+    return KYMonitorData.value.slice(middle);
+  });  
+// 格式化数值的方法
+const formatValue = (value: string) => {
+  const num = parseFloat(value);
+  if (!isNaN(num) && value.includes('.')) {
+    return num.toFixed(2);
+  }
+  return value;
+};
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   async function getMonitor(flag?) {
@@ -313,27 +306,28 @@
             netStatus = 1;
           }
           const item = data.readData;
+          // 将接口获取到的数据赋值给制氮机数据列表和空压机数据列表
+          ZDMonitorData.value.forEach(prefixItem => {
+            prefixItem.valuelist.forEach(valItem => {
+              valItem.val = item[valItem.key] || '-';
+            });
+            
+          });
+          KYMonitorData.value.forEach(prefixItem => {
+            prefixItem.valuelist.forEach(valItem => {
+              valItem.val = item[valItem.key] || '-';
+            });
+            
+          });
           return Object.assign(data, item);
         });
         monitorNetStatus.value = netStatus;
       }
     });
     monitorDataGroupNum.value = monitorData.value.length;
+ 
   }
 
-  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, loading], ([newMonitorDataGroupNum, newLoading]) => {
     debugger;
@@ -460,14 +454,12 @@
           .state-item {
             display: flex;
             flex-direction: row;
-            padding: 5px;
 
             .item-col {
-              width: calc(50% - 5px);
+              width: 100%;
               display: flex;
               justify-content: center;
               align-items: center;
-              padding-right: 4px;
               background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
               &:first-child {
                 margin-right: 10px;
@@ -537,104 +529,17 @@
           }
         }
 
-        .item-l {
+        .item-l, .item-r {
           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;
-          margin-top: 50px;
-          .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;
-              }
-            }
+              display: grid;
+              grid-template-columns: 1fr 1fr; /* 两列布局 */
+              gap: 10px; /* 间距 */
           }
         }
 
-        .left-box {
+        .left-box, .right-box {
           width: 365px;
           margin-top: 80px;
         }

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

@@ -0,0 +1,282 @@
+// 制氮机
+export const ZDOptionList = {
+  // ZD + prefix + item.ident + item.prop
+  'prefix': [
+    'ZD1',
+    'ZD2',
+    'ZD3',
+    'ZD4'
+  ],
+  'item': [
+    {
+      'label': '氮气纯度',
+      'ident':'AI',
+      'prop': 'CD',
+      'unit': '%',
+      'isShow': true
+    },
+    {
+      'label': '氮气流量',
+      'ident':'AI',
+      'prop': 'LL',
+      'unit': 'm³/h',
+      'isShow': true
+    },
+    {
+      'label': '流量累计',
+      'ident':'AI',
+      'prop': 'LLj',
+      'unit': 'm³',
+      'isShow': true
+    },
+    {
+      'label': '氮气温度',
+      'ident':'AI',
+      'prop': 'PT',
+      'unit': '℃',
+      'isShow': true
+    },
+    {
+      'label': '氮气压力',
+      'ident':'AI',
+      'prop': 'YL',
+      'unit': 'Mpa',
+      'isShow': true
+    },
+    {
+      'label': '冻干机备妥',
+      'ident':'DI',
+      'prop': 'DGready',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '冻干机运行',
+      'ident':'DI',
+      'prop': 'DGrun',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '冻干机停止',
+      'ident':'DI',
+      'prop': 'DGstop',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机远方',
+      'ident':'DI',
+      'prop': 'DGyk',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机报警',
+      'ident':'DI',
+      'prop': 'ZDalarm',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机故障',
+      'ident':'DI',
+      'prop': 'ZDfault',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机备妥',
+      'ident':'DI',
+      'prop': 'ZDready',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机运行',
+      'ident':'DI',
+      'prop': 'ZDrun',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机停止',
+      'ident':'DI',
+      'prop': 'ZDstop',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机远方',
+      'ident':'DI',
+      'prop': 'ZDyk',
+      'unit': '-',
+      'isShow': false
+    },
+    {
+      'label': '制氮机通讯',
+      'ident':'GZ',
+      'prop': 'ZDtx',
+      'unit': '-',
+      'isShow': false
+    },
+  ]
+};
+
+// 空压机
+
+
+export const KYOptionList = {
+  // ZD + prefix + item.ident + item.prop
+  'prefix': [
+    'KY1',
+    'KY2',
+    'KY3',
+    'KY4'
+  ],
+  'item': [
+    {
+      'label': '单次加载时间h',
+      'ident':'',
+      'prop': 'LOATh',
+      'unit': 'H',
+      'isShow': false
+    },
+    {
+      'label': '单次加载时间m',
+      'ident':'',
+      'prop': 'LOATm',
+      'unit': 'M',
+      'isShow': false
+    },
+    {
+      'label': '单次加载时间s',
+      'ident':'',
+      'prop': 'LOATs',
+      'unit': 'S',
+      'isShow': false
+    },
+    {
+      'label': '单次运行时间h',
+      'ident':'',
+      'prop': 'RUNh',
+      'unit': 'H',
+      'isShow': false
+    },
+    {
+      'label': '单次运行时间m',
+      'ident':'',
+      'prop': 'RUNm',
+      'unit': 'M',
+      'isShow': false
+    },
+    {
+      'label': '单次运行时间s',
+      'ident':'',
+      'prop': 'RUNs',
+      'unit': 'S',
+      'isShow': false
+    },
+    {
+      'label': '运行电流',
+      'ident':'AI',
+      'prop': 'A',
+      'unit': 'A',
+      'isShow': false
+    },
+    {
+      'label': '风扇电流',
+      'ident':'AI',
+      'prop': 'FSa',
+      'unit': 'A',
+      'isShow': false
+    },
+    {
+      'label': '出口流量',
+      'ident':'AI',
+      'prop': 'LL',
+      'unit': 'm³',
+      'isShow': false
+    },
+    {
+      'label': '累计加载',
+      'ident':'AI',
+      'prop': 'LOATt',
+      'unit': 'H',
+      'isShow': true
+    },
+    {
+      'label': '排气温度',
+      'ident':'AI',
+      'prop': 'PT',
+      'unit': '℃',
+      'isShow': true
+    },
+    {
+      'label': '电机温度a',
+      'ident':'AI',
+      'prop': 'PTa',
+      'unit': '℃',
+      'isShow': true
+    },
+    {
+      'label': '电机温度b',
+      'ident':'AI',
+      'prop': 'PTb',
+      'unit': '℃',
+      'isShow': true
+    },
+    {
+      'label': '电机温度c',
+      'ident':'AI',
+      'prop': 'PTc',
+      'unit': '℃',
+      'isShow': true
+    },
+    {
+      'label': '后轴温度',
+      'ident':'AI',
+      'prop': 'PTh',
+      'unit': '℃',
+      'isShow': true
+    },
+    {
+      'label': '前轴温度',
+      'ident':'AI',
+      'prop': 'PTq',
+      'unit': '℃',
+      'isShow': true
+    },
+    {
+      'label': '累计运行',
+      'ident':'AI',
+      'prop': 'RUNt',
+      'unit': 'H',
+      'isShow': true
+    },{
+      'label': '电源电压',
+      'ident':'AI',
+      'prop': 'V',
+      'unit': 'V',
+      'isShow': true
+    },{
+      'label': '排气压力',
+      'ident':'AI',
+      'prop': 'YL',
+      'unit': 'Mpa',
+      'isShow': true
+    },{
+      'label': '水平震动',
+      'ident':'AI',
+      'prop': 'ZDx',
+      'unit': 'mm/s',
+      'isShow': false
+    },{
+      'label': '垂直振动',
+      'ident':'AI',
+      'prop': 'ZDy',
+      'unit': 'mm/s',
+      'isShow': false
+    },
+  ]
+};