From f75823de21e1f276bc50e0c96577bf017be1efa5 Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期四, 13 十月 2022 18:15:51 +0800
Subject: [PATCH] 三个树

---
 src/store/index.js                                          |   32 
 src/views/AuthorizationManagement/userRoleAuthorization.vue |  519 ++++++++++++
 src/views/maintenance/systemMonitoring.vue                  |  891 ++++++++------------
 src/utils/auth.js                                           |    2 
 src/router/index.js                                         |   18 
 src/views/datamanage/styleManage.vue                        |  300 ++++++
 src/api/api.js                                              |   50 +
 src/assets/lang/zh.js                                       |   19 
 src/views/maintenance/parameterConfiguration.vue            |  230 ++++
 package.json                                                |    1 
 src/assets/lang/en.js                                       |   47 
 src/components/navMenu.vue                                  |   96 +
 src/views/userManage/resourceManage.vue                     |  106 ++
 src/views/userManage/roleManage.vue                         |  175 +++
 14 files changed, 1,783 insertions(+), 703 deletions(-)

diff --git a/package.json b/package.json
index 78b834c..dddb33a 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "cesium": "^1.84.0",
     "core-js": "^3.6.5",
     "echarts": "^5.3.3",
+    "echarts-liquidfill": "^3.1.0",
     "element-ui": "^2.14.1",
     "esri-loader": "^2.14.0",
     "install": "^0.13.0",
diff --git a/src/api/api.js b/src/api/api.js
index dd0f55e..a12ed13 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -45,9 +45,9 @@
   return request.post('/role/insertRole', params);
 }
 //瑙掕壊绠$悊鍒犻櫎
-export function deleteRole(params) {
+export function deleteRoles(params) {
   //璇锋眰鍦板潃
-  return request.get('/role/deleteRole', { params: params });
+  return request.get('/role/deleteAuths', { params: params });
 }
 //瑙掕壊绠$悊淇敼
 export function updateRole(params) {
@@ -107,6 +107,11 @@
 export function updateStyle(params) {
   return request.post('/Style/updateStyle', params);
 }
+//鏍峰紡绠$悊涓婁紶
+export function upload_style(params) {
+  return request.post('/Style/upload', params);
+}
+
 //鐧诲綍鏃ュ織
 export function loginSelectByPageAndCount(params) {
   //璇锋眰鍦板潃
@@ -155,7 +160,10 @@
 export function deleteRess(params) {
   return request.get('/res/deleteRess', { params: params });
 }
-
+//璧勬簮涓婁紶
+export function upload_res(params) {
+  return request.post('/res/upload', params);
+}
 //鑾峰彇鍏挜鐢ㄤ簬鍔犲瘑
 export function getPublicKey(params) {
   //璇锋眰鍦板潃
@@ -171,7 +179,6 @@
   //璇锋眰鍦板潃
   return request.get('/sign/logout', { params: params });
 }
-
 
 //璇锋眰鑿滃崟鏍忔暟鎹�
 export function queryMenuTree() {
@@ -218,7 +225,6 @@
   return request.post('/dir/updateDirs', params);
 }
 
-
 //璇锋眰鍗曚綅鏍�
 export function queryDepTree() {
   return request.get('/dep/selectDepAll');
@@ -260,4 +266,36 @@
 // 鐢ㄦ埛绠$悊鏁版嵁
 export function updateUserPwd(params) {
   return request.post('/user/updateUserPwd', params);
-}
\ No newline at end of file
+}
+
+
+
+//鏍规嵁瑙掕壊鏌ヨ鐢ㄦ埛
+export function roleUserselectByPageForRole(params) {
+  //璇锋眰鍦板潃
+  return request.get('/roleUser/selectByPageAndCount', { params: params });
+}
+//鐢ㄦ埛瑙掕壊鍒犻櫎
+export function roleUserdeletes(params) {
+  //璇锋眰鍦板潃
+  return request.get('/roleUser/deletes', { params: params });
+}
+//鏍规嵁瑙掕壊閮ㄩ棬鏌ヨ鐢ㄦ埛
+export function userselectByPageForRole(params) {
+  //璇锋眰鍦板潃
+  return request.get('/user/selectByPageForRole', { params: params });
+}
+// 鐢ㄦ埛瑙掕壊鏂板澶氶��
+export function roleUserinserts(params) {
+  //璇锋眰鍦板潃
+  return request.post('/roleUser/inserts', params);
+}
+
+//绯荤粺閰嶇疆鍒楄〃
+export function select_Args_ByPageAndCount(params) {
+  return request.get('/args/selectByPageAndCount', { params: params });
+}
+//绯荤粺閰嶇疆淇敼
+export function update_args(params) {
+  return request.post('/args/update', params);
+}
diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js
index 44cbc70..3e546e4 100644
--- a/src/assets/lang/en.js
+++ b/src/assets/lang/en.js
@@ -104,6 +104,15 @@
   operatManage: {
     operatManage: 'Operat Manage',
     ResourceLog: 'Resource Log',
+    UserRoleAuthorization: 'User Role Authorization',
+    UserRoleAuthorizationObj: {
+      RoleTable: 'Role Table',
+      userTable: 'user Table',
+      Added: 'Added',
+      delete: 'delete',
+      serialNumber: 'serial Number',
+      name: 'name',
+    },
     ELM: {
       username: 'username',
       ownedSystem: 'ownedSystem',
@@ -130,6 +139,16 @@
     },
     userManagement: 'User Management',
     systemLayout: 'System Layout',
+
+    sysLayOutObj: {
+      name: 'Name',
+      cvalue: 'Current value',
+      dvalue: 'Default value',
+      minValue: 'Minimum value',
+      maxValue: 'Maximum value',
+      descr: 'Describe',
+      editSysLayOut: 'Modify system configuration',
+    },
     menuSettings: 'Menu Settings',
     parameterConfiguration: 'parameterConfiguration',
     rests: 'Rests',
@@ -381,20 +400,20 @@
       depName: 'department name',
       userexport: 'Excel user export',
       userinput: 'Excel user input',
-      userStatus: "User Status",
-      addr: "address",
-      bak: "notes",
-      contact: "contact",
-      edu: "education",
-      email: "email",
-      idcard: "idcard",
-      job: "job",
-      natives: "natives",
-      pwd: "password",
-      sex: "gender",
-      status: "status",
-      uname: "username",
-      depid: "department",
+      userStatus: 'User Status',
+      addr: 'address',
+      bak: 'notes',
+      contact: 'contact',
+      edu: 'education',
+      email: 'email',
+      idcard: 'idcard',
+      job: 'job',
+      natives: 'natives',
+      pwd: 'password',
+      sex: 'gender',
+      status: 'status',
+      uname: 'username',
+      depid: 'department',
       chineseName: 'Chinese Name [User Name]',
       affiliatedUnit: 'Affiliated unit [on-the-job]',
       mobileNumber: 'Mobile number [receive SMS]',
diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js
index c636997..a6b66db 100644
--- a/src/assets/lang/zh.js
+++ b/src/assets/lang/zh.js
@@ -19,7 +19,6 @@
     close: '鍏抽棴',
     see: '鏌ョ湅',
     index: '搴忓彿',
-
   },
   dataManage: {
     dataManage: '鏁版嵁绠$悊',
@@ -106,6 +105,15 @@
   operatManage: {
     operatManage: '杩愮淮绠$悊',
     ResourceLog: '璧勬簮鏃ュ織',
+    UserRoleAuthorization: '鐢ㄦ埛瑙掕壊鎺堟潈',
+    UserRoleAuthorizationObj: {
+      RoleTable: '瑙掕壊琛�',
+      userTable: '鐢ㄦ埛琛�',
+      Added: '鏂板',
+      delete: '鍒犻櫎',
+      serialNumber: '缂栧彿',
+      name: '鍚嶇О',
+    },
     ELM: {
       username: '鐢ㄦ埛鍚嶇О',
       ownedSystem: '鎵�灞炵郴缁�',
@@ -132,6 +140,15 @@
     },
     userManagement: '鐢ㄦ埛绠$悊',
     systemLayout: '绯荤粺閰嶇疆',
+    sysLayOutObj: {
+      name: '鍚嶇О',
+      cvalue: '褰撳墠鍊�',
+      dvalue: '榛樿鍊�',
+      minValue: '鏈�灏忓��',
+      maxValue: '鏈�澶у��',
+      descr: '鎻忚堪',
+      editSysLayOut: '淇敼绯荤粺閰嶇疆',
+    },
     menuSettings: '鑿滃崟璁剧疆',
     parameterConfiguration: '鍙傛暟閰嶇疆',
     rests: '鍏朵粬',
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 29a68b1..d0bceb6 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -34,13 +34,13 @@
 </template>
 
 <script>
-import { logout } from "@/api/api";
-import { removeToken, getToken } from "@/utils/auth";
-import customElMenu from "../components/customElMenu.vue";
-import { queryMenuTree, updateMenuTree, queryMaxId } from "../api/api";
+import { logout } from '@/api/api';
+import { removeToken, getToken } from '@/utils/auth';
+import customElMenu from '../components/customElMenu.vue';
+import { queryMenuTree, updateMenuTree, queryMaxId } from '../api/api';
 
 export default {
-  name: "navMenu",
+  name: 'navMenu',
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
   components: {
     customElMenu,
@@ -50,10 +50,10 @@
       oriData: [], //鍘熷鏍戞暟鎹�
       dirData: [], //el鏍戞暟鎹�
       newData: [], //鎷栧姩鍚庢暟鎹�
-      lang: "zh",
-      activeIndex: "/",
+      lang: 'zh',
+      activeIndex: '/',
       menuList: [],
-      editTitle: "",
+      editTitle: '',
       showPopover: false,
       showEditInfoWrapper: false,
       showEdit: false,
@@ -61,13 +61,26 @@
       editCatalogue: false,
       editUnit: false,
       itemdetail: {},
-      formLabelWidth: "70px",
+      formLabelWidth: '70px',
     };
   },
   mounted() {
     this.getMenuTree();
   },
-  computed: {},
+  computed: {
+    // 鎴戜滑浣跨敤璁$畻灞炴�ф潵鑾峰彇鍒板綋鍓嶇偣鍑荤殑鑿滃崟鐨勮矾鐢辫矾寰勶紝鐒跺悗璁剧疆default-active涓殑鍊�
+    // 浣垮緱鑿滃崟鍦ㄨ浇鍏ユ椂灏辫兘瀵瑰簲楂樹寒
+    // activeIndex() {
+    //   const route = this.$route;
+    //   const { meta, path } = route;
+    //   // if set path, the sidebar will highlight the path you set
+    //   // 鍙互鍦ㄨ矾鐢遍厤缃枃浠朵腑璁剧疆鑷畾涔夌殑璺敱璺緞鍒癿eta.activeMenu灞炴�т腑锛屾潵鎺у埗鑿滃崟鑷畾涔夐珮浜樉绀�
+    //   if (meta.activeMenu) {
+    //     return meta.activeMenu;
+    //   }
+    //   return path;
+    // },
+  },
   methods: {
     getMenuTree() {
       //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
@@ -83,10 +96,10 @@
             });
             this.menuList = this.treeData(menuLists);
           } else {
-            alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
+            alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
           }
         } else {
-          console.log("鎺ュ彛鎶ラ敊");
+          console.log('鎺ュ彛鎶ラ敊');
         }
       });
     },
