From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示

---
 src/views/TaskManage/TaskTop/TaskTotal.vue |  114 +++++++++++++++++++++++++++++----------------------------
 1 files changed, 58 insertions(+), 56 deletions(-)

diff --git a/src/views/TaskManage/TaskTop/TaskTotal.vue b/src/views/TaskManage/TaskTop/TaskTotal.vue
index 5a5178c..ad0c3c5 100644
--- a/src/views/TaskManage/TaskTop/TaskTotal.vue
+++ b/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;
   });
 };
 // 获取其他任务统计
@@ -40,7 +43,7 @@
     list.value[2].value = res.data.data.running_num;
     list.value[3].value = res.data.data.pending_executions;
     list.value[4].value = res.data.data.executed;
-    list.value[5].value = res.data.data.failed_executions;
+    // list.value[5].value = res.data.data.failed_executions;
   });
 };
 
@@ -53,49 +56,48 @@
 <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 {
+      width: 100px;
+      position: absolute;
+      font-size: 32px;
+      top: 90px;
+      left: 24px;
+    }
+  }
+  .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;
+      }
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.3