1. 优化多灾预警融合中各预测曲线界面样式、组件兼容性

src/utils/threejs/main.worker.ts

@@ -59,7 +59,7 @@ export function initModalWorker() {
     'fire/laneway-device_2024-03-19.glb',
     'fire/chamber_2023-06-02.glb',
     // 'fire/workFace_2023-06-29.glb',
-    'fire/tunFace_2023-07-14.glb',
+    'fire/tunFace_2025-01-03.glb',
     'fire/nitrogen_2023-06-02.glb',
     // 'fire/nitrogenUnderground_2023-09-15.glb',
     'fire/nitrogenUnderground_2024-04-09.glb',

src/views/vent/monitorManager/alarmMonitor/common/closeWall.vue

@@ -18,7 +18,7 @@
           </div>
         </div>
         <div class="contents">
-          <img src="/@/assets/images/fire/pie.png" alt="" />
+          <img src="@/assets/images/fire/pie.png" alt="" />
           <span class="text">{{ topContent.temperature }}</span>
           <span class="dw">°C</span>
         </div>
@@ -75,14 +75,14 @@
               {{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span>
             </div>
 
-            <BaseTab
+            <!-- <BaseTab
               style="width: 180px; color: var(--vent-font-color)"
               :tabs="[
                 { name: '实时监测', id: 'default' },
                 { name: '预测曲线', id: 'predict' },
               ]"
               v-model:id="shownChart"
-            />
+            /> -->
           </div>
           <div class="echarts-box">
             <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />

src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

@@ -36,14 +36,14 @@
       <div class="title">
         <div class="text">束管系统监测</div>
         <div class="select-box flex">
-          <BaseTab
+          <!-- <BaseTab
             style="width: 200px; color: var(--vent-font-color); margin-right: 10px"
             :tabs="[
               { name: '束管监测', id: 'default' },
               { name: '预测曲线', id: 'predict' },
             ]"
             v-model:id="shownChart"
-          />
+          /> -->
           <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
             <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
           </a-select>

src/views/vent/monitorManager/alarmMonitor/common/predictionCurve.vue

@@ -44,6 +44,7 @@
   watch(
     () => props.chart,
     (el) => {
+      debugger;
       if (!el) return;
 
       if (Array.isArray(el.time) || (!Array.isArray(el.time) && chartConfig.value.indexMark === 0) || chartId !== el.id) {

src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

@@ -158,14 +158,15 @@
         ventilateTopList[2].value = res.xufengliang || '--';
         ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
 
-        res.vent.forEach((el) => {
-          // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
-          chartListTf.push({
-            label: el.strinstallpos,
-            time: new Date(),
-            data: [moment().format('ss'), 15, 5, 10],
+        if (res.vent)
+          res.vent.forEach((el) => {
+            // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+            chartListTf.push({
+              label: el.strinstallpos,
+              time: new Date(),
+              data: [moment().format('ss'), 15, 5, 10],
+            });
           });
-        });
 
         if (res.history.length != 0) {
           res.history.forEach((v) => {

src/views/vent/monitorManager/deviceMonitor/components/device/modal/dust.modal.vue

@@ -2,8 +2,12 @@
   <BasicModal v-bind="$attrs" destroyOnClose @register="register" :title="`粉尘监测详情    ${currentTime}`" width="1200px">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item"
-          :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -15,7 +19,8 @@
             </div>
             <div class="item-container">
               <div class="title">巷道温度</div>
-              <div class="value"><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span>
                 <span>℃</span>
               </div>
             </div>
@@ -26,7 +31,8 @@
             </div>
             <div class="item-container">
               <div class="title">粉尘浓度</div>
-              <div class="value"><span class="data">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}</span>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}</span>
                 <span>mg/m³</span>
               </div>
             </div>
@@ -37,8 +43,9 @@
             </div>
             <div class="item-container">
               <div class="title">喷雾水压</div>
-              <div class="value"><span class="data">{{ dustMonitor.waterPressure ? dustMonitor.waterPressure : '-'
-                  }}</span> <span>MPa</span></div>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.waterPressure ? dustMonitor.waterPressure : '-' }}</span> <span>MPa</span></div
+              >
             </div>
           </div>
           <div class="top-item warning-box">
@@ -67,8 +74,7 @@
           <div class="dust-group">
             <div class="dust-item">
               <div class="title">粉尘浓度(实时)</div>
-              <div class="value">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}<span>mg/m³</span>
-              </div>
+              <div class="value">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}<span>mg/m³</span> </div>
             </div>
             <div class="dust-item">
               <div class="title">总尘浓度(时间加权)</div>
@@ -76,8 +82,7 @@
             </div>
             <div class="dust-item">
               <div class="title">呼吸加权容许浓度</div>
-              <div class="value">{{ dustMonitor.breathWeighted ? dustMonitor.breathWeighted : '-' }}<span>mg/m³</span>
-              </div>
+              <div class="value">{{ dustMonitor.breathWeighted ? dustMonitor.breathWeighted : '-' }}<span>mg/m³</span> </div>
             </div>
             <div class="dust-item">
               <div class="title">爆炸浓度(煤尘)</div>
@@ -88,8 +93,14 @@
         <div class="right-bottom">
           <span class="base-title">粉尘预测曲线</span>
           <div class="echarts-box">
-            <BarAndLine xAxisPropType="time" :dataSource="posList" height="100%" :chartsColumns="chartsColumns"
-              :option="echatsOption" chartsType="listMonitor" />
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="posList"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -97,422 +108,426 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs';
-
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: { type: Array },
-    activeID: { type: String },
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([]);
-    const posList = ref<any[]>([]);
-    const dustMonitor = shallowRef({});
-    const dustSwitch = ref(false);
-    const echartNow = ref<any[]>([])
-    const echartYc=reactive<any[]>([])
-    const flag=ref(true)
-
-    const echatsOption = {
-      grid: {
-        top: '20%',
-        left: '2px',
-        right: '10px',
-        bottom: '3%',
-        containLabel: true,
-      },
-      toolbox: {
-        feature: {},
-      },
-    };
-
-    const chartsColumns = [
-      {
-        legend: '实时值',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'nowVal',
-      },
-      {
-        legend: '预测值',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#EE6666',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'ycVal',
-      },
-      {
-        legend: '预警值',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#9BCB75',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'warnVal',
-      },
-    ];
-
-    const columns = [
-      {
-        title: '安装位置',
-        dataIndex: 'position',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }) => {
-          return `测点${index}`;
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const dustMonitor = shallowRef({});
+      const dustSwitch = ref(false);
+      const echartNow = ref<any[]>([]);
+      const echartYc = reactive<any[]>([]);
+      const flag = ref(true);
+
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '实时值',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'nowVal',
+        },
+        {
+          legend: '预测值',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#EE6666',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'ycVal',
+        },
+        {
+          legend: '预警值',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#9BCB75',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'warnVal',
+        },
+      ];
+
+      const columns = [
+        {
+          title: '安装位置',
+          dataIndex: 'position',
+          width: 60,
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '安装距离(m)',
+          dataIndex: 'pos',
+          align: 'center',
+          width: 60,
+        },
+        {
+          title: '测点温度',
+          dataIndex: 'value',
+          align: 'center',
+          width: 50,
         },
-      },
-      {
-        title: '安装距离(m)',
-        dataIndex: 'pos',
-        align: 'center',
-        width: 60,
-      },
-      {
-        title: '测点温度',
-        dataIndex: 'value',
-        align: 'center',
-        width: 50,
-      },
-      {
-        title: '测点状态',
-        dataIndex: 'state',
-        align: 'center',
-        width: 50,
-        customRender: () => {
-          return `正常`;
+        {
+          title: '测点状态',
+          dataIndex: 'state',
+          align: 'center',
+          width: 50,
+          customRender: () => {
+            return `正常`;
+          },
         },
-      },
-    ];
-
-    const warningConfig = reactive({
-      data: [
-        ['测点6', '318℃', '严重报警'],
-        ['测点43', '142℃', '一般预警'],
-        ['测点23', '167℃', '一般预警'],
-        ['测点6', '198℃', '超高预警'],
-        ['测点65', '197℃', '超高预警'],
-        ['测点78', '154℃', '一般预警'],
-        ['测点61', '104℃', '一般预警'],
-        ['测点87', '150℃', '一般信息'],
-      ],
-      index: false,
-      columnWidth: [150],
-      oddRowBGC: '#009acd10',
-      evenRowBGC: '#009acd05',
-      align: ['center', 'center', 'center'],
-    });
-
-    const [register, { setModalProps }] = useModalInner();
-
-    function handleVisibleChange(visible) {
-      if (visible) {
+      ];
+
+      const warningConfig = reactive({
+        data: [
+          ['测点6', '318℃', '严重报警'],
+          ['测点43', '142℃', '一般预警'],
+          ['测点23', '167℃', '一般预警'],
+          ['测点6', '198℃', '超高预警'],
+          ['测点65', '197℃', '超高预警'],
+          ['测点78', '154℃', '一般预警'],
+          ['测点61', '104℃', '一般预警'],
+          ['测点87', '150℃', '一般信息'],
+        ],
+        index: false,
+        columnWidth: [150],
+        oddRowBGC: '#009acd10',
+        evenRowBGC: '#009acd05',
+        align: ['center', 'center', 'center'],
+      });
+
+      const [register, { setModalProps }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
-
-    // 选择监测
-    function selectDevice(id) {
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-      setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id;
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      deviceList.value = newDataSource as any[];
-      // if (newActiveID != oldActiveID) {
-      //   activeDeviceID.value = newActiveID as string;
-      // }
-      activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
-      newDataSource?.forEach((item: any, index) => {
-        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-          // activeDeviceID.value = item.deviceID;
-          // const list = item.summaryHour
-          // list.filter(data => {
-          //   const date = new Date();     //1. js获取当前时间
-          //   const min = date.getMinutes();  //2. 获取当前分钟
-          //   return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
-          // })
-          // if(list.length > 0) posList.value = list
-          // posList.value = item['history'];
-          if(flag.value){
-            echartNow.value = JSON.parse(item.readData.expectInfo)['list']
-            flag.value=false
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        deviceList.value = newDataSource as any[];
+        // if (newActiveID != oldActiveID) {
+        //   activeDeviceID.value = newActiveID as string;
+        // }
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            // activeDeviceID.value = item.deviceID;
+            // const list = item.summaryHour
+            // list.filter(data => {
+            //   const date = new Date();     //1. js获取当前时间
+            //   const min = date.getMinutes();  //2. 获取当前分钟
+            //   return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
+            // })
+            // if(list.length > 0) posList.value = list
+            // posList.value = item['history'];
+            if (flag.value) {
+              echartNow.value = JSON.parse(item.readData.expectInfo)['list'];
+              flag.value = false;
+            }
+            echartYc.push({
+              time: JSON.parse(item.readData.expectInfo)['nowTime'],
+              value: JSON.parse(item.readData.expectInfo)['nowVal'],
+              value1: JSON.parse(item.readData.expectInfo)['aveVal'],
+            });
+            // let unique=uniqueObjects( echartNow.value, 'time');
+
+            let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+            setData.forEach((el) => {
+              if (el.value && el.value != '0') {
+                el.nowVal = el.value;
+                el.ycVal = el.value1;
+                el.warnVal = JSON.parse(item.readData.expectInfo)['fmin'] ? JSON.parse(item.readData.expectInfo)['fmin'] : '';
+              }
+            });
+            posList.value = setData;
+            dustMonitor.value = item.readData;
           }
-          echartYc.push({time:JSON.parse(item.readData.expectInfo)['nowTime'],value:JSON.parse(item.readData.expectInfo)['nowVal'],value1:JSON.parse(item.readData.expectInfo)['aveVal']})
-          // let unique=uniqueObjects( echartNow.value, 'time');
-    
-          let setData = [ ... echartNow.value,...echartYc].sort((a,b)=>Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)))
-          setData.forEach(el=>{
-           if(el.value && el.value!='0'){
-            el.nowVal=el.value
-            el.ycVal=el.value1
-            el.warnVal=JSON.parse(item.readData.expectInfo)['fmin'] ? JSON.parse(item.readData.expectInfo)['fmin'] : ''
-           }
-          })
-          posList.value = setData
-          dustMonitor.value = item.readData;
-        }
+        });
       });
-    });
-
-    return {
-      register,
-      model: modelRef,
-      currentTime,
-      dustSwitch,
-      handleVisibleChange,
-      selectDevice,
-      deviceList,
-      activeDeviceID,
-      dustMonitor,
-      echatsOption,
-      posList,
-      chartsColumns,
-      columns,
-      warningConfig,
-    };
-  },
-});
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        dustSwitch,
+        handleVisibleChange,
+        selectDevice,
+        deviceList,
+        activeDeviceID,
+        dustMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        columns,
+        warningConfig,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.fiber-modal {
-  width: 100%;
-  height: 600px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .modal-left {
-    width: 200px;
-    height: 100%;
-    overflow-y: auto;
-    background: #ffffff11;
-    padding: 5px;
-    border-radius: 5px;
-
-    .active-device-title {
-      color: aqua;
-    }
+  .fiber-modal {
+    width: 100%;
+    height: 600px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
+      }
 
-    .link-item {
-      position: relative;
-      cursor: pointer;
-      line-height: 30px;
-      padding-left: 30px;
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
 
-      span:hover {
-        color: #89ffff;
-      }
+        span:hover {
+          color: #89ffff;
+        }
 
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 8px;
-        height: 8px;
-        top: 12px;
-        left: 10px;
-        transform: rotateZ(45deg) skew(10deg, 10deg);
-        background: #45d3fd;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
       }
     }
-  }
 
