<template>
  <div class="accountReport">
    <!-- 操作区间 -->
    <div class="optionLine">
      
          <span>项目选择：</span>
          <a-tree-select
            v-model="treeValue"
            show-search
            style="width: 600px;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-node v-for="(item) in treeData" :key="item.key" :value="item.value" :title="item.title">
                  <a-tree-select-node v-for="(ele) in item.children" :key="ele.key" :value="ele.value" :title="ele.title" >
                  </a-tree-select-node>
              </a-tree-select-node> -->
          </a-tree-select>
      <div style="float:right"   @click="opendate">
          <DatePicker :openOptions='openOptions' :left=left :parentDate='dateValue' />
      </div>
      <div class="optionTow">
          <div class="optItem">
              <span>折扣：</span>
              <a-input-number :min="0" :max="10" :step="0.1" v-model="discountSelect" :disabled="discountDisabled" @change="discountChange"  />
          </div>
          <div class="optItem">
              <span>返点比例：</span>
              <a-input-number :min="0" :max="10" :step="0.1" v-model="rebateProp" :disabled="rebatePropDisabled" @change="rebatePropChange" />
          </div>
          <div class="btn">
            <a-button type="primary" @click="searchgetData" :disabled='searchDisabled' class="mybtn">查询</a-button>
           
            <a-button type="primary" @click="resetgetData" :disabled='resetDisabled' class="mybtn">重置</a-button>
          </div>
      </div>
      
    </div>
    <!-- 五个块 -->
    <div class="show">
        <div class="showBox">
            <div class="title">
                <div class="infotitle">总消耗</div>
                <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
                  <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
                  <span class="icon">
                    <a-icon type="exclamation-circle" />
                  </span>
                </a-tooltip>
            </div>
            <div class="infoNum">￥ 
                <span class="red">{{costLink.cost | decimalsHandle }}</span> 
                <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')" ><span class="huanbi">环比: </span> {{ costLink.CostSumLink|toPercentage  }}</span> 
            </div>
        </div>
        <div class="showBox">
            <div class="title">
                <div class="infotitle">折后消耗</div>
                <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
                  <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
                  <span class="icon">
                    <a-icon type="exclamation-circle" />
                  </span>
                </a-tooltip>
            </div>
            <div class="infoNum">￥ 
               <span class="red">{{discountCostLink.discountCost | decimalsHandle }}</span> 
                <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ discountCostLink.discountCostLink|toPercentage  }}</span> 
            </div>
        </div>
        <div class="showBox">
            <div class="title">
                <div class="infotitle">点击数</div>
                <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
                  <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
                  <span class="icon">
                    <a-icon type="exclamation-circle" />
                  </span>
                </a-tooltip>
            </div>
            <div class="infoNum">
                <span class="red">{{clickLink.click | formatCurrency }}</span> 
                <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ clickLink.clickLink|toPercentage  }}</span> 
            </div>
        </div>
        <div class="showBox">
            <div class="title">
                <div class="infotitle">展示数</div>
                <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
                  <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
                  <span class="icon">
                    <a-icon type="exclamation-circle" />
                  </span>
                </a-tooltip>
            </div>
            <div class="infoNum"> 
                <span class="red">{{showNumLink.showNum | formatCurrency }}</span> 
                <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ showNumLink.showNumLink|toPercentage  }}</span> 
            </div>
            </div>
        <div class="showBox">
            <div class="title">
                <div class="infotitle">转化数</div>
                <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
                  <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
                  <span class="icon">
                    <a-icon type="exclamation-circle" />
                  </span>
                </a-tooltip>
            </div>
            <div class="infoNum">
                <span class="red">{{convertNumLink.convertNum | formatCurrency }}</span> 
                <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ convertNumLink.convertNumLink|toPercentage  }}</span> 
            </div>
        </div>
    </div> 
     <!-- 图表区域 -->
     <div class="chartBox">
            <a-tabs default-active-key="cost" @change="callback" >
            <a-tab-pane key="cost" tab="总消耗"> 
            </a-tab-pane>
            <a-tab-pane key="discountCost" tab="折后消耗"> 
            </a-tab-pane>
            <a-tab-pane key="click" tab="点击数" >     
            </a-tab-pane>
            <a-tab-pane key="showNum" tab="展示数">      
            </a-tab-pane>            
           <a-tab-pane key="zhuanhua" tab="转化数">      
            </a-tab-pane>
        </a-tabs>
        <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart" ></div>
        <!-- <div id="noData" v-else style='width:100%;height:300px'>暂无数据</div> -->
     </div>
     <!-- 报表区域 -->
     <div class="tableBox">
          <div class="tableTop">
              <a-tooltip>
                <template slot="title">
                  日期选择具体某一天之后，这里可以查看具体的时间段数据哦~
                </template>
                  <a-select  placeholder="请选择具体时间段" style="width: 160px" @change="timeChange"  v-model='timeDefaultValue'  label-in-value class="selectTime" v-show="dateValue[1].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')" :disabled='accountId.length==0'>
                    <a-select-option v-for="(i,index) in 24 " :key="index" :value="index" >{{index>=10 ? `00:00-${index}:59` :`00:00-0${index}:59`}}</a-select-option>
                  </a-select>
              </a-tooltip>
              
              <a-button type='primary' class="export" @click="exportExcel">导出报表</a-button>
              <a-button type='primary' class="add" @click="customColumns" >自定义列</a-button>
          </div>
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="tableData"
                bordered
                id="outTable"
                :pagination="false"
                :scroll="{ x: scrollX }"
                :loading="loading"
                ref="accountTable"
                :width="tableWidth"
                @change="sort"
                style="word-break: break-all;font-size:16px;font-weight:600"
              >
                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
                <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
                <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
                <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
                <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
                <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
                <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
                <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
                <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
                <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
                <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
                <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
                <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
                <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
                <span slot="form" slot-scope="form">{{ form | formatCurrency }}</span>
                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
                <span slot="activePayAmount" slot-scope="activePayAmount">{{ activePayAmount | formatCurrency }}</span>
                <span
                  slot="play25FeedBreakRate"
                  slot-scope="play25FeedBreakRate"
                >{{ play25FeedBreakRate | toPercentage }}</span>
                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
                <!-- 新加数据 -->
                <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
                <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span
                  slot="installFinishRate"
                  slot-scope="installFinishRate"
                >{{ installFinishRate | toPercentage }}</span>
                <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
                <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
                <span
                  slot="gameAddictionCost"
                  slot-scope="gameAddictionCost"
                >{{ gameAddictionCost | decimalsHandle }}</span>
                <span
                  slot="downloadFinishCost"
                  slot-scope="downloadFinishCost"
                >{{ downloadFinishCost | decimalsHandle }}</span>
                <span
                  slot="downloadStartCost"
                  slot-scope="downloadStartCost"
                >{{ downloadStartCost | decimalsHandle }}</span>
                <span
                  slot="installFinishCost"
                  slot-scope="installFinishCost"
                >{{ installFinishCost | decimalsHandle }}</span>
                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>

                <!--  -->
                <span
                  slot="downloadStartRate"
                  slot-scope="downloadStartRate"
                >{{ downloadStartRate | toPercentage }}</span>
                <span
                  slot="downloadFinishRate"
                  slot-scope="downloadFinishRate"
                >{{ downloadFinishRate | toPercentage }}</span>
                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
                <span
                  slot="activeRegisterRate"
                  slot-scope="activeRegisterRate"
                >{{ activeRegisterRate | toPercentage }}</span>
                <span
                  slot="gameAddictionRate"
                  slot-scope="gameAddictionRate"
                >{{ gameAddictionRate | toPercentage }}</span>
                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
                
                
            </a-table>
     </div>
      <customColumn :visible='visible'  :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='1'  @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
  </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';

