<template>
  <div class="homePage">
    <div>
      <a-row :gutter="16">
       <a-col :span="24">
        <a-card :bordered="false" class="search-box">
          <div class="time"  @click="opendate" >
            <datePick  :dateValue.sync='dateValue'   :type.sync='type'   />
          </div>
        </a-card>
      </a-col>
        <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
          <div class="showBox">
            <div class="title">
              总消耗
              <p class="numshow">￥{{cost.weekCostSum | decimalsHandle}}</p>
              <a-tooltip>
                <template slot="title">最近七天的总消耗</template>
                <span>
                  <a-icon type="exclamation-circle" />
                </span>
              </a-tooltip>
            </div>
            <div id="costChart" style="width:100%;height:70px" ref="costChart"></div>
            <div class="footerInfo">
              周环比
              <span class="num">
                <span v-if="cost.weekCostSumLink">{{cost.weekCostSumLink|toPercentage}}</span>
                <span v-else>{{'-'}}</span>
                <span
                  class="redIcon"
                  v-if="cost.weekCostSumLink>0"
                ></span>
                <span class="greenIcon" v-else></span>
              </span>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
          <div class="showBox">
            <div class="title">
              点击数
              <p class="numshow">{{click.weekClickSum | formatCurrency}}</p>
              <a-tooltip>
                <template slot="title">最近七天的点击数</template>
                <span>
                  <a-icon type="exclamation-circle" />
                </span>
              </a-tooltip>
            </div>
            <div id="clickChart" style="width:100%;height:70px" ref="clickChart"></div>
            <div class="footerInfo">
              周环比
              <span class="num">
                <span v-if="click.weekClickSumLink">{{click.weekClickSumLink|toPercentage}}</span>
                <span v-else>{{'-'}}</span>
                
                <span
                  class="redIcon"
                  v-if="click.weekClickSumLink>0"
                ></span>
                <span class="greenIcon" v-else></span>
              </span>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
          <div class="showBox">
            <div class="title">
              展示数
              <p class="numshow">{{showNum.weekShowNumSum | formatCurrency}}</p>
              <a-tooltip>
                <template slot="title">最近七天的展示数</template>
                <span>
                  <a-icon type="exclamation-circle" />
                </span>
              </a-tooltip>
            </div>
            <div id="showChart" style="width:100%;height:70px" ref="showChart"></div>
            <div class="footerInfo">
              周环比
              <span class="num">
                <span v-if="showNum.weekShowNumSumLink">{{showNum.weekShowNumSumLink | toPercentage}}</span>
                <span v-else>{{'-'}}</span>
                
                <span
                  class="redIcon"
                  v-if="showNum.weekShowNumSumLink>0"
                ></span>
                <span class="greenIcon" v-else></span>
              </span>
            </div>
          </div>
        </a-col>
         <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
          <div class="showBox">
            <div class="title">
              Top7账户消耗
              <a-tooltip>
                <template slot="title">最近七天的top7项目消耗</template>
                <span class="icon">
                  <a-icon type="exclamation-circle" />
                </span>
              </a-tooltip>
            </div>
            <div id="topChart" style="width:100%;height:100px" ref="topChart"></div>
            <div class="footerInfo">TOP1: <span class="num">￥{{this.topOption.series[0].data[0] | decimalsHandle}}</span> </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 折线图模块 -->
    <div class="section">
      <a-spin :spinning="spinning">
     
    
        <a-tabs default-active-key="cost" @change="callback" >
            <a-tab-pane key="cost" tab="总消耗"> 
            </a-tab-pane>
            <a-tab-pane key="click" tab="点击数" >     
            </a-tab-pane>
            <a-tab-pane key="showNum" tab="展示数">      
            </a-tab-pane>
        </a-tabs>
        <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
        <a-button class="duibi" @click="comparehandle" type='primary' >数据对比</a-button>
      </a-spin>
    </div>


    <!-- table数据 -->
    <div class="tableshow">
        <p><span>{{dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span></p>
        <a-table
          size="middle"
          :columns="columns"
          :dataSource="tableData"
          :pagination=false
          bordered
          id="outTable"       
          :loading="loading"
          style="word-break: break-all;font-size:16px;font-weight:600"
        >
        <span slot="costProportion" slot-scope="costProportion">{{ costProportion | toPercentage }}</span>
        <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
        <span slot="click" slot-scope="click">{{ click | formatCurrency }}</span>
        <span slot="showNum" slot-scope="showNum">{{ showNum | formatCurrency }}</span>
        <!-- <span slot="statDatetime" slot-scope>{{ dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span> -->
        </a-table>
    </div>
    <!-- <p class="footertip">我们是有底线的~</p> -->
    <CompareData :compareVisiable.sync='compareVisiable'  @close_modal='close_modal' ref="compareData"/>

    
  </div>
</template>

<script>
import moment from 'moment'
import DatePicker from '@/components/DatePicker.vue'
import datePick from './components/datePick'
import CompareData from './CompareData.vue'
import timeCheck from './components/timeCheck'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
// import vueEchart from './components/vueEchart'
// 引入基本模板
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 option = {
  color: ['#1890ff'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '0%',
    top: '12%',
    containLabel: false,
    
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      show: true,
      
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: false
    }
  ],
  series: [
    {
      name: '',
      type: 'bar',
      barWidth: '40%',
      smooth: true,
      areaStyle:{},
      itemStyle: {
          color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: '#1890ff'},                 
                  {offset: 1, color: '#FFF'}
              ]
          )
      },
      data: []
    }
  ]
}

