From 523bb8621ab2e37f4882ce82b4001e2ba24a3810 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Tue, 01 Apr 2025 15:14:08 +0800
Subject: [PATCH] feat: 增加巡检任务详情和巡检列表接口
---
src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue | 321 +++++++++++++++++++++++++++++-----------------------
1 files changed, 178 insertions(+), 143 deletions(-)
diff --git a/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue b/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
index 9a379e6..8f76038 100644
--- a/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
+++ b/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
@@ -2,7 +2,7 @@
<template>
<common-title title="巡检任务详情" :style="{ marginLeft: pxToRem(14) }"></common-title>
<div class="inspection-rask-details">
- <CommonDateTime :style="{ top: pxToRem(14),marginLeft: pxToRem(10) }"></CommonDateTime>
+ <CommonDateTime :style="{ top: pxToRem(14),marginLeft: pxToRem(10) }" v-model="newTime" @change="getData"></CommonDateTime>
<div class="chart-container" ref="chartRef"></div>
<div class="pie-container" ref="pieRef"></div>
</div>
@@ -10,163 +10,198 @@
<script setup>
import * as echarts from 'echarts';
+import dayjs from 'dayjs';
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
-import { jobNumBar, industryJobNumPieChart } from '@/api/home/index.js'
+import { jobNumBar, eventNumPie } from '@/api/home/index.js'
+// 日期
+const currenDate = dayjs().format('YYYY-MM-DD');
+const newTime = ref([currenDate, currenDate]);
+// 统计图
const chartRef = ref(null);
const pieRef = ref(null);
-onMounted(() => {
- const chart = echarts.init(chartRef.value);
- const option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top: '15%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- legend: {
- data: ['计划任务', '实际任务'],
- textStyle: {
- color: '#fff'
- }
- },
- xAxis: {
- type: 'category',
- data: ['1月', '2月', '3月', '4月', '5月', '6月'],
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- axisLabel: {
- color: '#fff'
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.1)'
- }
- },
- axisLabel: {
- color: '#fff'
- }
- },
- series: [
- {
- name: '计划任务',
- type: 'bar',
- barWidth: '20%',
- data: [10, 15, 20, 25, 30, 35],
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#1EE7E7' },
- { offset: 1, color: 'rgba(30, 231, 231, 0.1)' }
- ])
- }
- },
- {
- name: '实际任务',
- type: 'bar',
- barWidth: '20%',
- data: [15, 20, 25, 30, 35, 40],
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#0070FF' },
- { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }
- ])
- }
- }
- ]
- };
-
- chart.setOption(option);
- const pieChart = echarts.init(pieRef.value);
- const pieOption = {
- tooltip: {
- trigger: 'item',
- formatter: '{b}: {c} ({d}%)'
+
+const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ legend: {
+ data: ['任务', '事件'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ // data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
},
- legend: {
- orient: 'vertical',
- right: '5%',
- top: 'middle',
- textStyle: {
- color: '#fff',
- fontSize: 12
- },
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 10,
- formatter: function(name) {
- let data = pieOption.series[0].data;
- let total = 0;
- let tarValue = 0;
- for (let i = 0; i < data.length; i++) {
- total += data[i].value;
- if (data[i].name === name) {
- tarValue = data[i].value;
- }
+ axisLabel: {
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255, 255, 255, 0.1)'
+ }
+ },
+ axisLabel: {
+ color: '#fff'
+ }
+ },
+ series: [
+ {
+ name: '任务',
+ type: 'bar',
+ barWidth: '20%',
+ // data: [10, 15, 20, 25, 30, 35],
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#1EE7E7' },
+ { offset: 1, color: 'rgba(30, 231, 231, 0.1)' }
+ ])
+ }
+ },
+ {
+ name: '事件',
+ type: 'bar',
+ barWidth: '20%',
+ // data: [15, 20, 25, 30, 35, 40],
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#0070FF' },
+ { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }
+ ])
+ }
+ }
+ ]
+};
+
+// chart.setOption(option);
+
+const pieOption = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ right: '5%',
+ top: 'middle',
+ textStyle: {
+ color: '#fff',
+ fontSize: 12
+ },
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 10,
+ formatter: function(name) {
+ let data = pieOption.series[0].data;
+ let total = 0;
+ let tarValue = 0;
+ for (let i = 0; i < data.length; i++) {
+ total += data[i].value;
+ if (data[i].name === name) {
+ tarValue = data[i].value;
}
- let percentage = ((tarValue / total) * 100).toFixed(1);
- return `${name} ${percentage}%`;
}
- },
- series: [
- {
- name: '任务状态',
- type: 'pie',
- radius: ['10%', '90%'],
- center: ['35%', '50%'], // 将图表向左偏移
- roseType: 'radius',
- itemStyle: {
- borderRadius: 4
- },
- label: {
- show: true,
- position: 'inside',
- formatter: '{c}%',
- fontSize: 12,
- color: '#fff'
- },
- data: [
- { value: 30, name: '待审核', itemStyle: { color: '#1860EC' } },
- { value: 25, name: '待处理', itemStyle: { color: '#47D107' } },
- { value: 20, name: '已完成', itemStyle: { color: '#F29509' } },
- { value: 15, name: '待分拨', itemStyle: { color: '#E9C81A' } },
- { value: 18, name: '处理中', itemStyle: { color: '#0FC1E8' } },
- { value: 18, name: '已完结', itemStyle: { color: '#FE577F' } }
- ]
- }
- ]
+ let percentage = ((tarValue / total) * 100).toFixed(1);
+ return `${name} ${percentage}%`;
+ }
+ },
+ series: [
+ {
+ name: '任务状态',
+ type: 'pie',
+ radius: ['10%', '90%'],
+ center: ['35%', '50%'], // 将图表向左偏移
+ roseType: 'radius',
+ itemStyle: {
+ borderRadius: 4
+ },
+ label: {
+ show: true,
+ position: 'inside',
+ formatter: '{c}%',
+ fontSize: 12,
+ color: '#fff'
+ },
+ data: [
+ { value: 30, name: '待审核', itemStyle: { color: '#1860EC' } },
+ { value: 25, name: '待处理', itemStyle: { color: '#47D107' } },
+ { value: 20, name: '已完成', itemStyle: { color: '#F29509' } },
+ { value: 15, name: '待分拨', itemStyle: { color: '#E9C81A' } },
+ { value: 18, name: '处理中', itemStyle: { color: '#0FC1E8' } },
+ { value: 18, name: '已完结', itemStyle: { color: '#FE577F' } }
+ ]
+ }
+ ]
+};
+let chart = null;
+let pieChart = null;
+
+// TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
+const getData = (value,date_enum) => {
+ const params = {
+ device_sn: '',
+ date_enum,
+ // start_date: newTime.value[0],
+ // end_date: newTime.value[1]
};
-
- pieChart.setOption(pieOption);
-
+ // 获取柱状图
+ jobNumBar(params).then(res => {
+ if (res.data.code !== 0) return;
+ option.xAxis.data = res.data?.data.map(item => item.name);
+ option.series[0].data = res.data?.data.map(item => item.data[0].value);
+ option.series[1].data = res.data?.data.map(item => item.data[1].value);
+ chart.setOption(option);
+ })
+ // 获取饼状图
+ eventNumPie(params).then(res => {
+ if (res.data.code!== 0) return;
+ // 更新饼图数据
+ const updatedPieData = pieOption.series[0].data.map(item => {
+ const matchedData = res.data?.data.find(dataItem => dataItem.name === item.name);
+ return {
+ ...item,
+ value: matchedData ? matchedData.value : item.value
+ };
+ });
+ pieOption.series[0].data = updatedPieData;
+ pieChart.setOption(pieOption);
+ })
+};
+onMounted(() => {
+ chart= echarts.init(chartRef.value);
+ pieChart = echarts.init(pieRef.value);
window.addEventListener('resize', () => {
chart.resize();
pieChart.resize();
});
-});
-
-onMounted(() => {
- getMachineData();
+ getData(newTime.value, 'TODAY');
});
</script>
--
Gitblit v1.9.3