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