From dd1f65280f3348506bc54a1022fd8572b6ba4eff Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期三, 18 一月 2023 09:43:22 +0800
Subject: [PATCH] 1
---
src/views/maintenance/databaseMonitoring.vue | 6
src/views/PackageTwo/WareInspection.vue | 5
public/LfSKyline/js/index.js | 3
public/config/config.js | 65 +-
public/config/config1.js | 57 ++
src/views/maintenance/systemMonitoring copy.vue | 1091 +++++++++++++++++++++++++++++++++++++++++++++++++++
src/views/maintenance/menuSettings.vue | 2
public/LfSKyline/index.html | 1
8 files changed, 1,190 insertions(+), 40 deletions(-)
diff --git a/public/LfSKyline/index.html b/public/LfSKyline/index.html
index 93859c8..b89cc96 100644
--- a/public/LfSKyline/index.html
+++ b/public/LfSKyline/index.html
@@ -18,7 +18,6 @@
window.app = {
fly: window.sceneConfig.fly,
mainUrl: location.href.substring(0, location.href.lastIndexOf("/") + 1)
-
}
document.writeln("<link href='./layui-v2.6.8/css/layui.css?" + new Date().getTime() + "' rel='stylesheet' \/>");
document.writeln("<link href='./css/index.css?" + new Date().getTime() + "' rel='stylesheet' \/>");
diff --git a/public/LfSKyline/js/index.js b/public/LfSKyline/js/index.js
index 0ac72b9..45b82d8 100644
--- a/public/LfSKyline/js/index.js
+++ b/public/LfSKyline/js/index.js
@@ -21,6 +21,9 @@
initSG: function () {
SG = TEWinEx.CreateInstance("TerraExplorerX.SGWorld74"); // SGWorld74,SGWorld71,SGWorld66
SG.AttachEvent("OnLoadFinished", this.loadFinished);
+
+
+
SG.Open(app.fly);
},
loadFinished: function () {
diff --git a/public/config/config.js b/public/config/config.js
index 5cef5a2..e430401 100644
--- a/public/config/config.js
+++ b/public/config/config.js
@@ -1,50 +1,47 @@
-// var ipConfig = location.hostname;
-var ipConfig = '192.168.20.205';
+var isWeb = location.hostname.indexOf("103.85.165.") > -1;
+
+var webHost = isWeb ? location.hostname + ":8052" : '192.168.20.205' + ":8088";
+
+var fmeHost = isWeb ? location.hostname + ":8051" : '192.168.20.205' + ":88";
+
+var iisHost = isWeb ? location.hostname + ":8050" : '192.168.20.205' + ":80";
+
var menuStartName = "绠￠亾鍩虹澶ф暟鎹钩鍙�";
-var LFData = "http://" + ipConfig + "/LFData";
+var LFData = "http://" + iisHost + "/LFData";
-var BASE_URL = 'http://' + ipConfig + ':8088/server';
+var BASE_URL = 'http://' + webHost + '/server';
-//webSocket 鏈嶅姟鍦板潃
-var socketUrl = 'ws://' + ipConfig + ':8088/server/ws/select';
+// WebSocket 鏈嶅姟鍦板潃
+var socketUrl = 'ws://' + webHost + '/server/ws/select';
-//鏁版嵁搴撶洃鎺у湴鍧�
-var sql_Url = 'http://' + ipConfig + ':8081/admin/druid/sql.html';
+// GeoServerUrl
+var geoServerURl = '/geoserver/LF/wms';
-//璺緞鍒嗘瀽鍦板潃
-var wnsUrl = 'http://' + ipConfig + ':9055/gisserver/wnsserver/beijingdaohang_wns';
+var geoserverWFS = '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
-//gisserver
-var gisServerUrl = 'http://' + ipConfig + ':9055/gisserver';
+var geoserverWFSLine = '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
-//geoServerUrl
-var geoserver = 'http://' + ipConfig + ':8088';
-var geoServerURl = geoserver + '/geoserver/LF/wms';
-var geoserverWFS = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
-var geoserverWFSLine = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
+// 妯″瀷鍔犺浇鍦板潃
+var modelUrl = LFData + '/tileset/SN/tileset.json';
-//妯″瀷鍔犺浇鍦板潃
-var modelUrl = 'http://' + ipConfig + '/LFData/tileset/SN/tileset.json';
-
-//DEM
-var demLayer = 'http://' + ipConfig + '/LFData/dem';
+// DEM
+var demLayer = LFData + '/dem';
// 缁煎悎灞曠ず
window.sceneConfig = {
- // sdk璁稿彲
- licenseServer: 'http://localhost/LFServer',
- // 鏈嶅姟鍦板潃
- // baseURL: 'http://183.162.245.49:8888/',
- // MPT鍚嶇О
- // mptName: "china_5m.Ei.397334",
- // // SG鍦板潃
- SGUrl: "http://" + ipConfig + "/SG/Elevation",
- //fly鍦板潃
- fly: 'http://' + ipConfig + '/LFData/fly/' + (ipConfig.indexOf("103.21.") ? "lfy_web.fly" : "lf_127.fly"),
- mptName: 'zhufeng.397336.mpt',
- positionBtn: [],
+ // Sdk璁稿彲
+ licenseServer: 'http://' + iisHost + '/LFServer',
+ // MPT鍚嶇О
+ mptName: "china_5m.Ei.397334",
+ // SG鍦板潃
+ SGUrl: "http://" + iisHost + "/SG/Elevation",
+ // Fly鍦板潃
+ fly: 'http://' + iisHost + '/LFData/fly/' + (isWeb ? "lfy_web.fly" : "lf_127.fly"),
+ //
+ positionBtn: [],
};
+
var gaoDeBaseUrl = [{
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
label: '楂樺痉鐭㈤噺',
diff --git a/public/config/config1.js b/public/config/config1.js
new file mode 100644
index 0000000..5cef5a2
--- /dev/null
+++ b/public/config/config1.js
@@ -0,0 +1,57 @@
+// var ipConfig = location.hostname;
+var ipConfig = '192.168.20.205';
+var menuStartName = "绠￠亾鍩虹澶ф暟鎹钩鍙�";
+
+var LFData = "http://" + ipConfig + "/LFData";
+
+var BASE_URL = 'http://' + ipConfig + ':8088/server';
+
+//webSocket 鏈嶅姟鍦板潃
+var socketUrl = 'ws://' + ipConfig + ':8088/server/ws/select';
+
+//鏁版嵁搴撶洃鎺у湴鍧�
+var sql_Url = 'http://' + ipConfig + ':8081/admin/druid/sql.html';
+
+//璺緞鍒嗘瀽鍦板潃
+var wnsUrl = 'http://' + ipConfig + ':9055/gisserver/wnsserver/beijingdaohang_wns';
+
+//gisserver
+var gisServerUrl = 'http://' + ipConfig + ':9055/gisserver';
+
+//geoServerUrl
+var geoserver = 'http://' + ipConfig + ':8088';
+var geoServerURl = geoserver + '/geoserver/LF/wms';
+var geoserverWFS = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
+var geoserverWFSLine = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
+
+//妯″瀷鍔犺浇鍦板潃
+var modelUrl = 'http://' + ipConfig + '/LFData/tileset/SN/tileset.json';
+
+//DEM
+var demLayer = 'http://' + ipConfig + '/LFData/dem';
+
+// 缁煎悎灞曠ず
+window.sceneConfig = {
+ // sdk璁稿彲
+ licenseServer: 'http://localhost/LFServer',
+ // 鏈嶅姟鍦板潃
+ // baseURL: 'http://183.162.245.49:8888/',
+ // MPT鍚嶇О
+ // mptName: "china_5m.Ei.397334",
+ // // SG鍦板潃
+ SGUrl: "http://" + ipConfig + "/SG/Elevation",
+ //fly鍦板潃
+ fly: 'http://' + ipConfig + '/LFData/fly/' + (ipConfig.indexOf("103.21.") ? "lfy_web.fly" : "lf_127.fly"),
+ mptName: 'zhufeng.397336.mpt',
+ positionBtn: [],
+};
+var gaoDeBaseUrl = [{
+ url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+ label: '楂樺痉鐭㈤噺',
+}, {
+ url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+ label: '楂樺痉褰卞儚',
+}, {
+ url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
+ label: '楂樺痉褰卞儚鏍囨敞'
+}];
diff --git a/src/views/PackageTwo/WareInspection.vue b/src/views/PackageTwo/WareInspection.vue
index d4b9d09..1aa26e1 100644
--- a/src/views/PackageTwo/WareInspection.vue
+++ b/src/views/PackageTwo/WareInspection.vue
@@ -21,10 +21,11 @@
methods: {
showChangeIfream(res) {
- if (res.indexOf('{host}') != -1) {
+ if (res.indexOf('{fmeHost}') != -1) {
- res = res.replace('{host}',ipConfig )
+ res = res.replace('{fmeHost}',fmeHost )
}
+
if (res.indexOf('token=') != -1) {
res = res + getToken();
}
diff --git a/src/views/maintenance/databaseMonitoring.vue b/src/views/maintenance/databaseMonitoring.vue
index 5de518a..6f68d07 100644
--- a/src/views/maintenance/databaseMonitoring.vue
+++ b/src/views/maintenance/databaseMonitoring.vue
@@ -29,10 +29,10 @@
methods: {
handleSelectionChange() { },
getUrl() {
-
+
var url = this.$store.state.iframeMsg;
- if (url.indexOf('{host}') != -1) {
- url = url.replace('{host}', ipConfig)
+ if (url.indexOf('{webHost}') != -1) {
+ url = url.replace('{webHost}', webHost)
}
if (url.indexOf('token=') != -1) {
diff --git a/src/views/maintenance/menuSettings.vue b/src/views/maintenance/menuSettings.vue
index 02532c7..e394294 100644
--- a/src/views/maintenance/menuSettings.vue
+++ b/src/views/maintenance/menuSettings.vue
@@ -795,6 +795,7 @@
}
},
showPermsMenu(res) {
+
switch (res.tag) {
case '/delete':
this.menuStatus.delete = true;
@@ -810,6 +811,7 @@
getPerms() {
var val = this.$store.state.currentPerms;
var permsEntity = this.$store.state.permsEntity;
+
if (permsEntity.length == 0) {
getPerms().then((res) => {
if (res.code == 200) {
diff --git a/src/views/maintenance/systemMonitoring copy.vue b/src/views/maintenance/systemMonitoring copy.vue
new file mode 100644
index 0000000..5be51ea
--- /dev/null
+++ b/src/views/maintenance/systemMonitoring copy.vue
@@ -0,0 +1,1091 @@
+<template>
+ <div class="systemMonitoring_box">
+ <My-bread :list="[
+ `${$t('operatManage.operatManage')}`,
+ `${$t('operatManage.systemMonitoring')}`,
+ ]"></My-bread>
+ <el-divider />
+ <div class="content_Box">
+ <div class="cloumn_Box1">
+ <div class="flex_Box1">
+ <el-tabs
+ v-model="activeName"
+ @tab-click="handleClick"
+ >
+ <el-tab-pane
+ :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
+ name="first"
+ >
+ <el-table
+ :data="resInfo"
+ style="width: 100%; height: 310px"
+ >
+ <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>
+ </el-tab-pane>
+ <el-tab-pane
+ :label="
+ $t('operatManage.systemMonitoringObj.serviceResourceStatus')
+ "
+ name="second"
+ >
+
+ <div
+ id="resUseChart"
+ style="width:101vh; height: 30vh; "
+ ></div>
+
+ </el-tab-pane>
+ <el-tab-pane
+ :label="$t('operatManage.systemMonitoringObj.userloginStatus')"
+ name="third"
+ >
+ <div
+ id="userLoginChart"
+ style="width:101vh; height: 30vh; "
+ ></div>
+ </el-tab-pane>
+ <el-tab-pane
+ :label="
+ $t('operatManage.systemMonitoringObj.resourceOperationStatus')
+ "
+ name="fourth"
+ >
+ <div
+ id="operateCountChart"
+ style="width:101vh; height: 30vh; "
+ ></div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ <div class="flex_Box">
+ <div>
+ <div
+ style="line-height: 32px"
+ class="imageTitle"
+ >
+ {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
+ </div>
+ </div>
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ height="90%"
+ >
+ <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>
+ </div>
+ <div class="cloumn_Box">
+ <div class="flex_Box">
+ <div style="width: 100%; height: 20px">
+ <div class="image1"></div>
+ <div class="imageTitle">
+ {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
+ </div>
+ </div>
+ <div class="top_Box1">
+ <div class="top_box_left">
+ <div class="left_title">
+ <div class="height_title">
+ <label>
+ {{
+ $t('operatManage.systemMonitoringObj.haveBeenUsed')
+ }}</label>
+ <p>{{ memInfo.use }}</p>
+ </div>
+ <div class="height_title">
+ <label>
+ {{
+ $t('operatManage.systemMonitoringObj.usageRate')
+ }}</label>
+ <p>{{ memInfo.usage }}</p>
+ </div>
+ </div>
+ <div class="left_title">
+ <div class="height_title">
+ <label>
+ {{
+ $t('operatManage.systemMonitoringObj.totalMemory')
+ }}</label>
+ <p>{{ memInfo.totalMem }}</p>
+ </div>
+ <div class="height_title">
+ <label>
+ {{
+ $t('operatManage.systemMonitoringObj.remainingMemory')
+ }}</label>
+ <p>{{ memInfo.remainMem }}</p>
+ </div>
+ </div>
+ </div>
+ <div
+ id="fathershuiWen"
+ class="top_box_right"
+ >
+ <div id="shuiwen"></div>
+ </div>
+ </div>
+ </div>
+ <div class="flex_Box">
+ <div>
+ <div class="image2"></div>
+ <div
+ style="line-height: 32px"
+ class="imageTitle"
+ >
+ {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
+ </div>
+ </div>
+ <div
+ id="Sys_cpu_chart"
+ style="width: 100%; height: 86%; margin-top: 8%"
+ ></div>
+ </div>
+ <div class="flex_Box">
+ <div style="width: 100%; height: 34px">
+ <div class="image3"></div>
+ <div
+ style="line-height: 32px"
+ class="imageTitle"
+ >
+ {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
+ </div>
+ </div>
+ <div class="ycContent">
+ <div class="ycsBox">
+ <div style="width:100%;height:100%">
+ <div class="ycTltle">{{ resInfoCount }}</div>
+ <div class="heteroTitle">
+ {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+ <!-- <div class="inform_box">
+ <div class="content_box">
+ <div class="top_box">
+ <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>
+ <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">{{ cpuInfo.cpuSysUsage }}</div>
+ <div id="Sys_cpu_chart"></div>
+ </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">{{ resInfoCount }}</div>
+ </div>
+ <div class="bottom_box">
+ {{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
+ </div>
+ </div>
+ </div>
+ <div class="chart_box">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane
+ :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
+ name="first"
+ ><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
+ ></el-tab-pane>
+ <el-tab-pane label="鏈嶅姟璧勬簮鐘舵��" name="second">
+ <div id="resUseChart" style="width: 1515px; height: 243px"></div>
+ </el-tab-pane>
+ <el-tab-pane label="鐢ㄦ埛鐧诲綍鐘舵��" name="third">
+ <div id="userLoginChart" style="width: 1515px; height: 243px"></div>
+ </el-tab-pane>
+ <el-tab-pane label="璧勬簮鎿嶄綔鐘舵��" name="fourth"
+ ><div
+ id="operateCountChart"
+ style="width: 1515px; height: 243px"
+ ></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="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 'echarts-liquidfill';
+export default {
+ //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+ components: {
+ MyBread,
+ },
+ data() {
+ //杩欓噷瀛樻斁鏁版嵁
+ return {
+ activeName: 'first',
+ ws: null,
+ tableData: [],
+ memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
+ cpuInfo: { cpuSysUsage: 0 },
+ resInfo: [],
+ resInfoCount: 0,
+ echartData: [],
+ resUseCount: {},
+ userLoginCount: [],
+ operateCount: [],
+ };
+ },
+ //鏂规硶闆嗗悎
+ methods: {
+ SetTableData1(res) {
+ this.tableData = res.userInfo;
+ this.memInfo = res.memInfo;
+ this.cpuInfo = res.cpuInfo;
+ if (this.echartData.length == 7) {
+ this.echartData.splice(0, 1);
+ }
+ this.lineChart2(this.memInfo.usage);
+ this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
+ this.lineChart1();
+ },
+ SetTableData2(res) {
+ this.resInfo = res.resInfo;
+ this.resInfoCount = res.resInfo.length;
+ },
+ SetTableData3(res) {
+ this.resUseCount = res.resUseCount;
+ this.operateCount = res.operateCount.operateCount;
+ this.userLoginCount = res.userLoginCount.userLoginCount;
+ this.lineChart3();
+ this.lineChart4();
+ this.lineChart5();
+ },
+ handleClick(tab, event) {
+ switch (tab) {
+ case 'first':
+ break;
+ case 'second':
+ this.lineChart3();
+ break;
+ case 'third':
+ this.lineChart4();
+ break;
+ case 'fourth':
+ this.lineChart5();
+ break;
+ }
+ },
+ lineChart1() {
+ const valueList = this.echartData.map(function (item) {
+ return item[1];
+ });
+
+ var option = {
+ // Make gradient line here
+ visualMap: [
+ {
+ show: false,
+ type: 'continuous',
+ seriesIndex: 0,
+ },
+ ],
+ toolbox: {
+ show: true,
+ feature: {
+
+ saveAsImage: { show: true }
+ }
+ },
+ title: [],
+ tooltip: {
+ trigger: 'axis',
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['', '', '', '', '', '', ''],
+ },
+ yAxis: [
+ {
+ axisLabel: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ },
+ },
+ ],
+ grid: [
+ {
+ top: '10%',
+ bottom: '10%',
+ left: '10%',
+ right: '10%',
+ },
+ ],
+ series: [
+ {
+ type: 'line',
+ showSymbol: false,
+ data: valueList,
+ },
+ ],
+ };
+
+ let myChart = this.$echarts.init(
+ document.getElementById('Sys_cpu_chart')
+ );
+ myChart.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart.resize();
+ });
+ },
+ lineChart2(res) {
+
+
+ var a = 0;
+ if (res != 0) {
+ a = res.split('%').join('');
+ }
+
+ var data = { name: '1111', value: parseFloat(a) / 100 };
+ var list = [];
+ let value = data.value;
+ list.push({ name: data.name, value: data.value });
+
+ for (let i = 0; i < 2; i++) {
+ if (value - 0.1 > 0) {
+ value -= 0.1;
+ list.push({ name: data.name, value: value });
+ }
+ }
+ var options = {
+ // 鎻愮ず妗嗙粍浠�
+ tooltip: {
+ show: false,
+ trigger: 'item', // 瑙﹀彂绫诲瀷, 鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
+ textStyle: {
+ show: false,
+ },
+ formatter: function (value) {
+ return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
+ },
+ },
+ series: [
+ {
+ type: 'liquidFill',
+ name: ' ',
+ radius: '40%',
+ center: ['30%', '30%'],
+ shape: 'circle',
+ phase: 0,
+ direction: 'right',
+ outline: {
+ show: true,
+ borderDistance: 0, // 杈规绾夸笌鍥捐〃鐨勮窛绂� 鏁板瓧
+ itemStyle: {
+ opacity: 1,
+ borderWidth: 0,
+ borderColor: '#2bf9ed',
+ },
+ },
+ // 鍥惧舰鏍峰紡
+ itemStyle: {
+ color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#c5e87e' }, //鏌卞浘娓愬彉鑹�
+ { offset: 0.5, color: '#2bf9ed' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ ]),
+ opacity: 0.5,
+ shadowBlur: 10,
+ },
+ backgroundStyle: {
+ color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#2bf9ed' }, //鏌卞浘娓愬彉鑹�
+ { offset: 0.4, color: '#44C0C1' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ ]),
+ opacity: 0.5,
+ },
+ // 鍥惧舰鐨勯珮浜牱寮�
+ emphasis: {
+ itemStyle: {
+ opacity: 1,
+ },
+ },
+ // 鍥惧舰涓婄殑鏂囨湰鏍囩
+ label: {
+ fontSize: 40,
+ fontWeight: 600,
+ color: '#fff',
+ },
+ data: list,
+ },
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['43%', '50%'],
+ center: ['30%', '30%'],
+ startAngle: 340,
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ },
+ label: {
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold',
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ {
+ value: 0.4,
+ name: 'Direct',
+ itemStyle: {
+ color: '#2bf9ed',
+ },
+ },
+ {
+ value: 0.6,
+ name: 'Direct',
+ itemStyle: {
+ color: 'rgba(240, 248, 255, 0)',
+ },
+ },
+ ],
+ emphasis: {
+ disabled: true,
+ },
+ tooltip: {
+ show: false,
+ },
+ },
+ ],
+ };
+
+ let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
+ myChart1.setOption(options);
+ window.addEventListener('resize', function () {
+ myChart1.resize();
+ });
+ },
+ lineChart3() {
+ var data = [
+ { name: '鍙敤璧勬簮', value: this.resUseCount.resAbleCount },
+ { name: '涓嶅彲鐢ㄨ祫婧�', value: this.resUseCount.resUnableCount },
+ ];
+ var option = {
+ tooltip: {
+ trigger: 'item',
+ },
+ toolbox: {
+ show: true,
+ feature: {
+
+ saveAsImage: { show: true }
+ }
+ },
+ legend: {
+ top: '5%',
+ left: 'center',
+ textStyle: {
+ fontSize: 18, //瀛椾綋澶у皬
+ color: '#ffffff', //瀛椾綋棰滆壊
+ },
+ },
+ series: [
+ {
+ name: ' ',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold',
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: data,
+ },
+ ],
+ };
+ let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
+ myChart2.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart2.resize();
+ });
+ },
+ lineChart4() {
+ var data1 = [];
+ var data2 = [];
+ for (var i in this.userLoginCount) {
+ data1.push(this.userLoginCount[i].optime);
+ data2.push(this.userLoginCount[i].count);
+ }
+
+ var option = {
+ title: {
+ show: false,
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ legend: {
+ show: false,
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {},
+ },
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: data1,
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ name: '',
+ type: 'line',
+ stack: 'Total',
+ data: data2,
+ },
+ ],
+ };
+ let myChart3 = this.$echarts.init(
+ document.getElementById('userLoginChart')
+ );
+ myChart3.setOption(option);
+ },
+ lineChart5() {
+ var data1 = [];
+ var data2 = [];
+ for (var i in this.operateCount) {
+ data1.push(this.operateCount[i].modular2);
+ data2.push(this.operateCount[i].count);
+ }
+
+ var option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ toolbox: {
+ show: true,
+ feature: {
+
+ saveAsImage: { show: true }
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: data1,
+ axisTick: {
+ alignWithLabel: true,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ },
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '60%',
+ data: data2,
+ },
+ ],
+ };
+ let myChart4 = this.$echarts.init(
+ document.getElementById('operateCountChart')
+ );
+ myChart4.setOption(option);
+ },
+ },
+ created() {
+ if (Window.ws != null) {
+ Window.ws.close();
+ Window.ws.onclose = () => {
+ console.log('鏈嶅姟鍣ㄥ叧闂�');
+ };
+ Window.ws = null;
+ }
+
+ Window.ws = new WebSocket(socketUrl);
+ Window.ws.option = () => { };
+ var that = this;
+ Window.ws.onmessage = (msg) => {
+ // console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
+ var data = JSON.parse(msg.data);
+ console.log(data);
+ if (data.userInfo != undefined) {
+ that.SetTableData1(data);
+ } else if (data.resInfo != undefined) {
+ that.SetTableData2(data);
+ } else if (data.operateCount != undefined) {
+ that.SetTableData3(data);
+ }
+ };
+ },
+
+ mounted() {
+ var mywidth = $("#fathershuiWen").width();
+ var mysright = $("#fathershuiWen").height();
+ var width = (mywidth * 1.5) + "px"
+ var height = (mysright * 1.5) + "px"
+ $("#shuiwen").width(width);
+ $("#shuiwen").height(height);
+
+
+
+
+
+ this.lineChart2(0);
+ },
+};
+</script>
+<style lang="less" scoped>
+//@import url(); 寮曞叆鍏叡css绫�
+.systemMonitoring_box {
+ height: 98%;
+ width: 98%;
+ padding: 1%;
+ position: absolute;
+ .content_Box {
+ width: 97%;
+ height: 85%;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ .cloumn_Box {
+ width: 100%;
+ height: 38%;
+
+ display: flex;
+ justify-content: space-between;
+ .flex_Box {
+ width: 30.5%;
+ height: 88%;
+ border: 1px solid rgb(202, 201, 204);
+ border-radius: 5px;
+ padding: 1%;
+ background: rgb(21, 20, 20);
+
+ .image1 {
+ width: 46px;
+ height: 20px;
+ float: left;
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 38.png")
+ no-repeat;
+ background-size: 100% 100%;
+ }
+ .image2 {
+ width: 34px;
+ height: 34px;
+ float: left;
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 37.png")
+ no-repeat;
+ background-size: 100% 100%;
+ }
+ .image3 {
+ width: 32px;
+ height: 32px;
+ float: left;
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 40.png")
+ no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+ .ycsBox {
+ width: 200px;
+ height: 200px;
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 39.png")
+ no-repeat;
+ background-size: 100% 100%;
+ border: 1px;
+ display: flex;
+ align-items: center;
+ }
+ .ycContent {
+ width: 100%;
+ padding: 1%;
+ height: 80%;
+ display: flex;
+ justify-content: center;
+ }
+ }
+ .imageTitle {
+ float: left;
+ color: white;
+ margin-left: 10px;
+ }
+ .ycTltle {
+ width: 100%;
+ margin-top: 8%;
+ font-size: 60px;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #009cff;
+ text-align: center;
+ }
+ .heteroTitle {
+ width: 100%;
+ text-align: center;
+ font-size: 16px;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #ffffff;
+ line-height: 49px;
+
+ // margin-top: 20px;
+
+ // text-align: center;
+ }
+ .top_Box1 {
+ width: 96%;
+ height: 91%;
+ margin-top: 2%;
+ margin-left: 4%;
+ display: flex;
+ justify-content: space-between;
+ .top_box_left {
+ width: 59%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ .left_title {
+ width: 48%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ .height_title {
+ width: 100%;
+ height: 48%;
+ label {
+ color: white;
+ }
+ p {
+ color: white;
+ margin-top: 3%;
+ font-size: 24px;
+ }
+ }
+ }
+ }
+ .top_box_right {
+ width: 39%;
+ height: 100%;
+ }
+ }
+
+ .cloumn_Box1 {
+ width: 100%;
+ height: 58%;
+
+ display: flex;
+ justify-content: space-between;
+ .flex_Box1 {
+ width: 64%;
+ height: 92%;
+ padding: 1%;
+ border: 1px solid rgb(202, 201, 204);
+ border-radius: 5px;
+ background: rgb(21, 20, 20);
+ }
+ .flex_Box {
+ width: 30.5%;
+ height: 92%;
+ border: 1px solid rgb(202, 201, 204);
+ border-radius: 5px;
+ padding: 1%;
+ background: rgb(21, 20, 20);
+ }
+ }
+ }
+ /deep/.el-tabs__item {
+ color: white;
+ }
+ /deep/.el-tabs__item.is-active {
+ color: #009cff;
+ }
+ /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+ /deep/ .el-table {
+ background-color: transparent;
+
+ th,
+ td {
+ background-color: transparent;
+ }
+ .el-table__expanded-cell {
+ background-color: transparent !important;
+ }
+
+ // 琛ㄥご鑳屾櫙鑹�
+ th.el-table__cell {
+ background-color: #303030;
+ color: #fff;
+ }
+ tr > td {
+ background-color: #303030;
+ color: #fff;
+ }
+
+ // hover鏁堟灉
+ tr:hover > td {
+ background-color: rgba(255, 255, 255, 0.3) !important;
+ }
+
+ tbody tr:hover {
+ background-color: rgba(255, 255, 255, 0.3) !important;
+ // text-align: center;
+ }
+
+ // 婊氬姩鏉″楂�
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+ }
+
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 5px;
+ /*婊氬姩鏉″搴�*/
+ height: 10px;
+ /*婊氬姩鏉￠珮搴�*/
+ }
+ /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+ .el-table__body-wrapper::-webkit-scrollbar-track {
+ box-shadow: 0px 1px 3px #216fe6 inset;
+ /*婊氬姩鏉＄殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+ border-radius: 10px;
+ }
+
+ /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ box-shadow: 0px 1px 3px #216fe6 inset;
+ border-radius: 6px;
+ background-color: #216fe6;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3