import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
// const SHOW_PARENT = TreeSelect.SHOW_ALL;
import DatePicker from '@/components/DatePicker.vue'
import customColumn from './components/customColumn.vue'
// 引入基本模板
var echarts = require('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 sectionOption={
    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:  [],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
        type: 'value',
        show: true
        }
    ],
    series: [
        {
            name: '',
            type: 'line',
            smooth: true,
            data:  [],
            color:'#32CD32'
        },
        {
            name: '',
            type: 'line',
            smooth: true,
            data:  [],
            color:'#8A2BE2'
        },
        {
            name: '环比',
            type: 'line',
            smooth: true,
            data:  [],
            color:'rgba(0,0,0,0)'
        }
    ]
}
let length=0
const columnsFixd = [
  {
    title: '时间',
    dataIndex: 'date',
    scopedSlots: { customRender: 'date' },
    align: 'center',
    key:'date',
    width:200,
    fixed:'left',
    
  },
  {
    title: '账户ID',
    dataIndex: 'accountId',
    align: 'center',
    width: 200,
    fixed:'left',
    scopedSlots: { customRender: 'accountId' }
  },
  {
    title: '账户昵称',
    dataIndex: 'authName',
    align: 'center',
    width: 200,
    fixed:'left',
  },
  
]

const initVariableColimns=[
  {
    title: '消耗（元）',
    dataIndex: 'cost',
    scopedSlots: { customRender: 'cost' },
    align: 'center',
    sorter: (a,b)=>{}
  },
  {
    title: '点击数',
    dataIndex: 'clickMaterial',
    align: 'center',
    scopedSlots: { customRender: 'clickMaterial' },
    sorter: (a,b)=>{}
    // (a, b) => a.clickMaterial - b.clickMaterial
  },
  {
    title: '点击率',
    dataIndex: 'ctr',
    align: 'center',
    scopedSlots: { customRender: 'ctr' },
    sorter: (a,b)=>{}
  },

  {
    title: '展示数',
    dataIndex: 'showMaterial',
    align: 'center',

    scopedSlots: { customRender: 'showMaterial' },
    sorter: (a,b)=>{}
  },
  {
    title: '平均千次展现费用(元)',
    dataIndex: 'cpm',
    tip: '广告平均每一千次展现所付出的费用，计算公式是：总花费/展示数*1000',
    align: 'center',
  
    scopedSlots: { customRender: 'cpm' },
    sorter: (a,b)=>{}
  },
  {
    title: '平均点击单价(元)',
    dataIndex: 'cpc',
    tip: '广告主为每次点击付出的费用成本，计算公式是：总花费/点击数',
    align: 'center',   
    scopedSlots: { customRender: 'cpc' },
    sorter: (a,b)=>{}
  }
]

