mirror of
https://gitee.com/pan648540858/wvp-GB28181-pro.git
synced 2026-05-13 00:57:50 +08:00
添加新的控制台页面
This commit is contained in:
648540858
parent
0a44eb8965
commit
9601ee592a
47
web_src/package-lock.json
generated
47
web_src/package-lock.json
generated
@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
Normal file
132
web_src/src/components/Console.vue
Normal file
@ -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>
|
||||
@ -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…
Reference in New Issue
Block a user