From 5aa3a9bdd9001e53f245efd40b0d39263caa4bfc Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期六, 19 十一月 2022 17:27:53 +0800
Subject: [PATCH] 数据管理页面添加,修改

---
 src/views/datamanage/metadataManage.vue   |  497 ++-
 src/components/login.vue                  |   13 
 src/views/datamanage/dataLoader.vue       |  534 +++++
 src/views/maintenance/mochaitmo.vue       |   84 
 src/router/index.js                       |   12 
 src/views/datamanage/dataUpdata.vue       | 1019 ++++-----
 src/views/datamanage/styleManage.vue      |  215 +
 src/views/datamanage/SpatialData.vue      | 1103 +++++-----
 src/api/api.js                            |   23 
 src/assets/lang/zh.js                     |   32 
 src/views/datamanage/dictionaryManage.vue |  902 ++++----
 src/views/datamanage/dataController.vue   |  213 ++
 src/views/datamanage/versionManage.vue    |  705 +++--
 src/views/datamanage/catalogueManage.vue  |  411 ++-
 src/assets/lang/en.js                     |   28 
 src/views/maintenance/menuSettings.vue    |   37 
 src/components/navMenu.vue                |   63 
 src/views/datamanage/domainManage.vue     |  386 ++-
 18 files changed, 3,710 insertions(+), 2,567 deletions(-)

diff --git a/src/api/api.js b/src/api/api.js
index 18b44c2..70736b7 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -29,17 +29,18 @@
 //瀛楀吀绠$悊鍒楄〃鍒犻櫎
 export function deleteDicts(params) {
   //璇锋眰鍦板潃
-  return request.get('/dict/deleteDicts', { params: params });
+  return request.get('/dict/deletes', { params: params });
 }
 //瀛楀吀绠$悊鍒楄〃缂栬緫
 export function updateDict(params) {
   //璇锋眰鍦板潃
-  return request.post('/dict/updateDict', params);
+  return request.post('/dict/update', params);
 }
 //瀛楀吀绠$悊鏂板
 export function insertDict(params) {
   //璇锋眰鍦板潃
-  return request.post('/dict/insertDict', params);
+  debugger;
+  return request.post('/dict/insert', params);
 }
 
 //瑙掕壊绠$悊鍒楄〃
@@ -440,10 +441,22 @@
   return request.post('/inquiry/uploadShp', params);
 }
 
-//鏁版嵁绠$悊=>鏁版嵁妫�绱�=>鍒楄〃鑾峰彇
-export function dataQuerySelectByPage(params) {
+//鏁版嵁绠$悊=>鏁版嵁妫�绱�=>鏌ヨ鎵�鏈夎〃
+export function dataQuery_selectTabs(params) {
+  return request.get('/dataQuery/selectTabs', { params: params });
+}
+//鏁版嵁绠$悊=>鏁版嵁妫�绱� =>鍒嗛〉鏌ヨ
+export function dataQuery_selectByPage(params) {
   return request.get('/dataQuery/selectByPage', { params: params });
 }
+//鏁版嵁绠$悊=>鏁版嵁妫�绱�=>鏌ヨ鍊煎煙淇℃伅
+export function dataQuery_selectDomains(params) {
+  return request.get('/dataQuery/selectDomains', { params: params });
+}
+//鏁版嵁绠$悊=>鏁版嵁妫�绱�=>鏌ヨ瀛楁淇℃伅
+export function dataQuery_selectFields(params) {
+  return request.get('/dataQuery/selectFields', { params: params });
+}
 
 //鏁版嵁绠$悊=>鏁版嵁妫�绱�=>鏍规嵁ID鏌ヨWKT
 export function dataQuerySelectWktById(params) {
diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js
index ac00e23..4ae9136 100644
--- a/src/assets/lang/en.js
+++ b/src/assets/lang/en.js
@@ -27,13 +27,35 @@
     logout: 'logout',
     NPassword: 'New Password',
     SPassword: 'Confirm Password',
-
     AdminPassword: 'Administrator Password',
+    Warehousin: 'Warehousin',
+    file: 'file',
+    details: 'details',
+    enclosure: 'enclosure',
+    attachinform: 'Attachment information',
+    filePath: 'File Path',
+    fileNme: 'File Name',
+    format: 'format',
+    size: 'size',
   },
   dataManage: {
     dataManage: 'Data Manage',
     catalogueManage: 'catalogueManage',
     dataUpdata: 'dataUpdata',
+    datawarehousing: 'Data warehousing',
+    rangeManage: 'Range management',
+    dataRetrieval: 'data retrieval',
+    dataUpObj: {
+      catalogue: 'Catalogue',
+      company: 'Company',
+      entryTime: 'Entry time',
+      describe: 'Describe',
+      directoryName: 'Directory Name',
+      catalogDescription: 'Catalog Description',
+      catalogRemarks: 'Catalog Remarks',
+      newDirectory: 'New Directory',
+    },
+
     metadataManage: 'metadataManage',
     dataLoading: 'dataLoading',
     SpatialData: 'SpatialData',
@@ -50,6 +72,10 @@
       updateonuser: 'Update Personnel',
       editVersion: 'Modify version information',
       addVersion: 'Add version information',
+      type: 'type',
+      coordSystem: 'Coordinate system',
+      scale: 'Scale',
+      resolpower: 'resolpower',
     },
     dictionaryManage: 'dictionaryManage',
     dictionaryManageObj: {
diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js
index 32e1ea0..4baa5ac 100644
--- a/src/assets/lang/zh.js
+++ b/src/assets/lang/zh.js
@@ -25,15 +25,40 @@
     reset: '閲嶇疆',
     submit: '鎻愪氦',
     logout: '娉ㄩ攢',
-
     NPassword: '鏂板瘑鐮�',
     SPassword: '纭瀵嗙爜',
     AdminPassword: '绠$悊鍛樺瘑鐮�',
+    Warehousin: '鍏ュ簱',
+    file: '鏂囦欢',
+    details: '璇︽儏',
+    enclosure: '闄勪欢',
+
+    attachinform: '闄勪欢淇℃伅',
+    filePath: '鏂囦欢璺緞',
+    fileNme: '鏂囦欢鍚嶇О',
+
+    format: '鏍煎紡',
+    size: '澶у皬',
   },
   dataManage: {
     dataManage: '鏁版嵁绠$悊',
     catalogueManage: '鐩綍绠$悊',
     dataUpdata: '鏁版嵁涓婁紶',
+    datawarehousing: '鏁版嵁鍏ュ簱',
+    rangeManage: '鍊煎煙绠$悊',
+    dataRetrieval: '鏁版嵁妫�绱�',
+
+    dataUpObj: {
+      catalogue: '鐩綍',
+      company: '鍗曚綅',
+      entryTime: '褰曞叆鏃堕棿',
+      describe: '鎻忚堪',
+      directoryName: '鐩綍鍚嶇О',
+      catalogDescription: '鐩綍璇存槑',
+
+      catalogRemarks: '鐩綍澶囨敞',
+      newDirectory: '鏂板鐩綍',
+    },
     metadataManage: '鍏冩暟鎹鐞�',
     dataLoading: '鏁版嵁鍏ュ簱',
     SpatialData: '绌洪棿鏁版嵁绠$悊',
@@ -50,6 +75,11 @@
       updateonuser: '淇敼浜哄憳',
       editVersion: '淇敼鐗堟湰淇℃伅',
       addVersion: '娣诲姞鐗堟湰淇℃伅',
+      type: '绫诲瀷',
+      coordSystem: '鍧愭爣绯荤粺',
+      scale: '姣斾緥灏�',
+
+      resolpower: '鍒嗚鲸鐜�',
     },
     dictionaryManage: '瀛楀吀绠$悊',
     dictionaryManageObj: {
diff --git a/src/components/login.vue b/src/components/login.vue
index 0b35e91..40fcf55 100644
--- a/src/components/login.vue
+++ b/src/components/login.vue
@@ -152,7 +152,7 @@
 </template>
 
 <script>
-// import { login } from '../utils/api'
+import { getPerms } from '../api/api';
 import validCode from './verificationCode.vue';
 import { mapActions } from 'vuex';
 
@@ -214,7 +214,16 @@
           this.loading = true;
           this.login(this.loginForm)
             .then((response) => {
-              this.$router.push('/mochaitmo');
+              getPerms().then((res) => {
+                if (res.code == 200) {
+                  this.$store.commit('getPermsEntity', res.result);
+                  if (res.result.length != 0) {
+                    this.$router.push('/');
+                  }
+                } else {
+                  console.log('error submit!!');
+                }
+              });
 
               this.loading = false;
               //璋冪敤褰曟帴鍙�
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 72dd61a..0d4895a 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -57,7 +57,7 @@
 import { logout } from '@/api/api';
 import { removeToken, getToken } from '@/utils/auth';
 import customElMenu from '../components/customElMenu.vue';
-import { queryMenuTree, getPerms } from '../api/api';
+import { queryMenuTree } from '../api/api';
 import colorChange from '../views/maintenance/colorChange.vue';
 export default {
   name: 'navMenu',
@@ -91,37 +91,43 @@
           label: '鏁版嵁璐ㄦ',
           class: 'm1',
           checkClass: 'm11',
+          url: '',
         },
         {
           label: '鏁版嵁浜ゆ崲',
           class: 'm2',
           checkClass: 'm21',
+          url: '',
         },
         {
           label: '鏁版嵁绠$悊',
           class: 'm3',
           checkClass: 'm31',
+          url: '',
         },
         {
           label: '鏈嶅姟绠$悊',
           class: 'm4',
           checkClass: 'm41',
+          url: '',
         },
         {
           label: '缁煎悎灞曠ず',
           class: 'm5',
           checkClass: 'm51',
+          url: '',
         },
         {
           label: '杩愮淮绠$悊',
           class: 'm6',
           checkClass: 'm61',
+          url: '',
         },
       ],
     };
   },
+  created() {},
   mounted() {
-    this.getUserPerms();
     this.getMenuTree();
   },
   computed: {
@@ -152,29 +158,41 @@
     },
     //榧犳爣绉诲叆鑿滃崟浜嬩欢
     setMenuMove(index, item) {
+      this.$router.push(item.url);
       this.changeSelectStyle = index;
     },
-    getMenuTree() {
+    async getMenuTree() {
       //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
       // queryMaxId().then((res) => {
       //   this.id = res.data;
       // });
-      // 鑾峰彇鐩綍鏍戞暟鎹�
-      queryMenuTree().then((res) => {
-        if (res.code == 200) {
-          if (res.result.length != 0) {
-            let menuLists = res.result.filter((value) => {
-              return value.pid == 1;
-            });
-            // console.log(menuLists);
-            this.menuList = menuLists;
-          } else {
-            alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
-          }
+      //
+
+      const data = await queryMenuTree();
+      var that = this;
+      if (data.code == 200) {
+        if (data.result.length != 0) {
+          let menuLists = data.result.filter((value) => {
+            return value.pid == 1;
+          });
+
+          that.menuList = menuLists;
+          that.setMenuTree(menuLists);
         } else {
-          console.log('鎺ュ彛鎶ラ敊');
+          alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
         }
-      });
+      }
+    },
+    setMenuTree(res) {
+      console.log(res);
+      for (var i = 0; i < res.length; i++) {
+        for (var j = 0; j < this.listMenu.length; j++) {
+          if (this.listMenu[j].label == res[i].cnName) {
+            this.listMenu[j].url = res[i].perms;
+          }
+        }
+      }
+      console.log(this.listMenu);
     },
     treeData(source) {
       let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
@@ -253,11 +271,6 @@
         this.$router.push(index);
       }
     },
-    getUserPerms() {
-      getPerms().then((res) => {
-        if (res.code == 200) this.$store.commit('getPermsEntity', res.result);
-      });
-    },
   },
   watch: {
     $route() {
@@ -287,9 +300,9 @@
   .logo {
     width: 80px;
     height: 80px;
-    margin-left: 30px;
-    margin-top: 33px;
-    background: url('../assets/img/鍥惧眰 34.png') no-repeat 100% 100%;
+    // margin-left: 30px;
+    // margin-top: 33px;
+    // background: url('../assets/img/鍥惧眰 34.png') no-repeat 100% 100%;
   }
   // .rightWrapper {
   //   width: 70%;
diff --git a/src/router/index.js b/src/router/index.js
index 102a8e1..aac88a8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,6 +20,8 @@
 import tokentool from '@/views/maintenance/tokentool.vue'; //token 宸ュ叿
 import mochaitmo from '@/views/maintenance/mochaitmo.vue'; //杩愮淮绠$悊涓婚〉闈�
 //鏁版嵁绠$悊妯″潡
+
+import dataController from '../views/datamanage/dataController.vue';
 import catalogueManage from '../views/datamanage/catalogueManage.vue'; //鏁版嵁绠$悊-鐩綍绠$悊
 import dataUpdata from '../views/datamanage/dataUpdata.vue'; //鏁版嵁绠$悊-鏁版嵁涓婁紶
 import dataLoading from '../views/datamanage/dataLoading.vue'; //鏁版嵁绠$悊-鏁版嵁鍏ュ簱
@@ -75,6 +77,16 @@
         },
       },
       {
+        path: '/dataController',
+        component: dataController,
+        name: 'dataController',
+        meta: {
+          title: '鏁版嵁绠$悊',
+          requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰�
+        },
+      },
+
+      {
         path: '/Synthesis',
         name: 'Synthesis',
         component: Synthesis,
diff --git a/src/views/datamanage/SpatialData.vue b/src/views/datamanage/SpatialData.vue
index da0a00a..8511832 100644
--- a/src/views/datamanage/SpatialData.vue
+++ b/src/views/datamanage/SpatialData.vue
@@ -1,362 +1,219 @@
 <template>
-  <div class="authorityManagement_box">
-    <My-bread :list="['鏁版嵁绠$悊', '绌洪棿鏁版嵁']"></My-bread>
+  <div class="Spatialbox">
+    <My-bread
+      :list="[
+        `${$t('dataManage.dataManage')}`,
+        `${$t('dataManage.dataRetrieval')}`,
+      ]"
+    ></My-bread>
     <el-divider />
-    <div class="searchComp">
-      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
-        <el-form-item label="鍏抽敭瀛�" prop="name">
-          <el-input v-model="ruleForm.name" placeholder="璇疯緭鍏�" />
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            @click="submitForm('ruleForm')"
-            icon="el-icon-search"
-            type="primary"
-            size="small"
-            >鏌ヨ</el-button
-          >
-          <el-button
-          
-            @click="resetForm('ruleForm')"
-            icon="el-icon-refresh"
-            type="info"
-            size="small"
-            >閲嶇疆</el-button
-          >
-          <el-button
-          v-if="btnStatus.delete"
-            @click="DelFormData"
-            icon="el-icon-delete"
-            type="danger"
-            size="small"
-            >鍒犻櫎</el-button
-          >
-          <el-button
-            v-if="!FBtest"
-            @click="testfb()"
-            icon="el-icon-position"
-            type="success"
-            size="small"
-            >鍙戝竷</el-button
-          >
-          <el-button
-            v-else
-            @click="testfb()"
-            icon="el-icon-position"
-            type="success"
-            size="small"
-            >鍙栨秷</el-button
-          >
-        </el-form-item>
-        <el-form-item>
-          <span v-if="FBtest">
-            <i class="dotClass" style="background-color: springgreen"></i>
-          </span>
-          <span v-else>
-            <i class="dotClass" style="background-color: gray"></i>
-          </span>
-        </el-form-item>
-        <el-form-item v-if="FBtest">
-          鍙戝竷鍦板潃锛歨ttp://192.168.20.39/SG/default/streamer.ashx
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="bottom">
-      <div class="leftTree">
+    <div class="spatialContent">
+      <div class="spatial_leftTree">
         <el-tree
-          :data="data"
+          :data="tree"
           :props="defaultProps"
           :default-expanded-keys="[1]"
           node-key="id"
           @node-click="handleNodeClick"
         ></el-tree>
       </div>
-      <div class="rightTable">
-        <div class="table_box">
+      <div class="spatial_rightContent">
+        <el-form ref="ruleForm" :model="ruleForm" :inline="true">
+          <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
+            <el-input v-model="ruleForm.name" :placeholder="$t('common.choose')" />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              @click="submitForm('ruleForm')"
+              icon="el-icon-search"
+              class="primary"
+              size="small"
+              >{{$t('common.iquery')}}</el-button
+            >
+            <el-button
+              @click="resetForm('ruleForm')"
+              icon="el-icon-refresh"
+              type="info"
+              size="small"
+              >{{$t('common.reset')}}</el-button
+            >
+
+            <el-button
+              v-if="btnStatus.download"
+              icon="el-icon-position"
+              type="success"
+              size="small"
+              >{{$t('common.download')}}</el-button
+            >
+          </el-form-item>
+        </el-form>
+        <el-divider class="eldivider" />
+        <div style="height: 85%">
           <el-table
             ref="filterTable"
             :data="tableData"
-            height="99%"
+            height="90%"
             border
             style="width: 100%"
             @selection-change="handleSelectionChange"
           >
             <el-table-column type="selection" width="55" />
-            <el-table-column width="50" type="index" label="搴忓彿" />
-            <el-table-column min-width="150" prop="pipename" label="绠¢亾鍚嶇О" />
+            <el-table-column width="60" type="index" :label="$t('common.index')" />
             <el-table-column
-              min-width="150"
-              v-if="tableType == '鍦虹珯鐐�'"
-              prop="sitename"
-              label="鍦虹珯鍚嶇О"
-            />
-            <el-table-column
-              min-width="150"
-              v-if="tableType == '鍦虹珯鐐�'"
-              prop="type"
-              label="鍦虹珯绫诲瀷"
-            />
-            <el-table-column
-              min-width="150"
-              v-if="tableType == '绠¢亾涓績绾�'"
-              prop="seriesname"
-              label="绔欏垪鍚嶇О"
-            />
-            <el-table-column
-              min-width="50"
-              v-if="tableType == '绠¢亾涓績绾�'"
-              prop="stationvalue"
-              label="绔欏垪閲岀▼"
-            />
-            <el-table-column
-              min-width="50"
-              v-if="tableType == '绠¢亾涓績绾�'"
-              prop="transportm"
-              label="杈撻�佷粙璐�"
-            />
-            <el-table-column
-              min-width="50"
-              v-if="tableType == '绠¢亾涓績绾�'"
-              prop="diameter"
-              label="绠″緞"
-            />
-            <el-table-column
-              min-width="150"
-              v-if="tableType == '鏍囨々'"
-              prop="name"
-              label="鏍囨々鍚嶇О"
-            />
-            <el-table-column
-              min-width="150"
-              v-if="tableType == '鏍囨々'"
-              prop="type"
-              label="鏍囨々绫诲瀷"
-            />
-
-            <el-table-column
-              min-width="70"
-              prop="create_user"
-              label="鍏ュ簱浜哄憳"
-            />
-            <el-table-column
-              min-width="100"
-              prop="create_time"
-              label="鍏ュ簱鏃堕棿"
-            />
-            <el-table-column min-width="80" label="鎿嶄綔">
+              v-for="(item, index) in attributeData"
+              :key="index"
+              :label="item.alias"
+              :prop="item.field"
+              show-overflow-tooltip
+              align="center"
+            ></el-table-column>
+            <el-table-column min-width="80" :label="$t('common.operate')">
               <template slot-scope="scope">
-                <el-link @click="showDetail(scope.$index, scope.row)"
-                  >鏌ョ湅</el-link
+                <el-link class="elLink"
+
+                  @click="showDetail(scope.$index, scope.row)"
+                  >{{$t('common.details')}}</el-link
                 >
-                <el-link
-                  @click="handleEdit(scope.$index, scope.row)"
-                  style="margin-left: 10px"
-                  >淇敼</el-link
+                <el-link class="elLink"
+                  @click="dialogFormVisible = true"
+                  style="margin-left: 20px;  "
+                  >{{$t('common.enclosure')}}</el-link
                 >
               </template>
             </el-table-column>
           </el-table>
-        </div>
-        <div
-          style="margin-top: 20px; margin-left: 200px"
-          class="pagination_box"
-        >
-          <el-pagination
-            v-if="changePag"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 50, 100]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="count"
-          >
-          </el-pagination>
+          <div style="margin-top: 20px" class="pagination_box">
+            <el-pagination
+              v-if="changePag"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="this.listData.pageIndex"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="this.listData.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="count"
+            >
+            </el-pagination>
+          </div>
         </div>
       </div>
     </div>
-    <div class="infoBox" v-show="showinfoBox">
+        <div class="infoBox" v-show="showinfoBox">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>璇︾粏淇℃伅</span>
+          <span>{{$t('common.details')}}</span>
           <div style="float: right; cursor: pointer" @click="closeDetial">
             <i class="el-icon-close"></i>
           </div>
         </div>
         <div class="contentBox">
-          <p>绠¢亾鍚嶇О锛歿{ itemdetail.pipename }}</p>
-          <el-divider></el-divider>
-          <div v-if="tableType == '鍦虹珯鐐�'">
-            <p>鍦虹珯鍚嶇О锛歿{ itemdetail.sitename }}</p>
-            <el-divider></el-divider>
-            <p>鍦虹珯绫诲瀷锛歿{ itemdetail.type }}</p>
-            <el-divider></el-divider>
-          </div>
-          <div v-if="tableType == '绠¢亾涓績绾�'">
-            <p>绔欏垪鍚嶇О锛歿{ itemdetail.seriesname }}</p>
-            <el-divider></el-divider>
-            <p>绔欏垪閲岀▼锛歿{ itemdetail.stationvalue }}</p>
-            <el-divider></el-divider>
-            <p>杈撻�佷粙璐細{{ itemdetail.transportm }}</p>
-            <el-divider></el-divider>
-            <p>绠″緞锛歿{ itemdetail.diameter }}</p>
-            <el-divider></el-divider>
-          </div>
-          <div v-if="tableType == '鏍囨々'">
-            <p>鏍囨々鍚嶇О锛歿{ itemdetail.name }}</p>
-            <el-divider></el-divider>
-            <p>鏍囨々绫诲瀷锛歿{ itemdetail.type }}</p>
-            <el-divider></el-divider>
-          </div>
-          <p>鍏ュ簱浜哄憳锛歿{ itemdetail.create_user }}</p>
-          <el-divider></el-divider>
-          <p>鍏ュ簱鏃堕棿锛歿{ itemdetail.create_time }}</p>
+          <ul>
+            <li v-for="(item, index) in itemdetail">
+              <p>
+                <label> {{ item.label }}:</label>
+                <label class="boxlabel">{{ item.value }}</label>
+              </p>
+              <el-divider></el-divider>
+            </li>
+          </ul>
         </div>
       </el-card>
     </div>
-    <el-dialog title="淇敼璇︽儏" :visible.sync="dialogFormVisible">
-      <el-form :model="upform">
-        <el-form-item label="绠¢亾鍚嶇О" :label-width="formLabelWidth">
-          <el-input v-model="upform.pipename" autocomplete="off"></el-input>
+    <el-dialog :title="$t('common.attachinform')" width="30%" :visible.sync="dialogFormVisible">
+      <el-form :model="formInline" class="demo-form-inline">
+        <el-form-item >
+          <el-input
+            v-model="formInline.file"
+            style="width: 300px; margin-right: 20px"
+            :placeholder="$t('common.choose')"
+            disabled
+          ></el-input>
+          <input
+            name="file1"
+            type="file"
+            id="insertFile"
+            multiple="multiple"
+            style="display: none"
+              @change="insertFile( )"
+          />
+          <el-link  @click="getInsertFile( )" :underline="false"
+            ><i class="el-icon-folder-opened"></i
+          ></el-link>
         </el-form-item>
-        <el-form-item
-          v-if="tableType == '鍦虹珯鐐�'"
-          label="鍦虹珯鍚嶇О"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.sitename" autocomplete="off"></el-input>
+        <el-form-item>
+          <el-row  >
+            <el-col :span="3"> <el-link  class="elLink" :underline="false" >{{$t('common.append')}}</i></el-link></el-col>
+            <el-col :span="3">   <el-link  class="elLink" :underline="false" >{{$t('common.delete')}}</i></el-link></el-col>
+            <el-col :span="3">  <el-link  class="elLink" :underline="false" >{{$t('common.reset')}}</i></el-link></el-col>
+          </el-row>
         </el-form-item>
-        <el-form-item
-          v-if="tableType == '鍦虹珯鐐�'"
-          label="鍦虹珯绫诲瀷"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.type" autocomplete="off"></el-input>
+        <el-form-item>
+ <el-table
+            ref="filterTable"
+            height="99%"
+            border
+            style="width: 100%"
+          >
+          <el-table-column width="60" type="index" :label="$t('common.index')" />
+              <el-table-column  prop="date"
+         :label="$t('common.fileNme')"
+         />
+
+      <el-table-column
+        prop="name"
+        :label="$t('common.filePath')"
+        />
+
+           </el-table>
         </el-form-item>
-        <el-form-item
-          v-if="tableType == '绠¢亾涓績绾�'"
-          label="绔欏垪鍚嶇О"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.seriesname" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="tableType == '绠¢亾涓績绾�'"
-          label="绔欏垪閲岀▼"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.stationvalue" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="tableType == '绠¢亾涓績绾�'"
-          label="杈撻�佷粙璐�"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.transportm" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="tableType == '绠¢亾涓績绾�'"
-          label="绠″緞"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.diameter" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="tableType == '鏍囨々'"
-          label="鏍囨々鍚嶇О"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="tableType == '鏍囨々'"
-          label="鏍囨々绫诲瀷"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.type" autocomplete="off"></el-input>
+        <el-form-item>
+
+<el-row :gutter="20">
+  <el-col :span="12" :offset="8">  <el-button  class="primary" @click="dialogFormVisible = false">纭</el-button>  <el-button type="info"   @click="dialogFormVisible = false">鍙栨秷</el-button></el-col>
+</el-row>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="updateForm">纭� 瀹�</el-button>
-        <el-button @click="dialogFormVisible = false">鍙� 娑�</el-button>
-      </div>
+
     </el-dialog>
   </div>
 </template>
 
 <script>
+import $ from 'jquery';
 import {
-  querySitePointCount,
-  querySitePoint,
-  queryMarkerCount,
-  queryMarker,
-  queryStationSeries,
-  queryStationSeriesCount,
-  UpdateSitePoint,
-  UpdateStationSeries,
-  UpdatgeMarker,
-  dltSitePoint,
-  dltStationSeries,
-  dltMarker,
-} from "../../api/api";
+  dataQuery_selectTabs,
+  dataQuery_selectDomains,
+  dataQuery_selectFields,
+  dataQuery_selectByPage,
+} from '../../api/api';
 
