From 22980eac76e3beac8f5994b007c5329d5df4d1cf Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 14 Jul 2025 16:41:56 +0800
Subject: [PATCH] feat:任务成果
---
src/views/wel/components/taskOutcome.vue | 137 ++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 133 insertions(+), 4 deletions(-)
diff --git a/src/views/wel/components/taskOutcome.vue b/src/views/wel/components/taskOutcome.vue
index 07809b7..422bfb3 100644
--- a/src/views/wel/components/taskOutcome.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3