@@ -97,62 +110,70 @@
         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 == 1; // 杩斿洖涓�绾ц彍鍗�
         });
       } else {
-        alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
+        alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
       }
     },
     logOut() {
-      this.$confirm("纭鏄惁閫�鍑虹櫥褰�?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning",
+      this.$confirm('纭鏄惁閫�鍑虹櫥褰�?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
       })
         .then(async () => {
           const data = await logout({ token: getToken() });
           console.log(data);
           if (data.code != 200) {
-            return this.$message.error("閫�鍑虹櫥褰曞け璐�");
+            return this.$message.error('閫�鍑虹櫥褰曞け璐�');
           }
           removeToken();
-          this.$router.push("/login");
+          this.$router.push('/login');
           this.$message({
-            message: "閫�鍑虹櫥褰曟垚鍔�",
-            type: "success",
+            message: '閫�鍑虹櫥褰曟垚鍔�',
+            type: 'success',
           });
         })
         .catch(() => {
           this.$message({
-            type: "info",
-            message: "宸插彇娑�",
+            type: 'info',
+            message: '宸插彇娑�',
           });
         });
     },
     switchLang() {
       //褰撳墠en
-      if (this.lang == "en") {
+      if (this.lang == 'en') {
         //璇█鎹㈡垚zh
-        this.lang = "zh";
+        this.lang = 'zh';
         //鑿滃崟鎹负zh
-        this.$store.commit("changeLang", "zh");
+        this.$store.commit('changeLang', 'zh');
         //i18鎹㈡垚zh
         this.$i18n.locale = this.lang;
       }
       //褰撳墠zh
       else {
-        this.lang = "en";
+        this.lang = 'en';
         this.$i18n.locale = this.lang;
-        this.$store.commit("changeLang", "en"); //浼犻�掔偣鍑荤殑鑺傜偣
+        this.$store.commit('changeLang', 'en'); //浼犻�掔偣鍑荤殑鑺傜偣
       }
     },
     handleselect(index, indexPath) {
-      if (index.indexOf("http") != -1) {
-        this.$router.push("/databaseMonitoring");
-        this.$store.commit("getIframe", index);
+      if (Window.ws != null) {
+        Window.ws.close();
+        Window.ws.onclose = () => {
+          console.log('鏈嶅姟鍣ㄥ叧闂�');
+        };
+        Window.ws = null;
+      }
+
+      if (index.indexOf('http') != -1) {
+        this.$router.push('/databaseMonitoring');
+        this.$store.commit('getIframe', index);
       } else if (isNaN(Number(index))) {
         this.$router.push(index);
       }
@@ -160,9 +181,18 @@
   },
   watch: {
     $route() {
-      this.activeIndex = this.$route.path;
+      let str = this.$route.path;
+      if (str[0] == '/') {
+        this.activeIndex = str.slice(1);
+      }
     },
   },
+  created() {
+    let str = this.$route.path;
+    if (str[0] == '/') {
+      this.activeIndex = str.slice(1);
+    }
+  },
 };
 </script>
 <style lang="less" scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 8a06dac..8d351de 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,6 +37,15 @@
 import groupManage from '../views/userManage/groupManage.vue'; // 鐢ㄦ埛绠$悊妯″潡
 import authorityManage from '@/views/userManage/authorityManage.vue'; //鐢ㄦ埛绠$悊-鏉冮檺绠$悊
 import resourceManage from '@/views/userManage/resourceManage.vue'; //鐢ㄦ埛绠$悊-璧勬簮绠$悊
+import userRoleAuthorization from '@/views/AuthorizationManagement/userRoleAuthorization.vue'; //绯荤粺绠$悊-
+const originalPush = VueRouter.prototype.push
+
+VueRouter.prototype.push = function push(location) {
+
+  return originalPush.call(this, location).catch(err => err)
+
+}
+
 // 缇ょ粍绠$悊
 Vue.use(VueRouter);
 
@@ -337,6 +346,15 @@
           requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰�
         },
       },
+      {
+        path: '/userRoleAuthorization',
+        component: userRoleAuthorization,
+        name: 'userRoleAuthorization',
+        meta: {
+          title: '鐢ㄦ埛瑙掕壊鎺堟潈',
+          requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰�
+        },
+      },
 
     ],
   },
diff --git a/src/store/index.js b/src/store/index.js
index 83c210d..047c4f4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { getToken, setToken, removeToken } from "@/utils/auth";
-import { Loading, Message } from "element-ui";
-import { login, getPublicKey } from "@/api/api";
+import { getToken, setToken, removeToken } from '@/utils/auth';
+import { Loading, Message } from 'element-ui';
+import { login, getPublicKey } from '@/api/api';
 
 var encrypt = new JSEncrypt();
 Vue.use(Vuex);
@@ -23,7 +23,9 @@
     apiCount: 0,
     //loading瀹炰緥
     loadingInstance: null,
-    key: null
+    key: null,
+    //绯荤粺鐩戞帶WebSocket
+    ws: null,
   },
   mutations: {
     // 鑾峰彇瀹屾暣闈㈠寘灞戣矾寰�
@@ -43,7 +45,6 @@
     changeName(state, msg) {
       state.menuNode = msg;
       // console.log(msg);
-
     },
     verChangeNode(state, msg) {
       state.verCateNode = msg;
@@ -62,8 +63,8 @@
     START_LOADING(state, msg) {
       state.loadingInstance = Loading.service({
         lock: true,
-        text: msg ? msg : "鍔犺浇涓�...",
-        background: "rgba(0, 0, 0, 0.7)",
+        text: msg ? msg : '鍔犺浇涓�...',
+        background: 'rgba(0, 0, 0, 0.7)',
       });
     },
     /* 鍏抽棴loading */
@@ -73,13 +74,13 @@
     },
     /* 鏇存柊璇锋眰绾跨▼姹� */
     UPDATE_API_COUNT(state, handle) {
-      if (handle == "add") {
+      if (handle == 'add') {
         state.apiCount++;
-        this.commit("START_LOADING");
+        this.commit('START_LOADING');
       } else {
         state.apiCount--;
         if (state.apiCount <= 0) {
-          this.commit("CLOSE_LOADING");
+          this.commit('CLOSE_LOADING');
         }
       }
     },
@@ -97,7 +98,7 @@
       return new Promise((resolve, reject) => {
         var data = {
           uid: encrypt.encrypt(userInfo.uid),
-          pwd: encrypt.encrypt(userInfo.pwd)
+          pwd: encrypt.encrypt(userInfo.pwd),
         };
         login(data)
           .then((response) => {
@@ -105,11 +106,11 @@
             if (data.code !== 200) {
               return Message({
                 message: data.msg,
-                type: "error",
+                type: 'error',
                 duration: 5 * 1000,
               });
             }
-            commit("SET_TOKEN", data.result.token);
+            commit('SET_TOKEN', data.result.token);
             setToken(data.result.token);
             resolve(data);
           })
@@ -119,12 +120,11 @@
       });
     },
     getpublickey({ commit, state }, userInfo) {
-
       return new Promise((resolve, reject) => {
         getPublicKey(userInfo)
           .then((response) => {
             const data = response;
-            commit("SET_KEY", data.result);
+            commit('SET_KEY', data.result);
 
             encrypt.setPublicKey(data.result); // 璁剧疆鍏挜
             resolve();
@@ -133,7 +133,7 @@
             reject(error);
           });
       });
-    }
+    },
   },
   modules: {},
 });
diff --git a/src/utils/auth.js b/src/utils/auth.js
index fb714cf..c6b74ea 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -22,7 +22,7 @@
 // }
 //===========================
 //=======浣跨敤sessionStorage======
-const TokenKey = "Admin-Token";
+const TokenKey = 'Admin-Token';
 export function getToken() {
   return window.sessionStorage.getItem(TokenKey);
 }
