mediaReport.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751
  1. <template>
  2. <div class="mediaReport">
  3. <div class="mediaReport_header">
  4. <div class="option-top">
  5. <span class="item">
  6. <span class="title">
  7. 公司
  8. <a-tooltip class="tipinfo">
  9. <template slot="title">
  10. 不选时,默认查询全部公司(包括渠道)。
  11. </template>
  12. <a-icon type="question-circle" />
  13. </a-tooltip>
  14. </span>
  15. <span>:</span>
  16. <a-select placeholder="请选择公司" style="width: 120px" v-model="company">
  17. <a-select-option value="">全部</a-select-option>
  18. <a-select-option v-for="item in companyArr" :key="item.companyId" :value='item.companyId'>
  19. {{item.area}}
  20. </a-select-option>
  21. </a-select>
  22. </span>
  23. <span class="item">
  24. <span class="title">
  25. 广告主
  26. <a-tooltip class="tipinfo">
  27. <template slot="title">
  28. 不选时,默认查询全部广告主。不选择公司时,不可选择广告主。
  29. </template>
  30. <a-icon type="question-circle" />
  31. </a-tooltip>
  32. </span>
  33. <span>:</span>
  34. <!-- @focus="handleFocus" @blur="handleBlur" @change="advertisersChange" -->
  35. <a-select show-search placeholder='请选择或搜索广告主' option-filter-prop="children" style="width: 300px"
  36. :filter-option="filterOption" v-model="advertiser" @change="advertisersChange">
  37. <a-select-option value="">全部</a-select-option>
  38. <a-select-option v-for="item in advertisersArr" :key="item.id" :value='item.id'>
  39. {{item.name}}
  40. </a-select-option>
  41. </a-select>
  42. </span>
  43. <span class="item">
  44. <span class="title">
  45. 产品
  46. <a-tooltip class="tipinfo">
  47. <template slot="title">
  48. 不选时,默认查询全部产品
  49. </template>
  50. <a-icon type="question-circle" />
  51. </a-tooltip>
  52. </span>
  53. <span>:</span>
  54. <a-select show-search option-filter-prop="children" :filter-option="filterOption" @focus="handleFocus"
  55. @blur="handleBlur" placeholder='请选择或搜索产品' style="width: 200px" @change="projectChange" v-model="project">
  56. <a-select-option value="">全部</a-select-option>
  57. <a-select-option v-for="item in projectArr" :key="item.id" :value='item.id'>
  58. {{item.productName}}
  59. </a-select-option>
  60. </a-select>
  61. </span>
  62. </div>
  63. <div class="option-bot">
  64. <!-- <span class="item">
  65. <span class="title">
  66. 媒体
  67. <a-tooltip class="tipinfo">
  68. <template slot="title">
  69. 不选时,默认查询全部媒体。
  70. </template>
  71. <a-icon type="question-circle" />
  72. </a-tooltip>
  73. </span>
  74. <span>:</span>
  75. <a-select placeholder="请选择媒体" style="width: 120px" v-model="mediaType">
  76. <a-select-option value="">全部</a-select-option>
  77. <a-select-option :value='1'>头条</a-select-option>
  78. <a-select-option :value='2'>快手</a-select-option>
  79. <a-select-option :value='3'>头条内广</a-select-option>
  80. <a-select-option :value='4'>快手内广</a-select-option>
  81. </a-select>
  82. </span> -->
  83. <span class="item">
  84. <span class="title">
  85. 日期
  86. <a-tooltip class="tipinfo">
  87. <template slot="title">
  88. 将以选择的日期为准,消耗差值=当天-前一天;
  89. </template>
  90. <a-icon type="question-circle" />
  91. </a-tooltip>
  92. </span>
  93. <span>:</span>
  94. <a-date-picker @change="onChange" v-model="dateValue" :allowClear="false" placeholder='请选择日期'
  95. :disabled-date="disabledDate" />
  96. </span>
  97. </div>
  98. <a-button type='primary' class="option-btn" @click="searchHandle">搜索</a-button>
  99. </div>
  100. <div class="tableBox">
  101. <a-card style="width:100%" :tab-list="tabListNoTitle" :active-tab-key="noTitleKey"
  102. @tabChange="key => onTabChange(key, 'noTitleKey')">
  103. <div class="tableBody">
  104. <a-table size="middle" :columns="columns" :dataSource="tableData" bordered id="tableBody"
  105. :pagination="ipagination" :loading="loading" @change="tableChange"
  106. style="word-break: break-all;font-size:16px;font-weight:600">
  107. <span slot="mediaType" slot-scope="text">
  108. <span v-if="text==1">头条</span>
  109. <span v-if="text==2">快手</span>
  110. <span v-if="text==3">头条内广</span>
  111. <span v-if="text==4">快手内广</span>
  112. <span v-if="text=='-'">-</span>
  113. </span>
  114. <!-- <span slot="yesterdayCost" slot-scope="yesterdayCost,record">
  115. <span v-if="record.mediaType == 1">{{yesterdayCost | decimalsHandle}}</span>
  116. <span v-else>{{yesterdayCost | decimalsHandleThree}}</span>
  117. </span>
  118. <span slot="todayCost" slot-scope="todayCost,record">
  119. <span v-if="record.mediaType == 1">{{todayCost | decimalsHandle}}</span>
  120. <span v-else>{{todayCost | decimalsHandleThree}}</span>
  121. </span>
  122. <span slot="diffCost" slot-scope="diffCost,record">
  123. <span v-if="record.mediaType == 1">{{diffCost | decimalsHandle}}</span>
  124. <span v-else>{{diffCost | decimalsHandleThree}}</span>
  125. </span> -->
  126. <span slot="operatorManger" slot-scope="operatorManger">{{ operatorManger | blankHandle}}</span>
  127. <span slot="operator" slot-scope="operator">{{ operator | blankHandle}}</span>
  128. <span slot="sale" slot-scope="sale">{{ sale | blankHandle}}</span>
  129. <span slot="plan" slot-scope="plan">{{ plan | blankHandle}}</span>
  130. <span slot="shot" slot-scope="shot">{{ shot | blankHandle}}</span>
  131. <span slot="clip" slot-scope="clip">{{ clip | blankHandle}}</span>
  132. </a-table>
  133. </div>
  134. <!-- <a slot="tabBarExtraContent" href="#">More</a> -->
  135. <a-button slot="tabBarExtraContent" type='primary' class="export" @click="exportExcel">导出报表</a-button>
  136. </a-card>
  137. <!-- <div class="tableOption">
  138. </div> -->
  139. </div>
  140. </div>
  141. </template>
  142. <script>
  143. import moment from 'moment';
  144. import {
  145. getAction,
  146. postAction,
  147. downFile,
  148. downFilePost
  149. } from '@/api/manage';
  150. import {
  151. JeecgListMixin
  152. } from '@/mixins/ipagination'
  153. export default {
  154. mixins: [JeecgListMixin],
  155. data() {
  156. return {
  157. moment,
  158. tabListNoTitle: [{
  159. key: '1',
  160. tab: '头条',
  161. },
  162. {
  163. key: '2',
  164. tab: '快手',
  165. }
  166. ],
  167. noTitleKey: '1',
  168. company: undefined, //公司的默认值
  169. mediaType: '1', // 媒体类型
  170. advertiser: undefined, //广告主
  171. project: undefined, //项目
  172. dateValue: moment(), //
  173. advertisersArr: [], //广告主数组
  174. projectArr: [], //项目数组
  175. companyArr: [], //公司数组
  176. mediaTypeArr: [],
  177. tableData: [],
  178. loading: false,
  179. dateString1: moment().subtract(1, 'days').format('YYYY-MM-DD'),
  180. dateString2: moment().format('YYYY-MM-DD'),
  181. columns: [{
  182. title: '媒体',
  183. dataIndex: 'mediaType',
  184. align: 'center',
  185. scopedSlots: {
  186. customRender: 'mediaType'
  187. },
  188. width: 50
  189. },
  190. {
  191. title: '广告主',
  192. dataIndex: 'advertiserName',
  193. align: 'center',
  194. scopedSlots: {
  195. customRender: 'advertiserName'
  196. }
  197. },
  198. {
  199. title: '产品',
  200. dataIndex: 'productName',
  201. align: 'center',
  202. scopedSlots: {
  203. customRender: 'productName'
  204. },
  205. width: 80
  206. },
  207. {
  208. title: moment().subtract(1, 'days').format('YYYY-MM-DD'),
  209. dataIndex: 'yesterdayCost',
  210. align: 'center',
  211. scopedSlots: {
  212. customRender: 'yesterdayCost'
  213. }
  214. },
  215. {
  216. title: moment().format('YYYY-MM-DD'),
  217. dataIndex: 'todayCost',
  218. align: 'center',
  219. scopedSlots: {
  220. customRender: 'todayCost'
  221. }
  222. },
  223. {
  224. title: '消耗差值',
  225. dataIndex: 'diffCost',
  226. align: 'center',
  227. scopedSlots: {
  228. customRender: 'diffCost'
  229. }
  230. },
  231. {
  232. title: '公司',
  233. dataIndex: 'companyName',
  234. align: 'center',
  235. scopedSlots: {
  236. customRender: 'companyName'
  237. },
  238. width: 200
  239. },
  240. {
  241. title: '运营',
  242. dataIndex: 'operator',
  243. align: 'center',
  244. scopedSlots: {
  245. customRender: 'operator'
  246. },
  247. width: 120
  248. },
  249. {
  250. title: '销售',
  251. dataIndex: 'sale',
  252. align: 'center',
  253. scopedSlots: {
  254. customRender: 'sale'
  255. },
  256. width: 80
  257. },
  258. // {
  259. // title: '策划',
  260. // dataIndex: 'plan',
  261. // align: 'center',
  262. // scopedSlots: { customRender: 'plan' },
  263. // width:120
  264. // },
  265. // {
  266. // title: '拍摄',
  267. // dataIndex: 'shot',
  268. // align: 'center',
  269. // scopedSlots: { customRender: 'shot' },
  270. // width:120
  271. // },
  272. // {
  273. // title: '剪辑',
  274. // dataIndex: 'clip',
  275. // align: 'center',
  276. // scopedSlots: { customRender: 'clip' },
  277. // width:120
  278. // },
  279. ]
  280. }
  281. },
  282. methods: {
  283. onTabChange(key, type) {
  284. console.log(key, type);
  285. this[type] = key;
  286. this.mediaType = key
  287. this.ipagination.current = 1
  288. this.searchHandle()
  289. this.project = undefined;
  290. this.getPruduct()
  291. },
  292. companyChange(value) {
  293. if (this.company == '' || this.company == undefined) {
  294. this.advertisersArr = [];
  295. this.projectArr = [];
  296. this.advertiser = undefined;
  297. this.project = undefined;
  298. } else {
  299. //网络请求获取广告主数据
  300. this.advertisersArr = [];
  301. this.projectArr = [];
  302. this.advertiser = undefined;
  303. this.project = undefined;
  304. getAction('/ctop/product/advertiserList').then(res => {
  305. if (res.success) {
  306. console.log(res)
  307. this.advertisersArr = res.result
  308. }
  309. })
  310. }
  311. },
  312. //广告主改变
  313. advertisersChange(value) {
  314. console.log(`selected ${value}`);
  315. if (this.advertiser == '' || this.advertiser == undefined) {
  316. this.project = undefined;
  317. this.projectArr = [];
  318. this.getPruduct()
  319. } else {
  320. this.project = undefined;
  321. this.projectArr = [];
  322. this.getPruduct()
  323. }
  324. },
  325. projectChange(value) {
  326. console.log(`selected ${value}`);
  327. if (this.project == '') {
  328. // this.project=undefined
  329. }
  330. },
  331. //日期改变
  332. onChange(date, dateString) {
  333. // console.log(date, dateString,this.dateValue);
  334. let addCol = [{
  335. title: moment(date).subtract(1, 'days').format('YYYY-MM-DD'),
  336. dataIndex: 'yesterdayCost',
  337. align: 'center',
  338. scopedSlots: {
  339. customRender: 'accountId'
  340. }
  341. },
  342. {
  343. title: dateString,
  344. dataIndex: 'todayCost',
  345. align: 'center',
  346. scopedSlots: {
  347. customRender: 'accountId'
  348. }
  349. },
  350. ];
  351. this.columns.splice(3, 2, addCol[0], addCol[1]);
  352. this.searchHandle();
  353. },
  354. //搜索
  355. searchHandle() {
  356. let company = '';
  357. let advertiser = '';
  358. let project = '';
  359. let mediaType = ''
  360. if (this.company == undefined) {
  361. company = ''
  362. } else {
  363. company = this.company
  364. }
  365. if (this.advertiser == undefined) {
  366. advertiser = ''
  367. } else {
  368. advertiser = this.advertiser
  369. }
  370. if (this.project == undefined) {
  371. project = ''
  372. } else {
  373. project = this.project
  374. }
  375. if (this.mediaType == undefined) {
  376. mediaType = ''
  377. } else {
  378. mediaType = this.mediaType
  379. }
  380. this.tableHttp({
  381. companyId: company,
  382. advertiserId: advertiser,
  383. productId: project,
  384. mediaType,
  385. todayDate: this.dateValue.format('YYYY-MM-DD'),
  386. yesterdayDate: moment(this.dateValue).subtract(1, "days").format('YYYY-MM-DD'),
  387. })
  388. },
  389. //table的改变(页码改变请求数据,也可以写排序)
  390. tableChange(pagination, filters, sorter, {
  391. currentDataSource
  392. }) {
  393. this.searchHandle();
  394. },
  395. //table的网络请求
  396. tableHttp(params) {
  397. this.loading = true;
  398. this.tableData = []
  399. postAction(`/ctop/media/report/mediaReport/${this.ipagination.current}/${this.ipagination.pageSize}`, params)
  400. .then(res => {
  401. if (res.success) {
  402. // console.log(res)
  403. this.loading = false;
  404. this.ipagination.total = res.result.total
  405. if (res.success) {
  406. res.result.list.map((item, index) => {
  407. item.key = index
  408. })
  409. this.tableData = res.result.list
  410. }
  411. }
  412. })
  413. },
  414. //导出报表
  415. exportExcel() {
  416. let company = '';
  417. let advertiser = '';
  418. let project = '';
  419. let mediaType = ''
  420. if (this.company == undefined) {
  421. company = ''
  422. } else {
  423. company = this.company
  424. }
  425. if (this.advertiser == undefined) {
  426. advertiser = ''
  427. } else {
  428. advertiser = this.advertiser
  429. }
  430. if (this.project == undefined) {
  431. project = ''
  432. } else {
  433. project = this.project
  434. }
  435. if (this.mediaType == undefined) {
  436. mediaType = ''
  437. } else {
  438. mediaType = this.mediaType
  439. }
  440. downFilePost('/ctop/media/report/exportMediaReportExcel', {
  441. // companyId: company,
  442. // advertiserId: advertiser,
  443. // projectId: project,
  444. mediaType,
  445. todayDate: this.dateValue.format('YYYY-MM-DD'),
  446. // yesterdayDate: moment(this.dateValue).subtract(1, "days").format('YYYY-MM-DD'),
  447. }).then(res => {
  448. let blob = new Blob([res], {
  449. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  450. })
  451. let downloadElement = document.createElement('a')
  452. let href = window.URL.createObjectURL(blob) //创建下载的链接
  453. downloadElement.href = href
  454. downloadElement.download = moment().format('YYYY-MM-DD') + '媒介报表.xlsx' //下载后文件名
  455. document.body.appendChild(downloadElement)
  456. downloadElement.click() //点击下载
  457. document.body.removeChild(downloadElement) //下载完成移除元素
  458. window.URL.revokeObjectURL(href) //释放掉blob对象
  459. })
  460. },
  461. handleBlur() {
  462. // console.log('blur');
  463. },
  464. handleFocus() {
  465. // console.log('focus');
  466. },
  467. filterOption(input, option) {
  468. return (
  469. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  470. );
  471. },
  472. disabledDate(current) {
  473. // console.log(current)
  474. return current && current > moment()
  475. },
  476. getPruduct() {
  477. postAction('/ctop/media/report/getAllProductList', {
  478. "mediaType": this.noTitleKey,
  479. advertiserId: this.advertiser==""?null:this.advertiser
  480. }).then(res => {
  481. if (res.success) {
  482. console.log(res)
  483. this.projectArr = res.result
  484. }
  485. })
  486. }
  487. },
  488. mounted() {
  489. getAction('/ctop/media/report/getCompany', {}).then(res => {
  490. if (res.success) {
  491. this.companyArr = res.result
  492. }
  493. });
  494. getAction('/ctop/product/advertiserList').then(res => {
  495. if (res.success) {
  496. console.log(res)
  497. this.advertisersArr = res.result
  498. }
  499. })
  500. this.getPruduct()
  501. this.tableHttp({
  502. companyId: '',
  503. advertiserId: '',
  504. productId: '',
  505. mediaType: '1',
  506. todayDate: this.dateValue.format('YYYY-MM-DD'),
  507. yesterdayDate: moment(this.dateValue).subtract(1, 'days').format('YYYY-MM-DD'),
  508. })
  509. },
  510. filters: {
  511. toPercentage(val) {
  512. if (val) {
  513. if (typeof val != 'string') {
  514. return (val * 100).toFixed(2) + '%'
  515. } else {
  516. return val
  517. }
  518. } else if (typeof val == 'string') {
  519. return val
  520. } else {
  521. return 0
  522. }
  523. },
  524. //保留两位小数并且变成货币格式
  525. decimalsHandle(val) {
  526. if (val && typeof val != 'string') {
  527. if (val >= 0) {
  528. val = parseFloat(val).toFixed(2);
  529. let numberStr = val.toString()
  530. let str = numberStr.split('.')
  531. let str0 = str[0].split('').reverse();
  532. for (let i = 0; i < str0.length; i++) {
  533. if ((i + 1) % 4 === 0) {
  534. str0.splice(i, 0, ',')
  535. }
  536. }
  537. str0.reverse()
  538. let handleResult = ''
  539. for (let j = 0; j < str0.length; j++) {
  540. handleResult += str0[j]
  541. }
  542. return handleResult + '.' + str[1]
  543. } else {
  544. val = parseFloat(val).toFixed(2);
  545. let numberStr = val.toString()
  546. let str = numberStr.split('.')
  547. let str0 = str[0].substr(1).split('').reverse();
  548. for (let i = 0; i < str0.length; i++) {
  549. if ((i + 1) % 4 === 0) {
  550. str0.splice(i, 0, ',')
  551. }
  552. }
  553. str0.reverse()
  554. let handleResult = ''
  555. for (let j = 0; j < str0.length; j++) {
  556. handleResult += str0[j]
  557. }
  558. return '-' + handleResult + '.' + str[1]
  559. }
  560. } else if (typeof val == 'string') {
  561. return val
  562. } else {
  563. return 0
  564. }
  565. },
  566. //保留两位小数并且变成货币格式
  567. decimalsHandleThree(val) {
  568. if (val && typeof val != 'string') {
  569. if (val >= 0) {
  570. val = parseFloat(val).toFixed(3);
  571. let numberStr = val.toString()
  572. let str = numberStr.split('.')
  573. let str0 = str[0].split('').reverse();
  574. for (let i = 0; i < str0.length; i++) {
  575. if ((i + 1) % 4 === 0) {
  576. str0.splice(i, 0, ',')
  577. }
  578. }
  579. str0.reverse()
  580. let handleResult = ''
  581. for (let j = 0; j < str0.length; j++) {
  582. handleResult += str0[j]
  583. }
  584. return handleResult + '.' + str[1]
  585. } else {
  586. val = parseFloat(val).toFixed(3);
  587. let numberStr = val.toString()
  588. let str = numberStr.split('.')
  589. let str0 = str[0].substr(1).split('').reverse();
  590. for (let i = 0; i < str0.length; i++) {
  591. if ((i + 1) % 4 === 0) {
  592. str0.splice(i, 0, ',')
  593. }
  594. }
  595. str0.reverse()
  596. let handleResult = ''
  597. for (let j = 0; j < str0.length; j++) {
  598. handleResult += str0[j]
  599. }
  600. return '-' + handleResult + '.' + str[1]
  601. }
  602. } else if (typeof val == 'string') {
  603. return val
  604. } else {
  605. return 0
  606. }
  607. },
  608. //变成货币格式
  609. formatCurrency(val) {
  610. if ((val || val == 0) && typeof val != 'string') {
  611. let numberStr = val.toString()
  612. let str = numberStr.split('').reverse()
  613. for (let i = 0; i < str.length; i++) {
  614. if ((i + 1) % 4 === 0) {
  615. str.splice(i, 0, ',')
  616. }
  617. }
  618. str.reverse()
  619. let handleResult = ''
  620. for (let j = 0; j < str.length; j++) {
  621. handleResult += str[j]
  622. }
  623. return handleResult
  624. } else if (typeof val == 'string') {
  625. return val
  626. } else {
  627. return '-'
  628. }
  629. },
  630. //处理空白为 --
  631. blankHandle(val) {
  632. if (val) {
  633. return val
  634. } else {
  635. return '-'
  636. }
  637. }
  638. }
  639. }
  640. </script>
  641. <style lang="scss" scoped>
  642. .mediaReport {
  643. padding: 0 10px;
  644. .mediaReport_header {
  645. padding: 15px 10px;
  646. background: #fff;
  647. position: relative;
  648. .option-top,
  649. .option-bot {
  650. .item {
  651. margin-right: 20px;
  652. display: inline-block;
  653. .title {
  654. display: inline-block;
  655. position: relative;
  656. padding-right: 15px;
  657. margin-right: 5px;
  658. }
  659. .tipinfo {
  660. position: absolute;
  661. font-size: 12px;
  662. right: 0px;
  663. top: 0;
  664. }
  665. }
  666. }
  667. .option-top {
  668. margin-bottom: 15px;
  669. }
  670. .option-btn {
  671. position: absolute;
  672. top: 15px;
  673. right: 10px;
  674. }
  675. }
  676. .mediaReport_header:hover {
  677. border-radius: 5px;
  678. box-shadow: 0 0 15px rgba(0, 0, 0, .2);
  679. }
  680. .tableBox {
  681. margin-top: 30px;
  682. background: #fff;
  683. padding: 10px 10px;
  684. .tableOption {
  685. margin-bottom: 10px;
  686. text-align: right;
  687. }
  688. }
  689. }
  690. </style>
  691. <style lang="scss">
  692. .ant-tooltip-inner,
  693. .ant-tooltip,
  694. .ant-tooltip-arrow::before {
  695. background-color: #fff;
  696. color: #666;
  697. font-size: 12px;
  698. }
  699. </style>