feat:任务成果

张含笑

2025-07-14 22980eac76e3beac8f5994b007c5329d5df4d1cf

feat:任务成果

 src/api/home/index.js

@@ -97,4 +97,13 @@
      areaCode
    },
  });
};
};

// 任务成果
export const getdisposeApi = data => {
    return request({
        url: `/drone-device-core/jobEvent/eventStatusLine`,
        method: 'post',
        data,
    })
}

 src/views/wel/components/taskOutcome.vue

@@ -19,20 +19,25 @@
        </div>
      </div>
    </div>
   <div class="chart" ref="echartsRef"></div>
 </div>
</template>

<script setup >
let checked = ref('CURRENT_YEAR');
import { getdisposeApi} from '@/api/home/index';
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import useEchartsResize from '@/hooks/useEchartsResize'
let checked = ref('YEAR');
let timeListStr = ['本周', '本月', '本年'];
let timeListEnum = ['CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
let timeListEnum = ['WEEK', 'MONTH', 'YEAR'];
const params = ref({
  date_enum: 'CURRENT_YEAR',
  date_enum: 'YEAR',
  device_sn: '',
  end_date: undefined,
  start_date: undefined,
});
const dateSelect = ref('CURRENT_YEAR');
const dateSelect = ref('YEAR');

let timeClick = (item, index) => {
  checked.value = item;
@@ -40,6 +45,124 @@
  dateSelect.value = item;

};
const echartsOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
	
    },
    legend: {
        itemWidth: 14,
        itemHeight: 8,
        data: ['待处理', '处理中', '已完成', '事件完成率'], // 确保包含所有系列名称
        top: '-1%',
        textStyle: {
            color: '#383838',
            fontSize: 12,
        },
    },
    grid: {
        // top: '5%',
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        axisLine: {
            show: true, // 隐藏轴线
        },
        axisLabel: {
            color: '#383838',
            // interval: 0, // 显示所有标签
        },
        data: [],
    },
    yAxis: [
        {
            type: 'value',
            name: '',
            nameTextStyle: {
                color: '#E6F7FF',
                fontSize: '1rem',
                padding: [-8, 0, 0, 0], // 调整单位文字位置，向左偏移
                verticalAlign: 'top',
                lineHeight: 12,
            },
            axisLabel: {
                interval: 0, // 显示所有标签
                color: '#383838',
                fontFamily: 'Source Han Sans CN, Source Han Sans CN',
                fontWeight: 400,
                fontSize: 10,
            },
            axisLine: {
                lineStyle: {
                    color: '#383838',
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#9A9A9A',
                    type: 'dashed', // 设置为虚线
                },
            },
        },
	
    ],
    series: [],
}

const eventTypeList = ref([
    { name: '待处理', value: 0, color: '#FF7411' },
    { name: '处理中', value: 0, color: '#FFFF61' },
    { name: '已完成', value: 0, color: '#06D957' },
])
const seriesObj = {}
eventTypeList.value.forEach(item => {
    seriesObj[item.name] = {
        type: 'bar',
        stack: 'Ad',
        barWidth: 8,
        emphasis: {
            focus: 'series',
        },
        name: item.name,
        itemStyle: { color: item.color },
        data: [],
    }
})
const echartsRef = ref(null)
let { chart } = useEchartsResize(echartsRef)


// 获取柱状图数据
const getBarChartData = value => {
    getdisposeApi(value).then(res => {
        const list = res?.data?.data || []
        echartsOption.xAxis.data = list.map(item => item.name)
        // 赋值前清空数据
        Object.keys(seriesObj).forEach(key => {
            seriesObj[key].data = []
        })
        list.forEach(item => {
            item.data.forEach((item1, index) => {
                if (!seriesObj?.[item1.name]) return
                seriesObj[item1.name].data.push(item1.value)
            })
        })

        echartsOption.series = Object.values(seriesObj)
	
        chart.value.setOption(echartsOption)
    })
}
onMounted(() => {
    getBarChartData(params.value)
})
</script>

<style scoped lang="scss">
@@ -132,4 +255,10 @@
    border: 1px solid #1c5cff;
  }
}
.chart {
        width: 98%;
        height: 250px;
        padding-left: 15px;
        margin-top: 27px;
    }
</style>