From 4f40148798c944eaddceb3539cfe0ecc1dab5266 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 31 Mar 2025 18:56:30 +0800
Subject: [PATCH] feat: 巡检任务概况，事件概况，事件类型完成率接口对接
---
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue | 116 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 68 insertions(+), 48 deletions(-)
diff --git a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
index e061d39..a2c55fc 100644
--- a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
+++ b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -1,15 +1,11 @@
<!-- 巡检任务详情 -->
<template>
- <common-title
- title="巡检任务情况"
- :style="{ marginLeft: pxToRem(14) }"
- @details="detailsFun"
- >
+ <common-title title="巡检任务情况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun">
</common-title>
<div class="inspection-rask-details">
<div class="inspection-num">
<div class="total">
- <div class="value">{{total}}</div>
+ <div class="value">{{ total }}</div>
<div class="name">总任务数</div>
</div>
<div class="status">
@@ -19,7 +15,7 @@
</div>
</div>
</div>
- <CommonDateTime :style="{ top: pxToRem(19) }"></CommonDateTime>
+ <CommonDateTime :style="{ top: pxToRem(19) }" v-model="newTime" @change="dateChange" />
<div class="chart-container" ref="chartRef"></div>
</div>
</template>
@@ -30,13 +26,17 @@
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home';
+import dayjs from 'dayjs';
+
+const currenDate = dayjs().format('YYYY-MM-DD');
+const newTime = ref([currenDate, currenDate]);
const list = ref([
- { name: '计划执行', value: 89, color: '#FFFFFF',field:'planned_executions' },
- { name: '执行中', value: 100, color: '#FFA768',field:'running_num' },
- { name: '待执行', value: 66, color: '#FFE17E',field:'pending_executions' },
- { name: '已执行', value: 10, color: '#8EFFAC',field:'executed' },
- { name: '执行失败', value: 10, color: '#FF8E8E',field:'failed_executions' },
+ { name: '计划执行', value: 89, color: '#FFFFFF', field: 'planned_executions' },
+ { name: '执行中', value: 100, color: '#FFA768', field: 'running_num' },
+ { name: '待执行', value: 66, color: '#FFE17E', field: 'pending_executions' },
+ { name: '已执行', value: 10, color: '#8EFFAC', field: 'executed' },
+ { name: '执行失败', value: 10, color: '#FF8E8E', field: 'failed_executions' },
]);
const option = {
grid: {
@@ -121,54 +121,67 @@
},
},
},
- series: [
- {
- data: [
- 10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14,
- 18, 21, 15, 17, 20, 16, 18,
- ],
- type: 'bar',
- barWidth: '60%',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#1EE7E7' },
- { offset: 1, color: 'rgba(0, 112, 255, 0.1)' },
- ]),
- },
+ series: {
+ data: [
+ 10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14, 18,
+ 21, 15, 17, 20, 16, 18,
+ ],
+ type: 'bar',
+ barWidth: '60%',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#1EE7E7' },
+ { offset: 1, color: 'rgba(0, 112, 255, 0.1)' },
+ ]),
},
- ],
+ },
};
const detailsFun = () => {
console.log('details');
};
+const dateChange = value => {
+ newTime.value = value;
+ getData();
+};
+let chart = null;
+const getData = () => {
+ const params = {
+ date_enum: 'TODAY',
+ // start_date: newTime.value[0],
+ // end_date: newTime.value[1]
+ };
+ getJobStatistics(params).then(res => {
+ jobStatistics.value = res.data?.data || {};
+ });
+ getJobNumBar(params).then(res => {
+ option.xAxis.data = res.data?.data.map(item => item.name);
+ option.series.data = res.data?.data.map(item => item.value);
+ chart.setOption(option);
+ });
+};
+
const chartRef = ref(null);
const total = ref(0);
const jobStatistics = ref({
- "planned_executions": 0,
- "executed": 0,
- "running_num": 0,
- "failed_executions": 0,
- "pending_executions": 0
-})
+ planned_executions: 0,
+ executed: 0,
+ running_num: 0,
+ failed_executions: 0,
+ pending_executions: 0,
+});
onMounted(() => {
- getTotalJobNum().then(res => {
- total.value = res.data?.data || 0
- })
- getJobStatistics().then(res => {
- jobStatistics.value = res.data?.data || {}
- })
- getJobNumBar().then(res => {
- console.log(res.data.data);
- })
- const chart = echarts.init(chartRef.value);
- chart.setOption(option);
+ chart = echarts.init(chartRef.value);
// 监听窗口大小变化
window.addEventListener('resize', () => {
chart.resize();
});
+ getTotalJobNum().then(res => {
+ total.value = res.data?.data || 0;
+ });
+ getData();
});
</script>
@@ -179,18 +192,20 @@
width: 390px;
height: 414px;
background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
+ 270deg,
+ rgba(31, 62, 122, 0) 0%,
+ rgba(31, 62, 122, 0.35) 21%,
+ #1f3e7a 100%
);
border-radius: 0px 0px 0px 0px;
opacity: 0.85;
+
.inspection-num {
background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100% 100%;
width: 360px;
height: 118px;
position: relative;
+
.total {
position: absolute;
left: 34px;
@@ -201,12 +216,14 @@
text-align: center;
font-family: Source Han Sans CN, Source Han Sans CN;
line-height: 19px;
+
.value {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
margin-left: 8px;
font-size: 26px;
}
}
+
.status {
position: absolute;
top: 8px;
@@ -218,12 +235,14 @@
justify-content: flex-start;
line-height: 22px;
padding: 0 10px 10px 0;
+
.name {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
}
+
.value {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: 400;
@@ -231,6 +250,7 @@
}
}
}
+
.chart-container {
width: 100%;
height: 200px;
--
Gitblit v1.9.3