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

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

@ -2,7 +2,8 @@
<a-layout class="layout" :class="[device]"> <a-layout class="layout" :class="[device]">
<a-layout <a-layout
:class="[layoutMode, `content-width-${contentWidth}`]" :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 --> <!-- layout header -->
<global-header <global-header
:mode="layoutMode" :mode="layoutMode"
@ -15,27 +16,27 @@
/> />
<div class="global-content"> <div class="global-content">
<div class="content-top-border"> <div class="content-top-border">
<img src="@/assets/images/content/top.png" alt=""> <img src="@/assets/images/content/top.png" alt="" />
</div> </div>
<div class="content-main"> <div class="content-main">
<div class="content-left-border"> <div class="content-left-border">
<img src="@/assets/images/content/left.png" alt=""> <img src="@/assets/images/content/left.png" alt="" />
</div> </div>
<!-- layout content --> <!-- layout content -->
<a-layout-content> <a-layout-content>
<div class="sub-menus" v-if="currentChildrenMenus && currentChildrenMenus.length"> <div class="sub-menus" v-if="currentChildrenMenus && currentChildrenMenus.length">
<s-menu :menu="currentChildrenMenus" mode="horizontal" theme="light"></s-menu> <s-menu :menu="currentChildrenMenus" mode="horizontal" theme="light"></s-menu>
</div> </div>
<div class="real-content" :class="currentChildrenMenus.length? 'has-submenu': ''"> <div class="real-content" :class="currentChildrenMenus.length ? 'has-submenu' : ''">
<slot></slot> <slot></slot>
</div> </div>
</a-layout-content> </a-layout-content>
<div class="content-right-border"> <div class="content-right-border">
<img src="@/assets/images/content/left.png" alt=""> <img src="@/assets/images/content/left.png" alt="" />
</div> </div>
</div> </div>
<div class="content-bottom-border"> <div class="content-bottom-border">
<img src="@/assets/images/content/bottom.png" alt=""> <img src="@/assets/images/content/bottom.png" alt="" />
</div> </div>
</div> </div>
</a-layout> </a-layout>
@ -47,58 +48,57 @@
</template> </template>
<script> <script>
import SideMenu from '@/components/menu/SideMenu' import SideMenu from '@/components/menu/SideMenu'
import GlobalHeader from '@/components/page/GlobalHeader' import GlobalHeader from '@/components/page/GlobalHeader'
import GlobalFooter from '@/components/page/GlobalFooter' import GlobalFooter from '@/components/page/GlobalFooter'
import { triggerWindowResizeEvent } from '@/utils/util' import { triggerWindowResizeEvent } from '@/utils/util'
import { mapActions, mapState } from 'vuex' import { mapActions, mapState } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin.js' import { mixin, mixinDevice } from '@/utils/mixin.js'
import SMenu from '../menu/index' import SMenu from '../menu/index'
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------ // update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
// import SettingDrawer from '@/components/setting/SettingDrawer' // import SettingDrawer from '@/components/setting/SettingDrawer'
// 注释这个因为在个人设置模块已经加载了SettingDrawer页面 // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
// update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------ // update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
export default { export default {
name: 'GlobalLayout', name: 'GlobalLayout',
components: { components: {
SideMenu, SideMenu,
GlobalHeader, GlobalHeader,
GlobalFooter, GlobalFooter,
SMenu SMenu,
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------ // update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
// // SettingDrawer // // SettingDrawer
// 注释这个因为在个人设置模块已经加载了SettingDrawer页面 // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
// update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------ // update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
}, },
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
data() { data() {
return { return {
collapsed: false, collapsed: false,
activeMenu:{}, activeMenu: {},
menus: [] menus: [],
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
// 主路由 // 主路由
mainRouters: state => state.permission.addRouters, mainRouters: (state) => state.permission.addRouters,
// 后台菜单 // 后台菜单
permissionMenuList: state => state.user.permissionList permissionMenuList: (state) => state.user.permissionList,
}), }),
// 当前页面子路由 // 当前页面子路由
currentChildrenMenus () { currentChildrenMenus() {
const hasSubmenuPathList = ['/isystem', '/system'] // 需要显示二级菜单的路由列表（仅需一级菜单路由） 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): [] return hasSubMenu ? this.findSubMenus(this.$route.name) : []
} },
}, },
watch: { watch: {
sidebarOpened(val) { sidebarOpened(val) {
this.collapsed = !val this.collapsed = !val
} },
}, },
created() { created() {
//--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------ //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
@ -106,7 +106,7 @@
this.menus = this.permissionMenuList this.menus = this.permissionMenuList
//--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255 //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
this.collapsed=!this.sidebarOpened; this.collapsed = !this.sidebarOpened
//--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255 //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
// 根据后台配置菜单，重新排序加载路由信息 // 根据后台配置菜单，重新排序加载路由信息
@ -126,7 +126,10 @@
findSubMenus(routeName) { findSubMenus(routeName) {
for (const menu of this.menus) { for (const menu of this.menus) {
if (menu.children) { 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) { if (find) {
return menu.children return menu.children
} }
@ -145,17 +148,17 @@
} }
}, },
//update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
myMenuSelect(value){ myMenuSelect(value) {
//此处触发动态路由被点击事件 //此处触发动态路由被点击事件
this.findMenuBykey(this.menus,value.key) 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){ findMenuBykey(menus, key) {
for(let i of menus){ for (let i of menus) {
if(i.path==key){ if (i.path == key) {
this.activeMenu = {...i} this.activeMenu = { ...i }
}else if(i.children && i.children.length>0){ } else if (i.children && i.children.length > 0) {
this.findMenuBykey(i.children,key) this.findMenuBykey(i.children, key)
} }
} }
}, },
@ -168,14 +171,12 @@
this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title) this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
}, },
// update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题 // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
},
} }
}
</script> </script>
<style lang="less"> <style lang="less">
body { body {
// 打开滚动条固定显示 // 打开滚动条固定显示
// 注释原因：issues/I5VK11 // 注释原因：issues/I5VK11
//overflow-y: scroll; //overflow-y: scroll;
@ -183,16 +184,14 @@
&.colorWeak { &.colorWeak {
filter: invert(80%); filter: invert(80%);
} }
} }
.layout { .layout {
min-height: 100vh !important; min-height: 100vh !important;
overflow-x: hidden; overflow-x: hidden;
&.mobile { &.mobile {
.ant-layout-content { .ant-layout-content {
.content { .content {
margin: 24px 0 0; margin: 24px 0 0;
} }
@ -214,9 +213,9 @@
} }
.sidemenu { .sidemenu {
.ant-header-fixedHeader { .ant-header-fixedHeader {
&.ant-header-side-opened,
&.ant-header-side-opened, &.ant-header-side-closed { &.ant-header-side-closed {
width: 100% width: 100%;
} }
} }
} }
@ -229,7 +228,8 @@
} }
} }
} }
.header, .top-nav-header-index { .header,
.top-nav-header-index {
.user-wrapper .action { .user-wrapper .action {
padding: 0 12px; padding: 0 12px;
} }
@ -259,7 +259,7 @@
right: 0; right: 0;
z-index: 9; z-index: 9;
width: 100%; width: 100%;
transition: width .2s; transition: width 0.2s;
&.ant-header-side-opened { &.ant-header-side-opened {
width: 100%; width: 100%;
@ -280,7 +280,6 @@
max-width: unset; max-width: unset;
} }
} }
} }
.sidemenu { .sidemenu {
@ -290,14 +289,14 @@
right: 0; right: 0;
z-index: 9; z-index: 9;
width: 100%; width: 100%;
transition: width .2s; transition: width 0.2s;
&.ant-header-side-opened { &.ant-header-side-opened {
width: calc(100% - 200px) width: calc(100% - 200px);
} }
&.ant-header-side-closed { &.ant-header-side-closed {
width: calc(100% - 80px) width: calc(100% - 80px);
} }
} }
} }
@ -306,12 +305,12 @@
height: 64px; height: 64px;
padding: 0 12px 0 0; padding: 0 12px 0 0;
background: #fff; 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; position: relative;
} }
.header, .top-nav-header-index { .header,
.top-nav-header-index {
.user-wrapper { .user-wrapper {
width: 140px; width: 140px;
height: 100%; height: 100%;
@ -327,7 +326,7 @@
.avatar { .avatar {
margin: 20px 10px 20px 0; margin: 20px 10px 20px 0;
color: #1890ff; color: #1890ff;
background: hsla(0, 0%, 100%, .85); background: hsla(0, 0%, 100%, 0.85);
vertical-align: middle; vertical-align: middle;
} }
@ -344,7 +343,6 @@
&.dark { &.dark {
.user-wrapper { .user-wrapper {
.action { .action {
color: black; color: black;
@ -362,11 +360,8 @@
&.mobile { &.mobile {
.top-nav-header-index { .top-nav-header-index {
.header-index-wide { .header-index-wide {
.header-index-left { .header-index-left {
.trigger { .trigger {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
padding: 0 12px; padding: 0 12px;
@ -385,9 +380,7 @@
} }
&.light { &.light {
.header-index-wide { .header-index-wide {
.header-index-left { .header-index-left {
.trigger { .trigger {
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
@ -402,9 +395,7 @@
&.tablet { &.tablet {
// overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
.top-nav-header-index { .top-nav-header-index {
.header-index-wide { .header-index-wide {
.header-index-left { .header-index-left {
.logo > a { .logo > a {
overflow: hidden; overflow: hidden;
@ -414,13 +405,12 @@
} }
} }
} }
} }
.top-nav-header-index { .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; position: relative;
transition: background .3s, width .2s; transition: background 0.3s, width 0.2s;
.header-index-wide { .header-index-wide {
width: 100%; width: 100%;
@ -479,9 +469,7 @@
} }
&.dark { &.dark {
.user-wrapper { .user-wrapper {
.action { .action {
color: white; color: white;
@ -494,7 +482,6 @@
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
} }
} }
// 内容区 // 内容区
@ -503,18 +490,17 @@
height: 64px; height: 64px;
padding: 0 12px 0 0; padding: 0 12px 0 0;
} }
}
} .topmenu {
.topmenu {
.page-header-index-wide { .page-header-index-wide {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
} }
// drawer-sider 自定义 // drawer-sider 自定义
.ant-drawer.drawer-sider { .ant-drawer.drawer-sider {
.sider { .sider {
box-shadow: none; box-shadow: none;
} }
@ -532,13 +518,13 @@
} }
.ant-drawer-body { .ant-drawer-body {
padding: 0 padding: 0;
}
} }
}
// 菜单样式 // 菜单样式
.sider { .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; position: relative;
z-index: 10; z-index: 10;
@ -552,12 +538,13 @@
position: relative; position: relative;
line-height: 64px; line-height: 64px;
padding-left: 24px; padding-left: 24px;
-webkit-transition: all .3s; -webkit-transition: all 0.3s;
transition: all .3s; transition: all 0.3s;
background: #002140; background: #002140;
overflow: hidden; overflow: hidden;
img, h1 { img,
h1 {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@ -570,7 +557,9 @@
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
margin: 0 0 0 8px; 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; font-weight: 600;
} }
} }
@ -592,11 +581,10 @@
border-right-color: transparent; border-right-color: transparent;
} }
} }
}
} // 外置的样式控制
.user-dropdown-menu-wrapper.ant-dropdown-menu {
// 外置的样式控制
.user-dropdown-menu-wrapper.ant-dropdown-menu {
padding: 4px 0; padding: 4px 0;
.ant-dropdown-menu-item { .ant-dropdown-menu-item {
@ -605,23 +593,19 @@
.ant-dropdown-menu-item > .anticon:first-child, .ant-dropdown-menu-item > .anticon:first-child,
.ant-dropdown-menu-item > a > .anticon:first-child, .ant-dropdown-menu-item > a > .anticon:first-child,
.ant-dropdown-menu-submenu-title > .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 > a > .anticon:first-child {
min-width: 12px; min-width: 12px;
margin-right: 8px; margin-right: 8px;
} }
}
} // 数据列表 样式
.table-alert {
// 数据列表 样式
.table-alert {
margin-bottom: 16px; margin-bottom: 16px;
} }
.table-page-search-wrapper {
.table-page-search-wrapper {
.ant-form-inline { .ant-form-inline {
.ant-form-item { .ant-form-item {
display: flex; display: flex;
margin-bottom: 24px; margin-bottom: 24px;
@ -650,11 +634,9 @@
margin-bottom: 24px; margin-bottom: 24px;
white-space: nowrap; white-space: nowrap;
} }
}
} .content {
.content {
.table-operator { .table-operator {
margin-bottom: 18px; margin-bottom: 18px;
@ -662,14 +644,14 @@
margin-right: 8px; margin-right: 8px;
} }
} }
} }
.sub-menus { .sub-menus {
border-top: 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, .3); border-bottom: 1px solid rgba(12, 235, 201, 0.3);
margin-bottom: 16px; margin-bottom: 16px;
padding: 5px 10px 8px; padding: 5px 10px 8px;
background-color: rgba(12, 235, 201, .05); background-color: rgba(12, 235, 201, 0.05);
overflow: auto; overflow: auto;
.ant-menu { .ant-menu {
border-bottom: none; border-bottom: none;
@ -677,7 +659,7 @@
line-height: normal; line-height: normal;
background-color: transparent; background-color: transparent;
.ant-menu-item { .ant-menu-item {
background: rgba(58, 236, 240, .22) !important; background: rgba(58, 236, 240, 0.22) !important;
border-bottom: none !important; border-bottom: none !important;
margin-right: 10px; margin-right: 10px;
height: 30px; height: 30px;
@ -720,8 +702,8 @@
border-left: 0; border-left: 0;
} }
} }
.ant-menu-submenu{ .ant-menu-submenu {
background: rgba(58, 236, 240, .22) !important; background: rgba(58, 236, 240, 0.22) !important;
border-bottom: none !important; border-bottom: none !important;
margin-right: 10px; margin-right: 10px;
height: 30px; height: 30px;
@ -765,8 +747,8 @@
} }
} }
} }
} }
.global-content { .global-content {
width: 100%; width: 100%;
height: calc(100% - 73px); height: calc(100% - 73px);
overflow: hidden; overflow: hidden;
@ -828,8 +810,8 @@
height: 100%; height: 100%;
} }
} }
} }
.ant-menu-submenu-popup .ant-menu-item{ .ant-menu-submenu-popup .ant-menu-item {
display: block !important; display: block !important;
width: 100%; width: 100%;
padding: 0 16px !important; padding: 0 16px !important;
@ -838,21 +820,25 @@
color: #fff; color: #fff;
font-family: Arial; font-family: Arial;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.ant-menu-submenu-popup .ant-menu{ .ant-menu-submenu-popup .ant-menu {
height: auto; height: auto;
width: 220px; width: 220px;
position: absolute; position: absolute;
left: -16px; left: -16px;
a{ a {
color: white; color: white;
&:hover{ &:hover {
color: white; color: white;
} }
} }
} }
.ant-menu-submenu-popup{ .ant-menu-submenu-popup {
position: relative; position: relative;
} }
</style>
<style lang="less" scoped>
.ant-menu {
width: 1750px;
}
</style> </style>

222
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,26 +10,38 @@
: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
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"> <template slot="content">
<a-table <a-table
:columns="columns_info" :columns="columns_info"
@ -38,7 +50,17 @@
rowKey="nuclide" rowKey="nuclide"
></a-table> ></a-table>
</template> </template>
{{ text }} <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);
} }
} }