From 6e0ef2d1f836680e6a55b7fc2d813b759038c144 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 25 十月 2022 15:35:34 +0800
Subject: [PATCH] 路径规划，底图切换
---
src/views/maintenance/systemMonitoring.vue | 246 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 229 insertions(+), 17 deletions(-)
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index 7310a0a..cfdbb11 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -12,13 +12,7 @@
<div class="top_box">
<div style="width: 100%; height: 100%">
<div
- style="
- width: 30%;
- height: 100%;
-
- float: left;
- margin-left: 20%;
- "
+ style="width: 30%; height: 100%; float: left; margin-left: 20%"
>
<div class="Syslabel">
<p style="line-height: 25px">
@@ -94,10 +88,50 @@
</div> -->
</div>
<div class="chart_box">
- <p class="title_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%">
+ </p> -->
+ <!-- <el-table :data="resInfo" style="width: 100%">
<el-table-column
prop="id"
:label="$t('operatManage.systemMonitoringObj.resourceID')"
@@ -119,7 +153,7 @@
show-overflow-tooltip
>
</el-table-column>
- </el-table>
+ </el-table> -->
<!-- <div style="margin-top: 10px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@@ -190,6 +224,7 @@
data() {
//杩欓噷瀛樻斁鏁版嵁
return {
+ activeName: 'first',
ws: null,
tableData: [],
memInfo: { totalMem: 0, use: 0, usage: 0 },
@@ -197,6 +232,9 @@
resInfo: [],
resInfoCount: 0,
echartData: [],
+ resUseCount: {},
+ userLoginCount: [],
+ operateCount: [],
};
},
//鏂规硶闆嗗悎
@@ -216,6 +254,29 @@
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() {
let option = {
@@ -258,7 +319,7 @@
},
lineChart2(res) {
var a = res.split('%').join('');
- console.log(a);
+
let value = parseFloat(a);
let data = [value, value, value];
let option = {
@@ -396,8 +457,156 @@
let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
myChart1.setOption(option);
window.addEventListener('resize', function () {
- myChart.resize();
+ myChart1.resize();
});
+ },
+ lineChart3() {
+ var data = [
+ { name: '鍙敤璧勬簮', value: this.resUseCount.resAbleCount },
+ { name: '涓嶅彲鐢ㄨ祫婧�', value: this.resUseCount.resUnableCount },
+ ];
+ var option = {
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ top: '5%',
+ left: 'center',
+ },
+ 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',
+ },
+ },
+ 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() {
@@ -408,17 +617,20 @@
};
Window.ws = null;
}
- Window.ws = new WebSocket('ws://192.168.20.55:12316/ws');
+
+ 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);
-
- if (data.resInfo == undefined) {
+ console.log(data);
+ if (data.userInfo != undefined) {
that.SetTableData1(data);
- } else {
+ } else if (data.resInfo != undefined) {
that.SetTableData2(data);
+ } else if (data.operateCount != undefined) {
+ that.SetTableData3(data);
}
};
},
--
Gitblit v1.9.3