:sparkles: 添加新特性。支持微信公众号数据统计功能

src/api/mp/wxaccount.js

@@ -68,3 +68,11 @@ export function fetchAccountList() {
     method: 'get'
   })
 }
+
+export function fetchStatistics(q) {
+  return request({
+    url: '/mp/wxaccount/statistics',
+    method: 'get',
+    params: q
+  })
+}

src/components/wechat/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="menu_setting_box js_menuBox dn"
        style="display: block;">
-    <textarea id="result"
-              style="border: none;position: absolute;width: 317px;height: 462px;left: 31px;top: 79px;z-index: 2;word-break: break-all;"></textarea>
     <div class="highlight_box border icon_wrap menu_setting_msg js_menustatus dn"
          id="menustatus_1"
          style="display: none;">

src/config/env.js

@@ -3,7 +3,7 @@
 const env = process.env
 let baseUrl = ''
 // 图表库为avue和pig2套地址
-let iconfontVersion = ['567566_qo5lxgtishg', '667895_vf6hgm08ubf']
+let iconfontVersion = ['567566_qo5lxgtishg', '667895_nwumdsqxyc']
 let iconfontUrl = `//at.alicdn.com/t/font_$key.css`
 let codeUrl = `${window.location.origin}/code`
 let actUrl = `${window.location.origin}/act/modeler.html?modelId=`

src/const/iconList.js

@@ -22,7 +22,13 @@ export default [
       "icon-caidanguanli",
       "icon-guanwang",
       "icon-guanwangfangwen",
-      "icon-guiji"
+      "icon-guiji",
+      "icon-fensiguanli",
+      "icon-gongzhonghao",
+      "icon-anniu_weixincaidanlianjie",
+      "icon-weixincaidan",
+      "icon-xiaoxiguanli",
+      "icon-zhexiantu"
     ]
   }
 ]

src/router/page/index.js

@@ -88,4 +88,15 @@ export default [{
       isAuth: false
     }
   },
+  {
+    path: '/wechat',
+    name: '微信',
+    component: () =>
+      import( /* webpackChunkName: "page" */ '@/views/mp/wxstatistics'),
+    meta: {
+      keepAlive: true,
+      isTab: false,
+      isAuth: false
+    }
+  }
 ]

src/views/mp/wxmenu/index.vue

@@ -1,53 +1,86 @@
 <template>
-  <div>
-    <wechat :data="data"
-            @submit="submit"></wechat>
-  </div>
+    <basic-container>
+        <el-row :span="24">
+            <el-col :md="4">
+                <avue-tree :option="treeOption"
+                           :data="treeData"
+                           @node-click="nodeClick"/>
+            </el-col>
+            <el-col :md="20">
+                <wechat :data="data"
+                        @submit="submit"/>
+            </el-col>
+        </el-row>
+    </basic-container>
 </template>
 
 <script>
-  import wechat from "@/components/wechat/"
-  import {addObj, getObj, putObj} from '@/api/mp/wxmenu'
-  import {mapGetters} from 'vuex'
+    import wechat from "@/components/wechat/"
+    import {addObj, getObj, putObj} from '@/api/mp/wxmenu'
+    import {fetchAccountList} from '@/api/mp/wxaccount'
+    import {mapGetters} from 'vuex'
 
