Merge remote-tracking branch 'origin/master'

罗广辉

2025-04-18 75cdd3cdcec1fc22bddebd6352e5e87e0a8d5d33

 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>