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

Разлика између датотеке није приказан због своје велике величине
+ 1074 - 193
src/views/modules/Statistics/videoStatics/selectComponent.vue


+ 224 - 117
src/views/modules/Statistics/videoStatics/vDay.vue

@@ -3,53 +3,53 @@
     <div class="timeDiv">
       <div>
         <span>时间范围:</span>
-        <a-button type='default' @click="yesterdayHandle">昨日</a-button>
-        <a-range-picker
+        <a-button type="default" @click="yesterdayHandle">昨日</a-button>
+        <a-date-picker
           :disabled-date="disabledDate"
           format="YYYY-MM-DD"
           style="width: 200px;"
           @change="dateChange"
           v-model="dateRange"
         />
-        <span v-show="daysFlag">共{{totalSelect}}天</span>
       </div>
       <div>
         <span>消耗:</span>
         <a-input-number id="inputNumber" v-model="consumeValue" :min="0" @change="consumeOnChange" />
 
         <span>视频ID:</span>
-        <a-input class="myinput" v-model='videoID'/>
+        <a-input class="myinput" v-model="videoID" />
       </div>
 
       <a-button type="primary" @click="searchRes">查询</a-button>
     </div>
-
-    
+    <div style="display:flex;margin-bottom:15px" class="btndiv">
+      <a-button type="primary" @click="customColumns">自定义列</a-button>
+    </div>
 
     <a-modal v-model="visible" title="自定义列" on-ok="handleOk" 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" />
+      <!-- <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 />
-            </div>
+          <p>可添加的列</p>
+          <div class="selectionList">
+            <!--  v-for="(item,index) in addColumns" :key="index" -->
+            <selectComponent :showCol="listNum" @getshowlist="getshowlist" />
+          </div>
         </div>
         <div class="listNum">
           <p>已选{{columns.length}}列</p>
           <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
           <ul class="selectlist">
             <li v-for="(item,index) in listNum" :key="index">
-              <span v-if=" index <4">
+              <span v-if=" index <5">
                 <a-icon type="lock" />
                 <span>{{item.title}}</span>
               </span>
-              <span v-else-if=" index >3">
+              <span v-else-if=" index >4">
                 <a-icon type="menu" style="color:#ccc" />
                 <span>{{item.title}}</span>
                 <a-icon
@@ -60,8 +60,6 @@
                 />
               </span>
             </li>
-
-            
           </ul>
         </div>
       </div>
@@ -77,7 +75,58 @@
       :scroll="{ x: scrollX }"
       :loading="loading"
       ref="vSummaryTable"
+      
     >
+      <div slot="videoU" slot-scope="test,records">
+        <video
+          @click.stop
+          class="video"
+          :src="records.url"
+          controls="controls"
+          style="height:200px;width:112.5px"
+        >您的浏览器不支持 video 标签。</video>
+      </div>
+      <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="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="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="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 | tofixed }}</span>
+      <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | tofixed }}</span>
+      <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | tofixed }}</span>
+      <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | tofixed }}</span>
+      <span slot="activeCost" slot-scope="activeCost">{{ activeCost | tofixed }}</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>
     </a-table>
   </div>
 </template>
