[Style 0000] 关联分析页面样式优化

Co-authored-by: Copilot <copilot@github.com>

src/views/analysis/warningAnalysis/connectAnalysis/components/checkbox-nav.vue

@@ -10,14 +10,14 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref, onMounted } from 'vue';
+  import { reactive } from 'vue';
   import { Checkbox, CheckboxGroup } from 'ant-design-vue';
   import { plainOptions } from '../connectAnalysis.data';
 
   const state = reactive({
     indeterminate: true,
     checkAll: false,
-    checkedList: ['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature'],
+    checkedList: ['coVal', 'c2h4Val', 'c2h2Val', 'ch4Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature'],
   });
   let $emit = defineEmits(['checkBoxChange']);
   const onCheckAllChange = (e: any) => {

src/views/analysis/warningAnalysis/connectAnalysis/components/echart-content.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted, watchEffect } from 'vue'
-// import { plainOptions} from '../connectAnalysis.data'
-import * as echarts from 'echarts';
+  import { ref, nextTick, watchEffect } from 'vue';
+  // import { plainOptions} from '../connectAnalysis.data'
+  import * as echarts from 'echarts';
 
   let props = defineProps({
     echartData: {
@@ -57,434 +57,263 @@ import * as echarts from 'echarts';
   //   }
   // }
 
-function getOption(param) {
-  nextTick(() => {
-    let myChart = echarts.init(line.value);
-    let option = {
-      grid: {
-        left: '2%',
-        right: '8%',
-        top: '6%',
-        bottom: '3%',
-        containLabel: true
+  function getSeriesData(param, label) {
+    return param.yData?.find((v) => v.label === label)?.value.map((el) => el[label]) || [];
+  }
+
+  function buildLineSeries(param, name, label, color, areaStart, areaEnd, gridIndex, yAxisIndex) {
+    return {
+      name,
+      type: 'line',
+      xAxisIndex: gridIndex,
+      yAxisIndex,
+      symbol: 'circle',
+      symbolSize: 0,
+      itemStyle: {
+        color,
       },
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(0, 0, 0, .6)',
-        textStyle: {
-          color: '#fff',
-          fontSize: 12,
-        },
+      lineStyle: {
+        width: 1,
+        color,
       },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          axisLabel: {
-            color: '#74767b'
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#3173f0',
-              width: 1,      // 线的宽度
-              type: 'dashed' // 线的类型为虚线
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
-          },
-          data: param.xData || []
-        }
-      ],
-      yAxis: [
-        {
-          type: 'value',
-          name: 'ppm',
-          position: 'left', // Y轴1在左边
-          nameTextStyle: {
-            color: '#74767b',
-            fontSize: 14,
-            lineHeight: 10,
-          },
-          min: 0,
-          // max: 1000,
-          axisLabel: {
-            formatter: '{value}',
-            textStyle: {
-              color: '#74767b'
-            }
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#74767b'
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
-          }
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          { offset: 0, color: areaStart },
+          { offset: 1, color: areaEnd },
+        ]),
+      },
+      data: getSeriesData(param, label),
+    };
+  }
+
+  function getOption(param) {
+    nextTick(() => {
+      let myChart = echarts.init(line.value);
+      let commonAxis = {
+        boundaryGap: false,
+        axisLabel: {
+          color: '#74767b',
         },
-        {
-          type: 'value',
-          name: '%',
-          position: 'right', // Y轴2在右边
-          min: 0,
-          max: 100,
-          axisLabel: {
-            formatter: '{value}',
-            textStyle: {
-              color: '#74767b'
-            }
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#74767b'
-            }
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3173f0',
+            width: 1,
+            type: 'dashed',
           },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
-          }
         },
-        {
-          type: 'value',
-          name: '℃',
-          position: 'right', // Y轴2在右边
-          offset: 80,
-          min: 0,
-          // max: 100,
-          axisLabel: {
-            formatter: '{value}',
-            textStyle: {
-              color: '#74767b'
-            }
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#74767b'
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
-          }
+        axisTick: {
+          show: false,
         },
-        {
-          type: 'value',
-          name: 'kPa',
-          position: 'right', // Y轴2在右边
-          offset: 160,
-          min: 0,
-          // max: 100,
-          axisLabel: {
-            formatter: '{value}',
-            textStyle: {
-              color: '#74767b'
-            }
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#74767b'
-            }
-          },
-          axisTick: {
-            show: false,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(209, 229, 253)',
           },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
-          }
         },
-      ],
+      };
 
-      series: [
-        {
-          name: 'CO浓度(ppm)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#3bd97a',
-              lineStyle: {
-                color: "#3bd97a",
-                width: 1
-              },
-              areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(59, 217, 122,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(59, 217, 122,0.8)'
-                }]),
-              }
-            }
+      let option = {
+        grid: [
+          {
+            left: '2%',
+            right: '66%',
+            top: '10%',
+            bottom: '10%',
+            containLabel: true,
           },
-          markPoint: {
-            itemStyle: {
-              normal: {
-                color: '#3bd97a'
-              }
-            }
+          {
+            left: '34%',
+            right: '34%',
+            top: '10%',
+            bottom: '10%',
+            containLabel: true,
           },
-          yAxisIndex: 0,
-          data: param.yData.find(v => v.label == 'coVal') ? param.yData.find(v => v.label == 'coVal').value.map(el => el['coVal']) : []
-        },
-        {
-          name: 'CH4浓度(%)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-
-          itemStyle: {
-            normal: {
-              color: '#f9c74a',
-              lineStyle: {
-                color: "#f9c74a",
-                width: 1
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(249, 199, 74,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(249, 199, 74,0.8)'
-                }]),
-              }
-            }
+          {
+            left: '66%',
+            right: '2%',
+            top: '10%',
+            bottom: '10%',
+            containLabel: true,
           },
-          yAxisIndex: 1,
-          data: param.yData.find(v => v.label == 'ch4Val') ? param.yData.find(v => v.label == 'ch4Val').value.map(el => el['ch4Val']) : []
-        },
-        {
-          name: 'C2H4浓度(ppm)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#ac7bf1',
-              lineStyle: {
-                color: "#ac7bf1",
-                width: 1
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(172, 123, 241,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(172, 123, 241,0.8)'
-                }]),
-              }
-            }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, .6)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
           },
