From 612dcb4fd8806b0153560ff67124c37a082a7bf5 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 13 十月 2022 17:43:35 +0800
Subject: [PATCH] 系统配置，环境资源监控接口对接
---
src/api/api.js | 13
src/assets/lang/zh.js | 42 +
src/views/maintenance/parameterConfiguration.vue | 230 ++++++++-
src/store/index.js | 32
package.json | 1
src/assets/lang/en.js | 42 +
src/views/maintenance/systemMonitoring.vue | 891 +++++++++++++++-----------------------
src/components/navMenu.vue | 74 +-
src/views/userManage/resourceManage.vue | 4
9 files changed, 675 insertions(+), 654 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 eff67b0..86723e6 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -254,5 +254,14 @@
// 鐢ㄦ埛瑙掕壊鏂板澶氶��
export function roleUserinserts(params) {
//璇锋眰鍦板潃
- return request.post('/roleUser/inserts', params );
-}
\ No newline at end of file
+ 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 bd2aef1..3e546e4 100644
--- a/src/assets/lang/en.js
+++ b/src/assets/lang/en.js
@@ -104,8 +104,8 @@
operatManage: {
operatManage: 'Operat Manage',
ResourceLog: 'Resource Log',
- UserRoleAuthorization:"User Role Authorization",
- UserRoleAuthorizationObj:{
+ UserRoleAuthorization: 'User Role Authorization',
+ UserRoleAuthorizationObj: {
RoleTable: 'Role Table',
userTable: 'user Table',
Added: 'Added',
@@ -139,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',
@@ -390,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 77e197e..146ceec 100644
--- a/src/assets/lang/zh.js
+++ b/src/assets/lang/zh.js
@@ -19,7 +19,6 @@
close: '鍏抽棴',
see: '鏌ョ湅',
index: '搴忓彿',
-
},
dataManage: {
dataManage: '鏁版嵁绠＄悊',
@@ -106,8 +105,8 @@
operatManage: {
operatManage: '杩愮淮绠＄悊',
ResourceLog: '璧勬簮鏃ュ織',
- UserRoleAuthorization:"鐢ㄦ埛瑙掕壊鎺堟潈",
- UserRoleAuthorizationObj:{
+ UserRoleAuthorization: '鐢ㄦ埛瑙掕壊鎺堟潈',
+ UserRoleAuthorizationObj: {
RoleTable: '瑙掕壊琛�',
userTable: '鐢ㄦ埛琛�',
Added: '鏂板',
@@ -141,6 +140,15 @@
},
userManagement: '鐢ㄦ埛绠＄悊',
systemLayout: '绯荤粺閰嶇疆',
+ sysLayOutObj: {
+ name: '鍚嶇О',
+ cvalue: '褰撳墠鍊�',
+ dvalue: '榛樿鍊�',
+ minValue: '鏈�灏忓��',
+ maxValue: '鏈�澶у��',
+ descr: '鎻忚堪',
+ editSysLayOut: '淇敼绯荤粺閰嶇疆',
+ },
menuSettings: '鑿滃崟璁剧疆',
parameterConfiguration: '鍙傛暟閰嶇疆',
rests: '鍏朵粬',
@@ -392,20 +400,20 @@
depName: '鍗曚綅鍚嶇О',
userexport: 'Excel鐢ㄦ埛瀵煎嚭',
userinput: 'Excel鐢ㄦ埛瀵煎叆',
- userStatus: "鐢ㄦ埛鐘舵��",
- uname: "鐢ㄦ埛鍚�",
- pwd: "瀵嗙爜",
- sex: "鎬у埆",
- natives: "绫嶈疮",
- idcard: "璇佷欢鍙�",
- job: "宸ヤ綔",
- edu: "鏁欒偛",
- addr: "鍦板潃",
- email: "鐢靛瓙閭欢",
- contact: "鑱旂郴鏂瑰紡",
- status: "鐘舵��",
- bak: "澶囨敞",
- depid: "鎵�灞為儴闂�",
+ userStatus: '鐢ㄦ埛鐘舵��',
+ uname: '鐢ㄦ埛鍚�',
+ pwd: '瀵嗙爜',
+ sex: '鎬у埆',
+ natives: '绫嶈疮',
+ idcard: '璇佷欢鍙�',
+ job: '宸ヤ綔',
+ edu: '鏁欒偛',
+ addr: '鍦板潃',
+ email: '鐢靛瓙閭欢',
+ contact: '鑱旂郴鏂瑰紡',
+ status: '鐘舵��',
+ bak: '澶囨敞',
+ depid: '鎵�灞為儴闂�',
chineseName: '涓枃鍚峓鐢ㄦ埛鍚峕',
affiliatedUnit: '鎵�灞炲崟浣峓鍦ㄨ亴]',
mobileNumber: '鎵嬫満鍙穂鎺ユ敹鐭俊]',
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 1bcffec..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,7 +61,7 @@
editCatalogue: false,
editUnit: false,
itemdetail: {},
- formLabelWidth: "70px",
+ formLabelWidth: '70px',
};
},
mounted() {
@@ -96,10 +96,10 @@
});
this.menuList = this.treeData(menuLists);
} else {
- alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
+ alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
}
} else {
- console.log("鎺ュ彛鎶ラ敊");
+ console.log('鎺ュ彛鎶ラ敊');
}
});
},
@@ -110,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 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 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);
}
@@ -174,14 +182,14 @@
watch: {
$route() {
let str = this.$route.path;
- if (str[0] == "/") {
+ if (str[0] == '/') {
this.activeIndex = str.slice(1);
}
},
},
created() {
let str = this.$route.path;
- if (str[0] == "/") {
+ if (str[0] == '/') {
this.activeIndex = str.slice(1);
}
},
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/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: "姝ｅ父璧勬簮" },
- { 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 7979415..be5f867 100644
--- a/src/views/userManage/resourceManage.vue
+++ b/src/views/userManage/resourceManage.vue
@@ -746,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;
},
--
Gitblit v1.9.3