let initDay ={
  x:[],
  today:{   
    y:[],
    name:'今天'
  },
  yesterday:{
    y:[],
    name:'昨天'
  },
  huanbi:{
    name:'环比',
    y:[]
  }
}

export default {
  components:{
        DatePicker,
       customColumn,
    },

  data() {
    return {
      todayDate:moment(),
      moment,
      //账户的数据
      accountId:[],
      mediaId:'',//媒体类型
      //折扣数值
      discountSelect:1.0,
      discountDisabled:false,
      //返点比例
      rebateProp:1.0,
      rebatePropDisabled:false,
      discount:0,
      left:0,
      //treeselect的参数
      treeValue: [],
      treeData: [],
      SHOW_PARENT,
      //top区域数据
      discountCostLink:{},
      showNumLink:{},
      clickLink:{},
      costLink:{},
      convertNumLink:{},
      //日期矿打开
      openOptions:false,
      //子元素的数据存储    
        type:1, //这个没用但是不能删  请求类型
        dateValue:[moment(),moment()],

        //处理按钮禁用
        searchDisabled:false,
        refreshDisabled:false,
        resetDisabled:false,

        //echart区域的tab
        tabKey:'cost',
        sectionOption:JSON.parse(JSON.stringify(sectionOption)),
        tabCost:{},
        tabClick:{},
        tabShowNum:{},
        tabDiscountCost:{},
        tabconvertNum:{},
        //table的数据
        timeSelectValue:23,//table上选择时间
        timeValueString:'',
        timeDefaultValue:undefined,
        visible:false,//自定义页面的打开
        columns:[...columnsFixd,...initVariableColimns] ,//table的表头
        columnsFixd,
        tableData:[],
        scrollX:0,       
        tableWidth: '',//设置表格的列宽
        loading:false,
        target:'cost',//默认消耗排序
        order:'desc',//默认降序

        listNum:[],

        myChart:{},
        chartData:[],
    }
  },
  watch:{
    type(n,o){
      
    },
    dateValue(newName,oldName){
      // console.log(newName,oldName)
          this.timeValueString=undefined;
          this.timeSelectValue=23;
          this.timeDefaultValue =''
          if(newName[0].format('YYYY-MM-DD')==oldName[0].format('YYYY-MM-DD') || newName[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
                
          }else{
            this.searchgetData();
          }
    },
  },
  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
        );
    },
    //查询按钮的事件
    searchgetData(){
      
      this.myChart.clear()
      if(this.accountId.length>0){
        // console.log();  
             
        this.discountCostLink={}
        this.photoShowLink={}
        this.photoClickLink={}
        this.costLink={}
        this.aClickLink={}

        this.loading=true;
        this.searchDisabled=true;
        this.tabCost={}
        this.tabClick={}
        this.tabShowNum={},
        this.tabDiscountCost={}
        this.tabconvertNum={}
        this.chartHttp({
          mediaId:this.mediaId,
          discount:this.discount,
          accountIds:this.accountId,
          startDate:this.dateValue[0].format('YYYY-MM-DD'),
          endDate:this.dateValue[1].format('YYYY-MM-DD')
        })
        if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
            this.target='stat_Datetime',
            this.order='asc'
        }else{
            this.target='cost',
            this.order='desc'
        } 
        this.tableHttp();
      }else{
        this.$message.error('请选择账户后再查询！');
      }
    },
    

    //重置
    resetgetData(){
         this.loading=false;
        //  this.resetDisabled=true;
         this.searchDisabled=false;
          this.refreshDisabled=false;
          this.treeValue=[];
          // this.treeData=[];
          this.discountSelect=1.0;
          this.discountDisabled=false;
          this.rebatePropDisabled=false;
          this.rebateProp=1.0
          this.treeChange([]);

        this.tabCost={}
        this.tabClick={}
        this.tabShowNum={},
        this.tabDiscountCost={}
        this.tabconvertNum={}
        this.tableData=[];

      this.discountCostLink={};
      this.showNumLink={};
      this.clickLink={};
      this.costLink={};
      this.convertNumLink={};
     
      this.myChart.clear()    
      this.dateValue=[moment(),moment()]

    },
    //打开日期框
    opendate(){
        this.openOptions=!this.openOptions;
        //  console.log(this.openOptions)
    },
    opendateClose(){
          this.openOptions=false;
          //  console.log(this.openOptions)
    },
  //请求chart数据
   chartHttp(params){
     return new Promise((resolve, reject) => {
        postAction('/ctop/byteDance/dailyPage/report/chart', params).then(res => {
        //   console.log(res)
          if (res.success) {
            this.loading = false
            this.refreshDisabled=false;
            this.resetDisabled=false;
            this.searchDisabled=false;
            this.cost = res.result.costWeekLink
            this.click = res.result.clickWeekLink
            this.showNum = res.result.showNumWeekLink;
            //展示的五个块的数据
            this.discountCostLink=res.result.sumData.Sum.discountCostLink
            this.showNumLink=res.result.sumData.Sum.showNumLink
            this.clickLink=res.result.sumData.Sum.clickLink
            this.costLink=res.result.sumData.Sum.costLink
            this.convertNumLink=res.result.sumData.Sum.convertNumLink

            //chart的数据
              this.tabCost=JSON.parse(JSON.stringify(initDay))
              this.tabClick=JSON.parse(JSON.stringify(initDay))
              this.tabShowNum=JSON.parse(JSON.stringify(initDay))
              this.tabDiscountCost=JSON.parse(JSON.stringify(initDay))
              this.tabconvertNum=JSON.parse(JSON.stringify(initDay))
              let chartData=res.result.chartData;
            
              
              chartData.map((item,index)=>{
                  if(item.statHour || item.statHour==0){
                      //说明是查询 天 数据；
                      // console.log('day')
                      item.statHour=item.statHour>=10?`${item.statHour}:00`  : `0${item.statHour}:00`
                      if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
                          //说明是今天                      
                        this.tabClick.yesterday.y.push(item.click)
                        this.tabCost.yesterday.y.push(item.cost) 
                        this.tabShowNum.yesterday.y.push(item.showNum)   
                        this.tabDiscountCost.yesterday.y.push(item.discountCost)   
                        this.tabconvertNum.yesterday.y.push(item.convertNum);
                        
                        this.tabClick.x.push(item.statHour)
                        this.tabCost.x.push(item.statHour) 
                        this.tabShowNum.x.push(item.statHour)   
                        this.tabDiscountCost.x.push(item.statHour)   
                        this.tabconvertNum.x.push(item.statHour);

                        if(item.afterData){
                            this.tabClick.today.y.push(item.afterData.click)
                            this.tabCost.today.y.push(item.afterData.cost)
                            this.tabShowNum.today.y.push(item.afterData.showNum)
                            this.tabDiscountCost.today.y.push(item.afterData.discountCost)   
                            this.tabconvertNum.today.y.push(item.afterData.convertNum)
                            //环比  
                            this.tabClick.huanbi.y.push(item.afterData.photoClickProportion)
                            // console.log((item.afterData.photoClickProportion*100).toFixed(2)+'%')
                            this.tabCost.huanbi.y.push(item.afterData.costProportion)
                            this.tabShowNum.huanbi.y.push(item.afterData.showProportion)
                            this.tabDiscountCost.huanbi.y.push(item.afterData.costProportion)   
                            this.tabconvertNum.huanbi.y.push(item.afterData.convertNumProportion)  
                        }else{
                            this.tabClick.today.y.push(0)
                            this.tabCost.today.y.push(0)
                            this.tabShowNum.today.y.push(0)
                            this.tabDiscountCost.today.y.push(0)   
                            this.tabconvertNum.today.y.push(0)  

                            this.tabClick.huanbi.y.push(0)
                            this.tabCost.huanbi.y.push(0)
                            this.tabShowNum.huanbi.y.push(0)
                            this.tabDiscountCost.huanbi.y.push(0)   
                            this.tabconvertNum.huanbi.y.push(0)  
                        }
                     }else{
                       if(item.afterData){
                          this.tabClick.yesterday.y.push(item.afterData.click)
                          this.tabCost.yesterday.y.push(item.afterData.cost) 
                          this.tabShowNum.yesterday.y.push(item.afterData.showNum)   
                          this.tabDiscountCost.yesterday.y.push(item.afterData.discountCost)   
                          this.tabconvertNum.yesterday.y.push(item.afterData.convertNum);
                          
                          this.tabClick.x.push(item.afterData.statHour)
                          this.tabCost.x.push(item.afterData.statHour) 
                          this.tabShowNum.x.push(item.afterData.statHour)   
                          this.tabDiscountCost.x.push(item.afterData.statHour)   
                          this.tabconvertNum.x.push(item.afterData.statHour);
                       }
                        
                     } 
                  }else if(item.statDate){
                    //  console.log('date')
                        this.tabClick.yesterday.y.push(item.click)
                        this.tabCost.yesterday.y.push(item.cost) 
                        this.tabShowNum.yesterday.y.push(item.showNum)   
                        this.tabDiscountCost.yesterday.y.push(item.discountCost)   
                        this.tabconvertNum.yesterday.y.push(item.convertNum);
                        
                        this.tabClick.x.push(item.statDate)
                        this.tabCost.x.push(item.statDate) 
                        this.tabShowNum.x.push(item.statDate)   
                        this.tabDiscountCost.x.push(item.statDate)   
                        this.tabconvertNum.x.push(item.statDate);
                  }
              })  
            }
            this.callback(this.tabKey)

           
          
        })
      })
   },
   //请求项目和账户内容
   accountHttp(){
     this.treeData=[];
     this.treeValue=[];
     getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=1', {}).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)
                
            }
       }
     })
   },
    //初始化echart
    getEchartData(idName, optionName) {
      const chart = this.$refs[idName]
      //   console.log(chart)
      if (chart) {
        var myChart = echarts.init(document.getElementById(idName))
        myChart.clear()
        myChart.setOption(optionName)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
        this.myChart=myChart
      }
      
    },

    //tab切换页的事件
    callback(key) {
        // console.log(key);
        this.tabKey=key;
        this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
        if(key=='cost'){
            if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabCost.x;
                this.sectionOption.series[0].data=this.tabCost.today.y;
                this.sectionOption.series[0].name=this.tabCost.today.name;
                this.sectionOption.series[1].data=this.tabCost.yesterday.y;
                this.sectionOption.series[1].name=this.tabCost.yesterday.name;
                this.sectionOption.series[2].data=this.tabCost.huanbi.y;
                this.sectionOption.series[2].name=this.tabCost.huanbi.name;
                this.sectionOption.tooltip.formatter=(params)=>{
                    // console.log(params)
                    params[2].data=(params[2].data*100).toFixed(2)+'%'
                    return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                }
            }else{
                this.sectionOption.legend.data=['总消耗'];
                this.sectionOption.xAxis[0].data=this.tabCost.x;
                this.sectionOption.series[0].data=this.tabCost.yesterday.y;
                this.sectionOption.series[0].name='总消耗';
            }
        }else if(key=='click'){
            
             if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabClick.x;
                this.sectionOption.series[0].data=this.tabClick.today.y;
                this.sectionOption.series[0].name=this.tabClick.today.name;
                this.sectionOption.series[1].data=this.tabClick.yesterday.y;
                this.sectionOption.series[1].name=this.tabClick.yesterday.name;
                this.sectionOption.series[2].data=this.tabClick.huanbi.y;
                this.sectionOption.series[2].name=this.tabClick.huanbi.name;
                this.sectionOption.tooltip.formatter=(params)=>{
                    // console.log(params)
                    params[2].data=(params[2].data*100).toFixed(2)+'%'
                    return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                }
            }else{   
                this.sectionOption.legend.data=['点击数'];
                this.sectionOption.xAxis[0].data=this.tabClick.x;
                this.sectionOption.series[0].data=this.tabClick.yesterday.y;
                this.sectionOption.series[0].name='点击数';
            }
        }else if(key=='showNum'){
             if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabShowNum.x;
                this.sectionOption.series[0].data=this.tabShowNum.today.y;
                this.sectionOption.series[0].name=this.tabShowNum.today.name;
                this.sectionOption.series[1].data=this.tabShowNum.yesterday.y;
                this.sectionOption.series[1].name=this.tabShowNum.yesterday.name;
                this.sectionOption.series[2].data=this.tabShowNum.huanbi.y;
                this.sectionOption.series[2].name=this.tabShowNum.huanbi.name;
                this.sectionOption.tooltip.formatter=(params)=>{
                    // console.log(params)
                    params[2].data=(params[2].data*100).toFixed(2)+'%'
                    return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                }
            }else{
              this.sectionOption.legend.data=['展示数'];
                this.sectionOption.xAxis[0].data=this.tabShowNum.x;
                this.sectionOption.series[0].data=this.tabShowNum.yesterday.y;
                this.sectionOption.series[0].name='展示数';
            }
        }else if(key=='discountCost'){
            if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabDiscountCost.x;
                this.sectionOption.series[0].data=this.tabDiscountCost.today.y;
                this.sectionOption.series[0].name=this.tabDiscountCost.today.name;
                this.sectionOption.series[1].data=this.tabDiscountCost.yesterday.y;
                this.sectionOption.series[1].name=this.tabDiscountCost.yesterday.name;
                this.sectionOption.series[2].data=this.tabDiscountCost.huanbi.y;
                this.sectionOption.series[2].name=this.tabDiscountCost.huanbi.name;
                this.sectionOption.tooltip.formatter=(params)=>{
                    // console.log(params)
                    params[2].data=(params[2].data*100).toFixed(2)+'%'
                    return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                }
            }else{
              this.sectionOption.legend.data=['折后消耗'];
                this.sectionOption.xAxis[0].data=this.tabDiscountCost.x;
                this.sectionOption.series[0].data=this.tabDiscountCost.yesterday.y;
                this.sectionOption.series[0].name='折后消耗';
            }
        }else{
            if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
              this.sectionOption.legend.data=['今天','昨天'];
              this.sectionOption.xAxis[0].data=this.tabconvertNum.x;
              this.sectionOption.series[0].data=this.tabconvertNum.today.y;
              this.sectionOption.series[0].name=this.tabconvertNum.today.name;
              this.sectionOption.series[1].data=this.tabconvertNum.yesterday.y;
              this.sectionOption.series[1].name=this.tabconvertNum.yesterday.name;
              this.sectionOption.series[2].data=this.tabconvertNum.huanbi.y;
                this.sectionOption.series[2].name=this.tabconvertNum.huanbi.name;
                this.sectionOption.tooltip.formatter=(params)=>{
                    // console.log(params)
                    params[2].data=(params[2].data*100).toFixed(2)+'%'
                    return `
                      ${params[0].marker}今天:${params[0].data}<br />
                      ${params[1].marker}昨天:${params[1].data}<br />
                      ${params[2].marker}环比:${params[2].data}
                      `
                }
            }else{
              this.sectionOption.legend.data=['转化数'];
              this.sectionOption.xAxis[0].data=this.tabconvertNum.x;
              this.sectionOption.series[0].data=this.tabconvertNum.yesterday.y;
              this.sectionOption.series[0].name='转化数';
            }
        }
        this.getEchartData('sectionChart', this.sectionOption)
    },

    //请求table的数据
    tableHttp(params){
      this.loading=true;
         postAction('/ctop/byteDance/dailyPage/report/list', {
            mediaId:this.mediaId,
            discount:this.discount,
            accountIds:this.accountId,
            startDate:this.dateValue[0].format('YYYY-MM-DD'),
            endDate:this.dateValue[1].format('YYYY-MM-DD'),
            hour:this.timeSelectValue,
            target:this.target,
            order:this.order
         }).then(res => {
              if(res.success){
                this.loading=false;
                  // console.log(res)                   
                   res.result.forEach(element => {
                     if(this.timeValueString){
                       element.date=this.dateValue[0].format('YYYY.MM.DD')+'—'+this.timeValueString
                     }else{
                       if(this.accountId.length==1 && this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
                            element.date=element.statDate;
                       }else{
                          element.date=this.dateValue[0].format('YYYY.MM.DD')+"-"+this.dateValue[1].format('YYYY.MM.DD')
                       }
                       
                     }
                      
                   });
                   if(this.dateValue[0].format('YYYY-MM-DD')==this.dateValue[1].format('YYYY-MM-DD')){
                      for(let i=res.result.length-1; i>res.result.length-4; i--){
                        res.result[i].authName='-';
                        res.result[i].accountId='-';
                        res.result[i].date='总计';
                      };
                      for(let key in res.result[res.result.length-1]){
                        if( res.result[res.result.length-1][key] < 1){
                              res.result[res.result.length-1][key]=(res.result[res.result.length-1][key]*100).toFixed(2)+'%'
                        }
                          
                      }

                      res.result[res.result.length-1].date='环比';
                      res.result[res.result.length-2].date='昨日总计(相对)';
                      

                      this.tableData=res.result
                      length =this.tableData.length-3;
                    }else{
                      
                        res.result[res.result.length-1].date='总计';
                        res.result[res.result.length-1].authName='-';
                        res.result[res.result.length-1].accountId='-';
                        this.tableData=res.result
                        length =this.tableData.length-1;
                    }
                  
              }
         })
    },
    //导出报表
    exportExcel() {
      
      let column = this.columns.map((item, index) => {
         
            return item.dataIndex      
            
      })
      let columns=column.splice(3)
        console.log(columns)
      downFilePost('/ctop/byteDance/dailyPage/report/excel', {
        
        mediaId:this.mediaId,
        discount:this.discount,
        accountIds:this.accountId,
        startDate:this.dateValue[0].format('YYYY-MM-DD'),
        endDate:this.dateValue[1].format('YYYY-MM-DD'),
        hour:this.timeSelectValue,
        target:this.target,
        order:this.order,
        columns,
        
      }).then(res => {
        let blob = new Blob([res], {
          type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob) //创建下载的链接
        downloadElement.href = href
        downloadElement.download = moment().format('YYYY-MM-DD') + '账户报表.xlsx' //下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
      })
    },

    //弹出框打开，自定义列
    customColumns() {
        this.visible = true
        this.listNum = [...this.columns]
    },

    //table选择时间函数
    timeChange(value){
      console.log(value);
      this.timeSelectValue=value.key
      this.timeValueString=value.label;
      this.tableHttp()
    },
    //table 排序
    sort(pagination, filters, sorter, { currentDataSource }){
          console.log(pagination, filters, sorter)
        if(this.accountId.length){
          if(sorter.order == 'ascend'){            
              this.order='asc'
              this.target=sorter.columnKey;
          }else if(sorter.order == 'descend'){
              this.order='desc'    
              this.target=sorter.columnKey;
          }else{
            if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
                this.target='stat_Datetime',
                this.order='asc'
            }else{
                this.target='cost',
                this.order='desc'
            } 
              
          }
          
          this.tableHttp();
        }
    },
  
    closeCustomColumn(){
      this.visible=false;
    },
    //
    discountChange(){
      console.log(this.discountSelect);
      this.discount=this.discountSelect
    },
    rebatePropChange(){
      console.log(this.rebateProp)
      this.discount=this.rebateProp
    },
    //自定义之后修改父元素表头
    changeColumn(val){
      console.log(val)
        this.columns=[...val];
        if(this.columns.length> this.columnsFixd.length&&this.columns.length<8){
          this.columns.forEach((element,index) => {
            if(index<this.columns.length-1){
              element.width='auto'
              element.fixed=false
            }             
          });

          // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
        }else if(this.columns.length>=8){
          this.columns.forEach((element,index) => {
            if(index<this.columnsFixd.length){
              element.width=200
              element.fixed='left'
            }             
          });

           this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
        } else{
          this.scrollX=0;
          this.columns.forEach(element => {
              element.width='auto'
              element.fixed=false
          });
        }
    },
    tableHandle() {
        // this.listNum = [...this.columns]
        //   console.log(this.listNum.length, this.columns)

        if (this.listNum.length >= 9 || this.columns.length >= 9) {
          this.tableWidth = 160
          this.scrollX = this.columns.length * 160
          // console.log(this.scrollX)
        } else {
          this.scrollX = 0
        }
    },
  },
  mounted() {
    this.accountHttp()
    new Promise((resolve, reject) => {
      this.getEchartData('sectionChart', this.sectionOption)
      resolve()
    }).then(()=>{
      this.myChart.clear()
    })
    
    postAction('/toutiao/videoReportDaily/getColumnJson', {
      columnType: 1
    }).then(res => {
      // console.log(res)
      if (res.success) {
        // console.log(JSON.parse(res.result))
        if(res.result){
            let columns = JSON.parse(res.result)
            if (columns.length) {
            if (columns.length >= columnsFixd.length) {
                columns.map((item, index) => {
                if (index > columnsFixd.length - 1) {
                    item.sorter = function(a, b) {
                    
                    }
                }
                })
                columns = columns.slice(columnsFixd.length)
                this.columns = [...columnsFixd, ...columns]
                
                // this.tableHandle()
            }

            // console.log(this.columns)
            }
        }
        
        this.changeColumn(this.columns)
      }
    })
  },
  beforeDestroy() {
    
    let arr = JSON.stringify(this.columns)
    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
      json: arr,
      columnType: 1
    }).then(res => {
      // console.log(res)
    })
  },
  filters: {
    toPercentage(val) {
      if(val){
          if(typeof val != 'string'){
            return (val * 100).toFixed(2) + '%'
          }else{
            return val
          }
      }else if(typeof val =='string'){
            return val
        }
      else{
        return 0
      }    
    },
    //保留两位小数并且变成货币格式
      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||val==0)&& typeof val !='string'){
          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
      }else if(typeof val =='string'){
            return val
      }
      else{
        return '-'
      }
        
    }
  }
}
</script>
<style lang="scss">
     .ant-tooltip-inner,.ant-tooltip-arrow::before{
        background-color: #fff;
        color: #333;
    }

