魏志佳 пре 5 година
родитељ
комит
e85965123f

+ 5 - 6
src/components/DatePicker.vue

@@ -5,7 +5,7 @@
   <div class="datePicker" >
     <a-range-picker v-clickoutside="handleClose"
       v-model="dateValue"
-      style="width:250px;height:150px"
+      style="width:250px;"
       :open="openOptions"
       :disabled-date="disabledDate"
       :openChange="openChange"
@@ -140,14 +140,13 @@ export default {
       this.$parent.dateValue = val.dateValue
     },
     handleClose(e) {
-        console.log(e)
-        // if(!e.target.nodeType){
-        //     this.$parent.opendateClose()
-        // }
-            // this.$parent.opendateClose()
+        // console.log(e)
+        if(e.target.className){
             if(e.target.className.indexOf('ant-calendar')==-1){
                 this.$parent.opendateClose()
             }
+        }
+            
       
     },
     disabledDate(current) {

+ 24 - 18
src/views/modules/Statistics/CompareData.vue

@@ -30,10 +30,10 @@
       <div class="showbox">
         <div class="costcompare">
           <div>总消耗对比</div>
-          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
+          <p>{{ pageValue[0]}}:
             <span>  {{costcompare.prev|decimalsHandle}}</span>
             </p>
-          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+          <p>{{ pageValue[1]}}:
             <span>  {{costcompare.next|decimalsHandle}} </span>
             </p>
           <p>环比:
@@ -51,10 +51,10 @@
         </div>
         <div class="costcompare">
           <div>点击数对比</div>
-          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
+          <p>{{pageValue[0] }}:
              <span> {{clickcompare.prev |formatCurrency}}</span>
             </p>
-          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+          <p>{{ pageValue[1]}}:
             <span>  {{clickcompare.next |formatCurrency}}</span>
             </p>
           <p >环比:
@@ -72,10 +72,10 @@
         </div>
         <div class="costcompare">
           <div>展示数对比</div>
-          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
+          <p>{{ pageValue[1]}}:
              <span> {{showNumcompare.prev|formatCurrency}} </span>
               </p>
-          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+          <p>{{pageValue[1]}}:
             <span>  {{showNumcompare.prev|formatCurrency}}</span>
               </p>
           <p>环比:
@@ -106,10 +106,10 @@
             <a-radio-button
               :value="1"
               defaultChecked
-            >{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}</a-radio-button>
+            >{{compareSign=='month'?pageValue[0] : pageValue[0]}}</a-radio-button>
             <a-radio-button
               :value="2"
-            >{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}</a-radio-button>
+            >{{compareSign=='month'?pageValue[1] : pageValue[1]}}</a-radio-button>
           </a-radio-group>
         </div>
         <a-table
@@ -350,6 +350,7 @@ export default {
       value: "month",
       dateValue: [],
       monthValue: [],
+      pageValue:[moment().subtract(1,'months').format('YYYY-MM'),moment().format('YYYY-MM')],
       //tab的选中key
       tabKey: '',
       tabCost: {},
@@ -390,23 +391,26 @@ export default {
     //关闭
     handleCancel(){
       this.value='month';
+      this.compareSign='month'
       this.tableTab=1;
-       this.monthValue = [moment().subtract(1, 'months'), moment()]
+      this.monthValue = [moment().subtract(1, 'months'), moment()];
+      this.pageValue=[this.monthValue[0].format('YYYY-MM'),this.monthValue[1].format('YYYY-MM')];
       this.dateValue = [moment().subtract(1, 'days'), moment()]
     },
     //单选框选择
     radioChange(e) {
       this.compareSign = e.target.value
-    //   console.log(this.compareSign)
+      console.log(this.compareSign)
       if (this.compareSign == 'day') {
-
-        this.sectionHttp({
-          type: 10,
-          sign: this.compareSign,
-          smallDate: this.dateValue[0].format('YYYY-MM-DD'),
-          bigDate: this.dateValue[1].format('YYYY-MM-DD')
+          this.pageValue=[this.dateValue[0].format('YYYY-MM-DD'),this.dateValue[1].format('YYYY-MM-DD')];
+          this.sectionHttp({
+            type: 10,
+            sign: this.compareSign,
+            smallDate: this.dateValue[0].format('YYYY-MM-DD'),
+            bigDate: this.dateValue[1].format('YYYY-MM-DD')
         })
       } else {
+        this.pageValue=[this.monthValue[0].format('YYYY-MM'),this.monthValue[1].format('YYYY-MM')];
         this.sectionHttp({
           type: 10,
           sign: this.compareSign,
@@ -528,7 +532,7 @@ export default {
                 ele.statDate = ele.statDate + ' ' + ele.statHour
               }
               ele.key=index+1
-              console.log(ele.cost)
+              // console.log(ele.cost)
               this.costcompare.next += ele.cost
               this.clickcompare.next += ele.click
               this.showNumcompare.next += ele.showNum
@@ -539,7 +543,7 @@ export default {
                     this.costcompare.prev += res.result.list.smallDate[i].cost
                     this.clickcompare.prev += res.result.list.smallDate[i].click
                     this.showNumcompare.prev += res.result.list.smallDate[i].showNum
-                    console.log(res.result.list.smallDate[i].cost)
+                    // console.log(res.result.list.smallDate[i].cost)
                 }
             }else{
                 for (let i = 0; i < res.result.list.smallDate.length; i++) {
@@ -600,6 +604,7 @@ export default {
     //按钮查询事件
     searchHandle() {
       if (this.compareSign == 'day') {
+         this.pageValue=[this.dateValue[0].format('YYYY-MM-DD'),this.dateValue[1].format('YYYY-MM-DD')];
         this.sectionHttp({
           type: 10,
           sign: this.compareSign,
@@ -607,6 +612,7 @@ export default {
           bigDate: this.dateValue[1].format('YYYY-MM-DD')
         })
       } else {
+        this.pageValue=[this.monthValue[0].format('YYYY-MM'),this.monthValue[1].format('YYYY-MM')];
         this.sectionHttp({
           type: 10,
           sign: this.compareSign,

+ 695 - 48
src/views/modules/Statistics/accountReport.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="accountReport">
+    <!-- 操作区间 -->
     <div class="optionLine">
       
           <span>项目选择:</span>
           <a-tree-select
             v-model="treeValue"
-            style="width: 50%"
+            style="width: 45%;height:30px"
             :tree-data="treeData"
             tree-checkable
             :show-checked-strategy="SHOW_PARENT"
-            searchPlaceholder="请选择项目和账户"
+            placeholder="请选择项目和账户"
             :allowClear="true"
             @change="treeChange"
+            :maxTagCount='2'
           />
      
      
@@ -35,34 +37,199 @@
       </div>
       
     </div>
+    <!-- 五个块 -->
     <div class="show">
-        <a-row :gutter="16">
-          <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
-            <div class="showBox">
-              <div class="title">
-                <span>总消耗</span>
-                <a-tooltip>
-                  <template slot="title">点之前所有数据对比</template>
+        <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>
-              <span>¥ <span></span></span>
             </div>
-          </a-col>
-        </a-row>
-        
-    </div>
+            <div class="infoNum">¥ 
+                <span class="red">{{}}</span> 
+                <span class="green">{{}}</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">{{}}</span> 
+                <span class="green">{{}}</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">{{}}</span> 
+                <span class="green">{{}}</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">{{}}</span> 
+                <span class="green">{{}}</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">{{}}</span> 
+                <span class="green">{{}}</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>
+     <!-- 报表区域 -->
+     <div class="tableBox">
+          <div class="tableTop">
+              <a-select  placeholder="请选择具体时间段"  v-model="timeSelectValue" style="width: 120px" @change="timeChange" label-in-value class="selectTime">
+                  <a-select-option v-for="(i,index) in 24 " :key="index" :value="index" >{{index>10 ? `${index}:00` :`0${index}:00`}}</a-select-option>
+              </a-select>
+              <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="ipagination"
+                :scroll="{ x: scrollX }"
+                :loading="loading"
+                ref="accountTable"
+                :width="tableWidth"
+                @change="sort"
+                style="word-break: break-all;"
+              >
+                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</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 | toPercentage }}</span>
+                <span slot="cpm" slot-scope="cpm">{{ cpm | toPercentage }}</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 | toPercentage }}</span>
+                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | toPercentage }}</span>
+                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | toPercentage }}</span>
+                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | toPercentage }}</span>
+                <span
+                  slot="gameAddictionCost"
+                  slot-scope="gameAddictionCost"
+                >{{ gameAddictionCost | tofixed }}</span>
+                <span
+                  slot="downloadFinishCost"
+                  slot-scope="downloadFinishCost"
+                >{{ downloadFinishCost | tofixed }}</span>
+                <span
+                  slot="downloadStartCost"
+                  slot-scope="downloadStartCost"
+                >{{ downloadStartCost | tofixed }}</span>
+                <span
+                  slot="installFinishCost"
+                  slot-scope="installFinishCost"
+                >{{ installFinishCost | tofixed }}</span>
+                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | tofixed }}</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>
+                <span slot="cpm" slot-scope="cpm">{{ cpm | formatCurrency }}</span>
+                <!-- <span slot="statDatetime" slot-scope>{{ timedata[0]+'~'+timedata[1]}}</span> -->
+            </a-table>
+     </div>
+      <customColumn :visible='visible'  :listNum='listNum' :fiexColumn='columnsFixd'  @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
   </div>
 </template>
 
 <script>
 import moment from 'moment';
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+import { JeecgListMixin } from '@/mixins/ipagination'
 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')
 // 引入柱状图组件
@@ -75,13 +242,158 @@ 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: '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 length=0
+const columnsFixd = [
+  {
+    title: '时间',
+    dataIndex: 'date',
+    scopedSlots: { customRender: 'date' },
+    align: 'center',
+    key:'date',
+    customRender: (value, row, index) => {
+      const obj = {
+        children: value,
+        attrs: {}
+      }
+      if(length){
+          console.log(length)
+        if (index === 0) {           
+            obj.attrs.rowSpan = length
+        } else {
+            obj.attrs.rowSpan = 0
+        }
+      }
+      return obj
+    }
+  },
+  {
+    title: '账户ID',
+    dataIndex: 'accountId',
+    align: 'center',
+    width: 150,
+    scopedSlots: { customRender: 'accountId' }
+  },
+  {
+    title: '账户昵称',
+    dataIndex: 'signature',
+    align: 'center',
+   
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+    sorter: (a, b) => a.cost - b.cost
+  },
+  {
+    title: '点击数',
+    dataIndex: 'clickMaterial',
+    align: 'center',
+    scopedSlots: { customRender: 'clickMaterial' },
+    sorter: (a, b) => a.clickMaterial - b.clickMaterial
+    // (a, b) => a.clickMaterial - b.clickMaterial
+  },
+  {
+    title: '点击率',
+    dataIndex: 'ctr',
+    align: 'center',
+    scopedSlots: { customRender: 'ctr' },
+    sorter: (a, b) => a.ctr - b.ctr
+  },
+
+  {
+    title: '展示数',
+    dataIndex: 'showMaterial',
+    align: 'center',
+
+    scopedSlots: { customRender: 'showMaterial' },
+    sorter: (a, b) => a.showMaterial - b.showMaterial
+  },
+  {
+        title: '平均千次展现费用(元)',
+        dataIndex: 'cpm',
+        tip: '广告平均每一千次展现所付出的费用,计算公式是:总花费/展示数*1000',
+        align: 'center',
+      
+        scopedSlots: { customRender: 'cpm' },
+        sorter: (a, b) => a.cpm - b.cpm
+  },
+  {
+        title: '平均点击单价(元)',
+        dataIndex: 'cpc',
+        tip: '广告主为每次点击付出的费用成本,计算公式是:总花费/点击数',
+        align: 'center',   
+        scopedSlots: { customRender: 'cpc' },
+        sorter: (a, b) => a.cpc - b.cpc
+  }
+]
+
+
 export default {
-   components:{
+  components:{
         DatePicker,
-       
+       customColumn,
     },
+  mixins: [JeecgListMixin],
   data() {
     return {
+      moment,
+      //账户的数据
+      accountId:[],
       left:0,
       //treeselect的参数
       treeValue: [],
@@ -93,8 +405,7 @@ export default {
       rebateProp:1.0,
       //日期矿打开
       openOptions:false,
-      //子元素的数据存储
-    
+      //子元素的数据存储    
         type:1,
         dateValue:[moment(),moment()],
 
@@ -102,33 +413,75 @@ export default {
         searchDisabled:false,
         refreshDisabled:false,
         resetDisabled:false,
+
+        //echart区域的tab
+        tabKey:'cost',
+        sectionOption:JSON.parse(JSON.stringify(sectionOption)),
+
+        //table的数据
+        timeSelectValue:'',//table上选择时间
+        visible:false,//自定义页面的打开
+        columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
+        columnsFixd,
+        tableData:[],
+        scrollX:0,       
+        tableWidth: '',//设置表格的列宽
+        loading:false,
+
+        listNum:[],
     }
   },
+  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)
+              // 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: {
+
     //项目改变后的事件
     treeChange(val) {
-      this.projectId = []
-      this.accountName = []
-      console.log(val, this.treeValue)
-      this.treeValue.forEach((item, index) => {
-        if (parseInt(item)) {
-          this.projectId.push(item)
-        } else {
-          this.accountName.push(item)
-        }
-      })
-      if (this.treeValue.length == 0) {
-        this.optionArr = []
+      
+      this.accountId = [];
+      if(val){
+        val.forEach((ele,index)=>{
+          if(ele*1){
+              this.accountId.push(ele)
+          }else{              
+              let projectArr=this.treeData.filter((item)=>{
+                  return item.value==ele
+              });
+              
+              projectArr[0].children.forEach((element)=>{
+                 this.accountId.push(element.value)
+              })
+          }
+        })       
       }
-      postAction('/pangolin/api/app/list', {
-        projectId: this.projectId,
-        accountName: this.accountName
-      }).then(res => {
-        console.log(res)
-        if (res.success) {
-          this.optionArr = res.data
-        }
-      })
+      
+     
     },
     disabledDate(current) {
       // console.log(current)
@@ -148,19 +501,31 @@ export default {
     //刷新
     refreshgetData(){
          this.loading=true;
-         this.refreshDisabled=true;
+        //  this.refreshDisabled=true;
+         this.searchDisabled=false;
     },
     //重置
     resetgetData(){
          this.loading=true;
-         this.resetDisabled=true;
+        //  this.resetDisabled=true;
+         this.searchDisabled=false;
+          this.refreshDisabled=false;
+          this.treeValue=[];
+          this.treeData=[];
+          this.discount=1.0;
+          this.rebateProp=1.0
+
+
     },
-      //打开日期框
+    //打开日期框
    opendate(){
        this.openOptions=!this.openOptions;
       //  console.log(this.openOptions)
    },
-
+  opendateClose(){
+        this.openOptions=false;
+        //  console.log(this.openOptions)
+  },
    HttpPost(params){
      return new Promise((resolve, reject) => {
         postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
@@ -195,12 +560,43 @@ export default {
             // this.getEchartData('costChart', this.costOption)
             // this.getEchartData('clickChart', this.clickOption)
             // this.getEchartData('showChart', this.showOption)
-            
+            length =this.tableData.length
           }
         })
       })
    },
-    //获取echart的值
+   //请求项目和账户内容
+   accountHttp(){
+     this.treeData=[];
+     this.treeValue=[];
+     getAction('/ctop/projectMember/getProjectAccountByUserId', {}).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].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;
+                          this.treeData[index].children[i].value=ele.accountId;
+                          this.treeData[index].children[i].key=ele.accountId;
+                      })
+                        
+                    }                           
+                  }      
+                });
+                // console.log(this.treeData)
+            }
+       }
+     })
+   },
+    //初始化echart
     getEchartData(idName, optionName) {
       const chart = this.$refs[idName]
       //   console.log(chart)
@@ -212,6 +608,197 @@ export default {
         })
       }
     },
