关联分析-更新

src/main.ts

@@ -1,6 +1,7 @@
 import type { MainAppProps } from '#/main';
 import 'uno.css';
 import '/@/design/index.less';
+import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
 // 注册图标
 import 'virtual:svg-icons-register';

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="check-nav">
+    <Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
+      全选
+    </Checkbox>
+    <CheckboxGroup v-model:value="state.checkedList" @change="onChangeGroup">
+      <Checkbox v-for="item in plainOptions" :key="item.value" :value="item.value">
+        {{ item.label }}
+      </Checkbox>
+    </CheckboxGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref,onMounted } 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'],
+});
+let $emit = defineEmits(['checkBoxChange'])
+const onCheckAllChange = (e: any) => {
+  let checkVal = plainOptions.map(v => v.value)
+  Object.assign(state, {
+    checkedList: e.target.checked ? checkVal : [],
+    indeterminate: false,
+  });
+  $emit('checkBoxChange', state)
+};
+const onChangeGroup = (val) => {
+  state.checkedList = val
+  $emit('checkBoxChange', state)
+}
+
+</script>
+
+<style lang="less" scoped>
+.check-nav {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .ant-checkbox-wrapper {
+    width: 130px;
+  }
+
+  .ant-checkbox-group {
+    width: calc(100% - 130px);
+    display: flex;
+    justify-content: space-between;
+  }
+
+}
+
+:deep(.ant-checkbox .ant-checkbox-inner) {
+  background-color: transparent;
+  border: 1px solid #fff;
+}
+
+:deep(.ant-checkbox-checked .ant-checkbox-inner) {
+  background-color: #2b5ff0;
+  border-color: #2b5ff0;
+}
+</style>

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

