Selaa lähdekoodia

'自定义列修改'

魏志佳 4 vuotta sitten
vanhempi
commit
3f365a6032

+ 88 - 76
src/views/modules/Statistics/KSAccountReport.vue

@@ -362,29 +362,15 @@ const columnsFixd = [
         scopedSlots: { customRender: 'date' },
         align: 'center',
         key:'date',
-        width:150,
+        width:200,
         fixed:'left',
-        // customRender: (value, row, index) => {
-        //   const obj = {
-        //     children: value,
-        //     attrs: {}
-        //   }
-        //   if(length){
-        //       // console.log(length)
-        //     if (index == 0) {           
-        //         obj.attrs.rowSpan = length
-        //     } else if(index>0&&index<length){
-        //         obj.attrs.rowSpan = 0
-        //     }
-        //   }
-        //   return obj
-        // }
+        
     },
     {
         title: '账户ID',
         dataIndex: 'accountId',
         align: 'center',
-        width: 150,
+        width: 200,
         fixed:'left',
         scopedSlots: { customRender: 'accountId' }
     },
@@ -392,17 +378,21 @@ const columnsFixd = [
         title: '账户昵称',
         dataIndex: 'authName',
         align: 'center',
-        width: 250,
+        width: 200,
         fixed:'left',
     },
+    
+]
+
+const initVariableColimns=[
     {
-        title: '消耗(元)',
-        dataIndex: 'cost',
-        width:150,
-        tip: '广告在投放期间的花费总额',
-        align: 'center',
-        scopedSlots: { customRender: 'cost' },
-        sorter: () => {}
+          title: '消耗(元)',
+          dataIndex: 'cost',
+          width:150,
+          tip: '广告在投放期间的花费总额',
+          align: 'center',
+          scopedSlots: { customRender: 'cost' },
+          sorter: () => {}
     },
       // {
       //     title: '折后消耗(元)',
@@ -447,48 +437,48 @@ const columnsFixd = [
         scopedSlots: { customRender: 'aClick' },
         sorter:() => {}
     },
-    // {
-    //     title: '行为数',
-    //     dataIndex: 'bClick',
-    //     tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
-    //     align: 'center',
+    {
+        title: '行为数',
+        dataIndex: 'bClick',
+        tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
+        align: 'center',
     
-    //     scopedSlots: { customRender: 'bClick' },
-    //     sorter:() => {}
-    // },
+        scopedSlots: { customRender: 'bClick' },
+        sorter:() => {}
+    },
     
-    // {
-    //     title: '行为率',
-    //     dataIndex: 'bClickRate',
-    //     tip: '行为数占素材曝光数百分比',
-    //     align: 'center',    
-    //     scopedSlots: { customRender: 'bClickRate' },
-    //     sorter:() => {}
-    // },
-    // {
-    //     title: '平均千次封面曝光花费(元)',
-    //     dataIndex: 'cpm',
-    //     tip: '花费/封面曝光数*1000',
-    //     align: 'center',    
-    //     scopedSlots: { customRender: 'cpm' },
-    //     sorter:() => {}
-    // },
-    // {
-    //     title: '平均封面点击单价(元)',
-    //     dataIndex: 'cpc',
-    //     tip: '花费/封面点击数',
-    //     align: 'center',    
-    //     scopedSlots: { customRender: 'cpc' },
-    //     sorter:() => {}
-    // },
-    // {
-    //     title: '平均行为单价(元)',
-    //     dataIndex: 'cpb',
-    //     tip: '总花费/行为数',
-    //     align: 'center',    
-    //     scopedSlots: { customRender: 'cpb' },
-    //     sorter:() => {}
-    // },
+    {
+        title: '行为率',
+        dataIndex: 'bClickRate',
+        tip: '行为数占素材曝光数百分比',
+        align: 'center',    
+        scopedSlots: { customRender: 'bClickRate' },
+        sorter:() => {}
+    },
+    {
+        title: '平均千次封面曝光花费(元)',
+        dataIndex: 'cpm',
+        tip: '花费/封面曝光数*1000',
+        align: 'center',    
+        scopedSlots: { customRender: 'cpm' },
+        sorter:() => {}
+    },
+    {
+        title: '平均封面点击单价(元)',
+        dataIndex: 'cpc',
+        tip: '花费/封面点击数',
+        align: 'center',    
+        scopedSlots: { customRender: 'cpc' },
+        sorter:() => {}
+    },
+    {
+        title: '平均行为单价(元)',
+        dataIndex: 'cpb',
+        tip: '总花费/行为数',
+        align: 'center',    
+        scopedSlots: { customRender: 'cpb' },
+        sorter:() => {}
+    },
 ]
 
 let initDay ={
@@ -562,7 +552,7 @@ export default {
         timeValueString:'',
         timeDefaultValue:undefined,
         visible:false,//自定义页面的打开
-        columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
+        columns:[...columnsFixd,...initVariableColimns] ,//table的表头
         columnsFixd,
         tableData:[],
         scrollX:1000,       
@@ -741,7 +731,7 @@ export default {
           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.target='statDate',
             this.order='asc'
         }else{
             this.target='cost',
@@ -1222,7 +1212,7 @@ export default {
                   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.target='statDate',
                     this.order='asc'
                 }else{
                     this.target='cost',
@@ -1252,10 +1242,31 @@ export default {
     //自定义之后修改父元素表头
     changeColumn(val){
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=2000
+        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() {
@@ -1281,7 +1292,7 @@ export default {
     })
     
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 6
+      columnType: 2
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -1299,13 +1310,14 @@ export default {
                 })
                 columns = columns.slice(columnsFixd.length)
                 this.columns = [...columnsFixd, ...columns]
-                this.tableHandle()
+               
+                
             }
 
             // console.log(this.columns)
             }
         }
-        
+         this.changeColumn(this.columns)
       }
     })
   },
