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" + > </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> {{ + $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