-import catalogueTree from "../../components/catalogueTree.vue";
-import MyBread from "../../components/MyBread.vue";
+import catalogueTree from '../../components/catalogueTree.vue';
+import MyBread from '../../components/MyBread.vue';
 export default {
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
-  name: "dataSearch",
+  name: 'dataSearch',
   components: { MyBread, catalogueTree },
   data() {
     return {
-      data: [
+      formInline: {
+        file: '',
+      },
+      tree: [
         {
-          id: 1,
-          label: "绌洪棿鍏ュ簱鏁版嵁",
-          children: [
-            {
-              label: "鍦虹珯鐐�",
-            },
-            {
-              label: "绠¢亾涓績绾�",
-            },
-            {
-              label: "鏍囨々",
-            },
-          ],
+          tabDesc: '鍩虹鏁版嵁',
+          value: 'BD',
+          children: [],
+        },
+        {
+          tabDesc: '涓氬姟鏁版嵁',
+          value: 'BS',
+          children: [],
         },
       ],
-      FBtest: false,
-      formLabelWidth: "120px",
-      dialogFormVisible: false,
-      upform: {
-        gid: "",
-        pipename: "",
-        sitename: "",
-        type: "",
-        seriesname: "",
-        stationvalue: "",
-        transportm: "",
-        diameter: "",
-        name: "",
-      },
-      tableType: null,
       defaultProps: {
-        children: "children",
-        label: "label",
+        children: 'children',
+        label: 'tabDesc',
       },
-      changePag: true,
-      showinfoBox: false,
-      itemdetail: {},
-      ruleForm: {
-        name: "",
-      },
-      count: 0,
-      pageSize: 10,
-      pageNum: 1,
-      tableData: [],
-      currentPage: 1,
-      searchName: "",
-      multipleSelection: [],
       btnStatus: {
         select: false,
         delete: false,
@@ -365,60 +222,172 @@
         insert: false,
         update: false,
       },
+      tableType: null,
+      ruleForm: {
+        name: null,
+      },
+      FBtest: false,
+      tableData: [],
+      formLabelWidth: '120px',
+      dialogFormVisible: false,
+      upform: {
+        gid: '',
+        pipename: '',
+        sitename: '',
+        type: '',
+        seriesname: '',
+        stationvalue: '',
+        transportm: '',
+        diameter: '',
+        name: '',
+      },
+
+      changePag: true,
+      showinfoBox: false,
+      itemdetail: {},
+
+      tableData: [],
+      attributeData: [],
+      currentPage: 1,
+      searchName: '',
+      multipleSelection: [],
+      filedsLayer: null,
+      count: 0,
+      listData: {
+        pageSize: 10,
+        pageIndex: 1,
+        name: null,
+        filter: null,
+        wkt: null,
+      },
     };
   },
   created() {
     // this.getSPData(10, 1, "");
     // this.getSPCount("");
     this.showPermsBtn();
+    this.getTreeDataAll();
   },
   methods: {
+    //闄勪欢=>鏂囦欢閫夋嫨
+    getInsertFile() {
+      $('#insertFile').click();
+    },
+    insertFile() {
+      var val = document.getElementById('insertFile').files;
+      if (!val || !val.length) return;
+
+      this.formInline.file = val[0].name;
+    },
+    //鑾峰彇鐩綍鏍戞暟鎹�
+    async getTreeDataAll() {
+      const data = await dataQuery_selectTabs();
+      if (data.code != 200) {
+        this.$message.error('鍒楄〃璋冪敤澶辫触');
+      }
+      var option = data.result;
+
+      for (var i in option) {
+        var val_Data = option[i];
+        val_Data.id = '1' + i;
+        if (option[i].ns == 'bd') {
+          this.tree[0].children.push(val_Data);
+        } else {
+          this.tree[1].children.push(val_Data);
+        }
+      }
+    },
+    //鎺堟潈绠$悊
     showPermsBtn() {
       let currentPerms = this.$store.state.currentPerms;
       let permsEntity = this.$store.state.permsEntity;
       permsEntity
         .filter((item) => item.perms == currentPerms)
-        .map((item) => (this.btnStatus[item.tag.substr(1)] = true));
+        .map((item) => {
+          console.log(item);
+          this.btnStatus[item.tag.substr(1)] = true;
+        });
     },
+    //鏍戠偣鍑讳簨浠�
     handleNodeClick(data) {
-      this.closeDetial();
-      this.changePag = false;
-      this.tableData = [];
-      this.currentPage = 1;
-      switch (data.label) {
-        case "绌洪棿鍏ュ簱鏁版嵁":
-          this.tableType = null;
-          // this.$nextTick(() => {
-          //   this.changePag = true;
-          // });
-          break;
-        case "鍦虹珯鐐�":
-          this.tableType = "鍦虹珯鐐�";
-          this.getSPData(10, 1, "");
-          this.getSPCount("");
-          // this.$nextTick(() => {
-          //   this.changePag = true;
-          // });
-          break;
-        case "绠¢亾涓績绾�":
-          this.tableType = "绠¢亾涓績绾�";
-          this.getSSData(10, 1, "");
-          this.getSSCount("");
-          // this.$nextTick(() => {
-          //   this.changePag = true;
-          // });
-          break;
-        case "鏍囨々":
-          this.tableType = "鏍囨々";
-          this.getMData(10, 1, "");
-          this.getMCount("");
-          break;
-      }
-      this.$nextTick(() => {
-        this.changePag = true;
-      });
-    },
+      //鍒ゆ柇鐐瑰嚮鏄惁涓哄瓙鑺傜偣
+      if (data.children != null) return;
+      this.listData.name = data.entity; //瑕佹煡璇㈣〃鏍肩被鍨嬶紱
 
+      this.filedsLayer = this.getCollapseDomFiled(); //鑾峰彇姣忎釜琛ㄥ瓧娈靛悕绉板強闃堝��
+      //鑾峰彇table淇℃伅
+      this.getCollapseTable(this.filedsLayer);
+    },
+    //鑾峰彇琛ㄦ牸淇℃伅
+    async getCollapseTable(res) {
+      res.then((val) => {
+        this.attributeData = val;
+      });
+      if (this.ruleForm.name != null) {
+        this.listData.filter = 'name like ' + this.ruleForm.name;
+      } else {
+        this.listData.filter = null;
+      }
+
+      const data = await dataQuery_selectByPage(this.listData);
+      if (data.code != 200) {
+        this.$message.error('璋冪敤鍒楄〃澶辫触,璇疯仈绯诲伐浣滀汉鍛�!');
+        return;
+      }
+      var res_val = this.attributeData;
+      this.count = data.count;
+      for (var i in data.result) {
+        let val_Data = data.result[i];
+
+        for (var j in res_val) {
+          if (res_val[j].domainNa != null && res_val[j].domainNa != undefined) {
+            val_Data[res_val[j].field] = res_val[j].domainNa;
+          }
+        }
+      }
+      this.tableData = data.result;
+    },
+    //鑾峰彇姣忎釜琛ㄥ瓧娈靛悕绉板強闃堝��
+    async getCollapseDomFiled() {
+      //鏌ヨ瀛楁淇℃伅;
+      const fileds = await dataQuery_selectFields({
+        name: this.listData.name,
+      });
+      if (fileds.code != 200) {
+        this.$message.error('璋冪敤鍒楄〃澶辫触,璇疯仈绯诲伐浣滀汉鍛�!');
+        return;
+      }
+
+      //鏌ヨ闃堝�间俊鎭紱
+      const domains = await dataQuery_selectDomains({
+        name: this.listData.name,
+      });
+      if (domains.code != 200) {
+        this.$message.error('璋冪敤鍒楄〃澶辫触,璇疯仈绯诲伐浣滀汉鍛�!');
+        return;
+      }
+      var data1 = fileds.result;
+      var data2 = domains.result;
+      var std = [];
+      for (var i in data1) {
+        if (data1[i].showtype == 1) {
+          if (data1[i].domainNa != null) {
+            data1[i].domainNa = this.getDomainNaFild(data1[i].domainNa, data2);
+          }
+          std.push(data1[i]);
+        }
+      }
+      return std;
+    },
+    //鍊煎煙瀛楁鍖归厤
+    getDomainNaFild(res, result) {
+      for (var i in result) {
+        if (result[i].domName == res) {
+          return result[i].codeDesc;
+        }
+      }
+      return null;
+    },
     // 璇锋眰鍦虹珯鐐瑰唴瀹�
     getSPData(size, num, name) {
       querySitePoint(size, num, name).then((res) => {
@@ -458,48 +427,30 @@
     },
 
     // 鍏抽敭瀛楁煡璇�
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.searchName = this.ruleForm.name.trim();
-          switch (this.tableType) {
-            case "鍦虹珯鐐�":
-              this.getSPData(10, 1, this.searchName);
-              this.getSPCount(this.searchName);
-              break;
-            case "绠¢亾涓績绾�":
-              this.getSSData(10, 1, this.searchName);
-              this.getSSCount(this.searchName);
-              break;
-            case "鏍囨々":
-              this.getMData(10, 1, this.searchName);
-              this.getMCount(this.searchName);
-              break;
-          }
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
+    submitForm() {
+      this.listData.pageIndex = 1;
+      this.listData.pageSize = 10;
+      //鑾峰彇table淇℃伅
+      this.getCollapseTable(this.filedsLayer);
+    },
+    //鍒嗛〉鐐瑰嚮浜嬩欢
+    handleSizeChange(val) {
+      this.listdata.pageSize = val;
+      this.listdata.pageIndex = 1;
+      //鑾峰彇table淇℃伅
+      this.getCollapseTable(this.filedsLayer);
+    },
+    handleCurrentChange(val) {
+      this.listdata.pageIndex = val;
+      //鑾峰彇table淇℃伅
+      this.getCollapseTable(this.filedsLayer);
     },
     // 閲嶇疆鏌ヨ
     resetForm(formName) {
-      this.searchName = "";
+      this.searchName = '';
       this.$refs[formName].resetFields();
-      switch (this.tableType) {
-        case "鍦虹珯鐐�":
-          this.getSPData(10, 1, "");
-          this.getSPCount("");
-          break;
-        case "绠¢亾涓績绾�":
-          this.getSSData(10, 1, "");
-          this.getSSCount("");
-          break;
-        case "鏍囨々":
-          this.getMData(10, 1, "");
-          this.getMCount("");
-          break;
-      }
+      //鑾峰彇table淇℃伅
+      this.getCollapseTable(this.filedsLayer);
     },
 
     // 鍙戝竷鎸夐挳
@@ -513,9 +464,9 @@
       //     .then(() => {
       const loading = this.$loading({
         lock: true,
-        text: "Loading",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
       });
       setTimeout(() => {
         loading.close();
@@ -527,9 +478,18 @@
     },
     // 鏌ョ湅鐣岄潰
     showDetail(index, row) {
-      // console.log(index, row);
+      console.log(index, row);
+      console.log(this.attributeData);
       this.showinfoBox = true;
-      this.itemdetail = row;
+
+      var std = [];
+      for (var i in this.attributeData) {
+        std.push({
+          label: this.attributeData[i].alias,
+          value: row[this.attributeData[i].field],
+        });
+      }
+      this.itemdetail = std;
     },
     // 鍏抽棴鏌ョ湅
     closeDetial() {
@@ -545,15 +505,15 @@
     // 鎻愪氦淇敼
     updateForm() {
       let params = {};
-      this.$confirm("鏄惁纭畾缂栬緫?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('鏄惁纭畾缂栬緫?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           this.dialogFormVisible = false;
           switch (this.tableType) {
-            case "鍦虹珯鐐�":
+            case '鍦虹珯鐐�':
               params = {
                 gid: this.upform.gid,
                 pipename: this.upform.pipename,
@@ -563,15 +523,15 @@
               UpdateSitePoint(params).then((res) => {
                 if (res.data == 1) {
                   this.$message({
-                    message: "淇敼鎴愬姛",
-                    type: "success",
+                    message: '淇敼鎴愬姛',
+                    type: 'success',
                   });
                 }
-                this.getSPData(10, 1, "");
-                this.getSPCount("");
+                this.getSPData(10, 1, '');
+                this.getSPCount('');
               });
               break;
-            case "绠¢亾涓績绾�":
+            case '绠¢亾涓績绾�':
               params = {
                 gid: this.upform.gid,
                 pipename: this.upform.pipename,
@@ -583,15 +543,15 @@
               UpdateStationSeries(params).then((res) => {
                 if (res.data == 1) {
                   this.$message({
-                    message: "淇敼鎴愬姛",
-                    type: "success",
+                    message: '淇敼鎴愬姛',
+                    type: 'success',
                   });
                 }
-                this.getSSData(10, 1, "");
-                this.getSSCount("");
+                this.getSSData(10, 1, '');
+                this.getSSCount('');
               });
               break;
-            case "鏍囨々":
+            case '鏍囨々':
               params = {
                 gid: this.upform.gid,
                 pipename: this.upform.pipename,
@@ -601,12 +561,12 @@
               UpdatgeMarker(params).then((res) => {
                 if (res.data == 1) {
                   this.$message({
-                    message: "淇敼鎴愬姛",
-                    type: "success",
+                    message: '淇敼鎴愬姛',
+                    type: 'success',
                   });
                 }
-                this.getMData(10, 1, "");
-                this.getMCount("");
+                this.getMData(10, 1, '');
+                this.getMCount('');
               });
               break;
           }
@@ -633,47 +593,47 @@
       for (var i in this.multipleSelection) {
         std.push(this.multipleSelection[i].gid);
       }
-      this.$confirm("纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           switch (this.tableType) {
-            case "鍦虹珯鐐�":
+            case '鍦虹珯鐐�':
               dltSitePoint(std).then((res) => {
                 if (res.data !== 0) {
                   this.$message({
-                    message: "鍒犻櫎鎴愬姛",
-                    type: "success",
+                    message: '鍒犻櫎鎴愬姛',
+                    type: 'success',
                   });
                 }
-                this.getSPData(10, 1, "");
-                this.getSPCount("");
+                this.getSPData(10, 1, '');
+                this.getSPCount('');
               });
               break;
-            case "绠¢亾涓績绾�":
+            case '绠¢亾涓績绾�':
               dltStationSeries(std).then((res) => {
                 if (res.data !== 0) {
                   this.$message({
-                    message: "鍒犻櫎鎴愬姛",
-                    type: "success",
+                    message: '鍒犻櫎鎴愬姛',
+                    type: 'success',
                   });
                 }
-                this.getSSData(10, 1, "");
-                this.getSSCount("");
+                this.getSSData(10, 1, '');
+                this.getSSCount('');
               });
               break;
-            case "鏍囨々":
+            case '鏍囨々':
               dltMarker(std).then((res) => {
                 if (res.data !== 0) {
                   this.$message({
-                    message: "鍒犻櫎鎴愬姛",
-                    type: "success",
+                    message: '鍒犻櫎鎴愬姛',
+                    type: 'success',
                   });
                 }
-                this.getMData(10, 1, "");
-                this.getMCount("");
+                this.getMData(10, 1, '');
+                this.getMCount('');
               });
               break;
           }
@@ -688,168 +648,201 @@
         })
         .catch(() => {});
     },
-    // 鏉℃暟淇敼
-    handleSizeChange(val) {
-      this.pageSize = val;
-      switch (this.tableType) {
-        case "绌洪棿鍏ュ簱鏁版嵁":
-          break;
-        case "鍦虹珯鐐�":
-          this.getSPData(this.pageSize, 1, "");
-          this.getSPCount("");
-
-          break;
-        case "绠¢亾涓績绾�":
-          this.getSSData(this.pageSize, 1, "");
-          this.getSSCount("");
-          break;
-        case "鏍囨々":
-          this.getMData(this.pageSize, 1, "");
-          this.getMCount("");
-          break;
-      }
-    },
-    // 椤垫暟淇敼
-    handleCurrentChange(val) {
-      this.pageNum = val;
-      switch (this.tableType) {
-        case "绌洪棿鍏ュ簱鏁版嵁":
-          break;
-        case "鍦虹珯鐐�":
-          this.getSPData(this.pageSize, this.pageNum, "");
-          this.getSPCount("");
-          break;
-        case "绠¢亾涓績绾�":
-          this.getSSData(this.pageSize, this.pageNum, "");
-          this.getSSCount("");
-          break;
-        case "鏍囨々":
-          this.getMData(this.pageSize, this.pageNum, "");
-          this.getMCount("");
-          break;
-      }
-    },
   },
 };
 </script>
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
-.authorityManagement_box {
-  background: rgb(240, 242, 245);
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  .searchComp {
-    margin: 10px auto;
-    background: #fff;
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    .el-form-item {
-      margin: 5px;
-    }
-    .el-input {
-      width: 467px;
-    }
-  }
-  .bottom {
-    width: 100%;
-    height: 85%;
-    display: flex;
-    .leftTree {
-      width: 344px;
-      background: #f4f8ff;
-      border-radius: 10px;
-      overflow: auto;
-    }
-    .rightTable {
-      height: 100%;
-      width: 77.8%;
-      .table_box {
-        width: 100%;
-        height: 93%;
-        margin: 0 auto;
-        background: #fff;
-        .el-table {
-          height: 100%;
-        }
-        .el-table /deep/ .el-table__header-wrapper tr th {
-          background-color: rgb(255, 255, 255) !important;
-          color: rgb(0, 0, 0);
-        }
-        // 淇敼姣忚鏍峰紡锛�
-        .el-table /deep/ .el-table__row {
-          background-color: rgba(255, 255, 255) !important;
-          color: rgb(0, 0, 0);
-        }
-        .el-table /deep/ .el-table__body tr.current-row > td {
-          background-color: rgb(211, 211, 211) !important;
-        }
-        .el-table /deep/ .el-table__body tr:hover > td {
-          background-color: rgb(211, 211, 211) !important;
-        }
-        // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
-        .el-table /deep/ td,
-        .el-table /deep/ th.is-leaf {
-          border-bottom: 1px solid #eee;
-          border-right: 1px solid #eee;
-        }
-        .el-table /deep/ .el-table__cell {
-          padding: 0;
-        }
-        // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
-        .el-table /deep/ .el-table__header tr,
-        .el-table /deep/ .el-table__header th {
-          height: 40px;
-        }
-        .el-table__body tr,
-        .el-table__body td {
-          height: 40px;
-          padding: 0px;
-        }
-        // 璁剧疆琛ㄦ牸杈规棰滆壊锛�
+.Spatialbox {
+  height: 81%;
+  width: 97%;
+  position: absolute;
 
-        .el-table--border::after,
-        .el-table--group::after {
-          width: 0;
-        }
-        .el-table::before {
-          height: 0;
-        }
-      }
+  box-sizing: border-box;
+  .spatialContent {
+    width: 100%;
+    height: 92%;
+    display: flex;
+    justify-content: space-between;
+
+    .spatial_leftTree {
+      width: 15%;
+      height: 95%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      max-height: 670px;
+      overflow-y: auto;
+    }
+    .spatial_rightContent {
+      width: 80%;
+      height: 95%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      overflow-y: auto;
     }
   }
-  .infoBox {
+  .primary {
+    background: #409eff;
+    border: #409eff;
+    color: white;
+  }
+  .eldivider {
+    margin-top: 0px;
+  }
+  /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+  /deep/ .el-table {
+    background-color: transparent;
+
+    th,
+    td {
+      background-color: transparent;
+    }
+    .el-table__expanded-cell {
+      background-color: transparent !important;
+    }
+
+    // 琛ㄥご鑳屾櫙鑹�
+    th.el-table__cell {
+      background-color: #303030;
+      color: #fff;
+    }
+    tr > td {
+      background-color: #303030;
+      color: #fff;
+    }
+
+    // hover鏁堟灉
+    tr:hover > td {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      // text-align: center;
+    }
+
+    // 婊氬姩鏉″楂�
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      /*婊氬姩鏉″搴�*/
+      height: 5px;
+      /*婊氬姩鏉¢珮搴�*/
+    }
+    /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-track {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+      border-radius: 10px;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
+    }
+  }
+    .infoBox {
     width: 500px;
-    border: 1px solid #eee;
+
     position: absolute;
     z-index: 100;
     top: 15%;
-    right: 25%;
-    background-color: #fff;
+    right: 15%;
+    background-color: #303030;
+    color: white;
     .el-card {
       background-color: transparent;
+         color: white;
       span {
         font-size: 16px;
         font-weight: 600;
+           color: white;
       }
     }
     .contentBox {
       margin: 0 aotu 10px;
       p {
-        // background-color: #bfa;
-        // margin-bottom: 10px;
+   color: white;
         font-size: 14px;
       }
     }
   }
-  .dotClass {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: block;
-    margin-top: 15px;
-    margin-left: 10px; //杩欎釜鐢ㄤ簬鍦嗙偣灞呬腑
+
+  .pagination_box {
+    margin-top: 20px;
+    /deep/.el-input__inner {
+      background-color: transparent !important;
+      border: 1px solid;
+      color: white;
+    }
+    /deep/.el-pagination__total {
+      color: white;
+    }
+    /deep/.el-pagination__jump {
+      color: white;
+    }
+    /deep/.el-pager li.active {
+      color: #409eff;
+    }
+    /deep/.el-pager li {
+      color: white;
+      background: transparent;
+    }
+    /deep/.el-pager li {
+      color: white;
+    }
+    /deep/.btn-prev {
+      background: transparent;
+    }
+    /deep/.btn-next {
+      background: transparent;
+    }
+    /deep/.btn-next i {
+      color: white;
+    }
+    /deep/.btn-prev i {
+      color: white;
+    }
   }
+
+ .elLink{
+    color: white !important;
+  }
+  .el-icon-folder-opened{
+    color: white;
+  }
+
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+    /deep/ .el-dialog {
+    background: #303030;
+  }
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
+  }
+  /deep/.el-dialog__title {
+    color: white;
+  }
+
 }
 </style>
diff --git a/src/views/datamanage/catalogueManage.vue b/src/views/datamanage/catalogueManage.vue
index 8c04871..498dd80 100644
--- a/src/views/datamanage/catalogueManage.vue
+++ b/src/views/datamanage/catalogueManage.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="cataSettings_box">
-    <div class="cataSettings_tree">
-      <My-bread :list="['鏁版嵁绠$悊', '鐩綍绠$悊']"></My-bread>
-      <!-- <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" -->
-      <!-- >淇濆瓨</el-button -->
-      <!-- > -->
-      <el-divider />
-      <div class="cataTreeBox">
+  <div class="cataLogBox">
+    <My-bread
+      :list="[
+        `${$t('dataManage.dataManage')}`,
+        `${$t('dataManage.catalogueManage')}`,
+      ]"
+    ></My-bread>
+    <el-divider />
+    <div class="cataLogContent">
+      <div class="cataLog_leftTree">
         <el-tree
           ref="tree"
           :props="defaultProps"
@@ -40,24 +42,25 @@
           </span>
         </el-tree>
       </div>
-    </div>
-    <div class="itemSettings">
-      <div class="title_box">
-        <h4>璇︾粏淇℃伅</h4>
-      </div>
-      <div class="form_box">
+      <div class="cataLog_rightContent">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">{{
+            $t('dataManage.dictionaryManageObj.particulars')
+          }}</el-breadcrumb-item>
+        </el-breadcrumb>
+        <el-divider />
         <el-form :model="itemdetail" ref="itemdetail" :rules="rules">
-          <!-- <el-form-item label="鐩綍缂栫爜" :label-width="formLabelWidth">
-            <el-input v-model="itemdetail.id" disabled />
-          </el-form-item> -->
           <el-form-item
             prop="name"
-            label="鐩綍鍚嶇О"
+            :label="$t('dataManage.dataUpObj.directoryName')"
             :label-width="formLabelWidth"
           >
             <el-input v-model="itemdetail.name" />
           </el-form-item>
-          <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth">
+          <el-form-item
+            :label="$t('dataManage.dataUpObj.catalogDescription')"
+            :label-width="formLabelWidth"
+          >
             <el-input
               v-model="itemdetail.descr"
               type="textarea"
@@ -65,45 +68,72 @@
               style="height: 100%; overflow: auto"
             />
           </el-form-item>
-          <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth">
+          <el-form-item
+            :label="$t('dataManage.dataUpObj.catalogRemarks')"
+            :label-width="formLabelWidth"
+          >
             <el-input v-model="itemdetail.bak" type="textarea" resize="none" />
           </el-form-item>
           <div class="btnBox">
-            <el-button type="primary" @click="updCata('itemdetail')"
-              >淇濆瓨</el-button
-            >
-            <el-button type="primary" @click="reset('itemdetail')"
-              >鍙栨秷</el-button
-            >
+            <el-button class="primary" @click="updCata('itemdetail')">{{
+              $t('common.preservation')
+            }}</el-button>
+            <el-button type="info" @click="reset">{{
+              $t('common.cancel')
+            }}</el-button>
           </div>
         </el-form>
       </div>
     </div>
-    '
+    <!-- <div class="cataSettings_tree"> -->
 
-    <el-dialog title="鏂板瀛愮洰褰�" :visible.sync="dialogFormVisible">
+    <!-- <div class="cataTreeBox">
+
+      </div> -->
+    <!-- </div> -->
+    <!-- <div class="itemSettings"> -->
+    <!-- <div class="title_box">
+        <h4>璇︾粏淇℃伅</h4>
+      </div> -->
+    <!-- <div class="form_box">
+
+      </div> -->
+    <!-- </div> -->
+    <el-dialog
+      :title="$t('dataManage.dataUpObj.newDirectory')"
+      :visible.sync="dialogFormVisible"
+      :before-close="handleClose"
+    >
       <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
         <el-form-item
-          label="鐩綍鍚嶇О"
+          :label="$t('dataManage.dataUpObj.directoryName')"
           prop="name"
           :label-width="formLabelWidth"
         >
           <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.dataUpObj.catalogDescription')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="ruleForm.descr" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.dataUpObj.catalogRemarks')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="ruleForm.bak" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button>
+        <el-button @click="resetForm('ruleForm')">{{
+          $t('common.cancel')
+        }}</el-button>
         <el-button
-          type="primary"
+          class="primary"
           @click="submitForm('ruleForm')"
           v-loading.fullscreen.lock="fullscreenLoading"
-          >鎻愪氦</el-button
+          >{{ $t('common.preservation') }}</el-button
         >
       </div>
     </el-dialog>
@@ -118,25 +148,25 @@
   updateDirTrees,
   insertDir,
   deleteDir,
-} from "../../api/api";
-import MyBread from "../../components/MyBread.vue";
+} from '../../api/api';
+import MyBread from '../../components/MyBread.vue';
 export default {
-  name: "catalogueManage",
+  name: 'catalogueManage',
   components: {
     MyBread,
   },
   data() {
     let validName = (rule, value, callback) => {
-      if (value === "" || value === null || value === undefined) {
-        return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖"));
+      if (value === '' || value === null || value === undefined) {
+        return callback(new Error('鐩綍鍚嶇О涓嶈兘涓虹┖'));
       } else {
         callback();
       }
     };
     return {
       defaultProps: {
-        children: "children",
-        label: "name",
+        children: 'children',
+        label: 'name',
       },
       fullscreenLoading: false,
       oriData: [], //鍘熷鏍戞暟鎹�
@@ -144,21 +174,21 @@
       old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�)
       newData: [], //鎷栧姩鍚庡師濮嬫暟鎹�
       itemdetail: {},
-      backUpData: "",
-      formLabelWidth: "130px",
-      delChildID: "",
+      backUpData: '',
+      formLabelWidth: '150px',
+      delChildID: '',
       delChildIDs: [],
       dialogFormVisible: false,
       ruleForm: {
         level: null,
         orderNum: null,
         pid: null,
-        name: "",
-        descr: "",
-        bak: "",
+        name: '',
+        descr: '',
+        bak: '',
       },
       rules: {
-        name: [{ required: true, validator: validName, trigger: "blur" }],
+        name: [{ required: true, validator: validName, trigger: 'blur' }],
       },
     };
   },
@@ -177,16 +207,23 @@
           this.newData = res.result;
           this.dirList = this.treeData(res.result);
         } else {
-          console.log("鎺ュ彛鎶ラ敊");
+          console.log('鎺ュ彛鎶ラ敊');
         }
       });
+    },
+    handleClose() {
+      this.$confirm('纭鍏抽棴锛�')
+        .then((_) => {
+          this.resetForm();
+        })
+        .catch((_) => {});
     },
     treeData(source) {
       let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
       return cloneData.filter((father) => {
         // 寰幆鎵�鏈夐」
         let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
-        branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+        branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
         // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛�
         // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
         return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
@@ -200,6 +237,7 @@
     },
     resetForm(formName) {
       this.dialogFormVisible = false;
+      this.ruleForm = {};
       this.$nextTick(() => {
         this.ruleForm = {};
         this.$refs[formName].resetFields();
@@ -216,8 +254,8 @@
                   this.fullscreenLoading = false;
                   if (res.code == 200) {
                     this.$message({
-                      message: "娣诲姞鎴愬姛",
-                      type: "success",
+                      message: '娣诲姞鎴愬姛',
+                      type: 'success',
                     });
                     this.itemdetail = {};
                     this.ruleForm = {};
@@ -228,7 +266,7 @@
               })
               .catch((res) => {
                 this.itemdetail = {};
-                this.$message.error("娣诲姞澶辫触");
+                this.$message.error('娣诲姞澶辫触');
                 this.fullscreenLoading = false;
                 console.log(res);
               });
@@ -240,10 +278,10 @@
       });
     },
     remove(node, data) {
-      this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           //鍏勫紵閲嶆柊鎺掑簭
@@ -265,20 +303,20 @@
               console.log(res);
               if (res[0].code == 200 && res[1].code == 200) {
                 this.$message({
-                  type: "success",
-                  message: "鍒犻櫎鎴愬姛!",
+                  type: 'success',
+                  message: '鍒犻櫎鎴愬姛!',
                 });
                 this.itemdetail = {};
               } else if (res[0].code == 200) {
-                this.$message.error("鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�");
+                this.$message.error('鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�');
               } else if (res[1].code == 200) {
-                this.$message.error("鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛");
+                this.$message.error('鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛');
               } else {
-                this.$message.error("鍒犻櫎澶辫触");
+                this.$message.error('鍒犻櫎澶辫触');
               }
             })
             .catch(() => {
-              this.$message.error("鍒犻櫎澶辫触");
+              this.$message.error('鍒犻櫎澶辫触');
               this.itemdetail = {};
             });
 
