光钎测温历史数据图表坐标轴自适应修改，多灾融合预警首页图片替换

src/components/chart/BarAndLine.vue

@@ -5,137 +5,139 @@
   <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: () => [],
     },
-    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,
+    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',
             },
+            show: false,
           },
         },
-        dataZoom: {},
-        legend: {
-          textStyle: {
-            color: '#ffffff', // 字体颜色
-          },
-          top: '20',
+      },
+      dataZoom: {},
+      legend: {
+        textStyle: {
+          color: '#ffffff', // 字体颜色
         },
-        timeline: null,
-        xAxis: {},
-        yAxis: null,
-        series: null,
-      });
-      let optionUtil;
+        top: '20',
+      },
+      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';
-            }
-            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;
+    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 (option.series[index].name.indexOf('°C') == -1 && option.series[index].name.indexOf('%') == -1 ) {
             if (digitCount < 2) {
               if (max < 0.5) {
                 yMax = 1;
@@ -213,85 +215,88 @@
                 yMin = 10000;
               }
             }
-
-            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);
-            } else {
-              groupedBy[item.sort] = [item];
-            }
+          } else {
+            yMax=100
+            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;
-              }
-            }
-            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;
+          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);
+          } else {
+            groupedBy[item.sort] = [item];
+          }
+        }
+        // 根据分组找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 = 0; i < group.length; i++) {
-              group[i].ymax = ymax;
-              group[i].ymin = ymin;
-              newChartsColumns.push(group[i]);
+          }
+          for (let i = 1; i < group.length; i++) {
+            if (group[i].ymin < ymin) {
+              ymin = group[i].ymin;
             }
-            ++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);
+          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/alarmMonitor/index.vue

@@ -274,21 +274,21 @@
               }}</span>
             </div>
           </div>
-           <div class="item item6">
+          <div class="item item6">
             <div class="icon-box">
               <div class="icon"></div>
             </div>
             <div class="item-monitor-box">
-              <span class="title">水泵</span>
+              <span class="title">水灾</span>
               <span class="value">低风险</span>
             </div>
           </div>
-           <div class="item item7">
+          <div class="item item7">
             <div class="icon-box">
               <div class="icon"></div>
             </div>
             <div class="item-monitor-box">
-              <span class="title">地漏</span>
+              <span class="title">顶板</span>
               <span class="value">低风险</span>
             </div>
           </div>
@@ -299,8 +299,8 @@
         <div class="container">
           <div class="item item1">
             <div class="icon"></div>
-            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" 
-              :step="fireMonitor1.length*0.055" :single-waitTime="3000" :limit-scroll-num="fireMonitor1.length" class="seamless-warp1">
+            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" :step="fireMonitor1.length * 0.055"
+              :single-waitTime="3000" :limit-scroll-num="fireMonitor1.length" class="seamless-warp1">
               <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
                 <div class="box-item">
                   <div :class="{
@@ -467,9 +467,9 @@ let showToggle = ref('report');
 //点击切换实时\报表数据
 let handlerToggle = () => {
   monitor.value = !monitor.value;
-  windData.jf = monitor.value ?  toggleData.ventInfo.totalIntM3 : toggleData.ventInfo.zongjinfeng ;
-  windData.hf = monitor.value ?  toggleData.ventInfo.totalRetM3: toggleData.ventInfo.zonghuifeng ;
-  windData.levels =monitor.value ? Object.assign({},{alarm:0,blue:0,orange:0,red:0,yellow:0}) :  toggleData.info.sysInfo.ventS.levels;
+  windData.jf = monitor.value ? toggleData.ventInfo.totalIntM3 : toggleData.ventInfo.zongjinfeng;
+  windData.hf = monitor.value ? toggleData.ventInfo.totalRetM3 : toggleData.ventInfo.zonghuifeng;
+  windData.levels = monitor.value ? Object.assign({}, { alarm: 0, blue: 0, orange: 0, red: 0, yellow: 0 }) : toggleData.info.sysInfo.ventS.levels;
   windData.levels['blue'] = warnNumMap.get('vent');
 };
 //风险等级点击
@@ -530,12 +530,12 @@ async function getList() {
   } else if (showToggle.value == 'report') {
     windData.jf = res.ventInfo.totalIntM3;
     windData.hf = res.ventInfo.totalRetM3;
-    windData.levels =Object.assign({},{alarm:0,blue:0,orange:0,red:0,yellow:0});
+    windData.levels = Object.assign({}, { alarm: 0, blue: 0, orange: 0, red: 0, yellow: 0 });
     windData.levels['blue'] = warnNumMap.get('vent');
   } else {
     windData.jf = res.ventInfo.totalIntM3;
     windData.hf = res.ventInfo.totalRetM3;
-    windData.levels =Object.assign({},{alarm:0,blue:0,orange:0,red:0,yellow:0});
+    windData.levels = Object.assign({}, { alarm: 0, blue: 0, orange: 0, red: 0, yellow: 0 });
     windData.levels['blue'] = warnNumMap.get('vent');
   }
   windData.xf = res.ventInfo.xufengliang;
@@ -662,8 +662,8 @@ onUnmounted(() => {
 
 @{theme-deepblue} {
   .sensor-container {
-    --image-icon-sl:url('/@/assets/images/themify/deepblue/vent/sl.png');
-    --image-icon-dl:url('/@/assets/images/themify/deepblue/vent/dl.png');
+    --image-icon-sl: url('/@/assets/images/themify/deepblue/vent/sl.png');
+    --image-icon-dl: url('/@/assets/images/themify/deepblue/vent/dl.png');
     --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
     --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
     // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
@@ -757,8 +757,8 @@ onUnmounted(() => {
   --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
   --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
   --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
-  --image-icon-sl:url('/@/assets/images/vent/alarm/sl.png');
-  --image-icon-dl:url('/@/assets/images/vent/alarm/dl.png');
+  --image-icon-sl: url('/@/assets/images/vent/alarm/sl.png');
+  --image-icon-dl: url('/@/assets/images/vent/alarm/dl.png');
 
   --image-value-bg: url('/@/assets/images/vent/value-bg.png');
   --image-plane: url('/@/assets/images/vent/plane.png');
@@ -1684,18 +1684,22 @@ onUnmounted(() => {
             background-image: var(--image-icon-vent);
           }
         }
-        .item6{
-          top:0px;
-          left:-30px;
-          .icon{
-            background-image:var(--image-icon-sl);
+
+        .item6 {
+          top: 0px;
+          left: -30px;
+
+          .icon {
+            background-image: var(--image-icon-sl);
           }
         }
-        .item7{
-          top:0px;
-          left:340px;
-          .icon{
-background-image:var(--image-icon-dl)
+
+        .item7 {
+          top: 0px;
+          left: 340px;
+
+          .icon {
+            background-image: var(--image-icon-dl)
           }
         }
       }