From f1ee0aa9d6c6c89ee9f0e5d845cd3c64f161aeaf Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 16 十二月 2025 20:03:08 +0800
Subject: [PATCH] 代码调整6
---
src/views/dashboard/Dashboard.vue | 301 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 301 insertions(+), 0 deletions(-)
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
new file mode 100644
index 0000000..08a21ec
--- /dev/null
+++ b/src/views/dashboard/Dashboard.vue
@@ -0,0 +1,301 @@
+<template>
+ <div class="dashboard-container">
+ <!-- 缁熻鍗＄墖 -->
+ <el-row :gutter="20">
+ <el-col :span="6">
+ <el-card class="statistics-card" shadow="hover">
+ <div class="card-content">
+ <div class="card-title">璁惧鍦ㄧ嚎鐜�</div>
+ <div class="card-value">{{ onlineRate }}%</div>
+ <div class="card-desc">褰撳墠鍦ㄧ嚎璁惧鏁帮細{{ onlineCount }} / {{ totalDevices }}</div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card class="statistics-card" shadow="hover">
+ <div class="card-content">
+ <div class="card-title">鏁呴殰棰勮鏁�</div>
+ <div class="card-value">{{ warningCount }}</div>
+ <div class="card-desc">楂橀闄╋細{{ highRiskCount }} | 涓闄╋細{{ mediumRiskCount }} | 浣庨闄╋細{{ lowRiskCount }}</div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card class="statistics-card" shadow="hover">
+ <div class="card-content">
+ <div class="card-title">寰呭鐞嗙淮淇崟</div>
+ <div class="card-value">{{ pendingOrders }}</div>
+ <div class="card-desc">澶勭悊涓細{{ processingOrders }} | 宸插畬鎴愶細{{ completedOrders }}</div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card class="statistics-card" shadow="hover">
+ <div class="card-content">
+ <div class="card-title">閲嶇偣璁惧杩愯鐘舵��</div>
+ <div class="card-value">{{ normalDevices }} 姝ｅ父</div>
+ <div class="card-desc">寮傚父锛歿{ abnormalDevices }} | 鏁呴殰锛歿{ faultDevices }}</div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 鍥捐〃鍖哄煙 -->
+ <el-row :gutter="20" style="margin-top: 20px;">
+ <!-- 璁惧鍋ュ悍搴﹁秼鍔垮浘 -->
+ <el-col :span="12">
+ <el-card shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>璁惧鍋ュ悍搴﹁秼鍔垮浘</span>
+ </div>
+ </template>
+ <div ref="healthChartRef" class="chart-container"></div>
+ </el-card>
+ </el-col>
+ <!-- 杩�7鏃ユ晠闅滅被鍨嬬粺璁� -->
+ <el-col :span="12">
+ <el-card shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>杩�7鏃ユ晠闅滅被鍨嬬粺璁�</span>
+ </div>
+ </template>
+ <div ref="faultChartRef" class="chart-container"></div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 閲嶇偣璁惧杩愯鐘舵�佸崱鐗� -->
+ <el-card shadow="hover" style="margin-top: 20px;">
+ <template #header>
+ <div class="card-header">
+ <span>閲嶇偣璁惧杩愯鐘舵��</span>
+ </div>
+ </template>
+ <el-table :data="keyDevices" stripe style="width: 100%">
+ <el-table-column prop="name" label="璁惧鍚嶇О" width="180"></el-table-column>
+ <el-table-column prop="model" label="鍨嬪彿" width="120"></el-table-column>
+ <el-table-column prop="ip" label="IP鍦板潃" width="150"></el-table-column>
+ <el-table-column prop="status" label="鐘舵��" width="100">
+ <template #default="scope">
+ <el-tag :type="scope.row.status === 'online' ? 'success' : scope.row.status === 'warning' ? 'warning' : 'danger'">
+ {{ scope.row.status === 'online' ? '鍦ㄧ嚎' : scope.row.status === 'warning' ? '棰勮' : '鏁呴殰' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="temperature" label="娓╁害(鈩�)" width="100"></el-table-column>
+ <el-table-column prop="pressure" label="鍘嬪姏(MPa)" width="100"></el-table-column>
+ <el-table-column prop="speed" label="杞��(rpm)" width="100"></el-table-column>
+ <el-table-column prop="health" label="鍋ュ悍搴�" width="120">
+ <template #default="scope">
+ <el-progress :percentage="scope.row.health" :stroke-width="10"></el-progress>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+// 缁熻鏁版嵁
+const onlineRate = ref(85)
+const onlineCount = ref(170)
+const totalDevices = ref(200)
+const warningCount = ref(23)
+const highRiskCount = ref(5)
+const mediumRiskCount = ref(12)
+const lowRiskCount = ref(6)
+const pendingOrders = ref(15)
+const processingOrders = ref(8)
+const completedOrders = ref(45)
+const normalDevices = ref(162)
+const abnormalDevices = ref(18)
+const faultDevices = ref(10)
+
+// 閲嶇偣璁惧鍒楄〃
+const keyDevices = ref([
+ { name: '绌哄帇鏈篈-001', model: 'KA-200', ip: '192.168.1.101', status: 'online', temperature: 42, pressure: 0.8, speed: 1450, health: 92 },
+ { name: '鍐峰嵈濉擝-002', model: 'CT-300', ip: '192.168.1.102', status: 'warning', temperature: 58, pressure: 0.6, speed: 980, health: 75 },
+ { name: '姘存车C-003', model: 'WP-150', ip: '192.168.1.103', status: 'online', temperature: 38, pressure: 1.2, speed: 1200, health: 88 },
+ { name: '鍙戠數鏈篋-004', model: 'GE-500', ip: '192.168.1.104', status: 'danger', temperature: 75, pressure: 0.5, speed: 1500, health: 60 },
+ { name: '鍙樺帇鍣‥-005', model: 'TR-1000', ip: '192.168.1.105', status: 'online', temperature: 45, pressure: 0, speed: 0, health: 95 }
+])
+
+// 鍥捐〃寮曠敤
+const healthChartRef = ref(null)
+const faultChartRef = ref(null)
+let healthChart = null
+let faultChart = null
+
+// 鍋ュ悍搴﹁秼鍔挎暟鎹�
+const healthTrendData = {
+ dates: ['12-10', '12-11', '12-12', '12-13', '12-14', '12-15', '12-16'],
+ values: [88, 90, 85, 87, 92, 91, 93]
+}
+
+// 鏁呴殰绫诲瀷缁熻鏁版嵁
+const faultTypeData = {
+ types: ['娓╁害寮傚父', '鍘嬪姏瓒呮爣', '杞�熷紓甯�', '鎸姩杩囧ぇ', '鍏朵粬'],
+ values: [15, 8, 12, 6, 3]
+}
+
+// 鍒濆鍖栧仴搴峰害瓒嬪娍鍥�
+const initHealthChart = () => {
+ if (healthChartRef.value) {
+ healthChart = echarts.init(healthChartRef.value)
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: healthTrendData.dates
+ },
+ yAxis: {
+ type: 'value',
+ min: 70,
+ max: 100,
+ name: '鍋ュ悍搴�(%)'
+ },
+ series: [
+ {
+ name: '鍋ュ悍搴�',
+ type: 'line',
+ stack: '鎬婚噺',
+ areaStyle: {},
+ emphasis: {
+ focus: 'series'
+ },
+ data: healthTrendData.values,
+ itemStyle: {
+ color: '#67c23a'
+ },
+ lineStyle: {
+ width: 3
+ }
+ }
+ ]
+ }
+ healthChart.setOption(option)
+ }
+}
+
+// 鍒濆鍖栨晠闅滅被鍨嬬粺璁￠ゼ鍥�
+const initFaultChart = () => {
+ if (faultChartRef.value) {
+ faultChart = echarts.init(faultChartRef.value)
+ const option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left'
+ },
+ series: [
+ {
+ name: '鏁呴殰绫诲瀷',
+ type: 'pie',
+ radius: '50%',
+ data: faultTypeData.types.map((type, index) => ({
+ name: type,
+ value: faultTypeData.values[index]
+ })),
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+ faultChart.setOption(option)
+ }
+}
+
+// 鐩戝惉绐楀彛澶у皬鍙樺寲锛岃皟鏁村浘琛ㄥぇ灏�
+const handleResize = () => {
+ healthChart?.resize()
+ faultChart?.resize()
+}
+
+onMounted(() => {
+ initHealthChart()
+ initFaultChart()
+ window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+ window.removeEventListener('resize', handleResize)
+ healthChart?.dispose()
+ faultChart?.dispose()
+})
+</script>
+
+<style scoped>
+.dashboard-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+}
+
+.statistics-card {
+ height: 180px;
+}
+
+.card-content {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+}
+
+.card-title {
+ font-size: 16px;
+ color: #606266;
+ margin-bottom: 10px;
+}
+
+.card-value {
+ font-size: 32px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 8px;
+}
+
+.card-desc {
+ font-size: 14px;
+ color: #909399;
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.chart-container {
+ width: 100%;
+ height: 350px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3