@@ -286,7 +324,7 @@
           this.delChildIDs = [];
         })
         .catch(() => {
-          this.$message("宸插彇娑堝垹闄�");
+          this.$message('宸插彇娑堝垹闄�');
         });
       // this.dialogMessage="鏄惁鍒犻櫎"
       // this.dialogFlag = 1;
@@ -328,20 +366,20 @@
       this.old_dirDat = JSON.parse(JSON.stringify(this.dirList)); //灏嗗浠界殑dir閲嶆柊璧嬪��
     },
     handleDrop(draggingNode, dropNode, dropType, ev) {
-      this.$confirm("姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           //鐖惰妭鐐�
-          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
+          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
           // 鐖惰妭鐐逛腑鍏ㄩ儴瀛愯妭鐐�
           let nodeData =
-            dropNode.level == 1 && dropType != "inner" ? data : data.children;
+            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
           //鍙樻洿鑺傜偣
           nodeData.forEach((item, i) => {
-            if (dropType != "inner") {
+            if (dropType != 'inner') {
               if (draggingNode.data.pid === dropNode.data.pid) {
                 item.pid = item.pid;
               } else {
@@ -365,7 +403,7 @@
           this.sendChange();
         })
         .catch(() => {
-          this.$message("宸插彇娑堟洿鏀�");
+          this.$message('宸插彇娑堟洿鏀�');
           this.dirList = this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪��
         });
     },
@@ -376,11 +414,11 @@
             this.getDirTree();
             return;
           } else {
-            alert("璋冩暣澶辫触锛岃閲嶈瘯锛�");
+            alert('璋冩暣澶辫触锛岃閲嶈瘯锛�');
           }
         })
         .catch(() => {
-          alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+          alert('淇敼澶辫触锛岃閲嶈瘯锛�');
         });
     },
     handleNodeClick(data) {
@@ -405,7 +443,7 @@
                 }, 500);
               })
               .catch((res) => {
-                alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+                alert('淇敼澶辫触锛岃閲嶈瘯锛�');
                 this.fullscreenLoading = false;
               });
           } else {
@@ -415,8 +453,9 @@
       });
     },
     reset(formName) {
+      this.itemdetail = {};
       this.$refs[formName].resetFields();
-      if (this.backUpData != "") {
+      if (this.backUpData != '') {
         this.itemdetail = JSON.parse(this.backUpData);
       }
     },
@@ -428,93 +467,147 @@
 </script>
 
 <style lang="less" scoped>
-.cataSettings_box {
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  display: flex;
-  .cataSettings_tree {
-    position: relative;
-    width: 344px;
-    height: 100%;
-    background: rgb(240, 242, 245);
-    padding: 20px;
-    border-radius: 10px;
-    box-sizing: border-box;
-    overflow: auto;
-    .saveBtn {
-      position: absolute;
-      left: 250px;
-      top: 23px;
+.cataLogBox {
+  height: 80%;
+  width: 97%;
+
+  position: absolute;
+  .cataLogContent {
+    width: 100%;
+    height: 92%;
+    display: flex;
+    justify-content: space-between;
+    .cataLog_leftTree {
+      width: 15%;
+      height: 96%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      max-height: 670px;
+      overflow-y: auto;
     }
-    .cataTreeBox {
-      height: 88%;
-      width: 100%;
-      overflow: auto;
-      .el-tree {
-        background: transparent;
-        font-size: 15px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #000000;
-        /deep/ .el-tree-node {
-          padding-top: 10px;
-          // padding-bottom: 10px;
-        }
-        /deep/ .el-tree-node:focus > .el-tree-node__content {
-          background-color: #b9b9b9;
-        }
-        /deep/ .el-tree-node__content:hover {
-          background-color: rgb(153, 153, 153);
-        }
-        .btnBox {
-          margin: 0 10px 0 5px;
-          .el-button + .el-button {
-            margin-left: 5px;
-          }
-        }
-      }
+    .cataLog_rightContent {
+      width: 80%;
+      height: 96%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      max-height: 670px;
+      overflow-y: auto;
     }
   }
-  .itemSettings {
-    width: calc(100% - 344px);
-    border-radius: 10px;
-    background: rgb(240, 242, 245);
-    margin-left: 10px;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    .title_box {
-      background: #fff;
-      padding: 10px;
-      margin-bottom: 24px;
-      display: flex;
-      border-radius: 10px;
-      border: 1px solid rgb(202, 201, 204);
-      box-sizing: border-box;
-    }
-    .form_box {
-      border: 1px solid rgb(202, 201, 204);
-      border-radius: 10px;
-      background: #fff;
-      padding-top: 30px;
-      box-sizing: border-box;
-      width: 100%;
-      .el-input,
-      /deep/ .el-textarea {
-        width: 400px;
-      }
-      .btnBox {
-        margin: 0 270px 20px;
-        width: 200px;
-        display: flex;
-        justify-content: space-between;
-      }
-    }
+  // .cataSettings_tree {
+  //   position: relative;
+  //   width: 344px;
+  //   height: 100%;
+  //   background: rgb(240, 242, 245);
+  //   padding: 20px;
+  //   border-radius: 10px;
+  //   box-sizing: border-box;
+  //   overflow: auto;
+  //   .saveBtn {
+  //     position: absolute;
+  //     left: 250px;
+  //     top: 23px;
+  //   }
+  //   .cataTreeBox {
+  //     height: 88%;
+  //     width: 100%;
+  //     overflow: auto;
+  //     .el-tree {
+  //       background: transparent;
+  //       font-size: 15px;
+  //       font-family: Microsoft YaHei;
+  //       font-weight: 400;
+  //       color: #000000;
+  //       /deep/ .el-tree-node {
+  //         padding-top: 10px;
+  //         // padding-bottom: 10px;
+  //       }
+  //       /deep/ .el-tree-node:focus > .el-tree-node__content {
+  //         background-color: #b9b9b9;
+  //       }
+  //       /deep/ .el-tree-node__content:hover {
+  //         background-color: rgb(153, 153, 153);
+  //       }
+  //       .btnBox {
+  //         margin: 0 10px 0 5px;
+  //         .el-button + .el-button {
+  //           margin-left: 5px;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+  // .itemSettings {
+  //   width: calc(100% - 344px);
+  //   border-radius: 10px;
+  //   background: rgb(240, 242, 245);
+  //   margin-left: 10px;
+  //   height: 100%;
+  //   padding: 10px;
+  //   box-sizing: border-box;
+  //   .title_box {
+  //     background: #fff;
+  //     padding: 10px;
+  //     margin-bottom: 24px;
+  //     display: flex;
+  //     border-radius: 10px;
+  //     border: 1px solid rgb(202, 201, 204);
+  //     box-sizing: border-box;
+  //   }
+  //   .form_box {
+  //     border: 1px solid rgb(202, 201, 204);
+  //     border-radius: 10px;
+  //     background: #fff;
+  //     padding-top: 30px;
+  //     box-sizing: border-box;
+  //     width: 100%;
+  //     .el-input,
+  //     /deep/ .el-textarea {
+  //       width: 400px;
+  //     }
+  //     .btnBox {
+  //       margin: 0 270px 20px;
+  //       width: 200px;
+  //       display: flex;
+  //       justify-content: space-between;
+  //     }
+  //   }
+  // }
+  // /deep/ .el-dialog__body {
+  //   padding: 0 30px 0 0;
+  // }
+  .el-icon-delete-solid {
+    color: gray;
   }
-  /deep/ .el-dialog__body {
-    padding: 0 30px 0 0;
+  .el-icon-circle-plus {
+    color: gray;
+  }
+  /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /deep/ .el-dialog {
+    background: #303030;
+  }
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
+  }
+  /deep/.el-dialog__title {
+    color: white;
+  }
+  .primary {
+    background: #409eff;
+    border: #409eff;
+    color: white;
   }
 }
 </style>
diff --git a/src/views/datamanage/dataController.vue b/src/views/datamanage/dataController.vue
new file mode 100644
index 0000000..9d6d254
--- /dev/null
+++ b/src/views/datamanage/dataController.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="mochaitmo_Box">
+    <div class="left_tree">
+      <el-card class="el-card-define">
+        <div class="card_tree">
+          <el-menu
+            active-text-color="#ffd04b"
+            class="el-menu-vertical-demo"
+            :default-active="activeIndex"
+            background-color="transparent"
+            text-color="#fff"
+            @select="handleselect"
+          >
+            <customElMenu :menuData="menuList"></customElMenu>
+          </el-menu>
+        </div>
+      </el-card>
+    </div>
+    <div class="right_page">
+      <el-card class="el-card-define">
+        <data-updata v-if="setMenuFlag == 'dataUpdata'"></data-updata>
+        <catalogue-manage
+          v-if="setMenuFlag == 'catalogueManage'"
+        ></catalogue-manage>
+
+        <spatial-data v-if="setMenuFlag == 'SpatialData'"></spatial-data>
+        <version-manage v-if="setMenuFlag == 'versionManage'"></version-manage>
+        <domain-manage v-if="setMenuFlag == 'domainManage'"></domain-manage>
+        <dictionary-manage
+          v-if="setMenuFlag == 'dictionaryManage'"
+        ></dictionary-manage>
+        <metadata-manage
+          v-if="setMenuFlag == 'metadataManage'"
+        ></metadata-manage>
+        <style-manage v-if="setMenuFlag == 'styleManage'"></style-manage>
+        <data-loader v-if="setMenuFlag == 'dataLoader'"></data-loader>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { selectMenuRecursive } from '../../api/api';
+import customElMenu from '../../components/customElMenu.vue';
+import dataUpdata from '@/views/datamanage/dataUpdata.vue'; //鏁版嵁绠$悊-鏁版嵁涓婁紶
+import catalogueManage from '@/views/datamanage/catalogueManage.vue'; //鏁版嵁绠$悊-鐩綍绠$悊
+import SpatialData from '@/views/datamanage/SpatialData.vue'; //鏁版嵁绠$悊-鏁版嵁妫�绱�
+import versionManage from '@/views/datamanage/versionManage.vue'; //鏁版嵁绠$悊-鐗堟湰绠$悊
+import domainManage from '@/views/datamanage/domainManage.vue'; //鏁版嵁绠$悊-鍊煎煙绠$悊
+import dictionaryManage from '@/views/datamanage/dictionaryManage.vue'; //鏁版嵁绠$悊-瀛楀吀绠$悊
+import metadataManage from '@/views/datamanage/metadataManage.vue'; //鏁版嵁绠$悊-鍏冩暟鎹鐞�
+import styleManage from '@/views/datamanage/styleManage.vue'; //鏁版嵁绠$悊-鏍峰紡绠$悊
+import dataLoader from '@/views/datamanage/dataLoader.vue'; //
+export default {
+  components: {
+    customElMenu,
+    dataUpdata,
+    catalogueManage,
+    SpatialData,
+    versionManage,
+    domainManage,
+    dictionaryManage,
+    metadataManage,
+    styleManage,
+    dataLoader,
+  },
+  data() {
+    return {
+      setMenuFlag: ' ',
+      activeIndex: ' ',
+      oriData: [], //鍘熷鏍戞暟鎹�
+      dirData: [], //el鏍戞暟鎹�
+      newData: [], //鎷栧姩鍚庢暟鎹�
+      lang: 'zh',
+
+      menuList: [],
+      editTitle: '',
+      showPopover: false,
+      showEditInfoWrapper: false,
+      showEdit: false,
+      editMenu: false,
+      editCatalogue: false,
+      editUnit: false,
+      itemdetail: {},
+      formLabelWidth: '70px',
+    };
+  },
+  created() {},
+  mounted() {
+    this.getTreeData();
+  },
+  methods: {
+    //鑾峰彇鏍�
+    async getTreeData() {
+      const res = await selectMenuRecursive({ name: '鏁版嵁绠$悊' });
+
+      if (res.code == 200) {
+        if (res.result.length != 0) {
+          let menuList = res.result.filter((value) => {
+            return value.type == 1;
+          });
+          this.menuList = this.treeData(menuList);
+          this.setViewController(this.menuList[0]);
+        } else {
+          alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
+        }
+      } else {
+        console.log('鎺ュ彛鎶ラ敊');
+      }
+
+      // this.treeList = this.treeData(data.result);
+    },
+    setViewController(res) {
+      if (res.children != null) {
+        this.setViewController(res.children[0]);
+      } else {
+        this.$store.state.currentPerms = res.perms;
+        this.setMenuFlag = res.url;
+        this.activeIndex = res.url;
+      }
+    },
+    treeData(source) {
+      let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+      // console.log(cloneData);
+      if (cloneData.length != 0) {
+        return cloneData.filter((father) => {
+          // 寰幆鎵�鏈夐」
+          let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+          branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+          // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛�
+          // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
+          return father.pid == 1; // 杩斿洖涓�绾ц彍鍗�
+        });
+      } else {
+        alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
+      }
+    },
+
+    handleselect(index, indexPath, e) {
+      var data = e.$attrs.perms;
+      this.$store.state.currentPerms = data.perms;
+      var index = data.url;
+      debugger;
+      if (index != null) {
+        if (index.indexOf('http') != -1) {
+          this.$store.commit('getIframe', data.url);
+          index = 'dataIfream';
+        }
+      }
+      this.setMenuFlag = index;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mochaitmo_Box {
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  margin: 0;
+  padding: 10px;
+  position: absolute;
+  .left_tree {
+    width: 270px;
+    height: 100%;
+    position: relative;
+    float: left;
+    border-radius: 5px;
+  }
+  .el-card-define {
+    min-height: 85%;
+    background: #303030;
+    border: 1px solid gray;
+    padding: 1px !important;
+  }
+  .el-tree {
+    background-color: transparent;
+  }
+  .card_tree {
+    height: 730px;
+    overflow-y: auto;
+  }
+  .el-card__body,
+  .el-main {
+    padding: 10px;
+  }
+  .right_page {
+    width: calc(100% - 280px);
+    height: 100%;
+    background: #303030;
+    position: relative;
+    float: right;
+  }
+  /deep/.el-menu {
+    border: transparent !important;
+  }
+  /deep/.el-submenu__title:hover {
+    background: rgba(255, 255, 255, 0.3) !important;
+  }
+  /deep/ .el-submenu .el-menu-item:hover {
+    background: rgba(255, 255, 255, 0.3) !important;
+  }
+  /deep/.el-textarea__inner {
+    background: transparent;
+    border-color: #fff !important;
+    color: white;
+  }
+  /deep/.el-textarea .el-input__count {
+    background: transparent;
+    color: #fff !important;
+  }
+}
+</style>
diff --git a/src/views/datamanage/dataLoader.vue b/src/views/datamanage/dataLoader.vue
new file mode 100644
index 0000000..7bbaadf
--- /dev/null
+++ b/src/views/datamanage/dataLoader.vue
@@ -0,0 +1,534 @@
+<template>
+  <div class="authorityManagement_box"    v-loading.fullscreen.lock="fullscreenLoading"
+                element-loading-spinner="el-icon-loading"
+                 element-loading-background="rgba(0, 0, 0, 0.8)">
+    <My-bread
+      :list="[
+        `${$t('dataManage.dataManage')}`,
+        `${$t('dataManage.datawarehousing')}`,
+      ]"
+    ></My-bread>
+    <el-divider />
+    <div class="updateContent">
+      <div class="contentIquery">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item :label="$t('dataManage.dataUpObj.catalogue')">
+            <el-cascader
+              v-model="formInline.catalog"
+              :options="catalogOption"
+              @change="catalogChange"
+              :props="cascader"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item :label="$t('dataManage.dataUpObj.company')">
+            <el-cascader
+              v-model="formInline.company"
+              :options="companyOption"
+              @change="companyChange"
+              :props="cascader"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item :label="$t('dataManage.dataUpObj.entryTime')">
+            <el-date-picker
+              v-model.trim="formInline.monitorTime"
+              :picker-options="pickerOptions"
+              type="datetime"
+              placeholder="璇烽�夋嫨"
+              value-format="yyyy-MM-dd HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item>
+            <input id="uploadfile" @change= "handleFileChange" type="file"  name="file" multiple="multiple"  style="display: none"></input>
+            <el-button icon="el-icon-document-add" @click="fileSelect" class="primary">{{
+              $t('common.file')
+            }}</el-button>
+          </el-form-item>
+          <br />
+          <el-form-item :label="$t('dataManage.dataUpObj.describe')">
+            <el-input
+              type="textarea"
+              v-model="formInline.desc"
+              maxlength="50"
+              class="nm-skin-pretty"
+              show-word-limit
+:rows="2"  resize='none'
+              style="width: 460px"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-upload" @click="setFileUpload"
+
+             type="success">{{
+              $t('common.upload')
+            }}</el-button>
+
+            <el-button
+              icon="el-icon-delete"
+              type="danger"
+              @click="setFileDelete"
+
+              :disabled="tableData.length == 0 ? true : false"
+              >{{ $t('common.delete') }}</el-button
+            >
+            <el-button
+              icon="el-icon-folder-add"
+              type="warning"
+                @click="setFileWare"
+              :disabled="tableData.length == 0 ? true : false"
+              >{{ $t('common.Warehousin') }}</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="contentTable">
+         <el-table
+     :data="tableData"
+        border
+        style="width: 100%"
+        height="92%"
+        @selection-change="handleSelectionChange">
+       <el-table-column type="selection" width="55" />
+        <el-table-column
+          align="center"
+          type="index"
+          :label="$t('common.index')"
+          width="70px"
+          fixed
+        />
+
+        <el-table-column
+          align="center"
+          prop="name"
+          :label="$t('userManage.userInfoObj.uname')"
+          fixed
+        />
+    </el-table>
+      <div style="margin-top: 10px" class="pagination_box">
+    <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="listData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="count"
+        >
+        </el-pagination>
+      </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery';
+import MyBread from '../../components/MyBread.vue';
+import { selectdirTab, queryDepTree } from '../../api/api';
+export default {
+  name: 'dataUpdata',
+  components: {
+    MyBread,
+  },
+  data() {
+    return {
+      btnStatus: 0,
+      count: 0,
+      formInline: {
+        monitorTime: '',
+      },
+      catalogOption: [],
+      companyOption: [],
+      tableData: [],
+      listTable: [],
+      multipleSelection: [],
+      fullscreenLoading: false,
+      listData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        selectableRange: '00:00:00 - 23:59:59',
+      },
+      cascader: {
+        label: 'name',
+        value: 'id',
+        children: 'children',
+        checkStrictly: true,
+        emitPath: false,
+      },
+    };
+  },
+
+  mounted() {
+    this.getSelectdirTab();
+    this.getQueryDepTree();
+    this.timeDefault();
+    this.getFilePath();
+  },
+  watch: {
+    'detailData.monitorTime': {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          let date = new Date();
+          let min = date.getMinutes();
+          date.setMinutes(min + 1); //杩欓噷鍔�1鍒嗛挓锛屾槸涓轰簡瑙e喅鍊兼敼鍙樺悗锛岀郴缁熺鏁板氨杩囨湡闄愬埗浜嗭紝鏃犳硶鐐瑰嚮鈥滄鍒烩�濇寜閽紝 濡傛灉鐩戝惉 鈥滅郴缁熸椂闂粹�濈殑鏀瑰彉锛屽垯浼氬奖鍝嶆�ц兘銆�
+          let nowDate = moment(date).format('HH:mm:ss');
+          let st = '';
+          if (
+            moment(date).format('yyyy-MM-DD') ===
+            moment(newValue).format('yyyy-MM-DD')
+          ) {
+            let hh1 = moment(newValue).format('HH:mm:ss');
+            if (hh1 > nowDate) {
+              this.detailData.monitorTime = new Date();
+            }
+            st = nowDate;
+          } else {
+            st = '23:59:59';
+          }
+          this.pickerOptions.selectableRange = '00:00:00 - ' + st;
+          this.pickerOptions = this.pickerOptions;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+
+  methods: {
+    //鏂囦欢涓婁紶
+    setFileUpload() {
+      this.handlerLoading(true);
+      setTimeout(() => {
+        this.handlerLoading(false);
+      }, 2000);
+
+      this.getFileLength();
+    },
+    //鏁版嵁鍒犻櫎
+    setFileDelete() {
+      this.handlerLoading(true);
+
+
+
+      this.multipleSelection.forEach(item => {
+        this.listTable = this.listTable.filter((items) => {
+
+          if (items.name != item.name && item.id != items.id) {
+            return items;
+          }
+
+        });
+      });
+      this.listData.pageIndex= 1;
+      this.listData.pageSize = 10;
+      this.count = this.listTable.length;
+      this.setViewTable();
+      this.getFileLength();
+      this.handlerLoading(false);
+    },
+    //鏁版嵁鍏ュ簱
+    setFileWare() {
+      this.handlerLoading(true);
+      setTimeout(() => {
+        this.handlerLoading(false);
+      }, 2000);
+      this.getFilePath();
+    },
+    //鑾峰彇鏂囦欢涓婁紶璺緞
+    getFilePath() {
+      for (var i = 0; i < 20; i++) {
+        this.listTable.push({
+          id: i,
+          name: 'value' + i
+        })
+      }
+      this.count = this.listTable.length;
+      this.listData.pageIndex = 1;
+      this.listData.pageSize = 10;
+      this.setViewTable();
+    },
+    //鏄剧ず琛ㄦ牸鏁版嵁
+    setViewTable() {
+      var index = this.listData.pageIndex - 1;
+      var start = index * this.listData.pageSize;
+      var size = (this.listData.pageSize) + (index * this.listData.pageSize);
+      var std = [];
+      for (var i = start; i < size; i++) {
+        if (this.listTable[i] != null) {
+          std.push(this.listTable[i])
+        }
+
+      }
+
+      this.tableData = std;
+    },
+    //鑾峰彇鏂囦欢涓婁紶鏁版嵁
+    getFileLength() {
+
+    },
+    //娓呴櫎琛ㄦ牸淇℃伅
+    setClearTableData() {
+      this.tableData = [];
+      this.listTable = [];
+    },
+    //鍒嗛〉鎺у埗
+    handleSizeChange(res) {
+      this.listData.pageIndex = 1;
+      this.listData.pageSize = res;
+      this.setViewTable();
+    },
+    handleCurrentChange(res) {
+      this.listData.pageIndex = res;
+      this.setViewTable();
+    },
+    //琛ㄦ牸閫変腑浜嬩欢
+    handleSelectionChange(res) {
+      this.multipleSelection = res;
+    },
+    //鏂囦欢鑾峰彇
+    fileSelect() {
+      $("#uploadfile").click();
+    },
+    handleFileChange() {
+      var val = document.getElementById("uploadfile").files;
+      if (!val || !val.length) return;
+      var formData = new FormData();
+      for (var i = 0; i < val.length; i++) {
+        formData.append(val[i].name, val[i]);
+      }
+      console.log(formData)
+    },
+    //褰撳墠鏃堕棿鑾峰彇
+    timeDefault() {
+      var date = new Date();
+      var hour = date.getHours(); // 鏃�
+      var minutes = date.getMinutes(); // 鍒�
+      var seconds = date.getSeconds(); //绉�
+      var sign2 = ':';
+      var s1 =
+        date.getFullYear() +
+        '-' +
+        (date.getMonth() + 1) +
+        '-' +
+        date.getDate() +
+        ' ' +
+        hour +
+        sign2 +
+        minutes +
+        sign2 +
+        seconds;
+      this.formInline.monitorTime = s1;
+    },
+
+    //Loading鏄鹃殣
+    handlerLoading(res) {
+      this.fullscreenLoading = res;
+    },
+    //鐩綍鍒囨崲
+    catalogChange(value) {
+      this.formInline.catalog = value;
+    },
+    //鍗曚綅鍒囨崲
+    companyChange(value) {
+      this.formInline.company = value;
+    },
+
+    //鍗曚綅鍒楄〃鑾峰彇
+    async getQueryDepTree() {
+      const res = await queryDepTree();
+      if (res.code != 200) {
+        this.$message.error('鍗曚綅鍒楄〃鑾峰彇澶辫触');
+        return;
+      }
+      this.formInline.company = 1;
+      this.companyOption = this.treeData(res.result);
+    },
+    //鐩綍鍒楄〃鑾峰彇
+    async getSelectdirTab() {
+      const res = await selectdirTab();
+      if (res.code != 200) {
+        this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触');
+        return;
+      }
+      this.formInline.catalog = 1;
+      this.catalogOption = this.treeData(res.result);
+    },
+    //鏍戝垪琛ㄧ敓鎴�
+    treeData(source) {
+      let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+      return cloneData.filter((father) => {
+        // 寰幆鎵�鏈夐」
+        let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+        branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+        return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 寮曞叆鍏叡css绫�
+.authorityManagement_box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+
+  .updateContent {
+    width: 100%;
+    height: 670px;
+
+    position: relative;
+    .contentIquery {
+      width: 98%;
+      height: 16%;
+      border: 1px solid white;
+      padding: 1%;
+      border-radius: 5px;
+    }
+    .contentTable {
+      width: 98%;
+      height: 72%;
+      border: 1px solid white;
+      padding: 1%;
+      border-radius: 5px;
+      margin-top: 1%;
+      /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+      /deep/ .el-table {
+        background-color: transparent;
+
+        th,
+        td {
+          background-color: transparent;
+        }
+        .el-table__expanded-cell {
+          background-color: transparent !important;
+        }
+
+        // 琛ㄥご鑳屾櫙鑹�
+        th.el-table__cell {
+          background-color: #303030;
+          color: #fff;
+        }
+        tr > td {
+          background-color: #303030;
+          color: #fff;
+        }
+
+        // hover鏁堟灉
+        tr:hover > td {
+          background-color: rgba(255, 255, 255, 0.3) !important;
+        }
+
+        tbody tr:hover {
+          background-color: rgba(255, 255, 255, 0.3) !important;
+          // text-align: center;
+        }
+
+        // 婊氬姩鏉″楂�
+        .el-table__body-wrapper::-webkit-scrollbar {
+          width: 5px;
+          height: 5px;
+        }
+
+        .el-table__body-wrapper::-webkit-scrollbar {
+          width: 5px;
+          /*婊氬姩鏉″搴�*/
+          height: 5px;
+          /*婊氬姩鏉¢珮搴�*/
+        }
+        /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+        .el-table__body-wrapper::-webkit-scrollbar-track {
+          box-shadow: 0px 1px 3px #216fe6 inset;
+          /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+          border-radius: 10px;
+        }
+
+        /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+        .el-table__body-wrapper::-webkit-scrollbar-thumb {
+          box-shadow: 0px 1px 3px #216fe6 inset;
+          border-radius: 6px;
+          background-color: #216fe6;
+        }
+      }
+      .pagination_box {
+        margin-top: 20px;
+        /deep/.el-input__inner {
+          background-color: transparent !important;
+          border: 1px solid;
+          color: white;
+        }
+        /deep/.el-pagination__total {
+          color: white;
+        }
+        /deep/.el-pagination__jump {
+          color: white;
+        }
+        /deep/.el-pager li.active {
+          color: #409eff;
+        }
+        /deep/.el-pager li {
+          color: white;
+          background: transparent;
+        }
+        /deep/.el-pager li {
+          color: white;
+        }
+        /deep/.btn-prev {
+          background: transparent;
+        }
+        /deep/.btn-next {
+          background: transparent;
+        }
+         /deep/.btn-next i {
+          color:white;
+        }
+        /deep/.btn-prev i {
+          color:white;
+        }
+      }
+    }
+    .primary {
+      background: #409eff;
+      border: #409eff;
+      color: white;
+    }
+  }
+
+  /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /deep/ .popper__arrow::after {
+    border-top-color: rgba(43, 45, 55, 0.8);
+  }
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+  /deep/.el-cascader .el-input__inner {
+    border-color: #fff !important;
+  }
+  /deep/.el-textarea__inner {
+    background: transparent;
+    border-color: #fff !important;
+    color: white;
+  }
+  /deep/.el-textarea .el-input__count {
+    background: transparent;
+    color: #fff !important;
+  }
+  /deep/.el-loading-spinner i {
+    color: #1890ff !important;
+  }
+}
+</style>
diff --git a/src/views/datamanage/dataUpdata.vue b/src/views/datamanage/dataUpdata.vue
index 791341d..d16d395 100644
--- a/src/views/datamanage/dataUpdata.vue
+++ b/src/views/datamanage/dataUpdata.vue
@@ -1,605 +1,534 @@
 <template>
-  <div class="authorityManagement_box">
-    <My-bread :list="['鏁版嵁绠$悊', '鏁版嵁涓婁紶']"></My-bread>
+  <div class="authorityManagement_box"    v-loading.fullscreen.lock="fullscreenLoading"
+                element-loading-spinner="el-icon-loading"
+                 element-loading-background="rgba(0, 0, 0, 0.8)">
+    <My-bread
+      :list="[
+        `${$t('dataManage.dataManage')}`,
+        `${$t('dataManage.dataUpdata')}`,
+      ]"
+    ></My-bread>
     <el-divider />
-    <div class="inquire">
-      <el-form ref="formData1" :model="updateForm" :inline="true">
-        <el-form-item>
-          <el-button type="primary" size="small" @click="showCatalog()"
-            >鐩綍</el-button
-          >
-        </el-form-item>
-        <el-form-item>
-          <el-tooltip
-            :content="
-              updateForm.cataName == '' ? '鏈�夋嫨鐩綍' : updateForm.cataName
-            "
-            placement="top-start"
-          >
-            <el-input
-              v-model="updateForm.cataName"
-              disabled
-              class="firstInput"
+    <div class="updateContent">
+      <div class="contentIquery">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item :label="$t('dataManage.dataUpObj.catalogue')">
+            <el-cascader
+              v-model="formInline.catalog"
+              :options="catalogOption"
+              @change="catalogChange"
+              :props="cascader"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item :label="$t('dataManage.dataUpObj.company')">
+            <el-cascader
+              v-model="formInline.company"
+              :options="companyOption"
+              @change="companyChange"
+              :props="cascader"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item :label="$t('dataManage.dataUpObj.entryTime')">
+            <el-date-picker
+              v-model.trim="formInline.monitorTime"
+              :picker-options="pickerOptions"
+              type="datetime"
+              placeholder="璇烽�夋嫨"
+              value-format="yyyy-MM-dd HH:mm:ss"
             />
-          </el-tooltip> </el-form-item
-        ><el-form-item>
-          <span>绫诲瀷閫夋嫨</span>
-        </el-form-item>
-        <el-form-item>
-          <el-select v-model="updateForm.type" clearable placeholder="璇烽�夋嫨">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <span>鐗堟湰</span>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="updateForm.version" />
-        </el-form-item>
+          </el-form-item>
+          <el-form-item>
+            <input id="uploadfile" @change= "handleFileChange" type="file"  name="file" multiple="multiple"  style="display: none"></input>
+            <el-button icon="el-icon-document-add" @click="fileSelect" class="primary">{{
+              $t('common.file')
+            }}</el-button>
+          </el-form-item>
+          <br />
+          <el-form-item :label="$t('dataManage.dataUpObj.describe')">
+            <el-input
+              type="textarea"
+              v-model="formInline.desc"
+              maxlength="50"
+              class="nm-skin-pretty"
+              show-word-limit
+:rows="2"  resize='none'
+              style="width: 460px"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-upload" @click="setFileUpload"
 
-        <el-form-item>
-          <input
-            name="file1"
-            :accept="acceptItem"
-            type="file"
-            id="uploading"
-            style="display: none"
-            multiple="multiple"
-            @change="clearFileList"
-          />
-          <el-button
-            @click="clearFileList"
-            icon="el-icon-thumb"
-            type="primary"
-            size="small"
-            >閫夋嫨</el-button
-          >
-          <p class="show"></p>
+             type="success">{{
+              $t('common.upload')
+            }}</el-button>
 
-          <el-button
-            v-if="btnStatus.upload"
-            @click="uploadFile"
-            icon="el-icon-thumb"
-            type="success"
-            size="small"
-            >涓婁紶</el-button
-          >
-          <!-- <el-row>
-            <el-col :span="2">
-              <el-link
-                title="娣诲姞鏁版嵁"
-                :underline="false"
-                @click="uploadFile"
-                style="margin-left: 10px"
-                ><i class="el-icon-plus"></i
-              ></el-link>
-            </el-col>
-          </el-row> -->
-          <!-- <el-upload
-            id="uploading"
-            :on-remove="handleRemove"
-            :http-request="uploadFile"
-            :file-list="fileList"
-            multiple
-            ref="upload"
-            class="upload"
-            action="http://192.168.20.106/LFServer/Meta/Upload"
-            :auto-upload="false"
-            :headers="headers"
-            :accept="acceptItem"
-          >
-            <template #trigger>
-              <el-button
-                @click="clearFileList"
-                icon="el-icon-thumb"
-                type="primary"
-                size="small"
-                >閫夋嫨</el-button
-              >
-            </template>
             <el-button
-              class="ml-3"
-              @click="submitUpload"
-              icon="el-icon-upload2"
-              type="success"
-              size="small"
+              icon="el-icon-delete"
+              type="danger"
+              @click="setFileDelete"
+
+              :disabled="tableData.length == 0 ? true : false"
+              >{{ $t('common.delete') }}</el-button
             >
-              涓婁紶
-            </el-button>
-          </el-upload> -->
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="table_box">
-      <el-table
-        :data="tableData"
+            <el-button
+              icon="el-icon-folder-add"
+              type="warning"
+                @click="setFileWare"
+              :disabled="tableData.length == 0 ? true : false"
+              >{{ $t('common.Warehousin') }}</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="contentTable">
+         <el-table
+     :data="tableData"
         border
         style="width: 100%"
-        fit
-        height="99%"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column width="50" type="index" label="搴忓彿" />
-        <el-table-column min-width="150" prop="name" label="鏁版嵁鍚嶇О" />
-        <el-table-column min-width="200" prop="path" label="鎵�灞炵洰褰�" />
-        <el-table-column min-width="100" prop="create_time" label="鍒涘缓鏃堕棿" />
-        <el-table-column min-width="80" prop="create_user" label="鍒涘缓浜哄憳" />
-        <el-table-column min-width="50" prop="type" label="鏁版嵁绫诲瀷" />
-        <el-table-column min-width="50" prop="format" label="鏁版嵁鏍煎紡" />
-        <el-table-column min-width="80" prop="up_unit" label="涓婁紶鍗曚綅" />
-        <el-table-column min-width="50" prop="status" label="鏁版嵁鐘舵��" />
-        <el-table-column min-width="50" prop="version" label="鏁版嵁鐗堟湰" />
-      </el-table>
-    </div>
-    <div class="pagination_box" style="margin-top: 20px; margin-left: 400px">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="10"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="count"
-      >
-      </el-pagination>
-    </div>
-    <div class="leftTree" v-show="showCata">
-      <div class="treeBox">
-        <catalogueTree></catalogueTree>
-      </div>
-      <div class="btnBox">
-        <el-button type="primary" size="small" @click="selectCataName"
-          >纭畾</el-button
+        height="92%"
+        @selection-change="handleSelectionChange">
+       <el-table-column type="selection" width="55" />
+        <el-table-column
+          align="center"
+          type="index"
+          :label="$t('common.index')"
+          width="70px"
+          fixed
+        />
+
+        <el-table-column
+          align="center"
+          prop="name"
+          :label="$t('userManage.userInfoObj.uname')"
+          fixed
+        />
+    </el-table>
+      <div style="margin-top: 10px" class="pagination_box">
+    <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="listData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="count"
         >
-        <el-button type="primary" size="small" @click="closeCata"
-          >鍙栨秷</el-button
-        >
+        </el-pagination>
       </div>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script>
-import $ from "jquery";
-
-import { queryUploadData, queryDataCount } from "../../api/api";
-import catalogueTree from "../../components/catalogueTree.vue";
-import MyBread from "../../components/MyBread.vue";
+import $ from 'jquery';
+import MyBread from '../../components/MyBread.vue';
+import { selectdirTab, queryDepTree } from '../../api/api';
 export default {
-  name: "dataUpdata",
+  name: 'dataUpdata',
   components: {
     MyBread,
-    catalogueTree,
   },
   data() {
     return {
-      options: [
-        {
-          value: "DEM",
-          label: "楂樼▼鏁版嵁",
-        },
-        {
-          value: "DOM",
-          label: "褰卞儚鏁版嵁",
-        },
-        {
-          value: "Terra",
-          label: "鍦板舰鏁版嵁",
-        },
-        {
-          value: "Tilt",
-          label: "鍊炬枩妯″瀷",
-        },
-        {
-          value: "PointCloud",
-          label: "鐐逛簯鏁版嵁",
-        },
-        {
-          value: "Geology",
-          label: "鍦拌川妯″瀷",
-        },
-        {
-          value: "BIM",
-          label: "BIM妯″瀷",
-        },
-        {
-          value: "manual",
-          label: "鎵嬪伐妯″瀷",
-        },
-        {
-          value: "line",
-          label: "绾垮垝鍥炬暟鎹�",
-        },
-        {
-          value: "Chart",
-          label: "鍥捐〃鏁版嵁",
-        },
-        {
-          value: "File",
-          label: "鏂囦欢鏁版嵁",
-        },
-      ],
-      value: "",
-      showinfoBox: false,
-      itemdetail: {},
-      fileList: [],
-      headers: { "Content-Type": "multipart/form-data" },
-      acceptItem: "",
-      showCata: false,
-      updateForm: {
-        path_id: "",
-        cataName: "",
-        version: "",
-        type: "",
-        name: "",
-      },
-      multipleSelection: [],
-      tableData: [],
+      btnStatus: 0,
       count: 0,
-      currentPage: 1,
-      pageSize: 10,
-      pageNum: 1,
-      btnStatus: {
-        select: false,
-        delete: false,
-        upload: false,
-        download: false,
-        insert: false,
-        update: false,
+      formInline: {
+        monitorTime: '',
+      },
+      catalogOption: [],
+      companyOption: [],
+      tableData: [],
+      listTable: [],
+      multipleSelection: [],
+      fullscreenLoading: false,
+      listData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        selectableRange: '00:00:00 - 23:59:59',
+      },
+      cascader: {
+        label: 'name',
+        value: 'id',
+        children: 'children',
+        checkStrictly: true,
+        emitPath: false,
       },
     };
   },
 
+  mounted() {
+    this.getSelectdirTab();
+    this.getQueryDepTree();
+    this.timeDefault();
+    this.getFilePath();
+  },
   watch: {
-    "updateForm.type": {
-      immediate: true,
-      handler(val) {
-        switch (val) {
-          case "DEM":
-            this.acceptItem = ".tif,.img";
-            break;
-          case "DOM":
-            this.acceptItem = ".tif,.img";
-            break;
-          case "Terra":
-            this.acceptItem = ".mpt";
-            break;
-          case "Tilt":
-            this.acceptItem = ".3dml";
-            break;
-          case "PointCloud":
-            this.acceptItem = ".cpt";
-            break;
-          case "Geology":
-            this.acceptItem = ".3dml";
-            break;
-          case "BIM":
-            this.acceptItem = ".3dml";
-            break;
-          case "manual":
-            this.acceptItem = ".Max";
-            break;
-          case "Chart":
-            this.acceptItem = ".xls,.mdb";
-            break;
-          case "line":
-            this.acceptItem = ".mdb";
-            break;
-          case "File":
-            this.acceptItem =
-              ".xls,.mdb,.xls,.pdf,.dwg,.png,.jpg,.bmp,.avi,.mp4,.wmv,.mp3,.txt,.fly";
-            break;
+    'detailData.monitorTime': {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          let date = new Date();
+          let min = date.getMinutes();
+          date.setMinutes(min + 1); //杩欓噷鍔�1鍒嗛挓锛屾槸涓轰簡瑙e喅鍊兼敼鍙樺悗锛岀郴缁熺鏁板氨杩囨湡闄愬埗浜嗭紝鏃犳硶鐐瑰嚮鈥滄鍒烩�濇寜閽紝 濡傛灉鐩戝惉 鈥滅郴缁熸椂闂粹�濈殑鏀瑰彉锛屽垯浼氬奖鍝嶆�ц兘銆�
+          let nowDate = moment(date).format('HH:mm:ss');
+          let st = '';
+          if (
+            moment(date).format('yyyy-MM-DD') ===
+            moment(newValue).format('yyyy-MM-DD')
+          ) {
+            let hh1 = moment(newValue).format('HH:mm:ss');
+            if (hh1 > nowDate) {
+              this.detailData.monitorTime = new Date();
+            }
+            st = nowDate;
+          } else {
+            st = '23:59:59';
+          }
+          this.pickerOptions.selectableRange = '00:00:00 - ' + st;
+          this.pickerOptions = this.pickerOptions;
         }
       },
+      deep: true,
+      immediate: true,
     },
   },
-  created() {
-    // this.getMetaData(10, 1);
-    // this.getMetaCount("");
-    this.showPermsBtn();
-  },
+
   methods: {
-    showPermsBtn() {
-      let currentPerms = this.$store.state.currentPerms;
-      let permsEntity = this.$store.state.permsEntity;
-      permsEntity
-        .filter((item) => item.perms == currentPerms)
-        .map((item) => (this.btnStatus[item.tag.substr(1)] = true));
-    },
-    // 璇锋眰鏁版嵁
-    getMetaData(size, index) {
-      queryUploadData(size, index).then((res) => {
-        this.tableData = res.data;
-      });
-    },
-    // 璇锋眰鏁版嵁鏁伴噺
-    getMetaCount(name) {
-      queryDataCount(name).then((res) => {
-        this.count = res.data;
-      });
-    },
-    // 鑾峰彇澶氶��
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-      // console.log(val);
-    },
-    // 鏄剧ず鐩綍
-    showCatalog() {
-      this.showCata = true;
-    },
-    // 閫夋嫨鐩綍
-    selectCataName() {
-      this.updateForm.cataName = this.$store.state.catalogueName;
-      this.updateForm.path_id = this.$store.state.cataNode.id;
-      this.$store.commit("changeCata", ""); //娓呯┖state鐨勯潰鍖呭睉
-      this.$store.commit("changeNode", ""); //娓呯┖state鐨勮妭鐐瑰璞�
-      this.showCata = false;
-    },
-    closeCata() {
-      this.showCata = false;
-    },
-    clearFileList() {
-      $("#uploading").click();
-      // var val = document.getElementById("uploading").files;
-      // if (!val || !val.length) return;
+    //鏂囦欢涓婁紶
+    setFileUpload() {
+      this.handlerLoading(true);
+      setTimeout(() => {
+        this.handlerLoading(false);
+      }, 2000);
 
-      // val.forEach((e) => {
-      //   console.log(e.name);
-      // });
+      this.getFileLength();
     },
-    submitUpload() {
-      if (this.updateForm.path_id == "" || this.updateForm.type == "") {
-        alert("璇烽�夋嫨鏁版嵁绫诲瀷鎴栦笂浼犵洰褰�");
-        this.$refs.upload.abort();
-        return false;
-      } else {
-        this.$refs.upload.submit();
-      }
-    },
-    uploadFile(item) {
-      var val = document.getElementById("uploading").files;
-      if (!val || !val.length) return;
+    //鏁版嵁鍒犻櫎
+    setFileDelete() {
+      this.handlerLoading(true);
 
-      // if (val.length != 0) {
-      //   var i = val.length;
-      //   for (var j = 0; j < i; j++) {
-      //     FormDatas.append("file" + j, val[j]); // 鏂囦欢瀵硅薄
-      //   }
-      // }
-      val.forEach((e) => {
-        let FormDatas = new FormData();
-        FormDatas.append("file", e, e.name); // 鏂囦欢瀵�
-        let name = e.name;
-        let path_id = this.updateForm.path_id;
-        let version = this.updateForm.version;
-        let type = this.updateForm.type;
-        let url = `http://192.168.20.106/LFServer/Meta/Upload?path_id=${path_id}&type=${type}&version=${version}&name=${name}`;
-        // console.log(url);
-        this.$http({
-          method: "post",
-          url,
-          headers: this.headers,
-          timeout: 30000,
-          data: FormDatas,
-          // onUploadProgress: (progressEvent) => {
-          //   const complete = parseInt(
-          //     ((progressEvent.loaded / progressEvent.total) * 100) | 0,
-          //     10
-          //   );
-          //   // 閲嶇偣浜岋細onProgress()鏂规硶闇�瑕佷互涓婃柟鎺ユ敹鐨勫舰鍙傛潵璋冪敤
-          //   // 杩欎釜鏂规硶鏈変竴涓弬鏁�"percent"锛岀粰浠栬繘搴﹀�� complete 鍗冲彲
-          //   item.onProgress({ percent: complete });
-          // },
-        }).then((res) => {
-          if (res.status == 200 && res.data.length != 0) {
-            this.$message({
-              message: "涓婁紶鎴愬姛",
-              type: "success",
-            });
-            this.getMetaData(10, 1);
-            this.getMetaCount("");
-          } else {
-            alert("涓婁紶澶辫触");
-            console.log(res);
+
+
+      this.multipleSelection.forEach(item => {
+        this.listTable = this.listTable.filter((items) => {
+
+          if (items.name != item.name && item.id != items.id) {
+            return items;
           }
+
         });
       });
+      this.listData.pageIndex= 1;
+      this.listData.pageSize = 10;
+      this.count = this.listTable.length;
+      this.setViewTable();
+      this.getFileLength();
+      this.handlerLoading(false);
     },
-    // 鏂囦欢鍒楄〃绉婚櫎鏂囦欢鏃剁殑閽╁瓙
-    handleRemove(file, fileList) {
-      // console.log(file, fileList);
+    //鏁版嵁鍏ュ簱
+    setFileWare() {
+      this.handlerLoading(true);
+      setTimeout(() => {
+        this.handlerLoading(false);
+      }, 2000);
+      this.getFilePath();
     },
-    // 鏉℃暟淇敼
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.getMetaData(this.pageSize, 1);
-      this.getMetaCount("");
+    //鑾峰彇鏂囦欢涓婁紶璺緞
+    getFilePath() {
+      for (var i = 0; i < 20; i++) {
+        this.listTable.push({
+          id: i,
+          name: 'value' + i
+        })
+      }
+      this.count = this.listTable.length;
+      this.listData.pageIndex = 1;
+      this.listData.pageSize = 10;
+      this.setViewTable();
     },
-    // 椤垫暟淇敼
-    handleCurrentChange(val) {
-      this.pageNum = val;
-      this.getMetaData(this.pageSize, this.pageNum);
-      this.getMetaCount("");
+    //鏄剧ず琛ㄦ牸鏁版嵁
+    setViewTable() {
+      var index = this.listData.pageIndex - 1;
+      var start = index * this.listData.pageSize;
+      var size = (this.listData.pageSize) + (index * this.listData.pageSize);
+      var std = [];
+      for (var i = start; i < size; i++) {
+        if (this.listTable[i] != null) {
+          std.push(this.listTable[i])
+        }
+
+      }
+
+      this.tableData = std;
     },
-    // showDetail(index, row) {
-    //   // console.log(index, row);
-    //   this.showinfoBox = true;
-    //   this.itemdetail = row;
-    // },
-    // handleDelete(index, row) {
-    //   // console.log(index, row);
-    //   this.$confirm("纭畾鏄惁鍒犻櫎?", "鎻愮ず", {
-    //     confirmButtonText: "纭畾",
-    //     cancelButtonText: "鍙栨秷",
-    //     type: "warning",
-    //   })
-    //     .then(() => {})
-    //     .catch(() => {});
-    // },
-    // closeDetial() {
-    //   this.showinfoBox = false;
-    //   this.itemdetail = {};
-    // },
+    //鑾峰彇鏂囦欢涓婁紶鏁版嵁
+    getFileLength() {
+
+    },
+    //娓呴櫎琛ㄦ牸淇℃伅
+    setClearTableData() {
+      this.tableData = [];
+      this.listTable = [];
+    },
+    //鍒嗛〉鎺у埗
+    handleSizeChange(res) {
+      this.listData.pageIndex = 1;
+      this.listData.pageSize = res;
+      this.setViewTable();
+    },
+    handleCurrentChange(res) {
+      this.listData.pageIndex = res;
+      this.setViewTable();
+    },
+    //琛ㄦ牸閫変腑浜嬩欢
+    handleSelectionChange(res) {
+      this.multipleSelection = res;
+    },
+    //鏂囦欢鑾峰彇
+    fileSelect() {
+      $("#uploadfile").click();
+    },
+    handleFileChange() {
+      var val = document.getElementById("uploadfile").files;
+      if (!val || !val.length) return;
+      var formData = new FormData();
+      for (var i = 0; i < val.length; i++) {
+        formData.append(val[i].name, val[i]);
+      }
+      console.log(formData)
+    },
+    //褰撳墠鏃堕棿鑾峰彇
+    timeDefault() {
+      var date = new Date();
+      var hour = date.getHours(); // 鏃�
+      var minutes = date.getMinutes(); // 鍒�
+      var seconds = date.getSeconds(); //绉�
+      var sign2 = ':';
+      var s1 =
+        date.getFullYear() +
+        '-' +
+        (date.getMonth() + 1) +
+        '-' +
+        date.getDate() +
+        ' ' +
+        hour +
+        sign2 +
+        minutes +
+        sign2 +
+        seconds;
+      this.formInline.monitorTime = s1;
+    },
+
+    //Loading鏄鹃殣
+    handlerLoading(res) {
+      this.fullscreenLoading = res;
+    },
+    //鐩綍鍒囨崲
+    catalogChange(value) {
+      this.formInline.catalog = value;
+    },
+    //鍗曚綅鍒囨崲
+    companyChange(value) {
+      this.formInline.company = value;
+    },
+
+    //鍗曚綅鍒楄〃鑾峰彇
+    async getQueryDepTree() {
+      const res = await queryDepTree();
+      if (res.code != 200) {
+        this.$message.error('鍗曚綅鍒楄〃鑾峰彇澶辫触');
+        return;
+      }
+      this.formInline.company = 1;
+      this.companyOption = this.treeData(res.result);
+    },
+    //鐩綍鍒楄〃鑾峰彇
+    async getSelectdirTab() {
+      const res = await selectdirTab();
+      if (res.code != 200) {
+        this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触');
+        return;
+      }
+      this.formInline.catalog = 1;
+      this.catalogOption = this.treeData(res.result);
+    },
+    //鏍戝垪琛ㄧ敓鎴�
+    treeData(source) {
+      let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+      return cloneData.filter((father) => {
+        // 寰幆鎵�鏈夐」
+        let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+        branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+        return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+      });
+    },
   },
 };
 </script>
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
 .authorityManagement_box {
-  background: rgb(240, 242, 245);
-  border-radius: 10px;
+  width: 100%;
   height: 100%;
-  padding: 10px;
+  position: relative;
   box-sizing: border-box;
-  .inquire {
-    margin: 10px auto;
-    background: #fff;
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    height: 90px;
-    .el-form-item {
-      margin: 5px;
-    }
-    .el-input {
-      width: 307px;
-    }
 
-    .ml-3 {
-      margin-left: 10px;
-    }
-    .upload {
-      /deep/ .el-upload-list {
-        width: 79vw;
-        height: 27px;
-        margin: 0;
-        margin-left: 0px;
-        padding: 0;
-        list-style: none;
-        // background: #bfa;
-        position: absolute;
-        left: -53vw;
-        top: 5vh;
-        z-index: 10;
-        overflow: auto;
-        display: flex;
-        flex-wrap: wrap;
-      }
-      /deep/ .el-upload-list__item {
-        margin-top: 0px;
-        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-        font-size: 14px;
-        color: #606266;
-        line-height: 1.8;
-        // margin-top: 5px;
-        position: relative;
-        box-sizing: border-box;
-        border-radius: 4px;
-        width: 15%;
-      }
-    }
-  }
-  .table_box {
-    height: 73%;
-    overflow: auto;
-    padding: 10px;
-    background: #fff;
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    .el-table /deep/ .el-table__header-wrapper tr th {
-      background-color: rgb(255, 255, 255) !important;
-      color: rgb(0, 0, 0);
-    }
-    // 淇敼姣忚鏍峰紡锛�
-    .el-table /deep/ .el-table__row {
-      background-color: rgba(255, 255, 255) !important;
-      color: rgb(0, 0, 0);
-    }
-    .el-table /deep/ .el-table__body tr.current-row > td {
-      background-color: rgb(211, 211, 211) !important;
-    }
-    .el-table /deep/ .el-table__body tr:hover > td {
-      background-color: rgb(211, 211, 211) !important;
-    }
-    // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
-    .el-table /deep/ td,
-    .el-table /deep/ th.is-leaf {
-      border-bottom: 1px solid #eee;
-      border-right: 1px solid #eee;
-    }
-    .el-table /deep/ .el-table__cell {
-      padding: 8px 0;
-    }
-    // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
-    .el-table /deep/ .el-table__header tr,
-    .el-table /deep/ .el-table__header th {
-      height: 50px;
-    }
-    .el-table__body tr,
-    .el-table__body td {
-      height: 50px;
-      padding: 0;
-    }
-    // 璁剧疆琛ㄦ牸杈规棰滆壊锛�
+  .updateContent {
+    width: 100%;
+    height: 670px;
 
-    .el-table--border::after,
-    .el-table--group::after {
-      width: 0;
+    position: relative;
+    .contentIquery {
+      width: 98%;
+      height: 16%;
+      border: 1px solid white;
+      padding: 1%;
+      border-radius: 5px;
     }
-    .el-table::before {
-      height: 0;
+    .contentTable {
+      width: 98%;
+      height: 72%;
+      border: 1px solid white;
+      padding: 1%;
+      border-radius: 5px;
+      margin-top: 1%;
+      /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+      /deep/ .el-table {
+        background-color: transparent;
+
+        th,
+        td {
+          background-color: transparent;
+        }
+        .el-table__expanded-cell {
+          background-color: transparent !important;
+        }
+
+        // 琛ㄥご鑳屾櫙鑹�
+        th.el-table__cell {
+          background-color: #303030;
+          color: #fff;
+        }
+        tr > td {
+          background-color: #303030;
+          color: #fff;
+        }
+
+        // hover鏁堟灉
+        tr:hover > td {
+          background-color: rgba(255, 255, 255, 0.3) !important;
+        }
+
+        tbody tr:hover {
+          background-color: rgba(255, 255, 255, 0.3) !important;
+          // text-align: center;
+        }
+
+        // 婊氬姩鏉″楂�
+        .el-table__body-wrapper::-webkit-scrollbar {
+          width: 5px;
+          height: 5px;
+        }
+
+        .el-table__body-wrapper::-webkit-scrollbar {
+          width: 5px;
+          /*婊氬姩鏉″搴�*/
+          height: 5px;
+          /*婊氬姩鏉¢珮搴�*/
+        }
+        /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+        .el-table__body-wrapper::-webkit-scrollbar-track {
+          box-shadow: 0px 1px 3px #216fe6 inset;
+          /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+          border-radius: 10px;
+        }
+
+        /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+        .el-table__body-wrapper::-webkit-scrollbar-thumb {
+          box-shadow: 0px 1px 3px #216fe6 inset;
+          border-radius: 6px;
+          background-color: #216fe6;
+        }
+      }
+      .pagination_box {
+        margin-top: 20px;
+        /deep/.el-input__inner {
+          background-color: transparent !important;
+          border: 1px solid;
+          color: white;
+        }
+        /deep/.el-pagination__total {
+          color: white;
+        }
+        /deep/.el-pagination__jump {
+          color: white;
+        }
+        /deep/.el-pager li.active {
+          color: #409eff;
+        }
+        /deep/.el-pager li {
+          color: white;
+          background: transparent;
+        }
+        /deep/.el-pager li {
+          color: white;
+        }
+        /deep/.btn-prev {
+          background: transparent;
+        }
+        /deep/.btn-next {
+          background: transparent;
+        }
+         /deep/.btn-next i {
+          color:white;
+        }
+        /deep/.btn-prev i {
+          color:white;
+        }
+      }
+    }
+    .primary {
+      background: #409eff;
+      border: #409eff;
+      color: white;
     }
   }
-  .leftTree {
-    position: absolute;
-    z-index: 10;
-    top: 100px;
-    left: 600px;
-    width: 400px;
-    height: 600px;
-    background: #f0f2f5;
-    border: 1px solid #000;
-    .treeBox {
-      height: 550px;
-      overflow: auto;
-      /deep/ .el-tree-node__content:hover {
-        background-color: rgb(153, 153, 153);
-      }
-    }
-    .btnBox {
-      width: 123px;
-      margin: 10px auto 0;
-      // background-color: red;
-    }
+
+  /deep/.el-form-item__label {
+    color: white;
   }
-  .infoBox {
-    width: 500px;
-    border: 1px solid #eee;
-    position: absolute;
-    z-index: 100;
-    top: 15%;
-    right: 25%;
-    background-color: #fff;
-    .el-card {
-      background-color: transparent;
-      span {
-        font-size: 16px;
-        font-weight: 600;
-      }
-    }
-    .contentBox {
-      margin: 0 aotu 10px;
-      p {
-        // background-color: #bfa;
-        // margin-bottom: 10px;
-        font-size: 14px;
-      }
-    }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /deep/ .popper__arrow::after {
+    border-top-color: rgba(43, 45, 55, 0.8);
+  }
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+  /deep/.el-cascader .el-input__inner {
+    border-color: #fff !important;
+  }
+  /deep/.el-textarea__inner {
+    background: transparent;
+    border-color: #fff !important;
+    color: white;
+  }
+  /deep/.el-textarea .el-input__count {
+    background: transparent;
+    color: #fff !important;
+  }
+  /deep/.el-loading-spinner i {
+    color: #1890ff !important;
   }
 }
 </style>
diff --git a/src/views/datamanage/dictionaryManage.vue b/src/views/datamanage/dictionaryManage.vue
index b97d801..00e9894 100644
--- a/src/views/datamanage/dictionaryManage.vue
+++ b/src/views/datamanage/dictionaryManage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="authorityManagement_box">
+  <div class="dictionaryBox">
     <My-bread
       :list="[
         `${$t('dataManage.dataManage')}`,
@@ -7,151 +7,143 @@
       ]"
     ></My-bread>
     <el-divider />
-    <div class="searchComp">
-      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
-        <el-form-item
-          :label="$t('dataManage.dictionaryManageObj.tableName')"
-          prop="name"
-        >
-          <el-select
-            clearable
-            v-model="queryName"
-            @change="changeQueryName"
-            :placeholder="$t('dataManage.dictionaryManageObj.selectTableName')"
-          >
-            <el-option
-              v-for="(item, i) in selectData"
-              :key="i"
-              :label="item.tabDesc"
-              :value="item.tab"
-            >
-            </el-option>
-          </el-select>
+    <div>
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item :label="$t('dataManage.vmobj.keyword')">
+          <el-input
+            v-model="formInline.tab"
+            :placeholder="$t('common.pleaseInput')"
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button
-            @click="InsertFormdialog = true"
-            v-if="btnStatus.insert"
-            icon="el-icon-edit"
-            type="success"
-            size="small"
-            >{{ $t("dataManage.dictionaryManageObj.add") }}</el-button
+            icon="el-icon-search"
+            @click="getSelectDictTab"
+            class="primary"
+            >{{ $t('common.iquery') }}</el-button
           >
           <el-button
-            v-if="btnStatus.delete"
-            @click="DelFormData"
-            icon="el-icon-delete"
-            type="danger"
-            size="small"
-            >{{ $t("dataManage.dictionaryManageObj.del") }}</el-button
+            icon="el-icon-refresh"
+            @click="getRemoveForm"
+            type="info"
+            >{{ $t('common.reset') }}</el-button
           >
+          <el-button
+            icon="el-icon-edit"
+            @click="InsertFormdialog = true"
+            type="success"
+            >{{ $t('common.append') }}</el-button
+          >
+          <el-button icon="el-icon-delete" @click="DelFormData" type="danger">{{
+            $t('common.delete')
+          }}</el-button>
         </el-form-item>
       </el-form>
     </div>
-    <div class="bottom">
-      <div class="rightTable">
-        <div class="table_box">
-          <el-table
-            :data="tableData"
-            border
-            style="width: 100%"
-            @selection-change="handleSelectionChange"
-            height="98%"
-          >
-            <el-table-column type="selection" width="55" />
-            <el-table-column
-              prop="orderNum"
-              :label="$t('dataManage.dictionaryManageObj.number')"
-            />
-            <el-table-column
-              min-width="100"
-              prop="field"
-              :label="$t('dataManage.dictionaryManageObj.fieldName')"
-            />
-            <el-table-column
-              min-width="90"
-              prop="alias"
-              :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
-            />
-            <el-table-column
-              min-width="100"
-              prop="type"
-              :label="$t('dataManage.dictionaryManageObj.fieldType')"
-            />
-            <el-table-column
-              min-width="60"
-              prop="len"
-              :label="$t('dataManage.dictionaryManageObj.fieldLength')"
-            />
-            <el-table-column
-              min-width="60"
-              prop="precision"
-              :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
-            />
-            <el-table-column
-              min-width="100"
-              prop="tab"
-              :label="
-                $t('dataManage.dictionaryManageObj.rangeAssociationTable')
-              "
-            />
-            <el-table-column
-              min-width="100"
-              prop="bak"
-              :label="$t('dataManage.dictionaryManageObj.remark')"
-            />
-            <el-table-column
-              min-width="100"
-              prop="createTime"
-              :label="$t('dataManage.dictionaryManageObj.creationTime')"
-              :formatter="formatData"
-            />
-            <el-table-column
-              min-width="100"
-              prop="createUser"
-              :label="$t('dataManage.dictionaryManageObj.createPersonnel')"
-            />
-            <el-table-column
-              min-width="100"
-              prop="updateTime"
-              :label="$t('dataManage.dictionaryManageObj.updateTime')"
-              :formatter="formatData"
-            />
-            <el-table-column
-              min-width="100"
-              prop="updateUser"
-              :label="$t('dataManage.dictionaryManageObj.updatePersonnel')"
-            />
-
-            <el-table-column
-              min-width="70"
-              :label="$t('dataManage.dictionaryManageObj.operation')"
-            >
-              <template slot-scope="scope">
-                <el-link
-                  v-if="btnStatus.select"
-                  @click="showDetail(scope.$index, scope.row)"
-                  >{{ $t("dataManage.dictionaryManageObj.lookOver") }}</el-link
-                >
-                <el-link
-                  v-if="btnStatus.update"
-                  @click="handleEdit(scope.$index, scope.row)"
-                  style="margin-left: 10px"
-                  >{{ $t("dataManage.dictionaryManageObj.revamp") }}</el-link
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <div
-          style="margin-top: 20px; text-align: center"
-          class="pagination_box"
+    <div class="dictionaryContent">
+      <div class="dictionary_leftTree">
+        <ul>
+          <li @click="getTableDesc(item)" v-for="item in optionCount">
+            {{ item.tabDesc }}({{ item.tab }})
+          </li>
+        </ul>
+      </div>
+      <div class="dictionary_rightContent">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+          height="93%"
         >
+          <el-table-column type="selection" width="55" />
+          <el-table-column
+            prop="orderNum"
+            :label="$t('dataManage.dictionaryManageObj.number')"
+          />
+          <el-table-column
+            min-width="100"
+            prop="field"
+            :label="$t('dataManage.dictionaryManageObj.fieldName')"
+          />
+          <el-table-column
+            min-width="90"
+            prop="alias"
+            :label="$t('dataManage.dictionaryManageObj.fieldAliasName')"
+          />
+          <el-table-column
+            min-width="100"
+            prop="type"
+            :label="$t('dataManage.dictionaryManageObj.fieldType')"
+          />
+          <el-table-column
+            min-width="60"
+            prop="len"
+            :label="$t('dataManage.dictionaryManageObj.fieldLength')"
+          />
+          <el-table-column
+            min-width="60"
+            prop="precision"
+            :label="$t('dataManage.dictionaryManageObj.FieldPrecision')"
+          />
+          <el-table-column
+            min-width="100"
+            prop="tab"
+            :label="$t('dataManage.dictionaryManageObj.rangeAssociationTable')"
+          />
+          <el-table-column
+            min-width="100"
+            prop="bak"
+            :label="$t('dataManage.dictionaryManageObj.remark')"
+          />
+          <el-table-column
+            min-width="100"
+            prop="createTime"
+            :label="$t('dataManage.dictionaryManageObj.creationTime')"
+            :formatter="formatData"
+          />
+          <el-table-column
+            min-width="100"
+            prop="createUser"
+            :label="$t('dataManage.dictionaryManageObj.createPersonnel')"
+          />
+          <el-table-column
+            min-width="100"
+            prop="updateTime"
+            :label="$t('dataManage.dictionaryManageObj.updateTime')"
+            :formatter="formatData"
+          />
+          <el-table-column
+            min-width="100"
+            prop="updateUser"
+            :label="$t('dataManage.dictionaryManageObj.updatePersonnel')"
+          />
+
+          <el-table-column
+            min-width="100"
+            :label="$t('dataManage.dictionaryManageObj.operation')"
+          >
+            <template slot-scope="scope">
+              <el-link
+                v-if="btnStatus.select"
+                style="color: white"
+                @click="showDetail(scope.$index, scope.row)"
+                >{{ $t('dataManage.dictionaryManageObj.lookOver') }}</el-link
+              >
+              <el-link
+                v-if="btnStatus.update"
+                @click="handleEdit(scope.$index, scope.row)"
+                style="margin-left: 10px; color: white"
+                >{{ $t('dataManage.dictionaryManageObj.revamp') }}</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination_box" style="margin-top: 10px">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="listData.pageIndex"
-            :page-sizes="[10, 20, 50, 100]"
+            :page-sizes="[10, 20, 30, 40]"
             :page-size="listData.pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="count"
@@ -163,84 +155,82 @@
     <div class="infoBox" v-show="showinfoBox">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>{{ $t("dataManage.dictionaryManageObj.particulars") }}</span>
+          <span>{{ $t('dataManage.dictionaryManageObj.particulars') }}</span>
           <div style="float: right; cursor: pointer" @click="closeDetial">
             <i class="el-icon-close"></i>
           </div>
         </div>
         <div class="contentBox">
           <p>
-            {{ $t("dataManage.dictionaryManageObj.tableName") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.tableName') }}锛歿{
               itemdetail.tab
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.tableAliasName") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.tableAliasName') }}锛歿{
               itemdetail.tabDesc
             }}
           </p>
           <el-divider></el-divider>
-          <!-- <p>琛ㄧ被鍨嬶細{{ itemdetail.type }}</p>
-          <el-divider></el-divider> -->
+
           <p>
-            {{ $t("dataManage.dictionaryManageObj.fieldName") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.fieldName') }}锛歿{
               itemdetail.field
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.fieldAliasName") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.fieldAliasName') }}锛歿{
               itemdetail.alias
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.fieldType") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.fieldType') }}锛歿{
               itemdetail.type
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.fieldLength") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.fieldLength') }}锛歿{
               itemdetail.len
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.FieldPrecision") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.FieldPrecision') }}锛歿{
               itemdetail.precision
             }}
           </p>
           <el-divider></el-divider>
-          <!-- <p>鍊煎煙鍏宠仈琛細{{ itemdetail.domain_name }}</p>
-          <el-divider></el-divider> -->
+
           <p>
-            {{ $t("dataManage.dictionaryManageObj.remark") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.remark') }}锛歿{
               itemdetail.bak
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.creationTime") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.creationTime') }}锛歿{
               itemdetail.createTime
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.createPersonnel") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.createPersonnel') }}锛歿{
               itemdetail.createUser
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.updateTime") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.updateTime') }}锛歿{
               itemdetail.updateTime
             }}
           </p>
           <el-divider></el-divider>
           <p>
-            {{ $t("dataManage.dictionaryManageObj.updatePersonnel") }}锛歿{
+            {{ $t('dataManage.dictionaryManageObj.updatePersonnel') }}锛歿{
               itemdetail.updateUser
             }}
           </p>
@@ -272,17 +262,7 @@
         >
           <el-input v-model="upform.tabDesc" autocomplete="off"></el-input>
         </el-form-item>
-        <!-- <el-form-item label="绫诲瀷" :label-width="formLabelWidth">
-          <el-select
-            v-model="upform.table_type"
-            style="width: 100%"
-            placeholder="璇烽�夋嫨鏁版嵁绫诲瀷"
-          >
-            <el-option label="鐐瑰嚑浣�" value="鐐瑰嚑浣�"></el-option>
-            <el-option label="绾垮嚑浣�" value="绾垮嚑浣�"></el-option>
-            <el-option label="闈㈠嚑浣�" value="闈㈠嚑浣�"></el-option>
-          </el-select>
-        </el-form-item> -->
+
         <el-form-item
           :label="$t('dataManage.dictionaryManageObj.fieldName')"
           :label-width="formLabelWidth"
@@ -313,9 +293,7 @@
         >
           <el-input v-model="upform.precision" autocomplete="off"></el-input>
         </el-form-item>
-        <!-- <el-form-item label="鍊煎煙鍚嶇О" :label-width="formLabelWidth">
-          <el-input v-model="upform.domain_name" autocomplete="off"></el-input>
-        </el-form-item> -->
+
         <el-form-item
           :label="$t('dataManage.dictionaryManageObj.remark')"
           :label-width="formLabelWidth"
@@ -325,10 +303,10 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">{{
-          $t("dataManage.dictionaryManageObj.cancel")
+          $t('dataManage.dictionaryManageObj.cancel')
         }}</el-button>
         <el-button type="primary" @click="updateForm">{{
-          $t("dataManage.dictionaryManageObj.confirm")
+          $t('dataManage.dictionaryManageObj.confirm')
         }}</el-button>
       </div>
     </el-dialog>
@@ -357,17 +335,7 @@
         >
           <el-input v-model="insertform.tabDesc" autocomplete="off"></el-input>
         </el-form-item>
-        <!-- <el-form-item label="绫诲瀷" :label-width="formLabelWidth">
-          <el-select
-            v-model="insertform.table_type"
-            style="width: 100%"
-            placeholder="璇烽�夋嫨鏁版嵁绫诲瀷"
-          >
-            <el-option label="鐐瑰嚑浣�" value="鐐瑰嚑浣�"></el-option>
-            <el-option label="绾垮嚑浣�" value="绾垮嚑浣�"></el-option>
-            <el-option label="闈㈠嚑浣�" value="闈㈠嚑浣�"></el-option>
-          </el-select>
-        </el-form-item> -->
+
         <el-form-item
           :label="$t('dataManage.dictionaryManageObj.fieldName')"
           :label-width="formLabelWidth"
@@ -401,12 +369,7 @@
             autocomplete="off"
           ></el-input>
         </el-form-item>
-        <!-- <el-form-item label="鍊煎煙鍚嶇О" :label-width="formLabelWidth">
-          <el-input
-            v-model="insertform.domain_name"
-            autocomplete="off"
-          ></el-input>
-        </el-form-item> -->
+
         <el-form-item
           :label="$t('dataManage.dictionaryManageObj.remark')"
           :label-width="formLabelWidth"
@@ -416,10 +379,10 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="InsertFormdialog = false">{{
-          $t("dataManage.dictionaryManageObj.cancel")
+          $t('dataManage.dictionaryManageObj.cancel')
         }}</el-button>
         <el-button type="primary" @click="insertFromData">{{
-          $t("dataManage.dictionaryManageObj.confirm")
+          $t('dataManage.dictionaryManageObj.confirm')
         }}</el-button>
       </div>
     </el-dialog>
@@ -433,35 +396,32 @@
   deleteDicts,
   updateDict,
   insertDict,
-} from "../../api/api";
-import MyBread from "../../components/MyBread.vue";
+} from '../../api/api';
+import MyBread from '../../components/MyBread.vue';
 export default {
-  name: "dictionaryManage",
+  name: 'dictionaryManage',
   components: { MyBread },
   data() {
     return {
-      multipleSelection: [],
-      formLabelWidth: "120px",
-      dialogFormVisible: false,
-      InsertFormdialog: false,
-      insertform: {},
-      upform: {},
-      showinfoBox: false,
-      itemdetail: {},
-      ruleForm: {
-        name: "",
-      },
-      tableData: [],
-      count: 0,
-      currentPage: 1,
-      searchName: "",
-      selectName: [],
-      queryName: "",
+      formInline: [],
       listData: {
+        ns: '',
+        tab: '',
         pageIndex: 1,
         pageSize: 10,
       },
-      selectData: [],
+      count: 0,
+      InsertFormdialog: false,
+      optionCount: [],
+      tableData: [],
+      showinfoBox: false,
+      dialogFormVisible: false,
+      itemdetail: {},
+      upform: {},
+      insertform: {},
+
+      multipleSelection: [],
+      formLabelWidth: '130px',
       btnStatus: {
         select: false,
         delete: false,
@@ -473,11 +433,95 @@
     };
   },
   created() {
-    this.startQueryNameData();
     this.getSelectDictTab();
     this.showPermsBtn();
   },
   methods: {
+    //鏂板
+    async insertFromData() {
+      const data = await insertDict(this.insertform);
+      if (data.code != 200) {
+      }
+      this.InsertFormdialog = false;
+      this.startQueryNameData();
+    },
+
+    //鏌ョ湅璇︽儏
+    showDetail(index, row) {
+      this.showinfoBox = true;
+      this.itemdetail = row;
+    },
+    closeDetial() {
+      this.showinfoBox = false;
+      this.itemdetail = {};
+    },
+    //鑾峰彇琛ㄦ牸瀛楁淇℃伅
+    getTableDesc(res) {
+      this.insertform.tab = res.tab;
+      this.insertform.tabDesc = res.tabDesc;
+
+      this.listData.tab = res.tab;
+      this.listData.ns = res.ns;
+      this.startQueryNameData();
+    },
+    async startQueryNameData() {
+      if (this.listData.tab == '') {
+        delete this.listData.tab;
+      }
+      const data = await selectByPageAndCount(this.listData);
+
+      if (data.code != 200) {
+        this.$message.error('鍒楄〃璋冪敤澶辫触');
+      }
+
+      this.tableData = data.result;
+      this.count = data.count;
+    },
+    handleSelectionChange(res) {
+      this.multipleSelection = res;
+    },
+
+    handleSizeChange(val) {
+      thihs.listData.pageIndex = 1;
+      this.listData.pageSize = val;
+      this.startQueryNameData();
+    },
+    handleCurrentChange(val) {
+      this.listData.pageIndex = val;
+      this.startQueryNameData();
+    },
+    //淇敼璇︽儏
+    async updateForm() {
+      const data = await updateDict(this.upform);
+      if (data.code != 200) {
+        this.$message.error('淇敼澶辫触');
+        return;
+      }
+      this.dialogFormVisible = false;
+      this.startQueryNameData();
+    },
+    //淇敼璇︽儏寮规
+    handleEdit(index, row) {
+      this.dialogFormVisible = true;
+      this.upform = row;
+    },
+    //鍒犻櫎鍒楄〃
+    async DelFormData() {
+      var std = [];
+
+      for (var i in this.multipleSelection) {
+        std.push(this.multipleSelection[i].id);
+      }
+
+      const data = await deleteDicts({ ids: std.toString() });
+      if (data.code != 200) {
+        this.$message.error('鍒犻櫎澶辫触');
+      }
+      this.listData.pageIndex = 1;
+      this.listData.pageSize = 10;
+      this.startQueryNameData();
+    },
+
     showPermsBtn() {
       let currentPerms = this.$store.state.currentPerms;
       let permsEntity = this.$store.state.permsEntity;
@@ -485,37 +529,13 @@
         .filter((item) => item.perms == currentPerms)
         .map((item) => (this.btnStatus[item.tag.substr(1)] = true));
     },
-    //涓嬫媺閫夐」璋冪敤
-    async getSelectDictTab() {
-      this.selectData = [];
-      const data = await selectDictTab();
-      if (data.code != 200) {
-        this.$message.error("涓嬫媺璋冪敤澶辫触");
+    //鏍煎紡鍖栧垪琛�
+    formatData(row, column) {
+      let data = row[column.property];
+      if (data == null) {
+        return data;
       }
-      data.result.forEach((e) => {
-        if (e) {
-          this.selectData.push({
-            tab: e.tab,
-            tabDesc: `${e.tabDesc}锛�${e.tab}锛塦,
-          });
-        }
-      });
-    },
-    //鍒楄〃璇锋眰
-    async startQueryNameData() {
-      if (this.listData.tab == "") {
-        delete this.listData.tab;
-      }
-      const data = await selectByPageAndCount(this.listData);
-      if (data.code != 200) {
-        this.$message.error("鍒楄〃璋冪敤澶辫触");
-      }
-      this.tableData = data.result;
-      this.count = data.count;
-    },
-    //鏍煎紡鍖栨椂闂�
-    add0(m) {
-      return m < 10 ? "0" + m : m;
+      return this.format(data);
     },
     //鏍煎紡鍖栨椂闂�
     format(shijianchuo) {
@@ -527,248 +547,196 @@
       var h = time.getHours();
       var mm = time.getMinutes();
       var s = time.getSeconds();
-      return (
-        y + "-" + this.add0(m) + "-" + this.add0(d)
-        // " " +
-        // this.add0(h) +
-        // ":" +
-        // this.add0(mm) +
-        // ":" +
-        // this.add0(s)
-      );
+      return y + '-' + this.add0(m) + '-' + this.add0(d);
     },
-    //鏍煎紡鍖栧垪琛�
-    formatData(row, column) {
-      let data = row[column.property];
-      if (data == null) {
-        return data;
+    //鏍煎紡鍖栨椂闂�
+    add0(m) {
+      return m < 10 ? '0' + m : m;
+    },
+    getRemoveForm() {
+      this.formInline.tab = null;
+      this.getSelectDictTab();
+    },
+    //鐩綍鏍戣幏鍙�
+    async getSelectDictTab() {
+      const data = await selectDictTab({ name: this.formInline.tab });
+      if (data.code != 200) {
+        this.$message.error('涓嬫媺璋冪敤澶辫触');
       }
-      return this.format(data);
-    },
-    //淇敼璇︽儏
-    updateForm() {
-      this.$confirm(
-        `${$t("dataManage.dictionaryManageObj.tipsUp")}`,
-        `${$t("dataManage.dictionaryManageObj.tips")}`,
-        {
-          confirmButtonText: `${$t("dataManage.dictionaryManageObj.confirm")}`,
-          cancelButtonText: `${$t("dataManage.dictionaryManageObj.cancel")}`,
-          type: "warning",
-        }
-      )
-        .then(async () => {
-          const data = await updateDict(this.upform);
-          if (data.code != 200) {
-            this.$message.error(
-              `${$t("dataManage.dictionaryManageObj.failModify")}`
-            );
-          }
-          this.dialogFormVisible = false;
-          this.startQueryNameData();
-          this.$message({
-            message: `${$t(
-              "dataManage.dictionaryManageObj.modifySuccessfully"
-            )}`,
-            type: "success",
-          });
-        })
-        .catch(() => {});
-    },
-
-    //鏌ョ湅璇︽儏
-    showDetail(index, row) {
-      // console.log(index, row);
-      this.showinfoBox = true;
-      this.itemdetail = row;
-    },
-    closeDetial() {
-      this.showinfoBox = false;
-      this.itemdetail = {};
-    },
-    //淇敼璇︽儏寮规
-    handleEdit(index, row) {
-      this.dialogFormVisible = true;
-      this.upform = row;
-      console.log(this.upform);
-    },
-
-    handleSizeChange(val) {
-      console.log(val);
-      // console.log(`姣忛〉 ${val} 鏉);
-      this.listData.pageSize = val;
-      this.startQueryNameData();
-    },
-    handleCurrentChange(val) {
-      this.listData.pageIndex = val;
-      this.startQueryNameData();
-    },
-    //鏂板
-    insertFromData() {
-      this.$confirm(
-        `${$t("dataManage.dictionaryManageObj.tipsAdd")}`,
-        `${$t("dataManage.dictionaryManageObj.tips")}`,
-        {
-          confirmButtonText: `${$t("dataManage.dictionaryManageObj.confirm")}`,
-          cancelButtonText: `${$t("dataManage.dictionaryManageObj.cancel")}`,
-          type: "warning",
-        }
-      )
-        .then(async () => {
-          const data = await insertDict(this.insertform);
-          if (data.code != 200) {
-            this.$message.error(
-              `${$t("dataManage.dictionaryManageObj.FailedAdd")}`
-            );
-          }
-          this.InsertFormdialog = false;
-          this.startQueryNameData();
-          this.$message({
-            message: `${$t("dataManage.dictionaryManageObj.NewSuccess")}`,
-            type: "success",
-          });
-        })
-        .catch(() => {});
-    },
-
-    //鍒楄〃閫夋嫨
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    //鍒犻櫎鍒楄〃
-    DelFormData() {
-      var std = [];
-      console.log(this.multipleSelection);
-      for (var i in this.multipleSelection) {
-        std.push(this.multipleSelection[i].id);
-      }
-      this.$confirm(
-        `${$t("dataManage.dictionaryManageObj.tipsDelete")}`,
-        `${$t("dataManage.dictionaryManageObj.tips")}`,
-        {
-          confirmButtonText: `${$t("dataManage.dictionaryManageObj.confirm")}`,
-          cancelButtonText: `${$t("dataManage.dictionaryManageObj.cancel")}`,
-          type: "warning",
-        }
-      )
-        .then(async () => {
-          const data = await deleteDicts({ ids: std.toString() });
-          if (data.code != 200) {
-            this.$message.error(
-              `${$t("dataManage.dictionaryManageObj.DeleteFailed")}`
-            );
-          }
-          this.$message({
-            type: "success",
-            message: `${$t(
-              "dataManage.dictionaryManageObj.deletedSuccessfully"
-            )}`,
-          });
-          this.startQueryNameData();
-        })
-        .catch(() => {});
-    },
-
-    //鎼滅储妗�
-    changeQueryName(val) {
-      this.listData.tab = val;
-      this.startQueryNameData();
+      this.optionCount = data.result;
     },
   },
 };
 </script>
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
-.authorityManagement_box {
-  background: rgb(240, 242, 245);
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
+.dictionaryBox {
+  height: 81%;
+  width: 97%;
+  position: absolute;
   box-sizing: border-box;
-  .searchComp {
-    margin: 10px auto;
-    background: #fff;
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    .el-form-item {
-      margin: 5px;
+  .dictionaryContent {
+    width: 100%;
+    height: 92%;
+    display: flex;
+    justify-content: space-between;
+    .dictionary_leftTree {
+      width: 15%;
+      height: 85%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      max-height: 670px;
+      overflow-y: auto;
+      li {
+        color: white;
+        border-bottom: 1px solid white;
+        line-height: 30px;
+        text-align: center;
+      }
+      li:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
     }
-    .el-input {
-      width: 467px;
+    .dictionary_rightContent {
+      width: 80%;
+      height: 85%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      overflow-y: auto;
     }
   }
-  .bottom {
-    width: 100%;
-    height: 85%;
-    .rightTable {
-      height: 100%;
-      width: 100%;
-      .table_box {
-        width: 100%;
-        height: 93%;
-        margin: 0 auto;
-        overflow: auto;
-        background: #fff;
-        .el-table {
-          height: 100%;
-        }
-        .el-table /deep/ .el-table__header-wrapper tr th {
-          background-color: rgb(255, 255, 255) !important;
-          color: rgb(0, 0, 0);
-        }
-        // 淇敼姣忚鏍峰紡锛�
-        .el-table /deep/ .el-table__row {
-          background-color: rgba(255, 255, 255) !important;
-          color: rgb(0, 0, 0);
-        }
-        .el-table /deep/ .el-table__body tr.current-row > td {
-          background-color: rgb(211, 211, 211) !important;
-        }
-        .el-table /deep/ .el-table__body tr:hover > td {
-          background-color: rgb(211, 211, 211) !important;
-        }
-        // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
-        .el-table /deep/ td,
-        .el-table /deep/ th.is-leaf {
-          border-bottom: 1px solid #eee;
-          border-right: 1px solid #eee;
-        }
-        .el-table /deep/ .el-table__cell {
-          padding: 0;
-        }
-        // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
-        .el-table /deep/ .el-table__header tr,
-        .el-table /deep/ .el-table__header th {
-          height: 40px;
-        }
-        .el-table__body tr,
-        .el-table__body td {
-          height: 40px;
-          padding: 0;
-        }
-        // 璁剧疆琛ㄦ牸杈规棰滆壊锛�
+  .infinite-list-item {
+    background: rgba(255, 255, 255, 0.3);
+    color: white;
+    margin-top: 5%;
+    padding: 1%;
+    text-align: center;
+  }
+  .eldivider {
+    margin-top: 0px;
+    margin-bottom: 10px;
+  }
+  .primary {
+    background: #409eff;
+    border: #409eff;
+    color: white;
+  }
+  /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+  /deep/ .el-table {
+    background-color: transparent;
 
-        .el-table--border::after,
-        .el-table--group::after {
-          width: 0;
-        }
-        .el-table::before {
-          height: 0;
-        }
-        //   a {
-        //     color: #000;
-        //   }
-      }
+    th,
+    td {
+      background-color: transparent;
+    }
+    .el-table__expanded-cell {
+      background-color: transparent !important;
+    }
+
+    // 琛ㄥご鑳屾櫙鑹�
+    th.el-table__cell {
+      background-color: #303030;
+      color: #fff;
+    }
+    tr > td {
+      background-color: #303030;
+      color: #fff;
+    }
+
+    // hover鏁堟灉
+    tr:hover > td {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      // text-align: center;
+    }
+
+    // 婊氬姩鏉″楂�
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      /*婊氬姩鏉″搴�*/
+      height: 5px;
+      /*婊氬姩鏉¢珮搴�*/
+    }
+    /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-track {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+      border-radius: 10px;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
+    }
+  }
+  .pagination_box {
+    margin-top: 20px;
+    /deep/.el-input__inner {
+      background-color: transparent !important;
+      border: 1px solid;
+      color: white;
+    }
+    /deep/.el-pagination__total {
+      color: white;
+    }
+    /deep/.el-pagination__jump {
+      color: white;
+    }
+    /deep/.el-pager li.active {
+      color: #409eff;
+    }
+    /deep/.el-pager li {
+      color: white;
+      background: transparent;
+    }
+    /deep/.el-pager li {
+      color: white;
+    }
+    /deep/.btn-prev {
+      background: transparent;
+    }
+    /deep/.btn-next {
+      background: transparent;
+    }
+    /deep/.btn-next i {
+      color: white;
+    }
+    /deep/.btn-prev i {
+      color: white;
     }
   }
   .infoBox {
     width: 500px;
-    border: 1px solid #eee;
+
     position: absolute;
     z-index: 100;
+    background: #303030;
     top: 15%;
     right: 25%;
-    background-color: #fff;
+
     .el-card {
+      color: white;
       background-color: transparent;
       span {
         font-size: 16px;
@@ -777,14 +745,30 @@
     }
     .contentBox {
       margin: 0 aotu 10px;
-      height: 610px;
+      height: 500px;
       overflow: auto;
       p {
-        // background-color: #bfa;
-        // margin-bottom: 10px;
         font-size: 14px;
       }
     }
   }
+  /deep/ .el-dialog {
+    background: #303030;
+  }
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
+  }
+  /deep/.el-dialog__title {
+    color: white;
+  }
+
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+  /deep/.el-cascader .el-input__inner {
+    border-color: #fff !important;
+  }
 }
 </style>
diff --git a/src/views/datamanage/domainManage.vue b/src/views/datamanage/domainManage.vue
index f8ba528..dcd291c 100644
--- a/src/views/datamanage/domainManage.vue
+++ b/src/views/datamanage/domainManage.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="authorityManagement_box">
-    <My-bread :list="[`${$t('dataManage.dataManage')}`, `鍊煎煙绠$悊`]"></My-bread>
+  <div class="domainBox">
+    <My-bread
+      :list="[
+        `${$t('dataManage.dataManage')}`,
+        `${$t('dataManage.rangeManage')}`,
+      ]"
+    ></My-bread>
     <el-divider />
     <div class="mainBox">
       <div class="leftTree">
@@ -25,20 +30,23 @@
                 @click="queryInfo('queryForm')"
                 icon="el-icon-search"
                 size="small"
-                >{{ $t("common.iquery") }}</el-button
+                class="primary"
+                >{{ $t('common.iquery') }}</el-button
               >
               <el-button
                 @click="resetInfo('queryForm')"
                 icon="el-icon-delete"
                 size="small"
-                >{{ $t("common.empty") }}</el-button
+                type="info"
+                >{{ $t('common.empty') }}</el-button
               >
               <el-button
                 v-if="btnStatus.insert"
                 @click="showAddDialog"
                 icon="el-icon-plus"
                 size="small"
-                >{{ $t("common.append") }}</el-button
+                type="success"
+                >{{ $t('common.append') }}</el-button
               >
               <el-button
                 v-if="btnStatus.delete"
@@ -46,7 +54,7 @@
                 type="danger"
                 size="small"
                 icon="el-icon-delete"
-                >{{ $t("common.delete") }}</el-button
+                >{{ $t('common.delete') }}</el-button
               >
             </el-form-item>
           </el-form>
@@ -54,11 +62,8 @@
         <div class="table_box">
           <el-table
             :data="tableData"
-            border
-            style="width: 100%"
-            fit
             @selection-change="handleSelectionChange"
-            height="99%"
+            height="100%"
           >
             <el-table-column type="selection" width="50" />
             <el-table-column
@@ -110,23 +115,24 @@
 
             <el-table-column min-width="150" :label="$t('common.operate')">
               <template slot-scope="scope"
-                ><el-button @click="showDetail(scope.row)" size="small"
-                  >鏌ョ湅</el-button
+                ><el-button
+                  class="primary"
+                  @click="showDetail(scope.row)"
+                  size="small"
+                  >{{ $t('common.details') }}</el-button
                 >
                 <el-button
                   v-if="btnStatus.update"
+                  type="warning"
                   @click="handleEdit(scope.$index, scope.row)"
                   size="small"
-                  >{{ $t("common.update") }}</el-button
+                  >{{ $t('common.update') }}</el-button
                 >
               </template>
             </el-table-column>
           </el-table>
         </div>
-        <div
-          class="pagination_box"
-          style="margin-top: 20px; margin-left: 200px"
-        >
+        <div class="pagination_box" style="margin-top: 20px">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
@@ -143,25 +149,49 @@
     <div class="infoBox" v-show="showinfoBox">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>璇︾粏淇℃伅</span>
+          <span>{{ $t('common.details') }}</span>
           <div style="float: right; cursor: pointer" @click="closeDetial">
             <i class="el-icon-close"></i>
           </div>
         </div>
         <div class="contentBox">
-          <p>鏁版嵁鍚嶇О锛歿{ itemdetail.domName }}</p>
+          <p>
+            {{ $t('dataManage.domainManage.domName') }}锛歿{
+              itemdetail.domName
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>鎵�灞炵洰褰曪細{{ itemdetail.path }}</p>
+          <p>
+            {{ $t('dataManage.domainManage.domDesc') }}锛歿{
+              itemdetail.domDesc
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>鍒涘缓鏃堕棿锛歿{ itemdetail.create_time }}</p>
+          <p>
+            {{ $t('dataManage.domainManage.domCode') }}锛歿{
+              itemdetail.domCode
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>鍒涘缓浜哄憳锛歿{ itemdetail.create_user }}</p>
+          <p>
+            {{ $t('dataManage.domainManage.codeDesc') }}锛歿{
+              itemdetail.codeDesc
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>涓婁紶鍗曚綅锛歿{ itemdetail.up_unit }}</p>
+          <p>{{ $t('dataManage.domainManage.bsm') }}锛歿{ itemdetail.bsm }}</p>
           <el-divider></el-divider>
-          <p>鏁版嵁鐘舵�侊細{{ itemdetail.status }}</p>
+          <p>
+            {{ $t('dataManage.domainManage.level') }}锛歿{ itemdetail.level }}
+          </p>
           <el-divider></el-divider>
-          <p>鏁版嵁鐗堟湰锛歿{ itemdetail.version }}</p>
+          <p>
+            {{ $t('dataManage.domainManage.orderid') }}锛歿{
+              itemdetail.orderid
+            }}
+          </p>
+          <el-divider></el-divider>
+          <p>{{ $t('dataManage.domainManage.bak') }}锛歿{ itemdetail.bak }}</p>
         </div>
       </el-card>
     </div>
@@ -229,7 +259,7 @@
           type="primary"
           @click="sendEdit('editForm')"
           v-loading.fullscreen.lock="fullscreenLoading"
-          >{{ $t("common.confirm") }}</el-button
+          >{{ $t('common.confirm') }}</el-button
         >
       </div>
       <div v-else slot="footer" class="dialog-footer">
@@ -239,7 +269,7 @@
           type="primary"
           @click="sendAdd('editForm')"
           v-loading.fullscreen.lock="fullscreenLoading"
-          >{{ $t("common.confirm") }}</el-button
+          >{{ $t('common.confirm') }}</el-button
         >
       </div>
     </el-dialog>
@@ -253,33 +283,33 @@
   insertDomain,
   deleteDomain,
   updateDomain,
-} from "../../api/api";
-import MyBread from "../../components/MyBread.vue";
+} from '../../api/api';
+import MyBread from '../../components/MyBread.vue';
 export default {
-  name: "domainManage",
+  name: 'domainManage',
   components: { MyBread },
   data() {
     return {
       multipleSelection: [],
-      behavior: "",
-      formLabelWidth: "100px",
+      behavior: '',
+      formLabelWidth: '100px',
       dialogFormVisible: false,
       showinfoBox: false,
       fullscreenLoading: false,
       itemdetail: {},
       editForm: {},
       queryForm: {
-        code: "",
+        code: '',
       },
       insertform: {},
-      initialForm: "",
+      initialForm: '',
 
       tableData: [],
       count: 0,
       rowFlag: null,
       listData: {
-        ns: "",
-        tab: "",
+        ns: '',
+        tab: '',
         pageIndex: 1,
         pageSize: 10,
       },
@@ -293,17 +323,17 @@
       },
       domainData: [
         {
-          tabDesc: "鍩虹鏁版嵁",
+          tabDesc: '鍩虹鏁版嵁',
           children: [],
         },
         {
-          tabDesc: "涓氬姟鏁版嵁",
+          tabDesc: '涓氬姟鏁版嵁',
           children: [],
         },
       ],
       defaultProps: {
-        children: "children",
-        label: "tabDesc",
+        children: 'children',
+        label: 'tabDesc',
       },
     };
   },
@@ -338,8 +368,8 @@
     },
     getAllTabelData() {
       getDomainTabs().then((res) => {
-        let bdres = res.result.filter((item) => item.ns == "bd");
-        let bsres = res.result.filter((item) => item.ns == "bs");
+        let bdres = res.result.filter((item) => item.ns == 'bd');
+        let bsres = res.result.filter((item) => item.ns == 'bs');
         this.domainData[0].children = bdres;
         this.domainData[1].children = bsres;
       });
@@ -362,7 +392,7 @@
           this.tableData = res.result;
           this.count = res.count;
         } else {
-          console.log("鏌ヨ鎺ュ彛鎶ラ敊");
+          console.log('鏌ヨ鎺ュ彛鎶ラ敊');
           this.$notify.error({
             title: res.code,
             message: res.result,
@@ -373,19 +403,19 @@
     resetInfo() {
       this.queryForm = {};
       this.$store.state.verCateNode = {};
-      this.$bus.$emit("clearTressLabel", true);
+      this.$bus.$emit('clearTressLabel', true);
       this.getAllTabelData();
     },
     // 鍒犻櫎澶氭潯
     deleteInfo() {
-      this.$confirm("纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           if (this.multipleSelection.length == 0) {
-            alert("璇烽�夋嫨瑕佸垹闄ょ殑瀵硅薄");
+            alert('璇烽�夋嫨瑕佸垹闄ょ殑瀵硅薄');
             return;
           } else {
             var std = [];
@@ -396,8 +426,8 @@
               console.log(res);
               if (res.code == 200) {
                 this.$message({
-                  type: "success",
-                  message: "鍒犻櫎鎴愬姛!",
+                  type: 'success',
+                  message: '鍒犻櫎鎴愬姛!',
                 });
                 this.multipleSelection = [];
                 getSingleTab(this.listData).then((res) => {
@@ -408,18 +438,18 @@
                   }, 500);
                 });
               } else {
-                this.$message.error("鍒犻櫎澶辫触");
+                this.$message.error('鍒犻櫎澶辫触');
                 this.multipleSelection = [];
               }
             });
           }
         })
         .catch(() => {
-          this.$message("宸插彇娑堝垹闄�");
+          this.$message('宸插彇娑堝垹闄�');
         });
     },
     showAddDialog() {
-      this.behavior = "鏂板鐢ㄦ埛";
+      this.behavior = '鏂板鐢ㄦ埛';
       this.editForm = {};
       this.dialogFormVisible = true;
     },
@@ -438,8 +468,8 @@
                 this.fullscreenLoading = false;
                 if (res.code == 200) {
                   this.$message({
-                    message: "娣诲姞鎴愬姛",
-                    type: "success",
+                    message: '娣诲姞鎴愬姛',
+                    type: 'success',
                   });
                   getSingleTab(this.listData).then((res) => {
                     setTimeout(() => {
@@ -454,17 +484,17 @@
               }, 500);
             })
             .catch((res) => {
-              alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+              alert('淇敼澶辫触锛岃閲嶈瘯锛�');
               this.fullscreenLoading = false;
             });
         } else {
-          console.log("error submit!!");
+          console.log('error submit!!');
           return false;
         }
       });
     },
     handleClose(done) {
-      this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴锛�")
+      this.$confirm('鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴锛�')
         .then((_) => {
           this.editForm = {};
           done();
@@ -486,7 +516,7 @@
       this.dialogFormVisible = true;
       this.initialForm = JSON.stringify(row); //澶囦唤
       this.editForm = row;
-      this.behavior = "淇敼淇℃伅";
+      this.behavior = '淇敼淇℃伅';
     },
     editFromDataClose() {
       this.dialogFormVisible = false;
@@ -495,10 +525,10 @@
 
     // 鎻愪氦淇敼
     sendEdit() {
-      this.$confirm("鏄惁纭畾缂栬緫?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('鏄惁纭畾缂栬緫?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           this.dialogFormVisible = false;
@@ -514,22 +544,22 @@
                   }, 500);
                 });
                 this.$message({
-                  message: "淇敼鎴愬姛",
-                  type: "success",
+                  message: '淇敼鎴愬姛',
+                  type: 'success',
                 });
                 this.editForm = {};
               } else {
-                alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+                alert('淇敼澶辫触锛岃閲嶈瘯锛�');
                 this.fullscreenLoading = false;
               }
             })
             .catch(() => {
-              alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+              alert('淇敼澶辫触锛岃閲嶈瘯锛�');
               this.fullscreenLoading = false;
             });
         })
         .catch(() => {
-          alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+          alert('淇敼澶辫触锛岃閲嶈瘯锛�');
           this.fullscreenLoading = false;
         });
     },
@@ -570,31 +600,35 @@
 </script>
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
-.authorityManagement_box {
-  background: rgb(240, 242, 245);
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  .el-input {
-    width: 300px !important;
-  }
+.domainBox {
+  height: 80%;
+  width: 97%;
+  position: absolute;
   .mainBox {
+    width: 100%;
+    height: 92%;
     display: flex;
     justify-content: space-between;
     .leftTree {
       width: 15%;
-      height: 90vh;
-      border-radius: 10px;
-      overflow: auto;
+      height: 96%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      max-height: 670px;
+      overflow-y: auto;
     }
     .right {
-      width: 84%;
-      height: 92vh;
-      // background-color: #bfa;
+      width: 80%;
+      height: 96%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      max-height: 670px;
+      overflow-y: auto;
       .inquire {
         margin-bottom: 10px;
-        background: #fff;
+
         border-radius: 5px;
         border: 1px solid rgb(202, 201, 204);
         .el-form-item {
@@ -603,51 +637,13 @@
       }
       .table_box {
         width: 100%;
-        height: 90%;
+        height: 80%;
         margin: 0 auto;
         overflow: auto;
-        background: #fff;
-        // .el-table {
-        //   height: 100%;
-        // }
+
         .el-table /deep/ th.el-table__cell > .cell {
           padding: 15px !important;
         }
-        // .el-table /deep/ .el-table__header-wrapper tr th {
-        //   background-color: rgb(255, 255, 255) !important;
-        //   color: rgb(0, 0, 0);
-        // }
-        // // 淇敼姣忚鏍峰紡锛�
-        // .el-table /deep/ .el-table__row {
-        //   background-color: rgba(255, 255, 255) !important;
-        //   color: rgb(0, 0, 0);
-        // }
-        // .el-table /deep/ .el-table__body tr.current-row > td {
-        //   background-color: rgb(211, 211, 211) !important;
-        // }
-        // .el-table /deep/ .el-table__body tr:hover > td {
-        //   background-color: rgb(211, 211, 211) !important;
-        // }
-        // // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
-        // .el-table /deep/ td,
-        // .el-table /deep/ th.is-leaf {
-        //   border-bottom: 1px solid #eee;
-        //   border-right: 1px solid #eee;
-        // }
-        // .el-table /deep/ .el-table__cell {
-        //   padding: 0;
-        // }
-        // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
-        // .el-table /deep/ .el-table__header tr,
-        // .el-table /deep/ .el-table__header th {
-        //   height: 40px;
-        // }
-        // .el-table__body tr,
-        // .el-table__body td {
-        //   height: 40px;
-        //   padding: 0;
-        // }
-        // 璁剧疆琛ㄦ牸杈规棰滆壊锛�
 
         .el-table--border::after,
         .el-table--group::after {
@@ -656,44 +652,150 @@
         .el-table::before {
           height: 0;
         }
-        //   a {
-        //     color: #000;
-        //   }
       }
     }
   }
 
   .infoBox {
     width: 500px;
-    border: 1px solid #eee;
+
     position: absolute;
     z-index: 100;
     top: 15%;
     right: 25%;
-    background-color: #fff;
+    color: white;
+    background-color: #303030;
     .el-card {
       background-color: transparent;
+      color: white;
       span {
         font-size: 16px;
         font-weight: 600;
+        color: white;
       }
     }
     .contentBox {
       margin: 0 aotu 10px;
-      height: 600px;
+      height: 500px;
       overflow: auto;
+      color: white;
+      overflow-y: auto;
       p {
-        // background-color: #bfa;
-        // margin-bottom: 10px;
+        color: white;
         font-size: 14px;
       }
+    }
+  }
+  .pagination_box {
+    margin-top: 20px;
+    /deep/.el-input__inner {
+      background-color: transparent !important;
+      border: 1px solid;
+      color: white;
+    }
+    /deep/.el-pagination__total {
+      color: white;
+    }
+    /deep/.el-pagination__jump {
+      color: white;
+    }
+    /deep/.el-pager li.active {
+      color: #409eff;
+    }
+    /deep/.el-pager li {
+      color: white;
+      background: transparent;
+    }
+    /deep/.el-pager li {
+      color: white;
+    }
+    /deep/.btn-prev {
+      background: transparent;
+    }
+    /deep/.btn-next {
+      background: transparent;
+    }
+    /deep/.btn-next i {
+      color: white;
+    }
+    /deep/.btn-prev i {
+      color: white;
+    }
+  }
+  /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+  /deep/ .el-table {
+    background-color: transparent;
+
+    th,
+    td {
+      background-color: transparent;
+    }
+    .el-table__expanded-cell {
+      background-color: transparent !important;
+    }
+
+    // 琛ㄥご鑳屾櫙鑹�
+    th.el-table__cell {
+      background-color: #303030;
+      color: #fff;
+    }
+    tr > td {
+      background-color: #303030;
+      color: #fff;
+    }
+
+    // hover鏁堟灉
+    tr:hover > td {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      // text-align: center;
+    }
+
+    // 婊氬姩鏉″楂�
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      /*婊氬姩鏉″搴�*/
+      height: 5px;
+      /*婊氬姩鏉¢珮搴�*/
+    }
+    /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-track {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+      border-radius: 10px;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
     }
   }
   /deep/ .el-dialog {
     width: 620px !important;
     margin-top: 10vh !important;
   }
-
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
   /deep/.el-dialog .el-input__inner {
     width: 300px;
   }
@@ -707,5 +809,21 @@
     margin: 0 auto;
     justify-content: center;
   }
+  .primary {
+    background: #409eff;
+    border: #409eff;
+    color: white;
+  }
+  /deep/ .el-dialog {
+    background: #303030;
+  }
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
+  }
+  /deep/.el-dialog__title {
+    color: white;
+  }
 }
 </style>
diff --git a/src/views/datamanage/metadataManage.vue b/src/views/datamanage/metadataManage.vue
index afecd65..1ab29bd 100644
--- a/src/views/datamanage/metadataManage.vue
+++ b/src/views/datamanage/metadataManage.vue
@@ -9,7 +9,7 @@
     <el-divider />
     <div class="inquire">
       <el-form ref="queryForm" :model="queryForm" :inline="true">
-        <el-form-item label="鍏抽敭瀛�" prop="name">
+        <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
           <el-input
             v-model="queryForm.name"
             :placeholder="$t('common.pleaseInput')"
@@ -19,9 +19,9 @@
           <el-button
             @click="queryInfo()"
             icon="el-icon-search"
-            type="primary"
+            class="primary"
             size="small"
-            >鏌ヨ</el-button
+            >{{ $t('common.iquery') }}</el-button
           >
         </el-form-item>
         <el-form-item>
@@ -30,7 +30,7 @@
             icon="el-icon-refresh"
             type="info"
             size="small"
-            >閲嶇疆</el-button
+            >{{ $t('common.reset') }}</el-button
           >
         </el-form-item>
 
@@ -40,7 +40,7 @@
             size="small"
             @click="showAddDialog"
             icon="el-icon-plus"
-            >{{ $t("common.append") }}</el-button
+            >{{ $t('common.append') }}</el-button
           >
         </el-form-item>
         <el-form-item v-if="btnStatus.delete">
@@ -49,7 +49,7 @@
             size="small"
             @click="deleteMetaInfo"
             icon="el-icon-delete"
-            >{{ $t("common.delete") }}</el-button
+            >{{ $t('common.delete') }}</el-button
           >
         </el-form-item>
         <el-form-item v-if="btnStatus.download">
@@ -58,7 +58,7 @@
             icon="el-icon-download"
             type="success"
             size="small"
-            >涓嬭浇</el-button
+            >{{ $t('common.download') }}</el-button
           >
         </el-form-item>
       </el-form>
@@ -68,45 +68,54 @@
         <div class="table_box">
           <el-table
             :data="tableData"
-            border
             style="width: 100%"
-            fit
             @selection-change="handleSelectionChange"
             height="99%"
           >
             <el-table-column type="selection" width="55" />
-            <el-table-column min-width="150" prop="name" label="鍚嶇О" />
-            <el-table-column min-width="100" prop="format" label="鏍煎紡" />
-            <el-table-column min-width="100" prop="sizes" label="澶у皬" />
+            <el-table-column prop="name" :label="$t('common.name')" />
+            <el-table-column prop="format" :label="$t('common.format')" />
+            <el-table-column prop="sizes" :label="$t('common.size')" />
             <el-table-column
-              min-width="100"
               prop="createUser"
-              label="鍒涘缓浜哄憳"
+              :label="$t('dataManage.vmobj.createonuser')"
             />
             <el-table-column
-              min-width="100"
               prop="createTime"
-              label="鍒涘缓鏃堕棿"
+              :label="$t('dataManage.vmobj.createontime')"
             />
-            <el-table-column min-width="100" prop="cs" label="鍧愭爣绯荤粺" />
-            <el-table-column min-width="100" prop="scale" label="姣斾緥灏�" />
-            <el-table-column min-width="100" prop="resolution" label="鍒嗚鲸鐜�" />
+            <el-table-column
+              prop="cs"
+              :label="$t('dataManage.vmobj.coordSystem')"
+            />
+            <el-table-column
+              prop="scale"
+              :label="$t('dataManage.vmobj.scale')"
+            />
+            <el-table-column
+              prop="resolution"
+              :label="$t('dataManage.vmobj.resolpower')"
+            />
 
-            <el-table-column min-width="100" prop="descr" label="鎻忚堪" />
-            <el-table-column min-width="100" label="鎿嶄綔">
+            <el-table-column
+              prop="descr"
+              :label="$t('dataManage.vmobj.describe')"
+            />
+            <el-table-column min-width="100" :label="$t('common.operate')">
               <template slot-scope="scope">
-                <el-link @click="showDetail(scope.row)">鏌ョ湅</el-link>
-                <el-link @click="editInfo(scope.row)" style="margin-left: 10px"
-                  >淇敼</el-link
+                <el-link style="color: white" @click="showDetail(scope.row)">{{
+                  $t('common.details')
+                }}</el-link>
+                <el-link
+                  @click="editInfo(scope.row)"
+                  style="margin-left: 10px; color: white"
+                  >{{ $t('common.edit') }}</el-link
                 >
               </template>
             </el-table-column>
           </el-table>
         </div>
-        <div
-          style="margin-top: 20px; margin-left: 400px"
-          class="pagination_box"
-        >
+        <div style="margin-top: 10px" class="pagination_box">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
@@ -123,63 +132,106 @@
     <div class="infoBox" v-show="showinfoBox">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>璇︾粏淇℃伅</span>
+          <span>{{ $t('common.details') }}</span>
           <div style="float: right; cursor: pointer" @click="closeDetial">
             <i class="el-icon-close"></i>
           </div>
         </div>
         <div class="contentBox">
-          <p>鏁版嵁鍚嶇О锛歿{ itemdetail.name }}</p>
+          <p>{{ $t('dataManage.vmobj.name') }}锛歿{ itemdetail.name }}</p>
           <el-divider></el-divider>
-          <p>鏁版嵁绫诲瀷锛歿{ itemdetail.type }}</p>
+          <p>{{ $t('dataManage.vmobj.type') }}锛歿{ itemdetail.type }}</p>
           <el-divider></el-divider>
-          <p>鏁版嵁鏍煎紡锛歿{ itemdetail.format }}</p>
+          <p>{{ $t('common.format') }}锛歿{ itemdetail.format }}</p>
           <el-divider></el-divider>
-          <p>鍒涘缓鏃堕棿锛歿{ itemdetail.createTime }}</p>
+          <p>
+            {{ $t('dataManage.vmobj.createontime') }}锛歿{
+              itemdetail.createTime
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>鍒涘缓浜哄憳锛歿{ itemdetail.createUser }}</p>
+          <p>
+            {{ $t('dataManage.vmobj.createonuser') }}锛歿{
+              itemdetail.createUser
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>鏇存柊鏃堕棿锛歿{ itemdetail.updateTime }}</p>
+          <p>
+            {{ $t('dataManage.vmobj.updateontime') }}锛歿{
+              itemdetail.updateTime
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>鏇存柊浜哄憳锛歿{ itemdetail.updateUser }}</p>
+          <p>
+            {{ $t('dataManage.vmobj.updateonuser') }}锛歿{
+              itemdetail.updateUser
+            }}
+          </p>
           <el-divider></el-divider>
-          <p>鍧愭爣绯荤粺锛歿{ itemdetail.cs }}</p>
+          <p>{{ $t('dataManage.vmobj.coordSystem') }}锛歿{ itemdetail.cs }}</p>
           <el-divider></el-divider>
-          <p>姣斾緥灏簕{ itemdetail.scale }}</p>
+          <p>{{ $t('dataManage.vmobj.scale') }}锛歿{ itemdetail.scale }}</p>
           <el-divider></el-divider>
-          <p>鍒嗚鲸鐜噞{ itemdetail.resolution }}</p>
+          <p>
+            {{ $t('dataManage.vmobj.resolpower') }}锛歿{ itemdetail.resolution }}
+          </p>
           <el-divider></el-divider>
