From 7b52f30bc471b7f433eea950f77ecb74a87d867c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 05 三月 2025 17:33:02 +0800
Subject: [PATCH] 污染溯源模块编写中
---
src/components/scene/SceneSearch.vue | 241 ++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 201 insertions(+), 40 deletions(-)
diff --git a/src/components/scene/SceneSearch.vue b/src/components/scene/SceneSearch.vue
index a7644ac..e17973c 100644
--- a/src/components/scene/SceneSearch.vue
+++ b/src/components/scene/SceneSearch.vue
@@ -15,40 +15,59 @@
width="400px"
>
<template #default>
- <el-row class="scene-table">
- <!-- <el-col :span="20"> -->
- <el-table
- :data="sceneStore.sceneList"
- table-layout="fixed"
+ <div v-show="!nextPage">
+ <div>
+ <el-text size="small" type="warning">
+ 鍏辫{{ sceneStore.sceneList.length }}涓偣浣嶏紝鍏朵腑{{
+ sceneTypeSummary
+ }}
+ </el-text>
+ </div>
+ <!-- <div v-for="(t, i) in closestScene" :key="i"> -->
+ <el-text
+ v-for="(t, i) in closestScene"
+ :key="i"
size="small"
- height="30vh"
- :show-overflow-tooltip="true"
- border
- row-class-name="t-row"
- cell-class-name="t-cell"
- header-row-class-name="t-header-row"
- header-cell-class-name="t-header-cell"
- @row-click="handleRowClick"
- @filter-change="handleFilterChange"
+ type="warning"
>
- <el-table-column type="index" label="#" width="25" />
- <el-table-column
- prop="type"
- label="绫诲瀷"
- width="56"
- column-key="type"
- :filters="sceneTypeFilter"
- :filter-method="filterHandler"
- />
- <el-table-column prop="name" label="鍚嶇О" />
- <!-- <el-table-column prop="location" label="鍦板潃" /> -->
- <el-table-column
- prop="districtName"
- label="鍖哄幙"
- align="center"
- width="54"
- />
- <!-- <el-table-column label="绠＄悊" width="70" align="center">
+ {{ t }}
+ </el-text>
+ <!-- </div> -->
+ <!-- <el-row> 鍏辫{{ sceneStore.sceneList.length }}涓偣浣嶏紝鍏朵腑 </el-row> -->
+ <el-row class="scene-table">
+ <!-- <el-col :span="20"> -->
+ <el-table
+ :data="sceneStore.sceneList"
+ table-layout="fixed"
+ size="small"
+ height="30vh"
+ :show-overflow-tooltip="true"
+ border
+ row-class-name="t-row"
+ cell-class-name="t-cell"
+ header-row-class-name="t-header-row"
+ header-cell-class-name="t-header-cell"
+ @row-click="handleRowClick"
+ @filter-change="handleFilterChange"
+ >
+ <el-table-column type="index" label="#" width="25" />
+ <el-table-column
+ prop="type"
+ label="绫诲瀷"
+ width="56"
+ column-key="type"
+ :filters="sceneTypeFilter"
+ :filter-method="filterHandler"
+ />
+ <el-table-column prop="name" label="鍚嶇О" />
+ <!-- <el-table-column prop="location" label="鍦板潃" /> -->
+ <el-table-column
+ prop="districtName"
+ label="鍖哄幙"
+ align="center"
+ width="54"
+ />
+ <!-- <el-table-column label="绠＄悊" width="70" align="center">
<template #default="{ row }">
<el-button
type="primary"
@@ -59,13 +78,50 @@
>
</template>
</el-table-column> -->
- </el-table>
- <!-- </el-col> -->
- </el-row>
+ </el-table>
+ <!-- </el-col> -->
+ </el-row>
+ </div>
+ <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>
- <el-row justify="start" align="middle" class="p-b-2 one-row">
- <el-text size="small" type="warning">鎼滅储鑼冨洿</el-text>
+ <!-- <el-row justify="start" align="middle" class="p-b-2 one-row"> -->
+ <!-- <el-text size="small" type="warning">鎼滅储鑼冨洿</el-text>
<el-input
class="input-radius m-h-2"
size="small"
@@ -74,8 +130,9 @@
/>
<el-text size="small" type="warning">
鍏噷浠ュ唴锛岀粨鏋渰{ sceneStore.sceneList.length }}鏉�</el-text
- >
- </el-row>
+ > -->
+
+ <!-- </el-row> -->
</template>
</CardDialog>
</template>
@@ -87,8 +144,32 @@
import { useSceneStore } from '@/stores/scene';
import { useToolboxStore } from '@/stores/toolbox';
import MapUtil from '@/utils/map/util';
+import calculate from '@/utils/map/calculate';
let layer = undefined;
+const devices = [
+ {
+ name: '绋嬫ˉ绔�',
+ typeId: 20,
+ type: 'type',
+ longitude: 121.362928,
+ latitude: 31.192925
+ },
+ {
+ name: '鍗庨槼绔�',
+ typeId: 20,
+ type: '甯傛帶鐐�',
+ longitude: 121.424603,
+ latitude: 31.223644
+ },
+ {
+ name: '浠欓湠绔�',
+ typeId: 19,
+ type: '鍥芥帶鐐�',
+ longitude: 121.394775,
+ latitude: 31.203982
+ }
+];
export default {
setup() {
@@ -103,7 +184,9 @@
return {
dialogVisible: false,
onConfirm: undefined,
- showSceneTypes: []
+ showSceneTypes: [],
+ nextPage: false,
+ selectedScene: undefined
};
},
computed: {
@@ -126,6 +209,57 @@
return this.showSceneTypes.indexOf(v.type) != -1;
});
}
+ },
+ // 鎼滅储缁撴灉鍦烘櫙绫诲瀷缁熻
+ sceneTypeSummary() {
+ const typeMap = new Map();
+ this.sceneStore.sceneList.forEach((s) => {
+ if (!typeMap.has(s.type)) {
+ typeMap.set(s.type, []);
+ }
+ typeMap.get(s.type).push(s);
+ });
+
+ let summary = '';
+ typeMap.forEach((v, k) => {
+ summary += `${k}${v.length}涓�乣;
+ });
+ summary = summary.slice(0, summary.length - 1);
+
+ return summary;
+ },
+ // 璁＄畻璺濈缁欏畾鐐逛綅鏈�杩戠殑鍦烘櫙
+ closestScene() {
+ let txt = [];
+ devices.forEach((d) => {
+ let minDistance, scene;
+ this.sceneStore.sceneList.forEach((s) => {
+ const dis = calculate.getDistance(
+ s.longitude,
+ s.latitude,
+ d.longitude,
+ d.latitude
+ );
+ if (!minDistance || dis < minDistance) {
+ minDistance = dis;
+ scene = s;
+ }
+ if (!s.closestDevice || dis < s.closestDevice.dis) {
+ s.closestDevice = {
+ name: d.name,
+ dis: Math.round(dis)
+ };
+ }
+ });
+ if (minDistance) {
+ minDistance = Math.round(minDistance);
+ }
+ if (scene) {
+ txt.push(`璺�${d.name}鏈�杩戠殑涓�${scene.name}锛岃窛绂�${minDistance}绫筹紱`);
+ }
+ });
+
+ return txt;
}
},
watch: {
@@ -149,6 +283,7 @@
// },
showSceneList(nV, oV) {
if (nV != oV) {
+ this.nextPage = false;
this.dialogVisible = true;
this.drawMarks(nV);
}
@@ -177,6 +312,8 @@
}
},
handleRowClick(row, col, event) {
+ this.nextPage = true;
+ this.selectedScene = row;
MapUtil.setCenter([row.longitude, row.latitude], true);
},
filterHandler(value, row, column) {
@@ -203,4 +340,28 @@
/* .ff-content-medium .ff-border-top {
padding: 0px 0px var(--bevel-length-2) 0px;
} */
+
+::v-deep .el-table {
+ --el-table-bg-color: transparent;
+ --el-table-row-hover-bg-color: var(--select_color);
+ --el-table-current-row-bg-color: var(--select_color);
+ /* --el-table-current-row-bg-color: #7dff5d96; */
+ --el-table-text-color: var(--font-color);
+}
+
+::v-deep .t-row {
+ cursor: pointer;
+ background-color: transparent !important;
+}
+
+.t-cell {
+}
+
+.t-header-row {
+}
+
+::v-deep .t-header-cell {
+ background-color: var(--bg-color-2) !important;
+ color: white !important;
+}
</style>
--
Gitblit v1.9.3