魏志佳 4 anni fa
parent
commit
0029f5fbe4
2 ha cambiato i file con 216 aggiunte e 56 eliminazioni
  1. 214 55
      src/views/modules/Statistics/effectReport.vue
  2. 2 1
      vue.config.js

+ 214 - 55
src/views/modules/Statistics/effectReport.vue

@@ -27,6 +27,7 @@
             <a-tab-pane :key="5" tab="广告创意"> </a-tab-pane>
         </a-tabs>
         <div class="tableBody">
+          <a-spin :spinning="spinning">
             <a-table :columns="columns" 
             :data-source="tableData" 
             :scroll="{ x: 3500 }"  
@@ -36,7 +37,15 @@
              @change="tableChange"
             >
                 <a slot="projectName" slot-scope="text,records" @click="goAccount(records)">{{text}}</a>
-                <a slot="authNAme" slot-scope="text,records" @click="goAccount(records)">{{text}}</a>
+                <a slot="authName" slot-scope="text,records" @click="goCampaign(records)">{{text}}</a>
+                <a slot="campaignName" slot-scope="text,records" @click="goUnit(records)">{{text}}</a>
+                <a slot="unitName" slot-scope="text,records" @click="goCreative(records)">{{text}}</a>
+                <a slot="creativeName" slot-scope="creativeName" >{{creativeName}}</a>
+
+                <a slot="coverUrl" slot-scope="text,records" >
+                  <img :src="text" alt="" style="width:100px" @click="openVideo(records)">
+                </a>
+
                 <span slot="charge" slot-scope="charge"> {{charge|decimalsHandle}}</span>
                 <span slot="activationCost" slot-scope="activationCost"> {{activationCost|decimalsHandle}}</span>
                 <span slot="eventNextDayStayCost" slot-scope="eventNextDayStayCost"> {{eventNextDayStayCost|decimalsHandle}}</span>
@@ -69,11 +78,25 @@
                 <span slot="photoClickRatio" slot-scope="photoClickRatio"> {{photoClickRatio|toPercentage}}</span>
                 <span slot="actionRate" slot-scope="actionRate"> {{actionRate|toPercentage}}</span>
 
-
-                
             </a-table>
+          </a-spin>  
         </div>
     </div>
+    <div >
+      <a-modal v-model="visible" title="视频详情" @ok="handleOk" :width='currentRecords.materialType==1?"350px" :"600px"'>
+        <div style="display:flex;justify-content:center">
+          <div style="margin-right:15px">
+            <video :src="imgSrc" style="width:250px" controls  v-if="currentRecords.materialType==1"></video>
+            <video :src="imgSrc" style="width:500px" controls v-if="currentRecords.materialType==2"></video>
+          </div>
+          <div>
+            <!-- <p> 标题:{{currentRecords.creativeName}}</p> -->
+            <!-- <p> 标题:{{currentRecords.creativeName}}</p> -->
+          </div>
+        </div>
+        
+      </a-modal>
+    </div>
   </div>
 </template>
 
