analysisMonitor 模块 alarm History 页面创建
This commit is contained in:
parent
d575368b48
commit
c2b4318c56
|
@ -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
|
||||
|
||||
|
|
BIN
src/assets/images/abnormalAlarm/return-active.png
Normal file
BIN
src/assets/images/abnormalAlarm/return-active.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/abnormalAlarm/return.png
Normal file
BIN
src/assets/images/abnormalAlarm/return.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
374
src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
Normal file
374
src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
Normal 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>
|
|
@ -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]
|
||||
|
|
Loading…
Reference in New Issue
Block a user