440 lines
14 KiB
Vue
440 lines
14 KiB
Vue
<template>
|
|
<div class="project-aivideo">
|
|
<div class="screen-content">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<module-one-1-1 label="预警概况" style="position: relative;">
|
|
<div style="transform: scale(0.8);position: relative;top: -40px;left:-70px;">
|
|
<project-overview-chart :key="'ai1' + overviewDay" :sp="''" txtTop="12" gifTop="8px"
|
|
:maintitle="overviewTotalDay" :legend-opt="legendOpt2" :typedata="typeDistributionDataDay"
|
|
:text="overviewTextDay" :height="180" :width="580" :fn="changeChart1"></project-overview-chart>
|
|
|
|
<project-overview-chart :key="'ai2' + overview" :sp="''" txtTop="12" gifTop="8px"
|
|
:maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
|
|
:text="overviewText" :height="180" :width="580" :fn="changeChart1"></project-overview-chart>
|
|
</div>
|
|
</module-one-1-1>
|
|
<module-one-2-1 label="预警排名" style="position: relative;">
|
|
<div class="scroll" style="max-height: 580px;overflow-y: auto;margin-top: 20px;">
|
|
<table class="tb-list1">
|
|
<tr>
|
|
<th>排名</th>
|
|
<th>项目名称</th>
|
|
<th>预警数量</th>
|
|
<th>预警占比</th>
|
|
</tr>
|
|
<tr v-for="(it, idx) in orderList" :key="idx" class="tr-cmd" @click="doStandardDlg(it)">
|
|
<td>{{ it.ord }}</td>
|
|
<td>{{ it.projectName }}</td>
|
|
<td>{{ it.value }}</td>
|
|
<td>{{ it.percent.toFixed(2) }}%</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</module-one-2-1>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<module-one-1-3 label="今日预警" :key="todayKey" style="position: relative;">
|
|
<div class="today-list ai-list" v-if="todayList.length > 0">
|
|
<div v-for="(it, idx) in todayList" :key="idx" class="today-item ai-item">
|
|
<div class="item-left">
|
|
<el-image style="width: 180px; height: 100px" :src="it.imageUrl + '.min.jpg'"
|
|
:preview-src-list="[it.imageUrl]">
|
|
</el-image>
|
|
</div>
|
|
<div class="item-right">
|
|
<div class="item-row">
|
|
<span>单位名称:</span>
|
|
<span>{{ it.deptName }}</span>
|
|
</div>
|
|
<div class="item-row">
|
|
<span>预警名称:</span>
|
|
<span>{{ it.alarmTypeName }}</span>
|
|
</div>
|
|
<div class="item-row">
|
|
<span>预警时间:</span>
|
|
<span style="color:rgba(1, 169, 255, 1)">{{ it.createTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination v-if="todayList.length > 0" layout="total,prev, pager, next" :hide-on-single-page="false"
|
|
@current-change="handleTodayCurrentChange" :total="todayPage.total" :page-size="todayPage.pageSize" :current-page.sync="todayPage.pageIndex"
|
|
class="bg-pagination"></el-pagination>
|
|
<div v-if="todayList.length == 0" style="text-align: center;margin-top: 20px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
|
|
</module-one-1-3>
|
|
<module-one-2-3 label="预警明细" style="position: relative;">
|
|
<div style="position: absolute;right:0px;top:4px;">
|
|
<el-date-picker class="bg-date-picker" v-model="selDate" type="daterange"
|
|
popper-class="bg-date-picker-pop" :editable="false" @change="dtChange"
|
|
:picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
|
|
end-placeholder="结束日期"></el-date-picker>
|
|
</div>
|
|
<div class="ai-nav">
|
|
<div class="nav-item ai-content-nav-con ai-content-nav" :class="selType==0?'active':''" @click="doSelType(0)">全部</div>
|
|
<div class="nav-item ai-content-nav-con ai-content-nav" :class="selType==it.dictValue?'active':''" @click="doSelType(it.dictValue)" v-for="(it,idx) in aiTypes" :key="idx">{{ it.dictLabel }}</div>
|
|
</div>
|
|
<div class="data-list">
|
|
<div class=" ai-list" v-if="listDatas.length > 0">
|
|
<div v-for="(it, idx) in listDatas" :key="idx" class="today-item ai-item">
|
|
<div class="item-left">
|
|
<el-image style="width: 180px; height: 100px" :src="it.imageUrl + '.min.jpg'"
|
|
:preview-src-list="[it.imageUrl]">
|
|
</el-image>
|
|
</div>
|
|
<div class="item-right">
|
|
<div class="item-row">
|
|
<span>单位名称:</span>
|
|
<span>{{ it.deptName }}</span>
|
|
</div>
|
|
<div class="item-row">
|
|
<span>预警名称:</span>
|
|
<span>{{ it.alarmTypeName }}</span>
|
|
</div>
|
|
<div class="item-row">
|
|
<span>预警时间:</span>
|
|
<span style="color:rgba(1, 169, 255, 1)">{{ it.createTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination v-if="listDatas.length > 0" layout="total,prev, pager, next" :hide-on-single-page="false"
|
|
@current-change="handleListCurrentChange" :total="listPage.total" :page-size="listPage.pageSize" :current-page.sync="listPage.pageIndex"
|
|
class="bg-pagination"></el-pagination>
|
|
<div v-if="listDatas.length == 0" style="text-align: center;margin-top: 100px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</module-one-2-3>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import "../components/module/module-one-1-3";
|
|
import "../components/module/module-one-2-1";
|
|
import "../components/module/module-one-1-1";
|
|
import "../components/module/module-one-2-3";
|
|
import debounce from "lodash.debounce";
|
|
export default {
|
|
data() {
|
|
return {
|
|
//预警概况
|
|
overview: 0,
|
|
overviewDay: 0,
|
|
overviewInterval: "",
|
|
overviewTotal: 0,
|
|
legendOpt1: {
|
|
icon: "rect",
|
|
padding: [0, 0, 0, 0],
|
|
itemHeight: 10,
|
|
textStyle: {
|
|
fontSize: 9,
|
|
color: "#c3dbfd",
|
|
rich: {
|
|
name: {
|
|
color: "#c3dbfd",
|
|
padding: [0, 0, 0, 0],
|
|
},
|
|
percent: {
|
|
color: "#4676FD",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
overviewText: "累计预警",
|
|
//预警概况
|
|
typeDistributionData: [],
|
|
overviewTextDay: "今日预警",
|
|
overviewTotalDay: 0,
|
|
legendOpt2: {
|
|
icon: "rect",
|
|
textStyle: {
|
|
fontSize: 9,
|
|
color: "#c3dbfd",
|
|
rich: {
|
|
name: {
|
|
color: "#c3dbfd",
|
|
padding: [0, 0, 0, 0],
|
|
},
|
|
percent: {
|
|
color: "#f73647",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
typeDistributionDataDay: [],
|
|
orderList: [],
|
|
todayPage: {
|
|
pageSize: 6,
|
|
pageIndex: 1,
|
|
total: 0
|
|
},
|
|
listPage:{
|
|
pageSize: 12,
|
|
pageIndex: 1,
|
|
total: 0
|
|
},
|
|
todayList: [],
|
|
todayKey:0,
|
|
listDatas:[],
|
|
listKey:0,
|
|
selDate: [],
|
|
aiTypes:[],
|
|
selType:0,
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: '最近一周',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近一个月',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近三个月',
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}]
|
|
},
|
|
};
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
mounted() {
|
|
this.$api.dict("aibox_alarm_type").then((d) => {
|
|
this.aiTypes=d||[];
|
|
});
|
|
let dt1=this.$dt((+new Date())-30*24*3600*1000);
|
|
let dt2=this.$dt(new Date());
|
|
this.selDate=[dt1,dt2];
|
|
this.$bus.$on("projectChange", debounce((res) => {
|
|
this.projectInfo = res;
|
|
this.dept = this.$root.dept || this.dept || {};
|
|
this.projectInfos = this.$root.projects || this.projectInfos || [];
|
|
this.init();
|
|
})
|
|
);
|
|
if (this.$root.hasInitHeader) {
|
|
this.initMe();
|
|
}
|
|
},
|
|
methods: {
|
|
doSelType(n){
|
|
if(this.selType!=n){
|
|
this.selType=n;
|
|
this.listPage.pageIndex=1;
|
|
this.loadList();
|
|
}
|
|
},
|
|
dtChange(init) {
|
|
this.listPage.pageIndex=1;
|
|
this.loadList();
|
|
},
|
|
changeChart1(opt) {
|
|
opt.title.padding = [60, 0, 0, 145];
|
|
return opt;
|
|
},
|
|
initMe() {
|
|
this.projectInfo = this.$root.project;
|
|
this.dept = this.$root.dept;
|
|
this.projectInfos = this.$root.projects;
|
|
this.init();
|
|
},
|
|
init() {
|
|
this.getAiVideoAlertorTypeCount();
|
|
this.groupCountByProject();
|
|
this.todayPage.pageIndex=1;
|
|
this.loadTodayList();
|
|
this.listPage.pageIndex=1;
|
|
this.selType=0;
|
|
this.loadList();
|
|
},
|
|
handleTodayCurrentChange(n){
|
|
this.todayPage.pageIndex=n;
|
|
this.loadTodayList();
|
|
},
|
|
handleListCurrentChange(n){
|
|
this.listPage.pageIndex=n;
|
|
this.loadList();
|
|
},
|
|
loadList(){
|
|
let postData = {
|
|
projectDeptId: this.dept?.id || 0,
|
|
projectId: this.projectInfo?.id,
|
|
params: {
|
|
beginTime:this.selDate[0],
|
|
endTime:this.selDate[1]
|
|
}
|
|
};
|
|
if (postData.projectDeptId == 0) {
|
|
delete postData.projectDeptId
|
|
}
|
|
if (postData.projectId == 0) {
|
|
delete postData.projectId
|
|
}
|
|
if(this.selType!=0){
|
|
postData.alarmType=this.selType;
|
|
}
|
|
this.$api.aiBoxVideo.list(postData, this.listPage.pageIndex, this.listPage.pageSize).then(d => {
|
|
this.listPage.total = d.total || 0;
|
|
this.listDatas = d.rows || [];
|
|
this.listKey++;
|
|
});
|
|
},
|
|
loadTodayList() {
|
|
let postData = {
|
|
projectDeptId: this.dept?.id || 0,
|
|
projectId: this.projectInfo?.id,
|
|
params: {
|
|
date: new Date()
|
|
}
|
|
};
|
|
if (postData.projectDeptId == 0) {
|
|
delete postData.projectDeptId
|
|
}
|
|
if (postData.projectId == 0) {
|
|
delete postData.projectId
|
|
}
|
|
this.$api.aiBoxVideo.list(postData, this.todayPage.pageIndex, this.todayPage.pageSize).then(d => {
|
|
this.todayPage.total = d.total || 0;
|
|
this.todayList = d.rows || [];
|
|
this.todayKey++;
|
|
});
|
|
},
|
|
groupCountByProject() {
|
|
this.$api.aiBoxVideo
|
|
//.groupCountByProject(this.dept?.id || 0, this.projectInfo?.id)
|
|
.groupCountByProject( 0, null)
|
|
.then((d) => {
|
|
let sum = 0;
|
|
let tmps = (d.data || []).map((it, idx) => {
|
|
it.ord = idx + 1;
|
|
it.percent = 0;
|
|
sum += it.value;
|
|
return it;
|
|
});
|
|
tmps.forEach(it => {
|
|
it.percent = it.value * 100.0 / sum;
|
|
})
|
|
this.orderList = tmps;
|
|
});
|
|
},
|
|
getAiVideoAlertorTypeCount() {
|
|
|
|
//今日视图
|
|
this.$api.aiBoxVideo
|
|
.groupCountByAlarmType(this.dept?.id || 0, this.projectInfo?.id, "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?.id, "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++;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.project-aivideo {
|
|
.chart-overview-gif {
|
|
top: 37px !important;
|
|
left: 93px;
|
|
}
|
|
|
|
.tb-list1 {
|
|
margin: 12px;
|
|
width: calc(100% - 24px);
|
|
border-collapse: collapse;
|
|
border: solid 1px #ffffff52;
|
|
|
|
th {
|
|
font-size: 14px;
|
|
border: solid 1px #ffffff52;
|
|
line-height: 60px;
|
|
}
|
|
|
|
td {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
border: solid 1px #ffffff52;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
.ai-list{
|
|
padding:0px 24px 8px;
|
|
.ai-item{
|
|
display: inline-flex;
|
|
margin:12px 12px 0px 0px;
|
|
width: calc(33% - 12px);
|
|
color:#ccc;
|
|
line-height: 24px;
|
|
.item-right{
|
|
padding-left:12px;
|
|
}
|
|
}
|
|
}
|
|
.data-list{
|
|
.ai-list{
|
|
.ai-item{
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
.ai-nav{
|
|
padding:12px;
|
|
.nav-item{
|
|
display: inline-block;
|
|
margin-left: 12px;
|
|
text-align: center;
|
|
padding:0px 8px;
|
|
&:first-child{
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|