Ver Fonte

'表格修改'

魏志佳 há 5 anos atrás
pai
commit
c805189d31

+ 44 - 27
src/views/modules/Statistics/videoStatics/vDay.vue

@@ -75,10 +75,12 @@
       :scroll="{ x: scrollX }"
       :loading="loading"
       ref="vSummaryTable"
+      height='100'
+      :width='tableWidth'
       
     >
       <div slot="videoU" slot-scope="test,records">
-        <img  :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"  alt="" style="height:200px;width:112.5px" @click="openVideo(records.url)">
+        <img  :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"  alt=""  style="width:140px"  @click="openVideo(records.url)">
 
       </div>
       <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
@@ -175,7 +177,7 @@ const columnsFixd = [
 
   {
     title: '视频描述',
-    dataIndex: 'materialName',
+    dataIndex: 'materialDesc',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -200,7 +202,7 @@ let variableCol = [
     title: '点击率',
     dataIndex: 'ctr',
     align: 'center',
-    width: 120,
+  
     scopedSlots: { customRender: 'ctr' },
     sorter: (a, b) => a.ctr - b.ctr
   },
@@ -216,7 +218,7 @@ let variableCol = [
     title: '25%进度播放率',
     dataIndex: 'play25FeedBreakRate',
     align: 'center',
-    width:170,
+   
     scopedSlots: { customRender: 'play25FeedBreakRate' },
     sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
   },
@@ -224,7 +226,7 @@ let variableCol = [
     title: '播完率',
     dataIndex: 'playOverRate',
     align: 'center',
-    width:100,
+   
     tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
     scopedSlots: { customRender: 'playOverRate' },
 
@@ -249,6 +251,11 @@ let variableCol = [
 export default {
   data() {
     return {
+       //gudinglie
+      columnsFixd:columnsFixd,
+
+      //设置表格的列宽
+      tableWidth:'',
       columnsFixd,
 
        //是否打开视频
@@ -372,34 +379,33 @@ export default {
       this.visible = true
        this.listNum = [...this.columns]
     },
+
+    tableHandle(){
+      // this.listNum = [...this.columns]
+      console.log(this.listNum.length,this.columns)
+
+      if(this.listNum.length > 12|| this.columns.length>12){
+          this.tableWidth=120;
+          this.scrollX=this.columns.length*120
+          console.log(this.scrollX)
+      }else{
+        this.scrollX = 0
+      }
+    },
     //弹出框确定
     handleOk(e) {
       this.loading = false
      
       this.visible = false
      
+      this.tableHandle()
       if(this.listNum.length>=10){
 
-          let newlist=this.listNum.slice(columnsFixd.length)
-          console.log(newlist)
-          this.columns = [...columnsFixd,...newlist]
-      }
-
-
-     if (this.listNum.length > 12 && this.listNum.length<=13 ) {
-        this.scrollX =1900
-        console.log(this.$refs.vSummaryTable)
-      } 
-      else if(this.listNum.length > 13 && this.listNum.length<=15){
-        this.scrollX = (this.listNum.length - 12) * 1000
-      }
-      else if(this.listNum.length >15 && this.listNum.length<=17){
-        this.scrollX = (this.listNum.length - 12) * 600        
-      }
-      else if(this.listNum.length >=18){
-        this.scrollX = (this.listNum.length - 12) * 400        
+        let newlist=this.listNum.slice(columnsFixd.length)
+        console.log(newlist)
+        this.columns = [...columnsFixd,...newlist]
       }else{
-        this.scrollX = 0
+        this.columns = [...this.listNum]
       }
 
       // console.log(this.columns.length)
@@ -413,7 +419,7 @@ export default {
         this.columns.map((item, index) => {
           if (index == 1) {
             item.width = 150
-          } else if (index > 2 && index < 4 && index == 0) {
+          } else if (index >= 2 && index < 5 || index == 0) {
             item.width = 100
           }
         })
@@ -477,7 +483,7 @@ export default {
     // this.getParticipateList()
     this.statDate = moment().subtract(1, 'day')
     moment().format('YYYY-MM-DD_HH:mm')
-
+    
     postAction('/toutiao/videoReportDaily/getColumnJson', {
       columnType:2,
     }).then((res)=>{
@@ -493,6 +499,7 @@ export default {
              }})
              columns=columns.slice(columnsFixd.length);
             this.columns=[...columnsFixd,...columns]
+            this.tableHandle()
         }
            
         
@@ -526,7 +533,17 @@ export default {
 
 }
 </script>
-
+<style lang="less">
+.ant-table .ant-table-fixed-left .ant-table-thead {
+  height: 108px !important ;
+}
+.ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title{
+       
+      // display:block;
+        white-space:normal;
+       word-break: break-all;
+}
+</style>
 <style lang="scss" scoped>
 .vsummary {
   width: 100%;

+ 64 - 41
src/views/modules/Statistics/videoStatics/vMonth.vue

@@ -78,6 +78,8 @@
       :loading="loading"
       tableLayout="auto"
       ref="vSummaryTable"
+      height='100'
+      :width='tableWidth'
     >
      
 
@@ -86,7 +88,7 @@
       </span>
 
       <div slot="videoU" slot-scope="test,records">
-        <img  :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"  alt="" style="height:200px;width:112.5px" @click="openVideo(records.url)">
+        <img  :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"  alt="" style="width:140px" @click="openVideo(records.url)">
       </div>
       <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
       <span
@@ -199,7 +201,7 @@ const columnsFixd = [
 
   {
     title: '视频描述',
-    dataIndex: 'materialName',
+    dataIndex: 'materialDesc',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -232,7 +234,7 @@ let variableCol = [
     title: '点击率',
     dataIndex: 'ctr',
     align: 'center',
-    width: 50,
+    
     scopedSlots: { customRender: 'ctr' },
     sorter: (a, b) => a.ctr - b.ctr
   },
@@ -248,7 +250,7 @@ let variableCol = [
     title: '25%进度播放率',
     dataIndex: 'play25FeedBreakRate',
     align: 'center',
-     width:170,
+    
     scopedSlots: { customRender: 'play25FeedBreakRate' },
     sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate
   },
@@ -340,6 +342,13 @@ let detailConsum = [
 export default {
   data() {
     return {
+
+       //gudinglie
+      columnsFixd:columnsFixd,
+
+      //设置表格的列宽
+      tableWidth:'',
+
       columnsFixd,
        //是否打开视频
       Videovisible:false,
@@ -521,34 +530,37 @@ export default {
       this.visible = true
        this.listNum = [...this.columns]
     },
+
+    tableHandle(){
+      // this.listNum = [...this.columns]
+      console.log(this.listNum.length,this.columns)
+
+      if(this.listNum.length > 12|| this.columns.length>12){
+          this.tableWidth=120;
+          this.scrollX=this.columns.length*120
+          console.log(this.scrollX)
+      }else{
+        this.scrollX = 0
+      }
+    },
+
     //弹出框确定
     handleOk(e) {
       this.loading = false
      
       this.visible = false
+      this.tableHandle()
       if(this.listNum.length>=10){
 
         let newlist=this.listNum.slice(columnsFixd.length)
         console.log(newlist)
         this.columns = [...columnsFixd,...newlist]
-      }
-
-      if (this.listNum.length > 12 && this.listNum.length<=13 ) {
-        this.scrollX =1900
-        console.log(this.$refs.vSummaryTable)
-      } 
-      else if(this.listNum.length > 13 && this.listNum.length<=15){
-        this.scrollX = (this.listNum.length - 12) * 1000
-      }
-      else if(this.listNum.length >15 && this.listNum.length<=17){
-        this.scrollX = (this.listNum.length - 12) * 600        
-      }
-      else if(this.listNum.length >=18){
-        this.scrollX = (this.listNum.length - 12) * 400        
       }else{
-        this.scrollX = 0
+        this.columns = [...this.listNum]
       }
 
+      
+
       if (this.listNum.length == 6) {
         this.columns.map((item, index) => {
           item.width = 300
@@ -557,7 +569,7 @@ export default {
         this.columns.map((item, index) => {
           if (index == 1) {
             item.width = 150
-          } else if (index > 2 && index < 4 && index == 0) {
+          } else if (index >= 2 && index < 6 || index == 0) {
             item.width = 100
           }
         })
@@ -657,30 +669,31 @@ export default {
     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){
-        if(columns.length>=columnsFixd.length){
-            columns.map((item,index)=>{
-             if(index>columnsFixd.length-1){
-                 item.sorter=function(a,b){  return a[item.dataIndex]-b[item.dataIndex]}
-             }})
-             columns=columns.slice(columnsFixd.length);
-            this.columns=[...columnsFixd,...columns]
-        }
+    // 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){
+    //     if(columns.length>=columnsFixd.length){
+    //         columns.map((item,index)=>{
+    //          if(index>columnsFixd.length-1){
+    //              item.sorter=function(a,b){  return a[item.dataIndex]-b[item.dataIndex]}
+    //          }})
+    //          columns=columns.slice(columnsFixd.length);
+    //         this.columns=[...columnsFixd,...columns]
+            this.tableHandle()
+        // }
            
         
-        // console.log(this.columns)
-      }
+    //     // console.log(this.columns)
+    //   }
      
-      }
+    //   }
 
-    })
+    // })
   },
   deactivated() {
       let arr = JSON.stringify(this.columns)
@@ -705,7 +718,17 @@ export default {
   }
 }
 </script>
-
+<style lang="less">
+.ant-table .ant-table-fixed-left .ant-table-thead {
+  height: 108px !important ;
+}
+.ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title{
+       
+      // display:block;
+        white-space:normal;
+       word-break: break-all;
+}
+</style>
 <style lang="less" scoped>
 .vsummary {
   width: 100%;

+ 51 - 20
src/views/modules/Statistics/videoStatics/vSummary.vue

@@ -78,6 +78,9 @@
       :scroll="{ x: scrollX }"
       :loading="loading"
       ref="vSummaryTable"
+      :width='tableWidth'
+      @customHeaderCell='customHeaderCell(columns)'
+      height='100'
     >
       <div slot="videoU" slot-scope="test,records"> 
         <img  :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"  alt="" style="width:140px" @click="openVideo(records.url)">
@@ -201,7 +204,7 @@ let variableCol = [
     title: '点击率',
     dataIndex: 'ctr',
     align: 'center',
-  
+    
     scopedSlots: { customRender: 'ctr' },
     sorter: (a, b) => a.ctr - b.ctr
   },
@@ -252,6 +255,9 @@ let variableCol = [
 export default {
   data() {
     return {
+      //设置表格的列宽
+      tableWidth:'',
+
       //gudinglie
       columnsFixd:columnsFixd,
 
@@ -322,7 +328,7 @@ export default {
           let result = res.result
           this.data.push({ ...result, key: 1 })
           result.map((item, index) => {
-            item.key = index
+            item.key = index;
           })
           this.data = result
         }
@@ -391,6 +397,25 @@ export default {
       this.visible = true
       this.listNum = [...this.columns]
     },
+
+    //设置头部单元格属性
+    customHeaderCell(columns){
+        console.log(columns)
+    },
+
+    tableHandle(){
+      // this.listNum = [...this.columns]
+      console.log(this.listNum.length,this.columns)
+
+      if(this.listNum.length > 12|| this.columns.length>12){
+          this.tableWidth=120;
+          this.scrollX=this.columns.length*120
+          console.log(this.scrollX)
+      }else{
+        this.scrollX = 0
+      }
+    },
+
     //弹出框确定
     handleOk(e) {
       this.loading = false
@@ -399,30 +424,19 @@ export default {
 
       // console.log(this.columns)
 
+      this.tableHandle()
+
       if(this.listNum.length>=10){
 
         let newlist=this.listNum.slice(columnsFixd.length)
         console.log(newlist)
         this.columns = [...columnsFixd,...newlist]
-      }
-
-      if (this.listNum.length > 12 && this.listNum.length<=13 ) {
-        this.scrollX =1900
-        console.log(this.$refs.vSummaryTable)
-      } 
-      else if(this.listNum.length > 13 && this.listNum.length<=15){
-        this.scrollX = (this.listNum.length - 12) * 1000
-      }
-      else if(this.listNum.length >15 && this.listNum.length<=17){
-        this.scrollX = (this.listNum.length - 12) * 600        
-      }
-      else if(this.listNum.length >=18){
-        this.scrollX = (this.listNum.length - 12) * 400        
       }else{
-        this.scrollX = 0
+        this.columns = [...this.listNum]
       }
-      // console.log(this.columns.length)
-      if (this.columns.length == 4) {
+      
+
+      if (this.listNum.length == 4) {
         // console.log(this.listNum.length)
         this.columns.map((item, index) => {
           item.width = 500
@@ -432,7 +446,7 @@ export default {
         this.columns.map((item, index) => {
           if (index < 2) {
             item.width = 150
-          } else if (index > 2 && index < 4) {
+          } else if (index >=2 && index < 4) {
             item.width = 100
           }
         })
@@ -525,8 +539,11 @@ export default {
     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)=>{
@@ -542,6 +559,7 @@ export default {
              }})
              columns=columns.slice(columnsFixd.length);
             this.columns=[...columnsFixd,...columns]
+            this.tableHandle()
         }
            
         
@@ -592,11 +610,24 @@ export default {
       }
 
     })
+    
   }
 }
 </script>
+<style lang="less">
+.ant-table .ant-table-fixed-left .ant-table-thead {
+  height: 108px !important ;
+}
+.ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title{
+       
+      // display:block;
+        white-space:normal;
+       word-break: break-all;
+}
+</style>
 
 <style lang="scss" scoped>
+
 .vsummary {
   width: 100%;
   height: 100%;

+ 42 - 22
src/views/modules/Statistics/videoStatics/vWeek.vue

@@ -78,6 +78,8 @@
       :loading="loading"
       tableLayout="auto"
       ref="vSummaryTable"
+      height='100'
+      :width='tableWidth'
     >
      
 
@@ -86,7 +88,7 @@
       </span>
 
       <div slot="videoU" slot-scope="test,records">
-       <img  :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"  alt="" style="height:200px;width:112.5px" @click="openVideo(records.url)">
+       <img  :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'"  alt="" style="width:140px" @click="openVideo(records.url)">
       </div>
       <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
       <span
@@ -199,7 +201,7 @@ const columnsFixd = [
 
   {
     title: '视频描述',
-    dataIndex: 'materialName',
+    dataIndex: 'materialDesc',
     align: 'center',
     width: 100,
     fixed: 'left'
@@ -232,7 +234,7 @@ let variableCol = [
     title: '点击率',
     dataIndex: 'ctr',
     align: 'center',
-    width: 50,
+   
     scopedSlots: { customRender: 'ctr' },
     sorter: (a, b) => a.ctr - b.ctr
   },
@@ -246,7 +248,7 @@ let variableCol = [
   },
   {
     title: '25%进度播放率',
-     width:170,
+   
     dataIndex: 'play25FeedBreakRate',
     align: 'center',
     scopedSlots: { customRender: 'play25FeedBreakRate' },
@@ -256,7 +258,7 @@ let variableCol = [
     title: '播完率',
     dataIndex: 'playOverRate',
     align: 'center',
-    width:100,
+    
     tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
     scopedSlots: { customRender: 'playOverRate' },
 
@@ -335,6 +337,12 @@ let detailConsum = [
 export default {
   data() {
     return {
+
+       //gudinglie
+      columnsFixd:columnsFixd,
+
+      //设置表格的列宽
+      tableWidth:'',
        //是否打开视频
       Videovisible:false,
       videoUrl:'',
@@ -515,34 +523,35 @@ export default {
       this.visible = true
        this.listNum = [...this.columns]
     },
+    tableHandle(){
+      // this.listNum = [...this.columns]
+      console.log(this.listNum.length,this.columns)
+
+      if(this.listNum.length > 12|| this.columns.length>12){
+          this.tableWidth=120;
+          this.scrollX=this.columns.length*120
+          console.log(this.scrollX)
+      }else{
+        this.scrollX = 0
+      }
+    },
+
     //弹出框确定
     handleOk(e) {
       this.loading = false
       
       this.visible = false
+      this.tableHandle()
       if(this.listNum.length>=10){
 
         let newlist=this.listNum.slice(columnsFixd.length)
         console.log(newlist)
         this.columns = [...columnsFixd,...newlist]
-      }
-
-     if (this.listNum.length > 12 && this.listNum.length<=13 ) {
-        this.scrollX =1900
-        console.log(this.$refs.vSummaryTable)
-      } 
-      else if(this.listNum.length > 13 && this.listNum.length<=15){
-        this.scrollX = (this.listNum.length - 12) * 1000
-      }
-      else if(this.listNum.length >15 && this.listNum.length<=17){
-        this.scrollX = (this.listNum.length - 12) * 600        
-      }
-      else if(this.listNum.length >=18){
-        this.scrollX = (this.listNum.length - 12) * 400        
       }else{
-        this.scrollX = 0
+        this.columns = [...this.listNum]
       }
 
+
       if (this.listNum.length == 6) {
         this.columns.map((item, index) => {
           item.width = 300
@@ -551,7 +560,7 @@ export default {
         this.columns.map((item, index) => {
           if (index == 1) {
             item.width = 150
-          } else if (index > 2 && index < 4 && index == 0) {
+          } else if (index >= 2 && index < 6 || index == 0) {
             item.width = 100
           }
         })
@@ -665,6 +674,7 @@ export default {
              }})
              columns=columns.slice(columnsFixd.length);
             this.columns=[...columnsFixd,...columns]
+            this.tableHandle()
         }
            
         
@@ -701,7 +711,17 @@ export default {
   }
 }
 </script>
-
+<style lang="less">
+.ant-table .ant-table-fixed-left .ant-table-thead {
+  height: 108px !important ;
+}
+.ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title{
+       
+      // display:block;
+        white-space:normal;
+       word-break: break-all;
+}
+</style>
 <style lang="less" scoped>
 .vsummary {
   width: 100%;