@@ -89,7 +138,7 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
 import selectComponent from './selectComponent'
 
 const columnsFixd = [
-    {
+  {
     title: '时间',
     dataIndex: 'statDatetime',
     align: 'center',
@@ -98,10 +147,12 @@ const columnsFixd = [
   },
   {
     title: '视频',
-    dataIndex: 'video',
+    dataIndex: 'videoU',
     align: 'center',
     width: 150,
-    fixed: 'left'
+    fixed: 'left',
+    key: 'videoU',
+    scopedSlots: { customRender: 'videoU' }
   },
   {
     title: '视频ID',
@@ -112,7 +163,7 @@ const columnsFixd = [
   },
   {
     title: '视频链接',
-    dataIndex: 'videoUrl',
+    dataIndex: 'url',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -120,7 +171,7 @@ const columnsFixd = [
 
   {
     title: '视频描述',
-    dataIndex: 'videoDes',
+    dataIndex: 'materialName',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -132,21 +183,22 @@ let variableCol = [
     dataIndex: 'cost',
     scopedSlots: { customRender: 'cost' },
     align: 'center',
-    sorter: (a, b) => a.cost - b.cost,
+    sorter: (a, b) => a.cost - b.cost
   },
   {
     title: '点击数',
-    dataIndex: 'click',
+    dataIndex: 'clickMaterial',
     align: 'center',
-    scopedSlots: { customRender: 'click' },
-    sorter: (a, b) => a.click - b.click,
+    scopedSlots: { customRender: 'clickMaterial' },
+    sorter: (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
     title: '点击率',
     dataIndex: 'ctr',
     align: 'center',
+    width: 100,
     scopedSlots: { customRender: 'ctr' },
-    sorter: (a, b) => a.ctr - b.ctr,
+    sorter: (a, b) => a.ctr - b.ctr
   },
 
   {
@@ -154,39 +206,40 @@ let variableCol = [
     dataIndex: 'showMaterial',
     align: 'center',
     scopedSlots: { customRender: 'showMaterial' },
-    sorter: (a, b) => a.showMaterial - b.showMaterial,
+    sorter: (a, b) => a.showMaterial - b.showMaterial
   },
   {
     title: '25%进度播放率',
     dataIndex: 'play25FeedBreakRate',
     align: 'center',
+    width:170,
     scopedSlots: { customRender: 'play25FeedBreakRate' },
-    sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate,
+    sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
   },
   {
     title: '整体完播率',
     dataIndex: 'playOverRate',
     align: 'center',
+    width:100,
     tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
     scopedSlots: { customRender: 'playOverRate' },
-    
-    sorter: (a, b) => a.playOverRate - b.playOverRate,
+
+    sorter: (a, b) => a.playOverRate - b.playOverRate
   },
   {
     title: '转化数',
     dataIndex: 'convertMaterial',
     align: 'center',
     scopedSlots: { customRender: 'convertMaterial' },
-    sorter: (a, b) => a.convertMaterial - b.convertMaterial,
+    sorter: (a, b) => a.convertMaterial - b.convertMaterial
   },
   {
     title: '转化率',
     dataIndex: 'convertRate',
     align: 'center',
     scopedSlots: { customRender: 'convertRate' },
-    sorter: (a, b) => a.convertRate - b.convertRate,
-  },
- 
+    sorter: (a, b) => a.convertRate - b.convertRate
+  }
 ]
 
 export default {
@@ -195,16 +248,16 @@ export default {
       //消耗的值
       consumeValue: 1000,
       //视频ID
-      videoID:'',
+      videoID: '',
       columns: [...columnsFixd, ...variableCol],
-      addColumns:[],
+      addColumns: [],
       data: [],
       //右侧显示供选择几天
       totalSelect: 0,
       //是否显示共选几天的提示
       daysFlag: false,
       //日期选择器显示的日期范围
-      dateRange: [],
+      dateRange: '',
       dataElse: [],
       loading: false,
       visible: false,
@@ -213,13 +266,15 @@ export default {
       //弹出框中现实的选中列数
       scrollX: 0,
       listNum: [],
-      
+
       //
+      timedata: []
 
+      //
     }
   },
-  components:{
-      selectComponent
+  components: {
+    selectComponent
   },
   mixins: [JeecgListMixin],
   methods: {
@@ -233,68 +288,69 @@ export default {
     consumeOnChange() {},
 
     //点击时间的 昨日 按钮
-    yesterdayHandle(){
-        this.dateRange=[moment().subtract(1, 'days').format("YYYY-MM-DD"),moment().subtract(1, 'days').format("YYYY-MM-DD")];
-        console.log(this.dateRange);
-        this.totalSelect=1;
-        this.daysFlag = true
+    yesterdayHandle() {
+      this.dateRange = moment()
+          .subtract(1, 'days')
+          .format('YYYY-MM-DD')
+       
+      // console.log(this.dateRange);
+      this.timedata=this.dateRange
+      // this.totalSelect = 1
+      // this.daysFlag = true
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDaily', {
+        date: this.timedata,
+        cost: this.consumeValue,
+        signature:this.videoID
+      }).then(res => {
+        let resArr = []
+        this.loading = false
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.data.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.data = result
+        }
+      })
     },
 
-
     //查询按钮
-    searchRes() {},
-
-    //导出报表
-    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 downloadElement = document.createElement('a')
-        let href = window.URL.createObjectURL(blob) //创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = name + '-' + this.statDate.format('YYYY-MM-DD') + '-日报' //下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() //点击下载
-        document.body.removeChild(downloadElement) //下载完成移除元素
-        window.URL.revokeObjectURL(href) //释放掉blob对象
+    searchRes() {
+      console.log(this.timedata[0])
+      this.date = []
+      this.loading = true
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDaily', {
+        date: this.timedata,
+        cost: this.consumeValue,
+        signature:this.videoID
+      }).then(res => {
+        let resArr = []
+        this.loading = false
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.data.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.data = result
+        }
       })
     },
 
+   
+
     //日期选择回调
     dateChange(data, dataString) {
-      
-      if(data.length>0){
-            console.log(data[1]._d - data[0]._d, dataString)
-            this.dateRange[0] = data[0]
-            this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
-            this.daysFlag = true
-      }else{
-          this.daysFlag=false;
-          this.dateRange = []
-      }
-    
-
-
-      if (this.totalSelect > 92) {
-        this.$message.error('时间跨度太长啦,选小一点好嘛?')
-        this.daysFlag = false
-        this.dateRange = []
-      }
+      this.timedata = dataString
     },
 
     //弹出框打开,自定义列
     customColumns() {
       this.visible = true
       this.listNum = this.columns
-     
     },
     //弹出框确定
     handleOk(e) {
@@ -305,10 +361,13 @@ export default {
       //     this.visible = false;
       //     this.loading = false;
       // }, 1000);
-      if (this.listNum.length > 12) {
-        this.scrollX = (this.listNum.length - 12) * 500
+     if (this.listNum.length > 8 && this.listNum.length<15 ) {
+        this.scrollX = (this.listNum.length - 8) * 1000
         console.log(this.$refs.vSummaryTable)
-      } else {
+      } else if(this.listNum.length >= 15){
+        this.scrollX = (this.listNum.length - 12) * 700
+        
+      }else{
         this.scrollX = 0
       }
       // console.log(this.columns.length)
@@ -320,9 +379,9 @@ export default {
         // console.log(1)
       } else {
         this.columns.map((item, index) => {
-          if (index ==1) {
+          if (index == 1) {
             item.width = 150
-          } else if (index > 2 && index < 4 && index==0) {
+          } else if (index > 2 && index < 4 && index == 0) {
             item.width = 100
           }
         })
@@ -341,6 +400,7 @@ export default {
     //清空全部按钮的事件
     clearAllList() {
       this.listNum = [...columnsFixd]
+      console.log(this.listNum)
       console.log(this.$refs.vSummaryTable)
     },
 
@@ -349,31 +409,80 @@ export default {
       this.listNum = this.listNum.filter((item1, num) => {
         return num != index
       })
+    },
+
+    //从自定义列拿选择的项
+    getshowlist(val) {
+      console.log(val)
+      if (val.length) {
+        console.log(val);
+        this.listNum = [...this.listNum,...val]
+        
+      } else {
+        var arr
+        arr = this.listNum.filter((item, index) => {
+          return item.dataIndex == val.dataIndex
+        })
+      }
+      if (arr.length > 0) {
+        
+        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')
     // this.getParticipateList()
     this.statDate = moment().subtract(1, 'day')
     moment().format('YYYY-MM-DD_HH:mm')
-    postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDaily', {
-      date:'2020-05-01',
-      
+
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType:2,
     }).then((res)=>{
-        let resArr=[];
-        
-        console.log(res);
-        if(res.success){
-          let result=res.result
-            this.data.push({ ...result, key: 1 })
-            result.map((item,index)=>{
-                item.key=index
-            })
-            this.data=result
-        }
-       
+      // console.log(res)
+      if(res.success){
+      // console.log(JSON.parse(res.result))
+      let columns=JSON.parse(res.result)
+      if(columns.length){
+           columns.map((item,index)=>{
+          item.sorter=function(a,b){  return a[item.dataIndex]-b[item.dataIndex]}
+        })
+        this.columns=columns
+        // console.log(this.columns)
+      }
+      }
+
     })
+  },
+  deactivated() {
+      let arr = JSON.stringify(this.columns)
+      // console.log(arr)
+    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+      json: arr,
+      columnType: 2
+    }).then(res => {
+      // console.log(res)
+    })
+  },
+
+  filters: {
+    toPercentage(val) {
+      return (val * 100).toFixed(2) + '%'
+      // return val
+    }
+  },
+
 
-  }
 }
 </script>
 
@@ -402,18 +511,17 @@ span {
     height: 450px;
     overflow: auto;
     .leibie {
-      .leiName{
+      .leiName {
         font-size: 26px;
         text-align: left;
       }
     }
-    .jutixiang{
-        display: inline-block;
-        width: 32%;
-        box-sizing: border-box;
-        padding: 10px 3px;
+    .jutixiang {
+      display: inline-block;
+      width: 32%;
+      box-sizing: border-box;
+      padding: 10px 3px;
     }
-
   }
 }
 .listNum {
@@ -463,5 +571,4 @@ span {
     }
   }
 }
-
 </style>

+ 758 - 4
src/views/modules/Statistics/videoStatics/vMonth.vue

@@ -1,15 +1,769 @@
 <template>
-    <div>
-        vMonth
+  <div class="vsummary">
+    <div class="timeDiv">
+      <div>
+        <span>时间范围:</span>
+        <a-button type="default" @click="lastWeekHandle">过去一月</a-button>
+        <a-range-picker
+          :disabled-date="disabledDate"
+          format="YYYY-MM-DD"
+          style="width: 200px;"
+          @change="dateChange"
+          v-model="dateRange"
+        />
+        <span v-show="daysFlag">共{{totalSelect}}天</span>
+      </div>
+      <div>
+        <span>消耗:</span>
+        <a-input-number id="inputNumber" v-model="consumeValue" :min="0" @change="consumeOnChange" />
+
+        <span>视频ID:</span>
+        <a-input class="myinput" v-model="videoID" />
+      </div>
+
+      <a-button type="primary" @click="searchRes">查询</a-button>
+    </div>
+
+    <div style="display:flex;margin-bottom:15px" class="btndiv">
+      <a-button type="primary" @click="customColumns">自定义列</a-button>
     </div>
+
+    <a-modal v-model="visible" title="自定义列" on-ok="handleOk" 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="listNum" @getshowlist="getshowlist" />
+          </div>
+        </div>
+        <div class="listNum">
+          <p>已选{{columns.length}}列</p>
+          <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
+          <ul class="selectlist">
+            <li v-for="(item,index) in listNum" :key="index">
+              <span v-if=" index <6">
+                <a-icon type="lock" />
+                <span>{{item.title}}</span>
+              </span>
+              <span v-else-if=" index >5">
+                <a-icon type="menu" style="color:#ccc" />
+                <span>{{item.title}}</span>
+                <a-icon
+                  type="close"
+                  @click="deleteCol(item,index)"
+                  id="closeStyle"
+                  style="fontSize:12px;"
+                />
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </a-modal>
+
+    <a-table
+      size="middle"
+      :columns="columns"
+      :dataSource="data"
+      bordered
+      id="outTable"
+      :pagination="ipagination"
+      :scroll="{ x: scrollX }"
+      :loading="loading"
+      tableLayout="auto"
+      ref="vSummaryTable"
+    >
+     
+
+      <span slot="operation" slot-scope="text, record">
+        <a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
+      </span>
+
+      <div slot="videoU" slot-scope="test,records">
+        <video
+          @click.stop
+          class="video"
+          :src="records.url"
+          controls="controls"
+          style="height:200px;width:112.5px"
+        >您的浏览器不支持 video 标签。</video>
+      </div>
+      <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="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="statDatetime" slot-scope="">{{ timedata[0]+'~'+timedata[1]}}</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="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 | tofixed }}</span>
+      <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | tofixed }}</span>
+      <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | tofixed }}</span>
+      <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | tofixed }}</span>
+      <span slot="activeCost" slot-scope="activeCost">{{ activeCost | tofixed }}</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>
+    </a-table>
+    <!-- 明细表 -->
+
+    <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
+      <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button>
+      <a-table
+        :columns="detailConsum"
+        :data-source="detailData"
+        bordered
+        tableLayout="auto"
+        :pagination="false"
+      >
+            <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
+        
+      </a-table>
+    </a-modal>
+  </div>
 </template>
 
 <script>
