materialReport.vue 36 KB

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