1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624 |
- <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">
- <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="(current) => disabledDate(dateValue, current)"
- style="width: 300px"
- />
- </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"
- :disabled="
- roleCode == 'CompanyManager' &&
- !dataDimensionList.filter((item) => item.companyId == dataDimensionValue)[0]
- .ttDesignId
- "
- >头条</a-radio-button
- >
- </a-radio-group>
- </div>
- <div class="item">
- <span>公司</span>
- <a-select
- v-model="dataDimensionValue"
- style="width: 300px; margin-left: 10px"
- :filterOption="filterOption"
- showSearch
- allowClear
- :disabled="roleCode == 'CompanyManager'"
- >
- <a-select-option
- v-for="(item, index) in dataDimensionList"
- :key="index + 1"
- :value="item.companyId"
- :disabled="mediaDimension == 'a' && !item.ttDesignId"
- >
- {{ item.companyName }}
- </a-select-option>
- </a-select>
- </div>
- </div>
- <div class="item" style="float: right">
- <a-button :loading="searchLoading" type="primary" @click="handleSubmit"> 搜索 </a-button>
- <a-button
- :disabled="spinning"
- :loading="resetLoading"
- style="margin-left: 15px"
- @click="resetSubmit"
- >
- 重置
- </a-button>
- <a-button type="primary" style="margin-left: 15px" @click="dataKanBan">数据看板</a-button>
- </div>
- </div>
- </div>
- <a-row :gutter="24" style="margin-top: 20px">
- <a-col :span="16">
- <a-row :gutter="24">
- <a-col :span="12">
- <a-spin :spinning="spinning">
- <a-card class="material-report-card">
- <span slot="title"> 素材产出数量 </span>
- <div v-if="materialManyVisible">
- <div
- id="accountIndexEchartOnePie"
- ref="accountIndexEchartOnePie"
- style="width: 90%; height: 300px; margin-right: 20px"
- :style="{ width: clientWidth / 3 - 48 - 24 + 'px' }"
- ></div>
- </div>
- <a-list v-else :data-source="[]" />
- </a-card>
- </a-spin>
- </a-col>
- <a-col :span="12">
- <a-spin :spinning="spinningChart">
- <a-card class="material-report-card">
- <span slot="title"> 运营消耗情况 </span>
- <div style="width: 100%; display: flex">
- <div style="width: 100%">
- <div v-if="operateVisible && barTotal > 0">
- <div
- id="operateEchartBar"
- ref="operateEchartBar"
- style="width: 100%; height: 240px; margin-right: 20px"
- :style="{ width: clientWidth / 3 - 48 - 24 + 'px' }"
- ></div>
- </div>
- <a-list v-else :data-source="[]" />
- </div>
- </div>
- </a-card>
- </a-spin>
- </a-col>
- </a-row>
- <a-row :gutter="24" style="margin-top: 24px">
- <a-col :span="12">
- <a-spin :spinning="spinningChartPie">
- <a-card class="material-report-card">
- <span slot="title"> 素材产出消耗 </span>
- <div v-if="materialPieVisible">
- <div
- id="materialPie"
- ref="materialPie"
- style="width: 90%; height: 300px; margin-right: 20px"
- :style="{ width: clientWidth / 3 - 48 - 24 + 'px' }"
- ></div>
- </div>
- <a-list v-else :data-source="[]" />
- </a-card>
- </a-spin>
- </a-col>
- <a-col :span="12">
- <a-spin :spinning="spinningTarget">
- <a-card class="material-report-card">
- <span slot="title"> 本月消耗完成度 </span>
- <div style="width: 100%; display: flex">
- <div style="width: 50%">
- <div v-if="completeEchart">
- <div
- style="
- width: 90%;
- height: 300px;
- margin-right: 20px;
- display: flex;
- justify-content: center;
- align-items: center;
- "
- >
- <a-tooltip :title="totalConsume" slot="action">
- <a-progress
- type="dashboard"
- :percent="completePercent"
- :width="160"
- style="margin-top: -40px"
- />
- </a-tooltip>
- </div>
- </div>
- <a-list v-else :data-source="[]" />
- </div>
- <div
- style="width: 50%; display: flex; justify-content: center; align-items: center"
- >
- <a-input
- addon-before="本月目标"
- style="margin-top: -40px"
- v-model="completeEchartValue"
- >
- <a slot="addonAfter" @click="okValue">确定</a>
- </a-input>
- </div>
- </div>
- </a-card>
- </a-spin>
- </a-col>
- </a-row>
- <a-row :gutter="24" style="margin-top: 24px">
- <a-col :span="24">
- <a-spin :spinning="spinningMedio">
- <a-card class="material-report-card">
- <span slot="title"> 分媒体投放数据 </span>
- <div v-if="medioDataVisible && medioKsData.length > 0">
- <div
- id="medioDataLine"
- ref="medioDataLine"
- style="width: 90%; height: 300px; margin-right: 20px"
- :style="{ width: clientWidth * 0.6 - 48 - 24 + 'px' }"
- ></div>
- </div>
- <a-list v-else :data-source="[]" />
- </a-card>
- </a-spin>
- </a-col>
- </a-row>
- </a-col>
- <a-col :span="8">
- <a-row :gutter="24">
- <a-col :span="24">
- <a-spin :spinning="spinningAllData">
- <a-card class="material-report-card" style="height: 492px">
- <span slot="title"> 整体数据概览 </span>
- <div v-if="allData" style="margin-top: 10px">
- <h4>今日消耗</h4>
- <p
- style="
- width: 90%;
- display: flex;
- justify-content: space-between;
- font-weight: bold;
- margin-left: 5%;
- "
- >
- <span style="font-size: 36px; color: rgb(245, 178, 62)">{{
- allData.cost | decimalsHandle
- }}</span
- ><span style="position: relative; top: 20px">
- <img
- style="width: 20px; position: absolute; right: 70px"
- src="./assets/shang.png"
- alt=""
- v-if="allData.costRatio > 0"
- />
- <!-- TODO 这个是下降的样式,后续优化 -->
- <img
- style="width: 20px; position: absolute; right: 70px"
- src="./assets/xia.png"
- alt=""
- v-else
- />
- {{ allData.costRatio }}%</span
- >
- </p>
- <h4>今日基建数</h4>
- <p
- style="
- width: 90%;
- display: flex;
- justify-content: space-between;
- font-weight: bold;
- margin-left: 5%;
- "
- >
- <span style="font-size: 24px; color: rgb(33, 105, 254)">{{
- allData.groupNum + '个'
- }}</span
- ><span style="position: relative; top: 20px">
- <img
- style="width: 20px; position: absolute; right: 70px"
- src="./assets/shang.png"
- alt=""
- v-if="allData.unitRatio > 0"
- />
- <!-- TODO 这个是下降的样式,后续优化 -->
- <img
- style="width: 20px; position: absolute; right: 70px"
- src="./assets/xia.png"
- alt=""
- v-else
- />
- {{ allData.unitRatio }}%</span
- >
- </p>
- <h4>今日素材产出</h4>
- <p
- style="
- width: 90%;
- display: flex;
- justify-content: space-between;
- font-weight: bold;
- margin-left: 5%;
- "
- >
- <span style="font-size: 24px; color: rgb(232, 84, 65)">{{
- allData.materialNum + '个'
- }}</span
- ><span style="position: relative; top: 20px">
- <img
- style="width: 20px; position: absolute; right: 70px"
- src="./assets/shang.png"
- alt=""
- v-if="allData.materialRatio > 0"
- />
- <!-- TODO 这个是下降的样式,后续优化 -->
- <img
- style="width: 20px; position: absolute; right: 70px"
- src="./assets/xia.png"
- alt=""
- v-else
- />{{ allData.materialRatio }}%</span
- >
- </p>
- <h4>人效比</h4>
- <p
- style="
- width: 90%;
- display: flex;
- justify-content: space-between;
- font-weight: bold;
- margin-left: 5%;
- "
- >
- <span style="font-size: 24px; color: rgb(132, 119, 246)">{{
- allData.renXiao
- }}</span>
- </p>
- </div>
- <a-list v-else :data-source="[]" />
- </a-card>
- </a-spin>
- </a-col>
- <a-col :span="24" style="margin-top: 24px">
- <a-spin :spinning="spinningTop">
- <a-card class="material-report-card" style="height: 492px">
- <span slot="title"> 项目消耗Top10 </span>
- <a-radio-group v-model="topType" @change="topTypeChange" slot="extra">
- <a-radio-button value="b">柱形图</a-radio-button>
- <a-radio-button value="a">表格</a-radio-button>
- </a-radio-group>
- <div style="margin-top: 10px">
- <div v-if="topType == 'b'">
- <div v-if="topVisible && topData.length > 0">
- <div
- id="topEcharts"
- ref="topEcharts"
- style="width: 100%; height: 380px; margin-right: 20px"
- :style="{ width: clientWidth / 3 - 48 - 24 + 'px' }"
- ></div>
- </div>
- <a-list v-else :data-source="[]" />
- </div>
- <a-table
- bordered
- :columns="columns"
- :data-source="topData"
- v-else
- :pagination="false"
- :scroll="{ y: 300 }"
- >
- </a-table>
- </div>
- </a-card>
- </a-spin>
- </a-col>
- </a-row>
- </a-col>
- </a-row>
- </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 columns = [
- {
- title: '项目名称',
- dataIndex: 'projectName',
- },
- {
- title: '消耗',
- dataIndex: 'allCost',
- },
- {
- title: '基建数',
- dataIndex: 'adNum',
- },
- ]
- function getDaysBetween(dateString1, dateString2) {
- var startDate = Date.parse(dateString1)
- var endDate = Date.parse(dateString2)
- if (startDate > endDate) {
- return 0
- }
- if (startDate == endDate) {
- return 1
- }
- var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000)
- return days + 1
- }
- function getArrayValue(array, key) {
- var key = key || 'value'
- var res = []
- if (array) {
- array.forEach(function (t) {
- res.push(t[key])
- })
- }
- return res
- }
- function array2obj(array, key) {
- var resObj = {}
- for (var i = 0; i < array.length; i++) {
- resObj[array[i][key]] = array[i]
- }
- return resObj
- }
- function getData(data, sumValue) {
- var res = {
- series: [],
- yAxis: [],
- }
- for (let i = 0; i < data.length; i++) {
- res.series.push({
- type: 'pie',
- clockWise: false, //顺时加载
- hoverAnimation: false, //鼠标移入变大
- radius: [73 - i * 15 + '%', 65 - i * 15 + '%'],
- center: ['25%', '55%'],
- label: {
- show: false,
- },
- itemStyle: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- borderWidth: 5,
- },
- data: [
- {
- value: (data[i].value * 0.75).toFixed(3),
- name: data[i].name,
- },
- {
- value: sumValue - (data[i].value * 0.75).toFixed(3),
- name: '',
- itemStyle: {
- color: 'rgba(0,0,0,0)',
- borderWidth: 0,
- },
- tooltip: {
- show: false,
- },
- hoverAnimation: false,
- },
- ],
- })
- res.series.push({
- name: '',
- type: 'pie',
- silent: true,
- z: 1,
- clockWise: false, //顺时加载
- hoverAnimation: false, //鼠标移入变大
- radius: [73 - i * 15 + '%', 65 - i * 15 + '%'],
- center: ['25%', '55%'],
- label: {
- show: false,
- },
- itemStyle: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- borderWidth: 5,
- },
- data: [
- {
- value: 7.5,
- itemStyle: {
- color: '#E3F0FF',
- borderWidth: 0,
- },
- tooltip: {
- show: false,
- },
- hoverAnimation: false,
- },
- {
- value: 2.5,
- name: '',
- itemStyle: {
- color: 'rgba(0,0,0,0)',
- borderWidth: 0,
- },
- tooltip: {
- show: false,
- },
- hoverAnimation: false,
- },
- ],
- })
- res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%')
- }
- return res
- }
- export default {
- components: {
- YoutTable,
- ChartCard,
- Trend,
- },
- data() {
- return {
- userInfoId: false,
- roleCode: localStorage.getItem('roleCode'),
- noImg: require('@/assets/noImg.png'),
- spinning: false,
- spinningChart: false,
- spinningChartPie: false,
- spinningTarget: false,
- spinningMedio: false,
- spinningAllData: false,
- spinningTop: false,
- loading: false,
- columns,
- materialManyVisible: true, //素材产出数量饼图展示
- pieData: [], //素材产出数量饼图数据
- pieTotal: null, //素材产出数量饼图总数
- operateVisible: true, //运营消耗情况
- barData: [],
- barTotal: null,
- materialPieVisible: false,
- materialPieData: [],
- materialPieTotal: null,
- completeEchart: true,
- completeEchartValue: 0,
- completePercent: 0,
- totalConsume: 0,
- medioDataVisible: false,
- medioKsData: [],
- medioTtData: [],
- allData: null,
- topVisible: false,
- topType: 'b',
- topData: [],
- 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(3, 'months'), moment().subtract(1, 'days')],
- },
- dateValue: [moment(), moment()],
- dataDimension: 'a',
- mediaDimension: 'b',
- dataDimensionValue: undefined,
- dataDimensionList: [],
- specificLoading: false,
- clientWidth: 0,
- resetLoading: false,
- searchLoading: false,
- spinningPopularVideoList: false,
- }
- },
- watch: {},
- methods: {
- ...mapGetters(['userInfo']),
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- dataKanBan() {
- const a = document.createElement('a')
- document.body.appendChild(a)
- a.style.display = 'none'
- a.href = 'http://adsp.c-top.com.cn/boss-data-kanban'
- a.target = '_blank'
- a.click()
- document.body.removeChild(a)
- },
- getData() {
- if (!!this.dataDimensionValue) {
- this.getMetarialList()
- this.getOperateList()
- this.getMaterialConsumeData()
- this.getMedioData()
- this.getTotalConsume()
- this.getRealTimeData()
- this.getRealTimeData()
- this.getTopTenData()
- this.searchLoading = false
- this.resetLoading = false
- } else {
- this.$message.error('请先选择公司')
- }
- },
- getProjectList() {
- this.specificLoading = true
- return new Promise((resolve, reject) => {
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getCompanyList').then(
- (res) => {
- this.specificLoading = false
- if (res.success) {
- this.dataDimensionList = res.result
- 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
- }
- },
- handleSubmit() {
- if (!!this.dataDimensionValue) {
- this.searchLoading = true
- this.resetLoading = true
- if (this.dateValue.length == 2) {
- var between = getDaysBetween(this.dateValue[0], this.dateValue[1])
- if (between > 90) {
- this.$message.error('时间选择不可超过90天')
- } else {
- this.topType = 'b'
- this.getData()
- }
- } else {
- this.$message.error('时间未选择')
- }
- } else {
- this.$message.error('请先选择公司')
- }
- },
- resetSubmit() {
- this.dataDimension = 'a'
- this.mediaDimension = 'b'
- this.topType = 'b'
- this.resetLoading = true
- this.getUserCampany().then((res) => {
- this.dateValue = [moment(), moment()]
- 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)
- // if (idName === 'materialPie') {
- // var i = 0
- // // myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: i }) //设置默认选中高亮部分
- // setInterval(function () {
- // i++
- // if (i == optionName.series[0].data.length) {
- // i = 0
- // }
- // myChart.dispatchAction({
- // type: 'downplay',
- // seriesIndex: 0,
- // dataIndex: i == 0 ? optionName.series[0].data.length-2 : i - 1,
- // })
- // myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: i == optionName.series[0].data.length ? 0 : i }) //设置默认选中高亮部分
- // }, 1000)
- // }
- window.addEventListener('resize', function () {
- that.clientWidth = document.documentElement.clientWidth - 224
- myChart.resize()
- })
- }
- },
- disabledDate(dateValue, current) {
- // .subtract(1, 'days')
- var startDate = dateValue[0] ? dateValue[0]._d : ''
- return (current && current > moment()) || (current && current < moment(startDate).subtract(90, 'days'))
- },
- mediaDimensionChange(e) {
- if (this.roleCode == 'admin') {
- this.dataDimensionValue = ''
- }
- },
- getUserCampany() {
- var params = {}
- params.userId = this.userInfo().id
- return new Promise((resolve, reject) => {
- this.getAction('/system/userCompany/queryCompanyByUserId', params).then((res) => {
- if (res.success) {
- this.dataDimensionValue = res.result
- resolve()
- } else {
- reject()
- }
- })
- })
- },
- parameterData() {
- var params = {}
- params.startTime = params.startTime =
- this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
- params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
- params.companyId = this.dataDimensionValue
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- return params
- },
- //素材产出数量
- getMetarialList() {
- // http://localhost:7006/material/manager/company/getMaterialProduce
- this.spinning = true
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getMaterialProduce', {
- ...this.parameterData(),
- }).then((res) => {
- this.spinning = false
- if (res.code == 200) {
- if (res.result) {
- var servicedata = res.result.list
- if (servicedata.length > 0) {
- this.materialManyVisible = true
- this.pieData = []
- let num = 0
- for (var i = 0; i < servicedata.length; i++) {
- var obj = new Object()
- obj.name = servicedata[i].depart_name
- obj.value = servicedata[i].count
- this.pieData[i] = obj
- }
- this.pieTotal = res.result.total
- this.$nextTick(() => {
- this.initEchart(
- 'accountIndexEchartOnePie',
- this.initPieOneData(this.pieData, this.pieTotal)
- )
- })
- } else {
- this.materialManyVisible = false
- }
- } else {
- this.pieData = []
- this.materialManyVisible = false
- }
- }
- })
- },
- // 素材产出数量饼图
- initPieOneData(pieData, pieTotal) {
- const list = pieData
- let option = {
- tooltip: {
- trigger: 'item',
- formatter: function (obj) {
- return (
- obj.name +
- ':' +
- obj.value +
- '(' +
- Math.round(pieTotal == 0 ? 0 : (obj.value / pieTotal) * 100) +
- '%)'
- )
- },
- },
- legend: {
- top: '20%',
- orient: 'vertical',
- right: '0%',
- textStyle: {
- //图例文字的样式
- fontSize: 12,
- },
- itemGap: 20,
- itemWidth: 15,
- itemHeight: 10,
- padding: [-45, 0, 0, 80],
- bottom: '55%',
- formatter: function (name) {
- //该函数用于设置图例显示后的百分比
- var data = list
- var total = 0
- var value
- list.forEach((item) => {
- if (item.name == name) {
- value = item.value
- }
- })
- var p = pieTotal == 0 ? 0 : Math.round((value / pieTotal) * 100) //求出百分比
- return p >= 10
- ? p == 11
- ? `${name} ${'|'} ${value} ${p}% `
- : `${name} ${'|'} ${value} ${p}% `
- : `${name} ${'|'} ${value} ${p}% ` //返回出图例所显示的内容是名称+百分比
- },
- },
- color: ['#016DDA', '#23A0E4', '#51C0F0', '#6BE0E0', '#24DFBE', '#04E893'],
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['65%', '75%'],
- avoidLabelOverlap: false,
- hoverAnimation: true,
- silent: false,
- itemStyle: {
- borderRadius: 10,
- borderColor: 'white',
- borderWidth: 2,
- },
- label: {
- show: true,
- position: 'center',
- fontSize: 16,
- formatter: function (param) {
- return pieTotal + '\r\n\r\n素材总数'
- },
- textStyle: {
- fontSize: 16,
- color: 'black',
- },
- },
- left: 0,
- right: '50%',
- top: 0,
- bottom: '20%',
- animation: false,
- labelLine: {
- show: false,
- },
- data: list,
- },
- {
- name: '',
- type: 'pie',
- radius: ['50%', '60%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- colorBy: 'series',
- silent: false,
- itemStyle: {
- borderRadius: 10,
- borderColor: 'white',
- borderWidth: 2,
- color: '#f2f2f2',
- // normal: { color: '#f2f2f2' },
- emphasis: { color: '#f2f2f2' },
- },
- label: {
- show: true,
- position: 'center',
- fontSize: 16,
- formatter: function (param) {
- return pieTotal + '\r\n\r\n素材总数'
- },
- textStyle: {
- fontSize: 16,
- color: 'black',
- },
- },
- left: 0,
- right: '50%',
- top: 0,
- bottom: '20%',
- animation: false,
- labelLine: {
- show: false,
- },
- data: list,
- },
- ],
- }
- return option
- },
- //运营消耗情况
- getOperateList() {
- this.spinningChart = true
- this.operateVisible = false
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getOperaterConsume', {
- ...this.parameterData(),
- }).then((res) => {
- this.spinningChart = false
- if (res.code == 200) {
- if (res.result) {
- var servicedata = res.result.list
- if (servicedata.length > 0) {
- this.operateVisible = true
- this.barData = []
- let num = 0
- for (var i = 0; i < servicedata.length; i++) {
- var obj = new Object()
- obj.name = servicedata[i].depart_name
- obj.value = servicedata[i].charge
- // obj.charge = servicedata[i].charge
- this.barData[i] = obj
- }
- this.barTotal = res.result.totalCharge
- this.$nextTick(() => {
- this.initEchart(
- 'operateEchartBar',
- this.initOperateEchartBarData(this.barData, this.barTotal)
- )
- })
- } else {
- this.operateVisible = false
- }
- } else {
- this.operateVisible = false
- }
- }
- })
- },
- //柱状图
- // operateEchartBar
- initOperateEchartBarData(barData, barTotal) {
- var data = barData
- var arrName = getArrayValue(data, 'name')
- var arrValue = getArrayValue(data, 'value')
- var sumValue = eval(arrValue.join('+'))
- var objData = array2obj(data, 'name')
- var optionData = getData(data, sumValue)
- var option = {
- backgroundColor: '#fff',
- legend: {
- show: true,
- top: 'center',
- left: '55%',
- itemGap: 20,
- itemWidth: 15,
- itemHeight: 10,
- data: arrName,
- padding: [0, 5],
- formatter: function (name) {
- return '{title|' + name + '} | {value|' + (objData[name].value / 10000).toFixed(2) + 'w}'
- },
- textStyle: {
- rich: {
- title: {
- fontSize: 12,
- color: 'rgba(0,0,0,.85)',
- },
- value: {
- fontSize: 12,
- color: 'rgba(0,0,0,.85)',
- },
- },
- },
- },
- tooltip: {
- show: true,
- trigger: 'item',
- formatter: function (name) {
- return `${name.name}:${(name.value / 0.75).toFixed(3)}(${(
- (name.value / 0.75 / sumValue) *
- 100
- ).toFixed(2)}%)`
- },
- },
- color: ['#016DDA', '#23A0E4', '#51C0F0', '#6BE0E0', '#24DFBE', '#04E893'],
- grid: {
- top: '18%',
- bottom:
- barData.length == 5
- ? '48%'
- : barData.length == 3
- ? '60%'
- : barData.length == 4
- ? '54%'
- : barData.length == 2
- ? '66%'
- : barData.length == 1
- ? '72%'
- : '48%',
- left: '25%',
- containLabel: false,
- },
- yAxis: [
- {
- type: 'category',
- inverse: true,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- inside: true,
- textStyle: {
- color: '#000',
- fontSize: 10,
- },
- show: true,
- },
- data: optionData.yAxis,
- },
- ],
- xAxis: [
- {
- show: false,
- },
- ],
- series: optionData.series,
- }
- return option
- },
- //素材产出消耗
- getMaterialConsumeData() {
- this.spinningChartPie = true
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getMaterialProduceConsume', {
- ...this.parameterData(),
- }).then((res) => {
- this.spinningChartPie = false
- if (res.code == 200) {
- if (res.result) {
- var servicedata = res.result.list
- if (servicedata.length > 0) {
- this.materialPieVisible = true
- this.materialPieData = []
- let num = 0
- for (var i = 0; i < servicedata.length; i++) {
- var obj = new Object()
- obj.name = servicedata[i].depart_name
- obj.value = servicedata[i].charge
- this.materialPieData[i] = obj
- }
- this.materialPieTotal = res.result.totalCharge
- this.$nextTick(() => {
- this.initEchart(
- 'materialPie',
- this.initPieConsumeData(this.materialPieData, this.materialPieTotal)
- )
- })
- } else {
- this.materialPieVisible = false
- }
- } else {
- this.materialPieVisible = false
- }
- }
- })
- },
- // 素材产出消耗饼图
- initPieConsumeData(pieData, pieTotal) {
- const list = pieData
- let option = {
- tooltip: {
- trigger: 'item',
- formatter: function (obj) {
- if (pieTotal == 0) {
- return obj.name + ':' + obj.value + '(0%)'
- } else {
- return obj.name + ':' + obj.value + '(' + Math.round((obj.value / pieTotal) * 100) + '%)'
- }
- },
- },
- legend: {
- top: '20%',
- orient: 'vertical',
- right: '0%',
- textStyle: {
- //图例文字的样式
- fontSize: 12,
- },
- icon: 'circle',
- itemStyle: {
- borderCap: 'round',
- },
- itemGap: 20,
- itemWidth: 15,
- itemHeight: 10,
- padding: [-45, 0, 0, 80],
- bottom: '55%',
- formatter: function (name) {
- //该函数用于设置图例显示后的百分比
- var data = list
- var total = 0
- var value
- list.forEach((item) => {
- total += item.value
- if (item.name == name) {
- value = item.value
- }
- })
- var p = total == 0 ? 0 : Math.round((value / total) * 100) //求出百分比
- return p >= 10
- ? p == 11
- ? `${name} ${'|'} ${p}% `
- : `${name} ${'|'} ${p}% `
- : `${name} ${'|'} ${p}% ` //返回出图例所显示的内容是名称+百分比
- },
- },
- color: ['#FF3300', '#FFCC00', '#6600FF', '#3399FF', '#66FFFF', '#66CC99'],
- series: [
- {
- type: 'pie',
- radius: ['65%', '75%'],
- avoidLabelOverlap: false,
- hoverAnimation: true,
- itemStyle: {
- borderRadius: 10,
- borderColor: '#fff',
- borderWidth: 2,
- },
- // label: {
- // show: false,
- // position: 'center',
- // formatter: function (name) {
- // return name.value
- // },
- // color: 'black',
- // },
- label: {
- show: true,
- position: 'center',
- fontSize: 16,
- formatter: function (param) {
- return (pieTotal / 10000).toFixed(2) + 'w' + '\r\n\r\n素材总消耗'
- },
- textStyle: {
- fontSize: 16,
- color: 'black',
- },
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '16',
- },
- },
- left: 0,
- right: '50%',
- top: 0,
- bottom: '20%',
- labelLine: {
- show: false,
- },
- data: list,
- },
- ],
- }
- return option
- },
- getMedioData() {
- this.spinningMedio = true
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getMediaData', {
- companyId: this.parameterData().companyId,
- }).then((res) => {
- this.spinningMedio = false
- if (res.code == 200) {
- if (res.result) {
- this.medioDataVisible = true
- this.medioKsData = res.result.ksdata
- this.medioTtData = res.result.ttdate
- this.$nextTick(() => {
- this.initEchart('medioDataLine', this.initmedioData(this.medioKsData, this.medioTtData))
- })
- } else {
- this.medioDataVisible = false
- }
- }
- })
- },
- initmedioData(ksdata, ttdata) {
- let option = {
- title: {
- text: '',
- },
- color: ['rgb(253,63,152)', 'rgb(102,128,255)', '#FBE6F3', '#E9EDFF', '#8A2BE2', '#3CB371'],
- tooltip: {},
- tooltip: {
- trigger: 'axis',
- position: function (pt) {
- return [pt[0], '10%']
- },
- },
- legend: {
- data: ['快手', '头条'],
- textStyle: {
- fontSize: 12,
- color: '#B0C4DE',
- },
- left: '0%',
- },
- grid: {
- left: 0,
- right: 0,
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- show: false,
- data: ksdata.map((item) => {
- return item.statDate
- }),
- axisLabel: {
- show: true,
- textStyle: {
- color: '#B0C4DE',
- },
- },
- axisLine: {
- //x轴线
- show: true,
- lineStyle: {
- color: '#B0C4DE',
- },
- },
- },
- yAxis: {
- type: 'value',
- show: false,
- axisLabel: {
- show: true,
- textStyle: {
- color: '#B0C4DE',
- },
- },
- axisLine: {
- //x轴线
- show: true,
- lineStyle: {
- color: '#B0C4DE',
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#B0C4DE',
- },
- },
- },
- series: [
- {
- name: '快手',
- type: 'line',
- data: ksdata.map((item) => {
- return item.allCost
- }),
- areaStyle: {
- color: '#FBE6F3',
- },
- smooth: true,
- symbol: 'circle',
- symbolSize: 3,
- },
- {
- name: '头条',
- type: 'line',
- data: ttdata.map((item) => {
- return item.allCost
- }),
- areaStyle: {
- color: '#E9EDFF',
- },
- smooth: true,
- symbol: 'circle',
- symbolSize: 3,
- },
- ],
- }
- return option
- },
- //查询本月总消耗
- getTotalConsume() {
- this.spinningTarget = true
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getTotalConsume', {
- companyId: this.parameterData().companyId,
- mediaId: this.parameterData().mediaId,
- }).then((res) => {
- this.spinningTarget = false
- if (res.code == 200) {
- if (res.result.targetValue) {
- this.completeEchartValue = parseFloat(res.result.targetValue)
- if (parseFloat(res.result.totalConsume) > parseFloat(res.result.targetValue)) {
- this.completePercent = 100
- } else {
- this.completePercent =
- (parseFloat(res.result.totalConsume) / parseFloat(res.result.targetValue)).toFixed(2) *
- 100
- }
- this.totalConsume = parseFloat(res.result.totalConsume)
- } else {
- this.completePercent = 0
- this.totalConsume = parseFloat(res.result.totalConsume)
- this.completeEchartValue = 0
- }
- }
- })
- },
- okValue() {
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/setConsumeValue', {
- companyId: this.parameterData().companyId,
- mediaId: this.parameterData().mediaId,
- targetValue: this.completeEchartValue,
- }).then((res) => {
- if (res.code == 200) {
- this.getTotalConsume()
- } else {
- this.$message.error('设置失败')
- }
- })
- },
- getRealTimeData() {
- this.spinningAllData = true
- this.allData = null
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getRealTimeData', {
- companyId: this.parameterData().companyId,
- mediaId: this.parameterData().mediaId,
- }).then((res) => {
- this.spinningAllData = false
- if (res.code == 200) {
- if (res.result) {
- this.allData = res.result
- } else {
- this.allData = null
- }
- } else {
- this.$message.error(res.message)
- }
- })
- },
- //TOP10
- getTopTenData() {
- this.spinningTop = true
- this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/manager/company/getProjectConsumeTop', {
- ...this.parameterData(),
- }).then((res) => {
- this.spinningTop = false
- if (res.code == 200) {
- var servicedata = res.result
- // if (servicedata.length > 0) {
- this.topVisible = true
- this.topData = res.result
- let num = 0
- this.$nextTick(() => {
- this.initEchart('topEcharts', this.initTopTenData(this.topData))
- })
- // } else {
- // this.topVisible = false
- // }
- }
- })
- },
- initTopTenData(topDataAll) {
- var topData = JSON.parse(JSON.stringify(topDataAll))
- topData = topData.sort(function (a, b) {
- return a.allCost - b.allCost
- })
- var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- },
- grid: {
- left: '0%',
- right: '3%',
- bottom: '3%',
- top: 0,
- containLabel: true,
- },
- color: ['#009726', '#FFA500', '#8A2BE2', '#3CB371'],
- xAxis: {
- type: 'value',
- // boundaryGap: [0, 0.01],
- nameTextStyle: {
- width: 10,
- overflow: 'truncate',
- },
- axisTick: {
- interval: 2,
- },
- axisLabel: {
- show: true,
- interval: 2,
- rotate: 45,
- },
- },
- yAxis: {
- type: 'category',
- data: topData.map((item) => {
- return item.projectName
- }),
- nameTextStyle: {
- width: '10%',
- overflow: 'truncate',
- },
- axisTick: {
- interval: 2,
- },
- },
- series: [
- {
- type: 'bar',
- data: topData.map((item) => {
- return item.allCost
- }),
- showBackground: true,
- backgroundStyle: {
- color: '#E6F5EA',
- },
- barWidth: 15,
- itemStyle: {
- borderRadius: 15,
- },
- },
- ],
- }
- return option
- },
- topTypeChange() {
- if (this.topType == 'b') {
- this.$nextTick(() => {
- this.initEchart('topEcharts', this.initTopTenData(this.topData))
- })
- }
- },
- },
- mounted() {
- this.clientWidth = document.documentElement.clientWidth - 224
- this.$nextTick(() => {
- this.getProjectList()
- this.getUserCampany()
- .then((res) => {
- this.getMetarialList()
- this.getOperateList()
- this.getMaterialConsumeData()
- this.getMedioData()
- this.getTotalConsume()
- this.getRealTimeData()
- this.getRealTimeData()
- this.getTopTenData()
- })
- .catch(() => {
- this.$message.error('未能获取到所属公司,请查看配置后重进页面!')
- })
- // this.getData()
- })
- },
- activated() {
- this.$nextTick(() => {
- this.clientWidth = document.documentElement.clientWidth - 224
- })
- },
- }
- </script>
- <style lang="less" scoped>
- .materialReport {
- .material-report-card-two {
- width: 25%;
- }
- .material-report-card {
- height: 320px;
- ::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>
|