analysisMonitor 模块 alarm History 页面创建

This commit is contained in:
renpy 2023-08-02 18:05:46 +08:00
parent d575368b48
commit c2b4318c56
5 changed files with 494 additions and 2 deletions

View File

@ -1,5 +1,5 @@
NODE_ENV=development
VUE_APP_API_BASE_URL=http://182.92.183.230:9999
VUE_APP_API_BASE_URL=http://nieziyan.natapp1.cc
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,374 @@
<template>
<div style="height: 100%;">
<div v-if="!isDetail" style="height: 100%;">
<SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
<div class="analysis-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>
<div v-if="isDetail" style="height: 100%;margin-left: 20px;">
<div class="detail-top">
<div class="top-back" @click="handleback">
<span title="Return" class="actions-back"></span>
<span style="margin-left: 10px;">return</span>
</div>
</div>
<div class="detail-main">
<div class="pane-title">GENERAL INFORMATION</div>
<div style="padding: 15px 15px 20px;">
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">Site Code:</a-col>
<a-col :span="12" class="info-val">ARPO1</a-col>
</a-row>
</a-col>
<a-col :span="11">
<a-row>
<a-col :span="14" class="info-key">Sample Geometry:</a-col>
<a-col :span="10" class="info-val">DISK 50X5_3M</a-col>
</a-row></a-col>
</a-row>
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">Detector Code:</a-col>
<a-col :span="12" class="info-val">ARPO1 001</a-col>
</a-row>
</a-col>
<a-col :span="11">
<a-row>
<a-col :span="14" class="info-key">Spectrum Qualifier:</a-col>
<a-col :span="10" class="info-val">FULL</a-col>
</a-row></a-col>
</a-row>
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">System Type:</a-col>
<a-col :span="12" class="info-val">P</a-col>
</a-row>
</a-col>
<a-col :span="11">
<a-row>
<a-col :span="14" class="info-key">Sample Reference Identification:</a-col>
<a-col :span="10" class="info-val">01888888880003</a-col>
</a-row></a-col>
</a-row>
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">Measurement Identification:</a-col>
<a-col :span="12" class="info-val">ARP01_001-2023 / 03 / 21-14 : 10 : 55.0</a-col>
</a-row>
</a-col>
<a-col :span="11">
<a-row>
<a-col :span="14" class="info-key">Gas Background Measurement Identification:</a-col>
<a-col :span="10" class="info-val">asdfasdf</a-col>
</a-row></a-col>
</a-row>
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">Detector Background Measurement Identification:</a-col>
<a-col :span="12" class="info-val">ARP01_001-2019 / 01 / 11-19 : 09 : 42.02</a-col>
</a-row>
</a-col>
<a-col :span="11">
<a-row>
<a-col :span="14" class="info-key">Transmit Time:</a-col>
<a-col :span="10" class="info-val">2023 / 03 / 21 14:30:01</a-col>
</a-row></a-col>
</a-row>
</div>
<div class="pane-title">ACQUISITION</div>
<div style="padding: 15px 15px 20px;">
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">Acquisition Time:</a-col>
<a-col :span="12" class="info-val">2023 / 03 / 21 14:10:55</a-col>
</a-row>
</a-col>
</a-row>
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">Acquisition Real Time:</a-col>
<a-col :span="12" class="info-val">938</a-col>
</a-row>
</a-col>
</a-row>
<a-row>
<a-col :span="13">
<a-row>
<a-col :span="12" class="info-key">Acquisition Live Time:</a-col>
<a-col :span="12" class="info-val">900</a-col>
</a-row>
</a-col>
</a-row>
</div>
<a-table
size="middle"
rowKey="id"
:columns="columns_acq"
:list="dataSource_acq"
>
</a-table>
<!-- <TableList
size="middle"
rowKey="id"
:columns="columns_acq"
:list="dataSource_acq"
:loading="false"
:pagination="false"
:canSelect="false"
>
</TableList> -->
</div>
</div>
</div>
</template>
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar';
import TableList from '../../components/tableList.vue';
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [{
title: 'STATION',
align: 'left',
dataIndex: 'station',
width: 250,
},{
title: 'COLLECTION START',
align: 'left',
dataIndex: 'station',
width: 250,
},{
title: 'ALARM TIME',
align: 'left',
dataIndex: 'alarmTime',
width: 250,
},{
title: 'DATA SOURCES ',
align: 'left',
dataIndex: 'dataSources',
width: 250,
},{
title: 'ALARM INFO',
align: 'left',
dataIndex: 'alarmInfo',
scopedSlots: {
customRender: 'info',
}
}
]
const columns_acq = [{
title: 'NUCLIDE',
align: 'center',
dataIndex: 'nuclide',
width:"25%"
},{
title: 'THRESHOLD ',
align: 'center',
dataIndex: 'threshold',
width:"25%"
},{
title: 'IDC',
align: 'center',
dataIndex: 'idc',
width:"25%"
},{
title: 'ARMD',
align: 'center',
dataIndex: 'armd',
width:"25%"
}
]
export default {
components: {
SearchBar,
TableList,
},
data() {
return {
stationOptions: [],
paramsArg: {},
columns,
dataSource: [],
loading: false,
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
},
isDetail: true,
columns_acq,
dataSource_acq:[]
}
},
mounted () {
this.getStationList();
},
methods: {
getStationList() {
getAction("/webStatistics/findStationList",{menuName:""}).then(res => {
if (res.success) {
if (res.result.length>0) {
this.stationOptions = res.result.map(item => {
return {
label: item.stationCode,
value: item.stationId
}
})
} else {
this.stationOptions=[]
}
} else {
this.$message.warning("This operation fails. Contact your system administrator")
}
})
},
handleSearch({ startDate, endDate, stations, sources }) {
this.paramsArg = {
startDate,
endDate,
stations,
sources
}
// this.getServerAlarmHistory({ startDate, endDate, names })
},
handlePageChange(page, pageSize) {
this.ipagination.current = page
this.ipagination.pageSize = pageSize
// this.getServerAlarmHistory(this.paramsArg)
},
handleSizeChange(current, size) {
this.ipagination.current = current
this.ipagination.pageSize = size
// this.getServerAlarmHistory(this.paramsArg)
},
handleback() {
this.isDetail = false
}
},
}
</script>
<style lang="less" scoped>
.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%);
}
.detail-top{
width: 100%;
height: 50px;
padding: 0 10px;
background-color: rgba(12, 235, 201, 0.05);
border-top: 1px solid rgba(12, 235, 201, 0.3);
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.top-back{
font-family: MicrosoftYaHei;
font-size: 16px;
color: #69a19f;
display: flex;
align-items: center;
cursor: pointer;
span{
display: inline-block;
width: 28px;
height: 24px;
}
.actions-back{
background: url(~@/assets/images/abnormalAlarm/return.png) no-repeat;
background-size: 100% 100%;
&:hover{
background: url(~@/assets/images/abnormalAlarm/return-active.png) no-repeat;
background-size: 100% 100%;
}
}
}
}
.detail-main{
height: calc(100% - 67px);
margin-top: 15px;
overflow: hidden;
background-color: rgba(2, 40, 43, 0.5);
border: solid 1px #416f7f;
padding: 15px 20px;
.pane-title{
height: 40px;
background-color: rgba(12, 235, 201, 0.05);
line-height: 40px;
font-family: ArialMT;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 1px;
color: #0cebc9;
padding: 0 0 0 18px;
}
.info-key{
font-family: ArialMT;
font-size: 14px;
font-weight: bold;
line-height: 36px;
color: #ffffff;
}
.info-val{
font-family: ArialMT;
font-size: 14px;
line-height: 36px;
color: #ade6ee;
}
}
</style>

