emailMonitor 模块 instances页面代码调整,接口联调

新增核素平均值列表页面,及当前页面的接口联调
This commit is contained in:
renpy 2023-08-16 16:05:25 +08:00
parent c8098d487c
commit 5fc1d74832
4 changed files with 313 additions and 23 deletions

View File

@ -186,7 +186,7 @@ const columns = [{
scopedSlots: { scopedSlots: {
customRender: 'stationList', customRender: 'stationList',
} }
},{ },{
title: 'COLLECTION START', title: 'COLLECTION START',
align: 'center', align: 'center',
dataIndex: 'collectionDate', dataIndex: 'collectionDate',

View File

@ -0,0 +1,284 @@
<template>
<div style="height: 100%;">
<div class="search-bar">
<a-row type="flex">
<a-col flex="108px">
<a-button class="search-btn" type="primary" @click="handleConfig">
Config
</a-button>
</a-col>
<a-col flex="380px">
<span class="item-label">Cacl date</span>
<a-range-picker
dropdownClassName="asd"
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
@change="onRangeDateChange"
/>
</a-col>
</a-row>
</div>
<div class="analysis-main">
<TableList
size="middle"
rowKey="id"
:columns="columns"
:list="dataSource"
:loading="loading"
:pagination="false"
:canSelect="false"
>
</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>
<a-modal
title="Config"
v-model="visible"
@cancel="onCancel"
>
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
<a-form-item label="Days">
<a-input-number
v-decorator="[
'days',
{
rules: [{ required: true, message: 'Please input days!' }],
initialVale: this.formVal.days
}
]"
/>
</a-form-item>
<a-form-item label="Index">
<a-input-number
v-decorator="[
'index',
{
rules: [{ required: true, message: 'Please input index!' }],
initialVale: this.formVal.index
}
]"
/>
</a-form-item>
</a-form>
<template slot="footer">
<a-space class="operators" :size="20">
<a-button type="success" @click="onSave">Save</a-button>
<a-button type="warn" @click="onCancel">Cancel</a-button>
</a-space>
</template>
</a-modal>
</div>
</template>
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import moment from 'moment';
import TableList from '../../components/tableList.vue';
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [
{
title: 'NUCLIDE',
align: 'center',
dataIndex: 'nuclide',
// width: 200,
},{
title: 'VAL',
align: 'center',
dataIndex: 'val',
// width: 200,
},{
title: 'CYCLE',
align: 'center',
dataIndex: 'cycle',
// width: 200,
},{
title: 'DATA SOURCE TYPE',
align: 'center',
dataIndex: 'datasource',
// width: 200,
},{
title: 'CACL DATE',
align: 'center',
dataIndex: 'caclDate',
// width: 200,
},
]
export default {
components: {
TableList,
},
data() {
return {
columns,
dataSource: [],
loading: false,
queryParams: {
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
},
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
},
isAdd: true,
visible: false,
form: this.$form.createForm(this),
formVal: {
days:"",
index: "",
},
currId:""
}
},
mounted () {
this.getNuclideAvgList();
},
methods: {
moment,
getNuclideAvgList() {
let params = {
startDate:this.queryParams.startDate,
endDate:this.queryParams.endDate,
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize
}
getAction("/nuclideAvg/findPage",params).then(res => {
if (res.success) {
this.dataSource = res.result.records
this.ipagination.total = res.result.total
} else {
this.$message.warning("This operation fails. Contact your system administrator")
}
})
},
onRangeDateChange(date, dateString) {
this.queryParams.startDate = dateString[0]
this.queryParams.endDate = dateString[1]
this.getNuclideAvgList()
},
handlePageChange(page, pageSize) {
this.ipagination.current = page
this.ipagination.pageSize = pageSize
this.getNuclideAvgList()
},
handleSizeChange(current, size) {
this.ipagination.current = current
this.ipagination.pageSize = size
this.getNuclideAvgList()
},
handleConfig() {
this.visible = true
getAction("/nuclideParam/findInfo").then(res => {
if (res.success) {
this.currId = res.result.id
this.form.setFieldsValue({
days: res.result.days,
index: res.result.index
});
} else {
this.$message.warning("This operation fails. Contact your system administrator")
}
})
},
onSave() {
this.form.validateFields((err, values) => {
if (!err) {
let params = {
id: this.currId,
...values
}
httpAction("/nuclideParam/update", params, "put").then(res => {
if (res.success) {
this.form.resetFields()
this.visible = false
this.$message.success("success")
} else {
this.$message.info(res.result.message)
}
})
}
})
},
onCancel() {
this.form.resetFields()
this.visible = false
},
},
}
</script>
<style lang="less" scoped>
.search-bar{
height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
margin-left: 20px;
padding: 8px 10px;
background: rgba(12, 235, 201, 0.05);
}
.ant-calendar-picker{
width: 270px;
}
.search-btn {
margin-bottom: 10px;
}
/deep/ .ant-calendar-range-picker-separator{
color: white;
}
.item-label{
display: inline-block;
font-size: 16px;
font-family: ArialMT;
color: #ade6ee;
line-height: 32px;
height: 32px;
margin-right: 10px;
}
.analysis-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%);
}
.operators {
width: 100%;
justify-content: center;
.ant-btn {
width: 92px;
}
}
/deep/.ant-modal-title{
letter-spacing: 1px;
}
.ant-input-number{
width: 100%;
background-color: #03353f !important
}
</style>

