1. 新增瓦斯抽采单元

2. 风窗添加控制联动说明

src/views/vent/gas/gasAssessment/components/customHeader.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="custom-header flex justify-around">
+    <div
+      v-for="(item, i) in badges"
+      :key="`gashome-comp-custom-header-${i}`"
+      class="custom-header__badge"
+      :style="{ backgroundImage: `url(${items[i].bgSrc})` }"
+    >
+      <div class="custom-header__badge_title"> {{ item.value }}</div>
+      <div class="custom-header__badge_desc"> {{ item.desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Badge02Src from '@/assets/images/vent/home/badge02.png';
+  import Badge03Src from '@/assets/images/vent/home/badge03.png';
+  import Badge05Src from '@/assets/images/vent/home/badge05.png';
+  import Badge06Src from '@/assets/images/vent/home/badge06.png';
+  import Badge04Src from '@/assets/images/vent/home/badge04.png';
+
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  defineProps<{
+    /** 描述 Header 中各个徽章的数组，要求4条 */
+    badges: { desc: string; value: string }[];
+  }>();
+
+  const items = [
+    {
+      bgSrc: Badge06Src,
+      color: '#d9e6ec',
+    },
+    {
+      bgSrc: Badge02Src,
+      color: '#aacacd',
+    },
+    {
+      bgSrc: Badge03Src,
+      color: '#9ea890',
+    },
+    {
+      bgSrc: Badge05Src,
+      color: '#d7deea',
+    },
+    {
+      bgSrc: Badge04Src,
+      color: '#d8d5e4',
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .custom-header {
+    width: 1000px;
+    background-image: url('@/assets/images/vent/home/badge-bg.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 1000px auto;
+    height: 160px;
+    padding: 35px 0;
+    color: @white;
+    position: absolute;
+    margin: auto;
+    top: 40px;
+    z-index: 999;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .custom-header__badge {
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 185px;
+    height: 70px;
+    padding-left: 80px;
+  }
+
+  .custom-header__badge_title {
+    font-size: 20px;
+  }
+  .custom-header__badge_desc {
+    font-size: 12px;
+  }
+</style>

src/views/vent/gas/gasAssessment/gasAssessment.data.ts

@@ -2,28 +2,21 @@ import { reactive, ref } from 'vue';
 import { BasicColumn } from '/@/components/Table';
 import echarts from '/@/utils/lib/echarts';
 import * as THREE from 'three';
+import { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/types';
 
 export const monitorNav = [
   {
-    title: '一通三防综合管控',
+    title: '达标评判监测',
     isShow: true,
   },
   {
-    title: '通风监测与管控',
-    isShow: false,
-  },
-  {
-    title: '防灭火监测与管控',
-    isShow: false,
-  },
-  {
-    title: '防尘监测与管控',
-    isShow: false,
-  },
-  {
-    title: '瓦斯防治监测与管控',
+    title: '历史曲线',
     isShow: false,
   },
+  // {
+  //   title: '防灭火监测与管控',
+  //   isShow: false,
+  // },
 ];
 
 export const echartsOption = reactive({
@@ -126,431 +119,56 @@ export const echartsOption = reactive({
   ],
 });
 
-export const ventParam = [
-  {
-    title: '允许超出风量(m³/min)',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: '瓦斯浓度限值(%)',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: '瓦斯持续超限时间(s)',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: '风量调控策略',
-    value: '1',
-    type: 'radio',
-  },
-];
-
-export const warningConfig = reactive({
-  header: ['设备名称', '预警信息', '时间'],
-  data: [
-    ['火焰6', '严重报警', '03-05'],
-    ['测点43', '一般预警', '03-05'],
-    ['CO23', '一般预警', '03-05'],
-    ['测点6', '超高预警', '03-05'],
-    ['测点65', '超高预警', '03-05'],
-    ['温度4', '一般预警', '03-05'],
-    ['测点61', '一般预警', '03-05'],
-    ['测点87', '一般信息', '03-05'],
-  ],
-  index: false,
-  headerBGC: '#3d9dd45d',
-  oddRowBGC: '#009acd10',
-  evenRowBGC: '#009acd05',
-  align: ['center', 'center', 'center'],
-});
-
-export const locationConfig = reactive({
-  header: ['人名', '所在位置', '距离'],
-  data: [],
-  index: false,
-  columnWidth: [100, 200, 80],
-  headerBGC: '#3d9dd45d',
-  oddRowBGC: '#009acd10',
-  evenRowBGC: '#009acd05',
-  align: ['center', 'center', 'center'],
-});
-
-export const sensorColumns: BasicColumn[] = [
-  {
-    title: '名称',
-    dataIndex: 'strname',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '实时值',
-    dataIndex: 'smokeval',
-    width: 80,
-    align: 'center',
-  },
-  {
-    title: '报警',
-    dataIndex: 'warnFlag',
-    width: 100,
-    align: 'center',
-  },
-];
-
-export const gateColumns: BasicColumn[] = [
-  {
-    title: '名称',
-    dataIndex: 'strname',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '前门状态',
-    dataIndex: 'frontGateOpen',
-    width: 80,
-    align: 'center',
-  },
-  {
-    title: '后门状态',
-    dataIndex: 'rearGateOpen',
-    width: 80,
-    align: 'center',
-  },
-  {
-    title: '操作',
-    dataIndex: 'action',
-    width: 80,
-    align: 'center',
-  },
-];
-
-export const windowColumns: BasicColumn[] = [
-  {
-    title: '名称',
-    dataIndex: 'strname',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '过风量',
-    dataIndex: 'forntm3',
-    width: 80,
-    align: 'center',
-  },
-  {
-    title: '操作',
-    dataIndex: 'action',
-    width: 80,
-    align: 'center',
-  },
-];
-
-export const windColumns: BasicColumn[] = [
-  {
-    title: '名称',
-    dataIndex: 'strname',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '风量',
-    dataIndex: 'm3',
-    width: 80,
-    align: 'center',
-  },
-  {
-    title: '操作',
-    dataIndex: 'action',
-    width: 80,
-    align: 'center',
-  },
-];
-
-export const dustColumns: BasicColumn[] = [
-  {
-    title: '名称',
-    dataIndex: 'strname',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '链接状态',
-    dataIndex: 'netStatus',
-    width: 80,
-    align: 'center',
-  },
-  {
-    title: '操作',
-    dataIndex: 'action',
-    width: 100,
-    align: 'center',
-  },
-];
-
-export const beamTubeColumns = [
-  {
-    gasval: '甲烷(%)',
-    ch2val: '乙烯(ppm)',
-  },
-  {
-    o2val: '氧气(%)',
-    chval: '乙炔(ppm)',
-  },
-  {
-    coval: '一氧化碳(ppm)',
-    co2val: '二氧化碳(%)',
-  },
-];
-
-export const groutColumns = [
-  {
-    flowRate: '流量(m³/min)',
-    pressure: '压力(Pa)',
-  },
-];
-
-export const nitrogenColumns = [
-  {
-    cumulativeFlow: '流量(m³/min)',
-    nitrogenPressure: '压力(Pa)',
-  },
-];
-
-export const sprayColumns: BasicColumn[] = [
-  {
-    title: '名称',
-    dataIndex: 'strname',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '连接状态',
-    dataIndex: 'netStatus',
-    width: 80,
-    align: 'center',
-  },
-  {
-    title: '启停',
-    dataIndex: 'action',
-    width: 80,
-    align: 'center',
-  },
-];
-
-export const disasterParam = ref([
-  {
-    title: '触发灾变传感器',
-    value: '1',
-    type: 'select',
-    options: [
-      {
-        label: 'CO与烟雾',
-        value: '1',
-      },
-      {
-        label: 'CO',
-        value: '2',
-      },
-      {
-        label: '烟雾',
-        value: '3',
-      },
-    ],
-  },
-  {
-    title: 'CO浓度限值(ppm)',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: 'CO报警持续时间(s)',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: '烟雾报警持续时间(s)',
-    value: '',
-    type: 'input',
-  },
-]);
-
-export const compressorMonitor = [
-  {
-    title: '总吸风量',
-    code: 'windQuantity2',
-    unit: 'm³/min',
-  },
-  {
-    title: '总供风量',
-    code: 'windQuantity1',
-    unit: 'm³/min',
-  },
-  {
-    title: '局扇频率',
-    code: 'fHz',
-    unit: 'Hz',
-  },
-  {
-    title: '进风风窗当前面积',
-    code: 'jinArea',
-    unit: '㎡',
-  },
-  {
-    title: '回风风窗当前面积',
-    code: 'huiArea',
-    unit: '㎡',
-  },
-];
-
-export const compressorParam = [
-  {
-    title: 'O2浓度限值',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: 'CO浓度限值',
-    value: '',
-    type: 'input',
-  },
-];
-
-export const compressorDeviceParam = [
-  {
-    title: '局扇频率调节(Hz)',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: '进风风窗当前面积(㎡)',
-    value: '',
-    type: 'input',
-  },
-  {
-    title: '回风风窗当前面积(㎡)',
-    value: '',
-    type: 'input',
-  },
-];
-
-export const coalMachineDustParam = [
-  {
-    title: '内喷雾压力',
-    value: '',
-    unit: 'Pa',
-  },
-  {
-    title: '内喷雾流量',
-    value: '',
-    unit: 'm³/min',
-  },
-  {
-    title: '外喷雾压力',
-    value: '',
-    unit: 'Pa',
-  },
-  {
-    title: '外喷雾流量',
-    value: '',
-    unit: 'm³/min',
-  },
-];
-
-export const beltMachineDustParam = [
-  {
-    title: '全尘',
-    value: '',
-    unit: 'mg/m³',
-  },
-  {
-    title: '呼尘',
-    value: '',
-    unit: 'mg/m³',
-  },
-  {
-    title: '内喷雾压力',
-    value: '',
-    unit: 'Pa',
-  },
-  {
-    title: '内喷雾流量',
-    value: '',
-    unit: 'm³/min',
-  },
-  {
-    title: '外喷雾压力',
-    value: '',
-    unit: 'Pa',
-  },
-  {
-    title: '外喷雾流量',
-    value: '',
-    type: 'input',
-    unit: 'm³/min',
-  },
-];
-
-export const dustConfig = reactive({
-  header: ['编号', '位置', '触发', '故障诊断'],
-  data: [
-    ['001', '0m', '是', '正常'],
-    ['002', '2m', '是', '正常'],
-    ['003', '4m', '是', '正常'],
-    ['004', '6m', '是', '正常'],
-    ['005', '8m', '是', '正常'],
-    ['006', '10m', '是', '正常'],
-    ['007', '12m', '是', '正常'],
-  ],
-  index: false,
-  headerBGC: '#3d9dd45d',
-  oddRowBGC: '#009acd10',
-  evenRowBGC: '#009acd05',
-  align: ['center', 'center', 'center', 'center'],
-});
-
 export const gasMonitor = [
   {
-    title: '甲烷浓度T0 (%)',
+    title: '工作面编号',
     code: 'T0',
+    unit: '',
   },
   {
-    title: '甲烷浓度T1 (%)',
+    title: '所属采区',
     code: 'T1',
+    unit: '',
   },
   {
-    title: '甲烷浓度T2 (%)',
+    title: '开采煤层',
     code: 'T2',
+    unit: '',
   },
   {
-    title: '二氧化碳浓度 (%)',
+    title: '工作面走向长度',
     code: 'CO2',
+    unit: 'm',
   },
   {
-    title: '瓦斯抽采浓度 (%)',
+    title: '工作面切眼长度',
     code: 'gasC',
+    unit: 'm',
   },
   {
-    title: '瓦斯抽采混量 (m³/min)',
+    title: '工作面煤炭储量',
     code: 'gasMixMass',
+    unit: 'm³/t',
   },
   {
-    title: '瓦斯抽采纯量 (m³/min)',
+    title: '原始瓦斯储量',
     code: 'gasMass',
+    unit: 'm³/t',
   },
   {
-    title: '残余瓦斯含量 (m³/t)',
+    title: '工作面瓦斯含量',
     code: 'gasMass',
+    unit: 'm³/t',
   },
   {
-    title: '累计抽采量 (m³)',
+    title: '预抽瓦斯标量 (m³)',
     code: 'gasTotalMass',
+    unit: '',
   },
   {
-    title: '风压 (kPa)',
+    title: '抽采单元数量',
     code: 'windPressure',
+    unit: '',
   },
 ];
 
@@ -638,74 +256,47 @@ export const currentGasMonitor = [
 
 export const gasPumpValve = [
   {
-    title: '1#智能阀门',
-    code: 'valve1Val',
-    inputNum: 0,
-  },
-  {
-    title: '2#智能阀门',
-    code: 'valve2Val',
-    inputNum: 0,
-  },
-  {
-    title: '3#智能阀门',
-    code: 'valve3Val',
-    inputNum: 0,
+    title: '开抽日期',
+    code: 'T0',
+    unit: '',
   },
   {
-    title: '4#智能阀门',
-    code: 'valve4Val',
-    inputNum: 0,
+    title: '支管抽采负压',
+    code: 'T0',
+    unit: '',
   },
   {
-    title: '5#智能阀门',
-    code: 'valve5Val',
-    inputNum: 0,
-  },
-];
-
-export const highTensionNum = 3;
-export const lowTensionNum = 1;
-export const gasExtractionUnit = [
-  {
-    title: '负压 (kPa)',
-    code: 'nPressure',
+    title: '支管抽采流量',
+    code: 'T0',
+    unit: '',
   },
   {
-    title: 'CH4 (%)',
-    code: 'CH4  ',
+    title: '抽采管路气体温度',
+    code: 'T0',
+    unit: '',
   },
   {
-    title: '流量 (m³/min)',
-    code: 'flowRate',
+    title: '抽采管路甲烷浓度',
+    code: 'T0',
+    unit: '',
   },
   {
-    title: '纯量 (m³/min)',
-    code: 'scalarRate',
+    title: '抽采管路一氧化碳浓度',
+    code: 'T0',
+    unit: '',
   },
-  // {
-  //   title: '累计抽采量 (m³)',
-  //   code: 'unitTotalMass',
-  // },
-];
-export const gasPump = [
   {
-    title: '1#抽采泵',
-    code: 'extractionPump1',
-    value: '0',
-    ctrCode: 'gasPump1Open',
+    title: '累计流量',
+    code: 'T0',
+    unit: '',
   },
   {
-    title: '1#抽采泵',
-    code: 'extractionPump1',
-    value: '0',
-    ctrCode: 'gasPump2Open',
+    title: '累计纯量',
+    code: 'T0',
+    unit: '',
   },
 ];
-export const gasPumpCtr = reactive({
-  gasPump1Open: '0',
-  gasPump2Open: '0',
-});
+
 export const gasUnitDetail = [
   {
     title: '开始日期',
@@ -763,24 +354,225 @@ export function getBezierControlPoint(A = { x: 1, y: 1 }, alpha_degrees = 45, d
   return C;
 }
 
-function getBezierLine() {
-  const curve = new THREE.CubicBezierCurve(new THREE.Vector2(-10, 0), new THREE.Vector2(-5, 15), new THREE.Vector2(20, 15), new THREE.Vector2(10, 0));
+export const headerBadges = ref([
+  {
+    value: 'T1',
+    desc: '瓦斯总储量',
+    code: '',
+  },
+  {
+    value: 'T2',
+    desc: '抽采达标量',
+    code: '',
+  },
+  {
+    value: 'T3',
+    desc: '累计抽采量',
+    code: '',
+  },
+  {
+    value: 'T4',
+    desc: '预抽比率',
+    code: '',
+  },
+  {
+    value: 'T5',
+    desc: '已抽时间',
+    code: '',
+  },
+]);
 
-  const points = curve.getPoints(50);
-  const geometry = new THREE.BufferGeometry().setFromPoints(points);
+export const gasUnitBarOption: ModuleDataChart = {
+  type: 'bar_cylinder',
+  readFrom: '',
+  legend: { show: false },
+  xAxis: [{ show: true }],
+  yAxis: [{ show: true, name: '', position: 'left' }],
+  series: [
+    {
+      readFrom: 'arrayDev',
+      xprop: 'strinstallpos',
+      yprop: 'val',
+      label: '',
+    },
+  ],
+};
 
-  const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
+export const mockData = {
+  id: 4,
+  objType: '氧气',
+  arrayDev: [
+    {
+      strinstallpos: '抽采单元1',
+      val: '1.76',
+    },
+    {
+      strinstallpos: '抽采单元2',
+      val: '0.08',
+    },
+    {
+      strinstallpos: '抽采单元3',
+      val: '0.30',
+    },
+    {
+      strinstallpos: '抽采单元4',
+      val: '0.67',
+    },
+    {
+      strinstallpos: '抽采单元5',
+      val: '0.67',
+    },
+  ],
+};
+
+export const gasUnitPieOption: ModuleDataChart = {
+  type: 'pie',
+  readFrom: '',
+  legend: { show: false },
+  xAxis: [{ show: true }],
+  yAxis: [{ show: true, name: '', position: 'left' }],
+  series: [
+    {
+      readFrom: 'arrayDev',
+      xprop: 'strinstallpos',
+      yprop: 'val',
+      label: '',
+    },
+  ],
+};
 
-  // Create the final object to add to the scene
-  const curveObject = new THREE.Line(geometry, material);
-  return curveObject;
-}
+export const mockPieData = {
+  id: 4,
+  objType: '氧气',
+  arrayDev: [
+    {
+      strinstallpos: '抽采单元1',
+      val: '1.76',
+    },
+    {
+      strinstallpos: '抽采单元2',
+      val: '0.08',
+    },
+    {
+      strinstallpos: '抽采单元3',
+      val: '0.30',
+    },
+    {
+      strinstallpos: '抽采单元4',
+      val: '0.67',
+    },
+    {
+      strinstallpos: '抽采单元5',
+      val: '0.67',
+    },
+  ],
+};
 
-function getShape() {
-  const A = { x: 0.417, y: -0.24 };
-  const B = { x: 0.702, y: -0.24 };
-  const C = { x: 0.417, y: 0.018 };
+export const unitHeaderBadges = ref([
+  {
+    value: 'T1',
+    desc: '单元瓦斯总储量',
+    code: '',
+  },
+  {
+    value: 'T2',
+    desc: '单元抽采达标量',
+    code: '',
+  },
+  {
+    value: 'T3',
+    desc: '单元累计抽采纯量',
+    code: '',
+  },
+  {
+    value: 'T4',
+    desc: '单元预抽比率',
+    code: '',
+  },
+]);
 
-  const A1 = { x: 0.948, y: -0.24 };
-  const B1 = { x: 0.678, y: 0.467 };
-}
+export const unitBaseInfo = [
+  {
+    title: '单元名称',
+    code: 'T0',
+    unit: '',
+  },
+  {
+    title: '煤炭储量',
+    code: 'T1',
+    unit: 'm³/t',
+  },
+  {
+    title: '瓦斯储量',
+    code: 'T2',
+    unit: 'm³/t',
+  },
+  {
+    title: '钻孔施工长度',
+    code: 'CO2',
+    unit: 'm',
+  },
+  {
+    title: '单元瓦斯含量',
+    code: 'gasC',
+    unit: 'm³/t',
+  },
+  {
+    title: '单元原始瓦斯压力',
+    code: 'gasMixMass',
+    unit: 'Pa',
+  },
+  {
+    title: '抽采钻孔管径',
+    code: 'gasMass',
+    unit: 'm',
+  },
+  {
+    title: '抽采单元汇总管径',
+    code: 'gasMass',
+    unit: 'm',
+  },
+];
+
+export const unitMonitor = [
+  {
+    title: '瓦斯总储量',
+    code: 'T0',
+    unit: 'm³/t',
+  },
+  {
+    title: '抽采达标量',
+    code: 'T1',
+    unit: 'm³/t',
+  },
+  {
+    title: '累计抽采纯量',
+    code: 'T2',
+    unit: 'm³/t',
+  },
+  {
+    title: '当前抽采率',
+    code: 'CO2',
+    unit: '%',
+  },
+  {
+    title: '试试抽采率',
+    code: 'gasC',
+    unit: '%',
+  },
+  {
+    title: '实时抽采浓度',
+    code: 'gasMixMass',
+    unit: 'ppm',
+  },
+  {
+    title: '实时抽采负压',
+    code: 'gasMass',
+    unit: 'Pa',
+  },
+  {
+    title: '参与瓦斯压力',
+    code: 'gasMass',
+    unit: 'Pa',
+  },
+];

src/views/vent/gas/gasAssessment/gasUnit.vue

@@ -0,0 +1,353 @@
+<template>
+  <CustomHeader
+    :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+    :options="options"
+    @change="getSelectRow"
+    :optionValue="optionValue"
+    >瓦斯抽采单元详情</CustomHeader
+  >
+  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="unitHeaderBadges" />
+  <a-spin tip="Loading..." :spinning="loading">
+    <div class="bg" style="">
+      <div id="workFace3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: 1; top: 0"> </div>
+      <div
+        id="workFace3DCSS"
+        class="threejs-Object-CSS"
+        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
+      >
+      </div>
+    </div>
+
+    <div class="modal-monitor vent-flex-row" style="display: none">
+      <div v-for="groupNum in monitorDataGroupNum" :id="'gasUnitBox' + groupNum" :key="groupNum" style="margin: 0 5px">
+        <FourBorderBg class="four-border-bg">
+          <div class="title">抽采单元{{ groupNum }}</div>
+          <div class="monitor-item" v-for="(gasUnit, index) in gasUnitDetail" :key="index">
+            <span class="monitor-title">{{ gasUnit.title }}:</span>
+            <span class="monitor-val">
+              <span class="val">
+                {{ selectData[groupNum - 1] && selectData[groupNum - 1][gasUnit.code] ? selectData[groupNum - 1][gasUnit.code] : '-' }}
+              </span>
+            </span>
+          </div>
+        </FourBorderBg>
+      </div>
+    </div>
+    <div class="monitor-container">
+      <div class="lr left-box">
+        <ventBox1>
+          <template #title>
+            <div>平均单元基础信息</div>
+          </template>
+          <template #container>
+            <ListItem
+              v-for="(item, index) in gasMonitor"
+              :key="index"
+              class="w-100% mb-5px"
+              :value="get(dataSource, item.code)"
+              :label="item.title"
+              labelWidth="200px"
+            />
+          </template>
+        </ventBox1>
+
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>工作面基础信息</div>
+          </template>
+          <template #container>
+            <CustomChart :chart-config="gasUnitBarOption" :chart-data="mockData" height="280px" />
+          </template>
+        </ventBox1>
+      </div>
+      <div class="lr right-box">
+        <div class="item-box">
+          <ventBox1>
+            <template #title>
+              <div>工作面支管抽采信息</div>
+            </template>
+            <template #container>
+              <ListItem
+                v-for="(item, index) in gasPumpValve"
+                :key="index"
+                class="w-100% mb-5px"
+                :value="get(dataSource, item.code)"
+                :label="item.title"
+                labelWidth="200px"
+              />
+            </template>
+          </ventBox1>
+          <ventBox1 class="vent-margin-t-10">
+            <template #title>
+              <div>工作面基础信息</div>
+            </template>
+            <template #container>
+              <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="280px" />
+            </template>
+          </ventBox1>
+        </div>
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import CustomBadges from './components/customHeader.vue';
+  import {
+    gasMonitor,
+    gasUnitDetail,
+    unitHeaderBadges,
+    gasPumpValve,
+    gasUnitBarOption,
+    mockData,
+    gasUnitPieOption,
+    mockPieData,
+  } from './gasAssessment.data';
+  import { mountedThree, destroy, setModelType, setCss3D } from './threejs/gasAssessmen.threejs';
+  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import { get } from '@/utils/ventutil';
+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+
+  const loading = ref(false);
+  const dataSource = ref({});
+  // 获取模型类型
+  const changeModalType = (currentData) => {
+    if (currentData) {
+      if (currentData['strsystype'] === 'sys_surface_caimei_modal_1') {
+        // 单进单回
+        modalType = 'workFace1';
+      } else if (currentData['strsystype'] === 'sys_surface_caimei_modal_3') {
+        // 双进单回
+        modalType = 'workFace3';
+      } else if (currentData['strsystype'] === 'sys_surface_caimei_modal_4') {
+        // 双进双回
+        modalType = 'workFace4';
+      } else {
+        modalType = 'workFace3';
+      }
+    } else {
+      modalType = 'workFace3';
+    }
+
+    gasUnitNum.value = 4;
+    setModelType(modalType, gasUnitNum.value, true);
+  };
+
+  const { options, optionValue, deviceActive, getSelectRow, getSysDataSource, getDeviceList } = useSystemSelect(
+    'sys_surface_caimei',
+    changeModalType
+  );
+
+  const gasUnitNum = ref(5);
+  let modalType = 'workFace1';
+
+  // // 监测数据
+  const selectData = ref([]);
+  const monitorDataGroupNum = ref(5);
+  // // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (deviceActive.value) {
+            await getDeviceList();
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
+
+  onBeforeMount(() => {});
+
+  onMounted(async () => {
+    loading.value = true;
+
+    timer = null;
+
+    mountedThree().then(async () => {
+      // gasUnitNum.value = Math.ceil(Math.random() * 10)
+      gasUnitNum.value = 4;
+      loading.value = false;
+      // nextTick(() => {
+      //   setModelType(modalType, gasUnitNum.value, true);
+      // });
+      await getSysDataSource();
+      nextTick(async () => {
+        await getMonitor(true);
+        setCss3D();
+      });
+    });
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    destroy();
+  });
+</script>
+
+<style lang="less">
+  @import '/@/design/vent/modal.less';
+
+  .@{ventSpace}-select-dropdown {
+    background: #ffffff !important;
+    border-bottom: 1px solid rgba(236, 236, 236, 0.4);
+    backdrop-filter: blur(10px);
+
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
+      background-color: #ffffff33 !important;
+    }
+
+    .@{ventSpace}-select-item:hover {
+      background-color: #ffffff33 !important;
+    }
+  }
+</style>
+
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  .bg {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: absolute;
+    pointer-events: auto;
+    z-index: 0;
+  }
+  :deep(.monitor-container) {
+    height: 850px;
+    pointer-events: none;
+  }
+  .modal-monitor {
+    position: absolute;
+    z-index: -1;
+    flex-direction: row-reverse;
+    :deep(.main-container) {
+      background-color: #00000078;
+    }
+    .monitor-item {
+      width: 180px;
+      display: flex;
+      flex-direction: row;
+      width: auto;
+      margin-bottom: 3px;
+      .monitor-title {
+        width: 120px;
+        color: #7af5ff;
+        font-weight: 400;
+        font-size: 13px;
+      }
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
+
+        .val {
+          width: 60px;
+          font-size: 13px;
+          text-align: center;
+        }
+
+        .unit {
+          color: #ffffffbb;
+          font-size: 13px;
+        }
+      }
+    }
+    .title {
+      text-align: center;
+    }
+  }
+  .left-box {
+    width: 360px;
+  }
+  .gas-pump-item {
+    padding: 3px 0;
+  }
+
+  .param-set {
+    color: #45d3fd;
+    cursor: pointer;
+    &:hover {
+      color: #38a6c8;
+    }
+  }
+
+  .input-item {
+    margin: 3px 0 !important;
+    .value {
+      width: 80px;
+      text-align: center;
+    }
+  }
+  .data-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    .data-item {
+      width: calc(50% - 10px);
+      display: flex;
+      justify-content: space-between;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+    .value {
+      color: #00eefffe;
+    }
+    .data-item1 {
+      width: 100%;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+  }
+
+  .base-title {
+    line-height: 26px;
+    position: relative;
+    padding-left: 15px;
+    color: #9bf2ff;
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 4px;
+      height: 12px;
+      top: 8px;
+      left: 5px;
+      background: #45d3fd;
+      border-radius: 4px;
+    }
+  }
+
+  .detail {
+    border: 1px solid #9bf2ff88;
+    padding: 0 5px;
+    background-color: #ffffff11;
+    margin-right: 4px;
+    &:hover {
+      background-color: #ffffff05;
+    }
+  }
+</style>

src/views/vent/gas/gasAssessment/index.vue

@@ -6,6 +6,7 @@
     :optionValue="optionValue"
     >瓦斯抽采达标评判</CustomHeader
   >
+  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
   <a-spin tip="Loading..." :spinning="loading">
     <div class="bg" style="">
       <div id="workFace3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: 1; top: 0"> </div>
@@ -17,8 +18,8 @@
       </div>
     </div>
 
-    <div id="gasUnitBox" class="modal-monitor vent-flex-row" style="display: none">
-      <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" style="margin: 0 5px">
+    <div class="modal-monitor vent-flex-row" style="display: none">
+      <div v-for="groupNum in monitorDataGroupNum" :id="'gasUnitBox' + groupNum" :key="groupNum" style="margin: 0 5px">
         <FourBorderBg class="four-border-bg">
           <div class="title">抽采单元{{ groupNum }}</div>
           <div class="monitor-item" v-for="(gasUnit, index) in gasUnitDetail" :key="index">
@@ -36,114 +37,52 @@
       <div class="lr left-box">
         <ventBox1>
           <template #title>
-            <div>工作面瓦斯监控</div>
+            <div>工作面基础信息</div>
           </template>
           <template #container>
-            <div class="data-group">
-              <div class="data-item" v-for="(item, index) in gasMonitor" :key="index">
-                <div class="title">{{ item.title }}</div>
-                <div class="value">-</div>
-              </div>
-            </div>
-          </template>
-        </ventBox1>
-        <ventBox1 class="vent-margin-t-10">
-          <template #title>
-            <div>当前抽采地质测定 (<span class="param-set"> 参数设定 </span> ) </div>
-          </template>
-          <template #container>
-            <div class="data-group">
-              <div class="data-item" v-for="(item, index) in currentGasMonitor" :key="index">
-                <div class="title">{{ item.title }}</div>
-                <div class="value">-</div>
-              </div>
-            </div>
+            <ListItem
+              v-for="(item, index) in gasMonitor"
+              :key="index"
+              class="w-100% mb-5px"
+              :value="get(dataSource, item.code)"
+              :label="item.title"
+              labelWidth="200px"
+            />
           </template>
         </ventBox1>
+
         <ventBox1 class="vent-margin-t-10">
           <template #title>
-            <div>工作面瓦斯抽采基础属性参数</div>
+            <div>工作面基础信息</div>
           </template>
           <template #container>
-            <div class="data-group">
-              <div class="data-item" v-for="(item, index) in gasParamData" :key="index">
-                <div class="title">{{ item.title }}</div>
-                <div class="value">-</div>
-              </div>
-            </div>
+            <CustomChart :chart-config="gasUnitBarOption" :chart-data="mockData" height="280px" />
           </template>
         </ventBox1>
       </div>
       <div class="lr right-box">
-        <div class="item-box sensor-container">
+        <div class="item-box">
           <ventBox1>
             <template #title>
-              <div>瓦斯抽采监测与控制</div>
+              <div>工作面支管抽采信息</div>
             </template>
             <template #container>
-              <div class="parameter-title group-parameter-title"
-                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>抽采泵监测与控制</span></div
-              >
-              <div class="vent-margin-b-10 vent-padding-lr-5">
-                <div class="vent-flex-row-between vent-padding-lr-5 gas-pump-item" v-for="(item, index) in gasPump" :key="index">
-                  <div class="title">{{ item.title }}</div>
-                  <div
-                    ><span
-                      class="signal-round vent-margin-r-8"
-                      :class="{ 'signal-round-gry': item.value == '0', 'signal-round-blue': item.value == '1' }"
-                    ></span
-                    >{{ item.value == '0' ? '关闭' : '开启' }}</div
-                  >
-                  <a-switch
-                    v-model:checked="gasPumpCtr[item.ctrCode]"
-                    checked-children="开启"
-                    un-checked-children="关闭"
-                    checkedValue="1"
-                    unCheckedValue="0"
-                  />
-                </div>
-              </div>
-              <div class="parameter-title group-parameter-title vent-margin-t-15"
-                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>阀门开度管理</span></div
-              >
-              <div class="input-box">
-                <div v-for="(item, index) in gasPumpValve" :key="index" class="input-item">
-                  <div class="">{{ item.title }}</div>
-                  <div class="value">-</div>
-                  <a-input class="input-value" v-model="item.inputNum" placeholder="" />
-                  <span class="btn btn1">保存</span>
-                </div>
-              </div>
-              <div class="parameter-title group-parameter-title vent-margin-t-15"
-                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>高负压管路监测与控制</span></div
-              >
-              <div v-for="num in highTensionNum" :key="num">
-                <div class="vent-flex-row-between">
-                  <span class="base-title">抽采单元{{ num }}</span>
-                  <div class="detail">详情</div>
-                </div>
-                <div class="data-group vent-padding-lr-5">
-                  <div class="data-item" v-for="(item, index) in gasExtractionUnit" :key="index">
-                    <div class="title">{{ item.title }}</div>
-                    <div class="value">-</div>
-                  </div>
-                </div>
-              </div>
-              <div class="parameter-title group-parameter-title"
-                ><SvgIcon class="icon" size="42" name="alarm-icon" /><span>低负压管路监测与控制</span></div
-              >
-              <div v-for="num in lowTensionNum" :key="num">
-                <div class="vent-flex-row-between">
-                  <span class="base-title">抽采单元{{ num }}</span>
-                  <span class="detail">详情</span>
-                </div>
-                <div class="data-group vent-padding-lr-5">
-                  <div class="data-item" v-for="(item, index) in gasExtractionUnit" :key="index">
-                    <div class="title">{{ item.title }}</div>
-                    <div class="value">-</div>
-                  </div>
-                </div>
-              </div>
+              <ListItem
+                v-for="(item, index) in gasPumpValve"
+                :key="index"
+                class="w-100% mb-5px"
+                :value="get(dataSource, item.code)"
+                :label="item.title"
+                labelWidth="200px"
+              />
+            </template>
+          </ventBox1>
+          <ventBox1 class="vent-margin-t-10">
+            <template #title>
+              <div>工作面基础信息</div>
+            </template>
+            <template #container>
+              <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="280px" />
             </template>
           </ventBox1>
         </div>
@@ -156,24 +95,26 @@
   import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
   import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { SvgIcon } from '/@/components/Icon';
   import CustomHeader from '/@/components/vent/customHeader.vue';
+  import CustomBadges from './components/customHeader.vue';
   import {
     gasMonitor,
-    gasParamData,
-    currentGasMonitor,
-    gasPumpValve,
-    gasPump,
-    gasExtractionUnit,
-    highTensionNum,
-    lowTensionNum,
-    gasPumpCtr,
     gasUnitDetail,
+    headerBadges,
+    gasPumpValve,
+    gasUnitBarOption,
+    mockData,
+    gasUnitPieOption,
+    mockPieData,
   } from './gasAssessment.data';
   import { mountedThree, destroy, setModelType, setCss3D } from './threejs/gasAssessmen.threejs';
   import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import { get } from '@/utils/ventutil';
+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
 
   const loading = ref(false);
+  const dataSource = ref({});
   // 获取模型类型
   const changeModalType = (currentData) => {
     if (currentData) {
@@ -197,15 +138,17 @@
     setModelType(modalType, gasUnitNum.value, true);
   };
 
-  const { options, optionValue, deviceType, isRefresh, deviceActive, deviceList, deviceValue, getSelectRow, getSysDataSource, getDeviceList } =
-    useSystemSelect('sys_surface_caimei', changeModalType);
+  const { options, optionValue, deviceActive, getSelectRow, getSysDataSource, getDeviceList } = useSystemSelect(
+    'sys_surface_caimei',
+    changeModalType
+  );
 
-  const gasUnitNum = ref(4);
+  const gasUnitNum = ref(5);
   let modalType = 'workFace1';
 
   // // 监测数据
   const selectData = ref([]);
-  const monitorDataGroupNum = ref(gasUnitNum);
+  const monitorDataGroupNum = ref(5);
   // // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   function getMonitor(flag?) {
@@ -291,6 +234,7 @@
     z-index: 0;
   }
   :deep(.monitor-container) {
+    height: 850px;
     pointer-events: none;
   }
   .modal-monitor {

src/views/vent/gas/gasAssessment/threejs/gasAssessmen.threejs.base.ts

@@ -103,6 +103,22 @@ class GasAssessmen {
     ];
 
     // width = 7.713 height =3.717
+
+    // const sizeList = [
+    //   {
+    //     ratio: 0.4,
+    //     color: colors.c1,
+    //   },
+    //   {
+    //     ratio: 0.5,
+    //     color: colors.c2,
+    //   },
+    //   {
+    //     ratio: 0.1,
+    //     color: colors.c4,
+    //   },
+    // ];
+
     const geometry = new THREE.PlaneGeometry(7.723, 3.72, 1, 1);
 
     // 初始化累积比例数组和颜色数组
@@ -145,7 +161,7 @@ class GasAssessmen {
                 return;
             }
         }
-        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);
     }
   `;
 
@@ -205,7 +221,8 @@ class GasAssessmen {
     const plane = new THREE.Mesh(geometry, material);
     plane.rotation.x = -Math.PI / 2;
     plane.position.set(-0.2, 0.15, -0.03);
-    this.group.add(plane);
+    this.planeGroup.add(plane);
+    this.group.add(this.planeGroup);
   };
 
   // 清除抽采单元绘制面
@@ -219,26 +236,31 @@ class GasAssessmen {
   };
   // 抽采单元内容显示
   setCss3D = () => {
+    const sizeList = [0.2, 0.3, 0.1, 0.2, 0.2];
+    // const sizeList = [0.4, 0.5, 0.1];
     // width = 7.713 height =3.717
-    const obj = this.group.getObjectByName(`unitText`);
-    if (!obj) {
-      const element = document.getElementById(`gasUnitBox`) as HTMLElement;
-      if (element) {
-        const gasUnitCSS3D = new CSS3DObject(element);
-        gasUnitCSS3D.name = `unitText`;
-        gasUnitCSS3D.scale.set(0.0009, 0.0009, 0.0009);
-        gasUnitCSS3D.position.set(-0.1, 0.11, 0.05);
-        gasUnitCSS3D.lookAt(-0.1, 0.5, 1);
-        this.planeGroup.add(gasUnitCSS3D);
-      }
-    }
-    for (let i = 0; i < this.planeNum; i++) {
-      const lenScale = 0.77 / this.planeNum;
+    let leftW = 0;
+    for (let i = 0; i < sizeList.length; i++) {
       const label = setTag3D(`抽采单元${i + 1}`, 'gas_unit_text');
-      label.scale.set(0.0018, 0.0018, 1); //根据相机渲染范围控制HTML 3D标签尺寸
-      label.position.set(0.282 - lenScale * (i + 0.5), 0.015, 0.142);
+      label.scale.set(0.02, 0.02, 0.02); //根据相机渲染范围控制HTML 3D标签尺寸
+      label.position.set((leftW + sizeList[i] / 2) * 7.913 - 4.22, 0.015, 0.142);
       label.name = 'planeText' + i;
       this.planeGroup.add(label);
+
+      const obj = this.group.getObjectByName(`unitText${i}`);
+      if (!obj) {
+        const element = document.getElementById(`gasUnitBox${i + 1}`) as HTMLElement;
+        if (element) {
+          const gasUnitCSS3D = new CSS3DObject(element);
+          gasUnitCSS3D.name = `unitText${i}`;
+          gasUnitCSS3D.scale.set(0.01, 0.01, 0.01);
+          gasUnitCSS3D.position.set((leftW + sizeList[i] / 2) * 10.93 - 11.17, 0.015, -3.442);
+          gasUnitCSS3D.lookAt(gasUnitCSS3D.position.x, gasUnitCSS3D.position.y + 1.2, gasUnitCSS3D.position.y);
+          this.planeGroup.add(gasUnitCSS3D);
+        }
+      }
+
+      leftW += sizeList[i];
     }
   };
   // 显示或隐藏抽采单元显示内容

src/views/vent/gas/gasAssessment/threejs/gasAssessmen.threejs.ts

@@ -71,8 +71,8 @@ export const setModelType = (type, n = Math.ceil(Math.random() * 4), isShowPlane
       showOrHideGasPlane(true);
       const oldControlsPosition = { x: -0.086221, y: -0.612538, z: 0.33468 };
       const oldCameraPosition = { x: 19.589025920044726, y: 7.437905524957071, z: 23.032636074396976 };
-      const newCameraPosition = { x: 0.0439416940344207, y: 3.30089674660269, z: 5.075410444673834 };
-      const newControlsPosition = { x: -0.00008688304055517147, y: -0.3947939804629856, z: -0.07734918886555561 };
+      const newCameraPosition = { x: -0.04789909089889121, y: 3.641517536555166, z: 4.83092458651697 };
+      const newControlsPosition = { x: -0.04024406809413058, y: 0.04971078294784826, z: -0.39495921220738645 };
 
       if (model.scene.getObjectByName('workFace')) {
         model.camera.position.set(oldCameraPosition.x, oldCameraPosition.y, oldCameraPosition.z + 20);

src/views/vent/home/configurable/components/content.vue

@@ -257,6 +257,7 @@
         case 'chart': {
           const cfg = chart.shift();
           if (!cfg) break;
+          debugger;
           const data = getData(refData, cfg.readFrom, cfg.parser);
 
           arr.push({

src/views/vent/home/configurable/fire.vue

@@ -59,9 +59,9 @@
         </div>
       </div>
     </template>
-    <!-- <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
-    </div> -->
+    </div>
   </div>
 </template>
 <script lang="ts" setup>

src/views/vent/monitorManager/comment/components/LinkControlDesModal.vue

@@ -0,0 +1,42 @@
+<template>
+  <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleOk">
+    <div>123</div>
+  </a-modal>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, defineEmits, onUnmounted, computed } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+
+  const getLinkAlarmInfo = (params?) => defHttp.post({ url: '/ventanaly-device/safety/ventanalyDeviceInfo/getLinkAlarmInfo', params });
+
+  const emit = defineEmits(['close']);
+  const props = withDefaults(
+    defineProps<{
+      deviceId?: string;
+      modalIsShow?: boolean;
+      modalTitle?: string;
+    }>(),
+    {
+      deviceId: '',
+      modalIsShow: false,
+      modalTitle: '',
+    }
+  );
+
+  const title = computed(() => props.modalTitle);
+  const visible = computed(() => {
+    getLinkAlarmInfo({ id: props.deviceId + '' });
+    return props.modalIsShow;
+  });
+
+  function handleOk() {
+    emit('close');
+  }
+
+  onMounted(async () => {});
+  onUnmounted(() => {});
+</script>
+<style scoped lang="less">
+  @import '/@/design/vent/color.less';
+  @import '/@/design/vent/modal.less';
+</style>

src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceDustHome.vue

@@ -9,7 +9,12 @@
           <template #container>
             <div v-for="(item, index) in coalMachineDustParam" class="input-item" style="padding: 4px 8px; margin: 6px 0" :key="index">
               <div class="title">{{ item.title }}</div>
-              <div class="value">-</div>
+              <template v-if="item.flag == 'sign'">
+                <div class="value" :style="{ color: item.value == 1 ? '#61ddb1' : '#c4fdff' }">{{ item.value == 1 ? '链接' : '断开' }}</div>
+              </template>
+              <template v-else>
+                <div class="value">{{ item.value }}</div>
+              </template>
               <div class="unit">{{ item.unit }}</div>
             </div>
           </template>

src/views/vent/monitorManager/tunFaceMonitor/tunFace.data.ts

@@ -545,28 +545,45 @@ export const compressorDeviceParam = [
 
 export const coalMachineDustParam = [
   {
+    title: '喷雾状态',
+    value: '1',
+    unit: '',
+    flag: 'sign',
+  },
+  {
+    title: '通信状态',
+    value: '1',
+    unit: '',
+    flag: 'sign',
+  },
+  {
+    title: '供水压力',
+    value: '0.22',
+    unit: 'MPa',
+  },
+  {
     title: '内喷雾压力',
-    value: '',
-    unit: 'Pa',
+    value: '0.47',
+    unit: 'MPa',
   },
   {
     title: '内喷雾流量',
-    value: '',
-    unit: 'm³/min',
+    value: '25.6',
+    unit: 'L/min',
   },
   {
     title: '外喷雾压力',
-    value: '',
-    unit: 'Pa',
+    value: '0.42',
+    unit: 'MPa',
   },
   {
     title: '外喷雾流量',
-    value: '',
+    value: '25.2',
     unit: 'm³/min',
   },
   {
     title: '除尘效率',
-    value: '',
+    value: '99',
     unit: '%',
   },
 ];

src/views/vent/monitorManager/windowMonitor/shuangdaoFc.threejs.ts

@@ -101,8 +101,8 @@ class doubleWindow {
       {
         text: selectData.OpenDegree2
           ? Number(`${selectData.OpenDegree2}`).toFixed(2)
-          : selectData.backArea
-          ? Number(`${selectData.backArea}`).toFixed(2)
+          : selectData.rearArea
+          ? Number(`${selectData.rearArea}`).toFixed(2)
           : '-',
         font: 'normal 28px Arial',
         color: '#009900',

src/views/vent/monitorManager/windowMonitor/shuangdaoFcBlt.threejs.ts

@@ -84,8 +84,8 @@ class doubleWindow {
       {
         text: selectData.OpenDegree2
           ? Number(`${selectData.OpenDegree2}`).toFixed(2)
-          : selectData.backArea
-          ? Number(`${selectData.backArea}`).toFixed(2)
+          : selectData.rearArea
+          ? Number(`${selectData.rearArea}`).toFixed(2)
           : '-',
         font: 'normal 30px Arial',
         color: '#009900',

src/views/vent/monitorManager/windowMonitor/shuangdaoFcSw.threejs.ts

@@ -107,8 +107,8 @@ class doubleWindow {
       {
         text: selectData.OpenDegree2
           ? Number(`${selectData.OpenDegree2}`).toFixed(2)
-          : selectData.backArea
-          ? Number(`${selectData.backArea}`).toFixed(2)
+          : selectData.rearArea
+          ? Number(`${selectData.rearArea}`).toFixed(2)
           : '-',
         font: 'normal 30px Arial',
         color: '#009900',

src/views/vent/monitorManager/windowMonitor/shuangdaoFcYjl.threejs.ts

@@ -86,8 +86,8 @@ class doubleWindowYjl {
       {
         text: selectData.OpenDegree2
           ? Number(`${selectData.OpenDegree2}`).toFixed(2)
-          : selectData.backArea
-          ? Number(`${selectData.backArea}`).toFixed(2)
+          : selectData.rearArea
+          ? Number(`${selectData.rearArea}`).toFixed(2)
           : '-',
         font: 'normal 28px Arial',
         color: '#009900',