关联分析更新

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

@@ -1,28 +1,98 @@
 <template>
   <div class="connectAnalysis">
     <div class="filter-area">
-      <!-- 时间选择 -->
-      <div class="filter-section">
-        <span class="filter-label">时间选择：</span>
-        <RangePicker v-model="dateRange" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-          style="width: 320px" :show-time="{ format: 'HH:mm:ss' }" />
-      </div>
-      <!-- 参数选择 -->
-      <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" />
+      <Row style="width:100%">
+        <Col :span="6">
+          <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>
-        </div>
-      </div>
-      <!-- 生成按钮 -->
-      <div class="filter-section">
-        <Button type="primary" @click="generateChart">生成</Button>
-      </div>
+        </Col>
+        <Col :span="6">
+          <!-- 所属执法处 -->
+          <div class="filter-section param-section">
+            <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>
+            </div>
+          </div>
+        </Col>
+        <Col :span="6">
+          <!-- 所属区域 -->
+          <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>
+          </div>
+        </Col>
+        <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>
+      </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">
+          <!-- 时间选择 -->
+          <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' }" />
+          </div>
+        </Col>
+        <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" />
+              <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>
+        <Col :span="6">
+          <!-- 生成按钮 -->
+          <div class="filter-section">
+            <Button type="primary" @click="generateChart">生成</Button>
+          </div>
+        </Col>
+      </Row>
+
+
+
+
+
+
+
+
+
     </div>
     <!-- 动态图表区域-->
     <div class="chart-area">
@@ -45,13 +115,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween'; // 引入 isBetween 插件
-import { treeData, historicalMockChartData} from './connectAnalysis.data'; // 引入模拟数据
-import {  DatePicker, Button, message, Input } from 'ant-design-vue';
+import { treeData, historicalMockChartData } from './connectAnalysis.data'; // 引入模拟数据
+import { Row, Col, Select, SelectOption, 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';
 
 // 关键：使用 dayjs 插件
 dayjs.extend(isBetween);
@@ -67,6 +138,17 @@ const generatedChartData = ref<any[]>([]); // 生成的图表数据
 const generatedChartConfig = ref({}); // 生成的图表配置
 const isChartGenerated = ref(false); // 是否已点击生成
 
+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',
@@ -166,7 +248,7 @@ const generateChart = () => {
   });
   generatedChartData.value = chartData;
 
-   // 3. 构建图表配置（折线图类型，完善适配逻辑）
+  // 3. 构建图表配置（折线图类型，完善适配逻辑）
   generatedChartConfig.value = {
     type: 'line', // 折线图
     clear: true, // 每次生成清空之前的图表
@@ -221,6 +303,25 @@ const generateChart = () => {
   }
 };
 
+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();
+});
+
 </script>
 
 <style lang="less" scoped>
@@ -254,7 +355,7 @@ const generateChart = () => {
 
   .param-section {
     flex: 1;
-    min-width: 300px;
+    // min-width: 300px;
   }
 
   .param-selector {
@@ -289,26 +390,29 @@ const generateChart = () => {
     border-radius: 10px;
     background: #f8f9fc;
   }
+
   .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;
-}
+    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>