From 8e8d00477b1f30183d0d09cd7ec744067595dc46 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 18 三月 2026 17:29:15 +0800
Subject: [PATCH] 2026.3.18
---
src/views/monitor/DataDashboard.vue | 695 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 625 insertions(+), 70 deletions(-)
diff --git a/src/views/monitor/DataDashboard.vue b/src/views/monitor/DataDashboard.vue
index 4d366dd..45fa087 100644
--- a/src/views/monitor/DataDashboard.vue
+++ b/src/views/monitor/DataDashboard.vue
@@ -2,10 +2,10 @@
<div class="data-dashboard">
<!-- 椤堕儴鎸囨爣鍗＄墖鍖� -->
<div class="top-cards">
- <div class="cards-container">
- <!-- 鏃堕棿鍛ㄦ湡閫夐」鍗＄墖 -->
- <div class="time-period-card">
- <div class="card-title">鏃堕棿鍛ㄦ湡</div>
+ <!-- 鏃堕棿鍛ㄦ湡閫夐」鍗＄墖 -->
+ <div class="time-period-card">
+ <div class="card-title">鏃堕棿閫夋嫨</div>
+ <div class="time-controls">
<div class="time-tab-container">
<div
v-for="tab in timeTabs"
@@ -17,8 +17,46 @@
{{ tab.label }}
</div>
</div>
+ <div class="time-navigator">
+ <button class="nav-btn" @click="navigateTime(-1)" title="涓婁竴涓懆鏈�">
+ <svg
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M15 18L9 12L15 6"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </button>
+ <div class="current-time">{{ currentTimeDisplay }}</div>
+ <button class="nav-btn" @click="navigateTime(1)" title="涓嬩竴涓懆鏈�">
+ <svg
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M9 18L15 12L9 6"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </button>
+ </div>
</div>
-
+ </div>
+ <div class="cards-container">
<!-- 瓒呮爣鏁� -->
<div class="metric-card">
<div class="card-header">
@@ -148,10 +186,10 @@
</div>
</div>
- <!-- 浠诲姟瀹屾垚鐜� -->
+ <!-- 宸℃煡鐐规 -->
<div class="metric-card">
<div class="card-header">
- <div class="card-title">浠诲姟瀹屾垚鐜�</div>
+ <div class="card-title">宸℃煡鐐规</div>
<div class="card-icon task-icon">
<svg
width="20"
@@ -177,18 +215,18 @@
</svg>
</div>
</div>
- <div class="card-value">{{ metrics.taskCompletionRate }}%</div>
+ <div class="card-value">{{ metrics.inspectionPoints }}</div>
<div class="card-trend">
<span
class="trend-arrow"
:class="{
- up: metrics.taskCompletionRateTrend > 0,
- down: metrics.taskCompletionRateTrend < 0,
+ up: metrics.inspectionPointsTrend > 0,
+ down: metrics.inspectionPointsTrend < 0,
}"
>
- {{ metrics.taskCompletionRateTrend > 0 ? '鈫�' : '鈫�' }}
+ {{ metrics.inspectionPointsTrend > 0 ? '鈫�' : '鈫�' }}
</span>
- <span class="trend-text">{{ Math.abs(metrics.taskCompletionRateTrend) }}%</span>
+ <span class="trend-text">{{ Math.abs(metrics.inspectionPointsTrend) }}</span>
<span class="trend-label">{{ getCompareLabel() }}</span>
</div>
</div>
@@ -200,7 +238,7 @@
<!-- 涓儴GIS鍦板浘鍖� -->
<div class="map-section">
<div id="map" class="map-container">
- <BaseMap></BaseMap>
+ <BaseMap :showSatellite="true"></BaseMap>
</div>
<!-- 鍦板浘鐐逛綅寮圭獥 -->
@@ -240,50 +278,212 @@
</template>
</el-dialog>
</div>
+ </div>
+ <!-- 鍙充晶瀹炴椂鐩戞祴鎬昏鍖� -->
+ <div class="overview-section">
+ <div class="section-header">
+ <h3>璁惧鐩戞帶</h3>
+ <!-- <span class="view-more">鏌ョ湅鏇村</span> -->
+ </div>
- <!-- 鍙充晶瀹炴椂鐩戞祴鎬昏鍖� -->
- <div class="overview-section">
- <div class="section-header">
- <h3>瀹炴椂鐩戞祴鎬昏</h3>
- <span class="view-more">鏌ョ湅鏇村</span>
+ <div class="overview-items-container">
+ <div class="overview-item">
+ <div class="overview-label">椁愰ギ搴楅摵鎬绘暟</div>
+ <div class="overview-value">{{ overview.totalShops }}</div>
</div>
- <div class="overview-items-container">
- <div class="overview-item">
- <div class="overview-label">椁愰ギ搴楅摵鎬绘暟</div>
- <div class="overview-value">{{ overview.totalShops }}</div>
- </div>
-
- <div class="overview-item">
- <div class="overview-label">鍦ㄧ嚎璁惧鏁�</div>
- <div class="overview-value">{{ overview.onlineDevices }}</div>
- </div>
-
- <div class="overview-item">
- <div class="overview-label">绂荤嚎璁惧鏁�</div>
- <div class="overview-value">{{ overview.offlineDevices }}</div>
- </div>
+ <div class="overview-item">
+ <div class="overview-label">鍦ㄧ嚎璁惧鏁�</div>
+ <div class="overview-value">{{ overview.onlineDevices }}</div>
</div>
- <!-- 璁惧鐘舵�侀ゼ鍥� -->
- <div class="device-status-chart">
- <canvas id="deviceStatusChart"></canvas>
+ <div class="overview-item">
+ <div class="overview-label">绂荤嚎璁惧鏁�</div>
+ <div class="overview-value">{{ overview.offlineDevices }}</div>
+ </div>
+ </div>
+
+ <!-- 璁惧鐘舵�侀ゼ鍥� -->
+ <div class="device-status-chart">
+ <canvas id="deviceStatusChart"></canvas>
+ </div>
+ </div>
+
+ <!-- 鍦板浘鍥句緥 -->
+ <div class="map-legend">
+ <div class="legend-header">
+ <h4>鍥句緥</h4>
+ </div>
+ <div class="legend-items">
+ <div class="legend-item">
+ <img src="@/assets/exceed.png" alt="娌圭儫娴撳害瓒呮爣" class="legend-icon" />
+ <span class="legend-text">娌圭儫娴撳害瓒呮爣</span>
+ </div>
+ <div class="legend-item">
+ <img src="@/assets/exception.png" alt="渚涚數寮傚父" class="legend-icon" />
+ <span class="legend-text">渚涚數寮傚父</span>
+ </div>
+ <div class="legend-item">
+ <img src="@/assets/offline.png" alt="璁惧鎴栫綉缁滃紓甯�" class="legend-icon" />
+ <span class="legend-text">璁惧鎴栫綉缁滃紓甯�</span>
+ </div>
+ <div class="legend-item">
+ <img
+ src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI1IiB5PSI4IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIzIiBmaWxsPSIjNTJjNDFhIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNNSA4IFEgMTYgMyAyNyA4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiMzODllMGQiLz48cGF0aCBkPSJNNSAyNCBRIDE2IDI5IDI3IDI0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiM2NjY2NjYiLz48cmVjdCB4PSI4IiB5PSIxMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiByeD0iMiIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMTIgMTQgTCAyMSAxNCIgc3Ryb2tlPSIjNTJjNDFhIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxwYXRoIGQ9Ik0xMiAxNyBMIDE4IDE3IiBzdHJva2U9IiM1MmM0MWEiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTEyIDIwIEwgMTUgMjAiIHN0cm9rZT0iIzUyYzQxYSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iMTYiIHkxPSI4IiB4Mj0iMTYiIHkyPSIzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMyIgcj0iMS41IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjI3IiBjeT0iMTYiIHI9IjMiIGZpbGw9IiNmZmZmZmYiLz48Y2lyY2xlIGN4PSIyNyIgY3k9IjE2IiByPSIxLjUiIGZpbGw9IiM1MmM0MWEiLz48bGluZSB4MT0iNSIgeTE9IjEzIiB4Mj0iNiIgeTI9IjEzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxsaW5lIHgxPSI1IiB5MT0iMTkiIHgyPSI2IiB5Mj0iMTkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9zdmc+"
+ alt="鍦ㄧ嚎鐘舵��"
+ class="legend-icon"
+ />
+ <span class="legend-text">鍦ㄧ嚎鐘舵��</span>
+ </div>
+ <div class="legend-item">
+ <img
+ src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI1IiB5PSI4IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIzIiBmaWxsPSIjOGM4YzhjIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNNSA4IFEgMTYgMyAyNyA4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiM2NjY2NjYiLz48cGF0aCBkPSJNNSAyNCBRIDE2IDI5IDI3IDI0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiM2NjY2NjYiLz48cmVjdCB4PSI4IiB5PSIxMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiByeD0iMiIgZmlsbD0id2hpdGUiLz48bGluZSB4MT0iMTEiIHkxPSIxMiIgeDI9IjIxIiB5Mj0iMjIiIHN0cm9rZT0iIzhjOGM4YyIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjExIiB5MT0iMjIiIHgyPSIyMSIgeTI9IjEyIiBzdHJva2U9IiM4YzhjOGMiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSIxNiIgeTE9IjgiIHgyPSIxNiIgeTI9IjMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+PGNpcmNsZSBjeD0iMTYiIGN5PSIzIiByPSIxLjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMjciIGN5PSIxNiIgcj0iMyIgZmlsbD0iI2ZmZmZmZiIvPjxjaXJjbGUgY3g9IjI3IiBjeT0iMTYiIHI9IjEuNSIgZmlsbD0iIzhjOGM4YyIvPjxsaW5lIHgxPSI1IiB5MT0iMTMiIHgyPSI2IiB5Mj0iMTMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+PGxpbmUgeDE9IjUiIHkxPSIxOSIgeDI9IjYiIHkyPSIxOSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48L3N2Zz4="
+ alt="绂荤嚎鐘舵��"
+ class="legend-icon"
+ />
+ <span class="legend-text">绂荤嚎鐘舵��</span>
</div>
</div>
</div>
+ <!-- 宸℃煡鎯呭喌缁熻鍗＄墖 -->
+ <el-scrollbar class="inspection-section">
+ <div class="section-header">
+ <h3>宸℃煡姹囨��</h3>
+ </div>
+
+ <!-- 宸℃煡閲忕粺璁� -->
+ <div class="inspection-metrics">
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">搴楅摵鎬昏</div>
+ <div class="inspection-metric-value">{{ inspectionStats.totalShops }}</div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">宸℃煡搴楅摵</div>
+ <div class="inspection-metric-value">{{ inspectionStats.inspectedShops }}</div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">宸℃煡鐐规</div>
+ <div class="inspection-metric-value">{{ inspectionStats.inspectionPoints }}</div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">澶嶆煡鐐规</div>
+ <div class="inspection-metric-value">{{ inspectionStats.reviewPoints }}</div>
+ </div>
+ </div>
+
+ <!-- 闂鏁存敼鎯呭喌 -->
+ <div class="inspection-chart-container">
+ <div class="section-header"><h3>鏁存敼姹囨��</h3></div>
+ <canvas id="rectificationChart"></canvas>
+ </div>
+
+ <!-- 闂瀹℃牳鎯呭喌 -->
+ <div class="inspection-table-container">
+ <div class="section-header"><h3>瀹℃牳姹囨��</h3></div>
+ <div class="inspection-metric-label">闂瀹℃牳</div>
+ <div class="inspection-table">
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">鏃犻棶棰�</div>
+ <div class="inspection-metric-value">{{ inspectionStats.noProblemShops }}</div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">鏈鏍�</div>
+ <div class="inspection-metric-value">
+ {{ inspectionStats.unreviewedProblemShops }}
+ </div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">閮ㄥ垎瀹℃牳</div>
+ <div class="inspection-metric-value">
+ {{ inspectionStats.partiallyReviewedProblemShops }}
+ </div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">鍏ㄩ儴瀹℃牳</div>
+ <div class="inspection-metric-value">
+ {{ inspectionStats.fullyReviewedProblemShops }}
+ </div>
+ </div>
+ </div>
+ <div class="inspection-metric-label">鏁存敼瀹℃牳</div>
+ <div class="inspection-table">
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">鏈暣鏀�</div>
+ <div class="inspection-metric-value">{{ inspectionStats.unrectifiedShops }}</div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">鏈鏍�</div>
+ <div class="inspection-metric-value">
+ {{ inspectionStats.unreviewedRectifiedShops }}
+ </div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">閮ㄥ垎瀹℃牳</div>
+ <div class="inspection-metric-value">
+ {{ inspectionStats.partiallyReviewedRectifiedShops }}
+ </div>
+ </div>
+ <div class="inspection-metric-item">
+ <div class="inspection-metric-label">鍏ㄩ儴瀹℃牳</div>
+ <div class="inspection-metric-value">
+ {{ inspectionStats.fullyReviewedRectifiedShops }}
+ </div>
+ </div>
+ <!-- <div class="table-row">
+ <div class="table-cell">鏃犻棶棰樺簵閾烘暟閲�</div>
+ <div class="table-cell value">{{ inspectionStats.noProblemShops }}</div>
+ </div>
+ <div class="table-row">
+ <div class="table-cell">闂鏈鏍稿簵閾烘暟閲�</div>
+ <div class="table-cell value">{{ inspectionStats.unreviewedProblemShops }}</div>
+ </div>
+ <div class="table-row">
+ <div class="table-cell">闂閮ㄥ垎瀹℃牳搴楅摵鏁伴噺</div>
+ <div class="table-cell value">
+ {{ inspectionStats.partiallyReviewedProblemShops }}
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="table-cell">闂鍏ㄩ儴瀹℃牳搴楅摵鏁伴噺</div>
+ <div class="table-cell value">{{ inspectionStats.fullyReviewedProblemShops }}</div>
+ </div>
+ <div class="table-row">
+ <div class="table-cell">鏈暣鏀瑰簵閾烘暟</div>
+ <div class="table-cell value">{{ inspectionStats.unrectifiedShops }}</div>
+ </div>
+ <div class="table-row">
+ <div class="table-cell">鏁存敼鏈鏍稿簵閾烘暟</div>
+ <div class="table-cell value">{{ inspectionStats.unreviewedRectifiedShops }}</div>
+ </div>
+ <div class="table-row">
+ <div class="table-cell">鏁存敼閮ㄥ垎瀹℃牳搴楅摵鏁�</div>
+ <div class="table-cell value">
+ {{ inspectionStats.partiallyReviewedRectifiedShops }}
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="table-cell">鏁存敼鍏ㄩ儴瀹℃牳搴楅摵鏁�</div>
+ <div class="table-cell value">{{ inspectionStats.fullyReviewedRectifiedShops }}</div>
+ </div> -->
+ </div>
+ </div>
+ </el-scrollbar>
</div>
</template>
<script>
import * as echarts from 'echarts'
-import { onMapMounted, map, AMap } from '@/utils/map/index'
+import { onMapMounted, satellite } from '@/utils/map/index'
import districtSearch from '@/utils/map/districtsearch.js'
+import marks from '@/utils/map/marks.js'
+import { generateTestShops } from '@/debug/debugdata'
export default {
name: 'DataDashboard',
data() {
return {
activeTime: 'day',
+ currentDate: new Date(),
timeTabs: [
{ label: '鏃�', value: 'day' },
{ label: '鍛�', value: 'week' },
@@ -306,21 +506,62 @@
onlineRateTrend: 2,
purifierEfficiency: 85,
purifierEfficiencyTrend: -3,
- taskCompletionRate: 78,
- taskCompletionRateTrend: 10,
+ inspectionPoints: 350,
+ inspectionPointsTrend: 50,
},
overview: {
totalShops: 245,
onlineDevices: 220,
offlineDevices: 25,
},
+ inspectionStats: {
+ // 宸℃煡閲�
+ totalShops: 245,
+ inspectedShops: 180,
+ inspectionPoints: 350,
+ reviewPoints: 80,
+ // 闂鏁存敼鎯呭喌
+ problemCount: 45,
+ rectifiedCount: 38,
+ rectificationRate: 84.4,
+ // 闂瀹℃牳鎯呭喌
+ noProblemShops: 135,
+ unreviewedProblemShops: 8,
+ partiallyReviewedProblemShops: 5,
+ fullyReviewedProblemShops: 32,
+ unreviewedRectifiedShops: 3,
+ partiallyReviewedRectifiedShops: 2,
+ fullyReviewedRectifiedShops: 33,
+ unrectifiedShops: 7,
+ },
map: null,
refreshTimer: null,
}
},
+ computed: {
+ currentTimeDisplay() {
+ const date = this.currentDate
+ switch (this.activeTime) {
+ case 'day':
+ return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+ case 'week':
+ // 绠�鍗曡绠楀懆鏄剧ず锛屽疄闄呴」鐩腑鍙兘闇�瑕佹洿澶嶆潅鐨勫懆璁＄畻閫昏緫
+ let weekStart = new Date(date)
+ weekStart.setDate(date.getDate() - date.getDay() + 1)
+ let weekEnd = new Date(date)
+ weekEnd.setDate(date.getDate() + (7 - date.getDay()))
+ return `${weekStart.getFullYear()}-${String(weekStart.getMonth() + 1).padStart(2, '0')}-${String(weekStart.getDate()).padStart(2, '0')} ~ ${weekEnd.getFullYear()}-${String(weekEnd.getMonth() + 1).padStart(2, '0')}-${String(weekEnd.getDate()).padStart(2, '0')}`
+ case 'month':
+ return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
+ default:
+ return ''
+ }
+ },
+ },
mounted() {
this.initMap()
this.initDeviceStatusChart()
+ this.initRectificationChart()
this.startAutoRefresh()
},
beforeUnmount() {
@@ -334,16 +575,44 @@
// 妯℃嫙鍒囨崲鏃堕棿鍛ㄦ湡鍚庣殑鏁版嵁鏇存柊
this.updateMetrics()
},
- getPeriodLabel() {
+ navigateTime(direction) {
+ const newDate = new Date(this.currentDate)
switch (this.activeTime) {
case 'day':
- return '浠婃棩'
+ newDate.setDate(newDate.getDate() + direction)
+ break
case 'week':
- return '鏈懆'
+ newDate.setDate(newDate.getDate() + direction * 7)
+ break
case 'month':
- return '鏈湀'
+ newDate.setMonth(newDate.getMonth() + direction)
+ break
+ }
+ this.currentDate = newDate
+ // 妯℃嫙鍒囨崲鏃堕棿鍚庣殑鏁版嵁鏇存柊
+ this.updateMetrics()
+ },
+ getPeriodLabel() {
+ const today = new Date()
+ const isToday =
+ this.activeTime === 'day' &&
+ this.currentDate.getDate() === today.getDate() &&
+ this.currentDate.getMonth() === today.getMonth() &&
+ this.currentDate.getFullYear() === today.getFullYear()
+
+ if (isToday) {
+ return '浠婃棩'
+ }
+
+ switch (this.activeTime) {
+ case 'day':
+ return '褰撴棩'
+ case 'week':
+ return '褰撳懆'
+ case 'month':
+ return '褰撴湀'
default:
- return '浠婃棩'
+ return '褰撴棩'
}
},
getCompareLabel() {
@@ -369,17 +638,49 @@
onlineRateTrend: Math.floor(Math.random() * 10) - 5,
purifierEfficiency: Math.floor(Math.random() * 30) + 70,
purifierEfficiencyTrend: Math.floor(Math.random() * 10) - 5,
- taskCompletionRate: Math.floor(Math.random() * 40) + 60,
- taskCompletionRateTrend: Math.floor(Math.random() * 15) - 7,
+ inspectionPoints: Math.floor(Math.random() * 100) + 300,
+ inspectionPointsTrend: Math.floor(Math.random() * 100) - 50,
}
+
+ // 鏇存柊宸℃煡缁熻鏁版嵁
+ this.inspectionStats = {
+ totalShops: 245,
+ inspectedShops: Math.floor(Math.random() * 50) + 150,
+ inspectionPoints: Math.floor(Math.random() * 100) + 300,
+ reviewPoints: Math.floor(Math.random() * 50) + 50,
+ problemCount: Math.floor(Math.random() * 30) + 20,
+ rectifiedCount: Math.floor(Math.random() * 25) + 15,
+ rectificationRate: Math.round((Math.random() * 30 + 70) * 10) / 10,
+ noProblemShops: Math.floor(Math.random() * 50) + 100,
+ unreviewedProblemShops: Math.floor(Math.random() * 10),
+ partiallyReviewedProblemShops: Math.floor(Math.random() * 8),
+ fullyReviewedProblemShops: Math.floor(Math.random() * 20) + 15,
+ unreviewedRectifiedShops: Math.floor(Math.random() * 5),
+ partiallyReviewedRectifiedShops: Math.floor(Math.random() * 5),
+ fullyReviewedRectifiedShops: Math.floor(Math.random() * 20) + 15,
+ unrectifiedShops: Math.floor(Math.random() * 10),
+ }
+
+ // 鏇存柊鍥捐〃
+ this.initRectificationChart()
}, 300)
},
initMap() {
// setTimeout(() => {
districtSearch.removeDistrict()
- districtSearch.drawDistrict('涓婃捣甯�')
+ districtSearch.drawDistrictMask('涓婃捣甯�')
// districtSearch.districtLayer('310106')
// }, 2000)
+
+ onMapMounted(() => {
+ setTimeout(() => {
+ marks.clearMassMarks()
+ const shops = generateTestShops()
+ console.log(shops)
+
+ marks.drawMassMarks(shops)
+ }, 2000)
+ })
},
initDeviceStatusChart() {
const chartDom = document.getElementById('deviceStatusChart')
@@ -452,9 +753,83 @@
chart.setOption(option)
// 鍝嶅簲寮忚皟鏁�
- window.addEventListener('resize', () => {
- chart.resize()
- })
+ // window.addEventListener('resize', () => {
+ // chart.resize()
+ // })
+ }
+ },
+ initRectificationChart() {
+ const chartDom = document.getElementById('rectificationChart')
+ if (chartDom) {
+ const chart = echarts.init(chartDom)
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ backgroundColor: 'rgba(255, 255, 255, 0.95)',
+ borderColor: '#e8e8e8',
+ borderWidth: 1,
+ textStyle: {
+ color: '#333',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ data: ['闂鏁�', '鏁存敼鏁�'],
+ axisLabel: {
+ color: '#86909c',
+ fontSize: 12,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ color: '#86909c',
+ fontSize: 12,
+ },
+ },
+ series: [
+ {
+ name: '鏁伴噺',
+ type: 'bar',
+ data: [
+ {
+ value: this.inspectionStats.problemCount,
+ itemStyle: {
+ color: '#fa8c16',
+ },
+ },
+ {
+ value: this.inspectionStats.rectifiedCount,
+ itemStyle: {
+ color: '#52c41a',
+ },
+ },
+ ],
+ barWidth: '60%',
+ label: {
+ show: true,
+ position: 'top',
+ color: '#262626',
+ fontSize: 12,
+ },
+ },
+ ],
+ }
+ chart.setOption(option)
+
+ // 鍝嶅簲寮忚皟鏁�
+ // window.addEventListener('resize', () => {
+ // chart.resize()
+ // })
}
},
startAutoRefresh() {
@@ -476,7 +851,7 @@
/* 鍏ㄥ眬鏍峰紡 */
.data-dashboard {
width: 100%;
- height: calc(100vh - 60px);
+ height: calc(100vh - 70px);
background-color: #f5f7fa;
color: #333;
box-sizing: border-box;
@@ -488,32 +863,34 @@
/* 椤堕儴鎸囨爣鍗＄墖鍖� */
.top-cards {
position: absolute;
- top: 24px;
- left: 24px;
+ top: 4px;
+ left: 4px;
z-index: 10;
margin-bottom: 24px;
}
.cards-container {
display: grid;
- grid-template-columns: 280px;
- grid-template-rows: auto repeat(4, auto);
- gap: 16px;
- background-color: rgba(255, 255, 255, 0.9);
- padding: 16px;
+ grid-template-columns: repeat(2, 180px);
+ grid-template-rows: auto repeat(2, auto);
+ gap: 8px;
+ /* background-color: rgba(255, 255, 255, 0.9); */
+ /* padding: 16px; */
border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}
/* 鏃堕棿鍛ㄦ湡鍗＄墖 */
.time-period-card {
background-color: #ffffff;
border-radius: 8px;
- padding: 20px;
+ padding: 4px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
justify-content: center;
+ margin-bottom: 8px;
+ min-width: 300px;
}
.time-period-card .card-title {
@@ -522,6 +899,12 @@
font-weight: 500;
margin-bottom: 16px;
text-align: center;
+}
+
+.time-controls {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
}
.time-tab-container {
@@ -533,7 +916,7 @@
}
.time-tab {
- padding: 2px 4px;
+ padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
@@ -543,6 +926,7 @@
text-align: center;
border: 1px solid #e8e8e8;
background-color: #fafafa;
+ flex: 1;
}
.time-tab.active {
@@ -556,6 +940,43 @@
color: #1890ff;
border-color: #e6f7ff;
background-color: #e6f7ff;
+}
+
+.time-navigator {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ padding: 8px 0;
+}
+
+.nav-btn {
+ width: 32px;
+ height: 32px;
+ border: 1px solid #e8e8e8;
+ background-color: #fafafa;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ color: #4e5969;
+}
+
+.nav-btn:hover {
+ border-color: #1890ff;
+ color: #1890ff;
+ background-color: #e6f7ff;
+}
+
+.current-time {
+ font-size: 14px;
+ font-weight: 500;
+ color: #262626;
+ min-width: 180px;
+ text-align: center;
+ padding: 0 12px;
}
/* 鎸囨爣鍗＄墖 */
@@ -714,8 +1135,8 @@
/* 鍙充晶瀹炴椂鐩戞祴鎬昏鍖� */
.overview-section {
position: absolute;
- top: 200px;
- right: 24px;
+ bottom: 4px;
+ left: 4px;
width: 320px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 8px;
@@ -731,7 +1152,6 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
@@ -759,11 +1179,101 @@
.device-status-chart {
flex: 1;
- margin-top: 16px;
- min-height: 200px;
+ min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
+ margin-bottom: 16px;
+}
+
+/* 宸℃煡鎯呭喌缁熻 */
+.inspection-section {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 320px;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ z-index: 10;
+ max-height: calc(70vh);
+ border-top: 1px solid #f0f0f0;
+}
+
+.inspection-metrics {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 12px;
+ margin-bottom: 20px;
+}
+
+.inspection-metric-item {
+ background-color: #fafafa;
+ border-radius: 6px;
+ padding: 12px;
+ text-align: center;
+}
+
+.inspection-metric-label {
+ font-size: 12px;
+ color: #86909c;
+ margin-bottom: 4px;
+}
+
+.inspection-metric-value {
+ font-size: 18px;
+ font-weight: bold;
+ color: #262626;
+}
+
+.inspection-chart-container {
+ margin-bottom: 20px;
+}
+
+.chart-title {
+ font-size: 14px;
+ font-weight: 500;
+ color: #262626;
+ margin-bottom: 12px;
+}
+
+.inspection-table-container {
+ /* max-height: 200px; */
+ /* overflow-y: auto; */
+}
+
+.inspection-table {
+ /* width: 100%;
+ border-collapse: collapse; */
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2px;
+ margin-bottom: 20px;
+}
+
+.table-row {
+ display: flex;
+ border-bottom: 1px solid #f0f0f0;
+ padding: 8px 0;
+}
+
+.table-row:last-child {
+ border-bottom: none;
+}
+
+.table-cell {
+ flex: 1;
+ font-size: 12px;
+ color: #4e5969;
+}
+
+.table-cell.value {
+ font-weight: 500;
+ color: #262626;
+ text-align: right;
}
/* 寮圭獥鏍峰紡 */
@@ -790,8 +1300,53 @@
animation: blink 1s infinite;
}
+/* 鍦板浘鍥句緥鏍峰紡 */
+.map-legend {
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ width: 200px;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ padding: 16px;
+ z-index: 10;
+}
+
+.legend-header {
+ margin-bottom: 12px;
+}
+
+.legend-header h4 {
+ font-size: 14px;
+ font-weight: 600;
+ color: #262626;
+ margin: 0;
+ text-align: center;
+}
+
+.legend-items {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 12px;
+ color: #4e5969;
+}
+
+.legend-icon {
+ width: 24px;
+ height: 24px;
+ object-fit: contain;
+}
+
/* 鍝嶅簲寮忚璁� */
-@media (max-width: 1200px) {
+/* @media (max-width: 1200px) {
.top-cards {
position: relative;
margin-bottom: 24px;
@@ -817,9 +1372,9 @@
margin-top: 16px;
background-color: #ffffff;
}
-}
+} */
-@media (max-width: 768px) {
+/* @media (max-width: 768px) {
.data-dashboard {
padding: 16px;
}
@@ -861,5 +1416,5 @@
width: 100%;
text-align: left;
}
-}
+} */
</style>
--
Gitblit v1.9.3