二级菜单的样式调整
Analysis Monitor 模块表格事件调整
This commit is contained in:
parent
59850929d2
commit
3beb3b2344
|
|
@ -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,27 +16,27 @@
|
|||
/>
|
||||
<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>
|
||||
<div class="sub-menus" v-if="currentChildrenMenus && currentChildrenMenus.length">
|
||||
<s-menu :menu="currentChildrenMenus" mode="horizontal" theme="light"></s-menu>
|
||||
</div>
|
||||
<div class="real-content" :class="currentChildrenMenus.length? 'has-submenu': ''">
|
||||
<div class="real-content" :class="currentChildrenMenus.length ? 'has-submenu' : ''">
|
||||
<slot></slot>
|
||||
</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>
|
||||
|
|
@ -47,58 +48,57 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import SideMenu from '@/components/menu/SideMenu'
|
||||
import GlobalHeader from '@/components/page/GlobalHeader'
|
||||
import GlobalFooter from '@/components/page/GlobalFooter'
|
||||
import { triggerWindowResizeEvent } from '@/utils/util'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import SMenu from '../menu/index'
|
||||
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
|
||||
// import SettingDrawer from '@/components/setting/SettingDrawer'
|
||||
// 注释这个因为在个人设置模块已经加载了SettingDrawer页面
|
||||
// update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
|
||||
import SideMenu from '@/components/menu/SideMenu'
|
||||
import GlobalHeader from '@/components/page/GlobalHeader'
|
||||
import GlobalFooter from '@/components/page/GlobalFooter'
|
||||
import { triggerWindowResizeEvent } from '@/utils/util'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
import SMenu from '../menu/index'
|
||||
// update-start---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
|
||||
// import SettingDrawer from '@/components/setting/SettingDrawer'
|
||||
// 注释这个因为在个人设置模块已经加载了SettingDrawer页面
|
||||
// update-end ---- author:os_chengtgen -- date:20190830 -- for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'GlobalLayout',
|
||||
components: {
|
||||
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: []
|
||||
activeMenu: {},
|
||||
menus: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...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 hasSubMenu = hasSubmenuPathList.some(item => this.$route.path.indexOf(item) == 0)
|
||||
return hasSubMenu? this.findSubMenus(this.$route.name): []
|
||||
}
|
||||
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
|
||||
}
|
||||
|
|
@ -145,17 +148,17 @@
|
|||
}
|
||||
},
|
||||
//update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
|
||||
myMenuSelect(value){
|
||||
myMenuSelect(value) {
|
||||
//此处触发动态路由被点击事件
|
||||
this.findMenuBykey(this.menus,value.key)
|
||||
this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
|
||||
this.findMenuBykey(this.menus, value.key)
|
||||
this.$emit('dynamicRouterShow', value.key, this.activeMenu.meta.title)
|
||||
},
|
||||
findMenuBykey(menus,key){
|
||||
for(let i of menus){
|
||||
if(i.path==key){
|
||||
this.activeMenu = {...i}
|
||||
}else if(i.children && i.children.length>0){
|
||||
this.findMenuBykey(i.children,key)
|
||||
findMenuBykey(menus, key) {
|
||||
for (let i of menus) {
|
||||
if (i.path == key) {
|
||||
this.activeMenu = { ...i }
|
||||
} else if (i.children && i.children.length > 0) {
|
||||
this.findMenuBykey(i.children, key)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -168,14 +171,12 @@
|
|||
this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
|
||||
},
|
||||
// update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
body {
|
||||
body {
|
||||
// 打开滚动条固定显示
|
||||
// 注释原因：issues/I5VK11
|
||||
//overflow-y: scroll;
|
||||
|
|
@ -183,16 +184,14 @@
|
|||
&.colorWeak {
|
||||
filter: invert(80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
.layout {
|
||||
min-height: 100vh !important;
|
||||
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,18 +490,17 @@
|
|||
height: 64px;
|
||||
padding: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.topmenu {
|
||||
.topmenu {
|
||||
.page-header-index-wide {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// drawer-sider 自定义
|
||||
.ant-drawer.drawer-sider {
|
||||
// drawer-sider 自定义
|
||||
.ant-drawer.drawer-sider {
|
||||
.sider {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -532,13 +518,13 @@
|
|||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
padding: 0
|
||||
}
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单样式
|
||||
.sider {
|
||||
box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
|
||||
// 菜单样式
|
||||
.sider {
|
||||
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,11 +581,10 @@
|
|||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 外置的样式控制
|
||||
.user-dropdown-menu-wrapper.ant-dropdown-menu {
|
||||
// 外置的样式控制
|
||||
.user-dropdown-menu-wrapper.ant-dropdown-menu {
|
||||
padding: 4px 0;
|
||||
|
||||
.ant-dropdown-menu-item {
|
||||
|
|
@ -605,23 +593,19 @@
|
|||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 数据列表 样式
|
||||
.table-alert {
|
||||
// 数据列表 样式
|
||||
.table-alert {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-page-search-wrapper {
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
.content {
|
||||
.table-operator {
|
||||
margin-bottom: 18px;
|
||||
|
||||
|
|
@ -662,14 +644,14 @@
|
|||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menus {
|
||||
border-top: 1px solid rgba(12, 235, 201, .3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, .3);
|
||||
.sub-menus {
|
||||
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;
|
||||
|
|
@ -720,8 +702,8 @@
|
|||
border-left: 0;
|
||||
}
|
||||
}
|
||||
.ant-menu-submenu{
|
||||
background: rgba(58, 236, 240, .22) !important;
|
||||
.ant-menu-submenu {
|
||||
background: rgba(58, 236, 240, 0.22) !important;
|
||||
border-bottom: none !important;
|
||||
margin-right: 10px;
|
||||
height: 30px;
|
||||
|
|
@ -765,8 +747,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.global-content {
|
||||
}
|
||||
.global-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 73px);
|
||||
overflow: hidden;
|
||||
|
|
@ -828,8 +810,8 @@
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-submenu-popup .ant-menu-item{
|
||||
}
|
||||
.ant-menu-submenu-popup .ant-menu-item {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
padding: 0 16px !important;
|
||||
|
|
@ -838,21 +820,25 @@
|
|||
color: #fff;
|
||||
font-family: Arial;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.ant-menu-submenu-popup .ant-menu{
|
||||
}
|
||||
.ant-menu-submenu-popup .ant-menu {
|
||||
height: auto;
|
||||
width: 220px;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
a{
|
||||
a {
|
||||
color: white;
|
||||
&:hover{
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-submenu-popup{
|
||||
}
|
||||
.ant-menu-submenu-popup {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.ant-menu {
|
||||
width: 1750px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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,16 +277,18 @@ 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,
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -258,43 +298,51 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
isDetail: false,
|
||||
dataSourceDetailNuclide:[],
|
||||
dataSourceDetailNuclide: [],
|
||||
url: {
|
||||
list: "/alarmAnalysisLog/findPage",
|
||||
sampleInfo: "/webStatistics/sampleInfo"
|
||||
list: '/alarmAnalysisLog/findPage',
|
||||
sampleInfo: '/webStatistics/sampleInfo',
|
||||
},
|
||||
selectRow: {},
|
||||
sampleInfo: {}
|
||||
sampleInfo: {},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getStationList();
|
||||
this.getPageData();
|
||||
mounted() {
|
||||
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 => {
|
||||
if (res.result.length > 0) {
|
||||
this.stationOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.stationCode,
|
||||
value: item.stationId
|
||||
value: item.stationId,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.stationOptions=[]
|
||||
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,13 +403,13 @@ export default {
|
|||
},
|
||||
handleback() {
|
||||
this.isDetail = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.analysis-main{
|
||||
.analysis-main {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
|
|
@ -363,13 +417,13 @@ export default {
|
|||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.detail-top{
|
||||
.detail-top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
|
|
@ -380,36 +434,36 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
.top-back{
|
||||
.top-back {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 16px;
|
||||
color: #69a19f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
span{
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
}
|
||||
.actions-back{
|
||||
.actions-back {
|
||||
background: url(~@/assets/images/abnormalAlarm/return.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: url(~@/assets/images/abnormalAlarm/return-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-main{
|
||||
.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{
|
||||
.pane-title {
|
||||
height: 40px;
|
||||
background-color: rgba(12, 235, 201, 0.05);
|
||||
line-height: 40px;
|
||||
|
|
@ -421,14 +475,14 @@ export default {
|
|||
color: #0cebc9;
|
||||
padding: 0 0 0 18px;
|
||||
}
|
||||
.info-key{
|
||||
.info-key {
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.info-val{
|
||||
.info-val {
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
|
|
@ -437,21 +491,21 @@ export default {
|
|||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.qqqqq{
|
||||
.ant-popover-arrow{
|
||||
.qqqqq {
|
||||
.ant-popover-arrow {
|
||||
border-left-color: #1993cc !important;
|
||||
border-top-color: #1993cc !important;
|
||||
}
|
||||
.ant-popover-inner-content{
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-table-thead > tr th{
|
||||
.ant-table-thead > tr th {
|
||||
background-color: #1993cc !important;
|
||||
}
|
||||
.ant-table-tbody tr{
|
||||
.ant-table-tbody tr {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user