alipayStatistics.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
  1. <style lang="scss" scoped>
  2. .search-bar {
  3. display: flex;
  4. align-items: center;
  5. }
  6. .search-box p {
  7. display: inline-block;
  8. border: 1px solid #f2f2f2;
  9. border-radius: 5px;
  10. margin-right: 10px;
  11. padding: 5px 10px;
  12. cursor: pointer;
  13. }
  14. </style>
  15. <style>
  16. /* .data-display-statistics .ant-card-body {
  17. padding: 0 15px;
  18. } */
  19. .data-display-statistics .ant-col-6 {
  20. margin: 10px 0;
  21. }
  22. .data-display-statistics .ant-col-6 .ant-card-body {
  23. display: flex;
  24. justify-content: center;
  25. }
  26. .data-display-statistics .ant-col-6 p,
  27. .data-display-statistics .ant-col-6 span {
  28. text-align: center;
  29. line-height: 40px;
  30. font-size: 30px;
  31. font-weight: 600;
  32. color: red;
  33. margin: 0;
  34. }
  35. .search-box .ant-card-body {
  36. padding: 5px 15px;
  37. }
  38. .data-display-statistics .ant-col-6 .ant-card-body .styleElse {
  39. line-height: 60px;
  40. height: 40px;
  41. font-size: 16px;
  42. font-weight: 400;
  43. margin-left: 10px;
  44. }
  45. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  46. display: none !important;
  47. }
  48. .yincang .ant-col-6 p {
  49. text-align: left;
  50. color: red;
  51. font-size: 16px;
  52. font-weight: 500;
  53. }
  54. .ant-table-thead div {
  55. font-weight: 700;
  56. }
  57. .tool-tip {
  58. position: absolute;
  59. top: 65px;
  60. right: 10px;
  61. }
  62. /* th div {
  63. white-space: nowrap;
  64. } */
  65. </style>
  66. <template>
  67. <div class="data-statistics">
  68. <a-row class="image-list-heading vm-panel">
  69. <a-row type="flex" align="middle" justify="space-between" class="panel-body">
  70. <div class="search-bar" style="width:100%">
  71. <span>账户选择:</span>
  72. <treeselect :appId.sync="appId" style="width:400px" />
  73. <span style="margin-left:10px">返点比例:</span>
  74. <a-input-number
  75. :min="1"
  76. :max="10"
  77. :step="0.1"
  78. v-model="discount"
  79. placeholder="请输入折扣"
  80. style="width:100px"
  81. />
  82. <span style="margin-left:10px">日期选择:</span>
  83. <a-date-picker @change="getDate" :disabledDate="disabledDate" />
  84. <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
  85. <a-button
  86. type="primary"
  87. icon="reload"
  88. @click="getDataReset"
  89. style="background-color:#67c23a;border-color:#67c23a"
  90. >刷新</a-button
  91. >
  92. </div>
  93. </a-row>
  94. </a-row>
  95. <a-row :gutter="10" style="margin-top:10px">
  96. <a-col :span="24">
  97. <a-card
  98. style="width:100%"
  99. :tabList="tabListNoTitle"
  100. :activeTabKey="noTitleKey"
  101. @tabChange="key => onTabChange(key, 'noTitleKey')"
  102. >
  103. <div style="display:flex;margin-bottom:15px">
  104. <!-- <a-select style="width: 120px" v-model="statHour" @change="getElseData" allowClear>
  105. <a-select-option v-for="item of 24" :key="item - 1" :value="item - 1">{{ item - 1 }}</a-select-option>
  106. </a-select> -->
  107. <a-button type="primary" @click="exportExcel">导出</a-button>
  108. </div>
  109. <a-table
  110. size="middle"
  111. :columns="columns"
  112. :dataSource="data"
  113. bordered
  114. id="outTable"
  115. :pagination="ipagination"
  116. :scroll="{ x: 1900 }"
  117. :loading="loading"
  118. >
  119. <span slot="statDate" slot-scope="statDate">{{ statDate | formatDate }}</span>
  120. <span slot="disCountCost" slot-scope="disCountCost">{{ disCountCost | toFixtwo }}</span>
  121. <span slot="clickConversionRate" slot-scope="clickConversionRate">{{ clickConversionRate | getBo }}</span>
  122. <span slot="cost" slot-scope="cost">{{ cost | toFixtwo }}</span>
  123. <span slot="photoClickCost" slot-scope="photoClickCost">{{ photoClickCost | toFixtwo }}</span>
  124. <span slot="impression1kCost" slot-scope="impression1kCost">{{ impression1kCost | toFixtwo }}</span>
  125. <span slot="conversionPrice" slot-scope="conversionPrice">{{ conversionPrice | toFixtwo }}</span>
  126. <span slot="discountConversionPrice" slot-scope="discountConversionPrice">{{
  127. discountConversionPrice | toFixtwo
  128. }}</span>
  129. <span slot="contractRebateRealCharged" slot-scope="contractRebateRealCharged">{{
  130. contractRebateRealCharged | toFixtwo
  131. }}</span>
  132. <span slot="actualCost" slot-scope="actualCost">{{ actualCost | toFixtwo }}</span>
  133. <span slot="photoClickRatio" slot-scope="photoClickRatio">{{ photoClickRatio | getBo }}</span>
  134. <span slot="actionRatio" slot-scope="actionRatio">{{ actionRatio | getBo }}</span>
  135. <span slot="conversionRate" slot-scope="conversionRate">{{ conversionRate | getBo }}</span>
  136. <span slot="photoClickRatio" slot-scope="photoClickRatio">{{ photoClickRatio | getBo }}</span>
  137. </a-table>
  138. </a-card>
  139. </a-col>
  140. </a-row>
  141. </div>
  142. </template>
  143. <script>
  144. import ARow from 'ant-design-vue/es/grid/Row'
  145. import ACol from 'ant-design-vue/es/grid/Col'
  146. import countTo from 'vue-count-to'
  147. import moment from 'moment'
  148. import { getDailyReport } from '@api/statistics'
  149. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  150. import axios from 'axios'
  151. import lifting from './components/lifting'
  152. import timeCheck from './components/timeCheck'
  153. import Treeselect from './components/Treeselect.vue'
  154. import { JeecgListMixin } from '@/mixins/ipagination'
  155. var length = 0
  156. var active = 1
  157. const columns = [
  158. {
  159. title: '消耗(¥)',
  160. dataIndex: 'cost',
  161. scopedSlots: { customRender: 'cost' },
  162. align: 'center'
  163. },
  164. {
  165. title: '展示数',
  166. dataIndex: 'photoShow',
  167. align: 'center'
  168. },
  169. {
  170. title: '点击数',
  171. dataIndex: 'photoClick',
  172. align: 'center'
  173. },
  174. {
  175. title: '点击率',
  176. dataIndex: 'photoClickRatio',
  177. align: 'center',
  178. scopedSlots: { customRender: 'photoClickRatio' }
  179. },
  180. {
  181. title: '平均点击花费',
  182. dataIndex: 'photoClickCost',
  183. align: 'center',
  184. scopedSlots: { customRender: 'photoClickCost' }
  185. },
  186. {
  187. title: '行为数',
  188. dataIndex: 'bclick',
  189. align: 'center'
  190. },
  191. {
  192. title: '行为率',
  193. dataIndex: 'actionRatio',
  194. align: 'center',
  195. scopedSlots: { customRender: 'actionRatio' }
  196. },
  197. {
  198. title: '平均千次展示花费(¥)',
  199. dataIndex: 'impression1kCost',
  200. align: 'center',
  201. scopedSlots: { customRender: 'impression1kCost' }
  202. },
  203. {
  204. title: '转化数',
  205. dataIndex: 'conversions',
  206. align: 'center'
  207. },
  208. {
  209. title: '转化单价(¥)',
  210. dataIndex: 'conversionPrice',
  211. align: 'center',
  212. scopedSlots: { customRender: 'conversionPrice' }
  213. },
  214. {
  215. title: '转化率',
  216. dataIndex: 'conversionRate',
  217. align: 'center',
  218. scopedSlots: { customRender: 'conversionRate' }
  219. },
  220. {
  221. title: '折后转化成本(¥)',
  222. dataIndex: 'discountConversionPrice',
  223. align: 'center',
  224. scopedSlots: { customRender: 'discountConversionPrice' }
  225. },
  226. {
  227. title: '激励花费(¥)',
  228. dataIndex: 'contractRebateRealCharged',
  229. align: 'center',
  230. scopedSlots: { customRender: 'contractRebateRealCharged' }
  231. },
  232. {
  233. title: '实际消耗(¥)',
  234. dataIndex: 'actualCost',
  235. align: 'center',
  236. scopedSlots: { customRender: 'actualCost' }
  237. }
  238. ]
  239. const columnsGroup = [
  240. {
  241. title: '日期',
  242. dataIndex: 'statDate',
  243. scopedSlots: { customRender: 'statDate' },
  244. align: 'center'
  245. },
  246. {
  247. title: '账号',
  248. dataIndex: 'accountId',
  249. align: 'center'
  250. },
  251. {
  252. title: '账号名称',
  253. dataIndex: 'authName',
  254. align: 'center'
  255. },
  256. {
  257. title: '计划名称',
  258. dataIndex: 'campaignName',
  259. align: 'center'
  260. },
  261. {
  262. title: '广告组名称',
  263. dataIndex: 'unitName',
  264. align: 'center'
  265. },
  266. {
  267. title: '消耗',
  268. dataIndex: 'cost',
  269. align: 'center',
  270. scopedSlots: { customRender: 'cost' }
  271. },
  272. {
  273. title: '折后消耗',
  274. dataIndex: 'disCountCost',
  275. align: 'center',
  276. scopedSlots: { customRender: 'cost' }
  277. },
  278. {
  279. title: '展示数',
  280. dataIndex: 'photoShow',
  281. align: 'center'
  282. },
  283. {
  284. title: '点击数',
  285. dataIndex: 'photoClick',
  286. align: 'center'
  287. },
  288. {
  289. title: '点击率',
  290. dataIndex: 'photoClickRatio',
  291. align: 'center',
  292. scopedSlots: { customRender: 'photoClickRatio' }
  293. },
  294. {
  295. title: '行为数',
  296. dataIndex: 'bclick',
  297. align: 'center'
  298. },
  299. {
  300. title: '行为率',
  301. dataIndex: 'actionRatio',
  302. align: 'center',
  303. scopedSlots: { customRender: 'actionRatio' }
  304. },
  305. {
  306. title: '平均千次展示花费(¥)',
  307. dataIndex: 'impression1kCost',
  308. align: 'center',
  309. scopedSlots: { customRender: 'impression1kCost' }
  310. },
  311. {
  312. title: '平均点击花费',
  313. dataIndex: 'photoClickCost',
  314. align: 'center',
  315. scopedSlots: { customRender: 'photoClickCost' }
  316. },
  317. {
  318. title: '转化数',
  319. dataIndex: 'conversions',
  320. align: 'center'
  321. },
  322. {
  323. title: '转化单价(¥)',
  324. dataIndex: 'conversionPrice',
  325. align: 'center',
  326. scopedSlots: { customRender: 'conversionPrice' }
  327. },
  328. {
  329. title: '转化率',
  330. dataIndex: 'conversionRate',
  331. align: 'center',
  332. scopedSlots: { customRender: 'conversionRate' }
  333. },
  334. {
  335. title: '折后转化成本(¥)',
  336. dataIndex: 'discountConversionPrice',
  337. align: 'center',
  338. scopedSlots: { customRender: 'discountConversionPrice' }
  339. },
  340. {
  341. title: '点击转化率',
  342. dataIndex: 'clickConversionRate',
  343. align: 'center',
  344. scopedSlots: { customRender: 'clickConversionRate' }
  345. }
  346. ]
  347. export default {
  348. name: 'data-display-statistics',
  349. components: {
  350. ACol,
  351. ARow,
  352. countTo,
  353. lifting,
  354. timeCheck,
  355. Treeselect
  356. },
  357. mixins: [JeecgListMixin],
  358. data: function() {
  359. return {
  360. title: '账户数据展示',
  361. show: true,
  362. data: [],
  363. dataAll: null,
  364. columns: columns,
  365. options: [],
  366. list: [],
  367. appId: [],
  368. tabListNoTitle: [
  369. {
  370. key: 'day',
  371. tab: '分日数据'
  372. },
  373. {
  374. key: 'group',
  375. tab: '分组数据'
  376. }
  377. ],
  378. noTitleKey: 'day',
  379. discount: 1,
  380. date: '',
  381. loading: false
  382. }
  383. },
  384. filters: {
  385. formatDate: function(value) {
  386. let date = new Date(value)
  387. let y = date.getFullYear()
  388. let MM = date.getMonth() + 1
  389. MM = MM < 10 ? '0' + MM : MM
  390. let d = date.getDate()
  391. d = d < 10 ? '0' + d : d
  392. let h = date.getHours()
  393. h = h < 10 ? '0' + h : h
  394. let m = date.getMinutes()
  395. m = m < 10 ? '0' + m : m
  396. let s = date.getSeconds()
  397. s = s < 10 ? '0' + s : s
  398. return y + '-' + MM + '-' + d
  399. },
  400. toFixtwo: function(value) {
  401. if (value) {
  402. return value.toFixed(2)
  403. } else {
  404. return 0.0
  405. }
  406. },
  407. getBo: function(value) {
  408. if (value) {
  409. return (value * 100).toFixed(2) + '%'
  410. } else {
  411. return '0.00%'
  412. }
  413. }
  414. },
  415. methods: {
  416. moment,
  417. onTabChange(key, type) {
  418. console.log(key, type)
  419. this[type] = key
  420. this.data = []
  421. if (key == 'day') {
  422. this.columns = columns
  423. this.data.push({ ...this.dataAll.dailyAccountReport, key: 1 })
  424. } else {
  425. this.columns = columnsGroup
  426. this.data = this.dataAll.dailyGroupReport.map((item, index) => {
  427. return {
  428. ...item,
  429. key: index
  430. }
  431. })
  432. }
  433. this.ipagination.total = this.data.length
  434. this.ipagination.current = 1
  435. },
  436. disabledDate(current) {
  437. return current && current > moment().subtract(1, 'day')
  438. },
  439. getDataReset() {
  440. this.addUser()
  441. },
  442. addUser() {
  443. var that = this
  444. if (this.appId.length > 0 && this.date != '') {
  445. that.getDailyReport()
  446. } else {
  447. this.$message.error('请选择账户及时间')
  448. }
  449. },
  450. getDailyReport() {
  451. var params = {}
  452. params.accountIds = JSON.stringify(this.appId)
  453. params.date = this.date
  454. params.discount = this.discount
  455. this.data = []
  456. this.loading = true
  457. getDailyReport(params).then(res => {
  458. if (res.success) {
  459. this.loading = false
  460. this.dataAll = res.result
  461. if (this.noTitleKey == 'day') {
  462. this.data.push({ ...res.result.dailyAccountReport, key: 1 })
  463. } else {
  464. this.data = res.result.dailyGroupReport.map((item, index) => {
  465. return {
  466. ...item,
  467. key: index
  468. }
  469. })
  470. }
  471. this.ipagination.total = this.data.length
  472. }
  473. })
  474. },
  475. getDate(value) {
  476. if (value) {
  477. let date = new Date(value)
  478. let y = date.getFullYear()
  479. let MM = date.getMonth() + 1
  480. MM = MM < 10 ? '0' + MM : MM
  481. let d = date.getDate()
  482. d = d < 10 ? '0' + d : d
  483. this.date = y + '-' + MM + '-' + d
  484. } else {
  485. let date = new Date()
  486. let y = date.getFullYear()
  487. let MM = date.getMonth() + 1
  488. MM = MM < 10 ? '0' + MM : MM
  489. let d = date.getDate()
  490. d = d < 10 ? '0' + d : d
  491. this.date = y + '-' + MM + '-' + d
  492. }
  493. },
  494. exportExcel() {
  495. var params = {}
  496. params.accountIds = JSON.stringify(this.appId)
  497. params.date = this.date
  498. params.discount = this.discount
  499. downFilePost('/ctop/daily/exportDailyReport', params).then(res => {
  500. let blob = new Blob([res], {
  501. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  502. })
  503. let downloadElement = document.createElement('a')
  504. let href = window.URL.createObjectURL(blob) //创建下载的链接
  505. downloadElement.href = href
  506. downloadElement.download = this.date + '-日报' //下载后文件名
  507. document.body.appendChild(downloadElement)
  508. downloadElement.click() //点击下载
  509. document.body.removeChild(downloadElement) //下载完成移除元素
  510. window.URL.revokeObjectURL(href) //释放掉blob对象
  511. })
  512. }
  513. },
  514. watch: {},
  515. distoryed() {},
  516. mounted: function() {
  517. this.$nextTick(() => {})
  518. }
  519. }
  520. </script>