侧边菜单栏

public/color.less

@@ -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);

src/assets/less/Suless.less

@@ -1,14 +1,14 @@
 @bordercolor      : rgb(98,133,151);
 @headercolor      : #ffffff;
 @backcolor        : #ffffff;
-@inpuitbordercolor: rgb(45,103,132);
+@inpuitbordercolor: #C3C3C3;
-@inpuitbackcolor  : rgb(4,27,43);
+@inpuitbackcolor  : #C3C3C346;
 @labelDeaultColor : rgb(98,133,151);
 @defaultWhiteColor: rgb(98,133,151);
 @fontfamily       : 'MyCustomFont3', sans-serif;
-@tableheadColor   : #E5E8EB;
+@tableheadColor   : #363F56;
-@tableheadBgColor : linear-gradient(180deg, rgb(20,108,173),rgb(11,57,90));
+@tableheadBgColor : linear-gradient(180deg, #D6DAE2,#B0B6C2);
-@tableColor   : rgb(98,133,151);
+@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;
+  width        : 263px !important;
-  height       : 40px !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 {

src/components/menu/SideMenu.vue

@@ -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;
 

src/components/menu/index.js

@@ -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
+      openKeys = this.latestOpenKey
-      console.log('latestOpenKey',this.latestOpenKey)
-      console.log('selectedKeys',this.selectedKeys)
       // 在水平模式下时执行，并且不再执行后续
       if (this.mode === 'horizontal') {
-        this.openKeys = this.latestOpenKey
+        // this.openKeys = this.latestOpenKey
+        this.openKeys = openKeys
         return
       }
       // 非水平模式时

src/components/page/GlobalHeader.vue

@@ -2,14 +2,11 @@
   <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
   <a-layout-header
     v-if="!headerBarFixed"
-    :class="[
+    :class="[fixedHeader && 'ant-header-fixedHeader',sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]"
-      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;

src/components/page/GlobalLayout.vue

@@ -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;
+  left: 36px !important;
-  top: 155px !important;
+  top: 170px !important;
   z-index: 10 !important;
+  width: 260px;
 }
 </style>

src/components/page/PageHeader.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="page-header">
     <div class="page-header-index-wide">
-      <a-breadcrumb class="breadcrumb">
+      <div class="breadcrumb">
-        <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
+        <span>{{ breadList[2].meta.title }}</span>
-          <!-- <router-link v-if="item.name != name" :to="{ path: item.path }">
+      </div>
-            {{ item.meta.title }}
+
-          </router-link> -->
+
-          <span v-if="item.meta.title != '首页'">{{ item.meta.title }}</span>
+      <!-- <div class="lefttitle">
-        </a-breadcrumb-item>
+        <span>{{ breadList[1].meta.title }}</span>
-      </a-breadcrumb>
+      </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;
+  z-index: 11;
-    padding: 8px 20px;
-    height:40px;
-    width:calc(100vw - 260px);
-    position: absolute;
-    top: 110px;
-    left: 260px;
-    background-color:#F1F4F8;
-    border-top:2px solid #2B85D1;
 
   .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;
         }

src/components/page/PageLayout.vue

@@ -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>
+      <!-- <slot slot="content" name="headerContent"></slot> -->
-      <div slot="content" v-if="!this.$slots.headerContent && desc">
+      <!-- <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>
+      </div> -->
-<slot slot="extra" name="extra"></slot>
+      <!-- <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 {
+.leftMenu {
-//   width: 260px;
+  background-image: url('~@/assets/img/leftMenu.png');
-//   height: calc(100vh - 64px);
+  background-repeat: no-repeat;
-//   background-color: #00467C;
+  width: 288px;
-//   position: absolute;
+  height: calc(100vh - 64px);
-//   left: 0;
+  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);
+  width: calc(100vw - 344px);
-  // position: absolute;
+  height: 913px;
-  // left: 260px;
+  background-color: #ffffff;
-  // top: 140px;
+  position: absolute;
+  left: 324px;
+  top: 140px;
+  padding: 72px 10px 0 20px;
 
   .link {
     margin-top: 16px;

src/defaultSettings.js

@@ -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

src/views/dashboard/Analysis.vue

@@ -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;
 }

src/views/dashboard/Analysis_bak.vue

@@ -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;
 }

src/views/data/dataCataloguing.vue

@@ -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-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
-            <a-row :gutter="24">
+        <a-row>
-            <a-col :md="10" :sm="2">
+          <a-col :span="10">
-                <a-form-item label="标签类型">
+            <a-form-item label="标签类型" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
-                    <a-select  placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryRefsParam.tagId" style="width: 180px;">
+              <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-col :span="10">
-                <a-form-item label="关键词">
+            <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);">
+      <div style="height:calc(100vh - 360px);background: #e6e9f1;">
-            <a-table
+        <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">
-              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);">
+      <div ref="tableContainer" style="height:calc(100vh - 360px);background: #e6e9f1;">
-            <a-table
+        <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">
-              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",

src/views/data/dataCleansing.vue

@@ -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;">
+      <div ref="tableContainer" style="height:calc(100vh - 347px);background: #e6e9f1;padding:10px;">
-          <a-table
+        <a-table ref="table" size="middle" bordered :pagination="false" :scroll="{ y: tableScrollY }" rowKey="id" :columns="columns" :dataSource="dataSource">
-            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>

src/views/data/statistics.vue

@@ -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'
                         }
                     },
                 },

src/views/task/index.vue

@@ -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"

src/views/task/statistics.vue

@@ -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
+                <a-table ref="table" size="middle" style="height:calc(100vh - 343px);background:#e6e9f1;padding: 10px;" bordered rowKey="id" :columns="columns" :dataSource="dataSource" @change="handleTableChange">
-                    ref="table"
-                    size="middle"
-                    style="height:calc(100vh - 359px);"
-                    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);">
+                    <a-col :md="12" :sm="1" style="height:calc(100vh - 422px);">
-                        <div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
+                        <div class="echartsTitle">
-                        <div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
+                            <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;">
+                    <a-col :md="12" :sm="2" style="height:calc(100vh - 422px);padding-right:20px;">
-                        <div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
+                        <div class="echartsTitle">
-                        <div id="totalNumberCatalogues" ref="totalNumberCatalogues"  style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
+                            <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,
+import {
-        shipModeldeleteById } from '@/api/ship'
+    shipModelPageList,
-    import { getDataAnalysis,
+    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>