粉尘监测预警echarts图表修改-提交

.env.development

@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
-VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://localhost:3300/upload"],["/documents", "http://10.10.150.72:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://192.168.183.216:8051"]]
+VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://localhost:3300/upload"],["/documents", "http://10.10.150.72:9050"],["/modelreq", "http://10.10.150.72:9999"],["/webRtc", "http://192.168.183.216:8051"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
 # 控制台不输出
@@ -18,7 +18,7 @@ VITE_GLOB_API_URL=/modelreq
 
 
 #后台接口全路径地址(必填)
-VITE_GLOB_DOMAIN_URL=http://182.92.126.35:9999
+VITE_GLOB_DOMAIN_URL=http://10.10.150.72:9999
 # VITE_GLOB_DOMAIN_URL=http://182.92.126.35:9999
 
 # 接口前缀

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

@@ -52,7 +52,8 @@
                                 <span :class="{
                                     'status-f': items.value == 1,
                                     'status-l': items.value == 0,
-                                }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : `${items.value}${items.dw}` }}</span>
+                                }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : `${items.value}${items.dw}`
+                                    }}</span>
                             </div>
                         </div>
                     </div>
@@ -84,7 +85,15 @@ let choiceData = reactive<any[]>([]);
 //粉尘图表数据
 let echartDataFc = reactive({
     maxData: {
-        lengedData: '粉尘浓度(mg/m³)',
+        lengedData: '实时值(mg/m³)',
+        data: [],
+    },
+    minData: {
+        lengedData: '预测值(mg/m³)',
+        data: [],
+    },
+    aveValue: {
+        lengedData: '最新值(mg/m³)',
         data: [],
     },
     xData: [],
@@ -100,6 +109,8 @@ let gridV = reactive({
 })
 let cardListTf = reactive<any[]>([])
 let router = useRouter()
+let echartDatas = ref<any[]>([])
+let echartDat = reactive<any[]>([])
 
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
@@ -125,15 +136,50 @@ function cardClick(ind, item) {
     clearTimeout(timer);
     getMonitor(item.deviceID, true);
 }
+function uniqueObjects(arr, key) {
+    const unique = arr.map((e) => e[key])
+        // 存储每个属性值
+        .map((e, i, final) => final.indexOf(e) === i && i)
+        // 移除重复值的索引
+        .filter((e) => arr[e])
+        // 映射到对应的对象
+        .map((e) => arr[e]);
+    return unique;
+}
 //顶部区域选项切换
 function topAreaClick(index) {
     activeIndex.value = index;
     echartDataFc.maxData.data.length = 0;
+    echartDataFc.minData.data.length = 0;
+    echartDataFc.aveValue.data.length = 0;
     echartDataFc.xData.length = 0;
-    choiceData[index].history.forEach((el) => {
-        echartDataFc.maxData.data.push(el.dustval);
-        echartDataFc.xData.push(el.time);
-    });
+    echartDat.length = 0
+
+    echartDatas.value = JSON.parse(choiceData[index].readData.expectInfo)['list']
+    echartDat.push({ id: '1', time: JSON.parse(choiceData[index].readData.expectInfo)['aveTime'], value: JSON.parse(choiceData[index].readData.expectInfo)['aveVal'] })
+    echartDat.push({ id: '2', time: JSON.parse(choiceData[index].readData.expectInfo)['nowTime'], value: JSON.parse(choiceData[index].readData.expectInfo)['nowVal'] })
+    let unique = uniqueObjects(echartDat, 'time');
+    let setData = [...echartDatas.value, ...unique]
+    setData.forEach((m, n) => {
+        echartDataFc.xData.push(m.time);
+        if (unique.filter(t => t.time == m.time).length != 0 && m.id == '1') {
+            echartDataFc.maxData.data.push(0);
+            echartDataFc.minData.data.push(m.value);
+            echartDataFc.aveValue.data.push(0);
+        } else if (unique.filter(t => t.time == m.time).length != 0 && m.id == '2') {
+            echartDataFc.maxData.data.push(0);
+            echartDataFc.minData.data.push(0);
+            echartDataFc.aveValue.data.push(m.value);
+        } else {
+            echartDataFc.maxData.data.push(m.value);
+            echartDataFc.minData.data.push(0);
+            echartDataFc.aveValue.data.push(0);
+        }
+    })
+    // choiceData[index].history.forEach((el) => {
+    //     echartDataFc.maxData.data.push(el.dustval);
+    //     echartDataFc.xData.push(el.time);
+    // });
 }
 function formatRoundNum(num) {
     let interger = Math.ceil(num);
@@ -162,6 +208,8 @@ function getSysWarnList(id, type) {
         // listData.common = res;
         topAreaList.length = 0;
         echartDataFc.maxData.data.length = 0;
+        echartDataFc.minData.data.length = 0;
+        echartDataFc.aveValue.data.length = 0;
         echartDataFc.xData.length = 0;
         if (JSON.stringify(res) != '{}') {
             res.dust.forEach((el) => {
@@ -176,21 +224,65 @@ function getSysWarnList(id, type) {
                 });
             });
             choiceData = res.dust;
+
             if (choiceData[activeIndex.value]) {
-                choiceData[activeIndex.value].history.forEach((el) => {
-                    echartDataFc.maxData.data.push(el.dustval);
-                    echartDataFc.xData.push(el.time);
-                });
+                echartDatas.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list']
+                echartDat.push({ id: '1', time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveTime'], value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal'] })
+                echartDat.push({ id: '2', time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'], value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'] })
+                let unique = uniqueObjects(echartDat, 'time');
+                let setData = [...echartDatas.value, ...unique]
+                setData.forEach((m, n) => {
+                    echartDataFc.xData.push(m.time);
+                    if (unique.filter(t => t.time == m.time).length != 0 && m.id == '1') {
+                        echartDataFc.maxData.data.push(0);
+                        echartDataFc.minData.data.push(m.value);
+                        echartDataFc.aveValue.data.push(0);
+                    } else if (unique.filter(t => t.time == m.time).length != 0 && m.id == '2') {
+                        echartDataFc.maxData.data.push(0);
+                        echartDataFc.minData.data.push(0);
+                        echartDataFc.aveValue.data.push(m.value);
+                    } else {
+                        echartDataFc.maxData.data.push(m.value);
+                        echartDataFc.minData.data.push(0);
+                        echartDataFc.aveValue.data.push(0);
+                    }
+                })
+                // choiceData[activeIndex.value].history.forEach((el) => {
+                //     echartDataFc.maxData.data.push(el.dustval);
+                //     echartDataFc.xData.push(el.time);
+                // });
                 let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
                     return acr > cur ? acr : cur;
                 });
                 maxY.value = formatRoundNum(max1 * 1.5);
             } else {
                 activeIndex.value = 0;
-                choiceData[activeIndex.value].history.forEach((el) => {
-                    echartDataFc.maxData.data.push(el.dustval);
-                    echartDataFc.xData.push(el.time);
-                });
+                echartDatas.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list']
+                echartDat.push({ id: '1', time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveTime'], value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal'] })
+                echartDat.push({ id: '2', time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'], value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'] })
+                let unique = uniqueObjects(echartDat, 'time');
+                let setData = [...echartDatas.value, ...unique]
+                setData.forEach((m, n) => {
+                    echartDataFc.xData.push(m.time);
+                    if (unique.filter(t => t.time == m.time).length != 0 && m.id == '1') {
+                        echartDataFc.maxData.data.push(0);
+                        echartDataFc.minData.data.push(m.value);
+                        echartDataFc.aveValue.data.push(0);
+                    } else if (unique.filter(t => t.time == m.time).length != 0 && m.id == '2') {
+                        echartDataFc.maxData.data.push(0);
+                        echartDataFc.minData.data.push(0);
+                        echartDataFc.aveValue.data.push(m.value);
+                    } else {
+                        echartDataFc.maxData.data.push(m.value);
+                        echartDataFc.minData.data.push(0);
+                        echartDataFc.aveValue.data.push(0);
+                    }
+                })
+
+                // choiceData[activeIndex.value].history.forEach((el) => {
+                //     echartDataFc.maxData.data.push(el.dustval);
+                //     echartDataFc.xData.push(el.time);
+                // });
                 let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
                     return acr > cur ? acr : cur;
                 });
