sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

提交代码

prv
姜玉琦 2023-10-13 04:00:16 +08:00
parent 3d70310d7e
commit 44f3a3c7b8
2 changed files with 232 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/video/aiBoxVideo.js
View File

@ -7,9 +7,9 @@ const listView=(deptId,projectId)=> {
}) })
} }
const getVideoPassage=(deptId,projectId,importance)=> { const getVideoPassage=(deptId,projectId,passageType,importance)=> {
return request({ return request({
url: `/bgscreen/aiBoxVideo/getVideoPassage?deptId=${deptId||0}&projectId=${projectId||0}&importance=${importance}`, url: `/bgscreen/aiBoxVideo/getVideoPassage?deptId=${deptId||0}&projectId=${projectId||0}&passageType=${passageType}&importance=${importance}`,
method: 'get' method: 'get'
}) })
} }

349
src/pages/toAIVideoProject.vue
View File

@ -13,7 +13,7 @@
</div> </div>
<div class="equipment-list-data"> <div class="equipment-list-data">
<p>项目监控</p> <p>项目监控</p>
<div><span v-cloak>{{ cqNum }}</span>个</div> <div><span v-cloak>{{ 0 }}</span>个</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -24,7 +24,7 @@
</div> </div>
<div class="equipment-list-data"> <div class="equipment-list-data">
<p>吊钩监控</p> <p>吊钩监控</p>
<div><span v-cloak>{{ dgNum }}</span>个</div> <div><span v-cloak>{{ 0 }}</span>个</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -35,7 +35,7 @@
</div> </div>
<div class="equipment-list-data"> <div class="equipment-list-data">
<p>AI识别监控</p> <p>AI识别监控</p>
<div><span v-cloak>{{ aiNum }}</span>个</div> <div><span v-cloak>{{ 0 }}</span>个</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -46,7 +46,7 @@
</div> </div>
<div class="equipment-list-data"> <div class="equipment-list-data">
<p>离线视频</p> <p>离线视频</p>
<div><span v-cloak>{{ offLineNum }}</span>个</div> <div><span v-cloak>{{ 0 }}</span>个</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -54,12 +54,13 @@
</div> </div>
</module-one-1-1> </module-one-1-1>
<module-one-2-1 label="预警分布"> <module-one-2-1 label="预警分布">
<div class="video-field-layout" :style="videoMapStyle"> <div class="video-field-layout">
<div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }" <project-overview-chart :key="overview" :sp="''"
v-for="video in VideoDistribution" @click="videoPlay(video)"> :maintitle="overviewTotal" :legend-opt="legendOpt1"
<div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div> :text="overviewText" :height="230"></project-overview-chart>
<img src="/images/camera.png" class="video-bgd-img">
</div> <rank-chart :data="availabilityData" :showval="true" :height="300"
:width="projectCategoryWidth"></rank-chart>
</div> </div>
</module-one-2-1> </module-one-2-1>
</el-col> </el-col>
@ -79,13 +80,13 @@
<el-row> <el-row>
<el-col style="position: relative;" :span="8" v-for="(video,index) in videoList"> <el-col style="position: relative;" :span="8" v-for="(video,index) in videoList">
<div class="ai-content-info-min"> <div class="ai-content-info-min">
<div class="ai-content-videos"> <div class="ai-content-videos" :class="video.state?'active-video':'videobo'">
<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> <H265Player v-if="video.state" :url="getVideoUrl(video)"/>
<div class="ai-video-name" style="height:45px;line-height: 45px;padding: 0 15px;"> <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>{{video.video_name}}</span> <span v-if="video.state">{{video.videoName}}（{{video.passageName}}）</span>
</div> </div>
<div v-if="video.state == 1" class="style-con style-red"></div> <div v-if="video.state" class="style-con style-red"></div>
<div v-if="video.state == 0" class="style-con style-green"></div> <div v-if="video.state" class="style-con style-green"></div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -96,64 +97,61 @@
<div class="ai-key-videos"> <div class="ai-key-videos">
<div class="ai-video-title"> <div class="ai-video-title">
<div>重点视频</div> <div>重点视频</div>
<div class="ai-video-number">重点关注 视频（<span v-html="majorVideoList.length">0</span>）</div> <div class="ai-video-number">重点关注 视频（{{majorVideoSize}}）</div>
</div> </div>
<div class="ai-key-videos-info" style="height: 80%;"> <div class="ai-key-videos-info">
<div class="ai-slip"> <!-- <div class="ai-slip">
<img src="/images/ai/left_slip.png" id="leftSlip"> <img src="/images/ai/left_slip.png" id="leftSlip">
</div> </div> -->
<div class="ai-key-videos-content" id="videosContent"> <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-max" style="position: relative;" v-for="(video,index) in majorVideoList">
<div class="ai-key-videos-min"> <div class="ai-key-videos-min" :class="video.state?'imp-video':'videobo'">
<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> <H265Player v-if="video.state" :url="getVideoUrl(video)"/>
<div class="ai-video-name" style="height:40px;line-height: 40px;padding: 0 15px;"> <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>{{video.video_name}}</span> <span v-if="video.state">{{video.videoName}}（{{video.passageName}}）</span>
</div> </div>
<div v-if="video.state == 1" class="style-con style-red"></div> <div v-if="video.state" class="style-con style-red"></div>
<div v-if="video.state == 0" class="style-con style-green"></div> <div v-if="video.state" class="style-con style-green"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="ai-slip"> <!-- <div class="ai-slip">
<img src="/images/ai/right_slip.png" id="rightSlip"> <img src="/images/ai/right_slip.png" id="rightSlip">
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<module-one-3-1 label="预警列表"> <div class="ai-content-padding">
<div class="nav-info" style="padding:20px 20px 10px"> <div class="ai-warning-list">
<div class="company-project-introduction" @click="projectIntroduction"> <div class="ai-video-title">
<span>预警总数:（0）</span> <div>今日预警 <span class="ai-video-number">（<span v-html="warningList.length">0</span>）</span></div>
</div> </div>
</div> <div class="ai-warning-list-content">
<div class="acceptance-item" v-for="(it,idx) in acceptanceData" :key="idx" style="cursor: pointer;"> <div class="ai-warning-list-max scroll" id="warningListMax" style="overflow-y:auto">
<div class="row-1"> <div id="warningListMin">
<div class="div-img"> <div class="project-expect-list active" v-for="item in warningList" >
<el-image src="getProfileImage(it.mainImage)" :preview-src-list="getBigProfileImage(it)"/></div> <div class="project-expect-con">
<div class="div-text" style="width: 65%;" @click="doShowChecking(it)"> <div class="project-expect-title">
<div class="row-3"> <div class="project-expect-title-No">{{item.projectName}}</div>
<div v-if="it.checkResult=='1'" class="sp-lbl">验收合格</div> </div>
<div v-if="it.checkResult=='2'" class="sp-err">验收不合格</div> <div class="project-expect-info">
<div class="sp-date">{{it.checkingDate}}</div> <el-image :src="getImageUrl(item)" :preview-src-list="[$apiPath + item.imageUrl]"></el-image>
</div> </div>
<div class="row-3"> <div class="project-expect-info">
<span class="sp-label">项目:</span> <div class="el-row" style="padding-top: 5px;">单位名称：{{item.deptName}}</div>
<span class="sp-text">{{it.projectName}}</span> <div class="el-row" style="padding-top: 5px;">预警类型：{{item.alarmTypeName}}</div>
</div> <div class="el-row" style="padding-top: 5px;">预警时间：<span class="project-expect-time">{{item.createTime}}</span></div>
<div class="row-3"> </div>
<span class="sp-label">区域:</span> </div>
<span class="sp-text">{{it.checkWorkingPosition}}</span> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row-5" @click="doShowChecking(it)"> </div>
验收描述:{{it.intro}} </div>
</div>
</div>
</module-one-3-1>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -169,31 +167,57 @@ import '../components/background_video'
import '../components/staff-survey-chart' import '../components/staff-survey-chart'
import '../components/classify-bar' import '../components/classify-bar'
import '../components/amplify/shipinguanli/amplify-spjk' import '../components/amplify/shipinguanli/amplify-spjk'
import '../components/project-overview-chart'
import '../components/rank-chart'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
export default { export default {
data() { data() {
return { return {
active:3, active:3,
scrollLeft:'', scrollLeft:'',
nav:0, nav:0,
alertorId:0, alertorId:0,
videoList:[], videoList:[],
scaleData:[], scaleData:[],
majorVideoList:[], majorVideoList:[],
alertorTypeList:[], alertorTypeList:[],
warningList:[], warningList:[],
distributeData:{}, distributeData:{},
ptz: false, ptz: false,
autoPlay:true, autoPlay:true,
popupUrl:'', popupUrl:'',
popupShow:false popupShow:false,
majorVideoSize:0,
//预警概况
overview: 0,
overviewInterval: '',
overviewTotal: 100,
legendOpt1: {
icon: "rect",
textStyle: {
fontSize: 14,
rich: {
name: {
color: "#c3dbfd",
padding: [10, 5, 20, 5],
},
percent: {
color: "#4676FD",
padding: [10, 5, 20, 5],
},
},
},
},
overviewText: '项目数量',
//原因类型分析
availabilityData: [],
projectCategoryWidth: 200,
} }
}, },
mounted() { mounted() {
this.$bus.$on("projectChange", debounce(res => { this.$bus.$on("projectChange", debounce(res => {
this.projectInfo=res; this.projectInfo=res;
this.initVideoMenu(); //this.initVideoMenu();
})); }));
this.$bus.$on("loadProjects", debounce(prjs => { this.$bus.$on("loadProjects", debounce(prjs => {
this.projectInfos = prjs; this.projectInfos = prjs;
@ -309,18 +333,19 @@ export default {
}, },
methods: { methods: {
initMe(){ initMe(){
this.projectInfo=this.$root.project||{}; this.projectInfo=this.$root.project;
this.dept=this.$root.dept||{}; this.dept=this.$root.dept;
this.projectInfos=this.$root.projects||[]; this.projectInfos=this.$root.projects;
this.initVideoMenu(); //this.initVideoMenu();
}, },
init(){ init(){
this.getAlertorTypeList(); this.getAlertorTypeList();
this.getAiVideoInfoList(); this.getAiVideoInfoList("","");
this.getAnalysisDetailList();
this.getMajorAiVideoInfoList(); this.getMajorAiVideoInfoList();
this.getAiVideoAlertorTypeCount(); this.getAnalysisDetailList();
this.getAiVideoAlertorTypeWarningCount(); //
// this.getAiVideoAlertorTypeCount();
// this.getAiVideoAlertorTypeWarningCount();
}, },
@ -361,54 +386,100 @@ export default {
// }) // })
this.$api.dict('aibox_alarm_type').then(d => { this.$api.dict('aibox_alarm_type').then(d => {
this.alertorTypeList = d || []; this.alertorTypeList = d || [];
if(this.alertorTypeList && this.alertorTypeList[0].dictValue!=""){
this.alertorTypeList.unshift({dictLabel:"全部",dictValue:""});
}
}) })
}, },
getAiVideoInfoList(){ getVideoUrl(it){
axios.post(Host + "/api/video/getAiVideoInfoList", { if(it.state){
projectId:JSON.parse(localStorage.getItem("data")).aqzg, return "http://111.21.209.230:7086/live/cameraid/"+it.videoDvrNumber+"$"+it.passageValue+"/substream/2.m3u8";
alertorId: this.alertorId }else{
}).then(res => { return null;
var data = res.data; }
if(data.length < 6){ },
var len = 6 - data.length getAiVideoInfoList(passageType,importance){
for (let i = 0; i < len ; i++) { // axios.post(Host + "/api/video/getAiVideoInfoList", {
data.push({}) // 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});
}
this.videoList = list;
} }
this.videoList = data; });
}).catch(err => {
})
}, },
getMajorAiVideoInfoList(){ getMajorAiVideoInfoList(){
axios.post(Host + "/api/video/getAiVideoInfoList", { // axios.post(Host + "/api/video/getAiVideoInfoList", {
projectId: JSON.parse(localStorage.getItem("data")).aqzg, // projectId: JSON.parse(localStorage.getItem("data")).aqzg,
majorState: "1", // majorState: "1",
alertorId: this.alertorId // alertorId: this.alertorId
}).then(res => { // }).then(res => {
var data = res.data; // var data = res.data;
/*if(data.length < 4){ // /*if(data.length < 4){
var len = 4 - data.length // var len = 4 - data.length
for (let i = 0; i < len ; i++) { // for (let i = 0; i < len ; i++) {
data.push({}) // 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});
} }
}*/ this.majorVideoList = list;
this.majorVideoList = data; }else{
}).catch(err => { this.majorVideoSize=0;
}) for(let i=0;i<6;i++){
list.push({state:false});
}
this.majorVideoList = list;
}
});
}, },
getAnalysisDetailList(){ getAnalysisDetailList(){
axios.post(Host + "/api/video/getAnalysisDetailList", { this.$api.aiBoxVideo.listView(this.dept?.id||0,this.projectInfo?.projectId).then((response) => {
projectId: JSON.parse(localStorage.getItem("data")).aqzg, this.warningList = response.data||[];
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(){ getAiVideoAlertorTypeCount(){
axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", { axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
@ -458,7 +529,10 @@ export default {
aiNav(n,id){ aiNav(n,id){
this.nav = n this.nav = n
this.alertorId = id; this.alertorId = id;
this.getAiVideoInfoList(); this.getAiVideoInfoList(alertorId,"");
},
getImageUrl(it){
return '/jhapi' + it.imageUrl + ".min.jpg";
}, },
//预警概况 Echart //预警概况 Echart
warningChart(data,id){ warningChart(data,id){
@ -559,8 +633,45 @@ export default {
</script> </script>
<style lang="less" > <style lang="less" >
.project-video {} .style-green {
background: #00c240;
}
.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%;
}
.videoView { .videoView {
color: aliceblue; color: aliceblue;
float: left; float: left;