forked from drone/command-center-dashboard

罗广辉
2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7
src/views/TaskManage/TaskTop/TaskEvent.vue
@@ -10,7 +10,12 @@
import * as echarts from 'echarts';
import { jobEventBar } from '@/api/home/task';
import dayjs from 'dayjs';
import useEchartsResize from '@/hooks/useEchartsResize'
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');
@@ -22,12 +27,11 @@
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: '{b}: {c} 件'
  },
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
   },
  legend: {
    data: ['任务', '事件'],
    top: '2%',
@@ -44,18 +48,17 @@
    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: '单位:件',
@@ -76,8 +79,8 @@
  series: [
    {
      name: '任务',
      type: 'bar',
      barWidth: '6px',
         type: 'bar',
         barWidth: '20%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1EE7C5' },
@@ -88,7 +91,7 @@
    {
      name: '事件',
      type: 'bar',
      barWidth: '6px',
      barWidth: '20%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#69BCFF' },
@@ -100,8 +103,8 @@
};
// 获取行业统计数据
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);
@@ -110,9 +113,15 @@
  });
};
// 添加监听
watch(() => store.state.task.taskSearchParams, (newVal) => {
  if (newVal) {
    getJobEventBar(newVal);
  }
}, { deep: true });
onMounted(() => {
  getJobEventBar(newTime.value, 'CURRENT_YEAR');
  getJobEventBar({date_enum: 'TODAY'});
});
</script>