fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/views/TaskManage/TaskTop/TaskEvent.vue

@@ -1,60 +1,67 @@
<!-- 任务事件统计 -->
<!-- 任务事件数量比统计 -->
<template>
  <!-- <common-title title="任务事件统计"></common-title> -->
  <div class="task-event">
    <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 { jobEventBar } from '@/api/home/task';
import dayjs from 'dayjs';
import useEchartsResize from '@/hooks/useEchartsResize';
import { useStore } from 'vuex';

const store = useStore();

// const setTaskSearchParams = computed(() => store.state.task.setTaskSearchParams);

// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
// 图表
const chartRef = ref(null);
let chart = null;
let { chart } = useEchartsResize(chartRef)


const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
   },
  legend: {
    data: ['任务', '事件'],
    top: '2%',
    textStyle: {
      color: '#fff'
      color: '#6B90B5',
      fontSize: 12,
    },
    bottom: '5%'
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '15%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    },
    axisLabel: {
      color: '#fff',
      interval: 0,
      rotate: 30
    }
  },
      type: 'category',
      // data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
         lineStyle: {
            color: '#fff',
         },
      },
      axisLabel: {
         color: '#fff',
      },
   },
  yAxis: {
    type: 'value',
    name: '单位：件',
    axisLine: {
      lineStyle: {
        color: '#fff'
@@ -72,12 +79,12 @@
  series: [
    {
      name: '任务',
      type: 'bar',
      barWidth: '20%',
         type: 'bar',
         barWidth: '20%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1EE7E7' },
          { offset: 1, color: 'rgba(30, 231, 231, 0.1)' }
          { offset: 0, color: '#1EE7C5' },
          { offset: 1, color: '#84EDFF' }
        ])
      }
    },
@@ -87,8 +94,8 @@
      barWidth: '20%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#0070FF' },
          { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }
          { offset: 0, color: '#69BCFF' },
          { offset: 1, color: '#183FFF' }
        ])
      }
    }
@@ -96,65 +103,48 @@
};

// 获取行业统计数据
const getJobEventBar = (value,date_enum) => {
  jobEventBar({date_enum}).then(res => {
const getJobEventBar = (value) => {
  jobEventBar(value).then(res => {
    if (res.data.code !== 0) return;
    option.xAxis.data = res.data.data.map(item => item.name);
    option.series[0].data = res.data?.data.map(item => item.data[0].value);
    option.series[1].data = res.data?.data.map(item => item.data[1].value);
    chart.setOption(option);
    chart.value.setOption(option);
  });
};

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

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
// 添加监听
watch(() => store.state.task.taskSearchParams, (newVal) => {
  if (newVal) {
    getJobEventBar(newVal);
  }
  window.removeEventListener('resize', handleResize);
});
}, { deep: true });

onMounted(() => {
  chart = echarts.init(chartRef.value);
  getJobEventBar(newTime.value, 'CURRENT_YEAR');
  
  window.addEventListener('resize', () => {
    if (chart && !chart.isDisposed()) {
      chart.resize();
    }
  });
  getJobEventBar({date_enum: 'TODAY'});
});

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

<style lang="scss" scoped>
.task-event {
  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: 660px;
  height: 100%;
  margin-left: 40px;
  .title {
    margin-top: 10px;
    width: 660px;
    height: 28.6px;
    background: url('@/assets/images/task/task-event-total.png') no-repeat center / 100% 100%;
    color: #CFEAFF;
    padding-left: 44px;
    line-height: 8px;
    font-size: 14px;
  }
  .chart {
    width: 100%;
    height: 100%;
    height: 200px;
  }
}
</style>
</style>