From 0488cc32d225a28289ba6c70a2a297f347cacdad Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 16 三月 2026 17:34:18 +0800
Subject: [PATCH] 2026.3.16
---
src/views/monitor/DataDashboard.vue | 591 +++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 532 insertions(+), 59 deletions(-)
diff --git a/src/views/monitor/DataDashboard.vue b/src/views/monitor/DataDashboard.vue
index 4d366dd..65cd655 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">
@@ -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,175 @@
</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>
+ <!-- 宸℃煡鎯呭喌缁熻鍗＄墖 -->
+ <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' },
@@ -314,13 +477,54 @@
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 +538,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() {
@@ -372,14 +604,46 @@
taskCompletionRate: Math.floor(Math.random() * 40) + 60,
taskCompletionRateTrend: Math.floor(Math.random() * 15) - 7,
}
+
+ // 鏇存柊宸℃煡缁熻鏁版嵁
+ 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 +716,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 +814,7 @@
/* 鍏ㄥ眬鏍峰紡 */
.data-dashboard {
width: 100%;
- height: calc(100vh - 60px);
+ height: calc(100vh - 70px);
background-color: #f5f7fa;
color: #333;
box-sizing: border-box;
@@ -488,32 +826,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 +862,12 @@
font-weight: 500;
margin-bottom: 16px;
text-align: center;
+}
+
+.time-controls {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
}
.time-tab-container {
@@ -533,7 +879,7 @@
}
.time-tab {
- padding: 2px 4px;
+ padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
@@ -543,6 +889,7 @@
text-align: center;
border: 1px solid #e8e8e8;
background-color: #fafafa;
+ flex: 1;
}
.time-tab.active {
@@ -556,6 +903,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 +1098,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 +1115,6 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
@@ -759,11 +1142,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;
}
/* 寮圭獥鏍峰紡 */
@@ -791,7 +1264,7 @@
}
/* 鍝嶅簲寮忚璁� */
-@media (max-width: 1200px) {
+/* @media (max-width: 1200px) {
.top-cards {
position: relative;
margin-bottom: 24px;
@@ -817,9 +1290,9 @@
margin-top: 16px;
background-color: #ffffff;
}
-}
+} */
-@media (max-width: 768px) {
+/* @media (max-width: 768px) {
.data-dashboard {
padding: 16px;
}
@@ -861,5 +1334,5 @@
width: 100%;
text-align: left;
}
-}
+} */
</style>
--
Gitblit v1.9.3