From a3aa9b34593a1e09a9030dd200fa1fd679c87fd5 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 08 十一月 2021 18:15:12 +0800
Subject: [PATCH] 首页表格

---
 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue |   70 ++++++++++++++++++++++++++++++-----
 1 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 464e7ea..8c33c6d 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -261,11 +261,12 @@
                       v-for="(label, index) in data.LableLst"
                       :key="index"
                     >
-                      {{
-                        label.Desc +
-                        (index == data.LableLst.length - 1 ? "" : "锛�")
-                      }}
+                      {{ label.Desc }}
                     </span>
+                    <!-- (index == data.LableLst.length - 1 ? "" : "锛�") -->
+                  </div>
+                  <div v-else-if="hasError(data)" class="has-error">
+                    <span>鏈夊紓甯�</span>
                   </div>
                   <div v-else class="no-error">
                     <span>鏃犲紓甯�</span>
@@ -601,7 +602,7 @@
           _this.tabData = _this.tabData.map(function (item) {
             const set = new Set();
             item.LableLst.forEach(function (label) {
-              label.Desc.split("锛�").forEach(function (d) {
+              label.Desc.split(",").forEach(function (d) {
                 set.add(d);
               });
             });
@@ -658,7 +659,7 @@
           _this.tabData = _this.tabData.map(function (item) {
             const set = new Set();
             item.LableLst.forEach(function (label) {
-              label.Desc.split("锛�").forEach(function (d) {
+              label.Desc.split(",").forEach(function (d) {
                 set.add(d);
               });
             });
@@ -705,6 +706,13 @@
           });
         });
       });
+    },
+    hasError(data) {
+      if (!data.EventLst || data.EventLst.length == 0) {
+        return false;
+      }
+      const t = data.EventLst.some((x) => x.state == 0);
+      return t && data.IsOperate == "1";
     },
     toggleFollow(data) {
       data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0");
@@ -885,8 +893,11 @@
 .search-for-video-analyze {
   background-color: #f4f6f9;
   margin: 0 5px;
+  margin-bottom: 10px;
+
   * {
     box-sizing: content-box;
+    color: #425277;
   }
   .el-input__inner {
     border: 1px solid #d7dce8;
@@ -1157,6 +1168,7 @@
             font-size: 18px;
             padding: 2px 4px 0px 4px;
             border-radius: 4px;
+            cursor: pointer;
             &.menu {
               margin-right: 10px;
               span {
@@ -1178,11 +1190,13 @@
       .el-table__row {
         cursor: pointer;
       }
+      .el-table {
+        border: none;
+      }
       .el-col {
         margin-bottom: 10px;
       }
       .card {
-        cursor: pointer;
         position: relative;
         text-align: left;
         background: #fff;
@@ -1194,6 +1208,7 @@
           box-shadow: 3px 3px 4px #d3def2;
         }
         .video-wrap {
+          cursor: pointer;
           border-radius: 3px;
           width: 100%;
           padding-top: 56.25%;
@@ -1214,21 +1229,52 @@
               margin-bottom: 1px;
             }
             label {
-              color: #999;
+              color: #808dab;
               padding-right: 8px;
+              line-height: 16px;
+            }
+            span {
+              font-weight: bold;
+              color: #425277;
+              line-height: 16px;
             }
           }
           .mark-info {
             margin: 10px 0;
             color: #3d68e1;
             .abnormal {
-              color: red;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
+              .abnormal-label {
+                display: inline-block;
+                border: 1px solid;
+                border: 1px solid #bf3a3a;
+                border-radius: 2px;
+                color: #bf3a3a;
+                padding: 0 3px;
+                margin-right: 3px;
+              }
             }
             .event-tag {
-              margin-top: 10px;
+              margin-top: 8px;
+              .el-tag.el-tag--info {
+                background-color: #96a0b7;
+                border-color: #96a0b7;
+                color: #fff;
+                cursor: pointer;
+                height: 19px;
+                padding: 0 5px;
+              }
+            }
+            .has-error {
+              width: fit-content;
+              background: #bf3a3a;
+              padding: 1px 5px;
+              border-radius: 2px;
+              span {
+                color: #fff;
+              }
             }
             .no-error {
               width: fit-content;
@@ -1286,12 +1332,15 @@
         padding: 10px 0 20px;
       }
     }
+
     .el-dialog__wrapper {
       top: -22px;
     }
     .dialog-video {
       .el-dialog {
         width: 1340px;
+        top: 70px;
+        transform: none;
       }
       .el-dialog__body {
         background: #eaeaea;
@@ -1342,6 +1391,7 @@
     }
     .dialog-event {
       z-index: 2096 !important;
+
       .el-dialog {
         width: 1000px;
         height: 800px;

--
Gitblit v1.8.0