From 42c29b4552daf2eef493c0e7e29c21611ebd8ac2 Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期三, 21 九月 2022 10:55:41 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.20.39:8989/r/LFWEB
---
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: "姝ｅ父璧勬簮" },
+ { 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