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 | 1016 +++++++++++++++++++++++------------------------------------
1 files changed, 392 insertions(+), 624 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index f6ae965..e9453f2 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,624 +1,392 @@
-<template>
- <div class="app-container home">
- <div style="display: flex;">
- <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">{{ contractAmount }}</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">{{ invoiceAmount }}</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">{{ receiptAmount }}</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">{{ receiveAmount }}</span>鍏� <span
- class="pie-number">{{ receiveAmountPercentage }}</span>%</div>
- </div>
- <div class="info-message1">
- <div class="pie-title">搴旀敹娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number">{{ contractAmountMonth }}</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="materialPieSeries1" :tooltip="pieTooltip1"></Echarts>
- </div>
- <div class="info-message2">
- <div class="info-message1">
- <div class="pie-title1">鏈湀浠樻閲戦</div>
- <div class="pie-info"><span class="pie-number1">{{ paymentAmount }}</span>鍏� <span
- class="pie-number1">{{ payableAmountPercentage }}</span>%</div>
- </div>
- <div class="info-message1">
- <div class="pie-title1">搴斾粯娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number1">{{ payableAmount }}</span>鍏�</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div>
- <div class="card-top-right">
- <div class="title">
- <span style="font-weight: bold">瀹㈡埛鍚堝悓閲戦TOP5缁熻</span>
- </div>
- <div>
- <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="barSeries"
- :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 42vh;"></Echarts>
- </div>
- </div>
- </div>
- </div>
- <div>
- <div>
- <div class="card-bottom">
- <div class="title">
- <span style="font-weight: bold">鍥炴銆佸紑绁ㄨ繎鍗婂勾璧板娍鍥�</span>
- </div>
- <div>
- <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="lineSeries"
- :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 27vh;"></Echarts>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script setup name="Index">
-const { proxy } = getCurrentInstance()
-import * as echarts from 'echarts';
-import Echarts from "@/components/Echarts/echarts.vue";
-import {
- getAmountHalfYear,
- getAmountMouth,
- getContractAmount,
- getInvoiceAmount,
- getReceiptAmount,
- getTopFiveList, paymentMonthList
-} from "@/api/viewIndex.js";
-
-const pieLegend = reactive({
- show: false,
-})
-const contractAmount = ref(0)
-const invoiceAmount = ref(0)
-const receiptAmount = ref(0)
-const receiveAmount = ref(0)
-const contractAmountMonth = ref(0)
-const receiveAmountPercentage = ref(0)
-const paymentAmount = ref(0)
-const payableAmount = ref(0)
-const payableAmountPercentage = ref(0)
-const options = reactive({
- graphic: {
- type: 'circle',
- left: 'center',
- top: 'middle',
- shape: {
- r: '70%' // 鍦嗗舰鍗婂緞涓庨ゼ鍥惧鍦堢浉鍚�
- },
- }
-})
-const pieTooltip = reactive({
- trigger: 'item',
- formatter: function (params) {
- // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
- const description = params.name === '鏈湀鍥炴閲戦' ? '鏈湀鍥炴閲戦' : '搴旀敹娆鹃噾棰�';
- return `${description} ${formatNumber(params.value)}鍏� ${params.percent}%`;
- },
- position: 'right'
-})
-const pieTooltip1 = 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 materialPieSeries1 = ref([
- {
- type: 'pie',
- radius: '92%',
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false
- },
- data: [
- { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } },
- { value: 0, name: '搴斾粯娆鹃噾棰�', itemStyle: { color: '#D0EFE1' } },
- ]
- }
-])
-const chartStyle = {
- width: '150%',
- height: '120%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
-}
-const chartStyle1 = {
- width: '100%',
- height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
-}
-const grid = {
- left: '2%', // 澧炲ぇ宸︿晶鐣欑櫧
- right: '10%',
- bottom: '15%',
- top: '10%',
- containLabel: true // 纭繚鍖呭惈鏍囩
-}
-const tooltip = {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
-}
-const tooltipLine = {
- trigger: 'axis',
-}
-const yAxis1 = ref([
- {
- type: 'value',
- }
-])
-const xAxis1 = ref([
- {
- type: 'category',
- data: []
- }
-])
-const yAxis2 = ref([
- {
- type: 'value',
- }
-])
-const xAxis2 = ref([
- {
- type: 'category',
- data: []
- }
-])
-const barLegend = reactive({})
-const barSeries = ref([
- {
- type: 'bar',
- data: [],
- label: {
- show: true
- },
- },
-])
-const lineSeries = ref([
- {
- type: 'line',
- data: [],
- label: {
- show: true
- },
- },
-])
-// 鍚堝悓閲戦
-const getContractAmountNum = () => {
- getContractAmount().then((res) => {
- contractAmount.value = res.data
- })
-}
-// 寮�绁ㄩ噾棰�
-const getInvoiceAmountNum = () => {
- getInvoiceAmount().then((res) => {
- invoiceAmount.value = res.data
- })
-}
-// 鍥炴閲戦
-const getReceiptAmountNum = () => {
- getReceiptAmount().then((res) => {
- receiptAmount.value = res.data
- })
-}
-// 鏈堝洖娆鹃噾棰濋ゼ鍥�
-const getAmountMouthNum = () => {
- getAmountMouth().then((res) => {
- receiveAmount.value = res.data.receiveAmount
- contractAmountMonth.value = res.data.contractAmount
- const percentage = (receiveAmount.value / contractAmountMonth.value) * 100;
- receiveAmountPercentage.value = percentage.toFixed(2)
- materialPieSeries.value[0].data[0].value = receiveAmount.value
- materialPieSeries.value[0].data[1].value = contractAmountMonth.value
- })
-}
-// 鏈堜粯娆鹃噾棰濋ゼ鍥�
-const paymentMonthListNum = () => {
- paymentMonthList().then((res) => {
- paymentAmount.value = res.data.paymentAmount
- payableAmount.value = res.data.payableAmount
- const percentage = (paymentAmount.value / payableAmount.value) * 100;
- payableAmountPercentage.value = percentage.toFixed(2)
- materialPieSeries1.value[0].data[0].value = paymentAmount.value
- materialPieSeries1.value[0].data[1].value = payableAmount.value
- })
-}
-// 瀹㈡埛top5
-const getTopFiveListNum = async () => {
- const res = await getTopFiveList()
- const customerName = []
- const totalAmount = []
- res.data.forEach(item => {
- customerName.push(item.customerName)
- totalAmount.push(item.totalAmount)
- })
- // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
- xAxis1.value = [
- {
- type: 'category',
- data: customerName
- }
- ]
- barSeries.value = [
- {
- type: 'bar',
- data: totalAmount,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#F7D2FF' },
- { offset: 1, color: '#826AF9' }
- ])
- },
- emphasis: {
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 1, color: '#826AF9' }
- ])
- }
- },
- }
- ]
-}
-// 绾垮舰鍥�
-const getAmountHalfYearNum = async () => {
- const res = await getAmountHalfYear()
- console.log(res)
- const monthName = []
- const receiptAmount = []
- const invoiceAmount = []
- res.data.forEach(item => {
- monthName.push(item.month)
- receiptAmount.push(item.receiptAmount)
- invoiceAmount.push(item.invoiceAmount)
- })
- // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
- xAxis2.value = [
- {
- type: 'category',
- data: monthName
- }
- ]
- lineSeries.value = [
- {
- name: '寮�绁�',
- type: 'line',
- data: receiptAmount,
- smooth: true,
- stack: 'Total',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(131, 207, 255, 1)'
- },
- {
- offset: 1,
- color: 'rgba(186, 228, 255, 1)'
- }
- ])
- },
- // 璁剧疆灏忓渾鐐圭殑棰滆壊
- itemStyle: {
- color: '#2D99FF', // 灏忓渾鐐归鑹茶缃负#2D99FF
- borderColor: '#2D99FF' // 濡傛灉闇�瑕佺殑璇濓紝鍙互璁剧疆杈规棰滆壊
- },
- emphasis: {
- focus: 'series'
- },
- lineStyle: {
- width: 0
- },
- showSymbol: false,
- },
- {
- name: '鍥炴',
- type: 'line',
- data: invoiceAmount,
- smooth: true,
- stack: 'Total',
- lineStyle: {
- width: 0
- },
- // 璁剧疆灏忓渾鐐圭殑棰滆壊
- itemStyle: {
- color: '#83CFFF', // 灏忓渾鐐归鑹茶缃负#83CFFF
- borderColor: '#83CFFF' // 濡傛灉闇�瑕佺殑璇濓紝鍙互璁剧疆杈规棰滆壊
- },
- showSymbol: false,
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(54, 153, 255, 1)'
- },
- {
- offset: 1,
- color: 'rgba(89, 169, 254, 1)'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- }
- ]
-}
-getContractAmountNum()
-getInvoiceAmountNum()
-getReceiptAmountNum()
-getTopFiveListNum()
-getAmountMouthNum()
-paymentMonthListNum()
-getAmountHalfYearNum()
-</script>
-
-<style scoped>
-.card-top-left {
- padding: 16px;
- background: #fff;
- height: 24vh;
- width: 56vw;
- margin-bottom: 20px;
-}
-
-.card-top-right {
- padding: 16px;
- background: #fff;
- height: 50.6vh;
- width: 28vw;
- margin-bottom: 20px;
- margin-left: 20px;
-}
-
-.card-bottom {
- padding: 16px;
- background: #fff;
- height: 34vh;
- width: 85.2vw;
- 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: #002FA7;
- 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-title1 {
- font-size: 14px;
- line-height: 24px;
- color: #1EBFAC;
- padding-left: 16px;
- position: relative;
-}
-
-.pie-title1::before {
- content: '';
- width: 6px;
- /* 钃濈偣鐨勫搴� */
- height: 6px;
- /* 钃濈偣鐨勯珮搴� */
- background-color: #1EBFAC;
- /* 钃濈偣鐨勯鑹� */
- border-radius: 50%;
- /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
- position: absolute;
- left: 0;
- /* 瀹氫綅鍒板乏杈� */
- top: 9px;
- /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
-}
-
-.pie-info {
- padding-left: 16px;
- font-size: 14px;
- line-height: 24px;
-}
-
-.pie-number {
- color: #2853FD;
-}
-
-.pie-number1 {
- color: #1EBFAC;
-}
-</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