-          <p>鎻忚堪锛歿{ itemdetail.descr }}</p>
+          <p>{{ $t('dataManage.vmobj.describe') }}锛歿{ itemdetail.descr }}</p>
         </div>
       </el-card>
     </div>
     <el-dialog
       width="510px"
       top="5vh"
-      :title="behavior"
+      :title="
+        behavior == '鏂板鐢ㄦ埛'
+          ? `${$t('common.append')}`
+          : `${$t('common.update')}`
+      "
       :visible.sync="dialogFormVisible"
       :before-close="handleClose"
     >
       <el-form :model="editForm" ref="editForm">
-        <el-form-item label="鏁版嵁鍚嶇О" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.vmobj.name')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="editForm.name" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鏁版嵁绫诲瀷" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.vmobj.type')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="editForm.type" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鏁版嵁鏍煎紡" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('common.format')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="editForm.format" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鍧愭爣绯荤粺" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.vmobj.coordSystem')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="editForm.cs" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="姣斾緥灏�" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.vmobj.scale')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="editForm.scale" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鍒嗚鲸鐜�" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.vmobj.resolpower')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="editForm.resolution" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鎻忚堪" :label-width="formLabelWidth">
+        <el-form-item
+          :label="$t('dataManage.vmobj.describe')"
+          :label-width="formLabelWidth"
+        >
           <el-input v-model="editForm.descr" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
