From 0f70bb5e95342e1c88e16b4c12609cd45dd1b103 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期五, 21 五月 2021 14:27:47 +0800
Subject: [PATCH] add bhomebus api

---
 src/components/subComponents/ModelCard.vue |   71 +++++++++++++++++++++++++----------
 1 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/components/subComponents/ModelCard.vue b/src/components/subComponents/ModelCard.vue
index 53946a4..57c13f0 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"
@@ -12,16 +12,19 @@
             <p class="img-box-title">
               <b>鍏ㄦ櫙鍥�</b>
             </p>
+            <!-- 浜鸿劯绫诲瀷 -->
             <img-down
               v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
               :url="data.picMaxUrl[0]"
             ></img-down>
-            <!-- 浜鸿劯绫诲瀷 -->
+
+            <!-- 鏅�歽olo绫� -->
             <img-down
               v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length == 1"
               :url="data.picMaxUrl[0]"
             ></img-down>
-            <!-- 鏅�歽olo绫� -->
+
+            <!-- 鎸佺画鏃堕棿yolo绫� -->
             <el-carousel
               v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length > 1"
               trigger="click"
@@ -32,20 +35,26 @@
                 <img-down :url="item"></img-down>
               </el-carousel-item>
             </el-carousel>
-            <!-- 鎸佺画鏃堕棿yolo绫� -->
+
+            <!-- yolo绫诲ぇ鍥� -->
             <div
               class="describe"
               v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
             >
               <p>
-                <span class="fontStyleForModel" style="font-weight:normal">{{ data.picDate | formatTime }}</span>
+                <span
+                  class="fontStyleForModel"
+                  style="font-weight:normal"
+                >{{ data.picDate | formatTime }}</span>
               </p>
               <p>
-                <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel" style="margin-left:20px;">{{ data.analyServerName }}</span>
+                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+                <span
+                  class="fontStyleForModel analyServer"
+                  style="margin-left:20px;"
+                >{{ data.analyServerName }}</span>
               </p>
-              <p>
-                
-              </p>
+              <p></p>
               <p style="width:100%">
                 <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
                   <span class="fontStyleForModel">{{data.taskName}}</span>&nbsp;&nbsp;
@@ -58,13 +67,22 @@
                 </span>
               </p>
             </div>
-            <!-- yolo绫诲ぇ鍥� -->
+
+            <!-- 浜鸿劯绫诲ぇ鍥�  -->
             <div class="describeBigImage" v-else>
               <p>
                 <span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
               </p>
-              <p>
-                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+              <p class="align-right">
+                <span
+                  class="fontStyleForModel text-overflow"
+                  :title="data.cameraAddr"
+                >{{ data.cameraAddr }}</span>
+                <span
+                  class="fontStyleForModel text-overflow"
+                  :title="data.cameraAddr"
+                  style="margin-left:20px;"
+                >{{ data.analyServerName }}</span>
               </p>
               <p style="width:100%">
                 <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -78,12 +96,15 @@
                 </span>
               </p>
               <p style="width:100%">
-                <span class="fontStyleForModel">{{data.showLabels}}</span>
+                <span
+                  style="white-space: nowrap;font-weight: 600;font-size: 13px;"
+                >{{data.showLabels}}</span>
               </p>
             </div>
-            <!-- 浜鸿劯绫诲ぇ鍥�  -->
           </div>
         </div>
+
+        <!-- 寮规鍙充晶 -->
         <div
           v-if="data.targetInfo && data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
           class="model-card-box-right"
@@ -172,6 +193,7 @@
           </div>
         </div>
       </el-tab-pane>
+
       <el-tab-pane label="瑙嗛" name="video" class="video-tabs">
         <div
           class="model-card-box-left"
@@ -186,11 +208,6 @@
               style="margin-top: 12px;"
             >鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
           </div>
-          <!-- <div class="merge">
-            <el-button type="primary" @click="mergeVideo">鍚堝苟瑙嗛</el-button>
-            <a name="download" @click="downloadfile">涓嬭浇</a>
-            <a href="/httpImage/192.168.20.112:6081/31,02c86c199cd9b1" download="panlei.mp4">涓嬭浇2</a>
-          </div>-->
         </div>
         <div
           v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
@@ -351,12 +368,14 @@
     }
   },
   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,
     };
   },
@@ -492,7 +511,6 @@
             }
             text-align: left;
             margin: 4px 0;
-            
           }
         }
         .describeBigImage {
@@ -501,6 +519,17 @@
           float: left;
           margin-top: 5px;
           p {
+            &.align-right {
+              text-align: right;
+              .text-overflow {
+                display: inline-block;
+                vertical-align: top;
+                width: 90px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
             b {
               //color: #e43933;
             }

--
Gitblit v1.8.0