523 lines
13 KiB
Vue
523 lines
13 KiB
Vue
<template>
|
|
<section class="AppVideoMonitoringDV">
|
|
<el-row type="flex" justify="space-between" class="body">
|
|
<div class="left-wrap column" flex>
|
|
<div class="left-top fill">
|
|
<label class="label">设备统计</label>
|
|
<dv-scroll-board :header="config.header" :config="config" class="table"/>
|
|
</div>
|
|
<div class="left-bottom">
|
|
<label class="label">电子地图</label>
|
|
<ai-map :areaId="user.info.areaId"/>
|
|
</div>
|
|
</div>
|
|
<div class="center-wrap column" flex>
|
|
<div flex style="width: 100%">
|
|
<div :span="6" class="card fill" v-for="(item,index) in cardList" :key="index">
|
|
<span>{{ item.label }}</span>
|
|
<span>{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="center-bottom fill">
|
|
<label class="label">视频监控</label>
|
|
<div class="video-wrap">
|
|
<div class="item" v-for="(item,index) in videoData.slice(0,2)"
|
|
:key="index">
|
|
<template v-if="flag">
|
|
<iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
|
|
allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
|
|
</template>
|
|
<template v-else>
|
|
<div class="video"></div>
|
|
</template>
|
|
<div class="info">
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="video-wrap">
|
|
<div class="item" v-for="(item,index) in videoData.slice(2,4)"
|
|
:key="index">
|
|
<template v-if="flag">
|
|
<iframe class="video" :src="item.url" allow="autoplay *; microphone *; fullscreen *"
|
|
allowfullscreen allowtransparency="true" allowusermedia="true" frameBorder="no"></iframe>
|
|
</template>
|
|
<template v-else>
|
|
<div class="video"></div>
|
|
</template>
|
|
<div class="info">
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-wrap column" flex>
|
|
<div class="right-top fill">
|
|
<label class="label">人员统计</label>
|
|
<label class="total">人员总数
|
|
<span>0</span>
|
|
<span>人</span>
|
|
</label>
|
|
<dv-scroll-board :config="config1" class="total-table"/>
|
|
</div>
|
|
<div class="right-middle">
|
|
<label class="label">动作告警统计</label>
|
|
<div class="tag">
|
|
<span></span>
|
|
</div>
|
|
<ai-echart :ops="getOpt()"/>
|
|
<div class="info">
|
|
今日
|
|
<span>0</span>
|
|
<span>次</span>
|
|
本月
|
|
<span>0</span>
|
|
<span>次</span>
|
|
</div>
|
|
</div>
|
|
<div class="right-bottom">
|
|
<label class="label">声音告警统计</label>
|
|
<div class="tag">
|
|
<span></span>
|
|
</div>
|
|
<ai-echart :ops="getOpt('1')"/>
|
|
<div class="info">
|
|
今日
|
|
<span style="color:#00FFDF">0</span>
|
|
<span>次</span>
|
|
本月
|
|
<span style="color:#00FFDF">0</span>
|
|
<span>次</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
import Vue from "vue";
|
|
import {scrollBoard} from "@jiaminghi/data-view";
|
|
|
|
Vue.use(scrollBoard)
|
|
export default {
|
|
name: "AppVideoMonitoringDV",
|
|
label: "数据大屏-平安小区",
|
|
inject: {
|
|
dv: {default: ""}
|
|
},
|
|
props: {
|
|
instance: Function
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
cardList() {
|
|
return [
|
|
{label: "总设备数", value: "0"},
|
|
{label: "在线设备", value: "0"},
|
|
{label: "离线设备", value: "0"},
|
|
{label: "设备在线率", value: "0%"},
|
|
]
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
meta: {},
|
|
config: {
|
|
data: [
|
|
],
|
|
columnWidth: [60, 140],
|
|
header: ["机构", "设备在线率"],
|
|
headerBGC: '',
|
|
headerHeight: 41,
|
|
oddRowBGC: "",
|
|
evenRowBGC: "",
|
|
align: ["center", "center", "center"],
|
|
rowNum: 10,
|
|
index: true,
|
|
indexHeader: "排名"
|
|
},
|
|
config1: {
|
|
data: [
|
|
['普通用户', '-'],
|
|
['村级管理员', '-'],
|
|
['超级管理员', '-'],
|
|
['测试', '-'],
|
|
],
|
|
headerHeight: 41,
|
|
oddRowBGC: "",
|
|
evenRowBGC: "",
|
|
align: ["left", "left", "right"],
|
|
index: true,
|
|
rowNum: 6,
|
|
columnWidth: [50]
|
|
},
|
|
start: 0,
|
|
end: 40,
|
|
start1: 0,
|
|
end1: 40,
|
|
interval: null,
|
|
videoData: [],
|
|
flag: false,
|
|
}
|
|
},
|
|
methods: {
|
|
jsonObj(val) {
|
|
return JSON.parse(val || "{}")?.url
|
|
},
|
|
getOpt(type = "0") {
|
|
let opt = {
|
|
"0": {
|
|
xData: ['2020/7/1', "2020/7/2", "2020/7/3", "2020/7/4", "2020/7/5", "2020/7/6", "2020/7/7", "2020/7/8", "2020/7/9", "2020/7/10", "2020/7/11"],
|
|
yData: Array(11).fill(0),
|
|
color: "#FFEA2F",
|
|
areaStyle: 'rgba(255,234,47,0.2)',
|
|
unit: '',
|
|
},
|
|
"1": {
|
|
xData: ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00"],
|
|
yData: Array(10).fill(0),
|
|
color: "#13B5B1",
|
|
areaStyle: 'rgba(255,234,47,0.2)',
|
|
unit: '次',
|
|
},
|
|
}
|
|
return {
|
|
grid: {
|
|
top: "5%",
|
|
left: "16%",
|
|
right: "3%",
|
|
bottom: "12%"
|
|
},
|
|
xAxis: {
|
|
show: true,
|
|
boundaryGap: false,
|
|
type: 'category',
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#5E9CEA",
|
|
fontSize: 12
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: opt[type]["xData"]
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
show: true,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: ['#103066'],
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
formatter: (val) => `${val}${opt[type]["unit"]}`,
|
|
textStyle: {
|
|
color: "#5E9CEA",
|
|
fontSize: 12
|
|
}
|
|
},
|
|
},
|
|
series: [{
|
|
symbol: "none",
|
|
data: opt[type]["yData"],
|
|
type: 'line',
|
|
itemStyle: {
|
|
normal: {
|
|
color: opt[type]["color"],
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear', x2: 0, y2: 1, colorStops: [
|
|
{offset: 0, color: opt[type]["areaStyle"]}, {offset: 1, color: '#000000'}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
getWebSdkUrlForScreen() {
|
|
this.instance.post(`/app/appzyvideoequipment/getWebSdkUrlForTianQiaoScreen`).then(res => {
|
|
if (res.code == 0) {
|
|
this.videoData = res.data
|
|
this.flag = true
|
|
}
|
|
})
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.interval && clearInterval(this.interval);
|
|
},
|
|
mounted() {
|
|
// this.getWebSdkUrlForScreen()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppVideoMonitoringDV {
|
|
height: 100%;
|
|
padding: 6px 0 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
|
|
.body {
|
|
height: 100%;
|
|
|
|
.left-wrap {
|
|
width: 307px;
|
|
height: 100%;
|
|
|
|
.left-top {
|
|
width: 100%;
|
|
background-image: url("./assets/videoMonitor/box1.png");
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.table {
|
|
box-sizing: border-box;
|
|
padding: 63px 17px 17px;
|
|
}
|
|
}
|
|
|
|
.left-bottom {
|
|
width: 100%;
|
|
height: 311px;
|
|
background-image: url("./assets/videoMonitor/box2.png");
|
|
background-size: 100% 100%;
|
|
margin-top: 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.AiMap {
|
|
width: 274px;
|
|
height: 247px;
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.center-wrap {
|
|
width: 1183px;
|
|
height: 100%;
|
|
|
|
.card {
|
|
height: 93.3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url("./assets/videoMonitor/card.png");
|
|
background-size: 100% 100%;
|
|
margin-right: 24px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
& > span:first-child {
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
& > span:last-child {
|
|
font-size: 38px;
|
|
font-family: dineng, serif;
|
|
font-weight: bold;
|
|
color: #00EDFF;
|
|
margin-left: 13px;
|
|
}
|
|
}
|
|
|
|
.center-bottom {
|
|
width: 100%;
|
|
height: 789px;
|
|
background-image: url("./assets/videoMonitor/middlebox.png");
|
|
background-size: 100% 100%;
|
|
margin-top: 40px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 61px;
|
|
|
|
.video-wrap {
|
|
width: 100%;
|
|
height: 344px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
|
|
.item {
|
|
.video {
|
|
width: 522px;
|
|
height: 296px;
|
|
object-fit: fill;
|
|
vertical-align: bottom;
|
|
border: 2px solid #122C7D;
|
|
}
|
|
|
|
.info {
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
background-color: #071153;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-wrap {
|
|
width: 297px;
|
|
height: 100%;
|
|
|
|
.right-top {
|
|
width: 100%;
|
|
height: 333px;
|
|
background-image: url("./assets/videoMonitor/box3.png");
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.total {
|
|
font-size: 16px;
|
|
color: #979AB7;
|
|
display: inline-block;
|
|
margin: 65px 0 16px 23px;
|
|
|
|
& > span:nth-child(1) {
|
|
font-size: 28px;
|
|
font-family: dineng, serif;
|
|
font-weight: bold;
|
|
color: #01CAFF;
|
|
}
|
|
|
|
& > span:nth-child(2) {
|
|
font-size: 16px;
|
|
color: #01CAFF;
|
|
}
|
|
}
|
|
|
|
.total-table {
|
|
height: 200px;
|
|
box-sizing: border-box;
|
|
padding: 0 23px;
|
|
}
|
|
}
|
|
|
|
.right-middle, .right-bottom {
|
|
width: 100%;
|
|
height: 276px;
|
|
background-image: url("./assets/videoMonitor/box4.png");
|
|
background-size: 100% 100%;
|
|
margin: 19px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.tag {
|
|
margin: 28px 18px 0 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 12px;
|
|
color: #5E9CEA;
|
|
|
|
& > span {
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
display: inline-block;
|
|
width: 34px;
|
|
height: 17px;
|
|
text-align: center;
|
|
line-height: 18px;
|
|
margin-left: 14px;
|
|
}
|
|
}
|
|
|
|
::v-deep .AiEchart {
|
|
width: 251px;
|
|
height: 175px;
|
|
margin: 11px auto 0;
|
|
}
|
|
|
|
.info {
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
line-height: 24px;
|
|
box-sizing: border-box;
|
|
padding: 15px 19px 0;
|
|
|
|
& > span:nth-child(2n+1) {
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
color: #FFE930;
|
|
}
|
|
|
|
& > span:nth-child(2n) {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #FFE930;
|
|
line-height: 24px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
& > span:nth-child(2) {
|
|
margin-right: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-bottom {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.label {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 23px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
::v-deep .index {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
::v-deep .header {
|
|
background: url("./assets/videoMonitor/titlebox.png");
|
|
}
|
|
|
|
::v-deep .row-item div:nth-child(3) {
|
|
font-size: 13px;
|
|
color: #00CDFF;
|
|
}
|
|
}
|
|
</style>
|