let lineStyle= {
        color:{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
         colorStops: [{
            offset: 0, color: '#1890ff' // 0% 处的颜色
        }, {
            offset: 1, color: '#fff' // 100% 处的颜色
        }],
         global: false // 缺省为 false
        },
        
        // color: '#1890ff'
}
let sectionOption={
    tooltip: {
        trigger: 'axis',
       
        axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow',
        
        }, 
    },
    legend: {
        data: ['总消耗']
    },
    grid: {
        left: '2%',
        right: '0%',
        bottom: '0%',
        top: '12%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
        type: 'value',
        show: true
        }
    ],
    series: [
        {
            name: '总消耗',
            type: 'line',
            smooth: true,
            data:  [820, 932, 901, 934, 1290, 1330, 1320],
            color:'#32CD32'
        },
        {
            name: '',
            type: 'line',
            smooth: true,
            data:  [],
            color:'#8A2BE2'
        },
    ]
}

let init={
    today:{
        x:['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00'],
        y:[],
        name:"今天"
    },
    yesterday:{
        x:['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00'],
        y:[],
        name:"昨天"
    },
    // huanbi:{
    //   name:'环比',
    //   y:[]
    // }
}


let columns = [
  {
    title: '时间',
    dataIndex: 'statDate',
    scopedSlots: { customRender: 'statDate' },
    align: 'center',
    key:'statDate'
    
  },
  {
    title: '消耗(元)',
    dataIndex: 'cost',
    scopedSlots: { customRender: 'cost' },
    align: 'center',
    key:'cost'
   
  },
  {
    title: '消耗环比',
    dataIndex: 'costProportion',
    scopedSlots: { customRender: 'costProportion' },
    align: 'center',
    key:"costProportion"
    
  },
  {
    title: '点击数',
    dataIndex: 'click',
    align: 'center',
    scopedSlots: { customRender: 'click' },
    key:'click'
  },
  {
    title: '点击率',
    dataIndex: 'clickRate',
    align: 'center',
    scopedSlots: { customRender: 'clickRate' },
    key:'clickRate'
  },

  {
    title: '展示数',
    dataIndex: 'showNum',
    align: 'center',
    scopedSlots: { customRender: 'showNum' },
    key:"showNum"
  },
  {
    title: '平均千次展现费用(元)',
    dataIndex: 'cpm',
    align: 'center',
    scopedSlots: { customRender: 'cpm' },
    key:'cpm'
  },
  {
    title: '平均点击单价(元)',
    dataIndex: 'cp',
    align: 'center',
    scopedSlots: { customRender: 'cp' },
    key:"cp"
  },
  
]
export default {
  
    components:{
        DatePicker,
        CompareData,
        timeCheck,
        datePick
    },
  data() {
    return {
      //echart的配置项option
      topOption: JSON.parse(JSON.stringify(option)),
      costOption: JSON.parse(JSON.stringify(option)),
      clickOption: JSON.parse(JSON.stringify(option)),
      showOption: JSON.parse(JSON.stringify(option)),
      sectionOption:JSON.parse(JSON.stringify(sectionOption)),
    //页面四个块的数据
      cost: {},
      click: {},
      showNum: {},
    //tab的选中key
        tabKey:'',
        tabCost:{},
        tabClick:{},
        tabShowNum:{},
      //对比的模态框
      compareVisiable:false,
      
      //table
      loading: false,
      columns,
      tableData:[],
      //子元素的数据存储
    
        type:1,
        dateValue:[moment(), moment()],
        
      //日期矿打开
      openOptions:false,
      spinning:false,
    }
  },
  watch:{
    type(n,o){
      console.log(n,o)
        // console.log(this.type)
        if(this.type<9){
            this.sectionHttp({type:this.type})
            
        }else if(this.type==9){
          this.sectionHttp({
            type:this.type,
            startDate:this.dateValue[0].format('YYYY-MM-DD'),
            endDate:this.dateValue[1].format('YYYY-MM-DD')
            })
        }
    },
    dateValue: {
      handler(newName, oldName) {
        console.log(newName,oldName)
        if(newName.length>1){
          this.sectionHttp({
              type:this.type,
              startDate:this.dateValue[0].format('YYYY-MM-DD'),
              endDate:this.dateValue[1].format('YYYY-MM-DD')
          })
        }
          
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    //获取echart的值
    getEchartData(idName, optionName) {
      const chart = this.$refs[idName]
      //   console.log(chart)
      if (chart) {
        const myChart = echarts.init(document.getElementById(idName))
        myChart.setOption(optionName)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
      }
    },

    //网络请求方法
    echartsHttp() {
     
      return new Promise((resolve, reject) => {
        postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
        //   console.log(res)
          if (res.success) {
            this.loading = false

              this.cost = res.result.costWeekLink
              this.click = res.result.clickWeekLink
              this.showNum = res.result.showNumWeekLink
              res.result.top.top7.forEach((element, index) => {
                this.topOption.xAxis[0].data.push(element.authName)
                this.topOption.series[0].data.push(element.cost)
              })
           
            res.result.costWeek.forEach((ele)=>{
                this.costOption.xAxis[0].data.push(ele.statDate)
                this.costOption.series[0].data.push(ele.cost)
            })
            res.result.clickWeek.forEach((ele)=>{
                this.clickOption.xAxis[0].data.push(ele.statDate)
                this.clickOption.series[0].data.push(ele.click)
            })
            res.result.showNumWeek.forEach((ele)=>{
                this.showOption.xAxis[0].data.push(ele.statDate)
              this.showOption.series[0].data.push(ele.showNum)
            })
           
            

            this.getEchartData('topChart', this.topOption)
            this.getEchartData('costChart', this.costOption)
            this.getEchartData('clickChart', this.clickOption)
            this.getEchartData('showChart', this.showOption)
            
          }
        })
      })
    },
    //处理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){

            
            if(res.result.chart[0].afterData && res.result.chart[0].afterData.statDate==moment().format('YYYY-MM-DD')){
                this.tabCost=JSON.parse(JSON.stringify(init))
                this.tabClick=JSON.parse(JSON.stringify(init))
                this.tabShowNum=JSON.parse(JSON.stringify(init))
                res.result.chart.forEach((item,index)=>{
                    this.tabClick.yesterday.y.push(item.click)
                    this.tabCost.yesterday.y.push(item.cost) 
                    this.tabShowNum.yesterday.y.push(item.showNum)   
                    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)
                    }else{
                        this.tabClick.today.y.push(0)
                        this.tabCost.today.y.push(0)
                        this.tabShowNum.today.y.push(0)
                    }
                    
                });
                // res.result.list.forEach((item)=>{
                //     if(!item.costProportion){
                //       // console.log(item.costProportion)
                //        this.tabCost.huanbi.y.push('-') 
                        
                        
                //     }else{
                      
                //        let huanbi=(item.costProportion*100).toFixed(2)+'%'
                        
                //         this.tabCost.huanbi.y.push(huanbi) 
                       
                //     }
                // })
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabCost.today.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;
                

            }else if(res.result.chart[0].afterData&& res.result.chart[0].afterData.statDate==moment().subtract(1,'days').format('YYYY-MM-DD')){
                //处理昨天
                this.tabCost=[]
                this.tabClick=[]
                this.tabShowNum=[]
                res.result.chart.forEach((item,index)=>{ 
                    if(item.afterData){
                        this.tabClick.push(item.afterData.click)
                        this.tabCost.push(item.afterData.cost)
                        this.tabShowNum.push(item.afterData.showNum)
                    }else{
                        this.tabClick.push(0)
                        this.tabCost.push(0)
                        this.tabShowNum.push(0)
                    }
                    
                });
                if(this.tabKey=='click'){
                    this.sectionOption.legend.data=['点击数'];
                    this.sectionOption.xAxis[0].data=init.today.x;
                    this.sectionOption.series[0].data=this.tabClick;
                    this.sectionOption.series[0].name='点击数';
                }else if(this.tabKey=='showNum'){
                    this.sectionOption.legend.data=['展示数'];
                    this.sectionOption.xAxis[0].data=init.today.x;
                    this.sectionOption.series[0].data=this.tabShowNum;
                    this.sectionOption.series[0].name='展示数';
                }else{
                     this.sectionOption.xAxis[0].data=init.today.x;
                      this.sectionOption.series[0].data=this.tabCost;
                }
               
            }else{
                this.tabCost={x:[],y:[]}
                this.tabClick={x:[],y:[]}
                this.tabShowNum={x:[],y:[]}
                res.result.chart.forEach((item,index)=>{                    
                        this.tabClick.y.push(item.click)
                        this.tabCost.y.push(item.cost)
                        this.tabShowNum.y.push(item.showNum)
                        this.tabClick.x.push(item.statDate)
                        this.tabCost.x.push(item.statDate)
                        this.tabShowNum.x.push(item.statDate)  
                });
                if(this.tabKey=='click'){
                    this.sectionOption.legend.data=['点击数'];
                    this.sectionOption.xAxis[0].data=this.tabClick.x;
                    this.sectionOption.series[0].data=this.tabClick.y;
                    this.sectionOption.series[0].name='点击数';
                }else if(this.tabKey=='showNum'){
                   this.sectionOption.legend.data=['展示数'];
                    this.sectionOption.xAxis[0].data=this.tabShowNum.x;
                    this.sectionOption.series[0].data=this.tabShowNum.y;
                    this.sectionOption.series[0].name='展示数';
                }else{
                    this.sectionOption.xAxis[0].data=this.tabCost.x;
                    this.sectionOption.series[0].data=this.tabCost.y;
                }
                
            }           
           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){
                const defaultAfterData = afterData;
                defaultAfterData.forEach(item => {
                  item.clickRate = Number(item.clickRate) + '%';
                });
                this.tableData = [total,...defaultAfterData]
              }else{
                const defaultData = res.result.list;
                defaultData.forEach(item => {
                  item.clickRate = Number(item.clickRate) + '%';
                });
                this.tableData = [total,...defaultData]
              }
              
            }
          }
        })
      })
    },

    //tab切换页的事件
    callback(key) {
        // console.log(key);
        this.tabKey=key;
        this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
        if(key=='cost'){
            if(this.type==1){
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabCost.today.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;
            }else if(this.type==2){
                this.sectionOption.xAxis[0].data=init.today.x;
                this.sectionOption.series[0].data=this.tabCost;
            }else{
                this.sectionOption.xAxis[0].data=this.tabCost.x;
                this.sectionOption.series[0].data=this.tabCost.y;
            }
        }else if(key=='click'){
             if(this.type==1){
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabClick.today.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;
            }else if(this.type==2){
                this.sectionOption.legend.data=['点击数'];
                this.sectionOption.xAxis[0].data=init.today.x;
                this.sectionOption.series[0].data=this.tabClick;
                this.sectionOption.series[0].name='点击数';
            }else{   
                this.sectionOption.legend.data=['点击数'];
                this.sectionOption.xAxis[0].data=this.tabClick.x;
                this.sectionOption.series[0].data=this.tabClick.y;
                this.sectionOption.series[0].name='点击数';
            }
        }else{
             if(this.type==1){
                this.sectionOption.legend.data=['今天','昨天'];
                this.sectionOption.xAxis[0].data=this.tabShowNum.today.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;
            }else if(this.type==2){
                this.sectionOption.legend.data=['展示数'];
                this.sectionOption.xAxis[0].data=init.today.x;
                this.sectionOption.series[0].data=this.tabShowNum;
                this.sectionOption.series[0].name='展示数';
            }else{
              this.sectionOption.legend.data=['展示数'];
                this.sectionOption.xAxis[0].data=this.tabShowNum.x;
                this.sectionOption.series[0].data=this.tabShowNum.y;
                this.sectionOption.series[0].name='展示数';
            }
        }
        this.getEchartData('sectionChart', this.sectionOption)
    },
   
   //打开日期框
   opendate(){
       this.openOptions=!this.openOptions;
      //  console.log(this.openOptions)
   },

    opendateClose(){
          this.openOptions=false;
          //  console.log(this.openOptions)
      },
    //对比按钮的事件
    comparehandle(){
      this.compareVisiable=true;
      this.$refs.compareData.sectionHttp({
        type: 10,
        sign: 'month',
        smallDate: moment()
          .subtract(1, 'months')
          .format('YYYY-MM'),
        bigDate: moment().format('YYYY-MM')
    })
    },
    close_modal(n){
      // console.log(n)
      this.compareVisiable=n;
    },
    //对比模块的tab事件
    compareTab(key){
        console.log(key)
    }
  },
  mounted() {
    //处理四个图标的样式
    this.costOption.series[0].type = 'line';
    this.costOption.series[0].itemStyle = {};
    this.costOption.series[0].areaStyle = lineStyle;

    this.costOption.xAxis[0].boundaryGap = false    
    this.showOption.series[0].type = 'line'  
    this.showOption.series[0].itemStyle = {};
    this.showOption.series[0].areaStyle = lineStyle;

    this.showOption.xAxis[0].boundaryGap = false
    this.echartsHttp();
    this.sectionHttp({type:this.type});
  },
  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>

