Browse Source

添加新的控制台页面

ui-optimization
648540858 3 years ago
parent
commit
9601ee592a
  1. 47
      web_src/package-lock.json
  2. 1
      web_src/package.json
  3. 132
      web_src/src/components/Console.vue
  4. 2
      web_src/src/main.js

47
web_src/package-lock.json

@ -3356,12 +3356,27 @@
},
"echarts": {
"version": "4.9.0",
"resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1619495447964&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz",
"integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"zrender": "4.3.2"
}
},
"echarts-amap": {
"version": "1.0.0-rc.6",
"resolved": "https://registry.npmjs.org/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
"integrity": "sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY="
},
"echarts-liquidfill": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-2.0.6.tgz",
"integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ=="
},
"echarts-wordcloud": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
"integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@ -5990,7 +6005,7 @@
},
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
},
"npm-run-path": {
@ -6023,6 +6038,11 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
"numerify": {
"version": "1.2.9",
"resolved": "https://registry.npmjs.org/numerify/-/numerify-1.2.9.tgz",
"integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
@ -10786,6 +10806,11 @@
"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
"dev": true
},
"utils-lite": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/utils-lite/-/utils-lite-0.1.10.tgz",
"integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
},
"utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
@ -10798,6 +10823,18 @@
"integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
"dev": true
},
"v-charts": {
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/v-charts/-/v-charts-1.19.0.tgz",
"integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
"requires": {
"echarts-amap": "1.0.0-rc.6",
"echarts-liquidfill": "^2.0.2",
"echarts-wordcloud": "^1.1.3",
"numerify": "1.2.9",
"utils-lite": "0.1.10"
}
},
"validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",
@ -11964,8 +12001,8 @@
},
"zrender": {
"version": "4.3.2",
"resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.3.2.tgz",
"integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}

1
web_src/package.json

@ -17,6 +17,7 @@
"fingerprintjs2": "^2.1.2",
"moment": "^2.29.1",
"postcss-pxtorem": "^5.1.1",
"v-charts": "^1.19.0",
"vue": "^2.6.11",
"vue-baidu-map": "^0.21.22",
"vue-clipboard2": "^0.3.1",

132
web_src/src/components/Console.vue

@ -0,0 +1,132 @@
<template>
<div id="app">
<el-container>
<el-header>
<uiHeader></uiHeader>
</el-header>
<el-main>
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
<span style="font-size: 1rem; font-weight: bold;">控制台</span>
<div style="position: absolute; right: 17rem; top: 0.3rem;">
</div>
</div>
<el-row :gutter="20">
<el-col :span="12">
<div class="control-table" id="cpuInfo">cpuTable</div>
</el-col>
<el-col :span="12">
<div class="control-table" id="memInfo">memTable</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="control-table" id="loadInfo">table3</div>
</el-col>
<el-col :span="12">
<div class="control-table" id="netInfo">table4</div>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
import uiHeader from './UiHeader.vue'
import echarts from 'echarts';
export default {
name: 'app',
components: {
echarts,
uiHeader
},
data() {
return {
cpuTable: {
chart: null,
option: {
title: {
text: 'CPU信息'
},
legend: {
type: 'scroll'
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: {
type: 'category',
boundaryGap: true,
nameLocation: 'end',
data: [], // x
name: '时间', // x
},
yAxis: {},
label: {},
tooltip: {},
series: []
},
},
memTableOption: {
// legend: {},
xAxis: {},
yAxis: {},
label: {},
tooltip: {},
series: []
},
};
},
mounted() {
},
destroyed() {
},
methods: {
initTable: function () {
let that = this;
this.initCpuTable()
},
initCpuTable: function (){
this.cpuTable.chart = echarts.init(document.getElementById('cpuInfo'));
this.cpuTable.chart.setOption(this.cpuTable.option)
}
}
};
</script>
<style>
#app {
height: 100%;
}
.control-table {
background-color: #ffffff;
height: 25rem;
}
.table-c {
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
}
.table-c td {
border-left: 1px solid #dcdcdc;
border-top: 1px solid #dcdcdc;
padding: 0.2rem;
}
.el-table {
width: 99.9% !important;
}
</style>

2
web_src/src/main.js

@ -7,6 +7,7 @@ import router from './router/index.js';
import axios from 'axios';
import VueCookies from 'vue-cookies';
import echarts from 'echarts';
import VCharts from 'v-charts'
import VueClipboard from 'vue-clipboard2';
import { Notification } from 'element-ui';
@ -39,6 +40,7 @@ Vue.use(VueClipboards);
Vue.prototype.$axios = axios;
Vue.prototype.$notify = Notification;
Vue.use(Contextmenu);
Vue.use(VCharts)
axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : "";

Loading…
Cancel
Save