From 66e48ee8e286533a9614efa34d42297213c1da4b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 04 六月 2025 17:34:11 +0800
Subject: [PATCH] 动态溯源（待完成）
---
src/components/map/MapScene.vue | 2
src/utils/chart/chart-option.js | 2
src/views/sourcetrace/SourceTrace.vue | 118 ++++++++++++++++-------
src/utils/map/index_old.js | 2
src/api/index.js | 9 +
src/components/monitor/FactorTrend.vue | 4
src/utils/map/calculate.js | 101 ++++++++++++--------
src/utils/map/index.js | 12 ++
src/views/realtimemode/RealtimeMode.vue | 15 ++
src/components/scene/SceneTable.vue | 3
src/components/chart/RealTimeLineChart.vue | 15 +-
11 files changed, 181 insertions(+), 102 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index c456a07..c83bec6 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,6 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';
+const openLog = false;
const debug = true;
let ip1 = 'http://47.100.191.150:9029/';
@@ -29,7 +30,7 @@
i.interceptors.request.use(
function (config) {
// 鍦ㄥ彂閫佽姹備箣鍓嶅仛浜涗粈涔�
- if (import.meta.env.DEV) {
+ if (import.meta.env.DEV && openLog) {
console.log('==>璇锋眰寮�濮�');
console.log(`${config.baseURL}${config.url}`);
if (config.data) {
@@ -40,7 +41,7 @@
},
function (error) {
// 瀵硅姹傞敊璇仛浜涗粈涔�
- if (import.meta.env.DEV) {
+ if (import.meta.env.DEV && openLog) {
console.log('==>璇锋眰寮�濮�');
console.log(error);
}
@@ -57,7 +58,7 @@
function (response) {
// 2xx 鑼冨洿鍐呯殑鐘舵�佺爜閮戒細瑙﹀彂璇ュ嚱鏁般��
// 瀵瑰搷搴旀暟鎹仛鐐逛粈涔�
- if (import.meta.env.DEV) {
+ if (import.meta.env.DEV && openLog) {
console.log(response);
console.log('==>璇锋眰缁撴潫');
}
@@ -85,7 +86,7 @@
function (error) {
// 瓒呭嚭 2xx 鑼冨洿鐨勭姸鎬佺爜閮戒細瑙﹀彂璇ュ嚱鏁般��
// 瀵瑰搷搴旈敊璇仛鐐逛粈涔�
- if (import.meta.env.DEV) {
+ if (import.meta.env.DEV && openLog) {
console.log(error);
console.log('==>璇锋眰缁撴潫');
}
diff --git a/src/components/chart/RealTimeLineChart.vue b/src/components/chart/RealTimeLineChart.vue
index fa8da32..7a2ea1d 100644
--- a/src/components/chart/RealTimeLineChart.vue
+++ b/src/components/chart/RealTimeLineChart.vue
@@ -44,7 +44,7 @@
}
if (this.lineChart) {
this.lineChart.setOption(this.option, { notMerge: true });
- console.log('鎶樼嚎鍥剧敓鎴愶細绔嬪嵆');
+ // console.log('鎶樼嚎鍥剧敓鎴愶細绔嬪嵆');
} else {
this.onChartCreated = () => {
this.lineChart.setOption(this.option, { notMerge: true });
@@ -54,12 +54,13 @@
},
mounted() {
this.lineChart = echarts.init(this.$refs.lineChart);
- setTimeout(() => {
- if (typeof this.onChartCreated === 'function') {
- this.onChartCreated();
- console.log('鎶樼嚎鍥剧敓鎴愶細婊炲悗');
- }
- }, 500);
+ this.onChartCreated();
+ // setTimeout(() => {
+ // if (typeof this.onChartCreated === 'function') {
+ // this.onChartCreated();
+ // // console.log('鎶樼嚎鍥剧敓鎴愶細婊炲悗');
+ // }
+ // }, 500);
}
};
</script>
diff --git a/src/components/map/MapScene.vue b/src/components/map/MapScene.vue
index 38b1856..f062b19 100644
--- a/src/components/map/MapScene.vue
+++ b/src/components/map/MapScene.vue
@@ -101,7 +101,7 @@
const key = this.districtCode + t;
if (!lableMarkMap.has(key)) {
this.fetchScene(t).then((res) => {
- const layer = marks.createLabelMarks(sceneIcon(t), res);
+ const layer = marks.createLabelMarks(sceneIcon(t), res, false);
lableMarkMap.set(key, { show: true, layer });
});
} else {
diff --git a/src/components/monitor/FactorTrend.vue b/src/components/monitor/FactorTrend.vue
index eddadbb..8256d81 100644
--- a/src/components/monitor/FactorTrend.vue
+++ b/src/components/monitor/FactorTrend.vue
@@ -1,14 +1,14 @@
<template>
<BaseCard size="medium" direction="left">
<template #content>
- <el-scrollbar height="calc(98vh - var(--bevel-length-2))">
+ <el-scrollbar height="calc(49vh - var(--bevel-length-2))" always>
<div v-for="item in seriesList" :key="item.key">
<el-row
v-show="selectFactorType.includes(item.series.key)"
justify="space-between"
class="wrap"
>
- <div class="flex-col">
+ <div class="flex-col m-r-4">
<div class="factor-name">{{ item.series.name }}</div>
<div class="factor-value">
{{ item.series.currentData }}
diff --git a/src/components/scene/SceneTable.vue b/src/components/scene/SceneTable.vue
index a587167..3957132 100644
--- a/src/components/scene/SceneTable.vue
+++ b/src/components/scene/SceneTable.vue
@@ -108,7 +108,8 @@
layer = undefined;
}
}
- }
+ },
+ { immediate: true }
);
function drawMarks(sceneList) {
diff --git a/src/utils/chart/chart-option.js b/src/utils/chart/chart-option.js
index 30995e3..5d9269a 100644
--- a/src/utils/chart/chart-option.js
+++ b/src/utils/chart/chart-option.js
@@ -134,7 +134,7 @@
}
},
grid: {
- left: '11%',
+ left: '12%',
right: '2%',
top: '7%',
bottom: '20%'
diff --git a/src/utils/map/calculate.js b/src/utils/map/calculate.js
index 5fe8f49..01ffd8d 100644
--- a/src/utils/map/calculate.js
+++ b/src/utils/map/calculate.js
@@ -94,20 +94,72 @@
}
/**
+ * 楂樺痉鍦板浘鍧愭爣杞珿PS鍧愭爣绠楁硶
+ */
+function gcj02towgs84(lng, lat) {
+ // lat = +latlng = +lng
+ if (out_of_china(lng, lat)) {
+ return [lng, lat];
+ } else {
+ let dlat = transformlat(lng - 105.0, lat - 35.0);
+ let dlng = transformlng(lng - 105.0, lat - 35.0);
+ let radlat = (lat / 180.0) * PI;
+ let magic = Math.sin(radlat);
+ magic = 1 - ee * magic * magic;
+ let sqrtmagic = Math.sqrt(magic);
+ dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
+ dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
+ let mglat = Math.round((lat * 2 - lat - dlat) * 1000000) / 1000000;
+ let mglng = Math.round((lng * 2 - lng - dlng) * 1000000) / 1000000;
+ return [mglng, mglat];
+ }
+}
+
+//浠嶨PS杞珮寰�
+function wgs84_To_Gcj02(lon, lat) {
+ if (out_of_china(lon, lat)) {
+ return [lon, lat];
+ } else {
+ let dLat = transformlat(lon - 105.0, lat - 35.0);
+ let dLon = transformlng(lon - 105.0, lat - 35.0);
+ let radLat = (lat / 180.0) * PI;
+ let magic = Math.sin(radLat);
+ magic = 1 - ee * magic * magic;
+ let sqrtMagic = Math.sqrt(magic);
+ dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * PI);
+ dLon = (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * PI);
+ let mgLat = lat + dLat;
+ let mgLon = lon + dLon;
+ return [mgLon, mgLat];
+ }
+}
+
+/**
* 灏唃ps缁忕含搴﹁浆鎹负楂樺痉鍦板浘缁忕含搴�
* @param {*} lnglats
* @param {*} callback
*/
function _convertLatlng(index, coor, lnglats, type = 'gps', callback) {
if (index < coor.length) {
- var path = parse2LngLat(coor[index]);
- // eslint-disable-next-line no-undef
- AMap.convertFrom(path, type, function (status, result) {
- if (result.info === 'ok') {
- lnglats.push.apply(lnglats, result.locations);
- _convertLatlng(index + 1, coor, lnglats, type, callback);
+ coor[index].forEach((c) => {
+ let r;
+ if (type == 'gps') {
+ r = wgs84_To_Gcj02(c[0], c[1]);
+ } else {
+ r = gcj02towgs84(c[0], c[1]);
}
+ lnglats.push({ lng: r[0], lat: r[1] });
});
+ _convertLatlng(index + 1, coor, lnglats, type, callback);
+
+ // var path = parse2LngLat(coor[index]);
+ // // eslint-disable-next-line no-undef
+ // AMap.convertFrom(path, type, function (status, result) {
+ // if (result.info === 'ok') {
+ // lnglats.push.apply(lnglats, result.locations);
+ // _convertLatlng(index + 1, coor, lnglats, type, callback);
+ // }
+ // });
} else {
callback(lnglats);
}
@@ -231,41 +283,8 @@
/**
* 楂樺痉鍦板浘鍧愭爣杞珿PS鍧愭爣绠楁硶
*/
- gcj02towgs84(lng, lat) {
- // lat = +latlng = +lng
- if (out_of_china(lng, lat)) {
- return [lng, lat];
- } else {
- let dlat = transformlat(lng - 105.0, lat - 35.0);
- let dlng = transformlng(lng - 105.0, lat - 35.0);
- let radlat = (lat / 180.0) * PI;
- let magic = Math.sin(radlat);
- magic = 1 - ee * magic * magic;
- let sqrtmagic = Math.sqrt(magic);
- dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
- dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
- let mglat = Math.round((lat * 2 - lat - dlat) * 1000000) / 1000000;
- let mglng = Math.round((lng * 2 - lng - dlng) * 1000000) / 1000000;
- return [mglng, mglat];
- }
- },
+ gcj02towgs84,
//浠嶨PS杞珮寰�
- wgs84_To_Gcj02(lon, lat) {
- if (out_of_china(lon, lat)) {
- return [lon, lat];
- } else {
- let dLat = transformlat(lon - 105.0, lat - 35.0);
- let dLon = transformlng(lon - 105.0, lat - 35.0);
- let radLat = (lat / 180.0) * PI;
- let magic = Math.sin(radLat);
- magic = 1 - ee * magic * magic;
- let sqrtMagic = Math.sqrt(magic);
- dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * PI);
- dLon = (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * PI);
- let mgLat = lat + dLat;
- let mgLon = lon + dLon;
- return [mgLon, mgLat];
- }
- }
+ wgs84_To_Gcj02
};
diff --git a/src/utils/map/index.js b/src/utils/map/index.js
index 8998a7f..c681b2d 100644
--- a/src/utils/map/index.js
+++ b/src/utils/map/index.js
@@ -68,7 +68,7 @@
viewMode: '3D', // 鍦板浘妯″紡
resizeEnable: true,
center: [121.6039283, 31.25295567],
- zooms: [3, 18],
+ zooms: [2, 26],
zoom: 14
});
@@ -107,4 +107,12 @@
});
}
-export { createMap, onMapMounted, map, AMap, mouseTool, object3Dlayer, isDragging };
+export {
+ createMap,
+ onMapMounted,
+ map,
+ AMap,
+ mouseTool,
+ object3Dlayer,
+ isDragging
+};
diff --git a/src/utils/map/index_old.js b/src/utils/map/index_old.js
index 77cc81e..bab9d5c 100644
--- a/src/utils/map/index_old.js
+++ b/src/utils/map/index_old.js
@@ -53,7 +53,7 @@
viewMode: '3D', // 鍦板浘妯″紡
resizeEnable: true,
center: [121.6039283, 31.25295567],
- zooms: [0, 18],
+ zooms: [2, 26],
zoom: 14
});
diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue
index 6d82f64..b18b4a6 100644
--- a/src/views/realtimemode/RealtimeMode.vue
+++ b/src/views/realtimemode/RealtimeMode.vue
@@ -17,9 +17,7 @@
<el-col span="1">
<FactorLegend :factor="factorDatas.factor[factorType]"></FactorLegend>
</el-col>
- <el-col span="1">
- <SourceTrace v-model:factorType="factorType"></SourceTrace>
- </el-col>
+ <el-col span="1"> </el-col>
</el-row>
<DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
<RealTimeTrend
@@ -27,6 +25,10 @@
:factor-datas="factorDatas"
:device-type="deviceType"
></RealTimeTrend>
+ <SourceTrace
+ class="source-trace"
+ v-model:factorType="factorType"
+ ></SourceTrace>
</div>
</template>
@@ -195,11 +197,16 @@
.dash-board {
position: absolute;
left: 0;
- bottom: 2px;
+ bottom: 0px;
}
.real-time-trend {
position: absolute;
right: 0;
top: 0;
}
+.source-trace {
+ position: absolute;
+ right: 0;
+ bottom: 0px;
+}
</style>
diff --git a/src/views/sourcetrace/SourceTrace.vue b/src/views/sourcetrace/SourceTrace.vue
index 8afb284..b0760b3 100644
--- a/src/views/sourcetrace/SourceTrace.vue
+++ b/src/views/sourcetrace/SourceTrace.vue
@@ -1,5 +1,12 @@
<template>
<el-row>
+ <el-col span="2">
+ <CardButton
+ direction="left"
+ name="鍔ㄦ�佹函婧�"
+ @click="() => (show = !show)"
+ ></CardButton>
+ </el-col>
<el-col v-show="show" span="10">
<BaseCard>
<template #content>
@@ -12,9 +19,13 @@
<el-text type="primary" size="large" tag="b">鍔ㄦ�佹函婧�</el-text>
</div> -->
<el-scrollbar ref="scrollbarRef" :height="height" class="scrollbar">
- <div ref="scrollContentRef">
- <div v-for="(item, index) in streams" :key="index">
- <el-row gap="4">
+ <el-row ref="scrollContentRef">
+ <div
+ v-for="(item, index) in streams"
+ :key="index"
+ class="clue-card"
+ >
+ <el-row>
<!-- <el-tag v-if="index == 0" type="danger">鏈�鏂�</el-tag> -->
<el-text type="primary">{{
'绾跨储鏃堕棿锛�' +
@@ -66,7 +77,7 @@
<el-link
type="primary"
underline
- @click="item.showMore = !item.showMore"
+ @click="showMarksAndPolygon(item)"
>
{{
(item.showMore ? '鏀惰捣婧簮鍦烘櫙' : '鏌ョ湅婧簮鍦烘櫙') +
@@ -75,13 +86,13 @@
'锛�'
}}
</el-link>
- <el-link
+ <!-- <el-link
type="primary"
underline
@click="drawPolygon(item.pollutedArea)"
>
瀹氫綅寮傚父
- </el-link>
+ </el-link> -->
</el-row>
<div v-show="item.showMore" style="width: 320px; height: 140px">
<RealTimeLineChart
@@ -95,7 +106,6 @@
:show-marks="item.showMore"
:scene-list="item.pollutedSource.sceneList"
></SceneTable>
- <el-divider />
<!-- <el-space gap="4">
<el-tag :type="item.status == 1 ? 'danger' : 'info'">{{
@@ -148,13 +158,10 @@
></SceneTable>
<el-divider /> -->
</div>
- </div>
+ </el-row>
</el-scrollbar>
</template>
</BaseCard>
- </el-col>
- <el-col span="2">
- <CardButton name="鍔ㄦ�佹函婧�" @click="() => (show = !show)"></CardButton>
</el-col>
</el-row>
</template>
@@ -163,7 +170,7 @@
* 鍔ㄦ�佹函婧愪俊鎭鐞�
* 閫氳繃websocket鏂瑰紡鎺ユ敹鍚庣鎺ㄩ�佺殑寮傚父淇℃伅骞跺睍绀�
*/
-import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
+import { reactive, ref, onMounted, onUnmounted, unref } from 'vue';
import websocket from '@/api/websocket';
import sector from '@/utils/map/sector';
import mapUtil from '@/utils/map/util';
@@ -183,7 +190,8 @@
const emits = defineEmits(['update:factorType']);
-const height = `60vh`;
+const height = `48vh`;
+const width = `60vh`;
const show = ref(false);
const scrollContentRef = ref();
@@ -209,18 +217,19 @@
websocket.send(inputVal.value);
};
-const dealMsg = (data) => {
+let showFirstClueTask;
+function dealMsg(data) {
const [type, content] = data
.substring(START_STR.length, data.length - END_STR.length)
.split(SPLIT_STR);
// 姹℃煋绾跨储 PollutedClue
if (type == '1') {
- const obj = JSON.parse(content);
- obj.showMore = true;
+ const obj = reactive(JSON.parse(content));
+ // obj.showMore = true;
+ obj.showMore = false;
console.log('姹℃煋绾跨储: ', obj);
- drawPolygon(obj.pollutedArea);
- parseChartData(obj);
+
if (streams.length == 0) {
streams.push(obj);
} else {
@@ -233,13 +242,22 @@
// scrollToBottom();
scrollToTop();
+ // drawPolygon(obj.pollutedArea);
+ parseChartData(obj);
+
+ if (showFirstClueTask) {
+ clearTimeout(showFirstClueTask);
+ }
+ showFirstClueTask = setTimeout(() => {
+ showMarksAndPolygon(obj);
+ }, 1000);
}
// 姹℃煋鍒嗘瀽缁撴灉 AnalysisResult
else if (type == '2') {
const obj = JSON.parse(content);
console.log('姹℃煋鍒嗘瀽缁撴灉: ', obj);
}
-};
+}
onMounted(() => {
websocket.registerReceiveEvent(dealMsg);
@@ -254,29 +272,44 @@
// }
});
-// 缁樺埗姹℃煋鍖哄煙
-let pollutedAreaPolygon;
-function drawPolygon(pollutedArea) {
- if (pollutedAreaPolygon) {
- map.remove(pollutedAreaPolygon);
+function showMarksAndPolygon(item) {
+ item.showMore = !item.showMore;
+ if (item.showMore) {
+ drawPolygon(item);
+ } else {
+ if (polygonMap.has(item.guid)) {
+ map.remove(polygonMap.get(item.guid));
+ }
}
- const bounds = pollutedArea.polygon.map((v) => [v.first, v.second]);
- // eslint-disable-next-line no-undef
- pollutedAreaPolygon = new AMap.Polygon({
- map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞�
- strokeWeight: 2, //杞粨绾垮搴�
- path: bounds, //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁�
- fillOpacity: 0, //澶氳竟褰㈠～鍏呴�忔槑搴�
- fillColor: '#CCF3FF', //澶氳竟褰㈠～鍏呴鑹�
- strokeColor: '#02ffea', //绾挎潯棰滆壊
- // strokeColor: '#0552f7', //绾挎潯棰滆壊
- strokeStyle: 'dashed',
- zIndex: 9
- });
- map.setFitView();
+}
+
+// 缁樺埗姹℃煋鍖哄煙锛堥珮寰峰湴鍥剧殑澶氳竟褰㈠璞★紝閫氳繃vue鐨剅eactive鍖呰涓哄搷搴斿紡瀵硅薄鍚庯紝鏃犳硶姝ｇ‘鍦ㄥ湴鍥句腑浣跨敤锛�
+const polygonMap = new Map();
+function drawPolygon(item) {
+ const pollutedArea = item.pollutedArea;
+ if (polygonMap.has(item.guid)) {
+ map.add(polygonMap.get(item.guid));
+ } else {
+ const bounds = pollutedArea.polygon.map((v) => [v.first, v.second]);
+ // eslint-disable-next-line no-undef
+ const pollutedAreaPolygon = new AMap.Polygon({
+ map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞�
+ strokeWeight: 2, //杞粨绾垮搴�
+ path: bounds, //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁�
+ fillOpacity: 0, //澶氳竟褰㈠～鍏呴�忔槑搴�
+ fillColor: '#CCF3FF', //澶氳竟褰㈠～鍏呴鑹�
+ strokeColor: '#02ffea', //绾挎潯棰滆壊
+ // strokeColor: '#0552f7', //绾挎潯棰滆壊
+ strokeStyle: 'dashed',
+ zIndex: 9
+ });
+ polygonMap.set(item.guid, pollutedAreaPolygon);
+ }
+ map.setFitView(polygonMap.get(item.guid));
}
function parseChartData(obj) {
+ console.log('鎶樼嚎鍥撅細start');
const factorDatas = new FactorDatas();
factorDatas.setData(obj.pollutedData.dataVoList, 0, () => {
obj._chartOptions = factorDataParser.parseData(factorDatas, [
@@ -421,6 +454,15 @@
.scrollbar {
min-width: 300px;
+ max-width: 60vw;
/* color: #02ffea; */
}
+
+.clue-card {
+ padding: 0 4px;
+ margin-right: 2px;
+ width: 320px;
+ border: 1px solid white;
+ border-radius: 2px;
+}
</style>
--
Gitblit v1.9.3