From ec20b7391ef8a6ce56d3a350ee9d044064f8bc03 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Mon, 14 Mar 2022 14:51:20 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E5=BC=80=E6=94=BE=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/layouts/pc/header.vue |   6 +
 pages/open-data.vue              | 181 +++++++++++++++++++++++++++++++
 store/open-data.js               |  79 ++++++++++++++
 3 files changed, 266 insertions(+)
 create mode 100644 pages/open-data.vue
 create mode 100644 store/open-data.js

diff --git a/components/layouts/pc/header.vue b/components/layouts/pc/header.vue
index 67bb54b..e7fdd9f 100644
--- a/components/layouts/pc/header.vue
+++ b/components/layouts/pc/header.vue
@@ -24,6 +24,7 @@
                   </el-menu-item>
                 </el-submenu>
               </el-submenu>
+              <el-menu-item index="open-data">开放数据</el-menu-item>
             </el-menu>
           </el-col>
         </el-row>
@@ -250,6 +251,11 @@ export default {
           case 'taobao':
             window.open("https://rymcu.taobao.com?utm_source=rymcu.com");
             break;
+          case 'open-data':
+            _ts.$router.push({
+              path: '/open-data'
+            })
+            break;
           default:
             _ts.$router.push(
               {
diff --git a/pages/open-data.vue b/pages/open-data.vue
new file mode 100644
index 0000000..9932273
--- /dev/null
+++ b/pages/open-data.vue
@@ -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>
diff --git a/store/open-data.js b/store/open-data.js
new file mode 100644
index 0000000..ecdeb9a
--- /dev/null
+++ b/store/open-data.js
@@ -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);
+      });
+  }
+}