From 1d79d97a675194ab5cd6b7273829edefc095a648 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 17 Jul 2025 13:35:08 +0800
Subject: [PATCH] feat:工作台优化
---
src/views/wel/components/taskOutcome.vue | 256 +++++++++++++++++++++++++-------------------------
1 files changed, 127 insertions(+), 129 deletions(-)
diff --git a/src/views/wel/components/taskOutcome.vue b/src/views/wel/components/taskOutcome.vue
index 422bfb3..f9d0d8c 100644
--- a/src/views/wel/components/taskOutcome.vue
+++ b/src/views/wel/components/taskOutcome.vue
@@ -1,5 +1,5 @@
<template>
- <div class="taskOutcome">
+ <div class="taskOutcome">
<div class="card-title">
<div class="cardtotal">
<p>任务成果</p>
@@ -19,15 +19,15 @@
</div>
</div>
</div>
- <div class="chart" ref="echartsRef"></div>
- </div>
+ <div class="chart" ref="echartsRef"></div>
+ </div>
</template>
-<script setup >
-import { getdisposeApi} from '@/api/home/index';
-import * as echarts from 'echarts'
-import dayjs from 'dayjs'
-import useEchartsResize from '@/hooks/useEchartsResize'
+<script setup>
+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 = ['WEEK', 'MONTH', 'YEAR'];
@@ -43,126 +43,124 @@
checked.value = item;
params.value.date_enum = item;
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: [],
-}
+ 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, // 隐藏轴线
+ lineStyle: {
+ color: '#cdd5e2',
+ },
+ },
+ 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: '#cdd5e2',
+ type: 'dashed', // 设置为虚线
+ },
+ },
+ },
+ ],
+ series: [],
+};
const eventTypeList = ref([
- { name: '待处理', value: 0, color: '#FF7411' },
- { name: '处理中', value: 0, color: '#FFFF61' },
- { name: '已完成', value: 0, color: '#06D957' },
-])
-const seriesObj = {}
+ { 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)
-
-
+ 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)
- })
- })
+ 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)
- })
-}
+ echartsOption.series = Object.values(seriesObj);
+
+ chart.value.setOption(echartsOption);
+ });
+};
onMounted(() => {
- getBarChartData(params.value)
-})
+ getBarChartData(params.value);
+});
</script>
<style scoped lang="scss">
@@ -172,8 +170,8 @@
background: #ffffff !important;
margin-top: 10px;
margin-left: 10px;
- height: 100%;
-.card-title {
+ height: pxToVh(400);
+ .card-title {
display: flex;
margin-bottom: 10px;
align-items: center;
@@ -215,8 +213,8 @@
}
}
}
-
- .time-card {
+
+.time-card {
text-align: center;
// height: 30px;
height: pxToVh(30);
@@ -256,9 +254,9 @@
}
}
.chart {
- width: 98%;
- height: 250px;
- padding-left: 15px;
- margin-top: 27px;
- }
-</style>
\ No newline at end of file
+ width: 98%;
+ height: 265px;
+ padding-left: 10px;
+ margin-top: 27px;
+}
+</style>
--
Gitblit v1.9.3