<style lang="scss" scoped>
.homePage {
    p {
     margin-bottom: 0;
    }
    .topBox{
        margin-bottom: 12px;
        margin-top: 12px;
        border-radius: 2px;
    }
  .showBox {
    width: 100%;
    box-sizing: border-box;
    margin-right: 20px;
    padding: 25px 25px 0;
    background-color: #fff;
    border-radius: 2px;
    .title {
      color: #999;
      font-size: 16px;
      position: relative;
      span {
        font-size: 1rem;
        // color: #1890ff;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
      }
    }
    .num{
      color: #000;
      font-size: 16px;;
    }
    .numshow {
      color:#333 ;
      font-weight: 500;
      font-size: 24px;
      padding: 5px 0;
      height: 30px;
      margin-bottom: 0;
    }
  }
  .topBox:last-child{
    margin-right: 0;
  }
  .footerInfo {
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding: 10px 0;
    color: #666;
    font-size: 16px;
    position: relative;
 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .num {
      display: inline-block;
      margin-left: 10px;
      padding-right: 15px;
      position: relative;
      font-weight: 500;
    }
    .redIcon {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 8px solid red;
      position: absolute;
      top: 40%;
      right: 0;
    }
    .greenIcon {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 8px solid green;
      position: absolute;
      top: 40%;
      right: 0;
    }
  }

  .section{
    #sectionChart{
      padding: 0px  30px;
    }
      width: 100%;
      background-color: #fff;
      padding: 10px 0 20px;
      position: relative;
      margin-bottom: 12px;;
       border-radius: 2px;
      .duibi{
          position: absolute;
          
          height: 30px;
          line-height: 30px;
          padding: 0 15px;
          top: 8px;
          right: 20px;
          // border: 1px solid #666;
          cursor: pointer;
      }
      .time{
        position: absolute;
          
         width:280px;
          
          top: 15px;
          right: 0px;
          
          cursor: pointer;  
      }
  }
  .tableshow{
    width: 100%;
    padding: 20px 15px;
    background-color: #fff;
     border-radius: 2px;
    p{
      width: 100%;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
      span{
        display: inline-block;
        border: 1px solid #ccc;
        padding: 5px 15px;
        border-radius: 5px;
      }
    }
  }
.footertip{
  background: #fff;
  padding: 0 15px 20px;
  font-size: 16px;
  text-align: center;
}

}
</style>