568 lines
24 KiB
Vue
568 lines
24 KiB
Vue
|
<template>
|
|||
|
<div class="project-aivideo">
|
|||
|
<div class="ai-content">
|
|||
|
<el-row>
|
|||
|
<el-col :span="6">
|
|||
|
<!--<div class="ai-content-padding">
|
|||
|
<div class="ai-video-survey">
|
|||
|
<div class="ai-video-title">
|
|||
|
<div>视频概况</div>
|
|||
|
</div>
|
|||
|
<div class="czz-number">
|
|||
|
<div class="czz-number-content">
|
|||
|
<div class="czz-number-img czz-number-img-blue">
|
|||
|
<img src="/images/circle_icon_12.png">
|
|||
|
</div>
|
|||
|
<div class="survey_content_number">
|
|||
|
<p>区域内人数</p>
|
|||
|
<div class="survey_content_value"><span>1000</span> 人</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div class="czz-number-content">
|
|||
|
<div class="czz-number-img czz-number-img-green">
|
|||
|
<img src="/images/circle_icon_13.png">
|
|||
|
</div>
|
|||
|
<div class="survey_content_number">
|
|||
|
<p>进入车辆</p>
|
|||
|
<div class="survey_content_value survey_content_value_color_green"><span>1000</span> 台</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>-->
|
|||
|
<div class="ai-content-padding">
|
|||
|
<div class="ai-warning-distribution">
|
|||
|
<div class="ai-video-title">
|
|||
|
<div>预警概况</div>
|
|||
|
</div>
|
|||
|
<div style="padding-top: 90px;">
|
|||
|
<project-overview-chart :typedata="scaleData" text="预警总次数" :height="230"></project-overview-chart>
|
|||
|
</div>
|
|||
|
|
|||
|
<!-- <cz-warning-survey :height="425" :distribute="scaleData"></cz-warning-survey>-->
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div class="ai-content-padding">
|
|||
|
<div class="ai-warning-distribution">
|
|||
|
<div class="ai-video-title">
|
|||
|
<div>预警分布</div>
|
|||
|
</div>
|
|||
|
<cz-distribution-echart :height="455" :distribute="distributeData"></cz-distribution-echart>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</el-col>
|
|||
|
<el-col :span="12">
|
|||
|
<div class="ai-video-info">
|
|||
|
|
|||
|
<div class="ai-video-info-flex">
|
|||
|
<!-- <div class="ai-video-info-return" @click="goVideoPage">
|
|||
|
<img src="/images/return_icon.png"><span>返回视频管理</span>
|
|||
|
</div>-->
|
|||
|
<div class="ai-content-nav-max" style="width: 100% ">
|
|||
|
<div class="ai-content-nav-min" v-for="(alertorType,index) in alertorTypeList">
|
|||
|
<div class="ai-content-nav-con">
|
|||
|
<div :class="nav == index?'ai-content-nav active':'ai-content-nav'" @click="aiNav(index,alertorType.alertor_id)" v-html="alertorType.alertor_type_name">
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
|
|||
|
|
|||
|
<div class="ai-content-info-max">
|
|||
|
<el-row>
|
|||
|
<el-col style="position: relative;" :span="8" v-for="(video,index) in videoList">
|
|||
|
<div class="ai-content-info-min">
|
|||
|
<div class="ai-content-videos">
|
|||
|
<hkplay v-if="video.video_token" :token="video.video_token" :playtype="1" :full-state="1" :playstate="video.video_state" :playimg-state="1" :height="220"></hkplay>
|
|||
|
<div class="ai-video-name" style="height:45px;line-height: 45px;padding: 0 15px;">
|
|||
|
<span>{{video.video_name}}</span>
|
|||
|
</div>
|
|||
|
<div v-if="video.state == 1" class="style-con style-red"></div>
|
|||
|
<div v-if="video.state == 0" class="style-con style-green"></div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</el-col>
|
|||
|
</el-row>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div class="ai-content-padding">
|
|||
|
<div class="ai-key-videos">
|
|||
|
<div class="ai-video-title">
|
|||
|
<div>重点视频</div>
|
|||
|
<div class="ai-video-number">重点关注 视频(<span v-html="majorVideoList.length">0</span>)</div>
|
|||
|
</div>
|
|||
|
<div class="ai-key-videos-info" style="height: 80%;">
|
|||
|
<!--<div class="ai-slip">
|
|||
|
<img src="/images/ai/left_slip.png" id="leftSlip">
|
|||
|
</div>-->
|
|||
|
<div class="ai-key-videos-content" id="videosContent">
|
|||
|
<div class="ai-key-videos-max" style="position: relative;" v-for="(video,index) in majorVideoList">
|
|||
|
<div class="ai-key-videos-min">
|
|||
|
<hkplay v-if="video.video_token" :token="video.video_token" :playtype="1" :full-state="1" :playstate="video.video_state" :playimg-state="1" :height="200"></hkplay>
|
|||
|
<div class="ai-video-name" style="height:40px;line-height: 40px;padding: 0 15px;">
|
|||
|
<span>{{video.video_name}}</span>
|
|||
|
</div>
|
|||
|
<div v-if="video.state == 1" class="style-con style-red"></div>
|
|||
|
<div v-if="video.state == 0" class="style-con style-green"></div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
</div>
|
|||
|
<!--<div class="ai-slip">
|
|||
|
<img src="/images/ai/right_slip.png" id="rightSlip">
|
|||
|
</div>-->
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</el-col>
|
|||
|
<el-col :span="6">
|
|||
|
<div class="ai-content-padding">
|
|||
|
<div class="ai-warning-list">
|
|||
|
<div class="ai-video-title">
|
|||
|
<div>预警列表</div>
|
|||
|
<div class="ai-video-number">预警总数(<span v-html="warningList.length">0</span>)</div>
|
|||
|
</div>
|
|||
|
<div class="ai-warning-list-content">
|
|||
|
<div class="ai-warning-list-max" id="warningListMax">
|
|||
|
<div id="warningListMin">
|
|||
|
<div class="ai-warning-list-min" v-for="item in warningList" >
|
|||
|
<div class="ai-warning-list-info">
|
|||
|
<div class="ai-warning-list-title">
|
|||
|
<div v-html="item.dateTime"></div>
|
|||
|
<img src="/images/ai/open.png" @click="amplify(item.photo)">
|
|||
|
</div>
|
|||
|
<div class="ai-warning-list-details">
|
|||
|
<div class="ai-warning-list-details-img">
|
|||
|
<img :src="item.photo">
|
|||
|
</div>
|
|||
|
<div class="ai-warning-list-details-con">
|
|||
|
<p v-html="item.alertor_type_name"></p>
|
|||
|
<div v-html="item.stream_name"></div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</el-col>
|
|||
|
</el-row>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
|
|||
|
import '../components/module/module-one-2-1'
|
|||
|
import '../components/module/module-one-3-1'
|
|||
|
import '../components/module/module-one-0-5'
|
|||
|
import '../components/module/module-one-video'
|
|||
|
import '../components/background_video'
|
|||
|
import '../components/staff-survey-chart'
|
|||
|
import '../components/classify-bar'
|
|||
|
import '../components/amplify/shipinguanli/amplify-spjk'
|
|||
|
import debounce from 'lodash.debounce'
|
|||
|
export default {
|
|||
|
data() {
|
|||
|
return {
|
|||
|
active:3,
|
|||
|
scrollLeft:'',
|
|||
|
nav:0,
|
|||
|
alertorId:0,
|
|||
|
videoList:[],
|
|||
|
scaleData:[],
|
|||
|
majorVideoList:[],
|
|||
|
alertorTypeList:[],
|
|||
|
warningList:[],
|
|||
|
distributeData:{},
|
|||
|
ptz: false,
|
|||
|
autoPlay:true,
|
|||
|
popupUrl:'',
|
|||
|
popupShow:false
|
|||
|
|
|||
|
}
|
|||
|
},
|
|||
|
mounted() {
|
|||
|
this.$bus.$on("projectChange", debounce(res => {
|
|||
|
this.projectInfo=res;
|
|||
|
this.initVideoMenu();
|
|||
|
}));
|
|||
|
this.$bus.$on("loadProjects", debounce(prjs => {
|
|||
|
this.projectInfos = prjs;
|
|||
|
//this.initVideoMenu();
|
|||
|
}))
|
|||
|
this.$bus.$on("deptChange", debounce(dept => {
|
|||
|
this.dept = dept;
|
|||
|
//this.initVideoMenu();
|
|||
|
}));
|
|||
|
if(this.$root.hasInitHeader){
|
|||
|
this.initMe();
|
|||
|
}
|
|||
|
},
|
|||
|
created() {
|
|||
|
this.init()
|
|||
|
},
|
|||
|
computed: {
|
|||
|
playDivCss() {
|
|||
|
return {
|
|||
|
width: (this.width + "").replace("px", "") + "px",
|
|||
|
height: (this.height + "").replace("px", "") + "px",
|
|||
|
position: "relative"
|
|||
|
}
|
|||
|
},
|
|||
|
exStyle() {
|
|||
|
return {
|
|||
|
textAlign: "center",
|
|||
|
width: (this.width + "").replace("px", "") + "px",
|
|||
|
height: (this.height + "").replace("px", "") + "px"
|
|||
|
}
|
|||
|
},
|
|||
|
PTZDiv() {
|
|||
|
let W = parseInt((this.width + "").replace("px", ""))
|
|||
|
let H = parseInt((this.height + "").replace("px", ""))
|
|||
|
if (W < 400) {
|
|||
|
W = "100px"
|
|||
|
H = "100px"
|
|||
|
} else {
|
|||
|
W = "150px"
|
|||
|
H = "150px"
|
|||
|
}
|
|||
|
return {
|
|||
|
backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
|
|||
|
width: W,
|
|||
|
height: H,
|
|||
|
backgroundSize: "100%",
|
|||
|
position: "relative"
|
|||
|
}
|
|||
|
},
|
|||
|
PTZTop() {
|
|||
|
return {
|
|||
|
width: "33%",
|
|||
|
height: "25%",
|
|||
|
position: "absolute",
|
|||
|
top: "0px",
|
|||
|
left: "33%",
|
|||
|
cursor: "pointer"
|
|||
|
}
|
|||
|
},
|
|||
|
PTZBottom() {
|
|||
|
return {
|
|||
|
width: "33%",
|
|||
|
height: "25%",
|
|||
|
position: "absolute",
|
|||
|
bottom: "0px",
|
|||
|
left: "33%",
|
|||
|
cursor: "pointer"
|
|||
|
}
|
|||
|
},
|
|||
|
PTZLeft() {
|
|||
|
return {
|
|||
|
width: "25%",
|
|||
|
height: "33%",
|
|||
|
position: "absolute",
|
|||
|
top: "33%",
|
|||
|
left: "0px",
|
|||
|
cursor: "pointer"
|
|||
|
}
|
|||
|
},
|
|||
|
PTZRight() {
|
|||
|
return {
|
|||
|
width: "25%",
|
|||
|
height: "33%",
|
|||
|
position: "absolute",
|
|||
|
top: "33%",
|
|||
|
right: "0px",
|
|||
|
cursor: "pointer"
|
|||
|
}
|
|||
|
},
|
|||
|
VIBtnCss() {
|
|||
|
return {
|
|||
|
width: "30px",
|
|||
|
height: "30px",
|
|||
|
background: "#38314b",
|
|||
|
border: "1px solid #38314b",
|
|||
|
fontSize: "20px",
|
|||
|
outline: "0",
|
|||
|
color: "#FFFFFF"
|
|||
|
}
|
|||
|
},
|
|||
|
zoomViewCss() {
|
|||
|
return {
|
|||
|
width: "75px",
|
|||
|
height: "30px",
|
|||
|
color: "#dddddd",
|
|||
|
background: "rgba(65, 63, 70, 0.5)",
|
|||
|
textAlign: "center",
|
|||
|
border: "0px solid rgba(65, 63, 70, 0.5)",
|
|||
|
outline: "0",
|
|||
|
fontSize: "14px"
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
methods: {
|
|||
|
initMe(){
|
|||
|
this.projectInfo=this.$root.project;
|
|||
|
this.dept=this.$root.dept;
|
|||
|
this.projectInfos=this.$root.projects;
|
|||
|
this.initVideoMenu();
|
|||
|
},
|
|||
|
init(){
|
|||
|
this.getAlertorTypeList();
|
|||
|
this.getAiVideoInfoList();
|
|||
|
this.getAnalysisDetailList();
|
|||
|
this.getMajorAiVideoInfoList();
|
|||
|
this.getAiVideoAlertorTypeCount();
|
|||
|
this.getAiVideoAlertorTypeWarningCount();
|
|||
|
|
|||
|
|
|||
|
},
|
|||
|
//head选择项目返回值
|
|||
|
onItemData(e){
|
|||
|
if(e.type == 1){
|
|||
|
location.href = '/weixin/screen/toVideo'
|
|||
|
}else{
|
|||
|
location.href = '/weixin/screen/toVideoProject'
|
|||
|
}
|
|||
|
},
|
|||
|
amplify(url){
|
|||
|
this.popupUrl = url
|
|||
|
this.popupShow = true
|
|||
|
},
|
|||
|
getAlertorTypeList(){
|
|||
|
axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
|
|||
|
projectId: JSON.parse(localStorage.getItem("data")).aqzg
|
|||
|
}).then(res => {
|
|||
|
var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}];
|
|||
|
var data = res.data;
|
|||
|
|
|||
|
data.forEach(item =>{
|
|||
|
list.push(item)
|
|||
|
})
|
|||
|
if(JSON.parse(localStorage.getItem("data")).id == "98") {
|
|||
|
var newArr = [];
|
|||
|
newArr.push(list[0]);
|
|||
|
newArr.push(data[1])
|
|||
|
newArr.push(data[3])
|
|||
|
newArr.push(data[2])
|
|||
|
newArr.push(data[0])
|
|||
|
this.alertorTypeList = newArr;
|
|||
|
} else {
|
|||
|
this.alertorTypeList = list;
|
|||
|
}
|
|||
|
}).catch(err => {
|
|||
|
})
|
|||
|
},
|
|||
|
getAiVideoInfoList(){
|
|||
|
axios.post(Host + "/api/video/getAiVideoInfoList", {
|
|||
|
projectId:JSON.parse(localStorage.getItem("data")).aqzg,
|
|||
|
alertorId: this.alertorId
|
|||
|
}).then(res => {
|
|||
|
var data = res.data;
|
|||
|
if(data.length < 6){
|
|||
|
var len = 6 - data.length
|
|||
|
for (let i = 0; i < len ; i++) {
|
|||
|
data.push({})
|
|||
|
}
|
|||
|
}
|
|||
|
this.videoList = data;
|
|||
|
}).catch(err => {
|
|||
|
})
|
|||
|
},
|
|||
|
getMajorAiVideoInfoList(){
|
|||
|
axios.post(Host + "/api/video/getAiVideoInfoList", {
|
|||
|
projectId: JSON.parse(localStorage.getItem("data")).aqzg,
|
|||
|
majorState: "1",
|
|||
|
alertorId: this.alertorId
|
|||
|
}).then(res => {
|
|||
|
var data = res.data;
|
|||
|
/*if(data.length < 4){
|
|||
|
var len = 4 - data.length
|
|||
|
for (let i = 0; i < len ; i++) {
|
|||
|
data.push({})
|
|||
|
}
|
|||
|
}*/
|
|||
|
this.majorVideoList = data;
|
|||
|
}).catch(err => {
|
|||
|
})
|
|||
|
},
|
|||
|
getAnalysisDetailList(){
|
|||
|
axios.post(Host + "/api/video/getAnalysisDetailList", {
|
|||
|
projectId: JSON.parse(localStorage.getItem("data")).aqzg,
|
|||
|
dataNum:50
|
|||
|
}).then(res => {
|
|||
|
var warningList = res.data;
|
|||
|
// for (let i = 0; i < 5; i++) {
|
|||
|
// warningList.push(warningList[i])
|
|||
|
// }
|
|||
|
this.warningList = warningList
|
|||
|
rolling("warningListMax","warningListMin")
|
|||
|
}).catch(err => {
|
|||
|
})
|
|||
|
},
|
|||
|
getAiVideoAlertorTypeCount(){
|
|||
|
axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
|
|||
|
projectId: JSON.parse(localStorage.getItem("data")).aqzg
|
|||
|
}).then(res => {
|
|||
|
var data = res.data;
|
|||
|
var num = 0;
|
|||
|
data.forEach(item =>{
|
|||
|
num += item.value;
|
|||
|
})
|
|||
|
data.forEach(item =>{
|
|||
|
item.percent = (item.value/num*100).toFixed(2)
|
|||
|
})
|
|||
|
this.scaleData = data;
|
|||
|
}).catch(err => {
|
|||
|
})
|
|||
|
},
|
|||
|
getAiVideoAlertorTypeWarningCount(){
|
|||
|
axios.post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
|
|||
|
projectId: JSON.parse(localStorage.getItem("data")).aqzg
|
|||
|
}).then(res => {
|
|||
|
//预警分布
|
|||
|
var distributeData={
|
|||
|
legend:["接入视频", "预警路数"],
|
|||
|
color:[],
|
|||
|
yAxis:[],
|
|||
|
data:[]
|
|||
|
}
|
|||
|
var data = res.data;
|
|||
|
var data1 = [];
|
|||
|
var data2 = [];
|
|||
|
data.forEach(item =>{
|
|||
|
distributeData.yAxis.push(item.alertor_type_name)
|
|||
|
data1.push(item.total)
|
|||
|
data2.push(item.yjTotal)
|
|||
|
})
|
|||
|
var color1 = ["#183e65","#4bbcff"];
|
|||
|
var color2 = ["#225254","#5cd6ad"];
|
|||
|
distributeData.data.push(data1)
|
|||
|
distributeData.data.push(data2)
|
|||
|
distributeData.color.push(color1)
|
|||
|
distributeData.color.push(color2)
|
|||
|
this.distributeData = distributeData
|
|||
|
}).catch(err => {
|
|||
|
})
|
|||
|
},
|
|||
|
aiNav(n,id){
|
|||
|
this.nav = n
|
|||
|
this.alertorId = id;
|
|||
|
this.getAiVideoInfoList();
|
|||
|
},
|
|||
|
//预警概况 Echart
|
|||
|
warningChart(data,id){
|
|||
|
let newPromise = new Promise((resolve) => {
|
|||
|
resolve()
|
|||
|
})
|
|||
|
//然后异步执行echarts的初始化函数
|
|||
|
newPromise.then(() => {
|
|||
|
var myChart = echarts.init(document.getElementById(id));
|
|||
|
option = {
|
|||
|
color: [
|
|||
|
"#00fff1",
|
|||
|
"#04c8fa",
|
|||
|
"#aa01fe",
|
|||
|
"#4e84fe",
|
|||
|
"#ff7b79",
|
|||
|
"#edae5e",
|
|||
|
"#fe4101",
|
|||
|
"#14d18f",
|
|||
|
],
|
|||
|
series: [
|
|||
|
// 主要展示层的
|
|||
|
{
|
|||
|
radius: ["45%", "60%"],
|
|||
|
center: ["50%", "50%"],
|
|||
|
type: "pie",
|
|||
|
label: {
|
|||
|
normal: {
|
|||
|
show: true,
|
|||
|
formatter: function (params) {
|
|||
|
return params.value +" "+ params.percent + "%\n{white|" +params.name +"}" ;
|
|||
|
},
|
|||
|
rich:{
|
|||
|
white: {
|
|||
|
color: "#c5d9fe",
|
|||
|
align: "center",
|
|||
|
padding: [0,0,5],
|
|||
|
},
|
|||
|
},
|
|||
|
textStyle: {
|
|||
|
fontSize: 14,
|
|||
|
},
|
|||
|
position: "outside",
|
|||
|
},
|
|||
|
emphasis: {
|
|||
|
show: true,
|
|||
|
},
|
|||
|
},
|
|||
|
labelLine: {
|
|||
|
normal: {
|
|||
|
show: true,
|
|||
|
length: 20,
|
|||
|
length2: 25,
|
|||
|
},
|
|||
|
emphasis: {
|
|||
|
show: true,
|
|||
|
},
|
|||
|
},
|
|||
|
data: data,
|
|||
|
},
|
|||
|
{
|
|||
|
name: "外边框",
|
|||
|
type: "pie",
|
|||
|
clockWise: false, //顺时加载
|
|||
|
hoverAnimation: false, //鼠标移入变大
|
|||
|
center: ["50%", "50%"],
|
|||
|
radius: ["70%", "70%"],
|
|||
|
label: {
|
|||
|
normal: {
|
|||
|
show: false,
|
|||
|
},
|
|||
|
},
|
|||
|
data: [
|
|||
|
{
|
|||
|
value: 1,
|
|||
|
name: "",
|
|||
|
itemStyle: {
|
|||
|
normal: {
|
|||
|
borderWidth: 3,
|
|||
|
borderColor: "#57639d",
|
|||
|
},
|
|||
|
},
|
|||
|
},
|
|||
|
],
|
|||
|
},
|
|||
|
],
|
|||
|
};
|
|||
|
myChart.setOption(option);
|
|||
|
window.onresize = myChart.resize;
|
|||
|
})
|
|||
|
},
|
|||
|
goVideoPage() {
|
|||
|
location.href="/weixin/screen/toVideoProject"
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
};
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="less" >
|
|||
|
.project-video {}
|
|||
|
|
|||
|
.videoView {
|
|||
|
color: aliceblue;
|
|||
|
float: left;
|
|||
|
width: 50%;
|
|||
|
height: 452.5px;
|
|||
|
}
|
|||
|
.videoViewError {
|
|||
|
background-color: #575e65;
|
|||
|
text-align: center;
|
|||
|
line-height: 420px;
|
|||
|
}
|
|||
|
</style>
|