魏志佳 5 лет назад
Родитель
Сommit
67004a44e3

Разница между файлами не показана из-за своего большого размера
+ 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>

+ 411 - 0
src/views/modules/Statistics/videoStatics/selectComponent.vue

@@ -0,0 +1,411 @@
+<template>
+  <div>
+    <div v-for="(item,index) in customFields" :key="item.id">
+      <div class="leibie">
+        <p class="leiName">{{item.title}}</p>
+        <span class="jutixiang">
+          <a-checkbox :value="index" name="type" @click="isSelectAll(index)" :ref='"selectAll"+index'>全选</a-checkbox>
+        </span>
+        <a-checkbox-group v-model="form[index]">
+          
+          <span
+            class="jutixiang"
+            v-for="(zhi,num) in item.specificFields "
+            :key="num"
+          >
+            
+            <a-checkbox :value="zhi.dataIndex" name="type">
+              <a-tooltip
+                class="select-component"
+                placement="top"
+                :title="zhi.tip"
+                :overlayClassName="tooltipShow"
+              >{{zhi.title}}</a-tooltip>
+            </a-checkbox>
+          </span>
+        </a-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const customFields = [
+  {
+    id: 0,
+    title: '展现数据',
+
+    specificFields: [
+        
+      {
+        title: '消耗',
+        dataIndex: 'cost',
+        tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
+        align: 'center',
+        scopedSlots: { customRender: 'playOverRate' },
+        sorter: (a, b) => a.playOverRate - b.playOverRate,
+      },
+      {
+        title: '展示数',
+        dataIndex: 'showMaterial',
+        tip: '经平台判定有效且被计数的展示次数',
+        align: 'center',
+        scopedSlots: { customRender: 'playOverRate' },
+        sorter: (a, b) => a.playOverRate - b.playOverRate,
+
+      },
+      {
+        title: '点击数/量',
+        dataIndex: 'clickNum',
+        tip: '当头条用户点击广告素材时,触发点击事件,该事件被认为是一次有效的广告点击',
+        align: 'center',
+        scopedSlots: { customRender: 'playOverRate' },
+        sorter: (a, b) => a.playOverRate - b.playOverRate,
+      },
+      {
+        title: '点击率',
+        dataIndex: 'clickRate',
+        tip: '广告被点击的次数占展示次数的百分比。计算方法:点击数/展示数*100%',
+        align: 'center',
+        scopedSlots: { customRender: 'playOverRate' },
+        sorter: (a, b) => a.playOverRate - b.playOverRate,
+      },
+      {
+        title: '平均点击单价',
+        dataIndex: 'averagePrice',
+        tip: '广告主为每次点击付出的费用成本,计算公式是:总花费/点击数',
+        align: 'center',
+        scopedSlots: { customRender: 'playOverRate' },
+        sorter: (a, b) => a.playOverRate - b.playOverRate,
+      }
+    ]
+  },
+  {
+    id: 1,
+    title: '转化数据',
+    specificFields: [
+      {
+        title: '转化数',
+        dataIndex: 'conversionNum',
+        tip:
+          '将转化数记录在转化事件发生的时间上。建议广告主考核成本时参考“转化数据(计费时间)”例如您的广告在早上8点进行了展示和点击,用户晚上19点发生了激活行为,我们会把激活数披露在晚上19点'
+      },
+      {
+        title: '转化成本',
+        dataIndex: 'conversionCost',
+        tip: '广告主为每个转化所付出的平均成本,计算方式:总花费/转化数。当天数据可能会有波动。'
+      },
+      {
+        title: '转化率',
+        dataIndex: 'conversionRate',
+        tip: '广告被用户转化的次数占点击次数的百分比。计算方式:转化数/点击数*100%'
+      }
+    ]
+  },
+  {
+    id: 2,
+    title: '应用下载广告数据',
+    specificFields: [
+      {
+        title: '安卓下载开始数',
+        dataIndex: 'startDownloadNum',
+        tip:
+          '用户在落地页中开始安装包下载进程的次数,仅安卓下载可以监测到该行为'
+      },
+      {
+        title: '安卓下载开始成本',
+        dataIndex: 'startDownloadCost',
+        tip: '计算方法:总花费/安卓下载开始数'
+      },
+      {
+        title: '安卓下载开始率',
+        dataIndex: 'startDownloadRate',
+        tip: '计算方法:安卓下载开始数/点击数'
+
+      },
+      {
+        title: '安卓下载完成数',
+        dataIndex: 'completedDownloadNum',
+        tip: '用户在落地页中下载安装包进程完成的次数,仅安卓下载可以监测到该行为'
+      },
+      {
+        title: '安卓下载完成成本',
+        dataIndex: 'completedDownloadCost',
+        tip: '计算方式:总花费/安卓下载完成数'
+      },
+      {
+        title: '安卓下载完成率',
+        dataIndex: 'completedDownloadRate',
+        tip: '计算方式:安卓安装完成数/安卓下载完成数'
+      },
+      {
+        title: '激活数',
+        dataIndex: 'activationNum',
+        tip: '广告主回传的应用激活数'
+      },
+      {
+        title: '激活成本',
+        dataIndex: 'activationCost',
+        tip: '计算方式:总花费/激活数'
+      },
+      {
+        title: '激活率',
+        dataIndex: 'activationRate',
+        tip: '计算方式:激活数/点击数*100%'
+      },
+      {
+        title: '注册数',
+        dataIndex: 'registerNum',
+        tip: '广告主回传成功的注册数'
+      },
+      {
+        title: '注册成本',
+        dataIndex: 'registerCost',
+        tip: '广告主为每个注册所付出的成本,计算公式是:总花费/注册数,当天数据可能会有波动,次日早8点后稳定'
+      },
+      {
+        title: '注册率',
+        dataIndex: 'registerRate',
+        tip: '注册用户占激活用户的比例'
+      },
+      {
+        title: '关键行为数',
+        dataIndex: 'keyBehavirosNum',
+        tip: '有APP内关键行为的用户数量'
+      },
+      {
+        title: '关键行为成本',
+        dataIndex: 'keyBehavirosCost',
+        tip: '广告主为每个有APP内关键行为的用户所付出的成本,计算公式是总花费/关键行为数。当天数据可能会有波动,次日早8点后稳定'
+      },
+      {
+        title: '关键行为率',
+        dataIndex: 'keyBehavirosRate',
+        tip: '关键行为用户占激活用户的比例'
+      },
+      {
+        title: '次留数',
+        dataIndex: 'nextDayOpenNum',
+        tip: '在次留行为发生或回传后,将次留数匹配到相应的激活时间上,用来查看当天在第二天的次留数。当天数据不产出'
+      },
+      {
+        title: '次留成本',
+        dataIndex: 'nextDayOpenCost',
+        tip: '次留成本=消耗/次留数'
+      },
+      {
+        title: '次留率',
+        dataIndex: 'nextDayOpenRate',
+        tip: '次留率=次留数/激活数'
+      },
+      {
+        title: '付费数',
+        dataIndex: 'paymentNum',
+        tip: '当天用户在应用内完成付费的总次数,多次付费会重复计数'
+      },
+      {
+        title: '付费成本',
+        dataIndex: 'paymentCost',
+        tip: '当天用户在应用内完成付费的平均成本,计算方式:消耗/付费次数'
+      },
+    ]
+  },
+  {
+      id:3,
+      title:'落地页及门店数据',
+      specificFields:[
+        {
+            title: '表单提交',
+            dataIndex: 'startDownloadNum',
+            tip:'用户在门店落地页多线沟通提交表单的次数'
+        },
+        {
+            title: '地图搜索',
+            dataIndex: 'startDownloadNum',
+            tip:'用户进行地图搜索的次数'
+        },
+        {
+            title: '按钮button',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击按钮button的次数'
+        },
+        {
+            title: '关键页面浏览',
+            dataIndex: 'startDownloadNum',
+            tip:'用户在关键页面的浏览次数'
+        },
+        {
+            title: '下载开始',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击下载开始的次数'
+        },
+        {
+            title: 'qq咨询',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击QQ咨询按钮的次数'
+        },
+        {
+            title: '抽奖',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击抽奖按钮的次数'
+        },
+        {
+            title: '投票',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击投票按钮的次数'
+        },
+        {
+            title: '短信咨询',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击短信咨询的次数'
+        },
+        {
+            title: '页面跳转',
+            dataIndex: 'startDownloadNum',
+            tip:'用户跳转至其他页面的次数'
+        },
+        {
+            title: '商品购买',
+            dataIndex: 'startDownloadNum',
+            tip:'用户购买商品的次数'
+        },
+        {
+            title: '在线咨询',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击在线咨询按钮的次数'
+        },
+        {
+            title: '微信复制',
+            dataIndex: 'startDownloadNum',
+            tip:'用户通过长按复制微信号的次数'
+        },
+        {
+            title: '智能电话-确认拨打',
+            dataIndex: 'startDownloadNum',
+            tip:'用户点击确认拨打电话按钮的次数'
+        },
+        {
+            title: '智能电话-确认接通',
+            dataIndex: 'startDownloadNum',
+            tip:'用户在门店落地页点击多线沟通的电话按钮并接通的次数'
+        },
+        {
+            title: '有效咨询',
+            dataIndex: 'startDownloadNum',
+            tip:'用户在门店落地页多线沟通的在线咨询中有效咨询的次数'
+        },
+      ]
+
+  }
+]
+export default {
+  data() {
+    return {
+      customFields,
+      form: [],
+      quanxuanflag: [],
+      hovered: false,
+      tooltipShow: 'tooltipShow'
+    }
+  },
+  watch: {
+    form() {
+      if (this.form.length) {
+          console.log(this.form)
+            for(let index=0; index<this.form.length; index++){
+                console.log(this.form[index].length,this.customFields[index].specificFields.length)
+                    if(this.form[index].length==this.customFields[index].specificFields.length){
+                    console.log('yes')
+                    this.$refs['selectAll'+index][0].checked=true
+                }
+            }
+                
+          
+          console.log(this.form[1])
+          
+        // console.log(1)
+      }
+    //   console.log(this.$data)
+    }
+  },
+  mounted() {
+    for (let i = 0; i < customFields.length; i++) {
+      this.form.push([])
+    }
+  },
+  methods: {
+    hide() {
+      this.clicked = false
+      this.hovered = false
+    },
+    handleHoverChange(visible) {
+      this.clicked = false
+      this.hovered = visible
+    },
+    getPopupContainer() {
+      console.log(this)
+    },
+
+    //判断是否全选
+    isSelectAll(val) {
+        let name='selectAll'+val
+        console.log(this.$refs[name][0]);
+
+        if(!this.$refs[name][0].checked){
+             this.customFields[val].specificFields.map((item, index) => {
+                this.form[val].push(item.dataIndex)
+            })
+            this.$refs[name][0].checked=true
+        }else{
+            this.form[val]=[];
+            this.$refs[name][0].checked=false
+            console.log(this.form)
+        }
+     
+
+    //   console.log(this.form[val])
+    }
+  }
+}
+</script>
+<style>
+.tooltipShow {
+  max-width: 30%;
+}
+.tooltipShow .ant-tooltip-content .ant-tooltip-inner {
+  background: white;
+  font-size: 10px;
+  color: #333;
+}
+.ant-tooltip-content .ant-tooltip-arrow::before {
+  background-color: white;
+}
+</style>
+<style lang="scss" scoped>
+.leibie {
+  width: 100%;
+  margin-bottom: 10px;
+  .leiName {
+    font-size: 20px;
+    text-align: left;
+    margin-bottom: 5px;
+    margin-top: 0px;
+  }
+}
+.jutixiang {
+  display: inline-block;
+  width: 32%;
+  box-sizing: border-box;
+  padding: 8px 3px;
+}
+
+.ant-tooltip-content .tooltipShow {
+  background: #eee;
+  font-size: 10px;
+  color: #333;
+}
+
+.ant-checkbox-group {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,467 @@
+<template>
+  <div class="vsummary">
+    <div class="timeDiv">
+      <div>
+        <span>时间范围:</span>
+        <a-button type='default' @click="yesterdayHandle">昨日</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>
+
+    
+
+    <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 />
+            </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"
+    >
+    </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: 'video',
+    align: 'center',
+    width: 150,
+    fixed: 'left'
+  },
+  {
+    title: '视频ID',
+    dataIndex: 'signature',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: '视频链接',
+    dataIndex: 'videoUrl',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+
+  {
+    title: '视频描述',
+    dataIndex: 'videoDes',
+    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: 'click',
+    align: 'center',
+    scopedSlots: { customRender: 'click' },
+    sorter: (a, b) => a.click - b.click,
+  },
+  {
+    title: '点击率',
+    dataIndex: 'ctr',
+    align: 'center',
+    scopedSlots: { customRender: 'ctr' },
+    sorter: (a, b) => a.ctr - b.ctr,
+  },
+
+  {
+    title: '展示数',
+    dataIndex: 'showMaterial',
+    align: 'center',
+    scopedSlots: { customRender: 'showMaterial' },
+    sorter: (a, b) => a.showMaterial - b.showMaterial,
+  },
+  {
+    title: '25%进度播放率',
+    dataIndex: 'play25FeedBreakRate',
+    align: 'center',
+    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,
+  },
+ 
+]
+
+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: [],
+      
+      //
+
+    }
+  },
+  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"),moment().subtract(1, 'days').format("YYYY-MM-DD")];
+        console.log(this.dateRange);
+        this.totalSelect=1;
+        this.daysFlag = true
+    },
+
+
+    //查询按钮
+    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对象
+      })
+    },
+
+    //日期选择回调
+    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 = []
+      }
+    },
+
+    //弹出框打开,自定义列
+    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 > 12) {
+        this.scrollX = (this.listNum.length - 12) * 500
+        console.log(this.$refs.vSummaryTable)
+      } 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.$refs.vSummaryTable)
+    },
+
+    //li展示里的关闭按钮 删除当前被选中的这一个列
+    deleteCol(item, index) {
+      this.listNum = this.listNum.filter((item1, num) => {
+        return num != index
+      })
+    }
+  },
+  activated() {
+    // this.getParticipateList()
+    this.statDate = moment().subtract(1, 'day')
+    moment().format('YYYY-MM-DD_HH:mm')
+    postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDaily', {
+      date:'2020-05-01',
+      
+    }).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
+        }
+       
+    })
+
+  }
+}
+</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>

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

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        vMonth
+    </div>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,445 @@
+<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" />
+      </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">导出报表</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" -->
+                <div>
+                    
+                </div>
+            
+            </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>
+
+            <!-- <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>
+    </a-modal>
+
+    <a-table
+      size="middle"
+      :columns="columns"
+      :dataSource="data"
+      bordered
+      id="outTable"
+      :pagination="ipagination"
+      :scroll="{ x: scrollX }"
+      :loading="loading"
+      ref="vSummaryTable"
+    ></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: 'video',
+    align: 'center',
+    width: 150,
+    fixed: 'left'
+  },
+  {
+    title: '视频ID',
+    dataIndex: 'videoID',
+    align: 'center',
+    width: 150,
+    fixed: 'left'
+  },
+  {
+    title: '视频链接',
+    dataIndex: 'videoLink',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+
+  {
+    title: '视频描述',
+    dataIndex: 'videoDes',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  }
+]
+let variableCol = [
+  {
+    title: '消耗',
+    dataIndex: 'consume',
+    scopedSlots: { customRender: 'consume' },
+    align: 'center'
+  },
+  {
+    title: '点击数',
+    dataIndex: 'clickNum',
+    align: 'center',
+    scopedSlots: { customRender: 'clickNum' }
+  },
+  {
+    title: '点击率',
+    dataIndex: 'clickThroughRate',
+    align: 'center',
+    scopedSlots: { customRender: 'clickThroughRate' }
+  },
+
+  {
+    title: '展示数',
+    dataIndex: 'showNum',
+    align: 'center',
+    scopedSlots: { customRender: 'showNum' }
+  },
+  {
+    title: '25%进度播放率',
+    dataIndex: '25%progressRate',
+    align: 'center',
+    scopedSlots: { customRender: '25%progressRate' }
+  },
+  {
+    title: '整体完播率',
+    dataIndex: 'overallCompletionRate',
+    align: 'center',
+    scopedSlots: { customRender: 'overallCompletionRate' }
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversionNum',
+    align: 'center',
+    scopedSlots: { customRender: 'conversionNum' }
+  },
+  {
+    title: '转化率',
+    dataIndex: 'conversionRate',
+    align: 'center',
+    scopedSlots: { customRender: 'conversionRate' }
+  },
+ 
+]
+
+export default {
+  data() {
+    return {
+      consumeValue: 1000,
+      columns: [...columnsFixd, ...variableCol],
+      addColumns:[],
+      data: [],
+      totalSelect: 0,
+      daysFlag: false,
+      dateRange: [],
+      dataElse: [],
+      loading: false,
+      visible: false,
+      //自定义列的搜索框
+      searchInput: '',
+      //弹出框中现实的选中列数
+      scrollX: 0,
+      listNum: [],
+      //
+      form:[]
+    }
+  },
+  mixins: [JeecgListMixin],
+  methods: {
+    moment,
+    disabledDate(current) {
+      // console.log(current)
+
+      return current && current > moment().subtract(1, 'day')
+    },
+
+    consumeOnChange() {},
+    //查询按钮
+    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对象
+      })
+    },
+
+    //日期选择回调
+    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 = []
+      }
+    },
+
+    //弹出框打开,自定义列
+    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' }
+            }
+      ]
+    },
+    //弹出框确定
+    handleOk(e) {
+      this.loading = false
+      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
+        console.log(this.$refs.vSummaryTable)
+      } 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
+      })
+    }
+  },
+  activated() {
+    // this.getParticipateList()
+    this.statDate = moment().subtract(1, 'day')
+    moment().format('YYYY-MM-DD_HH:mm')
+
+  }
+}
+</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;
+    .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>

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