@@ -1313,7 +1325,7 @@ export default {
     let arr = JSON.stringify(this.columns)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 6
+      columnType: 2
     }).then(res => {
       // console.log(res)
     })

+ 1 - 0
src/views/modules/Statistics/Statistics.vue

@@ -326,6 +326,7 @@ p{
 </template>
 
 <script>
+
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import moment from 'moment'

+ 41 - 26
src/views/modules/Statistics/accountReport.vue

@@ -347,29 +347,15 @@ const columnsFixd = [
     scopedSlots: { customRender: 'date' },
     align: 'center',
     key:'date',
-    width:150,
+    width:200,
     fixed:'left',
-    // customRender: (value, row, index) => {
-    //   const obj = {
-    //     children: value,
-    //     attrs: {}
-    //   }
-    //   if(length){
-    //       // console.log(length)
-    //     if (index == 0) {           
-    //         obj.attrs.rowSpan = length
-    //     } else if(index>0&&index<length){
-    //         obj.attrs.rowSpan = 0
-    //     }
-    //   }
-    //   return obj
-    // }
+    
   },
   {
     title: '账户ID',
     dataIndex: 'accountId',
     align: 'center',
-    width: 150,
+    width: 200,
     fixed:'left',
     scopedSlots: { customRender: 'accountId' }
   },
@@ -377,9 +363,13 @@ const columnsFixd = [
     title: '账户昵称',
     dataIndex: 'authName',
     align: 'center',
-    width: 250,
+    width: 200,
     fixed:'left',
   },
+  
+]
+
+const initVariableColimns=[
   {
     title: '消耗(元)',
     dataIndex: 'cost',
@@ -501,7 +491,7 @@ export default {
         timeValueString:'',
         timeDefaultValue:undefined,
         visible:false,//自定义页面的打开
-        columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
+        columns:[...columnsFixd,...initVariableColimns] ,//table的表头
         columnsFixd,
         tableData:[],
         scrollX:0,       
@@ -1141,6 +1131,7 @@ export default {
     //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;
@@ -1159,6 +1150,7 @@ export default {
           }
           
           this.tableHttp();
+        }
     },
   
     closeCustomColumn(){
@@ -1175,11 +1167,32 @@ export default {
     },
     //自定义之后修改父元素表头
     changeColumn(val){
+      console.log(val)
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=0
+        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() {
@@ -1205,7 +1218,7 @@ export default {
     })
     
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 5
+      columnType: 1
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -1223,13 +1236,15 @@ export default {
                 })
                 columns = columns.slice(columnsFixd.length)
                 this.columns = [...columnsFixd, ...columns]
-                this.tableHandle()
+                
+                // this.tableHandle()
             }
 
             // console.log(this.columns)
             }
         }
         
