From 98a2b24c89e81a5aacdcbd6b739fef422adf17dd Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期五, 29 三月 2024 09:57:55 +0800 Subject: [PATCH] 代码更新 --- src/views/maintenance/systemMonitoring.vue | 201 +++++++++++++++++++++++--------------------------- 1 files changed, 93 insertions(+), 108 deletions(-) diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue index 649ea4a..abdc145 100644 --- a/src/views/maintenance/systemMonitoring.vue +++ b/src/views/maintenance/systemMonitoring.vue @@ -1,72 +1,40 @@ <template> <div class="systemMonitoring_box"> - <My-bread - :list="[ - `${$t('operatManage.operatManage')}`, - `${$t('operatManage.systemMonitoring')}`, - ]" - ></My-bread> + <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 subpage_Div"> <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane - :label="$t('operatManage.systemMonitoringObj.abnormalResources')" - name="first" - > + <el-tab-pane :label="$t('operatManage.systemMonitoringObj.abnormalResources')" name="first"> <div class="table_b"> <el-table :data="resInfo" style="width: 100%; height: 100%"> - <el-table-column - prop="id" - :label="$t('operatManage.systemMonitoringObj.resourceID')" - > + <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 prop="name" :label="$t('operatManage.systemMonitoringObj.resourceName')"> </el-table-column> - <el-table-column - prop="bak" - :label=" - $t('operatManage.systemMonitoringObj.resourceState') - " - > + <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 prop="createTime" :label="$t('operatManage.systemMonitoringObj.abnormaltime')" + show-overflow-tooltip> </el-table-column> </el-table> </div> </el-tab-pane> - <el-tab-pane - :label=" - $t('operatManage.systemMonitoringObj.serviceResourceStatus') - " - name="second" - > + <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" - > + <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 :label="$t('operatManage.systemMonitoringObj.resourceOperationStatus') + " name="fourth"> + <div id="operateCountChart" style="width: 101vh; height: 30vh"></div> </el-tab-pane> </el-tabs> </div> @@ -78,27 +46,13 @@ </div> <div class="table_b"> <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 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 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 prop="loginTime" :label="$t('operatManage.systemMonitoringObj.onlineTime')" + fixed="right"> </el-table-column> </el-table> </div> @@ -118,17 +72,15 @@ <div class="height_title"> <label> {{ - $t("operatManage.systemMonitoringObj.haveBeenUsed") - }}</label - > + $t("operatManage.systemMonitoringObj.haveBeenUsed") + }}</label> <p>{{ memInfo.use }}</p> </div> <div class="height_title"> <label> {{ - $t("operatManage.systemMonitoringObj.usageRate") - }}</label - > + $t("operatManage.systemMonitoringObj.usageRate") + }}</label> <p>{{ memInfo.usage }}</p> </div> </div> @@ -136,17 +88,15 @@ <div class="height_title"> <label> {{ - $t("operatManage.systemMonitoringObj.totalMemory") - }}</label - > + $t("operatManage.systemMonitoringObj.totalMemory") + }}</label> <p>{{ memInfo.totalMem }}</p> </div> <div class="height_title"> <label> {{ - $t("operatManage.systemMonitoringObj.remainingMemory") - }}</label - > + $t("operatManage.systemMonitoringObj.remainingMemory") + }}</label> <p>{{ memInfo.remainMem }}</p> </div> </div> @@ -163,10 +113,7 @@ {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }} </div> </div> - <div - id="Sys_cpu_chart" - style="width: 100%; height: 86%; margin-top: 8%" - ></div> + <div id="Sys_cpu_chart" style="width: 100%; height: 86%; margin-top: 8%"></div> </div> <div class="flex_Box subpage_Div"> <div style="width: 100%; height: 34px"> @@ -181,8 +128,8 @@ <div class="ycTltle">{{ resInfoCount }}</div> <div class="heteroTitle"> {{ - $t("operatManage.systemMonitoringObj.numberOfExceptions") - }} + $t("operatManage.systemMonitoringObj.numberOfExceptions") + }} </div> </div> </div> @@ -633,12 +580,15 @@ }, ], }; + var dome = document.getElementById("shuiwen") + if (dome) { + let myChart1 = this.$echarts.init(dome); + myChart1.setOption(options); + window.addEventListener("resize", function () { + myChart1.resize(); + }); + } - let myChart1 = this.$echarts.init(document.getElementById("shuiwen")); - myChart1.setOption(options); - window.addEventListener("resize", function () { - myChart1.resize(); - }); }, lineChart3() { var data = [ @@ -803,6 +753,24 @@ ); myChart4.setOption(option); }, + isJSON(str) { + if (typeof str == 'string') { + try { + var obj = JSON.parse(str); + if (typeof obj == 'object' && obj) { + return true; + } else { + return false; + } + + } catch (e) { + + return false; + } + } + + } + }, created() { if (Window.ws != null) { @@ -814,19 +782,22 @@ } Window.ws = new WebSocket(socketUrl); - Window.ws.option = () => {}; + 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); + var obj = this.isJSON(msg.data); + if (obj) { + var data = JSON.parse(msg.data); + if (data.userInfo != undefined) { + that.SetTableData1(data); + } else if (data.resInfo != undefined) { + that.SetTableData2(data); + } else if (data.operateCount != undefined) { + that.SetTableData3(data); + } } + }; }, @@ -853,10 +824,12 @@ .table_b .el-table /deep/ .el-table__expanded-cell { background-color: transparent !important; } + .table_b .el-table /deep/ th, .table_b .el-table /deep/ tr { background-color: transparent !important; } + .content_Box { width: 100%; height: 90%; @@ -864,12 +837,14 @@ 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%; @@ -881,37 +856,37 @@ width: 46px; height: 20px; float: left; - background: url("../../assets/img/systemMonitoring/鍥惧眰 38.png") - no-repeat; + 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: 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: url("../../assets/img/systemMonitoring/鍥惧眰 40.png") no-repeat; background-size: 100% 100%; } } + .ycsBox { width: 495px; height: 182px; - background: url("../../assets/img/systemMonitoring/鍥惧眰 39.png") - no-repeat; + 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%; @@ -921,11 +896,13 @@ justify-content: center; } } + .imageTitle { float: left; margin-left: 10px; } + .ycTltle { width: 100%; margin-top: 8%; @@ -935,6 +912,7 @@ color: #009cff; text-align: center; } + .heteroTitle { width: 100%; text-align: center; @@ -948,6 +926,7 @@ // text-align: center; } + .top_Box1 { width: 96%; height: 91%; @@ -955,17 +934,20 @@ 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%; @@ -977,6 +959,7 @@ } } } + .top_box_right { width: 39%; height: 100%; @@ -989,6 +972,7 @@ display: flex; justify-content: space-between; + .flex_Box1 { width: 64%; height: 92%; @@ -996,6 +980,7 @@ border-radius: 5px; } + .flex_Box { width: 30.5%; height: 92%; -- Gitblit v1.9.3