jhbigscreen/src/pages/toAIVideoProject.vue

568 lines
24 KiB
Vue
Raw Normal View History

2023-10-07 00:48:12 +08:00
<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>