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