主风机管控曲线配置 监测曲线图bug修改

src/views/vent/monitorManager/comment/FanDeviceEcharts.vue

@@ -177,291 +177,291 @@
   </div>
 </template>
 <script lang="ts">
-  import { ref, defineComponent, watch, reactive, onMounted, watchEffect, inject } from 'vue';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import dayjs from 'dayjs';
-  import { defHttp } from '/@/utils/http/axios';
-  import { Select, Pagination } from 'ant-design-vue';
+import { ref, defineComponent, watch, reactive, onMounted, watchEffect, inject } from 'vue';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import dayjs from 'dayjs';
+import { defHttp } from '/@/utils/http/axios';
+import { Select, Pagination } from 'ant-design-vue';
 
-  export default defineComponent({
-    name: 'DeviceEcharts',
-    components: { BarAndLine, Select, Pagination },
-    props: {
-      fan1ChartsColumns: {
-        type: Array,
-        default: () => [],
+export default defineComponent({
+  name: 'DeviceEcharts',
+  components: { BarAndLine, Select, Pagination },
+  props: {
+    fan1ChartsColumns: {
+      type: Array,
+      default: () => [],
+    },
+    fan2ChartsColumns: {
+      type: Array,
+      default: () => [],
+    },
+    chartsColumnsHistory: {
+      type: Array,
+      default: () => [],
+    },
+    chartsColumnsType: {
+      type: String,
+      required: true,
+    },
+    dataSource: {
+      type: Array,
+      default: () => [],
+    },
+    deviceListApi: {
+      type: Function,
+      required: true,
+    },
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    xAxisPropType: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const globalConfig = inject('globalConfig');
+    let historyList;
+    const chartsType = ref('history');
+    const deviceId = ref('');
+    const options = ref([]);
+    const historyParams = reactive({
+      ttime_begin: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+      ttime_end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      skip: '8',
+      startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      interval: '1h',
+    });
+    const resultXAxisPropType = ref('');
+    const resultDataSource = ref<any[]>([]);
+    const detailDataSource = ref<any[]>([]);
+    const currentPage = ref<number>(1);
+    const pageSize = ref<number>(20);
+    const total = ref(0);
+
+    const echartsOption = {
+      grid: {
+        top: '50px',
+        left: '10px',
+        right: props.fan1ChartsColumns.length * 15 + 'px',
+        bottom: '15px',
+        containLabel: true,
       },
-      fan2ChartsColumns: {
-        type: Array,
-        default: () => [],
+      toolbox: {
+        feature: {},
       },
-      chartsColumnsHistory: {
-        type: Array,
-        default: () => [],
+      xAxis: {
+        axisLabel: {
+          interval: 0,
+        },
       },
-      chartsColumnsType: {
-        type: String,
-        required: true,
+    };
+    const echartsOption1 = {
+      grid: {
+        top: '60px',
+        left: '10px',
+        right: props.fan1ChartsColumns.length * 15 + 'px',
+        bottom: '35px',
+        containLabel: true,
       },
-      dataSource: {
-        type: Array,
-        default: () => [],
+      toolbox: {
+        feature: {},
       },
-      deviceListApi: {
-        type: Function,
-        required: true,
+      legend: {
+        top: 30,
       },
-      deviceType: {
-        type: String,
-        required: true,
+      xAxis: {
+        interval: 0,
       },
-      option: {
-        type: Object,
-        default: () => ({}),
+    };
+    const echartsOption2 = {
+      grid: {
+        top: '70px',
+        left: '10px',
+        right: props.fan1ChartsColumns.length * 15 + 'px',
+        bottom: '5px',
+        containLabel: true,
       },
-      xAxisPropType: {
-        type: String,
-        required: true,
+      toolbox: {
+        feature: {},
       },
-    },
-    setup(props) {
-      const globalConfig = inject('globalConfig');
-      let historyList;
-      const chartsType = ref('history');
-      const deviceId = ref('');
-      const options = ref([]);
-      const historyParams = reactive({
-        ttime_begin: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
-        ttime_end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-        skip: '8',
-        startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
-        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-        interval: '1h',
-      });
-      const resultXAxisPropType = ref('');
-      const resultDataSource = ref<any[]>([]);
-      const detailDataSource = ref<any[]>([]);
-      const currentPage = ref<number>(1);
-      const pageSize = ref<number>(20);
-      const total = ref(0);
-
-      const echartsOption = {
-        grid: {
-          top: '50px',
-          left: '10px',
-          right: props.fan1ChartsColumns.length * 15 + 'px',
-          bottom: '15px',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-        xAxis: {
-          axisLabel: {
-            interval: 0,
-          },
-        },
-      };
-      const echartsOption1 = {
-        grid: {
-          top: '60px',
-          left: '10px',
-          right: props.fan1ChartsColumns.length * 15 + 'px',
-          bottom: '35px',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-        legend: {
-          top: 40,
-        },
-        xAxis: {
-          interval: 0,
-        },
-      };
-      const echartsOption2 = {
-        grid: {
-          top: '70px',
-          left: '10px',
-          right: props.fan1ChartsColumns.length * 15 + 'px',
-          bottom: '5px',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-      };
+    };
 
-      const onChange = (pageNumber: number) => {
-        console.log('Page: ', pageNumber);
-      };
+    const onChange = (pageNumber: number) => {
+      console.log('Page: ', pageNumber);
+    };
 
-      watch(
-        [chartsType, deviceId, historyParams, pageSize, currentPage],
-        async (
-          [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
-          [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
-        ) => {
-          console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
-          if (newChartsType === 'listMonitor') {
-            // 实时监测所有
-            resultDataSource.value = props.dataSource;
-          } else if (newChartsType === 'history') {
-            resultDataSource.value = [];
-            // 历史
-            if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
-              currentPage.value = 1;
-            }
-            const device = options.value.find((device) => device['deviceID'] === newDeviceId);
-            if (device) {
-              let res;
-              if (props.dataSource['stationtype'] !== 'redis') {
-                resultXAxisPropType.value = 'ttime';
-                historyList = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params });
-                const datas = await historyList({
-                  ttime_begin: newHistoryParams.ttime_begin,
-                  ttime_end: newHistoryParams.ttime_end,
-                  strtype: device.deviceType,
-                  gdeviceid: newDeviceId,
-                  skip: historyParams.skip,
-                  pageSize: pageSize.value,
-                  pageNo: currentPage.value,
-                  column: 'createTime',
-                });
-                res = datas['datalist']['records'];
-                if (res && res.length > 0) {
-                  resultDataSource.value = res.map((item) => Object.assign(item, item.readData));
-                } else {
-                  resultDataSource.value = [];
-                }
-                total.value = datas['datalist'].total;
+    watch(
+      [chartsType, deviceId, historyParams, pageSize, currentPage],
+      async (
+        [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
+        [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
+      ) => {
+        console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
+        if (newChartsType === 'listMonitor') {
+          // 实时监测所有
+          resultDataSource.value = props.dataSource;
+        } else if (newChartsType === 'history') {
+          resultDataSource.value = [];
+          // 历史
+          if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
+            currentPage.value = 1;
+          }
+          const device = options.value.find((device) => device['deviceID'] === newDeviceId);
+          if (device) {
+            let res;
+            if (props.dataSource['stationtype'] !== 'redis') {
+              resultXAxisPropType.value = 'ttime';
+              historyList = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params });
+              const datas = await historyList({
+                ttime_begin: newHistoryParams.ttime_begin,
+                ttime_end: newHistoryParams.ttime_end,
+                strtype: device.deviceType,
+                gdeviceid: newDeviceId,
+                skip: historyParams.skip,
+                pageSize: pageSize.value,
+                pageNo: currentPage.value,
+                column: 'createTime',
+              });
+              res = datas['datalist']['records'];
+              if (res && res.length > 0) {
+                resultDataSource.value = res.map((item) => Object.assign(item, item.readData));
               } else {
-                historyList = (params) => defHttp.post({ url: '/monitor/history/getHistoryData', params });
-                resultXAxisPropType.value = 'time';
-                res = await historyList({
-                  pageSize: pageSize.value,
-                  pageNum: currentPage.value,
-                  startTime: newHistoryParams.ttime_begin,
-                  endTime: newHistoryParams.ttime_end,
-                  deviceId: newDeviceId,
-                  strtype: device.deviceType,
-                  interval: historyParams.interval,
-                  column: 'createTime',
-                });
-                if (res && res.records && res.records.length > 0) {
-                  resultDataSource.value = res.records.map((item) => Object.assign(item, item.readData));
-                } else {
-                  resultDataSource.value = [];
-                }
-                total.value = res.total;
+                resultDataSource.value = [];
               }
-            }
-          } else if (newChartsType === 'detail') {
-            // 设备详情
-            resultXAxisPropType.value = 'readTime';
-            if (newDeviceId !== oldDeviceId) {
-              detailDataSource.value = [];
+              total.value = datas['datalist'].total;
+            } else {
+              historyList = (params) => defHttp.post({ url: '/monitor/history/getHistoryData', params });
+              resultXAxisPropType.value = 'time';
+              res = await historyList({
+                pageSize: pageSize.value,
+                pageNum: currentPage.value,
+                startTime: newHistoryParams.ttime_begin,
+                endTime: newHistoryParams.ttime_end,
+                deviceId: newDeviceId,
+                strtype: device.deviceType,
+                interval: historyParams.interval,
+                column: 'createTime',
+              });
+              if (res && res.records && res.records.length > 0) {
+                resultDataSource.value = res.records.map((item) => Object.assign(item, item.readData));
+              } else {
+                resultDataSource.value = [];
+              }
+              total.value = res.total;
             }
           }
+        } else if (newChartsType === 'detail') {
+          // 设备详情
+          resultXAxisPropType.value = 'readTime';
+          if (newDeviceId !== oldDeviceId) {
+            detailDataSource.value = [];
+          }
         }
-      );
-      watchEffect(() => {
-        if (chartsType.value === 'detail') {
-          const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
-          if (currentData) {
-            const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
-            if (!isHas) {
-              if (detailDataSource.value.length < 15) {
-                detailDataSource.value.push(currentData);
-              } else {
-                detailDataSource.value.shift();
-                detailDataSource.value.push(currentData);
-              }
+      }
+    );
+    watchEffect(() => {
+      if (chartsType.value === 'detail') {
+        const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
+        if (currentData) {
+          const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
+          if (!isHas) {
+            if (detailDataSource.value.length < 15) {
+              detailDataSource.value.push(currentData);
+            } else {
+              detailDataSource.value.shift();
+              detailDataSource.value.push(currentData);
             }
           }
         }
-      });
+      }
+    });
 
-      onMounted(async () => {
-        const res = await props.deviceListApi();
-        // debugger;
-        if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
-          options.value = res['msgTxt'][0]['datalist'];
-          deviceId.value = options.value[0]['deviceID'];
-        }
-      });
+    onMounted(async () => {
+      const res = await props.deviceListApi();
+      // debugger;
+      if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
+        options.value = res['msgTxt'][0]['datalist'];
+        deviceId.value = options.value[0]['deviceID'];
+      }
+    });
 
-      return {
-        chartsType,
-        deviceId,
-        resultDataSource,
-        historyParams,
-        options,
-        resultXAxisPropType,
-        detailDataSource,
-        currentPage,
-        pageSize,
-        total,
-        echartsOption,
-        echartsOption1,
-        echartsOption2,
-        onChange,
-        globalConfig,
-      };
-    },
-  });
+    return {
+      chartsType,
+      deviceId,
+      resultDataSource,
+      historyParams,
+      options,
+      resultXAxisPropType,
+      detailDataSource,
+      currentPage,
+      pageSize,
+      total,
+      echartsOption,
+      echartsOption1,
+      echartsOption2,
+      onChange,
+      globalConfig,
+    };
+  },
+});
 </script>
 <style lang="less">
-  :deep(.vent-select-dropdown) {
+:deep(.vent-select-dropdown) {
+  color: #000 !important;
+  .vent-select-item {
     color: #000 !important;
-    .vent-select-item {
-      color: #000 !important;
-    }
   }
+}
 </style>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  .charts-container {
-    position: relative;
+@import '/@/design/theme.less';
+.charts-container {
+  position: relative;
+  height: 100%;
+  .charts-box {
+    width: 100%;
     height: 100%;
-    .charts-box {
-      width: 100%;
+    position: absolute;
+    bottom: 0;
+    top: 0px;
+    .echarts-group {
       height: 100%;
-      position: absolute;
-      bottom: 0;
-      top: 0px;
-      .echarts-group {
-        height: 100%;
-        display: flex;
-        :deep(div) {
-          border-right: 1px solid #ffffff22 !important;
-        }
+      display: flex;
+      :deep(div) {
+        border-right: 1px solid #ffffff22 !important;
       }
     }
+  }
 
-    .@{ventSpace}-picker,
-    .@{ventSpace}-select-selector {
-      background: #00000017 !important;
-      border: 1px solid @vent-form-item-border !important;
-      input,
-      .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-picker-suffix {
-        color: #fff !important;
-      }
-      .@{ventSpace}-select-selection-placeholder {
-        color: #b7b7b7 !important;
-      }
-    }
-    .@{ventSpace}-select-arrow,
-    .@{ventSpace}-picker-separator {
+  .@{ventSpace}-picker,
+  .@{ventSpace}-select-selector {
+    background: #00000017 !important;
+    border: 1px solid @vent-form-item-border !important;
+    input,
+    .@{ventSpace}-select-selection-item,
+    .@{ventSpace}-picker-suffix {
       color: #fff !important;
     }
+    .@{ventSpace}-select-selection-placeholder {
+      color: #b7b7b7 !important;
+    }
   }
-  :deep(.@{ventSpace}-select-dropdown) {
+  .@{ventSpace}-select-arrow,
+  .@{ventSpace}-picker-separator {
+    color: #fff !important;
+  }
+}
+:deep(.@{ventSpace}-select-dropdown) {
+  color: #000 !important;
+  .@{ventSpace}-select-item {
     color: #000 !important;
-    .@{ventSpace}-select-item {
-      color: #000 !important;
-    }
   }
+}
 </style>