From 54704e1e6a781dc47993270318be1e828b891c16 Mon Sep 17 00:00:00 2001
From: Lawrence <1934378145@qq.com>
Date: 星期一, 09 十一月 2020 18:42:59 +0800
Subject: [PATCH] 改为24小时制显示
---
web_src/src/components/control.vue | 643 +++++++++++++++++++++++++++++----------------------------
1 files changed, 325 insertions(+), 318 deletions(-)
diff --git a/web_src/src/components/control.vue b/web_src/src/components/control.vue
index 316db30..51bcb0a 100644
--- a/web_src/src/components/control.vue
+++ b/web_src/src/components/control.vue
@@ -1,346 +1,353 @@
<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: 1rem; top: 0.3rem;">
- <el-popover placement="bottom" width="750" height="300" trigger="click">
- <div style="height: 600px;overflow:auto;">
- <table class="table-c" cellspacing="0">
- <tr v-for="(value, key, index) in serverConfig">
- <td style="width: 18rem; text-align: right;">{{ key }}</td>
- <td style="width: 33rem; text-align:left">{{ value }}</td>
- </tr>
- </table>
- </div>
- <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">鏌ョ湅鏈嶅姟鍣ㄩ厤缃�</el-button>
- </el-popover>
- <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">閲嶅惎鏈嶅姟鍣�</el-button>
- </div>
- </div>
- <el-row :gutter="30">
- <el-col :span="12"><div class="control-table" id="ThreadsLoad">table1</div></el-col>
- <el-col :span="12"><div class="control-table" id="WorkThreadsLoad">table2</div></el-col>
- </el-row>
- <el-table :data="allSessionData" style="margin-top: 1rem;">
- <el-table-column prop="peer_ip" label="杩滅"></el-table-column>
- <el-table-column prop="local_ip" label="鏈湴"></el-table-column>
- <el-table-column prop="typeid" label="绫诲瀷"></el-table-column>
- <el-table-column align="right">
- <template slot="header" slot-scope="scope">
- <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
- </template>
- <template slot-scope="scope">
- <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">绉婚櫎</el-button>
- </template>
- </el-table-column>
- </el-table>
+<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: 1rem; top: 0.3rem;">
+ <el-popover placement="bottom" width="750" height="300" trigger="click">
+ <div style="height: 600px;overflow:auto;">
+ <table class="table-c" cellspacing="0">
+ <tr v-for="(value, key, index) in serverConfig">
+ <td style="width: 18rem; text-align: right;">{{ key }}</td>
+ <td style="width: 33rem; text-align:left">{{ value }}</td>
+ </tr>
+ </table>
+ </div>
+ <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">鏌ョ湅鏈嶅姟鍣ㄩ厤缃�</el-button>
+ </el-popover>
+ <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">閲嶅惎鏈嶅姟鍣�</el-button>
+ </div>
+ </div>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <div class="control-table" id="ThreadsLoad">table1</div>
+ </el-col>
+ <el-col :span="12">
+ <div class="control-table" id="WorkThreadsLoad">table2</div>
+ </el-col>
+ </el-row>
+ <el-table :data="allSessionData" style="margin-top: 1rem;">
+ <el-table-column prop="peer_ip" label="杩滅"></el-table-column>
+ <el-table-column prop="local_ip" label="鏈湴"></el-table-column>
+ <el-table-column prop="typeid" label="绫诲瀷"></el-table-column>
+ <el-table-column align="right">
+ <template slot="header" slot-scope="scope">
+ <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
+ </template>
+ <template slot-scope="scope">
+ <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">绉婚櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
- </el-main>
- <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
- </el-container>
+ </el-main>
+ <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
+ </el-container>
- </div>
+</div>
</template>
<script>
-
import uiHeader from './UiHeader.vue'
import echarts from 'echarts';
export default {
- name: 'app',
- components: {
- echarts,
- uiHeader
- },
- data() {
- return {
- tableOption: {
- // legend: {},
- xAxis: {},
- yAxis: {},
- label: {},
- tooltip: {},
- dataZoom: [],
- series: []
- },
- table1Option: {
- // legend: {},
- xAxis: {},
- yAxis: {},
- label: {},
- tooltip: {},
- series: []
- },
- mChart: null,
- mChart1: null,
- charZoomStart: 0,
- charZoomEnd: 100,
- chartInterval: 0, //鏇存柊鍥捐〃缁熻鍥惧畾鏃朵换鍔℃爣璇�
- allSessionData: [],
- visible: false,
- serverConfig: {}
- };
- },
- mounted() {
- this.getAllSession();
- this.initTable();
- this.updateData();
- this.chartInterval = setInterval(this.updateData, 3000);
- },
- destroyed() {
- clearInterval(this.chartInterval); //閲婃斁瀹氭椂浠诲姟
- },
- methods: {
- updateData: function() {
- this.getThreadsLoad();
- },
- /**
- * 鑾峰彇绾跨▼鐘舵��
- */
- getThreadsLoad: function() {
- let that = this;
- this.$axios({
- method: 'get',
- url: '/zlm/index/api/getThreadsLoad'
- }).then(function(res) {
- if (res.data.code == 0) {
- that.tableOption.xAxis.data.push(new Date().toLocaleTimeString());
- that.table1Option.xAxis.data.push(new Date().toLocaleTimeString());
+ name: 'app',
+ components: {
+ echarts,
+ uiHeader
+ },
+ data() {
+ return {
+ tableOption: {
+ // legend: {},
+ xAxis: {},
+ yAxis: {},
+ label: {},
+ tooltip: {},
+ dataZoom: [],
+ series: []
+ },
+ table1Option: {
+ // legend: {},
+ xAxis: {},
+ yAxis: {},
+ label: {},
+ tooltip: {},
+ series: []
+ },
+ mChart: null,
+ mChart1: null,
+ charZoomStart: 0,
+ charZoomEnd: 100,
+ chartInterval: 0, //鏇存柊鍥捐〃缁熻鍥惧畾鏃朵换鍔℃爣璇�
+ allSessionData: [],
+ visible: false,
+ serverConfig: {}
+ };
+ },
+ mounted() {
+ this.getAllSession();
+ this.initTable();
+ this.updateData();
+ this.chartInterval = setInterval(this.updateData, 3000);
+ },
+ destroyed() {
+ clearInterval(this.chartInterval); //閲婃斁瀹氭椂浠诲姟
+ },
+ methods: {
+ updateData: function () {
+ this.getThreadsLoad();
+ },
+ /**
+ * 鑾峰彇绾跨▼鐘舵��
+ */
+ getThreadsLoad: function () {
+ let that = this;
+ this.$axios({
+ method: 'get',
+ url: '/zlm/index/api/getThreadsLoad'
+ }).then(function (res) {
+ if (res.data.code == 0) {
+ that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
+ hour12: false
+ }));
+ that.table1Option.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
+ hour12: false
+ }));
- for (var i = 0; i < res.data.data.length; i++) {
- if (that.tableOption.series[i] === undefined) {
- let data = {
- data: [],
- type: 'line'
- };
- let data1 = {
- data: [],
- type: 'line'
- };
- data.data.push(res.data.data[i].delay);
- data1.data.push(res.data.data[i].load);
- that.tableOption.series.push(data);
- that.table1Option.series.push(data1);
- } else {
- that.tableOption.series[i].data.push(res.data.data[i].delay);
- that.table1Option.series[i].data.push(res.data.data[i].load);
- }
- }
- that.tableOption.dataZoom[0].start = that.charZoomStart;
- that.tableOption.dataZoom[0].end = that.charZoomEnd;
- that.table1Option.dataZoom[0].start = that.charZoomStart;
- that.table1Option.dataZoom[0].end = that.charZoomEnd;
- //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
- that.myChart.setOption(that.tableOption, true);
- // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
- that.myChart1.setOption(that.table1Option, true);
- }
- });
- },
- initTable: function() {
- let that = this;
- this.tableOption.xAxis = {
- type: 'category',
- data: [], // x杞存暟鎹�
- name: '鏃堕棿', // x杞村悕绉�
- // x杞村悕绉版牱寮�
- nameTextStyle: {
- fontWeight: 300,
- fontSize: 15
- }
- };
- this.tableOption.yAxis = {
- type: 'value',
- name: '寤惰繜鐜�', // y杞村悕绉�
- boundaryGap: [0, '100%'],
- max: 100,
- axisLabel: {
- show: true,
- interval: 'auto',
- formatter: '{value} %'
- },
- // y杞村悕绉版牱寮�
- nameTextStyle: {
- fontWeight: 300,
- fontSize: 15
- }
- };
- this.tableOption.dataZoom = [
- {
- show: true,
- start: this.charZoomStart,
- end: this.charZoomEnd
- }
- ];
- this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
- this.myChart.setOption(this.tableOption);
- this.myChart.on('dataZoom', function(event) {
- if (event.batch) {
- that.charZoomStart = event.batch[0].start;
- that.charZoomEnd = event.batch[0].end;
- } else {
- that.charZoomStart = event.start;
- that.charZoomEnd = event.end;
- }
- });
+ for (var i = 0; i < res.data.data.length; i++) {
+ if (that.tableOption.series[i] === undefined) {
+ let data = {
+ data: [],
+ type: 'line'
+ };
+ let data1 = {
+ data: [],
+ type: 'line'
+ };
+ data.data.push(res.data.data[i].delay);
+ data1.data.push(res.data.data[i].load);
+ that.tableOption.series.push(data);
+ that.table1Option.series.push(data1);
+ } else {
+ that.tableOption.series[i].data.push(res.data.data[i].delay);
+ that.table1Option.series[i].data.push(res.data.data[i].load);
+ }
+ }
+ that.tableOption.dataZoom[0].start = that.charZoomStart;
+ that.tableOption.dataZoom[0].end = that.charZoomEnd;
+ that.table1Option.dataZoom[0].start = that.charZoomStart;
+ that.table1Option.dataZoom[0].end = that.charZoomEnd;
+ //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
+ that.myChart.setOption(that.tableOption, true);
+ // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
+ that.myChart1.setOption(that.table1Option, true);
+ }
+ });
+ },
+ initTable: function () {
+ let that = this;
+ this.tableOption.xAxis = {
+ type: 'category',
+ data: [], // x杞存暟鎹�
+ name: '鏃堕棿', // x杞村悕绉�
+ // x杞村悕绉版牱寮�
+ nameTextStyle: {
+ fontWeight: 300,
+ fontSize: 15
+ }
+ };
+ this.tableOption.yAxis = {
+ type: 'value',
+ name: '寤惰繜鐜�', // y杞村悕绉�
+ boundaryGap: [0, '100%'],
+ max: 100,
+ axisLabel: {
+ show: true,
+ interval: 'auto',
+ formatter: '{value} %'
+ },
+ // y杞村悕绉版牱寮�
+ nameTextStyle: {
+ fontWeight: 300,
+ fontSize: 15
+ }
+ };
+ this.tableOption.dataZoom = [{
+ show: true,
+ start: this.charZoomStart,
+ end: this.charZoomEnd
+ }];
+ this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
+ this.myChart.setOption(this.tableOption);
+ this.myChart.on('dataZoom', function (event) {
+ if (event.batch) {
+ that.charZoomStart = event.batch[0].start;
+ that.charZoomEnd = event.batch[0].end;
+ } else {
+ that.charZoomStart = event.start;
+ that.charZoomEnd = event.end;
+ }
+ });
- this.table1Option.xAxis = {
- type: 'category',
- data: [], // x杞存暟鎹�
- name: '鏃堕棿', // x杞村悕绉�
- // x杞村悕绉版牱寮�
- nameTextStyle: {
- fontWeight: 300,
- fontSize: 15
- }
- };
- this.table1Option.yAxis = {
- type: 'value',
- name: '璐熻浇鐜�', // y杞村悕绉�
- boundaryGap: [0, '100%'],
- max: 100,
- axisLabel: {
- show: true,
- interval: 'auto',
- formatter: '{value} %'
- },
- // y杞村悕绉版牱寮�
- nameTextStyle: {
- fontWeight: 300,
- fontSize: 15
- }
- };
- this.table1Option.dataZoom = [
- {
- show: true,
- start: this.charZoomStart,
- end: this.charZoomEnd
- }
- ];
- this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
- this.myChart1.setOption(this.table1Option);
- this.myChart1.on('dataZoom', function(event) {
- if (event.batch) {
- that.charZoomStart = event.batch[0].start;
- that.charZoomEnd = event.batch[0].end;
- } else {
- that.charZoomStart = event.start;
- that.charZoomEnd = event.end;
- }
- });
- },
+ this.table1Option.xAxis = {
+ type: 'category',
+ data: [], // x杞存暟鎹�
+ name: '鏃堕棿', // x杞村悕绉�
+ // x杞村悕绉版牱寮�
+ nameTextStyle: {
+ fontWeight: 300,
+ fontSize: 15
+ }
+ };
+ this.table1Option.yAxis = {
+ type: 'value',
+ name: '璐熻浇鐜�', // y杞村悕绉�
+ boundaryGap: [0, '100%'],
+ max: 100,
+ axisLabel: {
+ show: true,
+ interval: 'auto',
+ formatter: '{value} %'
+ },
+ // y杞村悕绉版牱寮�
+ nameTextStyle: {
+ fontWeight: 300,
+ fontSize: 15
+ }
+ };
+ this.table1Option.dataZoom = [{
+ show: true,
+ start: this.charZoomStart,
+ end: this.charZoomEnd
+ }];
+ this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
+ this.myChart1.setOption(this.table1Option);
+ this.myChart1.on('dataZoom', function (event) {
+ if (event.batch) {
+ that.charZoomStart = event.batch[0].start;
+ that.charZoomEnd = event.batch[0].end;
+ } else {
+ that.charZoomStart = event.start;
+ that.charZoomEnd = event.end;
+ }
+ });
+ },
- getAllSession: function() {
- let that = this;
- that.allSessionData = [];
- console.log("鍦板潃锛�"+'/zlm/index/api/getAllSession');
- this.$axios({
- method: 'get',
- url: '/zlm/index/api/getAllSession'
- }).then(function(res) {
- res.data.data.forEach(item => {
- let data = {
- peer_ip: item.peer_ip,
- local_ip: item.local_ip,
- typeid: item.typeid,
- id: item.id
- };
- that.allSessionData.push(data);
- });
- });
- },
- getServerConfig: function() {
- let that = this;
- this.$axios({
- method: 'get',
- url: '/zlm/index/api/getServerConfig'
- }).then(function(res) {
- that.serverConfig = res.data.data[0];
- that.visible = true;
- });
- },
- reStartServer: function() {
- let that = this;
- this.$confirm('姝ゆ搷浣滃皢閲嶅惎濯掍綋鏈嶅姟鍣�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- let that = this;
- this.$axios({
- method: 'get',
- url: '/zlm/index/api/restartServer'
- }).then(function(res) {
- that.getAllSession();
- if (res.data.code == 0) {
- that.$message({
- type: 'success',
- message: '鎿嶄綔瀹屾垚'
- });
- }
- });
- });
- },
- deleteRow: function(index, tabledata) {
- let that = this;
- this.$confirm('姝ゆ搷浣滃皢鏂紑璇ラ�氫俊閾捐矾, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- })
- .then(() => {
- that.deleteSession(tabledata[index].id);
- })
- .catch(() => {
- console.log('id锛�' + JSON.stringify(tabledata[index]));
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
- });
- });
- console.log(JSON.stringify(tabledata[index]));
- },
- deleteSession: function(id) {
- let that = this;
- this.$axios({
- method: 'get',
- url: '/zlm/index/api/kick_session&id=' + id
- }).then(function(res) {
- that.getAllSession();
- that.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
- });
- });
- }
- }
+ getAllSession: function () {
+ let that = this;
+ that.allSessionData = [];
+ console.log("鍦板潃锛�" + '/zlm/index/api/getAllSession');
+ this.$axios({
+ method: 'get',
+ url: '/zlm/index/api/getAllSession'
+ }).then(function (res) {
+ res.data.data.forEach(item => {
+ let data = {
+ peer_ip: item.peer_ip,
+ local_ip: item.local_ip,
+ typeid: item.typeid,
+ id: item.id
+ };
+ that.allSessionData.push(data);
+ });
+ });
+ },
+ getServerConfig: function () {
+ let that = this;
+ this.$axios({
+ method: 'get',
+ url: '/zlm/index/api/getServerConfig'
+ }).then(function (res) {
+ that.serverConfig = res.data.data[0];
+ that.visible = true;
+ });
+ },
+ reStartServer: function () {
+ let that = this;
+ this.$confirm('姝ゆ搷浣滃皢閲嶅惎濯掍綋鏈嶅姟鍣�, 鏄惁缁х画?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ let that = this;
+ this.$axios({
+ method: 'get',
+ url: '/zlm/index/api/restartServer'
+ }).then(function (res) {
+ that.getAllSession();
+ if (res.data.code == 0) {
+ that.$message({
+ type: 'success',
+ message: '鎿嶄綔瀹屾垚'
+ });
+ }
+ });
+ });
+ },
+ deleteRow: function (index, tabledata) {
+ let that = this;
+ this.$confirm('姝ゆ搷浣滃皢鏂紑璇ラ�氫俊閾捐矾, 鏄惁缁х画?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ })
+ .then(() => {
+ that.deleteSession(tabledata[index].id);
+ })
+ .catch(() => {
+ console.log('id锛�' + JSON.stringify(tabledata[index]));
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ });
+ });
+ console.log(JSON.stringify(tabledata[index]));
+ },
+ deleteSession: function (id) {
+ let that = this;
+ this.$axios({
+ method: 'get',
+ url: '/zlm/index/api/kick_session&id=' + id
+ }).then(function (res) {
+ that.getAllSession();
+ that.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ });
+ });
+ }
+ }
};
</script>
<style>
#app {
- height: 100%;
+ height: 100%;
}
+
.control-table {
- background-color: #ffffff;
- height: 25rem;
+ background-color: #ffffff;
+ height: 25rem;
}
+
.table-c {
- border-right: 1px solid #dcdcdc;
- border-bottom: 1px solid #dcdcdc;
+ 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;
+ border-left: 1px solid #dcdcdc;
+ border-top: 1px solid #dcdcdc;
+ padding: 0.2rem;
}
+
.el-table {
- width: 99.9% !important;
+ width: 99.9% !important;
}
</style>
--
Gitblit v1.8.0