Selaa lähdekoodia

Merge branch 'master' of http://39.106.184.70:3000/ctop/adsp-vue

zhuxinbo 5 vuotta sitten
vanhempi
commit
64daed753b

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 18943 - 0
package-lock.json


+ 1 - 1
src/components/layouts/TabLayout.vue

@@ -162,7 +162,7 @@
           this.menuVisible = true
         }
       },
-      getPageKey(target, depth) {n
+      getPageKey(target, depth) {
         depth = depth || 0
         if (depth > 2) {
           return null

+ 311 - 0
src/views/modules/Statistics/videoStatics/index.vue

@@ -0,0 +1,311 @@
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+.search-box p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+</style>
+<style>
+/* .data-display-statistics .ant-card-body {
+  padding: 0 15px;
+} */
+.data-display-statistics .ant-col-6 {
+  margin: 10px 0;
+}
+.data-display-statistics .ant-col-6 .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.data-display-statistics .ant-col-6 p,
+.data-display-statistics .ant-col-6 span {
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 600;
+  color: red;
+  margin: 0;
+}
+.search-box .ant-card-body {
+  padding: 5px 15px;
+}
+.data-display-statistics .ant-col-6 .ant-card-body .styleElse {
+  line-height: 60px;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+}
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.yincang .ant-col-6 p {
+  text-align: left;
+  color: red;
+  font-size: 16px;
+  font-weight: 500;
+}
+.ant-table-thead div {
+  font-weight: 700;
+}
+.tool-tip {
+  position: absolute;
+  top: 65px;
+  right: 10px;
+}
+th div {
+  white-space: nowrap;
+}
+#mybtn{
+    position: relative;
+    top: 0;
+    right: 0;
+}
+.btndiv{
+    display: flex;
+    justify-content: space-between;
+}
+.timeDiv{
+    margin-bottom: 15px;
+}
+
+</style>
+<template>
+  <div >
+     
+        <a-card
+          style="width:100%"
+          :tabList="tabListNoTitle"
+          :activeTabKey="noTitleKey"
+          @tabChange="key => onTabChange(key, 'noTitleKey')"
+        >
+            <keep-alive>
+                <component :is="currentTabComponent"></component>
+            
+            </keep-alive>
+            
+        </a-card>
+      
+  </div>
+</template>
+
+
+
+
+
+<script>
+
+import countTo from 'vue-count-to'
+import moment from 'moment'
+import { getDailyReport } from '@api/statistics'
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+import axios from 'axios'
+import lifting from '../components/lifting'
+import timeCheck from '../components/timeCheck'
+import Treeselect from '../components/Treeselect.vue'
+import { mapGetters } from 'vuex'
+import { JeecgListMixin } from '@/mixins/ipagination'
+
+//引入视频总日周月组件
+import videoSummary from './vSummary';
+import videoDay from './vDay';
+import videoWeek from './vWeek';
+import videoMonth from './vMonth';
+
+var length = 0
+var active = 1
+
+
+
+
+export default {
+  name: 'data-display-statistics',
+  components: {
+   
+    countTo,
+    lifting,
+    timeCheck,
+    Treeselect,
+    videoSummary,
+    videoDay,
+    videoWeek,
+    videoMonth
+
+  },
+  mixins: [JeecgListMixin],
+  data: function() {
+    return {
+      // this.timeRange[1] = moment().add(1, 'months')
+      
+      statDate: moment().subtract(1, 'day'),
+      title: '账户数据展示',
+      show: true,
+      data: [],
+      dataAll: null,
+    
+      options: [],
+      list: [],
+      appId: [],
+      tabListNoTitle: [
+        {
+          key: 'videoSummary',
+          tab: '视频汇总'
+        },
+        {
+          key: 'videoDay',
+          tab: '视频分日'
+        },
+        {
+          key: 'videoWeek',
+          tab: '视频分周'
+        },
+        {
+          key: 'videoMonth',
+          tab: '视频分月'
+        }
+      ],
+      noTitleKey: 'videoSummary',
+      currentTabComponent:'videoSummary',
+      discount: 1.06,
+      date: '',
+      loading: false,
+      dataElse: [],
+      projectId: 50
+    }
+  },
+  filters: {
+    formatDate: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d
+    },
+    toFixtwo: function(value) {
+      if (value) {
+        return value.toFixed(2)
+      } else {
+        return 0.0
+      }
+    },
+    getBo: function(value) {
+      if (value) {
+        return (value * 100).toFixed(2) + '%'
+      } else {
+        return '0.00%'
+      }
+    }
+  },
+  methods: {
+    moment,
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
+    getParticipateList() {
+      getAction('/ctop/projectMember/participateList', {
+        userId: this.userInfo().id
+      }).then(res => {
+        if (res.code == 0) {
+          this.dataElse = res.result
+        }
+      })
+    },
+    onTabChange(key, type) {
+        console.log(key, type)
+        this.currentTabComponent=key;
+        this.noTitleKey=key;
+        console.log(this.currentTabComponent)
+    },
+    
+    getDataReset() {
+      this.addUser()
+    },
+    addUser() {
+      var that = this
+      //   if (this.appId.length > 0 && this.date != '') {
+      that.getDailyReport()
+      //   } else {
+      //     this.$message.error('请选择账户及时间')
+      //   }
+    },
+    getDailyReport() {
+      var params = {}
+      params.projectId = this.projectId
+      params.disCount = this.discount
+      params.statDate = this.statDate.format('YYYY-MM-DD')
+      this.data = []
+      this.loading = true
+      postAction('/ctop/yiche/report/dailyReport', params).then(res => {
+        if (res.success) {
+          this.loading = false
+          this.dataAll = res.result
+          console.log(res)
+          if (this.noTitleKey == 'day') {
+            this.columns = columnsThree
+            this.data.push({ ...res.result.android, key: 1 })
+          } else if (this.noTitleKey == 'group') {
+            this.columns = columnsThree
+            this.data.push({ ...res.result.ios, key: 1 })
+          } else if (this.noTitleKey == 'application') {
+            this.columns = columnsThree
+            this.data.push({ ...res.result.directApplication, key: 1 })
+          } else if (this.noTitleKey == 'channel') {
+            this.columns = columns
+            this.data = res.result.channelSubcontracting.map((item, index) => {
+              return {
+                ...item,
+                key: index
+              }
+            })
+          }
+          this.ipagination.total = this.data.length
+        }
+      })
+    },
+    getDate(value) {
+      if (value) {
+        let date = new Date(value)
+        let y = date.getFullYear()
+        let MM = date.getMonth() + 1
+        MM = MM < 10 ? '0' + MM : MM
+        let d = date.getDate()
+        d = d < 10 ? '0' + d : d
+        this.date = y + '-' + MM + '-' + d
+      } else {
+        let date = new Date()
+        let y = date.getFullYear()
+        let MM = date.getMonth() + 1
+        MM = MM < 10 ? '0' + MM : MM
+        let d = date.getDate()
+        d = d < 10 ? '0' + d : d
+        this.date = y + '-' + MM + '-' + d
+      }
+    },
+    
+   
+  },
+  watch: {},
+  distoryed() {},
+  mounted: function() {
+    this.getParticipateList()
+    this.statDate = moment().subtract(1, 'day')
+    // moment().format('YYYY-MM-DD_HH:mm')
+    this.currentTabComponent=this.noTitleKey
+  }
+}
+</script>

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 1292 - 0
src/views/modules/Statistics/videoStatics/selectComponent.vue


+ 574 - 0
src/views/modules/Statistics/videoStatics/vDay.vue

@@ -0,0 +1,574 @@
+<template>
+  <div class="vsummary">
+    <div class="timeDiv">
+      <div>
+        <span>时间范围:</span>
+        <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"
+        />
+      </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 <5">
+                <a-icon type="lock" />
+                <span>{{item.title}}</span>
+              </span>
+              <span v-else-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;"
+                />
+              </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"
+      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>
+
+<script>
+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: 100,
+    fixed: 'left'
+  },
+  {
+    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: 'url',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+
+  {
+    title: '视频描述',
+    dataIndex: 'materialName',
+    align: 'center',
+    width: 100,
+    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: 100,
+    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',
+    width:100,
+    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
+  }
+]
+
+export default {
+  data() {
+    return {
+      //消耗的值
+      consumeValue: 1000,
+      //视频ID
+      videoID: '',
+      columns: [...columnsFixd, ...variableCol],
+      addColumns: [],
+      data: [],
+      //右侧显示供选择几天
+      totalSelect: 0,
+      //是否显示共选几天的提示
+      daysFlag: false,
+      //日期选择器显示的日期范围
+      dateRange: '',
+      dataElse: [],
+      loading: false,
+      visible: false,
+      //自定义列的搜索框
+      searchInput: '',
+      //弹出框中现实的选中列数
+      scrollX: 0,
+      listNum: [],
+
+      //
+      timedata: []
+
+      //
+    }
+  },
+  components: {
+    selectComponent
+  },
+  mixins: [JeecgListMixin],
+  methods: {
+    moment,
+    disabledDate(current) {
+      // console.log(current)
+
+      return current && current > moment().subtract(1, 'day')
+    },
+
+    consumeOnChange() {},
+
+    //点击时间的 昨日 按钮
+    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() {
+      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) {
+      this.timedata = dataString
+    },
+
+    //弹出框打开,自定义列
+    customColumns() {
+      this.visible = true
+      this.listNum = this.columns
+    },
+    //弹出框确定
+    handleOk(e) {
+      this.loading = false
+      this.columns = this.listNum
+      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
+      }
+      // console.log(this.columns.length)
+      if (this.columns.length == 4) {
+        // console.log(this.listNum.length)
+        this.columns.map((item, index) => {
+          item.width = 500
+        })
+        // console.log(1)
+      } 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.listNum)
+      console.log(this.$refs.vSummaryTable)
+    },
+
+    //li展示里的关闭按钮 删除当前被选中的这一个列
+    deleteCol(item, index) {
+      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/getColumnJson', {
+      columnType:2,
+    }).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: 2
+    }).then(res => {
+      // console.log(res)
+    })
+  },
+
+  filters: {
+    toPercentage(val) {
+      return (val * 100).toFixed(2) + '%'
+      // return val
+    }
+  },
+
+
+}
+</script>
+
+<style lang="scss" 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;
+  .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 {
+    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;
+      }
+    }
+  }
+}
+</style>