View File

@ -28,7 +28,7 @@
</a-select>
</a-form-model-item>
</a-col>
<a-col flex="310px" v-if="type!=='alarmCenter'">
<a-col flex="310px" v-if="type!=='alarmCenter' && type!=='analysisMonitor'">
<a-form-model-item label="Name">
<a-select
:value="queryParams.names"
@ -53,6 +53,57 @@
</a-select>
</a-form-model-item>
</a-col>
<a-col flex="270px" v-if="type ==='analysisMonitor'">
<a-form-model-item label="Station">
<a-select style="width:180px"
:value="queryParams.stations"
mode="multiple"
placeholder="select..."
:maxTagCount="1"
:filter-option="filterOption"
show-arrow
:options="options"
@change="onStationChange"
>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" />
<div
style="padding: 4px 12px; cursor: pointer;"
@mousedown="e => e.preventDefault()"
>
<a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox>
</div>
</div>
</a-select>
</a-form-model-item>
</a-col>
<a-col flex="310px" v-if="type ==='analysisMonitor'">
<a-form-model-item label="Data Sources ">
<a-select style="width:180px"
:value="queryParams.sources"
mode="multiple"
placeholder="select..."
:maxTagCount="1"
show-arrow
:options="sourceOptions"
@change="onSourceChange"
>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" />
<div
style="padding: 4px 12px; cursor: pointer;"
@mousedown="e => e.preventDefault()"
>
<a-checkbox v-model="allVal_source" @change="handleAllClickBox_source"><span @click.prevent="handleAllClick_source">ALL</span></a-checkbox>
</div>
</div>
</a-select>
</a-form-model-item>
</a-col>
<a-col flex="380px">
<a-form-model-item label="Alarm date">
<a-range-picker
@ -96,6 +147,8 @@ export default {
return {
allVal: true,
allVal_name: false,
allVal_station: false,
allVal_source: false,
typeOptions: [
{
label: "Server",
@ -110,9 +163,21 @@ export default {
value: "Email"
},
],
sourceOptions: [
{
label: "IDC",
value: "idc"
},
{
label: "ARMD",
value: "armd"
}
],
queryParams: {
types: ["Server","Database","Email"],
names: undefined,
stations: undefined,
sources: undefined,
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
}
@ -150,6 +215,41 @@ export default {
this.queryParams.names = []
}
},
handleAllClickBox_station(e) {
this.allVal_station = e.target.checked
this.setSelectVal_station()
},
handleAllClick_station(e) {
this.allVal_station = !this.allVal_station
this.setSelectVal_station()
},
setSelectVal_station() {
if (this.allVal_station) {
this.queryParams.stations = this.options.map(item => item.value)
} else {
this.queryParams.stations = []
}
},
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
handleAllClickBox_source(e) {
this.allVal_source = e.target.checked
this.setSelectVal_source()
},
handleAllClick_source(e) {
this.allVal_source = !this.allVal_source
this.setSelectVal_source()
},
setSelectVal_source() {
if (this.allVal_source) {
this.queryParams.sources = this.sourceOptions.map(item => item.value)
} else {
this.queryParams.sources = []
}
},
onTypeChange(val) {
this.queryParams.types = val
let length = this.typeOptions.length
@ -168,6 +268,24 @@ export default {
this.allVal_name = false
}
},
onStationChange(val) {
this.queryParams.stations = val
let length = this.options.length
if (val.length === length) {
this.allVal_station = true
} else {
this.allVal_station = false
}
},
onSourceChange(val) {
this.queryParams.sources = val
let length = this.sourceOptions.length
if (val.length === length) {
this.allVal_source = true
} else {
this.allVal_source = false
}
},
onRangeDateChange(date, dateString) {
this.queryParams.startDate = dateString[0]
this.queryParams.endDate = dateString[1]