Explorar o código

增加页面materialStatistics(素材大盘报表)

zhuxinbo %!s(int64=5) %!d(string=hai) anos
pai
achega
43311679bf

+ 6 - 2
public/export.js

@@ -13,9 +13,13 @@ function sheet2blob(sheet, sheetName) {
         type: 'binary'
     };
     var wbout = XLSX.write(workbook, wopts);
-    var blob = new Blob([s2ab(wbout)], {
+    var blob = window.URL.createObjectURL(new Blob([s2ab(wbout)], {
         type: "application/octet-stream"
-    }); // 字符串转ArrayBuffer
+    }))
+    
+    // new Blob([s2ab(wbout)], {
+    //     type: "application/octet-stream"
+    // }); // 字符串转ArrayBuffer
     function s2ab(s) {
         var buf = new ArrayBuffer(s.length);
         var view = new Uint8Array(buf);

+ 129 - 10
src/views/modules/Statistics/Statistics.vue

@@ -513,7 +513,13 @@ export default {
         params.smallDate = moment(this.contrastValue[0]._d).format('YYYY-MM-DD')
         params.bigDate = moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
       }
-
+      this.columnsDb = [
+        { title: '时间', dataIndex: 'statDate', align: 'center' },
+        { title: '总消耗', dataIndex: 'cost', align: 'center' },
+        { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+        { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+        { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
+      ]
       getKsAccountReport(params).then(res => {
         if (res.compared) {
           this.contrastDataAll = res
@@ -927,26 +933,139 @@ export default {
       } else if (type == 'noTitleKeyTableTwo') {
         this.dataTableTwo = []
         if (key == 'small') {
+          this.columnsDb = [
+            { title: '时间', dataIndex: 'statDate', align: 'center' },
+            { title: '总消耗', dataIndex: 'cost', align: 'center' },
+            { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+            { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+            { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
+          ]
           if (this.value == 'day') {
-            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map(item => {
+            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map((item, index) => {
               return {
+                key: index,
                 ...item,
                 statDate: item.statDate + ' ' + item.statHour + '时'
               }
             })
           } else {
-            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail
-          }
-        } else {
-          if (this.value == 'day') {
-            this.dataTableTwo = this.dataAllTableTwo.comparedDetail.map(item => {
+            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map((item, index) => {
               return {
-                ...item,
-                statDate: item.statDate + ' ' + item.statHour + '时'
+                key: index,
+                ...item
               }
             })
+          }
+        } else {
+          this.columnsDb = [
+            { title: '时间', dataIndex: 'statDate', align: 'center' },
+            {
+              title: '总消耗环比',
+              dataIndex: 'yesCost',
+              scopedSlots: { customRender: 'yesCost' },
+              align: 'center'
+            },
+            { title: '总消耗', dataIndex: 'cost', align: 'center' },
+            {
+              title: '封面点击数环比',
+              dataIndex: 'yesPhotoClick',
+              scopedSlots: { customRender: 'photoClickProportion' },
+              align: 'center'
+            },
+            { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+            {
+              title: '封面曝光数环比',
+              dataIndex: 'yesPhotoShow',
+              scopedSlots: { customRender: 'photoShowProportion' },
+              align: 'center'
+            },
+            { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+            {
+              title: '素材曝光数环比',
+              dataIndex: 'yesAclick',
+              scopedSlots: { customRender: 'aclickProportion' },
+              align: 'center'
+            },
+            { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
+          ]
+          if (this.value == 'day') {
+            for (let i = 0; i < this.dataAllTableTwo.comparedDetail.length; i++) {
+              this.dataTableTwo.push({
+                key: i,
+                statDate:
+                  this.dataAllTableTwo.comparedDetail[i].statDate +
+                  ' ' +
+                  this.dataAllTableTwo.comparedDetail[i].statHour +
+                  '时',
+                yesCost:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].cost / this.dataAllTableTwo.beComparedDetail[i].cost -
+                    1
+                  ).toFixed(2) + '%',
+                cost: this.dataAllTableTwo.comparedDetail[i].cost,
+                yesPhotoClick:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].photoClick /
+                      this.dataAllTableTwo.beComparedDetail[i].photoClick -
+                    1
+                  ).toFixed(2) + '%',
+                photoClick: this.dataAllTableTwo.comparedDetail[i].photoClick,
+                yesPhotoShow:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].photoShow /
+                      this.dataAllTableTwo.beComparedDetail[i].photoShow -
+                    1
+                  ).toFixed(2) + '%',
+                photoShow: this.dataAllTableTwo.comparedDetail[i].photoShow,
+                yesAclick:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].aclick / this.dataAllTableTwo.beComparedDetail[i].aclick -
+                    1
+                  ).toFixed(2) + '%',
+                aclick: this.dataAllTableTwo.comparedDetail[i].aclick
+              })
+            }
+            // this.dataTableTwo = this.dataAllTableTwo.comparedDetail.map(item => {
+            //   return {
+            //     ...item,
+            //     statDate: item.statDate + ' ' + item.statHour + '时'
+            //   }
+            // })
           } else {
-            this.dataTableTwo = this.dataAllTableTwo.comparedDetail
+            this.dataTableTwo = []
+            for (let i = 0; i < this.dataAllTableTwo.comparedDetail.length; i++) {
+              this.dataTableTwo.push({
+                key: i,
+                statDate: this.dataAllTableTwo.comparedDetail[i].statDate,
+                yesCost:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].cost / this.dataAllTableTwo.beComparedDetail[i].cost -
+                    1
+                  ).toFixed(2) + '%',
+                cost: this.dataAllTableTwo.comparedDetail[i].cost,
+                yesPhotoClick:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].photoClick /
+                      this.dataAllTableTwo.beComparedDetail[i].photoClick -
+                    1
+                  ).toFixed(2) + '%',
+                photoClick: this.dataAllTableTwo.comparedDetail[i].photoClick,
+                yesPhotoShow:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].photoShow /
+                      this.dataAllTableTwo.beComparedDetail[i].photoShow -
+                    1
+                  ).toFixed(2) + '%',
+                photoShow: this.dataAllTableTwo.comparedDetail[i].photoShow,
+                yesAclick:
+                  (
+                    this.dataAllTableTwo.comparedDetail[i].aclick / this.dataAllTableTwo.beComparedDetail[i].aclick -
+                    1
+                  ).toFixed(2) + '%',
+                aclick: this.dataAllTableTwo.comparedDetail[i].aclick
+              })
+            }
+            console.log(this.dataTableTwo)
           }
         }
       } else {

+ 5 - 5
src/views/modules/Statistics/dataDisplayStatistics.vue

@@ -351,7 +351,7 @@ const columns = [
     align: 'center'
   },
   {
-    title: 'cpm',
+    title: 'cpm(¥)',
     dataIndex: 'cpm',
     align: 'center'
   },
@@ -659,7 +659,7 @@ export default {
             aclick: (res.chainRatio.aClickProportion * 100).toFixed(2) + '%',
             photoClickRatio: res.chainRatio.photoClickRatioProportion
               ? (res.chainRatio.photoClickRatioProportion * 100).toFixed(2) + '%'
-              : 0 + '%',
+              : 0.00 + '%',
             cvr: (res.chainRatio.cvrProportion * 100).toFixed(2) + '%',
             cpm: (res.chainRatio.cpmProportion * 100).toFixed(2) + '%',
             bClick: (res.chainRatio.bClickProportion * 100).toFixed(2) + '%',
@@ -667,12 +667,12 @@ export default {
               ? (res.chainRatio.formCountProportion * 100).toFixed(2) + '%'
               : res.chainRatio.activationCountProportion
               ? (res.chainRatio.activationCountProportion * 100).toFixed(2) + '%'
-              : 0 + '%',
+              : 0.00 + '%',
             beforeFormPrice: res.chainRatio.beforeFormPriceProportion
               ? (res.chainRatio.beforeFormPriceProportion * 100).toFixed(2) + '%'
               : res.chainRatio.beforeActivationPriceProportion
               ? (res.chainRatio.beforeActivationPriceProportion * 100).toFixed(2) + '%'
-              : 0 + '%',
+              : 0.00 + '%',
 
             afterFormPrice: res.chainRatio.afterFormPriceProportion
               ? (res.chainRatio.afterFormPriceProportion * 100).toFixed(2) + '%'
@@ -1098,7 +1098,7 @@ export default {
         }
       ] //单元格列宽
 
-      openDownloadDialog(sheet2blob(sheet), title + '.csv')
+      openDownloadDialog(sheet2blob(sheet), title + '.xlsx')
     }
   },
   watch: {},

+ 331 - 0
src/views/modules/Statistics/materialStatistics.vue

@@ -0,0 +1,331 @@
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+.search-box p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+</style>
+<style>
+/* .data-display-statistics .ant-card-body {
+  padding: 0 15px;
+} */
+.data-display-statistics .ant-col-6 {
+  margin: 10px 0;
+}
+.data-display-statistics .ant-col-6 .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.data-display-statistics .ant-col-6 p,
+.data-display-statistics .ant-col-6 span {
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 600;
+  color: red;
+  margin: 0;
+}
+.search-box .ant-card-body {
+  padding: 5px 15px;
+}
+.data-display-statistics .ant-col-6 .ant-card-body .styleElse {
+  line-height: 60px;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+}
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.yincang .ant-col-6 p {
+  text-align: left;
+  color: red;
+  font-size: 16px;
+  font-weight: 500;
+}
+.ant-table-thead div {
+  font-weight: 700;
+}
+.tool-tip {
+  position: absolute;
+  top: 65px;
+  right: 10px;
+}
+th div {
+  white-space: nowrap;
+}
+</style>
+<template>
+  <div class="data-display-statistics">
+    <a-row class="image-list-heading vm-panel">
+      <div class="panel-heading">{{ title }}</div>
+      <a-row>
+        <a-col :span="24">
+          <a-card :bordered="false" class="search-box">
+            <p :style="active==1?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(1)">今天</p>
+            <p :style="active==2?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(2)">昨天</p>
+            <p
+              :style="active==3?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(3)"
+            >近一周</p>
+            <p
+              :style="active==4?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(4)"
+            >近十五天</p>
+            <p
+              :style="active==5?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(5)"
+            >近一月</p>
+            <p
+              :style="active==6?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(6)"
+            >近三月</p>
+            <p
+              :style="active==7?'color:cornflowerblue;background:#f2f2f2':''"
+              @click="getAdd(7)"
+            >近半年</p>
+            <p :style="active==8?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(8)">所有</p>
+            <a-range-picker
+              style="width:400px"
+              :disabledDate="disabledDate"
+              :showTime="{
+                hideDisabledOptions: true,
+            }"
+              format="YYYY-MM-DD"
+              v-model="startValue"
+              @ok="getAdd(9)"
+            />
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-row>
+    <a-row :gutter="10" style="margin-top:10px">
+      <a-col :span="24">
+        <a-card style="width:100%;">
+          <a-table :columns="columns" :dataSource="data" bordered id="outTable" :pagination="false"></a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import moment from 'moment'
+import { getAdvertiserList, getReportList, getStatistics } from '@api/statistics'
+import axios from 'axios'
+
+var length = 0
+var active = 1
+const columns = [
+  {
+    title: '时间',
+    dataIndex: 'date',
+    align: 'center',
+    customRender: function(text, record, index) {
+      const obj = {
+        children: text,
+        attrs: {}
+      }
+      for (let i = 0; i < length; i++) {
+        if (index == 0 && i == 0) {
+          obj.attrs.rowSpan = length
+        } else {
+          if (index == i) {
+            obj.attrs.rowSpan = 0
+          }
+        }
+      }
+      return obj
+    }
+  },
+  {
+    title: '账户Id',
+    dataIndex: 'accountId',
+    align: 'center',
+    customRender: function(text, record, index) {
+      const obj = {
+        children: text,
+        attrs: {}
+      }
+      if (active == 1) {
+        for (let i = 0; i < length; i++) {
+          if (index >= length - 3) {
+            obj.attrs.colSpan = 2
+          }
+        }
+      }
+      return obj
+    }
+  },
+  {
+    title: '账户昵称',
+    dataIndex: 'accountName',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+    customRender: function(text, record, index) {
+      const obj = {
+        children: text,
+        attrs: {}
+      }
+      if (active == 1) {
+        for (let i = 0; i < length; i++) {
+          if (index >= length - 3) {
+            obj.attrs.colSpan = 0
+          }
+        }
+      }
+
+      return obj
+    }
+  },
+  {
+    title: '消耗(¥)',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center'
+  },
+  {
+    title: '折后消耗(¥)',
+    dataIndex: 'costY',
+    align: 'center'
+  },
+  {
+    title: '封面展示',
+    dataIndex: 'photoShow',
+    align: 'center'
+  },
+  {
+    title: '封面点击',
+    dataIndex: 'photoClick',
+    align: 'center'
+  },
+  {
+    title: '素材曝光数',
+    dataIndex: 'aclick',
+    align: 'center'
+  },
+  {
+    title: '封面点击率',
+    dataIndex: 'photoClickRatio',
+    align: 'center'
+  },
+  {
+    title: 'cvr',
+    dataIndex: 'cvr',
+    align: 'center'
+  },
+  {
+    title: 'cpm(¥)',
+    dataIndex: 'cpm',
+    align: 'center'
+  },
+  {
+    title: '行为数',
+    dataIndex: 'bClick',
+    align: 'center'
+  },
+  {
+    title: '转化数',
+    dataIndex: 'formCount',
+    align: 'center'
+  },
+  {
+    title: '折前转化单价(¥)',
+    dataIndex: 'beforeFormPrice',
+    align: 'center'
+  },
+  {
+    title: '折后转化单价(¥)',
+    dataIndex: 'afterFormPrice',
+    align: 'center'
+  },
+  {
+    title: '单价区间',
+    dataIndex: 'price',
+    align: 'center',
+    customRender: function(text, record, index) {
+      const obj = {
+        children: text,
+        attrs: {}
+      }
+      for (let i = 0; i < length; i++) {
+        if (index == 0 && i == 0) {
+          obj.attrs.rowSpan = length
+        } else {
+          if (index == i) {
+            obj.attrs.rowSpan = 0
+          }
+        }
+      }
+      return obj
+    }
+  }
+]
+
+export default {
+  name: 'data-display-statistics',
+  components: {
+    ACol,
+    ARow,
+  },
+
+  data: function() {
+    return {
+      title: '素材大盘报表',
+      columns,
+      data: [],
+      active:1,
+      allValue:[],
+      startValue:[]
+    }
+  },
+  filters: {
+    formatDate: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
+    }
+  },
+  methods: {
+    moment,
+    getAdd(checked) {
+      if (checked == 9) {
+        if (this.startValue.length > 0 && this.startValue[0]) {
+          this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
+          this.allValue[0] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
+        }
+      } else {
+        this.startValue = []
+        this.allValue = []
+      }
+      this.active = checked
+      active = checked
+    }
+  },
+  watch: {},
+  distoryed() {},
+  mounted: function() {
+    this.$nextTick(() => {})
+  }
+}
+</script>