From bd453c00acbf230021ad52537b9c9cfc2e62704f Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Tue, 23 Aug 2022 11:13:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A6=85=E9=81=93=E5=B7=B2?=
 =?UTF-8?q?=E7=9F=A5bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TaskPlanList.vue               |  89 ++++++++------
 .../projectStatusBoard/index.vue              | 115 ++++++++++--------
 2 files changed, 114 insertions(+), 90 deletions(-)

diff --git a/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue b/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue
index 738675ff3..ea6f263f7 100644
--- a/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue
+++ b/jero-web/src/views/projectManagement/projectStatusBoard/components/TaskPlanList.vue
@@ -30,45 +30,48 @@
         <div class="box-top-content" style="position: relative">
           <!--        <div id="main"></div>-->
           <!--        <div class="axis-tip"></div>-->
-          <div class="box-top-content-left">
-            <div class="box-top-content-left-text" :title="item.projectName"
-                 v-for="(item,index) in timeData" :key="index">
-              {{item.projectName}}
-            </div>
+          <div class="box-top-content-right-top">
+            <div class="box-top-content-right-top-text" v-for="(item,index) in timeList" :key="index">{{item}}</div>
           </div>
-          <div class="box-top-content-right">
-            <div class="box-top-content-right-top">
-              <div class="box-top-content-right-top-text" v-for="(item,index) in timeList" :key="index">{{item}}</div>
+          <div style="overflow:visible;">
+            <div class="box-top-content-left">
+              <div class="box-top-content-left-text" :title="item.projectName"
+                   v-for="(item,index) in timeData" :key="index">
+                {{item.projectName}}
+              </div>
             </div>
-            <div class="box-top-content-right-bottom">
-              <div class="process-content" v-for="(item,index) in timeData" :key="index">
-                <div class="process-content-right-xian"></div>
-                <div class="process-content-content" :style="val.left"
-                     v-for="(val,indexOne) in item.data[0]" :key="indexOne">
+            <div class="box-top-content-right">
+              <div class="box-top-content-right-bottom">
+                <div class="process-content" v-for="(item,index) in timeData" :key="index">
+                  <div class="process-content-right-xian"></div>
+                  <div class="process-content-content" :style="val.left"
+                       v-for="(val,indexOne) in item.data[0]" :key="indexOne">
 
-                  <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{val.name}}</div>
-                  <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{val.name}}</div>
-                  <a-tooltip placement="topLeft">
-                    <template slot="title">
-                      <span>{{val.time.slice(0,11)}}</span>
-                    </template>
-                    <img v-if="val.status == 1" src="../../../../assets/done.svg" class="process-content-left" alt="">
-                    <img v-else-if="val.status == 2" src="../../../../assets/open.svg"
-                         class="process-content-left"
-                         alt="">
-                    <img v-else-if="val.status == 3" src="../../../../assets/inprogress.svg"
-                         class="process-content-left"
-                         alt="">
-                  </a-tooltip>
-                  <!--                  <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
+                    <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{val.name}}</div>
+                    <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{val.name}}
+                    </div>
+                    <a-tooltip placement="topLeft">
+                      <template slot="title">
+                        <span>{{val.time.slice(0,11)}}</span>
+                      </template>
+                      <img v-if="val.status == 1" src="../../../../assets/done.svg" class="process-content-left" alt="">
+                      <img v-else-if="val.status == 2" src="../../../../assets/open.svg"
+                           class="process-content-left"
+                           alt="">
+                      <img v-else-if="val.status == 3" src="../../../../assets/inprogress.svg"
+                           class="process-content-left"
+                           alt="">
+                    </a-tooltip>
+                    <!--                  <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
+                  </div>
+                </div>
+                <div class="box-top-content-right-xian"></div>
+                <div class="box-top-content-right-text">
+                  {{handlingTime}}
                 </div>
               </div>
-              <div class="box-top-content-right-xian"></div>
-              <div class="box-top-content-right-text">
-                {{handlingTime}}
-              </div>
-            </div>
 
+            </div>
           </div>
           <JLoading :loading="loadingMain">{{this.$t('dataLoading')}}</JLoading>
         </div>
@@ -299,8 +302,8 @@
           let num = Math.ceil(clientWidthOne / 31) * parseInt(this.handlingTime.slice(8, 10))
           timeList.forEach((res, index) => {
             if (res.slice(0, 7) == this.handlingTime.slice(0, 7)) {
-              contentRightText[0].style = 'left:' + ((clientWidthOne * index + num) - 24) + 'px;' + 'display:block'
-              contentRightXian[0].style = 'left:' + ((clientWidthOne * index + num) + 10) + 'px;' + 'display:block'
+              contentRightText[0].style = 'left:' + ((clientWidthOne * index + num) - 28) + 'px;' + 'display:block'
+              contentRightXian[0].style = 'left:' + ((clientWidthOne * index + num) + 6) + 'px;' + 'display:block'
             }
           })
 
@@ -384,7 +387,7 @@
     width: 100%;
     height: calc(100vh - 160px);
     margin-bottom: 20px;
-    padding: 25px 50px 10px 20px;
+    padding: 0 50px 10px 20px;
     box-sizing: border-box;
     overflow: auto;
   }
@@ -417,12 +420,13 @@
     width: 300px;
     margin-top: -4px;
     margin-right: 20px;
+    margin-bottom: 10px;
   }
 
   .box-top-content-left {
     width: 140px;
     float: left;
-    padding-top: 100px;
+    padding-top: 68px;
     margin-right: 20px;
   }
 
@@ -447,6 +451,12 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 100;
+    padding-top: 25px;
+    padding-left: 160px;
   }
 
   .box-top-content-right-top-text {
@@ -506,7 +516,8 @@
         left: 50%;
         transform: translate(-50%, -50%);
       }
-      .process-content-right-button{
+
+      .process-content-right-button {
         font-size: 12px;
         color: #040B29;
         width: 75px;
@@ -518,6 +529,7 @@
         left: 50%;
         transform: translate(-50%, -50%);
       }
+
       .process-content-right-button {
         width: 75px;
         font-size: 12px;
@@ -555,5 +567,6 @@
     font-weight: bold;
     font-size: 14px;
     width: 100px;
+    z-index: 101;
   }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
index 6332b145c..0492867a4 100644
--- a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
+++ b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
@@ -56,45 +56,47 @@
       <div class="box-top-content" style="position: relative">
         <!--        <div id="main"></div>-->
         <!--        <div class="axis-tip"></div>-->
-        <div class="box-top-content-left">
-          <div class="box-top-content-left-text" :title="item.projectName"
-               v-for="(item,index) in timeData" :key="index">
-            {{item.projectName}}
-          </div>
+        <div class="box-top-content-right-top">
+          <div class="box-top-content-right-top-text" v-for="(item,index) in timeList" :key="index">{{item}}</div>
         </div>
-        <div class="box-top-content-right">
-          <div class="box-top-content-right-top">
-            <div class="box-top-content-right-top-text" v-for="(item,index) in timeList" :key="index">{{item}}</div>
+        <div style="overflow:visible;">
+          <div class="box-top-content-left">
+            <div class="box-top-content-left-text" :title="item.projectName"
+                 v-for="(item,index) in timeData" :key="index">
+              {{item.projectName}}
+            </div>
           </div>
-          <div class="box-top-content-right-bottom">
-            <div class="process-content" v-for="(item,index) in timeData" :key="index">
-              <div class="process-content-right-xian"></div>
-              <div class="process-content-content" :style="val.left"
-                   v-for="(val,indexOne) in item.data[0]" :key="indexOne">
-                <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{val.name}}</div>
-                <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{val.name}}</div>
-                <a-tooltip placement="topLeft">
-                  <template slot="title">
-                    <span>{{val.time.slice(0,11)}}</span>
-                  </template>
-                  <img v-if="val.status == 1" src="../../../assets/done.svg" class="process-content-left"
-                       alt="">
-                  <img v-else-if="val.status == 2" src="../../../assets/open.svg"
-                       class="process-content-left"
-                       alt="">
-                  <img v-else-if="val.status == 3" src="../../../assets/inprogress.svg" class="process-content-left"
-                       alt="">
-                </a-tooltip>
+          <div class="box-top-content-right">
+            <div class="box-top-content-right-bottom">
+              <div class="process-content" v-for="(item,index) in timeData" :key="index">
+                <div class="process-content-right-xian"></div>
+                <div class="process-content-content" :style="val.left"
+                     v-for="(val,indexOne) in item.data[0]" :key="indexOne">
+                  <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{val.name}}</div>
+                  <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{val.name}}
+                  </div>
+                  <a-tooltip placement="topLeft">
+                    <template slot="title">
+                      <span>{{val.time.slice(0,11)}}</span>
+                    </template>
+                    <img v-if="val.status == 1" src="../../../assets/done.svg" class="process-content-left"
+                         alt="">
+                    <img v-else-if="val.status == 2" src="../../../assets/open.svg"
+                         class="process-content-left"
+                         alt="">
+                    <img v-else-if="val.status == 3" src="../../../assets/inprogress.svg" class="process-content-left"
+                         alt="">
+                  </a-tooltip>
 