diff --git a/src/views/AuthorizationManagement/userRoleAuthorization.vue b/src/views/AuthorizationManagement/userRoleAuthorization.vue
new file mode 100644
index 0000000..9d9333c
--- /dev/null
+++ b/src/views/AuthorizationManagement/userRoleAuthorization.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="menuSettings_box">
+    <div class="menuSettings_tree">
+      <My-bread
+        :list="[
+          `${$t('operatManage.operatManage')}`,
+          `${$t('operatManage.UserRoleAuthorization')}`,
+        ]"
+      ></My-bread>
+
+      <el-divider />
+      <div class="menuTreeBox">
+        <el-tree
+          :data="depList"
+          :props="defaultProps"
+          :show-checkbox="true"
+          :check-on-click-node="true"
+          :check-strictly="true"
+          node-key="id"
+          @check="treeCheck"
+          ref="treeForm"
+        >
+        </el-tree>
+      </div>
+    </div>
+    <div
+      class="menuSettings_tree"
+      style="margin-left: 10px; width: calc(50% - 172px)"
+    >
+      <div
+        style="
+          font-size: 14px;
+          color: #606266;
+          line-height: 1;
+          cursor: text;
+          position: relative;
+          top: 10px;
+          margin-left: 10px;
+        "
+      >
+        {{ $t("operatManage.UserRoleAuthorizationObj.RoleTable") }}
+      </div>
+      <el-divider />
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        @row-click="singleElection"
+        highlight-current-row
+        height="85%"
+        :header-cell-style="{
+          background: 'transparent',
+        }"
+      >
+        <el-table-column align="center" width="55">
+          <template slot-scope="scope">
+            <!-- 鍙互鎵嬪姩鐨勪慨鏀筶abel鐨勫�硷紝浠庤�屾帶鍒堕�夋嫨鍝竴椤� -->
+            <el-radio
+              class="radio"
+              v-model="templateSelection"
+              :label="scope.row.id"
+              >&nbsp;</el-radio
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="id"
+          :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+        >
+        </el-table-column>
+      </el-table>
+      <div style="text-align: center; margin-top: 20px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="userlistData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="count"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <div class="menuSettings">
+      <!-- <div class="title_box">
+        <h4>璇︾粏淇℃伅</h4>
+      </div> -->
+      <div
+        style="
+          font-size: 14px;
+          color: #606266;
+          line-height: 1;
+          cursor: text;
+          position: relative;
+          top: 5px;
+          margin-left: 10px;
+          display: flex;
+          align-items: center;
+        "
+      >
+        <span>
+          {{ $t("operatManage.UserRoleAuthorizationObj.userTable") }}</span
+        >
+        <div class="btn" style="margin-left: auto">
+          <el-button
+            type="primary"
+            icon="el-icon-circle-plus-outline"
+            size="small"
+            :disabled="roleid == null ? true : false"
+            @click="adduser"
+            >{{ $t("operatManage.UserRoleAuthorizationObj.Added") }}</el-button
+          >
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            size="small"
+            @click="deletesUser"
+            :disabled="roleid == null ? true : false"
+            >{{ $t("operatManage.UserRoleAuthorizationObj.delete") }}</el-button
+          >
+        </div>
+      </div>
+      <el-divider class="divider" />
+
+      <el-table
+        :data="usertableData"
+        stripe
+        style="width: 100%"
+        height="85%"
+        @selection-change="handleSelectionChange"
+        :header-cell-style="{
+          background: 'transparent',
+        }"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column
+          prop="id"
+          :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="uname"
+          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+        >
+        </el-table-column>
+      </el-table>
+
+      <div style="margin-top: 20px; text-align: center" class="pagination_box">
+        <el-pagination
+          @size-change="userhandleSizeChange"
+          @current-change="userhandleCurrentChange"
+          :current-page="userlistData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="userlistData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="usercount"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog
+      :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
+      :visible.sync="dialogTableVisible"
+    >
+      <el-table
+        :data="gridData"
+        height="40vh"
+        @selection-change="addhandleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column
+          prop="id"
+          :label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="uname"
+          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+        >
+        </el-table-column>
+      </el-table>
+      <div style="margin-top: 20px; text-align: center" class="pagination_box">
+        <el-pagination
+          @size-change="addhandleSizeChange"
+          @current-change="addhandleCurrentChange"
+          :current-page="addlistData.pageIndex"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="addlistData.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="addcount"
+        >
+        </el-pagination>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogTableVisible = false">{{ $t("dataManage.dictionaryManageObj.cancel") }}</el-button>
+        <el-button type="primary" @click="addConfirm">{{ $t("dataManage.dictionaryManageObj.confirm") }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import MyBread from "../../components/MyBread.vue";
+import {
+  queryDepTree,
+  select_Role_ByPageAndCount,
+  roleUserselectByPageForRole,
+  roleUserdeletes,
+  userselectByPageForRole,
+  roleUserinserts,
+} from "../../api/api";
+export default {
+  //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+  components: {
+    MyBread,
+  },
+
+  data() {
+    return {
+      addcount: 0,
+      gridData: [],
+      addlistData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      dialogTableVisible: false,
+      usertableData: [],
+      userlistData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      usercount: 0,
+      tableData: [],
+      //   褰撳墠閫夋嫨鐨勮鐨刬d
+      templateSelection: "",
+      //   褰撳墠閫夋嫨鐨勮鐨勬暟鎹�
+      checkList: [],
+
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      oriData: [], //鍘熷鏍戞暟鎹�
+      depList: [], //el鏍戞暟鎹�
+      backUpData: {},
+      formLabelWidth: "170px",
+      listData: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      count: 0,
+      usermultipleSelection: [],
+      debid: null,
+      roleid: null,
+      addmultipleSelection: [],
+    };
+  },
+  methods: {
+    addConfirm() {
+      this.$confirm("纭畾鏄惁鏂板", "鎻愮ず", {
+        confirmButtonText: "纭畾",
+        cancelButtonText: "鍙栨秷",
+        type: "warning",
+      })
+        .then(async () => {
+          let arr = [];
+          this.addmultipleSelection.forEach((e) => {
+            arr.push({ userid: e.id, roleid: this.roleid });
+          });
+          const data = await roleUserinserts(arr);
+          if (data.code !== 200) {
+            return this.$message.error("鏂板澶辫触");
+          }
+          this.$message({
+            type: "success",
+            message: "鏂板鎴愬姛!",
+          });
+        })
+        .catch(() => {});
+    },
+    adduser() {
+      this.dialogTableVisible = true;
+      this.getadduserList();
+    },
+    //鐢ㄦ埛鍒犻櫎
+    async deletesUser() {
+      let arr = [];
+      this.usermultipleSelection.forEach((e) => {
+        arr.push(e.id);
+      });
+      const data = await roleUserdeletes({ ids: arr.toString() });
+      if (data.code !== 200) {
+        return this.$message.error("鍒犻櫎澶辫触");
+      }
+      this.$message({
+        message: "鍒犻櫎鎴愬姛",
+        type: "success",
+      });
+      this.getuserList();
+    },
+    //鐢ㄦ埛琛ㄥ閫�
+    handleSelectionChange(val) {
+      this.usermultipleSelection = val;
+    },
+    //鏂板鐢ㄦ埛琛ㄥ閫�
+    addhandleSelectionChange(val) {
+      this.addmultipleSelection = val;
+    },
+    // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+    addhandleSizeChange(val) {
+      this.addlistData.pageSize = val;
+      this.getadduserList();
+    },
+    // 鏂板鐢ㄦ埛琛ㄥ垎椤�
+    addhandleCurrentChange(val) {
+      this.addlistData.pageIndex = val;
+      this.getadduserList();
+    },
+    // 鐢ㄦ埛琛ㄥ垎椤�
+    userhandleSizeChange(val) {
+      this.userlistData.pageSize = val;
+      this.getuserList();
+    },
+    // 鐢ㄦ埛琛ㄥ垎椤�
+    userhandleCurrentChange(val) {
+      this.userlistData.pageIndex = val;
+      this.getuserList();
+    },
+    // 瑙掕壊琛ㄥ垎椤�
+    handleSizeChange(val) {
+      this.listData.pageSize = val;
+      this.getRole();
+    },
+    // 瑙掕壊琛ㄥ垎椤�
+    handleCurrentChange(val) {
+      this.listData.pageIndex = val;
+      this.getRole();
+    },
+    // 瑙掕壊鍗曢��
+    singleElection(row) {
+      this.templateSelection = row.id;
+      this.checkList = this.tableData.filter((item) => item.id === row.id);
+      this.userlistData.roleid = row.id;
+      this.roleid = row.id;
+      this.getuserList();
+    },
+    // 閮ㄩ棬璇锋眰
+    async getMenuTree() {
+      //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
+      const data = await queryDepTree();
+
+      if (data.code !== 200) {
+        return this.$message.error("璇锋眰鍗曚綅鎶ラ敊");
+      }
+      this.depList = this.treeData(data.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; // 杩斿洖涓�绾ц彍鍗�
+      });
+    },
+    // 閮ㄩ棬鏍戝崟閫�
+    treeCheck(node, list) {
+      //node 璇ヨ妭鐐规墍瀵瑰簲鐨勫璞°�乴ist 鏍戠洰鍓嶇殑閫変腑鐘舵�佸璞�
+      //閫変腑浜嬩欢鍦ㄩ�変腑鍚庢墽琛岋紝褰搇is涓湁涓や釜閫変腑鏃讹紝浣跨敤setCheckedKeys鏂规硶锛岄�変腑涓�涓妭鐐�
+      console.log(node, list);
+      if (list.checkedNodes.length > 0) {
+        this.listData.depid = node.id;
+        this.debid = node.id;
+        this.getRole();
+        if (list.checkedKeys.length == 2) {
+          //鍗曢�夊疄鐜�
+          this.$refs.treeForm.setCheckedKeys([node.id]);
+        }
+      } else {
+        this.debid = null;
+        this.roleid = null;
+        this.tableData = [];
+        this.usertableData = [];
+      }
+    },
+    async getadduserList() {
+      this.addlistData.roleid = this.roleid;
+
+      this.addlistData.debid = this.debid;
+      const data = await userselectByPageForRole(this.addlistData);
+      if (data.code !== 200) {
+        return this.$message.error("鏂板鐢ㄦ埛鍒楄〃璇锋眰閿欒");
+      }
+      this.gridData = data.result;
+      this.addcount = data.count;
+    },
+    // 鐢ㄦ埛琛ㄨ姹�
+    async getuserList() {
+      const data = await roleUserselectByPageForRole(this.userlistData);
+      if (data.code !== 200) {
+        return this.$message.error("鐢ㄦ埛鍒楄〃璇锋眰閿欒");
+      }
+      this.usertableData = data.result;
+      this.usercount = data.count;
+    },
+    // 瑙掕壊琛ㄨ姹�
+    async getRole() {
+      const data = await select_Role_ByPageAndCount(this.listData);
+      if (data.code !== 200) {
+        return this.$message.error("鐢ㄦ埛瑙掕壊璇锋眰閿欒");
+      }
+      this.tableData = data.result;
+      this.count = data.count;
+    },
+  },
+  created() {
+    this.getMenuTree();
+  },
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 寮曞叆鍏叡css绫�
+.menuSettings_box {
+  //   background: rgb(240, 242, 245);
+  border-radius: 10px;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  .menuSettings_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;
+    }
+    .menuTreeBox {
+      height: 90%;
+      overflow: auto;
+      .el-tree {
+        background: transparent;
+        font-size: 15px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #000000;
+        // /deep/ .el-tree-node__label {
+        //   font-size: 18px;
+        // }
+        /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-left: 5px;
+          .el-button + .el-button {
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+  }
+  .menuSettings {
+    width: calc(50% - 172px);
+    border-radius: 10px;
+    background: rgb(240, 242, 245);
+    margin-left: 10px;
+    height: 100%;
+    padding: 20px;
+    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;
+    }
+  }
+  .table_box {
+    padding: 10px;
+    background: #fff;
+    border-radius: 5px;
+    border: 1px solid rgb(202, 201, 204);
+    overflow: auto;
+    height: 85%;
+  }
+  .divider {
+    margin-top: 8px;
+  }
+}
+.el-table,
+.el-table /deep/ .el-table__expanded-cell {
+  background-color: transparent;
+}
+
+.el-table /deep/ th,
+.el-table /deep/ tr {
+  background-color: transparent;
+}
+</style>
diff --git a/src/views/datamanage/styleManage.vue b/src/views/datamanage/styleManage.vue
index c650435..ce36f97 100644
--- a/src/views/datamanage/styleManage.vue
+++ b/src/views/datamanage/styleManage.vue
@@ -106,7 +106,7 @@
               prop="descr"
               :label="$t('dataManage.styleObj.descr')"
             />
-            <el-table-column
+            <!-- <el-table-column
               align="center"
               prop="fileGuid"
               :label="$t('dataManage.styleObj.fileguid')"
@@ -137,13 +137,13 @@
               prop="updateTime"
               :label="$t('dataManage.styleObj.updateTime')"
               :formatter="formatTime"
-            />
+            /> -->
             <el-table-column
               align="center"
               prop="bak"
               :label="$t('dataManage.styleObj.bak')"
             />
-            <el-table-column min-width="150" :label="$t('common.operate')">
+            <el-table-column min-width="120" :label="$t('common.operate')">
               <template slot-scope="scope">
                 <el-button
                   @click="showDetail(scope.$index, scope.row)"
@@ -228,12 +228,14 @@
           <el-divider></el-divider>
           <p>
             <label> {{ $t('dataManage.styleObj.fileguid') }}:</label>
-            <label class="boxlabel">{{ itemdetail.fileguid }}</label>
+            <label class="boxlabel">{{ itemdetail.fileGuid }}</label>
           </p>
           <el-divider></el-divider>
           <p>
             <label> {{ $t('dataManage.styleObj.viewguid') }}:</label>
-            <label class="boxlabel">{{ itemdetail.viewguid }}</label>
+            <label class="boxlabel">  <div style="width:440px;height:200px;">
+                <img style="width:100%; height:100%" :src="itemdetail.imageFile" alt=""/>
+              </div></label>
           </p>
           <el-divider></el-divider>
           <p>
