<template lang='pug'>
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(196, 196, 196, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 告警统计
el-main.box_main
el-card()
div.tableCard()
el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()")
el-row( )
el-col(:span='24')
el-form-item( label="告警时间:" )
el-date-picker(v-model="dataForm.startTime" value-format="yyyy-MM-dd" style="width:165px;" clearable type="date" placeholder="开始日期")
font 至
el-date-picker(v-model="dataForm.endTime" value-format="yyyy-MM-dd" style="width:165px;" clearable type="date" placeholder="结束日期")
//el-date-picker(type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="inputWidth" style="width:275px;" v-model="rangeTime" clearable)
el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
//el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
el-row()
el-col(:span="8")
div(class="div-block")
div(class='chart-title') 历史告警占比统计
div(class="inner" id="chartData")
el-col(:span="8")
div(class="div-block")
div(class='chart-title') 历史告警数据统计
div(class="inner" id="chartData2")
el-col(:span="8")
div(class="div-block")
div(class='chart-title') 历史告警趋势统计
div(class="inner" id="chartData3")
//ve-line(:data="chartData3" :extend="extend3" v-bind="pubSetting" legend-position="bottom" )
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.extend1 = {
grid: {
top: -30
}
}
this.extend2 = {
series: {
type: 'bar', // 添加该属性
label: { show: true, position: 'top' }
}
}
this.extend3 = {
series: {
type: 'line', // 添加该属性
label: {
normal: {
show: true
}
}
}
}
return {
chartData: {
},
chartData2: {
},
chartData3: {
columns: [],
rows: []
},
chartInit1: null,
chartInit2: null,
chartInit3: null,
dataForm: {
startTime: '',
endTime: ''
},
//rangeTime: [new Date(2000, 10, 10), new Date(2000, 10, 11)],
rangeTime: [],
dataList: [],
alarmTypeList: []
}
},
created () {
this.timeChange(10) //默认10天
this.getDataList()
},
methods: {
//重置
reSet() {
this.dataForm = {}
this.getDataList()
},
timeChange (val) {
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * (val - 1))
//this.rangeTime = [new Date(start.getFullYear(), start.getMonth(), start.getDate()), new Date()]
this.dataForm.startTime = this.getime(new Date(start.getFullYear(), start.getMonth(), start.getDate()))
this.dataForm.endTime = this.getime(new Date())
},
getime (time) {
let str = ''
let y = time.getFullYear()
let m = (time.getMonth() + 1 + '').padStart(2, '0')
let d = (time.getDate() + '').padStart(2, '0')
str = `${y}-${m}-${d}`
return str
},
getDataList () {
if (!this.dataForm.startTime || this.dataForm.startTime.length <= 0) {
this.$message.error('请选择开始日期！')
return
}
if (!this.dataForm.endTime || this.dataForm.endTime.length <= 0) {
this.$message.error('请选择结束日期！')
return
}
this.getPieDataList()
this.getHistogramDataList()
this.getLineDataList()
},
getOption1(data) {
if (!this.chartInit1) {
let dom = document.getElementById('chartData')
if (!dom) return
this.chartInit1 = this.$echarts.init(dom)
}
let option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
orient: 'horizontal',
bottom: 20,
data: data
},
series: [
{
bottom: 80,
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
/*itemStyle: {
normal: {
color: function (params) {
//自定义颜色
let colorList = [
'#67C23A', '#409EFF', '#F56C6C', '#E6A23C'
]
return colorList[params.dataIndex]
}
}
},*/
data: this.chartData
}
]
}
this.chartInit1.setOption(option)
},
// 获取数据列表(历史占比统计)
getPieDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/routes/rtEqAlarm/getPieStatisticsData'),
method: 'post',
data: {
stationId: localStorage.getItem('stationId'),
startTime: this.dataForm.startTime,
endTime: this.dataForm.endTime
}
}).then(data => {
if (data && data.code === 0) {
this.chartData = data.rows
this.getOption1(data.dicList)
}
this.dataListLoading = false
})
},
getOption2(data) {
if (!this.chartInit2) {
let dom = document.getElementById('chartData2')
if (!dom) return
this.chartInit2 = this.$echarts.init(dom)
}
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
type: 'plain',
orient: 'horizontal',
bottom: 10,
data: data
},
xAxis: {
data: data,
axisLabel: {
//align: 'center',
interval: 0,
rotate: 10
}
},
yAxis: {},
grid: {
left: '2%',
right: '2%',
containLabel: true
},
series: [{
type: 'bar',
data: this.chartData2,
barWidth: '80%',
bottom: 80
/*itemStyle: {
normal: {
color: function (params) {
//自定义颜色
let colorList = [
'#67C23A', '#409EFF', '#F56C6C', '#E6A23C'
]
return colorList[params.dataIndex]
}
}
}*/
}]
}
this.chartInit2.setOption(option)
},
// 获取数据列表
getHistogramDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/routes/rtEqAlarm/getHistogramStatisticsData'),
method: 'post',
data: {
stationId: localStorage.getItem('stationId'),
startTime: this.dataForm.startTime,
endTime: this.dataForm.endTime
}
}).then(data => {
if (data && data.code === 0) {
this.chartData2 = data.countList
this.getOption2(data.dicList)
}
this.dataListLoading = false
})
},
getOption3(data) {
if (!this.chartInit3) {
let dom = document.getElementById('chartData3')
if (!dom) return
this.chartInit3 = this.$echarts.init(dom)
}
let option = {
tooltip: {
trigger: 'axis'
},
legend: {
orient: 'horizontal',
bottom: 10,
data: data.legendData
},
grid: {
left: '2%',
right: '2%',
containLabel: true
},
toolbox: {},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.xAxisData
},
yAxis: {
type: 'value'
},
series: data.rows
}
this.chartInit3.setOption(option)
},
// 获取数据列表
getLineDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/routes/rtEqAlarm/getLineStatisticsData'),
method: 'post',
data: {
stationId: localStorage.getItem('stationId'),
startTime: this.dataForm.startTime,
endTime: this.dataForm.endTime
}
}).then(data => {
if (data && data.code === 0) {
this.getOption3(data)
}
this.dataListLoading = false
})
}
}
}
</script>
<style lang='scss'>
.div-block {
height: 55vh;
width: 540px;
position: relative;
text-align: center;
margin: 5px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(23, 41, 71, 0.08);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
.chart-title {
line-height: 40px;
background: #eef8ff;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333;
}
}
.inner {
position: absolute;
top: 80px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>