-    export default {
+import moment from 'moment'
+import { JeecgListMixin } from '@/mixins/ipagination'
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+import selectComponent from './selectComponent'
+const columnsFixd = [
+  {
+    title: '时间',
+    dataIndex: 'statDatetime',
+    align: 'center',
+    width: 120,
+    fixed: 'left',
+    scopedSlots: { customRender: 'statDatetime' }
+  },
+  {
+    title: '视频',
+    dataIndex: 'videoU',
+    align: 'center',
+    width: 150,
+    fixed: 'left',
+    key: 'videoU',
+    scopedSlots: { customRender: 'videoU' }
+  },
+  {
+    title: '视频ID',
+    dataIndex: 'signature',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: '视频链接',
+    dataIndex: 'videoUrl',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+
+  {
+    title: '视频描述',
+    dataIndex: 'materialName',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    align: 'center',
+    scopedSlots: { customRender: 'operation' },
+    width: 80,
+    fixed: 'left'
+  }
+]
+let variableCol = [
+  {
+    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
+  },
+  {
+    title: '点击率',
+    dataIndex: 'ctr',
+    align: 'center',
+    width: 50,
+    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: '25%进度播放率',
+    dataIndex: 'play25FeedBreakRate',
+    align: 'center',
+     width:170,
+    scopedSlots: { customRender: 'play25FeedBreakRate' },
+    sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
+  },
+  {
+    title: '整体完播率',
+    dataIndex: 'playOverRate',
+    align: 'center',
+    tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
+    scopedSlots: { customRender: 'playOverRate' },
+
+    sorter: (a, b) => a.playOverRate - b.playOverRate
+  },
+  {
+    title: '转化数',
+    dataIndex: 'convertMaterial',
+    align: 'center',
+    scopedSlots: { customRender: 'convertMaterial' },
+    sorter: (a, b) => a.convertMaterial - b.convertMaterial
+  },
+  {
+    title: '转化率',
+    dataIndex: 'convertRate',
+    align: 'center',
+    scopedSlots: { customRender: 'convertRate' },
+    sorter: (a, b) => a.convertRate - b.convertRate
+  }
+]
+let length=0
+
+let detailConsum = [
+  {
+    title: '客户',
+    dataIndex: 'advertiserName',
+    align: 'center',
+
+    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: '视频链接',
+    dataIndex: 'url',
+    align: 'center',
+    width:250,
+    customRender: (value, row, index) => {
+      const obj = {
+        children: value,
+        attrs: {}
+      }
+      if (index === 0) {         
+              obj.attrs.rowSpan = length     
+      } else {
+        obj.attrs.rowSpan = 0
+      }
+      return obj
+    }
+  },
+  {
+    title: '时间',
+    dataIndex: 'statDatetime',
+    align: 'center',
+    width: 120
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center'
+  },
+  {
+    title: '环比',
+    dataIndex: 'huanbi',
+    align: 'center',
+    scopedSlots: { customRender: 'huanbi' },
+  }
+]
+export default {
+  data() {
+    return {
+      //明细的表头
+      detailConsum,
+      //明细里的数据
+      detailData: [],
+
+      consumeValue: 1000,
+      //视频ID
+      videoID: null,
+      columns: [...columnsFixd, ...variableCol],
+      data: [],
+      totalSelect: 0,
+      daysFlag: false,
+      dateRange: [],
+      dataElse: [],
+      loading: false,
+      visible: false,
+      //自定义列的搜索框
+      searchInput: '',
+      //弹出框中现实的选中列数
+      scrollX: 0,
+      listNum: [],
+
+      value: this.text,
+      editable: false,
+
+      //详细信息的开关
+      visibleDetail: false,
+
+      //时间选择 字符串类型
+      timedata: [],
+
+      //记录点开的视频的md5
+      signature:null
+    }
+  },
+  components: {
+    selectComponent
+  },
+  props: {
+    text: String
+  },
+  mixins: [JeecgListMixin],
+  methods: {
+    moment,
+    disabledDate(current) {
+      // console.log(current)
+
+      return current && current > moment().subtract(1, 'day')
+    },
+    //过去一个月按钮事件
+    lastWeekHandle() {
+      this.dateRange = [
+        moment()
+          .subtract(1, 'months')
+          .format('YYYY-MM-DD'),
+        moment()
+          .subtract(1, 'days')
+          .format('YYYY-MM-DD')
+      ]
+      this.timedata=this.dateRange
+      console.log(this.dateRange)
+      this.totalSelect = 7
+      this.daysFlag = true
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListMonth', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        cost: this.consumeValue,
+        signature: this.videoID
+      }).then(res => {
+        let resArr = []
+        this.loading = false
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.data.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.data = result;
+          
+        }
+      })
+
+    },
+
+    consumeOnChange() {},
+    //查询按钮
+    searchRes() {
+      this.date = []
+      this.loading = true
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListMonth', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        cost: this.consumeValue,
+        signature: this.videoID
+      }).then(res => {
+        let resArr = []
+        this.loading = false
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.data.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.data = result;
+          
+        }
+      })
+    },
+
+    //导出报表
+    exportExcel() {
+      // var params = {}
+      // params.projectId = this.projectId
+      // params.disCount = this.discount
+      // params.statDate = this.statDate.format('YYYY-MM-DD')
+      var name = this.data.filter(item => {
+        return item.signature == this.signature
+      })[0].projectName
+      downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListDetailExportExcel', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        signature: this.signature
+      }).then(res => {
+        let blob = new Blob([res], {
+          type: 'application/vnd.ms-excel'
+        })
+        let downloadElement = document.createElement('a')
+        let href = window.URL.createObjectURL(blob) //创建下载的链接
+        downloadElement.href = href
+        downloadElement.download = name + '-' +this.timedata[0] + '-' + this.timedata[1]    //下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() //点击下载
+        document.body.removeChild(downloadElement) //下载完成移除元素
+        window.URL.revokeObjectURL(href) //释放掉blob对象
+      })
+    },
+
+    //日期选择回调
+    dateChange(data, dataString) {
+      // console.log(data[1]._d - data[0]._d, dataString)
+      if(data.length){
+          this.timedata = dataString
+          this.dateRange[0] = data[0]
+          this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
+          this.daysFlag = true
+          if (this.totalSelect > 31) {
+            this.$message.error('时间跨度太长啦,选小一点好嘛?')
+            this.daysFlag = false
+            this.dateRange = []
+          }
+      }else{
+        this.daysFlag=false
+        this.dateRange=[]
+      }
+      
+    },
+
+    //弹出框打开,自定义列
+    customColumns() {
+      this.visible = true
+      this.listNum = this.columns
+    },
+    //弹出框确定
+    handleOk(e) {
+      this.loading = false
+      this.columns = this.listNum
+      console.log(this.columns)
+      this.visible = false
+      // setTimeout(() => {
+      //     this.visible = false;
+      //     this.loading = false;
+      // }, 1000);
+      if (this.listNum.length > 8 && this.listNum.length<15 ) {
+        this.scrollX = (this.listNum.length - 8) * 1000
+        console.log(this.$refs.vSummaryTable)
+      } else if(this.listNum.length >= 15){
+        this.scrollX = (this.listNum.length - 12) * 700
+        
+      }else{
+        this.scrollX = 0
+      }
+
+      if (this.listNum.length == 6) {
+        this.columns.map((item, index) => {
+          item.width = 300
+        })
+      } else {
+        this.columns.map((item, index) => {
+          if (index == 1) {
+            item.width = 150
+          } else if (index > 2 && index < 4 && index == 0) {
+            item.width = 100
+          }
+        })
+        // console.log(2)
+      }
+    },
+    //弹出框取消按钮
+    handleCancel(e) {
+      this.visible = false
+    },
+    //弹出框里的搜索框
+    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
+      })
+    },
+
+    //表格里的操作 打开明细
+
+    showModal() {
+      this.visibleDetail = true
+    },
+    
+
+    //从自定义列拿选择的项
+    getshowlist(val) {
+    //   console.log(val)
+      if (val.length) {
+        // console.log(val);
+        this.listNum = [...this.listNum,...val]
+        
+      } else {
+        var arr
+        arr = this.listNum.filter((item, index) => {
+          return item.dataIndex == val.dataIndex
+        })
+      }
+      if (arr.length > 0) {
         
+        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)
+      }
+    },
+
+    //点击查看明细按钮的事件
+    opendetail(text, record) {
+      console.log(text, record)
+      this.visibleDetail = true
+      this.detailData = []
+
+      this.signature=record.signature
+      console.log(this.signature)
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        signature: record.signature
+      }).then(res => {
+        let resArr = []
+
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.detailData.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.detailData = result
+          length =this.detailData.length
+        }
+      })
+    }
+  },
+   activated() {
+    console.log('activated')
+    // this.getParticipateList()
+    this.statDate = moment().subtract(1, 'day')
+    moment().format('YYYY-MM-DD_HH:mm')
+
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType:4,
+    }).then((res)=>{
+      // console.log(res)
+      if(res.success){
+      // console.log(JSON.parse(res.result))
+      let columns=JSON.parse(res.result)
+      if(columns.length){
+           columns.map((item,index)=>{
+          item.sorter=function(a,b){  return a[item.dataIndex]-b[item.dataIndex]}
+        })
+        this.columns=columns
+        // console.log(this.columns)
+      }
+     
+      }
+
+    })
+  },
+  deactivated() {
+      let arr = JSON.stringify(this.columns)
+      // console.log(arr)
+    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+      json: arr,
+      columnType: 4
+    }).then(res => {
+      // console.log(res)
+    })
+  },
+
+  filters: {
+    toPercentage(val) {
+      return (val * 100).toFixed(2) + '%'
+      // return val
+    },
+    toshowTime(val) {
+      // console.log(val, this.timedata)
+      // return this.timedata[0] + '~' + this.timedata[1]
+      return val
     }
+  }
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
+.vsummary {
+  width: 100%;
+  height: 100%;
+}
+.timeDiv {
+  display: flex;
+  justify-content: space-between;
+}
+span {
+  margin-left: 5px;
+}
+.myinput {
+  width: 40%;
+}
 
