feat: 修改任务管理功能

chenyao

2025-04-12 d643050ffd11f45b4512865c09f4da6754ea90d2

 src/views/TaskManage/TaskTop/TaskIndustry.vue

@@ -1,13 +1,12 @@
<!-- 业务统计 -->
<!-- 任务算法统计 -->
 <template>
  <!-- <common-title title="行业统计" :style="{ marginLeft: pxToRem(14) }"></common-title> -->
  <div class="task-industry">
    <div class="title">任务算法统计</div>
    <div class="chart" ref="chartRef"></div>
  </div>
 </template>

<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import * as echarts from 'echarts';
import { industryJobNumPieChart } from '@/api/home/task';
const chartRef = ref(null);
@@ -21,52 +20,44 @@
  legend: {
    orient: 'horizontal',
    left: 'center',
    bottom: '5%',
    bottom: '2%',
    textStyle: {
      color: '#fff',
      color: '#6B90B5',
      fontSize: 12
    },
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 10,
    formatter: function(name) {
      let data = option.series[0].data;
      let total = 0;
      let tarValue = 0;
      for (let i = 0; i < data.length; i++) {
        total += data[i].value;
        if (data[i].name === name) {
          tarValue = data[i].value;
        }
      }
      let percentage = ((tarValue / total) * 100).toFixed(1);
      return `${name} ${percentage}%`;
    }
    itemWidth: 2,        // 减小图例标记的宽度
    itemHeight: 3,       // 减小图例标记的高度
    itemGap: 8,          // 减小图例项之间的间距
    formatter: '{name}'  // 简化图例文本
  },
  series: [
    {
      name: '行业统计',
      type: 'pie',
      radius: '60%',
      center: ['35%', '50%'],
      itemStyle: {
        borderRadius: 4,
        borderColor: 'rgba(255,255,255,0.2)',
        borderWidth: 1
      },
      roseType: 'radius',
      radius: ['20%', '70%'],
      center: ['50%', '45%'],
      data: [
        { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
        { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
        { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
        { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
        { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
      ],
      label: {
        show: true,
        position: 'inside',
        position: 'outside',
        formatter: '{c}',
        fontSize: 12,
        color: '#fff'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        scale: true,
        scaleSize: 10
        show: true,
        length: 5,
        length2: 8,
        lineStyle: {
          color: '#fff'
        }
      }
    }
  ]
@@ -76,23 +67,33 @@
const getIndustryJobNumPieChart = () => {
  industryJobNumPieChart().then(res => {
    if (res.data.code !== 0) return;
    const data = res.data.data.map(item => ({
      name: item.name,
      value: item.value,
      itemStyle: {
        color: getRandomColor()
    option.series[0].data.forEach(item => {
      const matchData = res.data.data.find(d => d.name === item.name);
      if (matchData) {
        item.value = matchData.value;
      }
    }));
    option.series[0].data = data;
    });
    chart.setOption(option);
  });
};

// 生成随机颜色
const getRandomColor = () => {
  const colors = ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'];
  return colors[Math.floor(Math.random() * colors.length)];
};

// 获取行业统计数据
// const getIndustryJobNumPieChart = () => {
//   industryJobNumPieChart().then(res => {
//     if (res.data.code !== 0) return;
//     const data = res.data.data.map(item => ({
//       name: item.name,
//       value: item.value,
//       itemStyle: {
//         color: getRandomColor()
//       }
//     }));
//     option.series[0].data = data;
//     chart.setOption(option);
//   });
// };


onMounted(() => {
  chart = echarts.init(chartRef.value);
@@ -112,21 +113,20 @@
<style lang="scss" scoped>
.task-industry {
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  // margin-left: 29px;
  // padding: 16px 16px;
  width: 340px;
  height: 200px;
  background: linear-gradient(
    270deg,
    rgba(31, 62, 122, 0) 0%,
    rgba(31, 62, 122, 0.35) 21%,
    #1f3e7a 100%
  );
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  width: 244px;
  height: 100%;
  .title {
    margin-top: 10px; 
    width: 244px;
    height: 26px;
    background: url('@/assets/images/task/title.png') no-repeat center / 100% 100%;
    color: #CFEAFF;
    padding-left: 38px;
    line-height: 8px;
  }
  .chart {
    width: 100%;
    height: 100%;
    height: 200px;
  }
}
</style>