@@ -239,17 +291,17 @@
   updateMeta,
   deleteMeta,
   insertMeta,
-} from "../../api/api";
-import MyBread from "../../components/MyBread.vue";
+} from '../../api/api';
+import MyBread from '../../components/MyBread.vue';
 export default {
-  name: "metadataManage",
+  name: 'metadataManage',
   components: { MyBread },
   data() {
     var repasswordValidator = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
+      if (value === '') {
+        callback(new Error('璇峰啀娆¤緭鍏ュ瘑鐮�'));
       } else if (value !== this.codeForm.password) {
-        callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
+        callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!'));
       } else {
         callback();
       }
@@ -258,26 +310,26 @@
       showCodeBox: false,
       value: true,
       multipleSelection: [],
-      formLabelWidth: "120px",
+      formLabelWidth: '120px',
       dialogFormVisible: false,
       editForm: {},
       showinfoBox: false,
       fullscreenLoading: false,
       itemdetail: {},
       queryForm: {
-        name: "",
+        name: '',
       },
-      behavior: "",
-      initialForm: "",
+      behavior: '',
+      initialForm: '',
       codeForm: {
-        password: "",
-        repassword: "",
+        password: '',
+        repassword: '',
       },
       rules: {
-        password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }],
+        password: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }],
         repassword: [
-          { required: true, message: "璇疯緭鍏ョ‘璁ゅ瘑鐮�", trigger: "blur" },
-          { validator: repasswordValidator, trigger: "blur" },
+          { required: true, message: '璇疯緭鍏ョ‘璁ゅ瘑鐮�', trigger: 'blur' },
+          { validator: repasswordValidator, trigger: 'blur' },
         ],
       },
       tableData: [],
