123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <style>
- th div {
- white-space: nowrap;
- }
- </style>
- <template>
- <div class="data-display-statistics">
- <a-modal title="环比展示" v-model="visible" @ok="handleOk" width="90%">
- <div v-if="url">
- <video class="video" :src="url" controls="controls" style="height:200px;" v-show="showVideo">
- 您的浏览器不支持 video 标签。
- </video>
- </div>
- <a-button type="primary" @click="showVideo = !showVideo">{{
- !showVideo ? '点击查看视频' : '点击收起视频'
- }}</a-button>
- <a-card style="width:100%;">
- <a-table
- :columns="columnsDetail"
- :dataSource="dataDetail"
- bordered
- id="outTable"
- :pagination="false"
- :loading="loading"
- :scroll="{ x: true }"
- >
- <span slot="photoClickRatio" slot-scope="photoClickRatio">{{ photoClickRatio | getBo }}</span>
- <span slot="actionRatio" slot-scope="actionRatio">{{ actionRatio | getBo }}</span>
- <span slot="impression1kCost" slot-scope="impression1kCost, record">
- <span v-if="record.statDate == '环比'">{{ impression1kCost | getBo }}</span>
- <span v-else>{{ impression1kCost | toFixtwo }}</span>
- </span>
- <span slot="photoClickCost" slot-scope="photoClickCost, record">
- <span v-if="record.statDate == '环比'">{{ photoClickCost | getBo }}</span>
- <span v-else>{{ photoClickCost | toFixtwo }}</span>
- </span>
- <span slot="actionCost" slot-scope="actionCost, record">
- <span v-if="record.statDate == '环比'">{{ actionCost | getBo }}</span>
- <span v-else>{{ actionCost | toFixtwo }}</span>
- </span>
- <span slot="conversionPrice" slot-scope="conversionPrice, record">
- <span v-if="record.statDate == '环比'">{{ conversionPrice | getBo }}</span>
- <span v-else>{{ conversionPrice | toFixtwo }}</span>
- </span>
- </a-table>
- </a-card>
- </a-modal>
- </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 { getKuaiShouChainRatio } from '@api/statistics'
- import axios from 'axios'
- import { mapGetters } from 'vuex'
- var length = 0
- var active = 1
- const columnsDetail = [
- {
- title: '日期',
- dataIndex: 'statDate',
- key: 'statDate',
- align: 'center',
- fixed: 'left',
- width: 130
- },
- {
- title: '花费',
- dataIndex: 'cost',
- key: 'cost',
- align: 'center'
- },
- {
- title: '封面曝光数',
- dataIndex: 'photoShow',
- key: 'photoShow',
- align: 'center'
- },
- {
- title: '封面点击数',
- dataIndex: 'photoClick',
- key: 'photoClick',
- align: 'center'
- },
- {
- title: '素材曝光数',
- dataIndex: 'aclick',
- key: 'aclick',
- align: 'center'
- },
- {
- title: '行为数',
- dataIndex: 'bclick',
- key: 'bclick',
- align: 'center'
- },
- {
- title: '封面点击率',
- dataIndex: 'photoClickRatio',
- key: 'photoClickRatio',
- align: 'center',
- scopedSlots: { customRender: 'photoClickRatio' }
- },
- {
- title: '行为率',
- dataIndex: 'actionRatio',
- key: 'actionRatio',
- align: 'center',
- scopedSlots: { customRender: 'actionRatio' }
- },
- {
- title: '均千次封面曝光花费(元)',
- dataIndex: 'impression1kCost',
- key: 'impression1kCost',
- scopedSlots: { customRender: 'impression1kCost' },
- align: 'center'
- },
- {
- title: '平均封面点击单价(元)',
- dataIndex: 'photoClickCost',
- key: 'photoClickCost',
- scopedSlots: { customRender: 'photoClickCost' },
- align: 'center'
- },
- {
- title: '平均行为单价(元)',
- dataIndex: 'actionCost',
- key: 'actionCost',
- scopedSlots: { customRender: 'actionCost' },
- align: 'center'
- },
- {
- title: '转化数',
- dataIndex: 'conversions',
- key: 'conversions',
- align: 'center'
- },
- {
- title: '转化单价(元)',
- dataIndex: 'conversionPrice',
- key: 'conversionPrice',
- scopedSlots: { customRender: 'conversionPrice' },
- align: 'center'
- }
- ]
- export default {
- name: 'ration-modal',
- components: {
- ACol,
- ARow
- },
- data: function() {
- return {
- columnsDetail,
- showVideo: false,
- dataDetail: [],
- url: '',
- visible: false,
- loading: true
- }
- },
- filters: {
- toFixtwo: function(value) {
- if (value) {
- return value.toFixed(2)
- } else {
- return 0.0
- }
- },
- getBo: function(value) {
- if (value) {
- return (value * 100).toFixed(2) + '%'
- } else {
- return '0.00%'
- }
- }
- },
- methods: {
- moment,
- getMineList(md5, active) {
- this.visible = true
- this.loading = true
- this.url = md5.url
- this.dataDetail = []
- this.showVideo = false
- var params = {}
- params.type = active
- params.signature = md5.signature
- if (md5.accountId) {
- params.accountId = md5.accountId
- }
- getKuaiShouChainRatio(params).then(res => {
- if (res.success) {
- if (res.result.contrast) {
- var now = {
- key: 1,
- ...res.result.contrast,
- statDate:
- active == 1 || active == 2
- ? res.result.contrast.statDate
- : res.result.contrast.startDate + ' ~ ' + res.result.contrast.endDate
- }
- var yesterday = {
- key: 2,
- ...res.result.beContrast,
- statDate:
- active == 1 || active == 2
- ? res.result.beContrast.statDate
- : res.result.beContrast.startDate + ' ~ ' + res.result.beContrast.endDate
- }
- var chainRatio = {
- key: 3,
- statDate: '环比',
- photoClickRatio: res.result.chainRatio.photoClickRatioProportion,
- conversions: (res.result.chainRatio.conversionsProportion * 100).toFixed(2) + '%',
- cost: (res.result.chainRatio.costProportion * 100).toFixed(2) + '%',
- impression1kCost: res.result.chainRatio.impression1kCostProportion,
- photoClick: (res.result.chainRatio.photoClickProportion * 100).toFixed(2) + '%',
- bclick: (res.result.chainRatio.bClickProportion * 100).toFixed(2) + '%',
- aclick: (res.result.chainRatio.aClickProportion * 100).toFixed(2) + '%',
- photoClickCost: res.result.chainRatio.photoClickCostProportion,
- conversionPrice: res.result.chainRatio.conversionPriceProportion,
- actionRatio: res.result.chainRatio.actionRatioProportion,
- actionCost: res.result.chainRatio.actionCostProportion,
- photoShow: (res.result.chainRatio.showProportion * 100).toFixed(2) + '%'
- }
- this.dataDetail.push(now)
- this.dataDetail.push(yesterday)
- this.dataDetail.push(chainRatio)
- }
- this.loading = false
- } else {
- this.visible = true
- this.loading = false
- }
- })
- },
- handleOk() {}
- },
- watch: {},
- distoryed() {}
- }
- </script>
|