@@ -0,0 +1,381 @@
+<template>
+  <div class="echart-line" ref="line"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, onMounted, watchEffect } from 'vue'
+import {plainOptions,echartColor} from '../connectAnalysis.data'
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  echartData: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+//获取dom元素节点
+let line = ref<any>();
+
+
+
+function getOption(param) {
+  nextTick(() => {
+    let myChart = echarts.init(line.value);
+    let option = {
+      grid: {
+        left: '2%',
+        right: '2%',
+        top: '6%',
+        bottom: '3%',
+        containLabel: true
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+      },
+      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',
+          nameTextStyle: {
+            color: '#74767b',
+            fontSize: 14,
+            lineHeight: 10,
+          },
+          min: 0,
+          // max: 1000,
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#74767b'
+            }
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#27b4c2'
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgba(209, 229, 253)'
+            }
+          }
+        },
+        {
+          type: 'value',
+          name: '',
+          min: 0,
+          max: 100,
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#74767b'
+            }
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#186afe'
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          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.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(59, 217, 122,0.8)'
+                }]),
+              }
+            }
+          },
+          markPoint: {
+            itemStyle: {
+              normal: {
+                color: '#3bd97a'
+              }
+            }
+          },
+          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.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(249, 199, 74,0.8)'
+                }]),
+              }
+            }
+          },
+          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.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(172, 123, 241,0.8)'
+                }]),
+              }
+            }
+          },
+          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.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(80, 178, 249,0.8)'
+                }]),
+              }
+            }
+          },
+          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.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(31, 208, 218,0.8)'
+                }]),
+              }
+            }
+          },
+          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',
+              lineStyle: {
+                color: "#ff6666",
+                width: 1
+              },
+              areaStyle: {
+                //color: '#94C9EC'
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: 'rgba(255, 102, 102,0.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(255, 102, 102,0.8)'
+                }]),
+              }
+            }
+          },
+          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',
+              lineStyle: {
+                color: "#3b4bd9",
+                width: 1
+              },
+              areaStyle: {
+                //color: '#94C9EC'
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: 'rgba(59, 75, 217,0.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(59, 75, 217,0.8)'
+                }]),
+              }
+            }
+          },
+          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',
+              lineStyle: {
+                color: "#f18736",
+                width: 1
+              },
+              areaStyle: {
+                //color: '#94C9EC'
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: 'rgba(241, 135, 54,0.2)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(241, 135, 54,0.8)'
+                }]),
+              }
+            }
+          },
+          data: param.yData.find(v => v.label == 'temperature') ? param.yData.find(v => v.label == 'temperature').value.map(el => el['temperature']) : []
+        },
+      ]
+    };
+    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>
+.echart-line {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="echart-lengend">
+    <div v-for="(item, index) in lengendTitle" :key="index" class="lengend-box">
+      <div class="lengend-icon"></div>
+      <div class="lengend-label">{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { lengendTitle } from '../connectAnalysis.data'
+
+</script>
+
+<style lang="less" scoped>
+.echart-lengend {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .lengend-box {
+    display: flex;
+    align-items: center;
+
+    &:nth-child(1) {
+      .lengend-icon {
+        background-color: #3bd97a;
+      }
+    }
+    &:nth-child(2) {
+      .lengend-icon {
+        background-color: #f9c74a;
+      }
+    }
+    &:nth-child(3) {
+      .lengend-icon {
+        background-color: #ac7bf1;
+      }
+    }
+    &:nth-child(4) {
+      .lengend-icon {
+        background-color: #50b2f9;
+      }
+    }
+    &:nth-child(5) {
+      .lengend-icon {
+        background-color: #1fd0da;
+      }
+    }
+    &:nth-child(6) {
+      .lengend-icon {
+        background-color: #ff6666;
+      }
+    }
+    &:nth-child(7) {
+      .lengend-icon {
+        background-color: #3b4bd9;
+      }
+    }
+     &:nth-child(8) {
+      .lengend-icon {
+        background-color: #f18736;
+      }
+    }
+  }
+
+  .lengend-icon {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 6px;
+
+  }
+}
+</style>

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

@@ -1,57 +1,25 @@
-import { TreeItem } from "/@/components/Tree";
 
-export const treeData: TreeItem[] = [
-  {
-    title: '气体参数 ',
-    key: '0-0',
-    children: [
-      { title: 'CO', key: '0-0-0' },
-      { title: 'CH4', key: '0-0-1' },
-      { title: 'C2H4', key: '0-0-2' },
-      { title: 'C2H2', key: '0-0-3' },
-      { title: 'CO2', key: '0-0-4' },
-      { title: 'O2', key: '0-0-5' },
-    ],
-  },
-  {
-    title: '内外压力及压差',
-    key: '1-1',
-    children: [
-      { title: '内压力', key: '1-1-0' },
-      //{ title: '外压力', key: '1-1-1' },
-      //{ title: '压差', key: '1-1-2' },
-    ],
-  },
-  {
-    title: '温度',
-    key: '2-2',
-  },
-];
+export const plainOptions = [
+  { label: 'CO浓度(ppm)', value: 'coVal' },
+  { label: 'CH4浓度(%)', value: 'ch4Val' },
+  { label: 'C2H4浓度(ppm)', value: 'c2h4Val' },
+  { label: 'C2H2浓度(ppm)', value: 'c2h2Val' },
+  { label: 'CO2浓度(%)', value: 'co2Val' },
+  { label: 'O2浓度(%)', value: 'o2Val' },
+  { label: '压差(kPa)', value: 'sourcePressure' },
+  { label: '温度(℃)', value: 'temperature' },
+]
+
+export const lengendTitle = [
+  { label: 'CO浓度(ppm)' },
+  { label: 'CH4浓度(%)' },
+  { label: 'C2H4浓度(ppm)' },
+  { label: 'C2H2浓度(ppm)' },
+  { label: 'CO2浓度(%)' },
+  { label: 'O2浓度(%)' },
+  { label: '压差(kPa)' },
+  { label: '温度(℃)' },
+]
+export const echartColor=['#3bd97a','#f9c74a','#ac7bf1','#50b2f9','#1fd0da','#ff6666','#3b4bd9','#f18736']
+
 
-export const historicalMockChartData = [
-  { time: '2025-12-22 00:00:00', CO: 22.3, CH4: 0.12, C2H4: 0.35, C2H2: 0.10, CO2: 0.85, O2: 19.5, innerPressure: 101.32, outerPressure: 101.10, pressureDiff: 0.22, temperature: 33.2 },
-  { time: '2025-12-22 01:00:00', CO: 23.1, CH4: 0.15, C2H4: 0.42, C2H2: 0.12, CO2: 0.92, O2: 19.7, innerPressure: 101.38, outerPressure: 101.15, pressureDiff: 0.23, temperature: 33.5 },
-  { time: '2025-12-22 02:00:00', CO: 22.8, CH4: 0.13, C2H4: 0.38, C2H2: 0.09, CO2: 0.88, O2: 19.6, innerPressure: 101.41, outerPressure: 101.18, pressureDiff: 0.23, temperature: 33.3 },
-  { time: '2025-12-22 03:00:00', CO: 21.9, CH4: 0.11, C2H4: 0.31, C2H2: 0.08, CO2: 0.81, O2: 19.4, innerPressure: 101.35, outerPressure: 101.12, pressureDiff: 0.21, temperature: 33.1 },
-  { time: '2025-12-22 04:00:00', CO: 22.5, CH4: 0.14, C2H4: 0.36, C2H2: 0.11, CO2: 0.86, O2: 19.5, innerPressure: 101.39, outerPressure: 101.16, pressureDiff: 0.22, temperature: 33.4 },
-  { time: '2025-12-22 05:00:00', CO: 23.4, CH4: 0.16, C2H4: 0.45, C2H2: 0.13, CO2: 0.95, O2: 19.8, innerPressure: 101.43, outerPressure: 101.20, pressureDiff: 0.24, temperature: 33.7 },
-  { time: '2025-12-22 06:00:00', CO: 24.2, CH4: 0.18, C2H4: 0.51, C2H2: 0.15, CO2: 1.02, O2: 20.0, innerPressure: 101.47, outerPressure: 101.23, pressureDiff: 0.25, temperature: 34.0 },
-  { time: '2025-12-22 07:00:00', CO: 25.3, CH4: 0.21, C2H4: 0.58, C2H2: 0.17, CO2: 1.08, O2: 20.2, innerPressure: 101.52, outerPressure: 101.27, pressureDiff: 0.26, temperature: 34.3 },
-  { time: '2025-12-22 08:00:00', CO: 26.1, CH4: 0.23, C2H4: 0.65, C2H2: 0.19, CO2: 1.15, O2: 20.4, innerPressure: 101.56, outerPressure: 101.30, pressureDiff: 0.27, temperature: 34.6 },
-  { time: '2025-12-22 09:00:00', CO: 27.4, CH4: 0.25, C2H4: 0.72, C2H2: 0.22, CO2: 1.23, O2: 20.6, innerPressure: 101.60, outerPressure: 101.33, pressureDiff: 0.28, temperature: 35.0 },
-  { time: '2025-12-22 10:00:00', CO: 28.2, CH4: 0.27, C2H4: 0.78, C2H2: 0.24, CO2: 1.29, O2: 20.8, innerPressure: 101.63, outerPressure: 101.35, pressureDiff: 0.29, temperature: 35.3 },
-  { time: '2025-12-22 11:00:00', CO: 27.8, CH4: 0.26, C2H4: 0.75, C2H2: 0.23, CO2: 1.26, O2: 20.7, innerPressure: 101.61, outerPressure: 101.34, pressureDiff: 0.28, temperature: 35.2 },
-  { time: '2025-12-22 12:00:00', CO: 26.9, CH4: 0.24, C2H4: 0.69, C2H2: 0.21, CO2: 1.19, O2: 20.5, innerPressure: 101.58, outerPressure: 101.32, pressureDiff: 0.27, temperature: 34.9 },
-  { time: '2025-12-22 13:00:00', CO: 26.3, CH4: 0.22, C2H4: 0.64, C2H2: 0.19, CO2: 1.14, O2: 20.3, innerPressure: 101.55, outerPressure: 101.30, pressureDiff: 0.26, temperature: 34.7 },
-  { time: '2025-12-22 14:00:00', CO: 25.7, CH4: 0.20, C2H4: 0.59, C2H2: 0.18, CO2: 1.09, O2: 20.1, innerPressure: 101.53, outerPressure: 101.28, pressureDiff: 0.25, temperature: 34.5 },
-  { time: '2025-12-22 15:00:00', CO: 24.9, CH4: 0.18, C2H4: 0.53, C2H2: 0.16, CO2: 1.03, O2: 19.9, innerPressure: 101.49, outerPressure: 101.25, pressureDiff: 0.24, temperature: 34.2 },
-  { time: '2025-12-22 16:00:00', CO: 24.3, CH4: 0.17, C2H4: 0.49, C2H2: 0.15, CO2: 0.98, O2: 19.8, innerPressure: 101.46, outerPressure: 101.22, pressureDiff: 0.23, temperature: 34.0 },
-  { time: '2025-12-22 17:00:00', CO: 23.8, CH4: 0.16, C2H4: 0.46, C2H2: 0.14, CO2: 0.94, O2: 19.7, innerPressure: 101.44, outerPressure: 101.21, pressureDiff: 0.23, temperature: 33.8 },
-  { time: '2025-12-22 18:00:00', CO: 23.5, CH4: 0.15, C2H4: 0.43, C2H2: 0.13, CO2: 0.91, O2: 19.6, innerPressure: 101.42, outerPressure: 101.19, pressureDiff: 0.22, temperature: 33.7 },
-  { time: '2025-12-22 19:00:00', CO: 24.1, CH4: 0.17, C2H4: 0.48, C2H2: 0.15, CO2: 0.97, O2: 19.8, innerPressure: 101.45, outerPressure: 101.22, pressureDiff: 0.24, temperature: 33.9 },
-  { time: '2025-12-22 20:00:00', CO: 24.7, CH4: 0.19, C2H4: 0.52, C2H2: 0.16, CO2: 1.01, O2: 20.0, innerPressure: 101.48, outerPressure: 101.24, pressureDiff: 0.25, temperature: 34.1 },
-  { time: '2025-12-22 21:00:00', CO: 25.2, CH4: 0.20, C2H4: 0.56, C2H2: 0.18, CO2: 1.05, O2: 20.1, innerPressure: 101.51, outerPressure: 101.26, pressureDiff: 0.26, temperature: 34.3 },
-  { time: '2025-12-22 22:00:00', CO: 24.5, CH4: 0.18, C2H4: 0.50, C2H2: 0.16, CO2: 0.99, O2: 19.9, innerPressure: 101.47, outerPressure: 101.23, pressureDiff: 0.24, temperature: 34.0 },
-  { time: '2025-12-22 23:00:00', CO: 23.7, CH4: 0.16, C2H4: 0.45, C2H2: 0.14, CO2: 0.93, O2: 19.7, innerPressure: 101.43, outerPressure: 101.20, pressureDiff: 0.23, temperature: 33.8 },
-  { time: '2025-11-18 00:00:00', CO: 22.9, CH4: 0.14, C2H4: 0.39, C2H2: 0.11, CO2: 0.89, O2: 19.6, innerPressure: 101.37, outerPressure: 101.17, pressureDiff: 0.22, temperature: 33.4 },
-];

src/views/analysis/warningAnalysis/connectAnalysis/index.vue

@@ -6,7 +6,8 @@
           <div class="filter-section param-section">
             <span class="filter-label">煤矿名称：</span>
             <div class="param-selector">
-              <MineCascader v-model:value="mineCode" style="width: 300px" :sync-to-store="false" :init-from-store="false"></MineCascader>
+              <MineCascader v-model:value="innerValue" style="width: 300px" :sync-to-store="false"
+                :init-from-store="false" @change="changeCascader"></MineCascader>
             </div>
           </div>
         </Col>
@@ -15,21 +16,16 @@
           <div class="filter-section param-section">
             <span class="filter-label">采空区选择：</span>
             <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择采空区">
-              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }} </SelectOption>
+              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }}
+              </SelectOption>
             </Select>
           </div>
         </Col>
         <Col :span="6">
           <div class="filter-section param-section">
             <span class="filter-label">时间选择：</span>
