mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-10 09:23:15 +08:00
chore: 删除演示用的访问统计视图及相关文件
This commit is contained in:
dap
@@ -1,32 +0,0 @@
|
|||||||
import { alovaInstance } from '#/utils/http';
|
|
||||||
|
|
||||||
export interface Temp {
|
|
||||||
name: string;
|
|
||||||
value: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function visitList() {
|
|
||||||
return alovaInstance.get<Temp[]>('/monitor/logininfor/visitsMap');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deviceInfoList() {
|
|
||||||
return alovaInstance.get<Temp[]>('/monitor/logininfor/deviceInfoList');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function browserInfoList() {
|
|
||||||
return alovaInstance.get<Temp[]>('/monitor/logininfor/browserInfoList');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ispInfoList() {
|
|
||||||
return alovaInstance.get<Temp[]>('/monitor/logininfor/ispInfoList');
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LoginLineResp {
|
|
||||||
date: string[];
|
|
||||||
fail: number[];
|
|
||||||
success: number[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function loginLine() {
|
|
||||||
return alovaInstance.get<LoginLineResp>('/monitor/logininfor/loginLine');
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,26 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { Tabs } from 'antdv-next';
|
|
||||||
|
|
||||||
import Browser from './pages/browser.vue';
|
|
||||||
import Device from './pages/device.vue';
|
|
||||||
import Isp from './pages/isp.vue';
|
|
||||||
import LoginLine from './pages/loginLine.vue';
|
|
||||||
import VisitMap from './pages/map.vue';
|
|
||||||
|
|
||||||
const TabPane = Tabs.TabPane;
|
|
||||||
|
|
||||||
const activeKey = ref<number>(1);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="pt-[16px]">
|
|
||||||
<Tabs v-model:activeKey="activeKey" class="h-full" tab-position="left">
|
|
||||||
<TabPane :key="1" tab="访问量数据"> <VisitMap /> </TabPane>
|
|
||||||
<TabPane :key="2" tab="使用设备"><Device /></TabPane>
|
|
||||||
<TabPane :key="3" tab="使用浏览器"><Browser /></TabPane>
|
|
||||||
<TabPane :key="4" tab="登录量"><LoginLine /></TabPane>
|
|
||||||
<TabPane :key="5" tab="运营商占比"><Isp /></TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { EChartsOption } from 'echarts';
|
|
||||||
|
|
||||||
// import * as echarts from 'echarts';
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
EchartsUI,
|
|
||||||
type EchartsUIType,
|
|
||||||
useEcharts,
|
|
||||||
} from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { browserInfoList } from '../api';
|
|
||||||
|
|
||||||
defineOptions({ name: 'Browser' });
|
|
||||||
|
|
||||||
const browserRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(browserRef);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const data = await browserInfoList();
|
|
||||||
const options: EChartsOption = {
|
|
||||||
legend: {
|
|
||||||
left: 'left',
|
|
||||||
orient: 'vertical',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data,
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// 百分比
|
|
||||||
label: {
|
|
||||||
formatter: '{b}: {c} - ({d}%)', // 自定义显示格式(b:name, c:value, d:百分比)
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
radius: '50%',
|
|
||||||
type: 'pie',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: {
|
|
||||||
left: 'center',
|
|
||||||
text: '使用浏览器占比',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
renderEcharts(options);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="browserRef" height="720px" width="100%" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { EChartsOption } from 'echarts';
|
|
||||||
|
|
||||||
// import * as echarts from 'echarts';
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
EchartsUI,
|
|
||||||
type EchartsUIType,
|
|
||||||
useEcharts,
|
|
||||||
} from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { deviceInfoList } from '../api';
|
|
||||||
|
|
||||||
defineOptions({ name: 'Device' });
|
|
||||||
|
|
||||||
const deviceRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(deviceRef);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const data = await deviceInfoList();
|
|
||||||
const options: EChartsOption = {
|
|
||||||
legend: {
|
|
||||||
left: 'left',
|
|
||||||
orient: 'vertical',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data,
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// 百分比
|
|
||||||
label: {
|
|
||||||
formatter: '{b}: {c} - ({d}%)', // 自定义显示格式(b:name, c:value, d:百分比)
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
radius: '50%',
|
|
||||||
type: 'pie',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: {
|
|
||||||
left: 'center',
|
|
||||||
text: '使用设备占比',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
renderEcharts(options);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="deviceRef" height="720px" width="100%" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { EChartsOption } from 'echarts';
|
|
||||||
|
|
||||||
// import * as echarts from 'echarts';
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
EchartsUI,
|
|
||||||
type EchartsUIType,
|
|
||||||
useEcharts,
|
|
||||||
} from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { ispInfoList } from '../api';
|
|
||||||
|
|
||||||
defineOptions({ name: 'Isp' });
|
|
||||||
|
|
||||||
const ispRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(ispRef);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const data = await ispInfoList();
|
|
||||||
const options: EChartsOption = {
|
|
||||||
legend: {
|
|
||||||
left: 'left',
|
|
||||||
orient: 'vertical',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data,
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// 百分比
|
|
||||||
label: {
|
|
||||||
formatter: '{b}: {c} - ({d}%)', // 自定义显示格式(b:name, c:value, d:百分比)
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
radius: '50%',
|
|
||||||
type: 'pie',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: {
|
|
||||||
left: 'center',
|
|
||||||
text: '网络运营商占比',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
renderEcharts(options);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="ispRef" height="720px" width="100%" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { EChartsOption } from 'echarts';
|
|
||||||
|
|
||||||
// import * as echarts from 'echarts';
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
EchartsUI,
|
|
||||||
type EchartsUIType,
|
|
||||||
useEcharts,
|
|
||||||
} from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import { loginLine } from '../api';
|
|
||||||
|
|
||||||
defineOptions({ name: 'LoginLine' });
|
|
||||||
|
|
||||||
const loginLineRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(loginLineRef);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const data = await loginLine();
|
|
||||||
console.log(data);
|
|
||||||
const options: EChartsOption = {
|
|
||||||
legend: {},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: data.success,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#3399CC',
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
color: '#3399CC',
|
|
||||||
},
|
|
||||||
name: '登录成功',
|
|
||||||
type: 'line',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: data.fail,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#CC6633',
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
color: '#CC6633',
|
|
||||||
},
|
|
||||||
name: '登录失败',
|
|
||||||
type: 'line',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: {
|
|
||||||
text: '近一月登录量统计',
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
dataView: { readOnly: true },
|
|
||||||
dataZoom: {
|
|
||||||
yAxisIndex: 'none',
|
|
||||||
},
|
|
||||||
magicType: { type: ['line', 'bar'] },
|
|
||||||
saveAsImage: {},
|
|
||||||
},
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
boundaryGap: false,
|
|
||||||
data: data.date,
|
|
||||||
type: 'category',
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
renderEcharts(options);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="loginLineRef" height="720px" width="100%" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { EChartsOption } from 'echarts';
|
|
||||||
|
|
||||||
// import * as echarts from 'echarts';
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
EchartsUI,
|
|
||||||
type EchartsUIType,
|
|
||||||
useEcharts,
|
|
||||||
} from '@vben/plugins/echarts';
|
|
||||||
|
|
||||||
import * as echarts from 'echarts/core';
|
|
||||||
|
|
||||||
import { type Temp, visitList } from '../api';
|
|
||||||
import * as chinaMap from '../china.json';
|
|
||||||
|
|
||||||
defineOptions({ name: 'VisitMap' });
|
|
||||||
|
|
||||||
const mapRef = ref<EchartsUIType>();
|
|
||||||
const { renderEcharts } = useEcharts(mapRef);
|
|
||||||
|
|
||||||
function transformData(data: Temp[]) {
|
|
||||||
const nameList: string[] = chinaMap.features.map(
|
|
||||||
(item) => item.properties.name,
|
|
||||||
);
|
|
||||||
// eslint-disable-next-line unicorn/prefer-set-has
|
|
||||||
const dataNameList: string[] = data.map((item) => item.name);
|
|
||||||
// 差集
|
|
||||||
const diff = nameList.filter(
|
|
||||||
(item) => !dataNameList.includes(item) && item.trim() !== '',
|
|
||||||
);
|
|
||||||
diff.forEach((name) => {
|
|
||||||
data.push({
|
|
||||||
name,
|
|
||||||
value: 0,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
echarts.registerMap('china', chinaMap as any);
|
|
||||||
const data = await visitList();
|
|
||||||
transformData(data);
|
|
||||||
const max = Math.max.apply(
|
|
||||||
null,
|
|
||||||
data.map((item) => item.value),
|
|
||||||
);
|
|
||||||
const options: EChartsOption = {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data,
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
// formatter: '{b}\n{c}',
|
|
||||||
formatter: '{c}',
|
|
||||||
position: 'inside',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
map: 'china',
|
|
||||||
roam: true,
|
|
||||||
// 由于缩放 这里加上偏移
|
|
||||||
top: 200,
|
|
||||||
type: 'map',
|
|
||||||
zoom: 1.5,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: {
|
|
||||||
left: 'right',
|
|
||||||
text: '用户访问量数据',
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
dataView: { readOnly: true },
|
|
||||||
saveAsImage: {},
|
|
||||||
},
|
|
||||||
// orient: 'vertical',
|
|
||||||
left: 'left',
|
|
||||||
show: true,
|
|
||||||
top: 'top',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
formatter: '{b}<br/>{c}',
|
|
||||||
showDelay: 0,
|
|
||||||
transitionDuration: 0.2,
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
visualMap: {
|
|
||||||
calculable: true,
|
|
||||||
inRange: {
|
|
||||||
color: ['#ffffff', '#00FF66', '#00CCFF', '#CC6600'],
|
|
||||||
},
|
|
||||||
left: 'left',
|
|
||||||
max,
|
|
||||||
min: 0,
|
|
||||||
text: ['最高', '最低'],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
renderEcharts(options);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<EchartsUI ref="mapRef" height="720px" width="100%" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
Reference in New Issue
Block a user