From 2b1f7a47394363e95deb4dfa0f1c67d41e747f7f Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期三, 01 二月 2023 10:56:40 +0800
Subject: [PATCH] Merge branch 'wvp-28181-2.0' into fix-269
---
web_src/src/components/console/ConsoleNet.vue | 89 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 89 insertions(+), 0 deletions(-)
diff --git a/web_src/src/components/console/ConsoleNet.vue b/web_src/src/components/console/ConsoleNet.vue
new file mode 100644
index 0000000..22d4f34
--- /dev/null
+++ b/web_src/src/components/console/ConsoleNet.vue
@@ -0,0 +1,89 @@
+<template>
+ <div id="ConsoleNet" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
+ <ve-line ref="ConsoleNet" :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-line>
+ </div>
+</template>
+
+<script>
+
+
+import moment from "moment/moment";
+
+export default {
+ name: 'ConsoleNet',
+ data() {
+ return {
+ chartData: {
+ columns: ['time','out','in'],
+ rows: []
+ },
+ chartSettings: {
+ area: true,
+ labelMap: {
+ 'in': '涓嬭浇',
+ 'out': '涓婁紶'
+ },
+ },
+ extend: {
+ title: {
+ show: true,
+ text: "缃戠粶",
+ left: "center",
+ top: 20,
+
+ },
+ grid: {
+ show: true,
+ right: "30px",
+ containLabel: true,
+ },
+ xAxis: {
+ time: "time",
+ max: 'dataMax',
+ boundaryGap: ['20%', '20%'],
+ axisLabel: {
+ formatter:(v)=>{
+ return moment(v).format("HH:mm:ss");
+ },
+ showMaxLabel: true,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ min: 0,
+ max: 1000,
+ splitNumber: 6,
+ position: "left",
+ silent: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: (data)=>{
+ return data[1].marker + "涓嬭浇锛�" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps" + "</br> "+ data[0].marker +" 涓婁紶锛�" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps";
+ }
+ },
+ legend: {
+ left: "center",
+ bottom: "15px",
+ }
+ }
+ };
+ },
+ mounted() {
+ this.$nextTick(_ => {
+ setTimeout(()=>{
+ this.$refs.ConsoleNet.echarts.resize()
+ }, 100)
+ })
+ },
+ destroyed() {
+ },
+ methods: {
+ setData: function(data, total) {
+ this.chartData .rows = data;
+ this.extend.yAxis.max= total;
+ }
+
+ }
+};
+</script>
--
Gitblit v1.8.0