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

二级菜单的样式调整

Browse Source 
Analysis Monitor 模块表格事件调整
This commit is contained in:
任珮宇 2023-12-08 17:46:11 +08:00
parent 59850929d2
commit 3beb3b2344
2 changed files with 842 additions and 802 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1390
src/components/page/GlobalLayout.vue
View File

File diff suppressed because it is too large Load Diff

240
src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div v-if="!isDetail" style="height: 100%;"> <div v-if="!isDetail" style="height: 100%">
<SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar> <SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
<div class="analysis-main"> <div class="analysis-main">
<TableList <TableList
@ -10,35 +10,57 @@
:list="dataSource" :list="dataSource"
:loading="loading" :loading="loading"
:pagination="false" :pagination="false"
@selectRowClick="rowClick" @rowDbclick="rowClick"
> >
<template slot="stationList" slot-scope="{ text }"> <template slot="stationList" slot-scope="{ text }">
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template slot="title"> <template slot="title">
{{ text.join("、") }} {{ text.join('、') }}
</template> </template>
{{ text.join("、") }} {{ text.join('、') }}
</a-tooltip> </a-tooltip>
</template> </template>
<template slot="sourceList" slot-scope="{ text }"> <template slot="sourceList" slot-scope="{ text }">
<a-tooltip placement="topLeft"> <a-tooltip placement="topLeft">
<template slot="title"> <template slot="title">
{{ text.join("、") }} {{ text.join('、') }}
</template> </template>
{{ text.join("、") }} {{ text.join('、') }}
</a-tooltip> </a-tooltip>
</template> </template>
<template slot="info" slot-scope="{ text, record }"> <template slot="info" slot-scope="{ text, record }">
<a-popover placement="bottomLeft" overlayClassName="qqqqq"> <a-popover
<template slot="content"> trigger="hover"
<a-table :visible="record.popHovered"
:columns="columns_info" @visibleChange="(visible) => handleHoverChange(visible, record)"
:dataSource="record.nuclideList" >
:pagination="false" <div slot="content">{{ text }}</div>
rowKey="nuclide" <a-popover
></a-table> placement="bottomLeft"
</template> trigger="click"
{{ text }} :visible="record.popClicked"
@visibleChange="(visible) => handleClickChange(visible, record)"
overlayClassName="qqqqq"
>
<template slot="content">
<a-table
:columns="columns_info"
:dataSource="record.nuclideList"
:pagination="false"
rowKey="nuclide"
></a-table>
</template>
<span
style="
display: inline-block;
width: 95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>{{ text }}</span
>
</a-popover>
</a-popover> </a-popover>
</template> </template>
</TableList> </TableList>
@ -50,23 +72,26 @@
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
(total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
</div> </div>
<div v-if="isDetail" style="height: 100%;margin-left: 20px;"> <div v-if="isDetail" style="height: 100%; margin-left: 20px">
<div class="detail-top"> <div class="detail-top">
<div class="top-back" @click="handleback"> <div class="top-back" @click="handleback">
<span title="Return" class="actions-back"></span> <span title="Return" class="actions-back"></span>
<span style="margin-left: 10px;">return</span> <span style="margin-left: 10px">return</span>
</div> </div>
</div> </div>
<div class="detail-main"> <div class="detail-main">
<div class="pane-title">GENERAL INFORMATION</div> <div class="pane-title">GENERAL INFORMATION</div>
<div style="padding: 15px 15px 20px;"> <div style="padding: 15px 15px 20px">
<a-row> <a-row>
<a-col :span="13"> <a-col :span="13">
<a-row> <a-row>
@ -78,7 +103,8 @@
<a-row> <a-row>
<a-col :span="14" class="info-key">Sample Geometry:</a-col> <a-col :span="14" class="info-key">Sample Geometry:</a-col>
<a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleGeometry }}</a-col> <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleGeometry }}</a-col>
</a-row></a-col> </a-row></a-col
>
</a-row> </a-row>
<a-row> <a-row>
<a-col :span="13"> <a-col :span="13">
@ -91,7 +117,8 @@
<a-row> <a-row>
<a-col :span="14" class="info-key">Spectrum Qualifier:</a-col> <a-col :span="14" class="info-key">Spectrum Qualifier:</a-col>
<a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.spectrumQualifier }}</a-col> <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.spectrumQualifier }}</a-col>
</a-row></a-col> </a-row></a-col
>
</a-row> </a-row>
<a-row> <a-row>
<a-col :span="13"> <a-col :span="13">
@ -104,7 +131,8 @@
<a-row> <a-row>
<a-col :span="14" class="info-key">Sample Reference Identification:</a-col> <a-col :span="14" class="info-key">Sample Reference Identification:</a-col>
<a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleReferenceIdentification }}</a-col> <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleReferenceIdentification }}</a-col>
</a-row></a-col> </a-row></a-col
>
</a-row> </a-row>
<a-row> <a-row>
<a-col :span="13"> <a-col :span="13">
@ -117,7 +145,8 @@
<a-row> <a-row>
<a-col :span="14" class="info-key">Gas Background Measurement Identification:</a-col> <a-col :span="14" class="info-key">Gas Background Measurement Identification:</a-col>
<a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.gasBackgroundMeasurementId }}</a-col> <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.gasBackgroundMeasurementId }}</a-col>
</a-row></a-col> </a-row></a-col
>
</a-row> </a-row>
<a-row> <a-row>
<a-col :span="13"> <a-col :span="13">
@ -130,11 +159,12 @@
<a-row> <a-row>
<a-col :span="14" class="info-key">Transmit Time:</a-col> <a-col :span="14" class="info-key">Transmit Time:</a-col>
<a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.transmitDate }}</a-col> <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.transmitDate }}</a-col>
</a-row></a-col> </a-row></a-col
>
</a-row> </a-row>
</div> </div>
<div class="pane-title">ACQUISITION</div> <div class="pane-title">ACQUISITION</div>
<div style="padding: 15px 15px 20px;"> <div style="padding: 15px 15px 20px">
<a-row> <a-row>
<a-col :span="13"> <a-col :span="13">
<a-row> <a-row>
@ -174,10 +204,11 @@
<script> <script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar'; import SearchBar from '../../components/searchBar'
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [{ const columns = [
{
title: 'STATION', title: 'STATION',
align: 'center', align: 'center',
dataIndex: 'stationList', dataIndex: 'stationList',
@ -185,18 +216,21 @@ const columns = [{
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
customRender: 'stationList', customRender: 'stationList',
} },
},{ },
{
title: 'COLLECTION START', title: 'COLLECTION START',
align: 'center', align: 'center',
dataIndex: 'collectionDate', dataIndex: 'collectionDate',
width: 200, width: 200,
},{ },
{
title: 'ALARM TIME', title: 'ALARM TIME',
align: 'center', align: 'center',
dataIndex: 'alarmStartDate', dataIndex: 'alarmStartDate',
width: 200, width: 200,
},{ },
{
title: 'DATA SOURCES ', title: 'DATA SOURCES ',
align: 'center', align: 'center',
dataIndex: 'sourceList', dataIndex: 'sourceList',
@ -204,33 +238,37 @@ const columns = [{
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
customRender: 'sourceList', customRender: 'sourceList',
} },
},{ },
{
title: 'ALARM INFO', title: 'ALARM INFO',
align: 'left', align: 'left',
dataIndex: 'alarmInfo', dataIndex: 'alarmInfo',
ellipsis: true,
scopedSlots: { scopedSlots: {
customRender: 'info', customRender: 'info',
} },
} },
] ]
const columns_info = [{ const columns_info = [
{
title: 'NUCLIDE', title: 'NUCLIDE',
align: 'left', align: 'left',
dataIndex: 'nuclide', dataIndex: 'nuclide',
width:200 width: 200,
},{ },
{
title: 'THRESHOLD ', title: 'THRESHOLD ',
align: 'left', align: 'left',
dataIndex: 'threshold', dataIndex: 'threshold',
width:200 width: 200,
},{ },
{
title: 'VALUE ', title: 'VALUE ',
align: 'left', align: 'left',
dataIndex: 'value', dataIndex: 'value',
width:200 width: 200,
}, },
] ]
export default { export default {
components: { components: {
@ -239,16 +277,18 @@ export default {
}, },
data() { data() {
return { return {
popClicked: false,
popHovered: false,
stationOptions: [], stationOptions: [],
paramsArg: { paramsArg: {
startDate: dateFormat(new Date(), 'yyyy-MM-dd'), startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd') endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
}, },
columns, columns,
columns_info, columns_info,
dataSource: [], dataSource: [],
loading: false, loading: false,
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -258,43 +298,51 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
isDetail: false, isDetail: false,
dataSourceDetailNuclide:[], dataSourceDetailNuclide: [],
url: { url: {
list: "/alarmAnalysisLog/findPage", list: '/alarmAnalysisLog/findPage',
sampleInfo: "/webStatistics/sampleInfo" sampleInfo: '/webStatistics/sampleInfo',
}, },
selectRow: {}, selectRow: {},
sampleInfo: {} sampleInfo: {},
} }
}, },
mounted () { mounted() {
this.getStationList(); this.getStationList()
this.getPageData(); this.getPageData()
}, },
methods: { methods: {
handleHoverChange(visible, row) {
row.popClicked = false
row.popHovered = visible
},
handleClickChange(visible, row) {
row.popClicked = visible
row.popHovered = false
},
getStationList() { getStationList() {
getAction("/webStatistics/findStationList",{menuName:""}).then(res => { getAction('/webStatistics/findStationList', { menuName: '' }).then((res) => {
if (res.success) { if (res.success) {
if (res.result.length>0) { if (res.result.length > 0) {
this.stationOptions = res.result.map(item => { this.stationOptions = res.result.map((item) => {
return { return {
label: item.stationCode, label: item.stationCode,
value: item.stationId value: item.stationId,
} }
}) })
} else { } else {
this.stationOptions=[] this.stationOptions = []
} }
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getPageData() { getPageData() {
this.loading = true; this.loading = true
let param = { let param = {
source: this.paramsArg.sources, source: this.paramsArg.sources,
stations: this.paramsArg.stations, stations: this.paramsArg.stations,
@ -302,22 +350,28 @@ export default {
startDate: this.paramsArg.startDate, startDate: this.paramsArg.startDate,
endDate: this.paramsArg.endDate, endDate: this.paramsArg.endDate,
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize pageSize: this.ipagination.pageSize,
} }
getAction(this.url.list, param).then(res => { getAction(this.url.list, param).then((res) => {
this.loading = false; this.loading = false
if (res.success) { if (res.success) {
this.dataSource = res.result.records this.dataSource = res.result.records.map((item) => {
return {
...item,
popClicked: false,
popHovered: false,
}
})
this.ipagination.total = res.result.total this.ipagination.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')
} }
}) })
}, },
async getSampleInfo() { async getSampleInfo() {
await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId}).then(res=> { await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId }).then((res) => {
this.sampleInfo = res.result; this.sampleInfo = res.result
this.loading = false; this.loading = false
}) })
}, },
handleSearch({ startDate, endDate, stations, sources }) { handleSearch({ startDate, endDate, stations, sources }) {
@ -326,15 +380,15 @@ export default {
startDate, startDate,
endDate, endDate,
stations, stations,
sources sources,
} }
this.getPageData() this.getPageData()
}, },
async rowClick(record) { async rowClick(record) {
this.loading = true; this.loading = true
this.selectRow = record; this.selectRow = record
this.dataSourceDetailNuclide = record.nuclideList this.dataSourceDetailNuclide = record.nuclideList
await this.getSampleInfo(); await this.getSampleInfo()
this.isDetail = true this.isDetail = true
}, },
handlePageChange(page, pageSize) { handlePageChange(page, pageSize) {
@ -349,13 +403,13 @@ export default {
}, },
handleback() { handleback() {
this.isDetail = false this.isDetail = false
} },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.analysis-main{ .analysis-main {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
overflow: hidden; overflow: hidden;
@ -363,13 +417,13 @@ export default {
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
} }
.detail-top{ .detail-top {
width: 100%; width: 100%;
height: 50px; height: 50px;
padding: 0 10px; padding: 0 10px;
@ -380,36 +434,36 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 16px; margin-bottom: 16px;
.top-back{ .top-back {
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-size: 16px; font-size: 16px;
color: #69a19f; color: #69a19f;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
span{ span {
display: inline-block; display: inline-block;
width: 28px; width: 28px;
height: 24px; height: 24px;
} }
.actions-back{ .actions-back {
background: url(~@/assets/images/abnormalAlarm/return.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/return.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
&:hover{ &:hover {
background: url(~@/assets/images/abnormalAlarm/return-active.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/return-active.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
} }
.detail-main{ .detail-main {
height: calc(100% - 67px); height: calc(100% - 67px);
margin-top: 15px; margin-top: 15px;
overflow: hidden; overflow: hidden;
background-color: rgba(2, 40, 43, 0.5); background-color: rgba(2, 40, 43, 0.5);
border: solid 1px #416f7f; border: solid 1px #416f7f;
padding: 15px 20px; padding: 15px 20px;
.pane-title{ .pane-title {
height: 40px; height: 40px;
background-color: rgba(12, 235, 201, 0.05); background-color: rgba(12, 235, 201, 0.05);
line-height: 40px; line-height: 40px;
@ -421,14 +475,14 @@ export default {
color: #0cebc9; color: #0cebc9;
padding: 0 0 0 18px; padding: 0 0 0 18px;
} }
.info-key{ .info-key {
font-family: ArialMT; font-family: ArialMT;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 36px; line-height: 36px;
color: #ffffff; color: #ffffff;
} }
.info-val{ .info-val {
font-family: ArialMT; font-family: ArialMT;
font-size: 14px; font-size: 14px;
line-height: 36px; line-height: 36px;
@ -437,21 +491,21 @@ export default {
} }
</style> </style>
<style lang="less"> <style lang="less">
.qqqqq{ .qqqqq {
.ant-popover-arrow{ .ant-popover-arrow {
border-left-color: #1993cc !important; border-left-color: #1993cc !important;
border-top-color: #1993cc !important; border-top-color: #1993cc !important;
} }
.ant-popover-inner-content{ .ant-popover-inner-content {
padding: 0; padding: 0;
} }
.ant-table-thead > tr th{ .ant-table-thead > tr th {
background-color: #1993cc !important; background-color: #1993cc !important;
} }
.ant-table-tbody tr{ .ant-table-tbody tr {
background-color: #084a5b; background-color: #084a5b;
} }
.ant-table-tbody tr:nth-child(2n){ .ant-table-tbody tr:nth-child(2n) {
background-color: rgba(13, 113, 139, 0.2); background-color: rgba(13, 113, 139, 0.2);
} }
} }