✨ 开放数据
This commit is contained in:
ronger
parent
c7c227af81
commit
ec20b7391e
@ -24,6 +24,7 @@
|
|||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-submenu>
|
</el-submenu>
|
||||||
</el-submenu>
|
</el-submenu>
|
||||||
|
<el-menu-item index="open-data">开放数据</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -250,6 +251,11 @@ export default {
|
|||||||
case 'taobao':
|
case 'taobao':
|
||||||
window.open("https://rymcu.taobao.com?utm_source=rymcu.com");
|
window.open("https://rymcu.taobao.com?utm_source=rymcu.com");
|
||||||
break;
|
break;
|
||||||
|
case 'open-data':
|
||||||
|
_ts.$router.push({
|
||||||
|
path: '/open-data'
|
||||||
|
})
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
_ts.$router.push(
|
_ts.$router.push(
|
||||||
{
|
{
|
||||||
|
|||||||
181
pages/open-data.vue
Normal file
181
pages/open-data.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<el-row class="article__wrapper">
|
||||||
|
<el-col>
|
||||||
|
<el-card>
|
||||||
|
<div class="card-body d-flex flex-column article">
|
||||||
|
<h1>📊 开放数据 Open Data</h1>
|
||||||
|
<el-col>
|
||||||
|
<p>
|
||||||
|
RYMCU 致力于建造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。现在，他也是一个开放创业项目了，就是说关于 RYMCU 的数据都是开放透明的，包括流量等等信息。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
如果你对 RYMCU 有任何兴趣或想法，都可以扫右侧二维码加我微信交流（请备注：RYMCU）
|
||||||
|
</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-row :gutter="8" class="text-center">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card style="max-height: 210px;">
|
||||||
|
<el-col class="mt-2rem dashboard-number">{{ dashboard.countUserNum }}</el-col>
|
||||||
|
<el-col class="mt-2rem">总用户数</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card style="max-height: 210px;">
|
||||||
|
<el-col class="mt-2rem dashboard-number">{{ dashboard.countArticleNum }}</el-col>
|
||||||
|
<el-col class="mt-2rem">总文章数</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card style="max-height: 210px;">
|
||||||
|
<el-image :src="gzh"></el-image>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="mt-2rem">
|
||||||
|
<div id="lastThirtyDays" style="width: 100%;height: 500px;"></div>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="mt-2rem">
|
||||||
|
<div id="lastThirtyDays2" style="width: 100%;height: 500px;"></div>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue';
|
||||||
|
import {mapState} from 'vuex';
|
||||||
|
import echarts from 'echarts';
|
||||||
|
import gzh from "assets/rymcugzh.jpg";
|
||||||
|
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
export default {
|
||||||
|
name: "openData",
|
||||||
|
fetch({store, params, error}) {
|
||||||
|
return Promise.all([
|
||||||
|
store
|
||||||
|
.dispatch('open-data/fetchLastThirtyDays', params)
|
||||||
|
.catch(err => error({statusCode: 404})),
|
||||||
|
store.dispatch('open-data/fetchDashboard', params)
|
||||||
|
])
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
dashboard: state => state['open-data'].data,
|
||||||
|
lastThirtyDays: state => state['open-data'].lastThirtyDays
|
||||||
|
})
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
gzh: gzh
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initLastThirtyDaysCharts(data) {
|
||||||
|
let myChart = this.$echarts.init(document.getElementById('lastThirtyDays'));
|
||||||
|
// 指定图表的配置项和数据
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: '浏览量（根据页面访问次数统计）'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["浏览量"]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: data.dates
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '浏览量',
|
||||||
|
data: data.visits,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
let myChart2 = this.$echarts.init(document.getElementById('lastThirtyDays2'));
|
||||||
|
// 指定图表的配置项和数据
|
||||||
|
let option2 = {
|
||||||
|
title: {
|
||||||
|
text: '访客数（根据访问 IP 统计）'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["访客数"]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: data.dates
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访客数',
|
||||||
|
data: data.visitIps,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart2.setOption(option2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$store.commit("setActiveMenu", "open-data");
|
||||||
|
this.initLastThirtyDaysCharts(this.lastThirtyDays)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.article__wrapper {
|
||||||
|
max-width: 980px;
|
||||||
|
margin: 20px auto;
|
||||||
|
display: block;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
box-sizing: border-box;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-2rem {
|
||||||
|
margin: 2rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-number {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
store/open-data.js
Normal file
79
store/open-data.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import {DASHBOARD_API_PATH} from "@/store/dashboard";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Created on 2022/3/14 13:54.
|
||||||
|
* @author ronger
|
||||||
|
* @email ronger-x@outlook.com
|
||||||
|
*/
|
||||||
|
export const OPEN_DATA_API_PATH = '/api/open-data'
|
||||||
|
|
||||||
|
|
||||||
|
const getDefaultDashboardData = () => {
|
||||||
|
return {
|
||||||
|
dashboard: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDefaultLastThirtyDaysData = () => {
|
||||||
|
return {
|
||||||
|
dates: [],
|
||||||
|
visits: [],
|
||||||
|
visitIps: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const state = () => {
|
||||||
|
return {
|
||||||
|
fetching: false,
|
||||||
|
data: getDefaultDashboardData(),
|
||||||
|
lastThirtyDays: getDefaultLastThirtyDaysData(),
|
||||||
|
history: getDefaultLastThirtyDaysData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const mutations = {
|
||||||
|
updateDashboardFetching(state, action) {
|
||||||
|
state.fetching = action
|
||||||
|
},
|
||||||
|
updateDashboardData(state, action) {
|
||||||
|
state.data = action
|
||||||
|
},
|
||||||
|
updateLastThirtyDaysData(state, action) {
|
||||||
|
state.lastThirtyDays = action
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const actions = {
|
||||||
|
fetchDashboard({commit}, params = {}) {
|
||||||
|
// 清空已有数据
|
||||||
|
commit('updateDashboardData', getDefaultDashboardData())
|
||||||
|
commit('updateDashboardFetching', true)
|
||||||
|
|
||||||
|
return this.$axios
|
||||||
|
.$get(`${OPEN_DATA_API_PATH}/dashboard`)
|
||||||
|
.then(response => {
|
||||||
|
commit('updateDashboardFetching', false);
|
||||||
|
commit('updateDashboardData', response);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
commit('updateDashboardFetching', false);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchLastThirtyDays({commit}, params = {}) {
|
||||||
|
// 清空已有数据
|
||||||
|
commit('updateLastThirtyDaysData', getDefaultLastThirtyDaysData())
|
||||||
|
commit('updateDashboardFetching', true)
|
||||||
|
|
||||||
|
return this.$axios
|
||||||
|
.$get(`${OPEN_DATA_API_PATH}/last-thirty-days`)
|
||||||
|
.then(response => {
|
||||||
|
commit('updateDashboardFetching', false);
|
||||||
|
commit('updateLastThirtyDaysData', response);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
commit('updateDashboardFetching', false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user