411 lines
12 KiB
Vue
411 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div class="project-ai-warning main-page">
|
||
|
|
<el-col :span="6">
|
||
|
|
<module-one-1-1 label="今日预警" style="position: relative">
|
||
|
|
<project-overview-chart
|
||
|
|
:key="'ai1' + overviewDay"
|
||
|
|
:sp="''"
|
||
|
|
:maintitle="overviewTotalDay"
|
||
|
|
:legend-opt="legendOpt1"
|
||
|
|
:typedata="typeDistributionDataDay"
|
||
|
|
:text="overviewTextDay"
|
||
|
|
:height="230"
|
||
|
|
></project-overview-chart>
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-1-1 label="预警概况">
|
||
|
|
<project-overview-chart
|
||
|
|
:key="'ai2' + overview"
|
||
|
|
:sp="''"
|
||
|
|
:maintitle="overviewTotal"
|
||
|
|
:legend-opt="legendOpt2"
|
||
|
|
:typedata="typeDistributionData"
|
||
|
|
:text="overviewText"
|
||
|
|
:height="230"
|
||
|
|
></project-overview-chart>
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-1-1 label="每日预警趋势">
|
||
|
|
<trend-chart-line :height="280" :data="warningData"></trend-chart-line>
|
||
|
|
</module-one-1-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">
|
||
|
|
<div>预警名称:</div>
|
||
|
|
<div style="color: rgba(1, 169, 255, 1)">{{ it.alarmTypeName }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<div>预警时间:</div>
|
||
|
|
<div style="color: rgba(1, 169, 255, 1)">{{ it.createTime }}</div>
|
||
|
|
</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" class="not-data">暂无预警数据</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="结束日期"
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
></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"
|
||
|
|
v-for="(it, idx) in aiTypes"
|
||
|
|
:class="selType == it.value ? 'active' : ''"
|
||
|
|
@click="doSelType(it.value)"
|
||
|
|
:key="it.value"
|
||
|
|
>
|
||
|
|
{{ it.label }}
|
||
|
|
</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">
|
||
|
|
<div>预警名称:</div>
|
||
|
|
<div style="color: rgba(1, 169, 255, 1)">
|
||
|
|
{{ it.alarmTypeName }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<div>预警时间:</div>
|
||
|
|
<div style="color: rgba(1, 169, 255, 1)">{{ it.createTime }}</div>
|
||
|
|
</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" class="not-data">暂无预警数据</div>
|
||
|
|
</div>
|
||
|
|
</module-one-2-3>
|
||
|
|
</el-col>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
overview: 0,
|
||
|
|
overviewDay: 0,
|
||
|
|
overviewTotal: 0,
|
||
|
|
legendOpt1: {
|
||
|
|
icon: "rect",
|
||
|
|
textStyle: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
fontSize: 15,
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
padding: [0, 20, 0, 0],
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
color: "#4676FD",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legendOpt2: {
|
||
|
|
icon: "rect",
|
||
|
|
textStyle: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
fontSize: 14,
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
padding: [0, 20, 0, 0],
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
color: "#4676FD",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
overviewText: "累计预警",
|
||
|
|
//预警概况
|
||
|
|
typeDistributionData: [],
|
||
|
|
overviewTextDay: "今日预警",
|
||
|
|
overviewTotalDay: 0,
|
||
|
|
typeDistributionDataDay: [],
|
||
|
|
todayPage: {
|
||
|
|
pageSize: 6,
|
||
|
|
pageIndex: 1,
|
||
|
|
total: 0,
|
||
|
|
},
|
||
|
|
listPage: {
|
||
|
|
pageSize: 12,
|
||
|
|
pageIndex: 1,
|
||
|
|
total: 0,
|
||
|
|
},
|
||
|
|
todayList: [],
|
||
|
|
todayKey: 0,
|
||
|
|
listDatas: [],
|
||
|
|
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]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
intervalTimes: null,
|
||
|
|
warningData:[]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$store.dispatch("ChangeNav", 310);
|
||
|
|
this.$bus.$on("projectChange", (prj) => {
|
||
|
|
this.selProject = prj;
|
||
|
|
this.init();
|
||
|
|
});
|
||
|
|
this.selProject = this.$store.getters.selProject;
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
if (!this.selProject) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$api.dict("aibox_alarm_type").then((d) => {
|
||
|
|
this.aiTypes = d || [];
|
||
|
|
});
|
||
|
|
this.loadList();
|
||
|
|
this.loadTodayList();
|
||
|
|
this.getAiVideoAlertorTypeCount();
|
||
|
|
this.daysTrendView();
|
||
|
|
},
|
||
|
|
doSelType(n) {
|
||
|
|
if (this.selType != n) {
|
||
|
|
this.selType = n;
|
||
|
|
this.listPage.pageIndex = 1;
|
||
|
|
this.loadList();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dtChange(init) {
|
||
|
|
this.listPage.pageIndex = 1;
|
||
|
|
this.loadList();
|
||
|
|
},
|
||
|
|
handleTodayCurrentChange(n) {
|
||
|
|
this.todayPage.pageIndex = n;
|
||
|
|
this.loadTodayList();
|
||
|
|
},
|
||
|
|
handleListCurrentChange(n) {
|
||
|
|
this.listPage.pageIndex = n;
|
||
|
|
this.loadList();
|
||
|
|
},
|
||
|
|
loadList() {
|
||
|
|
let postData = {
|
||
|
|
pageNum: this.listPage.pageIndex,
|
||
|
|
pageSize: this.listPage.pageSize,
|
||
|
|
projectId: this.selProject.id,
|
||
|
|
};
|
||
|
|
if(this.selDate.length>0){
|
||
|
|
let _params = {
|
||
|
|
beginTime: this.selDate[0],
|
||
|
|
endTime: this.selDate[1]
|
||
|
|
}
|
||
|
|
postData.params = _params;
|
||
|
|
}
|
||
|
|
if (this.selType != 0) {
|
||
|
|
postData.alarmType = this.selType;
|
||
|
|
}
|
||
|
|
this.$api.aiWarning
|
||
|
|
.list(postData)
|
||
|
|
.then((d) => {
|
||
|
|
this.listPage.total = d.total || 0;
|
||
|
|
this.listDatas = d.rows || [];
|
||
|
|
this.listKey++;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
loadTodayList() {
|
||
|
|
let postData = {
|
||
|
|
pageNum: this.todayPage.pageIndex,
|
||
|
|
pageSize: this.todayPage.pageSize,
|
||
|
|
projectId: this.selProject.id,
|
||
|
|
params: {
|
||
|
|
date: new Date(),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
this.$api.aiWarning
|
||
|
|
.list(postData)
|
||
|
|
.then((d) => {
|
||
|
|
this.todayPage.total = d.total || 0;
|
||
|
|
this.todayList = d.rows || [];
|
||
|
|
this.todayKey++;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getAiVideoAlertorTypeCount() {
|
||
|
|
//今日视图
|
||
|
|
this.$api.aiWarning.groupCountByAlarmType(this.selProject.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.aiWarning.groupCountByAlarmType(this.selProject.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++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
daysTrendView(){
|
||
|
|
this.$api.aiWarning.getDaysTrendView(this.selProject.id).then((response) => {
|
||
|
|
if (response.data) {
|
||
|
|
let _data1 = [];
|
||
|
|
let _date8 = [];
|
||
|
|
response.data.forEach((datum) => {
|
||
|
|
_data1.push(datum.total);
|
||
|
|
_date8.push(datum.dayStr);
|
||
|
|
});
|
||
|
|
let _lineData = [];
|
||
|
|
_lineData.push(_data1);
|
||
|
|
let _color = ['#0078e7'];
|
||
|
|
let _legend = ['预警总数'];
|
||
|
|
let _trendData = {'lineData':_lineData,'color':_color,'legend':_legend,'date':_date8};
|
||
|
|
this.warningData = _trendData;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initIntervalTimes(){
|
||
|
|
this.intervalTimes = setInterval(this.init, 150000); // 每2.5分钟刷新一次
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="less" scope>
|
||
|
|
.project-ai-warning {
|
||
|
|
.project-overview-chart{
|
||
|
|
.chart-overview-gif{
|
||
|
|
margin-left: -10px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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>
|