山东移动
This commit is contained in:
liuye
353
src/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue
Normal file
353
src/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<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> -->
|
||||
<div class="area-content">
|
||||
<AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
|
||||
<img src="./img/local-icon.png" alt="">
|
||||
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||||
<span v-else>请选择</span>
|
||||
<u-icon name="arrow-down" color="#666" size="24"/>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="num-content">
|
||||
<!-- <img src="./img/on-icon.png" alt="">在线 {{count.online || 0}}
|
||||
<img src="./img/off-icon.png" alt="" class="mar-l40">离线 {{count.sum - count.online || 0}} -->
|
||||
<div class="item">
|
||||
<div id="echarts" style="width:100%;height:100%;"></div>
|
||||
<img src="./img/monitor-icon.png" alt="" class="monitor-icon">
|
||||
</div>
|
||||
<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">
|
||||
<div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
|
||||
<template v-if="!!row.deviceId">
|
||||
<img :src="`${$cdn}video/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> -->
|
||||
<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="./img/offline.png" alt="" v-else>
|
||||
<p>{{ item.name }}</p>
|
||||
<img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
|
||||
<img class="icon" src="./img/not-play-icon.png" alt="" v-else>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "AppVideoSurveillance",
|
||||
appName: "智慧安防",
|
||||
data() {
|
||||
return {
|
||||
nodes: [
|
||||
{nodeName: "首页"}
|
||||
],
|
||||
monitors: [],
|
||||
|
||||
areaId: '',
|
||||
areaName: '',
|
||||
list: [],
|
||||
count: {},
|
||||
Echart: null,
|
||||
onlineRate: '',
|
||||
offlineRate: ''
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user'])},
|
||||
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)
|
||||
},
|
||||
isCurrent(index) {
|
||||
return index == Math.max(this.nodes?.length - 1, 0)
|
||||
},
|
||||
gotoNode(node, index) {
|
||||
this.nodes.splice(index + 1)
|
||||
this.getMonitors(node.nodeId)
|
||||
},
|
||||
getList() {
|
||||
this.$http.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)
|
||||
this.initEchart()
|
||||
}
|
||||
})
|
||||
},
|
||||
areaSelect(e) {
|
||||
this.areaId = e
|
||||
this.getList()
|
||||
},
|
||||
showMonitor(row) {
|
||||
if (row.deviceStatus != 1) return
|
||||
uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
|
||||
},
|
||||
initEchart() {
|
||||
var option = {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '60%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: this.onlineRate},
|
||||
{value: this.offlineRate},
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
},
|
||||
normal: {
|
||||
color: function (params) {
|
||||
//自定义颜色
|
||||
var colorList = ['#3192F4', '#ccc',];
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && this.Echart.setOption(option)
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
document.title = '智慧安防'
|
||||
this.areaId = this.user.areaId
|
||||
this.areaName = this.user.areaName
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
this.Echart = echarts.init(document.getElementById('echarts'))
|
||||
}
|
||||
}
|
||||
</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%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area-content {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 64px;
|
||||
|
||||
img {
|
||||
width: 42px;
|
||||
vertical-align: middle;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.num-content {
|
||||
width: calc(100% - 40px);
|
||||
height: 164px;
|
||||
background: #EEE;
|
||||
border-radius: 16px;
|
||||
margin: 32px 0 0 20px;
|
||||
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 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: calc(50% - 36px);
|
||||
margin-right: 36px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user