+
+    //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)
+    },
+    //导出报表
+    exportExcel() {
+      // var params = {}
+      // params.projectId = this.projectId
+      // params.disCount = this.discount
+      // params.statDate = this.statDate.format('YYYY-MM-DD')
+      // var name = this.dataElse.filter(item => {
+      //   return item.projectId == this.projectId
+      // })[0].projectName
+      // downFilePost('/ctop/yiche/report/exportDailyReport', params).then(res => {
+      //   let blob = new Blob([res], {
+      //     type: 'application/vnd.ms-excel'
+      let column = this.columns.map((item, index) => {
+        return item.dataIndex
+      })
+        let columns=['url',...column]
+        
+      downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListTotalExportExcel', {
+        columns,
+        signature: this.videoID,
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        cost: this.consumeValue,
+        accountIds:this.appId,
+      }).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 = this.statDate.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)
+    },
+    //table 排序
+    sort(pagination, filters, sorter, { currentDataSource }){
+          console.log(pagination, filters, sorter)
+          if(sorter.order == 'ascend'){
+              this.HttpPost(sorter.columnKey+'+')
+          }else if(sorter.order == 'descend'){
+              this.HttpPost(sorter.columnKey+'-')
+          }
+
+    },
+
+    
+    closeCustomColumn(){
+      this.visible=false;
+    },
+
+    //自定义之后修改父元素表头
+    changeColumn(val){
+        this.columns=[...val];
+        if(this.columns.length> this.columnsFixd.length){
+              this.scrollX=200
+        }
+    }
+  },
+  mounted() {
+    this.accountHttp()
+  },
+  filters: {
+    toPercentage(val) {
+      if(typeof val != 'string'){
+          return (val * 100).toFixed(2) + '%'
+      }else{
+        return val
+      }
+      
+    },
+     //保留两位小数并且变成货币格式
+    decimalsHandle(val){
+        // console.log(val)
+        if(val){
+          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]
+        }
+        
+        
+    },
+    //变成货币格式
+    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>
@@ -248,10 +835,70 @@ export default {
     }
   }
   .show{
-    background-color: #fff;
+    // background-color: #fff;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 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;
+        span{
+          font-weight: 600;
+          font-size: 16px;
+        }
+      }
     
   }
