feat:工作台优化

张含笑

2025-07-17 1d79d97a675194ab5cd6b7273829edefc095a648

 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>
  width: 98%;
  height: 265px;
  padding-left: 10px;
  margin-top: 27px;
}
</style>