From 7b52f30bc471b7f433eea950f77ecb74a87d867c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 05 三月 2025 17:33:02 +0800
Subject: [PATCH] 污染溯源模块编写中
---
src/api/index.js | 2
src/components/grid/GridSearch.vue | 34 +++--------
src/components.d.ts | 3 +
src/components/scene/SceneSearch.vue | 51 +++++++++++++---
src/components/grid/GridTool.vue | 0
src/components/list/DescriptionsList.vue | 31 ++++++++++
src/components/list/DescriptionsListItem.vue | 37 ++++++++++++
7 files changed, 122 insertions(+), 36 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index b7a1bfb..fd8d2c9 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,7 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';
-const debug = true;
+const debug = false;
let ip1 = 'http://47.100.191.150:9029/';
// console.log(import.meta.env);
diff --git a/src/components.d.ts b/src/components.d.ts
index 2431e7a..86cdcb5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -16,6 +16,8 @@
CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
DataSummary: typeof import('./components/monitor/DataSummary.vue')['default']
DataTable: typeof import('./components/monitor/DataTable.vue')['default']
+ DescriptionsList: typeof import('./components/list/DescriptionsList.vue')['default']
+ DescriptionsListItem: typeof import('./components/list/DescriptionsListItem.vue')['default']
DeviceCreate: typeof import('./components/device/DeviceCreate.vue')['default']
DeviceManage: typeof import('./components/device/DeviceManage.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
@@ -51,6 +53,7 @@
FactorTrend: typeof import('./components/monitor/FactorTrend.vue')['default']
GaugeChart: typeof import('./components/chart/GaugeChart.vue')['default']
GridSearch: typeof import('./components/grid/GridSearch.vue')['default']
+ GridTool: typeof import('./components/grid/GridTool.vue')['default']
HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default']
MapLocation: typeof import('./components/map/MapLocation.vue')['default']
MapScene: typeof import('./components/map/MapScene.vue')['default']
diff --git a/src/components/grid/GridSearch.vue b/src/components/grid/GridSearch.vue
index c9d90a6..3026b45 100644
--- a/src/components/grid/GridSearch.vue
+++ b/src/components/grid/GridSearch.vue
@@ -7,31 +7,15 @@
width="300px"
>
<template #default>
- <el-form
- :inline="false"
- ref="formRef"
- label-position="right"
- label-width="100px"
- >
- <el-form-item label="缃戞牸缂栧彿锛�">
- <div>
- {{ data.cellIndex }}
- </div>
- </el-form-item>
- <el-form-item label="缁忕含搴︼細">
- <div>
- {{ data.longitude + ', ' + data.latitude }}
- </div>
- </el-form-item>
- <el-form-item label="PM2.5锛�">
- <div>
- {{ data.pm25 + ' 渭g/m鲁' }}
- </div>
- </el-form-item>
- <el-form-item label="鍥涜嚦鑼冨洿锛�">
- <div>/</div>
- </el-form-item>
- </el-form>
+ <DescriptionsList v-if="data">
+ <DescriptionsListItem label="缃戞牸缂栧彿" :content="data.cellIndex" />
+ <DescriptionsListItem
+ label="缁忕含搴�"
+ :content="data.longitude + ', ' + data.latitude"
+ />
+ <DescriptionsListItem label="PM2.5" :content="data.pm25 + ' 渭g/m鲁'" />
+ <DescriptionsListItem label="鍥涜嚦鑼冨洿" content="/" />
+ </DescriptionsList>
</template>
<template #footer> </template>
</CardDialog>
diff --git a/src/components/grid/GridTool.vue b/src/components/grid/GridTool.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/grid/GridTool.vue
diff --git a/src/components/list/DescriptionsList.vue b/src/components/list/DescriptionsList.vue
new file mode 100644
index 0000000..4afb85a
--- /dev/null
+++ b/src/components/list/DescriptionsList.vue
@@ -0,0 +1,31 @@
+<template>
+ <div class="title-wrapper">
+ <div v-if="title" class="fy-h2">{{ title }}</div>
+ <slot name="extra"></slot>
+ </div>
+ <table>
+ <tbody>
+ <slot></slot>
+ </tbody>
+ </table>
+</template>
+
+<script>
+export default {
+ props: {
+ title: String
+ }
+};
+</script>
+
+<style scoped>
+.title-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+table {
+ width: 100%;
+}
+</style>
diff --git a/src/components/list/DescriptionsListItem.vue b/src/components/list/DescriptionsListItem.vue
new file mode 100644
index 0000000..2aeb245
--- /dev/null
+++ b/src/components/list/DescriptionsListItem.vue
@@ -0,0 +1,37 @@
+<template>
+ <tr>
+ <td v-if="label" class="td-1">{{ label }}</td>
+ <td v-else class="td-1"><slot name="label"></slot></td>
+ <td v-if="content" class="td-2">{{ content }}</td>
+ <td v-else class="td-2"><slot name="content"></slot></td>
+ </tr>
+</template>
+
+<script>
+export default {
+ props: {
+ label: String,
+ content: String
+ }
+};
+</script>
+
+<style scoped>
+tr {
+ font-size: var(--el-font-size-small);
+}
+td {
+ border: 1px solid rgba(255, 255, 255, 0.616);
+ padding: 2px 6px;
+}
+.td-1 {
+ width: 68px;
+ background-color: var(--bg-color-2);
+ color: white;
+}
+
+.td-2 {
+ color: white;
+ /* background-color: var(--el-fill-color-light); */
+}
+</style>
diff --git a/src/components/scene/SceneSearch.vue b/src/components/scene/SceneSearch.vue
index 965f216..e17973c 100644
--- a/src/components/scene/SceneSearch.vue
+++ b/src/components/scene/SceneSearch.vue
@@ -15,7 +15,7 @@
width="400px"
>
<template #default>
- <div v-show="nextPage">
+ <div v-show="!nextPage">
<div>
<el-text size="small" type="warning">
鍏辫{{ sceneStore.sceneList.length }}涓偣浣嶏紝鍏朵腑{{
@@ -82,13 +82,41 @@
<!-- </el-col> -->
</el-row>
</div>
- <div v-show="!nextPage">
- <el-button
- @click="nextPage = false"
- type="primary"
- class="el-button-custom p-events-auto"
- >杩斿洖</el-button
- >
+ <div v-show="nextPage">
+ <DescriptionsList v-if="selectedScene" title="鍦烘櫙璇︽儏">
+ <template #extra>
+ <el-button
+ @click="nextPage = false"
+ icon="back"
+ type="primary"
+ size="small"
+ class="el-button-custom p-events-auto"
+ >杩斿洖</el-button
+ >
+ </template>
+ <DescriptionsListItem label="鍚嶇О" :content="selectedScene.name" />
+ <DescriptionsListItem label="绫诲瀷" :content="selectedScene.type" />
+ <DescriptionsListItem
+ label="鍖哄幙"
+ :content="selectedScene.districtName"
+ />
+ <DescriptionsListItem
+ label="鍦板潃"
+ :content="selectedScene.location"
+ />
+ <DescriptionsListItem
+ label="缁忕含搴�"
+ :content="selectedScene.longitude + ', ' + selectedScene.latitude"
+ />
+ <DescriptionsListItem
+ label="闈犺繎绔欑偣"
+ :content="selectedScene.closestDevice.name"
+ />
+ <DescriptionsListItem
+ label="鐩歌窛绔欑偣"
+ :content="selectedScene.closestDevice.dis + '绫�'"
+ />
+ </DescriptionsList>
</div>
</template>
<template #footer>
@@ -157,7 +185,8 @@
dialogVisible: false,
onConfirm: undefined,
showSceneTypes: [],
- nextPage: false
+ nextPage: false,
+ selectedScene: undefined
};
},
computed: {
@@ -218,7 +247,7 @@
if (!s.closestDevice || dis < s.closestDevice.dis) {
s.closestDevice = {
name: d.name,
- dis: dis
+ dis: Math.round(dis)
};
}
});
@@ -254,6 +283,7 @@
// },
showSceneList(nV, oV) {
if (nV != oV) {
+ this.nextPage = false;
this.dialogVisible = true;
this.drawMarks(nV);
}
@@ -283,6 +313,7 @@
},
handleRowClick(row, col, event) {
this.nextPage = true;
+ this.selectedScene = row;
MapUtil.setCenter([row.longitude, row.latitude], true);
},
filterHandler(value, row, column) {
--
Gitblit v1.9.3