server DB email 三个模块alarmHistory页面开发
This commit is contained in:
parent
5a56764983
commit
51303a266f
|
|
@ -13,8 +13,8 @@
|
|||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:canSelect="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- @change="handleTableChange" -->
|
||||
<!-- :pagination="ipagination" -->
|
||||
<template slot="info" slot-scope="{ record}">
|
||||
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
|
||||
|
|
@ -571,9 +571,9 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,9 +4,16 @@
|
|||
<a-col flex="190px">
|
||||
<a-input placeholder="search..." />
|
||||
</a-col>
|
||||
<a-col flex="270px">
|
||||
<a-col flex="310px" v-if="type=='alarmCenter'">
|
||||
<a-form-model-item label="Type">
|
||||
<a-select :value="queryParams.types" mode="multiple" :maxTagCount="1" :options="typeOptions" show-arrow @change="onTypeChange">
|
||||
<a-select
|
||||
:value="queryParams.types"
|
||||
mode="multiple"
|
||||
:maxTagCount="1"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
@change="onTypeChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
<div slot="dropdownRender" slot-scope="menu">
|
||||
<v-nodes :vnodes="menu" />
|
||||
|
|
@ -21,9 +28,17 @@
|
|||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col flex="270px" v-if="type!=='alarmCenter'">
|
||||
<a-col flex="310px" v-if="type!=='alarmCenter'">
|
||||
<a-form-model-item label="Name">
|
||||
<a-select v-bind="$attrs" show-arrow @change="onChange">
|
||||
<a-select
|
||||
:value="queryParams.names"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
show-arrow
|
||||
:options="options"
|
||||
@change="onNameChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
<div slot="dropdownRender" slot-scope="menu">
|
||||
<v-nodes :vnodes="menu" />
|
||||
|
|
@ -32,7 +47,7 @@
|
|||
style="padding: 4px 12px; cursor: pointer;"
|
||||
@mousedown="e => e.preventDefault()"
|
||||
>
|
||||
<a-checkbox v-model="allVal" @change="handleAllClick"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
|
||||
<a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</a-select>
|
||||
|
|
@ -66,6 +81,10 @@ export default {
|
|||
type: String,
|
||||
default: ''
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VNodes: {
|
||||
|
|
@ -76,6 +95,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
allVal: true,
|
||||
allVal_name: false,
|
||||
typeOptions: [
|
||||
{
|
||||
label: "Server",
|
||||
|
|
@ -92,7 +112,7 @@ export default {
|
|||
],
|
||||
queryParams: {
|
||||
types: ["Server","Database","Email"],
|
||||
name: "",
|
||||
names: undefined,
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
||||
}
|
||||
|
|
@ -115,6 +135,21 @@ export default {
|
|||
this.queryParams.types = []
|
||||
}
|
||||
},
|
||||
handleAllClickBox_Name(e) {
|
||||
this.allVal_name = e.target.checked
|
||||
this.setSelectVal_name()
|
||||
},
|
||||
handleAllClick_Name(e) {
|
||||
this.allVal_name = !this.allVal_name
|
||||
this.setSelectVal_name()
|
||||
},
|
||||
setSelectVal_name() {
|
||||
if (this.allVal_name) {
|
||||
this.queryParams.names = this.options.map(item => item.value)
|
||||
} else {
|
||||
this.queryParams.names = []
|
||||
}
|
||||
},
|
||||
onTypeChange(val) {
|
||||
this.queryParams.types = val
|
||||
let length = this.typeOptions.length
|
||||
|
|
@ -124,6 +159,15 @@ export default {
|
|||
this.allVal = false
|
||||
}
|
||||
},
|
||||
onNameChange(val) {
|
||||
this.queryParams.names = val
|
||||
let length = this.options.length
|
||||
if (val.length === length) {
|
||||
this.allVal_name = true
|
||||
} else {
|
||||
this.allVal_name = false
|
||||
}
|
||||
},
|
||||
onRangeDateChange(date, dateString) {
|
||||
this.queryParams.startDate = dateString[0]
|
||||
this.queryParams.endDate = dateString[1]
|
||||
|
|
@ -148,7 +192,7 @@ export default {
|
|||
width: 166px;
|
||||
}
|
||||
.ant-select{
|
||||
width: 200px;
|
||||
width: 240px;
|
||||
}
|
||||
.ant-calendar-picker{
|
||||
width: 270px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,163 @@
|
|||
<template>
|
||||
<div>
|
||||
alarm history
|
||||
<div style="height: 100%;">
|
||||
<SearchBar type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
|
||||
<div class="server-main">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
const columns = [{
|
||||
title: 'NAME',
|
||||
align: 'left',
|
||||
dataIndex: 'name',
|
||||
width: 250,
|
||||
},{
|
||||
title: 'ALARM START DATE',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmStartDate',
|
||||
width: 300,
|
||||
},{
|
||||
title: 'ALARM INFO',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmInfo',
|
||||
scopedSlots: {
|
||||
customRender: 'info',
|
||||
}
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
SearchBar,
|
||||
TableList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
const { current, pageSize } = this.ipagination
|
||||
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
nameOptions: [],
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDbList();
|
||||
},
|
||||
methods: {
|
||||
getDbList() {
|
||||
getAction("/sysDatabase/sourceList").then(res => {
|
||||
if (res.success) {
|
||||
this.nameOptions = res.result.map(item => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSearch({ startDate, endDate, names }) {
|
||||
console.log(startDate, endDate, names);
|
||||
this.getDbAlarmHistory({ startDate, endDate, names })
|
||||
},
|
||||
getDbAlarmHistory(obj) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: obj.names,
|
||||
startDate:obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysDatabase/findAlarmHistory", params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
this.getDbAlarmHistory()
|
||||
},
|
||||
handleSizeChange(current, size) {
|
||||
this.ipagination.current = current
|
||||
this.ipagination.pageSize = size
|
||||
this.getDbAlarmHistory()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.server-main{
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.info-alarm{
|
||||
font-family: ArialMT;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,163 @@
|
|||
<template>
|
||||
<div>
|
||||
alarm history
|
||||
<div style="height: 100%;">
|
||||
<SearchBar type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
|
||||
<div class="server-main">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
const columns = [{
|
||||
title: 'NAME',
|
||||
align: 'left',
|
||||
dataIndex: 'name',
|
||||
width: 250,
|
||||
},{
|
||||
title: 'ALARM START DATE',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmStartDate',
|
||||
width: 300,
|
||||
},{
|
||||
title: 'ALARM INFO',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmInfo',
|
||||
scopedSlots: {
|
||||
customRender: 'info',
|
||||
}
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
SearchBar,
|
||||
TableList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
const { current, pageSize } = this.ipagination
|
||||
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
nameOptions: [],
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getEmailList();
|
||||
},
|
||||
methods: {
|
||||
getEmailList() {
|
||||
getAction("/sysEmail/sourceList").then(res => {
|
||||
if (res.success) {
|
||||
this.nameOptions = res.result.map(item => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSearch({ startDate, endDate, names }) {
|
||||
console.log(startDate, endDate, names);
|
||||
this.getEmailAlarmHistory({ startDate, endDate, names })
|
||||
},
|
||||
getEmailAlarmHistory(obj) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: obj.names,
|
||||
startDate:obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysEmail/findAlarmHistory", params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
this.getEmailAlarmHistory()
|
||||
},
|
||||
handleSizeChange(current, size) {
|
||||
this.ipagination.current = current
|
||||
this.ipagination.pageSize = size
|
||||
this.getEmailAlarmHistory()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.server-main{
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.info-alarm{
|
||||
font-family: ArialMT;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,163 @@
|
|||
<template>
|
||||
<div>
|
||||
alarm history
|
||||
<div style="height: 100%;">
|
||||
<SearchBar type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
|
||||
<div class="server-main">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
import SearchBar from '../../components/searchBar';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
const columns = [{
|
||||
title: 'NAME',
|
||||
align: 'left',
|
||||
dataIndex: 'name',
|
||||
width: 250,
|
||||
},{
|
||||
title: 'ALARM START DATE',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmStartDate',
|
||||
width: 300,
|
||||
},{
|
||||
title: 'ALARM INFO',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmInfo',
|
||||
scopedSlots: {
|
||||
customRender: 'info',
|
||||
}
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
SearchBar,
|
||||
TableList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
const { current, pageSize } = this.ipagination
|
||||
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
nameOptions: [],
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getServerList();
|
||||
},
|
||||
methods: {
|
||||
getServerList() {
|
||||
getAction("/sysServer/sourceList").then(res => {
|
||||
if (res.success) {
|
||||
this.nameOptions = res.result.map(item => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSearch({ startDate, endDate, names }) {
|
||||
console.log(startDate, endDate, names);
|
||||
this.getServerAlarmHistory({ startDate, endDate, names })
|
||||
},
|
||||
getServerAlarmHistory(obj) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: obj.names,
|
||||
startDate:obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysServer/findAlarmHistory", params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
this.getServerAlarmHistory()
|
||||
},
|
||||
handleSizeChange(current, size) {
|
||||
this.ipagination.current = current
|
||||
this.ipagination.pageSize = size
|
||||
this.getServerAlarmHistory()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.server-main{
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.info-alarm{
|
||||
font-family: ArialMT;
|
||||
font-size: 18px;
|
||||
color: #f62424;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user