提交代码
姜玉琦
parent
bdd14f39ea
commit
24f1893157
|
|
@ -14,9 +14,17 @@ const getVideoPassage=(deptId,projectId,passageType,importance)=> {
|
|||
})
|
||||
}
|
||||
|
||||
const groupCountByAlarmType=(deptId,projectId)=> {
|
||||
const groupCountByAlarmType=(deptId,projectId,now)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/groupCountByAlarmType?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
url: `/bgscreen/aiBoxVideo/groupCountByAlarmType?deptId=${deptId||0}&projectId=${projectId||0}&now=${now}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询视频分布汇总
|
||||
const selectGroupCountVideoConfig=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/selectGroupCountVideoConfig?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -24,5 +32,7 @@ const groupCountByAlarmType=(deptId,projectId)=> {
|
|||
|
||||
export default{
|
||||
listView,
|
||||
getVideoPassage
|
||||
getVideoPassage,
|
||||
groupCountByAlarmType,
|
||||
selectGroupCountVideoConfig
|
||||
}
|
||||
|
|
@ -801,6 +801,7 @@ export default {
|
|||
sum += it.value;
|
||||
})
|
||||
this.overviewTotal = sum;
|
||||
console.log(tmps);
|
||||
this.typeDistributionData = tmps;
|
||||
this.elKey++;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,66 +3,36 @@
|
|||
<div class="screen-content">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-1-1 label="预警概况" :amplify="true" name="amplify-spjk">
|
||||
<div class="equipment-list-max">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="equipment-list-min">
|
||||
<div class="equipment-list-gif">
|
||||
<img src="images/video_1.png">
|
||||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>项目监控</p>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="equipment-list-min">
|
||||
<div class="equipment-list-gif">
|
||||
<img src="images/video_2.png">
|
||||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>吊钩监控</p>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="equipment-list-min">
|
||||
<div class="equipment-list-gif">
|
||||
<img src="images/video_3.png">
|
||||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>AI识别监控</p>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="equipment-list-min">
|
||||
<div class="equipment-list-gif">
|
||||
<img src="images/video_4.png">
|
||||
</div>
|
||||
<div class="equipment-list-data">
|
||||
<p>离线视频</p>
|
||||
<div><span v-cloak>{{ 0 }}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="预警分布">
|
||||
<div class="video-field-layout">
|
||||
<project-overview-chart :key="overview" :sp="''"
|
||||
:maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
|
||||
:text="overviewText" :height="230"></project-overview-chart>
|
||||
<module-one-2-1 label="预警概况">
|
||||
<div class="labour-warning-title">
|
||||
<div class="labour-warning-img">
|
||||
<div class="labour-warning-bgd">
|
||||
<img src="/images/labour_warning_icon.png">
|
||||
</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>
|
||||
|
||||
<rank-chart :data="availabilityData" :showval="true" :height="300"
|
||||
:width="projectCategoryWidth"></rank-chart>
|
||||
</div>
|
||||
<project-overview-chart :key="overview" :sp="''"
|
||||
:maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
|
||||
:text="overviewText" :height="250"></project-overview-chart>
|
||||
</module-one-2-1>
|
||||
<module-one-1-1 label="预警分布">
|
||||
<rank-chart :data="availabilityData" :showval="true" :height="300"></rank-chart>
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="ai-video-info">
|
||||
|
|
@ -191,7 +161,7 @@ export default {
|
|||
//预警概况
|
||||
overview: 0,
|
||||
overviewInterval: '',
|
||||
overviewTotal: 100,
|
||||
overviewTotal: 0,
|
||||
legendOpt1: {
|
||||
icon: "rect",
|
||||
textStyle: {
|
||||
|
|
@ -208,15 +178,39 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
overviewText: '预警数量',
|
||||
overviewText: '累计预警',
|
||||
//原因类型分析
|
||||
availabilityData: [],
|
||||
projectCategoryWidth: 200,
|
||||
//预警概况
|
||||
typeDistributionData: [
|
||||
{ name: '在建项目', value: '15' },
|
||||
{ name: '项目总投资', value: '515.97' },
|
||||
{ name: '项目年投资', value: '134.86' }
|
||||
{ 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' }
|
||||
],
|
||||
}
|
||||
},
|
||||
|
|
@ -349,11 +343,8 @@ export default {
|
|||
this.getAiVideoInfoList("","");
|
||||
this.getMajorAiVideoInfoList();
|
||||
this.getAnalysisDetailList();
|
||||
//
|
||||
// this.getAiVideoAlertorTypeCount();
|
||||
// this.getAiVideoAlertorTypeWarningCount();
|
||||
|
||||
|
||||
this.getAiVideoAlertorTypeCount();
|
||||
this.initAiVideoAlertorTypeDistribution();
|
||||
},
|
||||
//head选择项目返回值
|
||||
onItemData(e){
|
||||
|
|
@ -486,32 +477,66 @@ export default {
|
|||
this.$api.aiBoxVideo.listView(this.dept?.id||0,this.projectInfo?.projectId).then((response) => {
|
||||
this.warningList = response.data||[];
|
||||
});
|
||||
|
||||
this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.projectId).then((response) => {
|
||||
this.typeDistributionData=[];
|
||||
if(response.data){
|
||||
response.data.forEach(datum => {
|
||||
this.typeDistributionData.push({name:datum.alarmTypeName,value:sumValue})
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
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 => {
|
||||
})
|
||||
// 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++;
|
||||
}
|
||||
});
|
||||
|
||||
//累计视图
|
||||
this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.projectId,"N").then((response) => {
|
||||
if(response.data){
|
||||
let sum = 0;
|
||||
response.data.forEach(datum => {
|
||||
sum+=datum.value;
|
||||
})
|
||||
this.overviewTotal = sum;
|
||||
this.typeDistributionData = response.data;
|
||||
this.overview++;
|
||||
}
|
||||
});
|
||||
},
|
||||
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;
|
||||
}
|
||||
});
|
||||
},
|
||||
getAiVideoAlertorTypeWarningCount(){
|
||||
axios.post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
|
||||
|
|
@ -699,4 +724,37 @@ export default {
|
|||
text-align: center;
|
||||
line-height: 420px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue