关联分析-提交

src/components/Configurable/detail/CustomChart.vue

@@ -33,7 +33,7 @@
     // 依据每一个图表配置生成图表选项
     const { yAxis = [], xAxis = [], legend, order, type, sortBy, series, dataZoom = [] } = props.chartConfig;
     const textStyle = {
-      color: '#000',
+      color: '#fff',
       // color: '#fff',
     };
 

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

@@ -0,0 +1,19 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getGoafHistory='/province/device/getGoafHistory',
+  getGoafList='/province/device/getGoafList'
+}
+
+//查询采空区数据列表
+export const getGoafList = (params) =>
+  defHttp.post({
+    url: Api.getGoafList,
+    params,
+  });
+//查询采空区历史数据列表
+export const getGoafHistory = (params) =>
+  defHttp.get({
+    url: Api.getGoafHistory,
+    params,
+  });

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

@@ -18,8 +18,8 @@ export const treeData: TreeItem[] = [
     key: '1-1',
     children: [
       { title: '内压力', key: '1-1-0' },
-      { title: '外压力', key: '1-1-1' },
-      { title: '压差', key: '1-1-2' },
+      //{ title: '外压力', key: '1-1-1' },
+      //{ title: '压差', key: '1-1-2' },
     ],
   },
   {

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

@@ -2,68 +2,45 @@
   <div class="connectAnalysis">
     <div class="filter-area">
       <Row style="width:100%">
-        <Col :span="6">
+        <Col :span="8">
           <div class="filter-section param-section">
-            <span class="filter-label">查询煤矿：</span>
-            <div class="param-selector">
-              <Select ref="select" v-model:value="selectedParamsText" placeholder="请选择煤矿" style="width: 300px">
-                <SelectOption value="jack">Jack</SelectOption>
-              </Select>
-            </div>
-          </div>
-        </Col>
-        <Col :span="6">
-          <!-- 所属执法处 -->
-          <div class="filter-section param-section">
-            <span class="filter-label">所属执法处：</span>
+            <span class="filter-label">煤矿名称：</span>
             <div class="param-selector">
-              <Select ref="select" v-model:value="sszfc" placeholder="请选择煤矿" style="width: 300px">
-                <SelectOption v-for="(item, index) in deviceOptions1" :key="index">{{ item.value }}</SelectOption>
-              </Select>
+              <MineCascader style="width:300px"></MineCascader>
             </div>
           </div>
         </Col>
-        <Col :span="6">
-          <!-- 所属区域 -->
+        <Col :span="8">
+          <!-- 时间选择 -->
           <div class="filter-section param-section">
-            <span class="filter-label">所属区域：</span>
-            <div class="param-selector">
-              <Select ref="select" v-model:value="ssqy" placeholder="请选择煤矿" style="width: 300px">
-                <SelectOption v-for="(item, index) in deviceOptions1" :key="index">{{ item.value }}</SelectOption>
-              </Select>
-            </div>
+            <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">
-          <!-- 煤矿名称 -->
+        <Col :span="8">
+          <!-- 煤矿简称 mineNameAbbr-->
           <div class="filter-section param-section">
-            <span class="filter-label">煤矿名称：</span>
+            <span class="filter-label">煤矿简称：</span>
             <div class="param-selector">
-              <Input v-model="selectedParamsText" placeholder="请选择所属区域" readonly style="width: 300px" />
+              <Input v-model="mineNameAbbr" placeholder="请选择所属区域" readonly style="width: 300px" />
             </div>
           </div>
         </Col>
       </Row>
 
       <Row style="width:100%">
-        <Col :span="6">
-          <!-- 煤矿简称 -->
-          <div class="filter-section param-section">
-            <span class="filter-label">煤矿简称：</span>
-            <div class="param-selector">
-              <Input v-model="selectedParamsText" placeholder="请选择所属区域" readonly style="width: 300px" />
-            </div>
-          </div>
-        </Col>
-        <Col :span="6">
+        <Col :span="8">
           <!-- 时间选择 -->
           <div class="filter-section param-section">
             <span class="filter-label">时间选择：</span>
             <RangePicker v-model="dateRange" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-              style="width: 300px" :show-time="{ format: 'HH:mm:ss' }" />
+              style="width: 300px" :show-time="{ format: 'HH:mm:ss' }" @change="changeTime" />
           </div>
         </Col>
-        <Col :span="6">
+        <Col :span="8">
           <!-- 参数选择 -->
           <div class="filter-section param-section">
             <span class="filter-label">参数选择：</span>
@@ -77,22 +54,13 @@
             </div>
           </div>
         </Col>
-        <Col :span="6">
+        <Col :span="8">
           <!-- 生成按钮 -->
           <div class="filter-section">
             <Button type="primary" @click="generateChart">生成</Button>
           </div>
         </Col>
       </Row>
-
-
-
-
-
-
-
-
-
     </div>
     <!-- 动态图表区域-->
     <div class="chart-area">
@@ -115,21 +83,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watchEffect } from 'vue';
 import dayjs from 'dayjs';
