From 2a6cb291418889f479dc0061ce01618db6519619 Mon Sep 17 00:00:00 2001 From: 王旭 <1377869194@qq.com> Date: 星期三, 21 九月 2022 10:46:04 +0800 Subject: [PATCH] 服务资源实时监控 --- src/views/maintenance/systemMonitoring.vue | 811 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 592 insertions(+), 219 deletions(-) diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue index a4adfc3..f067d00 100644 --- a/src/views/maintenance/systemMonitoring.vue +++ b/src/views/maintenance/systemMonitoring.vue @@ -1,50 +1,175 @@ <template> <div class="systemMonitoring_box"> - <My-bread :list="['杩愮淮绠$悊', '绯荤粺鐩戞帶']"></My-bread> + <My-bread + :list="[ + `${$t('operatManage.operatManage')}`, + `${$t('operatManage.systemMonitoring')}`, + ]" + ></My-bread> <el-divider /> - <div class="table_box"> - <p class="title_box">鏈嶅姟鍒楄〃</p> - <el-table - - - :data="tableData" - - style="width: 100%" - - > - <el-table-column type="selection" width="55"> </el-table-column> - <el-table-column prop="name" label="鏈嶅姟鍚嶇О"> </el-table-column> - <el-table-column prop="servicecatalog" label="鏈嶅姟鐩綍"> - </el-table-column> - <el-table-column prop="visitTimes" label="璁块棶娆℃暟"> </el-table-column> - <el-table-column prop="date" label="鍒涘缓鏃堕棿" show-overflow-tooltip> - </el-table-column> - <el-table-column prop="state" label="杩愯鐘舵��" 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 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> + </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 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">0</div> + </div> + <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.numberOfAbnormalSystems')}}</div> + </div> + <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 class="chart_box"> - <div class="left_box"> - <p class="title_box">瀹炴椂鏈嶅姟璋冪敤</p> - <div id="line_chart"></div> + <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> + </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_box"> - <p class="title_box">绯荤粺浣跨敤鐘跺喌</p> - <div class="gauge_box"> - <div id="gauge_chart1"></div> - <div id="gauge_chart2"></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> @@ -61,6 +186,11 @@ data() { //杩欓噷瀛樻斁鏁版嵁 return { + formInline: { + user: "", + region: "", + }, + activeName: "first", currentPage4: 1, tableData: [ { @@ -96,6 +226,17 @@ }, //鏂规硶闆嗗悎 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} 鏉); }, @@ -103,73 +244,46 @@ console.log(`褰撳墠椤�: ${val}`); }, gaugeChart1() { - const gaugeData = [ - { - value: 20, - name: "CPU鍒╃敤鐜�", - title: { - offsetCenter: ["0%", "10%"], - }, - detail: { - valueAnimation: true, - offsetCenter: ["0%", "-10%"], - }, - }, - ]; let option = { + tooltip: { + trigger: "item", + }, + legend: { + top: "5%", + left: "20%", + orient: "vertical", + }, series: [ { - type: "gauge", - // radius: "10%", + 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: "#5c5dd3", + color: function (colors) { + var colorList = ["#d3e9af", "#ed9678"]; + return colorList[colors.dataIndex]; + }, }, - }, - startAngle: 90, - endAngle: -270, - pointer: { - show: false, - }, - progress: { - show: true, - overlap: false, - roundCap: true, - clip: false, - itemStyle: { - borderWidth: 1, - borderColor: "#5c5dd3", - }, - }, - axisLine: { - lineStyle: { - width: 40, - }, - }, - splitLine: { - show: false, - distance: 0, - length: 10, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: false, - distance: 50, - }, - data: gaugeData, - title: { - fontSize: 24, - fontWeight: 800, - }, - detail: { - fontSize: 40, - color: "auto", - borderColor: "auto", - borderRadius: 20, - borderWidth: 0, - formatter: "{value}%", }, }, ], @@ -181,76 +295,46 @@ }); }, gaugeChart2() { - const gaugeData = [ - { - value: 20, - name: "鍐呭瓨鍒╃敤鐜�", - title: { - offsetCenter: ["0%", "10%"], - }, - detail: { - valueAnimation: true, - offsetCenter: ["0%", "-10%"], - }, - }, - ]; let option = { + tooltip: { + trigger: "item", + }, + legend: { + top: "5%", + left: "20%", + orient: "vertical", + }, series: [ { - type: "gauge", + 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: "#78c9f8", - }, - }, - // radius: "10%", - startAngle: 90, - endAngle: -270, - pointer: { - show: false, - }, - progress: { - show: true, - overlap: false, - roundCap: true, - clip: false, - itemStyle: { - borderWidth: 1, - borderColor: "#78c9f8", - normal: { - color: "#78c9f8", + color: function (colors) { + var colorList = ["#d3e9af", "#ed9678"]; + return colorList[colors.dataIndex]; }, }, - }, - axisLine: { - lineStyle: { - width: 40, - }, - }, - splitLine: { - show: false, - distance: 0, - length: 10, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: false, - distance: 50, - }, - data: gaugeData, - title: { - fontSize: 24, - fontWeight: 800, - }, - detail: { - fontSize: 40, - color: "auto", - borderColor: "auto", - borderRadius: 20, - borderWidth: 0, - formatter: "{value}%", }, }, ], @@ -261,28 +345,190 @@ myChart.resize(); }); }, - lineChart() { + barChart() { let option = { xAxis: { type: "category", - data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + 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: { - name: "娆℃暟", type: "value", }, series: [ { - data: [150, 230, 224, 218, 135, 147, 260], - type: "line", - itemStyle: { - normal: { - color: "#1f88ff", - lineStyle: { - color: "#1f88ff", - }, - }, + 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])); + } + 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, }, ], }; @@ -292,13 +538,57 @@ myChart.resize(); }); }, + lineChart1() { + let option = { + grid: { + top: 0, + left: "0%", + right: "4%", + bottom: "0%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + }, + xAxis: { + type: "category", + boundaryGap: false, + data: ["", "", "", "", "", "", ""], + }, + yAxis: { + type: "value", + axisLabel: { + show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧 + }, + }, + series: [ + { + data: [820, 932, 901, 934, 1290, 1330, 1320], + type: "line", + areaStyle: {}, + }, + ], + }; + let myChart = this.$echarts.init( + document.getElementById("Sys_cpu_chart") + ); + myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); + }, handleSelectionChange() {}, }, created() {}, mounted() { - this.lineChart(); - this.gaugeChart1(); - this.gaugeChart2(); + this.$nextTick(() => { + this.lineChart(); + this.lineChart1(); + this.barChart(); + this.barChart1(); + this.gaugeChart1(); + this.gaugeChart2(); + }); }, }; </script> @@ -310,13 +600,85 @@ height: 100%; padding: 10px; box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-around; + .inform_box { + height: 16%; + display: flex; + justify-content: space-between; + align-items: center; + .content_box { + box-sizing: border-box; + padding: 10px; + padding-top: 30px; + width: 24%; + height: 100%; + background: #fff; + border-radius: 5px; + border: 1px solid rgb(202, 201, 204); + .top_box { + width: 70%; + height: 90%; + margin-left: 15%; + display: flex; + flex-direction: column; + justify-content: space-around; + padding-bottom: 15px; + box-sizing: border-box; + .Syslabel { + font-family: sans-serif; + font-size: 13px; + color: gray; + text-align: left; + // margin-left: 20px; + } + .details { + font-family: sans-serif; + font-size: 31px; + color: #1b1e21; + text-align: center; + letter-spacing: 2px; + } + #Sys_cpu_chart { + width: 100%; + height: 30%; + } + } + .bottom_box { + border-top: 1px solid rgb(202, 201, 204); + text-align: center; + color: #6c757d; + font-size: 14px; + } + } + } .table_box { - height: 40%; - padding: 10px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - overflow: auto; + 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); + } } .title_box { font-weight: 800; @@ -325,44 +687,55 @@ text-align: center; } .chart_box { - height: calc(60% - 100px); - margin-top: 20px; - display: flex; - justify-content: space-between; - .left_box { - width: 40%; - padding: 10px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - box-sizing: border-box; - #line_chart { + height: 36%; + padding: 10px; + background: #fff; + border-radius: 5px; + border: 1px solid rgb(202, 201, 204); + box-sizing: border-box; + .el-tabs { + height: 100%; + } + /deep/ .el-tabs__content { + height: calc(100% - 55px); + } + .el-tab-pane { + height: 100%; + } + .gauge_box { + display: flex; + justify-content: space-between; + width: 100%; + height: 95%; + position: relative; + .input_box{ + position: absolute; + top: 0; + left: 0; + } + #gauge_chart2 { + width: 49%; + height: 100%; + } + #gauge_chart1 { + width: 49%; + height: 100%; + } + #gauge_chart3 { width: 100%; height: 100%; } - } - .right_box { - margin-left: 20px; - width: 60%; - padding: 10px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - box-sizing: border-box; - - .gauge_box { - display: flex; - justify-content: space-between; + #gauge_chart4 { width: 100%; - height: 95%; - #gauge_chart2 { - width: 49%; - height: 100%; - } - #gauge_chart1 { - width: 49%; - height: 100%; - } + height: 100%; + } + #gauge_chart5 { + width: 100%; + height: 100%; + } + #line_chart { + width: 100%; + height: 100%; } } } -- Gitblit v1.9.3