@@ -313,20 +365,20 @@
     },
     ShowWindowFly(res) {
       console.log(res);
-      if (res == "") return;
-      if (res.indexOf(".xls") != -1) {
+      if (res == '') return;
+      if (res.indexOf('.xls') != -1) {
         this.showMetadata(res, true);
-      } else if (res.indexOf(".doc") != -1) {
+      } else if (res.indexOf('.doc') != -1) {
         this.showMetadata(res, true);
-      } else if (res.indexOf(".png") != -1) {
+      } else if (res.indexOf('.png') != -1) {
         this.showMetadata(res, true);
-      } else if (res.indexOf(".jpg") != -1) {
+      } else if (res.indexOf('.jpg') != -1) {
         this.showMetadata(res, true);
-      } else if (res.indexOf(".pdf") != -1) {
+      } else if (res.indexOf('.pdf') != -1) {
         this.showMetadata(res, true);
-      } else if (res.indexOf(".fly") != -1) {
+      } else if (res.indexOf('.fly') != -1) {
         this.showMetadata(res, false);
-      } else if (res.indexOf(".mpt") != -1) {
+      } else if (res.indexOf('.mpt') != -1) {
         this.showMetadata(res, false);
       }
     },
@@ -335,12 +387,12 @@
       if (flag == true) {
         metaUrl = res;
       } else if (flag == false) {
-        metaUrl = ifreamUrl + "/LFWeb/MetaPop.html?name=" + res;
+        metaUrl = ifreamUrl + '/LFWeb/MetaPop.html?name=' + res;
       }
       window.open(
         metaUrl,
-        "",
-        "height=800, width=1500, top=150, left=350, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"
+        '',
+        'height=800, width=1500, top=150, left=350, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'
       );
     },
     // 璇锋眰鏁版嵁鍐呭