</style>
<style lang="scss" scoped>
.accountReport {
  .circul{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #32CD32;;
  }
  .optionLine:hover{
    box-shadow: 0 0 15px rgba(0,0,0,.15);
    border-radius: 10px;
  }
  .optionLine {
    box-sizing: border-box;
    padding: 15px  15px;
    position: relative;
    
    // margin: 20px 15px 15px;
    margin-bottom: 15px;
    
    background-color: #fff;
    // border: 1px solid #ccc;
    
    .optionTow{
      margin-top: 15px;
      position: relative;
        .optItem{
          display: inline-block;
          margin-right: 15px;
            span {
            display: inline-block;
            padding: 0 3px;
            }
        }
    }

    .btn {
      position: absolute;
      right: 0px;
      top: 0px;
      .mybtn{
        margin-left: 10px;
      }
    }
  }
  .show{
    // background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // padding: 0px 15px;
    box-sizing: border-box;

    .showBox {
    width: 19%;
    box-sizing: border-box;    
    padding: 15px 15px;
    background-color: #fff;
    
    .title {
      color: #999;
      font-size: 16px;
      position: relative;
      text-align: center;
      .infotitle{
        padding: 8px 0;
      }
      
      span {
        font-size: 1rem;
        // color: #1890ff;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
      }
      
    }
    .infoNum{
        padding:10px 0;
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        span{
          font-weight: 600;
          font-size: 16px;
        }
        .red{
          font-size: 20px;
          font-weight: 600;
          color: red;
        }
        .green{
          display: block;
          text-align: center;
          margin-left: 0.2rem;
          font-size: 14px;
          font-weight: 700;
          color: #32CD32;
          .huanbi{
            // color:#999;
            font-weight: 400;
            font-size: 14px;
          }
        }
      }
    
  }
  }
  .chartBox{
    background-color: #fff;
    margin: 15px 0px;
    padding: 2px 10px 30px;
  }
  .tableBox{
    background-color: #fff;
    margin: 15px 0px;
    padding: 15px 10px;
    .tableTop{
      position: relative;
      padding-bottom: 15px;
      border-bottom: 1px solid #e0e0e0;
      .selectTime{
        margin-right: 20px;
      }
      .add{
          position: absolute;
          top: 0;
          right: 0;
      }
    }
  }
}
</style>