+.addlist {
+  float: left;
+  width: 70%;
+  border: 1px solid #eee;
+}
+.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 {
+    list-style: none;
+    margin: 0;
+    height: 450px;
+    padding: 0 15px 10px;
+    overflow: auto;
+    li {
+      padding: 5px 8px;
+      margin: 6px 0;
+      border-radius: 10px;
+      background: rgb(248, 248, 248);
+      position: relative;
+      span {
+        display: inline-block;
+        margin: 0 10px;
+      }
+      #closeStyle {
+        position: absolute;
+        top: 9px;
+        right: 7px;
+      }
+    }
+  }
+}
+
+.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;
+    }
+  }
+}
+#mybtn {
+  margin: 0 10px 15px 0;
+}
 </style>

+ 299 - 101
src/views/modules/Statistics/videoStatics/vSummary.vue

@@ -18,7 +18,7 @@
         <a-input-number id="inputNumber" v-model="consumeValue" :min="0" @change="consumeOnChange" />
 
         <span>视频ID:</span>
-        <a-input class="myinput" />
+        <a-input class="myinput" v-model="videoID" />
       </div>
 
       <a-button type="primary" @click="searchRes">查询</a-button>
@@ -26,7 +26,7 @@
 
     <div style="display:flex;margin-bottom:15px" class="btndiv">
       <a-button type="primary" @click="customColumns">自定义列</a-button>
-      <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button>
+      <a-button type="default" @click="exportExcel" id="mybtn"  v-show="exportExcelIsOk">导出报表</a-button>
     </div>
 
     <a-modal v-model="visible" title="自定义列" on-ok="handleOk" width="65%">
@@ -34,17 +34,14 @@
         <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" />
+      <!-- <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" -->
-                <div>
-                    
-                </div>
-            
-            </div>
+          <p>可添加的列</p>
+          <div class="selectionList">
+            <!--  v-for="(item,index) in addColumns" :key="index" -->
+            <selectComponent :showCol="listNum" @getshowlist="getshowlist" />
+          </div>
         </div>
         <div class="listNum">
           <p>已选{{columns.length}}列</p>
