From b3fe207469b7a810b56d21badb82886b5a5fbca7 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Thu, 19 Sep 2024 00:26:05 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss |   4 +-
 src/views/home/index.vue     | 194 +++++++++++++++++++++--------------
 2 files changed, 118 insertions(+), 80 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index b91620e..727ad98 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -475,8 +475,8 @@ html, body, #app, .el-container, .el-aside, .el-main {
   height: 1.7em;
 }
 .home-time{
-  width: 1.5em;
-  height: 1.5em;
+  width: 1.4em;
+  height: 1.4em;
   margin-right: 5px;
 }
 .middle-icon {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 54edc64..143cbb4 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -43,11 +43,13 @@
                     <el-empty image-size="135" description="暂无已办数据~"/>
                   </div>
                   <div v-for="item in todoList" class="todo-border">
-                    <div class="status"
-                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
-                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+<!--                    <div class="status-style"-->
+<!--                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
+<!--                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
+<!--                    </div>-->
+                    <div class="status-style">
+                      {{item.targetState}}
                     </div>
-                    <div class="process-type">流程类型：{{ item.targetState }}</div>
                     <div class="black-text">发起人：{{ item.initiatorName }}</div>
                     <div class="black-text">当前节点：{{ item.taskName }}</div>
                     <div class="gray-time">
@@ -57,6 +59,7 @@
                           <span>提交时间：</span>
                         </div>
                         <div class="time"> {{ item.submitTime }}</div>
+                        <div class="time">时间要求 {{ item.totalTime }}天</div>
                       </div>
                       <div class="view">查看</div>
                     </div>
@@ -75,11 +78,13 @@
                   <el-empty image-size="135" description="暂无已办数据~"/>
                 </div>
                 <div v-for="item in doneList" class="todo-border">
-                  <div class="status"
-                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
-                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+<!--                  <div class="status-style"-->
+<!--                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
+<!--                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
+<!--                  </div>-->
+                  <div class="status-style">
+                    {{item.targetState}}
                   </div>
-                  <div class="process-type">流程类型：{{ item.targetState }}</div>
                   <div class="black-text">发起人：{{ item.initiatorName }}</div>
                   <div class="black-text">当前节点：{{ item.taskName }}</div>
                   <div class="gray-time">
@@ -197,8 +202,12 @@
             <el-tab-pane label="规章制度" name="first">
               <div class="notice-block rules-block">
                 <div v-for="(item,index) in rulesList" class="notice">
-                  <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+<!--                  <div>-->
+<!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
+<!--                  </div>-->
+                  <div :style="{'color': item.isRead ? '#1F63E6' : 'rgba(0,0,0,0.5)'}">
+                    <span>{{ item.title }}</span>
+                    <span class="dot" v-if="item.isRead"></span>
                   </div>
                   <div>2018-05-06</div>
                 </div>
@@ -210,8 +219,11 @@
                   <el-empty image-size="135" description="暂无帮助文档~"/>
                 </div>
                 <div v-for="(item,index) in helpDocList" class="notice">
+<!--                  <div>-->
+<!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
+<!--                  </div>-->
                   <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                    {{ item.title }}
                   </div>
                   <div>2018-05-06</div>
                 </div>
@@ -220,10 +232,11 @@
             <el-tab-pane label="常见问题" name="third">
               <div class="notice-block rules-block">
                 <div v-for="(item,index) in problemList" class="notice">
+<!--                  <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
                   <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                    {{ item.title }}
                   </div>
-                  <!--                  <span class="dot" v-if="item.isRead"></span>-->
+
                   <div>2018-05-06</div>
                 </div>
               </div>
@@ -306,6 +319,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 1,
@@ -313,6 +327,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 2,
@@ -320,6 +335,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 0,
@@ -327,6 +343,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 1,
@@ -334,6 +351,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 2,
@@ -341,6 +359,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
 ])
 const noticeList = ref([
@@ -391,7 +410,7 @@ const rulesList = ref([
   },
   {
     title: '系统升级通知，期间部分服务将暂停',
-    isRead: false
+    isRead: true
   },
   {
     title: '系统升级通知，期间部分服务将暂停',
@@ -626,22 +645,22 @@ const fundPieOption = ref({
     icon: 'circle',
     textStyle: {
       color: 'rgba(0,0,0,0.6)',
-      fontSize: '14px'
-    },
-    formatter: function (name) {
-      let data = fundPieOption.value.series[0].data
-      let total = 0
-      let tarValue
-      for (let i = 0; i < data.length; i++) {
-        total += data[i].value
-        if (data[i].name == name) {
-          tarValue = data[i].value
-        }
-      }
-      let v = tarValue
-      let p = ((tarValue / total) * 100).toFixed(2)
-      return `${name}     ${v}     ${p}%`
+      fontSize: '12px'
     },
+    // formatter: function (name) {
+    //   let data = fundPieOption.value.series[0].data
+    //   let total = 0
+    //   let tarValue
+    //   for (let i = 0; i < data.length; i++) {
+    //     total += data[i].value
+    //     if (data[i].name == name) {
+    //       tarValue = data[i].value
+    //     }
+    //   }
+    //   let v = tarValue
+    //   let p = ((tarValue / total) * 100).toFixed(2)
+    //   return `${name}     ${v}     ${p}%`
+    // },
   },
   graphic: {       //图形中间图片
     elements: [{
@@ -659,12 +678,16 @@ const fundPieOption = ref({
   series: [
     {
       type: 'pie',
-      radius: [75, 100],
+      radius: [65, 90],
       center: ['50%', '50%'],
       top: '10%',
       left:'8',
       label: {
-        show: false,
+        show: true,
+        formatter: '{b}\n{d}%'
+        // formatter: params => {
+          // console.log(params)
+        // },
       },
       itemStyle: {
         normal: {
@@ -690,8 +713,8 @@ const fundPieOption = ref({
         }
       },
       data: [
-        {value: 75, name: '专项资金',},
-        {value: 20, name: '非专项资金', selected: true},
+        {value: 75, name: '专项资金',label:{color:'#6201FF'}},
+        {value: 20, name: '非专项资金',label:{color:'#1AA4AD'}, selected: true},
       ],
     },
     {
@@ -701,7 +724,7 @@ const fundPieOption = ref({
       left:'8',
       clockWise: false,
       hoverAnimation: false,
-      radius: ['80%', '80%'],//边框大小
+      radius: ['70%', '70%'],//边框大小
       center: ['50%', '50%'],//边框位置
       tooltip: {
         show: false
@@ -733,7 +756,7 @@ const moneyPieOption = ref({
   series: [
     {
       type: 'pie',
-      radius: [0, 100],
+      radius: [0, 90],
       center: ['50%', '50%'],
       label: {
         normal: {
@@ -938,7 +961,7 @@ const handleView = (row) => {
   .total-money {
     height: 25px;
     font-weight: 400;
-    font-size: 16px;
+    font-size: 15px;
     color: #000000;
     line-height: 18px;
   }
@@ -950,13 +973,13 @@ const handleView = (row) => {
 
     > div:last-child {
       font-weight: 400;
-      font-size: 16px;
+      font-size: 15px;
       color: #000000;
       letter-spacing: 1px;
     }
 
     .company-name {
-      font-size: 14px;
+      font-size: 12px;
       color: rgba(0, 0, 0, 0.6);
       letter-spacing: 1px;
       margin-left: 10px;
@@ -1005,14 +1028,13 @@ const handleView = (row) => {
 
 :deep(.el-tabs__nav-wrap:after) {
   background-color: #D9D9D9 !important;
-  height: 1px !important;
+  height: 2px !important;
 }
 
 :deep(.el-tabs__active-bar) {
-  height: 1px !important;
-  //background-color: #1476E3 !important;
+  height: 2px !important;
+  background-color: #1476E3 !important;
 }
-
 :deep(.el-tabs__new-tab ) {
   width: auto !important;
   border: none !important;
@@ -1042,14 +1064,15 @@ const handleView = (row) => {
       flex: 1;
       font-size: 16px;
       width: 120px;
-      font-weight: 600;
+      //font-weight: 600;
       height: 51px;
       color: rgba(0, 0, 0, 0.5);
     }
 
     .el-tabs__item.is-active {
-      color: #1476E3;
+      color: #1F63E6;
     }
+    //#1476E3
   }
 }
 
@@ -1156,14 +1179,15 @@ const handleView = (row) => {
 
           .gray-time {
             display: flex;
+            flex-direction: column;
             align-items: flex-end;
             font-weight: 400;
             color: rgba(0, 0, 0, 0.5);
             letter-spacing: 1px;
-            font-size: 14px;
+            font-size: 12px;
 
             .view {
-              float: right;
+              //float: right;
               color: #1F63E6;
               white-space: nowrap;
               cursor: pointer;
@@ -1184,6 +1208,9 @@ const handleView = (row) => {
 
             .time {
               margin-left: 23px;
+              &:last-child{
+                white-space: nowrap;
+              }
             }
           }
 
@@ -1191,6 +1218,7 @@ const handleView = (row) => {
             white-space: nowrap;
             color: #000000;
             margin-bottom: 7px;
+            font-size: 12px;
           }
 
           .process-type {
@@ -1201,15 +1229,18 @@ const handleView = (row) => {
             letter-spacing: 1px;
           }
 
-          .status {
-            width: 52px;
+          .status-style {
+            padding: 0 8px;
+            display: inline-block;
             height: 23px;
             border-radius: 3px 3px 3px 3px;
-            font-size: 13px;
+            font-size: 12px;
             color: #FFFFFF;
             line-height: 23px;
             letter-spacing: 1px;
             text-align: center;
+            background-color: #2a99ff;
+            margin-bottom: 14px;
           }
         }
       }
@@ -1252,17 +1283,17 @@ const handleView = (row) => {
           flex-direction: column;
           justify-content: center;
           color: #fff;
-          font-size: 16px;
+          font-size: 13px;
 
           > span:first-child {
             white-space: nowrap;
-            font-size: 26px;
+            font-size: 36px;
             font-weight: bold;
             margin-bottom: 10px;
 
             > span {
               margin-left: 10px;
-              font-size: 16px;
+              font-size: 13px;
             }
           }
 
@@ -1291,37 +1322,44 @@ const handleView = (row) => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      height: 42px !important;
-      line-height: 42px !important;
+      height: 47px !important;
+      line-height: 47px !important;
       color: rgba(0, 0, 0, 0.5) !important;
 
-      .dot {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        border-radius: 25px;
-        background: #DD3B3B;
-        margin-left: -6px;
-        margin-bottom: 5px;
-        margin-right: 4px;
-      }
-
-      div:first-child {
-        width: 80% !important;
+      >div:first-child {
+        position: relative;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
 
-        > span:first-child {
-          margin-right: 10px;
+        &:hover {
           color: #1476E3;
-          font-weight: bold;
-          font-size: 16px;
-          margin-left: 0 !important;
+          background: #F6FBFE;
         }
+
+        > span:first-child {
+          //width: 80% !important;
+          margin-right: 4px;
+        }
+
+        .dot {
+          position: absolute;
+          right: 0;
+          top: 14px;
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          border-radius: 25px;
+          background: #DD3B3B;
+          //margin-left: -6px;
+          //margin-bottom: 5px;
+          //margin-right: 4px;
+        }
+
       }
 
       div:last-child {
+        margin-left: 20px;
         font-weight: 400;
         letter-spacing: 1px;
         color: rgba(0, 0, 0, 0.5)
@@ -1332,7 +1370,7 @@ const handleView = (row) => {
   .notice-block {
     height: 452px;
     overflow-y: auto;
-    margin-top: 10px;
+    //margin-top: 10px;
 
     &::-webkit-scrollbar {
       width: 6px;
@@ -1353,10 +1391,10 @@ const handleView = (row) => {
 
     .notice {
       min-width: 300px;
-      height: 65px;
-      line-height: 65px;
+      height: 75px;
+      line-height: 75px;
       padding: 0 15px;
-      font-size: 15px;
+      font-size: 12px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1394,7 +1432,7 @@ const handleView = (row) => {
       .fund-pie {
         width: 100%;
         height: 25px;
-        font-size: 14px;
+        font-size: 12px;
         color: rgba(0, 0, 0, 0.5);
         text-align: center;
         //margin-top: 15px;
@@ -1423,7 +1461,7 @@ const handleView = (row) => {
           > span {
             white-space: nowrap;
             color: #000000;
-            font-weight: 600;
+            //font-weight: 600;
           }
         }