feat:maidian
This commit is contained in:
zzc
@@ -7,3 +7,11 @@ export function getDeviceList(data) {
|
|||||||
params: data,
|
params: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getTrackingLogsList(data) {
|
||||||
|
return request({
|
||||||
|
url: 'management/api/system/tracking-logs/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
350
src/views/index/components/TrackingCharts.vue
Normal file
350
src/views/index/components/TrackingCharts.vue
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tracking-charts">
|
||||||
|
<el-card class="filter-card" shadow="never">
|
||||||
|
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
|
||||||
|
<el-form-item label="App">
|
||||||
|
<el-select v-model="queryForm.appId" filterable>
|
||||||
|
<el-option v-for="(label, value) in appMap" :key="value" :label="label" :value="value">
|
||||||
|
<span style="float: left">{{ label }}</span>
|
||||||
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="事件名称">
|
||||||
|
<el-select v-model="queryForm.eventName" clearable filterable placeholder="全部事件">
|
||||||
|
<el-option v-for="(label, value) in eventNameMap" :key="value" :label="label" :value="value">
|
||||||
|
<span style="float: left">{{ label }}</span>
|
||||||
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="事件类型">
|
||||||
|
<el-select v-model="queryForm.eventType" clearable placeholder="全部类型">
|
||||||
|
<el-option v-for="(label, value) in eventTypeMap" :key="value" :label="label" :value="value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="时间范围">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryForm.dateRange"
|
||||||
|
:default-time="['00:00:00', '23:59:59']"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
type="datetimerange"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<div v-loading="loading" class="charts-container">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card class="chart-card" shadow="never">
|
||||||
|
<div slot="header"><span>时段趋势</span></div>
|
||||||
|
<v-chart autoresize class="chart" :option="trendOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="20" style="margin-top: 20px">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card class="chart-card" shadow="never">
|
||||||
|
<div slot="header"><span>事件名称分布</span></div>
|
||||||
|
<v-chart autoresize class="chart" :option="eventNameOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card class="chart-card" shadow="never">
|
||||||
|
<div slot="header"><span>事件类型分布</span></div>
|
||||||
|
<v-chart autoresize class="chart" :option="eventTypeOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="20" style="margin-top: 20px">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card class="chart-card" shadow="never">
|
||||||
|
<div slot="header"><span>页面访问排行</span></div>
|
||||||
|
<v-chart autoresize class="chart" :option="pageOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getTrackingLogsList } from '@/api/system'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { LineChart, PieChart, BarChart } from 'echarts/charts'
|
||||||
|
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { groupBy, countBy } from 'lodash'
|
||||||
|
import { eventNameMap, eventTypeMap, appMap } from '../utils'
|
||||||
|
|
||||||
|
use([CanvasRenderer, LineChart, PieChart, BarChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TrackingCharts',
|
||||||
|
components: {
|
||||||
|
VChart,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventNameMap,
|
||||||
|
eventTypeMap,
|
||||||
|
appMap,
|
||||||
|
loading: false,
|
||||||
|
queryForm: {
|
||||||
|
appId: '69665538a49b8ae3be50fe5d',
|
||||||
|
eventName: '',
|
||||||
|
eventType: '',
|
||||||
|
dateRange: [],
|
||||||
|
},
|
||||||
|
pickerOptions: {
|
||||||
|
shortcuts: [
|
||||||
|
{
|
||||||
|
text: '今天',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setHours(0, 0, 0, 0)
|
||||||
|
end.setHours(23, 59, 59, 999)
|
||||||
|
picker.$emit('pick', [start, end])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '昨天',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24)
|
||||||
|
start.setHours(0, 0, 0, 0)
|
||||||
|
end.setTime(end.getTime() - 3600 * 1000 * 24)
|
||||||
|
end.setHours(23, 59, 59, 999)
|
||||||
|
picker.$emit('pick', [start, end])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '最近一周',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||||
|
picker.$emit('pick', [start, end])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
trendOption: {},
|
||||||
|
eventNameOption: {},
|
||||||
|
eventTypeOption: {},
|
||||||
|
pageOption: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 默认选中今天
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setHours(0, 0, 0, 0)
|
||||||
|
end.setHours(23, 59, 59, 999)
|
||||||
|
this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
|
||||||
|
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchData() {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
appId: this.queryForm.appId,
|
||||||
|
eventName: this.queryForm.eventName || undefined,
|
||||||
|
eventType: this.queryForm.eventType || undefined,
|
||||||
|
startTime: this.queryForm.dateRange ? this.queryForm.dateRange[0] : undefined,
|
||||||
|
endTime: this.queryForm.dateRange ? this.queryForm.dateRange[1] : undefined,
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10000, // 获取足够多的数据进行前端统计，或者应该依赖后端聚合接口
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data } = await getTrackingLogsList(params)
|
||||||
|
this.list = data.list || []
|
||||||
|
this.processData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
this.$baseMessage('获取数据失败', 'error')
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
resetQuery() {
|
||||||
|
this.queryForm.appId = 'wx2d5351b816654a93'
|
||||||
|
this.queryForm.eventName = ''
|
||||||
|
this.queryForm.eventType = ''
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setHours(0, 0, 0, 0)
|
||||||
|
end.setHours(23, 59, 59, 999)
|
||||||
|
this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
processData() {
|
||||||
|
// 1. 时段趋势
|
||||||
|
const logsByHour = groupBy(this.list, (item) => dayjs(item.createdAt).format('HH:00'))
|
||||||
|
const hours = []
|
||||||
|
const counts = []
|
||||||
|
for (let i = 0; i < 24; i++) {
|
||||||
|
const hour = `${String(i).padStart(2, '0')}:00`
|
||||||
|
hours.push(hour)
|
||||||
|
counts.push(logsByHour[hour] ? logsByHour[hour].length : 0)
|
||||||
|
}
|
||||||
|
this.trendOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: hours,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: counts,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 事件名称分布
|
||||||
|
const eventNameCounts = countBy(this.list, 'eventName')
|
||||||
|
const eventNameData = Object.keys(eventNameCounts).map((key) => ({
|
||||||
|
name: this.eventNameMap[key] || key,
|
||||||
|
value: eventNameCounts[key],
|
||||||
|
}))
|
||||||
|
this.eventNameOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '事件名称',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: eventNameData,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 事件类型分布
|
||||||
|
const eventTypeCounts = countBy(this.list, 'eventType')
|
||||||
|
const eventTypeData = Object.keys(eventTypeCounts).map((key) => ({
|
||||||
|
name: this.eventTypeMap[key] || key,
|
||||||
|
value: eventTypeCounts[key],
|
||||||
|
}))
|
||||||
|
this.eventTypeOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '事件类型',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: eventTypeData,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. 页面访问排行
|
||||||
|
const pageCounts = countBy(this.list, 'page')
|
||||||
|
// 排序并取前10
|
||||||
|
const sortedPages = Object.keys(pageCounts)
|
||||||
|
.sort((a, b) => pageCounts[b] - pageCounts[a])
|
||||||
|
.slice(0, 10)
|
||||||
|
const pageData = sortedPages.map((key) => pageCounts[key])
|
||||||
|
|
||||||
|
this.pageOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: sortedPages,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: pageData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tracking-charts {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.filter-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.chart-card {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
.chart {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,569 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="index-container">
|
<div class="index-container">
|
||||||
<!-- <el-row :gutter="20">
|
<tracking-charts />
|
||||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
|
|
||||||
<el-alert v-if="noticeList">
|
|
||||||
<div style="display: flex; align-items: center; justify-content: center">
|
|
||||||
<a href="https://github.com/zxwk1998/vue-admin-better" target="_blank">
|
|
||||||
<img
|
|
||||||
src="https://img.shields.io/github/stars/zxwk1998/vue-admin-better?style=flat-square&label=Stars&logo=github"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<p v-html="noticeList.notice"></p>
|
|
||||||
</div>
|
|
||||||
</el-alert>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>访问量</span>
|
|
||||||
</div>
|
|
||||||
<vab-chart autoresize :option="fwl" />
|
|
||||||
<div class="bottom">
|
|
||||||
<span>
|
|
||||||
日均访问量:
|
|
||||||
|
|
||||||
{{ config1.endVal }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>授权数</span>
|
|
||||||
</div>
|
|
||||||
<vab-chart autoresize :option="sqs" />
|
|
||||||
<div class="bottom">
|
|
||||||
<span>
|
|
||||||
总授权数:
|
|
||||||
{{ config2.endVal }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col v-for="(item, index) in iconList" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
|
|
||||||
<router-link target="_blank" :to="item.link">
|
|
||||||
<el-card class="icon-panel" shadow="never">
|
|
||||||
<vab-icon :icon="['fas', item.icon]" :style="{ color: item.color }" />
|
|
||||||
<p>{{ item.title }}</p>
|
|
||||||
</el-card>
|
|
||||||
</router-link>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :lg="11" :md="24" :sm="24" :xl="11" :xs="24">
|
|
||||||
<el-card class="card" shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>依赖信息</span>
|
|
||||||
<div style="float: right">部署时间:{{ updateTime }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table class="table">
|
|
||||||
<tr>
|
|
||||||
<td>@vue/cli版本</td>
|
|
||||||
<td>{{ devDependencies['@vue/cli-service'] }}</td>
|
|
||||||
<td>vue版本</td>
|
|
||||||
<td>{{ dependencies['vue'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>vuex版本</td>
|
|
||||||
<td>{{ dependencies['vuex'] }}</td>
|
|
||||||
<td>vue-router版本</td>
|
|
||||||
<td>{{ dependencies['vue-router'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>element-ui版本</td>
|
|
||||||
<td>{{ dependencies['element-ui'] }}</td>
|
|
||||||
<td>axios版本</td>
|
|
||||||
<td>{{ dependencies['axios'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>eslint版本</td>
|
|
||||||
<td>{{ devDependencies['eslint'] }}</td>
|
|
||||||
<td>prettier版本</td>
|
|
||||||
<td>{{ devDependencies['prettier'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>sass版本</td>
|
|
||||||
<td>{{ devDependencies['sass'] }}</td>
|
|
||||||
<td>mockjs版本</td>
|
|
||||||
<td>{{ dependencies['mockjs'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>layouts版本</td>
|
|
||||||
<td>{{ dependencies['layouts'] }}</td>
|
|
||||||
<td>lodash版本</td>
|
|
||||||
<td>{{ dependencies['lodash'] }}</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<br />
|
|
||||||
<el-alert :closable="false" :title="userAgent" type="info" />
|
|
||||||
<br />
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>其他信息</span>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: center">
|
|
||||||
<vab-colorful-icon icon-class="vab" style="font-size: 140px" />
|
|
||||||
<h1 style="font-size: 30px">vue-admin-better</h1>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-btn"></div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import VabChart from '@/plugins/echarts'
|
import TrackingCharts from './components/TrackingCharts'
|
||||||
import { dependencies, devDependencies } from '../../../package.json'
|
|
||||||
import { getNoticeList } from '@/api/notice'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
components: {
|
components: {
|
||||||
// VabChart,
|
TrackingCharts,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
timer: 0,
|
|
||||||
updateTime: process.env.VUE_APP_UPDATE_TIME,
|
|
||||||
nodeEnv: process.env.NODE_ENV,
|
|
||||||
dependencies: dependencies,
|
|
||||||
devDependencies: devDependencies,
|
|
||||||
config1: {
|
|
||||||
startVal: 0,
|
|
||||||
endVal: this.$baseLodash.random(20000, 60000),
|
|
||||||
decimals: 0,
|
|
||||||
prefix: '',
|
|
||||||
suffix: '',
|
|
||||||
separator: ',',
|
|
||||||
duration: 8000,
|
|
||||||
},
|
|
||||||
config2: {
|
|
||||||
startVal: 0,
|
|
||||||
endVal: this.$baseLodash.random(1000, 20000),
|
|
||||||
decimals: 0,
|
|
||||||
prefix: '',
|
|
||||||
suffix: '',
|
|
||||||
separator: ',',
|
|
||||||
duration: 8000,
|
|
||||||
},
|
|
||||||
config3: {
|
|
||||||
startVal: 0,
|
|
||||||
endVal: this.$baseLodash.random(1000, 20000),
|
|
||||||
decimals: 0,
|
|
||||||
prefix: '',
|
|
||||||
suffix: '',
|
|
||||||
separator: ',',
|
|
||||||
duration: 8000,
|
|
||||||
},
|
|
||||||
|
|
||||||
//访问量
|
|
||||||
fwl: {
|
|
||||||
color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
|
|
||||||
backgroundColor: 'rgba(252,252,252,0)',
|
|
||||||
grid: {
|
|
||||||
top: '4%',
|
|
||||||
left: '2%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '0%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: [],
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '访问量',
|
|
||||||
type: 'line',
|
|
||||||
data: [],
|
|
||||||
smooth: true,
|
|
||||||
areaStyle: {},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
//授权数
|
|
||||||
sqs: {
|
|
||||||
color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
|
|
||||||
backgroundColor: 'rgba(252,252,252,0)',
|
|
||||||
grid: {
|
|
||||||
top: '4%',
|
|
||||||
left: '2%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '0%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
/*boundaryGap: false,*/
|
|
||||||
data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '授权数',
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '60%',
|
|
||||||
data: [10, 52, 20, 33, 39, 33, 22],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
//词云
|
|
||||||
cy: {
|
|
||||||
grid: {
|
|
||||||
top: '4%',
|
|
||||||
left: '2%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '0%',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'wordCloud',
|
|
||||||
gridSize: 15,
|
|
||||||
sizeRange: [12, 40],
|
|
||||||
rotationRange: [0, 0],
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
textStyle: {
|
|
||||||
normal: {
|
|
||||||
color() {
|
|
||||||
const arr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#975FE5']
|
|
||||||
let index = Math.floor(Math.random() * arr.length)
|
|
||||||
return arr[index]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'vue-admin-better',
|
|
||||||
value: 15000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'element',
|
|
||||||
value: 10081,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'beautiful',
|
|
||||||
value: 9386,
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
name: 'vue',
|
|
||||||
value: 6500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'zxwk1998',
|
|
||||||
value: 6000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'good',
|
|
||||||
value: 4500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'success',
|
|
||||||
value: 3800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'never',
|
|
||||||
value: 3000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'boy',
|
|
||||||
value: 2500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'girl',
|
|
||||||
value: 2300,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'github',
|
|
||||||
value: 2000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'hbuilder',
|
|
||||||
value: 1900,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'dcloud',
|
|
||||||
value: 1800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'china',
|
|
||||||
value: 1700,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '1204505056',
|
|
||||||
value: 1600,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '972435319',
|
|
||||||
value: 1500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'young',
|
|
||||||
value: 1200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'old',
|
|
||||||
value: 1100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'vuex',
|
|
||||||
value: 900,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'router',
|
|
||||||
value: 800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'money',
|
|
||||||
value: 700,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'qingdao',
|
|
||||||
value: 800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'yantai',
|
|
||||||
value: 9000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'author is very cool',
|
|
||||||
value: 9200,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
//更新日志
|
|
||||||
reverse: true,
|
|
||||||
activities: [],
|
|
||||||
noticeList: [],
|
|
||||||
//其他信息
|
|
||||||
userAgent: navigator.userAgent,
|
|
||||||
//卡片图标
|
|
||||||
iconList: [
|
|
||||||
{
|
|
||||||
icon: 'video',
|
|
||||||
title: '视频播放器',
|
|
||||||
link: '/vab/player',
|
|
||||||
color: '#ffc069',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'table',
|
|
||||||
title: '表格',
|
|
||||||
link: '/vab/table/comprehensiveTable',
|
|
||||||
color: '#5cdbd3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'laptop-code',
|
|
||||||
title: '源码',
|
|
||||||
link: 'https://github.com/zxwk1998/vue-admin-better',
|
|
||||||
color: '#b37feb',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'book',
|
|
||||||
title: '书籍',
|
|
||||||
link: '',
|
|
||||||
color: '#69c0ff',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'bullhorn',
|
|
||||||
title: '公告',
|
|
||||||
link: '',
|
|
||||||
color: '#ff85c0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'gift',
|
|
||||||
title: '礼物',
|
|
||||||
link: '',
|
|
||||||
color: '#ffd666',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
icon: 'balance-scale-left',
|
|
||||||
title: '公平的世界',
|
|
||||||
link: '',
|
|
||||||
color: '#ff9c6e',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'coffee',
|
|
||||||
title: '休息一下',
|
|
||||||
link: '',
|
|
||||||
color: '#95de64',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
let base = +new Date(2020, 1, 1)
|
|
||||||
let oneDay = 24 * 3600 * 1000
|
|
||||||
let date = []
|
|
||||||
|
|
||||||
let data = [Math.random() * 1500]
|
|
||||||
let now = new Date(base)
|
|
||||||
|
|
||||||
const addData = (shift) => {
|
|
||||||
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
|
|
||||||
date.push(now)
|
|
||||||
data.push(this.$baseLodash.random(20000, 60000))
|
|
||||||
|
|
||||||
if (shift) {
|
|
||||||
date.shift()
|
|
||||||
data.shift()
|
|
||||||
}
|
|
||||||
|
|
||||||
now = new Date(+new Date(now) + oneDay)
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 1; i < 6; i++) {
|
|
||||||
addData()
|
|
||||||
}
|
|
||||||
addData(true)
|
|
||||||
this.fwl.xAxis[0].data = date
|
|
||||||
this.fwl.series[0].data = data
|
|
||||||
this.timer = setInterval(() => {
|
|
||||||
addData(true)
|
|
||||||
this.fwl.xAxis[0].data = date
|
|
||||||
this.fwl.series[0].data = data
|
|
||||||
}, 3000)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick(e) {
|
|
||||||
this.$baseMessage(`点击了${e.name},这里可以写跳转`)
|
|
||||||
},
|
|
||||||
handleZrClick() {},
|
|
||||||
handleChangeTheme() {
|
|
||||||
this.$baseEventBus.$emit('theme')
|
|
||||||
},
|
|
||||||
async fetchData() {
|
|
||||||
const res = await getNoticeList()
|
|
||||||
this.noticeList = res.data
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.index-container {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
background: #f5f7f8 !important;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.el-alert {
|
|
||||||
padding: $base-padding;
|
|
||||||
|
|
||||||
&--info.is-light {
|
|
||||||
min-height: 82px;
|
|
||||||
padding: $base-padding;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: #909399;
|
|
||||||
background-color: $base-color-white;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-card__body {
|
|
||||||
.echarts {
|
|
||||||
width: 100%;
|
|
||||||
height: 115px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
::v-deep {
|
|
||||||
.el-card__body {
|
|
||||||
.echarts {
|
|
||||||
width: 100%;
|
|
||||||
height: 305px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
padding-top: 20px;
|
|
||||||
margin-top: 5px;
|
|
||||||
color: #595959;
|
|
||||||
text-align: left;
|
|
||||||
border-top: 1px solid $base-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
width: 100%;
|
|
||||||
color: #666;
|
|
||||||
border-collapse: collapse;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
td {
|
|
||||||
position: relative;
|
|
||||||
min-height: 20px;
|
|
||||||
padding: 9px 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
border: 1px solid #e6e6e6;
|
|
||||||
|
|
||||||
&:nth-child(odd) {
|
|
||||||
width: 20%;
|
|
||||||
text-align: right;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-panel {
|
|
||||||
height: 117px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-btn {
|
|
||||||
button {
|
|
||||||
margin: 5px 10px 15px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
19
src/views/index/utils/index.js
Normal file
19
src/views/index/utils/index.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
export const eventNameMap = {
|
||||||
|
card_tpl_choose: '选择祝福卡片模板',
|
||||||
|
card_title_choose: '选择祝福卡片标题',
|
||||||
|
avatar_choose_album: '选择头像相册',
|
||||||
|
index_function_select: '首页功能选择',
|
||||||
|
index_goto_make: '首页推荐跳转',
|
||||||
|
index_recommend_click: '首页推荐点击',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const eventTypeMap = {
|
||||||
|
jump: '跳转',
|
||||||
|
click: '点击',
|
||||||
|
select: '选择',
|
||||||
|
load_more: '加载更多',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const appMap = {
|
||||||
|
'69665538a49b8ae3be50fe5d': '新春祝福',
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user