提交代码
姜玉琦
parent
3d70310d7e
commit
44f3a3c7b8
|
|
@ -7,9 +7,9 @@ const listView=(deptId,projectId)=> {
|
|||
})
|
||||
}
|
||||
|
||||
const getVideoPassage=(deptId,projectId,importance)=> {
|
||||
const getVideoPassage=(deptId,projectId,passageType,importance)=> {
|
||||
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'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>项目监控</p>
|
||||
<div><span v-cloak>{{ cqNum }}</span>个</div>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>吊钩监控</p>
|
||||
<div><span v-cloak>{{ dgNum }}</span>个</div>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>AI识别监控</p>
|
||||
<div><span v-cloak>{{ aiNum }}</span>个</div>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>离线视频</p>
|
||||
<div><span v-cloak>{{ offLineNum }}</span>个</div>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -54,12 +54,13 @@
|
|||
</div>
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="预警分布">
|
||||
<div class="video-field-layout" :style="videoMapStyle">
|
||||
<div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }"
|
||||
v-for="video in VideoDistribution" @click="videoPlay(video)">
|
||||
<div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div>
|
||||
<img src="/images/camera.png" class="video-bgd-img">
|
||||
</div>
|
||||
<div class="video-field-layout">
|
||||
<project-overview-chart :key="overview" :sp="''"
|
||||
:maintitle="overviewTotal" :legend-opt="legendOpt1"
|
||||
:text="overviewText" :height="230"></project-overview-chart>
|
||||
|
||||
<rank-chart :data="availabilityData" :showval="true" :height="300"
|
||||
:width="projectCategoryWidth"></rank-chart>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
|
|
@ -79,13 +80,13 @@
|
|||
<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 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>
|
||||
</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 v-if="video.state" class="style-con style-red"></div>
|
||||
<div v-if="video.state" class="style-con style-green"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -96,64 +97,61 @@
|
|||
<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 class="ai-video-number">重点关注 视频（{{majorVideoSize}}）</div>
|
||||
</div>
|
||||
<div class="ai-key-videos-info" style="height: 80%;">
|
||||
<div class="ai-slip">
|
||||
<div class="ai-key-videos-info">
|
||||
<!-- <div class="ai-slip">
|
||||
<img src="/images/ai/left_slip.png" id="leftSlip">
|
||||
</div>
|
||||
</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 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>
|
||||
</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 v-if="video.state" class="style-con style-red"></div>
|
||||
<div v-if="video.state" class="style-con style-green"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="ai-slip">
|
||||
<!-- <div class="ai-slip">
|
||||
<img src="/images/ai/right_slip.png" id="rightSlip">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<module-one-3-1 label="预警列表">
|
||||
<div class="nav-info" style="padding:20px 20px 10px">
|
||||
<div class="company-project-introduction" @click="projectIntroduction">
|
||||
<span>预警总数:（0）</span>
|
||||
<div class="ai-content-padding">
|
||||
<div class="ai-warning-list">
|
||||
<div class="ai-video-title">
|
||||
<div>今日预警 <span class="ai-video-number">（<span v-html="warningList.length">0</span>）</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acceptance-item" v-for="(it,idx) in acceptanceData" :key="idx" style="cursor: pointer;">
|
||||
<div class="row-1">
|
||||
<div class="div-img">
|
||||
<el-image src="getProfileImage(it.mainImage)" :preview-src-list="getBigProfileImage(it)"/></div>
|
||||
<div class="div-text" style="width: 65%;" @click="doShowChecking(it)">
|
||||
<div class="row-3">
|
||||
<div v-if="it.checkResult=='1'" class="sp-lbl">验收合格</div>
|
||||
<div v-if="it.checkResult=='2'" class="sp-err">验收不合格</div>
|
||||
<div class="sp-date">{{it.checkingDate}}</div>
|
||||
</div>
|
||||
<div class="row-3">
|
||||
<span class="sp-label">项目:</span>
|
||||
<span class="sp-text">{{it.projectName}}</span>
|
||||
</div>
|
||||
<div class="row-3">
|
||||
<span class="sp-label">区域:</span>
|
||||
<span class="sp-text">{{it.checkWorkingPosition}}</span>
|
||||
<div class="ai-warning-list-content">
|
||||
<div class="ai-warning-list-max scroll" id="warningListMax" style="overflow-y:auto">
|
||||
<div id="warningListMin">
|
||||
<div class="project-expect-list active" v-for="item in warningList" >
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-5" @click="doShowChecking(it)">
|
||||
验收描述:{{it.intro}}
|
||||
</div>
|
||||
</div>
|
||||
</module-one-3-1>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -169,31 +167,57 @@ import '../components/background_video'
|
|||
import '../components/staff-survey-chart'
|
||||
import '../components/classify-bar'
|
||||
import '../components/amplify/shipinguanli/amplify-spjk'
|
||||
import '../components/project-overview-chart'
|
||||
import '../components/rank-chart'
|
||||
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
|
||||
|
||||
scrollLeft:'',
|
||||
nav:0,
|
||||
alertorId:0,
|
||||
videoList:[],
|
||||
scaleData:[],
|
||||
majorVideoList:[],
|
||||
alertorTypeList:[],
|
||||
warningList:[],
|
||||
distributeData:{},
|
||||
ptz: false,
|
||||
autoPlay:true,
|
||||
popupUrl:'',
|
||||
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() {
|
||||
this.$bus.$on("projectChange", debounce(res => {
|
||||
this.projectInfo=res;
|
||||
this.initVideoMenu();
|
||||
//this.initVideoMenu();
|
||||
}));
|
||||
this.$bus.$on("loadProjects", debounce(prjs => {
|
||||
this.projectInfos = prjs;
|
||||
|
|
@ -309,18 +333,19 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initMe(){
|
||||
this.projectInfo=this.$root.project||{};
|
||||
this.dept=this.$root.dept||{};
|
||||
this.projectInfos=this.$root.projects||[];
|
||||
this.initVideoMenu();
|
||||
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.getAiVideoInfoList("","");
|
||||
this.getMajorAiVideoInfoList();
|
||||
this.getAiVideoAlertorTypeCount();
|
||||
this.getAiVideoAlertorTypeWarningCount();
|
||||
this.getAnalysisDetailList();
|
||||
//
|
||||
// this.getAiVideoAlertorTypeCount();
|
||||
// this.getAiVideoAlertorTypeWarningCount();
|
||||
|
||||
|
||||
},
|
||||
|
|
@ -361,54 +386,100 @@ export default {
|
|||
// })
|
||||
this.$api.dict('aibox_alarm_type').then(d => {
|
||||
this.alertorTypeList = d || [];
|
||||
if(this.alertorTypeList && this.alertorTypeList[0].dictValue!=""){
|
||||
this.alertorTypeList.unshift({dictLabel:"全部",dictValue:""});
|
||||
}
|
||||
})
|
||||
},
|
||||
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({})
|
||||
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});
|
||||
}
|
||||
this.videoList = list;
|
||||
}
|
||||
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({})
|
||||
// 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});
|
||||
}
|
||||
}*/
|
||||
this.majorVideoList = data;
|
||||
}).catch(err => {
|
||||
})
|
||||
this.majorVideoList = list;
|
||||
}else{
|
||||
this.majorVideoSize=0;
|
||||
for(let i=0;i<6;i++){
|
||||
list.push({state:false});
|
||||
}
|
||||
this.majorVideoList = list;
|
||||
}
|
||||
});
|
||||
},
|
||||
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 => {
|
||||
})
|
||||
this.$api.aiBoxVideo.listView(this.dept?.id||0,this.projectInfo?.projectId).then((response) => {
|
||||
this.warningList = response.data||[];
|
||||
});
|
||||
},
|
||||
getAiVideoAlertorTypeCount(){
|
||||
axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
|
||||
|
|
@ -458,7 +529,10 @@ export default {
|
|||
aiNav(n,id){
|
||||
this.nav = n
|
||||
this.alertorId = id;
|
||||
this.getAiVideoInfoList();
|
||||
this.getAiVideoInfoList(alertorId,"");
|
||||
},
|
||||
getImageUrl(it){
|
||||
return '/jhapi' + it.imageUrl + ".min.jpg";
|
||||
},
|
||||
//预警概况 Echart
|
||||
warningChart(data,id){
|
||||
|
|
@ -559,8 +633,45 @@ export default {
|
|||
</script>
|
||||
|
||||
<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 {
|
||||
color: aliceblue;
|
||||
float: left;
|
||||
|
|
|
|||
Loading…
Reference in New Issue