@@ -213,11 +305,11 @@ async function getWindDeviceList() {
                     label: '通信状态',
                     value: el.netStatus == '0' ? '断开' : '连接',
                     listR: [
-                        { id: 0, label: '安装位置',dw:'', value: el.strinstallpos },
-                        { id: 1, label: '粉尘浓度',dw:'(mg/m³)', value: el.dustval },
-                        { id: 2, label: '巷道湿度',dw:'(RH)', value: el.humidity },
-                        { id: 4, label: '巷道温度',dw:'(℃)', value: el.temperature },
-                        { id: 3, label: '是否报警',dw:'', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
+                        { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
+                        { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval },
+                        { id: 2, label: '巷道湿度', dw: '(RH)', value: el.humidity },
+                        { id: 4, label: '巷道温度', dw: '(℃)', value: el.temperature },
+                        { id: 3, label: '是否报警', dw: '', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
                     ],
                 })
             });

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

@@ -2,12 +2,8 @@
   <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>
@@ -19,8 +15,8 @@
             </div>
             <div class="item-container">
               <div class="title">巷道温度</div>
-              <div class="value"
-                ><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span> <span>℃</span>
+              <div class="value"><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span>
+                <span>℃</span>
               </div>
             </div>
           </div>
@@ -30,9 +26,9 @@
             </div>
             <div class="item-container">
               <div class="title">粉尘浓度</div>