-            <RangePicker
-              v-model:value="dateRange"
-              format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              style="width: 300px"
-              :show-time="{ format: 'HH:mm:ss' }"
-              @change="changeTime"
-            />
+            <RangePicker v-model:value="dateRange" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
+              style="width: 300px" :show-time="{ format: 'HH:mm:ss' }" @change="changeTime" />
           </div>
         </Col>
         <Col :span="6">
@@ -38,341 +34,181 @@
           </div>
         </Col>
       </Row>
-
-      <!-- <Row style="width:100%">
-        <Col :span="8">
-          <div class="filter-section param-section">
-            <span class="filter-label">参数选择：</span>
-            <div class="param-selector">
-              <Input v-model="selectedParamsText" placeholder="请选择监测参数" readonly style="width: 300px" />
-              <Button type="primary" @click="showTree = !showTree">+</Button>
-              <div class="tree-popup" v-if="showTree">
-                <BasicTree :treeData="treeData" :checkable="true" defaultExpandAll @check="handleTreeCheck" :checkedKeys="checkedTreeKeys" />
-              </div>
-            </div>
-          </div>
-        </Col>
-      </Row> -->
     </div>
     <!-- 动态图表区域-->
-    <div class="chart-area">
-      <div class="chart-item" style="flex: 1 1 100%">
-        <div class="chart-placeholder">
-          <template v-if="generatedChartData.length">
-            <CustomChart :chart-data="generatedChartData" :chart-config="generatedChartConfig" style="height: 100%; width: 100%" />
-          </template>
-          <template v-else-if="isChartGenerated">
-            <div class="empty-chart">暂无匹配数据，请调整筛选条件</div>
-          </template>
-          <template v-else>
-            <div class="empty-chart">请选择时间范围和参数，点击"生成"查看数据</div>
-          </template>
-        </div>
+    <div class="echart-box">
+      <div class="check-title">
+        <CheckboxNav @checkBoxChange="checkBoxChange"></CheckboxNav>
+      </div>
+      <div class="echart-content">
+        <echartContent :echartData="echartData"></echartContent>
+      </div>
+      <div class="check-title">
+        <echartLengend></echartLengend>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, onMounted, watchEffect } from 'vue';
-  import dayjs from 'dayjs';
-  // import { treeData, historicalMockChartData } from './connectAnalysis.data'; // 引入模拟数据
-  import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } from 'ant-design-vue';
-  // import { BasicTree } from '/@/components/Tree/index';
-  import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
-  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
-  import { getGoafHistory, getGoafList } from './connectAnalysis.api';
-  import { useRouter } from 'vue-router';
-
-  // 组件注册
-  const RangePicker: any = DatePicker.RangePicker;
-  const { currentRoute } = useRouter();
-  const mineCode = ref<any>(currentRoute.value['query']['mineCode']); //传递过来的矿ID
-  // 筛选相关响应式数据
-  const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
-  // const selectedParamsText = ref(''); // 参数选择框显示文本
-  // const showTree = ref(false); // 控制树形选择器显示/隐藏
-  // const checkedTreeKeys = ref([]); // 树形选中的key
-  const selectedParams = ref(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); // 选中的参数（实际用于图表）
-  const generatedChartData = ref<any[]>([]); // 生成的图表数据
-  const generatedChartConfig = ref({}); // 生成的图表配置
-  const isChartGenerated = ref(false); // 是否已点击生成
-  const goafId = ref(''); //采空区id
-  const goafOption = ref<any[]>([]); //采空区列表
-  const filteredData = ref<any[]>([]); //曲线数据
-
-  const innerValue = ref('');
-
-  // // Tree Key 与参数名映射（关键：关联树形节点和实际参数）
-  //   const treeKeyToParamMap = computed(() => ({
-  //     '0-0-0': 'CO',
-  //     '0-0-1': 'CH4',
-  //     '0-0-2': 'C2H4',
-  //     '0-0-3': 'C2H2',
-  //     '0-0-4': 'CO2',
-  //     '0-0-5': 'O2',
-  //     '1-1-0': 'innerPressure',
-  //     '1-1-1': 'outerPressure',
-  //     '1-1-2': 'pressureDiff',
-  //     '2-2': 'temperature',
-  //   }));
-  //  // 树形选择事件处理
-  //   const handleTreeCheck = (checkedKeys) => {
-  //     checkedTreeKeys.value = checkedKeys;
-  //     // 转换为实际参数名
-  //     const params = checkedKeys
-  //       .map(key => treeKeyToParamMap.value[key])
-  //       .filter(param => param); // 过滤无效参数
-  //     selectedParams.value = params;
-  //     console.log(selectedParams.value, ' selectedParams')
-  //     // 更新输入框显示文本
-  //     const paramLabels = params.map(param => paramLabelMap.value[param]);
-  //     selectedParamsText.value = paramLabels.join('、');
-  //     console.log(selectedParamsText.value, ' selectedParamsText')
-  //   };
-
-  function changeCascader(val) {
-    innerValue.value = val;
-  }
-  function changeTime(val) {
-    dateRange.value[0] = val[0];
-    dateRange.value[1] = val[1];
-  }
-
-  // 参数颜色映射
-  const paramColorMap = computed(() => ({
-    coVal: '#f5222d', // 红色
-    ch4Val: '#1890ff', // 蓝色
-    c2h4Val: '#faad14', // 橙色
-    c2h2Val: '#52c41a', // 绿色
-    co2Val: '#722ed1', // 紫色
-    o2Val: '#13c2c2', // 青色
-    sourcePressure: '#ff4d4f', // 浅红
-    temperature: '#40a9ff', // 浅蓝
-  }));
-
-  // 参数标签映射（图表系列名称）
-  const paramLabelMap = computed(() => ({
-    coVal: 'CO浓度(ppm)',
-    ch4Val: 'CH4浓度(%)',
-    c2h4Val: 'C2H4浓度(ppm)',
-    c2h2Val: 'C2H2浓度(ppm)',
-    co2Val: 'CO2浓度(%)',
-    o2Val: 'O2浓度(%)',
-    sourcePressure: '压差(kPa)',
-    temperature: '温度(℃)',
-  }));
-  // 生成折线图核心逻辑
-  async function generateChart() {
-    // showTree.value = false
-    //获取采空区历史数据列表
-    let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
-    let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
-    let res = await getGoafHistory({ pageNo: 1, pageSize: 100, startTime: startTime, endTime: endTime, goafId: goafId.value });
-    if (res && res.records) {
-      filteredData.value = res.records;
-      isChartGenerated.value = false;
-    } else {
-      filteredData.value.length = 0;
-      isChartGenerated.value = true;
+import { computed, ref, onMounted, watchEffect, reactive, } from 'vue';
+import dayjs from 'dayjs';
+import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } from 'ant-design-vue';
+import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
+import CheckboxNav from './components/checkbox-nav.vue'
+import echartLengend from './components/echart-lengend.vue'
+import echartContent from './components/echart-content.vue'
+import { getGoafHistory, getGoafList } from './connectAnalysis.api';
+import { useRouter } from 'vue-router';
+import { useMineDepartmentStore } from '/@/store/modules/mine';
+
+// 组件注册
+const RangePicker: any = DatePicker.RangePicker;
+const { currentRoute } = useRouter();
+// 筛选相关响应式数据
+const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
+const goafId = ref(''); //采空区id
+const goafOption = ref<any[]>([]); //采空区列表
+const mineStore = useMineDepartmentStore();
+const innerValue = ref('');
+const checkList = ref<any[]>(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature'])//当前选中要进行显示的选项
+const echartData = reactive({
+  xData: [] as any,
+  yData: [] as any
+})
+
+
+
+//煤矿选项切换
+function changeCascader(val) {
+  innerValue.value = val;
+  getGoafListData();
+}
+//时间选择选项切换
+function changeTime(val) {
+  dateRange.value[0] = val[0];
+  dateRange.value[1] = val[1];
+}
+//图表选项标签切换
+function checkBoxChange(val) {
+  checkList.value = val.checkedList
+  generateChart()
+}
+
+
+
+// 生成折线图核心逻辑
+async function generateChart() {
+  echartData.yData.length = 0
+  let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
+  let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
+  let res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
+  let data = res.records || []
+
+  if (data.length) {
+    echartData.xData = data.map(e => e.createTime)
+    if (checkList.value.length) {
+      checkList.value.forEach(el => {
+        echartData.yData.push({
+          label: el,
+          value: data
+        })
+      })
     }
-    console.log(filteredData.value, 'filteredData');
-
-    // 2. 构建图表数据结构（适配 CustomChart 的 line 类型）
-    const timeMap = new Map();
-    // 修复变量名：filteredRawData → filteredData（之前未定义）
-    filteredData.value.forEach((item) => {
-      const timeStr = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
-      if (!timeMap.has(timeStr)) {
-        timeMap.set(timeStr, { time: timeStr });
-      }
-      // 只保留选中的参数数据
-      selectedParams.value.forEach((param) => {
-        if (item[param] !== undefined) {
-          timeMap.get(timeStr)[param] = item[param];
-        }
-      });
-    });
-
-    // 转换为数组并按时间排序
-    const chartData = Array.from(timeMap.values()).sort((a, b) => {
-      return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
+  }
+}
+
+//获取采空区列表
+async function getGoafListData() {
+  let res = await getGoafList({ mineCode: innerValue.value });
+  if (res.length) {
+    goafOption.value = res.map((el) => {
+      return {
+        label: el.devicePos,
+        value: el.id,
+      };
     });
-    generatedChartData.value = chartData;
-    console.log(generatedChartData.value, 'generatedChartData');
-
-    // 3. 构建图表配置（折线图类型，完善适配逻辑）
-    generatedChartConfig.value = {
-      type: 'line', // 折线图
-      clear: true, // 每次生成清空之前的图表
-      legend: { show: true, top: 10, right: 10, textStyle: { color: '#fff', fontSize: 14 } },
-      xAxis: [
-        {
-          type: 'category',
-          axisLabel: {
-            rotate: 30,
-            textStyle: {
-              color: '#fff',
-            },
-            formatter: (value) => dayjs(value).format('HH:mm:ss'),
-            interval: Math.max(1, Math.floor(chartData.length / 10)), // 控制x轴标签密度
-          },
-        },
-      ],
-      yAxis: selectedParams.value.map((param) => ({
-        type: 'value',
-        axisLabel: {
-          textStyle: {
-            color: '#fff',
-          },
-        },
-        name: paramLabelMap.value[param].split('(')[1].replace(')', ''), // 显示单位
-        // nameTextStyle: { color: paramColorMap.value[param] },
-        nameTextStyle: { color: '#fff' },
-        axisLine: { lineStyle: { color: paramColorMap.value[param] } },
-        splitLine: { lineStyle: { opacity: 0.1 } },
-      })),
-      series: selectedParams.value.map((param, index) => ({
-        name: paramLabelMap.value[param],
-        type: 'line',
-        readFrom: '', // 适配 CustomChart 的 baseSeries 读取逻辑
-        label: paramLabelMap.value[param],
-        xprop: 'time', // 对应图表数据的 x 字段（时间）
-        yprop: param, // 对应图表数据的 y 字段（参数值）
-        color: paramColorMap.value[param],
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 4,
-        yAxisIndex: index,
-      })),
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: { type: 'cross' },
-        formatter: (params) => {
-          let tooltipHtml = `<div>${dayjs(params[0].axisValue).format('YYYY-MM-DD HH:mm:ss')}</div>`;
-          params.forEach((param) => {
-            tooltipHtml += `<div style="color: ${param.color}">${param.seriesName}: ${param.value[1]} ${param.seriesName.split('(')[1].replace(')', '')}</div>`;
-          });
-          return tooltipHtml;
-        },
-      },
-      grid: { left: 60, top: 40, right: 60, bottom: 60 },
-    };
-
-    // 无数据提示
-    if (chartData.length === 0) {
-      message.info('当前筛选条件下无数据');
-    }
+    goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value'];
   }
-
-  //获取采空区列表
-  async function getGoafListData() {
-    let res = await getGoafList({ mineCode: innerValue.value });
-    if (res.length) {
-      goafOption.value = res.map((el) => {
-        return {
-          label: el.devicePos,
-          value: el.id,
-        };
-      });
-      goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value'];
-    }
+}
+
+onMounted(async () => {
+  const mineCode = currentRoute.value['query']['mineCode'] //传递过来的矿ID
+  if (mineCode) {
+    innerValue.value = mineCode as any
+  } else {
+    innerValue.value = mineStore.getMineCode.split(',')[0]
+    await getGoafListData()
+    await generateChart()
   }
-
-  watchEffect(() => {
-    innerValue.value && getGoafListData();
-  });
+})
 </script>
 
 <style lang="less" scoped>
-  .connectAnalysis {
-    padding: 16px;
-
-    .filter-area {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 16px;
-      margin-bottom: 20px;
-      padding: 20px;
-      border: 1px solid #f0f0f0;
-      border-radius: 10px;
-      background: @card-bg-color;
-      align-items: center;
-    }
-
-    .filter-section {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .filter-label {
-      color: #666;
-      min-width: 80px;
-      flex-shrink: 0;
-      font-weight: 500;
-    }
+.connectAnalysis {
+  width: calc(100% - 10px);
+  height: calc(100% - 20px);
+  margin: 10px 0px 10px 10px;
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid #c8d0dd;
+  border-radius: 5px;
+
+  .filter-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-bottom: 15px;
+    padding: 20px;
+    border: 1px solid #f0f0f0;
+    border-radius: 10px;
+    background: @card-bg-color;
+    align-items: center;
+  }
 
-    .param-section {
-      flex: 1;
-      // min-width: 300px;
-    }
+  .filter-section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
 
-    .param-selector {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      position: relative;
-    }
+  .filter-label {
+    color: #666;
+    min-width: 80px;
+    flex-shrink: 0;
+    font-weight: 500;
+  }
 
-    .tree-popup {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      margin-top: 8px;
-      width: 300px;
-      max-height: 300px;
-      overflow-y: auto;
-      background: #fff;
-      border: 1px solid #e8e8e8;
-      border-radius: 4px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-      z-index: 100;
-      padding: 8px;
-    }
+  .param-section {
+    flex: 1;
+    // min-width: 300px;
+  }
 
-    .chart-area {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 16px;
-      padding: 20px;
-      border: 1px solid #f0f0f0;
-      border-radius: 10px;
-      background: @card-bg-color;
-    }
+  .param-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+  }
 
-    .chart-item {
-      flex: 1;
-      min-width: 200px;
-    }
+  .echart-box {
+    width: 100%;
+    height: calc(100% - 95px);
+  }
 
-    .chart-placeholder {
-      width: 100%;
-      height: 300px;
-      border-radius: 4px;
-      overflow: hidden;
-      background: #333;
-      border: 1px solid #eee;
-    }
+  .check-title {
+    height: 40px;
+    line-height: 40px;
+    background-color: #d0e1fa;
+    border-radius: 3px;
+    padding: 0px 20px;
+    box-sizing: border-box;
+  }
 
-    .empty-chart {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #999;
-      font-size: 14px;
-    }
+  .echart-content {
+    width: 100%;
+    height: calc(100% - 80px);
   }
+
+}
 </style>

src/views/analysis/warningAnalysis/connectAnalysis/index_copy .vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="connectAnalysis">
+    <div class="filter-area">
+      <Row style="width: 100%">
+        <Col :span="6">
+          <div class="filter-section param-section">
+            <span class="filter-label">煤矿名称：</span>
+            <div class="param-selector">
+              <MineCascader  v-model:value="innerValue" style="width: 300px" :sync-to-store="false" :init-from-store="false"></MineCascader>
+            </div>
+          </div>
+        </Col>
+        <Col :span="6">
+          <!-- 时间选择 -->
+          <div class="filter-section param-section">
+            <span class="filter-label">采空区选择：</span>
+            <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择采空区">
+              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }} </SelectOption>
+            </Select>
+          </div>
+        </Col>
+        <Col :span="6">
+          <div class="filter-section param-section">
+            <span class="filter-label">时间选择：</span>
+            <RangePicker
+              v-model:value="dateRange"
+              format="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              style="width: 300px"
+              :show-time="{ format: 'HH:mm:ss' }"
+              @change="changeTime"
+            />
+          </div>
+        </Col>
+        <Col :span="6">
+          <div class="filter-section">
+            <Button type="primary" @click="generateChart">生成</Button>
+          </div>
+        </Col>
+      </Row>
+
+      <!-- <Row style="width:100%">
+        <Col :span="8">
+          <div class="filter-section param-section">
+            <span class="filter-label">参数选择：</span>
+            <div class="param-selector">
+              <Input v-model="selectedParamsText" placeholder="请选择监测参数" readonly style="width: 300px" />
+              <Button type="primary" @click="showTree = !showTree">+</Button>
+              <div class="tree-popup" v-if="showTree">
+                <BasicTree :treeData="treeData" :checkable="true" defaultExpandAll @check="handleTreeCheck" :checkedKeys="checkedTreeKeys" />
+              </div>
+            </div>
+          </div>
+        </Col>
+      </Row> -->
+    </div>
+    <!-- 动态图表区域-->
+    <div class="chart-area">
+      <div class="chart-item" style="flex: 1 1 100%">
+        <div class="chart-placeholder">
+          <template v-if="generatedChartData.length">
+            <CustomChart :chart-data="generatedChartData" :chart-config="generatedChartConfig" style="height: 100%; width: 100%" />
+          </template>
+          <template v-else-if="isChartGenerated">
+            <div class="empty-chart">暂无匹配数据，请调整筛选条件</div>
+          </template>
+          <template v-else>
+            <div class="empty-chart">请选择时间范围和参数，点击"生成"查看数据</div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, onMounted, watchEffect } from 'vue';
+  import dayjs from 'dayjs';
+  // import { treeData, historicalMockChartData } from './connectAnalysis.data'; // 引入模拟数据
+  import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } from 'ant-design-vue';
+  // import { BasicTree } from '/@/components/Tree/index';
+  import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
+  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
+  import { getGoafHistory, getGoafList } from './connectAnalysis.api';
+  import { useRouter } from 'vue-router';
+   import { useMineDepartmentStore } from '/@/store/modules/mine';
+
+  // 组件注册
+  const RangePicker: any = DatePicker.RangePicker;
+  const { currentRoute } = useRouter();
+  // 筛选相关响应式数据
+  const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
+  // const selectedParamsText = ref(''); // 参数选择框显示文本
+  // const showTree = ref(false); // 控制树形选择器显示/隐藏
+  // const checkedTreeKeys = ref([]); // 树形选中的key
+  const selectedParams = ref(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); // 选中的参数（实际用于图表）
+  const generatedChartData = ref<any[]>([]); // 生成的图表数据
+  const generatedChartConfig = ref({}); // 生成的图表配置
+  const isChartGenerated = ref(false); // 是否已点击生成
+  const goafId = ref(''); //采空区id
+  const goafOption = ref<any[]>([]); //采空区列表
+  const filteredData = ref<any[]>([]); //曲线数据
+
+  const innerValue = ref('100004');
+   const mineStore = useMineDepartmentStore();
+   const mineCode = ref<any>(currentRoute.value['query']['mineCode']); //传递过来的矿ID
+
+  // // Tree Key 与参数名映射（关键：关联树形节点和实际参数）
+  //   const treeKeyToParamMap = computed(() => ({
+  //     '0-0-0': 'CO',
+  //     '0-0-1': 'CH4',
+  //     '0-0-2': 'C2H4',
+  //     '0-0-3': 'C2H2',
+  //     '0-0-4': 'CO2',
+  //     '0-0-5': 'O2',
+  //     '1-1-0': 'innerPressure',
+  //     '1-1-1': 'outerPressure',
+  //     '1-1-2': 'pressureDiff',
+  //     '2-2': 'temperature',
+  //   }));
+  //  // 树形选择事件处理
+  //   const handleTreeCheck = (checkedKeys) => {
+  //     checkedTreeKeys.value = checkedKeys;
+  //     // 转换为实际参数名
+  //     const params = checkedKeys
+  //       .map(key => treeKeyToParamMap.value[key])
+  //       .filter(param => param); // 过滤无效参数
+  //     selectedParams.value = params;
+  //     console.log(selectedParams.value, ' selectedParams')
+  //     // 更新输入框显示文本
+  //     const paramLabels = params.map(param => paramLabelMap.value[param]);
+  //     selectedParamsText.value = paramLabels.join('、');
+  //     console.log(selectedParamsText.value, ' selectedParamsText')
+  //   };
+
+  function changeCascader(val) {
+    innerValue.value = val;
+  }
+  function changeTime(val) {
+    dateRange.value[0] = val[0];
+    dateRange.value[1] = val[1];
+  }
+
+  // 参数颜色映射
+  const paramColorMap = computed(() => ({
+    coVal: '#f5222d', // 红色
+    ch4Val: '#1890ff', // 蓝色
+    c2h4Val: '#faad14', // 橙色
+    c2h2Val: '#52c41a', // 绿色
+    co2Val: '#722ed1', // 紫色
+    o2Val: '#13c2c2', // 青色
+    sourcePressure: '#ff4d4f', // 浅红
+    temperature: '#40a9ff', // 浅蓝
+  }));
+
+  // 参数标签映射（图表系列名称）
+  const paramLabelMap = computed(() => ({
+    coVal: 'CO浓度(ppm)',
+    ch4Val: 'CH4浓度(%)',
+    c2h4Val: 'C2H4浓度(ppm)',
+    c2h2Val: 'C2H2浓度(ppm)',
+    co2Val: 'CO2浓度(%)',
+    o2Val: 'O2浓度(%)',
+    sourcePressure: '压差(kPa)',
+    temperature: '温度(℃)',
+  }));
+  // 生成折线图核心逻辑
+  async function generateChart() {
+    // showTree.value = false
+    //获取采空区历史数据列表
+    let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
+    let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
+    let res = await getGoafHistory({ pageNo: 1, pageSize: 100, startTime: startTime, endTime: endTime, goafId: goafId.value });
+    if (res && res.records) {
+      filteredData.value = res.records;
+      isChartGenerated.value = false;
+    } else {
+      filteredData.value.length = 0;
+      isChartGenerated.value = true;
+    }
+    console.log(filteredData.value, 'filteredData');
+
+    // 2. 构建图表数据结构（适配 CustomChart 的 line 类型）
+    const timeMap = new Map();
+    // 修复变量名：filteredRawData → filteredData（之前未定义）
+    filteredData.value.forEach((item) => {
+      const timeStr = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
+      if (!timeMap.has(timeStr)) {
+        timeMap.set(timeStr, { time: timeStr });
+      }
+      // 只保留选中的参数数据
+      selectedParams.value.forEach((param) => {
+        if (item[param] !== undefined) {
+          timeMap.get(timeStr)[param] = item[param];
+        }
+      });
+    });
+
+    // 转换为数组并按时间排序
+    const chartData = Array.from(timeMap.values()).sort((a, b) => {
+      return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
+    });
+    generatedChartData.value = chartData;
+    console.log(generatedChartData.value, 'generatedChartData');
+
+    // 3. 构建图表配置（折线图类型，完善适配逻辑）
+    generatedChartConfig.value = {
+      type: 'line', // 折线图
+      clear: true, // 每次生成清空之前的图表
+      legend: { show: true, top: 10, right: 10, textStyle: { color: '#fff', fontSize: 14 } },
+      xAxis: [
+        {
+          type: 'category',
+          axisLabel: {
+            rotate: 30,
+            textStyle: {
+              color: '#fff',
+            },
+            formatter: (value) => dayjs(value).format('HH:mm:ss'),
+            interval: Math.max(1, Math.floor(chartData.length / 10)), // 控制x轴标签密度
+          },
+        },
+      ],
+      yAxis: selectedParams.value.map((param) => ({
+        type: 'value',
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        name: paramLabelMap.value[param].split('(')[1].replace(')', ''), // 显示单位
+        // nameTextStyle: { color: paramColorMap.value[param] },
+        nameTextStyle: { color: '#fff' },
+        axisLine: { lineStyle: { color: paramColorMap.value[param] } },
+        splitLine: { lineStyle: { opacity: 0.1 } },
+      })),
+      series: selectedParams.value.map((param, index) => ({
+        name: paramLabelMap.value[param],
+        type: 'line',
+        readFrom: '', // 适配 CustomChart 的 baseSeries 读取逻辑
+        label: paramLabelMap.value[param],
+        xprop: 'time', // 对应图表数据的 x 字段（时间）
+        yprop: param, // 对应图表数据的 y 字段（参数值）
+        color: paramColorMap.value[param],
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        yAxisIndex: index,
+      })),
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'cross' },
+        formatter: (params) => {
+          let tooltipHtml = `<div>${dayjs(params[0].axisValue).format('YYYY-MM-DD HH:mm:ss')}</div>`;
+          params.forEach((param) => {
+            tooltipHtml += `<div style="color: ${param.color}">${param.seriesName}: ${param.value[1]} ${param.seriesName.split('(')[1].replace(')', '')}</div>`;
+          });
+          return tooltipHtml;
+        },
+      },
+      grid: { left: 60, top: 40, right: 60, bottom: 60 },
+    };
+
+    // 无数据提示
+    if (chartData.length === 0) {
+      message.info('当前筛选条件下无数据');
+    }
+  }
+
+  //获取采空区列表
+  async function getGoafListData() {
+    let res = await getGoafList({ mineCode: innerValue.value });
+    if (res.length) {
+      goafOption.value = res.map((el) => {
+        return {
+          label: el.devicePos,
+          value: el.id,
+        };
+      });
+      goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value'];
+    }
+  }
+
+  watchEffect(() => {
+    console.log(mineStore)
+    innerValue.value && getGoafListData();
+  });
+</script>
+
+<style lang="less" scoped>
+  .connectAnalysis {
+    padding: 16px;
+
+    .filter-area {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin-bottom: 20px;
+      padding: 20px;
+      border: 1px solid #f0f0f0;
+      border-radius: 10px;
+      background: @card-bg-color;
+      align-items: center;
+    }
+
+    .filter-section {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .filter-label {
+      color: #666;
+      min-width: 80px;
+      flex-shrink: 0;
+      font-weight: 500;
+    }
+
+    .param-section {
+      flex: 1;
+      // min-width: 300px;
+    }
+
+    .param-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      position: relative;
+    }
+
+    .tree-popup {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 8px;
+      width: 300px;
+      max-height: 300px;
+      overflow-y: auto;
+      background: #fff;
+      border: 1px solid #e8e8e8;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      z-index: 100;
+      padding: 8px;
+    }
+
+    .chart-area {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      padding: 20px;
+      border: 1px solid #f0f0f0;
+      border-radius: 10px;
+      background: @card-bg-color;
+    }
+
+    .chart-item {
+      flex: 1;
+      min-width: 200px;
+    }
+
+    .chart-placeholder {
+      width: 100%;
+      height: 300px;
+      border-radius: 4px;
+      overflow: hidden;
+      background: #333;
+      border: 1px solid #eee;
+    }
+
+    .empty-chart {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #999;
+      font-size: 14px;
+    }
+  }
+</style>