@@ -66,18 +63,6 @@
                 />
               </span>
             </li>
-
-            <!-- <li v-for="(item,index) in listNum" :key=index v-if="index < 5">
-                                <a-icon type="lock" />
-                                <span>{{item.title}}</span>
-                               
-                            </li>
-                            <li v-for="(item,index) in listNum" :key=index v-if="index > 4">
-                                <a-icon type="menu" style="color:#ccc" />
-                                <span>{{item.title}}</span>
-                                <a-icon type="close" @click="deleteCol(item,index)" id='closeStyle' style="fontSize:12px;"/>
-                                
-            </li>-->
           </ul>
         </div>
       </div>
@@ -93,7 +78,61 @@
       :scroll="{ x: scrollX }"
       :loading="loading"
       ref="vSummaryTable"
-    ></a-table>
+    >
+      <div slot="videoU" slot-scope="test,records">
+        <video
+          @click.stop
+          class="video"
+          :src="records.url"
+          controls="controls"
+          style="height:200px;width:112.5px"
+        >您的浏览器不支持 video 标签。</video>
+      </div>
+      <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="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 | tofixed }}</span>
+      <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | tofixed }}</span>
+      <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | tofixed }}</span>
+      <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | tofixed }}</span>
+      <span slot="activeCost" slot-scope="activeCost">{{ activeCost | tofixed }}</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="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 | tofixed }}</span>
+      <span slot="statDatetime" slot-scope>{{ timedata[0]+'~'+timedata[1]}}</span>
+    </a-table>
   </div>
 </template>
 