-          yAxisIndex: 0,
-          data: param.yData.find(v => v.label == 'c2h4Val') ? param.yData.find(v => v.label == 'c2h4Val').value.map(el => el['c2h4Val']) : []
         },
-        {
-          name: 'C2H2浓度(ppm)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#50b2f9',
-              lineStyle: {
-                color: "#50b2f9",
-                width: 1
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(80, 178, 249,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(80, 178, 249,0.8)'
-                }]),
-              }
-            }
+        xAxis: [
+          {
+            ...commonAxis,
+            type: 'category',
+            gridIndex: 0,
+            data: param.xData || [],
           },
-          yAxisIndex: 0,
-          data: param.yData.find(v => v.label == 'c2h2Val') ? param.yData.find(v => v.label == 'c2h2Val').value.map(el => el['c2h2Val']) : []
-        },
-        {
-          name: 'CO2浓度(%)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#1fd0da',
-              lineStyle: {
-                color: "#1fd0da",
-                width: 1
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(31, 208, 218,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(31, 208, 218,0.8)'
-                }]),
-              }
-            }
+          {
+            ...commonAxis,
+            type: 'category',
+            gridIndex: 1,
+            data: param.xData || [],
           },
-          yAxisIndex: 1,
-          data: param.yData.find(v => v.label == 'co2Val') ? param.yData.find(v => v.label == 'co2Val').value.map(el => el['co2Val']) : []
-        },
-        {
-          name: 'O2浓度(%)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#ff6666',
+          {
+            ...commonAxis,
+            type: 'category',
+            gridIndex: 2,
+            data: param.xData || [],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'ppm',
+            gridIndex: 0,
+            position: 'left',
+            min: 0,
+            axisLabel: {
+              formatter: '{value}',
+              color: '#74767b',
+            },
+            nameTextStyle: {
+              color: '#74767b',
+              fontSize: 14,
+              lineHeight: 10,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
               lineStyle: {
-                color: "#ff6666",
-                width: 1
+                type: 'dashed',
+                color: 'rgba(209, 229, 253)',
               },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(255, 102, 102,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(255, 102, 102,0.8)'
-                }]),
-              }
-            }
+            },
           },
