Alarm 模块中所有的筛选条件中日期选择框都改为默认一周
This commit is contained in:
parent
bf2ceff880
commit
9dd2c6b830
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<SearchBar type="alarmCenter" @search="handleSearch"></SearchBar>
|
||||
<div class="chart-layout" id="alarmChartBar"></div>
|
||||
<a-card :bordered="false" style="height:calc(100% - 280px);margin-left: 20px;">
|
||||
<a-card :bordered="false" style="height: calc(100% - 280px); margin-left: 20px">
|
||||
<a-tabs default-active-key="alarmHistory" @change="handleTabChange">
|
||||
<a-tab-pane class="history_tab" key="alarmHistory" tab="ALARM HISTORY">
|
||||
<div style=" height: calc(100% - 30px);overflow: auto;">
|
||||
<div style="height: calc(100% - 30px); overflow: auto">
|
||||
<custom-table
|
||||
size="middle"
|
||||
:rowKey="getUid()"
|
||||
|
|
@ -14,22 +14,28 @@
|
|||
:loading="loading"
|
||||
:canSelect="false"
|
||||
>
|
||||
<template slot="info" slot-scope="{ record}">
|
||||
<template slot="info" slot-scope="{ record }">
|
||||
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>
|
||||
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
|
||||
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
|
||||
</div>
|
||||
</template>
|
||||
</custom-table>
|
||||
</div>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
|
|
@ -39,14 +45,14 @@
|
|||
<div class="chart-left">
|
||||
<div class="chart-title">
|
||||
<span>Monitor Type Alarms</span>
|
||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="" />
|
||||
</div>
|
||||
<div class="chart-content" id="chartLeft"></div>
|
||||
</div>
|
||||
<div class="chart-right">
|
||||
<div class="chart-title">
|
||||
<span>Alarm Rule Top5</span>
|
||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="" />
|
||||
</div>
|
||||
<div class="chart-content" id="chartRight"></div>
|
||||
</div>
|
||||
|
|
@ -58,8 +64,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import moment from 'moment'
|
||||
import SearchBar from '../../components/searchBar'
|
||||
import { postAction } from '@/api/manage'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
|
|
@ -98,7 +104,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -108,10 +114,10 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
loading:false,
|
||||
isImmediate:true,
|
||||
loading: false,
|
||||
isImmediate: true,
|
||||
columns,
|
||||
dataSource: [],
|
||||
alarmBar: null,
|
||||
|
|
@ -122,50 +128,52 @@ export default {
|
|||
xData_top: [],
|
||||
yData_top: [],
|
||||
pieData: [],
|
||||
pieColors:["#d64618","#c99e0d","#b2a927"],
|
||||
pieColors: ['#d64618', '#c99e0d', '#b2a927'],
|
||||
url: {
|
||||
list: '/alarmLog/findPage'
|
||||
list: '/alarmLog/findPage',
|
||||
},
|
||||
pieTotal: 0,
|
||||
paramsArg: {}
|
||||
paramsArg: {},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.handleSearch({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')})
|
||||
mounted() {
|
||||
let currentTime = moment()
|
||||
let agoDays = moment().subtract(6, 'days')
|
||||
this.handleSearch({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
|
||||
},
|
||||
methods: {
|
||||
getUid() {
|
||||
return (Math.random()+new Date().getTime()).toString(32).slice(0,8)
|
||||
return (Math.random() + new Date().getTime()).toString(32).slice(0, 8)
|
||||
},
|
||||
handleSearch({ startDate, endDate, types }) {
|
||||
this.ipagination.current = 1
|
||||
if (startDate&&endDate) {
|
||||
if (startDate && endDate) {
|
||||
this.paramsArg = {
|
||||
startDate,
|
||||
endDate,
|
||||
types
|
||||
types,
|
||||
}
|
||||
this.getAlarmLogBar({ startDate, endDate, types })
|
||||
this.getTypeAlarmPie({ startDate, endDate })
|
||||
this.getAlarmLogTable({ startDate, endDate, types })
|
||||
this.getAlarmTop({ startDate, endDate, types })
|
||||
} else {
|
||||
this.$message.warning("The Start Time Or End Time Cannot Be Empty!")
|
||||
this.$message.warning('The Start Time Or End Time Cannot Be Empty!')
|
||||
}
|
||||
},
|
||||
getAlarmLogBar(obj) {
|
||||
let params = {
|
||||
startDate:obj.startDate,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
type: obj.types
|
||||
type: obj.types,
|
||||
}
|
||||
postAction("/alarmLog/viewAll", params).then(res => {
|
||||
postAction('/alarmLog/viewAll', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.xData = res.result.xData
|
||||
this.yData = res.result.yData
|
||||
this.drawAlarmChart_bar()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -174,61 +182,61 @@ export default {
|
|||
let params = {
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
type:obj.types || null,
|
||||
startDate:obj.startDate,
|
||||
endDate:obj.endDate
|
||||
type: obj.types || null,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
}
|
||||
postAction("/alarmLog/findPage", params).then(res => {
|
||||
postAction('/alarmLog/findPage', params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
drawAlarmChart_bar() {
|
||||
this.alarmBar = echarts.init(document.getElementById("alarmChartBar"))
|
||||
this.alarmBar = echarts.init(document.getElementById('alarmChartBar'))
|
||||
let options = {
|
||||
grid: {
|
||||
left: '12',
|
||||
right: '0%',
|
||||
bottom: '15',
|
||||
top: "25",
|
||||
containLabel: true
|
||||
top: '25',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
data: this.xData
|
||||
data: this.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show:true,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.5)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.2)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -236,40 +244,40 @@ export default {
|
|||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
itemStyle: {
|
||||
color: "#b87b1b"
|
||||
color: '#b87b1b',
|
||||
},
|
||||
label: {
|
||||
formatter: (params) => {
|
||||
return params.value>0?params.value:""
|
||||
return params.value > 0 ? params.value : ''
|
||||
},
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#b87b1b",
|
||||
fontFamily: "ArialMT"
|
||||
position: 'top',
|
||||
color: '#b87b1b',
|
||||
fontFamily: 'ArialMT',
|
||||
},
|
||||
data: this.yData,
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
this.alarmBar.setOption(options)
|
||||
window.addEventListener("resize", function () {
|
||||
this.alarmBar.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
this.alarmBar.resize()
|
||||
})
|
||||
},
|
||||
getTypeAlarmPie(obj) {
|
||||
let params = {
|
||||
startDate:obj.startDate,
|
||||
endDate:obj.endDate,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
// startDate:"2023-07-15",
|
||||
// endDate:"2023-07-21"
|
||||
}
|
||||
postAction("/alarmLog/typeAlarms", params).then(res => {
|
||||
postAction('/alarmLog/typeAlarms', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.pieData = res.result.pieData
|
||||
this.pieTotal = res.result.pieTotal
|
||||
this.drawAlarmChart_pie()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -284,42 +292,42 @@ export default {
|
|||
this.getAlarmLogTable(this.paramsArg)
|
||||
},
|
||||
handleTabChange(key) {
|
||||
console.log(key);
|
||||
if (key == "alarmAnalysis") {
|
||||
console.log(key)
|
||||
if (key == 'alarmAnalysis') {
|
||||
this.$nextTick(() => {
|
||||
this.drawAlarmChart_pie()
|
||||
this.drawAlarmChart_top()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
drawAlarmChart_pie() {
|
||||
this.alarmPie = echarts.init(document.getElementById("chartLeft"))
|
||||
this.alarmPie = echarts.init(document.getElementById('chartLeft'))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: "text",
|
||||
left: "center",
|
||||
top: "40%",
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
style: {
|
||||
text: this.pieTotal,
|
||||
textAlign: "center",
|
||||
fill: "#ffffff",
|
||||
font: '32px "MicrogrammaD-MediExte"'
|
||||
}
|
||||
textAlign: 'center',
|
||||
fill: '#ffffff',
|
||||
font: '32px "MicrogrammaD-MediExte"',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
left: "center",
|
||||
top: "50%",
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '50%',
|
||||
style: {
|
||||
text: "Alarm Total",
|
||||
textAlign: "center",
|
||||
fill: "#ade6ee",
|
||||
font: '24px "ArialMT"'
|
||||
}
|
||||
text: 'Alarm Total',
|
||||
textAlign: 'center',
|
||||
fill: '#ade6ee',
|
||||
font: '24px "ArialMT"',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
@ -328,150 +336,150 @@ export default {
|
|||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
data: this.pieData.map((item, index) => {
|
||||
item.label = {
|
||||
color: this.pieColors[index]
|
||||
}
|
||||
return item;
|
||||
item.label = {
|
||||
color: this.pieColors[index],
|
||||
}
|
||||
return item
|
||||
}),
|
||||
itemStyle: {
|
||||
borderColor: '#02282b',
|
||||
borderWidth: 5,
|
||||
color: (params) => {
|
||||
var index = params.dataIndex;
|
||||
return this.pieColors[index];
|
||||
}
|
||||
var index = params.dataIndex
|
||||
return this.pieColors[index]
|
||||
},
|
||||
},
|
||||
label:{
|
||||
formatter:'{q|{b}}\n{q|{c}} {q|({d})%}',
|
||||
label: {
|
||||
formatter: '{q|{b}}\n{q|{c}} {q|({d})%}',
|
||||
rich: {
|
||||
q: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'ArialMT',
|
||||
lineHeight: 22
|
||||
lineHeight: 22,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
this.alarmPie.setOption(options)
|
||||
window.addEventListener("resize", function () {
|
||||
this.alarmPie.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
this.alarmPie.resize()
|
||||
})
|
||||
},
|
||||
getAlarmTop(obj) {
|
||||
let params = {
|
||||
startDate:obj.startDate,
|
||||
endDate:obj.endDate,
|
||||
type: obj.types
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
type: obj.types,
|
||||
}
|
||||
postAction("/alarmLog/ruleTop", params).then(res => {
|
||||
console.log(res);
|
||||
postAction('/alarmLog/ruleTop', params).then((res) => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
this.xData_top = res.result.yData
|
||||
this.yData_top = res.result.xData
|
||||
this.drawAlarmChart_top()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
drawAlarmChart_top() {
|
||||
this.alarmTop = echarts.init(document.getElementById("chartRight"))
|
||||
this.alarmTop = echarts.init(document.getElementById('chartRight'))
|
||||
let options = {
|
||||
grid: {
|
||||
top:"3%",
|
||||
top: '3%',
|
||||
left: '0%',
|
||||
right: '30',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ade6ee",
|
||||
fontFamily: "ArialMT"
|
||||
color: '#ade6ee',
|
||||
fontFamily: 'ArialMT',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
data: this.yData_top
|
||||
data: this.yData_top,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: "#80a23e"
|
||||
color: '#80a23e',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#a7da44",
|
||||
fontFamily: "ArialMT"
|
||||
position: 'right',
|
||||
color: '#a7da44',
|
||||
fontFamily: 'ArialMT',
|
||||
},
|
||||
data: this.xData_top,
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
this.alarmTop.setOption(options)
|
||||
window.addEventListener("resize", function () {
|
||||
this.alarmTop.resize();
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', function () {
|
||||
this.alarmTop.resize()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/TabMenu.less";
|
||||
.chart-layout{
|
||||
@import '~@/assets/less/TabMenu.less';
|
||||
.chart-layout {
|
||||
height: 230px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.analysis-chart{
|
||||
.analysis-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.chart-left{
|
||||
.chart-left {
|
||||
width: 43%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-right{
|
||||
.chart-right {
|
||||
width: 56%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-title{
|
||||
.chart-title {
|
||||
height: 40px;
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 18px;
|
||||
|
|
@ -484,31 +492,31 @@ export default {
|
|||
position: relative;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
span{
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
background-color: rgba(12, 235, 201, 0.05);
|
||||
}
|
||||
img{
|
||||
img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.chart-content{
|
||||
.chart-content {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
.info-alarm{
|
||||
.info-alarm {
|
||||
font-family: ArialMT;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
.history_tab{
|
||||
.history_tab {
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
|
||||
<div class="chart-layout" id="analysisChartBar"></div>
|
||||
<div class="chart-box">
|
||||
|
|
@ -16,15 +16,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import SearchBar from '../../components/searchBar'
|
||||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
components: {
|
||||
SearchBar,
|
||||
BoxTitle
|
||||
BoxTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -33,19 +34,21 @@ export default {
|
|||
xData_left: [],
|
||||
yData_left: [],
|
||||
pieData: [],
|
||||
pieColors:["#00bcd4","#14b2a3","#97b94b","#47b55d"],
|
||||
pieColors: ['#00bcd4', '#14b2a3', '#97b94b', '#47b55d'],
|
||||
pieTotal: 0,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.handleSearch({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')})
|
||||
mounted() {
|
||||
let currentTime = moment()
|
||||
let agoDays = moment().subtract(6, 'days')
|
||||
this.handleSearch({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
|
||||
},
|
||||
methods: {
|
||||
handleSearch({ startDate, endDate, types }) {
|
||||
this.paramsArg = {
|
||||
startDate,
|
||||
endDate,
|
||||
types
|
||||
types,
|
||||
}
|
||||
this.getAnalysisLogBar({ startDate, endDate })
|
||||
this.getStationNum({ startDate, endDate })
|
||||
|
|
@ -53,93 +56,93 @@ export default {
|
|||
},
|
||||
getAnalysisLogBar(obj) {
|
||||
let params = {
|
||||
startDate:obj.startDate,
|
||||
endDate:obj.endDate,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
}
|
||||
getAction("/alarmAnalysisLog/byTime", params).then(res => {
|
||||
getAction('/alarmAnalysisLog/byTime', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.xData = res.result.xData
|
||||
this.yData = res.result.yData
|
||||
this.drawAnalysis_bar()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getStationNum(obj) {
|
||||
let params = {
|
||||
startDate:obj.startDate,
|
||||
endDate:obj.endDate,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
}
|
||||
getAction("/alarmAnalysisLog/byStatoin", params).then(res => {
|
||||
getAction('/alarmAnalysisLog/byStatoin', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.xData_left = res.result.xData
|
||||
this.yData_left = res.result.yData
|
||||
this.drawLeftChart()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getAnalysisSource(obj) {
|
||||
let params = {
|
||||
startDate:obj.startDate,
|
||||
endDate:obj.endDate,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
}
|
||||
getAction("/alarmAnalysisLog/bySource", params).then(res => {
|
||||
getAction('/alarmAnalysisLog/bySource', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.pieData = res.result.pieData
|
||||
this.pieTotal = res.result.pieTotal
|
||||
this.drawRightChart()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
drawAnalysis_bar() {
|
||||
let myChart = echarts.init(document.getElementById("analysisChartBar"))
|
||||
let myChart = echarts.init(document.getElementById('analysisChartBar'))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
left: '12',
|
||||
right: '0%',
|
||||
bottom: '15',
|
||||
top:15,
|
||||
containLabel: true
|
||||
top: 15,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
data: this.xData
|
||||
data: this.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show:true,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.5)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.2)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -147,61 +150,61 @@ export default {
|
|||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
itemStyle: {
|
||||
color: "#b87b1b"
|
||||
color: '#b87b1b',
|
||||
},
|
||||
data: this.yData,
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(options)
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
},
|
||||
drawLeftChart() {
|
||||
let myChart = echarts.init(document.getElementById("chartLeft"))
|
||||
let myChart = echarts.init(document.getElementById('chartLeft'))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
left: '12',
|
||||
right: '0%',
|
||||
bottom: '15',
|
||||
top:15,
|
||||
containLabel: true
|
||||
top: 15,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
data: this.xData_left
|
||||
data: this.xData_left,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show:true,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.5)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.2)"
|
||||
}
|
||||
color: 'rgba(119, 181, 213, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -209,45 +212,45 @@ export default {
|
|||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
itemStyle: {
|
||||
color: "#2e83cc"
|
||||
color: '#2e83cc',
|
||||
},
|
||||
data: this.yData_left,
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(options)
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
},
|
||||
drawRightChart() {
|
||||
let myChart = echarts.init(document.getElementById("chartRight"))
|
||||
let myChart = echarts.init(document.getElementById('chartRight'))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: "text",
|
||||
left: "center",
|
||||
top: "40%",
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
style: {
|
||||
text: this.pieTotal,
|
||||
textAlign: "center",
|
||||
fill: "#ffffff",
|
||||
font: '32px "MicrogrammaD-MediExte"'
|
||||
}
|
||||
textAlign: 'center',
|
||||
fill: '#ffffff',
|
||||
font: '32px "MicrogrammaD-MediExte"',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
left: "center",
|
||||
top: "50%",
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '50%',
|
||||
style: {
|
||||
text: "Alarm Total",
|
||||
textAlign: "center",
|
||||
fill: "#ade6ee",
|
||||
font: '22px "ArialMT"'
|
||||
}
|
||||
text: 'Alarm Total',
|
||||
textAlign: 'center',
|
||||
fill: '#ade6ee',
|
||||
font: '22px "ArialMT"',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
@ -256,63 +259,63 @@ export default {
|
|||
type: 'pie',
|
||||
radius: ['50%', '75%'],
|
||||
data: this.pieData.map((item, index) => {
|
||||
item.label = {
|
||||
color: this.pieColors[index]
|
||||
}
|
||||
return item;
|
||||
item.label = {
|
||||
color: this.pieColors[index],
|
||||
}
|
||||
return item
|
||||
}),
|
||||
itemStyle: {
|
||||
borderColor: '#02282b',
|
||||
borderWidth: 5,
|
||||
color: (params) => {
|
||||
var index = params.dataIndex;
|
||||
return this.pieColors[index];
|
||||
}
|
||||
var index = params.dataIndex
|
||||
return this.pieColors[index]
|
||||
},
|
||||
},
|
||||
label:{
|
||||
formatter:'{q|{b}}\n{q|{c}} {q|({d})%}',
|
||||
label: {
|
||||
formatter: '{q|{b}}\n{q|{c}} {q|({d})%}',
|
||||
rich: {
|
||||
q: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'ArialMT',
|
||||
lineHeight: 22
|
||||
lineHeight: 22,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(options)
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart-layout{
|
||||
.chart-layout {
|
||||
height: 400px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.chart-box{
|
||||
.chart-box {
|
||||
height: calc(100% - 450px);
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-left{
|
||||
&-left {
|
||||
width: calc(100% - 545px);
|
||||
height: 100%;
|
||||
&-bar{
|
||||
&-bar {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
&-right{
|
||||
&-right {
|
||||
width: 525px;
|
||||
height: 100%;
|
||||
&-pie{
|
||||
&-pie {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -203,6 +203,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import SearchBar from '../../components/searchBar'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
|
|
@ -311,10 +312,18 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getBeforeDate(6)
|
||||
this.getStationList()
|
||||
this.getPageData()
|
||||
},
|
||||
methods: {
|
||||
// 获取n天前的日期
|
||||
getBeforeDate(n) {
|
||||
let currentTime = moment()
|
||||
let agoDays = moment().subtract(n, 'days')
|
||||
this.paramsArg.startDate = agoDays.format('YYYY-MM-DD')
|
||||
this.paramsArg.endDate = currentTime.format('YYYY-MM-DD')
|
||||
},
|
||||
handleHoverChange(visible, row) {
|
||||
row.popClicked = false
|
||||
row.popHovered = visible
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
this.queryParams.startDate = this.getBeforeDate(1)
|
||||
this.queryParams.startDate = this.getBeforeDate(6)
|
||||
},
|
||||
mounted() {
|
||||
this.getNuclideAvgList()
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
<a-form-model-item label="Alarm date">
|
||||
<a-range-picker
|
||||
dropdownClassName="asd"
|
||||
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||
:default-value="[moment(queryParams.startDate).subtract(6, 'days'), moment(queryParams.endDate)]"
|
||||
@change="onRangeDateChange"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<SearchBar type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
|
||||
<div class="server-main">
|
||||
<TableList
|
||||
|
|
@ -11,21 +11,27 @@
|
|||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
<template slot="info" slot-scope="{ record}">
|
||||
<template slot="info" slot-scope="{ record }">
|
||||
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>
|
||||
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
|
||||
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
|
||||
</div>
|
||||
</template>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
|
|
@ -34,38 +40,41 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
const columns = [{
|
||||
import moment from 'moment'
|
||||
import SearchBar from '../../components/searchBar'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'name',
|
||||
width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'ALARM START DATE',
|
||||
align: 'center',
|
||||
dataIndex: 'alarmStartDate',
|
||||
width: 300,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'ALARM INFO',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmInfo',
|
||||
scopedSlots: {
|
||||
customRender: 'info',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
SearchBar,
|
||||
TableList
|
||||
TableList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -75,30 +84,32 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
nameOptions: [],
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
paramsArg: {}
|
||||
paramsArg: {},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDbList();
|
||||
this.getDbAlarmHistory({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')})
|
||||
mounted() {
|
||||
let currentTime = moment()
|
||||
let agoDays = moment().subtract(6, 'days')
|
||||
this.getDbList()
|
||||
this.getDbAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
|
||||
},
|
||||
methods: {
|
||||
getDbList() {
|
||||
getAction("/sysDatabase/sourceList").then(res => {
|
||||
getAction('/sysDatabase/sourceList').then((res) => {
|
||||
if (res.success) {
|
||||
this.nameOptions = res.result.map(item => {
|
||||
this.nameOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
value: item.sourceId,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -107,31 +118,33 @@ export default {
|
|||
this.paramsArg = {
|
||||
startDate,
|
||||
endDate,
|
||||
names
|
||||
names,
|
||||
}
|
||||
this.getDbAlarmHistory({ startDate, endDate, names })
|
||||
},
|
||||
getDbAlarmHistory(obj) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: obj.names||null,
|
||||
startDate:obj.startDate,
|
||||
sourceId: obj.names || null,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysDatabase/findAlarmHistory", params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
})
|
||||
getAction('/sysDatabase/findAlarmHistory', params)
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = false
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
|
|
@ -148,7 +161,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.server-main{
|
||||
.server-main {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
|
|
@ -156,15 +169,15 @@ export default {
|
|||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.info-alarm{
|
||||
.info-alarm {
|
||||
font-family: ArialMT;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<SearchBar type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
|
||||
<div class="server-main">
|
||||
<TableList
|
||||
|
|
@ -11,21 +11,27 @@
|
|||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
<template slot="info" slot-scope="{ record}">
|
||||
<template slot="info" slot-scope="{ record }">
|
||||
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>
|
||||
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
|
||||
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
|
||||
</div>
|
||||
</template>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
|
|
@ -34,38 +40,41 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
const columns = [{
|
||||
import moment from 'moment'
|
||||
import SearchBar from '../../components/searchBar'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'name',
|
||||
width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'ALARM START DATE',
|
||||
align: 'center',
|
||||
dataIndex: 'alarmStartDate',
|
||||
width: 300,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'ALARM INFO',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmInfo',
|
||||
scopedSlots: {
|
||||
customRender: 'info',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
SearchBar,
|
||||
TableList
|
||||
TableList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -75,30 +84,32 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
nameOptions: [],
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
paramsArg: {}
|
||||
paramsArg: {},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getEmailList();
|
||||
this.getEmailAlarmHistory({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')})
|
||||
mounted() {
|
||||
let currentTime = moment()
|
||||
let agoDays = moment().subtract(6, 'days')
|
||||
this.getEmailList()
|
||||
this.getEmailAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
|
||||
},
|
||||
methods: {
|
||||
getEmailList() {
|
||||
getAction("/sysEmail/sourceList").then(res => {
|
||||
getAction('/sysEmail/sourceList').then((res) => {
|
||||
if (res.success) {
|
||||
this.nameOptions = res.result.map(item => {
|
||||
this.nameOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
value: item.sourceId,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -107,31 +118,33 @@ export default {
|
|||
this.paramsArg = {
|
||||
startDate,
|
||||
endDate,
|
||||
names
|
||||
names,
|
||||
}
|
||||
this.getEmailAlarmHistory({ startDate, endDate, names })
|
||||
},
|
||||
getEmailAlarmHistory(obj) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: obj.names||null,
|
||||
startDate:obj.startDate,
|
||||
sourceId: obj.names || null,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysEmail/findAlarmHistory", params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
})
|
||||
getAction('/sysEmail/findAlarmHistory', params)
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = false
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
|
|
@ -148,7 +161,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.server-main{
|
||||
.server-main {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
|
|
@ -156,15 +169,15 @@ export default {
|
|||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.info-alarm{
|
||||
.info-alarm {
|
||||
font-family: ArialMT;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<SearchBar type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
|
||||
<div class="server-main">
|
||||
<TableList
|
||||
|
|
@ -11,21 +11,27 @@
|
|||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
<template slot="info" slot-scope="{ record}">
|
||||
<template slot="info" slot-scope="{ record }">
|
||||
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>
|
||||
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
|
||||
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
|
||||
</div>
|
||||
</template>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
|
|
@ -34,38 +40,41 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
const columns = [{
|
||||
import moment from 'moment'
|
||||
import SearchBar from '../../components/searchBar'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'name',
|
||||
width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'ALARM START DATE',
|
||||
align: 'center',
|
||||
dataIndex: 'alarmStartDate',
|
||||
width: 300,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'ALARM INFO',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmInfo',
|
||||
scopedSlots: {
|
||||
customRender: 'info',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
SearchBar,
|
||||
TableList
|
||||
TableList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -75,30 +84,32 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
nameOptions: [],
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
paramsArg: {}
|
||||
paramsArg: {},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getServerList();
|
||||
this.getServerAlarmHistory({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')})
|
||||
mounted() {
|
||||
let currentTime = moment()
|
||||
let agoDays = moment().subtract(6, 'days')
|
||||
this.getServerList()
|
||||
this.getServerAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
|
||||
},
|
||||
methods: {
|
||||
getServerList() {
|
||||
getAction("/sysServer/sourceList").then(res => {
|
||||
getAction('/sysServer/sourceList').then((res) => {
|
||||
if (res.success) {
|
||||
this.nameOptions = res.result.map(item => {
|
||||
this.nameOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
value: item.sourceId,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -107,31 +118,33 @@ export default {
|
|||
this.paramsArg = {
|
||||
startDate,
|
||||
endDate,
|
||||
names
|
||||
names,
|
||||
}
|
||||
this.getServerAlarmHistory({ startDate, endDate, names })
|
||||
},
|
||||
getServerAlarmHistory(obj) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: obj.names||null,
|
||||
startDate:obj.startDate,
|
||||
sourceId: obj.names || null,
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysServer/findAlarmHistory", params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
})
|
||||
getAction('/sysServer/findAlarmHistory', params)
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = false
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
|
|
@ -148,7 +161,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.server-main{
|
||||
.server-main {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
|
|
@ -156,15 +169,15 @@ export default {
|
|||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.info-alarm{
|
||||
.info-alarm {
|
||||
font-family: ArialMT;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user