@@ -360,13 +362,57 @@
           :label="$t('dataManage.styleObj.fileguid')"
           :label-width="formLabelWidth"
         >
-          <el-input v-model="upform.fileGuid" autocomplete="off"></el-input>
+          <el-input v-model="upform.fileGuid" disabled autocomplete="off"></el-input>
+           <input
+            name="file1"
+
+            type="file"
+            id="editFile"
+            multiple="multiple"
+            style="display: none"
+            @change="editFile(0)"
+          />
+           <el-link
+            :underline="false"
+            @click="geteditFile(0)"
+            style="margin-left: 10px"
+            ><i class="el-icon-plus"></i
+          ></el-link>
+           <el-link
+           :title="$t('common.upload')"
+            :underline="false"
+            @click="seteditFile(0)"
+            style="margin-left: 10px"
+            ><i class="el-icon-upload2"></i
+          ></el-link>
         </el-form-item>
         <el-form-item
           :label="$t('dataManage.styleObj.viewguid')"
           :label-width="formLabelWidth"
         >
-          <el-input v-model="upform.viewGuid" autocomplete="off"></el-input>
+          <el-input v-model="upform.viewGuid" disabled autocomplete="off"></el-input>
+           <input
+            name="file1"
+            :accept="'.jpg,.png'"
+            type="file"
+            id="editimageFile"
+            multiple="multiple"
+            style="display: none"
+            @change="editFile(1)"
+          />
+           <el-link
+            :underline="false"
+            @click="geteditFile(1)"
+            style="margin-left: 10px"
+            ><i class="el-icon-plus"></i
+          ></el-link>
+           <el-link
+           :title="$t('common.upload')"
+            :underline="false"
+             @click="seteditFile(1)"
+            style="margin-left: 10px"
+            ><i class="el-icon-upload2"></i
+          ></el-link>
         </el-form-item>
         <el-form-item
           :label="$t('dataManage.styleObj.bak')"
@@ -443,7 +489,7 @@
         >
           <el-select
             v-model="insertform.status"
-            style="width: 745px"
+            style="width: 730px"
             :placeholder="$t('common.choose')"
           >
             <el-option
@@ -469,19 +515,63 @@
           :label="$t('dataManage.styleObj.descr')"
           :label-width="formLabelWidth"
         >
-          <el-input v-model="insertform.descr" autocomplete="off"></el-input>
+          <el-input v-model="insertform.descr"  autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item
           :label="$t('dataManage.styleObj.fileguid')"
           :label-width="formLabelWidth"
         >
-          <el-input v-model="insertform.fileGuid" autocomplete="off"></el-input>
+          <el-input v-model="insertform.fileGuid" disabled autocomplete="off" />
+           <input
+            name="file1"
+
+            type="file"
+            id="insertFile"
+            multiple="multiple"
+            style="display: none"
+            @change="insertFile(0)"
+          />
+           <el-link
+            :underline="false"
+            @click="getInsertFile(0)"
+            style="margin-left: 10px"
+            ><i class="el-icon-plus"></i
+          ></el-link>
+           <el-link
+           :title="$t('common.upload')"
+            :underline="false"
+  @click="setinsertFile(0)"
+            style="margin-left: 10px"
+            ><i class="el-icon-upload2"></i
+          ></el-link>
         </el-form-item>
         <el-form-item
           :label="$t('dataManage.styleObj.viewguid')"
           :label-width="formLabelWidth"
         >
-          <el-input v-model="insertform.viewGuid" autocomplete="off"></el-input>
+          <el-input v-model="insertform.viewGuid" disabled autocomplete="off"/>
+           <input
+            name="file1"
+            :accept="'.jpg,.png'"
+            type="file"
+            id="insertimageFile"
+            multiple="multiple"
+            style="display: none"
+            @change="insertFile(1)"
+          />
+           <el-link
+            :underline="false"
+            @click="getInsertFile(1)"
+            style="margin-left: 10px"
+            ><i class="el-icon-plus"></i
+          ></el-link>
+           <el-link
+           :title="$t('common.upload')"
+            :underline="false"
+             @click="setinsertFile(1)"
+            style="margin-left: 10px"
+            ><i class="el-icon-upload2"></i
+          ></el-link>
         </el-form-item>
         <el-form-item
           :label="$t('dataManage.styleObj.bak')"
@@ -527,6 +617,9 @@
 <script>
 import $ from 'jquery';
 import moment from 'moment';
+import {
+  getToken
+} from '../../utils/auth.js'
 import MyBread from '../../components/MyBread.vue';
 import styleDirTree from './styleDirTree.vue';
 import styleDepTree from './styleDepTree.vue';
@@ -534,7 +627,8 @@
   select_Style_ByPageAndCount,
   insertStyle,
   deleteStyles,