View File

@ -366,13 +366,4 @@ export default {
position: relative; position: relative;
background: #03353f; background: #03353f;
} }
// .asd{
// .ant-calendar-range .ant-calendar-input ,
// .ant-calendar-range .ant-calendar-time-picker-input{
// color: red !important;
// background: none !important;
// }
// }
</style> </style>

View File

@ -3,7 +3,7 @@
<div class="email-top"> <div class="email-top">
<BoxTitle title="Receiving information"> <BoxTitle title="Receiving information">
<template slot="right"> <template slot="right">
<div> <div style="display: flex;align-items: center;">
<span class="item-label">Email</span> <span class="item-label">Email</span>
<a-select style="width:160px" <a-select style="width:160px"
v-model="email" v-model="email"
@ -30,6 +30,7 @@
<div class="email-top-content-li-right-title">Mailbox connection status</div> <div class="email-top-content-li-right-title">Mailbox connection status</div>
<div class="email-top-content-li-right-val">{{ emailStatus?"NORMAL":"ABNORMAL" }}</div> <div class="email-top-content-li-right-val">{{ emailStatus?"NORMAL":"ABNORMAL" }}</div>
</div> </div>
<div class="email-top-content-li-rect" style="background: #24d870;"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item1"> <div class="email-top-content-li email-top-content-item1">
<div class="email-top-content-li-left"> <div class="email-top-content-li-left">
@ -42,6 +43,7 @@
<div class="email-top-content-li-right-title">Total mail volume for today</div> <div class="email-top-content-li-right-title">Total mail volume for today</div>
<div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.today||0}}</div> <div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.today||0}}</div>
</div> </div>
<div class="email-top-content-li-rect" style="background: #00ddfe;"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item2"> <div class="email-top-content-li email-top-content-item2">
<div class="email-top-content-li-left"> <div class="email-top-content-li-left">
@ -54,6 +56,7 @@
<div class="email-top-content-li-right-title">Total mail volume of yesterday</div> <div class="email-top-content-li-right-title">Total mail volume of yesterday</div>
<div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.yesterday||0}}</div> <div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.yesterday||0}}</div>
</div> </div>
<div class="email-top-content-li-rect" style="background: #7c9da2;"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item3"> <div class="email-top-content-li email-top-content-item3">
<div class="email-top-content-li-left"> <div class="email-top-content-li-left">
@ -66,6 +69,7 @@
<div class="email-top-content-li-right-title">Total mail volume of the past week</div> <div class="email-top-content-li-right-title">Total mail volume of the past week</div>
<div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.week||0}}</div> <div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.week||0}}</div>
</div> </div>
<div class="email-top-content-li-rect" style="background: #cca817;"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item4"> <div class="email-top-content-li email-top-content-item4">
<div class="email-top-content-item4-left"> <div class="email-top-content-item4-left">
@ -81,6 +85,7 @@
<div class="email-top-content-item4-right"> <div class="email-top-content-item4-right">
<div class="email-top-content-item4-right-chart" id="store"></div> <div class="email-top-content-item4-right-chart" id="store"></div>
</div> </div>
<div class="email-top-content-li-rect" style="background: #e54f0d;"></div>
</div> </div>
</div> </div>
</div> </div>
@ -92,7 +97,7 @@
<div class="email-footer"> <div class="email-footer">
<BoxTitle title="Mail reception statistics"> <BoxTitle title="Mail reception statistics">
<template slot="right"> <template slot="right">
<div> <div style="display: flex;align-items: center;">
<a-select style="width:160px" <a-select style="width:160px"
v-model="date" v-model="date"
placeholder="select..." placeholder="select..."
@ -217,13 +222,15 @@ export default {
timeLine: null, timeLine: null,
xData: [], xData: [],
yData: [], yData: [],
currId:""
} }
}, },
created () { created () {
this.startDate = this.getBeforeDate(6) this.startDate = this.getBeforeDate(6)
}, },
mounted() { mounted() {
this.getServerList() this.currId = this.$route.query.emailId
this.getEmailList()
this.getEmailStatus() this.getEmailStatus()
this.getEmailTotal() this.getEmailTotal()
this.getEmailSpace() this.getEmailSpace()
@ -240,10 +247,10 @@ export default {
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
); );
}, },
getServerList() { getEmailList() {
getAction("/sysServer/sourceList").then(res => { getAction("/sysEmail/sourceList").then(res => {
if (res.success) { if (res.success) {
this.serverOptions = res.result.map(item => { this.emailOptions = res.result.map(item => {
return { return {
label: item.sourceName, label: item.sourceName,
value: item.sourceId value: item.sourceId
@ -255,7 +262,7 @@ export default {
}) })
}, },
onEmailChange(val) { onEmailChange(val) {
console.log(val); this.currId = val
}, },
onDateChange(val) { onDateChange(val) {
console.log(this.getBeforeDate(val-1)); console.log(this.getBeforeDate(val-1));
@ -266,7 +273,7 @@ export default {
this.endDate = dateString[1] this.endDate = dateString[1]
}, },
getEmailStatus() { getEmailStatus() {
getAction("/sysEmailLog/status",{emailId:this.$route.query.emailId}).then(res => { getAction("/sysEmailLog/status",{emailId:this.currId}).then(res => {
if (res.success) { if (res.success) {
this.emailStatus = res.result this.emailStatus = res.result
} else { } else {
@ -275,7 +282,7 @@ export default {
}) })
}, },
getEmailTotal() { getEmailTotal() {
getAction("/sysEmailLog/total",{emailId:this.$route.query.emailId}).then(res => { getAction("/sysEmailLog/total",{emailId:this.currId}).then(res => {
if (res.success) { if (res.success) {
this.emailTotal = res.result this.emailTotal = res.result
} else { } else {
@ -284,7 +291,7 @@ export default {
}) })
}, },
getEmailSpace() { getEmailSpace() {
getAction("/sysEmailLog/space",{emailId:this.$route.query.emailId}).then(res => { getAction("/sysEmailLog/space",{emailId:this.currId}).then(res => {
if (res.success) { if (res.success) {
let s = res.result.usage let s = res.result.usage
s = s.substring(0, s.length - 1) s = s.substring(0, s.length - 1)
@ -297,7 +304,7 @@ export default {
}) })
}, },
getEmailToday() { getEmailToday() {
// getAction("/sysEmailLog/space",{emailId:this.$route.query.emailId}).then(res => { // getAction("/sysEmailLog/space",{emailId:this.currId}).then(res => {
getAction("/sysEmailLog/today",{emailId:"1668823404678311937"}).then(res => { getAction("/sysEmailLog/today",{emailId:"1668823404678311937"}).then(res => {
if (res.success) { if (res.success) {
this.emailToday = res.result this.emailToday = res.result
@ -308,7 +315,7 @@ export default {
}, },
getEmailStatistics() { getEmailStatistics() {
let params = { let params = {
emailId: this.$route.query.emailId, emailId: this.currId,
startDate: this.startDate, startDate: this.startDate,
endDate: this.endDate endDate: this.endDate
// emailId: "1668823404678311937", // emailId: "1668823404678311937",
@ -618,6 +625,14 @@ export default {
width: 270px; width: 270px;
height: 125px; height: 125px;
background: #07282b; background: #07282b;
position: relative;
&-rect{
width: 12px;
height: 4px;
position: absolute;
right: 0;
bottom: 0;
}
&-left{ &-left{
width: 92px; width: 92px;
height: 100%; height: 100%;
@ -647,7 +662,7 @@ export default {
} }
&-val{ &-val{
font-family: MicrogrammaD-MediExte; font-family: MicrogrammaD-MediExte;
font-size: 22px; font-size: 20px;
font-weight: normal; font-weight: normal;
line-height: 25px; line-height: 25px;
color: #24d870; color: #24d870;