feat: 修改任务管理功能

chenyao

2025-04-12 d643050ffd11f45b4512865c09f4da6754ea90d2

 src/views/TaskManage/TaskTop/TaskTotal.vue

@@ -1,11 +1,15 @@
<!-- 任务统计 -->
<template>
  <!-- <common-title title="任务统计" :style="{ marginLeft: pxToRem(14) }"></common-title> -->
  <div class="task-total">
    <div class="card" v-for="item in list">
      <div>
        <div class="value">{{ item.value }}</div>
        <div class="name">{{item.name}}</div>
    <div class="total">
      <div class="txt">总任务数</div>
      <div class="num">{{ total }}</div>
      <img src="@/assets/images/task/total.png" alt="">
    </div>
    <div class="other-total">
      <div class="total" v-for="item in list">
        <div class="value" :style="{ color:item.color }">{{ item.value }}</div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
@@ -13,23 +17,22 @@

<script setup>
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import { totalJobNum, jobStatistics  } from "@/api/home/task";

const total = ref(0);
const list = ref([
  { name: '总任务数', value: '1888'},
  { name: '计划执行', value: '18'},
  { name: '执行中', value: '999'},
  { name: '待执行', value: '8888'},
  { name: '已执行', value: '666'},
  { name: '执行失败', value: '2222'},
  { name: '计划执行', value: '0', color: '#FFFFFF'},
  { name: '执行中', value: '0', color: '#FFA768'},
  { name: '待执行', value: '0', color: '#FFE17E'},
  { name: '已执行', value: '0', color: '#8EFFAC'},
  { name: '执行失败', value: '0', color: '#FF8E8E'},
]);

// 获取任务统计总数
const getTotalJobNum = () => {
  totalJobNum().then((res) => {
    if (res.data.code !== 0) returen;
    list.value[0].value = res.data.data;
    total.value = res.data.data;
  });
};
// 获取其他任务统计
@@ -53,48 +56,46 @@
<style lang="scss" scoped>
.task-total {
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  // margin-left: 29px;
  // padding: 16px 16px;
  width: 340px;
  height: 200px;
  left: 40px;
  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;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
  .card {
    /* position: absolute;
         top: 8px;
         right: 10px;
         width: 200px; */
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         justify-content: flex-start;
         line-height: 22px;
         padding: 0 10px 10px 0;
      color: #ffffff;
    .name {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  .total {
    position: relative;
    text-align: center;
    left: 18px;
    .txt {
      font-size: 16px;
      margin-bottom: 14px;
      margin-top: 40px;
    }

    .value {
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 26px;
    img { width: 160px; height: 110px;}
    .num {
      position: absolute;
      font-size: 32px;
      top: 94px;
      left: 56px;
    }
  }
  .other-total {
    width: 256px;
    height: 188px;
    background: url('@/assets/images/task/other-total.png') no-repeat center / 100% 100%;
    margin-top: 22px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    .total {
      position: static;
      width: 30%;
      text-align: center;
      left: 0;
      .name {
        font-size: 14px;
      }
      .value {
        font-size: 26px;
      }
    }
  }
}