feat:事件弹窗显示调整

shuishen

2025-04-16 a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a

 src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue

@@ -1,6 +1,6 @@
<!-- 巡检任务数据 -->
<!-- 任务事件概况 -->
<template>
    <common-title title="巡检任务详情" :style="{ marginLeft: pxToRem(14) }"></common-title>
    <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>
@@ -15,13 +15,16 @@
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { jobNumBar, eventNumPie } from '@/api/home'
import useEchartsResize from '@/hooks/useEchartsResize'

// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
// 统计图
const chartRef = ref(null);
let { chart } = useEchartsResize(chartRef)
const pieRef = ref(null);
let { chart: pieChart } = useEchartsResize(pieRef)


const option = {
@@ -150,18 +153,16 @@
                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' } }
                { 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' } }
            ]
        }
    ]
};
let chart = null;
let pieChart = null;

// TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
const getData = (value,date_enum) => {
@@ -177,7 +178,7 @@
        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);
        chart.value.setOption(option);
    })
    // 获取饼状图
    eventNumPie(params).then(res => {
@@ -191,16 +192,10 @@
            };
        });
        pieOption.series[0].data = updatedPieData;
        pieChart.setOption(pieOption);
        pieChart.value.setOption(pieOption);
    })
};
onMounted(() => {
    chart= echarts.init(chartRef.value);
    pieChart = echarts.init(pieRef.value);
    window.addEventListener('resize', () => {
        chart.resize();
        pieChart.resize();
    });
    getData(newTime.value, 'TODAY');
});
</script>