update

src/store/count.js

@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  index: `/api/article/count/index`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async index({ commit }) {
+    const res = await this.$axios.$get(api.index);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -10,6 +10,7 @@ import thumbs from './thumbs';
 // 评论
 import reply from './reply';
 import weixin from './weixin';
+import count from './count';
 
 Vue.use(Vuex);
 
@@ -37,5 +38,6 @@ export default new Vuex.Store({
     thumbs,
     reply,
     weixin,
+    count,
   },
 });

src/views/adminCenter/chart/gauge.vue

@@ -14,9 +14,9 @@ export default {
     data: {
       type: Array,
       default: () => [
-        { value: 1048, name: 'first' },
-        { value: 735, name: 'second' },
-        { value: 580, name: 'third' },
+        // { value: 1048, name: 'first' },
+        // { value: 735, name: 'second' },
+        // { value: 580, name: 'third' },
       ],
     },
     title: { type: String, default: '仪表盘' },
@@ -43,6 +43,7 @@ export default {
           detail: { offsetCenter: ['0%', '35%'] },
         },
       ],
+      chart: undefined,
     };
   },
   created() {},
@@ -51,6 +52,11 @@ export default {
   },
   methods: {
     init() {
+      if (!this.chart) {
+        let chart = echarts.init(document.getElementById(this.id));
+        this.$set(this, 'chart', chart);
+        this.isInit = true;
+      }
       // 处理数据
       let dup = _.cloneDeep(this.data);
       for (let i = 0; i < dup.length; i++) {
@@ -59,8 +65,7 @@ export default {
         e.detail = this.tags[i].detail;
       }
       const max = dup.reduce((p, n) => p + n.value * 1, 0);
-      let chart = echarts.init(document.getElementById(this.id));
-      chart.setOption({
+      this.chart.setOption({
         title: {
           text: this.title,
           left: 'center',
@@ -129,6 +134,9 @@ export default {
       return `${this.$route.meta.title}`;
     },
   },
+  watch: {
+    data: 'init',
+  },
   metaInfo() {
     return { title: this.$route.meta.title };
   },

src/views/adminCenter/chart/lineBar.vue

@@ -12,14 +12,16 @@ export default {
   name: 'lineBar',
   props: {
     x: { type: Array, default: () => ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
-    data: { type: Array, default: () => [5, 20, 36, 10, 10, 20] },
+    data: { type: Array, default: () => [] }, //[5, 20, 36, 10, 10, 20]
     type: { type: String, default: 'line' }, //bar
     title: { type: String, default: '折线/柱状图' },
+    lineLabel: { type: Array, default: () => ['文章', '服务', '话题'] },
   },
   components: {},
   data: function() {
     return {
       id: `lineBar${_.random(100000, 999999)}`,
+      chart: undefined,
     };
   },
   created() {},
@@ -28,26 +30,36 @@ export default {
   },
   methods: {
     init() {
-      let chart = echarts.init(document.getElementById(this.id));
-      chart.setOption({
+      const data = [];
+      for (let i = 0; i < this.data.length; i++) {
+        const obj = { name: this.lineLabel[i], type: 'line', data: this.data[i], label: { show: true } };
+        data.push(obj);
+      }
+      if (!this.chart) {
+        let chart = echarts.init(document.getElementById(this.id));
+        this.$set(this, 'chart', chart);
+        this.isInit = true;
+      }
+      this.chart.setOption({
         title: {
           text: this.title,
           left: 'center',
         },
-        tooltip: {},
+        legend: {
+          show: true,
+          top: 30,
+        },
         xAxis: {
           data: this.x,
         },
         yAxis: {},
-        series: [
-          {
-            type: this.type,
-            data: this.data,
-          },
-        ],
+        series: data,
       });
     },
   },
+  watch: {
+    data: 'init',
+  },
   computed: {
     ...mapState(['user', 'menuParams']),
     pageTitle() {

src/views/adminCenter/chart/pie.vue

@@ -14,11 +14,11 @@ export default {
     data: {
       type: Array,
       default: () => [
-        { value: 1048, name: '搜索引擎' },
-        { value: 735, name: '直接访问' },
-        { value: 580, name: '邮件营销' },
-        { value: 484, name: '联盟广告' },
-        { value: 300, name: '视频广告' },
+        // { value: 1048, name: '搜索引擎' },
+        // { value: 735, name: '直接访问' },
+        // { value: 580, name: '邮件营销' },
+        // { value: 484, name: '联盟广告' },
+        // { value: 300, name: '视频广告' },
       ],
     },
     title: { type: String, default: '饼图' },
@@ -27,6 +27,7 @@ export default {
   data: function() {
     return {
       id: `pie${_.random(100000, 999999)}`,
+      chart: undefined,
     };
   },
   created() {},
@@ -35,8 +36,12 @@ export default {
   },
   methods: {
     init() {
-      let chart = echarts.init(document.getElementById(this.id));
-      chart.setOption({
+      if (!this.chart) {
+        let chart = echarts.init(document.getElementById(this.id));
+        this.$set(this, 'chart', chart);
+        this.isInit = true;
+      }
+      this.chart.setOption({
         title: {
           text: this.title,
           left: 'center',
@@ -67,6 +72,9 @@ export default {
       });
     },
   },
+  watch: {
+    data: 'init',
+  },
   computed: {
     ...mapState(['user', 'menuParams']),
     pageTitle() {

src/views/adminCenter/index.vue

@@ -5,10 +5,10 @@
         <el-col :span="24" class="top">
           <top topType="2" :leftArrow="false"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <lineBar title="发表数"></lineBar>
-          <gauge title="阅读数"></gauge>
-          <pie title="点赞数"></pie>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }" v-if="display">
+          <lineBar title="发表数" :x="chartsLineX" :data="chartsArticle"></lineBar>
+          <gauge title="阅读数" :data="chartsRead"></gauge>
+          <!-- <pie title="点赞数"></pie> -->
         </el-col>
         <el-col :span="24" class="foot">
           <foot></foot>
@@ -26,6 +26,7 @@ import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
 
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: count } = createNamespacedHelpers('count');
 export default {
   name: 'index',
   props: {},
@@ -33,22 +34,71 @@ export default {
     top,
     foot,
     lineBar,
-    pie,
+    // pie,
     gauge,
   },
   data: function() {
     return {
+      display: false,
       clientHeight: '',
+      articles: {},
+      reads: {},
+      word: { refute: '文章', serve: '服务', topic: '话题' },
+      data: [
+        [1, 2, 3, 4, 5, 6, 7],
+        [8, 9, 10, 11, 12, 13, 14],
+      ],
     };
   },
-  created() {},
+  created() {
+    this.init();
+  },
   mounted() {
     let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
     this.$set(this, `clientHeight`, clientHeight);
   },
-  methods: {},
+  methods: {
+    ...count(['index']),
+    async init() {
+      const res = await this.index();
+      if (this.$checkRes(res)) {
+        const keys = Object.keys(res.data);
+        for (const key of keys) {
+          this.$set(this, key, res.data[key]);
+        }
+      }
+      this.display = true;
+    },
+  },
   computed: {
     ...mapState(['user']),
+    chartsRead() {
+      let arr = [];
+      const keys = Object.keys(this.reads);
+      for (const key of keys) {
+        const name = this.word[key];
+        arr.push({ name, value: this.reads[key] });
+      }
+      return arr;
+    },
+    chartsArticle() {
+      let arr = [];
+      // 根据this.word来决定取值的顺序
+      let keys = Object.keys(this.word);
+      for (const key of keys) {
+        const items = this.articles[key];
+        const marr = items.map(i => i.sum);
+        arr.push(marr);
+      }
+      return arr;
+    },
+    chartsLineX() {
+      let arr = [];
+      const keys = Object.keys(this.articles);
+      const obj = this.articles[keys[0]];
+      if (obj) arr = obj.map(i => i.date);
+      return arr;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };

vue.config.js

@@ -22,7 +22,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/api': {
-        target: 'http://broadcast.waityou24.cn', //http://192.168.1.19:10010
+        target: 'http://192.168.1.19:10010', //http://192.168.1.19:10010
         changeOrigin: true,
         ws: true,
       },