@@ -106,21 +145,23 @@ import selectComponent from './selectComponent'
 const columnsFixd = [
   {
     title: '视频',
-    dataIndex: 'video',
+    dataIndex: 'videoU',
     align: 'center',
     width: 150,
-    fixed: 'left'
+    fixed: 'left',
+    key: 'videoU',
+    scopedSlots: { customRender: 'videoU' }
   },
   {
     title: '视频ID',
-    dataIndex: 'videoID',
+    dataIndex: 'signature',
     align: 'center',
-    width: 150,
+    width: 100,
     fixed: 'left'
   },
   {
     title: '视频链接',
-    dataIndex: 'videoLink',
+    dataIndex: 'url',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -128,7 +169,7 @@ const columnsFixd = [
 
   {
     title: '视频描述',
-    dataIndex: 'videoDes',
+    dataIndex: 'materialName',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -137,62 +178,77 @@ const columnsFixd = [
 let variableCol = [
   {
     title: '消耗',
-    dataIndex: 'consume',
-    scopedSlots: { customRender: 'consume' },
-    align: 'center'
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+    sorter: (a, b) => a.cost - b.cost
   },
   {
     title: '点击数',
-    dataIndex: 'clickNum',
+    dataIndex: 'clickMaterial',
     align: 'center',
-    scopedSlots: { customRender: 'clickNum' }
+    scopedSlots: { customRender: 'clickMaterial' },
+    sorter: (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
     title: '点击率',
-    dataIndex: 'clickThroughRate',
+    dataIndex: 'ctr',
     align: 'center',
-    scopedSlots: { customRender: 'clickThroughRate' }
+    width: 100,
+    scopedSlots: { customRender: 'ctr' },
+    sorter: (a, b) => a.ctr - b.ctr
   },
 
   {
     title: '展示数',
-    dataIndex: 'showNum',
+    dataIndex: 'showMaterial',
     align: 'center',
-    scopedSlots: { customRender: 'showNum' }
+    scopedSlots: { customRender: 'showMaterial' },
+    sorter: (a, b) => a.showMaterial - b.showMaterial
   },
   {
     title: '25%进度播放率',
-    dataIndex: '25%progressRate',
+    dataIndex: 'play25FeedBreakRate',
     align: 'center',
-    scopedSlots: { customRender: '25%progressRate' }
+    width:160,
+    scopedSlots: { customRender: 'play25FeedBreakRate' },
+    sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
   },
   {
     title: '整体完播率',
-    dataIndex: 'overallCompletionRate',
+    dataIndex: 'playOverRate',
     align: 'center',
-    scopedSlots: { customRender: 'overallCompletionRate' }
+    width:110,
+    tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
+    scopedSlots: { customRender: 'playOverRate' },
+    sorter: (a, b) => a.playOverRate - b.playOverRate
   },
   {
     title: '转化数',
-    dataIndex: 'conversionNum',
+    dataIndex: 'convertMaterial',
     align: 'center',
-    scopedSlots: { customRender: 'conversionNum' }
+    scopedSlots: { customRender: 'convertMaterial' },
+    sorter: (a, b) => a.convertMaterial - b.convertMaterial
   },
   {
     title: '转化率',
-    dataIndex: 'conversionRate',
+    dataIndex: 'convertRate',
     align: 'center',
-    scopedSlots: { customRender: 'conversionRate' }
-  },
- 
+    scopedSlots: { customRender: 'convertRate' },
+    sorter: (a, b) => a.convertRate - b.convertRate
+  }
 ]
 
 export default {
   data() {
     return {
+
+      //是否显示导出按钮
+      exportExcelIsOk:true,
       consumeValue: 1000,
+
       columns: [...columnsFixd, ...variableCol],
-      addColumns:[],
+      addColumns: [],
       data: [],
       totalSelect: 0,
       daysFlag: false,
@@ -206,10 +262,15 @@ export default {
       scrollX: 0,
       listNum: [],
       //
-      form:[]
+      form: [],
+      videoID:'',
+      timedata: []
     }
   },
   mixins: [JeecgListMixin],
+  components: {
+    selectComponent
+  },
   methods: {
     moment,
     disabledDate(current) {
@@ -220,25 +281,59 @@ export default {
 
     consumeOnChange() {},
     //查询按钮
-    searchRes() {},
+    searchRes() {
+      this.date = []
+      this.loading = true
+      postAction('/toutiao/videoReportDaily/videoInfoListTotal', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        cost: this.consumeValue,
+        signature: this.videoID
+      }).then(res => {
+        let resArr = []
+        this.loading = false
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.data.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.data = result
+        }
+      })
+    },
 
     //导出报表
     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 => {
+      // 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 columns = this.columns.map((item, index) => {
+        return item.dataIndex
+      })
+
+      downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListTotalExportExcel', {
+        columns,
+        signature:this.videoID,
+        startDate:this.timedata[0],
+        endDate:this.timedata[1],
+        cost:this.consumeValue
+      }).then(res => {
         let blob = new Blob([res], {
           type: 'application/vnd.ms-excel'
         })
         let downloadElement = document.createElement('a')
         let href = window.URL.createObjectURL(blob) //创建下载的链接
         downloadElement.href = href
-        downloadElement.download = name + '-' + this.statDate.format('YYYY-MM-DD') + '-日报' //下载后文件名
+        downloadElement.download = this.statDate.format('YYYY-MM-DD') + '视频汇总' //下载后文件名
         document.body.appendChild(downloadElement)
         downloadElement.click() //点击下载
         document.body.removeChild(downloadElement) //下载完成移除元素
@@ -248,6 +343,7 @@ export default {
 
     //日期选择回调
     dateChange(data, dataString) {
+      this.timedata = dataString
       console.log(data[1]._d - data[0]._d, dataString)
       this.dateRange[0] = data[0]
       this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
@@ -262,47 +358,24 @@ export default {
     //弹出框打开,自定义列
     customColumns() {
       this.visible = true
-      this.listNum = this.columns
-      this.addColumns=[
-           {
-                title: '转化率',
-                dataIndex: 'conversionRate1',
-                align: 'center',
-                scopedSlots: { customRender: 'conversionRate1' }
-            },
-            {
-                title: '转化率',
-                dataIndex: 'conversionRate2',
-                align: 'center',
-                scopedSlots: { customRender: 'conversionRate2' }
-            },
-            {
-                title: '转化率',
-                dataIndex: 'conversionRate3',
-                align: 'center',
-                scopedSlots: { customRender: 'conversionRate3' }
-            },
-            {
-                title: '转化率',
-                dataIndex: 'conversionRate4',
-                align: 'center',
-                scopedSlots: { customRender: 'conversionRate4' }
-            }
-      ]
+      this.listNum = [...this.columns]
     },
     //弹出框确定
     handleOk(e) {
       this.loading = false
-      this.columns = this.listNum
+      this.columns = [...this.listNum]
       this.visible = false
       // setTimeout(() => {
       //     this.visible = false;
       //     this.loading = false;
       // }, 1000);
-      if (this.listNum.length > 12) {
-        this.scrollX = (this.listNum.length - 12) * 500
+      if (this.listNum.length > 8 && this.listNum.length<15 ) {
+        this.scrollX = (this.listNum.length - 8) * 1000
         console.log(this.$refs.vSummaryTable)
-      } else {
+      } else if(this.listNum.length >= 15){
+        this.scrollX = (this.listNum.length - 12) * 700
+        
+      }else{
         this.scrollX = 0
       }
       // console.log(this.columns.length)
@@ -325,7 +398,8 @@ export default {
     },
     //弹出框取消按钮
     handleCancel(e) {
-      this.visible = false
+      this.visible = false;
+      
     },
     //弹出框里的搜索框
     onSearch(value) {
@@ -343,13 +417,137 @@ export default {
       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')
     // this.getParticipateList()
     this.statDate = moment().subtract(1, 'day')
     moment().format('YYYY-MM-DD_HH:mm')
 
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType:1,
+    }).then((res)=>{
+      // console.log(res)
+      if(res.success){
+      // console.log(JSON.parse(res.result))
+      let columns=JSON.parse(res.result)
+     if(columns.length){
+           columns.map((item,index)=>{
+          item.sorter=function(a,b){  return a[item.dataIndex]-b[item.dataIndex]}
+        })
+        this.columns=columns
+        // console.log(this.columns)
+      }
+      }
+
+    })
+  },
+  deactivated() {
+      let arr = JSON.stringify(this.columns)
+      // console.log(arr)
+    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+      json: arr,
+      columnType: 1
+    }).then(res => {
+      // console.log(res)
+    })
+  },
+
+  filters: {
+    toPercentage(val) {
+      return (val * 100).toFixed(2) + '%'
+      // return val
+    },
+    toshowTime(val) {
+      // console.log(val, this.timedata)
+      // return this.timedata[0] + '~' + this.timedata[1]
+      return val
+    },
+    tofixed(val){
+      return val.toFixed(2)
+    }
+  },
+
+  mounted() {
+    this.columns = [...columnsFixd, ...variableCol]
+    console.log('mounted')
+    postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then((res)=>{
+      console.log(res)
+      if(res.success){
+          if(res.result){
+              this.exportExcelIsOk=true
+          }else{
+            this.exportExcelIsOk=false
+          }
+      }
+
+    })
   }
 }
 </script>
@@ -376,19 +574,20 @@ span {
   border: 1px solid #eee;
   .selectionList {
     padding: 10px 15px;
+    height: 450px;
+    overflow: auto;
     .leibie {
-      .leiName{
+      .leiName {
         font-size: 26px;
         text-align: left;
       }
     }
-    .jutixiang{
-        display: inline-block;
-        width: 32%;
-        box-sizing: border-box;
-        padding: 10px 3px;
+    .jutixiang {
+      display: inline-block;
+      width: 32%;
+      box-sizing: border-box;
+      padding: 10px 3px;
     }
-
   }
 }
 .listNum {
@@ -432,7 +631,6 @@ span {
         // overflow:hidden;
         // text-overflow:ellipsis;
         // white-space: nowrap;
-
       }
       #closeStyle {
         position: absolute;

+ 402 - 120
src/views/modules/Statistics/videoStatics/vWeek.vue

@@ -3,7 +3,7 @@
     <div class="timeDiv">
       <div>
         <span>时间范围:</span>
-        <a-button type='default' @click="lastWeekHandle">过去一周</a-button>
+        <a-button type="default" @click="lastWeekHandle">过去一周</a-button>
         <a-range-picker
           :disabled-date="disabledDate"
           format="YYYY-MM-DD"
@@ -18,23 +18,29 @@
         <a-input-number id="inputNumber" v-model="consumeValue" :min="0" @change="consumeOnChange" />
 
         <span>视频ID:</span>
-        <a-input class="myinput" />
+        <a-input class="myinput" v-model="videoID" />
       </div>
 
       <a-button type="primary" @click="searchRes">查询</a-button>
     </div>
 
-    
+    <div style="display:flex;margin-bottom:15px" class="btndiv">
+      <a-button type="primary" @click="customColumns">自定义列</a-button>
+    </div>
 
     <a-modal v-model="visible" title="自定义列" on-ok="handleOk" 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" />
+      <!-- <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="listNum" @getshowlist="getshowlist" />
+          </div>
         </div>
         <div class="listNum">
           <p>已选{{columns.length}}列</p>
@@ -73,31 +79,77 @@
       tableLayout="auto"
       ref="vSummaryTable"
     >
-      <template slot="operation" slot-scope="text, record">
+     
+
+      <span slot="operation" slot-scope="text, record">
         <a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
-      </template>
-    </a-table>
+      </span>
+
+      <div slot="videoU" slot-scope="test,records">
+        <video
+          @click.stop
+          class="video"
+          :src="records.url"
+          controls="controls"
+          style="height:200px;width:112.5px"
+        >您的浏览器不支持 video 标签。</video>
+      </div>
+      <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="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="statDatetime" slot-scope="">{{ timedata[0]+'~'+timedata[1]}}</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="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 | tofixed }}</span>
+      <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | tofixed }}</span>
+      <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | tofixed }}</span>
+      <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | tofixed }}</span>
+      <span slot="activeCost" slot-scope="activeCost">{{ activeCost | tofixed }}</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>
+    </a-table>
     <!-- 明细表 -->
 
-    <a-modal v-model="visibleDetail" title="详细信息">
+    <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
       <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button>
-      <div class="detailTable">
-        <p>客户</p>
-        <p>视频链接</p>
-        <p>时间</p>
-        <p>消耗</p>
-        <p>环比</p>
-        <div class="left">
-          <div class="kehu"></div>
-          <div class="videolink"></div>
-        </div>
-        <div class="right">
-          <ul class="detailUL">
-            <li></li>
-          </ul>
-        </div>
-      </div>
+      <a-table
+        :columns="detailConsum"
+        :data-source="detailData"
+        bordered
+        tableLayout="auto"
+        :pagination="false"
+      >
+        <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
+      </a-table>
     </a-modal>
   </div>
 </template>
@@ -106,32 +158,35 @@
 import moment from 'moment'
 import { JeecgListMixin } from '@/mixins/ipagination'
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
-
+import selectComponent from './selectComponent'
 const columnsFixd = [
   {
     title: '时间',
-    dataIndex: 'vtime',
+    dataIndex: 'statDatetime',
     align: 'center',
-    width: 150,
-    fixed: 'left'
+    width: 120,
+    fixed: 'left',
+    scopedSlots: { customRender: 'statDatetime' }
   },
   {
     title: '视频',
-    dataIndex: 'video',
+    dataIndex: 'videoU',
     align: 'center',
     width: 150,
-    fixed: 'left'
+    fixed: 'left',
+    key: 'videoU',
+    scopedSlots: { customRender: 'videoU' }
   },
   {
     title: '视频ID',
-    dataIndex: 'videoID',
+    dataIndex: 'signature',
     align: 'center',
     width: 100,
     fixed: 'left'
   },
   {
     title: '视频链接',
-    dataIndex: 'videoLink',
+    dataIndex: 'url',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -139,7 +194,7 @@ const columnsFixd = [
 
   {
     title: '视频描述',
-    dataIndex: 'videoDes',
+    dataIndex: 'materialName',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -148,66 +203,141 @@ const columnsFixd = [
     title: '操作',
     dataIndex: 'operation',
     align: 'center',
-    width: 100,
+    scopedSlots: { customRender: 'operation' },
+    width: 80,
     fixed: 'left'
   }
 ]
 let variableCol = [
   {
     title: '消耗',
-    dataIndex: 'consume',
-    scopedSlots: { customRender: 'consume' },
-    align: 'center'
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+    sorter: (a, b) => a.cost - b.cost
   },
   {
     title: '点击数',
-    dataIndex: 'clickNum',
+    dataIndex: 'clickMaterial',
     align: 'center',
-    scopedSlots: { customRender: 'clickNum' }
+    scopedSlots: { customRender: 'clickMaterial' },
+    sorter: (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
     title: '点击率',
-    dataIndex: 'clickThroughRate',
+    dataIndex: 'ctr',
     align: 'center',
-    scopedSlots: { customRender: 'clickThroughRate' }
+    width: 50,
+    scopedSlots: { customRender: 'ctr' },
+    sorter: (a, b) => a.ctr - b.ctr
   },
 
   {
     title: '展示数',
-    dataIndex: 'showNum',
+    dataIndex: 'showMaterial',
     align: 'center',
-    scopedSlots: { customRender: 'showNum' }
+    scopedSlots: { customRender: 'showMaterial' },
+    sorter: (a, b) => a.showMaterial - b.showMaterial
   },
   {
     title: '25%进度播放率',
-    dataIndex: '25%progressRate',
+     width:170,
+    dataIndex: 'play25FeedBreakRate',
     align: 'center',
-    scopedSlots: { customRender: '25%progressRate' }
+    scopedSlots: { customRender: 'play25FeedBreakRate' },
+    sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
   },
   {
     title: '整体完播率',
-    dataIndex: 'overallCompletionRate',
+    dataIndex: 'playOverRate',
     align: 'center',
-    scopedSlots: { customRender: 'overallCompletionRate' }
+    width:100,
+    tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
+    scopedSlots: { customRender: 'playOverRate' },
+
+    sorter: (a, b) => a.playOverRate - b.playOverRate
   },
   {
     title: '转化数',
-    dataIndex: 'conversionNum',
+    dataIndex: 'convertMaterial',
     align: 'center',
-    scopedSlots: { customRender: 'conversionNum' }
+    scopedSlots: { customRender: 'convertMaterial' },
+    sorter: (a, b) => a.convertMaterial - b.convertMaterial
   },
   {
     title: '转化率',
-    dataIndex: 'conversionRate',
+    dataIndex: 'convertRate',
     align: 'center',
-    scopedSlots: { customRender: 'conversionRate' }
+    scopedSlots: { customRender: 'convertRate' },
+    sorter: (a, b) => a.convertRate - b.convertRate
   }
 ]
+let detailConsum = [
+  {
+    title: '客户',
+    dataIndex: 'advertiserName',
+    align: 'center',
 
+    customRender: (value, row, index) => {
+      const obj = {
+        children: value,
+        attrs: {}
+      }
+      if (index === 0) {
+        obj.attrs.rowSpan = 7
+      } else {
+        obj.attrs.rowSpan = 0
+      }
+      return obj
+    }
+  },
+  {
+    title: '视频链接',
+    dataIndex: 'videoUrl',
+    align: 'center',
+    width:250,
+    customRender: (value, row, index) => {
+      const obj = {
+        children: value,
+        attrs: {}
+      }
+      if (index == 0) {
+        obj.attrs.rowSpan = 7
+      }else {
+        obj.attrs.rowSpan = 0
+      }
+      return obj
+    }
+  },
+  {
+    title: '时间',
+    dataIndex: 'statDatetime',
+    align: 'center',
+    width: 120
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center'
+  },
+  {
+    title: '环比',
+    dataIndex: 'huanbi',
+    align: 'center'
+  }
+]
 export default {
   data() {
     return {
+      //明细的表头
+      detailConsum,
+      //明细里的数据
+      detailData: [],
+
       consumeValue: 1000,
+      //视频ID
+      videoID: '',
       columns: [...columnsFixd, ...variableCol],
       data: [],
       totalSelect: 0,
@@ -226,9 +356,18 @@ export default {
       editable: false,
 
       //详细信息的开关
-      visibleDetail: false
+      visibleDetail: false,
+
+      //时间选择 字符串类型
+      timedata: [],
+
+      //记录点开的视频的md5
+      signature:''
     }
   },
+  components: {
+    selectComponent
+  },
   props: {
     text: String
   },
@@ -241,36 +380,86 @@ export default {
       return current && current > moment().subtract(1, 'day')
     },
     //过去一周按钮事件
+    lastWeekHandle() {
+      this.dateRange = [
+        moment()
+          .subtract(7, 'days')
+          .format('YYYY-MM-DD'),
+        moment()
+          .subtract(1, 'days')
+          .format('YYYY-MM-DD')
+      ]
+      this.timedata=this.dateRange
+      console.log(this.dateRange)
+      this.totalSelect = 7
+      this.daysFlag = true
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListWeek', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        cost: this.consumeValue,
+        signature: this.videoID
+      }).then(res => {
+        let resArr = []
+        this.loading = false
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.data.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.data = result
+        }
+      })
 
-    //点击时间的 昨日 按钮
-    lastWeekHandle(){
-        this.dateRange=[moment().subtract(7, 'days').format("YYYY-MM-DD"),moment().subtract(1, 'days').format("YYYY-MM-DD")];
-        console.log(this.dateRange);
-        this.totalSelect=7;
-        this.daysFlag = true
     },
 
     consumeOnChange() {},
     //查询按钮
-    searchRes() {},
+    searchRes() {
+      this.date = []
+      this.loading = true
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListWeek', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        cost: this.consumeValue,
+        signature: this.videoID
+      }).then(res => {
+        let resArr = []
+        this.loading = false
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.data.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.data = result
+        }
+      })
+    },
 
     //导出报表
     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
+      // var params = {}
+      // params.projectId = this.projectId
+      // params.disCount = this.discount
+      // params.statDate = this.statDate.format('YYYY-MM-DD')
+      var name = this.data.filter(item => {
+        return item.signature == this.signature
       })[0].projectName
-      downFilePost('/ctop/yiche/report/exportDailyReport', params).then(res => {
+      downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListDetailExportExcel', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        signature: this.signature
+      }).then(res => {
         let blob = new Blob([res], {
           type: 'application/vnd.ms-excel'
         })
         let downloadElement = document.createElement('a')
         let href = window.URL.createObjectURL(blob) //创建下载的链接
         downloadElement.href = href
-        downloadElement.download = name + '-' + this.statDate.format('YYYY-MM-DD') + '-日报' //下载后文件名
+        downloadElement.download = name + '-' +this.timedata[0] + '-' + this.timedata[1]    //下载后文件名
         document.body.appendChild(downloadElement)
         downloadElement.click() //点击下载
         document.body.removeChild(downloadElement) //下载完成移除元素
@@ -280,15 +469,22 @@ export default {
 
     //日期选择回调
     dateChange(data, dataString) {
-      console.log(data[1]._d - data[0]._d, dataString)
-      this.dateRange[0] = data[0]
-      this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
-      this.daysFlag = true
-      if (this.totalSelect > 92) {
-        this.$message.error('时间跨度太长啦,选小一点好嘛?')
-        this.daysFlag = false
-        this.dateRange = []
+      // console.log(data[1]._d - data[0]._d, dataString)
+      if(data.length){
+          this.timedata = dataString
+          this.dateRange[0] = data[0]
+          this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
+          this.daysFlag = true
+          if (this.totalSelect > 7) {
+            this.$message.error('时间跨度太长啦,选小一点好嘛?')
+            this.daysFlag = false
+            this.dateRange = []
+          }
+      }else{
+        this.daysFlag=false
+        this.dateRange=[]
       }
+      
     },
 
     //弹出框打开,自定义列
@@ -306,10 +502,13 @@ export default {
       //     this.visible = false;
       //     this.loading = false;
       // }, 1000);
-      if (this.listNum.length > 12) {
-        this.scrollX = (this.listNum.length - 12) * 500
-        // console.log(this.$refs.vSummaryTable)
-      } else {
+      if (this.listNum.length > 8 && this.listNum.length<15 ) {
+        this.scrollX = (this.listNum.length - 8) * 1000
+        console.log(this.$refs.vSummaryTable)
+      } else if(this.listNum.length >= 15){
+        this.scrollX = (this.listNum.length - 12) * 700
+        
+      }else{
         this.scrollX = 0
       }
 
@@ -319,9 +518,9 @@ export default {
         })
       } else {
         this.columns.map((item, index) => {
-          if (index < 2) {
+          if (index == 1) {
             item.width = 150
-          } else if (index > 2 && index < 6) {
+          } else if (index > 2 && index < 4 && index == 0) {
             item.width = 100
           }
         })
@@ -340,8 +539,7 @@ export default {
     //清空全部按钮的事件
     clearAllList() {
       this.listNum = [...columnsFixd]
-      this.scrollX = 0
-      console.log(this.listNum)
+
       console.log(this.$refs.vSummaryTable)
     },
 
@@ -353,22 +551,114 @@ export default {
     },
 
     //表格里的操作 打开明细
-    handleChange(e) {
-      const value = e.target.value
-      this.value = value
+
+    showModal() {
+      this.visibleDetail = true
     },
-    check() {
-      this.editable = false
-      this.$emit('change', this.value)
+    
+
+    //从自定义列拿选择的项
+    getshowlist(val) {
+      console.log(val)
+      if (val.length) {
+        console.log(val);
+        this.listNum = [...this.listNum,...val]
+        
+      } else {
+        var arr
+        arr = this.listNum.filter((item, index) => {
+          return item.dataIndex == val.dataIndex
+        })
+      }
+      if (arr.length > 0) {
+        
+        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)
+      }
     },
-    edit() {
-      this.editable = true
+
+    //点击查看明细按钮的事件
+    opendetail(text, record) {
+      console.log(text, record)
+      this.visibleDetail = true
+      this.detailData = []
+
+      this.signature=record.signature
+      console.log(this.signature)
+      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
+        startDate: this.timedata[0],
+        endDate: this.timedata[1],
+        signature: record.signature
+      }).then(res => {
+        let resArr = []
+
+        console.log(res)
+        if (res.success) {
+          let result = res.result
+          this.detailData.push({ ...result, key: 1 })
+          result.map((item, index) => {
+            item.key = index
+          })
+          this.detailData = result
+        }
+      })
     }
   },
   activated() {
+    console.log('activated')
     // this.getParticipateList()
     this.statDate = moment().subtract(1, 'day')
     moment().format('YYYY-MM-DD_HH:mm')
+
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType:3,
+    }).then((res)=>{
+      // console.log(res)
+      if(res.success){
+      // console.log(JSON.parse(res.result))
+      let columns=JSON.parse(res.result)
+      if(columns.length){
+           columns.map((item,index)=>{
+          item.sorter=function(a,b){  return a[item.dataIndex]-b[item.dataIndex]}
+        })
+        this.columns=columns
+        // console.log(this.columns)
+      }
+     
+      }
+
+    })
+  },
+  deactivated() {
+      let arr = JSON.stringify(this.columns)
+      // console.log(arr)
+    postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+      json: arr,
+      columnType: 3
+    }).then(res => {
+      // console.log(res)
+    })
+  },
+
+  filters: {
+    toPercentage(val) {
+      return (val * 100).toFixed(2) + '%'
+      // return val
+    },
+    toshowTime(val) {
+      // console.log(val, this.timedata)
+      // return this.timedata[0] + '~' + this.timedata[1]
+      return val
+    }
   }
 }
 </script>
@@ -442,37 +732,29 @@ span {
   }
 }
 
-.detailTable {
-  width: 100%-2px;
-  border: 1px solid #ccc;
-  overflow: hidden;
-  p {
-    width: 20%;
-    background: rgb(248, 248, 248);
-    padding: 5px;
-    text-align: center;
-    float: left;
-  }
-  .left {
-    float: left;
-    .kehu {
-      float: left;
-    }
-    .videolink {
-      float: left;
-    }
-  }
-  .right {
-    float: left;
-    .detailUL {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      li {
-        float: left;
-        width: 33.3%;
+.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;
+    }
   }
 }
+#mybtn {
+  margin: 0 10px 15px 0;
+}
 </style>

+ 2 - 1
vue.config.js

@@ -70,7 +70,8 @@ module.exports = {
         // target: 'http://192.168.1.90:8080', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.103:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
-        target: 'http://192.168.1.127:8080', //请求本地 需要jeecg-boot后台项目  孙震
+        target: 'http://192.168.1.54:8080', //请求本地 需要jeecg-boot后台项目  孙震
+        // target: 'http://192.168.1.165:8080', //请求本地 需要jeecg-boot后台项目  毕洁泉
         ws: false,
         changeOrigin: true
       },