@@ -0,0 +1,478 @@
+<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" />
+      </div>
+
+      <a-button type="primary" @click="searchRes">查询</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>
+        <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"
+    >
+      <template slot="operation" slot-scope="text, record">
+        <a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
+      </template>
+    </a-table>
+
+    <!-- 明细表 -->
+
+    <a-modal v-model="visibleDetail" title="详细信息">
+      <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-modal>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { JeecgListMixin } from '@/mixins/ipagination'
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+
+const columnsFixd = [
+  {
+    title: '时间',
+    dataIndex: 'vtime',
+    align: 'center',
+    width: 150,
+    fixed: 'left'
+  },
+  {
+    title: '视频',
+    dataIndex: 'video',
+    align: 'center',
+    width: 150,
+    fixed: 'left'
+  },
+  {
+    title: '视频ID',
+    dataIndex: 'videoID',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: '视频链接',
+    dataIndex: 'videoLink',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+
+  {
+    title: '视频描述',
+    dataIndex: 'videoDes',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    align: 'center',
+    width: 100,
+    fixed: 'left'
+  }
+]
+let variableCol = [
+  {
+    title: '消耗',
+    dataIndex: 'consume',
+    scopedSlots: { customRender: 'consume' },
+    align: 'center'
+  },
+  {
+    title: '点击数',
+    dataIndex: 'clickNum',
+    align: 'center',
+    scopedSlots: { customRender: 'clickNum' }
+  },
+  {
+    title: '点击率',
+    dataIndex: 'clickThroughRate',
+    align: 'center',
+    scopedSlots: { customRender: 'clickThroughRate' }
+  },
+
+  {
+    title: '展示数',
+    dataIndex: 'showNum',
+    align: 'center',
+    scopedSlots: { customRender: 'showNum' }
+  },
+  {
+    title: '25%进度播放率',
+    dataIndex: '25%progressRate',
+    align: 'center',
+    scopedSlots: { customRender: '25%progressRate' }
+  },
+  {
+    title: '整体完播率',
+    dataIndex: 'overallCompletionRate',
+    align: 'center',
+    scopedSlots: { customRender: 'overallCompletionRate' }
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversionNum',
+    align: 'center',
+    scopedSlots: { customRender: 'conversionNum' }
+  },
+  {
+    title: '转化率',
+    dataIndex: 'conversionRate',
+    align: 'center',
+    scopedSlots: { customRender: 'conversionRate' }
+  }
+]
+
+export default {
+  data() {
+    return {
+      consumeValue: 1000,
+      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
+    }
+  },
+  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")];
+        console.log(this.dateRange);
+        this.totalSelect=7;
+        this.daysFlag = true
+    },
+
+    consumeOnChange() {},
+    //查询按钮
+    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对象
+      })
+    },
+
+    //日期选择回调
+    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 = []
+      }
+    },
+
+    //弹出框打开,自定义列
+    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 > 12) {
+        this.scrollX = (this.listNum.length - 12) * 500
+        // console.log(this.$refs.vSummaryTable)
+      } 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 < 2) {
+            item.width = 150
+          } else if (index > 2 && index < 6) {
+            item.width = 100
+          }
+        })
+        // console.log(2)
+      }
+    },
+    //弹出框取消按钮
+    handleCancel(e) {
+      this.visible = false
+    },
+    //弹出框里的搜索框
+    onSearch(value) {
+      console.log(value)
+    },
+
+    //清空全部按钮的事件
+    clearAllList() {
+      this.listNum = [...columnsFixd]
+      this.scrollX = 0
+      console.log(this.listNum)
+      console.log(this.$refs.vSummaryTable)
+    },
+
+    //li展示里的关闭按钮 删除当前被选中的这一个列
+    deleteCol(item, index) {
+      this.listNum = this.listNum.filter((item1, num) => {
+        return num != index
+      })
+    },
+
+    //表格里的操作 打开明细
+    handleChange(e) {
+      const value = e.target.value
+      this.value = value
+    },
+    check() {
+      this.editable = false
+      this.$emit('change', this.value)
+    },
+    edit() {
+      this.editable = true
+    }
+  },
+  activated() {
+    // this.getParticipateList()
+    this.statDate = moment().subtract(1, 'day')
+    moment().format('YYYY-MM-DD_HH:mm')
+  }
+}
+</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;
+      }
+    }
+  }
+}
+
+.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%;
+      }
+    }
+  }
+}
+</style>

+ 2 - 2
vue.config.js

@@ -65,12 +65,12 @@ module.exports = {
        },*/
       '/jeecg-boot': {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
-        target: 'http://39.106.184.70: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.127:8080', //请求本地 需要jeecg-boot后台项目  孙震
         ws: false,
         changeOrigin: true
       },