From 34f2299d686d987cdebb2c77033a016d5e4b1beb Mon Sep 17 00:00:00 2001
From: mengfanliang <mengfanliang@zcloudchina.com>
Date: Thu, 15 Aug 2024 10:15:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=BA=94=E6=80=A5?=
 =?UTF-8?q?=E6=95=91=E6=8F=B4=E6=8C=87=E6=8C=A5=E5=86=85=E5=BC=B9=E6=A1=86?=
 =?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/App.vue                                   |  2 +-
 .../emergency_map/components/baseTable.vue    | 31 ++++++++++++---
 .../emergency_map/components/dialog.vue       | 38 ++++++-------------
 .../emergency_map/components/mapAssembly.vue  |  4 +-
 .../emergency_map/components/sysChat.vue      | 29 +++++++++++++-
 .../emergency_map/dialog/sendMessage.vue      |  3 +-
 6 files changed, 70 insertions(+), 37 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4178ff7..9648a09 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@ export default {
   font-size: 14px !important;
 }
 .vue-treeselect__single-value{
-  color: #606266 !important;
+  color: #cdcdcd !important;
   font-size: 14px !important;
 }
 .vue-treeselect__label{
diff --git a/src/views/emergen_cyrescue/emergency_map/components/baseTable.vue b/src/views/emergen_cyrescue/emergency_map/components/baseTable.vue
index 055260a..1604797 100644
--- a/src/views/emergen_cyrescue/emergency_map/components/baseTable.vue
+++ b/src/views/emergen_cyrescue/emergency_map/components/baseTable.vue
@@ -154,7 +154,7 @@ export default {
     .infomation_table_thead {
       height: 32px;
       color: #ffffff;
-      background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #0c305b, rgba(255, 0, 0, 0));
+      background: linear-gradient(90deg, rgba(245, 175, 25, 0),rgba(9, 42, 84, 0.68),rgb(12, 48, 91),rgb(12, 48, 91),rgba(9, 42, 84, 0.88),rgba(12, 48, 91, 0.63),rgba(9, 42, 84, 0));
 
       .infomation_table_thead_tr {
         text-align: center;
@@ -174,13 +174,12 @@ export default {
       height: 32px;
       width: 100%;
       color: #ffffff;
-      background: linear-gradient(90deg, rgba(44, 62, 80, 0) 20%, rgba(3, 39, 78, 0.75) 50%, rgba(3, 39, 78, 0) 80%);
+      background: linear-gradient(90deg, rgba(3, 36, 75, 0),rgba(3, 36, 75, 0.63),rgba(3, 36, 75, 0.92),rgba(3, 36, 75, 0.92),rgba(3, 36, 75, 0.68),rgba(3, 36, 75, 0));
 
       .infomation_table_tbody_tr {
+        position: relative;
         text-align: center;
         height: 34px;
-        border-bottom: 1px solid rgba(3, 39, 78, 1);
-
         &>td:nth-child(1) {
           text-align: start;
           transform: translateX(21px);
@@ -189,6 +188,16 @@ export default {
         &>td:nth-child(3) {
           transform: translateX(8px);
         }
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          height: 1px;
+          background: linear-gradient(90deg, rgb(3 36 75 / 0%), rgb(14 48 89 / 63%), rgb(0 57 125 / 92%), rgb(0 49 107), rgb(0 40 87), rgba(3, 36, 75, 0));
+          z-index: 1;
+        }
       }
     }
   }
@@ -232,6 +241,7 @@ export default {
     }
 
     .scroll-box {
+      width: 100%;
       height: 145px;
       overflow-x: hidden;
       overflow-y: auto;
@@ -245,8 +255,19 @@ export default {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        position: relative;
         height: 43px;
-        border-bottom: 1px solid #0c2d53;
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          height: 1px;
+          background: linear-gradient(90deg, rgb(3 36 75 / 0%), rgb(14 48 89 / 63%), rgb(0 57 125 / 92%), rgb(0 49 107), rgb(0 40 87), rgba(3, 36, 75, 0));
+          z-index: 1;
+        }
       }
     }
   }
diff --git a/src/views/emergen_cyrescue/emergency_map/components/dialog.vue b/src/views/emergen_cyrescue/emergency_map/components/dialog.vue
index 49cde76..2dfca06 100644
--- a/src/views/emergen_cyrescue/emergency_map/components/dialog.vue
+++ b/src/views/emergen_cyrescue/emergency_map/components/dialog.vue
@@ -80,9 +80,14 @@ export default {
 <style lang="scss">
 .bi_enterprise_dialog {
   border-radius: 8px !important;
-  background-color: #000d27bd !important;
+  background-color: #000d27f5 !important;
   border: 2px solid #034383;
 
+  .vue-treeselect__control {
+    background: none !important;
+    border: 1px solid #ffffff60 !important;
+  }
+
   .el-dialog__header {
     border-bottom: 1px solid #012b81 !important;
   }
@@ -147,7 +152,7 @@ export default {
   }
 
   .el-input__inner {
-    background: #202e89;
+    background: none;
     color: #FFFFFF;
     border: 1px solid #ffffff60 !important;
   }
@@ -216,6 +221,10 @@ export default {
     color: #FFFFFF;
   }
 
+  .table-ui td {
+    border: 1px solid #043e99 !important;
+  }
+
   .el-table__body tr.current-row>td.el-table__cell {
     background: #1c2c96 !important;
   }
@@ -247,22 +256,10 @@ export default {
     color: #fff !important;
   }
 
-  .bbg {
-    background: #202e89 !important;
-  }
-
-  .el-dialog__title {
-    font-size: 22px !important;
-  }
-
   .el-table--small {
     font-size: 20px !important;
   }
 
-  .el-dialog__title {
-    font-size: 26px !important;
-  }
-
   .el-button--mini {
     font-size: 24px !important;
   }
@@ -271,14 +268,6 @@ export default {
     font-size: 24px !important;
   }
 
-  .table-ui td {
-    font-size: 24px !important;
-  }
-
-  .el-button--small {
-    font-size: 24px !important;
-  }
-
   .el-card__header {
     color: #fff !important;
     font-size: 24px !important;
@@ -306,11 +295,6 @@ export default {
     width: 130px;
     margin: 0 5px;
   }
-
-  .el-input--small {
-    font-size: 24px;
-  }
-
   .el-table .cell {
     line-height: 36px !important;
   }
diff --git a/src/views/emergen_cyrescue/emergency_map/components/mapAssembly.vue b/src/views/emergen_cyrescue/emergency_map/components/mapAssembly.vue
index 554cd47..22f5ead 100644
--- a/src/views/emergen_cyrescue/emergency_map/components/mapAssembly.vue
+++ b/src/views/emergen_cyrescue/emergency_map/components/mapAssembly.vue
@@ -13,7 +13,7 @@
           <base-table :info="info" use-type="addressBook" @goInfo="goInfo"/>
         </div>
         <!-- 右侧面板 -->
-        <div class="right">
+        <div id="right_height" class="right">
           <sysChat :chat-data="chatData" @orderMessage="handlerOrderMessage" @reFlush="initInfo()" @endRescue="endRescue()"/>
         </div>
       </div>
@@ -687,7 +687,7 @@ export default {
         z-index: 99;
         width: 380px;
         height: 100%;
-        background-color: #000d27bd;
+        background-color: #00133b;
         border-radius: 6px;
         border: 2px solid #034383;
       }
diff --git a/src/views/emergen_cyrescue/emergency_map/components/sysChat.vue b/src/views/emergen_cyrescue/emergency_map/components/sysChat.vue
index d7f64d7..ff2839e 100644
--- a/src/views/emergen_cyrescue/emergency_map/components/sysChat.vue
+++ b/src/views/emergen_cyrescue/emergency_map/components/sysChat.vue
@@ -33,7 +33,9 @@ export default {
     return {}
   },
   mounted() {
-    console.log(this.chatData, 'this.chatData')
+    this.$nextTick(() => {
+      this.smoothScrollToBottom()
+    })
   },
   methods: {
     sendOrderBtn() {
@@ -64,6 +66,31 @@ export default {
         }).catch((error) => {
           console.log(error)
         })
+    },
+    smoothScrollToBottom() {
+      const container = document.querySelector('.sys_chat_container')
+      const scrollHeight = container.scrollHeight
+      const start = container.scrollTop
+      const distance = (scrollHeight + 400) - start
+      const duration = 3000
+      let startTime
+
+      function animation(currentTime) {
+        if (!startTime) startTime = currentTime
+        const timeElapsed = currentTime - startTime
+        const progress = Math.min(timeElapsed / duration, 1)
+        container.scrollTop = start + distance * easeInOutQuad(progress)
+
+        if (progress < 1) {
+          requestAnimationFrame(animation)
+        }
+      }
+
+      function easeInOutQuad(t) {
+        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+      }
+
+      requestAnimationFrame(animation)
     }
   }
 }
diff --git a/src/views/emergen_cyrescue/emergency_map/dialog/sendMessage.vue b/src/views/emergen_cyrescue/emergency_map/dialog/sendMessage.vue
index 36ffc51..cfd4a90 100644
--- a/src/views/emergen_cyrescue/emergency_map/dialog/sendMessage.vue
+++ b/src/views/emergen_cyrescue/emergency_map/dialog/sendMessage.vue
@@ -11,7 +11,7 @@
               placeholder="请选择机构"
               no-options-text="暂无数据"
               no-children-text="暂无数据"
-              style="width: 400px"
+              style="width: 400px; background: none;"
               @select="handleSelect"
             />
           </el-form-item>
@@ -188,4 +188,5 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+
 </style>