feat:事件弹窗显示调整

shuishen

2025-04-16 a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a

 src/views/TaskManage/TaskTop/TaskEvent.vue

@@ -10,13 +10,20 @@
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: {
@@ -98,39 +105,28 @@
};

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

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
    chart = null;
// 添加监听
watch(() => store.state.task.taskSearchParams, (newVal) => {
  console.log(newVal, '1111');
  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>
@@ -140,17 +136,18 @@
  height: 100%;
  margin-left: 40px;
  .title {
    margin-top: 10px; 
    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: 200px;
  }
}
</style>
</style>