+        this.changeColumn(this.columns)
       }
     })
   },
@@ -1237,7 +1252,7 @@ export default {
     let arr = JSON.stringify(this.columns)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 5
+      columnType: 1
     }).then(res => {
       // console.log(res)
     })

+ 888 - 0
src/views/modules/Statistics/newPlanStatic/newPlanStatic.vue

@@ -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>

+ 84 - 107
src/views/modules/Statistics/videoStatics/KSvideoStatics.vue

@@ -324,7 +324,12 @@ const columnsFixd = [
     align: 'center',
     sorter: () => {}
   },
-  {
+ 
+]
+let show = 0
+
+const initVariableColimns=[
+   {
         title: '消耗(元)',
         dataIndex: 'cost',
         width:150,
@@ -419,8 +424,6 @@ const columnsFixd = [
         sorter:() => {}
     },
 ]
-let show = 0
-
 
 let detailColumn=[
    {
@@ -489,7 +492,7 @@ export default {
       exportExcelIsOk: true,
       consumeValue: 0,
 
-      columns: [...columnsFixd],
+      columns:[...columnsFixd,...initVariableColimns] ,//table的表头
       addColumns: [],
       data: [],
       totalSelect: 0,
@@ -501,7 +504,7 @@ export default {
       //自定义列的搜索框
       searchInput: '',
       //弹出框中现实的选中列数
-      scrollX: 2200,
+      scrollX: 0,
       listNum: [],
       //
       form: [],
@@ -510,7 +513,7 @@ export default {
       ipagination: {
           current: 1,
           pageSize: 10,
-          //   pageSizeOptions: ['10', '20', '30'],
+          
           showTotal: (total, range) => {
               return range[0] + "-" + range[1] + " 共" + total + "条"
           },
@@ -570,10 +573,31 @@ export default {
       //自定义之后修改父元素表头
     changeColumn(val){
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=2000
+        if(this.columns.length> this.columnsFixd.length&&this.columns.length<9){
+          this.scrollX=0;
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width='auto'
+              element.fixed=false
+            }             
+          });
+
+          // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
+        }else if(this.columns.length>=9){
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width=120
+              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
+          });
         }
     },
     // 日期的开关
@@ -749,22 +773,17 @@ export default {
     },
     
 
-    //设置头部单元格属性
-    customHeaderCell(columns) {
-    //   console.log(columns)
-    },
-
     tableHandle() {
       // this.listNum = [...this.columns]
-    //   console.log(this.listNum.length, 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 = 2000
-        }
+        // 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 = 2000
+        // }
     },
 
     //弹出框确定
@@ -813,82 +832,10 @@ export default {
             }
         }
     },
