Alarm 模块中所有的筛选条件中日期选择框都改为默认一周

This commit is contained in:
任珮宇 2023-12-11 17:43:05 +08:00
parent bf2ceff880
commit 9dd2c6b830
8 changed files with 448 additions and 389 deletions

View File

@ -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()"
@ -16,7 +16,10 @@
>
<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>
@ -28,7 +31,10 @@
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-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'
@ -108,7 +114,7 @@ export default {
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
total: 0,
},
loading: false,
isImmediate: true,
@ -122,16 +128,18 @@ 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')})
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() {
@ -143,29 +151,29 @@ export default {
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,
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')
}
})
},
@ -176,59 +184,59 @@ export default {
pageSize: this.ipagination.pageSize,
type: obj.types || null,
startDate: obj.startDate,
endDate:obj.endDate
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,
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,25 +244,25 @@ 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 = {
@ -263,13 +271,13 @@ export default {
// 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,8 +292,8 @@ 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()
@ -293,33 +301,33 @@ export default {
}
},
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: [
@ -329,17 +337,17 @@ export default {
radius: ['40%', '60%'],
data: this.pieData.map((item, index) => {
item.label = {
color: this.pieColors[index]
color: this.pieColors[index],
}
return item;
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})%}',
@ -347,113 +355,113 @@ export default {
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
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";
@import '~@/assets/less/TabMenu.less';
.chart-layout {
height: 230px;
margin-left: 20px;

View File

@ -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')})
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 })
@ -56,13 +59,13 @@ export default {
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')
}
})
},
@ -71,13 +74,13 @@ export default {
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')
}
})
},
@ -86,60 +89,60 @@ export default {
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
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,
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
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,
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: [
@ -257,17 +260,17 @@ export default {
radius: ['50%', '75%'],
data: this.pieData.map((item, index) => {
item.label = {
color: this.pieColors[index]
color: this.pieColors[index],
}
return item;
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})%}',
@ -275,17 +278,17 @@ export default {
q: {
fontSize: 16,
fontFamily: 'ArialMT',
lineHeight: 22
lineHeight: 22,
},
}
},
}
]
},
},
],
}
myChart.setOption(options)
window.addEventListener("resize", function () {
myChart.resize();
});
window.addEventListener('resize', function () {
myChart.resize()
})
},
},
}

View File

@ -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

View File

@ -151,7 +151,7 @@ export default {
}
},
created() {
this.queryParams.startDate = this.getBeforeDate(1)
this.queryParams.startDate = this.getBeforeDate(6)
},
mounted() {
this.getNuclideAvgList()

View File

@ -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>

View File

@ -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
@ -13,7 +13,10 @@
>
<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
@ -24,7 +27,10 @@
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-total="
(total, range) =>
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange"
@showSizeChange="handleSizeChange"
@ -34,33 +40,36 @@
</template>
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar';
import TableList from '../../components/tableList.vue';
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 = [{
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 {
@ -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')})
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,7 +118,7 @@ export default {
this.paramsArg = {
startDate,
endDate,
names
names,
}
this.getDbAlarmHistory({ startDate, endDate, names })
},
@ -120,17 +131,19 @@ export default {
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
}
getAction("/sysDatabase/findAlarmHistory", params).then(res => {
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")
this.$message.warning('This operation fails. Contact your system administrator')
}
}).catch(err => {
})
.catch((err) => {
this.loading = false
this.$message.warning("This operation fails. Contact your system administrator")
this.$message.warning('This operation fails. Contact your system administrator')
})
},
handlePageChange(page, pageSize) {

View File

@ -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
@ -13,7 +13,10 @@
>
<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
@ -24,7 +27,10 @@
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-total="
(total, range) =>
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange"
@showSizeChange="handleSizeChange"
@ -34,33 +40,36 @@
</template>
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar';
import TableList from '../../components/tableList.vue';
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 = [{
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 {
@ -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')})
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,7 +118,7 @@ export default {
this.paramsArg = {
startDate,
endDate,
names
names,
}
this.getEmailAlarmHistory({ startDate, endDate, names })
},
@ -120,17 +131,19 @@ export default {
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
}
getAction("/sysEmail/findAlarmHistory", params).then(res => {
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")
this.$message.warning('This operation fails. Contact your system administrator')
}
}).catch(err => {
})
.catch((err) => {
this.loading = false
this.$message.warning("This operation fails. Contact your system administrator")
this.$message.warning('This operation fails. Contact your system administrator')
})
},
handlePageChange(page, pageSize) {

View File

@ -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
@ -13,7 +13,10 @@
>
<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
@ -24,7 +27,10 @@
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-total="
(total, range) =>
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange"
@showSizeChange="handleSizeChange"
@ -34,33 +40,36 @@
</template>
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar';
import TableList from '../../components/tableList.vue';
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 = [{
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 {
@ -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')})
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,7 +118,7 @@ export default {
this.paramsArg = {
startDate,
endDate,
names
names,
}
this.getServerAlarmHistory({ startDate, endDate, names })
},
@ -120,17 +131,19 @@ export default {
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
}
getAction("/sysServer/findAlarmHistory", params).then(res => {
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")
this.$message.warning('This operation fails. Contact your system administrator')
}
}).catch(err => {
})
.catch((err) => {
this.loading = false
this.$message.warning("This operation fails. Contact your system administrator")
this.$message.warning('This operation fails. Contact your system administrator')
})
},
handlePageChange(page, pageSize) {