From 51ecc231aa4f73a5071e188b4528ab59d730b07f Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期二, 05 九月 2023 19:14:30 +0800 Subject: [PATCH] 移除视频分析相关功能, 默认自动登录 --- src/pages/systemMonitor/index/App.vue | 453 +++++++++++++++++++++++--------------------------------- 1 files changed, 189 insertions(+), 264 deletions(-) diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue index d95e0c4..8e2fb1d 100644 --- a/src/pages/systemMonitor/index/App.vue +++ b/src/pages/systemMonitor/index/App.vue @@ -1,41 +1,21 @@ <template> <div class="s-system-monitor"> <el-tabs id="systemMonitor" v-model="activeName"> - <el-tab-pane name="proc"> + <el-tab-pane name="proc" v-if="false"> <span slot="label"> <span class="iconfont icon"></span> 鍗曞厓</span > <div class="left-tab"> - <div - class="tab-item" - :class="activeTab == 0 ? 'tab-item-active' : ''" - @click="activeTab = 0" - > + <div class="tab-item" :class="activeTab == 0 ? 'tab-item-active' : ''" @click="activeTab = 0"> <div class="title">绠楁硶鍗曞厓</div> - <div class="subtitle"> - 姝e湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏� - </div> - <span - class="iconfont icon" - :style="activeTab == 0 ? {} : { color: '#fff' }" - ></span - > + <div class="subtitle">姝e湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏�</div> + <span class="iconfont icon" :style="activeTab == 0 ? {} : { color: '#fff' }"></span> </div> - <div - class="tab-item" - :class="activeTab == 1 ? 'tab-item-active' : ''" - @click="activeTab = 1" - > + <div class="tab-item" :class="activeTab == 1 ? 'tab-item-active' : ''" @click="activeTab = 1"> <div class="title">搴旂敤鍗曞厓</div> - <div class="subtitle"> - 姝e湪杩涜{{ appProcessData.length }}涓簲鐢ㄥ崟鍏� - </div> - <span - class="iconfont icon" - :style="activeTab == 1 ? {} : { color: '#fff' }" - ></span - > + <div class="subtitle">姝e湪杩涜{{ appProcessData.length }}涓簲鐢ㄥ崟鍏�</div> + <span class="iconfont icon" :style="activeTab == 1 ? {} : { color: '#fff' }"></span> </div> </div> <div class="form-title" v-if="activeTab == 0"> @@ -118,13 +98,7 @@ > <div class="column-left" ref="left"> <div class="resize-bar"> - <div - :class="[ - 'ax_default', - activeChartItem == 'cpu' ? 'selected' : '', - ]" - @click="setActiveChartItem('cpu')" - > + <div :class="['ax_default', activeChartItem == 'cpu' ? 'selected' : '']" @click="setActiveChartItem('cpu')"> <div class="ax_default_pic color-cpu"></div> <div> <div class="ax_default_text">CPU</div> @@ -132,13 +106,7 @@ </div> </div> - <div - :class="[ - 'ax_default', - activeChartItem == 'mem' ? 'selected' : '', - ]" - @click="setActiveChartItem('mem')" - > + <div :class="['ax_default', activeChartItem == 'mem' ? 'selected' : '']" @click="setActiveChartItem('mem')"> <div class="ax_default_pic color-mem"></div> <div> <div class="ax_default_text">鍐呭瓨</div> @@ -146,13 +114,7 @@ </div> </div> - <div - :class="[ - 'ax_default', - activeChartItem == 'gpu' ? 'selected' : '', - ]" - @click="setActiveChartItem('gpu')" - > + <div :class="['ax_default', activeChartItem == 'gpu' ? 'selected' : '']" @click="setActiveChartItem('gpu')"> <div class="ax_default_pic color-gpu"></div> <div> <div class="ax_default_text">绠楀姏</div> @@ -160,29 +122,18 @@ </div> </div> - <div - :class="[ - 'ax_default', - activeChartItem == 'net' ? 'selected' : '', - ]" - @click="setActiveChartItem('net')" - > + <div :class="['ax_default', activeChartItem == 'net' ? 'selected' : '']" @click="setActiveChartItem('net')"> <div class="ax_default_pic color-net"></div> <div> <div class="ax_default_text">缃戠粶</div> - <div class="ax_default_subtext"> - {{ netSend | byteConver }} / {{ netRecive | byteConver }} - </div> + <div class="ax_default_subtext">{{ netSend | byteConver }} / {{ netRecive | byteConver }}</div> </div> </div> <div v-for="(v, k) in disks" :key="k" - :class="[ - 'ax_default', - activeChartItem == 'disk|' + k ? 'selected' : '', - ]" + :class="['ax_default', activeChartItem == 'disk|' + k ? 'selected' : '']" @click="setActiveChartItem('disk|' + k)" > <div class="ax_default_pic color-disk"></div> @@ -280,7 +231,7 @@ </div> </el-tab-pane> - <el-tab-pane name="service"> + <el-tab-pane name="service" v-if="false"> <span slot="label"> <span class="iconfont icon"></span> 鏈嶅姟</span @@ -312,59 +263,56 @@ </template> <script> -import echarts from "echarts"; -import { showSystemStates, showService, showProcesses } from "../api/api"; +import echarts from "echarts" +import { showSystemStates, showService, showProcesses } from "../api/api" export default { components: {}, computed: { isDisk() { - return this.activeChartItem.indexOf("disk") == 0; + return this.activeChartItem.indexOf("disk") == 0 }, isAdmin() { - if ( - sessionStorage.getItem("userInfo") && - sessionStorage.getItem("userInfo") !== "" - ) { - let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; - return loginName === "superadmin" || loginName === "basic"; + if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username + return loginName === "superadmin" || loginName === "basic" } - return false; - }, + return false + } }, filters: { byteConver(limit) { - var size = ""; + var size = "" if (limit < 1024) { //濡傛灉灏忎簬0.1KB杞寲鎴怋 - size = limit + "B"; + size = limit + "B" } else if (limit < 1024 * 1024) { //濡傛灉灏忎簬0.1MB杞寲鎴怟B - size = (limit / 1024).toFixed(2) + "KB"; + size = (limit / 1024).toFixed(2) + "KB" } else if (limit < 1024 * 1024 * 1024) { //濡傛灉灏忎簬0.1GB杞寲鎴怣B - size = (limit / (1024 * 1024)).toFixed(2) + "MB"; + size = (limit / (1024 * 1024)).toFixed(2) + "MB" } else if (limit < 1024 * 1024 * 1024 * 1024) { //鍏朵粬杞寲鎴怗B - size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"; + size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB" } else { - size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB"; + size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB" } - var sizestr = size + ""; - var len = sizestr.indexOf("."); - var dec = sizestr.substr(len + 1, 2); + var sizestr = size + "" + var len = sizestr.indexOf(".") + var dec = sizestr.substr(len + 1, 2) if (dec == "00") { //褰撳皬鏁扮偣鍚庝负00鏃� 鍘绘帀灏忔暟閮ㄥ垎 - return sizestr.substring(0, len) + sizestr.substr(len + 3, 2); + return sizestr.substring(0, len) + sizestr.substr(len + 3, 2) } - return sizestr; - }, + return sizestr + } }, data() { return { - activeName: "proc", + activeName: "top", activeChartItem: "cpu", yAxisMaxVal: "100%", algoProcessData: [], @@ -374,7 +322,7 @@ activeTab: 0, eChartsBaseOpt: { title: { - top: 10, + top: 10 }, animation: false, grid: { @@ -385,7 +333,7 @@ containLabel: true, borderWidth: 2, - borderColor: "#000", + borderColor: "#000" }, xAxis: { type: "category", @@ -393,10 +341,10 @@ data: Array.from({ length: 60 }, () => 0), // show: false, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { show: true, @@ -404,27 +352,27 @@ lineStyle: { width: 1, type: "solid", - color: "rgb(242,242,242)", - }, - }, + color: "rgb(242,242,242)" + } + } }, yAxis: { type: "value", // show: false, axisLine: { - show: false, + show: false }, axisLabel: { - show: false, + show: false }, axisTick: { - show: false, + show: false }, splitLine: { lineStyle: { - color: "rgb(242,242,242)", - }, - }, + color: "rgb(242,242,242)" + } + } }, series: [ { @@ -433,9 +381,9 @@ data: Array.from({ length: 60 }, () => 0), // smooth: true, itemStyle: {}, - areaStyle: {}, - }, - ], + areaStyle: {} + } + ] }, cpuUtilizations: Array.from({ length: 60 }, () => 0), memUtilizations: Array.from({ length: 60 }, () => 0), @@ -462,264 +410,244 @@ disks: {}, activeDisk: {}, ioRead: 0, - ioWrite: 0, - }; + ioWrite: 0 + } }, mounted() { - this.dataCollection(); - this.initChart(); + this.dataCollection() + this.initChart() }, methods: { // 寰幆閲囬泦鎵�鏈夋暟鎹� dataCollection() { - this.serviceCollect(); - this.procCollect(); + this.serviceCollect() + this.procCollect() setTimeout(() => { - this.dataCollection(); - }, 5000); + this.dataCollection() + }, 5000) }, serviceCollect() { showService() .then((rsp) => { if (rsp && rsp.success) { - rsp.data.sort(function (obj1, obj2) { - var val1 = obj1.name; - var val2 = obj2.name; + rsp.data.sort(function(obj1, obj2) { + var val1 = obj1.name + var val2 = obj2.name if (val1 < val2) { - return -1; + return -1 } else if (val1 > val2) { - return 1; + return 1 } else { - return 0; + return 0 } - }); - this.vasystemServicesData = rsp.data; + }) + this.vasystemServicesData = rsp.data } }) - .catch(() => {}); + .catch(() => {}) }, procCollect() { showProcesses() .then((rsp) => { if (rsp && rsp.success) { - if (rsp.data.algos) this.algoProcessData = rsp.data.algos; + if (rsp.data.algos) this.algoProcessData = rsp.data.algos - if (rsp.data.apps) this.appProcessData = rsp.data.apps; + if (rsp.data.apps) this.appProcessData = rsp.data.apps } }) - .catch(() => {}); + .catch(() => {}) }, getSystemState() { showSystemStates().then((rsp) => { if (rsp && rsp.success) { // 澶勭悊cpu - this.cpuUtilizations = this.cpuUtilizations.slice(1); - this.cpuUtilizations.push(rsp.data.cpu.toFixed(2)); - this.cpuUsedPercent = this.cpuUtilizations[59]; + this.cpuUtilizations = this.cpuUtilizations.slice(1) + this.cpuUtilizations.push(rsp.data.cpu.toFixed(2)) + this.cpuUsedPercent = this.cpuUtilizations[59] if (rsp.data.cpu_info) { - this.cpuMaxRate = (rsp.data.cpu_info[0].mhz / 1024).toFixed(2); - this.cpuModel = rsp.data.cpu_info[0].modelName; - this.cpuCore = - Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) + - 1; - this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed( - 0 - ); + this.cpuMaxRate = (rsp.data.cpu_info[0].mhz / 1024).toFixed(2) + this.cpuModel = rsp.data.cpu_info[0].modelName + this.cpuCore = Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) + 1 + this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed(0) } // 鍐呭瓨 - this.memUtilizations = this.memUtilizations.slice(1); - this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2)); - this.memTotal = (rsp.data.mem.total / 1024 / 1024 / 1000).toFixed(0); - this.memUsed = (rsp.data.mem.used / 1024 / 1024 / 1000).toFixed(2); - this.memFree = (rsp.data.mem.free / 1024 / 1024 / 1000).toFixed(2); - this.memCache = ( - (rsp.data.mem.cached + rsp.data.mem.buffers) / - 1024 / - 1024 / - 1000 - ).toFixed(2); - this.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2); + this.memUtilizations = this.memUtilizations.slice(1) + this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2)) + this.memTotal = (rsp.data.mem.total / 1024 / 1024 / 1000).toFixed(0) + this.memUsed = (rsp.data.mem.used / 1024 / 1024 / 1000).toFixed(2) + this.memFree = (rsp.data.mem.free / 1024 / 1024 / 1000).toFixed(2) + this.memCache = ((rsp.data.mem.cached + rsp.data.mem.buffers) / 1024 / 1024 / 1000).toFixed(2) + this.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2) // 绠楀姏 - this.gpuUtilizations = this.gpuUtilizations.slice(1); - this.gpuUtilizations.push(rsp.data.gpu.toFixed(2)); - this.gpuUsedPercent = this.gpuUtilizations[59]; + this.gpuUtilizations = this.gpuUtilizations.slice(1) + this.gpuUtilizations.push(rsp.data.gpu.toFixed(2)) + this.gpuUsedPercent = this.gpuUtilizations[59] // 缃戠粶 - this.netReciveCount = this.netReciveCount.slice(1); - this.netReciveCount.push(rsp.data.net.bytesRecv); - this.netSendCount = this.netSendCount.slice(1); - this.netSendCount.push(rsp.data.net.bytesSent); + this.netReciveCount = this.netReciveCount.slice(1) + this.netReciveCount.push(rsp.data.net.bytesRecv) + this.netSendCount = this.netSendCount.slice(1) + this.netSendCount.push(rsp.data.net.bytesSent) - this.netRecive = this.netReciveCount[59]; - this.netSend = this.netSendCount[59]; - this.macAddr = rsp.data.net.mac; + this.netRecive = this.netReciveCount[59] + this.netSend = this.netSendCount[59] + this.macAddr = rsp.data.net.mac if (rsp.data.net.addr.length) { - this.ipAddr = rsp.data.net.addr[0].addr; + this.ipAddr = rsp.data.net.addr[0].addr } // 纾佺洏 - rsp.data.disk.sort(function (obj1, obj2) { - var val1 = obj1.name; - var val2 = obj2.name; + rsp.data.disk.sort(function(obj1, obj2) { + var val1 = obj1.name + var val2 = obj2.name if (val1 < val2) { - return -1; + return -1 } else if (val1 > val2) { - return 1; + return 1 } else { - return 0; + return 0 } - }); + }) rsp.data.disk.forEach((d) => { if (d.name in this.disks) { - this.disks[d.name].readBytes = - this.disks[d.name].readBytes.slice(1); - this.disks[d.name].readBytes.push(d.readBytes); - this.disks[d.name].writeBytes = - this.disks[d.name].writeBytes.slice(1); - this.disks[d.name].writeBytes.push(d.writeBytes); + this.disks[d.name].readBytes = this.disks[d.name].readBytes.slice(1) + this.disks[d.name].readBytes.push(d.readBytes) + this.disks[d.name].writeBytes = this.disks[d.name].writeBytes.slice(1) + this.disks[d.name].writeBytes.push(d.writeBytes) } else { - this.disks[d.name] = {}; - this.disks[d.name]["info"] = d.info; - this.disks[d.name]["readBytes"] = Array.from( - { length: 60 }, - () => 0 - ); - this.disks[d.name]["writeBytes"] = Array.from( - { length: 60 }, - () => 0 - ); + this.disks[d.name] = {} + this.disks[d.name]["info"] = d.info + this.disks[d.name]["readBytes"] = Array.from({ length: 60 }, () => 0) + this.disks[d.name]["writeBytes"] = Array.from({ length: 60 }, () => 0) } - }); + }) // this.disks = rsp.data.disk; } - this.setChartData(); + this.setChartData() setTimeout(() => { - this.getSystemState(); - }, 1000); - }); + this.getSystemState() + }, 1000) + }) }, isShow(authority) { if (this.isAdmin) { - return true; + return true } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) { - return true; + return true } else { - return false; + return false } }, format(array) { - return [ - this.$moment(array[0]).format("YYYY-MM-DD"), - this.$moment(array[1]).format("YYYY-MM-DD"), - ]; + return [this.$moment(array[0]).format("YYYY-MM-DD"), this.$moment(array[1]).format("YYYY-MM-DD")] }, setActiveChartItem(item) { - this.activeChartItem = item; - this.eChartsObj.clear(); - this.setChartData(); + this.activeChartItem = item + this.eChartsObj.clear() + this.setChartData() }, initChart() { - this.eChartsObj = echarts.init(this.$refs.graphs); - this.getSystemState(); + this.eChartsObj = echarts.init(this.$refs.graphs) + this.getSystemState() }, setChartData() { - let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt)); + let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt)) switch (this.activeChartItem) { case "cpu": - this.yAxisMaxVal = this.cpuModel; - option.title.text = "CPU"; - option.title.subtext = "%鍗犵敤鐜�"; - option.yAxis.max = 100; - option.yAxis.min = 0; - option.grid.borderColor = "#8aadd0"; - option.series[0].itemStyle.color = "#8aadd0"; - option.series[0].areaStyle.color = "#a8d4ff"; - option.series[0].data = this.cpuUtilizations; + this.yAxisMaxVal = this.cpuModel + option.title.text = "CPU" + option.title.subtext = "%鍗犵敤鐜�" + option.yAxis.max = 100 + option.yAxis.min = 0 + option.grid.borderColor = "#8aadd0" + option.series[0].itemStyle.color = "#8aadd0" + option.series[0].areaStyle.color = "#a8d4ff" + option.series[0].data = this.cpuUtilizations - break; + break case "mem": - this.yAxisMaxVal = this.memTotal + "G"; - option.title.text = "鍐呭瓨"; - option.title.subtext = "鍐呭瓨浣跨敤閲�"; - option.yAxis.max = 100; - option.yAxis.min = 0; - option.grid.borderColor = "#ff9900"; - option.series[0].itemStyle.color = "#ff9900"; - option.series[0].areaStyle.color = "#f7bb88"; - option.series[0].data = this.memUtilizations; - break; + this.yAxisMaxVal = this.memTotal + "G" + option.title.text = "鍐呭瓨" + option.title.subtext = "鍐呭瓨浣跨敤閲�" + option.yAxis.max = 100 + option.yAxis.min = 0 + option.grid.borderColor = "#ff9900" + option.series[0].itemStyle.color = "#ff9900" + option.series[0].areaStyle.color = "#f7bb88" + option.series[0].data = this.memUtilizations + break case "gpu": - this.yAxisMaxVal = "100%"; - option.title.text = "绠楀姏"; - option.title.subtext = "%浣跨敤鐜�"; - option.yAxis.max = 100; - option.yAxis.min = 0; - option.grid.borderColor = "#bc84d8"; - option.series[0].itemStyle.color = "#bc84d8"; - option.series[0].areaStyle.color = "#de9dff"; - option.series[0].data = this.gpuUtilizations; - break; + this.yAxisMaxVal = "100%" + option.title.text = "绠楀姏" + option.title.subtext = "%浣跨敤鐜�" + option.yAxis.max = 100 + option.yAxis.min = 0 + option.grid.borderColor = "#bc84d8" + option.series[0].itemStyle.color = "#bc84d8" + option.series[0].areaStyle.color = "#de9dff" + option.series[0].data = this.gpuUtilizations + break case "net": - this.yAxisMaxVal = ""; - option.title.text = "缃戠粶"; - option.title.subtext = "缃戠粶璐熻浇"; - option.grid.borderColor = "#4696da"; - option.series[0].itemStyle.color = "#ffa16a"; - option.series[0].areaStyle.color = "#d68658"; - option.series[0].data = this.netReciveCount; + this.yAxisMaxVal = "" + option.title.text = "缃戠粶" + option.title.subtext = "缃戠粶璐熻浇" + option.grid.borderColor = "#4696da" + option.series[0].itemStyle.color = "#ffa16a" + option.series[0].areaStyle.color = "#d68658" + option.series[0].data = this.netReciveCount option.series.push({ type: "line", symbol: "none", data: this.netSendCount, // smooth: true, itemStyle: { - color: "#4696da", + color: "#4696da" }, areaStyle: { - color: "#4eacfd", - }, - }); - break; + color: "#4eacfd" + } + }) + break default: if (this.activeChartItem.indexOf("disk|") == 0) { - let dev = this.activeChartItem.split("|")[1]; + let dev = this.activeChartItem.split("|")[1] - this.yAxisMaxVal = ""; - option.title.text = "纾佺洏"; - option.title.subtext = "纾佺洏浼犺緭閫熺巼"; - option.grid.borderColor = "#33cc66"; - option.series[0].itemStyle.color = "#4696da"; - option.series[0].areaStyle.color = "#4eacfd"; - option.series[0].data = this.disks[dev].readBytes; + this.yAxisMaxVal = "" + option.title.text = "纾佺洏" + option.title.subtext = "纾佺洏浼犺緭閫熺巼" + option.grid.borderColor = "#33cc66" + option.series[0].itemStyle.color = "#4696da" + option.series[0].areaStyle.color = "#4eacfd" + option.series[0].data = this.disks[dev].readBytes option.series.push({ type: "line", symbol: "none", data: this.disks[dev].writeBytes, // smooth: true, itemStyle: { - color: "#33ff66", + color: "#33ff66" }, areaStyle: { - color: "#33cc66", - }, - }); + color: "#33cc66" + } + }) - this.activeDisk = this.disks[dev].info; - this.ioRead = this.disks[dev].readBytes[59]; - this.ioWrite = this.disks[dev].writeBytes[59]; + this.activeDisk = this.disks[dev].info + this.ioRead = this.disks[dev].readBytes[59] + this.ioWrite = this.disks[dev].writeBytes[59] } - break; + break } - this.eChartsObj.setOption(option); - }, - }, -}; + this.eChartsObj.setOption(option) + } + } +} </script> <style lang="scss"> .s-system-monitor { @@ -749,10 +677,7 @@ .el-table td.el-table__cell { border-bottom: none; } - .el-table--striped - .el-table__body - tr.el-table__row--striped - td.el-table__cell { + .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #f8f8ff; } -- Gitblit v1.8.0