[Mod 0000]优化历史分析组件

src/components/chart/BarAndLine.vue

@@ -5,294 +5,301 @@
   <div v-if="!spinning" ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref, Ref, reactive, watchEffect, watch, nextTick } from 'vue';
-import { useECharts } from '/@/hooks/web/useECharts';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import EchartsUtil from '/@/utils/echartsUtil';
-import { merge } from 'lodash-es';
-type ChartColumn = {
-  legend: string;
-  seriesName: string;
-  ymax: number;
-  yname: string;
-  linetype: string;
-  yaxispos: string;
-  color: string;
-  sort: number;
-  xRotate: number;
-  dataIndex: string;
-};
-export default defineComponent({
-  name: 'BarAndLine',
-  props: {
-    chartsColumns: {
-      type: Array as PropType<ChartColumn[]>,
-      default: () => [],
-    },
-    chartsColumnsType: {
-      type: String,
-    },
-    chartsType: {
-      type: String,
-      default: '',
-    },
-    dataSource: {
-      type: Array,
-      default: () => [],
-    },
-    option: {
-      type: Object,
-      default: () => ({}),
-    },
-    xAxisPropType: {
-      type: String,
-      required: true,
-    },
-    width: {
-      type: String as PropType<string>,
-      default: '100%',
-    },
-    height: {
-      type: String as PropType<string>,
-      default: 'calc(100vh - 78px)',
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect, watch, nextTick } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import EchartsUtil from '/@/utils/echartsUtil';
+  import { merge } from 'lodash-es';
+  type ChartColumn = {
+    legend: string;
+    seriesName: string;
+    ymax: number;
+    yname: string;
+    linetype: string;
+    yaxispos: string;
+    color: string;
+    sort: number;
+    xRotate: number;
+    dataIndex: string;
+  };
+  export default defineComponent({
+    name: 'BarAndLine',
+    props: {
+      chartsColumns: {
+        type: Array as PropType<ChartColumn[]>,
+        default: () => [],
+      },
+      chartsColumnsType: {
+        type: String,
+      },
+      chartsType: {
+        type: String,
+        default: '',
+      },
+      dataSource: {
+        type: Array,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      xAxisPropType: {
+        type: String,
+        required: true,
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
     },
-  },
-  emits: ['refresh'],
-  setup(props, { emit }) {
-    const spinning = ref<boolean>(true);
-    const chartRef = ref<HTMLDivElement | null>(null);
-    const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
-    const chartData = props.chartsColumnsType ? getTableHeaderColumns(props.chartsColumnsType) : [];
-    let chartsColumns = (props.chartsColumns.length > 0 ? props.chartsColumns : chartData) as ChartColumn[];
-    let tempYmax: number[] = [];
-    let tempYmin: number[] = [];
-    // let groupedByColumns = {};
-    const option = reactive({
-      name: '',
-      color: ['#7B68EE', '#0000CD', '#6495ED', '#00BFFF', '#AFEEEE', '#008080', '#00FA9A', '#2E8B57', '#FAFAD2', '#DAA520'],
-      tooltip: {},
-      grid: {},
-      toolbox: {
-        feature: {
-          saveAsImage: {
-            iconStyle: {
-              borderColor: '#ffffff',
+    emits: ['refresh'],
+    setup(props, { emit }) {
+      const spinning = ref<boolean>(true);
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const chartData = props.chartsColumnsType ? getTableHeaderColumns(props.chartsColumnsType) : [];
+      let chartsColumns = (props.chartsColumns.length > 0 ? props.chartsColumns : chartData) as ChartColumn[];
+      let tempYmax: number[] = [];
+      let tempYmin: number[] = [];
+      // let groupedByColumns = {};
+      const option = reactive({
+        name: '',
+        color: ['#7B68EE', '#0000CD', '#6495ED', '#00BFFF', '#AFEEEE', '#008080', '#00FA9A', '#2E8B57', '#FAFAD2', '#DAA520'],
+        tooltip: {},
+        grid: {},
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              iconStyle: {
+                borderColor: '#ffffff',
+              },
+              show: false,
             },
-            show: false,
           },
         },
-      },
-      dataZoom: {},
-      legend: {
-        textStyle: {
-          color: '#ffffff', // 字体颜色
+        dataZoom: {},
+        legend: {
+          textStyle: {
+            color: '#ffffff', // 字体颜色
+          },
+          top: '20',
         },
-        top: '20',
-      },
-      timeline: null,
-      xAxis: {},
-      yAxis: null,
-      series: null,
-    });
-    let optionUtil;
+        timeline: null,
+        xAxis: {},
+        yAxis: null,
+        series: null,
+      });
+      let optionUtil;
 
-    watchEffect(() => {
-      props.dataSource && props.xAxisPropType && option.series && initCharts();
-    });
+      watchEffect(() => {
+        props.dataSource && props.xAxisPropType && option.series && initCharts();
+      });
 
-    watch([() => props.chartsType, () => props.chartsColumns], ([newChartsType, newChartsColumns]) => {
-      spinning.value = true;
-      chartsColumns = newChartsColumns;
-      optionUtil.initChartOption(newChartsType, newChartsColumns);
-      spinning.value = false;
-      initCharts(true);
-      emit('refresh');
-    });
+      watch([() => props.chartsType, () => props.chartsColumns], ([newChartsType, newChartsColumns]) => {
+        spinning.value = true;
+        chartsColumns = newChartsColumns;
+        optionUtil.initChartOption(newChartsType, newChartsColumns);
+        spinning.value = false;
+        initCharts(true);
+        emit('refresh');
+      });
 
-    function initChartsOption() {
-      // debugger;
-      optionUtil = new EchartsUtil(merge(option, props.option));
-      optionUtil.initChartOption(props.chartsType, chartsColumns);
-    }
-    initChartsOption();
+      function initChartsOption() {
+        // debugger;
+        optionUtil = new EchartsUtil(merge(option, props.option));
+        optionUtil.initChartOption(props.chartsType, chartsColumns);
+      }
+      initChartsOption();
 
-    function initCharts(isRefresh = false) {
-      if (props.dataSource.length < 1) return;
-      //轴数据
-      let isFresh = false;
-      if (option.series && option.series.length === chartsColumns.length) {
-        let xAxisData = props.dataSource.map((item) => item[props.xAxisPropType]);
-        chartsColumns = [...chartsColumns].filter((propType: any, index) => {
-          if (!propType) return;
-          if (props.chartsType == 'listMonitor') {
-            option.series[index].type = 'bar';
-          }
-          console.log(option.series[index], '000===')
-          option.series[index].data = props.dataSource.map((item) => Number(item[propType.dataIndex]) || 0);
-          // console.log('nnn', option.series[index].data);
-          // 这里动态计算echarts y轴最大值
-          const max = Math.max(...option.series[index].data);
-          const min = Math.min(...option.series[index].data);
-          const digitCount = max.toFixed(0).length;
-          const minDigitCount = min.toFixed(0).length;
-          let yMax = 0,
-            yMin = 0;
-          if (digitCount < 2) {
-            if (max < 0.5) {
-              yMax = 1;
-            } else if (max < 0.9) {
-              yMax = 1.5;
-            } else if (max < 5) {
-              yMax = 5;
-            } else if (max < 10) {
-              yMax = 10;
-            }
-          } else if (digitCount < 3) {
-            const n = Number((Number(max.toFixed(0)) / 10).toFixed(0));
-            if (max < n * 10 + 5) {
-              yMax = (n + 1) * 10;
-            } else {
-              yMax = (n + 2) * 10;
-            }
-          } else if (digitCount < 4) {
-            const n = Number((Number(max.toFixed(0)) / 100).toFixed(0));
-            if (max < n * 100 + 50) {
-              yMax = (n + 1) * 100;
-            } else {
-              yMax = (n + 2) * 100;
+      function initCharts(isRefresh = false) {
+        if (props.dataSource.length < 1) return;
+        //轴数据
+        let isFresh = false;
+        if (option.series && option.series.length === chartsColumns.length) {
+          let xAxisData = props.dataSource.map((item) => item[props.xAxisPropType]);
+          chartsColumns = [...chartsColumns].filter((propType: any, index) => {
+            if (!propType) return;
+            if (props.chartsType == 'listMonitor') {
+              option.series[index].type = 'bar';
             }
-          } else if (digitCount < 5) {
-            const n = Number((Number(max.toFixed(0)) / 1000).toFixed(0));
-            if (max < n * 1000 + 500) {
-              yMax = (n + 1) * 1000;
+            console.log(option.series[index], '000===');
+            option.series[index].data = props.dataSource.map((item) => Number(item[propType.dataIndex]) || 0);
+            // console.log('nnn', option.series[index].data);
+            // 这里动态计算echarts y轴最大值
+            const max = Math.max(...option.series[index].data);
+            const min = Math.min(...option.series[index].data);
+            const digitCount = Math.ceil(Number(max));
+            const minDigitCount = Math.floor(Number(min));
+
+            if (props.chartsType === 'history') {
+              const disLen = Math.abs(max - min);
+              propType.ymax = digitCount + disLen / 3;
+              propType.ymin = minDigitCount - disLen / 3 > 0 || minDigitCount < 0 ? minDigitCount - disLen / 3 : 0;
             } else {
-              yMax = (n + 1) * 1000 + 500;
+              let yMax = 0,
+                yMin = 0;
+              if (digitCount < 2) {
+                if (max < 0.5) {
+                  yMax = 1;
+                } else if (max < 0.9) {
+                  yMax = 1.5;
+                } else if (max < 5) {
+                  yMax = 5;
+                } else if (max < 10) {
+                  yMax = 10;
+                }
+              } else if (digitCount < 3) {
+                const n = Number((Number(max.toFixed(0)) / 10).toFixed(0));
+                if (max < n * 10 + 5) {
+                  yMax = (n + 1) * 10;
+                } else {
+                  yMax = (n + 2) * 10;
+                }
+              } else if (digitCount < 4) {
+                const n = Number((Number(max.toFixed(0)) / 100).toFixed(0));
+                if (max < n * 100 + 50) {
+                  yMax = (n + 1) * 100;
+                } else {
+                  yMax = (n + 2) * 100;
+                }
+              } else if (digitCount < 5) {
+                const n = Number((Number(max.toFixed(0)) / 1000).toFixed(0));
+                if (max < n * 1000 + 500) {
+                  yMax = (n + 1) * 1000;
+                } else {
+                  yMax = (n + 1) * 1000 + 500;
+                }
+              } else if (digitCount < 6) {
+                const n = Number((Number(max.toFixed(0)) / 10000).toFixed(0));
+                if (max < n * 10000 + 5000) {
+                  yMax = (n + 1) * 10000;
+                } else {
+                  yMax = (n + 1) * 10000 + 5000;
+                }
+              }
+
+              if (minDigitCount < 2) {
+                if (min > 1.5) {
+                  yMin = 1.0;
+                } else if (min > 5) {
+                  yMin = 5;
+                } else {
+                  yMin = 0;
+                }
+              } else if (minDigitCount < 3) {
+                const n = Number((Number(min.toFixed(0)) / 10).toFixed(0));
+                if (n > 1) {
+                  yMin = (n - 1) * 10;
+                } else {
+                  yMin = 10;
+                }
+              } else if (digitCount < 4) {
+                const n = Number((Number(min.toFixed(0)) / 100).toFixed(0));
+                if (n > 1) {
+                  yMin = (n - 1) * 100;
+                } else {
+                  yMin = 100;
+                }
+              } else if (digitCount < 5) {
+                const n = Number((Number(min.toFixed(0)) / 1000).toFixed(0));
+                if (n > 1) {
+                  yMin = (n - 1) * 1000;
+                } else {
+                  yMin = 1000;
+                }
+              } else if (digitCount < 6) {
+                const n = Number((Number(min.toFixed(0)) / 10000).toFixed(0));
+                if (n > 1) {
+                  yMin = (n - 1) * 10000;
+                } else {
+                  yMin = 10000;
+                }
+              }
+
+              propType.ymax = yMax;
+              propType.ymin = yMin;
             }
-          } else if (digitCount < 6) {
-            const n = Number((Number(max.toFixed(0)) / 10000).toFixed(0));
-            if (max < n * 10000 + 5000) {
-              yMax = (n + 1) * 10000;
+            return true;
+          });
+          // debugger;
+          // 根据sort分组
+          const groupedBy = {};
+          for (const item of chartsColumns) {
+            if (groupedBy[item.sort]) {
+              groupedBy[item.sort].push(item);
             } else {
-              yMax = (n + 1) * 10000 + 5000;
+              groupedBy[item.sort] = [item];
             }
           }
-
-          if (minDigitCount < 2) {
-            if (min > 1.5) {
-              yMin = 1.0;
-            } else if (min > 5) {
-              yMin = 5;
-            } else {
-              yMin = 0;
+          // 根据分组找ymax最大值
+          const newChartsColumns: ChartColumn[] = [];
+          let index = 0;
+          for (let sortId in groupedBy) {
+            const group = groupedBy[sortId];
+            let ymax = group[0].ymax;
+            let ymin = group[0].ymin;
+            for (let i = 1; i < group.length; i++) {
+              if (group[i].ymax > ymax) {
+                ymax = group[i].ymax;
+              }
             }
-          } else if (minDigitCount < 3) {
-            const n = Number((Number(min.toFixed(0)) / 10).toFixed(0));
-            if (n > 1) {
-              yMin = (n - 1) * 10;
-            } else {
-              yMin = 10;
+            for (let i = 1; i < group.length; i++) {
+              if (group[i].ymin < ymin) {
+                ymin = group[i].ymin;
+              }
             }
-          } else if (digitCount < 4) {
-            const n = Number((Number(min.toFixed(0)) / 100).toFixed(0));
-            if (n > 1) {
-              yMin = (n - 1) * 100;
-            } else {
-              yMin = 100;
+            if (!tempYmax[index] || tempYmax[index] != ymax) {
+              tempYmax[index] = ymax;
+              isFresh = true;
             }
-          } else if (digitCount < 5) {
-            const n = Number((Number(min.toFixed(0)) / 1000).toFixed(0));
-            if (n > 1) {
-              yMin = (n - 1) * 1000;
-            } else {
-              yMin = 1000;
+            if (tempYmin[index] != ymin) {
+              tempYmin[index] = ymin;
+              isFresh = true;
             }
-          } else if (digitCount < 6) {
-            const n = Number((Number(min.toFixed(0)) / 10000).toFixed(0));
-            if (n > 1) {
-              yMin = (n - 1) * 10000;
-            } else {
-              yMin = 10000;
+            for (let i = 0; i < group.length; i++) {
+              group[i].ymax = ymax;
+              group[i].ymin = ymin;
+              newChartsColumns.push(group[i]);
             }
+            ++index;
           }
-
-          propType.ymax = yMax;
-          propType.ymin = yMin;
-          return true;
-        });
-        // debugger;
-        // 根据sort分组
-        const groupedBy = {};
-        for (const item of chartsColumns) {
-          if (groupedBy[item.sort]) {
-            groupedBy[item.sort].push(item);
+          chartsColumns = newChartsColumns;
+          option.xAxis[0].data = xAxisData;
+          if (isFresh) {
+            spinning.value = true;
+            optionUtil.initChartOption(props.chartsType, chartsColumns);
+            spinning.value = false;
+            initCharts(true);
+            nextTick(() => {
+              setOptions(option, true);
+              emit('refresh');
+            });
           } else {
-            groupedBy[item.sort] = [item];
+            // console.log('echarts监测列表数据', option.xAxis[0].data);
+            setOptions(option, isRefresh);
           }
-        }
-        // 根据分组找ymax最大值
-        const newChartsColumns: ChartColumn[] = [];
-        let index = 0;
-        for (let sortId in groupedBy) {
-          const group = groupedBy[sortId];
-          let ymax = group[0].ymax;
-          let ymin = group[0].ymin;
-          for (let i = 1; i < group.length; i++) {
-            if (group[i].ymax > ymax) {
-              ymax = group[i].ymax;
-            }
-          }
-          for (let i = 1; i < group.length; i++) {
-            if (group[i].ymin < ymin) {
-              ymin = group[i].ymin;
-            }
-          }
-          if (!tempYmax[index] || tempYmax[index] != ymax) {
-            tempYmax[index] = ymax;
-            isFresh = true;
-          }
-          if (tempYmin[index] != ymin) {
-            tempYmin[index] = ymin;
-            isFresh = true;
-          }
-          for (let i = 0; i < group.length; i++) {
-            group[i].ymax = ymax;
-            group[i].ymin = ymin;
-            newChartsColumns.push(group[i]);
-          }
-          ++index;
-        }
-        chartsColumns = newChartsColumns;
-        option.xAxis[0].data = xAxisData;
-        if (isFresh) {
-          spinning.value = true;
-          optionUtil.initChartOption(props.chartsType, chartsColumns);
-          spinning.value = false;
-          initCharts(true);
-          nextTick(() => {
-            setOptions(option, true);
-            emit('refresh');
-          });
-        } else {
-          // console.log('echarts监测列表数据', option.xAxis[0].data);
           setOptions(option, isRefresh);
         }
-        setOptions(option, isRefresh);
       }
-    }
-    setTimeout(() => {
-      spinning.value = false;
-      initCharts(true);
-    }, 1000);
-    return { chartRef, spinning };
-  },
-});
+      setTimeout(() => {
+        spinning.value = false;
+        initCharts(true);
+      }, 1000);
+      return { chartRef, spinning };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.spinning {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
+  .spinning {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

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

@@ -136,6 +136,7 @@
       const currentChartsColumnList = ref([]);
       const resultXAxisPropType = ref('createtime');
       const chartData = ref<any[]>([]);
+
       const currentPage = ref<number>(1);
       const pageSize = ref<number>(20);
       const total = ref(0);

src/views/vent/monitorManager/sensorMonitor/index.vue

@@ -94,7 +94,7 @@
             </div> -->
           </div>
         </a-tab-pane>
-        <a-tab-pane key="5" tab="近一月数据分析" v-if="!hasPermission('ventanalyAlarmAnalysis:noShowMonth')">
+        <a-tab-pane key="5" tab="近一月数据分析" v-if="hasPermission('ventanalyAlarmAnalysis:showMonth')">
           <div class="tab-item box-bg" style="margin-bottom: 10px">
             <div style="margin-top: 20px">
               <label style="color: var(--vent-font-color); margin-left: 20px">查询设备：</label>
@@ -132,7 +132,7 @@
             <div class="charts-box" v-else> <span style="color: aliceblue"> 暂无数据 </span> </div>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="6" tab="历史数据分析" v-if="!hasPermission('ventanalyAlarmAnalysis:noShow')">
+        <a-tab-pane key="6" tab="历史数据分析" v-if="hasPermission('ventanalyAlarmAnalysis:show')">
           <div class="history-echart-box" style="margin-bottom: 10px">
             <DeviceHistoryChart
               chartsColumnsType="modelsensor_chart"