feat:流量统计列表

src/api/model/system.js

@@ -57,4 +57,15 @@ 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);
+				}
+			}
+		}
+	}
 }

src/config/route.js

@@ -47,6 +47,29 @@ const routes = [
 		},
 		"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",
 		"name": "about",

src/views/statistics/deviceTraffic/index.vue

@@ -0,0 +1,182 @@
+<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>