-  .modal-right {
-    width: calc(100% - 220px);
-    overflow-y: auto;
-
-    .base-title {
-      line-height: 32px;
-      position: relative;
-      padding-left: 20px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 4px;
-        height: 12px;
-        top: 4px;
-        left: 10px;
-        background: #45d3fd;
-        border-radius: 4px;
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
       }
-    }
-
-    .right-top {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      margin-bottom: 30px;
-      padding: 0 10px;
 
-      .top-item {
-        width: 155px;
-        height: 60px;
+      .right-top {
         display: flex;
         flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
-        padding-top: 16px;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        padding: 0 10px;
 
-        .icon {
-          width: 58px;
+        .top-item {
+          width: 155px;
           height: 60px;
           display: flex;
+          flex-direction: row;
           justify-content: center;
           align-items: center;
-          position: relative;
-          top: -8px;
-        }
-
-        .item-container {
-          width: 100px;
-          display: flex;
-          flex-direction: column;
-
-          // justify-content: start;
-          div {
-            padding-left: 8px;
-          }
-
-          .title {
-            font-size: 14px;
-            margin-bottom: 8px;
-          }
-
-          .value {
+          background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
+          padding-top: 16px;
+
+          .icon {
+            width: 58px;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             position: relative;
-            width: 110px;
             top: -8px;
+          }
 
-            .data {
-              display: inline-block;
-              width: 50px;
-              font-family: douyuFont;
-              font-weight: 600;
-              font-size: 14px;
-              -webkit-background-clip: text;
-              background-clip: text;
-              color: #28dce4;
+          .item-container {
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+
+            // justify-content: start;
+            div {
+              padding-left: 8px;
             }
 
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+            .title {
               font-size: 14px;
-              color: #ffffffdd;
+              margin-bottom: 8px;
             }
-          }
-        }
-      }
-
-      .warning-box {
-        padding-top: 0px;
-
-        .icon {
-          margin-top: 20px;
 
-          .icon-style {
-            color: #fdb146;
+            .value {
+              position: relative;
+              width: 110px;
+              top: -8px;
+
+              .data {
+                display: inline-block;
+                width: 50px;
+                font-family: douyuFont;
+                font-weight: 600;
+                font-size: 14px;
+                -webkit-background-clip: text;
+                background-clip: text;
+                color: #28dce4;
+              }
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 14px;
+                color: #ffffffdd;
+              }
+            }
           }
         }
 
-        .title {
+        .warning-box {
           padding-top: 0px;
-        }
 
-        .warning-value {
-          font-family: electronicFont;
-          font-size: 18px;
-          color: #61ddb1;
-        }
-      }
-    }
-
-    .right-center {
-      margin-top: 20px;
+          .icon {
+            margin-top: 20px;
 
-      .dust-group {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        .dust-item {
-          width: 238px;
-          height: 148px;
-          background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
-          scale: 0.9;
+            .icon-style {
+              color: #fdb146;
+            }
+          }
 
           .title {
-            position: absolute;
-            top: 80px;
-            left: 70px;
-            font-size: 16px;
+            padding-top: 0px;
           }
 
-          .value {
-            position: absolute;
-            top: 50px;
-            left: 50px;
-            font-family: 'douyuFont';
-            color: #20dbfd;
-            text-shadow: 0 0 25px #00d8ff;
+          .warning-value {
+            font-family: electronicFont;
             font-size: 18px;
-            font-weight: bolder;
+            color: #61ddb1;
+          }
+        }
+      }
 
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+      .right-center {
+        margin-top: 20px;
+
+        .dust-group {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+
+          .dust-item {
+            width: 238px;
+            height: 148px;
+            background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
+            scale: 0.9;
+
+            .title {
+              position: absolute;
+              top: 80px;
+              left: 70px;
               font-size: 16px;
-              color: aliceblue;
-              margin-left: 8px;
+            }
+
+            .value {
+              position: absolute;
+              top: 50px;
+              left: 50px;
+              font-family: 'douyuFont';
+              color: #20dbfd;
+              text-shadow: 0 0 25px #00d8ff;
+              font-size: 18px;
+              font-weight: bolder;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 16px;
+                color: aliceblue;
+                margin-left: 8px;
+              }
             }
           }
         }
       }
-    }
 
-    .right-bottom {
-      margin-top: 20px;
+      .right-bottom {
+        margin-top: 20px;
 
-      .echarts-box {
-        width: 100%;
-        height: 270px;
+        .echarts-box {
+          width: 100%;
+          height: 270px;
+        }
       }
     }
   }
-}
 </style>