-    //弹出框里的搜索框
-    onSearch(value) {
-      console.log(value)
-    },
-
-    //清空全部按钮的事件
-    clearAllList() {
-      this.listNum = [...columnsFixd]
-      console.log(this.$refs.vSummaryTable)
-    },
-
-    //li展示里的关闭按钮 删除当前被选中的这一个列
-    deleteCol(item, index) {
-      this.listNum = this.listNum.filter((item1, num) => {
-        return num != index
-      })
-    },
-
-    //从自定义列拿选择的项
-    getshowlist(val) {
-      var arr = []
-
-      // console.log(val)
-      if (val.length) {
-        if (val.flag) {
-          let newArr = val.arr
-          newVal.map((item, index) => {
-            // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
-            //  this.listNum.push(item); // 进行动态的操作
-            // }
-            var result = this.listNum.some(items => {
-              if (items.dataIndex == item.dataIndex) {
-                return true
-              }
-            })
-
-            // console.log(result)
-            if (result) {
-              newArr.splice(index, 1)
-            }
-          })
+    
 
-          this.listNum = [...this.listNum, ...newArr]
-        } else {
-          //取消全选  清楚listNum中的val里的值
-          val.arr.map((item, index) => {
-            var result = this.listNum.some(items => {
-              if (items.dataIndex == item.dataIndex) {
-                return true
-              }
-            })
-            // console.log(result)
-            if (result) {
-              this.listNum.splice(index, 1)
-            }
-          })
-        }
-      } else {
-        arr = this.listNum.filter((item, index) => {
-          return item.dataIndex == val.dataIndex
-        })
-      }
-      if (arr.length) {
-        var index
-        this.listNum.map((item, ind) => {
-          if (item.dataIndex == val.dataIndex) {
-            index = ind
-          }
-        })
-        console.log(index)
-        this.listNum.splice(index, 1)
-      } else {
-        this.listNum.push(val)
-      }
-    }
-  },
+    
+   },
   
   activated() {
     console.log('activated')
@@ -898,7 +845,7 @@ export default {
     moment().format('YYYY-MM-DD_HH:mm')
 
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 6
+      columnType: 4
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -910,29 +857,31 @@ export default {
                 columns.map((item, index) => {
                 if (index > columnsFixd.length - 1) {
                     item.sorter = function(a, b) {
-                    return a[item.dataIndex] - b[item.dataIndex]
+                      return a[item.dataIndex] - b[item.dataIndex]
                     }
                 }
                 })
                 columns = columns.slice(columnsFixd.length)
                 this.columns = [...columnsFixd, ...columns]
-                this.tableHandle()
+                
+                // this.tableHandle()
             }
 
             // console.log(this.columns)
             }
         }
+        this.changeColumn(this.columns)
         
       }
     })
-    this.tableHandle();
+    
   },
   deactivated() {
     let arr = JSON.stringify(this.columns)
     // console.log(arr)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 6
+      columnType: 4
     }).then(res => {
       // console.log(res)
     })
@@ -1037,8 +986,7 @@ filters: {
   },
 
   mounted() {
-    this.columns = [...columnsFixd]
-    // console.log('mounted')
+    
     //请求自定义列的数据
     postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
       console.log(res)
@@ -1056,8 +1004,37 @@ filters: {
     this.timedata=[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
     // this.loading=true;
    
-        this.HttpPost()
-    
+    this.HttpPost()
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType: 4
+    }).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) {
+                      return a[item.dataIndex] - b[item.dataIndex]
+                    }
+                }
+                })
+                columns = columns.slice(columnsFixd.length)
+                this.columns = [...columnsFixd, ...columns]
+                
+                // this.tableHandle()
+            }
+
+            // console.log(this.columns)
+            }
+        }
+        this.changeColumn(this.columns)
+        
+      }
+    })
   }
 }
 </script>

+ 121 - 142
src/views/modules/Statistics/videoStatics/TTvideoStatics.vue

@@ -271,6 +271,41 @@ const columnsFixd = [
     sorter: () => {}
   },
 
