1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798 |
- <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" @change="changeDataDimension">
- <a-radio-button value="a">项目</a-radio-button>
- <a-radio-button value="b" :disabled="groupDisabled">设计组</a-radio-button>
- <a-radio-button value="c">设计人</a-radio-button>
- </a-radio-group>
- <a-select
- v-if="dataDimension != 'c'"
- v-model="dataDimensionValue"
- style="width: 300px; margin-left: 10px"
- :mode="dataDimension === 'a' ? 'multiple' : 'default'"
- :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 }}{{ item.leaderId ? '-' + item.leaderName : '' }}
- </a-select-option>
- </a-select>
- </div>
- </div>
- <div class="item" style="float: right">
- <a-button
- :loading="searchLoading"
- :disabled="dateValue.length == 0 || (dataDimension == 'b' && !dataDimensionValue)"
- 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 class="material-report-card">
- <span slot="title">
- 总消耗
- <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 class="material-report-card">
- <span slot="title">
- 视频上新数
- <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
- >素材使用率:{{
- accountIndexList.useCompare
- ? Number(accountIndexList.useCompare * 100).toFixed(2)
- : '0.00'
- }}%</span
- >
- </div>
- </a-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6">
- <a-card class="material-report-card">
- <span slot="title">
- 有效视频
- <a-tooltip title="筛选时段内上线后一周内消耗大于等于5000的视频总数" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- </span>
- <span slot="extra">
- <a @click="getMoreVideoList('materialQuality')">更多</a>
- </span>
- <!-- <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
- >素材有效率:{{
- accountIndexList.effectiveCompare
- ? Number(accountIndexList.effectiveCompare * 100).toFixed(2)
- : '0.00'
- }}%</span
- >
- </div>
- </a-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6">
- <a-spin :spinning="spinningPopularVideoList">
- <a-card class="material-report-card">
- <span slot="title">
- 爆款视频
- <a-tooltip title="筛选时段内上线后双周消耗大于等于5w的视频总数" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- </span>
- <span slot="extra">
- <a @click="getMoreVideoList('materialType')">更多</a>
- </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> </span>
- <span>
- <a-radio-group v-model="videoType" @change="getPopularVideoData">
- <a-radio-button :value="0">不限</a-radio-button>
- <a-radio-button :value="1">制作</a-radio-button>
- <a-radio-button :value="2">真人</a-radio-button>
- </a-radio-group>
- </span>
- </div>
- </a-card>
- </a-spin>
- </a-col>
- </a-row>
- </a-spin>
- <a-spin :spinning="spinningMaterialGroupData">
- <a-row
- :gutter="24"
- style="margin-top: 20px"
- v-if="dataDimension == 'b' && materialGroupData.avgCost != null"
- >
- <a-col :sm="24" style="display:flex;">
- <a-card class="material-report-card-two" :bordered="false">
- <span slot="title">
- 组内人均消耗
- <a-tooltip title="当前筛选条件下小组人员的平均消耗" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">
- {{ '¥' + decimalsHandle(materialGroupData.avgCost, 2) }}
- </div>
- </div>
- <div class="report-card-line"></div>
- </a-card>
- <a-card class="material-report-card-two" :bordered="false">
- <span slot="title">
- 组人效
- <a-tooltip title="当前筛选条件内的上传视频数 / 组总人数(编导+剪辑+摄像)" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">{{ materialGroupData.peopleWork }}</div>
- </div>
- <div class="report-card-line"></div>
- </a-card>
- <a-card class="material-report-card-two" :bordered="false">
- <span slot="title">
- 创新视频数
- <a-tooltip title="当前筛选条件内的创新视频数" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">{{ materialGroupData.innovativeVideoCount }}</div>
- </div>
- <div class="report-card-line"></div>
- </a-card>
- <a-card
- class="material-report-card-two"
- :bordered="false"
- v-if="materialGroupData.innovativeVideoCost != null"
- >
- <span slot="title">
- 创新视频消耗
- <a-tooltip title="当前筛选条件内的创新视频消耗" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">
- {{ '¥' + decimalsHandle(materialGroupData.innovativeVideoCost, 2) }}
- </div>
- </div>
- <div class="report-card-line"></div>
- </a-card>
- <a-card
- class="material-report-card-two"
- :bordered="false"
- v-if="materialGroupData.avgMaterialCost != null"
- >
- <span slot="title">
- 上新素材平均消耗
- <a-tooltip title="当前筛选条件下小组内的上新素材平均消耗" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- </span>
- <div class="report-card-result">
- <div class="report-card-money">
- {{ '¥' + decimalsHandle(materialGroupData.avgMaterialCost, 2) }}
- </div>
- </div>
- <div class="report-card-line"></div>
- </a-card>
- </a-col>
- </a-row>
- </a-spin>
- <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
- <a-col :xl="18">
- <a-spin :spinning="spinningChart">
- <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-spin>
- </a-col>
- <a-col :xl="6">
- <a-spin :spinning="spinningChartPie">
- <a-card style="width: 100%" :bordered="false">
- <span slot="title">
- 标签占比
- <a-radio-group
- v-model="labelType"
- @change="getLabelDataList"
- size="small"
- style="margin-left:10px"
- >
- <a-radio-button :value="0">素材数</a-radio-button>
- <a-radio-button :value="1">消耗</a-radio-button>
- </a-radio-group>
- </span>
- <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' }"
- >
- <a-empty
- style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
- />
- </div>
- </div>
- </div>
- </a-card>
- </a-spin>
- </a-col>
- </a-row>
- <a-row :gutter="24" style="margin-top: 20px">
- <a-col :xl="12">
- <a-card title="top素材排行榜" style="width: 100%; min-height: 720px" :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.material_id)"
- >
- <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-pagination size="small" :total="50" v-if="designTopList.length > 0" style="visibility:hidden;" />
- </a-card>
- </a-col>
- <a-col :xl="12">
- <a-card title="top设计排行榜" style="width: 100%; min-height: 720px" :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="ipagination"
- 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: 'number',
- align: 'center'
- },
- {
- title: '设计人员',
- dataIndex: 'userName',
- align: 'center'
- },
- {
- title: '角色',
- dataIndex: 'roleName',
- align: 'center'
- },
- {
- title: '消耗(元)',
- dataIndex: 'cost',
- align: 'center',
- scopedSlots: { customRender: 'cost' }
- }
- ]
- const columnsTt = [
- {
- title: '排名',
- dataIndex: 'number',
- align: 'center'
- },
- {
- title: '设计人员',
- dataIndex: 'userName',
- align: 'center'
- },
- {
- title: '消耗(元)',
- dataIndex: 'cost',
- align: 'center',
- scopedSlots: { customRender: 'cost' }
- },
- {
- title: '爆款视频数',
- dataIndex: 'videoHotCount',
- align: 'center'
- }
- ]
- export default {
- components: {
- YoutTable,
- ChartCard,
- Trend
- },
- data() {
- return {
- spinningMaterialGroupData:false,
- ipagination: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- this.getDesignTopList()
- }
- },
- active: 'cost',
- groupDisabled: false,
- timeShowEchartsStatus: true,
- signatureStatus: false,
- materialReportCardList: {},
- materialGroupData: {},
- accountIndexList: {},
- popularVideoList: {},
- materialRankValue: 0,
- designRankingValue: 1,
- designTopLoading: false,
- noImg: require('@/assets/noImg.png'),
- visibleVideo: false,
- videoUrlShow: '',
- cost: '0',
- spinning: false,
- spinningChart: false,
- spinningChartPie: 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')],
- videoType: 0,
- labelType: 0,
- dataDimension: 'a',
- mediaDimension: 'b',
- dataDimensionValue: [],
- dataDimensionList: [],
- specificLoading: false,
- clientWidth: 0,
- resetLoading: false,
- searchLoading: false,
- spinningPopularVideoList: 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.ipagination.current = 1
- 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.getVideoTopList()
- this.getDesignTopList()
- this.getLabelDataList()
- this.getChartDataList()
- if (this.dataDimension == 'b') {
- this.getGroupData()
- }
- Promise.all([this.getSumData(), this.getAccountIndexData(), this.getPopularVideoData()])
- .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(
- process.env.VUE_APP_BASE_MATERIAL_URL +
- '/overView/V2/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
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.dimension =
- this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
- params.userId = this.userInfo().id
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- return new Promise((resolve, reject) => {
- that.postDataAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/sumData', params).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)
- }
- }
- )
- })
- },
- getGroupData() {
- if (this.dataDimension == 'b') {
- this.spinningMaterialGroupData = true
- let that = this
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.userId = this.userInfo().id
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- return new Promise((resolve, reject) => {
- that.postDataAction(
- process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/getDesignerAvgData',
- params
- ).then(res => {
- this.spinningMaterialGroupData = false
- 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.materialGroupData = res.result
- resolve(res.result)
- } else {
- reject(res.message)
- }
- })
- })
- }
- },
- getAccountIndexData() {
- let that = this
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.dimension =
- this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
- params.userId = this.userInfo().id
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- return new Promise((resolve, reject) => {
- that.postDataAction(
- process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/sumDataVideoNewEffective',
- params
- ).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
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.dimension =
- this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
- params.userId = this.userInfo().id
- params.type = this.videoType
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- this.spinningPopularVideoList = true
- return new Promise((resolve, reject) => {
- that.postDataAction(
- process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/sumDataVideoHot',
- params
- ).then(res => {
- this.spinningPopularVideoList = false
- 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))
- },
- getLabelDataList() {
- this.spinningChartPie = true
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.dimension =
- this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
- params.userId = this.userInfo().id
- params.type = this.labelType
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- return new Promise((resolve, reject) => {
- this.postDataAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/labelRatio', params).then(
- res => {
- this.spinningChartPie = false
- if (res.success) {
- if (res.result) {
- this.initEchart('echartCircular', this.handlerAgeOption(res.result))
- } else {
- const myChart = echarts.init(document.getElementById('echartCircular'))
- myChart.dispose()
- this.$nextTick(() => {
- var html =
- '<div class="ant-empty"><div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fillRule="evenodd"><g transform="translate(24 31.67)"><ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path><g transform="translate(149.65 15.383)" fill="#FFF"><ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path></g></g></svg></div><p class="ant-empty-description">暂无数据</p></div>'
- document.getElementById('echartCircular').innerHTML = html
- document.getElementById('echartCircular').removeAttribute('_echarts_instance_')
- })
- }
- resolve(res.result)
- } else {
- reject(res.message)
- }
- }
- )
- })
- },
- getChartDataList() {
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.dimension =
- this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
- params.userId = this.userInfo().id
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- return new Promise((resolve, reject) => {
- this.postDataAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/chartData', params).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
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.dimension =
- this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
- params.userId = this.userInfo().id
- params.channelType = this.materialRankValue
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- return new Promise((resolve, reject) => {
- this.postDataAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/materialTop', params)
- .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(data) {
- localStorage.removeItem('TtmaterialParams')
- localStorage.removeItem('materialParams')
- 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,
- dataDimension: this.dataDimension,
- mediaDimension: this.mediaDimension,
- dateValue: this.dateValue,
- dataDimensionValue: this.dataDimensionValue,
- innovative: '',
- materialType: '',
- materialQuality: ''
- }
- if (data == 'materialQuality') {
- params.materialQuality = 1
- } else if (data == 'materialType') {
- params.materialQuality = 0
- params.materialType = this.videoType == 0 ? '' : this.videoType
- }
- 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
- let params = {}
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.dimension =
- this.dataDimension === 'a' ? 'project' : this.dataDimension === 'b' ? 'designTeam' : 'designer'
- params.userId = this.userInfo().id
- params.type = this.designRankingValue
- params.pageNumber = this.ipagination.current
- params.pageSize = this.ipagination.pageSize
- if (this.dataDimension === 'a') {
- params.projects = this.dataDimensionValue
- } else if (this.dataDimension === 'b') {
- params.leaderId = this.dataDimensionValue
- } else {
- params.designerId = this.userInfo().id
- }
- // 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(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/designTop', params).then(res => {
- if (res.success) {
- this.designTopLoading = false
- this.designTopList = res.result.list
- this.ipagination.total = res.result.total
- } else {
- this.designTopLoading = false
- this.$message.error(this.message)
- }
- })
- },
- getTagProportionAnalyseList() {
- return new Promise((resolve, reject) => {
- this.postDataAction(
- process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/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
- }
- if (this.mediaDimension === 'b') {
- this.columns = [...columnsFixd]
- } else {
- this.columns = [...columnsTt]
- }
- this.videoType = 0
- this.labelType = 0
- this.designRankingValue = 1
- this.ipagination.current = 1
- this.getData()
- },
- resetSubmit() {
- this.resetLoading = true
- this.dateValue = [moment().subtract(7, 'days'), moment()]
- this.dataDimension = 'a'
- this.mediaDimension = 'b'
- this.dataDimensionValue = []
- this.videoType = 0
- this.labelType = 0
- this.designRankingValue = 1
- this.ipagination.current = 1
- 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 that = this
- let option = {
- color: colorList,
- backgroundColor: '#fff',
- tooltip: {
- formatter: function(params) {
- if (that.labelType == 0) {
- return `${params.marker}${params.name}素材数: ${params.value}<br/>
- ${params.marker}${params.name}素材数占比: ${params.percent}%`
- } else {
- return `${params.marker}${params.name}消耗: ${that.decimalsHandle(params.value, 2)}<br/>
- ${params.marker}${params.name}消耗占比: ${params.percent}%`
- }
- }
- },
- legend: {
- orient: 'horizontal',
- top: 'top',
- icon: 'circle',
- width: '100%',
- data: ['真人', '制作', '其他']
- },
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%', '50%'],
- data: [
- { value: data.reality, name: '真人' },
- { value: data.making, name: '制作' },
- { value: data.other, 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')
- },
- changeDataDimension(e) {
- this.materialGroupData = {}
- if (e.target.value == 'c') {
- this.dataDimensionValue = undefined
- } else if (e.target.value == 'b') {
- this.dataDimensionValue = ''
- this.getDesignTeamList()
- } else if (e.target.value == 'a') {
- this.dataDimensionList = []
- this.dataDimensionValue = []
- this.getProjectList()
- }
- },
- getDesignTeamList() {
- this.specificLoading = true
- this.dataDimensionList = []
- var params = {}
- params.mediaId = this.mediaDimension == 'a' ? 1 : 2
- params.userId = this.userInfo().id
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/getDesignTeamList', params).then(
- res => {
- this.specificLoading = false
- if (res.success) {
- this.dataDimensionList = res.result.map(item => {
- return {
- ...item,
- projectId: item.leaderId,
- projectName: item.departName
- }
- })
- let data = this.dataDimensionList.filter(i => {
- return i.default
- })
- if (data.length == 1) {
- this.dataDimensionValue = data[0].projectId
- }
- }
- }
- )
- },
- mediaDimensionChange(e) {
- this.dataDimensionValue = undefined
- if (e.target.value === 'b') {
- this.materialRankValue = 0
- } else {
- this.materialRankValue = ''
- }
- if (this.dataDimension == 'b') {
- this.getDesignTeamList()
- } else {
- this.dataDimensionList = []
- this.dataDimensionValue = []
- this.getProjectList()
- }
- }
- },
- mounted() {
- this.clientWidth = document.documentElement.clientWidth - 224
- this.$nextTick(() => {
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/overView/V2/getRole', {
- userId: this.userInfo().id
- }).then(res => {
- if (res.success) {
- this.groupDisabled = !res.result.permissions
- } else {
- this.groupDisabled = true
- }
- })
- this.getProjectList()
- this.getData()
- })
- },
- activated() {
- this.$nextTick(() => {
- this.clientWidth = document.documentElement.clientWidth - 224
- })
- }
- }
- </script>
- <style lang="less" scoped>
- .materialReport {
- .material-report-card-two {
- width: 25%;
- ::v-deep * {
- border: 0;
- }
- }
- .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>
|