forked from drone/command-center-dashboard

chenyao
2025-04-12 d643050ffd11f45b4512865c09f4da6754ea90d2
src/views/TaskManage/TaskTop/TaskTime.vue
@@ -1,13 +1,12 @@
<!-- 任务事件统计 -->
<!-- 任务数量统计 -->
<template>
  <!-- <common-title title="任务时间统计"></common-title> -->
  <div class="task-time">
    <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 { jobNumBar } from '@/api/home/task';
import dayjs from 'dayjs';
@@ -24,13 +23,21 @@
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: '{b}: {c} 件'
  },
  legend: {
    top: '2%',
    textStyle: {
      color: '#6B90B5',
      fontSize: 12,
    }
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: {
@@ -48,6 +55,12 @@
  },
  yAxis: {
    type: 'value',
    name: '单位:件',
    nameTextStyle: {
      color: '#E6F7FF',
      fontSize: 12,
      padding: [0, 0, 0, 0]  // 调整单位文字位置
    },
    axisLine: {
      lineStyle: {
        color: '#fff'
@@ -64,12 +77,13 @@
  },
  series: [
    {
      name: '任务数量',
      type: 'bar',
      barWidth: '40%',
      barWidth: '6px',
      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: '#0EECE4' },
          { offset: 1, color: '#058FE7' }
        ])
      }
    }
@@ -111,21 +125,21 @@
<style lang="scss" scoped>
.task-time {
  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: 502px;
  height: 100%;
  margin-left: 14px;
  .title {
    margin-top: 10px;
    width: 502px;
    height: 28.6px;
    background: url('@/assets/images/task/task-num-total.png') no-repeat center / 100% 100%;
    color: #CFEAFF;
    padding-left: 44px;
    line-height: 8px;
  }
  .chart {
    width: 100%;
    height: 100%;
    height: 200px;
  }
}
</style>