From b4ec080b4b4c6356f669fd77ca8fe7e242d54c03 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期五, 26 十二月 2025 17:45:52 +0800
Subject: [PATCH] 代码调整7
---
src/views/index.vue | 671 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 392 insertions(+), 279 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 4e8a971..e9453f2 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,279 +1,392 @@
-<template>
- <div class="app-container home">
- <div>
- <div>
- <div class="card-top-left">
- <div class="title">
- <span style="font-weight: bold">鏈湀閿�鍞�侀噰璐儏鍐佃鍒�</span>
- </div>
- <div class="card-group">
- <div class="info-card">
- <div class="info-message">
- <div class="info-number">6789,000</div>
- <div class="info-title">鍚堝悓閲戦(鍏�)</div>
- </div>
- <img src="@/assets/images/icon1.png" alt="" style="width: 63px;height: 63px">
- </div>
- <div class="info-card1">
- <div class="info-message">
- <div class="info-number">6789,000</div>
- <div class="info-title">寮�绁ㄩ噾棰�(鍏�)</div>
- </div>
- <img src="@/assets/images/icon2.png" alt="" style="width: 63px;height: 63px">
- </div>
- <div class="info-card2">
- <div class="info-message">
- <div class="info-number">6789,000</div>
- <div class="info-title">鍥炴閲戦(鍏�)</div>
- </div>
- <img src="@/assets/images/icon%203.png" alt="" style="width: 63px;height: 63px">
- </div>
- </div>
- </div>
- <div class="card-top-left">
- <div class="title">
- <span style="font-weight: bold">鏈湀搴旀敹銆佸簲浠樻儏鍐佃鍒�</span>
- </div>
- <div class="pie">
- <div class="card-group">
- <div class="pie-group">
- <div style="margin-right: 80px">
- <Echarts ref="chart"
- :legend="pieLegend"
- :chartStyle="chartStyle"
- :series="materialPieSeries"
- :tooltip="pieTooltip"></Echarts>
- </div>
- <div class="info-message2">
- <div class="info-message1">
- <div class="pie-title">鏈湀鍥炴鏁伴噺</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
- </div>
- <div class="info-message1">
- <div class="pie-title">搴旀敹娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
- </div>
- </div>
- </div>
- </div>
- <div class="card-group">
- <div class="pie-group">
- <div style="margin-right: 80px">
- <Echarts ref="chart"
- :options="options"
- :legend="pieLegend"
- :chartStyle="chartStyle"
- :series="materialPieSeries"
- :tooltip="pieTooltip"></Echarts>
- </div>
- <div class="info-message2">
- <div class="info-message1">
- <div class="pie-title">鏈湀鍥炴鏁伴噺</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
- </div>
- <div class="info-message1">
- <div class="pie-title">搴旀敹娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div></div>
- </div>
- <div>
-
- </div>
- </div>
-</template>
-
-<script setup name="Index">
-import Echarts from "@/components/Echarts/echarts.vue";
-
-const pieLegend = reactive({
- show: false,
-})
-const options = reactive({
- graphic: {
- type: 'circle',
- left: 'center',
- top: 'middle',
- shape: {
- r: '70%' // 鍦嗗舰鍗婂緞涓庨ゼ鍥惧鍦堢浉鍚�
- },
- style: {
- fill: 'none',
- stroke: '#ccc', // 鐏拌壊杈规
- lineWidth: 2
- },
- z: -10 // 纭繚杈规鍦ㄩゼ鍥句笅闈�
- }
-})
-const pieTooltip = reactive({
- trigger: 'item',
- formatter: function (params) {
- // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
- const description = params.name === '鏈湀鍥炴鏁伴噺' ? '鏈湀鍥炴鏁伴噺' : '搴旀敹娆鹃噾棰�';
- return `${description} ${formatNumber(params.value)}鍏� ${params.percent}%`;
- },
- position: 'right'
-})
-// 鏁板瓧鏍煎紡鍖栧嚱鏁帮紝娣诲姞閫楀彿浣滀负鍗冧綅鍒嗛殧绗�
-function formatNumber(num) {
- return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-const materialPieSeries = ref([
- {
- type: 'pie',
- radius: '92%',
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show:false
- },
- data: [
- { value: 0, name: '鏈湀鍥炴鏁伴噺', itemStyle: { color: '#2D99FF' } },
- { value: 0, name: '搴旀敹娆鹃噾棰�', itemStyle: { color: '#D4DDFF' } },
- ]
- }
-])
-const chartStyle = {
- width: '150%',
- height: '120%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
-}
-</script>
-
-<style scoped>
-.card-top-left {
- padding: 16px;
- background: #fff;
- height: 24vh;
- width: 56vw;
- margin-bottom: 20px;
-}
-.title {
- position: relative;
- font-size: 18px;
- color: #333;
- font-weight: 400;
- padding-left: 10px;
- margin-bottom: 26px;
-}
-.title::before {
- position: absolute;
- left: 0;
- top: 4px;
- content: '';
- width: 4px;
- height: 18px;
- background-color: #3A7BFA;
- border-radius: 2px;
-}
-.card-group {
- display: flex;
-}
-.info-card {
- width: 300px;
- height: 126px;
- background-image: url("../assets/images/Rectangle 76@2x.png");
- background-size: 100% 100%;
- display: flex;
- justify-content: space-around;
- align-items: center;
-}
-.info-card1 {
- width: 300px;
- height: 126px;
- background-image: url("../assets/images/Rectangle 77@2x.png");
- background-size: 100% 100%;
- margin: 0 40px;
- display: flex;
- justify-content: space-around;
- align-items: center;
-}
-.info-card2 {
- width: 300px;
- height: 126px;
- background-image: url("../assets/images/Rectangle 77@2x(1).png");
- background-size: 100% 100%;
- display: flex;
- justify-content: space-around;
- align-items: center;
-}
-.info-message {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-.info-message1 {
- font-weight: bold;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
-}
-.info-message2 {
- font-weight: bold;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
-}
-.info-number {
- font-weight: bold;
- font-size: 32px;
- color: #FFFFFF;
- margin-bottom: 10px;
-}
-.info-title {
- font-weight: bold;
- font-size: 18px;
- color: #FFFFFF;
-}
-.pie {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
-}
-.pie-group {
- display: flex;
-}
-.pie-title {
- font-size: 14px;
- line-height: 24px;
- color: #2853FD;
- padding-left: 16px;
- position: relative;
-}
-.pie-title::before {
- content: '';
- width: 6px; /* 钃濈偣鐨勫搴� */
- height: 6px; /* 钃濈偣鐨勯珮搴� */
- background-color: #2853FD; /* 钃濈偣鐨勯鑹� */
- border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
- position: absolute;
- left: 0; /* 瀹氫綅鍒板乏杈� */
- top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
-}
-.pie-info {
- padding-left: 16px;
- font-size: 14px;
- line-height: 24px;
-}
-.pie-number {
- color: #2853FD;
-}
-.info-group {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-</style>
-
+<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>
--
Gitblit v1.9.3