| | |
| | | <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" |
| | |
| | | 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'"> |
| | |
| | | <!-- 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'"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"> |
| | | <div class="baseInfo_left"> |
| | | <div class="baseInfo_list"> |
| | | <p> |
| | | <span class="labelInfo">底库</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> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">性别</span> |
| | | <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">身份证号</span> |
| | | <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">手机号</span> |
| | | <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">人员等级</span> |
| | | </p> |
| | | </div> |
| | | <div class="baseInfo_right"> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].tableName" |
| | | >{{ data.baseInfo[initialIndex].tableName }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].targetName" |
| | | >{{ data.baseInfo[initialIndex].targetName }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].labels.split('/')[1]" |
| | | >{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].labels.split('/')[2]" |
| | | >{{ data.baseInfo[initialIndex].labels.split("/")[2] }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].labels.split('/')[0]" |
| | | >{{ data.baseInfo[initialIndex].labels.split("/")[0] }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | class="val" |
| | | :title="data.baseInfo[initialIndex].monitorLevel" |
| | | >{{ data.baseInfo[initialIndex].monitorLevel }}</span> |
| | | >{{data.baseInfo[initialIndex].monitorLevel}}</span> |
| | | </p> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"> |
| | | <div class="baseInfo_left"> |
| | | <div class="baseInfo_list"> |
| | | <p> |
| | | <span class="labelInfo">底库</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> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">性别</span> |
| | | <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">身份证号</span> |
| | | <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">手机号</span> |
| | | <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span> |
| | | </p> |
| | | <p> |
| | | <span class="labelInfo">人员等级</span> |
| | | </p> |
| | | </div> |
| | | <div class="baseInfo_right"> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].tableName" |
| | | >{{ data.baseInfo[initialIndex].tableName }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].targetName" |
| | | >{{ data.baseInfo[initialIndex].targetName }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].labels.split('/')[1]" |
| | | >{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].labels.split('/')[2]" |
| | | >{{ data.baseInfo[initialIndex].labels.split("/")[2] }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | :title="data.baseInfo[initialIndex].labels.split('/')[0]" |
| | | >{{ data.baseInfo[initialIndex].labels.split("/")[0] }}</span> |
| | | </p> |
| | | <p class="valueInfo"> |
| | | <span |
| | | class="val" |
| | | :title="data.baseInfo[initialIndex].monitorLevel" |
| | | >{{ data.baseInfo[initialIndex].monitorLevel }}</span> |
| | | >{{data.baseInfo[initialIndex].monitorLevel}}</span> |
| | | </p> |
| | | </div> |
| | | </div> |
| | |
| | | </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), //季度 |
| | | "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" |
| | |
| | | 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() { |
| | | this.VideoPhotoData.activeName = "pic" |
| | | console.log('ModelCard data',this.data); |
| | | console.log(this.data.baseInfo) |
| | | console.log(this.initialIndex) |
| | | //this.VideoPhotoData.activeName = "pic" |
| | | }, |
| | | data() { |
| | | return { |
| | | activeName:'pic', |
| | | initialIndex: 0, |
| | | }; |
| | | }, |
| | |
| | | .baseInfo { |
| | | margin-top: 5px; |
| | | text-align: left; |
| | | .baseInfo_list { |
| | | p { |
| | | display: flex; |
| | | .labelInfo { |
| | | width: 80px; |
| | | color: #999; |
| | | } |
| | | .val { |
| | | font-size: 12px; |
| | | color: #101010; |
| | | letter-spacing: 0.28px; |
| | | line-height: 20px; |
| | | } |
| | | } |
| | | } |
| | | .baseInfo_left { |
| | | float: left; |
| | | width: 30%; |
| | |
| | | b { |
| | | //color: #e43933; |
| | | } |
| | | width: 40%; |
| | | text-align: left; |
| | | float: left; |
| | | margin: 4px 0px; |
| | | margin: 4px 0; |
| | | |
| | | } |
| | | } |
| | | .describeBigImage { |