From 7bc79fac493ee54b0ba8650f3a40632378d81070 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 08 十二月 2021 09:44:42 +0800
Subject: [PATCH] 登录页
---
src/components/subComponents/ModelCard.vue | 406 +++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 288 insertions(+), 118 deletions(-)
diff --git a/src/components/subComponents/ModelCard.vue b/src/components/subComponents/ModelCard.vue
index 061737a..412e1ea 100644
--- a/src/components/subComponents/ModelCard.vue
+++ b/src/components/subComponents/ModelCard.vue
@@ -1,104 +1,180 @@
<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"
- :style="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
- ? 'width: 65%;padding: 5px;box-sizing: border-box'
- : 'width: 100%;padding: 5px;box-sizing: border-box'"
+ :style="
+ data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
+ ? 'width: 65%;padding: 5px;box-sizing: border-box'
+ : 'width: 100%;padding: 5px;box-sizing: border-box'
+ "
>
<div class="img-box">
<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>
<!-- 浜鸿劯绫诲瀷 -->
<img-down
- v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length == 1"
+ 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>
+
+ <!-- 鎸佺画鏃堕棿yolo绫� -->
<el-carousel
- v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length > 1"
+ v-else-if="
+ (data.targetInfo == null ||
+ data.targetInfo[0].picSmUrl == '') &&
+ data.picMaxUrl.length > 1
+ "
trigger="click"
height="100%"
:autoplay="false"
>
- <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index">
+ <el-carousel-item
+ v-for="(item, index) in data.picMaxUrl"
+ :key="index"
+ >
<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 == ''"
+ v-if="
+ data.targetInfo == null || data.targetInfo[0].picSmUrl == ''
+ "
>
<p>
- <span class="fontStyleForModel">{{ 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 analyServer"
+ style="margin-left:20px;"
+ >{{ data.analyServerName }}</span
+ >
</p>
- <p>
- <span class="fontStyleForModel">{{ data.analyServerName }}</span>
- </p>
+ <p></p>
<p style="width:100%">
- <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
- <span class="fontStyleForModel">{{data.taskName}}</span>
+ <span
+ v-for="(item, index) in data.alarmRules"
+ :key="index + 'rule'"
+ >
+ <span class="fontStyleForModel">{{ data.taskName }}</span
+ >
<span
v-if="item.alarmLevel !== '鎾ら槻'"
class="fontStyleForModel"
- >{{item.alarmLevel}}</span>
- <span v-if="item.isLink" class="fontStyleForModel">鑱斿姩浠诲姟</span>
- <span v-if="index < data.alarmRules.length-1">/ </span>
+ >{{ item.alarmLevel }}</span
+ >
+ <span v-if="item.isLink" class="fontStyleForModel"
+ >鑱斿姩浠诲姟</span
+ >
+ <span v-if="index < data.alarmRules.length - 1">/ </span>
</span>
</p>
</div>
- <!-- yolo绫诲ぇ鍥� -->
+
+ <!-- 浜鸿劯绫诲ぇ鍥� -->
<div class="describeBigImage" v-else>
<p>
- <span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
+ <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'">
- <span class="fontStyleForModel">{{data.taskName}}</span>
+ <span
+ v-for="(item, index) in data.alarmRules"
+ :key="index + 'rule'"
+ >
+ <span class="fontStyleForModel">{{ data.taskName }}</span
+ >
<span
v-if="item.alarmLevel !== '鎾ら槻'"
class="fontStyleForModel"
- >{{item.alarmLevel}}</span>
- <span v-if="item.isLink" class="fontStyleForModel">鑱斿姩浠诲姟</span>
- <span v-if="index < data.alarmRules.length-1">/ </span>
+ >{{ item.alarmLevel }}</span
+ >
+ <span v-if="item.isLink" class="fontStyleForModel"
+ >鑱斿姩浠诲姟</span
+ >
+ <span v-if="index < data.alarmRules.length - 1">/ </span>
</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 !== ''"
+ v-if="
+ data.targetInfo &&
+ data.targetInfo !== null &&
+ data.targetInfo[0].picSmUrl !== ''
+ "
class="model-card-box-right"
- :style="data.targetInfo && data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
- ? 'width: 35%;box-sizing: border-box;'
- : ''"
+ :style="
+ data.targetInfo &&
+ data.targetInfo !== null &&
+ data.targetInfo[0].picSmUrl !== ''
+ ? 'width: 35%;box-sizing: border-box;'
+ : ''
+ "
>
<p class="img-box-title">
<b>鎶撴媿鍥�</b>
</p>
<!-- 宸﹀彸涓ゅ紶鐨勪汉鑴稿姣旀ā寮� -->
- <div class="img-box" v-if="data.baseInfo && data.baseInfo.length >= 1" ref="picSmBox">
+ <div
+ class="img-box"
+ v-if="data.baseInfo && data.baseInfo.length >= 1"
+ ref="picSmBox"
+ >
<div class="card-img-box-compear-left">
<!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" ref="picSm" /> -->
- <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
+ <img-down
+ :url="data.targetInfo[0].picSmUrl"
+ :isPreview="false"
+ ></img-down>
</div>
<el-carousel
@change="changeInitialIndex"
@@ -109,9 +185,15 @@
v-if="data.baseInfo[0].targetPicUrl != ''"
class="card-img-box-compear-right"
>
- <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
+ <el-carousel-item
+ v-for="(item, index) in data.baseInfo"
+ :key="index"
+ >
<!-- <img :src="'/httpImage/'+item.targetPicUrl" /> -->
- <img-down :url="item.targetPicUrl" :isPreview="false"></img-down>
+ <img-down
+ :url="item.targetPicUrl"
+ :isPreview="false"
+ ></img-down>
</el-carousel-item>
</el-carousel>
<div
@@ -127,85 +209,119 @@
</div>
</div>
<!-- 娌℃湁姣斿鐨勪汉鑴歌瘑鍒ā寮� -->
- <div class="img-box" v-if="!data.baseInfo && data.targetInfo[0].picSmUrl !== '' ">
- <div class="card-img-box-compear-left" style="width:60%;margin-top:5px">
+ <div
+ class="img-box"
+ v-if="!data.baseInfo && data.targetInfo[0].picSmUrl !== ''"
+ >
+ <div
+ class="card-img-box-compear-left"
+ style="width:60%;margin-top:5px"
+ >
<!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" /> -->
- <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
+ <img-down
+ :url="data.targetInfo[0].picSmUrl"
+ :isPreview="false"
+ ></img-down>
</div>
</div>
- <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
+ <div
+ class="baseInfo"
+ v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"
+ >
<div class="baseInfo_list">
<p>
<span class="labelInfo">搴曞簱</span>
<span
class="val"
:title="data.baseInfo[initialIndex].tableName"
- >{{data.baseInfo[initialIndex].tableName}}</span>
+ >{{ data.baseInfo[initialIndex].tableName }}</span
+ >
</p>
<p>
<span class="labelInfo">濮撳悕</span>
<span
class="val"
:title="data.baseInfo[initialIndex].targetName"
- >{{data.baseInfo[initialIndex].targetName}}</span>
+ >{{ data.baseInfo[initialIndex].targetName }}</span
+ >
</p>
<p>
<span class="labelInfo">鎬у埆</span>
- <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</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>
+ <span class="val">{{
+ data.baseInfo[initialIndex].labels | idCard
+ }}</span>
</p>
<p>
<span class="labelInfo">鎵嬫満鍙�</span>
- <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</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>
+ >{{ data.baseInfo[initialIndex].monitorLevel }}</span
+ >
</p>
</div>
</div>
</div>
</el-tab-pane>
+
<el-tab-pane label="瑙嗛" name="video" class="video-tabs">
<div
class="model-card-box-left"
- :style="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
- ? 'width: 65%;padding: 5px;box-sizing: border-box'
- : 'width: 70%;padding: 5px;box-sizing: border-box;margin-left:15%'"
+ :style="
+ data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
+ ? 'width: 65%;padding: 5px;box-sizing: border-box'
+ : 'width: 70%;padding: 5px;box-sizing: border-box;margin-left:15%'
+ "
>
<div class="img-box">
- <video
+ <!-- <video
:src="'/httpImage/' + data.videoUrl"
controls
style="margin-top: 12px;"
- >鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
+ >
+ 鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�
+ </video> -->
+ <wasm-player
+ :videoUrl="data.videoUrl"
+ :isStream="false"
+ ></wasm-player>
</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 !== ''"
class="model-card-box-right"
- :style="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
- ? 'width: 35%;box-sizing: border-box;'
- : ''"
+ :style="
+ data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
+ ? 'width: 35%;box-sizing: border-box;'
+ : ''
+ "
>
<p class="img-box-title">
<b>鎶撴媿鍥�</b>
</p>
<!-- 宸﹀彸涓ゅ紶鐨勪汉鑴稿姣旀ā寮� -->
- <div class="img-box" v-if="data.baseInfo && data.baseInfo.length >= 1" ref="picSmBox">
+ <div
+ class="img-box"
+ v-if="data.baseInfo && data.baseInfo.length >= 1"
+ ref="picSmBox"
+ >
<div class="card-img-box-compear-left">
- <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
+ <img-down
+ :url="data.targetInfo[0].picSmUrl"
+ :isPreview="false"
+ ></img-down>
</div>
<el-carousel
@change="changeInitialIndex"
@@ -216,9 +332,15 @@
class="card-img-box-compear-right"
:arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
>
- <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
+ <el-carousel-item
+ v-for="(item, index) in data.baseInfo"
+ :key="index"
+ >
<!-- <img :src="'/httpImage/'+item.targetPicUrl" /> -->
- <img-down :url="item.targetPicUrl" :isPreview="false"></img-down>
+ <img-down
+ :url="item.targetPicUrl"
+ :isPreview="false"
+ ></img-down>
</el-carousel-item>
</el-carousel>
<div
@@ -234,46 +356,64 @@
</div>
</div>
<!-- 娌℃湁姣斿鐨勪汉鑴歌瘑鍒ā寮� -->
- <div class="img-box" v-if="!data.baseInfo && data.picMaxUrl ">
- <div class="card-img-box-compear-left" style="width:60%;margin-top:5px">
+ <div class="img-box" v-if="!data.baseInfo && data.picMaxUrl">
+ <div
+ class="card-img-box-compear-left"
+ style="width:60%;margin-top:5px"
+ >
<!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" /> -->
- <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
+ <img-down
+ :url="data.targetInfo[0].picSmUrl"
+ :isPreview="false"
+ ></img-down>
</div>
</div>
- <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
+ <div
+ class="baseInfo"
+ v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"
+ >
<div class="baseInfo_list">
<p>
<span class="labelInfo">搴曞簱</span>
<span
class="val"
:title="data.baseInfo[initialIndex].tableName"
- >{{data.baseInfo[initialIndex].tableName}}</span>
+ >{{ data.baseInfo[initialIndex].tableName }}</span
+ >
</p>
<p>
<span class="labelInfo">濮撳悕</span>
<span
class="val"
:title="data.baseInfo[initialIndex].targetName"
- >{{data.baseInfo[initialIndex].targetName}}</span>
+ >{{ data.baseInfo[initialIndex].targetName }}</span
+ >
</p>
<p>
<span class="labelInfo">鎬у埆</span>
- <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</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>
+ <span class="val">{{
+ data.baseInfo[initialIndex].labels | idCard
+ }}</span>
</p>
<p>
<span class="labelInfo">鎵嬫満鍙�</span>
- <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</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>
+ >{{ data.baseInfo[initialIndex].monitorLevel }}</span
+ >
</p>
</div>
</div>
@@ -283,54 +423,67 @@
</div>
</template>
<script>
-Date.prototype.Format = function (fmt) {
+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));
+ '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;
+ 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"
+import WasmPlayer from '@/components/wasmPlayer'
+import imgDown from '@/components/subComponents/imgDown'
export default {
components: {
- CameraPlayer,
- imgDown
+ WasmPlayer,
+ imgDown,
},
props: {
height: {
type: String,
- default: "100%"
+ default: '100%',
},
width: {
type: String,
- default: "100%"
+ default: '100%',
},
- data: ""
+ data: {
+ type: Object,
+ require: false,
+ default: function() {
+ return {}
+ },
+ },
},
filters: {
formatTime(t) {
- return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
+ return new Date(t).Format('yyyy-MM-dd HH:mm:ss')
},
percentage(score) {
- return score.toFixed(2) + "%"
+ return score.toFixed(2) + '%'
},
sex(v) {
try {
let obj = JSON.parse(v)
return obj.sex
} catch (error) {
- return v.split("/")[0]
+ return v.split('/')[0]
}
},
idCard(v) {
@@ -338,7 +491,7 @@
let obj = JSON.parse(v)
return obj.idCard
} catch (error) {
- return v.split("/")[1]
+ return v.split('/')[1]
}
},
phoneNum(v) {
@@ -346,38 +499,40 @@
let obj = JSON.parse(v)
return obj.phone
} catch (error) {
- return v.split("/")[2]
+ 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,
- };
+ }
},
methods: {
changeTabs(activeName, oldActiveName) {
- console.log(activeName, oldActiveName);
+ console.log(activeName, oldActiveName)
},
changeInitialIndex(index) {
- this.initialIndex = index;
+ this.initialIndex = index
},
downloadfile() {
- this.filecontent = "this is my file content";
- let a = document.createElement('a');
+ this.filecontent = 'this is my file content'
+ let a = document.createElement('a')
- a.href = "data:text/json;charset=utf-8," + this.filecontent;
+ a.href = 'data:text/json;charset=utf-8,' + this.filecontent
// a.url = "http://192.168.20.112:6154/93,02c5aea4fc614e";
- a.download = "video.mp4";
- a.click();
- }
+ a.download = 'video.mp4'
+ a.click()
+ },
},
-};
+}
</script>
<style lang="scss">
.fontStyleForModel {
@@ -490,10 +645,8 @@
b {
//color: #e43933;
}
- width: 40%;
text-align: left;
- float: left;
- margin: 4px 0px;
+ margin: 4px 0;
}
}
.describeBigImage {
@@ -502,6 +655,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;
}
@@ -610,3 +774,9 @@
}
}
</style>
+
+<style>
+.pswp--zoom-allowed.pswp--has_mouse.pswp--zoom-allowed {
+ z-index: 100004;
+}
+</style>
--
Gitblit v1.8.0