@@ -245,7 +268,7 @@ const projectColumns = [
   {
     title: '项目名称',
     dataIndex: 'projectName',
-    width: 200,
+    width: 150,
     align:'center',
     scopedSlots: { customRender: 'projectName' },
     fixed: 'left'
@@ -272,7 +295,7 @@ const projectColumns = [
   {
     title: '时间',
     dataIndex: 'statDate',
-    width:200,
+    // width:200,
     scopedSlots: { customRender: 'statDate' },
     align:'center',
   },
@@ -281,24 +304,24 @@ const projectColumns = [
 const accountColumns = [
   {
     title: '账户名称',
-    dataIndex: 'authNAme',
-    width: 200,
+    dataIndex: 'authName',
+    width: 130,
     align:'center',
-    scopedSlots: { customRender: 'authNAme' },
+    scopedSlots: { customRender: 'authName' },
     fixed: 'left'
   },
   {
     title: '账户id',
     dataIndex: 'accountId',
     align:'center',
-    width:200,
+    width:90,
     scopedSlots: { customRender: 'accountId' },
     fixed: 'left'
   },
   {
     title: '项目名称',
     dataIndex: 'projectName',
-    width: 200,
+    width: 130,
     align:'center',
     scopedSlots: { customRender: 'projectName' },
     fixed: 'left'
@@ -307,7 +330,7 @@ const accountColumns = [
   {
     title: '时间',
     dataIndex: 'statDate',
-    width:200,
+    // width:200,
     scopedSlots: { customRender: 'statDate' },
     align:'center',
   },
@@ -318,7 +341,7 @@ const campaignColumns = [
   {
     title: '广告计划名称',
     dataIndex: 'campaignName',
-    width: 200,
+    width: 130,
     align:'center',
     scopedSlots: { customRender: 'campaignName' },
     fixed: 'left'
@@ -328,21 +351,22 @@ const campaignColumns = [
     dataIndex: 'campaignId',
     align:'center',
     scopedSlots: { customRender: 'campaignId' },
-    fixed: 'left'
+    fixed: 'left',
+    width:100,
   },
   {
     title: '账户名称',
-    dataIndex: 'authNAme',
-    width: 200,
+    dataIndex: 'authName',
+    width: 120,
     align:'center',
-    scopedSlots: { customRender: 'authNAme' },
+    scopedSlots: { customRender: 'authName' },
     fixed: 'left'
   },
   
   {
     title: '时间',
     dataIndex: 'statDate',
-    width:200,
+    // width:200,
     scopedSlots: { customRender: 'statDate' },
     align:'center',
   },
@@ -353,23 +377,24 @@ const campaignColumns = [
 const unitColumns = [
   {
     title: '广告组名称',
-    dataIndex: 'campaignId',
+    dataIndex: 'unitName',
     align:'center',
-    scopedSlots: { customRender: 'campaignId' },
+    scopedSlots: { customRender: 'unitName' },
     fixed: 'left',
-    width:200,
+    width:130,
   },
   {
     title: '广告组id',
-    dataIndex: 'campaignId',
+    dataIndex: 'unitId',
     align:'center',
-    scopedSlots: { customRender: 'campaignId' },
+    width:90,
+    scopedSlots: { customRender: 'unitId' },
     fixed: 'left'
   },
   {
     title: '计划名称',
     dataIndex: 'campaignName',
-    width: 200,
+    width: 130,
     align:'center',
     scopedSlots: { customRender: 'campaignName' },
     fixed: 'left'
@@ -378,7 +403,7 @@ const unitColumns = [
   {
     title: '时间',
     dataIndex: 'statDate',
-    width:200,
+    // width:200,
     scopedSlots: { customRender: 'statDate' },
     align:'center',
   },
@@ -387,35 +412,43 @@ const unitColumns = [
 ]
 
 const ideaColumns = [
+    {
+      title: '创意',
+      dataIndex: 'coverUrl',
+      align:'center',
+      scopedSlots: { customRender: 'coverUrl' },
+      fixed: 'left',
+      width:120,
+    },
    {
-    title: '创意',
-    dataIndex: 'coverUrl',
+    title: '创意名称',
+    dataIndex: 'creativeName',
     align:'center',
-    scopedSlots: { customRender: 'coverUrl' },
+    scopedSlots: { customRender: 'creativeName' },
     fixed: 'left',
-    width:200,
+    width:130,
   },
+
   {
     title: '广告组名称',
-    dataIndex: 'campaignId',
+    dataIndex: 'unitName',
     align:'center',
-    scopedSlots: { customRender: 'campaignId' },
-    fixed: 'left'
+    scopedSlots: { customRender: 'unitName' },
+    fixed: 'left',
+    width:130,
   },
 
   {
     title: '时间',
     dataIndex: 'statDate',
-    width:200,
+    // width:200,
     scopedSlots: { customRender: 'statDate' },
     align:'center',
   },
  
 ]
 
-
-
-  export default {
+export default {
     mixins:[JeecgListMixin],
     data() {
       return {
@@ -426,10 +459,27 @@ const ideaColumns = [
         columns:[...projectColumns,...publicColumns],
         loading:false,
         tabKey:1,
-        currentid:undefined
+        currentid:undefined,
+        accountId:undefined,
+        projectId:undefined,
+        campaignId:undefined,
+        unitId:undefined,    
+        spinning:false,  
+        visible:false,
+        imgSrc:undefined,
+        currentRecords:{},
       }
     },
     methods: {
+      handleOk(e) {
+        // console.log(e);
+        this.visible = false;
+      },
+      openVideo(records){
+        this.visible=true;
+        this.imgSrc=records.url;
+        this.currentRecords=records
+      },
       // 过滤事件
       filterOption(input, option) {
         return (
@@ -444,27 +494,32 @@ const ideaColumns = [
         console.log(val)
       },
       dateChange(date,dateString){
-        console.log(data,dateString)
+        console.log(date,dateString)
       },
       // tab切换事件
       tabKeyChange(key){
-        console.log(key)
-        if(key==1){
-          this.getTableProjectList()
-        }else if(key==2){
-          this.getTableAccountList();
-        }
+        // console.log(key)
+        // if(key==1){
+        //   this.getTableProjectList()
+        // }else if(key==2){
+        //   this.getTableAccountList();
+        // }else if(){
+
+        // }
+        this.search();
       },
       // x项目的table值
       getTableProjectList(paramse){   
         this.loading=true;     
-        this.tabKey=1;
-        this.loading=true; 
+        this.spinning=true;
+        this.ipagination.current=0;
         this.columns= [...projectColumns,...publicColumns]  
         postAction('/kuaishou/getKuaishouProjectInfo',paramse).then(res=>{
           console.log(res);
-          if(res.success){
-              this.loading=false;
+          this.tabKey=1;
+          this.loading=false;
+          this.spinning=false;
+          if(res.success){             
               res.result.list.forEach((item,index)=>{
                 item.key=index
               })
@@ -477,29 +532,118 @@ const ideaColumns = [
       // 从项目跳转到账户,并获取账户的table值
       goAccount(records){
         console.log(records);
-        this.currentid=records.projectId
+        this.projectId=records.projectId
         this.getTableAccountList()
 
       },
-      getTableAccountList(){
-          this.tabKey=2;
+      // 从账户到计划
+      goCampaign(records){
+        this.accountId=records.accountId;
+        this.getTableCampaignList()
+      },
+      // 从计划到组
+      goUnit(records){
+        this.campaignId=records.campaignId;
+        this.getTableUnitList()
+      },
+      // 从组到创意
+      goCreative(records){
+          this.unitId=records.unitId;
+          this.getTableCreativeList()
+      },
+      getTableAccountList(){         
           this.loading=true; 
-          this.columns= [...accountColumns,...publicColumns]   
+          this.spinning=true;
+          this.ipagination.current=0;           
           postAction('/kuaishou/getKuaishouAccountInfoByProjectId',{
             startDate:this.dateRange[0].format('YYYY-MM-DD'),
             endDate:this.dateRange[1].format('YYYY-MM-DD'),
-            projectId:this.currentid,
+            projectId:this.projectId,
             pageNum:this.ipagination.current,
             pageSize:'10'
           }).then(res=>{
               console.log(res)
+               this.tabKey=2;
+               this.loading=false; 
+               this.spinning=false;  
+               this.columns= [...accountColumns,...publicColumns] 
               if(res.success){
-                this.loading=false;    
-                // this.tableData= 
+                 
+                this.tableData= res.result.list
+                this.ipagination.total=res.result.total
               }
           })
       },
+      getTableCampaignList(){        
+        this.loading=true; 
+        this.ipagination.current=0; 
+        this.spinning=true;       
+        postAction('/kuaishou/getKuaishouCampaignInfoByAccountId',{
+          startDate:this.dateRange[0].format('YYYY-MM-DD'),
+          endDate:this.dateRange[1].format('YYYY-MM-DD'),
+          accountId:this.accountId,
+          pageNum:this.ipagination.current,
+          pageSize:'10'
+        }).then(res=>{
+            console.log(res)
+            this.tabKey=3;
+            this.loading=false; 
+            this.spinning=false;
+            this.columns= [...campaignColumns,...publicColumns]      
+            if(res.success){             
+              this.tableData= res.result.list
+              this.ipagination.total=res.result.total
+            }
+        })
+      },
+      getTableUnitList(){        
+        this.loading=true; 
+        this.ipagination.current=0;   
+        this.spinning=true;      
+        postAction('/kuaishou/getKuaishouUnitInfoByCampaignId',{
+          startDate:this.dateRange[0].format('YYYY-MM-DD'),
+          endDate:this.dateRange[1].format('YYYY-MM-DD'),
+          campaignId:this.campaignId,
+          pageNum:this.ipagination.current,
+          pageSize:'10'
+        }).then(res=>{
+            console.log(res)
+            this.tabKey=4;
+            this.loading=false;  
+            this.spinning=false;
+            this.columns= [...unitColumns,...publicColumns]   
+            if(res.success){
+              
+              this.tableData= res.result.list
+              this.ipagination.total=res.result.total
+            }
+        })
+      },
+      getTableCreativeList(){        
+        this.loading=true; 
+        this.ipagination.current=0;      
+        this.spinning=true; 
+        postAction('/kuaishou/getKuaishouCreativeInfoByUnitId',{
+          startDate:this.dateRange[0].format('YYYY-MM-DD'),
+          endDate:this.dateRange[1].format('YYYY-MM-DD'),
+          unitId:this.unitId,
+          pageNum:this.ipagination.current,
+          pageSize:'10'
+        }).then(res=>{
+            console.log(res)
+            this.tabKey=5;
+            this.loading=false; 
+            this.spinning=false;  
+            this.columns= [...ideaColumns,...publicColumns]    
+            if(res.success){ 
+              this.tableData= res.result.list
+              this.ipagination.total=res.result.total
+            }
+        })
+      },
+
       search(){
+        if(this.tabKey==1){
           this.getTableProjectList({
             startDate:this.dateRange[0].format('YYYY-MM-DD'),
             endDate:this.dateRange[1].format('YYYY-MM-DD'),
@@ -507,6 +651,16 @@ const ideaColumns = [
             pageNum:this.ipagination.current,
             pageSize:'10'
           })
+        }else if(this.tabKey==2){
+          this.getTableAccountList();
+        }else if(this.tabKey==3){
+          this.getTableCampaignList();
+        }else if(this.tabKey==4){
+          this.getTableUnitList();
+        }else if(this.tabKey==5){
+          this.getTableCreativeList();
+        }
+          
       },
     },
     mounted() {
@@ -625,7 +779,7 @@ const ideaColumns = [
           
       }
     }
-  }
+}
 </script>
 <style lang="less">
 .resize-table-th {
@@ -715,5 +869,10 @@ const ideaColumns = [
       margin-top: 10px;
     }
   }
+  .spin-content {
+    border: 1px solid #91d5ff;
+    background-color: #e6f7ff;
+    padding: 30px;
+  }
 }
 </style>

+ 2 - 1
vue.config.js

@@ -57,7 +57,7 @@ module.exports = {
     proxy: {
       '/jeecg-boot': {
         // target: 'http://192.168.1.90:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
+        // target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.1.94:8804', //请求本地 需要jeecg-boot后台项目  孙震
         // target: 'http://192.168.0.230:8088', //请求本地 需要jeecg-boot后台项目  孙震
@@ -67,6 +67,7 @@ module.exports = {
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目 
+        target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目 
 
 
         ws: false,