|
@@ -0,0 +1,888 @@
|
|
|
+<style lang="scss" scoped>
|
|
|
+.search-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.search-box p {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.showNumBox{
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+.showNumBox .ant-card-body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.showNumBox p,
|
|
|
+.showNumBox span {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: red;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.search-box .ant-card-body {
|
|
|
+ padding: 5px 15px;
|
|
|
+}
|
|
|
+.showNumBox .ant-card-body .styleElse {
|
|
|
+ line-height: 60px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.yincang .ant-col-6 p {
|
|
|
+ text-align: left;
|
|
|
+ color: red;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.ant-table-thead div {
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.tool-tip {
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang='less'>
|
|
|
+.ant-card-head .ant-tabs-bar{
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.search-box .ant-card-body {
|
|
|
+ padding: 5px 15px;
|
|
|
+
|
|
|
+}
|
|
|
+.search-box{
|
|
|
+ padding: 15px 10px;
|
|
|
+}
|
|
|
+.search-box p {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.statistics .ant-col-6 .ant-card-body .styleElse {
|
|
|
+ line-height: 60px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.yincang .ant-col-6 p {
|
|
|
+ text-align: left;
|
|
|
+ color: red;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.ant-table-thead div {
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.tool-tip {
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+.statistics{
|
|
|
+ .ant-card-bordered {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .ant-card-head .ant-tabs {
|
|
|
+ clear: both;
|
|
|
+ margin-bottom: -13px;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.duibi{
|
|
|
+ position: absolute;
|
|
|
+ right: 24px;
|
|
|
+ top: 15px;
|
|
|
+}
|
|
|
+ p{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.newPlanStatic{
|
|
|
+ .divider{
|
|
|
+ height: 62px;
|
|
|
+ }
|
|
|
+ .showNumBox{
|
|
|
+ background: white;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 15px 0;
|
|
|
+ padding: 30px 0;
|
|
|
+ text-align: center;
|
|
|
+ .ant-card-body{
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 22px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabbody{
|
|
|
+ background: white;
|
|
|
+ padding: 0 24px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ .ant-tabs-bar {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chartBox{
|
|
|
+ background: white;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .tableBody{
|
|
|
+ background: white;
|
|
|
+ padding: 20px ;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="newPlanStatic">
|
|
|
+ <div class="tabbody">
|
|
|
+ <a-tabs v-model="tabKey" @change="tabChange">
|
|
|
+ <a-tab-pane :key="1" tab="头条">
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane :key="2" tab="快手">
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+
|
|
|
+ <a-card :bordered="false" class="search-box">
|
|
|
+ <div style="margin-bottom:20px">
|
|
|
+ <span>项目选择:</span>
|
|
|
+ <a-tree-select
|
|
|
+ v-model="treeValue"
|
|
|
+ show-search
|
|
|
+ style="width: 580px;height:30px"
|
|
|
+ :dropdownMatchSelectWidth='true'
|
|
|
+ :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
|
+ tree-checkable
|
|
|
+ searchPlaceholder='请输入账户关键字搜索'
|
|
|
+ :show-checked-strategy="SHOW_PARENT"
|
|
|
+ placeholder="请选择项目和账户或搜索账户关键字"
|
|
|
+ treeNodeFilterProp="title"
|
|
|
+ :allowClear="true"
|
|
|
+ @change="treeChange"
|
|
|
+ @search="treeSearch"
|
|
|
+ @select="treeSelect"
|
|
|
+ :maxTagCount='1'
|
|
|
+ :tree-data="treeData"
|
|
|
+ :filterOption='filterOption'
|
|
|
+ >
|
|
|
+ </a-tree-select>
|
|
|
+
|
|
|
+ <span style="margin-left:20px">运营:</span>
|
|
|
+ <a-select
|
|
|
+ v-model="operate"
|
|
|
+ show-search
|
|
|
+ placeholder="请输入名字"
|
|
|
+ option-filter-prop="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filter-option="filterOption"
|
|
|
+ @change="operateChange"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in operateList" :key="item.id" :value="item.id">
|
|
|
+ {{item.name}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ <div class="time" @click="opendate" >
|
|
|
+ <datePick :dateValue.sync='dateValue' :type.sync='type' />
|
|
|
+ </div>
|
|
|
+ <!-- <p>对比</p> -->
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row >
|
|
|
+ <div class="showNumBox">
|
|
|
+ <a-col :sm="24" :md="10" :xl="10" :xxl="10">
|
|
|
+ <span class="title">新上计划数</span>
|
|
|
+ <div>
|
|
|
+ <countTo
|
|
|
+ :startVal="0"
|
|
|
+ :endVal="newPlan"
|
|
|
+ :duration="duration"
|
|
|
+ :decimals="0"
|
|
|
+ style="overflow:auto"
|
|
|
+ ></countTo>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="2" :xl="2" :xxl="2">
|
|
|
+ <a-divider type="vertical" class="divider" />
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :sm="24" :md="10" :xl="10" :xxl="10">
|
|
|
+ <span class="title">有效计划数</span>
|
|
|
+ <div>
|
|
|
+ <countTo
|
|
|
+ :startVal="0"
|
|
|
+ :endVal="effectPlan"
|
|
|
+ :duration="duration"
|
|
|
+ :decimals="0"
|
|
|
+ style="overflow:auto"
|
|
|
+ ></countTo>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="chartBox">
|
|
|
+ <a-spin :spinning="echartSpinning">
|
|
|
+ <div id="chart" style="width:100%;height:320px" ref="sectionChart"></div>
|
|
|
+ </a-spin>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-row style="margin-bottom:15px;margin-top:12px">
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="tableBody">
|
|
|
+ <a-tabs v-model="tableTab" @change="tableTabChange">
|
|
|
+ <a-tab-pane :key="1" tab="新上计划数">
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane :key="2" tab="有效计划数">
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <a-table :columns="columns" :dataSource="dataTable" :pagination="false" :loading="loading" bordered>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import datePick from '../components/datePick'
|
|
|
+import { TreeSelect } from 'ant-design-vue';
|
|
|
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
|
+import ARow from 'ant-design-vue/es/grid/Row'
|
|
|
+import ACol from 'ant-design-vue/es/grid/Col'
|
|
|
+import moment from 'moment'
|
|
|
+import countTo from 'vue-count-to'
|
|
|
+import lifting from '../components/lifting'
|
|
|
+import { getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
|
|
|
+import { getAction, postAction } from '@/api/manage'
|
|
|
+
|
|
|
+import timeCheck from '../components/timeCheck'
|
|
|
+
|
|
|
+var upDate
|
|
|
+
|
|
|
+// 引入基本模板
|
|
|
+let echarts = require('echarts/lib/echarts')
|
|
|
+// 引入柱状图组件
|
|
|
+require('echarts/lib/chart/bar')
|
|
|
+require('echarts/lib/chart/pie')
|
|
|
+require('echarts/lib/chart/line')
|
|
|
+// 引入提示框和title组件
|
|
|
+require('echarts/lib/component/tooltip')
|
|
|
+require('echarts/lib/component/title')
|
|
|
+require('echarts/lib/component/graphic')
|
|
|
+require('echarts/lib/component/toolbox')
|
|
|
+require('echarts/lib/component/legend')
|
|
|
+
|
|
|
+let columns=[
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ dataIndex: 'accountName',
|
|
|
+ scopedSlots: { customRender: 'accountName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'accountName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户ID',
|
|
|
+ dataIndex: 'accountId',
|
|
|
+ scopedSlots: { customRender: 'accountId' },
|
|
|
+ align: 'center',
|
|
|
+ key:'accountId'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户所属人',
|
|
|
+ dataIndex: 'people',
|
|
|
+ scopedSlots: { customRender: 'people' },
|
|
|
+ align: 'center',
|
|
|
+ key:'people'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上新计划数',
|
|
|
+ dataIndex: 'newPlan',
|
|
|
+ scopedSlots: { customRender: 'newPlan' },
|
|
|
+ align: 'center',
|
|
|
+ key:'newPlan'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间周期',
|
|
|
+ dataIndex: 'statDate',
|
|
|
+ scopedSlots: { customRender: 'statDate' },
|
|
|
+ align: 'center',
|
|
|
+ key:'statDate'
|
|
|
+
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+let sectionOption={
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器,坐标轴触发有效
|
|
|
+ type: 'line', // 默认为直线,可选为:'line' | 'shadow',
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['新上计划数','有效计划数']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '2%',
|
|
|
+ bottom: '0%',
|
|
|
+ top: '12%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ 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: [
|
|
|
+ {
|
|
|
+ name: '新上计划数',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ symbol: 'circle',
|
|
|
+ color: '#0bcd74',
|
|
|
+ symbolSize: 1,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#0bcd74'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '有效计划数',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: [850, 952, 951, 954, 1250, 1530, 1520],
|
|
|
+ symbol: 'circle',
|
|
|
+ color: '#9933ff',
|
|
|
+ symbolSize: 1,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#9933ff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+
|
|
|
+ components: {
|
|
|
+ ACol,
|
|
|
+ ARow,
|
|
|
+ countTo,
|
|
|
+ lifting,
|
|
|
+ timeCheck,
|
|
|
+ datePick
|
|
|
+ },
|
|
|
+
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ duration: 1000,
|
|
|
+ //treeselect的参数
|
|
|
+ treeValue: [],
|
|
|
+ treeData: [],
|
|
|
+ SHOW_PARENT,
|
|
|
+
|
|
|
+ type:1,
|
|
|
+ dateValue:[moment(), moment()],
|
|
|
+
|
|
|
+ operate:'',
|
|
|
+ operateList:[],
|
|
|
+
|
|
|
+ tabKey:1,
|
|
|
+ sectionOption,
|
|
|
+
|
|
|
+ loading: false,
|
|
|
+ columns ,
|
|
|
+ dataTable: [],
|
|
|
+
|
|
|
+ tableTab:1,
|
|
|
+
|
|
|
+ newPlan:2222,
|
|
|
+ effectPlan:1000,
|
|
|
+
|
|
|
+ echartSpinning:false,
|
|
|
+
|
|
|
+ openOptions:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //项目改变后的事件
|
|
|
+ treeChange(val) {
|
|
|
+ // console.log(this.treeData)
|
|
|
+ console.log(val)
|
|
|
+ this.accountId = [];
|
|
|
+ //选择一个后禁用其他
|
|
|
+ if(val.length==1){
|
|
|
+ if(val[0]*1){
|
|
|
+ let selectindex=0
|
|
|
+ this.treeData.forEach((ele,index)=>{
|
|
|
+ if(ele.children){
|
|
|
+ ele.children.map((item,ind)=>{
|
|
|
+ if(item.value==val[0]){
|
|
|
+ selectindex=index;
|
|
|
+ this.mediaId=ele.mediaId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // console.log(selectindex)
|
|
|
+ if(selectindex ||selectindex==0){
|
|
|
+ this.treeData.forEach((ele,index)=>{
|
|
|
+ if(index!=selectindex){
|
|
|
+ ele.disableCheckbox = true;
|
|
|
+ if(ele.children){
|
|
|
+ ele.children.map((item,ind)=>{
|
|
|
+ item.disableCheckbox = true;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ // console.log(1)
|
|
|
+ this.treeData.forEach((ele,index)=>{
|
|
|
+ if(ele.value!=val[0]){
|
|
|
+ ele.disableCheckbox = true;
|
|
|
+
|
|
|
+ if(ele.children){
|
|
|
+ ele.children.forEach((item,ind)=>{
|
|
|
+ item.disableCheckbox = true;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(ele.value==val[0]){
|
|
|
+ this.mediaId=ele.mediaId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // console.log(this.mediaId)
|
|
|
+ if(this.mediaId=='1'){
|
|
|
+
|
|
|
+ this.discountDisabled=true;
|
|
|
+ this.rebatePropDisabled=false;
|
|
|
+ this.discount=this.rebateProp;
|
|
|
+ }else{
|
|
|
+ this.rebatePropDisabled=true;
|
|
|
+ this.discountDisabled=false;
|
|
|
+ this.discount=this.discountSelect;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(val.length==0){
|
|
|
+ this.treeData.forEach((ele,index)=>{
|
|
|
+ ele.disableCheckbox = false;
|
|
|
+ this.mediaId=ele.mediaId;
|
|
|
+ if(ele.children){
|
|
|
+ ele.children.forEach((item,ind)=>{
|
|
|
+ item.disableCheckbox = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ this.rebatePropDisabled=false;
|
|
|
+ this.discountDisabled=false;
|
|
|
+ this.discount=1.0
|
|
|
+ }
|
|
|
+ if(val){
|
|
|
+ val.forEach((ele,index)=>{
|
|
|
+ if(ele*1){
|
|
|
+ this.accountId.push(ele)
|
|
|
+ }else{
|
|
|
+ let projectArr=this.treeData.filter((item)=>{
|
|
|
+ return item.value==ele
|
|
|
+ });
|
|
|
+ // console.log(projectArr)
|
|
|
+ projectArr[0].children.forEach((element)=>{
|
|
|
+ this.accountId.push(element.value)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.accountId)
|
|
|
+ },
|
|
|
+ treeSearch(){
|
|
|
+ console.log(arguments);
|
|
|
+ },
|
|
|
+ treeSelect(){
|
|
|
+ // console.log(arguments);
|
|
|
+ // this.treeValue=arguments[0].value
|
|
|
+ },
|
|
|
+ disabledDate(current) {
|
|
|
+ // console.log(current)
|
|
|
+
|
|
|
+ return current && current > moment().subtract(1, 'day')
|
|
|
+ },
|
|
|
+ filterOption(input, option){
|
|
|
+ console.log(input, option)
|
|
|
+ return (
|
|
|
+ option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ //打开日期框
|
|
|
+ opendate(){
|
|
|
+ this.openOptions=!this.openOptions;
|
|
|
+ // console.log(this.openOptions)
|
|
|
+ },
|
|
|
+ // 快手头条的切换
|
|
|
+ tabChange(key){
|
|
|
+ console.log(key);
|
|
|
+
|
|
|
+ if(key==1){
|
|
|
+ // toutiao
|
|
|
+
|
|
|
+ }else{
|
|
|
+ // kuaishou
|
|
|
+ }
|
|
|
+ this.accountHttp()
|
|
|
+ },
|
|
|
+ operateChange(value){
|
|
|
+ console.log(value)
|
|
|
+ },
|
|
|
+
|
|
|
+ //初始化chart
|
|
|
+ getEchartData(idName, optionName) {
|
|
|
+ const chart = this.$refs[idName]
|
|
|
+ // console.log(chart)
|
|
|
+ if (chart) {
|
|
|
+ // const myChart = echarts.init(document.getElementById(idName))
|
|
|
+ const myChart = echarts.init(chart)
|
|
|
+ myChart.setOption(optionName)
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ moment,
|
|
|
+ // table区域的tab切换
|
|
|
+ tableTabChange(key){
|
|
|
+
|
|
|
+ },
|
|
|
+ //处理echart
|
|
|
+ sectionHttp(params) {
|
|
|
+ this.loading = true;
|
|
|
+ this.spinning=true;
|
|
|
+ this.sectionOption=JSON.parse(JSON.stringify(sectionOption));
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ postAction('/ctop/byteDance/homePage/report/chart', params).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.loading = false
|
|
|
+ this.spinning=false;
|
|
|
+ //处理今天
|
|
|
+ if(res.result){
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.getEchartData('sectionChart', this.sectionOption);
|
|
|
+
|
|
|
+
|
|
|
+ //处理表格数据
|
|
|
+ let total={
|
|
|
+ statDate:'总计',
|
|
|
+ cost:0,
|
|
|
+ click:0,
|
|
|
+ clickRate:0,
|
|
|
+ costProportion:'-',
|
|
|
+ cp:0,
|
|
|
+ cpm:0,
|
|
|
+ showNum:0
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ var afterData=[];
|
|
|
+ res.result.list.forEach((ele,index)=>{
|
|
|
+ if(ele.afterData){
|
|
|
+ if(!ele.afterData.costProportion){
|
|
|
+ ele.afterData.costProportion='-'
|
|
|
+ }
|
|
|
+ if(ele.afterData.statHour||ele.afterData.statHour==0){
|
|
|
+ ele.afterData.statHour=ele.afterData.statHour > 9 ? `${ele.afterData.statHour}:00` : ` 0${ele.afterData.statHour}:00`
|
|
|
+ ele.afterData.statDate=ele.afterData.statDate+' '+ele.afterData.statHour
|
|
|
+ }
|
|
|
+ ele.afterData.key=index+1
|
|
|
+ total.click+=ele.afterData.click
|
|
|
+ total.cost+=ele.afterData.cost
|
|
|
+ total.showNum+=ele.afterData.showNum;
|
|
|
+ afterData.push(ele.afterData)
|
|
|
+ }else{
|
|
|
+ if(!ele.costProportion){
|
|
|
+ ele.costProportion='-'
|
|
|
+ }
|
|
|
+ if(ele.statHour||ele.statHour==0){
|
|
|
+ ele.statHour=ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
|
|
|
+ ele.statDate=ele.statDate+' '+ele.statHour
|
|
|
+ }
|
|
|
+ ele.key=index+1
|
|
|
+ total.click+=ele.click
|
|
|
+ total.cost+=ele.cost
|
|
|
+ total.showNum+=ele.showNum
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ total.cost=(total.cost).toFixed(2)
|
|
|
+ total.clickRate=(total.click/total.showNum*100).toFixed(2)+'%'
|
|
|
+ total.cp=(total.cost/total.click).toFixed(2)
|
|
|
+ total.cpm=(total.cost/total.showNum*1000).toFixed(2)
|
|
|
+ if(afterData.length>0){
|
|
|
+ this.tableData=[total,...afterData]
|
|
|
+ }else{
|
|
|
+ this.tableData=[total,...res.result.list]
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //请求项目和账户内容
|
|
|
+ accountHttp(){
|
|
|
+ this.treeData=[];
|
|
|
+ this.treeValue=[];
|
|
|
+ getAction(`/ctop/projectMember/getProjectAccountByUserId?mediaType=${this.tabKey}`, {}).then(res => {
|
|
|
+ if(res.success){
|
|
|
+ // console.log(res);
|
|
|
+ if(res.result){
|
|
|
+ res.result.forEach((element,index) => {
|
|
|
+ if(element){
|
|
|
+ this.treeData.push({});
|
|
|
+ this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
|
|
|
+ this.treeData[index].value='project'+element.project.projectId;
|
|
|
+ this.treeData[index].key=element.project.projectId;
|
|
|
+ this.treeData[index].mediaId=element.project.mediaId;
|
|
|
+ this.treeData[index].children=[];
|
|
|
+
|
|
|
+ if(element.account.length){
|
|
|
+ element.account.forEach((ele,i)=>{
|
|
|
+ this.treeData[index].children.push({});
|
|
|
+ this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName +'_('+(ele.accountStatus?'已停投':'投放中')+')';
|
|
|
+ this.treeData[index].children[i].value=ele.accountId;
|
|
|
+ this.treeData[index].children[i].key=ele.accountId;
|
|
|
+ // this.treeData[index].children[i].accountStatus=ele.accountStatus;
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // console.log(this.treeData)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 运营数据获取
|
|
|
+ operateHttp(){
|
|
|
+ postAction('',{}).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+ newDate() {
|
|
|
+ var myDate = new Date()
|
|
|
+ myDate.getYear() //获取当前年份(2位)
|
|
|
+ var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
|
|
|
+ var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
|
|
|
+ var d = myDate.getDate() //获取当前日(1-31)
|
|
|
+ var day = myDate.getHours()
|
|
|
+ return day
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated: function() {
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.getEchartData('sectionChart', this.sectionOption);
|
|
|
+ this.accountHttp()
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ filters: {
|
|
|
+ toPercentage(val) {
|
|
|
+ if(typeof val != 'string'){
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ }else{
|
|
|
+ return val
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
+ decimalsHandle(val){
|
|
|
+
|
|
|
+ if(val && typeof val !='string'){
|
|
|
+ if(val>=0){
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
+ 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(2);
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //变成货币格式
|
|
|
+ formatCurrency(val){
|
|
|
+ if(val){
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('').reverse()
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str.length; j++) {
|
|
|
+ handleResult += str[j]
|
|
|
+ }
|
|
|
+ return handleResult
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|