|
@@ -9,8 +9,8 @@
|
|
<el-select v-model="types" placeholder="请选择" style="width: 120px" @change="typeChange()">
|
|
<el-select v-model="types" placeholder="请选择" style="width: 120px" @change="typeChange()">
|
|
<!-- 1电信,2联通,3移动 -->
|
|
<!-- 1电信,2联通,3移动 -->
|
|
<el-option label="电信" :value="1" />
|
|
<el-option label="电信" :value="1" />
|
|
- <el-option label="联通" :value="2" />
|
|
|
|
- <el-option label="移动" :value="3" />
|
|
|
|
|
|
+<!-- <el-option label="联通" :value="2" disabled/>-->
|
|
|
|
+<!-- <el-option label="移动" :value="3" disabled/>-->
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -63,6 +63,7 @@
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
date-format="YYYY/MM/DD"
|
|
date-format="YYYY/MM/DD"
|
|
time-format="hh:mm:ss"
|
|
time-format="hh:mm:ss"
|
|
|
|
+ @change="handleDateChange"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -82,6 +83,7 @@
|
|
end-placeholder="结束日期"
|
|
end-placeholder="结束日期"
|
|
format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
date-format="YYYY/MM/DD"
|
|
date-format="YYYY/MM/DD"
|
|
|
|
+ @change="handleTop10DataChange"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="ranking-list">
|
|
<div class="ranking-list">
|
|
@@ -171,6 +173,7 @@ const disabledDate = (time: Date) => {
|
|
return time.getTime() > Date.now()
|
|
return time.getTime() > Date.now()
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 仪表盘折线
|
|
const getFlowDataByDateRange = async (dateRangeData:any) => {
|
|
const getFlowDataByDateRange = async (dateRangeData:any) => {
|
|
const simFlowRes = await api.dashboard.getFlowDataByDateRange({
|
|
const simFlowRes = await api.dashboard.getFlowDataByDateRange({
|
|
sdate: dayjs(dateRangeData[0]).format('YYYY-MM-DD HH:mm:ss'),
|
|
sdate: dayjs(dateRangeData[0]).format('YYYY-MM-DD HH:mm:ss'),
|
|
@@ -180,6 +183,7 @@ const getFlowDataByDateRange = async (dateRangeData:any) => {
|
|
return simFlowRes.data;
|
|
return simFlowRes.data;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 昨日仪表盘折线
|
|
const getYesterdayFlowData = async () => {
|
|
const getYesterdayFlowData = async () => {
|
|
const yesterday = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
|
|
const yesterday = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
|
|
const res = await getFlowDataByDateRange([
|
|
const res = await getFlowDataByDateRange([
|
|
@@ -189,6 +193,8 @@ const getYesterdayFlowData = async () => {
|
|
yesterdayLineData.value = [res[0].value];
|
|
yesterdayLineData.value = [res[0].value];
|
|
initYesterdayLineChart();
|
|
initYesterdayLineChart();
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+// 近一月仪表盘折线
|
|
const getMonthFlowData = async () => {
|
|
const getMonthFlowData = async () => {
|
|
monthLineXAxisData.value = [];
|
|
monthLineXAxisData.value = [];
|
|
monthLineData.value = [];
|
|
monthLineData.value = [];
|
|
@@ -202,6 +208,8 @@ const getMonthFlowData = async () => {
|
|
|
|
|
|
initMonthLineChart();
|
|
initMonthLineChart();
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+// 近一年仪表盘折线
|
|
const getYearFlowData = async () => {
|
|
const getYearFlowData = async () => {
|
|
yearLineXAxisData.value = [];
|
|
yearLineXAxisData.value = [];
|
|
yearLineData.value = [];
|
|
yearLineData.value = [];
|
|
@@ -217,6 +225,7 @@ const getYearFlowData = async () => {
|
|
initYearLineChart();
|
|
initYearLineChart();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 按钮切换统一调用方法
|
|
const getFlowData = async () => {
|
|
const getFlowData = async () => {
|
|
flowLineXAxisData.value = [];
|
|
flowLineXAxisData.value = [];
|
|
flowLineData.value = [];
|
|
flowLineData.value = [];
|
|
@@ -228,6 +237,7 @@ const getFlowData = async () => {
|
|
iniFlowLineChart();
|
|
iniFlowLineChart();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 仪表盘折线按钮
|
|
const changeDate = (key:number) => {
|
|
const changeDate = (key:number) => {
|
|
// 1 昨天 2近一周 3近一月 4近一年
|
|
// 1 昨天 2近一周 3近一月 4近一年
|
|
activeIndex.value = key;
|
|
activeIndex.value = key;
|
|
@@ -260,12 +270,33 @@ const changeDate = (key:number) => {
|
|
getFlowData();
|
|
getFlowData();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 流量统计时间筛选
|
|
|
|
+const handleDateChange = async (value:any) => {
|
|
|
|
+ dateTimeRange.value = [
|
|
|
|
+ value[0],
|
|
|
|
+ value[1]
|
|
|
|
+ ]
|
|
|
|
+ // 这里可以添加相应的处理逻辑
|
|
|
|
+ getFlowData();
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 流量使用Top10时间筛选
|
|
|
|
+const handleTop10DataChange = async (value:any) => {
|
|
|
|
+ dateTimeRange.value = [
|
|
|
|
+ value[0],
|
|
|
|
+ value[1]
|
|
|
|
+ ]
|
|
|
|
+ getTop10Data();
|
|
|
|
+ // 这里可以添加相应的处理逻辑
|
|
|
|
+}
|
|
|
|
+
|
|
const typeChange = () => {
|
|
const typeChange = () => {
|
|
getYesterdayFlowData();
|
|
getYesterdayFlowData();
|
|
getMonthFlowData();
|
|
getMonthFlowData();
|
|
getYearFlowData();
|
|
getYearFlowData();
|
|
getFlowData();
|
|
getFlowData();
|
|
getTop10Data();
|
|
getTop10Data();
|
|
|
|
+ getFlowAllData();
|
|
}
|
|
}
|
|
|
|
|
|
const getTop10Data = async () => {
|
|
const getTop10Data = async () => {
|