-                <!--                <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
+                  <!--                <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
+                </div>
+              </div>
+              <div class="box-top-content-right-xian"></div>
+              <div class="box-top-content-right-text">
+                {{handlingTime}}
               </div>
             </div>
-            <div class="box-top-content-right-xian"></div>
-            <div class="box-top-content-right-text">
-              {{handlingTime}}
-            </div>
           </div>
-
         </div>
         <JLoading :loading="loadingMain">{{this.$t('dataLoading')}}</JLoading>
       </div>
@@ -308,8 +310,8 @@
       },
       getTimeline() {
         let query = {
-          startTime: this.startTime || this.getNewDate('before',6),
-          endTime: this.endTime || this.getNewDate('after',5),
+          startTime: this.startTime || this.getNewDate('before', 6),
+          endTime: this.endTime || this.getNewDate('after', 5),
           ...this.queryParam
         }
         this.loadingMain = true
@@ -341,8 +343,8 @@
       },
       getTimelineList(time) {
         let query = {
-          startTime: this.startTime || this.getNewDate('before',6),
-          endTime: this.endTime || this.getNewDate('after',5),
+          startTime: this.startTime || this.getNewDate('before', 6),
+          endTime: this.endTime || this.getNewDate('after', 5),
           ...this.queryParam
         }
         getAction(this.url.timelineList, query).then((res) => {
@@ -529,7 +531,7 @@
     width: 100%;
     height: 500px;
     margin-bottom: 20px;
-    padding: 20px 58px 20px 10px;
+    padding: 0 58px 20px 10px;
     box-sizing: border-box;
     overflow: auto;
   }
@@ -572,7 +574,7 @@
   .box-top-content-left {
     width: 140px;
     float: left;
-    padding-top: 100px;
+    padding-top: 57px;
     margin-right: 20px;
   }
 
@@ -597,6 +599,12 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 100;
+    padding-top: 20px;
+    padding-left: 160px;
   }
 
   .box-top-content-right-top-text {
@@ -620,7 +628,7 @@
 
   .box-top-content-right-bottom {
     position: relative;
-    padding-top: 60px;
+    padding-top: 50px;
   }
 
   .process-content {
@@ -657,18 +665,20 @@
         left: 50%;
         transform: translate(-50%, -50%);
       }
-     .process-content-right-button{
-       font-size: 12px;
-       color: #040B29;
-       width: 75px;
-       background: #fff;
-       display: inline-block;
-       overflow: hidden;
-       position: absolute;
-       top: 12px;
-       left: 50%;
-       transform: translate(-50%, -50%);
-     }
+
+      .process-content-right-button {
+        font-size: 12px;
+        color: #040B29;
+        width: 75px;
+        background: #fff;
+        display: inline-block;
+        overflow: hidden;
+        position: absolute;
+        top: 12px;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
       .process-content-right-button {
         width: 75px;
         font-size: 12px;
@@ -706,5 +716,6 @@
     font-weight: bold;
     font-size: 14px;
     width: 100px;
+    z-index: 101;
   }
 </style>
\ No newline at end of file