@@ -362,7 +414,7 @@
           this.tableData = res.result;
           this.count = res.count;
         } else {
-          console.log("鏌ヨ鎺ュ彛鎶ラ敊");
+          console.log('鏌ヨ鎺ュ彛鎶ラ敊');
           this.$notify.error({
             title: res.code,
             message: res.result,
@@ -376,7 +428,7 @@
     },
     //鏂板鎸夐挳
     showAddDialog() {
-      this.behavior = "鏂板鐢ㄦ埛";
+      this.behavior = '鏂板鐢ㄦ埛';
       this.editForm = {};
       this.dialogFormVisible = true;
     },
@@ -396,8 +448,8 @@
                 if (res.code == 200) {
                   this.getMetaData({ pageIndex: 1, pageSize: 10 });
                   this.$message({
-                    message: "娣诲姞鎴愬姛",
-                    type: "success",
+                    message: '娣诲姞鎴愬姛',
+                    type: 'success',
                   });
                   this.editForm = {};
                   this.dialogFormVisible = false;
@@ -405,11 +457,11 @@
               }, 500);
             })
             .catch((res) => {
-              alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+              alert('淇敼澶辫触锛岃閲嶈瘯锛�');
               this.fullscreenLoading = false;
             });
         } else {
-          console.log("error submit!!");
+          console.log('error submit!!');
           return false;
         }
       });
@@ -420,10 +472,10 @@
     },
     // 鍒犻櫎澶氭潯
     deleteMetaInfo() {
-      this.$confirm("纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('纭畾鏄惁鍒犻櫎鎵�閫夊唴瀹�?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           var std = [];
@@ -433,19 +485,19 @@
           deleteMeta({ ids: std.toString() }).then((res) => {
             if (res.code == 200) {
               this.$message({
-                type: "success",
-                message: "鍒犻櫎鎴愬姛!",
+                type: 'success',
+                message: '鍒犻櫎鎴愬姛!',
               });
               this.multipleSelection = [];
               this.getMetaData({ pageIndex: 1, pageSize: 10 });
             } else {
-              this.$message.error("鍒犻櫎澶辫触");
+              this.$message.error('鍒犻櫎澶辫触');
               this.multipleSelection = [];
             }
           });
         })
         .catch(() => {
-          this.$message("宸插彇娑堝垹闄�");
+          this.$message('宸插彇娑堝垹闄�');
         });
     },
 
@@ -468,12 +520,12 @@
       delete row.updateUser;
       delete row.updateUser;
       this.initialForm = JSON.stringify(row); //澶囦唤
-      this.behavior = "淇敼淇℃伅";
+      this.behavior = '淇敼淇℃伅';
       this.editForm = JSON.parse(JSON.stringify(row));
       this.dialogFormVisible = true;
     },
     handleClose(done) {
-      this.$confirm("纭鍏抽棴锛�")
+      this.$confirm('纭鍏抽棴锛�')
         .then((_) => {
           this.editForm = {};
           done();
@@ -483,10 +535,10 @@
 
     // 鎻愪氦淇敼
     sendEdit() {
-      this.$confirm("鏄惁纭畾缂栬緫?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('鏄惁纭畾缂栬緫?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(() => {
           this.dialogFormVisible = false;
@@ -496,8 +548,8 @@
               if (res.code == 200) {
                 this.getMetaData({ pageIndex: 1, pageSize: 10 });
                 this.$message({
-                  message: "淇敼鎴愬姛",
-                  type: "success",
+                  message: '淇敼鎴愬姛',
+                  type: 'success',
                 });
                 this.editForm = {};
                 this.dialogFormVisible = false;
@@ -506,7 +558,7 @@
           });
         })
         .catch(() => {
-          alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+          alert('淇敼澶辫触锛岃閲嶈瘯锛�');
           this.fullscreenLoading = false;
         });
     },
@@ -518,33 +570,15 @@
     download() {},
     closeDown() {
       this.showCodeBox = false;
-      this.codeForm.password = "";
-      this.codeForm.repassword = "";
+      this.codeForm.password = '';
+      this.codeForm.repassword = '';
     },
     downFormData() {
       if (this.multipleSelection.length == 0) {
-        alert("璇峰厛閫夋嫨瑕佷笅杞界殑鏂囦欢");
+        alert('璇峰厛閫夋嫨瑕佷笅杞界殑鏂囦欢');
         return;
       }
       this.showCodeBox = true;
-      // this.$prompt("璇疯緭鍏ュ瘑鐮�", "鎻愮ず", {
-      //   confirmButtonText: "纭畾",
-      //   cancelButtonText: "鍙栨秷",
-      //   inputType: "password",
-      //   inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
-      //   inputErrorMessage: "杈撳叆涓嶈兘涓虹┖",
-      // })
-      //   .then(() => {
-      //     let ids = "";
-      //     this.multipleSelection.forEach((e) => {
-      //       ids += `id=${e.id}&`;
-      //     });
-      //     let res = ids.substring(0, ids.length - 1);
-      //     console.log(res);
-      //     let url = "http://192.168.20.106/LFServer/Meta/Downloads?" + res;
-      //     window.open(url);
-      //   })
-      //   .catch(() => {});
     },
 
     handleSizeChange(val) {
@@ -562,28 +596,29 @@
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
 .authorityManagement_box {
-  background: rgb(240, 242, 245);
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
+  height: 81%;
+  width: 97%;
+  position: absolute;
   box-sizing: border-box;
+
   .inquire {
     position: relative;
-    height: 50px;
     overflow: auto;
-    padding: 8px;
-    margin-top: 20px;
-    background: #fff;
+    padding-bottom: 8px;
+    border: 1px solid white;
     border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    margin-bottom: 20px;
+    padding: 1%;
     .el-form-item {
       margin: 5px;
     }
   }
   .bottom {
-    width: 100%;
-    height: 83%;
+    width: 98%;
+    margin-top: 1%;
+    height: 77%;
+    padding: 1%;
+    border: 1px solid white;
+    border-radius: 5px;
     .rightTable {
       height: 100%;
       width: 100%;
@@ -592,78 +627,29 @@
         height: 93%;
         margin: 0 auto;
         overflow: auto;
-        background: #fff;
-        .el-table {
-          height: 100%;
-          // overflow: auto;
-        }
-        .el-table /deep/ .el-table__header-wrapper tr th {
-          background-color: rgb(255, 255, 255) !important;
-          color: rgb(0, 0, 0);
-        }
-        // 淇敼姣忚鏍峰紡锛�
-        .el-table /deep/ .el-table__row {
-          background-color: rgba(255, 255, 255) !important;
-          color: rgb(0, 0, 0);
-        }
-        .el-table /deep/ .el-table__body tr.current-row > td {
-          background-color: rgb(211, 211, 211) !important;
-        }
-        .el-table /deep/ .el-table__body tr:hover > td {
-          background-color: rgb(211, 211, 211) !important;
-        }
-        // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
-        .el-table /deep/ td,
-        .el-table /deep/ th.is-leaf {
-          border-bottom: 1px solid #eee;
-          border-right: 1px solid #eee;
-        }
-        .el-table /deep/ .el-table__cell {
-          padding: 0;
-        }
-        // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
-        .el-table /deep/ .el-table__header tr,
-        .el-table /deep/ .el-table__header th {
-          height: 40px;
-        }
-        .el-table__body tr,
-        .el-table__body td {
-          height: 40px;
-          padding: 0;
-        }
-        // 璁剧疆琛ㄦ牸杈规棰滆壊锛�
-
-        .el-table--border::after,
-        .el-table--group::after {
-          width: 0;
-        }
-        .el-table::before {
-          height: 0;
-        }
-        //   a {
-        //     color: #000;
-        //   }
       }
     }
   }
   .infoBox {
     width: 500px;
-    border: 1px solid #eee;
     position: absolute;
     z-index: 100;
-    top: 15%;
+    top: 10%;
     right: 25%;
-    background-color: #fff;
+    background: #303030;
+    color: #fff;
     .el-card {
       background-color: transparent;
+      color: #fff;
       span {
+        color: #fff;
         font-size: 16px;
         font-weight: 600;
       }
     }
     .contentBox {
       margin: 0 aotu 10px;
-      height: 600px;
+      height: 500px;
       overflow: auto;
       p {
         // background-color: #bfa;
@@ -672,24 +658,7 @@
       }
     }
   }
-  /deep/ .el-dialog {
-    // width: 500px !important;
-    // margin-top: 10vh !important;
-  }
 
-  /deep/.el-dialog .el-input__inner {
-    width: 300px;
-  }
-  /deep/ .el-dialog__body {
-    padding: 0px 30px;
-  }
-  /deep/ .el-dialog__footer {
-    padding-top: 0 !important;
-    width: 200px;
-    display: flex;
-    margin: 0 auto;
-    justify-content: center;
-  }
   .dotClass {
     width: 10px;
     height: 10px;
@@ -702,10 +671,132 @@
     top: 20%;
     left: 50%;
     padding: 20px;
-    background-color: #fff;
+
     width: 20%;
     border: 1px solid #000;
     border-radius: 10px;
   }
+  /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+  /deep/ .el-table {
+    background-color: transparent;
+
+    th,
+    td {
+      background-color: transparent;
+    }
+    .el-table__expanded-cell {
+      background-color: transparent !important;
+    }
+
+    // 琛ㄥご鑳屾櫙鑹�
+    th.el-table__cell {
+      background-color: #303030;
+      color: #fff;
+    }
+    tr > td {
+      background-color: #303030;
+      color: #fff;
+    }
+
+    // hover鏁堟灉
+    tr:hover > td {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      // text-align: center;
+    }
+
+    // 婊氬姩鏉″楂�
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      /*婊氬姩鏉″搴�*/
+      height: 5px;
+      /*婊氬姩鏉¢珮搴�*/
+    }
+    /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-track {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+      border-radius: 10px;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
+    }
+  }
+  /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /deep/ .el-dialog {
+    background: #303030;
+  }
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
+  }
+  /deep/.el-dialog__title {
+    color: white;
+  }
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+  .pagination_box {
+    margin-top: 20px;
+    /deep/.el-input__inner {
+      background-color: transparent !important;
+      border: 1px solid;
+      color: white;
+    }
+    /deep/.el-pagination__total {
+      color: white;
+    }
+    /deep/.el-pagination__jump {
+      color: white;
+    }
+    /deep/.el-pager li.active {
+      color: #409eff;
+    }
+    /deep/.el-pager li {
+      color: white;
+      background: transparent;
+    }
+    /deep/.el-pager li {
+      color: white;
+    }
+    /deep/.btn-prev {
+      background: transparent;
+    }
+    /deep/.btn-next {
+      background: transparent;
+    }
+    /deep/.btn-next i {
+      color: white;
+    }
+    /deep/.btn-prev i {
+      color: white;
+    }
+  }
+  .primary {
+    background: #409eff;
+    border: #409eff;
+    color: white;
+  }
 }
 </style>
diff --git a/src/views/datamanage/styleManage.vue b/src/views/datamanage/styleManage.vue
index 1ed9d6e..7532e6f 100644
--- a/src/views/datamanage/styleManage.vue
+++ b/src/views/datamanage/styleManage.vue
@@ -53,7 +53,7 @@
           <el-table
             :data="tableData"
             style="width: 100%"
-            fit
+
             height="100%"
             @selection-change="handleSelectionChange"
           >
@@ -371,7 +371,7 @@
             style="display: none"
             @change="editFile(0)"
           />
-           <el-link 
+           <el-link
             :underline="false"
             @click="geteditFile(0)"
             style="margin-left: 10px"
@@ -399,7 +399,7 @@
             style="display: none"
             @change="editFile(1)"
           />
-           <el-link 
+           <el-link
             :underline="false"
             @click="geteditFile(1)"
             style="margin-left: 10px"
@@ -1182,10 +1182,10 @@
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
 .authorityManagement_box {
-  background: rgb(240, 242, 245);
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
+
+  height: 81%;
+  width: 97%;
+  position: absolute;
   box-sizing: border-box;
 
   .el-input {
@@ -1194,7 +1194,7 @@
 
   .searchComp {
     margin: 10px auto;
-    background: #fff;
+
     border-radius: 5px;
     border: 1px solid rgb(202, 201, 204);
     .el-form-item {
@@ -1235,60 +1235,68 @@
       width: 100%;
       .table_box {
         width: 100%;
-        height: 93%;
+        height: 90%;
         margin: 0 auto;
         overflow: auto;
-        background: #fff;
-        // .el-table {
-        //   height: 100%;
-        //   // overflow: auto;
-        // }
-        // .el-table /deep/ .el-table__header-wrapper tr th {
-        //   background-color: rgb(255, 255, 255) !important;
-        //   color: rgb(0, 0, 0);
-        // }
-        // // 淇敼姣忚鏍峰紡锛�
-        // .el-table /deep/ .el-table__row {
-        //   background-color: rgba(255, 255, 255) !important;
-        //   color: rgb(0, 0, 0);
-        // }
-        // .el-table /deep/ .el-table__body tr.current-row > td {
-        //   background-color: rgb(211, 211, 211) !important;
-        // }
-        // .el-table /deep/ .el-table__body tr:hover > td {
-        //   background-color: rgb(211, 211, 211) !important;
-        // }
-        // // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
-        // .el-table /deep/ td,
-        // .el-table /deep/ th.is-leaf {
-        //   border-bottom: 1px solid #eee;
-        //   border-right: 1px solid #eee;
-        // }
-        // .el-table /deep/ .el-table__cell {
-        //   padding: 0;
-        // }
-        // // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
-        // .el-table /deep/ .el-table__header tr,
-        // .el-table /deep/ .el-table__header th {
-        //   height: 40px;
-        // }
-        // .el-table__body tr,
-        // .el-table__body td {
-        //   height: 40px;
-        //   padding: 0;
-        // }
-        // // 璁剧疆琛ㄦ牸杈规棰滆壊锛�
+ /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+  /deep/ .el-table {
+    background-color: transparent;
 
-        // .el-table--border::after,
-        // .el-table--group::after {
-        //   width: 0;
-        // }
-        // .el-table::before {
-        //   height: 0;
-        // }
-        //   a {
-        //     color: #000;
-        //   }
+    th,
+    td {
+      background-color: transparent;
+    }
+    .el-table__expanded-cell {
+      background-color: transparent !important;
+    }
+
+    // 琛ㄥご鑳屾櫙鑹�
+    th.el-table__cell {
+      background-color: #303030;
+      color: #fff;
+    }
+    tr > td {
+      background-color: #303030;
+      color: #fff;
+    }
+
+    // hover鏁堟灉
+    tr:hover > td {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      // text-align: center;
+    }
+
+    // 婊氬姩鏉″楂�
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      /*婊氬姩鏉″搴�*/
+      height: 5px;
+      /*婊氬姩鏉¢珮搴�*/
+    }
+    /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-track {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+      border-radius: 10px;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
+    }
+  }
+
       }
     }
   }
@@ -1345,31 +1353,70 @@
       background: #ededed;
     }
   }
+   .pagination_box {
+    margin-top: 20px;
+    /deep/.el-input__inner {
+      background-color: transparent !important;
+      border: 1px solid;
+      color: white;
+    }
+    /deep/.el-pagination__total {
+      color: white;
+    }
+    /deep/.el-pagination__jump {
+      color: white;
+    }
+    /deep/.el-pager li.active {
+      color: #409eff;
+    }
+    /deep/.el-pager li {
+      color: white;
+      background: transparent;
+    }
+    /deep/.el-pager li {
+      color: white;
+    }
+    /deep/.btn-prev {
+      background: transparent;
+    }
+    /deep/.btn-next {
+      background: transparent;
+    }
+    /deep/.btn-next i {
+      color: white;
+    }
+    /deep/.btn-prev i {
+      color: white;
+    }
+  }
+ /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+
+  /deep/ .el-dialog {
+    background: #303030;
+  }
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
+  }
+  /deep/.el-dialog__title {
+    color: white;
+  }
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+  /deep/.el-cascader .el-input__inner {
+    border-color: #fff !important;
+  }
+
 }
 </style>
