xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alarm 模块增加loading效果

Browse Source
This commit is contained in:
renpy 2023-07-28 18:00:06 +08:00
parent d8cf8b6eb7
commit 1e87c63fe4
6 changed files with 110 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
View File

@ -9,44 +9,46 @@
</a-button> </a-button>
</div> </div>
<div class="group-content"> <div class="group-content">
<a-collapse :default-active-key="contactGroups[0].id" :bordered="false"> <a-spin :spinning="spinning">
<a-collapse-panel :key="item.id" :style="customStyle" v-for="item in contactGroups" > <a-collapse :activeKey="activeKey" :bordered="false">
<template slot="header"> <a-collapse-panel :key="item.id" :style="customStyle" v-for="item in contactGroups" >
{{ item.name }} <template slot="header">
<span class="header-sub">Create Date: {{ item.updateTime }} , Number of people: {{ item.personNumber }}</span> {{ item.name }}
</template> <span class="header-sub">Create Date: {{ item.updateTime }} , Number of people: {{ item.personNumber }}</span>
<template slot="extra">
<a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
<img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
</a-button>
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click.stop="deleteGroup(item.id)">
<img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
</a-button>
</template>
<custom-table
size="middle"
rowKey="id"
:columns="columns"
:list="item.users"
:pagination="false"
:canSelect="false"
:scroll="{ y: 200 }"
>
<template slot="name" slot-scope="{text}">
<img src="@/assets/images/abnormalAlarm/user.png" alt=""><span style="margin-left: 8px;padding-top: 2px;">{{ text }}</span>
</template> </template>
<template slot="role" slot-scope="{record}"> <template slot="extra">
<span v-for="(role,index) in record.roles" :key="role.id">{{ role.roleName }}<i v-if="index!=record.roles.length-1">,</i></span> <a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
</template> <img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
</a-button>
<template slot="action" slot-scope="{record}"> <a-button class="actions" style="margin-right: 15px;" shape="circle" @click.stop="deleteGroup(item.id)">
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteUser(item.id,record.id)">
<img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" /> <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
</a-button> </a-button>
</template> </template>
</custom-table> <custom-table
</a-collapse-panel> size="middle"
</a-collapse> rowKey="id"
:columns="columns"
:list="item.users"
:pagination="false"
:canSelect="false"
:scroll="{ y: 200 }"
>
<template slot="name" slot-scope="{text}">
<img src="@/assets/images/abnormalAlarm/user.png" alt=""><span style="margin-left: 8px;padding-top: 2px;">{{ text }}</span>
</template>
<template slot="role" slot-scope="{record}">
<span v-for="(role,index) in record.roles" :key="role.id">{{ role.roleName }}<i v-if="index!=record.roles.length-1">,</i></span>
</template>
<template slot="action" slot-scope="{record}">
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteUser(item.id, record.id)">
<img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
</a-button>
</template>
</custom-table>
</a-collapse-panel>
</a-collapse>
</a-spin>
<a-pagination <a-pagination
size="small" size="small"
v-model="page.currentPage" v-model="page.currentPage"
@ -149,9 +151,11 @@ const columns = [
export default { export default {
data() { data() {
return { return {
activeKey:"",
spinning:false,
page: { page: {
currentPage:1, currentPage:1,
pageSize: 10, pageSize: 3,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
total:0 total:0
}, },
@ -185,13 +189,17 @@ export default {
this.getAlarmGroup() this.getAlarmGroup()
}, },
getAlarmGroup() { getAlarmGroup() {
this.spinning = true
let params = { let params = {
pageNo: this.page.currentPage, pageNo: this.page.currentPage,
pageSize:this.page.pageSize // pageSize:this.page.pageSize
pageSize:3
} }
getAction("/alarmContactGroup/findPage", params).then(res => { getAction("/alarmContactGroup/findPage", params).then(res => {
this.spinning = false
if (res.success) { if (res.success) {
this.contactGroups = res.result.records this.contactGroups = res.result.records
this.activeKey = this.contactGroups[0].id
this.page.total = res.result.total this.page.total = res.result.total
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning("This operation fails. Contact your system administrator")
@ -371,16 +379,21 @@ export default {
height: calc(100% - 65px); height: calc(100% - 65px);
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
.ant-spin-nested-loading{
width: 100%;
height: calc(100% - 30px);
overflow: auto;
}
.header-sub{ .header-sub{
margin-left: 20px; margin-left: 20px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-size: 16px; font-size: 16px;
color: #ade6ee; color: #ade6ee;
} }
.ant-collapse{ // .ant-collapse{
height: calc(100% - 30px); // height: calc(100% - 30px);
overflow: auto; // overflow: auto;
} // }
.actions{ .actions{
background: none; background: none;
border: none; border: none;

2
src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
View File

@ -160,6 +160,7 @@ export default {
}) })
}, },
getAlarmLogTable(obj) { getAlarmLogTable(obj) {
this.loading = true
let params = { let params = {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
@ -168,6 +169,7 @@ export default {
endDate:obj.endDate endDate:obj.endDate
} }
postAction("/alarmLog/findPage", params).then(res => { postAction("/alarmLog/findPage", params).then(res => {
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

77
src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
View File

@ -71,44 +71,46 @@
</a-button> --> </a-button> -->
</div> </div>
<div class="rules-content"> <div class="rules-content">
<div class="monitor-list"> <a-spin :spinning="spinning">
<div class="monitor-list-item" v-for="item in monitorList" :key="item.id"> <div class="monitor-list">
<div class="monitor-list-item-title"> <div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
<div class="monitor-list-item-title-name">{{ item.name }}</div> <div class="monitor-list-item-title">
<div class="monitor-list-item-title-server"> <div class="monitor-list-item-title-name">{{ item.name }}</div>
<span style="color: #5b9cba;">{{ item.sourceType }}：</span> <div class="monitor-list-item-title-server">
<a-tooltip> <span style="color: #5b9cba;">{{ item.sourceType }}：</span>
<template slot="title"> <a-tooltip>
{{ item.sourceName }} <template slot="title">
</template> {{ item.sourceName }}
<span style="color: #ade6ee;">{{ item.sourceName }}</span> </template>
</a-tooltip> <span style="color: #ade6ee;">{{ item.sourceName }}</span>
</a-tooltip>
</div>
</div> </div>
</div> <div class="monitor-list-item-content">
<div class="monitor-list-item-content"> <div class="monitor-list-item-content-info">
<div class="monitor-list-item-content-info"> {{ JSON.parse(item.operator).name }} {{ JSON.parse(item.operator).operator }} {{ JSON.parse(item.operator).threshold }}{{ JSON.parse(item.operator).units }}
{{ JSON.parse(item.operator).name }} {{ JSON.parse(item.operator).operator }} {{ JSON.parse(item.operator).threshold }}{{ JSON.parse(item.operator).units }} </div>
<div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
{{ item.enabled==1?"Enable":"Disabled" }}
</div>
</div> </div>
<div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']"> <div class="monitor-list-item-footer">
{{ item.enabled==1?"Enable":"Disabled" }} <div class="monitor-list-item-footer-group">
</div> <span style="color: #5b9cba;">Alarm Contact Group：</span>
</div> <span style="color: #ade6ee;">{{ item.groupName }}</span>
<div class="monitor-list-item-footer"> </div>
<div class="monitor-list-item-footer-group"> <div class="monitor-list-item-footer-actions">
<span style="color: #5b9cba;">Alarm Contact Group：</span> <span class="actions-edit" @click="editItem(item.id)"></span>
<span style="color: #ade6ee;">{{ item.groupName }}</span> <span class="actions-delete" @click="deleteItem(item.id)"></span>
</div> <span v-if="item.enabled==1" class="actions-enable">
<div class="monitor-list-item-footer-actions"> </span>
<span class="actions-edit" @click="editItem(item.id)"></span> <span v-if="item.enabled==0" class="actions-disable">
<span class="actions-delete" @click="deleteItem(item.id)"></span> </span>
<span v-if="item.enabled==1" class="actions-enable"> </div>
</span>
<span v-if="item.enabled==0" class="actions-disable">
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </a-spin>
<a-pagination <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
@ -260,6 +262,7 @@ export default {
}, },
data() { data() {
return { return {
spinning: false,
isAdd:true, isAdd:true,
ipagination:{ ipagination:{
current: 1, current: 1,
@ -439,6 +442,7 @@ export default {
}) })
}, },
getAlarmRulesPage() { getAlarmRulesPage() {
this.spinning = true
let params = { let params = {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
@ -447,6 +451,7 @@ export default {
sourceId: this.queryParams.name sourceId: this.queryParams.name
} }
getAction("/alarmRule/findPage", params).then(res => { getAction("/alarmRule/findPage", params).then(res => {
this.spinning = false
if (res.success) { if (res.success) {
this.monitorList = res.result.records this.monitorList = res.result.records
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
@ -761,8 +766,12 @@ export default {
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.monitor-list{ .ant-spin-nested-loading{
width: 100%;
height: calc(100% - 40px); height: calc(100% - 40px);
}
.monitor-list{
height: 100%;
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-wrap:wrap; flex-wrap:wrap;

4
src/views/abnormalAlarm/databaseMonitor/overview/index.vue
View File

@ -36,6 +36,7 @@
rowKey="id" rowKey="id"
:columns="columns" :columns="columns"
:list="dataSource" :list="dataSource"
:loading="loading"
:pagination="false" :pagination="false"
@rowClick="onRowClick" @rowClick="onRowClick"
@rowDbclick="onRowDbclick" @rowDbclick="onRowDbclick"
@ -223,6 +224,7 @@ export default {
}, },
data() { data() {
return { return {
loading:false,
isAdd: true, isAdd: true,
visible: false, visible: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
@ -265,11 +267,13 @@ export default {
}, },
methods: { methods: {
getSysDatabase() { getSysDatabase() {
this.loading = true
let params = { let params = {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize pageSize: this.ipagination.pageSize
} }
getAction("/sysDatabase/findPage", params).then(res => { getAction("/sysDatabase/findPage", params).then(res => {
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

4
src/views/abnormalAlarm/emailMonitor/overview/index.vue
View File

@ -36,6 +36,7 @@
rowKey="id" rowKey="id"
:columns="columns" :columns="columns"
:list="dataSource" :list="dataSource"
:loading="loading"
:pagination="false" :pagination="false"
@rowClick="onRowClick" @rowClick="onRowClick"
@rowDbclick="onRowDbclick" @rowDbclick="onRowDbclick"
@ -243,6 +244,7 @@ export default {
}, },
data() { data() {
return { return {
loading: false,
isAdd: true, isAdd: true,
visible: false, visible: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
@ -286,11 +288,13 @@ export default {
}, },
methods: { methods: {
getSysEmail() { getSysEmail() {
this.loading = true
let params = { let params = {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize pageSize: this.ipagination.pageSize
} }
getAction("/sysEmail/findPage", params).then(res => { getAction("/sysEmail/findPage", params).then(res => {
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

4
src/views/abnormalAlarm/serverMonitor/overview/index.vue
View File

@ -37,6 +37,7 @@
:columns="columns" :columns="columns"
:list="dataSource" :list="dataSource"
:pagination="false" :pagination="false"
:loading="loading"
@rowClick="onRowClick" @rowClick="onRowClick"
@rowDbclick="onRowDbclick" @rowDbclick="onRowDbclick"
> >
@ -169,6 +170,7 @@ export default {
}, },
data() { data() {
return { return {
loading:false,
isAdd: true, isAdd: true,
visible: false, visible: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
@ -207,11 +209,13 @@ export default {
}, },
methods: { methods: {
getSysServer() { getSysServer() {
this.loading = true
let params = { let params = {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize pageSize: this.ipagination.pageSize
} }
getAction("/sysServer/findPage", params).then(res => { getAction("/sysServer/findPage", params).then(res => {
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