公众号

2023-06-09 11:14:34 +08:00
parent 7e40790569
commit 6a3cadf53d
2 changed files with 150 additions and 98 deletions
--- a/project/oms/apps/AppNewsStatistics/AppNewsStatistics.vue
+++ b/project/oms/apps/AppNewsStatistics/AppNewsStatistics.vue
@@ -1,23 +1,26 @@
 <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()">
+      <ai-title title="新闻统计" isShowBottomBorder @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>
+          <div class="flex" flex>
+            <AiAreaGet :valueLevel="3" style="width: 250px" clearable always-show :instance="instance" v-model="search.areaId"></AiAreaGet>
+            <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>
+          </div>
        </template>
      </ai-title>
    </template>
@@ -79,7 +82,7 @@
    },

    created () {
-      this.areaId = this.user.info.areaId
+      // this.areaId = this.user.info.areaId
    },

    methods: {
--- a/project/oms/apps/AppWechatStatistics/AppWechatStatistics.vue
+++ b/project/oms/apps/AppWechatStatistics/AppWechatStatistics.vue
@@ -1,59 +1,75 @@
 <template>
-  <ai-list class="AppNewsStatistics">
+  <ai-list class="AppWechatStatistics">
    <template slot="title">
-      <ai-title title="公众号统计" isShowBottomBorder isShowArea :hideLevel="user.info.areaList.length - 1" v-model="areaId" :instance="instance" @change="onChange()">
+      <ai-title title="公众号统计" isShowBottomBorder :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>
+          <div class="flex" flex>
+            <el-radio-group style="margin: 0 12px;" v-model="search.type" size="small" @change="getInfo">
+              <el-radio-button label="0">昨日</el-radio-button>
+              <el-radio-button label="1">近七天</el-radio-button>
+              <el-radio-button label="2">近30天</el-radio-button>
+            </el-radio-group>
+            <el-date-picker
+              style="width: 240px; margin-right: 12px;"
+              v-model="date"
+              value-format="yyyy-MM-dd"
+              @change="onDateChange"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="small">
+            </el-date-picker>
+            <ai-select
+              :selectList="wechatList"
+              placeholder="请选择公众号"
+              v-model="search.appId"
+              @change="getInfo">
+            </ai-select>
+          </div>
        </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>
+          <span>曝光量</span>
+          <h2 style="color: #2266FF;">{{ info['曝光量'] || 0 }}</h2>
        </div>
        <div class="statistics-top__item">
-          <span>浏览量总数</span>
-          <h2 style="color: #22AA99;">{{ info.today }}</h2>
+          <span>曝光率</span>
+          <h2 style="color: #22AA99;">{{ info['曝光量'] || 0 }}</h2>
        </div>
        <div class="statistics-top__item">
-          <span>平均浏览量</span>
-          <h2 style="color: #F8B425">{{ info.unReport }}</h2>
+          <span>点击量</span>
+          <h2 style="color: #F8B425">{{ info['点击量'] || 0 }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>收入（元）</span>
+          <h2 style="color: #2266FF;">{{ info['收入'] ? (info['收入'] / 100).toFixed(2) : 0 }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>已结算金额（元）</span>
+          <h2 style="color: #22AA99;">{{ info['已结算金额'] ? (info['已结算金额'] / 100).toFixed(2) : 0 }}</h2>
        </div>
      </div>
-      <div class="bottom">
-        <ai-card title="文章浏览排行">
-
-        </ai-card>
-        <ai-card title="地区浏览排行">
-
-        </ai-card>
-      </div>
+      <ai-card title="每日收益明细">
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
+        </ai-table>
+      </ai-card>
    </template>
  </ai-list>
 </template>

 <script>
-  import { mapState } from 'vuex'
-  import * as echarts from 'echarts'
  export default {
-    name: 'AppNewsStatistics',
-    label: '新闻统计',
+    name: 'AppWechatStatistics',
+    label: '公众号统计',

    props: {
      instance: Function,
@@ -62,69 +78,96 @@

    data () {
      return {
-        date: '',
        today: '',
+        date: '',
        search: {
-          title: '',
-          areaId: '',
-          dateRange: '1',
-          date: []
+          current: 1,
+          size: 10,
+          type: '0',
+          appId: ''
        },
-        info: {}
+        total: 0,
+        info: {},
+        tableData: [],
+        wechatList: [],
+        colConfigs: [
+          { prop: 'ymd', label: '日期' },
+          { prop: 'reqSuccCount', label: '拉取量', align: 'center' },
+          { prop: 'exposureCount', label: '曝光量', align: 'center' },
+          { prop: 'exposureRate', label: '曝光率', align: 'center', format: v => (v * 100).toFixed(2) + '%' },
+          { prop: 'clickCount', label: '点击量', align: 'center' },
+          { prop: 'clickRate', label: '点击率', align: 'center', format: v => (v * 100).toFixed(2) + '%' },
+          { prop: 'ecpm', label: 'eCPM（元）', align: 'center', format: v => v.toFixed(2) },
+          { prop: 'income', label: '收入（元）', align: 'center', format: v => v.toFixed(2) }
+        ]
      }
    },

-    computed: {
-      ...mapState(['user'])
-    },
-
    created () {
-      this.areaId = this.user.info.areaId
+      this.getInfo()
+      this.getWechatList()
    },

    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
-                  }
-                }
-              }
-            }
-          ]
+      onDateChange (e) {
+        if (!e) {
+          this.search.type = '0'
+        } else {
+          this.search.type = '3'
        }

-        chart.setOption(option)
-      }
+        this.getInfo()
+      },
+
+      getInfo () {
+        this.instance.post(`wxmppublisheradposgeneral/statistics`, null, {
+          params: {
+            ...this.search,
+            startTime: this.search.type === '3' ? this.date[0] : '',
+            endTime: this.search.type === '3' ? this.date[1] : ''
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+
+            this.getList()
+          }
+        })
+      },
+
+      getList () {
+        this.instance.post(`/wxmppublisheradposgeneral/list`, null, {
+          params: {
+            ...this.search,
+            startTime: this.search.type === '3' ? this.date[0] : '',
+            endTime: this.search.type === '3' ? this.date[1] : ''
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      getWechatList () {
+        this.instance.post(`/wxmpconfig/list?size=1000`).then(res => {
+          if (res.code == 0) {
+            this.wechatList = res.data.records.map(v => {
+              return {
+                dictValue: v.appId,
+                dictName: v.mpName
+              }
+            })
+          }
+        })
+      },
    }
  }
 </script>

 <style lang="scss" scoped>
-  .AppNewsStatistics {
+  .AppWechatStatistics {

    .bottom {
      display: flex;
@@ -150,6 +193,12 @@
      }
    }

+    :deep( .ai-card) {
+      .ai-card__body {
+        padding: 12px 16px;
+      }
+    }
+
    .statistics-top {
      display: flex;
      align-items: center;