From bbfd68648872621be182fd51f3a56a09cd21e09e Mon Sep 17 00:00:00 2001
From: zhuguifei <zhuguifei@zhuguifeideiMac.local>
Date: 星期一, 26 五月 2025 09:50:36 +0800
Subject: [PATCH] 添加首页数据接口
---
eims-ui/apps/web-antd/src/views/index.vue | 649 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 430 insertions(+), 219 deletions(-)
diff --git a/eims-ui/apps/web-antd/src/views/index.vue b/eims-ui/apps/web-antd/src/views/index.vue
index 71c466a..746ac1d 100644
--- a/eims-ui/apps/web-antd/src/views/index.vue
+++ b/eims-ui/apps/web-antd/src/views/index.vue
@@ -1,51 +1,166 @@
<script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/plugins/echarts';
import { AlertTwoTone, NotificationTwoTone, TagTwoTone } from '@ant-design/icons-vue';
-import { Avatar, Card, Col, Image, Row } from 'ant-design-vue';
+import { Card, Col, Image, Row, Skeleton } from 'ant-design-vue';
+
+import { queryEquStatu, queryMonthMainit, queryMonthReq, querySpareWarn, queryTodayInsp, queryTodoList } from '#/api/eims/dashboard';
+import { listEqu } from '#/api/eims/equ';
+import { listRepairRes } from '#/api/eims/repair-res';
+
+const router = useRouter();
+
+const equTotal = ref<number>(0);
+const equFaultTotal = ref<number>(0);
+
+const showInstSkeleton = ref<boolean>(true);
+const showEquStatuSkeleton = ref<boolean>(true);
+const showInspSkeleton = ref<boolean>(true);
+const showRepairSkeleton = ref<boolean>(true);
+const showMaintSkeleton = ref<boolean>(true);
const instChart = ref<EchartsUIType>();
const { renderEcharts: renderInstChart } = useEcharts(instChart);
const useStatuChart = ref<EchartsUIType>();
const { renderEcharts: renderUseChart } = useEcharts(useStatuChart);
+const inspChart = ref<EchartsUIType>();
+const { renderEcharts: renderInspChart } = useEcharts(inspChart);
const repairChart = ref<EchartsUIType>();
const { renderEcharts: renderRepairChart } = useEcharts(repairChart);
-const faultChart = ref<EchartsUIType>();
-const { renderEcharts: renderFaultChart } = useEcharts(faultChart);
-const maintenChart = ref<EchartsUIType>();
-const { renderEcharts: renderMaintenChart } = useEcharts(maintenChart);
+const maintChart = ref<EchartsUIType>();
+const { renderEcharts: renderMaintChart } = useEcharts(maintChart);
const todoItems = ref<any>([
{
completed: false,
- content: `瀹℃煡鏈�杩戞彁浜ゅ埌Git浠撳簱鐨勫墠绔唬鐮侊紝纭繚浠ｇ爜璐ㄩ噺鍜岃鑼冦�俙,
- date: '2024-07-30 11:00:00',
- title: '瀹℃煡鍓嶇浠ｇ爜鎻愪氦'
- },
- {
- completed: true,
- content: `妫�鏌ュ苟浼樺寲绯荤粺鎬ц兘锛岄檷浣嶤PU浣跨敤鐜囥�俙,
- date: '2024-07-30 11:00:00',
- title: '绯荤粺鎬ц兘浼樺寲'
+ content: `涓烘彁鍗囩郴缁熺ǔ瀹氭�у強鐢ㄦ埛浣撻獙锛岃澶囩鐞嗙郴缁熷皢浜� 2025骞�5鏈�25鏃ワ紙鏄熸湡鏃ワ級鍑屾櫒0:00鑷�4:00 杩涜渚嬭绯荤粺缁存姢鍗囩骇銆傛湡闂寸郴缁熷彲鑳芥殏鏃舵棤娉曡闂紝璇锋偍鎻愬墠鍋氬ソ鐩稿叧瀹夋帓銆俙,
+ date: '2025-05-18 10:12:00',
+ title: '绯荤粺缁存姢閫氱煡'
},
{
completed: false,
- content: `杩涜绯荤粺瀹夊叏妫�鏌ワ紝纭繚娌℃湁瀹夊叏婕忔礊鎴栨湭鎺堟潈鐨勮闂�� `,
- date: '2024-07-30 11:00:00',
- title: '瀹夊叏妫�鏌�'
- },
-
+ content: `涓鸿繘涓�姝ヨ鑼冭澶囨晠闅滃鐞嗘祦绋嬶紝鍗虫棩璧锋墍鏈夎澶囨姤淇渶閫氳繃绯荤粺鈥滄晠闅滄姤淇�濇ā鍧楁彁浜ょ敵璇凤紝璇峰嬁鍐嶄娇鐢ㄧ嚎涓嬬焊璐ㄦ祦绋嬨�傛妧鏈敮鎸佷汉鍛樺皢渚濇嵁宸ュ崟浼樺厛绾у強鏃跺搷搴斿鐞嗐�俙,
+ date: '2024-07-28 14:30:00',
+ title: '鏂板璁惧鎶ヤ慨娴佺▼璇存槑'
+ }
+]);
+const commonFunctions = ref<any>([
{
- completed: false,
- content: `淇鐢ㄦ埛鎶ュ憡鐨勯〉闈I鏄剧ず闂锛岀‘淇濆湪涓嶅悓娴忚鍣ㄤ腑鏄剧ず涓�鑷淬�� `,
- date: '2024-07-30 11:00:00',
- title: '淇UI鏄剧ず闂'
+ menu: '鏁呴殰鎶ヤ慨',
+ path: '/repair/repairReq',
+ icon: '/static/menu/ico1.png'
+ },
+ {
+ menu: '缁翠慨宸ュ崟',
+ path: '/repair/repairRes',
+ icon: '/static/menu/ico2.png'
+ },
+ {
+ menu: '鐐规姹囨��',
+ path: '/inspect/st',
+ icon: '/static/menu/ico3.png'
+ },
+ {
+ menu: '鐐规璁″垝',
+ path: '/inspect/plan',
+ icon: '/static/menu/ico4.png'
+ },
+ {
+ menu: '淇濆吇姹囨��',
+ path: '/maint/st',
+ icon: '/static/menu/ico5.png'
+ },
+ {
+ menu: '淇濆吇璁″垝',
+ path: '/maint/plan',
+ icon: '/static/menu/ico6.png'
+ },
+ {
+ menu: '璁惧鍙拌处',
+ path: '/equ/ledger',
+ icon: '/static/menu/ico7.png'
}
]);
-onMounted(() => {
+const todoMenu = ref<any>([
+ {
+ menu: '鏁呴殰鎶ヤ慨',
+ path: '/repair/repairReq',
+ icon: '/static/menu/ico1.png'
+ },
+ {
+ menu: '缁翠慨浠诲姟',
+ path: '/repair/repairRes',
+ icon: '/static/menu/ico2.png'
+ },
+ {
+ menu: '缁翠慨璇勪环',
+ path: '/repair/repairRes',
+ icon: '/static/menu/ico2.png'
+ },
+ {
+ menu: '鐐规浠诲姟',
+ path: '/inspect/st',
+ icon: '/static/menu/ico3.png'
+ },
+ {
+ menu: '淇濆吇浠诲姟',
+ path: '/maint/st',
+ icon: '/static/menu/ico5.png'
+ },
+ {
+ menu: '鐘舵�佸彉鏇�',
+ path: '/equ/equStatu',
+ icon: '/static/menu/ico5.png'
+ },
+ {
+ menu: '璁惧鍙拌处',
+ path: '/equ/ledger',
+ icon: '/static/menu/ico7.png'
+ }
+]);
+
+// 澶囦欢棰勮
+const spareWarn = ref<any>({});
+// 璁惧浣跨敤鐘舵��
+const equStatu = ref<any>({});
+// 浠婃棩鐐规
+const todayInsp = ref<any>({});
+// 鏈湀鏁呴殰
+const monthReq = ref<any>({});
+// 鏈湀淇濆吇
+const monthMaint = ref<any>({});
+
+const spareMenu = ref<any>([
+ {
+ menu: '澶囦欢鍙拌处',
+ path: '/spare/index',
+ icon: '/static/menu/ico8.png'
+ },
+ {
+ menu: '鍏ュ簱鍗�',
+ path: '/spare/in',
+ icon: '/static/menu/ico9.png'
+ },
+ {
+ menu: '鍑哄簱鍗�',
+ path: '/spare/out',
+ icon: '/static/menu/ico10.png'
+ }
+]);
+
+function itemClick(item: any) {
+ router.push(item.path);
+}
+function goToKnowledge() {
+ router.push('/faultKnow');
+}
+
+function initInstChart(data: any) {
+ showInstSkeleton.value = false;
renderInstChart({
series: [
{
@@ -99,16 +214,16 @@
formatter(value: number) {
switch (value) {
case 0.125: {
- return 'Grade D';
+ return '涓ラ噸鏁呴殰';
}
case 0.375: {
- return 'Grade C';
+ return '鎬ラ渶缁存姢';
}
case 0.625: {
- return 'Grade B';
+ return '鍩烘湰鍙敤';
}
case 0.875: {
- return 'Grade A';
+ return '鍙潬杩愯';
}
// No default
}
@@ -130,7 +245,7 @@
},
data: [
{
- value: 0.95,
+ value: data?.normal,
name: '姝ｅ父璁惧鍗犳瘮'
}
]
@@ -140,6 +255,12 @@
trigger: 'item'
}
});
+}
+
+function initEquStatuChart(data: any) {
+ showEquStatuSkeleton.value = false;
+ const keyList = Object.keys(data);
+ const valueList = Object.values(data);
renderUseChart({
tooltip: {
trigger: 'axis',
@@ -161,13 +282,13 @@
},
yAxis: {
type: 'category',
- data: ['寰呮', '鍦ㄧ敤', '鍋滅敤', '鍏朵粬', '鎶ュ簾']
+ data: keyList
},
series: [
{
- name: '2012',
+ name: '2025',
type: 'bar',
- data: [10, 63, 21, 91, 8],
+ data: valueList,
label: {
show: true,
position: 'right'
@@ -176,127 +297,60 @@
}
]
});
- renderRepairChart({
+}
+
+function initInspChart(data: any) {
+ showInspSkeleton.value = false;
+ const nameList = data?.data.map((item) => item.name);
+ renderInspChart({
tooltip: {
- trigger: 'item'
- },
- title: {
- left: '18%', // 鍩轰簬瀹瑰櫒瀹藉害鐨�50%
- top: '35%',
- text: `{a|10涓獇\n{b|鏈慨澶峿\n{c|浠婃棩鏂板 +1}`,
- textStyle: {
- rich: {
- a: {
- color: '#4E5766',
- fontSize: 20,
- lineHeight: 30,
- align: 'center'
- },
- b: {
- color: '#1C2029',
- fontSize: 18,
- lineHeight: 30,
- align: 'center'
- },
- c: {
- color: '#ef6666',
- fontSize: 15,
- lineHeight: 30,
- align: 'center'
- }
- }
- }
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
- orient: 'vertical',
- top: 'center',
- right: 'right',
- left: '70%'
+ data: nameList
},
series: [
{
- name: 'Access From',
+ name: '鐐规椤�',
type: 'pie',
- radius: ['40%', '65%'], // 璋冩暣鍐呭鍗婂緞
- center: ['30%', '50%'], // 灏嗛ゼ鍥句腑蹇冨悜宸︾Щ涓�鐐�
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 10,
- borderColor: '#fff',
- borderWidth: 2
- },
+ selectedMode: 'single',
+ radius: [0, '30%'],
label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: false,
- fontSize: 40,
- fontWeight: 'bold'
- }
+ position: 'inner',
+ fontSize: 14
},
labelLine: {
show: false
},
- data: [
- { value: 10, name: '寰呮帴鍗�' },
- { value: 8, name: '寰呯淮淇�' },
- { value: 9, name: '缁翠慨涓�' },
- { value: 16, name: '瀹℃牳涓�' },
- { value: 8, name: '鍏朵粬' }
- ]
- }
- ]
- });
- renderFaultChart({
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
+ data: data?.sub
+ },
{
- type: 'category',
- data: ['smt', '璐寸墖鏈�', '娉ㄨ兌鏈�'],
- axisTick: {
- alignWithLabel: true
- }
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: 'Direct',
- type: 'bar',
- barWidth: 20,
- data: [10, 8, 12],
+ name: '鐐规',
+ type: 'pie',
+ radius: ['45%', '60%'],
+ labelLine: {
+ length: 30
+ },
label: {
- show: true,
- position: 'top'
- }
+ show: true
+ },
+ data: data?.data
}
]
});
- renderMaintenChart({
+}
+
+function initRepairChart(data: any) {
+ showRepairSkeleton.value = false;
+ renderRepairChart({
tooltip: {
trigger: 'item'
},
title: {
left: '21%', // 鍩轰簬瀹瑰櫒瀹藉害鐨�50%
top: '40%',
- text: `{a|鎬诲彴鏁皚\n{b|20}`,
+ text: `{a|鎬绘晠闅渳\n{b|${data?.data?.length}}`,
textStyle: {
rich: {
a: {
@@ -322,7 +376,7 @@
},
series: [
{
- name: 'Access From',
+ name: '璁惧缁翠慨',
type: 'pie',
radius: ['40%', '65%'], // 璋冩暣鍐呭鍗婂緞
center: ['30%', '50%'], // 灏嗛ゼ鍥句腑蹇冨悜宸︾Щ涓�鐐�
@@ -346,15 +400,142 @@
labelLine: {
show: false
},
- data: [
- { value: 10, name: '鏈繚鍏�' },
- { value: 8, name: '寰呬繚鍏�' },
- { value: 9, name: '淇濆吇涓�' },
- { value: 16, name: '寰呮帴鍗�' }
- ]
+ data: data?.data
}
]
});
+}
+
+function initMaintChart(data: any) {
+ showMaintSkeleton.value = false;
+ renderMaintChart({
+ tooltip: {
+ trigger: 'item'
+ },
+ title: {
+ left: '21%', // 鍩轰簬瀹瑰櫒瀹藉害鐨�50%
+ top: '40%',
+ text: `{a|鎬讳繚鍏粆\n{b|${data?.data?.length}}`,
+ textStyle: {
+ rich: {
+ a: {
+ color: '#4E5766',
+ fontSize: 20,
+ lineHeight: 30,
+ align: 'center'
+ },
+ b: {
+ color: '#1C2029',
+ fontSize: 18,
+ lineHeight: 30,
+ align: 'center'
+ }
+ }
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ top: 'center',
+ right: 'right',
+ left: '70%'
+ },
+ series: [
+ {
+ name: '淇濆吇',
+ type: 'pie',
+ radius: ['40%', '65%'], // 璋冩暣鍐呭鍗婂緞
+ center: ['30%', '50%'], // 灏嗛ゼ鍥句腑蹇冨悜宸︾Щ涓�鐐�
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: false,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: data?.data
+ }
+ ]
+ });
+}
+
+async function initData() {
+ const equResult = await listEqu();
+ const repairRes = await listRepairRes();
+ const equCount = equResult?.total || 0;
+ const rpairTotal = repairRes?.total || 0;
+ const instData = { normal: 0 };
+ if (rpairTotal > 0 && equCount > 0) {
+ equTotal.value = equCount;
+ equFaultTotal.value = rpairTotal;
+ instData.normal = (equCount - rpairTotal) / equCount;
+ }
+ initInstChart(instData);
+
+ const todoList = await queryTodoList();
+ todoMenu.value = todoMenu.value.map((frontendItem: any) => {
+ // 鏌ユ壘瀵瑰簲menu鐨勫悗绔暟鎹�
+ const backendItem = todoList?.find((item: any) => item.menu === frontendItem.menu);
+ // 濡傛灉鎵惧埌浜嗗搴旂殑鍚庣鏁版嵁锛屽垯鍚堝苟涔嬶紙涓嶈鐩栧凡鏈夌殑灞炴�э級
+ if (backendItem) {
+ frontendItem = { ...frontendItem, ...backendItem };
+ }
+ return frontendItem;
+ });
+ spareWarn.value = await querySpareWarn();
+ equStatu.value = await queryEquStatu();
+ initEquStatuChart(equStatu.value);
+ const tInsp = (await queryTodayInsp()) || {};
+ todayInsp.value = tInsp;
+ initInspChart(tInsp);
+ monthReq.value = (await queryMonthReq()) || {};
+ initRepairChart(monthReq.value);
+ monthMaint.value = (await queryMonthMainit()) || {};
+ initMaintChart(monthMaint.value);
+}
+
+onMounted(async () => {
+ initData();
+});
+
+const todayInspTotal = computed(() => {
+ return todayInsp.value?.data?.reduce((sum, item) => sum + item.value, 0);
+});
+
+const todayInspFinish = computed(() => {
+ return todayInsp.value?.data?.filter((item) => item.name === '宸插畬鎴�').reduce((sum, item) => sum + item.value, 0);
+});
+
+const finishReqCount = computed(() => {
+ const completedItem = monthReq.value?.data?.find((item) => item.name === '宸插畬鎴�');
+ return completedItem ? completedItem.value : 0;
+});
+
+const reqCount = computed(() => {
+ // 宸插畬鎴�
+ return monthReq.value?.data?.reduce((sum, item) => sum + item.value, 0);
+});
+
+const maintCount = computed(() => {
+ // 宸插畬鎴�
+ return monthMaint.value?.data?.reduce((sum, item) => sum + item.value, 0);
+});
+
+const finishMaintCount = computed(() => {
+ const completedItem = monthMaint.value?.data?.find((item) => item.name === '宸插畬鎴�');
+ return completedItem ? completedItem.value : 0;
});
</script>
@@ -367,13 +548,15 @@
<label class="ml-2">甯哥敤鍔熻兘</label>
</template>
<Row>
- <Col v-for="i in 9" :span="8" class="flex cursor-pointer flex-col items-center justify-center py-6 hover:bg-gray-100">
- <Avatar size="large" src="/src/assets/logo.png">
- <!-- <template #icon>
- <UserOutlined />
- </template>-->
- </Avatar>
- <label class="mt-1">璁惧鍙拌处{{ i }}</label>
+ <Col
+ v-for="(item, index) in commonFunctions"
+ :key="index"
+ :span="8"
+ class="flex cursor-pointer flex-col items-center justify-center py-6 hover:bg-gray-100"
+ @click.stop="itemClick(item)"
+ >
+ <Image :preview="false" :src="item.icon" :width="35" />
+ <label class="mt-1"> {{ item.menu }}</label>
</Col>
</Row>
</Card>
@@ -383,52 +566,59 @@
<TagTwoTone />
<span class="ml-2">浣跨敤鐘舵��</span>
</template>
-
- <EchartsUI ref="useStatuChart" height="400px" />
+ <Skeleton :loading="showInstSkeleton" :paragraph="{ rows: 12, width: 400 }" active>
+ <EchartsUI ref="useStatuChart" height="400px" />
+ </Skeleton>
</Card>
<Card :bordered="false" class="section-height mt-2 rounded-none">
<template #title>
<TagTwoTone />
- <span class="ml-2">璁惧缁翠慨</span>
+ <span class="ml-2">浠婃棩鐐规</span>
</template>
- <div class="flex w-full flex-col justify-center items-center">
- <div class="flex w-full py-3">
- <div class="flex flex-col justify-center items-center w-1/3">
- <span class="font-bold text-xl">3</span>
- <span>鍝嶅簲瓒呮椂</span>
- </div>
- <div class="flex flex-col justify-center items-center w-1/3">
- <span class="font-bold text-xl">1</span>
- <span>缁翠慨瓒呮椂</span>
- </div>
- <div class="flex flex-col justify-center items-center w-1/3">
- <span class="font-bold text-xl">0</span>
- <span>鍋滄満瓒呮椂</span>
- </div>
- </div>
- <EchartsUI ref="repairChart" height="300px" width="400px" />
- </div>
+ <Skeleton :loading="showInspSkeleton" :paragraph="{ rows: 12, width: 400 }" active>
+ <div class="flex w-full flex-col justify-center items-center">
+ <div class="flex w-full py-3">
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ todayInspTotal }}</span>
+ <span>鐐规鎵规</span>
+ </div>
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl"></span>
+ <span> </span>
+ </div>
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ todayInspFinish }}</span>
+ <span>宸插畬鎴�</span>
+ </div>
+ </div>
+
+ <EchartsUI ref="inspChart" height="300px" width="400px" />
+ </div>
+ </Skeleton>
</Card>
</div>
<div class="mr-2 w-1/3">
<Card :bordered="false" class="section-height flex justify-center rounded-none p-0">
- <div class="w-full">
- <EchartsUI ref="instChart" width="400px" />
-
- <div class="flex justify-around pb-5">
+ <div class="w-full pt-4">
+ <Skeleton :loading="showInstSkeleton" :paragraph="{ rows: 12, width: 400 }" active>
<div>
- <div class="text-center text-4xl">100<label class="ml-1 text-xl font-bold">鍙�</label></div>
- <div class="text-center font-bold">璁惧鎬绘暟</div>
- </div>
+ <EchartsUI ref="instChart" width="400px" />
+ <div class="flex justify-around pb-5">
+ <div>
+ <div class="text-center text-4xl">{{ equTotal }}<label class="ml-1 text-xl font-bold">鍙�</label></div>
+ <div class="text-center font-bold">璁惧鎬绘暟</div>
+ </div>
- <div>
- <div class="text-center text-4xl text-red-500">5<label class="ml-1 text-xl font-bold">鍙�</label></div>
- <div class="text-center font-bold">鏁呴殰鎬绘暟</div>
+ <div>
+ <div class="text-center text-4xl text-red-500">{{ equFaultTotal }}<label class="ml-1 text-xl font-bold">鍙�</label></div>
+ <div class="text-center font-bold">鏁呴殰鎬绘暟</div>
+ </div>
+ </div>
</div>
- </div>
+ </Skeleton>
</div>
</Card>
<Card :bordered="false" class="section-height mt-2 rounded-none">
@@ -472,26 +662,43 @@
<Card :bordered="false" class="section-height mt-2 rounded-none">
<template #title>
<TagTwoTone />
- <span class="ml-2">鏁呴殰缁熻</span>
+ <span class="ml-2">鏈湀缁翠慨</span>
</template>
- <span class="text-gray-500 text-xs ml-3">鏁呴殰娆℃暟:10</span>
- <EchartsUI ref="faultChart" height="360px" />
- </Card>
+ <Skeleton :loading="showRepairSkeleton" :paragraph="{ rows: 12, width: 400 }" active>
+ <div class="flex w-full flex-col justify-center items-center">
+ <div class="flex w-full py-3">
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ reqCount || 0 }}</span>
+ <span>鏈湀鎶ヤ慨</span>
+ </div>
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ monthReq?.today?.length || 0 }}</span>
+ <span>浠婃棩鏂板</span>
+ </div>
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ finishReqCount }}</span>
+ <span>鏈湀瀹屾垚</span>
+ </div>
+ </div>
+ <EchartsUI ref="repairChart" height="300px" width="400px" />
+ </div>
+ </Skeleton>
+ </Card>
</div>
<div class="w-1/3">
<div class="flex h-14 items-center justify-around rounded-none bg-white p-0">
<div class="flex h-10 w-28 cursor-pointer items-center justify-around rounded-sm hover:bg-gray-100" style="background: #eaf3fe">
- <Image :preview="false" :width="20" src="/src/assets/logo.png" />
- <span class="mr-2 font-bold" style="color: #2d83f4">鏁呴殰鐭ヨ瘑搴�</span>
+ <Image :preview="false" :width="20" src="/static/menu/ico11.png" />
+ <span class="mr-2 font-bold" style="color: #2d83f4" @click="goToKnowledge()">鏁呴殰鐭ヨ瘑搴�</span>
</div>
<div class="flex h-10 w-28 cursor-pointer items-center justify-around rounded-sm hover:bg-gray-100" style="background: #eaeafe">
- <Image :preview="false" :width="20" src="/src/assets/logo.png" />
+ <Image :preview="false" :width="20" src="/static/menu/ico12.png" />
<span class="mr-2 font-bold" style="color: #5070e0">鏅鸿兘鎼滅储</span>
</div>
<div class="flex h-10 w-28 cursor-pointer items-center justify-around rounded-sm hover:bg-gray-100" style="background: #ebf8f7">
- <Image :preview="false" :width="20" src="/src/assets/logo.png" />
+ <Image :preview="false" :width="20" src="/static/menu/ico13.png" />
<span class="mr-2 font-bold" style="color: #32b9af">甯姪涓績</span>
</div>
</div>
@@ -504,36 +711,38 @@
<div class="todo-title mt-5">璁惧绠＄悊</div>
<div class="flex w-full flex-wrap justify-between">
<div
- v-for="index in 12"
+ v-for="(item, index) in todoMenu"
:class="{
- 'justify-center': index % 3 == 2,
- 'justify-end': index % 3 == 0,
- 'mt-2': index > 3
+ 'justify-center': (index + 1) % 3 == 2,
+ 'justify-end': (index + 1) % 3 == 0,
+ 'mt-2': index > 2
}"
class="flex w-1/3"
+ @click="itemClick(item)"
>
<div class="todo-box cursor-pointer hover:bg-gray-100">
- <Image :preview="false" :width="20" src="/src/assets/logo.png" />
- <span>鏁呴殰瀹℃牳</span>
- <span>{{ index }}</span>
+ <Image :preview="false" :src="item?.icon" :width="20" />
+ <span>{{ item.menu }}</span>
+ <span>{{ item?.count || 0 }}</span>
</div>
</div>
</div>
- <div class="todo-title mt-20">澶囦欢绠＄悊</div>
+ <div class="todo-title mt-44">澶囦欢绠＄悊</div>
<div class="flex w-full flex-wrap justify-between">
<div
- v-for="index in 3"
+ v-for="(item, index) in spareMenu"
:class="{
- 'justify-center': index % 3 == 2,
- 'justify-end': index % 3 == 0
+ 'justify-center': (index + 1) % 3 == 2,
+ 'justify-end': (index + 1) % 3 == 0
}"
class="flex w-1/3"
+ @click="itemClick(item)"
>
<div class="todo-box border-gray-100">
- <Image :preview="false" :width="20" src="/src/assets/logo.png" />
- <span>鏁呴殰瀹℃牳</span>
- <span>{{ index }}</span>
+ <Image :preview="false" :src="item?.icon" :width="20" />
+ <span>{{ item.menu }}</span>
+ <span>{{}}</span>
</div>
</div>
</div>
@@ -548,25 +757,25 @@
<div class="up-info-box w-1/2 flex h-40">
<div class="w-1/2 flex items-center h-full justify-center flex-col">
<div class="w-16">
- <span class="text-xl text-green-600">7</span>
+ <span class="text-xl text-green-600">{{ spareWarn?.upper || 0 }}</span>
<span class="ml-1">绉�</span>
</div>
<div class="w-16">楂樹簬涓婇檺</div>
</div>
<div class="w-1/2 h-full flex items-center justify-center">
- <Image :preview="false" src="/src/assets/img/img-up-limit.png" />
+ <Image :preview="false" src="/static/img/img-up-limit.png" />
</div>
</div>
<div class="low-info-box w-1/2 flex h-40">
<div class="w-1/2 flex items-center h-full justify-center flex-col">
<div class="w-16">
- <span class="text-xl text-red-600">10</span>
+ <span class="text-xl text-red-600">{{ spareWarn?.lower || 0 }}</span>
<span class="ml-1">绉�</span>
</div>
<div class="w-16">浣庝簬涓嬮檺</div>
</div>
<div class="w-1/2 h-full flex items-center justify-center">
- <Image :preview="false" src="/src/assets/img/img-lower-limit.png" />
+ <Image :preview="false" src="/static/img/img-lower-limit.png" />
</div>
</div>
</div>
@@ -575,26 +784,28 @@
<Card :bordered="false" class="section-height mt-2 rounded-none">
<template #title>
<TagTwoTone />
- <span class="ml-2">璁惧淇濆吇</span>
+ <span class="ml-2">鏈湀淇濆吇</span>
</template>
- <div class="flex w-full flex-col justify-center items-center">
- <div class="flex w-full py-3">
- <div class="flex flex-col justify-center items-center w-1/3">
- <span class="font-bold text-xl">3</span>
- <span>鏈繚鍏�</span>
+ <Skeleton :loading="showMaintSkeleton" :paragraph="{ rows: 12, width: 400 }" active>
+ <div class="flex w-full flex-col justify-center items-center">
+ <div class="flex w-full py-3">
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ maintCount || 0 }}</span>
+ <span>鏈湀淇濆吇</span>
+ </div>
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ maintCount - finishMaintCount }}</span>
+ <span>鏈畬鎴�</span>
+ </div>
+ <div class="flex flex-col justify-center items-center w-1/3">
+ <span class="font-bold text-xl">{{ finishMaintCount }}</span>
+ <span>宸插畬鎴�</span>
+ </div>
</div>
- <div class="flex flex-col justify-center items-center w-1/3">
- <span class="font-bold text-xl">1</span>
- <span>鏈湀鍒版湡</span>
- </div>
- <div class="flex flex-col justify-center items-center w-1/3">
- <span class="font-bold text-xl">0</span>
- <span>涓嬫湀鍒版湡</span>
- </div>
- </div>
- <EchartsUI ref="maintenChart" height="300px" width="400px" />
- </div>
+ <EchartsUI ref="maintChart" height="300px" width="400px" />
+ </div>
+ </Skeleton>
</Card>
</div>
</div>
--
Gitblit v1.9.3