小程序目录调整完成
This commit is contained in:
aixianling
232
src/mods/device/AppVideoSurve/AppVideoSurve.vue
Normal file
232
src/mods/device/AppVideoSurve/AppVideoSurve.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<section class="videoSurveillance">
|
||||
<div class="area-content">
|
||||
<AiAreaPicker class="ai-area" :name.sync="areaName" @input="areaSelect">
|
||||
<div class="ai-area__wrapper">
|
||||
<u-icon name="arrow-down" color="#666" size="24" :label="areaName||'请选择'" label-pos="left" label-size="40"/>
|
||||
</div>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
|
||||
<div class="num-content">
|
||||
<div class="item">
|
||||
<h3>{{ count.online || 0 }}</h3>
|
||||
<p>在线设备</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3>{{ count.sum - count.online || 0 }}</h3>
|
||||
<p>离线</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3>{{ onlineRate * 100 || 0 }}%</h3>
|
||||
<p>在线率</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-content">
|
||||
<div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
|
||||
<img class="img" :src="item.indexUrl" alt="" v-if="item.deviceStatus == 1"/>
|
||||
<img class="img" src="https://cdn.cunwuyun.cn/dvcp/AppVideoSurve/offline.png" alt="" v-else/>
|
||||
<p>{{ item.name }}</p>
|
||||
<img class="icon" src="https://cdn.cunwuyun.cn/dvcp/AppVideoSurve/https://cdn.cunwuyun.cn/dvcp/AppVideoSurve"
|
||||
alt="" v-if="item.deviceStatus == 1"/>
|
||||
<img class="icon"
|
||||
src="https://cdn.cunwuyun.cn/dvcp/AppVideoSurve/not-https://cdn.cunwuyun.cn/dvcp/AppVideoSurve" alt=""
|
||||
v-else/>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppVideoSurve',
|
||||
appName: '视频监控',
|
||||
data() {
|
||||
return {
|
||||
nodes: [{nodeName: '首页'}],
|
||||
monitors: [],
|
||||
|
||||
areaId: '',
|
||||
areaName: '',
|
||||
list: [],
|
||||
count: {},
|
||||
Echart: null,
|
||||
onlineRate: '',
|
||||
offlineRate: '',
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user'])},
|
||||
onLoad() {
|
||||
this.areaId = this.$areaId
|
||||
this.areaName = this.$areaName
|
||||
},
|
||||
onShow() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$instance.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.list = res.data.list
|
||||
this.count = res.data.count
|
||||
this.onlineRate = (this.count.online / this.count.sum).toFixed(2)
|
||||
this.offlineRate = (1 - this.onlineRate).toFixed(2)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getMonitors(nodeId, queryType = 0) {
|
||||
this.monitors = []
|
||||
this.$instance
|
||||
.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)
|
||||
},
|
||||
|
||||
isCurrent(index) {
|
||||
return index == Math.max(this.nodes?.length - 1, 0)
|
||||
},
|
||||
|
||||
gotoNode(node, index) {
|
||||
this.nodes.splice(index + 1)
|
||||
this.getMonitors(node.nodeId)
|
||||
},
|
||||
|
||||
areaSelect(e) {
|
||||
this.areaId = e
|
||||
this.getList()
|
||||
},
|
||||
|
||||
showMonitor(row) {
|
||||
if (row.deviceStatus != 1) return
|
||||
uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videoSurveillance {
|
||||
background: #fff;
|
||||
padding: 0 32px;
|
||||
height: 100%;
|
||||
|
||||
.area-content {
|
||||
.ai-area {
|
||||
.ai-area__wrapper {
|
||||
padding: 28px 0;
|
||||
|
||||
.label {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num-content {
|
||||
// width: calc(100% - 40px);
|
||||
height: 164px;
|
||||
background: #eee;
|
||||
border-radius: 16px;
|
||||
margin: 32px 0 0 0;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.monitor-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 44px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-content {
|
||||
width: 100%;
|
||||
padding: 38px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
// width: calc(50% - 28px);
|
||||
width: 48%;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
vertical-align: top;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 218px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
left: 158px;
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n + 0) {
|
||||
margin-left: 3.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
src/mods/device/AppVideoSurve/monitorDetail.vue
Normal file
94
src/mods/device/AppVideoSurve/monitorDetail.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<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',
|
||||
appName: "监控详情",
|
||||
data() {
|
||||
return {
|
||||
style: {},
|
||||
monitor: {},
|
||||
width: '',
|
||||
height: '',
|
||||
}
|
||||
},
|
||||
onLoad(params) {
|
||||
this.getDetail(params.id)
|
||||
},
|
||||
onShow() {
|
||||
this.$nextTick(() => {
|
||||
this.detectOrient()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDetail(deviceId) {
|
||||
deviceId &&
|
||||
this.$instance
|
||||
.post('/app/appzyvideoequipment/getWebSdkUrl', null, {
|
||||
params: {deviceId},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.monitor = JSON.parse(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
detectOrient() {
|
||||
uni.onWindowResize((res) => {
|
||||
this.width = res.size.windowWidth
|
||||
this.height = res.size.windowHeight
|
||||
console.log('变化后的窗口宽度=' + res.size.windowWidth)
|
||||
console.log('变化后的窗口高度=' + res.size.windowHeight)
|
||||
})
|
||||
// var width = document.querySelector('.monitorDetail').clientWidth
|
||||
// var height = document.querySelector('.monitorDetail').clientHeight
|
||||
if (this.width >= this.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`,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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