Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_cp/dv_cp_wechat_app into dev
This commit is contained in:
花有清香月有阴
142
src/apps/AppVideoSurveillance/AppVideoSurveillance.vue
Normal file
142
src/apps/AppVideoSurveillance/AppVideoSurveillance.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<section class="videoSurveillance">
|
||||
<AiTopFixed>
|
||||
<div class="header" flex>
|
||||
<div flex v-for="(node,i) in nodes" :key="i">
|
||||
<div :class="{current:isCurrent(i)}" v-text="node.nodeName" @click="gotoNode(node,i)"/>
|
||||
<u-icon v-if="!isCurrent(i)" name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="list">
|
||||
<div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
|
||||
<template v-if="!!row.deviceId">
|
||||
<img src="../../pages/resourcesManage/img/video-img.png" alt="" class="videoIcon" @click="showMonitor(row)">
|
||||
<div class="area-name" v-text="row.deviceName" @click="showMonitor(row)"/>
|
||||
<div class="deviceStatus" v-text="!row.online?'在线':'离线'" @click="showMonitor(row)"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="area-name" v-text="row.nodeName" @click="getMore(row)"/>
|
||||
<u-icon name="arrow-right" color="#ddd" @click="getMore(row)"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "videoSurveillance",
|
||||
appName: "视频监控",
|
||||
data() {
|
||||
return {
|
||||
nodes: [
|
||||
{nodeName: "首页"}
|
||||
],
|
||||
monitors: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMonitors(nodeId, queryType = 0) {
|
||||
this.monitors = []
|
||||
this.$http.post("/app/appzyvideoequipment/getTree", {
|
||||
nodeId, queryType
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.monitors = JSON.parse(res.data)?.[queryType == 0 ? 'node' : 'device'] || []
|
||||
}
|
||||
})
|
||||
},
|
||||
getMore(row) {
|
||||
this.nodes.push(row)
|
||||
this.getMonitors(row.nodeId, row.hasChild == 1 ? 0 : 1)
|
||||
},
|
||||
showMonitor(row) {
|
||||
uni.navigateTo({url: `./monitorDetail?id=${row.deviceId}`})
|
||||
},
|
||||
isCurrent(index) {
|
||||
return index == Math.max(this.nodes?.length - 1, 0)
|
||||
},
|
||||
gotoNode(node, index) {
|
||||
this.nodes.splice(index + 1)
|
||||
this.getMonitors(node.nodeId)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getMonitors()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.videoSurveillance {
|
||||
::v-deep .placeholder {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: #666;
|
||||
|
||||
.current {
|
||||
color: #4E8EEE;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-left: 32px;
|
||||
background: #FFF;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 104px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: 0 32px 0 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.online {
|
||||
.videoIcon {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.deviceStatus {
|
||||
color: #4E8EEE;
|
||||
background: #E7F1FD;
|
||||
}
|
||||
}
|
||||
|
||||
.videoIcon {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.area-name {
|
||||
font-size: 34px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.deviceStatus {
|
||||
margin-left: 8px;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
background: #E9E9E9;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/apps/AppVideoSurveillance/monitorDetail.vue
Normal file
85
src/apps/AppVideoSurveillance/monitorDetail.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<section class="monitorDetail">
|
||||
<div class="videoBox">
|
||||
<iframe ref="monitorIns" :style="style" :src="monitor.url" allow="autoplay *; microphone *; fullscreen *"
|
||||
allowfullscreen allowtransparency allowusermedia frameBorder="no"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "monitorDetail",
|
||||
data() {
|
||||
return {
|
||||
style: {},
|
||||
monitor: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.detectOrient()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getDetail(deviceId) {
|
||||
deviceId && this.$http.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
|
||||
params: {deviceId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.monitor = JSON.parse(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
detectOrient() {
|
||||
var width = document.querySelector('.monitorDetail').clientWidth
|
||||
var height = document.querySelector('.monitorDetail').clientHeight
|
||||
if (width >= height) { // 竖屏
|
||||
this.style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
transform: 'rotate(0eg)',
|
||||
transformOrigin: `0 0`
|
||||
}
|
||||
} else {
|
||||
this.style = {
|
||||
width: height + 'px',
|
||||
height: width + 'px',
|
||||
transform: 'rotate(90deg)',
|
||||
transformOrigin: `${width / 2}px ${width / 2}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(params) {
|
||||
this.getDetail(params.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.monitorDetail {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
||||
.videoBox {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
iframe {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user