|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="connectAnalysis">
|
|
|
<div class="filter-area">
|
|
|
- <Row style="width:100%">
|
|
|
+ <Row style="width: 100%">
|
|
|
<Col :span="6">
|
|
|
<div class="filter-section param-section">
|
|
|
<span class="filter-label">煤矿名称:</span>
|
|
|
@@ -73,16 +73,15 @@
|
|
|
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 { 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 { storeToRefs } from 'pinia';
|
|
|
-import { useMineStore } from '/@/store/modules/mine';
|
|
|
+import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
|
|
|
+import { getGoafHistory, getGoafList } from './connectAnalysis.api';
|
|
|
+// import { storeToRefs } from 'pinia';
|
|
|
+// import { useMineDepartmentStore } from '/@/store/modules/mine';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
|
|
-
|
|
|
// 组件注册
|
|
|
const RangePicker: any = DatePicker.RangePicker;
|
|
|
const { currentRoute } = useRouter();
|
|
|
@@ -99,54 +98,24 @@ const isChartGenerated = ref(false); // 是否已点击生成
|
|
|
const goafId = ref('')//采空区id
|
|
|
const goafOption = ref<any[]>([])//采空区列表
|
|
|
const filteredData = ref<any[]>([])//曲线数据
|
|
|
-const mineStore = useMineStore();
|
|
|
-const { getDepartPath, getDepartTree, getDepartId, getMineCode } = storeToRefs(mineStore);
|
|
|
+// const mineStore = useMineStore();
|
|
|
+// const { getDepartPath, getDepartTree, getDepartId, getMineCode } = storeToRefs(mineStore);
|
|
|
// const innerValue = computed(() => getDepartPath.value.map((e) => e.fax));
|
|
|
const innerValue = ref('')
|
|
|
|
|
|
-
|
|
|
-// Tree Key 与参数名映射(关键:关联树形节点和实际参数)
|
|
|
-const treeKeyToParamMap = computed(() => ({
|
|
|
- '0-0-0': 'coVal',
|
|
|
- '0-0-1': 'ch4Val',
|
|
|
- '0-0-2': 'c2h4Val',
|
|
|
- '0-0-3': 'c2h2Val',
|
|
|
- '0-0-4': 'co2Val',
|
|
|
- '0-0-5': 'o2Val',
|
|
|
- '1-1-0': 'sourcePressure',
|
|
|
- // '1-1-1': 'outerPressure',
|
|
|
- // '1-1-2': 'pressureDiff',
|
|
|
- '2-2': 'temperature',
|
|
|
-}));
|
|
|
-// 参数标签映射(图表系列名称)
|
|
|
-const paramLabelMap = computed(() => ({
|
|
|
- coVal: 'CO浓度(ppm)',
|
|
|
- ch4Val: 'CH4浓度(%)',
|
|
|
- c2h4Val: 'C2H4浓度(ppm)',
|
|
|
- c2h2Val: 'C2H2浓度(ppm)',
|
|
|
- co2Val: 'CO2浓度(%)',
|
|
|
- o2Val: 'O2浓度(%)',
|
|
|
- sourcePressure: '压力(kPa)',
|
|
|
- temperature: '温度(℃)',
|
|
|
- // 'innerPressure': '内压力(kPa)',
|
|
|
- // 'outerPressure': '外压力(kPa)',
|
|
|
- // 'pressureDiff': '压差(kPa)',
|
|
|
- // 'temperature': '温度(℃)',
|
|
|
-}));
|
|
|
-// 参数颜色映射
|
|
|
-const paramColorMap = computed(() => ({
|
|
|
- coVal: '#f5222d', // 红色
|
|
|
- ch4Val: '#1890ff', // 蓝色
|
|
|
- c2h4Val: '#faad14', // 橙色
|
|
|
- c2h2Val: '#52c41a', // 绿色
|
|
|
- co2Val: '#722ed1', // 紫色
|
|
|
- o2Val: '#13c2c2', // 青色
|
|
|
- sourcePressure: '#ff4d4f', // 浅红
|
|
|
- // 'outerPressure': '#40a9ff',// 浅蓝
|
|
|
- // 'pressureDiff': '#fa8c16', // 浅橙
|
|
|
- temperature: '#9254de', // 浅紫
|
|
|
-}));
|
|
|
-
|
|
|
+// // 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;
|
|
|
@@ -172,21 +141,49 @@ function changeTime(val) {
|
|
|
dateRange.value[1] = val[1]
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+// 参数颜色映射
|
|
|
+const paramColorMap = computed(() => ({
|
|
|
+ CO: '#f5222d', // 红色
|
|
|
+ CH4: '#1890ff', // 蓝色
|
|
|
+ C2H4: '#faad14', // 橙色
|
|
|
+ C2H2: '#52c41a', // 绿色
|
|
|
+ CO2: '#722ed1', // 紫色
|
|
|
+ O2: '#13c2c2', // 青色
|
|
|
+ innerPressure: '#ff4d4f', // 浅红
|
|
|
+ outerPressure: '#40a9ff', // 浅蓝
|
|
|
+ pressureDiff: '#fa8c16', // 浅橙
|
|
|
+ temperature: '#9254de', // 浅紫
|
|
|
+}));
|
|
|
+
|
|
|
+// 参数标签映射(图表系列名称)
|
|
|
+const paramLabelMap = computed(() => ({
|
|
|
+ CO: 'CO浓度(ppm)',
|
|
|
+ CH4: 'CH4浓度(%)',
|
|
|
+ C2H4: 'C2H4浓度(ppm)',
|
|
|
+ C2H2: 'C2H2浓度(ppm)',
|
|
|
+ CO2: 'CO2浓度(%)',
|
|
|
+ O2: 'O2浓度(%)',
|
|
|
+ innerPressure: '内压力(kPa)',
|
|
|
+ outerPressure: '外压力(kPa)',
|
|
|
+ pressureDiff: '压差(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 })
|
|
|
+ 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
|
|
|
+ filteredData.value = res.records;
|
|
|
+ isChartGenerated.value = false;
|
|
|
} else {
|
|
|
- filteredData.value.length = 0
|
|
|
+ filteredData.value.length = 0;
|
|
|
isChartGenerated.value = true;
|
|
|
}
|
|
|
- console.log(filteredData.value, 'filteredData')
|
|
|
+ console.log(filteredData.value, 'filteredData');
|
|
|
|
|
|
// 2. 构建图表数据结构(适配 CustomChart 的 line 类型)
|
|
|
const timeMap = new Map();
|
|
|
@@ -209,7 +206,7 @@ async function generateChart() {
|
|
|
return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
|
|
|
});
|
|
|
generatedChartData.value = chartData;
|
|
|
- console.log(generatedChartData.value, 'generatedChartData')
|
|
|
+ console.log(generatedChartData.value, 'generatedChartData');
|
|
|
|
|
|
// 3. 构建图表配置(折线图类型,完善适配逻辑)
|
|
|
generatedChartConfig.value = {
|