ratioModal.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <template>
  2. <div class="data-display-statistics">
  3. <a-modal title="环比展示" v-model="visible" @ok="handleOk" width="90%">
  4. <div v-if="url">
  5. <video
  6. class="video"
  7. :src="url"
  8. controls="controls"
  9. style="height:200px;"
  10. v-show="showVideo"
  11. >您的浏览器不支持 video 标签。</video>
  12. </div>
  13. <a-button type="primary" @click="showVideo = !showVideo">{{!showVideo?"点击查看视频":"点击收起视频"}}</a-button>
  14. <a-card style="width:100%;">
  15. <a-table
  16. :columns="columnsDetail"
  17. :dataSource="dataDetail"
  18. bordered
  19. id="outTable"
  20. :pagination="false"
  21. :loading="loading"
  22. >
  23. <span slot="photoClickRatio" slot-scope="photoClickRatio">{{photoClickRatio|getBo}}</span>
  24. <span slot="actionRatio" slot-scope="actionRatio">{{actionRatio|getBo}}</span>
  25. <span slot="impression1kCost" slot-scope="impression1kCost,record">
  26. <span v-if="record.statDate=='环比'">{{impression1kCost|getBo}}</span>
  27. <span v-else>{{impression1kCost|toFixtwo}}</span>
  28. </span>
  29. <span slot="photoClickCost" slot-scope="photoClickCost,record">
  30. <span v-if="record.statDate=='环比'">{{photoClickCost|getBo}}</span>
  31. <span v-else>{{photoClickCost|toFixtwo}}</span>
  32. </span>
  33. <span slot="actionCost" slot-scope="actionCost,record">
  34. <span v-if="record.statDate=='环比'">{{actionCost|getBo}}</span>
  35. <span v-else>{{actionCost|toFixtwo}}</span>
  36. </span>
  37. <span slot="conversionPrice" slot-scope="conversionPrice,record">
  38. <span v-if="record.statDate=='环比'">{{conversionPrice|getBo}}</span>
  39. <span v-else>{{conversionPrice|toFixtwo}}</span>
  40. </span>
  41. </a-table>
  42. </a-card>
  43. </a-modal>
  44. </div>
  45. </template>
  46. <script>
  47. import ARow from 'ant-design-vue/es/grid/Row'
  48. import ACol from 'ant-design-vue/es/grid/Col'
  49. import moment from 'moment'
  50. import { getKuaiShouChainRatio } from '@api/statistics'
  51. import axios from 'axios'
  52. import { mapGetters } from 'vuex'
  53. var length = 0
  54. var active = 1
  55. const columnsDetail = [
  56. {
  57. title: '日期',
  58. dataIndex: 'statDate',
  59. key: 'statDate',
  60. align: 'center'
  61. },
  62. {
  63. title: '花费',
  64. dataIndex: 'cost',
  65. key: 'cost',
  66. align: 'center'
  67. },
  68. {
  69. title: '封面曝光数',
  70. dataIndex: 'photoShow',
  71. key: 'photoShow',
  72. align: 'center'
  73. },
  74. {
  75. title: '封面点击数',
  76. dataIndex: 'photoClick',
  77. key: 'photoClick',
  78. align: 'center'
  79. },
  80. {
  81. title: '素材曝光数',
  82. dataIndex: 'aclick',
  83. key: 'aclick',
  84. align: 'center'
  85. },
  86. {
  87. title: '行为数',
  88. dataIndex: 'bclick',
  89. key: 'bclick',
  90. align: 'center'
  91. },
  92. {
  93. title: '封面点击率',
  94. dataIndex: 'photoClickRatio',
  95. key: 'photoClickRatio',
  96. align: 'center',
  97. scopedSlots: { customRender: 'photoClickRatio' }
  98. },
  99. {
  100. title: '行为率',
  101. dataIndex: 'actionRatio',
  102. key: 'actionRatio',
  103. align: 'center',
  104. scopedSlots: { customRender: 'actionRatio' }
  105. },
  106. {
  107. title: '均千次封面曝光花费(元)',
  108. dataIndex: 'impression1kCost',
  109. key: 'impression1kCost',
  110. scopedSlots: { customRender: 'impression1kCost' },
  111. align: 'center'
  112. },
  113. {
  114. title: '平均封面点击单价(元)',
  115. dataIndex: 'photoClickCost',
  116. key: 'photoClickCost',
  117. scopedSlots: { customRender: 'photoClickCost' },
  118. align: 'center'
  119. },
  120. {
  121. title: '平均行为单价(元)',
  122. dataIndex: 'actionCost',
  123. key: 'actionCost',
  124. scopedSlots: { customRender: 'actionCost' },
  125. align: 'center'
  126. },
  127. {
  128. title: '转化数',
  129. dataIndex: 'conversions',
  130. key: 'conversions',
  131. align: 'center'
  132. },
  133. {
  134. title: '转化单价(元)',
  135. dataIndex: 'conversionPrice',
  136. key: 'conversionPrice',
  137. scopedSlots: { customRender: 'conversionPrice' },
  138. align: 'center'
  139. }
  140. ]
  141. export default {
  142. name: 'ration-modal',
  143. components: {
  144. ACol,
  145. ARow
  146. },
  147. data: function() {
  148. return {
  149. columnsDetail,
  150. showVideo: false,
  151. dataDetail: [],
  152. url: '',
  153. visible: false,
  154. loading:true
  155. }
  156. },
  157. filters: {
  158. toFixtwo: function(value) {
  159. if (value) {
  160. return value.toFixed(2)
  161. } else {
  162. return 0.0
  163. }
  164. },
  165. getBo: function(value) {
  166. if (value) {
  167. return (value * 100).toFixed(2) + '%'
  168. } else {
  169. return '0.00%'
  170. }
  171. }
  172. },
  173. methods: {
  174. moment,
  175. getMineList(md5, active) {
  176. this.visible = true
  177. this.loading = true
  178. this.url = md5.url
  179. this.dataDetail = []
  180. this.showVideo = false
  181. var params = {}
  182. params.type = active
  183. params.signature = md5.signature
  184. if (md5.accountId) {
  185. params.accountId = md5.accountId
  186. }
  187. getKuaiShouChainRatio(params).then(res => {
  188. if (res.contrast) {
  189. var now = {
  190. key: 1,
  191. ...res.contrast,
  192. statDate:
  193. active == 1 || active == 2 ? res.contrast.statDate : res.contrast.startDate + ' ~ ' + res.contrast.endDate
  194. }
  195. var yesterday = {
  196. key: 2,
  197. ...res.beContrast,
  198. statDate:
  199. active == 1 || active == 2
  200. ? res.beContrast.statDate
  201. : res.beContrast.startDate + ' ~ ' + res.beContrast.endDate
  202. }
  203. var chainRatio = {
  204. key: 3,
  205. statDate: '环比',
  206. photoClickRatio: res.chainRatio.photoClickRatioProportion,
  207. conversions: (res.chainRatio.conversionsProportion * 100).toFixed(2) + '%',
  208. cost: (res.chainRatio.costProportion * 100).toFixed(2) + '%',
  209. impression1kCost: res.chainRatio.impression1kCostProportion,
  210. photoClick: (res.chainRatio.photoClickProportion * 100).toFixed(2) + '%',
  211. bclick: (res.chainRatio.bClickProportion * 100).toFixed(2) + '%',
  212. aclick: (res.chainRatio.aClickProportion * 100).toFixed(2) + '%',
  213. photoClickCost: res.chainRatio.photoClickCostProportion,
  214. conversionPrice: res.chainRatio.conversionPriceProportion,
  215. actionRatio: res.chainRatio.actionRatioProportion,
  216. actionCost: res.chainRatio.actionCostProportion,
  217. photoShow: (res.chainRatio.showProportion * 100).toFixed(2) + '%'
  218. }
  219. this.dataDetail.push(now)
  220. this.dataDetail.push(yesterday)
  221. this.dataDetail.push(chainRatio)
  222. this.loading = false
  223. } else {
  224. this.visible = true
  225. this.loading = false
  226. }
  227. })
  228. },
  229. handleOk() {}
  230. },
  231. watch: {},
  232. distoryed() {}
  233. }
  234. </script>