-<style>
-/* 鏁翠綋鏍峰紡 */
-.el-table__body-wrapper::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
 
-/* 婊氬姩鏉� */
-.el-table__body-wrapper::-webkit-scrollbar-thumb {
-  background-color: #b3d8ff;
-  border-radius: 6px;
-}
-
-/* 婊氬姩鏉¢紶鏍囩粡杩囨牱寮� */
-.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
-  background-color: #66b1ff;
-  border-radius: 8px;
-}
-
-/* 婊氬姩鏉¤建閬� */
-.el-table__body-wrapper::-webkit-scrollbar-track-piece {
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #ededed;
-}
-</style>
diff --git a/src/views/datamanage/versionManage.vue b/src/views/datamanage/versionManage.vue
index 39c0286..96cd38e 100644
--- a/src/views/datamanage/versionManage.vue
+++ b/src/views/datamanage/versionManage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="authorityManagement_box">
+  <div class="verSionBox">
     <My-bread
       :list="[
         `${$t('dataManage.dataManage')}`,
@@ -7,45 +7,46 @@
       ]"
     ></My-bread>
     <el-divider />
-    <div class="searchComp">
-      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
-        <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
-          <el-input
-            v-model="ruleForm.name"
-            :placeholder="$t('common.pleaseInput')"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            @click="onSubmit('ruleForm')"
-            icon="el-icon-search"
-            size="small"
-            >{{ $t("common.iquery") }}</el-button
-          >
-          <el-button
-            v-if="btnStatus.insert"
-            @click="InsertFormdialog = true"
-            icon="el-icon-plus"
-            size="small"
-            >{{ $t("common.append") }}</el-button
-          >
-          <el-button
-            @click="resetForm('ruleForm')"
-            icon="el-icon-delete"
-            size="small"
-            >{{ $t("common.empty") }}</el-button
-          >
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="bottom">
-      <div class="leftTree">
+    <div class="verSionContent">
+      <div class="verSion_leftTree">
         <ver-dir-tree></ver-dir-tree>
       </div>
-      <div class="rightTable">
-        <div class="table_box">
-          <el-table :data="tableData" stripe style="width: 100%" height="99%">
-            <!-- <el-table-column type="selection" width="40" /> -->
+      <div class="verSion_rightContent">
+        <el-form ref="ruleForm" :model="ruleForm" :inline="true">
+          <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
+            <el-input
+              v-model="ruleForm.name"
+              :placeholder="$t('common.pleaseInput')"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              @click="onSubmit('ruleForm')"
+              icon="el-icon-search"
+              size="small"
+              class="primary"
+              >{{ $t('common.iquery') }}</el-button
+            >
+            <el-button
+              type="success"
+              v-if="btnStatus.insert"
+              @click="(InsertFormdialog = true), getSelectdirTab()"
+              icon="el-icon-plus"
+              size="small"
+              >{{ $t('common.append') }}</el-button
+            >
+            <el-button
+              type="info"
+              @click="resetForm('ruleForm')"
+              icon="el-icon-delete"
+              size="small"
+              >{{ $t('common.empty') }}</el-button
+            >
+          </el-form-item>
+        </el-form>
+        <el-divider class="eldivider" />
+        <div style="height: 80%">
+          <el-table :data="tableData" style="width: 100%" height="99%">
             <el-table-column
               align="center"
               type="index"
@@ -97,34 +98,165 @@
                   @click="handleEdit(scope.$index, scope.row)"
                   type="warning"
                   size="small"
-                  >{{ $t("common.update") }}</el-button
+                  >{{ $t('common.update') }}</el-button
                 >
                 <el-button
                   v-if="btnStatus.delete"
                   @click="handleDelete(scope.$index, scope.row)"
                   type="danger"
                   size="small"
-                  >{{ $t("common.delete") }}</el-button
+                  >{{ $t('common.delete') }}</el-button
                 >
               </template>
             </el-table-column>
           </el-table>
-        </div>
-        <div
-          style="margin-top: 20px; margin-left: 200px"
-          class="pagination_box"
-        >
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="listData.pageIndex"
-            :page-sizes="[10, 20, 30, 40]"
-            :page-size="listData.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="count"
+          <div
+            style="margin-top: 20px; margin-left: 200px"
+            class="pagination_box"
           >
-          </el-pagination>
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="listData.pageIndex"
+              :page-sizes="[10, 20, 30, 40]"
+              :page-size="listData.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="count"
+            >
+            </el-pagination>
+          </div>
         </div>
+      </div>
+    </div>
+    <el-dialog
+      :title="$t('dataManage.vmobj.editVersion')"
+      :visible.sync="dialogFormVisible"
+    >
+      <el-form :model="upform">
+        <el-form-item
+          :label="$t('dataManage.vmobj.name')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="upform.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('dataManage.vmobj.catalogue')"
+          :label-width="formLabelWidth"
+        >
+          <el-cascader
+            style="width: 300px"
+            v-model="upform.dirid"
+            :options="catalogOption"
+            @change="upCatalogChange"
+            :props="cascader"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item
+          :label="$t('dataManage.vmobj.describe')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="upform.descr" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" type="info" class="dialog-footer">
+        <el-button @click="editFromDataClose">{{
+          $t('common.close')
+        }}</el-button>
+        <el-button @click="editFromData" class="primary">{{
+          $t('common.confirm')
+        }}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="$t('dataManage.vmobj.addVersion')"
+      :visible.sync="InsertFormdialog"
+      width="30%"
+    >
+      <el-form :model="insertform">
+        <el-form-item
+          :label="$t('dataManage.vmobj.name')"
+          :label-width="formLabelWidth"
+        >
+          <el-input
+            style="width: 300px"
+            v-model="insertform.name"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('dataManage.vmobj.catalogue')"
+          :label-width="formLabelWidth"
+        >
+          <el-cascader
+            style="width: 300px"
+            v-model="insertform.path"
+            :options="catalogOption"
+            @change="catalogChange"
+            :props="cascader"
+          ></el-cascader>
+        </el-form-item>
+
+        <el-form-item
+          :label="$t('dataManage.vmobj.describe')"
+          :label-width="formLabelWidth"
+        >
+          <el-input
+            style="width: 300px"
+            v-model="insertform.descr"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="insertFromDataClose" type="info">{{
+          $t('common.close')
+        }}</el-button>
+        <el-button @click="insertFromData" class="primary">{{
+          $t('common.confirm')
+        }}</el-button>
+      </div>
+    </el-dialog>
+    <!-- <div class="searchComp">
+      <el-form ref="ruleForm" :model="ruleForm" :inline="true">
+        <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name">
+          <el-input
+            v-model="ruleForm.name"
+            :placeholder="$t('common.pleaseInput')"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            @click="onSubmit('ruleForm')"
+            icon="el-icon-search"
+            size="small"
+            >{{ $t('common.iquery') }}</el-button
+          >
+          <el-button
+            v-if="btnStatus.insert"
+            @click="InsertFormdialog = true"
+            icon="el-icon-plus"
+            size="small"
+            >{{ $t('common.append') }}</el-button
+          >
+          <el-button
+            @click="resetForm('ruleForm')"
+            icon="el-icon-delete"
+            size="small"
+            >{{ $t('common.empty') }}</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="bottom">
+      <div class="leftTree">
+        <ver-dir-tree></ver-dir-tree>
+      </div>
+      <div class="rightTable">
+        <div class="table_box">
+
+        </div>
+
       </div>
     </div>
     <div class="infoBox" v-show="showinfoBox">
@@ -152,100 +284,20 @@
         </div>
       </el-card>
     </div>
-    <el-dialog
-      :title="$t('dataManage.vmobj.editVersion')"
-      :visible.sync="dialogFormVisible"
-    >
-      <el-form :model="upform">
-        <el-form-item
-          :label="$t('dataManage.vmobj.name')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          :label="$t('dataManage.vmobj.catalogue')"
-          :label-width="formLabelWidth"
-        >
-          <el-input
-            v-model="upform.depName"
-            autocomplete="off"
-            disabled
-          ></el-input>
-          <el-button style="margin-left: 20px" @click="showVerTree(2)">{{
-            $t("common.choose")
-          }}</el-button>
-        </el-form-item>
-        <el-form-item
-          :label="$t('dataManage.vmobj.describe')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="upform.descr" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="editFromDataClose">{{
-          $t("common.close")
-        }}</el-button>
-        <el-button @click="editFromData" type="primary">{{
-          $t("common.confirm")
-        }}</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog
-      :title="$t('dataManage.vmobj.addVersion')"
-      :visible.sync="InsertFormdialog"
-    >
-      <el-form :model="insertform">
-        <el-form-item
-          :label="$t('dataManage.vmobj.name')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="insertform.name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item
-          :label="$t('dataManage.vmobj.catalogue')"
-          :label-width="formLabelWidth"
-        >
-          <el-input
-            v-model="insertform.path"
-            autocomplete="off"
-            disabled
-          ></el-input>
-          <el-button style="margin-left: 20px" @click="showVerTree(3)">{{
-            $t("common.choose")
-          }}</el-button>
-        </el-form-item>
 
-        <el-form-item
-          :label="$t('dataManage.vmobj.describe')"
-          :label-width="formLabelWidth"
-        >
-          <el-input v-model="insertform.descr" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="insertFromDataClose">{{
-          $t("common.close")
-        }}</el-button>
-        <el-button @click="insertFromData" type="primary">{{
-          $t("common.confirm")
-        }}</el-button>
-      </div>
-    </el-dialog>
     <div class="leftTrees" v-if="showCata">
       <div class="treeBox">
         <ver-dir-trees></ver-dir-trees>
       </div>
       <div class="btnBox">
         <el-button type="primary" size="small" @click="selectCataName">{{
-          $t("common.confirm")
+          $t('common.confirm')
         }}</el-button>
         <el-button type="primary" size="small" @click="showCata = false">{{
-          $t("common.close")
+          $t('common.close')
         }}</el-button>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -255,18 +307,20 @@
   insertVersion,
   deleteVersion,
   updateVersion,
-} from "../../api/api";
-import verDirTree from "./verDirTree.vue";
-import MyBread from "../../components/MyBread.vue";
-import verDirTrees from "./verDirTrees.vue";
-import moment from "moment";
+  selectdirTab,
+} from '../../api/api';
+import verDirTree from './verDirTree.vue';
+import MyBread from '../../components/MyBread.vue';
+import verDirTrees from './verDirTrees.vue';
+import moment from 'moment';
 export default {
-  name: "versionManage",
+  name: 'versionManage',
   components: { MyBread, verDirTree, verDirTrees },
   data() {
     return {
+      catalogOption: [],
       showCata: false,
-      formLabelWidth: "100px",
+      formLabelWidth: '100px',
       dialogFormVisible: false,
       InsertFormdialog: false,
       showinfoBox: false,
@@ -282,6 +336,13 @@
         depName: null,
         pageIndex: 1,
         pageSize: 10,
+      },
+      cascader: {
+        label: 'name',
+        value: 'id',
+        children: 'children',
+        checkStrictly: true,
+        emitPath: false,
       },
       btnStatus: {
         select: false,
@@ -302,7 +363,35 @@
       return this.$store.state.cataNode.id;
     },
   },
+
   methods: {
+    //鐩綍鍒囨崲
+    catalogChange(value) {
+      this.insertform.dirid = value;
+    },
+    upCatalogChange(val) {
+      this.upform.dirid == value;
+    },
+    //鐩綍鍒楄〃鑾峰彇
+    async getSelectdirTab() {
+      const res = await selectdirTab();
+      if (res.code != 200) {
+        this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触');
+        return;
+      }
+      this.insertform.path = 1;
+      this.catalogOption = this.treeData(res.result);
+    },
+    //鏍戝垪琛ㄧ敓鎴�
+    treeData(source) {
+      let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+      return cloneData.filter((father) => {
+        // 寰幆鎵�鏈夐」
+        let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+        branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+        return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+      });
+    },
     showPermsBtn() {
       let currentPerms = this.$store.state.currentPerms;
       let permsEntity = this.$store.state.permsEntity;
@@ -313,14 +402,14 @@
     resetForm() {
       this.ruleForm = {};
       this.$store.state.verCateNode = {};
-      this.$bus.$emit("clearTressLabel", true);
+      this.$bus.$emit('clearTressLabel', true);
       this.getRoleTabelData();
     },
     onSubmit() {
       this.getRoleTabelData();
     },
     async getRoleTabelData() {
-      if (this.listData.tab == "") {
+      if (this.listData.tab == '') {
         delete this.listData.tab;
       }
 
@@ -329,7 +418,7 @@
       const data = await select_Ver_ByPageAndCount(this.listData);
 
       if (data.code != 200) {
-        this.$message.error("鍒楄〃璋冪敤澶辫触");
+        this.$message.error('鍒楄〃璋冪敤澶辫触');
       }
       this.tableData = data.result;
       this.count = data.count;
@@ -363,8 +452,8 @@
     async editFromData() {
       if (this.upform.depName == null) {
         this.$message({
-          message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
-          type: "warning",
+          message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
+          type: 'warning',
         });
         return;
       }
@@ -373,14 +462,14 @@
         this.dialogFormVisible = false;
         this.upform = {};
         this.$message({
-          message: "淇敼鎴愬姛锛�",
-          type: "success",
+          message: '淇敼鎴愬姛锛�',
+          type: 'success',
         });
         this.getRoleTabelData();
       } else {
         this.$message({
-          message: "淇敼澶辫触锛�",
-          type: "warning",
+          message: '淇敼澶辫触锛�',
+          type: 'warning',
         });
       }
     },
@@ -391,8 +480,8 @@
     async insertFromData() {
       if (this.insertform.dirid == null) {
         this.$message({
-          message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�",
-          type: "warning",
+          message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
+          type: 'warning',
         });
         return;
       }
@@ -401,37 +490,37 @@
         this.InsertFormdialog = false;
         this.insertform = {};
         this.$message({
-          message: "娣诲姞鎴愬姛锛�",
-          type: "success",
+          message: '娣诲姞鎴愬姛锛�',
+          type: 'success',
         });
         this.getRoleTabelData();
       } else {
         this.$message({
-          message: "娣诲姞澶辫触锛�",
-          type: "warning",
+          message: '娣诲姞澶辫触锛�',
+          type: 'warning',
         });
       }
     },
     formatTime(row, column) {
       let date = row[column.property];
       if (date === undefined || date === null) {
-        return "";
+        return '';
       }
-      return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
+      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
     },
     async handleDelete(index, row) {
       const data = await deleteVersion(row.id);
       if (data.code == 200) {
         this.InsertFormdialog = false;
         this.$message({
-          message: "鍒犻櫎鎴愬姛锛�",
-          type: "success",
+          message: '鍒犻櫎鎴愬姛锛�',
+          type: 'success',
         });
         this.getRoleTabelData();
       } else {
         this.$message({
-          message: "鍒犻櫎澶辫触锛�",
-          type: "warning",
+          message: '鍒犻櫎澶辫触锛�',
+          type: 'warning',
         });
       }
     },
@@ -450,159 +539,165 @@
 </script>
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
-.authorityManagement_box {
-  background: rgb(240, 242, 245);
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
+.verSionBox {
+  height: 81%;
+  width: 97%;
+  position: absolute;
   box-sizing: border-box;
-  .el-input {
-    width: 300px !important;
-  }
-  .leftTrees {
-    position: absolute;
-    z-index: 9999;
-    top: 9%;
-    left: 37%;
-    width: 400px;
-    height: 600px;
-    background: #f0f2f5;
-    border: 1px solid #000;
-    .treeBox {
-      height: 550px;
-      overflow: auto;
-      /deep/ .el-tree-node__content:hover {
-        background-color: rgb(153, 153, 153);
-      }
-    }
-    .btnBox {
-      width: 123px;
-      margin: 10px auto 0;
-      // background-color: red;
-    }
-  }
-  .searchComp {
-    margin: 10px auto;
-    background: #fff;
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    .el-form-item {
-      margin: 5px;
-    }
-  }
-  .bottom {
+  .verSionContent {
     width: 100%;
-    height: 85%;
+    height: 92%;
     display: flex;
-    .leftTree {
-      width: 344px;
-      background: #f4f8ff;
-      border-radius: 10px;
-      overflow: auto;
+    justify-content: space-between;
+    .verSion_leftTree {
+      width: 15%;
+      height: 95%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      max-height: 670px;
+      overflow-y: auto;
     }
-    .rightTable {
-      height: 100%;
-      width: 77.8%;
-      // background-color: red;
-      .table_box {
-        width: 100%;
-        height: 93%;
-        margin: 0 auto;
-        overflow: auto;
-        background: #fff;
-        // .el-table {
-        //   height: 100%;
-        // }
-        // .el-table /deep/ .el-table__header-wrapper tr th {
-        //   background-color: rgb(255, 255, 255) !important;
-        //   color: rgb(0, 0, 0);
-        // }
-        // // 淇敼姣忚鏍峰紡锛�
-        // .el-table /deep/ .el-table__row {
-        //   background-color: rgba(255, 255, 255) !important;
-        //   color: rgb(0, 0, 0);
-        // }
-        // .el-table /deep/ .el-table__body tr.current-row > td {
-        //   background-color: rgb(211, 211, 211) !important;
-        // }
-        // .el-table /deep/ .el-table__body tr:hover > td {
-        //   background-color: rgb(211, 211, 211) !important;
-        // }
-        // // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
-        // .el-table /deep/ td,
-        // .el-table /deep/ th.is-leaf {
-        //   border-bottom: 1px solid #eee;
-        //   border-right: 1px solid #eee;
-        // }
-        // .el-table /deep/ .el-table__cell {
-        //   padding: 0;
-        // }
-        // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
-        // .el-table /deep/ .el-table__header tr,
-        // .el-table /deep/ .el-table__header th {
-        //   height: 40px;
-        // }
-        // .el-table__body tr,
-        // .el-table__body td {
-        //   height: 40px;
-        //   padding: 0;
-        // }
-        // 璁剧疆琛ㄦ牸杈规棰滆壊锛�
-
-        .el-table--border::after,
-        .el-table--group::after {
-          width: 0;
-        }
-        .el-table::before {
-          height: 0;
-        }
-        //   a {
-        //     color: #000;
-        //   }
-      }
+    .verSion_rightContent {
+      width: 80%;
+      height: 95%;
+      border: 1px solid white;
+      border-radius: 5px;
+      padding: 1%;
+      overflow-y: auto;
     }
   }
-  .infoBox {
-    width: 500px;
-    border: 1px solid #eee;
-    position: absolute;
-    z-index: 100;
-    top: 15%;
-    right: 25%;
-    background-color: #fff;
-    .el-card {
-      background-color: transparent;
-      span {
-        font-size: 16px;
-        font-weight: 600;
-      }
+  .eldivider {
+    margin-top: 0px;
+  }
+  .primary {
+    background: #409eff;
+    border: #409eff;
+    color: white;
+  }
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+  .pagination_box {
+    margin-top: 20px;
+    /deep/.el-input__inner {
+      background-color: transparent !important;
+      border: 1px solid;
+      color: white;
     }
-    .contentBox {
-      margin: 0 aotu 10px;
-      p {
-        // background-color: #bfa;
-        // margin-bottom: 10px;
-        font-size: 14px;
-      }
+    /deep/.el-pagination__total {
+      color: white;
+    }
+    /deep/.el-pagination__jump {
+      color: white;
+    }
+    /deep/.el-pager li.active {
+      color: #409eff;
+    }
+    /deep/.el-pager li {
+      color: white;
+      background: transparent;
+    }
+    /deep/.el-pager li {
+      color: white;
+    }
+    /deep/.btn-prev {
+      background: transparent;
+    }
+    /deep/.btn-next {
+      background: transparent;
+    }
+    /deep/.btn-next i {
+      color: white;
+    }
+    /deep/.btn-prev i {
+      color: white;
+    }
+  }
+
+  /deep/.el-form-item__label {
+    color: white;
+  }
+  // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+  /deep/.el-input__inner {
+    background-color: transparent !important ;
+    color: #fff;
+    border: 1px solid;
+  }
+  /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+  /deep/ .el-table {
+    background-color: transparent;
+
+    th,
+    td {
+      background-color: transparent;
+    }
+    .el-table__expanded-cell {
+      background-color: transparent !important;
+    }
+
+    // 琛ㄥご鑳屾櫙鑹�
+    th.el-table__cell {
+      background-color: #303030;
+      color: #fff;
+    }
+    tr > td {
+      background-color: #303030;
+      color: #fff;
+    }
+
+    // hover鏁堟灉
+    tr:hover > td {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      // text-align: center;
+    }
+
+    // 婊氬姩鏉″楂�
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      /*婊氬姩鏉″搴�*/
+      height: 5px;
+      /*婊氬姩鏉¢珮搴�*/
+    }
+    /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-track {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+      border-radius: 10px;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
     }
   }
   /deep/ .el-dialog {
-    width: 620px !important;
-    margin-top: 10vh !important;
+    background: #303030;
   }
-
-  /deep/.el-dialog .el-input__inner {
-    width: 300px;
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
   }
-  /deep/ .el-dialog__body {
-    padding: 0px 30px;
+  /deep/.el-dialog__title {
+    color: white;
   }
-  /deep/ .el-dialog__footer {
-    padding-top: 0 !important;
-    width: 600px;
-    display: flex;
-    margin: 0 auto;
-    justify-content: center;
+  /deep/ .el-select .el-input__inner {
+    border-color: #fff !important;
+  }
+  /deep/.el-cascader .el-input__inner {
+    border-color: #fff !important;
   }
 }
 </style>
diff --git a/src/views/maintenance/menuSettings.vue b/src/views/maintenance/menuSettings.vue
index 06b295b..4cd25de 100644
--- a/src/views/maintenance/menuSettings.vue
+++ b/src/views/maintenance/menuSettings.vue
@@ -628,29 +628,28 @@
           break;
       }
     },
+    getPerms() {
+      var val = this.$store.state.currentPerms;
+      var permsEntity = this.$store.state.permsEntity;
+      if (permsEntity.length == 0) {
+        getPerms().then((res) => {
+          if (res.code == 200) {
+            permsEntity = res.result;
+          }
+        });
+      }
+      for (var i = 0; i < permsEntity.length; i++) {
+        if (permsEntity[i].perms == val) {
+          this.showPermsMenu(permsEntity[i]);
+        }
+      }
+    },
   },
   mounted() {
     this.getMenuTree();
+    this.getPerms();
   },
-  created() {
-    var val = this.$store.state.currentPerms;
-    if (!val) {
-      val = '/menu';
-    }
-    var permsEntity = this.$store.state.permsEntity;
-    if (permsEntity.length == 0) {
-      getPerms().then((res) => {
-        if (res.code == 200) {
-          permsEntity = res.result;
-        }
-      });
-    }
-    for (var i = 0; i < permsEntity.length; i++) {
-      if (permsEntity[i].perms == val) {
-        this.showPermsMenu(permsEntity[i]);
-      }
-    }
-  },
+  created() {},
 };
 </script>
 <style lang="less" scoped>
diff --git a/src/views/maintenance/mochaitmo.vue b/src/views/maintenance/mochaitmo.vue
index bb66689..ce296af 100644
--- a/src/views/maintenance/mochaitmo.vue
+++ b/src/views/maintenance/mochaitmo.vue
@@ -113,12 +113,13 @@
   },
   data() {
     return {
-      setMenuFlag: 'menuSettings',
+      setMenuFlag: '   ',
+      activeIndex: ' ',
       oriData: [], //鍘熷鏍戞暟鎹�
       dirData: [], //el鏍戞暟鎹�
       newData: [], //鎷栧姩鍚庢暟鎹�
       lang: 'zh',
-      activeIndex: 'menuSettings',
+
       menuList: [],
       editTitle: '',
       showPopover: false,
@@ -131,7 +132,7 @@
       formLabelWidth: '70px',
     };
   },
-
+  created() {},
   mounted() {
     this.getTreeData();
   },
@@ -146,6 +147,7 @@
             return value.type == 1;
           });
           this.menuList = this.treeData(menuList);
+          this.setViewController(this.menuList[0]);
         } else {
           alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
         }
@@ -154,6 +156,15 @@
       }
 
       // this.treeList = this.treeData(data.result);
+    },
+    setViewController(res) {
+      if (res.children != null) {
+        this.setViewController(res.children[0]);
+      } else {
+        this.$store.state.currentPerms = res.perms;
+        this.setMenuFlag = res.url;
+        this.activeIndex = res.url;
+      }
     },
     treeData(source) {
       let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
@@ -183,73 +194,6 @@
         }
       }
       this.setMenuFlag = index;
-    },
-    //鏍戠偣鍑�
-    handleNodeClick(data) {
-      this.$store.state.currentPerms = data.perms;
-      var index = data.url;
-      if (index != null) {
-        if (index.indexOf('http') != -1) {
-          this.$store.commit('getIframe', data.url);
-        }
-      }
-
-      switch (data.cnName) {
-        case '鑿滃崟绠$悊':
-          this.setMenuFlag = '1';
-          break;
-        case '鐢ㄦ埛绠$悊':
-          this.setMenuFlag = '2';
-          break;
-        case '鍗曚綅绠$悊':
-          this.setMenuFlag = '3';
-          break;
-        case '璧勬簮绠$悊':
-          this.setMenuFlag = '4';
-          break;
-        case '瑙掕壊绠$悊':
-          this.setMenuFlag = '5';
-          break;
-        case '鏉冮檺绠$悊':
-          this.setMenuFlag = '6';
-          break;
-        case '鐢ㄦ埛瑙掕壊鎺堟潈':
-          this.setMenuFlag = '7';
-          break;
-        case '鑿滃崟鏉冮檺鎺堟潈':
-          this.setMenuFlag = '8';
-          break;
-        case '瑙掕壊鑿滃崟鎺堟潈':
-          this.setMenuFlag = '9';
-          break;
-        case '瑙掕壊璧勬簮鎺堟潈':
-          this.setMenuFlag = '10';
-          break;
-        case '鐧诲綍鏃ュ織':
-          this.setMenuFlag = '11';
-          break;
-        case '鎿嶄綔鏃ュ織':
-          this.setMenuFlag = '12';
-          break;
-        case '璧勬簮鏃ュ織':
-          this.setMenuFlag = '13';
-          break;
-        case '浠ょ墝绠$悊':
-          this.setMenuFlag = '14';
-          break;
-        case '榛�/鐧藉悕鍗�':
-          this.setMenuFlag = '15';
-          break;
-        case '鏁版嵁搴撶洃鎺�':
-          this.setMenuFlag = '16';
-          break;
-        case '绯荤粺鐩戞帶':
-          this.setMenuFlag = '17';
-          break;
-        case '绯荤粺閰嶇疆':
-          this.setMenuFlag = '18';
-          break;
-      }
     },
   },
 };

--
Gitblit v1.9.3