fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/views/TaskManage/TaskTop/TaskIndustry.vue

@@ -1,7 +1,7 @@
<!-- 任务算法统计 -->
 <template>
  <div class="task-industry">
    <div class="title">任务算法统计</div>
    <div class="title">机巢事件前五数量占比</div>
    <div class="chart" ref="chartRef"></div>
  </div>
 </template>
@@ -9,8 +9,12 @@
<script setup>
import * as echarts from 'echarts';
import { industryJobNumPieChart } from '@/api/home/task';
import useEchartsResize from '@/hooks/useEchartsResize';
import { useStore } from 'vuex';

const store = useStore();
const chartRef = ref(null);
let chart = null;
let { chart } = useEchartsResize(chartRef);

const option = {
  tooltip: {
@@ -37,13 +41,14 @@
      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' } }
      ],
      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: 'outside',
@@ -64,49 +69,29 @@
};

// 获取行业统计数据
const getIndustryJobNumPieChart = () => {
  industryJobNumPieChart().then(res => {
const getIndustryJobNumPieChart = (value) => {
  industryJobNumPieChart(value).then(res => {
    if (res.data.code !== 0) return;
    option.series[0].data.forEach(item => {
      const matchData = res.data.data.find(d => d.name === item.name);
      if (matchData) {
        item.value = matchData.value;
      }
    });
    chart.setOption(option);
    option.series[0].data = res.data.data;
    // forEach(item => {
    //   const matchData = res.data.data.find(d => d.name === item.name);
    //   if (matchData) {
    //     item.value = matchData.value;
    //   }
    // });
    chart.value.setOption(option);
  });
};


// 获取行业统计数据
// 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);
//   });
// };

// 添加监听
watch(() => store.state.task.taskSearchParams, (newVal) => {
  if (newVal) {
    getIndustryJobNumPieChart(newVal);
  }
}, { deep: true });

onMounted(() => {
  chart = echarts.init(chartRef.value);
  getIndustryJobNumPieChart();
  
  window.addEventListener('resize', () => {
    chart?.resize();
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', chart?.resize);
  chart?.dispose();
  getIndustryJobNumPieChart({date_enum: 'TODAY'});
});
</script>

@@ -116,17 +101,18 @@
  width: 244px;
  height: 100%;
  .title {
    margin-top: 10px; 
    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;
    font-size: 14px;
  }
  .chart {
    width: 100%;
    height: 200px;
  }
}
</style>
</style>