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

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

@ -2,7 +2,8 @@
<a-layout class="layout" :class="[device]">
<a-layout
:class="[layoutMode, `content-width-${contentWidth}`]"
:style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
:style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }"
>
<!-- layout header -->
<global-header
:mode="layoutMode"
@ -15,11 +16,11 @@
/>
<div class="global-content">
<div class="content-top-border">
<img src="@/assets/images/content/top.png" alt="">
<img src="@/assets/images/content/top.png" alt="" />
</div>
<div class="content-main">
<div class="content-left-border">
<img src="@/assets/images/content/left.png" alt="">
<img src="@/assets/images/content/left.png" alt="" />
</div>
<!-- layout content -->
<a-layout-content>
@ -31,11 +32,11 @@
</div>
</a-layout-content>
<div class="content-right-border">
<img src="@/assets/images/content/left.png" alt="">
<img src="@/assets/images/content/left.png" alt="" />
</div>
</div>
<div class="content-bottom-border">
<img src="@/assets/images/content/bottom.png" alt="">
<img src="@/assets/images/content/bottom.png" alt="" />
</div>
</div>
</a-layout>
@ -65,40 +66,39 @@
SideMenu,
GlobalHeader,
GlobalFooter,
SMenu
SMenu,
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
// // SettingDrawer
// 注释这个因为在个人设置模块已经加载了SettingDrawer页面
// update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
},
mixins: [mixin, mixinDevice],
data() {
return {
collapsed: false,
activeMenu: {},
menus: []
menus: [],
}
},
computed: {
...mapState({
// 主路由
mainRouters: state => state.permission.addRouters,
mainRouters: (state) => state.permission.addRouters,
// 后台菜单
permissionMenuList: state => state.user.permissionList
permissionMenuList: (state) => state.user.permissionList,
}),
// 当前页面子路由
currentChildrenMenus() {
const hasSubmenuPathList = ['/isystem', '/system'] // 需要显示二级菜单的路由列表（仅需一级菜单路由）
const hasSubMenu = hasSubmenuPathList.some(item => this.$route.path.indexOf(item) == 0)
const hasSubMenu = hasSubmenuPathList.some((item) => this.$route.path.indexOf(item) == 0)
return hasSubMenu ? this.findSubMenus(this.$route.name) : []
}
},
},
watch: {
sidebarOpened(val) {
this.collapsed = !val
}
},
},
created() {
//--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
@ -106,7 +106,7 @@
this.menus = this.permissionMenuList
//--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
this.collapsed=!this.sidebarOpened;
this.collapsed = !this.sidebarOpened
//--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
// 根据后台配置菜单，重新排序加载路由信息
@ -126,7 +126,10 @@
findSubMenus(routeName) {
for (const menu of this.menus) {
if (menu.children) {
const find = menu.children.find(child => child.name === routeName || child.children && child.children.find(item => item.name === routeName))
const find = menu.children.find(
(child) =>
child.name === routeName || (child.children && child.children.find((item) => item.name === routeName))
)
if (find) {
return menu.children
}
@ -148,7 +151,7 @@
myMenuSelect(value) {
//此处触发动态路由被点击事件
this.findMenuBykey(this.menus, value.key)
this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
this.$emit('dynamicRouterShow', value.key, this.activeMenu.meta.title)
},
findMenuBykey(menus, key) {
for (let i of menus) {
@ -168,10 +171,8 @@
this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
},
// update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
},
}
}
</script>
<style lang="less">
@ -190,9 +191,7 @@
overflow-x: hidden;
&.mobile {
.ant-layout-content {
.content {
margin: 24px 0 0;
}
@ -214,9 +213,9 @@
}
.sidemenu {
.ant-header-fixedHeader {
&.ant-header-side-opened, &.ant-header-side-closed {
width: 100%
&.ant-header-side-opened,
&.ant-header-side-closed {
width: 100%;
}
}
}
@ -229,7 +228,8 @@
}
}
}
.header, .top-nav-header-index {
.header,
.top-nav-header-index {
.user-wrapper .action {
padding: 0 12px;
}
@ -259,7 +259,7 @@
right: 0;
z-index: 9;
width: 100%;
transition: width .2s;
transition: width 0.2s;
&.ant-header-side-opened {
width: 100%;
@ -280,7 +280,6 @@
max-width: unset;
}
}
}
.sidemenu {
@ -290,14 +289,14 @@
right: 0;
z-index: 9;
width: 100%;
transition: width .2s;
transition: width 0.2s;
&.ant-header-side-opened {
width: calc(100% - 200px)
width: calc(100% - 200px);
}
&.ant-header-side-closed {
width: calc(100% - 80px)
width: calc(100% - 80px);
}
}
}
@ -306,12 +305,12 @@
height: 64px;
padding: 0 12px 0 0;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
}
.header, .top-nav-header-index {
.header,
.top-nav-header-index {
.user-wrapper {
width: 140px;
height: 100%;
@ -327,7 +326,7 @@
.avatar {
margin: 20px 10px 20px 0;
color: #1890ff;
background: hsla(0, 0%, 100%, .85);
background: hsla(0, 0%, 100%, 0.85);
vertical-align: middle;
}
@ -344,7 +343,6 @@
&.dark {
.user-wrapper {
.action {
color: black;
@ -362,11 +360,8 @@
&.mobile {
.top-nav-header-index {
.header-index-wide {
.header-index-left {
.trigger {
color: rgba(255, 255, 255, 0.85);
padding: 0 12px;
@ -385,9 +380,7 @@
}
&.light {
.header-index-wide {
.header-index-left {
.trigger {
color: rgba(0, 0, 0, 0.65);
@ -402,9 +395,7 @@
&.tablet {
// overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
.top-nav-header-index {
.header-index-wide {
.header-index-left {
.logo > a {
overflow: hidden;
@ -414,13 +405,12 @@
}
}
}
}
.top-nav-header-index {
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
transition: background .3s, width .2s;
transition: background 0.3s, width 0.2s;
.header-index-wide {
width: 100%;
@ -479,9 +469,7 @@
}
&.dark {
.user-wrapper {
.action {
color: white;
@ -494,7 +482,6 @@
background: rgba(255, 255, 255, 0.3);
}
}
}
// 内容区
@ -503,7 +490,6 @@
height: 64px;
padding: 0 12px 0 0;
}
}
.topmenu {
@ -532,13 +518,13 @@
}
.ant-drawer-body {
padding: 0
padding: 0;
}
}
// 菜单样式
.sider {
box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, 0.35);
position: relative;
z-index: 10;
@ -552,12 +538,13 @@
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: #002140;
overflow: hidden;
img, h1 {
img,
h1 {
display: inline-block;
vertical-align: middle;
}
@ -570,7 +557,9 @@
color: #fff;
font-size: 18px;
margin: 0 0 0 8px;
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
font-weight: 600;
}
}
@ -592,7 +581,6 @@
border-right-color: transparent;
}
}
}
// 外置的样式控制
@ -605,12 +593,10 @@
.ant-dropdown-menu-item > .anticon:first-child,
.ant-dropdown-menu-item > a > .anticon:first-child,
.ant-dropdown-menu-submenu-title > .anticon:first-child
.ant-dropdown-menu-submenu-title > a > .anticon:first-child {
.ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
}
// 数据列表 样式
@ -619,9 +605,7 @@
}
.table-page-search-wrapper {
.ant-form-inline {
.ant-form-item {
display: flex;
margin-bottom: 24px;
@ -650,11 +634,9 @@
margin-bottom: 24px;
white-space: nowrap;
}
}
.content {
.table-operator {
margin-bottom: 18px;
@ -665,11 +647,11 @@
}
.sub-menus {
border-top: 1px solid rgba(12, 235, 201, .3);
border-bottom: 1px solid rgba(12, 235, 201, .3);
border-top: 1px solid rgba(12, 235, 201, 0.3);
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
margin-bottom: 16px;
padding: 5px 10px 8px;
background-color: rgba(12, 235, 201, .05);
background-color: rgba(12, 235, 201, 0.05);
overflow: auto;
.ant-menu {
border-bottom: none;
@ -677,7 +659,7 @@
line-height: normal;
background-color: transparent;
.ant-menu-item {
background: rgba(58, 236, 240, .22) !important;
background: rgba(58, 236, 240, 0.22) !important;
border-bottom: none !important;
margin-right: 10px;
height: 30px;
@ -721,7 +703,7 @@
}
}
.ant-menu-submenu {
background: rgba(58, 236, 240, .22) !important;
background: rgba(58, 236, 240, 0.22) !important;
border-bottom: none !important;
margin-right: 10px;
height: 30px;
@ -854,5 +836,9 @@
.ant-menu-submenu-popup {
position: relative;
}
</style>
<style lang="less" scoped>
.ant-menu {
width: 1750px;
}
</style>

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

@ -1,6 +1,6 @@
<template>
<div style="height: 100%;">
<div v-if="!isDetail" style="height: 100%;">
<div style="height: 100%">
<div v-if="!isDetail" style="height: 100%">
<SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
<div class="analysis-main">
<TableList
@ -10,26 +10,38 @@
:list="dataSource"
:loading="loading"
:pagination="false"
@selectRowClick="rowClick"
@rowDbclick="rowClick"
>
<template slot="stationList" slot-scope="{ text }">
<a-tooltip placement="topLeft">
<template slot="title">
{{ text.join("、") }}
{{ text.join('、') }}
</template>
{{ text.join("、") }}
{{ text.join('、') }}
</a-tooltip>
</template>
<template slot="sourceList" slot-scope="{ text }">
<a-tooltip placement="topLeft">
<template slot="title">
{{ text.join("、") }}
{{ text.join('、') }}
</template>
{{ text.join("、") }}
{{ text.join('、') }}
</a-tooltip>
</template>
<template slot="info" slot-scope="{ text, record }">
<a-popover placement="bottomLeft" overlayClassName="qqqqq">
<a-popover
trigger="hover"
:visible="record.popHovered"
@visibleChange="(visible) => handleHoverChange(visible, record)"
>
<div slot="content">{{ text }}</div>
<a-popover
placement="bottomLeft"
trigger="click"
:visible="record.popClicked"
@visibleChange="(visible) => handleClickChange(visible, record)"
overlayClassName="qqqqq"
>
<template slot="content">
<a-table
:columns="columns_info"
@ -38,7 +50,17 @@
rowKey="nuclide"
></a-table>
</template>
{{ text }}
<span
style="
display: inline-block;
width: 95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>{{ text }}</span
>
</a-popover>
</a-popover>
</template>
</TableList>
@ -50,23 +72,26 @@
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-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 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>
<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;">
<div style="padding: 15px 15px 20px">
<a-row>
<a-col :span="13">
<a-row>
@ -78,7 +103,8 @@
<a-row>
<a-col :span="14" class="info-key">Sample Geometry:</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-col :span="13">
@ -91,7 +117,8 @@
<a-row>
<a-col :span="14" class="info-key">Spectrum Qualifier:</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-col :span="13">
@ -104,7 +131,8 @@
<a-row>
<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-row></a-col>
</a-row></a-col
>
</a-row>
<a-row>
<a-col :span="13">
@ -117,7 +145,8 @@
<a-row>
<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-row></a-col>
</a-row></a-col
>
</a-row>
<a-row>
<a-col :span="13">
@ -130,11 +159,12 @@
<a-row>
<a-col :span="14" class="info-key">Transmit Time:</a-col>
<a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.transmitDate }}</a-col>
</a-row></a-col>
</a-row></a-col
>
</a-row>
</div>
<div class="pane-title">ACQUISITION</div>
<div style="padding: 15px 15px 20px;">
<div style="padding: 15px 15px 20px">
<a-row>
<a-col :span="13">
<a-row>
@ -174,10 +204,11 @@
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar';
import TableList from '../../components/tableList.vue';
import SearchBar from '../../components/searchBar'
import TableList from '../../components/tableList.vue'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [{
const columns = [
{
title: 'STATION',
align: 'center',
dataIndex: 'stationList',
@ -185,18 +216,21 @@ const columns = [{
ellipsis: true,
scopedSlots: {
customRender: 'stationList',
}
},{
},
},
{
title: 'COLLECTION START',
align: 'center',
dataIndex: 'collectionDate',
width: 200,
},{
},
{
title: 'ALARM TIME',
align: 'center',
dataIndex: 'alarmStartDate',
width: 200,
},{
},
{
title: 'DATA SOURCES ',
align: 'center',
dataIndex: 'sourceList',
@ -204,33 +238,37 @@ const columns = [{
ellipsis: true,
scopedSlots: {
customRender: 'sourceList',
}
},{
},
},
{
title: 'ALARM INFO',
align: 'left',
dataIndex: 'alarmInfo',
ellipsis: true,
scopedSlots: {
customRender: 'info',
}
}
},
},
]
const columns_info = [{
const columns_info = [
{
title: 'NUCLIDE',
align: 'left',
dataIndex: 'nuclide',
width:200
},{
width: 200,
},
{
title: 'THRESHOLD ',
align: 'left',
dataIndex: 'threshold',
width:200
},{
width: 200,
},
{
title: 'VALUE ',
align: 'left',
dataIndex: 'value',
width:200
width: 200,
},
]
export default {
components: {
@ -239,10 +277,12 @@ export default {
},
data() {
return {
popClicked: false,
popHovered: false,
stationOptions: [],
paramsArg: {
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
},
columns,
columns_info,
@ -258,43 +298,51 @@ export default {
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
total: 0,
},
isDetail: false,
dataSourceDetailNuclide: [],
url: {
list: "/alarmAnalysisLog/findPage",
sampleInfo: "/webStatistics/sampleInfo"
list: '/alarmAnalysisLog/findPage',
sampleInfo: '/webStatistics/sampleInfo',
},
selectRow: {},
sampleInfo: {}
sampleInfo: {},
}
},
mounted() {
this.getStationList();
this.getPageData();
this.getStationList()
this.getPageData()
},
methods: {
handleHoverChange(visible, row) {
row.popClicked = false
row.popHovered = visible
},
handleClickChange(visible, row) {
row.popClicked = visible
row.popHovered = false
},
getStationList() {
getAction("/webStatistics/findStationList",{menuName:""}).then(res => {
getAction('/webStatistics/findStationList', { menuName: '' }).then((res) => {
if (res.success) {
if (res.result.length > 0) {
this.stationOptions = res.result.map(item => {
this.stationOptions = res.result.map((item) => {
return {
label: item.stationCode,
value: item.stationId
value: item.stationId,
}
})
} else {
this.stationOptions = []
}
} else {
this.$message.warning("This operation fails. Contact your system administrator")
this.$message.warning('This operation fails. Contact your system administrator')
}
})
},
getPageData() {
this.loading = true;
this.loading = true
let param = {
source: this.paramsArg.sources,
stations: this.paramsArg.stations,
@ -302,22 +350,28 @@ export default {
startDate: this.paramsArg.startDate,
endDate: this.paramsArg.endDate,
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize
pageSize: this.ipagination.pageSize,
}
getAction(this.url.list, param).then(res => {
this.loading = false;
getAction(this.url.list, param).then((res) => {
this.loading = false
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
} else {
this.$message.warning("This operation fails. Contact your system administrator")
this.$message.warning('This operation fails. Contact your system administrator')
}
})
},
async getSampleInfo() {
await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId}).then(res=> {
this.sampleInfo = res.result;
this.loading = false;
await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId }).then((res) => {
this.sampleInfo = res.result
this.loading = false
})
},
handleSearch({ startDate, endDate, stations, sources }) {
@ -326,15 +380,15 @@ export default {
startDate,
endDate,
stations,
sources
sources,
}
this.getPageData()
},
async rowClick(record) {
this.loading = true;
this.selectRow = record;
this.loading = true
this.selectRow = record
this.dataSourceDetailNuclide = record.nuclideList
await this.getSampleInfo();
await this.getSampleInfo()
this.isDetail = true
},
handlePageChange(page, pageSize) {
@ -349,7 +403,7 @@ export default {
},
handleback() {
this.isDetail = false
}
},
},
}
</script>