From 75cdd3cdcec1fc22bddebd6352e5e87e0a8d5d33 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 18 Apr 2025 10:57:41 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue | 404 +++++++++++++++++++++++++++++----------------------------
1 files changed, 203 insertions(+), 201 deletions(-)
diff --git a/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue b/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
index 98c6ac5..2c24401 100644
--- a/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
+++ b/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
@@ -1,228 +1,230 @@
<!-- 任务事件概况 -->
<template>
- <common-title title="任务事件概况" :style="{ marginLeft: pxToRem(14) }"></common-title>
- <div class="inspection-rask-details">
- <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>
+ <common-title title="任务事件概况" :style="{ marginLeft: pxToRem(14) }"></common-title>
+ <div class="inspection-rask-details">
+ <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>
</template>
<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 * 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, eventNumPie } from '@/api/home'
import useEchartsResize from '@/hooks/useEchartsResize'
+import { useStore } from 'vuex'
+const store = useStore()
+// 单个机巢信息
+const singleUavHome = computed(() => store.state.home.singleUavHome)
// 日期
-const currenDate = dayjs().format('YYYY-MM-DD');
-const newTime = ref([currenDate, currenDate]);
+const currenDate = dayjs().format('YYYY-MM-DD')
+const newTime = ref([currenDate, currenDate])
// 统计图
-const chartRef = ref(null);
+const chartRef = ref(null)
let { chart } = useEchartsResize(chartRef)
-const pieRef = ref(null);
+const pieRef = ref(null)
let { chart: pieChart } = useEchartsResize(pieRef)
-
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)' }
- ])
- }
- }
- ]
-};
+ 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 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: 0, name: '待审核', itemStyle: { color: '#1860EC' } },
- { value: 0, name: '待处理', itemStyle: { color: '#47D107' } },
- { value: 0, name: '已完成', itemStyle: { color: '#F29509' } },
- // { value: 0, name: '待分拨', itemStyle: { color: '#E9C81A' } },
- { value: 0, name: '处理中', itemStyle: { color: '#0FC1E8' } },
- { value: 0, name: '已完结', itemStyle: { color: '#FE577F' } }
- ]
- }
- ]
-};
+ 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: 0, name: '待审核', itemStyle: { color: '#1860EC' } },
+ { value: 0, name: '待处理', itemStyle: { color: '#47D107' } },
+ { value: 0, name: '已完成', itemStyle: { color: '#F29509' } },
+ // { value: 0, name: '待分拨', itemStyle: { color: '#E9C81A' } },
+ { value: 0, name: '处理中', itemStyle: { color: '#0FC1E8' } },
+ { value: 0, name: '已完结', itemStyle: { color: '#FE577F' } },
+ ],
+ },
+ ],
+}
// 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]
- };
- // 获取柱状图
- 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.value.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.value.setOption(pieOption);
- })
-};
+const getData = (value, date_enum) => {
+ const params = {
+ device_sn: singleUavHome.value.device_sn,
+ date_enum,
+ // start_date: newTime.value[0],
+ // end_date: newTime.value[1]
+ }
+ // 获取柱状图
+ 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.value.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.value.setOption(pieOption)
+ })
+}
onMounted(() => {
- getData(newTime.value, 'TODAY');
-});
+ getData(newTime.value, 'TODAY')
+})
</script>
<style lang="scss" scoped>
.inspection-rask-details {
- margin-left: 29px;
- // padding: 16px 16px;
- width: 390px;
- height: 526px;
- background: linear-gradient(
- 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;
- .chart-container {
- width: 100%;
- height: 220px;
- margin-top: 20px;
- }
- .pie-container {
- width: 100%;
- height: 212px;
- margin-top: 10px;
- }
+ margin-left: 29px;
+ // padding: 16px 16px;
+ width: 390px;
+ height: 526px;
+ background: linear-gradient(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;
+ .chart-container {
+ width: 100%;
+ height: 220px;
+ margin-top: 20px;
+ }
+ .pie-container {
+ width: 100%;
+ height: 212px;
+ margin-top: 10px;
+ }
}
</style>
--
Gitblit v1.9.3