-          yAxisIndex: 1,
-          data: param.yData.find(v => v.label == 'o2Val') ? param.yData.find(v => v.label == 'o2Val').value.map(el => el['o2Val']) : []
-        },
-        {
-          name: '压差(kPa)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#3b4bd9',
+          {
+            type: 'value',
+            name: '%',
+            gridIndex: 1,
+            position: 'left',
+            min: 0,
+            max: 100,
+            axisLabel: {
+              formatter: '{value}',
+              color: '#74767b',
+            },
+            nameTextStyle: {
+              color: '#74767b',
+              fontSize: 14,
+              lineHeight: 10,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
               lineStyle: {
-                color: "#3b4bd9",
-                width: 1
+                type: 'dashed',
+                color: 'rgba(209, 229, 253)',
               },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(59, 75, 217,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(59, 75, 217,0.8)'
-                }]),
-              }
-            }
+            },
           },
-          yAxisIndex: 3,
-          data: param.yData.find(v => v.label == 'sourcePressure') ? param.yData.find(v => v.label == 'sourcePressure').value.map(el => el['sourcePressure']) : []
-        },
-        {
-          name: '温度(℃)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#f18736',
+          {
+            type: 'value',
+            name: 'kPa',
+            gridIndex: 2,
+            position: 'left',
+            min: 0,
+            axisLabel: {
+              formatter: '{value}',
+              color: '#74767b',
+            },
+            nameTextStyle: {
+              color: '#74767b',
+              fontSize: 14,
+              lineHeight: 10,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
               lineStyle: {
-                color: "#f18736",
-                width: 1
+                type: 'dashed',
+                color: 'rgba(209, 229, 253)',
               },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(241, 135, 54,0.1)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(241, 135, 54,0.8)'
-                }]),
-              }
-            }
+            },
           },
-          yAxisIndex: 2,
-          data: param.yData.find(v => v.label == 'temperature') ? param.yData.find(v => v.label == 'temperature').value.map(el => el['temperature']) : []
-        },
-      ],
-      dataZoom: [ // dataZoom 配置项
-        {
-          type: 'inside', // 这是滑动条类型的数据区域缩放组件。'slider' 是滑动条类型，还有一个是 'inside' 类型，是内置的缩放组件。
-          start: 10,      // 数据窗口范围的起始百分比，默认为 0。即从哪个点开始缩放。
-          end: 100         // 数据窗口范围的结束百分比，默认为 100。即缩放到哪个点结束。
-        },
-      ]
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
+          {
+            type: 'value',
+            name: '℃',
+            gridIndex: 2,
+            position: 'right',
+            offset: 0,
+            min: 0,
+            axisLabel: {
+              formatter: '{value}',
+              color: '#74767b',
+            },
+            nameTextStyle: {
+              color: '#74767b',
+              fontSize: 14,
+              lineHeight: 10,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          buildLineSeries(param, 'CO浓度(ppm)', 'coVal', '#3bd97a', 'rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)', 0, 0),
+          buildLineSeries(param, 'C2H4浓度(ppm)', 'c2h4Val', '#d35400', 'rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)', 0, 0),
+          buildLineSeries(param, 'C2H2浓度(ppm)', 'c2h2Val', '#c0392b', 'rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)', 0, 0),
+          buildLineSeries(param, 'CH4浓度(%)', 'ch4Val', '#f9c74a', 'rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)', 1, 1),
+          buildLineSeries(param, 'CO2浓度(%)', 'co2Val', '#1fd0da', 'rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)', 1, 1),
+          buildLineSeries(param, 'O2浓度(%)', 'o2Val', '#ff6666', 'rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)', 1, 1),
+          buildLineSeries(param, '压差(kPa)', 'sourcePressure', '#3b4bd9', 'rgba(59, 75, 217,0.1)', 'rgba(59, 75, 217,0.8)', 2, 2),
+          buildLineSeries(param, '温度(℃)', 'temperature', '#f18736', 'rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)', 2, 3),
+        ],
+        dataZoom: [
+          {
+            type: 'inside',
+            xAxisIndex: [0, 1, 2],
+            start: 10,
+            end: 100,
+          },
+        ],
+      };
 
