Compare commits
No commits in common. "dev" and "master" have entirely different histories.
|
|
@ -57,15 +57,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
device: {
|
|
||||||
traffic: {
|
|
||||||
list: {
|
|
||||||
url: `${config.API_URL}/api/device/traffic/list`,
|
|
||||||
name: "获取每日流量列表",
|
|
||||||
get: async function (params) {
|
|
||||||
return await http.get(this.url,params);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,29 +47,6 @@ const routes = [
|
||||||
},
|
},
|
||||||
"component": "network/nat"
|
"component": "network/nat"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "statistics",
|
|
||||||
"path": "/statistics",
|
|
||||||
"meta": {
|
|
||||||
"title": "统计报表",
|
|
||||||
"icon": "el-icon-data-analysis",
|
|
||||||
"type": "menu"
|
|
||||||
},
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
"path": "/statistics/device-traffic",
|
|
||||||
"name": "deviceTraffic",
|
|
||||||
"meta": {
|
|
||||||
"title": "设备流量",
|
|
||||||
"icon": "el-icon-iphone",
|
|
||||||
"type": "menu"
|
|
||||||
},
|
|
||||||
"component": "statistics/deviceTraffic"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
"component": "network/nat"
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
{
|
||||||
"path": "/other/about",
|
"path": "/other/about",
|
||||||
"name": "about",
|
"name": "about",
|
||||||
|
|
|
||||||
|
|
@ -1,182 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="40%">
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="right-panel-search">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="search.date"
|
|
||||||
type="date"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择日期"
|
|
||||||
/>
|
|
||||||
<el-button type="primary" icon="el-icon-search" @click="upSearch"></el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe highlightCurrentRow @row-click="rowClick">
|
|
||||||
<el-table-column type="selection" width="50"></el-table-column>
|
|
||||||
<el-table-column label="日期" prop="date" width="95"></el-table-column>
|
|
||||||
<el-table-column label="设备名称" prop="deviceName" width="180"></el-table-column>
|
|
||||||
<el-table-column label="mac地址" prop="mac" width="130"></el-table-column>
|
|
||||||
<el-table-column label="上传量" prop="upload" width="90">
|
|
||||||
<template #default="scope">
|
|
||||||
{{ convertSpeed(scope.row.upload) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="下载量" prop="download" width="90">
|
|
||||||
<template #default="scope">
|
|
||||||
{{ convertSpeed(scope.row.download) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="总量" prop="total" width="90">
|
|
||||||
<template #default="scope">
|
|
||||||
{{ convertSpeed(scope.row.total) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</scTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<scEcharts height="650px" :option="option2"></scEcharts>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import scEcharts from '@/components/scEcharts';
|
|
||||||
export default {
|
|
||||||
name: "index",
|
|
||||||
components: {
|
|
||||||
scEcharts
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
search:{
|
|
||||||
date: ""
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
apiObj: this.$API.system.device.traffic.list
|
|
||||||
},
|
|
||||||
option2: {
|
|
||||||
title: {
|
|
||||||
text: '设备流量统计'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['上行流量', '下行流量', '总流量']
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['2024-04-12', '2024-04-13', '2024-04-14']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '上行流量',
|
|
||||||
type: 'line',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '下行流量',
|
|
||||||
type: 'line',
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '总流量',
|
|
||||||
type: 'line',
|
|
||||||
data: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
const deviceData = [
|
|
||||||
{ device: 'Device 1', date: '2024-04-01', upload: 100, download: 200, total: 300 },
|
|
||||||
{ device: 'Device 1', date: '2024-04-02', upload: 150, download: 250, total: 400 },
|
|
||||||
{ device: 'Device 2', date: '2024-04-01', upload: 120, download: 180, total: 300 },
|
|
||||||
{ device: 'Device 2', date: '2024-04-02', upload: 200, download: 300, total: 500 }
|
|
||||||
];
|
|
||||||
|
|
||||||
const devices = Array.from(new Set(deviceData.map(item => item.device)));
|
|
||||||
const dates = Array.from(new Set(deviceData.map(item => item.date)));
|
|
||||||
|
|
||||||
const seriesData = devices.map(device => {
|
|
||||||
return {
|
|
||||||
name: device,
|
|
||||||
type: 'line',
|
|
||||||
data: dates.map(date => {
|
|
||||||
const dataItem = deviceData.find(item => item.device === device && item.date === date);
|
|
||||||
return dataItem ? dataItem.total : 0;
|
|
||||||
})
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
title: {
|
|
||||||
text: '设备每日流量统计'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: devices
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: dates
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: seriesData
|
|
||||||
};
|
|
||||||
|
|
||||||
this.option2 = option;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
upSearch(){
|
|
||||||
this.$refs.table.reload(this.search)
|
|
||||||
},
|
|
||||||
convertSpeed(dataUsage) {
|
|
||||||
if (dataUsage >= 1099511627776) { // 大于等于1 TB
|
|
||||||
return (dataUsage / 1099511627776).toFixed(2) + ' TB';
|
|
||||||
} else if (dataUsage >= 1073741824) { // 大于等于1 GB
|
|
||||||
return (dataUsage / 1073741824).toFixed(2) + ' GB';
|
|
||||||
} else if (dataUsage >= 1048576) { // 大于等于1 MB
|
|
||||||
return (dataUsage / 1048576).toFixed(2) + ' MB';
|
|
||||||
} else if (dataUsage >= 1024) { // 大于等于1 KB
|
|
||||||
return (dataUsage / 1024).toFixed(2) + ' KB';
|
|
||||||
} else {
|
|
||||||
return dataUsage + ' bytes';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue