侧边菜单栏
This commit is contained in:
surida
parent
399ced19e4
commit
611c658841
3
public/color.less
vendored
3
public/color.less
vendored
|
|
@ -5091,9 +5091,6 @@ form .ant-upload {
|
|||
.ant-layout {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.ant-layout-header {
|
||||
background: #001529;
|
||||
}
|
||||
.ant-layout-footer {
|
||||
background: #f0f2f5;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 12 KiB |
BIN
src/assets/img/analysisBG.png
Normal file
BIN
src/assets/img/analysisBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 316 KiB |
BIN
src/assets/img/leftMenu.png
Normal file
BIN
src/assets/img/leftMenu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -1,14 +1,14 @@
|
|||
@bordercolor : rgb(98,133,151);
|
||||
@headercolor : #ffffff;
|
||||
@backcolor : #ffffff;
|
||||
@inpuitbordercolor: rgb(45,103,132);
|
||||
@inpuitbackcolor : rgb(4,27,43);
|
||||
@inpuitbordercolor: #C3C3C3;
|
||||
@inpuitbackcolor : #C3C3C346;
|
||||
@labelDeaultColor : rgb(98,133,151);
|
||||
@defaultWhiteColor: rgb(98,133,151);
|
||||
@fontfamily : 'MyCustomFont3', sans-serif;
|
||||
@tableheadColor : #E5E8EB;
|
||||
@tableheadBgColor : linear-gradient(180deg, rgb(20,108,173),rgb(11,57,90));
|
||||
@tableColor : rgb(98,133,151);
|
||||
@tableheadColor : #363F56;
|
||||
@tableheadBgColor : linear-gradient(180deg, #D6DAE2,#B0B6C2);
|
||||
@tableColor : #6C758B;
|
||||
|
||||
@font-face {
|
||||
font-family: 'MyCustomFont1';
|
||||
|
|
@ -41,7 +41,7 @@ body{
|
|||
}
|
||||
.echartsTitle{
|
||||
height: 36px;
|
||||
background: linear-gradient(90deg, rgb(9,62,81),rgb(9,62,81),rgb(8,43,62));
|
||||
background: linear-gradient(90deg, #788095,#c5cad6);
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 34px;
|
||||
|
|
@ -56,9 +56,9 @@ body{
|
|||
|
||||
.linese{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
height: 1px;
|
||||
margin: 10px 0;
|
||||
background: linear-gradient(90deg, rgb(49,112,157) 20px,rgb(26,63,86) 20px,rgb(26,63,86) calc(100% - 20px),rgb(49,112,157) calc(100% - 20px));
|
||||
background: linear-gradient(90deg, #1671DB 20px,#a2c6f1 20px,#a2c6f1 calc(100% - 20px),#1671DB calc(100% - 20px));
|
||||
}
|
||||
|
||||
/* 滚动条优化 start */
|
||||
|
|
@ -127,11 +127,24 @@ body {
|
|||
}
|
||||
|
||||
.ant-layout-header {
|
||||
// background-image: url('~@/assets/img/header_bg.png') !important;
|
||||
// background-size: 100% 100%;
|
||||
background: transparent !important;
|
||||
height: 130px !important;
|
||||
}
|
||||
.header-nowTime{
|
||||
background-image: url('~@/assets/img/header_bg.png') !important;
|
||||
background-size: 100% 66px;
|
||||
background-repeat: no-repeat !important;
|
||||
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 700;
|
||||
height:70px;
|
||||
img{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.signdiv,
|
||||
|
|
@ -260,9 +273,6 @@ ul li {
|
|||
color : @tableColor !important;
|
||||
}
|
||||
|
||||
.table-page-search-wrapper {
|
||||
padding: 30px 10px 10px 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -296,6 +306,12 @@ ul li {
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected,
|
||||
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
|
||||
background-color: transparent !important;
|
||||
background: linear-gradient(180deg, transparent 5px,#11B3FF 5px,#1E30A2 45px,transparent 45px);
|
||||
}
|
||||
|
||||
.ant-radio-inner,
|
||||
.ant-checkbox-inner {
|
||||
border-color: @bordercolor !important;
|
||||
|
|
@ -685,7 +701,7 @@ textarea,
|
|||
.ant-table-content .ant-table-thead>tr>th,
|
||||
.ant-table-content .ant-table-tbody>tr>td {
|
||||
border-right : 0 !important;
|
||||
border-bottom: 1px solid #31343d !important;
|
||||
border-bottom: 0 solid #31343d !important;
|
||||
line-height : 22px;
|
||||
background: @tableheadBgColor;
|
||||
}
|
||||
|
|
@ -815,15 +831,11 @@ textarea,
|
|||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.ant-menu-item>a>span,
|
||||
.ant-menu-submenu {
|
||||
color: rgb(28,204,253) !important;
|
||||
}
|
||||
|
||||
.ant-menu-item-selected>a>span,
|
||||
.ant-menu-item-active>a>span,
|
||||
.ant-menu-submenu:hover,
|
||||
.ant-menu-submenu-selected .ant-menu-submenu-title,
|
||||
.ant-menu-submenu-title,
|
||||
.ant-menu-submenu-title:hover {
|
||||
color: @headercolor !important;
|
||||
}
|
||||
|
|
@ -838,18 +850,34 @@ textarea,
|
|||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ant-menu{
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px dotted #00CBFF;
|
||||
}
|
||||
.ant-menu-submenu, .ant-menu-submenu-inline
|
||||
{
|
||||
transition: 0 !important;
|
||||
|
||||
}
|
||||
.ant-menu-vertical .ant-menu-item,
|
||||
.ant-menu-submenu.ant-menu-submenu-vertical {
|
||||
background-image: url('~@/assets/img/MenuSecDefault.png');
|
||||
// background-image: url('~@/assets/img/MenuSecDefault.png');
|
||||
background-size: 100% 100%;
|
||||
width : 165px !important;
|
||||
height : 40px !important;
|
||||
width : 263px !important;
|
||||
height : 50px !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-top : -1px !important;
|
||||
line-height: 50px !important;
|
||||
text-align: left;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
padding: 0 0 0 10px !important;
|
||||
padding: 0 0 0 20px !important;
|
||||
border-top: 1px dotted #00CBFF;
|
||||
}
|
||||
.ant-menu-item > a > span
|
||||
{
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ant-menu-vertical .ant-menu-submenu-title {
|
||||
|
|
@ -860,7 +888,7 @@ textarea,
|
|||
.ant-menu-submenu-vertical.ant-menu-submenu-open,
|
||||
.ant-menu-vertical .ant-menu-item-selected,
|
||||
.ant-menu-vertical .ant-menu-item-active {
|
||||
background-image: url('~@/assets/img/MenuSecSelect.png');
|
||||
// background-image: url('~@/assets/img/MenuSecSelect.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
|
@ -875,13 +903,13 @@ textarea,
|
|||
}
|
||||
|
||||
.ant-modal-content{
|
||||
background-image: url('~@/assets/img/文件上传.png') !important;
|
||||
// background-image: url('~@/assets/img/文件上传.png') !important;
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
background: transparent !important;
|
||||
background: #1671DB !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.ant-modal-title{
|
||||
|
|
@ -1051,7 +1079,7 @@ tr.ant-table-expanded-row:hover {
|
|||
.ant-table-thead>tr>th,
|
||||
.ant-table-tbody>tr>td {
|
||||
border-right : 0px solid #096A87 !important;
|
||||
border-bottom: 1px solid rgb(10,49,75) !important;
|
||||
border-bottom: 1px solid #1671DB48 !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr>td {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a-layout-sider
|
||||
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
|
||||
width="408px"
|
||||
width="208px"
|
||||
:collapsible="collapsible"
|
||||
v-model="collapsed"
|
||||
:trigger="null">
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
:menu="menus"
|
||||
:theme="theme"
|
||||
@select="onSelect"
|
||||
@updateMenuTitle="onUpdateMenuTitle"
|
||||
:mode="mode"
|
||||
:style="smenuStyle">
|
||||
</s-menu>
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ALayoutSider from "ant-design-vue/es/layout/Sider"
|
||||
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
|
||||
import Logo from '../tools/Logo'
|
||||
import SMenu from './index'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
|
|
@ -68,6 +69,9 @@
|
|||
methods: {
|
||||
onSelect (obj) {
|
||||
this.$emit('menuSelect', obj)
|
||||
},
|
||||
onUpdateMenuTitle (obj) {
|
||||
this.$emit('updateMenuTitle', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -136,41 +140,8 @@
|
|||
background-color: #999999;
|
||||
}
|
||||
}
|
||||
background-color: rgb(48, 65, 86);
|
||||
/deep/ .ant-menu-submenu-title:hover{
|
||||
background-color: #263445;
|
||||
}
|
||||
/deep/ .ant-menu-item:hover{
|
||||
background-color: #263445;
|
||||
}
|
||||
/deep/ .ant-menu-item-selected {
|
||||
background-color: #263445;
|
||||
}
|
||||
/deep/ .ant-menu-item-selected i{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
/deep/ .ant-menu-item-selected span{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub li:hover{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-submenu-title:hover{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected span{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected i{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
||||
|
|
@ -178,7 +149,8 @@
|
|||
|
||||
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
||||
<style lang="less">
|
||||
.ant-menu.ant-menu-root {
|
||||
// 选中首页的时候不显示背景颜色，只应用于左侧菜单
|
||||
.sider .ant-menu.ant-menu-root {
|
||||
& > .ant-menu-item:first-child {
|
||||
background-color: transparent;
|
||||
|
||||
|
|
|
|||
|
|
@ -60,15 +60,13 @@ export default {
|
|||
methods: {
|
||||
// select menu item
|
||||
onOpenChange (openKeys) {
|
||||
console.log('openKeys',openKeys)
|
||||
if(openKeys.length == 1 || this.selectedKeys[0] == '/dashboard/analysis') this.latestOpenKey = openKeys
|
||||
else if(openKeys.length == 2) this.latestOpenKey = [openKeys[1]]
|
||||
// openKeys = this.latestOpenKey
|
||||
console.log('latestOpenKey',this.latestOpenKey)
|
||||
console.log('selectedKeys',this.selectedKeys)
|
||||
openKeys = this.latestOpenKey
|
||||
// 在水平模式下时执行，并且不再执行后续
|
||||
if (this.mode === 'horizontal') {
|
||||
this.openKeys = this.latestOpenKey
|
||||
// this.openKeys = this.latestOpenKey
|
||||
this.openKeys = openKeys
|
||||
return
|
||||
}
|
||||
// 非水平模式时
|
||||
|
|
|
|||
|
|
@ -2,14 +2,11 @@
|
|||
<!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
|
||||
<a-layout-header
|
||||
v-if="!headerBarFixed"
|
||||
:class="[
|
||||
fixedHeader && 'ant-header-fixedHeader',
|
||||
//sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',
|
||||
]"
|
||||
:class="[fixedHeader && 'ant-header-fixedHeader',sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]"
|
||||
:style="{ padding: '0' }"
|
||||
>
|
||||
<div v-if="mode === 'sidemenu'" class="header" :class="theme">
|
||||
<!-- <a-icon
|
||||
<a-icon
|
||||
v-if="device==='mobile'"
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
||||
|
|
@ -18,7 +15,7 @@
|
|||
v-else
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
||||
@click="toggle"/> -->
|
||||
@click="toggle"/>
|
||||
|
||||
<span v-if="device === 'desktop'"></span>
|
||||
<span v-else>Jeecg-Boot</span>
|
||||
|
|
@ -28,12 +25,13 @@
|
|||
<!-- 顶部导航栏模式 -->
|
||||
<div v-else :class="['top-nav-header-index', theme]">
|
||||
<div>
|
||||
<div class="header-index-center header-nowTime" > <img src="~@/assets/img/main-logo.png"/></div>
|
||||
<div class="header-index-center header-nowTime" > <img src="~@/assets/img/main-logo.png"/>末端数据接入处理系统</div>
|
||||
<div class="header-index-center" >
|
||||
<div class="header-index-wide">
|
||||
<div class="header-index-center" :style="topMenuStyle.topmenuCenter">
|
||||
<s-menu mode="horizontal" :menu="menus" :theme="theme" :triggerSubMenuAction="triggerSubMenuAction"></s-menu>
|
||||
<s-menu mode="horizontal" :menu="menus" :theme="theme" @triggerSubMenuAction="triggerSubMenuAction" @updateMenuTitle="handleUpdateMenuTitle"></s-menu>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<user-menu class="header-index-right" :theme="theme" />
|
||||
|
|
@ -162,6 +160,11 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
// update-begin-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
||||
handleUpdateMenuTitle(value) {
|
||||
this.$emit('updateMenuTitle', value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -217,14 +220,6 @@ export default {
|
|||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
.header-nowTime {
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 700;
|
||||
height:70px;
|
||||
}
|
||||
.header-index-right{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,8 @@ export default {
|
|||
//this.menus = this.mainRouters.find((item) => item.path === '/').children;
|
||||
// var cc = this.permissionMenuList.shift()
|
||||
this.menus = this.permissionMenuList
|
||||
console.log('顶部菜单',this.permissionMenuList)
|
||||
// console.log('顶部菜单',this.permissionMenuList)
|
||||
this.collapsed=!this.sidebarOpened;
|
||||
// 根据后台配置菜单，重新排序加载路由信息
|
||||
//console.log('----加载菜单逻辑----')
|
||||
//console.log(this.mainRouters)
|
||||
|
|
@ -135,7 +136,6 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
<style lang="less">
|
||||
@import '../../assets/less/Suless.less';
|
||||
body {
|
||||
|
|
@ -148,8 +148,9 @@ body {
|
|||
}
|
||||
.ant-menu-submenu-popup,
|
||||
.ant-menu-submenu-content{
|
||||
left: 50px !important;
|
||||
top: 155px !important;
|
||||
left: 36px !important;
|
||||
top: 170px !important;
|
||||
z-index: 10 !important;
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="page-header">
|
||||
<div class="page-header-index-wide">
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
|
||||
<!-- <router-link v-if="item.name != name" :to="{ path: item.path }">
|
||||
{{ item.meta.title }}
|
||||
</router-link> -->
|
||||
<span v-if="item.meta.title != '首页'">{{ item.meta.title }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div class="breadcrumb">
|
||||
<span>{{ breadList[2].meta.title }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="lefttitle">
|
||||
<span>{{ breadList[1].meta.title }}</span>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="detail">
|
||||
<div class="main" v-if="!$route.meta.hiddenHeaderContent">
|
||||
|
|
@ -90,6 +90,8 @@
|
|||
// item.name !== 'index' && this.breadList.push(item)
|
||||
this.breadList.push(item)
|
||||
})
|
||||
|
||||
console.log(this.breadList)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -101,21 +103,29 @@
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
.page-header {
|
||||
margin: 0;
|
||||
padding: 8px 20px;
|
||||
height:40px;
|
||||
width:calc(100vw - 260px);
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: 260px;
|
||||
background-color:#F1F4F8;
|
||||
border-top:2px solid #2B85D1;
|
||||
z-index: 11;
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 16px;
|
||||
position: absolute;
|
||||
left: 324px;
|
||||
top: 140px;
|
||||
font-size: 18px;
|
||||
color: #186CCC;
|
||||
z-index: 11;
|
||||
background: #E0E0E0;
|
||||
width: calc(100vw - 344px);
|
||||
height: 53px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.lefttitle {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
left: 54px;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.detail {
|
||||
|
|
@ -159,13 +169,16 @@
|
|||
flex: auto;
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.content, .headerContent {
|
||||
|
||||
.content,
|
||||
.headerContent {
|
||||
flex: auto;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
line-height: 22px;
|
||||
|
|
@ -180,17 +193,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra {
|
||||
flex: 0 1 auto;
|
||||
margin-left: 88px;
|
||||
min-width: 242px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-left: 56px;
|
||||
min-width: 266px;
|
||||
flex: 0 1 auto;
|
||||
text-align: right;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -210,7 +226,9 @@
|
|||
flex: 0 1 25%;
|
||||
margin: 0 2% 8px 0;
|
||||
}
|
||||
.content, .headerContent {
|
||||
|
||||
.content,
|
||||
.headerContent {
|
||||
flex: 0 1 70%;
|
||||
|
||||
.link {
|
||||
|
|
@ -223,18 +241,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra {
|
||||
flex: 1 1 auto;
|
||||
margin-left: 0;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-left: unset;
|
||||
min-width: 266px;
|
||||
flex: 0 1 auto;
|
||||
text-align: left;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div :style="!$route.meta.pageHeader ? 'margin-top: 80px;border-top:1px solid rgb(18,45,60);' : null">
|
||||
<div :style="!$route.meta.pageHeader ? 'margin: 0;' : null">
|
||||
<!-- pageHeader , route meta hideHeader:true on hide -->
|
||||
<!-- <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
|
||||
<page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
|
||||
<slot slot="action" name="action"></slot>
|
||||
<slot slot="content" name="headerContent"></slot>
|
||||
<div slot="content" v-if="!this.$slots.headerContent && desc">
|
||||
<!-- <slot slot="content" name="headerContent"></slot> -->
|
||||
<!-- <div slot="content" v-if="!this.$slots.headerContent && desc">
|
||||
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
|
||||
<div class="link">
|
||||
<template v-for="(link, index) in linkList">
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<slot slot="extra" name="extra"></slot>
|
||||
</div> -->
|
||||
<!-- <slot slot="extra" name="extra"></slot>
|
||||
<div slot="pageMenu">
|
||||
<div class="page-menu-search" v-if="search">
|
||||
<a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
|
||||
|
|
@ -25,9 +25,12 @@
|
|||
<a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</page-header>
|
||||
<div class="leftMenu"></div> -->
|
||||
<div class="leftMenu">
|
||||
<!-- <div class="parent"></div> -->
|
||||
<!-- <div class="child" v-for="(item,index) in menuList">{{ item.meta.title }}</div> -->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div :class="['page-header-index-wide']">
|
||||
<slot></slot>
|
||||
|
|
@ -38,11 +41,17 @@
|
|||
|
||||
<script>
|
||||
import PageHeader from './PageHeader'
|
||||
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
name: "LayoutContent",
|
||||
components: {
|
||||
PageHeader
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuList: [],
|
||||
parentTitle:''
|
||||
}
|
||||
},
|
||||
// ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
|
||||
props: {
|
||||
|
|
@ -79,23 +88,78 @@ export default {
|
|||
default: () => { }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
// 主路由
|
||||
mainRouters: (state) => state.permission.addRouters,
|
||||
// 后台菜单
|
||||
permissionMenuList: (state) => state.user.permissionList,
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.initMenuList()
|
||||
},
|
||||
methods: {
|
||||
initMenuList() {
|
||||
|
||||
this.menuList = []
|
||||
this.parentTitle = this.$route.matched[1].meta.title
|
||||
this.permissionMenuList.forEach((item) => {
|
||||
if (item.meta.title == this.parentTitle) this.menuList = item.children
|
||||
})
|
||||
|
||||
console.log(333, this.menuList)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// .leftMenu {
|
||||
// width: 260px;
|
||||
// height: calc(100vh - 64px);
|
||||
// background-color: #00467C;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// }
|
||||
.leftMenu {
|
||||
background-image: url('~@/assets/img/leftMenu.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 288px;
|
||||
height: calc(100vh - 64px);
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 140px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.leftMenu .parent{
|
||||
width: 263px;
|
||||
height: 46px;
|
||||
background: linear-gradient(0deg, #1E30A2, #11B3FF);
|
||||
color:#fff;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
line-height: 46px;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 30px;
|
||||
}
|
||||
.leftMenu .child{
|
||||
height: 60px;
|
||||
background-color: #00467C;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.leftMenu .child.selected{
|
||||
background-color: #2B85D1;
|
||||
}
|
||||
|
||||
.content {
|
||||
// width: calc(100vw - 261px);
|
||||
// position: absolute;
|
||||
// left: 260px;
|
||||
// top: 140px;
|
||||
width: calc(100vw - 344px);
|
||||
height: 913px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
left: 324px;
|
||||
top: 140px;
|
||||
padding: 72px 10px 0 20px;
|
||||
|
||||
.link {
|
||||
margin-top: 16px;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
primaryColor: '#1890FF', // primary color of ant design
|
||||
navTheme: 'dark', // theme for nav menu
|
||||
layout: 'topmenu', // nav menu position: sidemenu or topmenu
|
||||
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
|
||||
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
|
||||
fixedHeader: false, // sticky header
|
||||
fixSiderbar: false, // sticky siderbar
|
||||
autoHideHeader: false, // auto hide header
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
</a-col>
|
||||
<a-col :span="4" class="clickbutton" @click="openlink('/#/datalink/water')">
|
||||
<div class="buttontext">数据导入</div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据导入.png"></div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据接入.png"></div>
|
||||
</a-col>
|
||||
<a-col :span="4" class="clickbutton" @click="openlink('/#/datalink/dblink')">
|
||||
<div class="buttontext">数据接入</div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据接入.png"></div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据导入.png"></div>
|
||||
</a-col>
|
||||
<a-col :span="4" class="clickbutton" @click="openlink('/#/data/statistics')">
|
||||
<div class="buttontext">数据统计</div>
|
||||
|
|
@ -50,7 +50,11 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.analysisBG {
|
||||
background-image: url('~@/assets/img/homebg.png');
|
||||
background-image: url('~@/assets/img/analysisBG.png');
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -20px;
|
||||
width: 1920px;
|
||||
height: 930px;
|
||||
}
|
||||
.buttonBG{
|
||||
margin-top: 12px;
|
||||
|
|
@ -61,7 +65,9 @@ export default {
|
|||
.clickbutton {
|
||||
margin-top: 5%;
|
||||
background-image: url('~@/assets/img/buttonbg.png');
|
||||
height: 484px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
height: 447px;
|
||||
width: 366px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2304,7 +2304,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.analysisBG {
|
||||
background-image: url('~@/assets/img/analysisBG.jpg');
|
||||
background-image: url('~@/assets/img/analysisBG.png');
|
||||
background-position: -10px -128px;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<a-row>
|
||||
<a-col :md="11" style="padding:0 20px;">
|
||||
<a-col :md="11">
|
||||
<div class="linese"></div>
|
||||
<!-- 查询区域 -->
|
||||
<a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px; margin-left: 4px;">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="10" :sm="2">
|
||||
<a-form-item label="标签类型">
|
||||
<a-select placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryRefsParam.tagId" style="width: 180px;">
|
||||
<a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
|
||||
<a-row>
|
||||
<a-col :span="10">
|
||||
<a-form-item label="标签类型" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
|
||||
<a-select placeholder="选择标签类型" option-filter-prop="children" v-model="queryRefsParam.tagId">
|
||||
<a-select-option v-for="d in datatagSources" :key="d.id">
|
||||
{{ d.tagName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="10" :sm="1">
|
||||
<a-form-item label="关键词">
|
||||
<a-col :span="10">
|
||||
<a-form-item label="关键词" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryRefsParam.tableName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
|
@ -27,18 +27,8 @@
|
|||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:calc(100vh - 324px);">
|
||||
<a-table
|
||||
ref="tagtable"
|
||||
size="middle"
|
||||
:loading="tagloading"
|
||||
:row-selection="tagrowSelection"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:scroll="{ x:false,y: tableScrollY }"
|
||||
:columns="tagcolumns"
|
||||
:dataSource="dataRefsSources">
|
||||
<div style="height:calc(100vh - 360px);background: #e6e9f1;">
|
||||
<a-table ref="tagtable" size="middle" :loading="tagloading" :row-selection="tagrowSelection" bordered rowKey="id" :pagination="false" :scroll="{ x: false, y: tableScrollY }" :columns="tagcolumns" :dataSource="dataRefsSources">
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
|
|
@ -52,7 +42,7 @@
|
|||
</a-col>
|
||||
<a-col :md="11" style="padding:0 20px;">
|
||||
<div class="linese"></div>
|
||||
<a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px; margin-left: 4px;">
|
||||
<a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="20" :sm="1">
|
||||
<a-form-item label="关键词">
|
||||
|
|
@ -67,18 +57,8 @@
|
|||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div ref="tableContainer" style="height:calc(100vh - 324px);">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
:row-selection="rowSelection"
|
||||
bordered
|
||||
:loading="loading"
|
||||
:rowKey="getRowKey"
|
||||
:pagination="false"
|
||||
:scroll="{ x:false,y:tableScrollY }"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
<div ref="tableContainer" style="height:calc(100vh - 360px);background: #e6e9f1;">
|
||||
<a-table ref="table" size="middle" :row-selection="rowSelection" bordered :loading="loading" :rowKey="getRowKey" :pagination="false" :scroll="{ x: false, y: tableScrollY }" :columns="columns" :dataSource="dataSource">
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
|
|
@ -90,10 +70,12 @@
|
|||
<script>
|
||||
import store from '@/store/'
|
||||
import { getAction } from '@/api/manage'
|
||||
import { idcTableTagRef,
|
||||
import {
|
||||
idcTableTagRef,
|
||||
getTableTagRefs,
|
||||
getAllTable,
|
||||
idcTableTagRefdelete } from '@/api/idcTableTagRef'
|
||||
idcTableTagRefdelete
|
||||
} from '@/api/idcTableTagRef'
|
||||
import { idcTableTaglist } from '@/api/tag'
|
||||
export default {
|
||||
name: "dataManage",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<a-col :md="14">
|
||||
<div class="linese"></div>
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper" style="background: rgb(18, 44, 65);">
|
||||
<div class="table-page-search-wrapper" style="background: #e6e9f1;padding:10px;">
|
||||
<a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaName" @change="getTables" style="width: 40%;">
|
||||
<a-select-option v-for="d in dataTypedataSources" :key="d.enName">
|
||||
{{ d.cnName }}
|
||||
|
|
@ -11,16 +11,8 @@
|
|||
</a-select>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div ref="tableContainer" style="height:calc(100vh - 347px);background: rgb(18, 44, 65);padding:10px;">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ y: tableScrollY }"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
<div ref="tableContainer" style="height:calc(100vh - 347px);background: #e6e9f1;padding:10px;">
|
||||
<a-table ref="table" size="middle" bordered :pagination="false" :scroll="{ y: tableScrollY }" rowKey="id" :columns="columns" :dataSource="dataSource">
|
||||
<!-- :locale="myLocale"-->
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
|
|
@ -30,9 +22,9 @@
|
|||
</a-col>
|
||||
<a-col :md="10">
|
||||
<div class="linese"></div>
|
||||
<a-card :bordered="false" style="background: rgb(18, 44, 65) !important;">
|
||||
<a-card :bordered="false" style="background: #e6e9f1 !important;">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<div class="table-page-search-wrapper" style="padding:10px;">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="12">
|
||||
|
|
@ -65,7 +57,7 @@
|
|||
<!-- table区域-begin -->
|
||||
<div class="datacleanResult">
|
||||
<div class="progressbg">
|
||||
<div class="title">清洗进度：</div>
|
||||
<div class="title">清洗进度:</div>
|
||||
<a-progress :percent="percent" status="active" class="progress" />
|
||||
</div>
|
||||
<a-list :data-source="contentList" style="padding:10px 20px;">
|
||||
|
|
@ -85,7 +77,8 @@
|
|||
import { getAction } from '@/api/manage'
|
||||
import {
|
||||
dataTypePageList,
|
||||
dataTypeDeleteById } from '@/api/dataType'
|
||||
dataTypeDeleteById
|
||||
} from '@/api/dataType'
|
||||
export default {
|
||||
name: "dataCleansing",
|
||||
components: {
|
||||
|
|
@ -233,35 +226,41 @@
|
|||
/deep/ .ant-table-bordered .ant-table-header>table {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.datacleanResult {
|
||||
height: calc(100vh - 374px);
|
||||
overflow-y: auto;
|
||||
margin: 10px;
|
||||
background: rgb(11,34,52);
|
||||
background: #F1F4FA;
|
||||
}
|
||||
|
||||
.datacleanResult .progressbg {
|
||||
margin: 10px;
|
||||
height: 60px;
|
||||
padding: 20px 10px;
|
||||
background: rgb(17,42,64);
|
||||
background: #D6DAE2;
|
||||
|
||||
}
|
||||
|
||||
.datacleanResult .title {
|
||||
width: 14%;
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
text-align: right;
|
||||
line-height: 20px;
|
||||
color:#fff;
|
||||
color: #363F56;
|
||||
}
|
||||
|
||||
.datacleanResult .progress {
|
||||
width: 86%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.datacleanResult .ant-progress-bg,
|
||||
.datacleanResult .ant-progress-inner {
|
||||
height: 16px !important;
|
||||
}
|
||||
|
||||
.datacleanResult .ant-progress-bg {
|
||||
background: linear-gradient(180deg, rgb(43, 97, 48), rgb(75, 160, 75), rgb(43, 97, 48));
|
||||
}
|
||||
|
|
@ -269,9 +268,9 @@
|
|||
/deep/ .datacleanResult .ant-progress-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.datacleanResult .ant-list-items {
|
||||
border-bottom: 1px dashed rgb(35, 72, 100);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,28 +1,28 @@
|
|||
<template>
|
||||
<div style="margin-top: 10px; margin-left: 10px;">
|
||||
<div style="margin-top: -10px;">
|
||||
<a-row :gutter="20">
|
||||
<a-col :md="12" :sm="1" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
|
||||
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 70px);"></div>
|
||||
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="2" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据编目总量统计</div>
|
||||
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 70px); "></div>
|
||||
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); "></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="3" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
|
||||
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 100%; height: calc(100% - 70px);"></div>
|
||||
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="4" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据编目存储占比统计</div>
|
||||
<div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 100%; height: calc(100% - 70px);"></div>
|
||||
<div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -105,41 +105,41 @@
|
|||
var option = {
|
||||
tooltip: {},
|
||||
grid:{
|
||||
left:'40px',
|
||||
left:'80px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
bottom:'30px'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category' ,
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -164,38 +164,38 @@
|
|||
left:'40px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
bottom:'30px'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category' ,
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="30" style="margin:-80px 0 20px;">
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="20" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :md="4">
|
||||
<a-col :md="4" style="margin-top:-65px; z-index: 12;">
|
||||
<span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
</span>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:calc(100vh - 300px);overflow:hidden;padding: 0 20px;">
|
||||
<div style="height:calc(100vh - 300px);overflow:hidden;">
|
||||
<div class="linese"></div>
|
||||
<a-table
|
||||
ref="table"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div style="margin-left: 10px;">
|
||||
<div>
|
||||
<a-row :gutter=20>
|
||||
<a-col :md="7">
|
||||
|
||||
<div class="linese"></div>
|
||||
<div class="table-page-search-wrapper">
|
||||
<div class="table-page-search-wrapper" style="background:#e6e9f1;padding: 10px;">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="18" :sm="10">
|
||||
|
|
@ -20,15 +19,7 @@
|
|||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
style="height:calc(100vh - 359px);"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
@change="handleTableChange">
|
||||
<a-table ref="table" size="middle" style="height:calc(100vh - 343px);background:#e6e9f1;padding: 10px;" bordered rowKey="id" :columns="columns" :dataSource="dataSource" @change="handleTableChange">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">选中</a>
|
||||
</span>
|
||||
|
|
@ -36,7 +27,7 @@
|
|||
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="17" style="padding-right:20px;">
|
||||
<a-col :md="17" style="padding-right:10px;">
|
||||
|
||||
<div class="linese"></div>
|
||||
<a-row>
|
||||
|
|
@ -93,13 +84,17 @@
|
|||
<div class="linese"></div>
|
||||
<div class="linese"></div>
|
||||
<a-row :gutter="20" >
|
||||
<a-col :md="12" :sm="1" style="height:calc(100vh - 420px);">
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
|
||||
<div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
|
||||
<a-col :md="12" :sm="1" style="height:calc(100vh - 422px);">
|
||||
<div class="echartsTitle">
|
||||
<div class="ecicon"></div>数据清洗差异统计
|
||||
</div>
|
||||
<div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="2" style="height:calc(100vh - 420px);padding-right:20px;">
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
|
||||
<div id="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
|
||||
<a-col :md="12" :sm="2" style="height:calc(100vh - 422px);padding-right:20px;">
|
||||
<div class="echartsTitle">
|
||||
<div class="ecicon"></div>数据类型存储占比统计
|
||||
</div>
|
||||
<div id="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="linese"></div>
|
||||
|
|
@ -109,11 +104,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { shipModelPageList,
|
||||
shipModeldeleteById } from '@/api/ship'
|
||||
import { getDataAnalysis,
|
||||
import {
|
||||
shipModelPageList,
|
||||
shipModeldeleteById
|
||||
} from '@/api/ship'
|
||||
import {
|
||||
getDataAnalysis,
|
||||
taskPageList,
|
||||
getTaskDataTypeAnalysis } from '@/api/task'
|
||||
getTaskDataTypeAnalysis
|
||||
} from '@/api/task'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
import JEllipsis from "@/components/jeecg/JEllipsis";
|
||||
|
|
@ -156,7 +155,6 @@
|
|||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
width:180,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
|
|
@ -236,10 +234,10 @@
|
|||
legend: {},
|
||||
tooltip: {},
|
||||
grid: {
|
||||
left:'40px',
|
||||
left: '50px',
|
||||
right: '20px',
|
||||
top: '20px',
|
||||
bottom:'20px'
|
||||
bottom: '30px'
|
||||
},
|
||||
dataset: {
|
||||
source: this.cleaningVariancesource
|
||||
|
|
@ -247,31 +245,31 @@
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(10,45,67)'
|
||||
color:'#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -315,23 +313,24 @@
|
|||
height: 100px;
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
border: 2px solid rgb(11,72,98);
|
||||
background: #092776;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.quarter-div div {
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.quarter-div .datanum {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.quarter-div .ant-col-8,
|
||||
.quarter-div .ant-col-10
|
||||
{
|
||||
.quarter-div .ant-col-10 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user