-  export default {
-    components: {
-      wechat
-    },
-    data() {
-      return {
-        data: {
-          button: []
+    export default {
+        components: {
+            wechat
+        },
+        data() {
+            return {
+                data: {
+                    button: []
+                },
+                treeOption: {
+                    nodeKey: 'id',
+                    addBtn: false,
+                    menu: false,
+                    props: {
+                        labelText: '标题',
+                        label: 'name',
+                        value: 'appid',
+                        children: 'children'
+                    }
+                },
+                treeData: [],
+                checkAppId: undefined
+            };
+        },
+        created() {
+            this.getAccountList()
+        },
+        computed: {
+            ...mapGetters(['permissions'])
+        },
+        methods: {
+            submit(form) {
+                if (this.permissions.mp_wxmenu_add) {
+                    addObj(this.checkAppId, form).then(data => {
+                        this.$message.success("保存成功")
+                    })
+                } else {
+                    this.$message.error("权限不足，不能保存");
+                }
+            },
+            getAccountMenu() {
+                getObj(this.checkAppId).then(response => {
+                    if (response.data.data) {
+                        this.data = JSON.parse(response.data.data)
+                    } else {
+                        this.data.button = []
+                    }
+                })
+            },
+            nodeClick(data) {
+                this.checkAppId = data.appid
+                this.data.button = []
+                this.getAccountMenu()
+            },
+            getAccountList() {
+                fetchAccountList().then(response => {
+                    this.treeData = response.data.data
+                })
+            },
         }
-      };
-    },
-    created() {
-      this.getAccountMenu()
-    },
-    computed: {
-      ...mapGetters(['permissions'])
-    },
-    methods: {
-      submit(form) {
-        if (this.permissions.mp_wxmenu_add) {
-          addObj('wxeb4543e2d692ec5a', form).then(data => {
-            this.$message.success("保存成功")
-          })
-        } else {
-          this.$message.error("权限不足，不能保存");
-        }
-      },
-      getAccountMenu() {
-        getObj('wxeb4543e2d692ec5a').then(response => {
-          if (response.data.data) {
-            this.data = JSON.parse(response.data.data)
-          } else {
-            this.data.button = []
-          }
-        })
-      }
-    }
-  };
+    };
 </script>
 
 <style>

src/views/mp/wxstatistics/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <basic-container>
+    <el-row :span="24">
+      <el-col :md="4">
+        <el-row>
+          <el-date-picker
+            v-model="interval"
+            type="daterange"
+            @change="check"
+            :picker-options="datePickerOptions"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-row>
+        <el-row>
+          <avue-tree :option="treeOption"
+                     :data="treeData"
+                     @node-click="nodeClick"/>
+        </el-row>
+      </el-col>
+      <el-col :md="20">
+        <el-row>
+          <el-col :span="12">
+            <v-chart :options="userCumulate"/>
+          </el-col>
+          <el-col :span="12">
+            <v-chart :options="interfaceSummary"/>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <v-chart :options="upstreamMsgDistMonth"/>
+          </el-col>
+          <el-col :span="12">
+            <v-chart :options="userShard"/>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </basic-container>
+</template>
+
+<style>
+</style>
+
+<script>
+  import {dateFormat} from "@/util/date";
+  import ECharts from 'vue-echarts'
+  import 'echarts/lib/chart/line'
+  import 'echarts/lib/chart/bar'
+  import 'echarts/lib/component/legend'
+  import 'echarts/lib/component/title'
+  import 'echarts/lib/component/tooltip'
+  import {fetchAccountList, fetchStatistics} from '@/api/mp/wxaccount'
+
+  export default {
+    components: {
+      'v-chart': ECharts
+    },
+    data() {
+      return {
+        datePickerOptions: {
+          disabledDate(date) {
+            return date >= new Date(new Date() - 3600 * 1000 * 24)
+          }
+        },
+        interval: [new Date() - 3600 * 1000 * 24 * 7, new Date() - 3600 * 1000 * 24],
+        q: {
+          interval: undefined,
+          appId: undefined
+        },
+        treeOption: {
+          nodeKey: 'id',
+          addBtn: false,
+          menu: false,
+          props: {
+            labelText: '标题',
+            label: 'name',
+            value: 'appid',
+            children: 'children'
+          }
+        },
+        treeData: [],
+        userCumulate: {
+          color: ['#409EFF'],
+          title: {
+            text: '用户分析数据'
+          },
+          xAxis: {
+            type: 'category',
+            data: []
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [],
+            type: 'line',
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  width: 5//设置线条粗细
+                }
+              }
+            }
+          }]
+        },
+        userShard: {
+          color: ['#409EFF'],
+          title: {
+            text: '图文分享数据'
+          },
+          xAxis: {
+            type: 'category',
+            data: []
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [],
+            type: 'line',
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  width: 5//设置线条粗细
+                }
+              }
+            }
+          }]
+        },
+        upstreamMsgDistMonth: {
+          color: ['#409EFF'],
+          title: {
+            text: '消息分析数据'
+          },
+          xAxis: {
+            type: 'category',
+            data: []
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [],
+            type: 'line',
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  width: 5//设置线条粗细
+                }
+              }
+            }
+          }]
+        },
+        interfaceSummary: {
+          color: ['#409EFF'],
+          tooltip: {
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          title: {
+            text: '接口分析数据'
+          },
+          xAxis: {
+            type: 'category',
+            data: []
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [],
+            type: 'bar'
+          }]
+        },
+      }
+    },
+    created() {
+      this.getAccountList()
+    },
+    methods: {
+      nodeClick(data) {
+        this.check()
+        this.q.appId = data.appid
+        this.q.interval = new Date(this.interval[0]).getTime() + "-" + new Date(this.interval[1]).getTime()
+        fetchStatistics(this.q).then(response => {
+          this.userCumulate.series[0].data = response.data.data[0]
+          this.userCumulate.xAxis.data = response.data.data[4]
+          this.userShard.series[0].data = response.data.data[1]
+          this.userShard.xAxis.data = response.data.data[4]
+          this.upstreamMsgDistMonth.series[0].data = response.data.data[2]
+          this.upstreamMsgDistMonth.xAxis.data = response.data.data[4]
+          this.interfaceSummary.series[0].data = response.data.data[3]
+          this.interfaceSummary.xAxis.data = response.data.data[4]
+        })
+      },
+      getAccountList() {
+        fetchAccountList().then(response => {
+          this.treeData = response.data.data
+        })
+      },
+      check() {
+        let start = new Date(this.interval[0])
+        let end = new Date(this.interval[1])
+
+        if (end.getDate() >= new Date()) {
+          this.$message.error('统计结束日小于，请重新选择')
+          return false
+        }
+
+        if (end.getTime() - start.getTime() > 3600 * 1000 * 24 * 7) {
+          this.$message.error('时间间隔7天以内，请重新选择')
+          return false
+        }
+      },
+    }
+  }
+</script>