+  
+
+]
+let show = 0
+
+let detailColumn=[
+   {
+    title: '客户',
+    dataIndex: 'advertiserName',
+    align: 'center',
+    scopedSlots: { customRender: 'advertiserName' },
+    align: 'center',
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'projectName',
+    align: 'center',
+    width: 150,
+  },
+   {
+    title: '时间',
+    dataIndex: 'statDate',
+    align: 'center',
+    width: 120
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+    
+  },
+]
+
+const initVariableColimns=[
   {
     title: '消耗',
     dataIndex: 'cost',
@@ -286,7 +321,6 @@ const columnsFixd = [
 
     scopedSlots: { customRender: 'clickMaterial' },
     sorter: () => {}
-    // (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
     title: '点击率',
@@ -319,37 +353,6 @@ const columnsFixd = [
     scopedSlots: { customRender: 'convertRate' },
     sorter: () => {}
   },
-
-]
-let show = 0
-
-let detailColumn=[
-   {
-    title: '客户',
-    dataIndex: 'advertiserName',
-    align: 'center',
-    scopedSlots: { customRender: 'advertiserName' },
-    align: 'center',
-  },
-  {
-    title: '项目名称',
-    dataIndex: 'projectName',
-    align: 'center',
-    width: 150,
-  },
-   {
-    title: '时间',
-    dataIndex: 'statDate',
-    align: 'center',
-    width: 120
-  },
-  {
-    title: '消耗',
-    dataIndex: 'cost',
-    scopedSlots: { customRender: 'cost' },
-    align: 'center',
-    
-  },
 ]
 
 export default {
@@ -392,7 +395,7 @@ export default {
       exportExcelIsOk: true,
       consumeValue: 0,
 
-      columns: [...columnsFixd],
+      columns:[...columnsFixd,...initVariableColimns] ,//table的表头
       addColumns: [],
       data: [],
       totalSelect: 0,
@@ -413,7 +416,7 @@ export default {
       ipagination: {
           current: 1,
           pageSize: 10,
-          //   pageSizeOptions: ['10', '20', '30'],
+          
           showTotal: (total, range) => {
               return range[0] + "-" + range[1] + " 共" + total + "条"
           },
@@ -471,10 +474,30 @@ export default {
      //自定义之后修改父元素表头
     changeColumn(val){
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=2000
+        if(this.columns.length> this.columnsFixd.length&&this.columns.length<9){
+          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>=9){
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width=120
+              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
+          });
         }
     },
     // 日期的开关
@@ -484,8 +507,8 @@ export default {
         //  console.log(this.openOptions)
     },
     opendateClose(){
-          this.openOptions=false;
-          //  console.log(this.openOptions)
+      this.openOptions=false;
+        //  console.log(this.openOptions)
     },
 
     // 查看相关人员
@@ -506,7 +529,7 @@ export default {
     sort(pagination, filters, sorter, { currentDataSource }){
           console.log(pagination, filters, sorter)
           this.ipagination.current=pagination.current;
-          this.ipagination.pageSize=pagination.pageSize
+          this.ipagination.pageSize=pagination.pageSize        
           if(sorter.order == 'ascend'){            
               this.order='asc'
               this.target=sorter.columnKey;
@@ -517,7 +540,8 @@ export default {
                 this.target='cost',
                 this.order='desc'           
           }          
-          this.HttpPost();
+          this.HttpPost();          
+        
     },
     moment,
     //select切换---项目
@@ -538,7 +562,7 @@ export default {
       return current && current > moment().subtract(1, 'day')
     },
 
-    consumeOnChange() {},
+  
     //查询按钮
     searchRes() {
       this.date = []
@@ -646,22 +670,19 @@ export default {
       this.listNum = [...this.columns]
     },
 
-    //设置头部单元格属性
-    customHeaderCell(columns) {
-    //   console.log(columns)
-    },
+  
 
     tableHandle() {
       // this.listNum = [...this.columns]
     //   console.log(this.listNum.length, this.columns)
 
-      if (this.listNum.length >= 9 || this.columns.length >= 9) {
-        this.tableWidth = 120
-        this.scrollX = this.columns.length * 120
-        // console.log(this.scrollX)
-      } else {
-        this.scrollX = 0
-      }
+      // if (this.listNum.length >= 9 || this.columns.length >= 9) {
+      //   this.tableWidth = 120
+      //   this.scrollX = this.columns.length * 120
+      //   // console.log(this.scrollX)
+      // } else {
+      //   this.scrollX = 0
+      // }
     },
 
     //弹出框确定
@@ -710,83 +731,10 @@ export default {
             }
         }
     },
-    //弹出框里的搜索框
-    onSearch(value) {
-      console.log(value)
-    },
-
-    //清空全部按钮的事件
-    clearAllList() {
-      this.listNum = [...columnsFixd]
-      console.log(this.$refs.vSummaryTable)
-    },
-
- 
-
-    //从自定义列拿选择的项
-    getshowlist(val) {
-      var arr = []
-
-      // console.log(val)
-      if (val.length) {
-        if (val.flag) {
-          let newArr = val.arr
-          newVal.map((item, index) => {
-            // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
-            //  this.listNum.push(item); // 进行动态的操作
-            // }
-            var result = this.listNum.some(items => {
-              if (items.dataIndex == item.dataIndex) {
-                return true
-              }
-            })
-
-            // console.log(result)
-            if (result) {
-              newArr.splice(index, 1)
-            }
-          })
-
-          this.listNum = [...this.listNum, ...newArr]
-        } else {
-          //取消全选  清楚listNum中的val里的值
-          val.arr.map((item, index) => {
-            var result = this.listNum.some(items => {
-              if (items.dataIndex == item.dataIndex) {
-                return true
-              }
-            })
-            // console.log(result)
-            if (result) {
-              this.listNum.splice(index, 1)
-            }
-          })
-        }
-      } else {
-        arr = this.listNum.filter((item, index) => {
-          return item.dataIndex == val.dataIndex
-        })
-      }
-      if (arr.length) {
-        var index
-        this.listNum.map((item, ind) => {
-          if (item.dataIndex == val.dataIndex) {
-            index = ind
-          }
-        })
-        console.log(index)
-        this.listNum.splice(index, 1)
-      } else {
-        this.listNum.push(val)
-      }
-    }
+   
+    
   },
-  // watch:{
-  //     'ipagination.current':function(n,o){
-  //         console.log(n,o)
-  //         this.HttpPost()
-  //     }
-  // },
+ 
   activated() {
     console.log('activated')
     // this.getParticipateList()
@@ -795,7 +743,7 @@ export default {
     moment().format('YYYY-MM-DD_HH:mm')
 
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 1
+      columnType: 3
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -812,26 +760,27 @@ export default {
                 }
                 })
                 columns = columns.slice(columnsFixd.length)
-                this.columns = [...columnsFixd, ...columns]
-                this.tableHandle()
+                this.columns = [...columnsFixd, ...columns];
+                
+                // this.tableHandle()
             }
 
             // console.log(this.columns)
             }
         }
-        
+        this.changeColumn(this.columns)
       }
     })
     
     