-import isBetween from 'dayjs/plugin/isBetween'; // 引入 isBetween 插件
 import { treeData, historicalMockChartData } from './connectAnalysis.data'; // 引入模拟数据
-import { Row, Col, Select, SelectOption, 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 { getMineData, getProvinceAlarm } from '../fireAreaJudgeAnalysis/fireAreaJudge.api';
+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';
 
-// 关键：使用 dayjs 插件
-dayjs.extend(isBetween);
 // 组件注册
 const RangePicker = DatePicker.RangePicker;
 // 筛选相关响应式数据
-const dateRange = ref([dayjs().subtract(1, 'day').toDate(), dayjs().toDate()]); // 默认时间范围（近1天）
+const dateRange = ref([dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]); // 默认时间范围（近1天）
+// const dateRange = ref<any[]>([]); // 默认时间范围（近1天）
 const selectedParamsText = ref(''); // 参数选择框显示文本
 const showTree = ref(false); // 控制树形选择器显示/隐藏
 const checkedTreeKeys = ref([]); // 树形选中的key
@@ -137,55 +106,54 @@ const selectedParams = ref([]); // 选中的参数（实际用于图表）
 const generatedChartData = ref<any[]>([]); // 生成的图表数据
 const generatedChartConfig = ref({}); // 生成的图表配置
 const isChartGenerated = ref(false); // 是否已点击生成
+const mineNameAbbr = ref('')//煤矿简称
+const goafId = ref('')//采空区id
+const goafOption = ref<any[]>([])//采空区列表
+const filteredData = ref<any[]>([])//曲线数据
+const mineStore = useMineStore();
+const { getMine, getMineCode, getMinePath, getMineTree } = storeToRefs(mineStore);
+const innerValue = computed(() => getMinePath.value.map((e) => e.fax));
 
-const cxmk = ref('')
-const sszfc = ref('')
-const ssqy = ref('')
-//煤矿列表数据
-const deviceOptions = ref([]);
-const deviceOptions1 = ref([
-  { label: '执法一处', value: '0' },
-  { label: '执法二处', value: '1' },
-  { label: '执法三处', value: '2' },
-])
 
 // 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',
+  '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(() => ({
-  'CO': 'CO浓度(ppm)',
-  'CH4': 'CH4浓度(%)',
-  'C2H4': 'C2H4浓度(ppm)',
-  'C2H2': 'C2H2浓度(ppm)',
-  'CO2': 'CO2浓度(%)',
-  'O2': 'O2浓度(%)',
-  'innerPressure': '内压力(kPa)',
-  'outerPressure': '外压力(kPa)',
-  'pressureDiff': '压差(kPa)',
+  '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(() => ({
-  'CO': '#f5222d',    // 红色
-  'CH4': '#1890ff',   // 蓝色
-  'C2H4': '#faad14',  // 橙色
-  'C2H2': '#52c41a',  // 绿色
-  'CO2': '#722ed1',   // 紫色
-  'O2': '#13c2c2',    // 青色
-  'innerPressure': '#ff4d4f', // 浅红
-  'outerPressure': '#40a9ff',// 浅蓝
-  'pressureDiff': '#fa8c16', // 浅橙
+  'coVal': '#f5222d',    // 红色
+  'ch4Val': '#1890ff',   // 蓝色
+  'c2h4Val': '#faad14',  // 橙色
+  'c2h2Val': '#52c41a',  // 绿色
+  'co2Val': '#722ed1',   // 紫色
+  'o2Val': '#13c2c2',    // 青色
+  'sourcePressure': '#ff4d4f', // 浅红
+  // 'outerPressure': '#40a9ff',// 浅蓝
+  // 'pressureDiff': '#fa8c16', // 浅橙
   'temperature': '#9254de',  // 浅紫
 }));
 
