From 33e4edea0205a5765339773619fe10847ef5f05f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=93=B6=E4=B8=AD=E6=B2=99?= <464652163@qq.com>
Date: Wed, 16 Oct 2024 17:37:29 +0800
Subject: [PATCH] 123

---
 src/css/index.scss |   2 +-
 src/views/Data.vue | 102 ++++++++++++++++++++++++++++++++-------------
 2 files changed, 75 insertions(+), 29 deletions(-)

diff --git a/src/css/index.scss b/src/css/index.scss
index 8f9fdd4..960b6b0 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -284,7 +284,7 @@ s {
   font-size: 18px;
   font-weight: bold;
   background: -webkit-gradient(linear, left top, left bottom, from(#a7fcff), to(#08ced0));
-  background: linear-gradient(180deg, #a7fcff, #08ced0);
+  background: linear-gradient(180deg, #00AAA3, #006b3b);
   -webkit-background-clip: text;
   color: transparent;
 }
diff --git a/src/views/Data.vue b/src/views/Data.vue
index d4acbb7..51c1401 100644
--- a/src/views/Data.vue
+++ b/src/views/Data.vue
@@ -12,15 +12,38 @@
         <div class="des">
           <span class="box-title">通讯信息</span>
           <span class="box-info"> 
-            <el-tag>通讯名称: {{ curDriver.driver_name }}</el-tag>
-            <el-tag>通讯总计数: {{ curDriver.health && curDriver.health.total_count }}</el-tag>
-            <el-tag>通讯描述: {{ curDriver.driver_description }}</el-tag>
-            <el-tag>通讯状态: {{ txStatus[curDriver.driver_status] }}</el-tag>
-            <el-tag>通讯成功计数: {{ curDriver.health && curDriver.health.success_count }}</el-tag>
-            <el-tag>通讯失败计数: {{ curDriver.health && curDriver.health.failure_count }}</el-tag>
-            <el-tag>通讯最后一次成功时间: {{ curDriver.health && curDriver.health.last_success_time }}</el-tag>
-            <el-tag>通讯最后一次失败时间: {{ curDriver.health && curDriver.health.last_failure_ctime }}</el-tag>
-            <el-tag>通讯最后一次失败原因: {{ curDriver.health && curDriver.health.last_failure_cause }}</el-tag>
+            <table>
+              <tr>
+                <td style="width:180px;border-bottom: 1px solid #006b3b;">
+                  通讯名称: {{ curDriver.driver_name }}
+                </td>
+                
+                <td style="width:120px;border-bottom: 1px solid #006b3b;">通讯失败计数: {{ curDriver.health && curDriver.health.failure_count }}</td>
+                <td style="width:220px;border-bottom: 1px solid #006b3b;">
+                  通讯最后一次成功时间: {{ curDriver.health && curDriver.health.last_success_time }}
+                </td>
+                <td style="border-bottom: 1px solid #006b3b;">
+                  通讯状态: {{ txStatus[curDriver.driver_status] }}
+                </td>
+                <td style="border-bottom: 1px solid #006b3b;">
+                  通讯总计数: {{ curDriver.health && curDriver.health.total_count }}
+                </td>
+              </tr>
+              <tr >
+               
+                <td >
+                  通讯描述: {{ curDriver.driver_description }}
+                </td>
+                
+                <td >
+                  通讯成功计数: {{ curDriver.health && curDriver.health.success_count }}
+                </td>
+                <td>
+                  通讯最后一次失败时间: {{ curDriver.health && curDriver.health.last_failure_ctime }}
+                </td>
+                <td colspan="2">通讯最后一次失败原因: {{ curDriver.health && curDriver.health.last_failure_cause }}</td>
+              </tr>
+            </table>
           </span>
         </div>
         <div class="right-con">
@@ -40,25 +63,27 @@
             </fieldset>
           </div>
           <div class="right-table">
-            <div class="des">
+            <div class="des1">
               <span class="box-title">设备信息</span>
-              <div class="box-info"> 
-                <el-tag>设备名称: {{ curDevice.device_name }}</el-tag>
-                <el-tag>设备描述: {{ curDevice.device_description }}</el-tag>
+              <div class="box-info1"> 
+                <div>
+                  <el-tag>设备名称: {{ curDevice.device_name }}</el-tag> 
+                  <el-tag>设备描述: {{ curDevice.device_description }} </el-tag>
+                </div>
                 <el-button type="danger" @click="doDevice">{{!curDevice.device_disable? '禁用' : '启用'}}</el-button>
               </div>
             </div>
             <el-table :data="tableData"  height="400" border
               :header-cell-style="{ background: '#F6F7FC' }" size="large">
-              <el-table-column type="index" label="序号" width="80" align="center" />
+              <el-table-column type="index" label="序号" width="60" align="center" />
               <el-table-column prop="point_name" label="名称" width="150" align="center" show-overflow-tooltip />
               <el-table-column prop="point_description" label="描述" align="center" show-overflow-tooltip />
               <el-table-column prop="point_quality" label="质量" width="100" align="center" show-overflow-tooltip />
-              <el-table-column prop="point_in_value" label="点位值" width="100" align="center" show-overflow-tooltip />
+              <el-table-column prop="point_value" label="点位值" width="130" align="center" show-overflow-tooltip />
               <el-table-column prop="point_unit" label="单位" width="100" align="center" show-overflow-tooltip />
               <el-table-column prop="point_type" label="类型" width="100" align="center" show-overflow-tooltip />
               <el-table-column prop="point_timestamp" label="时间戳" width="200" align="center" show-overflow-tooltip />
-              <el-table-column label="操作" align="center" width="200" show-overflow-tooltip>
+              <el-table-column label="操作" fixed="right" align="center" width="200" show-overflow-tooltip>
                 <template #default="scope">
                   <el-button type="success" size="large" @click="openHis(scope.row)">
                     历史
@@ -300,9 +325,10 @@ export default {
     justify-content: space-around;
 .box-title {
   height:100% !important;
-  width: 30px;
+  width: 70px;
   background: #00AAA3;
   color:#fff;
+  
   // border-right: 1px solid #006b3b;
   display: flex;
   justify-content: center;
@@ -351,21 +377,41 @@ export default {
 }
 .box-info {
       width:100%; 
-      // border: 1px solid red;
-      display: flex;
-      flex-wrap: wrap;
-       justify-content: space-between;
-       align-items: center;
-       padding: 0 10px;
-       .el-tag {
-        margin: 10px;
-       }
+      display: inline-block;
+      height: 100%; 
+      table {
+        width:100%;  
+        height: 100%; 
+        border-collapse: collapse;
+      }
+      td {
+        padding:5px;
+        border-right: 1px solid #006b3b;
+        border-collapse: collapse;
+      }
     }
-  .des { 
+  .des, .des1 { 
     border-bottom: 1px solid #006b3b;
     display: flex;
     align-items: center; 
     width:100%; 
-    
+    height: 80px;
+  }
+  .des1 { 
+    height: 50px;
+  }
+  .box-info1 {
+    width:100%; 
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 10px;
+  }
+  
+  .el-tag {
+    margin-right: 10px;
+    width:200px; 
+    justify-content: left;
   }
 </style>