-              <div class="value"
-                ><span class="data">{{ dustMonitor.humidity ? dustMonitor.humidity : '-' }}</span> <span>mg/m³</span></div
-              >
+              <div class="value"><span class="data">{{ dustMonitor.humidity ? dustMonitor.humidity : '-' }}</span>
+                <span>mg/m³</span>
+              </div>
             </div>
           </div>
           <div class="top-item">
@@ -41,9 +37,8 @@
             </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">
@@ -72,7 +67,8 @@
           <div class="dust-group">
             <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>
@@ -80,7 +76,8 @@
             </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>
@@ -91,14 +88,8 @@
         <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>
@@ -106,375 +97,445 @@
   </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 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: 'hourAvg',
-        },
-        {
-          legend: '粉尘最大浓度',
-          seriesName: '(mg/m³)',
-          ymax: 5,
-          yname: 'mg/m³',
-          linetype: 'line',
-          yaxispos: 'left',
-          color: '#EE6666',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'hourMax',
-        },
-        {
-          legend: '粉尘最小浓度',
-          seriesName: '(mg/m³)',
-          ymax: 5,
-          yname: 'mg/m³',
-          linetype: 'line',
-          yaxispos: 'left',
-          color: '#9BCB75',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'hourMin',
-        },
-      ];
-
-      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,
+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';
+import { array } from 'vue-types';
+
+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 echartDat = reactive<any[]>([])
+    const echartDatas = ref<any[]>([])
+
+    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: 'dustval',
+      },
+      {
+        legend: '预测值',
+        seriesName: '(mg/m³)',
+        ymax: 5,
+        yname: 'mg/m³',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#EE6666',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'ratio',
+      },
+      {
+        legend: '最新值',
+        seriesName: '(mg/m³)',
+        ymax: 5,
+        yname: 'mg/m³',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#9BCB75',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'totalDust',
+      },
+    ];
+
+    const columns = [
+      {
+        title: '安装位置',
+        dataIndex: 'position',
+        width: 60,
+        align: 'center',
+        customRender: ({ index }) => {
+          return `测点${index}`;
         },
-        {
-          title: '测点状态',
-          dataIndex: 'state',
-          align: 'center',
-          width: 50,
-          customRender: () => {
-            return `正常`;
-          },
+      },
+      {
+        title: '安装距离(m)',
+        dataIndex: 'pos',
+        align: 'center',
+        width: 60,
+      },
+      {
+        title: '测点温度',
+        dataIndex: 'value',
+        align: 'center',
+        width: 50,
+      },
+      {
+        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();
+    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'],
+    });
 
-      function handleVisibleChange(visible) {
-        if (visible) {
-          loading.value = true;
-          setModalProps({ loading: true, confirmLoading: true });
-
-          setTimeout(() => {
-            loading.value = false;
-            setModalProps({ loading: false, confirmLoading: false });
-          }, 1000);
-        }
-      }
+    const [register, { setModalProps }] = useModalInner();
 
-      // 选择监测
-      function selectDevice(id) {
+    function handleVisibleChange(visible) {
+      if (visible) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
+
         setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 300);
+        }, 1000);
       }
+    }
 
