forked from drone/command-center-dashboard

罗广辉
2025-03-31 1f87fb419f4ad6521e230d5404165a3cc0dbdba6
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -9,7 +9,7 @@
  <div class="inspection-rask-details">
    <div class="inspection-num">
      <div class="total">
        <div class="value">88</div>
        <div class="value">{{total}}</div>
        <div class="name">总任务数</div>
      </div>
      <div class="status">
@@ -29,6 +29,7 @@
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { getJobStatistics, getTotalJobNum } from '@/api/home';
const list = ref([
  { name: '计划执行', value: 89, color: '#FFFFFF' },
@@ -37,118 +38,122 @@
  { name: '已执行', value: 10, color: '#8EFFAC' },
  { name: '执行失败', value: 10, color: '#FF8E8E' },
]);
const option = {
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: '#0070FF',
    borderWidth: 1,
    textStyle: {
      color: '#fff',
    },
    formatter: '{b}日: {c}次',
  },
  xAxis: {
    type: 'category',
    data: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '26',
      '27',
      '28',
      '29',
      '30',
    ],
    axisLine: {
      show: false, // 隐藏轴线
    },
    axisTick: {
      show: true,
      length: 2,
      lineStyle: {
        color: '#ffffff',
      },
    },
    axisLabel: {
      color: '#ffffff',
      margin: 8,
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#ffffff',
      },
    },
    axisLabel: {
      color: '#ffffff',
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      data: [
        10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14,
        18, 21, 15, 17, 20, 16, 18,
      ],
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1EE7E7' },
          { offset: 1, color: 'rgba(0, 112, 255, 0.1)' },
        ]),
      },
    },
  ],
};
const detailsFun = () => {
  console.log('details');
};
const chartRef = ref(null);
const total = ref(0);
onMounted(() => {
  getTotalJobNum().then(res => {
    total.value = res.data?.data || 0
  })
  getJobStatistics().then(res => {
  })
  const chart = echarts.init(chartRef.value);
  const option = {
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: '#0070FF',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
      },
      formatter: '{b}日: {c}次',
    },
    xAxis: {
      type: 'category',
      data: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
      ],
      axisLine: {
        show: false, // 隐藏轴线
      },
      axisTick: {
        show: true,
        length: 2,
        lineStyle: {
          color: '#ffffff',
        },
      },
      axisLabel: {
        color: '#ffffff',
        margin: 8,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#ffffff',
        },
      },
      axisLabel: {
        color: '#ffffff',
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
        },
      },
    },
    series: [
      {
        data: [
          10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14,
          18, 21, 15, 17, 20, 16, 18,
        ],
        type: 'bar',
        barWidth: '60%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1EE7E7' },
            { offset: 1, color: 'rgba(0, 112, 255, 0.1)' },
          ]),
        },
      },
    ],
  };
  chart.setOption(option);
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize();
@@ -182,6 +187,7 @@
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      font-family: Source Han Sans CN, Source Han Sans CN;
      line-height: 19px;
      .value {