- 
+  }
+  .chartBox{
+    background-color: #fff;
+    margin: 15px 15px;
+    padding: 2px 10px;
+  }
+  .tableBox{
+    background-color: #fff;
+    margin: 15px 15px;
+    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>

+ 243 - 0
src/views/modules/Statistics/components/customColumn.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="customColumn">
+    <a-modal v-model="visibleOk" title="自定义列" on-ok="handleOk" @cancel="handleCancel" width="65%">
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel">取消</a-button>
+        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
+      </template>
+      <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
+      <div class="zhuti">
+        <div class="addlist">
+          <p>可添加的列</p>
+          <div class="selectionList">
+            <!--  v-for="(item,index) in addColumns" :key="index" -->
+            <selectComponent
+              :showCol="mylistNum"
+              @getshowlist="getshowlist"
+              :fixedColLength="fiexColumn.length"
+            />
+          </div>
+        </div>
+        <div class="listNum">
+          <p>已选{{mylistNum.length}}列</p>
+          <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
+          <ul class="selectlist">
+            <li v-for="(item,index) in mylistNum" :key="index">
+              <span v-if=" index < fiexColumn.length">
+                <a-icon type="lock" />
+                <span class="listText">{{item.title}}</span>
+              </span>
+              <span v-else-if=" index >=fiexColumn.length">
+                <a-icon type="menu" style="color:#ccc" />
+                <span class="listText">{{item.title}}</span>
+                <a-icon
+                  type="close"
+                  @click="deleteCol(item,index)"
+                  id="closeStyle"
+                  style="fontSize:12px;"
+                />
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import selectComponent from '../videoStatics/selectComponent'
+export default {
+  components: {
+    selectComponent
+  },
+  props: ['visible', 'listNum', 'fiexColumn'],
+
+  data() {
+    return {
+      visibleOk: false,
+      mylistNum: [],
+      loading: false
+    }
+  },
+  watch: {
+    visible(n, o) {
+      // console.log(n,o)
+      this.visibleOk = this.visible
+    },
+    listNum: {
+      handler(newValue, oldValue) {
+        this.mylistNum = newValue
+      },
+      immediate: true
+      // deep: true
+    }
+  },
+  methods: {
+    //弹出框确定
+    handleOk(e) {
+      this.loading = false
+      this.visibleOk = false
+      this.$emit('closeCustomColumn', false)
+      this.$emit('changeColumn', this.mylistNum)
+    },
+    //取消按钮
+    handleCancel() {
+      this.visibleOk = false
+      this.$emit('closeCustomColumn', false)
+    },
+    //清空全部
+    clearAllList() {
+      this.mylistNum = [...this.fiexColumn]
+    },
+    //从自定义列拿选择的项
+    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)
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style lang="scss" scoped>
+.addlist {
+  float: left;
+  width: 70%;
+  border: 1px solid #eee;
+  .selectionList {
+    padding: 10px 15px;
+    height: 450px;
+    overflow: auto;
+    .leibie {
+      .leiName {
+        font-size: 26px;
+        text-align: left;
+      }
+    }
+    .jutixiang {
+      display: inline-block;
+      width: 32%;
+      box-sizing: border-box;
+      padding: 10px 3px;
+    }
+  }
+}
+.listNum {
+  float: right;
+  width: 28%;
+  border: 1px solid #eee;
+  position: relative;
+}
+.zhuti {
+  margin-top: 15px;
+  overflow: hidden;
+
+  p {
+    height: 40px;
+    line-height: 20px;
+    padding: 10px 15px;
+
+    background: rgb(249, 250, 253);
+    border-bottom: 1px solid #eee;
+  }
+  #btn {
+    position: absolute;
+    right: 0;
+    top: 5px;
+  }
+  .selectlist {
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    height: 450px;
+    padding: 0 15px 10px;
+    overflow: auto;
+
+    li {
+      width: 100%;
+      padding: 5px 8px;
+      margin: 6px 0;
+      border-radius: 10px;
+      background: rgb(248, 248, 248);
+      height: 32px;
+      position: relative;
+      span {
+        width: 80%;
+        height: 100%;
+        display: inline-block;
+        margin: 0 10px;
+        // overflow:hidden;
+        // text-overflow:ellipsis;
+        // white-space: nowrap;
+      }
+      .listText {
+        position: absolute;
+        top: 2;
+        left: 10;
+        width: 40%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      #closeStyle {
+        position: absolute;
+        top: 9px;
+        right: 7px;
+      }
+    }
+  }
+}
+</style>

+ 4 - 4
src/views/modules/Statistics/newHome.vue

@@ -246,8 +246,7 @@ let sectionOption={
         // 坐标轴指示器,坐标轴触发有效
         type: 'line', // 默认为直线,可选为:'line' | 'shadow',
         
-        },
+        }, 
     },
     legend: {
         data: ['总消耗']
@@ -312,7 +311,7 @@ let init={
 
 let columns = [
   {
-    title: '日期/时间',
+    title: '时间',
     dataIndex: 'statDate',
     scopedSlots: { customRender: 'statDate' },
     align: 'center',
@@ -407,6 +406,7 @@ export default {
     
         type:1,
         dateValue:[moment(),moment()],
+        
       //日期矿打开
       openOptions:false,
 
@@ -429,7 +429,7 @@ export default {
     },
     dateValue: {
     handler(newName, oldName) {
-      console.log(newName,oldName)
+      // console.log(newName,oldName)
         this.sectionHttp({
             type:this.type,
             startDate:this.dateValue[0].format('YYYY-MM-DD'),

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

@@ -357,7 +357,6 @@ export default {
 
     disabledDate(current) {
       // console.log(current)
-
       return current && current > moment().subtract(1, 'day')
     },