-      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'];
-            dustMonitor.value = item.readData;
-          }
-        });
+    // 选择监测
+    function selectDevice(id) {
+      loading.value = true;
+      setModalProps({ loading: true, confirmLoading: true });
+      setTimeout(() => {
+        loading.value = false;
+        activeDeviceID.value = id;
+        setModalProps({ loading: false, confirmLoading: false });
+      }, 300);
+    }
+    function uniqueObjects(arr, key) {
+      const unique = arr.map((e) => e[key])
+        // 存储每个属性值
+        .map((e, i, final) => final.indexOf(e) === i && i)
+        // 移除重复值的索引
+        .filter((e) => arr[e])
+        // 映射到对应的对象
+        .map((e) => arr[e]);
+      return unique;
+    }
+
+    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'];
+
+          echartDatas.value = JSON.parse(item.readData.expectInfo)['list']
+
+          echartDat.push({ id: '1', time: JSON.parse(item.readData.expectInfo)['aveTime'], value: JSON.parse(item.readData.expectInfo)['aveVal'] })
+          echartDat.push({ id: '2', time: JSON.parse(item.readData.expectInfo)['nowTime'], value: JSON.parse(item.readData.expectInfo)['nowVal'] })
+
+          let unique = uniqueObjects(echartDat, 'time');
+          let setData = [...echartDatas.value, ...unique]
+          setData.forEach((m, n) => {
+            if (unique.filter(t => t.time == m.time).length != 0 && m.id == '1') {
+              m.ratio = m.value
+              m.totalDust = ''
+              m.dustval = ''
+            } else if (unique.filter(t => t.time == m.time).length != 0 && m.id == '2') {
+              m.ratio = ''
+              m.totalDust = m.value
+              m.dustval = ''
+            } else {
+              m.ratio = ''
+              m.totalDust = ''
+              m.dustval = m.value
+            }
+          })
+          posList.value = setData
+
+
+          console.log(setData, '111111111111111============')
+
+          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;
+
+      span:hover {
+        color: #89ffff;
       }
-      .link-item {
-        position: relative;
-        cursor: pointer;
-        line-height: 30px;
-        padding-left: 30px;
-        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 {
+    }
+
+    .right-top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 30px;
+      padding: 0 10px;
+
+      .top-item {
+        width: 155px;
+        height: 60px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        margin-bottom: 30px;
-        padding: 0 10px;
-        .top-item {
-          width: 155px;
+        justify-content: center;
+        align-items: center;
+        background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
+        padding-top: 16px;
+
+        .icon {
+          width: 58px;
           height: 60px;
           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;
-          .icon {
-            width: 58px;
-            height: 60px;
-            display: flex;
-            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 {
             position: relative;
+            width: 110px;
             top: -8px;
-          }
-          .item-container {
-            width: 100px;
-            display: flex;
-            flex-direction: column;
-            // justify-content: start;
-            div {
-              padding-left: 8px;
-            }
-            .title {
+
+            .data {
+              display: inline-block;
+              width: 50px;
+              font-family: douyuFont;
+              font-weight: 600;
               font-size: 14px;
-              margin-bottom: 8px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              color: #28dce4;
             }
-            .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;
-              }
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
+              font-size: 14px;
+              color: #ffffffdd;
             }
           }
         }
-        .warning-box {
-          padding-top: 0px;
-          .icon {
-            margin-top: 20px;
-            .icon-style {
-              color: #fdb146;
-            }
+      }
+
+      .warning-box {
+        padding-top: 0px;
+
+        .icon {
+          margin-top: 20px;
+
+          .icon-style {
+            color: #fdb146;
           }
+        }
+
+        .title {
+          padding-top: 0px;
+        }
+
+        .warning-value {
+          font-family: electronicFont;
+          font-size: 18px;
+          color: #61ddb1;
+        }
+      }
+    }
+
+    .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 {
-            padding-top: 0px;
+            position: absolute;
+            top: 80px;
+            left: 70px;
+            font-size: 16px;
           }
-          .warning-value {
-            font-family: electronicFont;
+
+          .value {
+            position: absolute;
+            top: 50px;
+            left: 50px;
+            font-family: 'douyuFont';
+            color: #20dbfd;
+            text-shadow: 0 0 25px #00d8ff;
             font-size: 18px;
-            color: #61ddb1;
-          }
-        }
-      }
-      .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-weight: bolder;
+
+            span {
+              font-family: Arial, Helvetica, sans-serif;
               font-size: 16px;
-            }
-            .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;
-              }
+              color: aliceblue;
+              margin-left: 8px;
             }
           }
         }
       }
-      .right-bottom {
-        margin-top: 20px;
-        .echarts-box {
-          width: 100%;
-          height: 270px;
-        }
+    }
+
+    .right-bottom {
+      margin-top: 20px;
+
+      .echarts-box {
+        width: 100%;
+        height: 270px;
       }
     }
   }
+}
 </style>