123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326 |
- <style>
- .materialReport .chart-card-content {
- display: none !important;
- }
- </style>
- <style scoped>
- .bg {
- width: 100%;
- height: 100%;
- }
- .bg:after {
- content: '';
- width: 110%;
- height: 110%;
- position: absolute;
- left: -5%;
- top: -5%;
- background: inherit;
- filter: blur(10px);
- z-index: 2;
- background: rgba(0, 0, 0, 0.8);
- }
- .top-ul-style {
- width: 100%;
- padding-left: 0;
- }
- .top-ul-style li {
- height: 100px;
- border: 1px solid #f2f2f2;
- margin-bottom: 5px;
- padding: 10px;
- display: flex;
- justify-content: space-between;
- }
- .li-cost {
- display: flex;
- flex-flow: column;
- justify-content: center;
- align-content: flex-end;
- }
- .li-cost span {
- font-size: 16px;
- font-weight: 500;
- min-width: 50px;
- text-align: right;
- }
- </style>
- <template>
- <div class="materialReport">
- <div class="card-containers">
- <a-tabs type="card">
- <a-tab-pane key="1">
- <span slot="tab"><a-icon type="unordered-list"/>大盘</span>
- </a-tab-pane>
- </a-tabs>
- <div class="option" style="justify-content: space-between">
- <div class="option" style="padding: 0">
- <div class="item">
- <span>日期选择</span>
- <a-range-picker
- v-model="dateValue"
- :ranges="dateRanges"
- :disabled-date="disabledDate"
- style="width: 250px"
- />
- </div>
- <div class="item">
- <span>媒体维度</span>
- <a-radio-group v-model="mediaDimension" @change="mediaDimensionChange">
- <a-radio-button value="b">快手</a-radio-button>
- <a-radio-button value="a">头条</a-radio-button>
- </a-radio-group>
- </div>
- <div class="item">
- <span>数据维度</span>
- <a-radio-group v-model="dataDimension">
- <a-radio-button value="a">项目</a-radio-button>
- <a-radio-button value="b" disabled>设计组</a-radio-button>
- </a-radio-group>
- <a-select
- v-model="dataDimensionValue"
- style="width: 300px; margin-left: 10px"
- mode="multiple"
- :maxTagCount="2"
- :loading="specificLoading"
- :filterOption="filterOption"
- showSearch
- allowClear
- >
- <a-select-option v-if="dataDimensionList.length == 0 && specificLoading" value="no" disabled>
- 数据请求中,请稍后。。。
- </a-select-option>
- <a-select-option
- v-for="(item, index) in dataDimensionList"
- :key="index + 1"
- :value="item.projectId"
- >
- {{ item.projectName }}
- </a-select-option>
- </a-select>
- </div>
- </div>
- <div class="item" style="float: right">
- <a-button
- :loading="searchLoading"
- :disabled="dateValue.length == 0"
- type="primary"
- @click="handleSubmit"
- >
- 搜索
- </a-button>
- <a-button
- :disabled="spinning"
- :loading="resetLoading"
- style="margin-left: 15px"
- @click="resetSubmit"
- >
- 重置
- </a-button>
- </div>
- </div>
- </div>
- <a-spin :spinning="spinning">
- <a-row :gutter="24" style="margin-top: 20px">
- <a-col :sm="24" :md="12" :xl="6">
- <a-card title="总消耗" class="material-report-card">
- <span slot="extra">
- <a-tooltip title="显示该筛选条件内总消耗" slot="action">
- <a-icon type="info-circle-o"/>
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">{{ materialReportCardList.costTotal ? '¥' + materialReportCardList.costTotal : '-' }}</div>
- <div class="report-card-msg">
- <span>
- 同比
- <a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-up" style="color: #f00"/>
- <a-icon v-else type="caret-down" style="color: green"/>
- {{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
- </span>
- <span>
- 日环比
- <a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-up" style="color: #f00"/>
- <a-icon v-else type="caret-down" style="color: green"/>
- {{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
- </span>
- </div>
- </div>
- <div class="report-card-line"></div>
- <div class="report-card-radio">
- <span>昨日消耗:{{ materialReportCardList.yesterdayCost ? '¥' + materialReportCardList.yesterdayCost : '-' }}</span>
- </div>
- </a-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6">
- <a-card title="视频上新数" class="material-report-card">
- <span slot="extra">
- <a-tooltip title="显示该筛选条件内上新视频总数" slot="action">
- <a-icon type="info-circle-o"/>
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">{{ accountIndexList.videoTotal | formatCurrency }}</div>
- <div
- v-if="timeShowEchartsStatus"
- id="accountIndexEchart"
- class="accountIndexEchart"
- style="width:100%; height:50px; margin:0 auto;"
- ref="accountIndexEchart"
- :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
- >
- </div>
- </div>
- <div class="report-card-line"></div>
- <div class="report-card-radio">
- <span>素材使用率:{{ Number(accountIndexList.useCompare * 100).toFixed(2) }}%</span>
- </div>
- </a-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6">
- <a-card title="有效视频" class="material-report-card">
- <span slot="extra">
- <a-tooltip title="筛选时段内上线后一周内消耗大于等于5000的视频总数" slot="action">
- <a-icon type="info-circle-o"/>
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">{{ accountIndexList.effectiveTotal | formatCurrency }}</div>
- <div
- v-if="timeShowEchartsStatus"
- class="accountIndexEchart"
- id="effectiveVideoEcharts"
- style="width:100%; height:50px; margin:0 auto;"
- ref="effectiveVideoEcharts"
- :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
- >
- </div>
- </div>
- <div class="report-card-line"></div>
- <div class="report-card-radio">
- <span>素材有效率:{{ Number(accountIndexList.effectiveCompare * 100).toFixed(2) }}%</span>
- </div>
- </a-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6">
- <a-card title="爆款视频" class="material-report-card">
- <span slot="extra">
- <a-tooltip title="筛选时段内上线后双周消耗大于等于5w的视频总数" slot="action">
- <a-icon type="info-circle-o"/>
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">{{ popularVideoList.hotTotal | formatCurrency }}</div>
- <div
- v-if="timeShowEchartsStatus"
- class="accountIndexEchart"
- id="popularVideoEcharts"
- style="width:100%; height:50px; margin:0 auto;"
- ref="popularVideoEcharts"
- :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
- >
- </div>
- </div>
- <div class="report-card-line"></div>
- <div class="report-card-radio">
- <span>
- 同比
- <a-icon v-if="popularVideoList.hotYearOnYearCompare >= 0" type="caret-up" style="color: #f00"/>
- <a-icon v-else type="caret-down" style="color: green"/>
- {{ Number(popularVideoList.hotYearOnYearCompare * 100).toFixed(2) }}%
- </span>
- <span>
- 日环比
- <a-icon v-if="popularVideoList.hostCompare >= 0" type="caret-up" style="color: #f00"/>
- <a-icon v-else type="caret-down" style="color: green"/>
- {{ Number(popularVideoList.hostCompare * 100).toFixed(2) }}%
- </span>
- </div>
- </a-card>
- </a-col>
- </a-row>
- </a-spin>
- <a-spin :spinning="spinningChart">
- <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
- <a-col :xl="18">
- <a-card title="数据趋势" style="width: 100%" :bordered="false">
- <a-tabs v-model="active" @change="callback">
- <a-tab-pane key="cost" tab="消耗">
- </a-tab-pane>
- <a-tab-pane key="active" tab="激活数">
- </a-tab-pane>
- <a-tab-pane key="aclick" tab="曝光数">
- </a-tab-pane>
- <!-- <a-tab-pane key="play_duration_3s" tab="3S播放率">
- </a-tab-pane> -->
- </a-tabs>
- <div class="echart">
- <div class="echartBody">
- <div
- id="echart"
- ref="echart"
- style="height: 350px"
- :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
- >
- </div>
- <a-empty
- v-if="chartList.length == 0"
- style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
- />
- </div>
- </div>
- </a-card>
- </a-col>
- <a-col :xl="6">
- <a-card title="标签占比" style="width: 100%" :bordered="false">
- <a-tabs v-model="active" @change="callback" style="visibility:hidden;">
- <a-tab-pane key="cost" tab="消耗">
- </a-tab-pane>
- <a-tab-pane key="active" tab="激活数">
- </a-tab-pane>
- <a-tab-pane key="aclick" tab="曝光数">
- </a-tab-pane>
- <a-tab-pane key="play_duration_3s" tab="3S播放率">
- </a-tab-pane>
- </a-tabs>
- <div class="echart">
- <div class="echartBody">
- <a-empty style="height: 350px; position: relative" />
- <!-- <div
- id="echartCircular"
- ref="echartCircular"
- style="height: 350px"
- :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
- >
- </div> -->
- </div>
- </div>
- </a-card>
- </a-col>
- </a-row>
- </a-spin>
- <a-row :gutter="24" style="margin-top: 20px">
- <a-col :xl="12">
- <a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
- <a-radio-group
- v-if="mediaDimension === 'b'"
- v-model="materialRankValue"
- style="margin-bottom: 15px;"
- @change="handleMaterialRanking"
- >
- <a-radio-button :value="0">内部</a-radio-button>
- <a-radio-button :value="1">素造</a-radio-button>
- </a-radio-group>
- <a slot="extra" @click="getMoreVideoList">查看更多</a>
- <div v-if="!signatureStatus && videoList.length > 0">
- <ul class="top-ul-style">
- <li v-for="(item, index) in videoList" :key="item.signature">
- <div style="display: flex; position: relative; width: 80%; cursor: pointer">
- <span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
- <img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
- </span>
- <div
- style="
- width: 25%;
- height: 100%;
- text-align: center;
- background: #f2f2f2;
- margin-left: 40px;
- border-radius: 5px;
- position: relative;
- "
- >
- <div
- :style="{
- backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
- backgroundSize: 'cover',
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- overflow: 'hidden',
- position: 'absolute',
- top: '0',
- zIndex: '0',
- }"
- class="showShare bg"
- @click="
- visibleVideo = true
- videoUrlShow = item.url
- "
- >
- </div>
- <img
- :src="item.coverUrl || noImg"
- style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
- srcset=""
- @click="
- visibleVideo = true
- videoUrlShow = item.url
- "
- />
- </div>
- <div
- style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
- @click.stop="toDetail(item.signature)"
- >
- <p style="margin-left: 10px; color: #1890ff">
- {{ item.materialName ? item.materialName : '无素材名称' }}
- </p>
- <p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
- <a-tag
- v-for="(items, val) in item.tag.split(',')"
- :key="val + 1"
- style="margin-right: 5px"
- v-if="val <= 3"
- >
- {{ items }}
- </a-tag>
- </p>
- </div>
- </div>
- <div class="li-cost">
- <span>消耗</span>
- <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
- </div>
- </li>
- </ul>
- </div>
- <a-empty v-else-if="!signatureStatus && videoList.length === 0" style="margin-top: 20%"/>
- <div v-else style="height: 200px;line-height: 200px;text-align: center;">
- <a-spin/>
- </div>
- </a-card>
- </a-col>
- <a-col :xl="12">
- <a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
- <a-radio-group v-model="designRankingValue" style="margin-bottom: 15px;" @change="handleDesignRanking">
- <a-radio-button :value="1">摄像</a-radio-button>
- <a-radio-button :value="2">剪辑</a-radio-button>
- <a-radio-button :value="3">编导</a-radio-button>
- </a-radio-group>
- <a-table
- :columns="columns"
- :data-source="designTopList"
- :loading="designTopLoading"
- :pagination="false"
- bordered
- size="middle"
- >
- <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
- </a-table>
- </a-card>
- </a-col>
- </a-row>
- <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
- <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
- 您的浏览器不支持 video 标签。
- </video>
- </a-modal>
- </div>
- </template>
- <script>
- import moment from 'moment';
- import YoutTable from '@/components/youtTable/YoutTable';
- import ChartCard from '@/components/ChartCard';
- import Trend from '@/components/Trend';
- import {mapGetters} from 'vuex';
- import {stopOtherVideo, closeAllVideoFun} from '@/utils/videoControl'; // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- var echarts = require('echarts');
- const columnsFixd = [
- {
- title: '排名',
- dataIndex: 'rowNumber',
- align: 'center',
- customRender: (t, r, index) => {
- return index + 1;
- }
- },
- {
- title: '设计人员',
- dataIndex: 'userName',
- align: 'center'
- },
- {
- title: '角色',
- dataIndex: 'roleName',
- align: 'center'
- },
- {
- title: '消耗(元)',
- dataIndex: 'cost',
- align: 'center',
- scopedSlots: {customRender: 'cost'}
- }
- ];
- export default {
- components: {
- YoutTable,
- ChartCard,
- Trend
- },
- data() {
- return {
- active:'cost',
- timeShowEchartsStatus: true,
- signatureStatus: false,
- materialReportCardList: {},
- accountIndexList: {},
- popularVideoList: {},
- materialRankValue: 0,
- designRankingValue: 1,
- designTopLoading: false,
- noImg: require('@/assets/noImg.png'),
- visibleVideo: false,
- videoUrlShow: '',
- cost: '0',
- spinning: false,
- spinningChart:false,
- loading: false,
- chartList: [],
- videoList: [],
- designTopList: [],
- columns: [...columnsFixd], // table的表头
- columnsFixd,
- dateRanges: {
- 昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
- 近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
- 近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
- 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
- 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
- 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
- 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
- },
- dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
- dataDimension: 'a',
- mediaDimension: 'b',
- dataDimensionValue: [],
- dataDimensionList: [],
- specificLoading: false,
- clientWidth: 0,
- resetLoading: false,
- searchLoading: false
- }
- },
- watch: {
- visibleVideo(n, o) {
- if (!n) {
- stopOtherVideo();
- closeAllVideoFun();
- }
- }
- },
- methods: {
- ...mapGetters(['userInfo']),
- handleMaterialRanking(e) {
- this.materialRankValue = e.target.value;
- this.getVideoTopList();
- },
- handleDesignRanking(e) {
- this.designRankingValue = e.target.value;
- this.getDesignTopList();
- },
- initAccountIndexEchart(data) {
- let xData = data.videoList.length && data.videoList.map(item => item.time);
- let yData = data.videoList.length && data.videoList.map(item => item.count);
- let option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '5px',
- top: 0,
- right: '5px',
- bottom: 0
- },
- xAxis: {
- type: 'category',
- show: false,
- boundaryGap: false,
- axisPointer: {
- type: 'none'
- },
- data: xData
- },
- yAxis: {
- type: 'value',
- show: false
- },
- series: [
- {
- name: '上新数',
- data: yData,
- type: 'line',
- smooth: true,
- showSymbol: false,
- xAxisIndex: 0,
- symbol: 'circle',
- lineStyle: {
- color: '#9907f5a6',
- width: 3
- },
- itemStyle: {
- color: '#9907f5a6',
- borderWidth: 2,
- borderColor: '#fff'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0, color: '#9907f5a6' // 0% 处的颜色
- },
- {
- offset: 1, color: 'white' // 100% 处的颜色
- }
- ]
- }
- }
- }
- ]
- };
- return option;
- },
- handleEffectiveVideoEcharts(data) {
- let xData = data.effectiveList.length && data.effectiveList.map(item => item.time);
- let yData = data.effectiveList.length && data.effectiveList.map(item => item.count);
- let option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '5px',
- top: 0,
- right: '5px',
- bottom: 0
- },
- xAxis: {
- type: 'category',
- show: false,
- boundaryGap: false,
- axisPointer: {
- type: 'none'
- },
- data: xData
- },
- yAxis: {
- type: 'value',
- show: false
- },
- series: [
- {
- name: '有效数',
- data: yData,
- type: 'bar',
- smooth: true,
- showSymbol: false,
- xAxisIndex: 0,
- symbol: 'circle',
- lineStyle: {
- color: '#2461F1',
- width: 3
- },
- itemStyle: {
- color: '#2461F1',
- borderWidth: 2,
- borderColor: '#fff'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0, color: '#2461F1' // 0% 处的颜色
- },
- {
- offset: 1, color: 'white' // 100% 处的颜色
- }
- ]
- }
- }
- }
- ]
- };
- return option;
- },
- handlePopularVideoEcharts(data) {
- let xData = data.hotList.length && data.hotList.map(item => item.time);
- let yData = data.hotList.length && data.hotList.map(item => item.count);
- let option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '5px',
- top: 0,
- right: '5px',
- bottom: 0
- },
- xAxis: {
- type: 'category',
- show: false,
- boundaryGap: false,
- axisPointer: {
- type: 'none'
- },
- data: xData
- },
- yAxis: {
- type: 'value',
- show: false
- },
- series: [
- {
- name: '爆款数',
- data: yData,
- type: 'line',
- smooth: true,
- showSymbol: false,
- xAxisIndex: 0,
- symbol: 'circle',
- lineStyle: {
- color: '#2461F1',
- width: 3
- },
- itemStyle: {
- color: '#2461F1',
- borderWidth: 2,
- borderColor: '#fff'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0, color: '#2461F1' // 0% 处的颜色
- },
- {
- offset: 1, color: 'white' // 100% 处的颜色
- }
- ]
- }
- }
- }
- ]
- };
- return option;
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
- },
- getData() {
- this.spinning = true
- this.spinningChart = true
- this.active = 'cost'
- this.getAccountIndexData()
- this.getPopularVideoData()
- this.getChartDataList()
- this.getVideoTopList()
- this.getDesignTopList()
- Promise.all([
- this.getSumData(),
-
- ]).then(res => {
- this.spinning = false;
- this.resetLoading = false;
- this.searchLoading = false;
- }).catch(error => {
- this.spinning = false;
- this.resetLoading = false;
- this.searchLoading = false;
- // this.$error({
- // title: '页面数据加载出错',
- // content: '请刷新重试或联系管理员查询'
- // });
- });
- },
- getProjectList() {
- this.specificLoading = true;
- return new Promise((resolve, reject) => {
- this.postDataAction(
- '/overView/getProjects?userId=' + this.userInfo().id + '&mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
- ).then(res => {
- this.specificLoading = false;
- if (res.success) {
- this.dataDimensionList = res.result;
- // 找到重复的数据
- // const changeData = res.result.map(item => item.projectId);
- // let rep = [];
- // changeData.forEach((item,index)=>{
- // if(changeData.indexOf(item)!=index){ // 匹配数组元素第一个item位置和当前循环的index
- // let obj = {};
- // obj.key = (changeData.indexOf(item) + 1) + '|' + (index + 1); // 用'|'分隔两个重复项的下标
- // obj.value = item;
- // rep.push(obj);
- // }
- // });
- // console.log(rep, 'newArr--newArr');
- resolve(res.result);
- }
- else {
- reject(res.message);
- }
- });
- });
- },
- decimalsHandle(val, num) {
- if (val && typeof val != 'string') {
- if (val >= 0) {
- val = parseFloat(val).toFixed(num);
- let numberStr = val.toString();
- let str = numberStr.split('.');
- let str0 = str[0].split('').reverse();
- for (let i = 0; i < str0.length; i++) {
- if ((i + 1) % 4 === 0) {
- str0.splice(i, 0, ',');
- }
- }
- str0.reverse();
- let handleResult = '';
- for (let j = 0; j < str0.length; j++) {
- handleResult += str0[j];
- }
- return handleResult + '.' + str[1];
- }
- else {
- val = parseFloat(val).toFixed(num);
- let numberStr = val.toString();
- let str = numberStr.split('.');
- let str0 = str[0].substr(1).split('').reverse();
- for (let i = 0; i < str0.length; i++) {
- if ((i + 1) % 4 === 0) {
- str0.splice(i, 0, ',');
- }
- }
- str0.reverse();
- let handleResult = '';
- for (let j = 0; j < str0.length; j++) {
- handleResult += str0[j];
- }
- return '-' + handleResult + '.' + str[1];
- }
- }
- else if (typeof val == 'string') {
- return val;
- }
- else {
- return 0;
- }
- },
- getSumData() {
- let that = this;
- return new Promise((resolve, reject) => {
- that.postDataAction('/overView/sumData', {
- mediaId: this.mediaDimension === 'a' ? 1 : 2,
- startDate: this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
- endDate: this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
- projects: this.dataDimensionValue
- }).then(res => {
- if (res.success) {
- let defaultList = res.result;
- if (this.mediaDimension === 'b') {
- defaultList.costTotal = this.decimalsHandle(defaultList.costTotal, 3);
- defaultList.yesterdayCost = this.decimalsHandle(defaultList.yesterdayCost, 3);
- }
- else {
- defaultList.costTotal = this.decimalsHandle(defaultList.costTotal, 2);
- defaultList.yesterdayCost = this.decimalsHandle(defaultList.yesterdayCost, 2);
- }
- this.materialReportCardList = res.result;
- resolve(res.result);
- }
- else {
- reject(res.message);
- }
- });
- });
- },
- getAccountIndexData() {
- let that = this;
- return new Promise((resolve, reject) => {
- that.postDataAction('/overView/sumDataVideoNewEffective', {
- mediaId: this.mediaDimension == 'a' ? 1 : 2,
- startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
- endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
- projects: this.dataDimensionValue
- }).then(res => {
- if (res.success) {
- this.accountIndexList = res.result;
- this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
- this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
- resolve(res.result);
- }
- else {
- reject(res.message);
- }
- });
- });
- },
- getPopularVideoData() {
- let that = this;
- return new Promise((resolve, reject) => {
- that.postDataAction('/overView/sumDataVideoHot', {
- mediaId: this.mediaDimension == 'a' ? 1 : 2,
- startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
- endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
- projects: this.dataDimensionValue
- }).then(res => {
- if (res.success) {
- this.popularVideoList = res.result;
- this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
- resolve(res.result);
- }
- else {
- reject(res.message);
- }
- });
- });
- },
- callback(){
- this.initEchart('echart', this.handlerEchartOption(this.chartList, this.active));
- },
- getChartDataList() {
- return new Promise((resolve, reject) => {
- this.postDataAction('/overView/chartData', {
- mediaId: this.mediaDimension == 'a' ? 1 : 2,
- startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
- endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
- projects: this.dataDimensionValue
- }).then(res => {
- this.spinningChart = false
- if (res.success) {
- this.chartList = res.result;
- if (res.result.length == 0) {
- const myChart = echarts.init(document.getElementById('echart'));
- myChart.dispose();
- }
- else {
- this.initEchart('echart', this.handlerEchartOption(res.result, 'cost'));
- }
- resolve(res.result);
- } else {
- reject(res.message);
- }
- });
- });
- },
- getVideoTopList() {
- this.videoList = []
- this.signatureStatus = true;
- return new Promise((resolve, reject) => {
- this.postDataAction('/overView/materialTop', {
- mediaId: this.mediaDimension == 'a' ? 1 : 2,
- startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
- endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
- channelType: this.materialRankValue,
- projects: this.dataDimensionValue
- }).then(res => {
- this.signatureStatus = false;
- if (res.success) {
- this.videoList = res.result || [];
- resolve(res.result);
- }
- else {
- reject(res.message);
- }
- }).catch(error => {
- this.signatureStatus = false;
- });
- });
- },
- getMoreVideoList() {
- var params = {
- mediaId: this.mediaDimension == 'a' ? 1 : 2,
- startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
- endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
- projects: this.dataDimensionValue
- };
- params = JSON.stringify(params);
- if (this.mediaDimension == 'a') {
- localStorage.setItem('TtmaterialParams', params);
- this.$router.push({path: '/materialReport/marterialTtList'});
- }
- else {
- localStorage.setItem('materialParams', params);
- this.$router.push({path: '/materialReport/marterialList'});
- }
- },
- toDetail(md5) {
- let params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2};
- localStorage.setItem('videoInfo', JSON.stringify(params));
- this.$router.push({
- path: '/materialReport/marterialDetail'
- });
- },
- getDesignTopList() {
- this.designTopLoading = true;
- const paramsData = {
- startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
- endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
- mediaId: this.mediaDimension == 'a' ? 1 : 2,
- projects: this.dataDimensionValue,
- type: this.designRankingValue
- };
- this.postDataAction('/overView/designTop', paramsData).then(res => {
- if (res.success) {
- this.designTopLoading = false;
- this.designTopList = res.result;
- }else{
- this.designTopLoading = false;
- this.$message.error(this.message)
- }
- });
- },
- getTagProportionAnalyseList() {
- return new Promise((resolve, reject) => {
- this.postDataAction('/overView/tagProportionAnalyse', {}).then(res => {
- if (res.success) {
- resolve(res.result);
- }
- else {
- reject(res.message);
- }
- });
- });
- },
- handleSubmit() {
- this.spinning = true;
- this.searchLoading = true;
- const dataOne = new Date(this.dateValue[0]).getTime();
- const dataTwo = new Date(this.dateValue[1]).getTime();
- if (dataTwo === dataOne) {
- this.timeShowEchartsStatus = false;
- }
- else {
- this.timeShowEchartsStatus = true;
- }
- this.getData();
- },
- resetSubmit() {
- this.resetLoading = true;
- this.dateValue = [moment().subtract(7, 'days'), moment()];
- this.dataDimension = 'a';
- this.mediaDimension = 'b';
- this.dataDimensionValue = [];
- this.getData();
- },
- //获取echart的值
- initEchart(idName, optionName) {
- let that = this;
- const chart = this.$refs[idName];
- if (chart) {
- const myChart = echarts.init(document.getElementById(idName));
- myChart.setOption(optionName);
- window.addEventListener('resize', function () {
- that.clientWidth = document.documentElement.clientWidth - 224;
- myChart.resize();
- });
- }
- },
- handlerEchartOption(data, typeShow) {
- let option = {
- noDataLoadingOption: {
- text: '暂无数据',
- effect: 'bubble',
- effectOption: {
- effect: {
- n: 0
- }
- }
- },
- tooltip: {
- trigger: 'axis',
- // formatter: function(params) {
- // if(typeShow == 'play_duration_3s'){
- // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
- // }else{
- // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
- // }
-
- // },
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- legend: {
- icon: 'circle',
- top: '5%',
- right: '5%',
- itemWidth: 6,
- itemGap: 20,
- textStyle: {
- color: '#556677'
- }
- },
- xAxis: {
- type: 'category',
- data: data.map(item => {
- return item.statDate;
- }),
- boundaryGap: false,
- // 坐标轴线
- axisLine: {
- show: false,
- lineStyle: {
- color: '#999'
- }
- },
- // 分割线
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#e5e5e5'
- }
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- show: false,
- lineStyle: {
- color: '#999'
- }
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#e5e5e5'
- }
- }
- },
- series: [
- {
- smooth: true,
- name: typeShow == 'cost'?'消耗':typeShow == 'aclick'?'曝光数':typeShow == 'active'?'激活数':'3S播放率',
- type: 'line',
- stack: '总量',
- data: data.map(item => {
- switch (typeShow) {
- case 'cost':
- return item.cost.toFixed(3);
- break;
- case 'aclick':
- return item.aclick
- break;
- case 'active':
- return item.active
- break;
- case 'play_duration_3s':
- return item.play_duration_3s.slice(0,item.play_duration_3s.length-1)
- break;
- }
-
- }),
- symbol: 'circle',
- symbolSize: 6,
- lineStyle: {
- normal: {
- width: 2
- }
- },
- itemStyle: {
- borderColor: '#ffffff',
- borderWidth: 0
- }
- }
- ]
- };
- return option;
- },
- handlerAgeOption(data) {
- const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'];
- let option = {
- color: colorList,
- backgroundColor: '#fff',
- tooltip: {
- formatter: '{b}:{c}'
- },
- legend: {
- orient: 'horizontal',
- top: 'top',
- icon: 'circle',
- width: '100%',
- data: ['形式标签', '场景标签', '基调标签', '其他']
- },
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%', '50%'],
- data: [
- {value: 0, name: '形式标签'},
- {value: 0, name: '基调标签'},
- {value: 0, name: '场景标签'},
- {value: 0, name: '其他'}
- ],
- labelLine: {
- length: 5,
- length2: 5
- },
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '18',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: true
- },
- itemStyle: {
- borderRadius: 5,
- color: params => {
- return colorList[params.dataIndex];
- }
- }
- }
- ]
- };
- return option;
- },
- disabledDate(current) {
- return current && current > moment().subtract(1, 'days');
- },
- mediaDimensionChange(e) {
- if (e.target.value === 'b') {
- this.materialRankValue = 0;
- }
- else {
- this.materialRankValue = '';
- }
- this.dataDimensionList = [];
- this.dataDimensionValue = [];
- this.getProjectList();
- },
- },
- mounted() {
- this.clientWidth = document.documentElement.clientWidth - 224;
- this.$nextTick(() => {
- this.getProjectList();
- this.getData();
- });
- },
- activated() {
- this.$nextTick(() => {
- this.clientWidth = document.documentElement.clientWidth - 224;
- });
- }
- };
- </script>
- <style lang="less" scoped>
- .materialReport {
- .material-report-card {
- height: 220px;
- ::v-deep .ant-card-head {
- border: none;
- }
- ::v-deep .ant-card-body {
- padding-top: 5px;
- }
- .report-card-result {
- height: 88px;
- }
- .report-card-money {
- font-size: 30px;
- font-weight: bold;
- }
- .report-card-msg {
- display: flex;
- justify-content: space-between;
- font-size: 14px;
- margin-top: 20px;
- }
- .report-card-line {
- width: 100%;
- height: 1px;
- margin-top: 20px;
- background: #e8e8e8;
- }
- .report-card-radio {
- display: flex;
- justify-content: space-between;
- margin-top: 12px;
- font-size: 14px;
- }
- }
- .option {
- background: white;
- padding: 20px;
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
- .item {
- margin-right: 15px;
- margin-bottom: 15px;
- height: 32px;
- line-height: 32px;
- flex-shrink: 0;
- span {
- margin-right: 10px;
- }
- }
- }
- .echart {
- margin-top: 20px;
- padding: 0 20px 20px;
- background: white;
- .echart-header {
- padding: 20px 0;
- font-size: 15px;
- font-weight: 600;
- }
- }
- .tableBody {
- margin-top: 20px;
- }
- }
- </style>
- <style>
- .materialReport .card-containers {
- overflow: hidden !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
- margin-top: -16px !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
- background: #fff !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
- border-color: #fff !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
- border-color: transparent !important;
- background: transparent !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
- border-color: #fff !important;
- background: #fff !important;
- }
- </style>
|