materialReport.vue 39 KB

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