公众号统计

project/oms/apps/AppWechatStatistics/AppWechatStatistics.vue

@@ -0,0 +1,191 @@
+<template>
+  <ai-list class="AppNewsStatistics">
+    <template slot="title">
+      <ai-title title="公众号统计" isShowBottomBorder isShowArea :hideLevel="user.info.areaList.length - 1" v-model="areaId" :instance="instance" @change="onChange()">
+        <template #rightBtn>
+          <el-radio-group style="margin: 0 12px;" v-model="search.dateRange" size="small" @change="search.date = []">
+            <el-radio-button label="0">今天</el-radio-button>
+            <el-radio-button label="1">本周</el-radio-button>
+            <el-radio-button label="2">本月</el-radio-button>
+          </el-radio-group>
+          <el-date-picker
+            style="width: 240px"
+            v-model="search.date"
+            value-format="yyyy-MM-dd"
+            @change="search.dateRange = ''"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            size="small">
+          </el-date-picker>
+        </template>
+      </ai-title>
+    </template>
+    <template slot="content">
+      <div class="statistics-top">
+        <div class="statistics-top__item">
+          <span>发布文章总数</span>
+          <h2 style="color: #2266FF;">{{ info.total }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>浏览量总数</span>
+          <h2 style="color: #22AA99;">{{ info.today }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>平均浏览量</span>
+          <h2 style="color: #F8B425">{{ info.unReport }}</h2>
+        </div>
+      </div>
+      <div class="bottom">
+        <ai-card title="文章浏览排行">
+
+        </ai-card>
+        <ai-card title="地区浏览排行">
+
+        </ai-card>
+      </div>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  import * as echarts from 'echarts'
+  export default {
+    name: 'AppNewsStatistics',
+    label: '新闻统计',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        date: '',
+        today: '',
+        search: {
+          title: '',
+          areaId: '',
+          dateRange: '1',
+          date: []
+        },
+        info: {}
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created () {
+      this.areaId = this.user.info.areaId
+    },
+
+    methods: {
+      onChange () {
+      },
+
+      initPieChart (data) {
+        let chart = echarts.init(document.querySelector('.chart'))
+        const option = {
+          tooltip: {},
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          legend: {
+            show: true
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              data: Object.keys(data).map(v => {
+                return {
+                  value: data[v],
+                  name: v
+                }
+              }),
+              label : {
+                normal : {
+                formatter: '{b}：{c}',
+                textStyle : {
+                  fontWeight : 'normal',
+                    fontSize : 15
+                  }
+                }
+              }
+            }
+          ]
+        }
+
+        chart.setOption(option)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppNewsStatistics {
+
+    .bottom {
+      display: flex;
+      align-items: center;
+
+      & > .ai-card {
+        flex: 1;
+
+        &:last-child {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    :deep( .ai-list__content ){
+      padding: 0!important;
+
+      .ai-list__content--right-wrapper {
+        background: transparent!important;
+        box-shadow: none!important;
+        margin: 0!important;
+        padding: 12px 16px 12px!important;
+      }
+    }
+
+    .statistics-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      & > div {
+        flex: 1;
+        height: 96px;
+        line-height: 1;
+        margin-right: 20px;
+        padding: 16px 24px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+        border-radius: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        h3 {
+          font-size: 24px;
+        }
+
+        span {
+          display: block;
+          margin-bottom: 16px;
+          color: #888888;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .content {
+      padding: 16px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+    }
+  }
+</style>