From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 04 二月 2021 18:22:54 +0800
Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域

---
 src/components/subComponents/ModelCard.vue |  116 +++++++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 90 insertions(+), 26 deletions(-)

diff --git a/src/components/subComponents/ModelCard.vue b/src/components/subComponents/ModelCard.vue
index 1b68375..0450892 100644
--- a/src/components/subComponents/ModelCard.vue
+++ b/src/components/subComponents/ModelCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="model-card-box" :style="`height:${height};width:${width};`">
-    <el-tabs style="height: 100%;" @before-leave="changeTabs" v-model="VideoPhotoData.activeName">
+    <el-tabs style="height: 100%;" @before-leave="changeTabs" v-model="activeName">
       <el-tab-pane label="澶у浘" name="pic">
         <div
           class="model-card-box-left"
@@ -38,10 +38,13 @@
               v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
             >
               <p>
-                <span class="fontStyleForModel">{{ data.picDate }}</span>
+                <span class="fontStyleForModel" style="font-weight:normal">{{ data.picDate | formatTime }}</span>
               </p>
               <p>
-                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+                <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
+              </p>
+              <p>
+                
               </p>
               <p style="width:100%">
                 <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -58,10 +61,10 @@
             <!-- yolo绫诲ぇ鍥� -->
             <div class="describeBigImage" v-else>
               <p>
-                <span class="fontStyleForModel">{{ data.picDate }}</span>
+                <span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
               </p>
               <p>
-                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+                <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
               </p>
               <p style="width:100%">
                 <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -134,27 +137,36 @@
             <div class="baseInfo_list">
               <p>
                 <span class="labelInfo">搴曞簱</span>
-                <span class="val" :title="data.baseInfo[initialIndex].tableName">{{data.baseInfo[initialIndex].tableName}}</span>
+                <span
+                  class="val"
+                  :title="data.baseInfo[initialIndex].tableName"
+                >{{data.baseInfo[initialIndex].tableName}}</span>
               </p>
               <p>
                 <span class="labelInfo">濮撳悕</span>
-                <span class="val" :title="data.baseInfo[initialIndex].targetName">{{data.baseInfo[initialIndex].targetName}}</span>
+                <span
+                  class="val"
+                  :title="data.baseInfo[initialIndex].targetName"
+                >{{data.baseInfo[initialIndex].targetName}}</span>
               </p>
               <p>
                 <span class="labelInfo">鎬у埆</span>
-                <span class="val" >{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
+                <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
               </p>
               <p>
                 <span class="labelInfo">韬唤璇佸彿</span>
-                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[1]}}</span>
+                <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
               </p>
               <p>
                 <span class="labelInfo">鎵嬫満鍙�</span>
-                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[2]}}</span>
+                <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
               </p>
               <p>
                 <span class="labelInfo">浜哄憳绛夌骇</span>
-                <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{data.baseInfo[initialIndex].monitorLevel}}</span>
+                <span
+                  class="val"
+                  :title="data.baseInfo[initialIndex].monitorLevel"
+                >{{data.baseInfo[initialIndex].monitorLevel}}</span>
               </p>
             </div>
           </div>
@@ -232,27 +244,36 @@
             <div class="baseInfo_list">
               <p>
                 <span class="labelInfo">搴曞簱</span>
-                <span class="val" :title="data.baseInfo[initialIndex].tableName">{{data.baseInfo[initialIndex].tableName}}</span>
+                <span
+                  class="val"
+                  :title="data.baseInfo[initialIndex].tableName"
+                >{{data.baseInfo[initialIndex].tableName}}</span>
               </p>
               <p>
                 <span class="labelInfo">濮撳悕</span>
-                <span class="val" :title="data.baseInfo[initialIndex].targetName">{{data.baseInfo[initialIndex].targetName}}</span>
+                <span
+                  class="val"
+                  :title="data.baseInfo[initialIndex].targetName"
+                >{{data.baseInfo[initialIndex].targetName}}</span>
               </p>
               <p>
                 <span class="labelInfo">鎬у埆</span>
-                <span class="val" >{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
+                <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
               </p>
               <p>
                 <span class="labelInfo">韬唤璇佸彿</span>
-                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[1]}}</span>
+                <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
               </p>
               <p>
                 <span class="labelInfo">鎵嬫満鍙�</span>
-                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[2]}}</span>
+                <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
               </p>
               <p>
                 <span class="labelInfo">浜哄憳绛夌骇</span>
-                <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{data.baseInfo[initialIndex].monitorLevel}}</span>
+                <span
+                  class="val"
+                  :title="data.baseInfo[initialIndex].monitorLevel"
+                >{{data.baseInfo[initialIndex].monitorLevel}}</span>
               </p>
             </div>
           </div>
@@ -262,6 +283,22 @@
   </div>
 </template>
 <script>
+Date.prototype.Format = function (fmt) {
+  var o = {
+    "M+": this.getMonth() + 1, //鏈堜唤 
+    "d+": this.getDate(), //鏃� 
+    "H+": this.getHours(), //灏忔椂 
+    "m+": this.getMinutes(), //鍒� 
+    "s+": this.getSeconds(), //绉� 
+    "q+": Math.floor((this.getMonth() + 3) / 3), //瀛e害 
+    "S": this.getMilliseconds() //姣 
+  };
+  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+  for (var k in o)
+    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+  return fmt;
+}
+
 /* eslint-disable */
 import CameraPlayer from "@/components/player";
 import imgDown from "@/components/subComponents/imgDown"
@@ -282,17 +319,46 @@
     data: ""
   },
   filters: {
+    formatTime(t) {
+      return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
+    },
     percentage(score) {
       return score.toFixed(2) + "%"
+    },
+    sex(v) {
+      try {
+        let obj = JSON.parse(v)
+        return obj.sex
+      } catch (error) {
+        return v.split("/")[0]
+      }
+    },
+    idCard(v) {
+      try {
+        let obj = JSON.parse(v)
+        return obj.idCard
+      } catch (error) {
+        return v.split("/")[1]
+      }
+    },
+    phoneNum(v) {
+      try {
+        let obj = JSON.parse(v)
+        return obj.phone
+      } catch (error) {
+        return v.split("/")[2]
+      }
     }
   },
   mounted() {
+    console.log('ModelCard data',this.data);
     console.log(this.data.baseInfo)
     console.log(this.initialIndex)
-    this.VideoPhotoData.activeName = "pic"
+    //this.VideoPhotoData.activeName = "pic"
   },
   data() {
     return {
+      activeName:'pic',
       initialIndex: 0,
     };
   },
@@ -343,21 +409,20 @@
       .baseInfo {
         margin-top: 5px;
         text-align: left;
-        .baseInfo_list{
-          p{
+        .baseInfo_list {
+          p {
             display: flex;
-            .labelInfo{
+            .labelInfo {
               width: 80px;
               color: #999;
             }
-            .val{
+            .val {
               font-size: 12px;
               color: #101010;
               letter-spacing: 0.28px;
               line-height: 20px;
             }
           }
-          
         }
         .baseInfo_left {
           float: left;
@@ -427,10 +492,9 @@
             b {
               //color: #e43933;
             }
-            width: 40%;
             text-align: left;
-            float: left;
-            margin: 4px 0px;
+            margin: 4px 0;
+            
           }
         }
         .describeBigImage {

--
Gitblit v1.8.0