+ 769 - 0
src/views/modules/Statistics/videoStatics/vMonth.vue

@@ -0,0 +1,769 @@
+<template>
+  <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>
+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="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>

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

@@ -0,0 +1,643 @@
+<template>
+  <div class="vsummary">
+    <div class="timeDiv">
+      <div>
+        <span>时间范围:</span>
+
+        <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>
+      <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%">
+      <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 <4">
+                <a-icon type="lock" />
+                <span>{{item.title}}</span>
+              </span>
+              <span v-else-if=" index >3">
+                <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"
+      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="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>
+
+<script>
+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: 'videoU',
+    align: 'center',
+    width: 150,
+    fixed: 'left',
+    key: 'videoU',
+    scopedSlots: { customRender: 'videoU' }
+  },
+  {
+    title: '视频ID',
+    dataIndex: 'signature',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: '视频链接',
+    dataIndex: 'url',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+
+  {
+    title: '视频描述',
+    dataIndex: 'materialName',
+    align: 'center',
+    width: 100,
+    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: 100,
+    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:160,
+    scopedSlots: { customRender: 'play25FeedBreakRate' },
+    sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
+  },
+  {
+    title: '整体完播率',
+    dataIndex: 'playOverRate',
+    align: 'center',
+    width:110,
+    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
+  }
+]
+
+export default {
+  data() {
+    return {
+
+      //是否显示导出按钮
+      exportExcelIsOk:true,
+      consumeValue: 1000,
+
+      columns: [...columnsFixd, ...variableCol],
+      addColumns: [],
+      data: [],
+      totalSelect: 0,
+      daysFlag: false,
+      dateRange: [],
+      dataElse: [],
+      loading: false,
+      visible: false,
+      //自定义列的搜索框
+      searchInput: '',
+      //弹出框中现实的选中列数
+      scrollX: 0,
+      listNum: [],
+      //
+      form: [],
+      videoID:'',
+      timedata: []
+    }
+  },
+  mixins: [JeecgListMixin],
+  components: {
+    selectComponent
+  },
+  methods: {
+    moment,
+    disabledDate(current) {
+      // console.log(current)
+
+      return current && current > moment().subtract(1, 'day')
+    },
+
+    consumeOnChange() {},
+    //查询按钮
+    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 => {
+      //   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 = this.statDate.format('YYYY-MM-DD') + '视频汇总' //下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() //点击下载
+        document.body.removeChild(downloadElement) //下载完成移除元素
+        window.URL.revokeObjectURL(href) //释放掉blob对象
+      })
+    },
+
+    //日期选择回调
+    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
+      this.daysFlag = true
+      if (this.totalSelect > 92) {
+        this.$message.error('时间跨度太长啦,选小一点好嘛?')
+        this.daysFlag = false
+        this.dateRange = []
+      }
+    },
+
+    //弹出框打开,自定义列
+    customColumns() {
+      this.visible = true
+      this.listNum = [...this.columns]
+    },
+    //弹出框确定
+    handleOk(e) {
+      this.loading = false
+      this.columns = [...this.listNum]
+      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
+      }
+      // console.log(this.columns.length)
+      if (this.columns.length == 4) {
+        // console.log(this.listNum.length)
+        this.columns.map((item, index) => {
+          item.width = 500
+        })
+        // console.log(1)
+      } else {
+        this.columns.map((item, index) => {
+          if (index < 2) {
+            item.width = 150
+          } else if (index > 2 && index < 4) {
+            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
+      })
+    },
+
+    //从自定义列拿选择的项
+    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>
+
+<style lang="scss" 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;
+  .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 {
+    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;
+        // overflow:hidden;
+        // text-overflow:ellipsis;
+        // white-space: nowrap;
+      }
+      #closeStyle {
+        position: absolute;
+        top: 9px;
+        right: 7px;
+      }
+    }
+  }
+}
+</style>

+ 760 - 0
src/views/modules/Statistics/videoStatics/vWeek.vue

@@ -0,0 +1,760 @@
+<template>
+  <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>
+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: 'url',
+    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%进度播放率',
+     width:170,
+    dataIndex: 'play25FeedBreakRate',
+    align: 'center',
+    scopedSlots: { customRender: '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
+  },
+  {
+    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 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,
+      daysFlag: false,
+      dateRange: [],
+      dataElse: [],
+      loading: false,
+      visible: false,
+      //自定义列的搜索框
+      searchInput: '',
+      //弹出框中现实的选中列数
+      scrollX: 0,
+      listNum: [],
+
+      value: this.text,
+      editable: false,
+
+      //详细信息的开关
+      visibleDetail: false,
+
+      //时间选择 字符串类型
+      timedata: [],
+
+      //记录点开的视频的md5
+      signature:''
+    }
+  },
+  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(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
+        }
+      })
+
+    },
+
+    consumeOnChange() {},
+    //查询按钮
+    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.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 > 7) {
+            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
+        }
+      })
+    }
+  },
+  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>
+
+<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>

+ 3 - 2
vue.config.js

@@ -64,13 +64,14 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
+        // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
         // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.1.13:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // 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
       },