侧边菜单栏

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">
@@ -41,205 +41,226 @@
 </template>
 
 <script>
-  import Breadcrumb from '@/components/tools/Breadcrumb'
+import Breadcrumb from '@/components/tools/Breadcrumb'
 
-  export default {
+export default {
-    name: "PageHeader",
+  name: "PageHeader",
-    components: {
+  components: {
-      "s-breadcrumb": Breadcrumb
+    "s-breadcrumb": Breadcrumb
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: false
     },
-    props: {
+    breadcrumb: {
-      title: {
+      type: Array,
-        type: String,
+      default: null,
-        default: '',
+      required: false
-        required: false
-      },
-      breadcrumb: {
-        type: Array,
-        default: null,
-        required: false
-      },
-      logo: {
-        type: String,
-        default: '',
-        required: false
-      },
-      avatar: {
-        type: String,
-        default: '',
-        required: false
-      }
     },
-    data() {
+    logo: {
-      return {
+      type: String,
-        name: '',
+      default: '',
-        breadList: [],
+      required: false
-      }
     },
-    created() {
+    avatar: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      breadList: [],
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+
+      this.breadList = []
+      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
+
+      this.name = this.$route.name
+      this.$route.matched.forEach((item) => {
+        // item.name !== 'index' && this.breadList.push(item)
+        this.breadList.push(item)
+      })
+
+      console.log(this.breadList)
+    }
+  },
+  watch: {
+    $route() {
       this.getBreadcrumb()
-    },
-    methods: {
-      getBreadcrumb() {
-
-        this.breadList = []
-        // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
-
-        this.name = this.$route.name
-        this.$route.matched.forEach((item) => {
-          // item.name !== 'index' && this.breadList.push(item)
-          this.breadList.push(item)
-        })
-      }
-    },
-    watch: {
-      $route() {
-        this.getBreadcrumb()
-      }
     }
   }
+}
 </script>
 
 <style lang="less" scoped>
+.page-header {
+  z-index: 11;
 
-
+  .breadcrumb {
-  .page-header {
-    margin: 0;
-    padding: 8px 20px;
-    height:40px;
-    width:calc(100vw - 260px);
     position: absolute;
-    top: 110px;
+    left: 324px;
-    left: 260px;
+    top: 140px;
-    background-color:#F1F4F8;
+    font-size: 18px;
-    border-top:2px solid #2B85D1;
+    color: #186CCC;
-
+    z-index: 11;
-    .breadcrumb {
+    background: #E0E0E0;
-      margin-bottom: 16px;
+    width: calc(100vw - 344px);
-    }
+    height: 53px;
-
+    padding: 10px 20px;
-    .detail {
-      display: flex;
-      /*margin-bottom: 16px;*/
-
-      .avatar {
-        flex: 0 1 72px;
-        margin: 0 24px 8px 0;
-
-        & > span {
-          border-radius: 72px;
-          display: block;
-          width: 72px;
-          height: 72px;
-        }
-      }
-
-      .main {
-        width: 100%;
-        flex: 0 1 auto;
-
-        .row {
-          display: flex;
-          width: 100%;
-
-          .avatar {
-            margin-bottom: 16px;
-          }
-        }
-
-        .title {
-          font-size: 20px;
-          font-weight: 500;
-
-          font-size: 20px;
-          line-height: 28px;
-          font-weight: 500;
-          color: rgba(0,0,0,.85);
-          margin-bottom: 16px;
-          flex: auto;
-
-        }
-        .logo {
-          width: 28px;
-          height: 28px;
-          border-radius: 4px;
-          margin-right: 16px;
-        }
-        .content, .headerContent {
-          flex: auto;
-          color: rgba(0,0,0,.45);
-          line-height: 22px;
-
-          .link {
-            margin-top: 16px;
-            line-height: 24px;
-
-            a {
-              font-size: 14px;
-              margin-right: 32px;
-            }
-          }
-        }
-        .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;
-          }
-        }
-      }
-    }
   }
 
-  .mobile .page-header {
+  .lefttitle {
+    position: absolute;
+    top: 180px;
+    left: 54px;
+    font-size: 18px;
+    color: #ffffff;
+    z-index: 11;
+  }
+
+  .detail {
+    display: flex;
+    /*margin-bottom: 16px;*/
+
+    .avatar {
+      flex: 0 1 72px;
+      margin: 0 24px 8px 0;
+
+      &>span {
+        border-radius: 72px;
+        display: block;
+        width: 72px;
+        height: 72px;
+      }
+    }
 
     .main {
+      width: 100%;
+      flex: 0 1 auto;
 
       .row {
-        flex-wrap: wrap;
+        display: flex;
+        width: 100%;
 
         .avatar {
-          flex: 0 1 25%;
+          margin-bottom: 16px;
-          margin: 0 2% 8px 0;
         }
-        .content, .headerContent {
+      }
-          flex: 0 1 70%;
 
-          .link {
+      .title {
-            margin-top: 16px;
+        font-size: 20px;
-            line-height: 24px;
+        font-weight: 500;
 
-            a {
+        font-size: 20px;
-              font-size: 14px;
+        line-height: 28px;
-              margin-right: 10px;
+        font-weight: 500;
-            }
+        color: rgba(0, 0, 0, .85);
+        margin-bottom: 16px;
+        flex: auto;
+
+      }
+
+      .logo {
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        margin-right: 16px;
+      }
+
+      .content,
+      .headerContent {
+        flex: auto;
+        color: rgba(0, 0, 0, .45);
+        line-height: 22px;
+
+        .link {
+          margin-top: 16px;
+          line-height: 24px;
+
+          a {
+            font-size: 14px;
+            margin-right: 32px;
           }
         }
-        .extra {
+      }
-          flex: 1 1 auto;
+
-          margin-left: 0;
+      .extra {
-          min-width: 0;
+        flex: 0 1 auto;
-          text-align: right;
+        margin-left: 88px;
-        }
+        min-width: 242px;
-        .action {
+        text-align: right;
-          margin-left: unset;
+      }
-          min-width: 266px;
+
-          flex: 0 1 auto;
+      .action {
-          text-align: left;
+        margin-left: 56px;
-          margin-bottom: 12px;
+        min-width: 266px;
-          &:empty {
+        flex: 0 1 auto;
-            display: none;
+        text-align: right;
-          }
+
+        &:empty {
+          display: none;
         }
       }
     }
   }
+}
+
+.mobile .page-header {
+
+  .main {
+
+    .row {
+      flex-wrap: wrap;
+
+      .avatar {
+        flex: 0 1 25%;
+        margin: 0 2% 8px 0;
+      }
+
+      .content,
+      .headerContent {
+        flex: 0 1 70%;
+
+        .link {
+          margin-top: 16px;
+          line-height: 24px;
+
+          a {
+            font-size: 14px;
+            margin-right: 10px;
+          }
+        }
+      }
+
+      .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;
+        }
+      }
+    }
+  }
+}
 </style>

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">
@@ -13,22 +13,25 @@
               <span>{{ link.title }}</span>
             </a>
           </template>
-</div>
+        </div>
-</div>
+      </div> -->
-<slot slot="extra" name="extra"></slot>
+      <!-- <slot slot="extra" name="extra"></slot>
-<div slot="pageMenu">
+      <div slot="pageMenu">
-  <div class="page-menu-search" v-if="search">
+        <div class="page-menu-search" v-if="search">
-    <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
+          <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
-  </div>
+        </div>
-  <div class="page-menu-tabs" v-if="tabs && tabs.items">
+        <div class="page-menu-tabs" v-if="tabs && tabs.items">
-    <a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
+          <a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
-      <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
+            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
-    </a-tabs>
+          </a-tabs>
-  </div>
+        </div>
-</div>
+      </div> -->
-</page-header>
+    </page-header>
-<div class="leftMenu"></div> -->
+    <div class="leftMenu">
-    <div class="content"> 
+      <!-- <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>
       </div>
@@ -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: {
@@ -78,24 +87,79 @@ export default {
       type: Object,
       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,314 +1,296 @@
 <template>
-    <a-row>
+  <a-row>
-      <a-col :md="11" style="padding:0 20px;">
+    <a-col :md="11">
-        <div class="linese"></div>
+      <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">
+                <a-select-option v-for="d in datatagSources" :key="d.id">
-                        {{ d.tagName  }}
+                  {{ d.tagName }}
-                        </a-select-option>
+                </a-select-option>
-                    </a-select>
+              </a-select>
-                </a-form-item>
+            </a-form-item>
+          </a-col>
+          <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>
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="4" :sm="3">
+              <a-button type="primary" style="left: 10px" @click="gettagTables" icon="search">查询</a-button>
             </a-col>
-            <a-col :md="10" :sm="1">
+          </span>
-                <a-form-item label="关键词">
+        </a-row>
-                    <a-input placeholder="请输入搜索关键词" v-model="queryRefsParam.tableName"></a-input>
+      </a-form>
-                </a-form-item>
+      <!-- table区域-begin -->
+      <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>
+    </a-col>
+    <a-col :md="2">
+      <div style="padding-top: 100%; padding-left: 15%;">
+        <a-button type="primary" @click="addtag"> <a-icon type="left" />添加标签 </a-button>
+        <div style="height: 50px;"></div>
+        <a-button type="primary" @click="detag">移除标签<a-icon type="right" /> </a-button>
+      </div>
+    </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;padding:10px; background: #e6e9f1;">
+        <a-row :gutter="24">
+          <a-col :md="20" :sm="1">
+            <a-form-item label="关键词">
+              <a-input placeholder="请输入搜索关键词" v-model="queryParam.tableName"></a-input>
+            </a-form-item>
+          </a-col>
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="4" :sm="3">
+              <a-button type="primary" style="left: 10px" @click="getalltable" icon="search">查询</a-button>
             </a-col>
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+          </span>
-                <a-col :md="4" :sm="3" >
+        </a-row>
-                    <a-button type="primary"  style="left: 10px" @click="gettagTables" icon="search">查询</a-button>
+      </a-form>
-                </a-col>
+      <!-- table区域-begin -->
-            </span>
+      <div ref="tableContainer" style="height:calc(100vh - 360px);background: #e6e9f1;">
-            </a-row>
+        <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-form>
+        </a-table>
-          <!-- table区域-begin -->
+      </div>
-          <div style="height:calc(100vh - 324px);">
+      <div class="linese"></div>
-            <a-table
+    </a-col>
-              ref="tagtable"
+  </a-row>
-              size="middle"
+
-              :loading="tagloading"
+</template>
-              :row-selection="tagrowSelection"
+
-              bordered
+<script>
-              rowKey="id"
+import store from '@/store/'
-              :pagination="false"
+import { getAction } from '@/api/manage'
-              :scroll="{ x:false,y: tableScrollY   }"
+import {
-              :columns="tagcolumns"
+  idcTableTagRef,
-              :dataSource="dataRefsSources">
+  getTableTagRefs,
-            </a-table>
+  getAllTable,
-          </div>
+  idcTableTagRefdelete
-          <div class="linese"></div>
+} from '@/api/idcTableTagRef'
-      </a-col>
+import { idcTableTaglist } from '@/api/tag'
-      <a-col :md="2">
+export default {
-        <div style="padding-top: 100%; padding-left: 15%;">
+  name: "dataManage",
-            <a-button type="primary" @click="addtag"> <a-icon type="left" />添加标签 </a-button>
+  components: {
-            <div style="height: 50px;"></div>
+  },
-            <a-button type="primary" @click="detag">移除标签<a-icon type="right" /> </a-button>
+  data() {
-        </div>
+    return {
-      </a-col>
+      description: '标准库',
-      <a-col :md="11" style="padding:0 20px;">
+      contentList: [],
-        <div class="linese"></div>
+      percent: 0,
-        <a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px; margin-left: 4px;">
+      websock: {},
-            <a-row :gutter="24">
+      queryRefsParam: {
-            <a-col :md="20" :sm="1">
+        tableName: "",
-                <a-form-item label="关键词">
+        tagId: "",
-                    <a-input placeholder="请输入搜索关键词" v-model="queryParam.tableName"></a-input>
+        pageNum: 1,
-                </a-form-item>
+        pageSize: 9999999,
-            </a-col>
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                <a-col :md="4" :sm="3" >
-                    <a-button type="primary"  style="left: 10px" @click="getalltable" icon="search">查询</a-button>
-                </a-col>
-            </span>
-            </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">
-            </a-table>
-          </div>
-          <div class="linese"></div>
-      </a-col>
-    </a-row>
-    
-  </template>
-  
-  <script>
-    import store from '@/store/'
-    import {getAction} from '@/api/manage'
-    import { idcTableTagRef,
-    getTableTagRefs,
-    getAllTable,
-    idcTableTagRefdelete } from '@/api/idcTableTagRef'
-    import { idcTableTaglist } from '@/api/tag'
-    export default {
-      name: "dataManage",
-      components: {
       },
-      data () {
+      queryParam: {
-        return {
+        tableName: "",
-          description: '标准库',
+        tagId: "",
-          contentList:[],
+        pageNum: 1,
-          percent:0,
+        pageSize: 9999999,
-          websock:{},
-          queryRefsParam: {
-            tableName :"",
-            tagId:"",
-            pageNum :1,
-            pageSize:9999999,
-          },
-          queryParam: {
-            tableName :"",
-            tagId:"",
-            pageNum :1,
-            pageSize:9999999,
-          },
-          datatagSources: [],
-          dataRefsSources:[],
-          dataSource:[
-          ],
-          tagloading:false,
-          loading:false,
-          columns: [
-            {
-              title: '表名',
-              align:"left",
-              width: 220,
-              dataIndex: 'tableName',
-            },
-            {
-              title: '报文名',
-              align:"left",
-              dataIndex: 'tableMessName'
-            },
-          ],
-          tagcolumns: [
-            {
-              title: '#',
-              dataIndex: '',
-              key:'id',
-              width: 60,
-              align:"center",
-              customRender:function (t,r,index) {
-                return parseInt(index)+1;
-              }
-            },
-            {
-              title: '表名',
-              align:"left",
-              width: 220,
-              dataIndex: 'tableName',
-            },
-            {
-              title: '报文名',
-              align:"left",
-              dataIndex: 'tableMessName'
-            },
-          ],
-          tagqueryParam: {
-            pageNum :1,
-            pageSize:20,
-            tagName:""
-          },
-          selectedRowKeys: [],
-          tagselectedRowKeys: [],
-          selectedRowData: [],
-          tagselectedRowData: [],
-          tableScrollY: 0,
-        }
       },
-      mounted() { 
+      datatagSources: [],
-          this.getdatatagSources()
+      dataRefsSources: [],
-          this.calculateScrollY();
+      dataSource: [
-      },
+      ],
-      computed: {
+      tagloading: false,
-        getRowKey(record) {
+      loading: false,
-           return `${record.schemaName}_${record.tableName}`
+      columns: [
+        {
+          title: '表名',
+          align: "left",
+          width: 220,
+          dataIndex: 'tableName',
         },
-        rowSelection() {
+        {
-          return {
+          title: '报文名',
-            selectedRowKeys: this.selectedRowKeys,
+          align: "left",
-            onChange: this.handleSelectChange,
+          dataIndex: 'tableMessName'
-            preserveSelectedRowKeys: true,  // 保持选中项key
+        },
-            type: 'checkbox',  // 多选模式
+      ],
-            columnWidth: 60,   // 选择列宽度
+      tagcolumns: [
-            getCheckboxProps: record => ({
+        {
-              // 可以在这里设置禁用条件
+          title: '#',
-              // disabled: record.disabled  
+          dataIndex: '',
-            })
+          key: 'id',
+          width: 60,
+          align: "center",
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1;
           }
         },
-        tagrowSelection() {
+        {
-            return {
+          title: '表名',
-              selectedRowKeys: this.tagselectedRowKeys,
+          align: "left",
-              onChange: this.taghandleSelectChange,
+          width: 220,
-              preserveSelectedRowKeys: true,  // 保持选中项key
+          dataIndex: 'tableName',
-              type: 'checkbox',  // 多选模式
+        },
-              columnWidth: 60,   // 选择列宽度
+        {
-              getCheckboxProps: record => ({
+          title: '报文名',
-                // 可以在这里设置禁用条件
+          align: "left",
-                // disabled: record.disabled  
+          dataIndex: 'tableMessName'
-              })
+        },
-            }
+      ],
-        }
+      tagqueryParam: {
+        pageNum: 1,
+        pageSize: 20,
+        tagName: ""
       },
-      destroyed: function () { 
+      selectedRowKeys: [],
-      },
+      tagselectedRowKeys: [],
-      created () {
+      selectedRowData: [],
-  
+      tagselectedRowData: [],
-      },
+      tableScrollY: 0,
-      methods: {
+    }
-        calculateScrollY() {
+  },
-          // 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
+  mounted() {
-          const container = this.$refs.tableContainer;
+    this.getdatatagSources()
-          const paginationHeight = 64; // 根据实际分页栏高度调整
+    this.calculateScrollY();
-          this.tableScrollY = container.clientHeight - paginationHeight;
+  },
-        },
+  computed: {
-        handleSelectChange(selectedRowKeys,row) {
+    getRowKey(record) {
-          this.selectedRowKeys = selectedRowKeys
+      return `${record.schemaName}_${record.tableName}`
-          this.selectedRowData = row
+    },
-        },
+    rowSelection() {
-        taghandleSelectChange(selectedRowKeys,row) {
+      return {
-          this.tagselectedRowKeys = selectedRowKeys
+        selectedRowKeys: this.selectedRowKeys,
-          this.tagselectedRowData = row
+        onChange: this.handleSelectChange,
-        },
+        preserveSelectedRowKeys: true,  // 保持选中项key
-        gattable(){
+        type: 'checkbox',  // 多选模式
-          this.getalltable();
+        columnWidth: 60,   // 选择列宽度
-          this.gettagTables();
+        getCheckboxProps: record => ({
-        },
+          // 可以在这里设置禁用条件
-        getdatatagSources(){
+          // disabled: record.disabled  
-          idcTableTaglist(this.tagqueryParam).then((res) => {
+        })
-              if (res.success) {
+      }
-                  this.datatagSources = res.result.records;
+    },
-                  this.queryRefsParam.tagId = res.result.records[0].id;
+    tagrowSelection() {
-                  this.gattable();
+      return {
-              } else {
+        selectedRowKeys: this.tagselectedRowKeys,
-                  this.$message.warning(res.message);
+        onChange: this.taghandleSelectChange,
-              }
+        preserveSelectedRowKeys: true,  // 保持选中项key
-          });
+        type: 'checkbox',  // 多选模式
-        },
+        columnWidth: 60,   // 选择列宽度
-        dataAdd(){
+        getCheckboxProps: record => ({
-          getAction("/dataSpecial/special").then((res) => {
+          // 可以在这里设置禁用条件
-              if (res.success) {
+          // disabled: record.disabled  
-                  this.$message.success(res.message);
+        })
-              }
-          });
-        },
-
-        addtag(){
-          var that = this;
-          this.selectedRowData.forEach(item => { 
-            idcTableTagRef({
-              "tagId": that.queryParam.tagId, 
-              "tableName": item.tableName, 
-              "schemaName": item.schemaName
-            }).then((res) => {
-              if (res.success) {
-                that.gattable();
-              } else {
-                that.$message.warning(res.message);
-              }
-            });
-          })
-          this.selectedRowData = [];
-          this.selectedRowKeys = [];
-        },
-        detag(){
-          var that = this;
-          this.tagselectedRowKeys.forEach(item => {
-            idcTableTagRefdelete({id: item}).then((res) => {
-              if (res.success) {
-                that.gattable();
-              } else {
-                that.$message.warning(res.message);
-              }
-            });
-          });
-          this.tagselectedRowKeys = [];
-          this.tagselectedRowData = [];
-        },
-        getalltable(){
-          this.queryParam.tagId  = this.queryRefsParam.tagId 
-          this.loading = true;
-          getAllTable(this.queryParam).then((res) => {
-              if (res.success) {
-                  this.dataSource = res.result;
-              } else {
-                  this.$message.warning(res.message);
-              }
-              this.loading = false;
-          });
-        },
-        gettagTables(){
-          this.tagloading = true;
-          getTableTagRefs(this.queryRefsParam).then((res) => {
-              if (res.success) {
-                  this.dataRefsSources = res.result.records;
-              } else {
-                  this.$message.warning(res.message);
-              }
-              this.tagloading = false;
-          });
-        },
       }
     }
-  </script>
+  },
-  <style scoped>
+  destroyed: function () {
-    /deep/ .ant-table-bordered .ant-table-header > table {
+  },
-      border: none !important;
+  created() {
-    }
+
-  </style>
+  },
+  methods: {
+    calculateScrollY() {
+      // 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
+      const container = this.$refs.tableContainer;
+      const paginationHeight = 64; // 根据实际分页栏高度调整
+      this.tableScrollY = container.clientHeight - paginationHeight;
+    },
+    handleSelectChange(selectedRowKeys, row) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRowData = row
+    },
+    taghandleSelectChange(selectedRowKeys, row) {
+      this.tagselectedRowKeys = selectedRowKeys
+      this.tagselectedRowData = row
+    },
+    gattable() {
+      this.getalltable();
+      this.gettagTables();
+    },
+    getdatatagSources() {
+      idcTableTaglist(this.tagqueryParam).then((res) => {
+        if (res.success) {
+          this.datatagSources = res.result.records;
+          this.queryRefsParam.tagId = res.result.records[0].id;
+          this.gattable();
+        } else {
+          this.$message.warning(res.message);
+        }
+      });
+    },
+    dataAdd() {
+      getAction("/dataSpecial/special").then((res) => {
+        if (res.success) {
+          this.$message.success(res.message);
+        }
+      });
+    },
+
+    addtag() {
+      var that = this;
+      this.selectedRowData.forEach(item => {
+        idcTableTagRef({
+          "tagId": that.queryParam.tagId,
+          "tableName": item.tableName,
+          "schemaName": item.schemaName
+        }).then((res) => {
+          if (res.success) {
+            that.gattable();
+          } else {
+            that.$message.warning(res.message);
+          }
+        });
+      })
+      this.selectedRowData = [];
+      this.selectedRowKeys = [];
+    },
+    detag() {
+      var that = this;
+      this.tagselectedRowKeys.forEach(item => {
+        idcTableTagRefdelete({ id: item }).then((res) => {
+          if (res.success) {
+            that.gattable();
+          } else {
+            that.$message.warning(res.message);
+          }
+        });
+      });
+      this.tagselectedRowKeys = [];
+      this.tagselectedRowData = [];
+    },
+    getalltable() {
+      this.queryParam.tagId = this.queryRefsParam.tagId
+      this.loading = true;
+      getAllTable(this.queryParam).then((res) => {
+        if (res.success) {
+          this.dataSource = res.result;
+        } else {
+          this.$message.warning(res.message);
+        }
+        this.loading = false;
+      });
+    },
+    gettagTables() {
+      this.tagloading = true;
+      getTableTagRefs(this.queryRefsParam).then((res) => {
+        if (res.success) {
+          this.dataRefsSources = res.result.records;
+        } else {
+          this.$message.warning(res.message);
+        }
+        this.tagloading = false;
+      });
+    },
+  }
+}
+</script>
+<style scoped>
+/deep/ .ant-table-bordered .ant-table-header>table {
+  border: none !important;
+}
+</style>

src/views/data/dataCleansing.vue

@@ -1,43 +1,35 @@
 <template>
   <a-row :gutter="30" style="padding: 0 10px;">
-    <a-col :md="14" >
+    <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 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">
+          <a-select-option v-for="d in dataTypedataSources" :key="d.enName">
-              {{ d.cnName }}
+            {{ d.cnName }}
-            </a-select-option>
+          </a-select-option>
-          </a-select>
+        </a-select>
-        </div>
+      </div>
-        <!-- table区域-begin -->
+      <!-- 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"
+          <!--        :locale="myLocale"-->
-            size="middle"
-            bordered
-            :pagination="false"
-            :scroll="{ y: tableScrollY }"
-            rowKey="id"
-            :columns="columns"
-            :dataSource="dataSource">
-    <!--        :locale="myLocale"-->
 
-            <!-- 字符串超长截取省略号显示-->
+          <!-- 字符串超长截取省略号显示-->
-          </a-table>
+        </a-table>
-        </div>
+      </div>
       <div class="linese"></div>
     </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">
                 <a-form-item label="日志类型">
-                  <a-select  placeholder="选择日志类型" option-filter-prop="children" size="large" v-model="queryParam.syncState">
+                  <a-select placeholder="选择日志类型" option-filter-prop="children" size="large" v-model="queryParam.syncState">
                     <a-select-option key="">
                       全部
                     </a-select-option>
@@ -65,13 +57,13 @@
         <!-- 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;">
             <a-list-item slot="renderItem" slot-scope="item">
-                {{ item }}
+              {{ item }}
-              </a-list-item>
+            </a-list-item>
           </a-list>
         </div>
       </a-card>
@@ -81,197 +73,204 @@
 </template>
 
 <script>
-  import store from '@/store/'
+import store from '@/store/'
-  import {getAction} from '@/api/manage'
+import { getAction } from '@/api/manage'
-  import { 
+import {
-    dataTypePageList,
+  dataTypePageList,
-    dataTypeDeleteById } from '@/api/dataType'
+  dataTypeDeleteById
-  export default {
+} from '@/api/dataType'
-    name: "dataCleansing",
+export default {
-    components: {
+  name: "dataCleansing",
+  components: {
+  },
+  data() {
+    return {
+      description: '原始库',
+      contentList: [],
+      percent: 0,
+      websock: {},
+      datatypequeryParam: {
+        schemaName: "",
+        sourceType: 1
+      },
+      queryParam: {
+        pageNum: 1,
+        pageSize: 9999999,
+      },
+      dataTypedataSources: [],
+      dataSource: [
+      ],
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'id',
+          width: 60,
+          align: "id",
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1;
+          }
+        },
+        {
+          title: '表名',
+          align: "center",
+          dataIndex: 'tableName',
+        },
+        {
+          title: '报文名',
+          align: "center",
+          dataIndex: 'tableMessName'
+        },
+        {
+          title: '开始时间',
+          align: "center",
+          dataIndex: 'startTime'
+        },
+        {
+          title: '最后更新时间',
+          align: "center",
+          dataIndex: 'endTime'
+        },
+        {
+          title: '标签类型',
+          align: "center",
+          dataIndex: 'tagNames'
+        },
+      ],
+      tableScrollY: 0,
+    }
+  },
+  mounted() {
+    //初始化websocket
+    this.initWebSocket()
+    this.getselect()
+    this.calculateScrollY();
+  },
+  computed: {
+
+  },
+  destroyed: function () { // 离开页面生命周期函数
+    var userId = store.getters.userInfo.id;
+    this.websock.send("close_" + userId);
+    this.websocketclose();
+  },
+  created() {
+
+  },
+  methods: {
+    calculateScrollY() {
+      // 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
+      const container = this.$refs.tableContainer;
+      const paginationHeight = 64; // 根据实际分页栏高度调整
+      this.tableScrollY = container.clientHeight - paginationHeight;
     },
-    data () {
+    initWebSocket: function () {
-      return {
+      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-        description: '原始库',
+      var userId = store.getters.userInfo.id;
-        contentList:[],
+      var url = window._CONFIG['domianURL'].replace("https://", "ws://").replace("http://", "ws://") + "/websocket/" + userId + "/data_cleaning";
-        percent:0,
+      this.websock = new WebSocket(url);
-        websock:{},
+      this.websock.onopen = this.websocketonopen;
-        datatypequeryParam: {
+      this.websock.onerror = this.websocketonerror;
-          schemaName:"",
+      this.websock.onmessage = this.websocketonmessage;
-          sourceType:1
+      this.websock.onclose = this.websocketclose;
-        },
+    },
-        queryParam: {
+    websocketonopen: function () {
-          pageNum :1,
+      this.contentList.unshift("消息服务连接成功");
-          pageSize:9999999,
+    },
-        },
+    websocketonerror: function (e) {
-        dataTypedataSources: [],
+      this.contentList.unshift("消息服务连接失败" + JSON.stringify(e));
-        dataSource:[
+    },
-        ],
+    websocketonmessage: function (e) {
-        columns: [
+      var data = eval("(" + e.data + ")");
-          {
+      if (data.content.length > 0) {
-            title: '#',
+        this.contentList.unshift(data.content);
-            dataIndex: '',
+      }
-            key:'id',
+      if (data.currProgress != null) {
-            width:60,
+        this.percent = data.currProgress;
-            align:"id",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
-            title: '表名',
-            align:"center",
-            dataIndex: 'tableName',
-          },
-          {
-            title: '报文名',
-            align:"center",
-            dataIndex: 'tableMessName'
-          },
-          {
-            title: '开始时间',
-            align:"center",
-            dataIndex: 'startTime'
-          },
-          {
-            title: '最后更新时间',
-            align:"center",
-            dataIndex: 'endTime'
-          },
-          {
-            title: '标签类型',
-            align:"center",
-            dataIndex: 'tagNames'
-          },
-        ],
-        tableScrollY: 0,
       }
     },
-    mounted() { 
+    websocketclose: function (e) {
-          //初始化websocket
+      console.log("connection closed (" + e + ")");
-        this.initWebSocket()
-        this.getselect()
-        this.calculateScrollY();
     },
-    computed: {
+    dataAdd() {
-      
+      getAction("/dataCleaning/cleaning?taskId=3806ce79-dc28-48a3-9250-c7729e6b3ad4").then((res) => {
-    },
+        if (res.success) {
-    destroyed: function () { // 离开页面生命周期函数
+          this.$message.success(res.message);
-      var userId = store.getters.userInfo.id;
-      this.websock.send("close_"+userId);
-      this.websocketclose();
-    },
-    created () {
-
-    },
-    methods: {
-      calculateScrollY() {
-        // 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
-        const container = this.$refs.tableContainer;
-        const paginationHeight = 64; // 根据实际分页栏高度调整
-        this.tableScrollY = container.clientHeight - paginationHeight;
-      },
-      initWebSocket: function () {
-        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-        var userId = store.getters.userInfo.id;
-        var url = window._CONFIG['domianURL'].replace("https://","ws://").replace("http://","ws://")+"/websocket/"+userId+"/data_cleaning";
-        this.websock = new WebSocket(url);
-        this.websock.onopen = this.websocketonopen;
-        this.websock.onerror = this.websocketonerror;
-        this.websock.onmessage = this.websocketonmessage;
-        this.websock.onclose = this.websocketclose;
-      },
-      websocketonopen: function () {
-        this.contentList.unshift("消息服务连接成功");
-      },
-      websocketonerror: function (e) {
-        this.contentList.unshift("消息服务连接失败"+JSON.stringify(e));
-      },
-      websocketonmessage: function (e) {
-        var data = eval("(" + e.data + ")"); 
-        if(data.content.length >0){
-          this.contentList.unshift(data.content);
         }
-        if(data.currProgress != null){
+      });
-          this.percent = data.currProgress;
+    },
+    getselect() {
+      dataTypePageList(this.queryParam).then((res) => {
+        if (res.success) {
+          this.dataTypedataSources = res.result.rows || res.result;
+          this.datatypequeryParam.schemaName = res.result.rows[0].cnName
+          this.getTables();
+        } else {
+          this.$message.warning(res.message);
         }
-      },
+      });
-      websocketclose: function (e) {
+    },
-        console.log("connection closed (" + e + ")");
+    getTables() {
-      },
+      getAction("/dataManager/getDataManagerInfo", this.datatypequeryParam).then((res) => {
-      dataAdd(){
+        if (res.result) {
-        getAction("/dataCleaning/cleaning?taskId=3806ce79-dc28-48a3-9250-c7729e6b3ad4").then((res) => {
+          this.dataSource = res.result;
-            if (res.success) {
+        } else {
-                this.$message.success(res.message);
+          this.$message.warning(res.message);
-            }
+        }
-        });
+      });
-      },
+    },
-      getselect(){
-        dataTypePageList(this.queryParam).then((res) => {
-            if (res.success) {
-                this.dataTypedataSources = res.result.rows||res.result;
-                this.datatypequeryParam.schemaName = res.result.rows[0].cnName
-                this.getTables();
-            } else {
-                this.$message.warning(res.message);
-            }
-        });
-      },
-      getTables(){
-        getAction("/dataManager/getDataManagerInfo",this.datatypequeryParam).then((res) => {
-            if (res.result) {
-              this.dataSource = res.result;
-            } else {
-                this.$message.warning(res.message);
-            }
-        });
-      },
-    }
   }
+}
 </script>
 <style scoped>
-/deep/ .ant-table-bordered .ant-table-header > table {
+/deep/ .ant-table-bordered .ant-table-header>table {
-      border: none !important;
+  border: none !important;
-    }
-.datacleanResult{
-  height:calc(100vh - 374px);
-  overflow-y:auto;
-  margin: 10px;
-  background: rgb(11,34,52);
 }
-.datacleanResult .progressbg{
+
+.datacleanResult {
+  height: calc(100vh - 374px);
+  overflow-y: auto;
+  margin: 10px;
+  background: #F1F4FA;
+}
+
+.datacleanResult .progressbg {
   margin: 10px;
   height: 60px;
-  padding:20px 10px;
+  padding: 20px 10px;
-  background: rgb(17,42,64);
+  background: #D6DAE2;
-  
+
 }
-.datacleanResult .title{
+
+.datacleanResult .title {
   width: 14%;
   font-size: 16px;
   float: left;
   text-align: right;
   line-height: 20px;
-  color:#fff;
+  color: #363F56;
 }
-.datacleanResult .progress{
+
+.datacleanResult .progress {
   width: 86%;
   float: left;
 }
+
 .datacleanResult .ant-progress-bg,
-.datacleanResult .ant-progress-inner{
+.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));
+.datacleanResult .ant-progress-bg {
+  background: linear-gradient(180deg, rgb(43, 97, 48), rgb(75, 160, 75), rgb(43, 97, 48));
 }
 
-/deep/ .datacleanResult .ant-progress-text{
+/deep/ .datacleanResult .ant-progress-text {
-  color:#fff !important;
+  color: #fff !important;
-}
-.datacleanResult .ant-list-items{
-  border-bottom:1px dashed rgb(35,72,100);
-  color:#fff;
 }
 
+.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,220 +1,218 @@
 <template>
-    <div style="margin-left: 10px;">
+    <div>
         <a-row :gutter=20>
             <a-col :md="7">
-                
+                <div class="linese"></div>
-                 <div class="linese"></div>
+                <div class="table-page-search-wrapper" style="background:#e6e9f1;padding: 10px;">
-                <div class="table-page-search-wrapper">
+                    <a-form layout="inline">
-                <a-form layout="inline">
+                        <a-row :gutter="30">
-                    <a-row :gutter="30">
+                            <a-col :md="18" :sm="10">
-                        <a-col :md="18" :sm="10" >
+                                <a-form-item label="关键词">
-                            <a-form-item label="关键词">
+                                    <a-input placeholder="请输入搜索关键词" v-model="queryParam.name"></a-input>
-                                <a-input placeholder="请输入搜索关键词" v-model="queryParam.name"></a-input>
+                                </a-form-item>
-                            </a-form-item>
+                            </a-col>
-                        </a-col>
+                            <a-col :md="6" :sm="10">
-                        <a-col :md="6" :sm="10" >
+                                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                                    <a-button @click="loadData" type="primary" v-has="'cont:btn'" icon="search">查询</a-button>
-                                <a-button @click="loadData" type="primary" v-has="'cont:btn'" icon="search">查询</a-button>
+                                </span>
-                            </span>
+                            </a-col>
-                        </a-col>
+                        </a-row>
-                    </a-row>
+                    </a-form>
-                </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>
                 </a-table>
-                
+
-            <div class="linese"></div>
+                <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>
                     <div style="margin-left: 10px;">
 
                         <a-col :span="5" class="quarter-div">
-                                <a-col :span="8">
+                            <a-col :span="8">
-                                    <img src="~@/assets/img/icon-结构化数据条数.png" />
+                                <img src="~@/assets/img/icon-结构化数据条数.png" />
-                                </a-col>
+                            </a-col>
-                                <a-col :span="16">
+                            <a-col :span="16">
-                                    <div class="datanum">{{fileNum.totalNumRow}}</div>
+                                <div class="datanum">{{ fileNum.totalNumRow }}</div>
-                                    <div>结构化数据条数</div>
+                                <div>结构化数据条数</div>
-                                </a-col>
+                            </a-col>
                         </a-col>
                         <a-col :span="5" class="quarter-div">
-                                <a-col :span="8">
+                            <a-col :span="8">
-                                    <img src="~@/assets/img/icon非结构化文件大小.png" />
+                                <img src="~@/assets/img/icon非结构化文件大小.png" />
-                                </a-col>
+                            </a-col>
-                                <a-col :span="16">
+                            <a-col :span="16">
-                                    <div class="datanum">{{fileNum.totalFileSize}}GB</div>
+                                <div class="datanum">{{ fileNum.totalFileSize }}GB</div>
-                                    <div>非结构化文件(大小)</div>
+                                <div>非结构化文件(大小)</div>
-                                </a-col>
+                            </a-col>
                         </a-col>
                         <a-col :span="4" class="quarter-div">
-                                <a-col :span="10">
+                            <a-col :span="10">
-                                    <img src="~@/assets/img/icon-表数量.png" />
+                                <img src="~@/assets/img/icon-表数量.png" />
-                                </a-col>
+                            </a-col>
-                                <a-col :span="14">
+                            <a-col :span="14">
-                                    <div class="datanum">{{fileNum.tableCount}}</div>
+                                <div class="datanum">{{ fileNum.tableCount }}</div>
-                                    <div>表数量</div>
+                                <div>表数量</div>
-                                </a-col>
+                            </a-col>
                         </a-col>
                         <a-col :span="4" class="quarter-div">
-                                <a-col :span="10">
+                            <a-col :span="10">
-                                    <img src="~@/assets/img/icon-文件接引数量.png" />
+                                <img src="~@/assets/img/icon-文件接引数量.png" />
-                                </a-col>
+                            </a-col>
-                                <a-col :span="14">
+                            <a-col :span="14">
-                                    <div class="datanum">{{ fileNum.fileLinkCount }}</div>
+                                <div class="datanum">{{ fileNum.fileLinkCount }}</div>
-                                    <div>文件接引数量</div>
+                                <div>文件接引数量</div>
-                                </a-col>
+                            </a-col>
                         </a-col>
                         <a-col :span="4" class="quarter-div">
-                                <a-col :span="10">
+                            <a-col :span="10">
-                                    <img src="~@/assets/img/icon-文档数量.png" />
+                                <img src="~@/assets/img/icon-文档数量.png" />
-                                </a-col>
+                            </a-col>
-                                <a-col :span="14">
+                            <a-col :span="14">
-                                    <div class="datanum">{{ fileNum.docFileCount }}</div>
+                                <div class="datanum">{{ fileNum.docFileCount }}</div>
-                                    <div>文档数量</div>
+                                <div>文档数量</div>
-                                </a-col>
+                            </a-col>
                         </a-col>
                     </div>
                 </a-row>
-                    
+
                 <div class="linese"></div>
                 <div class="linese"></div>
-                <a-row :gutter="20">
+                <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>
             </a-col>
         </a-row>
     </div>
-  </template>
+</template>
-  
-  <script>
-   import { shipModelPageList,
-        shipModeldeleteById } from '@/api/ship'
-    import { getDataAnalysis,
-        taskPageList,
-        getTaskDataTypeAnalysis } from '@/api/task'
-   import { getAction } from '@/api/manage'
 
-   import JEllipsis from "@/components/jeecg/JEllipsis";
+<script>
-   export default {
+import {
-      name: "statistics",
+    shipModelPageList,
-      components: {
+    shipModeldeleteById
+} from '@/api/ship'
+import {
+    getDataAnalysis,
+    taskPageList,
+    getTaskDataTypeAnalysis
+} from '@/api/task'
+import { getAction } from '@/api/manage'
+
+import JEllipsis from "@/components/jeecg/JEllipsis";
+export default {
+    name: "statistics",
+    components: {
         JEllipsis
-      },
+    },
-      data () {
+    data() {
         return {
-          description: '任务统计',
+            description: '任务统计',
-          dataSource: [],
+            dataSource: [],
-          queryParam: {
+            queryParam: {
-            pageNum :1,
+                pageNum: 1,
-            pageSize:20,
+                pageSize: 20,
-            name:""
+                name: ""
-          },
+            },
-          columns: [
+            columns: [
-            {
+                {
-                title: '#',
+                    title: '#',
-                dataIndex: '',
+                    dataIndex: '',
-                key:'id',
+                    key: 'id',
-                width:60,
+                    width: 60,
-                align:"id",
+                    align: "id",
-                customRender:function (t,r,index) {
+                    customRender: function (t, r, index) {
-                return parseInt(index)+1;
+                        return parseInt(index) + 1;
+                    }
+                },
+                {
+                    title: '任务名称',
+                    align: "name",
+                    dataIndex: 'name',
+                },
+                {
+                    title: '结束时间',
+                    align: "endTime",
+                    dataIndex: 'endTime',
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    align: "center",
+                    scopedSlots: { customRender: 'action' },
                 }
+            ],
+            fileNum: {
+                totalNumRow: 0,
+                tableCount: 0,
+                docFileCount: 0,
+                totalFileSize: 0,
+                fileLinkCount: 0
             },
-            {
+            cleaningVariancesource: [],
-                title: '任务名称',
+            totalNumberCataloguesData: []
-                align:"name",
-                dataIndex: 'name',
-            },
-            {
-                title: '结束时间',
-                align:"endTime",
-                dataIndex: 'endTime',
-            },
-            {
-                title: '操作',
-                dataIndex: 'action',
-                align:"center",
-                width:180,
-                scopedSlots: { customRender: 'action' },
-            }
-          ],
-          fileNum:{
-            totalNumRow:0,
-            tableCount:0,
-            docFileCount:0,
-            totalFileSize:0,
-            fileLinkCount:0
-          },
-          cleaningVariancesource:[],
-          totalNumberCataloguesData:[]
         }
-      },
+    },
-      mounted() { 
+    mounted() {
-         this.loadData();
+        this.loadData();
-      },
+    },
-      computed: {
+    computed: {
 
-      },
+    },
-      destroyed: function () { 
+    destroyed: function () {
-      },
+    },
-      created () {
+    created() {
-  
+
-      },
+    },
-      methods: {
+    methods: {
         handleTableChange(pagination, filters, sorter) {
             if (Object.keys(sorter).length > 0) {
-            this.isorter.column = sorter.field;
+                this.isorter.column = sorter.field;
-            this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
+                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
             }
             this.ipagination = pagination;
             this.loadData();
         },
-        handleEdit(value){
+        handleEdit(value) {
-            this.cleaningVariancesource =[];
+            this.cleaningVariancesource = [];
-            getDataAnalysis({taskId:value.id,startDate:value.startTime,endDate:value.endTime}).then((res) => {
+            getDataAnalysis({ taskId: value.id, startDate: value.startTime, endDate: value.endTime }).then((res) => {
                 if (res.success) {
-                   res.result.schemaNames.forEach(row => {
+                    res.result.schemaNames.forEach(row => {
-                    this.cleaningVariancesource.push([row, parseInt(res.result.numRowMap[row]) ])
+                        this.cleaningVariancesource.push([row, parseInt(res.result.numRowMap[row])])
-                   })
+                    })
-                   this.fileNum.totalNumRow = res.result.totalNumRow
+                    this.fileNum.totalNumRow = res.result.totalNumRow
-                   this.fileNum.tableCount = res.result.tableCount
+                    this.fileNum.tableCount = res.result.tableCount
-                   this.fileNum.docFileCount = res.result.docFileCount
+                    this.fileNum.docFileCount = res.result.docFileCount
-                   this.fileNum.totalFileSize = res.result.totalFileSize
+                    this.fileNum.totalFileSize = res.result.totalFileSize
-                   this.fileNum.fileLinkCount = res.result.fileLinkCount
+                    this.fileNum.fileLinkCount = res.result.fileLinkCount
-                   this.getcleaningVariance();
+                    this.getcleaningVariance();
                 } else {
                     this.$message.warning(res.message);
                 }
             });
-            this.totalNumberCataloguesData =[]
+            this.totalNumberCataloguesData = []
-            getTaskDataTypeAnalysis({taskId:value.id,startDate:value.startTime,endDate:value.endTime}).then((res) => {
+            getTaskDataTypeAnalysis({ taskId: value.id, startDate: value.startTime, endDate: value.endTime }).then((res) => {
                 if (res.success) {
-                   res.result.typeName.forEach(row => {
+                    res.result.typeName.forEach(row => {
-                    this.totalNumberCataloguesData.push({ value: parseFloat(res.result.numRowMap[row]), name: row })
+                        this.totalNumberCataloguesData.push({ value: parseFloat(res.result.numRowMap[row]), name: row })
-                   })
+                    })
-                   this.gettotalNumberCatalogues();
+                    this.gettotalNumberCatalogues();
                 } else {
                     this.$message.warning(res.message);
                 }
@@ -223,115 +221,116 @@
         loadData() {
             taskPageList(this.queryParam).then((res) => {
                 if (res.success) {
-                    this.dataSource = res.result.rows||res.result;
+                    this.dataSource = res.result.rows || res.result;
                     this.handleEdit(res.result.rows[0]);
                 } else {
                     this.$message.warning(res.message);
                 }
             });
         },
-        getcleaningVariance(){
+        getcleaningVariance() {
-          var myChart = this.$echarts.init(this.$refs.cleaningVariance);
+            var myChart = this.$echarts.init(this.$refs.cleaningVariance);
-          var option = {
+            var option = {
                 legend: {},
                 tooltip: {},
-                grid:{
+                grid: {
-                    left:'40px',
+                    left: '50px',
-                    right:'20px',
+                    right: '20px',
-                    top:'20px',
+                    top: '20px',
-                    bottom:'20px'
+                    bottom: '30px'
                 },
                 dataset: {
                     source: this.cleaningVariancesource
                 },
-                xAxis: { 
+                xAxis: {
-                    type: 'category', 
+                    type: 'category',
-                    axisLabel:{
+                    axisLabel: {
-                        color: '#fff'
+                        color: '#6C758B'
                     },
-                    axisLine:{
+                    axisLine: {
-                        lineStyle:{
+                        lineStyle: {
-                            color: 'rgb(10,45,67)'
+                            color:'#6C758B'
                         }
                     },
-                    axisLine:{
+                    axisLine: {
-                        lineStyle:{
+                        lineStyle: {
-                            color: 'rgb(10,45,67)'
+                            color: '#6C758B'
                         }
                     },
                 },
                 yAxis: {
-                    axisLabel:{
+                    axisLabel: {
-                        color: '#fff'
+                        color: '#6C758B'
                     },
-                    splitLine:{
+                    splitLine: {
-                        lineStyle:{
+                        lineStyle: {
-                            color: 'rgb(10,45,67)'
+                            color: '#6C758B'
                         }
                     },
-                    axisLine:{
+                    axisLine: {
-                        lineStyle:{
+                        lineStyle: {
-                            color: 'rgb(10,45,67)'
+                            color: '#6C758B'
                         }
                     },
                 },
                 // Declare several bar series, each will be mapped
                 // to a column of dataset.source by default.
-                series: [{ type: 'bar',barMaxWidth: 20, }],
+                series: [{ type: 'bar', barMaxWidth: 20, }],
-                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-            };
+            };
-           myChart.setOption(option);
+            myChart.setOption(option);
-        },
+        },
-        gettotalNumberCatalogues(){
+        gettotalNumberCatalogues() {
-          var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
+            var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
-          var option = {
+            var option = {
-            tooltip: {
+                tooltip: {
-                trigger: 'item'
+                    trigger: 'item'
-            },
+                },
-            series: [
+                series: [
-                {
+                    {
-                name: '占比',
+                        name: '占比',
-                type: 'pie',
+                        type: 'pie',
-                radius: '80%',
+                        radius: '80%',
-                data: this.totalNumberCataloguesData,
+                        data: this.totalNumberCataloguesData,
-                emphasis: {
+                        emphasis: {
-                    itemStyle: {
+                            itemStyle: {
-                    shadowBlur: 10,
+                                shadowBlur: 10,
-                    shadowOffsetX: 0,
+                                shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
+                            }
-                }
+                        }
-                }
+                    }
-            ],
+                ],
-            color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
             };
             myChart.setOption(option);
         },
-      }
     }
-  </script>
+}
-  <style scoped>
+</script>
-    .quarter-div {
+<style scoped>
-        height: 100px;
+.quarter-div {
-        float: left;
+    height: 100px;
-        margin-right: 16px;
+    float: left;
-        border: 2px solid rgb(11,72,98);
+    margin-right: 16px;
-        color: #fff;
+    background: #092776;
-        font-size: 16px;
+    color: #fff;
-        text-align: center;
+    font-size: 16px;
-        padding: 20px 0;
+    text-align: center;
-    }
+    padding: 20px 0;
-     .quarter-div div{
+}
-        text-align: left;
+
-        line-height: 30px;
+.quarter-div div {
-     }
+    text-align: left;
-     .quarter-div .datanum{
+    line-height: 30px;
-        font-size: 26px;
+}
-     }
+
-     
+.quarter-div .datanum {
-    .quarter-div .ant-col-8,
+    font-size: 26px;
-    .quarter-div .ant-col-10
+}
-    {
+
-        text-align: center;
+.quarter-div .ant-col-8,
-    }
+.quarter-div .ant-col-10 {
-  </style>
+    text-align: center;
+}
+</style>