From ccc970e575ef3f3e5c67af8da210263f4ac549f9 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期五, 10 四月 2026 16:44:55 +0800
Subject: [PATCH] 2026.4.10
---
src/utils/map/marks.js | 287 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 246 insertions(+), 41 deletions(-)
diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js
index a8911b6..4ad5074 100644
--- a/src/utils/map/marks.js
+++ b/src/utils/map/marks.js
@@ -6,17 +6,22 @@
import { useToolboxStore } from '@/stores/toolbox'
import util from './util'
import * as echarts from 'echarts'
+import exceedIcon from '@/assets/exceed.png'
+import exceptionIcon from '@/assets/exception.png'
+import offlineIcon from '@/assets/offline.png'
const toolboxStore = useToolboxStore()
var _massMarks = undefined
-// 鐜俊鐮佺瓑绾у拰瀵瑰簲棰滆壊
-const ringCodeLevelColors = [
- '#52c41a', // 缁胯壊
- '#faad14', // 榛勮壊
- '#f5222d', // 绾㈣壊
-]
+// 鐘舵�佸浘鏍囬厤缃�
+const statusIcons = {
+ exceed: exceedIcon, // 娌圭儫娴撳害瓒呮爣
+ exception: exceptionIcon, // 渚涚數寮傚父
+ offline: offlineIcon, // 璁惧鎴栫綉缁滃紓甯�
+ online: createCustomMarkerOnline(), // 鍦ㄧ嚎鐘舵��
+ offlineStatus: createCustomMarkerOffline(), // 绂荤嚎鐘舵��
+}
/**
* 缁樺埗娴烽噺鐐规爣璁�
@@ -28,6 +33,8 @@
* @param {number} shops[].shop.longitude 缁忓害
* @param {string} shops[].shop.ringCodeLevel 鏈�鏂扮幆淇＄爜绛夌骇
* @param {string} shops[].shop.ringCodePublishTime 鏈�鏂扮幆淇＄爜鍙戝竷鏃堕棿
+ * @param {boolean} shops[].shop.isOnline 鍦ㄧ嚎鐘舵��
+ * @param {number} shops[].shop.exceptionStatus 寮傚父鐘舵�侊紙0: 娌圭儫娴撳害瓒呮爣, 1: 渚涚數寮傚父, 2: 璁惧鎴栫綉缁滃紓甯�, 3: 鏃犲紓甯革級
* @param {Array} shops[].recentData 杩�1灏忔椂鐨勭洃娴嬫暟鎹�
* @param {string} shops[].recentData[].sampleTime 鏁版嵁閲囨牱鏃堕棿
* @param {number} shops[].recentData[].oilSmokeConcentration 娌圭儫娴撳害
@@ -36,21 +43,65 @@
*/
function drawMassMarks(shops) {
// 閰嶇疆鏍峰紡
- const massMarksStyle = ringCodeLevelColors.map((color, index) => ({
- url: createCustomMarker(color),
- size: new AMap.Size(20, 20),
- anchor: new AMap.Pixel(10, 10),
- }))
+ const massMarksStyle = [
+ {
+ url: statusIcons.exceed,
+ size: new AMap.Size(20, 20),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.exception,
+ size: new AMap.Size(20, 20),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.offline,
+ size: new AMap.Size(20, 20),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.online,
+ size: new AMap.Size(32, 32),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.offlineStatus,
+ size: new AMap.Size(32, 32),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ ]
// 鍑嗗娴烽噺鐐规暟鎹�
const massMarksData = shops.map((shop, index) => {
- // 鏍规嵁鐜俊鐮佺瓑绾ц幏鍙栭鑹�
- const color = getColorByRingCodeLevel(shop.shop.ringCodeLevel)
+ // 鏍规嵁寮傚父鐘舵�佸拰鍦ㄧ嚎鐘舵�佽幏鍙栨牱寮忕储寮�
+ let styleIndex = 3 // 榛樿鍦ㄧ嚎鐘舵��
+
+ if (shop.shop.exceptionStatus !== undefined) {
+ switch (shop.shop.exceptionStatus) {
+ case 0: // 娌圭儫娴撳害瓒呮爣
+ styleIndex = 0
+ break
+ case 1: // 渚涚數寮傚父
+ styleIndex = 1
+ break
+ case 2: // 璁惧鎴栫綉缁滃紓甯�
+ styleIndex = 2
+ break
+ case 3: // 鏃犲紓甯革紝鏍规嵁鍦ㄧ嚎鐘舵�佸喅瀹�
+ styleIndex = shop.shop.isOnline ? 3 : 4
+ break
+ default:
+ styleIndex = shop.shop.isOnline ? 3 : 4
+ }
+ } else {
+ // 娌℃湁寮傚父鐘舵�佹椂锛屾牴鎹湪绾跨姸鎬佸喅瀹�
+ styleIndex = shop.shop.isOnline ? 3 : 4
+ }
return {
id: index,
name: shop.shop.name,
lnglat: [shop.shop.longitude, shop.shop.latitude],
- style: shop.shop.ringCodeLevel, // 鏍峰紡绱㈠紩锛屽搴� massMarksStyle
+ style: styleIndex, // 鏍峰紡绱㈠紩锛屽搴� massMarksStyle
extData: shop, // 瀛樺偍瀹屾暣鐨勫簵閾轰俊鎭�
}
})
@@ -134,6 +185,46 @@
}
/**
+ * 鏍规嵁寮傚父鐘舵�佽幏鍙栦腑鏂�
+ * @param {number} status 寮傚父鐘舵��
+ * @returns {string} 涓枃琛ㄧず
+ */
+function getExceptionStatusText(status) {
+ switch (status + '') {
+ case '0':
+ return '娌圭儫娴撳害瓒呮爣'
+ case '1':
+ return '渚涚數寮傚父'
+ case '2':
+ return '璁惧鎴栫綉缁滃紓甯�'
+ case '3':
+ return '鏃犲紓甯�'
+ default:
+ return '鏈煡鐘舵��'
+ }
+}
+
+/**
+ * 鏍规嵁寮傚父鐘舵�佽幏鍙栭鑹�
+ * @param {number} status 寮傚父鐘舵��
+ * @returns {string} 棰滆壊鍊�
+ */
+function getColorByExceptionStatus(status) {
+ switch (status + '') {
+ case '0':
+ return '#f5222d' // 娌圭儫娴撳害瓒呮爣 - 绾㈣壊
+ case '1':
+ return '#faad14' // 渚涚數寮傚父 - 榛勮壊
+ case '2':
+ return '#8c8c8c' // 璁惧鎴栫綉缁滃紓甯� - 鐏拌壊
+ case '3':
+ return '#52c41a' // 鏃犲紓甯� - 缁胯壊
+ default:
+ return '#8c8c8c' // 鐏拌壊
+ }
+}
+
+/**
* 鍒涘缓鑷畾涔夋爣璁�
* @param {string} color 鏍囪棰滆壊
* @returns {string} 鏍囪鐨凷VG URL
@@ -149,43 +240,157 @@
}
/**
+ * 鍒涘缓鍦ㄧ嚎鐘舵�佺殑SVG鏍囪锛堟补鐑熺洃娴嬭澶囧舰璞★級
+ * @returns {string} 鏍囪鐨凷VG URL
+ */
+function createCustomMarkerOnline() {
+ const svg = `
+ <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+ <!-- 璁惧涓讳綋 - 鍦嗚鐭╁舰 -->
+ <rect x="5" y="8" width="22" height="16" rx="3" fill="#52c41a" stroke="white" stroke-width="2"/>
+
+ <!-- 璁惧椤堕儴 - 寮у舰 -->
+ <path d="M5 8 Q16 3 27 8" stroke="white" stroke-width="2" fill="#389e0d"/>
+
+ <!-- 璁惧搴曢儴 - 寮у舰 -->
+ <path d="M5 24 Q16 29 27 24" stroke="white" stroke-width="2" fill="#389e0d"/>
+
+ <!-- 璁惧鏄剧ず灞� -->
+ <rect x="8" y="11" width="16" height="10" rx="2" fill="white"/>
+
+ <!-- 鏄剧ず灞忔暟鎹� -->
+ <path d="M11 14 L21 14" stroke="#52c41a" stroke-width="1.5"/>
+ <path d="M11 17 L18 17" stroke="#52c41a" stroke-width="1.5"/>
+ <path d="M11 20 L15 20" stroke="#52c41a" stroke-width="1.5"/>
+
+ <!-- 璁惧澶╃嚎 -->
+ <line x1="16" y1="8" x2="16" y2="3" stroke="white" stroke-width="1.5"/>
+ <circle cx="16" cy="3" r="1.5" fill="white"/>
+
+ <!-- 璁惧鎸囩ず鐏� -->
+ <circle cx="27" cy="16" r="3" fill="#ffffff"/>
+ <circle cx="27" cy="16" r="1.5" fill="#52c41a"/>
+
+ <!-- 瑁呴グ绾挎潯 -->
+ <line x1="5" y1="13" x2="6" y2="13" stroke="white" stroke-width="1.5"/>
+ <line x1="5" y1="19" x2="6" y2="19" stroke="white" stroke-width="1.5"/>
+ </svg>
+ `
+ return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
+}
+
+/**
+ * 鍒涘缓绂荤嚎鐘舵�佺殑SVG鏍囪锛堟补鐑熺洃娴嬭澶囧舰璞★級
+ * @returns {string} 鏍囪鐨凷VG URL
+ */
+function createCustomMarkerOffline() {
+ const svg = `
+ <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+ <!-- 璁惧涓讳綋 - 鍦嗚鐭╁舰 -->
+ <rect x="5" y="8" width="22" height="16" rx="3" fill="#8c8c8c" stroke="white" stroke-width="2"/>
+
+ <!-- 璁惧椤堕儴 - 寮у舰 -->
+ <path d="M5 8 Q16 3 27 8" stroke="white" stroke-width="2" fill="#666666"/>
+
+ <!-- 璁惧搴曢儴 - 寮у舰 -->
+ <path d="M5 24 Q16 29 27 24" stroke="white" stroke-width="2" fill="#666666"/>
+
+ <!-- 璁惧鏄剧ず灞� -->
+ <rect x="8" y="11" width="16" height="10" rx="2" fill="white"/>
+
+ <!-- 鏄剧ず灞忔棤鏁版嵁 - 浜ゅ弶绾� -->
+ <line x1="11" y1="12" x2="21" y2="22" stroke="#8c8c8c" stroke-width="2"/>
+ <line x1="11" y1="22" x2="21" y2="12" stroke="#8c8c8c" stroke-width="2"/>
+
+ <!-- 璁惧澶╃嚎 -->
+ <line x1="16" y1="8" x2="16" y2="3" stroke="white" stroke-width="1.5"/>
+ <circle cx="16" cy="3" r="1.5" fill="white"/>
+
+ <!-- 璁惧鎸囩ず鐏� -->
+ <circle cx="27" cy="16" r="3" fill="#ffffff"/>
+ <circle cx="27" cy="16" r="1.5" fill="#8c8c8c"/>
+
+ <!-- 瑁呴グ绾挎潯 -->
+ <line x1="5" y1="13" x2="6" y2="13" stroke="white" stroke-width="1.5"/>
+ <line x1="5" y1="19" x2="6" y2="19" stroke="white" stroke-width="1.5"/>
+ </svg>
+ `
+ return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
+}
+
+/**
* 鏄剧ず搴楅摵淇℃伅绐楀彛
* @param {Object} shop 搴楅摵瀵硅薄
*/
function showShopInfoWindow(shop) {
// 鍑嗗淇℃伅绐楀彛鍐呭
- // const content = `
- // <div style="padding: 10px; max-width: 300px;">
- // <h3 style="margin: 0 0 10px 0; color: #333;">${shop.shop.name}</h3>
- // <div style="font-size: 14px; line-height: 1.5;">
- // <p><strong>鍦板潃锛�</strong>${shop.shop.address}</p>
- // <p><strong>鐜俊鐮佺瓑绾э細</strong><span style="color: ${getColorByRingCodeLevel(shop.shop.ringCodeLevel)}">${shop.shop.ringCodeLevel}</span></p>
- // <p><strong>鐜俊鐮佸彂甯冩椂闂达細</strong>${shop.shop.ringCodePublishTime}</p>
- // <h4 style="margin: 10px 0 5px 0; color: #666;">杩�1灏忔椂鐩戞祴鏁版嵁</h4>
- // <div style="max-height: 150px; overflow-y: auto;">
- // ${shop.recentData
- // .map(
- // (item) => `
- // <div style="padding: 5px; border-bottom: 1px solid #f0f0f0;">
- // <p><strong>閲囨牱鏃堕棿锛�</strong>${item.sampleTime}</p>
- // <p><strong>娌圭儫娴撳害锛�</strong>${item.oilSmokeConcentration} mg/m鲁</p>
- // <p><strong>鍑�鍖栧櫒鐢垫祦锛�</strong>${item.purifierCurrent} A</p>
- // <p><strong>椋庢満鐢垫祦锛�</strong>${item.fanCurrent} A</p>
- // </div>
- // `,
- // )
- // .join('')}
- // </div>
- // </div>
- // </div>
- // `
+ // 鑾峰彇鍦ㄧ嚎鐘舵�佹枃鏈�
+ const onlineStatusText = shop.shop.isOnline ? '鍦ㄧ嚎' : '绂荤嚎'
+ // 鑾峰彇寮傚父鐘舵�佹枃鏈�
+ const exceptionStatusText = getExceptionStatusText(shop.shop.exceptionStatus)
+ // 鑾峰彇寮傚父鐘舵�侀鑹�
+ const exceptionStatusColor = getColorByExceptionStatus(shop.shop.exceptionStatus)
+
+ // 鏍规嵁鐘舵�佽幏鍙栧搴旂殑鍥炬爣
+ let statusIcon = statusIcons.online // 榛樿鍦ㄧ嚎鍥炬爣
+ if (shop.shop.exceptionStatus !== undefined) {
+ switch (shop.shop.exceptionStatus) {
+ case 0:
+ statusIcon = statusIcons.exceed
+ break
+ case 1:
+ statusIcon = statusIcons.exception
+ break
+ case 2:
+ statusIcon = statusIcons.offline
+ break
+ case 3:
+ statusIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+ break
+ default:
+ statusIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+ }
+ } else {
+ statusIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+ }
+
+ // 鏍规嵁鍦ㄧ嚎鐘舵�佽幏鍙栧浘鏍�
+ const onlineIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+
+ // 鏍规嵁寮傚父鐘舵�佽幏鍙栧浘鏍�
+ let exceptionIcon = statusIcons.online // 榛樿鍦ㄧ嚎鍥炬爣
+ if (shop.shop.exceptionStatus !== undefined) {
+ switch (shop.shop.exceptionStatus) {
+ case 0:
+ exceptionIcon = statusIcons.exceed
+ break
+ case 1:
+ exceptionIcon = statusIcons.exception
+ break
+ case 2:
+ exceptionIcon = statusIcons.offline
+ break
+ case 3:
+ exceptionIcon = statusIcons.online
+ break
+ default:
+ exceptionIcon = statusIcons.online
+ }
+ }
+
const content = `
<div style="padding: 10px; width: 400px;">
<h3 style="margin: 0 0 10px 0; color: #333;">${shop.shop.name}</h3>
<div style="font-size: 14px; line-height: 1.5;">
<p><strong>鍦板潃锛�</strong>${shop.shop.address}</p>
- <p><strong>鐜俊鐮佺瓑绾э細</strong><span style="color: ${getColorByRingCodeLevel(shop.shop.ringCodeLevel)}">${getRingCodeLevelText(shop.shop.ringCodeLevel)}</span></p>
- <p><strong>鐜俊鐮佸彂甯冩椂闂达細</strong>${shop.shop.ringCodePublishTime}</p>
+ <div style="display: flex; flex-direction: row;">
+ <span style="flex:1"><strong>鍦ㄧ嚎鐘舵�侊細</strong><span style="color: ${shop.shop.isOnline ? '#52c41a' : '#8c8c8c'}">${onlineStatusText}</span> </span>
+ <span style="flex:1"><strong>寮傚父鐘舵�侊細</strong><span style="color: ${exceptionStatusColor}">${exceptionStatusText}</span></span>
+ </div>
+ <div style="display: flex; flex-direction: row;">
+ <span style="flex:1"><strong>鐜俊鐮佺瓑绾э細</strong><span style="color: ${getColorByRingCodeLevel(shop.shop.ringCodeLevel)}">${getRingCodeLevelText(shop.shop.ringCodeLevel)}</span></span>
+ <span style="flex:1"><strong>鍙戝竷鏃堕棿锛�</strong>${shop.shop.ringCodePublishTime}</span>
+ </div>
<h4 style="margin: 10px 0 5px 0; color: #666;">杩�1灏忔椂鐩戞祴鏁版嵁</h4>
<div id="infowindowChartContainer" style="width: 100%; height: 250px;"></div>
</div>
--
Gitblit v1.9.3