-  updateStyle
+  updateStyle,
+  upload_style
 } from '../../api/api';
 export default {
   name: 'styleManage',
@@ -560,9 +654,14 @@
       showDirCata: false,
       showDepCata: false,
       tableData: [],
-      insertform: {},
+      insertform: {
+        fileGuid: null,
+        viewGuid: null,
+      },
       dirFlag: null,
       depFlag: null,
+      guidFile: null,
+      viewFile: null,
       count: 0,
       listData: {
         name: null,
@@ -575,6 +674,134 @@
     this.getRoleTabelData();
   },
   methods: {
+    filesReset() {
+      document.getElementById('insertFile').reset();
+      document.getElementById('insertimageFile').reset();
+      this.guidFile = null;
+      this.fileGuid = null;
+    },
+    getInsertFile(res) {
+      if (res == 0) {
+        $('#insertFile').click();
+      } else if (res == 1) {
+        $('#insertimageFile').click();
+      }
+    },
+    insertFile(res) {
+      if (res == 0) {
+        var val = document.getElementById('insertFile').files;
+        if (!val || !val.length) return;
+        this.insertform.fileGuid = val[0].name;
+      } else if (res == 1) {
+        var val = document.getElementById('insertimageFile').files;
+        if (!val || !val.length) return;
+        this.insertform.viewGuid = val[0].name;
+      }
+    },
+    async setinsertFile(res) {
+      if (res == 0) {
+        var fs = document.getElementById("insertFile");
+        if (fs.files.length == 0) {
+          return;
+        }
+        var formData = new FormData();
+        formData.append("file", fs.files[0]);
+        var val_data = await upload_style(formData);
+        if (val_data.code == 200) {
+          this.guidFile = val_data.result;
+          this.$message({
+            message: '涓婁紶鎴愬姛锛�',
+            type: 'success',
+          });
+        } else {
+          this.$message({
+            message: '涓婁紶澶辫触锛�',
+            type: 'warning',
+          });
+        }
+      } else if (res == 1) {
+        var fs = document.getElementById("insertimageFile");
+        if (fs.files.length == 0) {
+          return;
+        }
+        var formData = new FormData();
+        formData.append("file", fs.files[0]);
+        var val_data = await upload_style(formData);
+        if (val_data.code == 200) {
+          this.viewFile = val_data.result;
+          this.$message({
+            message: '涓婁紶鎴愬姛锛�',
+            type: 'success',
+          });
+        } else {
+          this.$message({
+            message: '涓婁紶澶辫触锛�',
+            type: 'warning',
+          });
+        }
+      }
+    },
+     geteditFile(res) {
+      if (res == 0) {
+        $('#editFile').click();
+      } else if (res == 1) {
+        $('#editimageFile').click();
+      }
+    },
+   editFile(res) {
+      if (res == 0) {
+        var val = document.getElementById('editFile').files;
+        if (!val || !val.length) return;
+        this.upform.fileGuid = val[0].name;
+      } else if (res == 1) {
+        var val = document.getElementById('editimageFile').files;
+        if (!val || !val.length) return;
+        this.upform.viewGuid = val[0].name;
+      }
+    },
+    async seteditFile(res) {
+      if (res == 0) {
+        var fs = document.getElementById("editFile");
+        if (fs.files.length == 0) {
+          return;
+        }
+        var formData = new FormData();
+        formData.append("file", fs.files[0]);
+        var val_data = await upload_style(formData);
+        if (val_data.code == 200) {
+          this.guidFile = val_data.result;
+          this.$message({
+            message: '涓婁紶鎴愬姛锛�',
+            type: 'success',
+          });
+        } else {
+          this.$message({
+            message: '涓婁紶澶辫触锛�',
+            type: 'warning',
+          });
+        }
+      } else if (res == 1) {
+        var fs = document.getElementById("editimageFile");
+        if (fs.files.length == 0) {
+          return;
+        }
+        var formData = new FormData();
+        formData.append("file", fs.files[0]);
+        var val_data = await upload_style(formData);
+        if (val_data.code == 200) {
+          this.viewFile = val_data.result;
+          this.$message({
+            message: '涓婁紶鎴愬姛锛�',
+            type: 'success',
+          });
+        } else {
+          this.$message({
+            message: '涓婁紶澶辫触锛�',
+            type: 'warning',
+          });
+        }
+      }
+    },
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
@@ -644,6 +871,7 @@
     insertFromDataClose() {
       this.InsertFormdialog = false;
       this.insertform = {};
+       this.filesReset();
     },
     async insertFromData() {
       if (this.insertform.dirid == null || this.insertform.depid == null) {
@@ -653,10 +881,18 @@
         });
         return;
       }
+      if (this.guidFile != null) {
+        this.insertform.fileGuid = this.guidFile;
+      }
+      if (this.viewFile != null) {
+        this.insertform.viewGuid = this.viewFile;
+      }
       const data = await insertStyle(this.insertform);
       if (data.code == 200) {
         this.InsertFormdialog = false;
         this.insertform = {};
+
+        this.filesReset();
         this.$message({
           message: '娣诲姞鎴愬姛锛�',
           type: 'success',
@@ -805,19 +1041,19 @@
     addstyle() {
       this.$router.push('/addstyle');
     },
-    statusFormat(res){
-      switch(res){
+    statusFormat(res) {
+      switch (res) {
         case "鍚敤":
           return 1;
           break;
-           case "鍋滅敤":
-             return 0;
+        case "鍋滅敤":
+          return 0;
           break;
-           case "Start Using":
+        case "Start Using":
           return 1;
           break;
-           case "Stop Using":
-             return 0;
+        case "Stop Using":
+          return 0;
           break;
       }
     },
@@ -829,10 +1065,16 @@
         });
         return;
       }
-    if(Number.isInteger(this.upform.status) == false){
-      this.upform.status = this.statusFormat(this.upform.status)
-    }
-     const data = await updateStyle(this.upform);
+      if (Number.isInteger(this.upform.status) == false) {
+        this.upform.status = this.statusFormat(this.upform.status)
+      }
+        if (this.guidFile != null) {
+        this.upform.fileGuid = this.guidFile;
+      }
+      if (this.viewFile != null) {
+        this.upform.viewGuid = this.viewFile;
+      }
+      const data = await updateStyle(this.upform);
       if (data.code == 200) {
         this.dialogFormVisible = false;
         this.upform = {};
@@ -854,7 +1096,8 @@
     removeUpdate() {
       this.upflag = false;
       this.dialogFormVisible = false;
-      this.upform = {}
+      this.upform = {};
+       this.filesReset();
     },
     submitForm(formName) {
       this.getRoleTabelData()
@@ -869,15 +1112,16 @@
       // });
     },
     resetForm(formName) {
-      this.ruleForm ={}
+      this.ruleForm = {}
       this.getRoleTabelData();
     },
     showDetail(index, row) {
+      var token = getToken();
       this.showinfoBox = true;
       this.itemdetail = row;
       this.itemdetail.createTime = this.formomentTime(this.itemdetail.createTime);
       this.itemdetail.updateTime = this.formomentTime(this.itemdetail.updateTime);
-
+      this.itemdetail.imageFile = BASE_URL + "/res/download?guid=" + row.viewGuid + "&token=" + token
     },
     closeDetial() {
       this.showinfoBox = false;
@@ -931,7 +1175,7 @@
   box-sizing: border-box;
 
   .el-input {
-    width: 745px;
+    width: 730px;
   }
 
   .searchComp {
diff --git a/src/views/maintenance/parameterConfiguration.vue b/src/views/maintenance/parameterConfiguration.vue
index e891cc7..f0b0ff4 100644
--- a/src/views/maintenance/parameterConfiguration.vue
+++ b/src/views/maintenance/parameterConfiguration.vue
@@ -1,36 +1,138 @@
 <template>
   <div class="parameterConfiguration_box">
-    <My-bread :list="['杩愮淮绠$悊', '鍙傛暟閰嶇疆']"></My-bread>
+    <My-bread
+      :list="[
+        `${$t('operatManage.operatManage')}`,
+        `${$t('operatManage.systemLayout')}`,
+      ]"
+    ></My-bread>
     <el-divider />
     <div class="parameterConfiguration">
-      <el-form ref="formRef" :model="form" label-width="140px">
-        <el-form-item label="绔欑偣鍚嶇О" prop="usePageView">
-          <el-input v-model="form.usePageView" placeholder="璇疯緭鍏�" />
+      <el-table :data="tableData" style="width: 100%" fit>
+        <el-table-column
+          align="center"
+          type="index"
+          :label="$t('operatManage.ELM.index')"
+          width="70px"
+        />
+        <el-table-column
+          prop="name"
+          align="center"
+          :label="$t('operatManage.sysLayOutObj.name')"
+        />
+        <el-table-column
+          prop="cvalue"
+          align="center"
+          :label="$t('operatManage.sysLayOutObj.cvalue')"
+        />
+        <el-table-column
+          prop="dvalue"
+          align="center"
+          :label="$t('operatManage.sysLayOutObj.dvalue')"
+        />
+        <el-table-column
+          prop="minValue"
+          align="center"
+          :label="$t('operatManage.sysLayOutObj.minValue')"
+        />
+        <el-table-column
+          prop="maxValue"
+          align="center"
+          :label="$t('operatManage.sysLayOutObj.maxValue')"
+        />
+        <el-table-column
+          prop="descr"
+          align="center"
+          :label="$t('operatManage.sysLayOutObj.descr')"
+        />
+        <el-table-column
+          fixed="right"
+          :label="$t('common.operate')"
+          width="100px"
+        >
+          <template slot-scope="scope">
+            <el-button
+              @click="showDetail(scope.$index, scope.row)"
+              type="primary"
+              plain
+              size="small"
+              >{{ $t('common.edit') }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div 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>
+    <el-dialog
+      :title="$t('operatManage.sysLayOutObj.editSysLayOut')"
+      style="overflow: hidden"
+      :visible.sync="EditFormdialog"
+      :before-close="EditFromDataClose"
+    >
+      <el-form :model="upform">
+        <el-form-item
+          :label="$t('operatManage.sysLayOutObj.name')"
+          :label-width="formLabelWidth"
+        >
+          <label class="boxlabel">{{ upform.name }}</label>
         </el-form-item>
-        <el-form-item label="娴忚鍣ㄥ浘鏍�" prop="usePageView">
-          <el-input v-model="form.usePageView" placeholder="璇疯緭鍏�" />
+        <el-form-item
+          :label="$t('operatManage.sysLayOutObj.cvalue')"
+          :label-width="formLabelWidth"
+        >
+          <el-input v-model="upform.cvalue" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="鐗堟湰淇℃伅" prop="usePageView">
-          <el-input v-model="form.usePageView" placeholder="璇疯緭鍏�" />
+        <el-form-item
+          :label="$t('operatManage.sysLayOutObj.dvalue')"
+          :label-width="formLabelWidth"
+        >
+          <label class="boxlabel">{{ upform.dvalue }}</label>
         </el-form-item>
-        <el-form-item label="澶囨淇℃伅" prop="servePageView">
-          <el-input v-model="form.servePageView" placeholder="璇疯緭鍏�" />
+        <el-form-item
+          :label="$t('operatManage.sysLayOutObj.minValue')"
+          :label-width="formLabelWidth"
+        >
+          <label class="boxlabel">{{ upform.minValue }}</label>
         </el-form-item>
-        <el-form-item label="鐗堟湰淇℃伅" prop="servePageView">
-          <el-input v-model="form.servePageView" placeholder="璇疯緭鍏�" />
+        <el-form-item
+          :label="$t('operatManage.sysLayOutObj.maxValue')"
+          :label-width="formLabelWidth"
+        >
+          <label class="boxlabel">{{ upform.maxValue }}</label>
         </el-form-item>
-        <el-form-item class="flex_box">
-          <el-button type="primary">纭</el-button>
-          <el-button>閲嶇疆</el-button>
+        <el-form-item
+          :label="$t('operatManage.sysLayOutObj.descr')"
+          :label-width="formLabelWidth"
+        >
+          <label class="boxlabel">{{ upform.descr }}</label>
         </el-form-item>
       </el-form>
-    </div>
+      <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>
   </div>
 </template>
 
 <script>
-import MyBread from "../../components/MyBread.vue";
-
+import MyBread from '../../components/MyBread.vue';
+import { select_Args_ByPageAndCount, update_args } from '../../api/api.js';
 export default {
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
   components: {
@@ -39,19 +141,81 @@
 
   data() {
     return {
-      currentPage4: 4,
-      form: {
-        date1: "",
-        subject: "",
-        usePageView: "",
-        overtime: "",
-        servePageView: "",
-        aging: "",
+      formLabelWidth: '100px',
+      upform: {},
+      EditFormdialog: false,
+      tableData: [],
+      count: 0,
+      listData: {
+        name: '',
+        pageIndex: 1,
+        pageSize: 10,
       },
     };
   },
-  methods: {},
-  created() {},
+  methods: {
+    handleSizeChange(val) {
+      this.listData.pageSize = val;
+      this.getRoleTabelData();
+    },
+    handleCurrentChange(val) {
+      this.listData.pageIndex = val;
+      this.getRoleTabelData();
+    },
+    showDetail(index, row) {
+      this.EditFormdialog = true;
+      this.upform = row;
+    },
+    EditFromDataClose() {
+      this.EditFormdialog = false;
+      this.upform = {};
+    },
+    async EditFromData() {
+      if (
+        parseInt(this.upform.cvalue) < parseInt(this.upform.minValue) ||
+        parseInt(this.upform.cvalue) > parseInt(this.upform.maxValue)
+      ) {
+        this.$message({
+          message: '褰撳墠鍊间笉鑳藉皬浜庢渶灏忓�兼垨澶т簬鏈�澶у��!',
+          type: 'warning',
+        });
+        return;
+      }
+
+      var val_data = await update_args(this.upform);
+      if (val_data.code == 200) {
+        this.uploadFile = val_data.result;
+
+        this.$message({
+          message: '淇敼鎴愬姛锛�',
+          type: 'success',
+        });
+        this.getRoleTabelData();
+        this.EditFormdialog = false;
+        this.upform = {};
+      } else {
+        this.$message({
+          message: '淇敼澶辫触锛�',
+          type: 'warning',
+        });
+      }
+    },
+    async getRoleTabelData() {
+      if (this.listData.tab == '') {
+        delete this.listData.tab;
+      }
+      const data = await select_Args_ByPageAndCount(this.listData);
+      if (data.code != 200) {
+        this.$message.error('鍒楄〃璋冪敤澶辫触');
+      }
+      console.log(data);
+      this.tableData = data.result;
+      this.count = data.count;
+    },
+  },
+  created() {
+    this.getRoleTabelData();
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -63,11 +227,10 @@
   padding: 10px;
   box-sizing: border-box;
   .parameterConfiguration {
-    padding-left: 20%;
-    padding-right: 20%;
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     background: #fff;
+    height: 86%;
     border-radius: 5px;
     border: 1px solid rgb(202, 201, 204);
     box-sizing: border-box;
@@ -79,5 +242,8 @@
       justify-content: center;
     }
   }
+  .pagination_box {
+    margin-top: 20px;
+  }
 }
 </style>
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index f067d00..6a41b81 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -10,174 +10,178 @@
     <div class="inform_box">
       <div class="content_box">
         <div class="top_box">
-          <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.totalMemory')}}</div>
-          <div class="details">63.93GB</div>
-          <div class="Syslabel">
-            <span>{{$t('operatManage.systemMonitoringObj.haveBeenUsed')}} 31.16GB</span>
-            <span style="margin-left: 25px">{{$t('operatManage.systemMonitoringObj.usageRate')}} 49%</span>
+          <div style="width: 100%; height: 100%">
+            <div
+              style="
+                width: 30%;
+                height: 100%;
+
+                float: left;
+                margin-left: 20%;
+              "
+            >
+              <div class="Syslabel">
+                <p style="line-height: 25px">
+                  {{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
+                  {{ memInfo.use }}
+                </p>
+                <br />
+                <p style="line-height: 25px">
+                  {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
+                  {{ memInfo.totalMem }}
+                </p>
+              </div>
+            </div>
+            <div
+              id="shuiwen"
+              style="
+                width: 40%;
+                height: 100%;
+
+                float: left;
+              "
+            ></div>
           </div>
+          <!-- <div class="Syslabel">
+            {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
+          </div>
+          <div class="details">{{ memInfo.totalMem }}</div> -->
+          <!-- -->
+          <!-- <div class="Syslabel">
+            <span
+              >{{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
+              {{ memInfo.use }}</span
+            >
+            <span style="margin-left: 25px"
+              >{{ $t('operatManage.systemMonitoringObj.usageRate') }}
+              {{ memInfo.usage }}</span
+            >
+          </div> -->
         </div>
-        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.systemMemory')}}</div>
+        <div class="bottom_box">
+          {{ $t('operatManage.systemMonitoringObj.systemMemory') }}
+        </div>
       </div>
       <div class="content_box">
         <div class="top_box">
-          <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.CPUusage')}}</div>
-          <div class="details">3.49%</div>
+          <div class="Syslabel">
+            {{ $t('operatManage.systemMonitoringObj.CPUusage') }}
+          </div>
+          <div class="details">{{ cpuInfo.cpuSysUsage }}</div>
           <div id="Sys_cpu_chart"></div>
         </div>
-        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.CPUsystemUsage')}}</div>
+        <div class="bottom_box">
+          {{ $t('operatManage.systemMonitoringObj.CPUsystemUsage') }}
+        </div>
       </div>
       <div class="content_box">
         <div class="top_box">
-          <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.numberOfExceptions')}}</div>
-          <div class="details">0</div>
+          <div class="Syslabel">
+            {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
+          </div>
+          <div class="details">{{ resInfoCount }}</div>
         </div>
-        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.numberOfAbnormalSystems')}}</div>
+        <div class="bottom_box">
+          {{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
+        </div>
       </div>
-      <div class="content_box">
+      <!-- <div class="content_box">
         <div class="top_box">
           <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.serviceAarm')}}</div>
           <div class="details">8</div>
         </div>
         <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.serviceResourceAlarm')}}</div>
-      </div>
+      </div> -->
     </div>
     <div class="chart_box">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.serviceResourceStatus')" name="first">
-          <div class="gauge_box">
-            <div id="gauge_chart1"></div>
-            <div id="gauge_chart2"></div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.userOperationBehavior')" name="second">
-          <div class="gauge_box">
-            <div class="input_box">
-              <el-form
-                :inline="true"
-                :model="formInline"
-               
-                size="mini"
-              >
-                <el-form-item label="">
-                  <el-input
-                    v-model="formInline.user"
-                    :placeholder="$t('operatManage.systemMonitoringObj.EnterTheUserChineseName')"
-                  ></el-input>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div ref="dayBar" id="gauge_chart3"></div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceInvocationStatus')" name="third">
-          <div class="gauge_box">
-             <div class="input_box">
-              <el-form
-                :inline="true"
-                :model="formInline"
-               
-                size="mini"
-              >
-                <el-form-item label="">
-                  <el-input
-                    v-model="formInline.user"
-                    :placeholder="$t('operatManage.systemMonitoringObj.EnterTheResourceID')"
-                  ></el-input>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div ref="dayline" id="line_chart"></div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceCallStatistics')" name="fourth">
-          <div class="gauge_box">
-             <div class="input_box">
-              <el-form
-                :inline="true"
-                :model="formInline"
-               
-                size="mini"
-              >
-                <el-form-item label="">
-                  <el-input
-                    v-model="formInline.user"
-                    :placeholder="$t('operatManage.systemMonitoringObj.EnterTheUserName')"
-                  ></el-input>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div ref="dayBar1" id="gauge_chart5"></div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
+      <p class="title_box">
+        {{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
+      </p>
+      <el-table :data="resInfo" style="width: 100%">
+        <el-table-column
+          prop="id"
+          :label="$t('operatManage.systemMonitoringObj.resourceID')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          :label="$t('operatManage.systemMonitoringObj.resourceName')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="bak"
+          :label="$t('operatManage.systemMonitoringObj.resourceState')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+      <!-- <div style="margin-top: 10px" class="pagination_box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage4"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="4"
+        >
+        </el-pagination>
+      </div> -->
     </div>
-    <div class="table_box">
-      <div class="left">
-        <p class="title_box">{{$t('operatManage.systemMonitoringObj.onlinePersonnel')}}</p>
-        <el-table :data="tableData" style="width: 100%">
-          <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.userID')"> </el-table-column>
-          <el-table-column prop="servicecatalog" :label="$t('operatManage.systemMonitoringObj.username')">
-          </el-table-column>
-          <el-table-column prop="visitTimes" :label="$t('operatManage.systemMonitoringObj.onlineTime')" fixed="right">
-          </el-table-column>
-        </el-table>
 
-        <div style="margin-top: 40px" class="pagination_box">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage4"
-            :page-sizes="[10, 20, 30, 40]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="4"
-          >
-          </el-pagination>
-        </div>
-      </div>
-      <div class="right">
-        <p class="title_box">{{$t('operatManage.systemMonitoringObj.abnormalResources')}}</p>
-        <el-table :data="tableData" style="width: 100%">
-          <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.resourceID')"> </el-table-column>
-          <el-table-column prop="servicecatalog" :label="$t('operatManage.systemMonitoringObj.resourceName')">
-          </el-table-column>
-          <el-table-column prop="visitTimes" :label="$t('operatManage.systemMonitoringObj.resourceState')">
-          </el-table-column>
-          <el-table-column prop="date" :label="$t('operatManage.systemMonitoringObj.abnormaltime')" show-overflow-tooltip>
-          </el-table-column>
-        </el-table>
-        <div style="margin-top: 40px" class="pagination_box">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage4"
-            :page-sizes="[10, 20, 30, 40]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="4"
-          >
-          </el-pagination>
-        </div>
-      </div>
+    <div class="left">
+      <p class="title_box">
+        {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
+      </p>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column
+          align="center"
+          type="index"
+          :label="$t('operatManage.ELM.index')"
+          width="100px"
+        />
+        <el-table-column
+          prop="uid"
+          :label="$t('operatManage.systemMonitoringObj.userID')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="uname"
+          :label="$t('operatManage.systemMonitoringObj.username')"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="loginTime"
+          :label="$t('operatManage.systemMonitoringObj.onlineTime')"
+          fixed="right"
+        >
+        </el-table-column>
+      </el-table>
+
+      <!-- <div style="margin-top: 10px" class="pagination_box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage4"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="4"
+        >
+        </el-pagination>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
-import MyBread from "../../components/MyBread.vue";
+import MyBread from '../../components/MyBread.vue';
+import 'echarts-liquidfill';
 export default {
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
   components: {
@@ -186,409 +190,240 @@
   data() {
     //杩欓噷瀛樻斁鏁版嵁
     return {
-      formInline: {
-        user: "",
-        region: "",
-      },
-      activeName: "first",
-      currentPage4: 1,
-      tableData: [
-        {
-          date: "2022-08-03",
-          name: "test",
-          servicecatalog: "涓氬姟鍥惧眰",
-          visitTimes: "12",
-          state: "涓嶅彲鐢�",
-        },
-        {
-          date: "2022-08-03",
-          name: "cs9",
-          servicecatalog: "涓氬姟鍥惧眰",
-          visitTimes: "7",
-          state: "涓嶅彲鐢�",
-        },
-        {
-          date: "2022-08-03",
-          name: "test1",
-          servicecatalog: "涓氬姟鍥惧眰",
-          visitTimes: "5",
-          state: "涓嶅彲鐢�",
-        },
-        {
-          date: "2022-08-03",
-          name: "cs3",
-          servicecatalog: "涓氬姟鍥惧眰",
-          visitTimes: "8",
-          state: "涓嶅彲鐢�",
-        },
-      ],
+      ws: null,
+      tableData: [],
+      memInfo: { totalMem: 0, use: 0, usage: 0 },
+      cpuInfo: { cpuSysUsage: 0 },
+      resInfo: [],
+      resInfoCount: 0,
+      echartData: [],
     };
   },
   //鏂规硶闆嗗悎
   methods: {
-    onSubmit() {
-      console.log("submit!");
-    },
-    handleClick(tab, event) {
-      console.log(tab, event);
-      this.$nextTick(() => {
-        this.$echarts.getInstanceByDom(this.$refs.dayBar).resize();
-        this.$echarts.getInstanceByDom(this.$refs.dayBar1).resize();
-        this.$echarts.getInstanceByDom(this.$refs.dayline).resize();
-      });
-    },
-    handleSizeChange(val) {
-      console.log(`姣忛〉 ${val} 鏉);
-    },
-    handleCurrentChange(val) {
-      console.log(`褰撳墠椤�: ${val}`);
-    },
-    gaugeChart1() {
-      let option = {
-        tooltip: {
-          trigger: "item",
-        },
-        legend: {
-          top: "5%",
-          left: "20%",
-          orient: "vertical",
-        },
-        series: [
-          {
-            name: "",
-            type: "pie",
-            radius: ["70%", "90%"],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: "30",
-                fontWeight: "bold",
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              { value: 1048, name: "姝e父璧勬簮" },
-              { value: 735, name: "寮傚父璧勬簮" },
-            ],
-            itemStyle: {
-              normal: {
-                color: function (colors) {
-                  var colorList = ["#d3e9af", "#ed9678"];
-                  return colorList[colors.dataIndex];
-                },
-              },
-            },
-          },
-        ],
-      };
-      let myChart = this.$echarts.init(document.getElementById("gauge_chart1"));
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
-    },
-    gaugeChart2() {
-      let option = {
-        tooltip: {
-          trigger: "item",
-        },
-        legend: {
-          top: "5%",
-          left: "20%",
-          orient: "vertical",
-        },
-        series: [
-          {
-            name: "",
-            type: "pie",
-            radius: ["70%", "90%"],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: "30",
-                fontWeight: "bold",
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              { value: 1048, name: "娲昏穬璧勬簮" },
-              { value: 0, name: "涓嶆椿璺冭祫婧�" },
-            ],
-            itemStyle: {
-              normal: {
-                color: function (colors) {
-                  var colorList = ["#d3e9af", "#ed9678"];
-                  return colorList[colors.dataIndex];
-                },
-              },
-            },
-          },
-        ],
-      };
-      let myChart = this.$echarts.init(document.getElementById("gauge_chart2"));
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
-    },
-    barChart() {
-      let option = {
-        xAxis: {
-          type: "category",
-          axisLabel: {
-            interval: 0,
-            rotate: 60,
-          },
-          data: [
-            "Mon",
-            "Tue",
-            "Wed",
-            "Thu",
-            "Fri",
-            "Sat",
-            "Sun",
-            "Mon",
-            "Tue",
-            "Wed",
-            "Thu",
-            "Fri",
-            "Sat",
-            "Sun",
-            "Mon",
-            "Tue",
-            "Wed",
-            "Thu",
-            "Fri",
-            "Sat",
-            "Sun",
-          ],
-        },
-        yAxis: {
-          type: "value",
-        },
-        series: [
-          {
-            data: [
-              120, 200, 150, 80, 70, 110, 130120, 200, 150, 80, 70, 110, 130,
-              120, 200, 150, 80, 70, 110, 130,
-            ],
-            type: "bar",
-            showBackground: true,
-            backgroundStyle: {
-              color: "rgba(180, 180, 180, 0.2)",
-            },
-          },
-        ],
-      };
-      let myChart = this.$echarts.init(document.getElementById("gauge_chart5"));
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
-    },
-    barChart1() {
-      let option = {
-        xAxis: {
-          type: "category",
-          axisLabel: {
-            interval: 0,
-            rotate: 60,
-          },
-          data: [
-            "Mon",
-            "Tue",
-            "Wed",
-            "Thu",
-            "Fri",
-            "Sat",
-            "Sun",
-            "Mon",
-            "Tue",
-            "Wed",
-            "Thu",
-            "Fri",
-            "Sat",
-            "Sun",
-            "Mon",
-            "Tue",
-            "Wed",
-            "Thu",
-            "Fri",
-            "Sat",
-            "Sun",
-          ],
-        },
-        yAxis: {
-          type: "value",
-        },
-        series: [
-          {
-            data: [
-              120, 200, 150, 80, 70, 110, 130120, 200, 150, 80, 70, 110, 130,
-              120, 200, 150, 80, 70, 110, 130,
-            ],
-            type: "bar",
-            showBackground: true,
-            backgroundStyle: {
-              color: "rgba(180, 180, 180, 0.2)",
-            },
-          },
-        ],
-      };
-      let myChart = this.$echarts.init(document.getElementById("gauge_chart3"));
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
-    },
-    lineChart() {
-      let base = +new Date(1968, 9, 3);
-      let oneDay = 24 * 3600 * 1000;
-      let date = [];
-      let data = [Math.random() * 300];
-      for (let i = 1; i < 20000; i++) {
-        var now = new Date((base += oneDay));
-        date.push(
-          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
-        );
-        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+    SetTableData1(res) {
+      this.tableData = res.userInfo;
+      this.memInfo = res.memInfo;
+      this.cpuInfo = res.cpuInfo;
+      if (this.echartData.length == 7) {
+        this.echartData.splice(0, 1);
       }
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          position: function (pt) {
-            return [pt[0], "10%"];
-          },
-        },
-        title: {
-          left: "center",
-          text: "Large Area Chart",
-        },
-        toolbox: {
-          feature: {
-            dataZoom: {
-              yAxisIndex: "none",
-            },
-            restore: {},
-            saveAsImage: {},
-          },
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: date,
-        },
-        yAxis: {
-          type: "value",
-          boundaryGap: [0, "100%"],
-        },
-        dataZoom: [
-          {
-            type: "inside",
-            start: 0,
-            end: 10,
-          },
-          {
-            start: 0,
-            end: 10,
-          },
-        ],
-        series: [
-          {
-            name: "Fake Data",
-            type: "line",
-            symbol: "none",
-            sampling: "lttb",
-            itemStyle: {
-              color: "rgb(255, 70, 131)",
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgb(255, 158, 68)",
-                },
-                {
-                  offset: 1,
-                  color: "rgb(255, 70, 131)",
-                },
-              ]),
-            },
-            data: data,
-          },
-        ],
-      };
-      let myChart = this.$echarts.init(document.getElementById("line_chart"));
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
+      this.echartData.push(parseFloat(res.cpuInfo.cpuSysUsage));
+      this.lineChart1();
+      console.log(this.memInfo.usage);
+      this.lineChart2(this.memInfo.usage);
+    },
+    SetTableData2(res) {
+      this.resInfo = res.resInfo;
+      this.resInfoCount = res.resInfo.length;
     },
     lineChart1() {
       let option = {
         grid: {
           top: 0,
-          left: "0%",
-          right: "4%",
-          bottom: "0%",
+          left: '0%',
+          right: '4%',
+          bottom: '0%',
           containLabel: true,
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
         },
         xAxis: {
-          type: "category",
+          type: 'category',
           boundaryGap: false,
-          data: ["", "", "", "", "", "", ""],
+          data: ['', '', '', '', '', '', ''],
         },
         yAxis: {
-          type: "value",
+          type: 'value',
           axisLabel: {
             show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
           },
         },
         series: [
           {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-            type: "line",
+            data: this.echartData,
+            type: 'line',
             areaStyle: {},
           },
         ],
       };
       let myChart = this.$echarts.init(
-        document.getElementById("Sys_cpu_chart")
+        document.getElementById('Sys_cpu_chart')
       );
       myChart.setOption(option);
-      window.addEventListener("resize", function () {
+      window.addEventListener('resize', function () {
         myChart.resize();
       });
     },
-    handleSelectionChange() {},
+    lineChart2(res) {
+      var a = res.split('%').join('');
+      console.log(a);
+      let value = parseFloat(a);
+      let data = [value, value, value];
+      let option = {
+        title: {
+          text: value + '{a|%}',
+          textStyle: {
+            fontSize: 15,
+            fontFamily: 'Microsoft Yahei',
+            fontWeight: 'normal',
+            color: '#00FFFF',
+            rich: {
+              a: {
+                fontSize: 15,
+              },
+            },
+          },
+          x: 'center',
+          y: '35%',
+        },
+        graphic: [
+          {
+            type: 'group',
+            left: 'center',
+
+            children: [
+              {
+                type: 'text',
+                z: 20,
+                left: '10',
+                top: '50',
+                style: {
+                  fill: '#00FFFF',
+                  text: '浣跨敤鐜�',
+                  font: '14px Microsoft YaHei',
+                },
+              },
+            ],
+          },
+        ],
+        series: [
+          {
+            type: 'liquidFill',
+            radius: '80%',
+            center: ['50%', '50%'],
+            //  shape: 'roundRect',
+            data: data,
+            backgroundStyle: {
+              color: {
+                type: 'linear',
+                x: 1,
+                y: 0,
+                x2: 0.5,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: 'rgba(68, 145, 253, 0)',
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(68, 145, 253, .25)',
+                  },
+                  {
+                    offset: 0,
+                    color: 'rgba(68, 145, 253, 1)',
+                  },
+                ],
+                globalCoord: false,
+              },
+            },
+            outline: {
+              borderDistance: 0,
+              itemStyle: {
+                borderWidth: 20,
+                borderColor: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(69, 73, 240, 0)',
+                    },
+                    {
+                      offset: 0.5,
+                      color: 'rgba(69, 73, 240, .25)',
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(69, 73, 240, 1)',
+                    },
+                  ],
+                  globalCoord: false,
+                },
+                shadowBlur: 10,
+                shadowColor: '#000',
+              },
+            },
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: 'rgba(58, 71, 212, 0)',
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(31, 222, 225, .2)',
+                  },
+                  {
+                    offset: 0,
+                    color: 'rgba(31, 222, 225, 1)',
+                  },
+                ],
+                globalCoord: false,
+              },
+            },
+            label: {
+              normal: {
+                formatter: '',
+              },
+            },
+          },
+        ],
+      };
+
+      let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
+      myChart1.setOption(option);
+      window.addEventListener('resize', function () {
+        myChart.resize();
+      });
+    },
   },
-  created() {},
+  created() {
+    if (Window.ws != null) {
+      Window.ws.close();
+      Window.ws.onclose = () => {
+        console.log('鏈嶅姟鍣ㄥ叧闂�');
+      };
+      Window.ws = null;
+    }
+    Window.ws = new WebSocket('ws://192.168.20.55:12316/ws');
+    Window.ws.option = () => {};
+    var that = this;
+    Window.ws.onmessage = (msg) => {
+      // console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
+      var data = JSON.parse(msg.data);
+
+      if (data.resInfo == undefined) {
+        that.SetTableData1(data);
+      } else {
+        that.SetTableData2(data);
+      }
+    };
+  },
+
   mounted() {
-    this.$nextTick(() => {
-      this.lineChart();
-      this.lineChart1();
-      this.barChart();
-      this.barChart1();
-      this.gaugeChart1();
-      this.gaugeChart2();
-    });
+    this.lineChart2(0);
   },
 };
 </script>
@@ -612,7 +447,7 @@
       box-sizing: border-box;
       padding: 10px;
       padding-top: 30px;
-      width: 24%;
+      width: 33%;
       height: 100%;
       background: #fff;
       border-radius: 5px;
@@ -653,32 +488,16 @@
       }
     }
   }
-  .table_box {
-    height: 36%;
 
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .left {
-      box-sizing: border-box;
-      padding: 10px;
-      width: 49%;
-      height: 100%;
-      background: #fff;
-      border-radius: 5px;
-      border: 1px solid rgb(202, 201, 204);
-      overflow: auto;
-    }
-    .right {
-      overflow: auto;
-      box-sizing: border-box;
-      padding: 10px;
-      width: 49%;
-      height: 100%;
-      background: #fff;
-      border-radius: 5px;
-      border: 1px solid rgb(202, 201, 204);
-    }
+  .left {
+    box-sizing: border-box;
+    padding: 10px;
+    width: 100%;
+    height: 37%;
+    background: #fff;
+    border-radius: 5px;
+    border: 1px solid rgb(202, 201, 204);
+    overflow: auto;
   }
   .title_box {
     font-weight: 800;
@@ -708,7 +527,7 @@
       width: 100%;
       height: 95%;
       position: relative;
-      .input_box{
+      .input_box {
         position: absolute;
         top: 0;
         left: 0;
diff --git a/src/views/userManage/resourceManage.vue b/src/views/userManage/resourceManage.vue
index 6554c01..be5f867 100644
--- a/src/views/userManage/resourceManage.vue
+++ b/src/views/userManage/resourceManage.vue
@@ -91,19 +91,19 @@
 
         >
         </el-table-column>
-        <el-table-column
+        <!-- <el-table-column
           prop="img"
           align="center"
           :label="$t('userManage.resManageObj.img')"
         >
-        </el-table-column>
-         <el-table-column
+        </el-table-column> -->
+         <!-- <el-table-column
           prop="createUser"
           align="center"
           :label="$t('userManage.resManageObj.createUser')"
         >
-        </el-table-column>
-         <el-table-column
+        </el-table-column> -->
+         <!-- <el-table-column
           prop="createTime"
           align="center"
           :label="$t('userManage.resManageObj.createTime')"
@@ -122,7 +122,7 @@
           :label="$t('userManage.resManageObj.updateTime')"
             :formatter="formatTime"
         >
-        </el-table-column>
+        </el-table-column>-->
          <el-table-column
           prop="bak"
           align="center"
@@ -208,7 +208,11 @@
           <el-divider></el-divider>
           <p>
             <label> {{ $t('userManage.resManageObj.img') }}:</label>
-            <label class="boxlabel">{{ itemdetail.img }}</label>
+            <label class="boxlabel">
+              <div style="width:440px;height:200px;">
+                <img style="width:100%; height:100%" :src="itemdetail.imageFile" alt=""/>
+              </div>
+            </label>
           </p>
            <el-divider></el-divider>
              <p>
@@ -328,10 +332,18 @@
             @change="insertFile"
           />
             <el-link
+            :title="$t('common.append')"
             :underline="false"
             @click="getIsertFile"
             style="margin-left: 10px"
             ><i class="el-icon-plus"></i
+          ></el-link>
+           <el-link
+           :title="$t('common.upload')"
+            :underline="false"
+            @click="setUploadFile(0)"
+            style="margin-left: 10px"
+            ><i class="el-icon-upload2"></i
           ></el-link>
         </el-form-item>
          <el-form-item
@@ -426,6 +438,13 @@
             style="margin-left: 10px"
             ><i class="el-icon-plus"></i
           ></el-link>
+           <el-link
+           :title="$t('common.upload')"
+            :underline="false"
+            @click="setUploadFile(1)"
+            style="margin-left: 10px"
+            ><i class="el-icon-upload2"></i
+          ></el-link>
         </el-form-item>
          <el-form-item
           :label="$t('userManage.resManageObj.bak')"
@@ -444,7 +463,7 @@
         }}</el-button>
       </div>
     </el-dialog>
-        <div class="leftTree" v-if="showDirCata">
+    <div class="leftTree" v-if="showDirCata">
       <div class="treeBox">
         <style-dir-tree></style-dir-tree>
       </div>
@@ -475,9 +494,12 @@
 
 <script>
 import $ from 'jquery';
+import {
+  getToken
+} from '../../utils/auth.js'
 import moment from 'moment';
 import MyBread from '../../components/MyBread.vue';
-import { select_Res_ByPageAndCount, insertRes, updateRes, deleteRess }
+import { select_Res_ByPageAndCount, insertRes, updateRes, deleteRess, upload_res }
   from '../../api/api.js';
 import styleDirTree from '../datamanage/styleDirTree.vue';
 import styleDepTree from '../datamanage/styleDepTree.vue';
@@ -497,12 +519,14 @@
       showDepCata: false,
       dirFlag: null,
       depFlag: null,
+      ImageFile: null,
+      uploadFile: null,
       insertform: {
-        img:''
+        img: ''
       },
       tableData: [],
       itemdetail: {},
-      upform: { img:''},
+      upform: { img: '' },
       multipleSelection: [],
       count: 0,
       listData: {
@@ -520,18 +544,45 @@
     this.getRoleTabelData();
   },
   methods: {
-     getIsertFile() {
+    getIsertFile() {
       $('#imageFile').click();
     },
-    getupdateFile(){
- $('#editimageFile').click();
+    getupdateFile() {
+      $('#editimageFile').click();
+    },
+    async setUploadFile(res) {
+      var fs;
+      if (res == 0) {
+       fs = document.getElementById("imageFile");
+
+      }else if (res ==1) {
+        fs = document.getElementById("editimageFile");
+        if(fs.files.length == 0){
+          return;
+        }
+      }
+      var formData = new FormData();
+      formData.append("file", fs.files[0]);
+      var val_data = await upload_res(formData);
+      if (val_data.code == 200) {
+        this.uploadFile = val_data.result;
+        this.$message({
+          message: '涓婁紶鎴愬姛锛�',
+          type: 'success',
+        });
+      } else {
+        this.$message({
+          message: '涓婁紶澶辫触锛�',
+          type: 'warning',
+        });
+      }
     },
     insertFile() {
       var val = document.getElementById('imageFile').files;
       if (!val || !val.length) return;
       this.insertform.img = val[0].name;
     },
-  updateFile() {
+    updateFile() {
       var val = document.getElementById('editimageFile').files;
       if (!val || !val.length) return;
       this.upform.img = val[0].name;
@@ -606,10 +657,16 @@
       this.upform = {};
     },
     async EditFromData() {
+
+
+       if (this.uploadFile != null) {
+        this.upform.img = this.uploadFile;
+      }
       const data = await updateRes(this.upform);
       if (data.code == 200) {
         this.EditFormdialog = false;
         this.upform = {};
+        this.uploadFile = null;
         this.$message({
           message: '淇敼鎴愬姛锛�',
           type: 'success',
@@ -625,15 +682,16 @@
     },
     showDetail(index, row) {
       this.showinfoBox = true;
+      var token = getToken();
       this.itemdetail = row;
       this.itemdetail.createTime = this.formomentTime(this.itemdetail.createTime);
       this.itemdetail.updateTime = this.formomentTime(this.itemdetail.updateTime);
-
+      this.itemdetail.imageFile = BASE_URL + "/res/download?guid=" + row.img + "&token=" + token
     },
     handleEdit(index, row) {
       this.EditFormdialog = true;
       this.upform = row;
-            this.upform.depValue = row.depName;
+      this.upform.depValue = row.depName;
       this.upform.dirValue = row.dirName;
     },
     closeDetial() {
@@ -660,10 +718,16 @@
         });
         return;
       }
+      if (this.uploadFile != null) {
+        this.insertform.img = this.uploadFile;
+      }
       const data = await insertRes(this.insertform);
       if (data.code == 200) {
         this.InsertFormdialog = false;
-        this.insertform = {};
+        this.insertform= {
+        img: ''
+      };
+        this.uploadFile = null;
         this.$message({
           message: '娣诲姞鎴愬姛锛�',
           type: 'success',
@@ -682,11 +746,11 @@
       }
       this.listData.name = this.ruleForm.name;
       const data = await select_Res_ByPageAndCount(this.listData);
-      console.log(data)
+
       if (data.code != 200) {
         this.$message.error('鍒楄〃璋冪敤澶辫触');
       }
-      console.log(data.result);
+
       this.tableData = data.result;
       this.count = data.count;
     },
@@ -716,7 +780,7 @@
   padding: 10px;
   box-sizing: border-box;
   .el-input {
-    width: 745px;
+    width: 730px;
   }
   .power_quire {
     margin: 10px auto;
diff --git a/src/views/userManage/roleManage.vue b/src/views/userManage/roleManage.vue
index f3d9e30..7da337d 100644
--- a/src/views/userManage/roleManage.vue
+++ b/src/views/userManage/roleManage.vue
@@ -47,10 +47,24 @@
             }}</el-button
           >
         </el-form-item>
+        <el-form-item>
+          <el-button @click="handleDelete()"
+            ><i class="el-icon-delete"></i>&nbsp;{{
+              $t('common.delete')
+            }}</el-button
+          >
+        </el-form-item>
       </el-form>
     </div>
     <div class="table_box">
-      <el-table :data="tableData" stripe style="width: 100%" height="99%">
+      <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+        height="99%"
+      >
+        <el-table-column type="selection" width="55" />
         <el-table-column
           align="center"
           type="index"
@@ -75,7 +89,7 @@
           :label="$t('userManage.RM.describe')"
         />
 
-        <el-table-column
+        <!-- <el-table-column
           align="center"
           prop="createUser"
           :label="$t('userManage.RM.creationuser')"
@@ -101,7 +115,7 @@
           align="center"
           prop="bak"
           :label="$t('userManage.RM.remarks')"
-        />
+        /> -->
         <el-table-column
           fixed="right"
           :label="$t('common.operate')"
@@ -114,12 +128,9 @@
               size="small"
               >{{ $t('common.update') }}</el-button
             >
-            <el-button
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-              size="small"
-              >{{ $t('common.delete') }}</el-button
-            >
+            <el-button  @click="showDetail(scope.$index, scope.row)" type="primary" size="small">{{
+              $t('common.see')
+            }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -136,6 +147,7 @@
         </el-pagination>
       </div>
     </div>
+
     <el-dialog
       :title="$t('userManage.RM.insertRole')"
       top="15vh"
@@ -247,6 +259,62 @@
         >
       </div>
     </div>
+
+     <div class="infoBox" v-show="showinfoBox">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
+          <div style="float: right; cursor: pointer" @click="closeDetial"   >
+            <i class="el-icon-close"></i>
+          </div>
+        </div>
+               <div class="contentBox">
+          <p>
+            <label> {{ $t('userManage.RM.roleName') }}:</label>
+            <label class="boxlabel">{{ itemdetail.name }}</label>
+          </p>
+          <el-divider></el-divider>
+          <p>
+           <p>
+            <label> {{ $t('userManage.RM.ownedSystem') }}:</label>
+            <label class="boxlabel">{{ itemdetail.depName }}</label>
+          </p>
+          </p>
+          <el-divider></el-divider>
+          <p>
+            <label> {{ $t('userManage.RM.describe') }}:</label>
+            <label class="boxlabel">{{ itemdetail.descr }}</label>
+          </p>
+          <el-divider></el-divider>
+           <p>
+            <label> {{ $t('userManage.RM.creationuser') }}:</label>
+            <label class="boxlabel">{{ itemdetail.createUser }}</label>
+          </p>
+          <el-divider></el-divider>
+          <p>
+            <label> {{ $t('userManage.RM.creationtime') }}:</label>
+            <label class="boxlabel">{{ itemdetail.createTime }}</label>
+          </p>
+          <el-divider></el-divider>
+          <p>
+            <label> {{ $t('userManage.RM.updateonuser') }}:</label>
+            <label class="boxlabel">{{ itemdetail.UpdateUser }}</label>
+          </p>
+          <el-divider></el-divider>
+
+             <p>
+            <label> {{ $t('userManage.RM.updateontime') }}:</label>
+            <label class="boxlabel">{{ itemdetail.updateTime }}</label>
+          </p>
+           <el-divider></el-divider>
+             <p>
+            <label> {{ $t('userManage.RM.remarks') }}:</label>
+            <label class="boxlabel">{{ itemdetail.bak }}</label>
+          </p>
+           <el-divider></el-divider>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -258,7 +326,7 @@
   select_Role_ByPageAndCount,
   selectdepTab,
   insertRole,
-  deleteRole,
+  deleteRoles,
   selectDep,
   updateRole,
 } from '../../api/api';
@@ -270,6 +338,7 @@
   },
   data() {
     return {
+      showinfoBox: false,
       showCata: false,
       formLabelWidth: '120px',
       InsertFormdialog: false,
@@ -284,6 +353,9 @@
       updateform: {},
       count: 0,
       selData: [],
+      itemdetail: {},
+      multipleSelection: [],
+
       listData: {
         name: null,
         depName: null,
@@ -293,13 +365,28 @@
     };
   },
   methods: {
+        closeDetial() {
+      this.showinfoBox = false;
+      this.itemdetail = {};
+    },
+      showDetail(index, row) {
+      this.showinfoBox = true;
+      this.itemdetail = row;
+      this.itemdetail.createTime = this.formomentTime(this.itemdetail.createTime);
+      this.itemdetail.updateTime = this.formomentTime(this.itemdetail.updateTime);
+
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
     formatTime(row, column) {
       let date = row[column.property];
-
+      return this.formomentTime(date);
+    },
+    formomentTime(date) {
       if (date === undefined || date === null) {
-        return '';
+        return;
       }
-
       return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
     },
     showDepTree(res) {
@@ -418,8 +505,13 @@
         });
       }
     },
-    async handleDelete(index, row) {
-      const data = await deleteRole({ id: row.id.toString() });
+    async handleDelete() {
+      var std = [];
+      for (var i in this.multipleSelection) {
+        std.push(this.multipleSelection[i].id);
+      }
+      const data = await deleteRoles({ ids: std.toString() });
+
       if (data.code == 200) {
         this.InsertFormdialog = false;
         this.$message({
@@ -519,5 +611,58 @@
   .text-center {
     text-align: center;
   }
+  .infoBox {
+    width: 500px;
+    border: 1px solid #eee;
+    position: absolute;
+    z-index: 100;
+    top: 25%;
+    right: 12%;
+    background-color: #fff;
+    .el-card {
+      background-color: transparent;
+      span {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+    .contentBox {
+      margin: 0 aotu 10px;
+      height: 485px;
+      overflow: auto;
+      p {
+        // background-color: #bfa;
+        // margin-bottom: 10px;
+        font-size: 14px;
+      }
+      .boxlabel {
+        margin-left: 10px;
+      }
+    }
+    /* 鏁翠綋鏍峰紡 */
+    .contentBox::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    /* 婊氬姩鏉� */
+    .contentBox::-webkit-scrollbar-thumb {
+      background-color: #b3d8ff;
+      border-radius: 6px;
+    }
+
+    /* 婊氬姩鏉¢紶鏍囩粡杩囨牱寮� */
+    .contentBox::-webkit-scrollbar-thumb:hover {
+      background-color: #b3d8ff;
+      border-radius: 6px;
+    }
+
+    /* 婊氬姩鏉¤建閬� */
+    .contentBox::-webkit-scrollbar-track-piece {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: #ededed;
+    }
+  }
 }
 </style>

--
Gitblit v1.9.3