-    this.tableHandle();
+    
   },
   deactivated() {
     let arr = JSON.stringify(this.columns)
     // console.log(arr)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 1
+      columnType: 3
     }).then(res => {
       // console.log(res)
     })
@@ -934,8 +883,8 @@ export default {
   },
 
   mounted() {
-    this.columns = [...columnsFixd]
-    // console.log('mounted')
+    
+   
     //请求自定义列的数据
     postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
       console.log(res)
@@ -951,10 +900,38 @@ export default {
     //进入页面默认展示昨天到今天的数据
     this.dateRange=[moment().subtract(7,'days'),moment()]
     this.timedata=[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
-    // this.loading=true;
-   
-        this.HttpPost()
     
+   
+    this.HttpPost()
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType: 3
+    }).then(res => {
+      // console.log(res)
+      if (res.success) {
+        
+        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) {
+                    return a[item.dataIndex] - b[item.dataIndex]
+                    }
+                }
+                })
+                columns = columns.slice(columnsFixd.length)
+                this.columns = [...columnsFixd, ...columns];
+                
+               
+            }
+
+           
+            }
+        }
+        this.changeColumn(this.columns)
+      }
+    })
   }
 }
 </script>
@@ -1088,4 +1065,6 @@ span {
 #mybtn {
   margin: 0 10px 15px 0;
 }
-</style>
+</style>
+
+