sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
jhbigscreen/src/pages/toAIVideoProject.vue

759 lines
30 KiB
Vue
Raw Normal View History

update code
2023-10-07 00:48:12 +08:00
<template>
<div class="project-aivideo">
提交
2023-10-12 23:13:57 +08:00
<div class="screen-content">
update code
2023-10-07 00:48:12 +08:00
<el-row>
<el-col :span="6">
提交代码
2023-10-14 18:28:58 +08:00
<module-one-2-1 label="预警概况">
<div class="labour-warning-title">
<div class="labour-warning-img">
<div class="labour-warning-bgd">
提交代码
2023-10-14 19:00:13 +08:00
<img src="images/labour_warning_icon.png">
提交代码
2023-10-14 18:28:58 +08:00
</div>
</div>
<div class="labour-warning-data">
<p>今日预警</p>
<div class="labour-warning-number">
<span>{{overviewTotalDay}}</span> 次
</div>
</div>
<div class="labour-warning-data">
<p>累计预警</p></p></p>
<div class="labour-warning-number">
<span>{{overviewTotal}}</span> 次
</div>
</div></div>
<project-overview-chart :key="overviewDay" :sp="''"
:maintitle="overviewTotalDay" :legend-opt="legendOpt2" :typedata="typeDistributionDataDay"
:text="overviewTextDay" :height="250"></project-overview-chart>
提交代码
2023-10-13 04:00:16 +08:00
提交代码
2023-10-14 18:28:58 +08:00
<project-overview-chart :key="overview" :sp="''"
:maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
:text="overviewText" :height="250"></project-overview-chart>
提交
2023-10-12 23:13:57 +08:00
</module-one-2-1>
提交代码
2023-10-14 18:28:58 +08:00
<module-one-1-1 label="预警分布">
<rank-chart :data="availabilityData" :showval="true" :height="300"></rank-chart>
</module-one-1-1>
update code
2023-10-07 00:48:12 +08:00
</el-col>
<el-col :span="12">
<div class="ai-video-info">
<div class="ai-video-info-flex">
<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">
提交
2023-10-12 23:13:57 +08:00
<div :class="nav == index?'ai-content-nav active':'ai-content-nav'" @click="aiNav(index,alertorType.dictValue)" v-html="alertorType.dictLabel">
update code
2023-10-07 00:48:12 +08:00
</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">
提交代码
2023-10-13 04:00:16 +08:00
<div class="ai-content-videos" :class="video.state?'active-video':'videobo'">
<H265Player v-if="video.state" :url="getVideoUrl(video)"/>
<div class="ai-video-name" style="position: absolute;height: 35px;line-height: 35px;padding: 0px 15px;z-index: 99999;bottom: 8px;font-size: 13px;">
<span v-if="video.state">{{video.videoName}}（{{video.passageName}}）</span>
update code
2023-10-07 00:48:12 +08:00
</div>
提交代码
2023-10-13 04:00:16 +08:00
<div v-if="video.state" class="style-con style-red"></div>
<div v-if="video.state" class="style-con style-green"></div>
update code
2023-10-07 00:48:12 +08:00
</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>
提交代码
2023-10-13 04:00:16 +08:00
<div class="ai-video-number">重点关注 视频（{{majorVideoSize}}）</div>
update code
2023-10-07 00:48:12 +08:00
</div>
提交代码
2023-10-13 04:00:16 +08:00
<div class="ai-key-videos-info">
<!-- <div class="ai-slip">
update code
2023-10-07 00:48:12 +08:00
<img src="/images/ai/left_slip.png" id="leftSlip">
提交代码
2023-10-13 04:00:16 +08:00
</div> -->
update code
2023-10-07 00:48:12 +08:00
<div class="ai-key-videos-content" id="videosContent">
<div class="ai-key-videos-max" style="position: relative;" v-for="(video,index) in majorVideoList">
提交代码
2023-10-13 04:00:16 +08:00
<div class="ai-key-videos-min" :class="video.state?'imp-video':'videobo'">
<H265Player v-if="video.state" :url="getVideoUrl(video)"/>
<div class="ai-video-name" style="position: absolute;height: 35px;line-height: 35px;padding: 0px 15px;z-index: 99999;bottom: 8px;font-size: 13px;">
<span v-if="video.state">{{video.videoName}}（{{video.passageName}}）</span>
update code
2023-10-07 00:48:12 +08:00
</div>
提交代码
2023-10-13 04:00:16 +08:00
<div v-if="video.state" class="style-con style-red"></div>
<div v-if="video.state" class="style-con style-green"></div>
update code
2023-10-07 00:48:12 +08:00
</div>
</div>
</div>
提交代码
2023-10-13 04:00:16 +08:00
<!-- <div class="ai-slip">
update code
2023-10-07 00:48:12 +08:00
<img src="/images/ai/right_slip.png" id="rightSlip">
提交代码
2023-10-13 04:00:16 +08:00
</div> -->
update code
2023-10-07 00:48:12 +08:00
</div>
</div>
</div>
</el-col>
<el-col :span="6">
提交代码
2023-10-13 04:00:16 +08:00
<div class="ai-content-padding">
<div class="ai-warning-list">
<div class="ai-video-title">
提交
2023-10-13 23:57:20 +08:00
<div>最新预警 <span class="ai-video-number">（<span v-html="warningList.length">0</span>）</span></div>
update code
2023-10-07 00:48:12 +08:00
</div>
提交代码
2023-10-13 04:00:16 +08:00
<div class="ai-warning-list-content">
<div class="ai-warning-list-max scroll" id="warningListMax" style="overflow-y:auto">
<div id="warningListMin">
提交
2023-10-13 23:57:20 +08:00
<div class="project-expect-list active" v-for="(item,idx) in warningList" v-if="idx<50">
提交代码
2023-10-13 04:00:16 +08:00
<div class="project-expect-con">
<div class="project-expect-title">
<div class="project-expect-title-No">{{item.projectName}}</div>
</div>
<div class="project-expect-info">
<el-image :src="getImageUrl(item)" :preview-src-list="[$apiPath + item.imageUrl]"></el-image>
</div>
<div class="project-expect-info">
<div class="el-row" style="padding-top: 5px;">单位名称：{{item.deptName}}</div>
<div class="el-row" style="padding-top: 5px;">预警类型：{{item.alarmTypeName}}</div>
<div class="el-row" style="padding-top: 5px;">预警时间：<span class="project-expect-time">{{item.createTime}}</span></div>
</div>
</div>
</div>
update code
2023-10-07 00:48:12 +08:00
</div>
</div>
</div>
提交代码
2023-10-13 04:00:16 +08:00
</div>
</div>
update code
2023-10-07 00:48:12 +08:00
</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'
提交代码
2023-10-13 04:00:16 +08:00
import '../components/project-overview-chart'
import '../components/rank-chart'
update code
2023-10-07 00:48:12 +08:00
import debounce from 'lodash.debounce'
export default {
data() {
return {
active:3,
提交代码
2023-10-13 04:00:16 +08:00
scrollLeft:'',
nav:0,
alertorId:0,
videoList:[],
scaleData:[],
majorVideoList:[],
alertorTypeList:[],
warningList:[],
distributeData:{},
ptz: false,
autoPlay:true,
popupUrl:'',
popupShow:false,
majorVideoSize:0,
//预警概况
overview: 0,
overviewInterval: '',
提交代码
2023-10-14 18:28:58 +08:00
overviewTotal: 0,
提交代码
2023-10-13 04:00:16 +08:00
legendOpt1: {
icon: "rect",
textStyle: {
fontSize: 14,
rich: {
name: {
color: "#c3dbfd",
padding: [10, 5, 20, 5],
},
percent: {
color: "#4676FD",
padding: [10, 5, 20, 5],
},
},
},
},
提交代码
2023-10-14 18:28:58 +08:00
overviewText: '累计预警',
提交代码
2023-10-13 04:00:16 +08:00
//原因类型分析
availabilityData: [],
projectCategoryWidth: 200,
提交
2023-10-13 23:57:20 +08:00
//预警概况
typeDistributionData: [
提交代码
2023-10-14 18:28:58 +08:00
{ name: '未戴安全帽', value: '0' },
{ name: '未穿工服', value: '0' },
{ name: '反光衣/带检测', value: '0' }
],
overviewTextDay: '今日预警',
overviewTotalDay: 0,
overviewDay: 999,
legendOpt2: {
icon: "rect",
textStyle: {
fontSize: 14,
rich: {
name: {
color: "#c3dbfd",
padding: [10, 5, 20, 5],
},
percent: {
color: "#f73647",
padding: [10, 5, 20, 5],
},
},
},
},
typeDistributionDataDay: [
{ name: '未戴安全帽', value: '0' },
{ name: '未穿工服', value: '0' },
{ name: '反光衣/带检测', value: '0' }
提交
2023-10-13 23:57:20 +08:00
],
update code
2023-10-07 00:48:12 +08:00
}
},
mounted() {
this.$bus.$on("projectChange", debounce(res => {
this.projectInfo=res;
提交代码
2023-10-14 19:00:13 +08:00
this.init();
update code
2023-10-07 00:48:12 +08:00
}));
this.$bus.$on("loadProjects", debounce(prjs => {
this.projectInfos = prjs;
提交代码
2023-10-14 19:00:13 +08:00
this.init();
update code
2023-10-07 00:48:12 +08:00
}))
this.$bus.$on("deptChange", debounce(dept => {
this.dept = dept;
提交代码
2023-10-14 19:00:13 +08:00
this.init();
update code
2023-10-07 00:48:12 +08:00
}));
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(){
提交代码
2023-10-13 04:00:16 +08:00
this.projectInfo=this.$root.project;
this.dept=this.$root.dept;
this.projectInfos=this.$root.projects;
update code
2023-10-07 00:48:12 +08:00
},
init(){
this.getAlertorTypeList();
提交代码
2023-10-13 04:00:16 +08:00
this.getAiVideoInfoList("","");
update code
2023-10-07 00:48:12 +08:00
this.getMajorAiVideoInfoList();
提交代码
2023-10-13 04:00:16 +08:00
this.getAnalysisDetailList();
提交代码
2023-10-14 18:28:58 +08:00
this.getAiVideoAlertorTypeCount();
this.initAiVideoAlertorTypeDistribution();
update code
2023-10-07 00:48:12 +08:00
},
//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(){
提交
2023-10-12 23:13:57 +08:00
// 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;
update code
2023-10-07 00:48:12 +08:00
提交
2023-10-12 23:13:57 +08:00
// 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 => {
// })
this.$api.dict('aibox_alarm_type').then(d => {
this.alertorTypeList = d || [];
提交代码
2023-10-13 04:00:16 +08:00
if(this.alertorTypeList && this.alertorTypeList[0].dictValue!=""){
this.alertorTypeList.unshift({dictLabel:"全部",dictValue:""});
}
update code
2023-10-07 00:48:12 +08:00
})
},
提交代码
2023-10-13 04:00:16 +08:00
getVideoUrl(it){
if(it.state){
return "http://111.21.209.230:7086/live/cameraid/"+it.videoDvrNumber+"$"+it.passageValue+"/substream/2.m3u8";
}else{
return null;
}
},
getAiVideoInfoList(passageType,importance){
// 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 => {
// })
this.$api.aiBoxVideo.getVideoPassage(this.dept?.id||0,this.projectInfo?.projectId||0,passageType,importance).then((response) => {
let list = [];
if(response.data){
response.data.forEach((it) =>{
it.surProjectVideoPassageList.forEach(v =>{
list.push({videoName:it.videoName,passageName:v.passageName,videoDvrNumber:v.videoDvrNumber,passageValue:v.passageValue,state:true})
});
});
//补全
let len = 6 - list.length
for(let i=0;i<len;i++){
list.push({state:false});
}
this.videoList = list;
}else{
for(let i=0;i<6;i++){
list.push({state:false});
update code
2023-10-07 00:48:12 +08:00
}
提交代码
2023-10-13 04:00:16 +08:00
this.videoList = list;
update code
2023-10-07 00:48:12 +08:00
}
提交代码
2023-10-13 04:00:16 +08:00
});
update code
2023-10-07 00:48:12 +08:00
},
getMajorAiVideoInfoList(){
提交代码
2023-10-13 04:00:16 +08:00
// 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 => {
// })
this.$api.aiBoxVideo.getVideoPassage(this.dept?.id||0,this.projectInfo?.projectId||0,"","Y").then((response) => {
let list = [];
if(response.data){
response.data.forEach((it) =>{
it.surProjectVideoPassageList.forEach(v =>{
list.push({videoName:it.videoName,passageName:v.passageName,videoDvrNumber:v.videoDvrNumber,passageValue:v.passageValue,state:true})
});
});
this.majorVideoSize = list.length;
//补全
let len = 3 - list.length;
for(let i=0;i<len;i++){
list.push({state:false});
update code
2023-10-07 00:48:12 +08:00
}
提交代码
2023-10-13 04:00:16 +08:00
this.majorVideoList = list;
}else{
this.majorVideoSize=0;
for(let i=0;i<6;i++){
list.push({state:false});
}
this.majorVideoList = list;
}
});
update code
2023-10-07 00:48:12 +08:00
},
getAnalysisDetailList(){
提交代码
2023-10-13 04:00:16 +08:00
this.$api.aiBoxVideo.listView(this.dept?.id||0,this.projectInfo?.projectId).then((response) => {
this.warningList = response.data||[];
});
提交代码
2023-10-14 18:28:58 +08:00
},
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)
// })
// this.scaleData = data;
// }).catch(err => {
// })
//今日视图
this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.projectId,"Y").then((response) => {
if(response.data){
let sum = 0;
response.data.forEach(datum => {
sum+=datum.value;
})
this.overviewTotalDay = sum;
this.typeDistributionDataDay = response.data;
this.overviewDay++;
}
});
提交
2023-10-13 23:57:20 +08:00
提交代码
2023-10-14 18:28:58 +08:00
//累计视图
this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.projectId,"N").then((response) => {
提交
2023-10-13 23:57:20 +08:00
if(response.data){
提交代码
2023-10-14 18:28:58 +08:00
let sum = 0;
提交
2023-10-13 23:57:20 +08:00
response.data.forEach(datum => {
提交代码
2023-10-14 18:28:58 +08:00
sum+=datum.value;
提交
2023-10-13 23:57:20 +08:00
})
提交代码
2023-10-14 18:28:58 +08:00
this.overviewTotal = sum;
this.typeDistributionData = response.data;
this.overview++;
提交
2023-10-13 23:57:20 +08:00
}
});
update code
2023-10-07 00:48:12 +08:00
},
提交代码
2023-10-14 18:28:58 +08:00
initAiVideoAlertorTypeDistribution(){
this.$api.aiBoxVideo.selectGroupCountVideoConfig(this.dept?.id||0,this.projectInfo?.projectId).then((response) => {
let list=[];
if(response.data){
let sum = 0;
response.data.forEach(datum => {
sum += datum.value;
})
response.data.forEach(datum => {
datum.text = datum.name;
datum.prop = (datum.value/sum*100).toFixed(2)
list.push(datum);
})
this.availabilityData = list;
}
});
update code
2023-10-07 00:48:12 +08:00
},
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;
提交
2023-10-13 23:57:20 +08:00
this.getAiVideoInfoList(this.alertorId,"");
提交代码
2023-10-13 04:00:16 +08:00
},
getImageUrl(it){
return '/jhapi' + it.imageUrl + ".min.jpg";
update code
2023-10-07 00:48:12 +08:00
},
//预警概况 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" >
提交代码
2023-10-13 04:00:16 +08:00
.style-green {
background: #00c240;
}
update code
2023-10-07 00:48:12 +08:00
提交代码
2023-10-13 04:00:16 +08:00
.style-con {
position: absolute;
width: 20px;
height: 20px;
background: #00c240;
border-radius: 50%;
top: 15px;
right: 15px;
z-index: 1;
}
.active-video{
border: 1px solid #ddcd04;
}
.imp-video{
border: 2px solid aqua;
}
.videobo{
border: 1px solid #655f5f;
}
.project-expect-list{
width:100%;
margin-bottom:10px;
}
.project-expect-title-No{
min-width:100px;
text-align:left;
}
.project-video {}
.project-expect-info{
width:50%;
float:left;
}
.project-expect-info img{
width:90%;
}
update code
2023-10-07 00:48:12 +08:00
.videoView {
color: aliceblue;
float: left;
width: 50%;
height: 452.5px;
}
.videoViewError {
background-color: #575e65;
text-align: center;
line-height: 420px;
}
提交代码
2023-10-14 18:28:58 +08:00
.my-svg-icon {
width: 40px;
height: 40px;
margin-bottom: 20px;
}
.my-svg-icon * {
fill: #389DE3;
}
.people-number-con div.is-split {
background: none;
}
.labour-education .number-unit {
position: relative;
bottom: -8px;
}
.number-unit {
word-break: keep-all;
}
.cost-out {
.labour-education {
height: 70px;
.people-number-con {
padding: 0px;
}
}
}
update code
2023-10-07 00:48:12 +08:00
</style>