@@ -203,8 +171,14 @@ const handleTreeCheck = (checkedKeys) => {
   selectedParamsText.value = paramLabels.join('、');
 };
 
+function changeTime(val) {
+  dateRange.value[0] = val[0].format('YYYY-MM-DD HH:mm:ss')
+  dateRange.value[1] = val[1].format('YYYY-MM-DD HH:mm:ss')
+
+}
+
 // 生成折线图核心逻辑
-const generateChart = () => {
+async function generateChart() {
   // 校验筛选条件
   if (!dateRange.value[0] || !dateRange.value[1]) {
     message.warning('请选择完整的时间范围');
@@ -214,23 +188,35 @@ const generateChart = () => {
     message.warning('请至少选择一个监测参数');
     return;
   }
+  if (!goafId.value) {
+    message.warning('请选择采空区');
+    return;
+  }
+  showTree.value = false
+  //获取采空区历史数据列表
+  let res = await getGoafHistory({ pageNo: 1, pageSize: 100, startTime: dateRange.value[0], endTime: dateRange.value[1], goafId: goafId.value })
+  if (res && res.records) {
+    filteredData.value = res.records
+    isChartGenerated.value = false
+  } else {
+    filteredData.value.length = 0
+    isChartGenerated.value = true;
+  }
 
-  isChartGenerated.value = true;
-  const start = dayjs(dateRange.value[0]); // 转为 dayjs 实例
-  const end = dayjs(dateRange.value[1]);   // 转为 dayjs 实例
+  // const start = dayjs(dateRange.value[0]); // 转为 dayjs 实例
+  // const end = dayjs(dateRange.value[1]);   // 转为 dayjs 实例
+  // // 1. 筛选时间范围内的模拟数据（修复核心漏洞）
+  // const filteredData = historicalMockChartData.filter(item => {
+  //   const itemTime = dayjs(item.time); // 解析 item.time 为 dayjs 实例
+  //   return itemTime.isAfter(start) && itemTime.isBefore(end);
+  // });
 
-  // 1. 筛选时间范围内的模拟数据（修复核心漏洞）
-  const filteredData = historicalMockChartData.filter(item => {
-    const itemTime = dayjs(item.time); // 解析 item.time 为 dayjs 实例
-    // 修复 isBetween 用法：明确指定 unit 为 'second'，包容性为 '[]'
-    return itemTime.isBetween(start, end, 'second', '[]');
-  });
 
   // 2. 构建图表数据结构（适配 CustomChart 的 line 类型）
   const timeMap = new Map();
   // 修复变量名：filteredRawData → filteredData（之前未定义）
-  filteredData.forEach((item) => {
-    const timeStr = dayjs(item.time).format('YYYY-MM-DD HH:mm:ss');
+  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 });
     }
@@ -252,12 +238,15 @@ const generateChart = () => {
   generatedChartConfig.value = {
     type: 'line', // 折线图
     clear: true, // 每次生成清空之前的图表
-    legend: { show: true, top: 10, right: 10 },
+    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轴标签密度
         }
@@ -265,8 +254,14 @@ const generateChart = () => {
     ],
     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: paramColorMap.value[param] },
+      nameTextStyle: { color: '#fff' },
       axisLine: { lineStyle: { color: paramColorMap.value[param] } },
       splitLine: { lineStyle: { opacity: 0.1 } }
     })),
@@ -302,25 +297,22 @@ const generateChart = () => {
     message.info('当前筛选条件下无数据');
   }
 };
+//获取采空区列表
+async function getGoafListData() {
+  let res = await getGoafList({ mineCode: innerValue.value[innerValue.value.length - 1] })
+  if (res.length) {
+    goafOption.value = res.map(el => {
+      return {
+        label: el.devicePos,
+        value: el.id,
+      }
+    })
+  }
+}
 
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
-  };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
-    };
-  });
-};
-
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-});
+watchEffect(() => {
+  innerValue.value && getGoafListData()
+})
 
 </script>