marterialList.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758
  1. <style>
  2. .materialReport .chart-card-content {
  3. display: none !important;
  4. }
  5. </style>
  6. <style scoped>
  7. .top-ul-style {
  8. width: 100%;
  9. padding-left: 0;
  10. }
  11. .top-ul-style li {
  12. height: 100px;
  13. border: 1px solid #f2f2f2;
  14. margin-bottom: 5px;
  15. padding: 10px;
  16. display: flex;
  17. justify-content: space-between;
  18. }
  19. .li-cost {
  20. display: flex;
  21. flex-flow: column;
  22. justify-content: center;
  23. align-content: flex-end;
  24. }
  25. .li-cost span {
  26. font-size: 16px;
  27. font-weight: 500;
  28. min-width: 50px;
  29. text-align: right;
  30. }
  31. </style>
  32. <template>
  33. <div class="materialReport">
  34. <div class="card-container">
  35. <div class="option" style="justify-content: space-between">
  36. <div class="option" style="padding: 0">
  37. <div class="item">
  38. <span>唯一编码</span>
  39. <a-input style="width: 300px" v-model="md5"></a-input>
  40. </div>
  41. </div>
  42. <div class="item" style="float: right">
  43. <a-button @click="handleSubmit" type="primary" :loading="videoloading">搜索</a-button>
  44. <a-button @click="resetSubmit" style="margin-left: 15px" :loading="resetLoading">重置</a-button>
  45. </div>
  46. </div>
  47. </div>
  48. <a-row :gutter="24" style="margin-top: 20px">
  49. <a-col :xl="24">
  50. <a-card title="数据列表" style="width: 100%; min-height: 700px" :bordered="false">
  51. <div class="tableTop" style="text-align: end; margin: 0 0 15px 0">
  52. <a-button
  53. type="primary"
  54. class="export"
  55. @click="exportExcel"
  56. style="margin-right: 10px"
  57. :loading="excelLoading"
  58. >导出报表</a-button
  59. >
  60. <a-button type="primary" class="add" @click="customColumns">自定义列</a-button>
  61. </div>
  62. <a-table
  63. size="middle"
  64. :columns="columns"
  65. :dataSource="tableData"
  66. bordered
  67. id="outTable"
  68. :pagination="ipagination"
  69. :scroll="{ x: scrollX }"
  70. :loading="loading"
  71. ref="accountTable"
  72. :customRow="rowClick"
  73. :width="tableWidth"
  74. @change="sort"
  75. style="word-break: break-all; font-size: 16px; font-weight: 600"
  76. >
  77. <span slot="coverUrl" slot-scope="text, records">
  78. <img
  79. :src="text || noImg"
  80. alt=""
  81. style="width: 100%; height: auto"
  82. @click.stop="
  83. visibleVideo = true
  84. videoUrlShow = records.url
  85. "
  86. />
  87. </span>
  88. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  89. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  90. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  91. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  92. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  93. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  94. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  95. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  96. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
  97. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  98. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  99. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  100. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  101. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  102. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  103. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  104. <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
  105. <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
  106. <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
  107. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  108. <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
  109. <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
  110. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  111. <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
  112. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  113. <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
  114. eventCreditGrantLandingPage | formatCurrency
  115. }}</span>
  116. <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
  117. <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
  118. eventCreditGrantLandingPageCost | decimalsHandle
  119. }}</span>
  120. <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
  121. <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
  122. eventCreditGrantLandingPageRate | toPercentage
  123. }}</span>
  124. <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
  125. play25FeedBreakRate | toPercentage
  126. }}</span>
  127. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  128. <!-- 新加数据 -->
  129. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  130. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  131. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  132. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  133. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  134. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  135. <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
  136. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  137. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  138. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  139. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  140. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  141. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  142. <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
  143. gameAddictionCost | decimalsHandle
  144. }}</span>
  145. <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
  146. downloadFinishCost | decimalsHandle
  147. }}</span>
  148. <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
  149. downloadStartCost | decimalsHandle
  150. }}</span>
  151. <span slot="installFinishCost" slot-scope="installFinishCost">{{
  152. installFinishCost | decimalsHandle
  153. }}</span>
  154. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  155. <!-- -->
  156. <span slot="downloadStartRate" slot-scope="downloadStartRate">{{ downloadStartRate | toPercentage }}</span>
  157. <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
  158. downloadFinishRate | toPercentage
  159. }}</span>
  160. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  161. <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
  162. activeRegisterRate | toPercentage
  163. }}</span>
  164. <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{ gameAddictionRate | toPercentage }}</span>
  165. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  166. <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
  167. </a-table>
  168. </a-card>
  169. </a-col>
  170. </a-row>
  171. <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
  172. <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
  173. 您的浏览器不支持 video 标签。
  174. </video>
  175. </a-modal>
  176. <customColumn
  177. :visible="visible"
  178. :listNum="listNum"
  179. :fiexColumn="columnsFixd"
  180. :mediaType="2"
  181. @closeCustomColumn="closeCustomColumn"
  182. @changeColumn="changeColumn"
  183. />
  184. </div>
  185. </template>
  186. <script>
  187. import moment from 'moment'
  188. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  189. import YoutTable from '@/components/youtTable/YoutTable'
  190. import ChartCard from '@/components/ChartCard'
  191. import Trend from '@/components/Trend'
  192. import { mapGetters } from 'vuex'
  193. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  194. import customColumn from '../components/customColumn.vue'
  195. var echarts = require('echarts')
  196. const columnsFixd = [
  197. {
  198. title: '素材',
  199. dataIndex: 'coverUrl',
  200. scopedSlots: { customRender: 'coverUrl' },
  201. align: 'center',
  202. key: 'date',
  203. width: 100,
  204. fixed: 'left',
  205. },
  206. {
  207. title: '唯一编码',
  208. dataIndex: 'signature',
  209. align: 'center',
  210. width: 100,
  211. fixed: 'left',
  212. },
  213. {
  214. title: '素材名称',
  215. dataIndex: 'materialName',
  216. align: 'center',
  217. width: 100,
  218. fixed: 'left',
  219. customRender: function (text) {
  220. if (text) {
  221. return text
  222. } else {
  223. return '-'
  224. }
  225. },
  226. },
  227. {
  228. title: '所属项目',
  229. dataIndex: 'projectName',
  230. align: 'center',
  231. width: 100,
  232. fixed: 'left',
  233. },
  234. ]
  235. const initVariableColimns = [
  236. {
  237. title: '消耗(元)',
  238. dataIndex: 'cost',
  239. width: 150,
  240. tip: '广告在投放期间的花费总额',
  241. align: 'center',
  242. scopedSlots: { customRender: 'cost' },
  243. sorter: () => {},
  244. },
  245. // {
  246. // title: '折后消耗(元)',
  247. // dataIndex: 'discountCost',
  248. // width:150,
  249. // tip: '广告在投放期间的花费总额',
  250. // align: 'center',
  251. // scopedSlots: { customRender: 'discountCost' },
  252. // sorter: () => {}
  253. // },
  254. {
  255. title: '封面曝光数',
  256. dataIndex: 'photoShow',
  257. tip: '广告在瀑布流被观看次数',
  258. align: 'center',
  259. scopedSlots: { customRender: 'photoShow' },
  260. sorter: () => {},
  261. },
  262. {
  263. title: '封面点击数',
  264. dataIndex: 'photoClick',
  265. tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
  266. align: 'center',
  267. scopedSlots: { customRender: 'photoClick' },
  268. sorter: () => {},
  269. },
  270. {
  271. title: '封面点击率',
  272. dataIndex: 'clickRate',
  273. tip: '封面点击数占封面展示数百分比',
  274. align: 'center',
  275. scopedSlots: { customRender: 'clickRate' },
  276. sorter: () => {},
  277. },
  278. {
  279. title: '素材曝光数',
  280. dataIndex: 'aClick',
  281. tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
  282. align: 'center',
  283. scopedSlots: { customRender: 'aClick' },
  284. sorter: () => {},
  285. },
  286. {
  287. title: '行为数',
  288. dataIndex: 'bClick',
  289. tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
  290. align: 'center',
  291. scopedSlots: { customRender: 'bClick' },
  292. sorter: () => {},
  293. },
  294. {
  295. title: '行为率',
  296. dataIndex: 'bClickRate',
  297. tip: '行为数占素材曝光数百分比',
  298. align: 'center',
  299. scopedSlots: { customRender: 'bClickRate' },
  300. sorter: () => {},
  301. },
  302. {
  303. title: '平均千次封面曝光花费(元)',
  304. dataIndex: 'cpm',
  305. tip: '花费/封面曝光数*1000',
  306. align: 'center',
  307. scopedSlots: { customRender: 'cpm' },
  308. sorter: () => {},
  309. },
  310. {
  311. title: '平均封面点击单价(元)',
  312. dataIndex: 'cpc',
  313. tip: '花费/封面点击数',
  314. align: 'center',
  315. scopedSlots: { customRender: 'cpc' },
  316. sorter: () => {},
  317. },
  318. {
  319. title: '平均行为单价(元)',
  320. dataIndex: 'cpb',
  321. tip: '总花费/行为数',
  322. align: 'center',
  323. scopedSlots: { customRender: 'cpb' },
  324. sorter: () => {},
  325. },
  326. ]
  327. export default {
  328. components: {
  329. YoutTable,
  330. ChartCard,
  331. Trend,
  332. customColumn,
  333. },
  334. data() {
  335. return {
  336. excelLoading: false,
  337. tableData: [],
  338. designTopLoading: false,
  339. noImg: require('@/assets/noImg.png'),
  340. visibleVideo: false,
  341. videoUrlShow: '',
  342. cost: '0',
  343. costLink: 0,
  344. videoTotal: '0',
  345. newVideo: 0,
  346. hotTotal: '0',
  347. xiaoTotal: '0',
  348. spinning: false,
  349. loading: false,
  350. chartList: [],
  351. videoList: [],
  352. designTopList: [],
  353. columns: [...columnsFixd, ...initVariableColimns], //table的表头
  354. columnsFixd,
  355. ipagination: {
  356. current: 1,
  357. pageSize: 10,
  358. // pageSizeOptions: ['10', '20', '30'],
  359. showTotal: (total, range) => {
  360. return range[0] + '-' + range[1] + ' 共' + total + '条'
  361. },
  362. showQuickJumper: true,
  363. // showSizeChanger: true,
  364. // pageSizeOptions: ['10', '30', '50'],
  365. total: 0,
  366. onChange: (current, pageSize) => {
  367. // 切换分页时的回调,
  368. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  369. this.ipagination.current = current
  370. this.ipagination.pageSize = pageSize
  371. },
  372. },
  373. dateRanges: {
  374. 今天: [moment(), moment()],
  375. 昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  376. 近一周: [moment().subtract(7, 'days'), moment()],
  377. 近一月: [moment().subtract(1, 'months'), moment()],
  378. 近半年: [moment().subtract(6, 'months'), moment()],
  379. 近一年: [moment().subtract(12, 'months'), moment()],
  380. },
  381. dateValue: [moment().subtract(7, 'days'), moment()],
  382. dataDimension: 'a',
  383. mediaDimension: 'b',
  384. dataDimensionValue: [],
  385. dataDimensionList: [],
  386. specificLoading: false,
  387. order: null,
  388. target: null,
  389. materialData: null,
  390. md5: '',
  391. visible: false,
  392. listNum: [],
  393. scrollX: 1500,
  394. tableWidth: '', //设置表格的列宽
  395. resetLoading: false,
  396. videoloading: false,
  397. }
  398. },
  399. watch: {
  400. visibleVideo(n, o) {
  401. if (!n) {
  402. stopOtherVideo()
  403. closeAllVideoFun()
  404. }
  405. },
  406. 'ipagination.current': function (n, o) {
  407. if (n != o) {
  408. this.getMoreVideoList({
  409. ...this.materialData,
  410. })
  411. }
  412. },
  413. },
  414. methods: {
  415. rowClick(record, index) {
  416. return {
  417. on: {
  418. click: (e) => {
  419. var params = { md5: record.signature, mediaId: 2 }
  420. localStorage.setItem('videoInfo', JSON.stringify(params))
  421. this.$router.push({
  422. path: '/materialReport/marterialDetail',
  423. })
  424. },
  425. },
  426. }
  427. },
  428. moment,
  429. closeCustomColumn() {
  430. this.visible = false
  431. },
  432. changeColumn(val) {
  433. this.columns = [...val]
  434. if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
  435. this.columns.forEach((element, index) => {
  436. if (index < this.columns.length - 1) {
  437. if (element.dataIndex == 'coverUrl') {
  438. element.width = 100
  439. element.fixed = false
  440. } else {
  441. element.width = 'auto'
  442. element.fixed = false
  443. }
  444. }
  445. })
  446. // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
  447. } else if (this.columns.length >= 8) {
  448. this.columns.forEach((element, index) => {
  449. if (index < this.columnsFixd.length) {
  450. element.width = 100
  451. element.fixed = 'left'
  452. }
  453. })
  454. this.scrollX = 1000 + 200 * (this.columns.length - this.columnsFixd.length)
  455. } else {
  456. this.scrollX = 0
  457. this.columns.forEach((element) => {
  458. console.log(element)
  459. if (element.dataIndex == 'coverUrl') {
  460. element.width = 100
  461. element.fixed = false
  462. } else {
  463. element.width = 'auto'
  464. element.fixed = false
  465. }
  466. })
  467. }
  468. let arr = JSON.stringify(this.columns)
  469. this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
  470. json: arr,
  471. columnType: 12,
  472. }).then((res) => {
  473. // console.log(res)
  474. })
  475. },
  476. customColumns() {
  477. this.visible = true
  478. this.listNum = [...this.columns]
  479. },
  480. ...mapGetters(['userInfo']),
  481. filterOption(input, option) {
  482. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  483. },
  484. sort(pagination, filters, sorter, { currentDataSource }) {
  485. // console.log(pagination, filters, sorter)
  486. this.ipagination.current = pagination.current
  487. this.ipagination.pageSize = pagination.pageSize
  488. if (sorter.order) {
  489. this.order = sorter.order ? sorter.order : 'descend'
  490. this.target = sorter.columnKey
  491. this.getMoreVideoList({
  492. ...this.materialData,
  493. target: sorter.columnKey,
  494. order: sorter.order ? sorter.order : 'descend',
  495. })
  496. } else {
  497. this.order = null
  498. this.target = null
  499. }
  500. },
  501. getData() {
  502. var data = { ...this.materialData, md5: this.md5 }
  503. this.getMoreVideoList(data)
  504. },
  505. getMoreVideoList(data) {
  506. this.loading = true
  507. var params = { ...data }
  508. params.channelType = null
  509. if (data.target) {
  510. params.target = data.target
  511. if (data.order == 'descend') {
  512. params.order = 'desc'
  513. } else {
  514. params.order = 'asc'
  515. }
  516. } else {
  517. params.target = this.target
  518. params.order = this.order == 'descend' ? 'desc' : this.order == null ? null : 'asc'
  519. }
  520. params.pageSize = this.ipagination.pageSize
  521. params.pageNo = this.ipagination.current
  522. this.postDataAction('/overView/materialTopViewMore', params).then((res) => {
  523. this.loading = false
  524. this.resetLoading = false
  525. this.videoloading = false
  526. if (res.success) {
  527. this.tableData = res.result.list
  528. this.ipagination.total = res.result.total
  529. }
  530. })
  531. },
  532. getDesignTopList(data) {
  533. this.designTopLoading = true
  534. return new Promise((resolve, reject) => {
  535. var params = {
  536. // startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  537. // endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  538. // userId: this.userInfo().id,
  539. // pageSize: this.ipagination.pageSize,
  540. // pageNo: this.ipagination.current,
  541. // target: 'cost',
  542. // order: 'desc',
  543. }
  544. params.startDate = this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
  545. params.endDate = this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
  546. params.userId = this.userInfo().id
  547. params.pageSize = this.ipagination.pageSize
  548. params.pageNo = this.ipagination.current
  549. if (data) {
  550. params.target = data.target
  551. if (data.order == 'descend') {
  552. params.order = 'desc'
  553. } else {
  554. params.order = 'asc'
  555. }
  556. } else {
  557. params.target = this.params.order = this.order == 'descend' ? 'desc' : 'asc'
  558. }
  559. this.postDataAction('/overView/designTop', params).then((res) => {
  560. this.designTopLoading = false
  561. if (res.success) {
  562. this.designTopList = res.result.list
  563. this.ipagination.total = res.result.total
  564. resolve(res.result)
  565. } else {
  566. reject(res.message)
  567. }
  568. })
  569. })
  570. },
  571. handleSubmit() {
  572. this.videoloading = true
  573. this.ipagination.current = 1
  574. this.getData()
  575. },
  576. resetSubmit() {
  577. this.ipagination.current = 1
  578. this.resetLoading = true
  579. this.md5 = ''
  580. this.getData()
  581. },
  582. //导出报表
  583. exportExcel() {
  584. this.excelLoading = true
  585. let column = this.columns.map((item, index) => {
  586. return item.dataIndex
  587. })
  588. let columns = column.splice(4)
  589. // "mediaId":"",
  590. // "projects":[],
  591. // "columns":"",
  592. // "startDate":"",
  593. // "endDate":"",
  594. // "channelType":"",
  595. // "md5":"",
  596. // "target":"",
  597. // "order":""
  598. downFilePost('/overView/excel', {
  599. ...this.materialData,
  600. columns,
  601. target: this.target,
  602. order: this.order == 'descend' ? 'desc' : 'asc',
  603. md5: this.md5,
  604. }).then((res) => {
  605. let blob = new Blob([res], {
  606. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  607. })
  608. let downloadElement = document.createElement('a')
  609. let href = window.URL.createObjectURL(blob) //创建下载的链接
  610. downloadElement.href = href
  611. downloadElement.download = this.materialData.startDate + '~' + this.materialData.endDate + '素材报表.xlsx' //下载后文件名
  612. document.body.appendChild(downloadElement)
  613. downloadElement.click() //点击下载
  614. document.body.removeChild(downloadElement) //下载完成移除元素
  615. window.URL.revokeObjectURL(href) //释放掉blob对象
  616. this.excelLoading = false
  617. })
  618. },
  619. tableChange(data) {
  620. console.log(data)
  621. },
  622. //获取echart的值
  623. initEchart(idName, optionName) {
  624. const chart = this.$refs[idName]
  625. // console.log(chart)
  626. if (chart) {
  627. const myChart = echarts.init(document.getElementById(idName))
  628. // myChart.showLoading({
  629. // text: "图表数据正在努力加载..."
  630. // });
  631. myChart.setOption(optionName)
  632. window.addEventListener('resize', function () {
  633. myChart.resize()
  634. })
  635. }
  636. },
  637. },
  638. mounted() {
  639. this.$nextTick(() => {
  640. this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
  641. columnType: 12,
  642. }).then((res) => {
  643. // console.log(res)
  644. if (res.success) {
  645. // console.log(JSON.parse(res.result))
  646. if (res.result) {
  647. let columns = JSON.parse(res.result)
  648. if (columns.length) {
  649. if (columns.length >= columnsFixd.length) {
  650. columns.map((item, index) => {
  651. if (index > columnsFixd.length - 1) {
  652. item.sorter = function (a, b) {}
  653. }
  654. })
  655. columns = columns.slice(columnsFixd.length)
  656. this.columns = [...columnsFixd, ...columns]
  657. // this.tableHandle()
  658. }
  659. // console.log(this.columns)
  660. }
  661. }
  662. this.changeColumn(this.columns)
  663. }
  664. })
  665. this.materialData = JSON.parse(localStorage.getItem('materialParams'))
  666. this.getMoreVideoList(this.materialData)
  667. })
  668. },
  669. }
  670. </script>
  671. <style lang="scss" scoped>
  672. .materialReport {
  673. .option {
  674. background: white;
  675. padding: 20px;
  676. display: flex;
  677. justify-content: flex-start;
  678. flex-wrap: wrap;
  679. .item {
  680. margin-right: 15px;
  681. margin-bottom: 15px;
  682. height: 32px;
  683. line-height: 32px;
  684. flex-shrink: 0;
  685. span {
  686. margin-right: 10px;
  687. }
  688. }
  689. }
  690. .echart {
  691. margin-top: 20px;
  692. padding: 0 20px 20px;
  693. background: white;
  694. .echart-header {
  695. padding: 20px 0;
  696. font-size: 15px;
  697. font-weight: 600;
  698. }
  699. }
  700. .tableBody {
  701. margin-top: 20px;
  702. }
  703. }
  704. </style>
  705. <style>
  706. .card-container {
  707. overflow: hidden;
  708. /* padding: 24px; */
  709. }
  710. .card-container > .ant-tabs-card > .ant-tabs-content {
  711. /* height: 120px; */
  712. margin-top: -16px;
  713. }
  714. .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  715. background: #fff;
  716. /* padding: 16px; */
  717. }
  718. .card-container > .ant-tabs-card > .ant-tabs-bar {
  719. border-color: #fff;
  720. }
  721. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  722. border-color: transparent;
  723. background: transparent !important;
  724. }
  725. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  726. border-color: #fff;
  727. background: #fff !important;
  728. }
  729. </style>