materialReport.vue 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141
  1. <style>
  2. .materialReport .chart-card-content {
  3. display: none !important;
  4. }
  5. </style>
  6. <style scoped>
  7. .bg {
  8. width: 100%;
  9. height: 100%;
  10. }
  11. .bg:after {
  12. content: '';
  13. width: 110%;
  14. height: 110%;
  15. position: absolute;
  16. left: -5%;
  17. top: -5%;
  18. background: inherit;
  19. filter: blur(10px);
  20. z-index: 2;
  21. background: rgba(0, 0, 0, 0.8);
  22. }
  23. .top-ul-style {
  24. width: 100%;
  25. padding-left: 0;
  26. }
  27. .top-ul-style li {
  28. height: 100px;
  29. border: 1px solid #f2f2f2;
  30. margin-bottom: 5px;
  31. padding: 10px;
  32. display: flex;
  33. justify-content: space-between;
  34. }
  35. .li-cost {
  36. display: flex;
  37. flex-flow: column;
  38. justify-content: center;
  39. align-content: flex-end;
  40. }
  41. .li-cost span {
  42. font-size: 16px;
  43. font-weight: 500;
  44. min-width: 50px;
  45. text-align: right;
  46. }
  47. </style>
  48. <template>
  49. <div class="materialReport">
  50. <div class="card-containers">
  51. <a-tabs type="card">
  52. <a-tab-pane key="1">
  53. <span slot="tab"><a-icon type="unordered-list"/>大盘</span>
  54. </a-tab-pane>
  55. </a-tabs>
  56. <div class="option" style="justify-content: space-between">
  57. <div class="option" style="padding: 0">
  58. <div class="item">
  59. <span>日期选择</span>
  60. <a-range-picker
  61. v-model="dateValue"
  62. :ranges="dateRanges"
  63. :disabled-date="disabledDate"
  64. style="width: 250px"
  65. />
  66. </div>
  67. <div class="item">
  68. <span>媒体维度</span>
  69. <a-radio-group v-model="mediaDimension" @change="mediaDimensionChange">
  70. <a-radio-button value="b">快手</a-radio-button>
  71. <a-radio-button value="a">头条</a-radio-button>
  72. </a-radio-group>
  73. </div>
  74. <div class="item">
  75. <span>数据维度</span>
  76. <a-radio-group v-model="dataDimension">
  77. <a-radio-button value="a">项目</a-radio-button>
  78. <a-radio-button value="b" disabled>设计组</a-radio-button>
  79. </a-radio-group>
  80. <a-select
  81. v-model="dataDimensionValue"
  82. style="width: 300px; margin-left: 10px"
  83. mode="multiple"
  84. :maxTagCount="2"
  85. :loading="specificLoading"
  86. :filterOption="filterOption"
  87. showSearch
  88. allowClear
  89. >
  90. <a-select-option v-if="dataDimensionList.length == 0 && specificLoading" value="no" disabled>
  91. 数据请求中,请稍后。。。
  92. </a-select-option>
  93. <a-select-option
  94. v-for="(item, index) in dataDimensionList"
  95. :key="index"
  96. :value="item.projectId"
  97. >
  98. {{ item.projectName }}
  99. </a-select-option>
  100. </a-select>
  101. </div>
  102. </div>
  103. <div class="item" style="float: right">
  104. <a-button
  105. :loading="searchLoading"
  106. :disabled="dateValue.length == 0"
  107. type="primary"
  108. @click="handleSubmit"
  109. >
  110. 搜索
  111. </a-button>
  112. <a-button
  113. :disabled="spinning"
  114. :loading="resetLoading"
  115. style="margin-left: 15px"
  116. @click="resetSubmit"
  117. >
  118. 重置
  119. </a-button>
  120. </div>
  121. </div>
  122. </div>
  123. <a-spin :spinning="spinning">
  124. <a-row :gutter="24" style="margin-top: 20px">
  125. <a-col :sm="24" :md="12" :xl="6">
  126. <a-card title="总消耗" class="material-report-card">
  127. <span slot="extra">
  128. <a-tooltip title="显示该筛选条件内总消耗" slot="action">
  129. <a-icon type="info-circle-o"/>
  130. </a-tooltip>
  131. </span>
  132. <div class="report-card-result">
  133. <div class="report-card-money">¥{{ materialReportCardList.costTotal || 0 }}</div>
  134. <div class="report-card-msg">
  135. <span>
  136. 同比
  137. <a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-up" style="color: green"/>
  138. <a-icon v-else type="caret-down" style="color: #f00"/>
  139. {{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
  140. </span>
  141. <span>
  142. 日环比
  143. <a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-up" style="color: green"/>
  144. <a-icon v-else type="caret-down" style="color: #f00"/>
  145. {{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
  146. </span>
  147. </div>
  148. </div>
  149. <div class="report-card-line"></div>
  150. <div class="report-card-radio">
  151. <span>昨日消耗:¥{{ materialReportCardList.yesterdayCost }}</span>
  152. </div>
  153. </a-card>
  154. </a-col>
  155. <a-col :sm="24" :md="12" :xl="6">
  156. <a-card title="视频上新数" class="material-report-card">
  157. <span slot="extra">
  158. <a-tooltip title="显示该筛选条件内上新视频总数" slot="action">
  159. <a-icon type="info-circle-o"/>
  160. </a-tooltip>
  161. </span>
  162. <div class="report-card-result">
  163. <div class="report-card-money">{{ materialReportCardList.videoTotal || 0 }}</div>
  164. <div
  165. id="accountIndexEchart"
  166. class="accountIndexEchart"
  167. style="width:100%; height:50px; margin:0 auto;"
  168. ref="accountIndexEchart"
  169. >
  170. </div>
  171. </div>
  172. <div class="report-card-line"></div>
  173. <div class="report-card-radio">
  174. <span>素材使用率:{{ Number(materialReportCardList.useCompare).toFixed(2) }}%</span>
  175. </div>
  176. </a-card>
  177. </a-col>
  178. <a-col :sm="24" :md="12" :xl="6">
  179. <a-card title="有效视频" class="material-report-card">
  180. <span slot="extra">
  181. <a-tooltip title="筛选时段内上线后一周内消耗大于等于5000的视频总数" slot="action">
  182. <a-icon type="info-circle-o"/>
  183. </a-tooltip>
  184. </span>
  185. <div class="report-card-result">
  186. <div class="report-card-money">{{ materialReportCardList.effectiveTotal || 0 }}</div>
  187. <div
  188. class="accountIndexEchart"
  189. id="effectiveVideoEcharts"
  190. style="width:100%; height:50px; margin:0 auto;"
  191. ref="effectiveVideoEcharts"
  192. >
  193. </div>
  194. </div>
  195. <div class="report-card-line"></div>
  196. <div class="report-card-radio">
  197. <span>素材有效率:{{ Number(materialReportCardList.effectiveCompare).toFixed(2) }}%</span>
  198. </div>
  199. </a-card>
  200. </a-col>
  201. <a-col :sm="24" :md="12" :xl="6">
  202. <a-card title="爆款视频" class="material-report-card">
  203. <span slot="extra">
  204. <a-tooltip title="筛选时段内上线后双周消耗大于等于5w的视频总数" slot="action">
  205. <a-icon type="info-circle-o"/>
  206. </a-tooltip>
  207. </span>
  208. <div class="report-card-result">
  209. <div class="report-card-money">{{ materialReportCardList.hotTotal }}</div>
  210. <div
  211. class="accountIndexEchart"
  212. id="popularVideoEcharts"
  213. style="width:100%; height:50px; margin:0 auto;"
  214. ref="popularVideoEcharts"
  215. >
  216. </div>
  217. </div>
  218. <div class="report-card-line"></div>
  219. <div class="report-card-radio">
  220. <span>
  221. 同比
  222. <a-icon v-if="materialReportCardList.hotYearOnYearCompare >= 0" type="caret-up" style="color: green"/>
  223. <a-icon v-else type="caret-down" style="color: #f00"/>
  224. {{ Number(materialReportCardList.hotYearOnYearCompare * 100).toFixed(2) }}%
  225. </span>
  226. <span>
  227. 日环比
  228. <a-icon v-if="materialReportCardList.hostCompare >= 0" type="caret-up" style="color: green"/>
  229. <a-icon v-else type="caret-down" style="color: #f00"/>
  230. {{ Number(materialReportCardList.hostCompare * 100).toFixed(2) }}%
  231. </span>
  232. </div>
  233. </a-card>
  234. </a-col>
  235. </a-row>
  236. <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
  237. <a-col :xl="18">
  238. <a-card title="数据趋势" style="width: 100%" :bordered="false">
  239. <div class="echart">
  240. <div class="echartBody">
  241. <div
  242. id="echart"
  243. ref="echart"
  244. style="height: 350px"
  245. :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
  246. >
  247. </div>
  248. <a-empty
  249. v-if="chartList.length == 0"
  250. style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
  251. />
  252. </div>
  253. </div>
  254. </a-card>
  255. </a-col>
  256. <a-col :xl="6">
  257. <a-card title="标签占比" style="width: 100%" :bordered="false">
  258. <div class="echart">
  259. <div class="echartBody">
  260. <a-empty style="height: 350px; position: relative" />
  261. <!-- <div
  262. id="echartCircular"
  263. ref="echartCircular"
  264. style="height: 350px"
  265. :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
  266. >
  267. </div> -->
  268. </div>
  269. </div>
  270. </a-card>
  271. </a-col>
  272. </a-row>
  273. <a-row :gutter="24" style="margin-top: 20px">
  274. <a-col :xl="12">
  275. <a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
  276. <a-radio-group
  277. v-if="mediaDimension === 'b'"
  278. v-model="materialRankValue"
  279. style="margin-bottom: 15px;"
  280. @change="handleMaterialRanking"
  281. >
  282. <a-radio-button :value="0">内部</a-radio-button>
  283. <a-radio-button :value="1">素造</a-radio-button>
  284. </a-radio-group>
  285. <a slot="extra" @click="getMoreVideoList">查看更多</a>
  286. <div v-if="videoList.length > 0">
  287. <ul class="top-ul-style">
  288. <li v-for="(item, index) in videoList" :key="index">
  289. <div style="display: flex; position: relative; width: 80%; cursor: pointer">
  290. <span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
  291. <img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
  292. </span>
  293. <div
  294. style="
  295. width: 25%;
  296. height: 100%;
  297. text-align: center;
  298. background: #f2f2f2;
  299. margin-left: 40px;
  300. border-radius: 5px;
  301. position: relative;
  302. "
  303. >
  304. <div
  305. :style="{
  306. backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
  307. backgroundSize: 'cover',
  308. backgroundRepeat: 'no-repeat',
  309. backgroundPosition: 'center center',
  310. overflow: 'hidden',
  311. position: 'absolute',
  312. top: '0',
  313. zIndex: '0',
  314. }"
  315. class="showShare bg"
  316. @click="
  317. visibleVideo = true
  318. videoUrlShow = item.url
  319. "
  320. >
  321. </div>
  322. <img
  323. :src="item.coverUrl || noImg"
  324. style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
  325. srcset=""
  326. @click="
  327. visibleVideo = true
  328. videoUrlShow = item.url
  329. "
  330. />
  331. </div>
  332. <div
  333. style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
  334. @click.stop="toDetail(item.signature)"
  335. >
  336. <p style="margin-left: 10px; color: #1890ff">
  337. {{ item.materialName ? item.materialName : '无素材名称' }}
  338. </p>
  339. <p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
  340. <a-tag
  341. v-for="(items, index) in item.tag.split(',')"
  342. :key="index"
  343. style="margin-right: 5px"
  344. v-if="index <= 3"
  345. >
  346. {{ items }}
  347. </a-tag>
  348. </p>
  349. </div>
  350. </div>
  351. <div class="li-cost">
  352. <span>消耗</span>
  353. <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
  354. </div>
  355. </li>
  356. </ul>
  357. </div>
  358. <div v-else style="height: 200px;line-height: 200px;text-align: center;">
  359. <a-spin/>
  360. </div>
  361. </a-card>
  362. </a-col>
  363. <a-col :xl="12">
  364. <a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
  365. <a-radio-group v-model="designRankingValue" style="margin-bottom: 15px;" @change="handleDesignRanking">
  366. <a-radio-button :value="1">摄像</a-radio-button>
  367. <a-radio-button :value="2">剪辑</a-radio-button>
  368. <a-radio-button :value="3">编导</a-radio-button>
  369. </a-radio-group>
  370. <a-table
  371. :columns="columns"
  372. :data-source="designTopList"
  373. :loading="designTopLoading"
  374. :pagination="false"
  375. bordered
  376. size="middle"
  377. >
  378. <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
  379. </a-table>
  380. </a-card>
  381. </a-col>
  382. </a-row>
  383. </a-spin>
  384. <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
  385. <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
  386. 您的浏览器不支持 video 标签。
  387. </video>
  388. </a-modal>
  389. </div>
  390. </template>
  391. <script>
  392. import moment from 'moment';
  393. import YoutTable from '@/components/youtTable/YoutTable';
  394. import ChartCard from '@/components/ChartCard';
  395. import Trend from '@/components/Trend';
  396. import {mapGetters} from 'vuex';
  397. import {stopOtherVideo, closeAllVideoFun} from '@/utils/videoControl'; // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  398. var echarts = require('echarts');
  399. const columnsFixd = [
  400. {
  401. title: '排名',
  402. dataIndex: 'rowNumber',
  403. align: 'center',
  404. customRender:(t, r, index) => {
  405.          return index + 1;
  406. }
  407. },
  408. {
  409. title: '设计人员',
  410. dataIndex: 'userName',
  411. align: 'center'
  412. },
  413. {
  414. title: '角色',
  415. dataIndex: 'roleName',
  416. align: 'center'
  417. },
  418. {
  419. title: '消耗(元)',
  420. dataIndex: 'cost',
  421. align: 'center',
  422. scopedSlots: {customRender: 'cost'}
  423. }
  424. ];
  425. export default {
  426. components: {
  427. YoutTable,
  428. ChartCard,
  429. Trend
  430. },
  431. data() {
  432. return {
  433. materialReportCardList: {},
  434. materialRankValue: 0,
  435. designRankingValue: 1,
  436. designTopLoading: false,
  437. noImg: require('@/assets/noImg.png'),
  438. visibleVideo: false,
  439. videoUrlShow: '',
  440. cost: '0',
  441. spinning: false,
  442. loading: false,
  443. chartList: [],
  444. videoList: [],
  445. designTopList: [],
  446. columns: [...columnsFixd], // table的表头
  447. columnsFixd,
  448. dateRanges: {
  449. 昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  450. 近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
  451. 近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  452. 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
  453. 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
  454. 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
  455. 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
  456. },
  457. dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  458. dataDimension: 'a',
  459. mediaDimension: 'b',
  460. dataDimensionValue: [],
  461. dataDimensionList: [],
  462. specificLoading: false,
  463. clientWidth: 0,
  464. resetLoading: false,
  465. searchLoading: false
  466. }
  467. },
  468. watch: {
  469. visibleVideo(n, o) {
  470. if (!n) {
  471. stopOtherVideo();
  472. closeAllVideoFun();
  473. }
  474. }
  475. },
  476. methods: {
  477. ...mapGetters(['userInfo']),
  478. handleMaterialRanking(e) {
  479. this.materialRankValue = e.target.value;
  480. this.getVideoTopList();
  481. },
  482. handleDesignRanking(e) {
  483. this.designRankingValue = e.target.value;
  484. this.getDesignTopList();
  485. },
  486. initAccountIndexEchart(data) {
  487. let xData = data.videoList.length && data.videoList.map(item => item.time);
  488. let yData = data.videoList.length && data.videoList.map(item => item.count);
  489. let option = {
  490. tooltip: {
  491. trigger: 'axis'
  492. },
  493. grid: {
  494. left: '5px',
  495. top: 0,
  496. right: '5px',
  497. bottom: 0
  498. },
  499. xAxis: {
  500. type: 'category',
  501. show: false,
  502. boundaryGap: false,
  503. axisPointer: {
  504. type: 'none'
  505. },
  506. data: xData
  507. },
  508. yAxis: {
  509. type: 'value',
  510. show: false
  511. },
  512. series: [
  513. {
  514. name: '上新数',
  515. data: yData,
  516. type: 'line',
  517. smooth: true,
  518. showSymbol: false,
  519. xAxisIndex: 0,
  520. symbol: 'circle',
  521. lineStyle: {
  522. color: '#9907f5a6',
  523. width: 3
  524. },
  525. itemStyle: {
  526. color: '#9907f5a6',
  527. borderWidth: 2,
  528. borderColor: '#fff'
  529. },
  530. areaStyle: {
  531. color: {
  532. type: 'linear',
  533. x: 0,
  534. y: 0,
  535. x2: 0,
  536. y2: 1,
  537. colorStops: [
  538. {
  539. offset: 0, color: '#9907f5a6' // 0% 处的颜色
  540. },
  541. {
  542. offset: 1, color: 'white' // 100% 处的颜色
  543. }
  544. ]
  545. }
  546. }
  547. }
  548. ]
  549. };
  550. return option;
  551. },
  552. handleEffectiveVideoEcharts(data) {
  553. let xData = data.effectiveList.length && data.effectiveList.map(item => item.time);
  554. let yData = data.effectiveList.length && data.effectiveList.map(item => item.count);
  555. let option = {
  556. tooltip: {
  557. trigger: 'axis'
  558. },
  559. grid: {
  560. left: '5px',
  561. top: 0,
  562. right: '5px',
  563. bottom: 0
  564. },
  565. xAxis: {
  566. type: 'category',
  567. show: false,
  568. boundaryGap: false,
  569. axisPointer: {
  570. type: 'none'
  571. },
  572. data: xData
  573. },
  574. yAxis: {
  575. type: 'value',
  576. show: false
  577. },
  578. series: [
  579. {
  580. name: '上新数',
  581. data: yData,
  582. type: 'bar',
  583. smooth: true,
  584. showSymbol: false,
  585. xAxisIndex: 0,
  586. symbol: 'circle',
  587. lineStyle: {
  588. color: '#2461F1',
  589. width: 3
  590. },
  591. itemStyle: {
  592. color: '#2461F1',
  593. borderWidth: 2,
  594. borderColor: '#fff'
  595. },
  596. areaStyle: {
  597. color: {
  598. type: 'linear',
  599. x: 0,
  600. y: 0,
  601. x2: 0,
  602. y2: 1,
  603. colorStops: [
  604. {
  605. offset: 0, color: '#2461F1' // 0% 处的颜色
  606. },
  607. {
  608. offset: 1, color: 'white' // 100% 处的颜色
  609. }
  610. ]
  611. }
  612. }
  613. }
  614. ]
  615. };
  616. return option;
  617. },
  618. handlePopularVideoEcharts(data) {
  619. let xData = data.hotList.length && data.hotList.map(item => item.time);
  620. let yData = data.hotList.length && data.hotList.map(item => item.count);
  621. let option = {
  622. tooltip: {
  623. trigger: 'axis'
  624. },
  625. grid: {
  626. left: '5px',
  627. top: 0,
  628. right: '5px',
  629. bottom: 0
  630. },
  631. xAxis: {
  632. type: 'category',
  633. show: false,
  634. boundaryGap: false,
  635. axisPointer: {
  636. type: 'none'
  637. },
  638. data: xData
  639. },
  640. yAxis: {
  641. type: 'value',
  642. show: false
  643. },
  644. series: [
  645. {
  646. name: '上新数',
  647. data: yData,
  648. type: 'line',
  649. smooth: true,
  650. showSymbol: false,
  651. xAxisIndex: 0,
  652. symbol: 'circle',
  653. lineStyle: {
  654. color: '#2461F1',
  655. width: 3
  656. },
  657. itemStyle: {
  658. color: '#2461F1',
  659. borderWidth: 2,
  660. borderColor: '#fff'
  661. },
  662. areaStyle: {
  663. color: {
  664. type: 'linear',
  665. x: 0,
  666. y: 0,
  667. x2: 0,
  668. y2: 1,
  669. colorStops: [
  670. {
  671. offset: 0, color: '#2461F1' // 0% 处的颜色
  672. },
  673. {
  674. offset: 1, color: 'white' // 100% 处的颜色
  675. }
  676. ]
  677. }
  678. }
  679. }
  680. ]
  681. };
  682. return option;
  683. },
  684. filterOption(input, option) {
  685. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  686. },
  687. getData() {
  688. this.spinning = true
  689. Promise.all([
  690. this.getSumData(),
  691. this.getChartDataList(),
  692. this.getVideoTopList(),
  693. this.getDesignTopList()
  694. ]).then(res => {
  695. this.spinning = false;
  696. this.resetLoading = false;
  697. this.searchLoading = false;
  698. }).catch(error => {
  699. this.spinning = false;
  700. this.resetLoading = false;
  701. this.searchLoading = false;
  702. this.$error({
  703. title: '页面数据加载出错',
  704. content: '请刷新重试或联系管理员查询'
  705. });
  706. });
  707. },
  708. getProjectList() {
  709. this.specificLoading = true;
  710. return new Promise((resolve, reject) => {
  711. this.postDataAction(
  712. '/overView/getProjects?userId=' + this.userInfo().id + '&mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
  713. ).then(res => {
  714. this.specificLoading = false;
  715. if (res.success) {
  716. this.dataDimensionList = res.result;
  717. resolve(res.result);
  718. }
  719. else {
  720. reject(res.message);
  721. }
  722. });
  723. });
  724. },
  725. getSumData() {
  726. let that = this;
  727. return new Promise((resolve, reject) => {
  728. that.postDataAction('/overView/sumData', {
  729. mediaId: this.mediaDimension == 'a' ? 1 : 2,
  730. startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  731. endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  732. projects: this.dataDimensionValue
  733. }).then(res => {
  734. if (res.success) {
  735. this.materialReportCardList = res.result;
  736. this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
  737. this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
  738. this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
  739. resolve(res.result);
  740. }
  741. else {
  742. reject(res.message);
  743. }
  744. });
  745. });
  746. },
  747. getChartDataList() {
  748. return new Promise((resolve, reject) => {
  749. this.postDataAction('/overView/chartData', {
  750. mediaId: this.mediaDimension == 'a' ? 1 : 2,
  751. startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  752. endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  753. projects: this.dataDimensionValue
  754. }).then(res => {
  755. if (res.success) {
  756. this.chartList = res.result;
  757. if (res.result.length == 0) {
  758. const myChart = echarts.init(document.getElementById('echart'));
  759. myChart.dispose();
  760. }
  761. else {
  762. this.initEchart('echart', this.handlerEchartOption(res.result));
  763. }
  764. resolve(res.result);
  765. } else {
  766. reject(res.message);
  767. }
  768. });
  769. });
  770. },
  771. getVideoTopList() {
  772. this.videoList = []
  773. return new Promise((resolve, reject) => {
  774. this.postDataAction('/overView/materialTop', {
  775. mediaId: this.mediaDimension == 'a' ? 1 : 2,
  776. startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  777. endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  778. channelType: this.materialRankValue,
  779. projects: this.dataDimensionValue
  780. }).then(res => {
  781. if (res.success) {
  782. this.videoList = res.result;
  783. resolve(res.result);
  784. }
  785. else {
  786. reject(res.message);
  787. }
  788. });
  789. });
  790. },
  791. getMoreVideoList() {
  792. var params = {
  793. mediaId: this.mediaDimension == 'a' ? 1 : 2,
  794. startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  795. endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  796. projects: this.dataDimensionValue
  797. };
  798. params = JSON.stringify(params);
  799. if (this.mediaDimension == 'a') {
  800. localStorage.setItem('TtmaterialParams', params);
  801. this.$router.push({path: '/materialReport/marterialTtList'});
  802. }
  803. else {
  804. localStorage.setItem('materialParams', params);
  805. this.$router.push({path: '/materialReport/marterialList'});
  806. }
  807. },
  808. toDetail(md5) {
  809. let params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2};
  810. localStorage.setItem('videoInfo', JSON.stringify(params));
  811. this.$router.push({
  812. path: '/materialReport/marterialDetail'
  813. });
  814. },
  815. getDesignTopList() {
  816. this.designTopLoading = true;
  817. const paramsData = {
  818. startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  819. endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  820. mediaId: this.mediaDimension == 'a' ? 1 : 2,
  821. projects: this.dataDimensionValue,
  822. type: this.designRankingValue
  823. };
  824. this.postDataAction('/overView/designTop', paramsData).then(res => {
  825. if (res.success) {
  826. this.designTopLoading = false;
  827. this.designTopList = res.result;
  828. }
  829. });
  830. },
  831. getTagProportionAnalyseList() {
  832. return new Promise((resolve, reject) => {
  833. this.postDataAction('/overView/tagProportionAnalyse', {}).then(res => {
  834. if (res.success) {
  835. resolve(res.result);
  836. }
  837. else {
  838. reject(res.message);
  839. }
  840. });
  841. });
  842. },
  843. handleSubmit() {
  844. this.spinning = true;
  845. this.searchLoading = true;
  846. this.getData();
  847. },
  848. resetSubmit() {
  849. this.resetLoading = true;
  850. this.dateValue = [moment().subtract(7, 'days'), moment()];
  851. this.dataDimension = 'a';
  852. this.mediaDimension = 'b';
  853. this.dataDimensionValue = [];
  854. this.getData();
  855. },
  856. //获取echart的值
  857. initEchart(idName, optionName) {
  858. let that = this;
  859. const chart = this.$refs[idName];
  860. if (chart) {
  861. const myChart = echarts.init(document.getElementById(idName));
  862. myChart.setOption(optionName);
  863. window.addEventListener('resize', function () {
  864. that.clientWidth = document.documentElement.clientWidth - 224;
  865. myChart.resize();
  866. });
  867. }
  868. },
  869. handlerEchartOption(data) {
  870. let option = {
  871. noDataLoadingOption: {
  872. text: '暂无数据',
  873. effect: 'bubble',
  874. effectOption: {
  875. effect: {
  876. n: 0
  877. }
  878. }
  879. },
  880. tooltip: {
  881. trigger: 'axis'
  882. },
  883. grid: {
  884. left: '3%',
  885. right: '4%',
  886. bottom: '3%',
  887. containLabel: true
  888. },
  889. legend: {
  890. icon: 'circle',
  891. top: '5%',
  892. right: '5%',
  893. itemWidth: 6,
  894. itemGap: 20,
  895. textStyle: {
  896. color: '#556677'
  897. }
  898. },
  899. xAxis: {
  900. type: 'category',
  901. data: data.map(item => {
  902. return item.statDate;
  903. }),
  904. boundaryGap: false,
  905. // 坐标轴线
  906. axisLine: {
  907. show: false,
  908. lineStyle: {
  909. color: '#999'
  910. }
  911. },
  912. // 分割线
  913. splitLine: {
  914. show: true,
  915. lineStyle: {
  916. type: 'dashed',
  917. color: '#e5e5e5'
  918. }
  919. }
  920. },
  921. yAxis: {
  922. type: 'value',
  923. axisLine: {
  924. show: false,
  925. lineStyle: {
  926. color: '#999'
  927. }
  928. },
  929. splitLine: {
  930. lineStyle: {
  931. type: 'dashed',
  932. color: '#e5e5e5'
  933. }
  934. }
  935. },
  936. series: [
  937. {
  938. smooth: true,
  939. name: '消耗',
  940. type: 'line',
  941. stack: '总量',
  942. data: data.map(item => {
  943. return item.cost.toFixed(3);
  944. }),
  945. symbol: 'circle',
  946. symbolSize: 6,
  947. lineStyle: {
  948. normal: {
  949. width: 2
  950. }
  951. },
  952. itemStyle: {
  953. borderColor: '#ffffff',
  954. borderWidth: 0
  955. }
  956. }
  957. ]
  958. };
  959. return option;
  960. },
  961. handlerAgeOption(data) {
  962. const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'];
  963. let option = {
  964. color: colorList,
  965. backgroundColor: '#fff',
  966. tooltip: {
  967. formatter: '{b}:{c}'
  968. },
  969. legend: {
  970. orient: 'horizontal',
  971. top: 'top',
  972. icon: 'circle',
  973. width: '100%',
  974. data: ['形式标签', '场景标签', '基调标签', '其他']
  975. },
  976. series: [
  977. {
  978. name: '',
  979. type: 'pie',
  980. radius: ['40%', '70%'],
  981. center: ['50%', '50%'],
  982. data: [
  983. {value: 0, name: '形式标签'},
  984. {value: 0, name: '基调标签'},
  985. {value: 0, name: '场景标签'},
  986. {value: 0, name: '其他'}
  987. ],
  988. labelLine: {
  989. length: 5,
  990. length2: 5
  991. },
  992. label: {
  993. show: false,
  994. position: 'center'
  995. },
  996. emphasis: {
  997. label: {
  998. show: true,
  999. fontSize: '18',
  1000. fontWeight: 'bold'
  1001. }
  1002. },
  1003. labelLine: {
  1004. show: true
  1005. },
  1006. itemStyle: {
  1007. borderRadius: 5,
  1008. color: params => {
  1009. return colorList[params.dataIndex];
  1010. }
  1011. }
  1012. }
  1013. ]
  1014. };
  1015. return option;
  1016. },
  1017. disabledDate(current) {
  1018. return current && current > moment().subtract(1, 'days');
  1019. },
  1020. mediaDimensionChange(e) {
  1021. if (e.target.value === 'b') {
  1022. this.materialRankValue = 0;
  1023. }
  1024. else {
  1025. this.materialRankValue = '';
  1026. }
  1027. this.dataDimensionList = [];
  1028. this.dataDimensionValue = [];
  1029. this.getProjectList();
  1030. },
  1031. },
  1032. mounted() {
  1033. this.clientWidth = document.documentElement.clientWidth - 224;
  1034. this.$nextTick(() => {
  1035. this.getProjectList();
  1036. this.getData();
  1037. });
  1038. },
  1039. activated() {
  1040. this.$nextTick(() => {
  1041. this.clientWidth = document.documentElement.clientWidth - 224;
  1042. });
  1043. }
  1044. };
  1045. </script>
  1046. <style lang="less" scoped>
  1047. .materialReport {
  1048. .material-report-card {
  1049. height: 220px;
  1050. /deep/ .ant-card-head {
  1051. border: none;
  1052. }
  1053. /deep/ .ant-card-body {
  1054. padding-top: 5px;
  1055. }
  1056. .report-card-result {
  1057. height: 88px;
  1058. }
  1059. .report-card-money {
  1060. font-size: 30px;
  1061. font-weight: bold;
  1062. }
  1063. .report-card-msg {
  1064. display: flex;
  1065. justify-content: space-between;
  1066. font-size: 14px;
  1067. margin-top: 20px;
  1068. }
  1069. .report-card-line {
  1070. width: 100%;
  1071. height: 1px;
  1072. margin-top: 20px;
  1073. background: #e8e8e8;
  1074. }
  1075. .report-card-radio {
  1076. display: flex;
  1077. justify-content: space-between;
  1078. margin-top: 12px;
  1079. font-size: 16px;
  1080. }
  1081. }
  1082. .option {
  1083. background: white;
  1084. padding: 20px;
  1085. display: flex;
  1086. justify-content: flex-start;
  1087. flex-wrap: wrap;
  1088. .item {
  1089. margin-right: 15px;
  1090. margin-bottom: 15px;
  1091. height: 32px;
  1092. line-height: 32px;
  1093. flex-shrink: 0;
  1094. span {
  1095. margin-right: 10px;
  1096. }
  1097. }
  1098. }
  1099. .echart {
  1100. margin-top: 20px;
  1101. padding: 0 20px 20px;
  1102. background: white;
  1103. .echart-header {
  1104. padding: 20px 0;
  1105. font-size: 15px;
  1106. font-weight: 600;
  1107. }
  1108. }
  1109. .tableBody {
  1110. margin-top: 20px;
  1111. }
  1112. }
  1113. </style>
  1114. <style>
  1115. .materialReport .card-containers {
  1116. overflow: hidden !important;
  1117. }
  1118. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
  1119. margin-top: -16px !important;
  1120. }
  1121. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  1122. background: #fff !important;
  1123. }
  1124. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
  1125. border-color: #fff !important;
  1126. }
  1127. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  1128. border-color: transparent !important;
  1129. background: transparent !important;
  1130. }
  1131. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  1132. border-color: #fff !important;
  1133. background: #fff !important;
  1134. }
  1135. </style>