-watchEffect(() => {
-  if (props.echartData.xData.length || props.echartData.yData.length) {
-    props.echartData && getOption(props.echartData)
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
   }
 
-})
-
+  watchEffect(() => {
+    if (props.echartData.xData.length || props.echartData.yData.length) {
+      props.echartData && getOption(props.echartData);
+    }
+  });
 </script>
 
 <style lang="less" scoped>

src/views/analysis/warningAnalysis/connectAnalysis/components/echart-lengend.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  // import { ref } from 'vue';
   import { lengendTitle } from '../connectAnalysis.data';
 </script>
 
@@ -31,12 +31,12 @@
       }
       &:nth-child(2) {
         .lengend-icon {
-          background-color: #f9c74a;
+          background-color: #d35400;
         }
       }
       &:nth-child(3) {
         .lengend-icon {
-          background-color: #ac7bf1;
+          background-color: #c0392b;
         }
       }
       &:nth-child(4) {

src/views/analysis/warningAnalysis/connectAnalysis/connectAnalysis.data.ts

@@ -1,24 +1,21 @@
-
 export const plainOptions: any[] = [
-  { label: 'CO浓度(ppm)', value: 'coVal', color: '#3bd97a', areaColor: ['rgba(59, 217, 122,0.1)','rgba(59, 217, 122,0.8)'] },
-  { label: 'CH4浓度(%)', value: 'ch4Val', color: '#f9c74a', areaColor: ['rgba(249, 199, 74,0.1)','rgba(249, 199, 74,0.8)'] },
-  { label: 'C2H4浓度(ppm)', value: 'c2h4Val', color: '#ac7bf1', areaColor: ['rgba(172, 123, 241,0.1)','rgba(172, 123, 241,0.8)'] },
-  { label: 'C2H2浓度(ppm)', value: 'c2h2Val', color: '#50b2f9', areaColor: ['rgba(80, 178, 249,0.1)','rgba(80, 178, 249,0.8)'] },
-  { label: 'CO2浓度(%)', value: 'co2Val', color: '#1fd0da', areaColor: ['rgba(31, 208, 218,0.1)','rgba(31, 208, 218,0.8)'] },
-  { label: 'O2浓度(%)', value: 'o2Val', color: '#ff6666', areaColor: ['rgba(255, 102, 102,0.1)','rgba(255, 102, 102,0.8)'] },
-  { label: '压差(kPa)', value: 'sourcePressure', color: '#3b4bd9', areaColor: ['rgba(59, 75, 217,0.1)','rgba(59, 75, 217,0.8)'] },
-  { label: '温度(℃)', value: 'temperature', color: '#f18736', areaColor: ['rgba(241, 135, 54,0.1)','rgba(241, 135, 54,0.8)'] },
-]
+  { label: 'CO浓度(ppm)', value: 'coVal', color: '#3bd97a', areaColor: ['rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)'] },
+  { label: 'C2H4浓度(ppm)', value: 'c2h4Val', color: '#d35400', areaColor: ['rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)'] },
+  { label: 'C2H2浓度(ppm)', value: 'c2h2Val', color: '#c0392b', areaColor: ['rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)'] },
+  { label: 'CH4浓度(%)', value: 'ch4Val', color: '#f9c74a', areaColor: ['rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)'] },
+  { label: 'CO2浓度(%)', value: 'co2Val', color: '#1fd0da', areaColor: ['rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)'] },
+  { label: 'O2浓度(%)', value: 'o2Val', color: '#ff6666', areaColor: ['rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)'] },
+  { label: '压差(kPa)', value: 'sourcePressure', color: '#3b4bd9', areaColor: ['rgba(59, 75, 217,0.1)', 'rgba(59, 75, 217,0.8)'] },
+  { label: '温度(℃)', value: 'temperature', color: '#f18736', areaColor: ['rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)'] },
+];
 
 export const lengendTitle = [
   { label: 'CO浓度(ppm)' },
-  { label: 'CH4浓度(%)' },
   { label: 'C2H4浓度(ppm)' },
   { label: 'C2H2浓度(ppm)' },
+  { label: 'CH4浓度(%)' },
   { label: 'CO2浓度(%)' },
   { label: 'O2浓度(%)' },
   { label: '压差(kPa)' },
   { label: '温度(℃)' },
-]
-
-
+];