朱鑫波 hace 4 años
padre
commit
07d9a55e73

BIN
src/assets/orderIcon.png


BIN
src/assets/work.png


+ 3 - 1
src/components/DatePicker.vue

@@ -171,7 +171,9 @@ export default {
     if (this.left) {
       this.$refs.pickOptions.style.left = this.left
     }
-
+    if(this.parentDate){
+      this.dateValue=this.parentDate
+    }
     // console.log(this.$refs.pickOptions.style.left)
   }
 }

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

@@ -170,7 +170,6 @@
         let waitRouter = this.pageList[index]
         this.$router.push(Object.assign({}, waitRouter));
         // this.changeTitle(waitRouter.meta.title)
-        console.log(key)
         if(key!='/material/musicMaterial'){
           this.clearPlayList()
         }

+ 1 - 1
src/views/modules/BatchCreate/TouTiaoBatch.vue

@@ -1536,7 +1536,7 @@ export default {
                             if(element.account.length){
                             element.account.forEach((ele,i)=>{
                                 this.treeData[index].children.push({});
-                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                 this.treeData[index].children[i].value=ele.accountId;
                                 this.treeData[index].children[i].key=ele.accountId;
                             })

+ 1 - 1
src/views/modules/BatchCreate/directedPackage.vue

@@ -183,7 +183,7 @@ export default {
                         if(element.account.length){
                         element.account.forEach((ele,i)=>{
                             this.treeData[index].children.push({});
-                            this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                            this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                             this.treeData[index].children[i].value=ele.accountId;
                             this.treeData[index].children[i].key=ele.accountId;
                         })

+ 1 - 1
src/views/modules/LaunchHousekeeper/LaunchHousekeeperList.vue

@@ -426,7 +426,7 @@ export default {
                             if(element.account.length){
                             element.account.forEach((ele,i)=>{
                                 this.treeData[index].children.push({});
-                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                 this.treeData[index].children[i].value=ele.accountId;
                                 this.treeData[index].children[i].key=ele.accountId;
                             })

+ 1 - 1
src/views/modules/LaunchHousekeeper/newProject.vue

@@ -366,7 +366,7 @@ export default {
                         if(element.account.length){
                         element.account.forEach((ele,i)=>{
                             this.treeData[index].children.push({});
-                            this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                            this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                             this.treeData[index].children[i].value=ele.accountId;
                             this.treeData[index].children[i].key=ele.accountId;
                         })

+ 80 - 54
src/views/modules/Statistics/KSAccountReport.vue

@@ -61,7 +61,7 @@
                 </a-tooltip>
             </div>
             <div class="infoNum">¥ 
-                <span class="red">{{costLink.cost | decimalsHandle }}</span> 
+                <span class="red">{{costLink.cost | decimalsHandle}}</span> 
                 <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')" ><span class="huanbi">环比: </span> {{ costLink.CostSumLink|toPercentage  }}</span> 
             </div>
         </div>
@@ -362,29 +362,15 @@ const columnsFixd = [
         scopedSlots: { customRender: 'date' },
         align: 'center',
         key:'date',
-        width:150,
+        width:200,
         fixed:'left',
-        // customRender: (value, row, index) => {
-        //   const obj = {
-        //     children: value,
-        //     attrs: {}
-        //   }
-        //   if(length){
-        //       // console.log(length)
-        //     if (index == 0) {           
-        //         obj.attrs.rowSpan = length
-        //     } else if(index>0&&index<length){
-        //         obj.attrs.rowSpan = 0
-        //     }
-        //   }
-        //   return obj
-        // }
+        
     },
     {
         title: '账户ID',
         dataIndex: 'accountId',
         align: 'center',
-        width: 150,
+        width: 200,
         fixed:'left',
         scopedSlots: { customRender: 'accountId' }
     },
@@ -392,17 +378,21 @@ const columnsFixd = [
         title: '账户昵称',
         dataIndex: 'authName',
         align: 'center',
-        width: 250,
+        width: 200,
         fixed:'left',
     },
+    
+]
+
+const initVariableColimns=[
     {
-        title: '消耗(元)',
-        dataIndex: 'cost',
-        width:150,
-        tip: '广告在投放期间的花费总额',
-        align: 'center',
-        scopedSlots: { customRender: 'cost' },
-        sorter: () => {}
+          title: '消耗(元)',
+          dataIndex: 'cost',
+          width:150,
+          tip: '广告在投放期间的花费总额',
+          align: 'center',
+          scopedSlots: { customRender: 'cost' },
+          sorter: () => {}
     },
       // {
       //     title: '折后消耗(元)',
@@ -562,10 +552,10 @@ export default {
         timeValueString:'',
         timeDefaultValue:undefined,
         visible:false,//自定义页面的打开
-        columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
+        columns:[...columnsFixd,...initVariableColimns] ,//table的表头
         columnsFixd,
         tableData:[],
-        scrollX:2000,       
+        scrollX:1000,       
         tableWidth: '',//设置表格的列宽
         loading:false,
         target:'cost',//默认消耗排序
@@ -603,8 +593,10 @@ export default {
     },
     //项目改变后的事件
     treeChange(val) {
+       
       // console.log(this.treeData)
       console.log(val)
+      
       this.accountId = [];
       //选择一个后禁用其他
       if(val.length==1){
@@ -718,6 +710,14 @@ export default {
              
         this.loading=true;
         this.searchDisabled=true;
+
+        this.discountCostLink={}
+        this.photoShowLink={}
+        this.photoClickLink={}
+        this.costLink={}
+        this.aClickLink={}
+
+
         this.tabCost={}
         this.tabPhotoClick={}
         this.tabPhotoShow={},
@@ -731,7 +731,7 @@ export default {
           endDate:this.dateValue[1].format('YYYY-MM-DD')
         })
         if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
-            this.target='stat_Datetime',
+            this.target='statDate',
             this.order='asc'
         }else{
             this.target='cost',
@@ -924,9 +924,10 @@ export default {
                     if(element.account.length){
                       element.account.forEach((ele,i)=>{
                           this.treeData[index].children.push({});
-                          this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                          this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName+'_('+(ele.accountStatus?'已停投':'投放中')+')';
                           this.treeData[index].children[i].value=ele.accountId;
                           this.treeData[index].children[i].key=ele.accountId;
+                          this.treeData[index].children[i].accountStatus=ele.accountStatus;
                       })
                         
                     }                           
@@ -1202,24 +1203,27 @@ export default {
     //table 排序
     sort(pagination, filters, sorter, { currentDataSource }){
           console.log(pagination, filters, sorter)
-          if(sorter.order == 'ascend'){            
-              this.order='asc'
-              this.target=sorter.columnKey;
-          }else if(sorter.order == 'descend'){
-              this.order='desc'    
-              this.target=sorter.columnKey;
-          }else{
-            if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
-                this.target='stat_Datetime',
-                this.order='asc'
-            }else{
-                this.target='cost',
-                this.order='desc'
-            } 
+          if(this.accountId.length){
+              if(sorter.order == 'ascend'){            
+                  this.order='asc'
+                  this.target=sorter.columnKey;
+              }else if(sorter.order == 'descend'){
+                  this.order='desc'    
+                  this.target=sorter.columnKey;
+              }else{
+                if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
+                    this.target='statDate',
+                    this.order='asc'
+                }else{
+                    this.target='cost',
+                    this.order='desc'
+                } 
+                  
+              }
               
+              this.tableHttp();
           }
           
-          this.tableHttp();
     },
   
     closeCustomColumn(){
@@ -1238,10 +1242,31 @@ export default {
     //自定义之后修改父元素表头
     changeColumn(val){
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=2000
+        this.columns=[...val];
+        if(this.columns.length> this.columnsFixd.length&&this.columns.length<8){
+          this.columns.forEach((element,index) => {
+            if(index<this.columns.length-1){
+              element.width='auto'
+              element.fixed=false
+            }             
+          });
+
+          // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
+        }else if(this.columns.length>=8){
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width=200
+              element.fixed='left'
+            }             
+          });
+
+           this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
+        } else{
+          this.scrollX=0;
+          this.columns.forEach(element => {
+              element.width='auto'
+              element.fixed=false
+          });
         }
     },
     tableHandle() {
@@ -1267,7 +1292,7 @@ export default {
     })
     
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 6
+      columnType: 2
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -1279,19 +1304,20 @@ export default {
                 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)
             }
         }
-        
+         this.changeColumn(this.columns)
       }
     })
   },
@@ -1299,7 +1325,7 @@ export default {
     let arr = JSON.stringify(this.columns)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 6
+      columnType: 2
     }).then(res => {
       // console.log(res)
     })

+ 1 - 0
src/views/modules/Statistics/Statistics.vue

@@ -326,6 +326,7 @@ p{
 </template>
 
 <script>
+
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import moment from 'moment'

+ 50 - 28
src/views/modules/Statistics/accountReport.vue

@@ -347,29 +347,15 @@ const columnsFixd = [
     scopedSlots: { customRender: 'date' },
     align: 'center',
     key:'date',
-    width:150,
+    width:200,
     fixed:'left',
-    // customRender: (value, row, index) => {
-    //   const obj = {
-    //     children: value,
-    //     attrs: {}
-    //   }
-    //   if(length){
-    //       // console.log(length)
-    //     if (index == 0) {           
-    //         obj.attrs.rowSpan = length
-    //     } else if(index>0&&index<length){
-    //         obj.attrs.rowSpan = 0
-    //     }
-    //   }
-    //   return obj
-    // }
+    
   },
   {
     title: '账户ID',
     dataIndex: 'accountId',
     align: 'center',
-    width: 150,
+    width: 200,
     fixed:'left',
     scopedSlots: { customRender: 'accountId' }
   },
@@ -377,9 +363,13 @@ const columnsFixd = [
     title: '账户昵称',
     dataIndex: 'authName',
     align: 'center',
-    width: 250,
+    width: 200,
     fixed:'left',
   },
+  
+]
+
+const initVariableColimns=[
   {
     title: '消耗(元)',
     dataIndex: 'cost',
@@ -501,7 +491,7 @@ export default {
         timeValueString:'',
         timeDefaultValue:undefined,
         visible:false,//自定义页面的打开
-        columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
+        columns:[...columnsFixd,...initVariableColimns] ,//table的表头
         columnsFixd,
         tableData:[],
         scrollX:0,       
@@ -655,6 +645,12 @@ export default {
       if(this.accountId.length>0){
         // console.log();  
              
+        this.discountCostLink={}
+        this.photoShowLink={}
+        this.photoClickLink={}
+        this.costLink={}
+        this.aClickLink={}
+
         this.loading=true;
         this.searchDisabled=true;
         this.tabCost={}
@@ -856,9 +852,10 @@ export default {
                     if(element.account.length){
                       element.account.forEach((ele,i)=>{
                           this.treeData[index].children.push({});
-                          this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                          this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName+'_('+(ele.accountStatus?'已停投':'投放中')+')';
                           this.treeData[index].children[i].value=ele.accountId;
                           this.treeData[index].children[i].key=ele.accountId;
+                          // this.treeData[index].children[i].accountStatus=ele.accountStatus;
                       })
                         
                     }                           
@@ -1134,6 +1131,7 @@ export default {
     //table 排序
     sort(pagination, filters, sorter, { currentDataSource }){
           console.log(pagination, filters, sorter)
+        if(this.accountId.length){
           if(sorter.order == 'ascend'){            
               this.order='asc'
               this.target=sorter.columnKey;
@@ -1152,6 +1150,7 @@ export default {
           }
           
           this.tableHttp();
+        }
     },
   
     closeCustomColumn(){
@@ -1168,11 +1167,32 @@ export default {
     },
     //自定义之后修改父元素表头
     changeColumn(val){
+      console.log(val)
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=0
+        if(this.columns.length> this.columnsFixd.length&&this.columns.length<8){
+          this.columns.forEach((element,index) => {
+            if(index<this.columns.length-1){
+              element.width='auto'
+              element.fixed=false
+            }             
+          });
+
+          // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
+        }else if(this.columns.length>=8){
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width=200
+              element.fixed='left'
+            }             
+          });
+
+           this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
+        } else{
+          this.scrollX=0;
+          this.columns.forEach(element => {
+              element.width='auto'
+              element.fixed=false
+          });
         }
     },
     tableHandle() {
@@ -1198,7 +1218,7 @@ export default {
     })
     
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 5
+      columnType: 1
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -1210,19 +1230,21 @@ export default {
                 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()
+                
+                // this.tableHandle()
             }
 
             // console.log(this.columns)
             }
         }
         
+        this.changeColumn(this.columns)
       }
     })
   },
@@ -1230,7 +1252,7 @@ export default {
     let arr = JSON.stringify(this.columns)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 5
+      columnType: 1
     }).then(res => {
       // console.log(res)
     })

+ 242 - 90
src/views/modules/Statistics/imageStatics/imageCostReport.vue

@@ -33,7 +33,7 @@
         
     </div>
     <div class="timeDiv">
-      <div>
+      <div style="margin-right:30px">
         <span>时间范围:</span>
 
         <a-range-picker
@@ -47,14 +47,14 @@
       </div>
       <div>
         <span>图片ID:</span>
-        <a-input class="myinput" v-model="videoID" style="width:250px" />
+        <a-input class="myinput" v-model="videoID" style="width:250px" :allowClear='true' />
       </div>
 
-      <a-button type="primary" @click="searchRes">查询</a-button>
+      <a-button type="primary" style="position:absolute;right:0" @click="searchRes">查询</a-button>
     </div>
 
     <div style="display:flex;margin:15px 0" class="btndiv">
-      <a-button type="primary" @click="exportExcel" id="mybtn" v-show="exportExcelIsOk">导出报表</a-button>
+      <a-button type="primary" @click="exportExcel" id="mybtn" :loading="exportExcelIsOk">导出报表</a-button>
     </div>
 
    
@@ -81,24 +81,40 @@
             @load="loadShow"
             />
         </div>
-        <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+        <span slot="cost" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="charge" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="activation" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="eventRegister" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="eventPay" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="formCount" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="eventJinJianApp" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="eventCreditGrantApp" slot-scope="text">{{ text | decimalsHandle }}</span>
+        <span slot="photoClick" slot-scope="text">{{ text | formatCurrency }}</span>
+        <span slot="photoShow" slot-scope="text">{{ text | formatCurrency }}</span>
+        <span slot="click" slot-scope="text">{{ text | formatCurrency }}</span>
+        <span slot="showNum" slot-scope="text">{{ text | formatCurrency }}</span>
+        <span slot="convert" slot-scope="text">{{ text | formatCurrency }}</span>
+        
+        <span slot="operation" slot-scope="text">
+         {{ text || '未绑定' }}
+        </span>
         
 
         </a-table>
     
     </div>
     <a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered='true'>
-        <p>编导:{{relevantPeopleData.planName || '暂无数据'}}</p>
-        <p>剪辑:{{relevantPeopleData.clipName || '暂无数据'}}</p>
-        <p>拍摄:{{relevantPeopleData.shotName || '暂无数据'}}</p>
+        <p>编导:{{relevantPeopleData.planName || '无'}}</p>
+        <p>剪辑:{{relevantPeopleData.clipName || '无'}}</p>
+        <p>拍摄:{{relevantPeopleData.shotName || '无'}}</p>
     </a-modal>
-    <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
+    <a-modal v-model="Videovisible" title="图片展示" @ok="videoOk" :footer="null" width="800px" style="text-align:center">
       <img
         @click.stop
         class="video"
         :src="videoUrl"
         controls="controls"
-        style="height:600px;width:100%"
+        style="height:400px;width:auto"
       />
     </a-modal>
   </div>
@@ -139,12 +155,12 @@ const TTcolumns = [
     fixed: 'left'
   },
     {
-    title:'相关人员',
+    title:'相关平面',
     dataIndex:'operation',
     key:'operation',
     scopedSlots: { customRender: 'operation' },
     align: 'center',
-    width:100,
+    width:150,
     fixed: 'left'
   },
   
@@ -154,7 +170,7 @@ const TTcolumns = [
 
     scopedSlots: { customRender: 'cost' },
     align: 'center',
-    sorter: () => {}
+    // sorter: () => {}
   },
   {
     title: '点击数',
@@ -162,7 +178,7 @@ const TTcolumns = [
     align: 'center',
 
     scopedSlots: { customRender: 'click' },
-    sorter: () => {}
+    // sorter: () => {}
     // (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
@@ -171,7 +187,7 @@ const TTcolumns = [
     align: 'center',
 
     scopedSlots: { customRender: 'showNum' },
-    sorter: () => {}
+    // sorter: () => {}
   },   
   {
     title: '转化数',
@@ -179,25 +195,25 @@ const TTcolumns = [
     align: 'center',
 
     scopedSlots: { customRender: 'convert' },
-    sorter: () => {}
-  },
-  {
-    title: '上传时间',
-    dataIndex: 'statDate',
-    scopedSlots: { customRender: 'statDate' },
-    align: 'center',
-    sorter: () => {}
+    // sorter: () => {}
   },
+  // {
+  //   title: '上传时间',
+  //   dataIndex: 'statDate',
+  //   scopedSlots: { customRender: 'statDate' },
+  //   align: 'center',
+  //   sorter: () => {}
+  // },
 ]
 const KScolumns = [
   {
     title: '图片',
-    dataIndex: 'videoU',
+    dataIndex: 'imageUrl',
     align: 'center',
     width: 100,
     fixed: 'left',
-    key: 'videoU',
-    scopedSlots: { customRender: 'videoU' }
+    key: 'imageUrl',
+    scopedSlots: { customRender: 'imageUrl' }
   },
   {
     title: '图片ID',
@@ -214,55 +230,95 @@ const KScolumns = [
     fixed: 'left'
   },
     {
-    title:'相关人员',
-    dataIndex:'userName',
-    key:'userName',
-    scopedSlots: { customRender: 'userName' },
+    title:'相关平面',
+    dataIndex:'operation',
+    key:'operation',
+    scopedSlots: { customRender: 'operation' },
     align: 'center',
-    width:100,
+    width:150,
     fixed: 'left'
   },
   
   {
     title: '消耗',
-    dataIndex: 'cost',
+    dataIndex: 'charge',
 
-    scopedSlots: { customRender: 'cost' },
+    scopedSlots: { customRender: 'charge' },
     align: 'center',
-    sorter: () => {}
+    // sorter: () => {}
   },
   {
     title: '点击数',
-    dataIndex: 'clickMaterial',
+    dataIndex: 'photoClick',
     align: 'center',
 
-    scopedSlots: { customRender: 'clickMaterial' },
-    sorter: () => {}
+    scopedSlots: { customRender: 'photoClick' },
+    // sorter: () => {}
     // (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
     title: '展示数',
-    dataIndex: 'showMaterial',
+    dataIndex: 'photoShow',
     align: 'center',
 
-    scopedSlots: { customRender: 'showMaterial' },
-    sorter: () => {}
+    scopedSlots: { customRender: 'photoShow' },
+    // sorter: () => {}
   },   
   {
-    title: '转化数',
-    dataIndex: 'convertMaterial',
+    title: '激活数',
+    dataIndex: 'activation',
+    align: 'center',
+
+    scopedSlots: { customRender: 'activation' },
+    // sorter: () => {}
+  },
+  {
+    title: '注册数',
+    dataIndex: 'eventRegister',
+    align: 'center',
+
+    scopedSlots: { customRender: 'eventRegister' },
+    // sorter: () => {}
+  },
+  {
+    title: '付费数',
+    dataIndex: 'eventPay',
+    align: 'center',
+
+    scopedSlots: { customRender: 'eventPay' },
+    // sorter: () => {}
+  },
+  {
+    title: '表单提交数',
+    dataIndex: 'formCount',
+    align: 'center',
+
+    scopedSlots: { customRender: 'formCount' },
+    // sorter: () => {}
+  },
+  {
+    title: '完件数',
+    dataIndex: 'eventJinJianApp',
     align: 'center',
 
-    scopedSlots: { customRender: 'convertMaterial' },
-    sorter: () => {}
+    scopedSlots: { customRender: 'eventJinJianApp' },
+    // sorter: () => {}
   },
   {
-    title: '上传时间',
-    dataIndex: 'materialUploadTime',
-    scopedSlots: { customRender: 'materialUploadTime' },
+    title: '授信数',
+    dataIndex: 'eventCreditGrantApp',
     align: 'center',
-    sorter: () => {}
+
+    scopedSlots: { customRender: 'eventCreditGrantApp' },
+    // sorter: () => {}
   },
+  // {
+  //   title: '上传时间',
+  //   dataIndex: 'materialUploadTime',
+  //   scopedSlots: { customRender: 'materialUploadTime' },
+  //   align: 'center',
+  //   sorter: () => {}
+  // },
 ]
 
 
@@ -318,7 +374,7 @@ export default {
       videoUrl: '',
 
       //是否显示导出按钮
-      exportExcelIsOk: true,
+      exportExcelIsOk: false,
       consumeValue: 0,
 
       columns: [...TTcolumns],
@@ -350,14 +406,17 @@ export default {
     methods: {
         tabChange(val){
           this.accountIds=[];
-            if(this.tabKeys==1){
+          this.data=[]
+          this.ipagination.current=1
+          if(this.tabKeys==1){
                 this.treeData=this.TTaccountList;
                 this.columns=this.TTcolumns;
-                
+                this.HttpPost('/image/bytedance/cost')
             }else if (this.tabKeys==2){
                 this.treeData=this.KSaccountList;
                 this.columns=this.KScolumns
-            }
+                this.HttpPost('/image/kuaishou/cost')
+            } 
         },
         treeChange(val) {
         // console.log(this.treeData)
@@ -421,7 +480,13 @@ export default {
                 return 
             }
             this.ipagination.current=pagination.current
-            this.HttpPost()
+            this.ipagination.pageSize= pagination.pageSize;
+
+            if(this.tabKeys==1){               
+                this.HttpPost('/image/bytedance/cost')
+            }else if (this.tabKeys==2){
+                this.HttpPost('/image/kuaishou/cost')
+            } 
         },
         moment,
         //select切换---项目
@@ -445,8 +510,13 @@ export default {
         consumeOnChange() {},
         //查询按钮
         searchRes() {
-            this.date = []
-            this.HttpPost()       
+            this.data=[];
+            this.ipagination.current=1
+            if(this.tabKeys==1){               
+                this.HttpPost('/image/bytedance/cost')
+            }else if (this.tabKeys==2){
+                this.HttpPost('/image/kuaishou/cost')
+            } 
         },
         loadShow(){
             show++
@@ -457,10 +527,11 @@ export default {
             }
         },
         //网络请求table数据函数
-        HttpPost(sort){
+        HttpPost(url){
           this.loading=true;
+          this.data=[]
           show = 0
-          postAction('/image/bytedance/cost', {
+          postAction(url, {
               startDate: this.timedata[0],
               endDate: this.timedata[1],        
               code: this.videoID,
@@ -493,31 +564,28 @@ export default {
         },
         //导出报表
         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.openxmlformats-officedocument.spreadsheetml.sheet'
-        let column = this.columns.map((item, index) => {
-            return item.dataIndex
-        })
-            let columns=['url',...column]
+          this.exportExcelIsOk=true;
+        
+        // let column = this.columns.map((item, index) => {
+        //     return item.dataIndex
+        // })
+        //     let columns=['url',...column]
+        let url=''
+        if(this.tabKeys==1){
+          url='/image/bytedance/cost/export'
+        }else{
+          url='/image/kuaishou/cost/export'
+        }
             
-        downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListTotalExportExcel', {
-            columns,
-            signature: this.videoID,
+        downFilePost(url, {
             startDate: this.timedata[0],
-            endDate: this.timedata[1],
-            cost: this.consumeValue,
-            accountIds:this.appId,
+              endDate: this.timedata[1],        
+              code: this.videoID,
+              accountList:this.accountIds,
         }).then(res => {
+         
             let blob = new Blob([res], {
-            type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+              type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
             })
             let downloadElement = document.createElement('a')
             let href = window.URL.createObjectURL(blob) //创建下载的链接
@@ -527,6 +595,7 @@ export default {
             downloadElement.click() //点击下载
             document.body.removeChild(downloadElement) //下载完成移除元素
             window.URL.revokeObjectURL(href) //释放掉blob对象
+            this.exportExcelIsOk=false;
         })
         },
 
@@ -551,7 +620,7 @@ export default {
         //请求项目和账户内容
         accountHttp(type){
             this.accountID=undefined;
-            getAction(`/ctop/projectMember/getProjectAccountByUserId?mediaType=${type}`, {}).then(res => {
+            getAction(`/ctop/projectMember/getAllProjectAccount?mediaType=${type}`, {}).then(res => {
                 if(res.success){                   
                     if(res.result){
                         res.result.forEach((element,index) => {
@@ -567,7 +636,7 @@ export default {
                                 if(element.account.length){
                                     element.account.forEach((ele,i)=>{
                                         this.TTaccountList[index].children.push({});
-                                        this.TTaccountList[index].children[i].title=ele.userName+'_'+ele.authName;
+                                        this.TTaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                         this.TTaccountList[index].children[i].value=ele.accountId;
                                         this.TTaccountList[index].children[i].key=ele.accountId;
                                     })
@@ -585,7 +654,7 @@ export default {
                                 if(element.account.length){
                                     element.account.forEach((ele,i)=>{
                                         this.KSaccountList[index].children.push({});
-                                        this.KSaccountList[index].children[i].title=ele.userName+'_'+ele.authName;
+                                        this.KSaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                         this.KSaccountList[index].children[i].value=ele.accountId;
                                         this.KSaccountList[index].children[i].key=ele.accountId;
                                     })
@@ -611,20 +680,102 @@ export default {
   // },
  
   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 Number(val).toFixed(2)
-    }
+    toPercentage(val) {
+      if(val){
+          if(typeof val != 'string'){
+            return (val * 100).toFixed(2) + '%'
+          }else{
+            return val
+          }
+      }else if(typeof val =='string'){
+            return val
+        }
+      else{
+        return 0
+      }    
+    },
+    //保留两位小数并且变成货币格式
+      decimalsHandle(val){
+          
+          if(val && typeof val !='string'){
+              if(val>=0){
+                  val=parseFloat(val).toFixed(2);
+                  let numberStr = val.toString()
+                  let str = numberStr.split('.')
+                  
+                  let str0=str[0].split('').reverse();
+                  for (let i = 0; i < str0.length; i++) {
+                      if ((i + 1) % 4 === 0) {
+                          str0.splice(i, 0, ',')
+                      }
+                  }
+                  str0.reverse()
+                  let handleResult = ''
+                  for (let j = 0; j < str0.length; j++) {
+                      handleResult += str0[j]
+                  }
+                  
+                  return handleResult+'.'+str[1]
+              }else{
+                  val=parseFloat(val).toFixed(2);
+                  let numberStr = val.toString()
+                  let str = numberStr.split('.')
+                  
+                  let str0=str[0].substr(1).split('').reverse();
+                  for (let i = 0; i < str0.length; i++) {
+                      if ((i + 1) % 4 === 0) {
+                          str0.splice(i, 0, ',')
+                      }
+                  }
+                  str0.reverse()
+                  let handleResult = ''
+                  for (let j = 0; j < str0.length; j++) {
+                      handleResult += str0[j]
+                  }
+                  
+                  return '-'+handleResult+'.'+str[1]
+              }
+              
+          }else if(typeof val =='string'){
+              return val
+          }
+          else{
+              return 0
+          }           
+      },
+      //变成货币格式
+      formatCurrency(val){
+        if((val||val==0)&& typeof val !='string'){
+            let numberStr = val.toString()
+          let str = numberStr.split('').reverse()
+          for (let i = 0; i < str.length; i++) {
+              if ((i + 1) % 4 === 0) {
+              str.splice(i, 0, ',')
+              }
+          }
+          str.reverse()
+          let handleResult = ''
+          for (let j = 0; j < str.length; j++) {
+              handleResult += str[j]
+          }
+          return handleResult
+        }else if(typeof val =='string'){
+              return val
+        }
+        else{
+          return '-'
+        }
+          
+      }
   },
 
+
   mounted() {
     
     //进入页面默认展示昨天到今天的数据
@@ -633,7 +784,7 @@ export default {
     ,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
     // this.loading=true;
    
-    this.HttpPost()
+    this.HttpPost('/image/bytedance/cost')
     this.accountHttp(1);
     this.accountHttp(2);
     
@@ -671,7 +822,8 @@ export default {
 }
 .timeDiv {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  position: relative;
 }
 span {
   margin-left: 5px;

+ 938 - 0
src/views/modules/Statistics/newPlanStatic/newPlanStatic.vue

@@ -0,0 +1,938 @@
+<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>
+.showNumBox{
+  margin: 10px 0;
+}
+.showNumBox .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.showNumBox p,
+.showNumBox 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;
+}
+.showNumBox .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;
+}
+</style>
+<style lang='less'>
+.ant-card-head .ant-tabs-bar{
+  padding: 0;
+}
+.search-box .ant-card-body {
+  padding: 5px 15px;
+
+}
+.search-box{
+  padding: 15px 10px;
+}
+.search-box p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.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;
+}
+.statistics{
+  .ant-card-bordered {
+     border: none; 
+  }
+  .ant-card-head .ant-tabs {
+    clear: both;
+    margin-bottom: -13px;
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: normal;
+    font-size: 14px;
+}
+.duibi{
+  position: absolute;
+  right: 24px;
+  top: 15px;
+}
+  p{
+    margin-bottom: 0;
+  }
+}
+
+</style>
+
+<style lang="less">
+.newPlanStatic{
+  .divider{
+      height: 62px;
+  }
+  .showNumBox{
+    background: white;
+    overflow: hidden;
+    margin: 15px 0;
+    padding: 30px 0;
+    text-align: center;
+    .ant-card-body{
+      padding-top: 0;
+    }
+    .title{     
+
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      line-height: 22px;
+      display: inline-block;
+    }
+  }
+  .tabbody{
+    background: white;
+    padding: 0 24px;
+    margin-bottom: 15px;
+    .ant-tabs-bar {
+      margin: 0;
+    }
+  }
+  .chartBox{
+    background: white;
+    padding: 20px 0;
+  }
+  .tableBody{
+    background: white;
+    padding: 20px ;
+  }
+}
+</style>
+
+<template>
+  <div class="newPlanStatic">
+    <div class="tabbody">
+      <a-tabs v-model="tabKey" @change="tabChange">
+        <a-tab-pane :key="1" tab="头条">        
+        </a-tab-pane>
+        <a-tab-pane :key="2" tab="快手">       
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+    
+    <a-row>
+      <a-col :span="24">
+        
+        <a-card :bordered="false" class="search-box">
+          <div style="margin-bottom:20px">
+            <span>项目选择:</span>
+            <a-tree-select
+                v-model="treeValue"
+                show-search
+                style="width: 580px;height:30px"
+                :dropdownMatchSelectWidth='true'
+                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"              
+                tree-checkable
+                searchPlaceholder='请输入账户关键字搜索'
+                :show-checked-strategy="SHOW_PARENT"
+                placeholder="请选择项目和账户或搜索账户关键字"
+                treeNodeFilterProp="title"
+                :allowClear="true"
+                @change="treeChange"
+                @search="treeSearch"
+                @select="treeSelect"                        
+                :maxTagCount='1'    
+                :tree-data="treeData"
+                :filterOption='filterOption'
+            >
+             </a-tree-select>
+
+            <span style="margin-left:20px">运营:</span>
+            <a-select
+              v-model="operate"
+              show-search
+              placeholder="请输入名字"
+              option-filter-prop="children"
+              style="width: 200px"
+              :filter-option="filterOption"
+              @change="operateChange"
+            >
+              <a-select-option v-for="item in operateList" :key="item.id" :value="item.id">
+                {{item.name}}
+              </a-select-option>
+            </a-select> 
+        </div>
+          <div class="time"  @click="opendate" >
+            <datePick  :dateValue.sync='dateValue'   :type.sync='type'   />
+          </div>
+          <!-- <p>对比</p> -->
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row >
+      <div class="showNumBox">
+          <a-col :sm="24" :md="10" :xl="10" :xxl="10">
+            <span class="title">
+              新上
+              {{tabKey==1?'计划数':'推广组'}}
+            </span>
+            <div>
+              <countTo
+                :startVal="0"
+                :endVal="newPlan"
+                :duration="duration"
+                :decimals="0"
+                style="overflow:auto"
+              ></countTo>
+            </div>
+            
+          </a-col>
+          <a-col :sm="24" :md="2" :xl="2" :xxl="2">
+            <a-divider type="vertical" class="divider" />
+          </a-col>
+          
+          <a-col :sm="24" :md="10" :xl="10" :xxl="10">
+            <span class="title">有效{{tabKey==1?'计划数':'推广组'}}</span>
+           <div>
+              <countTo
+                :startVal="0"
+                :endVal="effectPlan"
+                :duration="duration"
+                :decimals="0"
+                style="overflow:auto"
+              ></countTo>
+            </div>
+          </a-col>
+      </div>
+      
+    </a-row>
+    <a-row :gutter="10">
+      <a-col :span="24"> 
+        <div class="chartBox">
+          <a-spin :spinning="echartSpinning">
+           <div id="chart" style="width:100%;height:320px" ref="sectionChart"></div>
+          </a-spin>
+        </div>
+         
+      </a-col>
+    </a-row>
+    
+    <a-row style="margin-bottom:15px;margin-top:12px">
+      <a-col :span="24">
+        <div class="tableBody">
+          <a-tabs v-model="tableTab" @change="tableTabChange">
+            <a-tab-pane :key="1" :tab="tabKey==1?'新上计划数':'新上推广组'">        
+            </a-tab-pane>
+            <a-tab-pane :key="2" :tab="tabKey==1?'有效计划数':'有效推广组'">       
+            </a-tab-pane>
+          </a-tabs>
+          <a-table :columns="columns" :dataSource="dataTable" :pagination="false" :loading="loading" bordered>             
+          </a-table> 
+        </div>
+               
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+
+import datePick from '../components/datePick'
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import moment from 'moment'
+import countTo from 'vue-count-to'
+import lifting from '../components/lifting'
+import {  getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
+import { getAction, postAction } from '@/api/manage'
+
+import timeCheck from '../components/timeCheck'
+
+var upDate
+
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+require('echarts/lib/chart/pie')
+require('echarts/lib/chart/line')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+require('echarts/lib/component/graphic')
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/legend')
+
+let TTcolumns=[
+  {
+    title: '项目名称',
+    dataIndex: 'accountName',
+    scopedSlots: { customRender: 'accountName' },
+    align: 'center',
+    key:'accountName'
+    
+  },
+  {
+    title: '账户ID',
+    dataIndex: 'accountId',
+    scopedSlots: { customRender: 'accountId' },
+    align: 'center',
+    key:'accountId'
+    
+  },
+  {
+    title: '账户所属人',
+    dataIndex: 'people',
+    scopedSlots: { customRender: 'people' },
+    align: 'center',
+    key:'people'
+    
+  },
+  {
+    title: '上新计划数',
+    dataIndex: 'newPlan',
+    scopedSlots: { customRender: 'newPlan' },
+    align: 'center',
+    key:'newPlan'
+    
+  },
+  {
+    title: '时间周期',
+    dataIndex: 'statDate',
+    scopedSlots: { customRender: 'statDate' },
+    align: 'center',
+    key:'statDate'
+    
+  },
+]
+let KScolumns=[
+  {
+    title: '项目名称',
+    dataIndex: 'accountName',
+    scopedSlots: { customRender: 'accountName' },
+    align: 'center',
+    key:'accountName'
+    
+  },
+  {
+    title: '账户ID',
+    dataIndex: 'accountId',
+    scopedSlots: { customRender: 'accountId' },
+    align: 'center',
+    key:'accountId'
+    
+  },
+  {
+    title: '账户所属人',
+    dataIndex: 'people',
+    scopedSlots: { customRender: 'people' },
+    align: 'center',
+    key:'people'
+    
+  },
+  {
+    title: '上新推广组',
+    dataIndex: 'newPlan',
+    scopedSlots: { customRender: 'newPlan' },
+    align: 'center',
+    key:'newPlan'
+    
+  },
+  {
+    title: '时间周期',
+    dataIndex: 'statDate',
+    scopedSlots: { customRender: 'statDate' },
+    align: 'center',
+    key:'statDate'
+    
+  },
+]
+
+
+
+let sectionOption={
+    backgroundColor: '#fff',
+    tooltip: {
+        trigger: 'axis',
+       
+        axisPointer: {
+        // 坐标轴指示器,坐标轴触发有效
+          type: 'line', // 默认为直线,可选为:'line' | 'shadow',
+        
+        }, 
+    },
+    legend: {
+        data: ['新上计划数','有效计划数']
+    },
+    grid: {
+        left: '2%',
+        right: '2%',
+        bottom: '0%',
+        top: '12%',
+        containLabel: true
+    },
+    xAxis: [
+        {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            boundaryGap: false,
+            // 坐标轴线
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#999'
+              }
+            },
+            // 分割线
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: '#e5e5e5'
+              }
+            }
+        }
+    ],
+    yAxis: [
+        {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#999'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: '#e5e5e5'
+            }
+          }
+        },     
+    ],
+    series: [
+        {
+            name: '新上计划数',
+            type: 'line',
+            smooth: true,
+            data:  [820, 932, 901, 934, 1290, 1330, 1320],
+            symbol: 'circle',
+            color: '#0bcd74',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#0bcd74'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+        },
+        {
+            name: '有效计划数',
+            type: 'line',
+            smooth: true,
+            data:  [850, 952, 951, 954, 1250, 1530, 1520],           
+            symbol: 'circle',
+            color: '#9933ff',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#9933ff'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+        },
+    ]
+}
+
+export default {
+  
+  components: {
+    ACol,
+    ARow,
+    countTo,
+    lifting,
+    timeCheck,
+     datePick
+  },
+
+  data: function() {
+    return {
+      duration: 1000,
+    //treeselect的参数
+      treeValue: [],
+      treeData: [],
+      SHOW_PARENT,
+
+      type:1,
+      dateValue:[moment(), moment()],
+
+      operate:'',
+      operateList:[],
+
+      tabKey:1,
+      sectionOption,
+
+      loading: false,
+      TTcolumns,
+      KScolumns,
+      columns:[...TTcolumns],    
+      dataTable: [],
+     
+      tableTab:1,
+
+      newPlan:2222,
+      effectPlan:1000,
+     
+      echartSpinning:false,
+
+      openOptions:false,
+    }
+  },
+  methods: {
+      //项目改变后的事件
+    treeChange(val) {
+      // console.log(this.treeData)
+      console.log(val)
+      this.accountId = [];
+      //选择一个后禁用其他
+      if(val.length==1){
+          if(val[0]*1){
+            let selectindex=0
+              this.treeData.forEach((ele,index)=>{                   
+                  if(ele.children){
+                     ele.children.map((item,ind)=>{
+                            if(item.value==val[0]){
+                                selectindex=index;
+                                this.mediaId=ele.mediaId
+                            }
+                      })
+                  }                   
+              });
+              // console.log(selectindex)
+              if(selectindex ||selectindex==0){
+                this.treeData.forEach((ele,index)=>{
+                    if(index!=selectindex){
+                         ele.disableCheckbox = true;
+                         if(ele.children){
+                              ele.children.map((item,ind)=>{
+                                   item.disableCheckbox = true;
+                              })
+                         }
+                    }
+                })
+              }
+              
+          }else{
+            //  console.log(1)
+              this.treeData.forEach((ele,index)=>{
+                    if(ele.value!=val[0]){
+                         ele.disableCheckbox = true;
+                         
+                         if(ele.children){
+                              ele.children.forEach((item,ind)=>{
+                                   item.disableCheckbox = true;
+                              })
+                         }
+                    }
+                    if(ele.value==val[0]){
+                        this.mediaId=ele.mediaId
+                    }
+              })
+          }
+          // console.log(this.mediaId)
+          if(this.mediaId=='1'){
+            
+              this.discountDisabled=true;
+              this.rebatePropDisabled=false;
+              this.discount=this.rebateProp;
+          }else{
+            this.rebatePropDisabled=true;
+            this.discountDisabled=false;
+            this.discount=this.discountSelect;
+          }
+      }
+
+      if(val.length==0){
+          this.treeData.forEach((ele,index)=>{              
+                ele.disableCheckbox = false;
+                this.mediaId=ele.mediaId;
+                if(ele.children){
+                    ele.children.forEach((item,ind)=>{
+                          item.disableCheckbox = false;
+                    })
+                }
+              
+          });
+        this.rebatePropDisabled=false;
+        this.discountDisabled=false;
+        this.discount=1.0  
+      }
+      if(val){
+        val.forEach((ele,index)=>{
+          if(ele*1){
+              this.accountId.push(ele)
+          }else{              
+              let projectArr=this.treeData.filter((item)=>{
+                  return item.value==ele
+              });
+              // console.log(projectArr)
+              projectArr[0].children.forEach((element)=>{
+                 this.accountId.push(element.value)
+              })
+          }
+        })       
+      }
+      
+     console.log(this.accountId)
+    },
+    treeSearch(){
+      console.log(arguments);
+    },
+    treeSelect(){
+      // console.log(arguments);
+      // this.treeValue=arguments[0].value
+    },
+    disabledDate(current) {
+      // console.log(current)
+
+       return current && current > moment().subtract(1, 'day')
+    },
+    filterOption(input, option){
+      console.log(input, option)
+      return (
+          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        );
+    },
+     
+    //打开日期框
+    opendate(){
+       this.openOptions=!this.openOptions;
+      //  console.log(this.openOptions)
+    },
+    // 快手头条的切换
+    tabChange(key){
+      console.log(key);
+      
+      if(key==1){
+        // toutiao
+        this.columns=[...TTcolumns]
+      }else{
+        // kuaishou
+        this.columns=[...KScolumns]
+      }
+      this.accountHttp()
+    },
+    operateChange(value){
+      console.log(value)
+    },
+
+    //初始化chart
+    getEchartData(idName, optionName) {
+      const chart = this.$refs[idName]
+        // console.log(chart)
+      if (chart) {
+        // const myChart = echarts.init(document.getElementById(idName))
+        const myChart = echarts.init(chart)
+        myChart.setOption(optionName)
+        window.addEventListener('resize', function() {
+          myChart.resize()
+        })
+      }
+    },
+  
+    moment,
+    // table区域的tab切换
+    tableTabChange(key){
+
+    },
+    //处理echart
+    sectionHttp(params) {
+      this.loading = true;
+      this.spinning=true;
+      this.sectionOption=JSON.parse(JSON.stringify(sectionOption));
+      return new Promise((resolve, reject) => {
+        postAction('/ctop/byteDance/homePage/report/chart', params).then(res => {
+          // console.log(res)
+          if (res.success) {
+            this.loading = false
+            this.spinning=false;
+            //处理今天
+            if(res.result){
+
+            
+            
+           this.getEchartData('sectionChart', this.sectionOption);
+
+
+           //处理表格数据
+           let total={
+              statDate:'总计',
+              cost:0,           
+              click:0,
+              clickRate:0,
+              costProportion:'-',
+              cp:0,
+              cpm:0,
+              showNum:0
+          }
+           
+
+            var afterData=[];
+           res.result.list.forEach((ele,index)=>{
+             if(ele.afterData){
+                if(!ele.afterData.costProportion){
+                  ele.afterData.costProportion='-'
+                }
+                if(ele.afterData.statHour||ele.afterData.statHour==0){
+                    ele.afterData.statHour=ele.afterData.statHour > 9 ? `${ele.afterData.statHour}:00` : ` 0${ele.afterData.statHour}:00`
+                    ele.afterData.statDate=ele.afterData.statDate+' '+ele.afterData.statHour
+                }
+                ele.afterData.key=index+1
+                total.click+=ele.afterData.click
+                total.cost+=ele.afterData.cost
+                total.showNum+=ele.afterData.showNum;
+                afterData.push(ele.afterData)
+             }else{
+                if(!ele.costProportion){
+                  ele.costProportion='-'
+                }
+                if(ele.statHour||ele.statHour==0){
+                    ele.statHour=ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
+                    ele.statDate=ele.statDate+' '+ele.statHour
+                }
+                ele.key=index+1
+                total.click+=ele.click
+                total.cost+=ele.cost
+                total.showNum+=ele.showNum
+             }
+              
+           })
+
+              total.cost=(total.cost).toFixed(2)
+              total.clickRate=(total.click/total.showNum*100).toFixed(2)+'%'
+              total.cp=(total.cost/total.click).toFixed(2)
+              total.cpm=(total.cost/total.showNum*1000).toFixed(2)
+              if(afterData.length>0){
+                this.tableData=[total,...afterData]
+              }else{
+                this.tableData=[total,...res.result.list]
+              }
+              
+            }
+          }
+        })
+      })
+    },
+
+
+     //请求项目和账户内容
+    accountHttp(){
+     this.treeData=[];
+     this.treeValue=[];
+     getAction(`/ctop/projectMember/getProjectAccountByUserId?mediaType=${this.tabKey}`, {}).then(res => {
+       if(res.success){
+            // console.log(res);
+            if(res.result){
+                res.result.forEach((element,index) => {
+                  if(element){                  
+                      this.treeData.push({});                    
+                      this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
+                      this.treeData[index].value='project'+element.project.projectId;
+                      this.treeData[index].key=element.project.projectId;
+                      this.treeData[index].mediaId=element.project.mediaId;
+                      this.treeData[index].children=[];
+                                          
+                    if(element.account.length){
+                      element.account.forEach((ele,i)=>{
+                          this.treeData[index].children.push({});
+                          this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName +'_('+(ele.accountStatus?'已停投':'投放中')+')';
+                          this.treeData[index].children[i].value=ele.accountId;
+                          this.treeData[index].children[i].key=ele.accountId;
+                          // this.treeData[index].children[i].accountStatus=ele.accountStatus;
+                      })
+                        
+                    }                           
+                  }      
+                });
+                // console.log(this.treeData)
+                
+            }
+       }
+     })
+    },
+
+    // 运营数据获取
+    operateHttp(){
+      postAction('',{}).then(res=>{
+        console.log(res)
+      })
+    },
+
+  },
+  watch: {},
+  computed: {
+    newDate() {
+      var myDate = new Date()
+      myDate.getYear() //获取当前年份(2位)
+      var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
+      var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
+      var d = myDate.getDate() //获取当前日(1-31)
+      var day = myDate.getHours()
+      return day
+    }
+  },
+  activated: function() {
+    this.$nextTick(()=>{
+      this.getEchartData('sectionChart', this.sectionOption);
+      this.accountHttp()
+    })
+     
+  },
+  
+  filters: {
+    toPercentage(val) {
+      if(typeof val != 'string'){
+          return (val * 100).toFixed(2) + '%'
+      }else{
+        return val
+      }
+      
+    },
+    //保留两位小数并且变成货币格式
+    decimalsHandle(val){
+        
+        if(val && typeof val !='string'){
+            if(val>=0){
+                val=parseFloat(val).toFixed(2);
+                let numberStr = val.toString()
+                let str = numberStr.split('.')
+                
+                let str0=str[0].split('').reverse();
+                for (let i = 0; i < str0.length; i++) {
+                    if ((i + 1) % 4 === 0) {
+                        str0.splice(i, 0, ',')
+                    }
+                }
+                str0.reverse()
+                let handleResult = ''
+                for (let j = 0; j < str0.length; j++) {
+                    handleResult += str0[j]
+                }
+                
+                return handleResult+'.'+str[1]
+            }else{
+                val=parseFloat(val).toFixed(2);
+                let numberStr = val.toString()
+                let str = numberStr.split('.')
+                
+                let str0=str[0].substr(1).split('').reverse();
+                for (let i = 0; i < str0.length; i++) {
+                    if ((i + 1) % 4 === 0) {
+                        str0.splice(i, 0, ',')
+                    }
+                }
+                str0.reverse()
+                let handleResult = ''
+                for (let j = 0; j < str0.length; j++) {
+                    handleResult += str0[j]
+                }
+                
+                return '-'+handleResult+'.'+str[1]
+            }
+            
+        }else if(typeof val =='string'){
+            return val
+        }
+        else{
+            return 0
+        }           
+    },
+    //变成货币格式
+    formatCurrency(val){
+      if(val){
+          let numberStr = val.toString()
+        let str = numberStr.split('').reverse()
+        for (let i = 0; i < str.length; i++) {
+            if ((i + 1) % 4 === 0) {
+            str.splice(i, 0, ',')
+            }
+        }
+        str.reverse()
+        let handleResult = ''
+        for (let j = 0; j < str.length; j++) {
+            handleResult += str[j]
+        }
+        return handleResult
+      }
+        
+    }
+  }
+}
+</script>

+ 140 - 180
src/views/modules/Statistics/videoStatics/KSvideoStatics.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="vsummary">
     <div class="xiangmuxuanze" >
-        <span style="margin-top:">项目选择:</span>
-        <Treeselect  :appId.sync="appId" request="2,4"   style="display: inline-block;position: relative;"/>
+        <span >项目选择:</span>
+        <Treeselect  :appId.sync="appId" request="2,4"   style="display: inline-block;position: relative;margin-left: 0px;"/>
     </div>
     <div class="timeDiv">
       <div style='display:flex;align-items: center;'>
@@ -115,13 +115,14 @@
                  @customHeaderCell="customHeaderCell(columns)"
               >
              
-                <div slot="videoU" slot-scope="test,records">
+                <div slot="converUrl" slot-scope="test,records">
+                  <!-- {{test}} -->
                     <img
-                    :src="records.coverUrl"
+                    :src="test"
                     alt
                     style="width:80px"
                     @click="openVideo(records.url)"
-                    @load="loadShow"
+                   
                     />
                 </div>
                 <span slot="operation" slot-scope="text, record">
@@ -223,9 +224,9 @@
                 <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
                 <span slot="relativePeople" slot-scope="text,record">
                     <!-- <a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a> -->
-                    <span>剪辑:{{record.clip | '数据'}}</span>
-                    <span>拍摄:{{record.shot | '数据'}}</span>
-                    <span>编导:{{record.plan | '数据'}}</span>
+                    <p>剪辑:{{record.clip || '无'}}</p>
+                    <p>拍摄:{{record.shot || '无'}}</p>
+                    <p>编导:{{record.plan || '无'}}</p>
                 </span>
 
                 
@@ -238,7 +239,7 @@
 
       <!-- 明细表 -->
 
-      <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
+      <a-modal v-model="visibleDetail" title="详细信息" width="50%" :footer="null" >
         <a-button type="default" @click="exportExcel('exportDetail')" id="mybtn" >导出报表</a-button>
         <a-table
           :columns="detailColumn"
@@ -246,9 +247,13 @@
           bordered
           tableLayout="auto"
           :pagination="false"
+          :loading='detailLoading'
           style="word-break: break-all;"
         >
-          <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
+          <!-- <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span> -->
+
+           <span slot="advertiserName" slot-scope="text">{{ text || '暂未填写该数据' }}</span>
+          <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
         </a-table>
       </a-modal>
   </div>
@@ -265,12 +270,12 @@ import customColumn from '../components/customColumn.vue'
 const columnsFixd = [
   {
     title: '视频',
-    dataIndex: 'videoU',
+    dataIndex: 'converUrl',
     align: 'center',
     width: 100,
     fixed: 'left',
-    key: 'videoU',
-    scopedSlots: { customRender: 'videoU' }
+    key: 'converUrl',
+    scopedSlots: { customRender: 'converUrl' }
   },
   {
     title: '视频名称',
@@ -302,15 +307,15 @@ const columnsFixd = [
     width:120,
     fixed: 'left'
   },
-  //   {
-  //   title:'操作',
-  //   dataIndex:'operation',
-  //   key:'operation',
-  //   scopedSlots: { customRender: 'operation' },
-  //   align: 'center',
-  //   width:90,
-  //   fixed: 'left'
-  // },
+    {
+    title:'操作',
+    dataIndex:'operation',
+    key:'operation',
+    scopedSlots: { customRender: 'operation' },
+    align: 'center',
+    width:90,
+    fixed: 'left'
+  },
 
   {
     title: '创建时间',
@@ -319,7 +324,12 @@ const columnsFixd = [
     align: 'center',
     sorter: () => {}
   },
-  {
+ 
+]
+let show = 0
+
+const initVariableColimns=[
+   {
         title: '消耗(元)',
         dataIndex: 'cost',
         width:150,
@@ -414,48 +424,23 @@ const columnsFixd = [
         sorter:() => {}
     },
 ]
-let show = 0
 
-let detailColumn = [
-  {
+let detailColumn=[
+   {
     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
-    }
+     scopedSlots: { customRender: 'advertiserName' },
   },
   {
     title: '项目名称',
     dataIndex: 'projectName',
     align: 'center',
-    width:150,
-    customRender: (value, row, index) => {
-      const obj = {
-        children: value,
-        attrs: {}
-      }
-      if (index == 0) {
-        obj.attrs.rowSpan = 7
-      }else {
-        obj.attrs.rowSpan = 0
-      }
-      return obj
-    }
+    width: 150,
   },
-  {
+   {
     title: '时间',
-    dataIndex: 'statDatetime',
+    dataIndex: 'statDate',
     align: 'center',
     width: 120
   },
@@ -463,19 +448,15 @@ let detailColumn = [
     title: '消耗',
     dataIndex: 'cost',
     scopedSlots: { customRender: 'cost' },
-    align: 'center'
+    align: 'center',
+    
   },
-  {
-    title: '环比',
-    dataIndex: 'huanbi',
-    scopedSlots: { customRender: 'huanbi' },
-    align: 'center'
-  }
 ]
 
 export default {
   data() {
     return {
+       detailLoading:false,
       clip:undefined,
       shot:undefined,
       plan:undefined,
@@ -488,7 +469,7 @@ export default {
        target:'cost',
         order:'desc',
         type:0,
-        dateValue:[moment(),moment()],
+        dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')],
         openOptions:false,
         relevantPeopleVisible:false,
       relevantPeopleData:{},
@@ -511,7 +492,7 @@ export default {
       exportExcelIsOk: true,
       consumeValue: 0,
 
-      columns: [...columnsFixd],
+      columns:[...columnsFixd,...initVariableColimns] ,//table的表头
       addColumns: [],
       data: [],
       totalSelect: 0,
@@ -523,7 +504,7 @@ export default {
       //自定义列的搜索框
       searchInput: '',
       //弹出框中现实的选中列数
-      scrollX: 2200,
+      scrollX: 0,
       listNum: [],
       //
       form: [],
@@ -532,7 +513,7 @@ export default {
       ipagination: {
           current: 1,
           pageSize: 10,
-          //   pageSizeOptions: ['10', '20', '30'],
+          
           showTotal: (total, range) => {
               return range[0] + "-" + range[1] + " 共" + total + "条"
           },
@@ -565,15 +546,17 @@ export default {
       console.log(text, record)
       this.visibleDetail = true
       this.detailData = []
-      // this.signature=record.signature
+      this.detailLoading=true;
+      this.signature=record.signature
       // console.log(this.signature)
-      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
+      postAction('/ctop/kuaishou/videoReport/detail', {
         startDate: this.dateValue[0].format('YYYY-MM-DD'),
         endDate: this.dateValue[1].format('YYYY-MM-DD'),
         signature: record.signature,
         accountIds:this.appId
       }).then(res => {
         console.log(res)
+        this.detailLoading=false;
         if (res.success) {
           let result = res.result
           // this.detailData.push({ ...result, key: 1 })
@@ -590,10 +573,31 @@ export default {
       //自定义之后修改父元素表头
     changeColumn(val){
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=2000
+        if(this.columns.length> this.columnsFixd.length&&this.columns.length<9){
+          this.scrollX=0;
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width='auto'
+              element.fixed=false
+            }             
+          });
+
+          // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
+        }else if(this.columns.length>=9){
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width=120
+              element.fixed='left'
+            }             
+          });
+
+           this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
+        } else{
+          this.scrollX=0;
+          this.columns.forEach(element => {
+              element.width='auto'
+              element.fixed=false
+          });
         }
     },
     // 日期的开关
@@ -686,11 +690,11 @@ export default {
         this.data=[];
         this.loading = false
         if (res.success) {
-        //   let result = res.result
-        //   this.data.push({ ...result, key: 1 })
-        //   result.map((item, index) => {
-        //     item.key = index
-        //   })
+          // let result = res.result
+          // this.data.push({ ...result, key: 1 })
+          // result.map((item, index) => {
+          //   item.key = index
+          // })
           this.data = res.result.list.map((item,index)=>{
               return {
                   ...item,
@@ -708,13 +712,14 @@ export default {
     //导出报表
     exportExcel(exportType) {
       this.exportLoading=true;
-       let column = this.columns.map((item, index) => {
-        return item.dataIndex
-      })
-      
-      let columns=column.splice(5)
-        
-      downFilePost('/ctop/kuaishou/videoReport/report/excel', {
+      let columns=[]
+      if(exportType=='exportTable'){
+        let column = this.columns.map((item, index) => {
+          return item.dataIndex
+        })      
+        columns=column.splice(7)
+      }
+      downFilePost('/ctop/kuaishou/videoReport/excel', {
         columns,
         target:this.target,
         order:this.order,
@@ -722,6 +727,8 @@ export default {
         endDate: this.dateValue[1].format('YYYY-MM-DD'),
         accountIds:this.appId,
         exportType,
+        signature: this.signature,
+        signature: this.signature,
         clip:this.clip?this.clip:'',
         shot:this.shot?this.shot:'',
         plan:this.plan?this.plan:'',
@@ -766,22 +773,17 @@ export default {
     },
     
 
-    //设置头部单元格属性
-    customHeaderCell(columns) {
-    //   console.log(columns)
-    },
-
     tableHandle() {
       // this.listNum = [...this.columns]
-    //   console.log(this.listNum.length, this.columns)
+      //   console.log(this.listNum.length, this.columns)
 
-        if (this.listNum.length >= 9 || this.columns.length >= 9) {
-          this.tableWidth = 160
-          this.scrollX = this.columns.length * 160
-          // console.log(this.scrollX)
-        } else {
-          this.scrollX = 2000
-        }
+        // if (this.listNum.length >= 9 || this.columns.length >= 9) {
+        //   this.tableWidth = 160
+        //   this.scrollX = this.columns.length * 160
+        //   // console.log(this.scrollX)
+        // } else {
+        //   this.scrollX = 2000
+        // }
     },
 
     //弹出框确定
@@ -830,82 +832,10 @@ export default {
             }
         }
     },
-    //弹出框里的搜索框
-    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')
@@ -915,7 +845,7 @@ export default {
     moment().format('YYYY-MM-DD_HH:mm')
 
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 6
+      columnType: 4
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -927,29 +857,31 @@ export default {
                 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()
+                
+                // this.tableHandle()
             }
 
             // console.log(this.columns)
             }
         }
+        this.changeColumn(this.columns)
         
       }
     })
-    this.tableHandle();
+    
   },
   deactivated() {
     let arr = JSON.stringify(this.columns)
     // console.log(arr)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 6
+      columnType: 4
     }).then(res => {
       // console.log(res)
     })
@@ -1054,8 +986,7 @@ filters: {
   },
 
   mounted() {
-    this.columns = [...columnsFixd]
-    // console.log('mounted')
+    
     //请求自定义列的数据
     postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
       console.log(res)
@@ -1073,8 +1004,37 @@ filters: {
     this.timedata=[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
     // this.loading=true;
    
-        this.HttpPost()
-    
+    this.HttpPost()
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType: 4
+    }).then(res => {
+      // console.log(res)
+      if (res.success) {
+        // console.log(JSON.parse(res.result))
+        if(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) {
+                      
+                    }
+                }
+                })
+                columns = columns.slice(columnsFixd.length)
+                this.columns = [...columnsFixd, ...columns]
+                
+                // this.tableHandle()
+            }
+
+            // console.log(this.columns)
+            }
+        }
+        this.changeColumn(this.columns)
+        
+      }
+    })
   }
 }
 </script>

+ 162 - 139
src/views/modules/Statistics/videoStatics/TTvideoStatics.vue

@@ -162,9 +162,9 @@
       
         <span slot="relativePeople" slot-scope="text,record">
            <!-- <a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a> -->
-            <span>剪辑:{{record.clip | '数据'}}</span>
-            <span>拍摄:{{record.shot | '数据'}}</span>
-            <span>编导:{{record.plan | '暂无数据'}}</span>
+            <p>剪辑:{{record.clip || '无'}}</p>
+            <p>拍摄:{{record.shot || '无'}}</p>
+            <p>编导:{{record.plan ||'无'}}</p>
        </span>
 
     </a-table>
@@ -187,17 +187,19 @@
 
     <!-- 明细表 -->
 
-      <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
+      <a-modal v-model="visibleDetail" title="详细信息" width="50%" :footer="null" >
         <a-button type="default" @click="exportExcel('exportDetail')" id="mybtn">导出报表</a-button>
         <a-table
           :columns="detailColumn"
           :data-source="detailData"
           bordered
           tableLayout="auto"
+          :loading='detailLoading'
           :pagination="false"
           style="word-break: break-all;"
         >
-          <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
+          <span slot="advertiserName" slot-scope="text">{{ text || '暂未填写该数据' }}</span>
+          <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
         </a-table>
       </a-modal>
   </div>
@@ -251,15 +253,15 @@ const columnsFixd = [
     width:120,
     fixed: 'left'
   },
-  //   {
-  //   title:'操作',
-  //   dataIndex:'operation',
-  //   key:'operation',
-  //   scopedSlots: { customRender: 'operation' },
-  //   align: 'center',
-  //   width:120,
-  //   fixed: 'left'
-  // },
+    {
+    title:'操作',
+    dataIndex:'operation',
+    key:'operation',
+    scopedSlots: { customRender: 'operation' },
+    align: 'center',
+    width:120,
+    fixed: 'left'
+  },
 
   {
     title: '创建时间',
@@ -269,6 +271,41 @@ const columnsFixd = [
     sorter: () => {}
   },
 
+  
+
+]
+let show = 0
+
+let detailColumn=[
+   {
+    title: '客户',
+    dataIndex: 'advertiserName',
+    align: 'center',
+    scopedSlots: { customRender: 'advertiserName' },
+    align: 'center',
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'projectName',
+    align: 'center',
+    width: 150,
+  },
+   {
+    title: '时间',
+    dataIndex: 'statDate',
+    align: 'center',
+    width: 120
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+    
+  },
+]
+
+const initVariableColimns=[
   {
     title: '消耗',
     dataIndex: 'cost',
@@ -284,7 +321,6 @@ const columnsFixd = [
 
     scopedSlots: { customRender: 'clickMaterial' },
     sorter: () => {}
-    // (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
     title: '点击率',
@@ -317,15 +353,12 @@ const columnsFixd = [
     scopedSlots: { customRender: 'convertRate' },
     sorter: () => {}
   },
-
 ]
-let show = 0
-
-let detailColumn=[]
 
 export default {
   data() {
     return {
+      detailLoading:false,
       clip:undefined,
       shot:undefined,
       plan:undefined,
@@ -339,7 +372,7 @@ export default {
       target:'cost',
       order:'desc',
         type:0,
-        dateValue:[moment(),moment()],
+      dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')],
         openOptions:false,
         relevantPeopleVisible:false,
       relevantPeopleData:{},
@@ -362,7 +395,7 @@ export default {
       exportExcelIsOk: true,
       consumeValue: 0,
 
-      columns: [...columnsFixd],
+      columns:[...columnsFixd,...initVariableColimns] ,//table的表头
       addColumns: [],
       data: [],
       totalSelect: 0,
@@ -383,7 +416,7 @@ export default {
       ipagination: {
           current: 1,
           pageSize: 10,
-          //   pageSizeOptions: ['10', '20', '30'],
+          
           showTotal: (total, range) => {
               return range[0] + "-" + range[1] + " 共" + total + "条"
           },
@@ -413,15 +446,17 @@ export default {
       console.log(text, record)
       this.visibleDetail = true
       this.detailData = []
-      // this.signature=record.signature
+      this.signature=record.signature
       // console.log(this.signature)
-      postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
+      this.detailLoading=true
+      postAction('/ctop/byteDance/videoReport/detail', {
         startDate: this.dateValue[0].format('YYYY-MM-DD'),
         endDate: this.dateValue[1].format('YYYY-MM-DD'),
         signature: record.signature,
         accountIds:this.appId
       }).then(res => {
         console.log(res)
+        this.detailLoading=false;
         if (res.success) {
           let result = res.result
           // this.detailData.push({ ...result, key: 1 })
@@ -439,10 +474,30 @@ export default {
      //自定义之后修改父元素表头
     changeColumn(val){
         this.columns=[...val];
-        if(this.columns.length> this.columnsFixd.length){
-              this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
-        }else{
-          this.scrollX=2000
+        if(this.columns.length> this.columnsFixd.length&&this.columns.length<9){
+          this.columns.forEach((element,index) => {
+            if(index<this.columns.length-1){
+              element.width='auto'
+              element.fixed=false
+            }             
+          });
+
+          // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
+        }else if(this.columns.length>=9){
+          this.columns.forEach((element,index) => {
+            if(index<this.columnsFixd.length){
+              element.width=120
+              element.fixed='left'
+            }             
+          });
+
+           this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
+        } else{
+          this.scrollX=0;
+          this.columns.forEach(element => {
+              element.width='auto'
+              element.fixed=false
+          });
         }
     },
     // 日期的开关
@@ -452,8 +507,8 @@ export default {
         //  console.log(this.openOptions)
     },
     opendateClose(){
-          this.openOptions=false;
-          //  console.log(this.openOptions)
+      this.openOptions=false;
+        //  console.log(this.openOptions)
     },
 
     // 查看相关人员
@@ -474,7 +529,7 @@ export default {
     sort(pagination, filters, sorter, { currentDataSource }){
           console.log(pagination, filters, sorter)
           this.ipagination.current=pagination.current;
-          this.ipagination.pageSize=pagination.pageSize
+          this.ipagination.pageSize=pagination.pageSize        
           if(sorter.order == 'ascend'){            
               this.order='asc'
               this.target=sorter.columnKey;
@@ -485,7 +540,8 @@ export default {
                 this.target='cost',
                 this.order='desc'           
           }          
-          this.HttpPost();
+          this.HttpPost();          
+        
     },
     moment,
     //select切换---项目
@@ -506,7 +562,7 @@ export default {
       return current && current > moment().subtract(1, 'day')
     },
 
-    consumeOnChange() {},
+  
     //查询按钮
     searchRes() {
       this.date = []
@@ -550,23 +606,30 @@ export default {
     //导出报表
     exportExcel(exportType) {
       this.exportLoading=true;
-      let column = this.columns.map((item, index) => {
-        return item.dataIndex
-      })
+      let columns=[]
+      if(exportType=='exportTable'){
+        let column = this.columns.map((item, index) => {
+          return item.dataIndex
+        })
       
-      let columns=column.splice(5)
-      downFilePost('/ctop/byteDance/videoReport/report/excel', {
+        columns=column.splice(7)
+      }else{
+        
+      }
+      
+      downFilePost('/ctop/byteDance/videoReport/excel', {
         columns,
         target:this.target,
         order:this.order,
         startDate: this.dateValue[0].format('YYYY-MM-DD'),
         endDate: this.dateValue[1].format('YYYY-MM-DD'),
         accountIds:this.appId,
-        
+        signature: this.signature,
         exportType,
         clip:this.clip?this.clip:'',
         shot:this.shot?this.shot:'',
         plan:this.plan?this.plan:'',
+
       }).then(res => {
         this.exportLoading=false;
         let blob = new Blob([res], {
@@ -607,22 +670,19 @@ export default {
       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 >= 9 || this.columns.length >= 9) {
-        this.tableWidth = 120
-        this.scrollX = this.columns.length * 120
-        // console.log(this.scrollX)
-      } else {
-        this.scrollX = 0
-      }
+      // if (this.listNum.length >= 9 || this.columns.length >= 9) {
+      //   this.tableWidth = 120
+      //   this.scrollX = this.columns.length * 120
+      //   // console.log(this.scrollX)
+      // } else {
+      //   this.scrollX = 0
+      // }
     },
 
     //弹出框确定
@@ -671,83 +731,10 @@ export default {
             }
         }
     },
-    //弹出框里的搜索框
-    onSearch(value) {
-      console.log(value)
-    },
-
-    //清空全部按钮的事件
-    clearAllList() {
-      this.listNum = [...columnsFixd]
-      console.log(this.$refs.vSummaryTable)
-    },
-
- 
-
-    //从自定义列拿选择的项
-    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)
-      }
-    }
+   
+    
   },
-  // watch:{
-  //     'ipagination.current':function(n,o){
-  //         console.log(n,o)
-  //         this.HttpPost()
-  //     }
-  // },
+ 
   activated() {
     console.log('activated')
     // this.getParticipateList()
@@ -756,7 +743,7 @@ export default {
     moment().format('YYYY-MM-DD_HH:mm')
 
     postAction('/toutiao/videoReportDaily/getColumnJson', {
-      columnType: 1
+      columnType: 3
     }).then(res => {
       // console.log(res)
       if (res.success) {
@@ -768,29 +755,32 @@ export default {
                 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()
+                this.columns = [...columnsFixd, ...columns];
+                
+                // this.tableHandle()
             }
 
             // console.log(this.columns)
             }
         }
-        
+        this.changeColumn(this.columns)
       }
     })
-    this.tableHandle();
+    
+    
+    
   },
   deactivated() {
     let arr = JSON.stringify(this.columns)
     // console.log(arr)
     postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
       json: arr,
-      columnType: 1
+      columnType: 3
     }).then(res => {
       // console.log(res)
     })
@@ -893,8 +883,8 @@ export default {
   },
 
   mounted() {
-    this.columns = [...columnsFixd]
-    // console.log('mounted')
+    
+   
     //请求自定义列的数据
     postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
       console.log(res)
@@ -910,10 +900,38 @@ export default {
     //进入页面默认展示昨天到今天的数据
     this.dateRange=[moment().subtract(7,'days'),moment()]
     this.timedata=[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
-    // this.loading=true;
-   
-        this.HttpPost()
     
+   
+    this.HttpPost()
+    postAction('/toutiao/videoReportDaily/getColumnJson', {
+      columnType: 3
+    }).then(res => {
+      // console.log(res)
+      if (res.success) {
+        
+        if(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) {
+                   
+                    }
+                }
+                })
+                columns = columns.slice(columnsFixd.length)
+                this.columns = [...columnsFixd, ...columns];
+                
+               
+            }
+
+           
+            }
+        }
+        this.changeColumn(this.columns)
+      }
+    })
   }
 }
 </script>
@@ -932,6 +950,9 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+span{
+  margin-left: 0;
+}
 .vsummary {
   width: 100%;
   height: 100%;
@@ -1044,4 +1065,6 @@ span {
 #mybtn {
   margin: 0 10px 15px 0;
 }
-</style>
+</style>
+
+

+ 43 - 1
src/views/modules/Statistics/xiaoshouStatistics.vue

@@ -19,7 +19,9 @@
           </a-select>
           <a-range-picker v-model="dateRange" @change="dateChange" style="width:200px" />
           <div class="opt">
-            <a-button type='primary' @click="search">查询</a-button>
+            <a-button type='primary' @click="search" style="margin-right:15px">查询</a-button>
+            <a-button type='primary' @click="exportExcel" :loading='exportLoading'>导出报表</a-button>
+
           </div>
         </div>
         <a-spin :spinning="spinning">
@@ -475,6 +477,15 @@
       align: 'center',
     },
     {
+      title: '销售',
+      dataIndex: 'saleName',
+      scopedSlots: {
+        customRender: 'saleName'
+      },
+      align: 'center',
+    },
+    
+    {
       title: '时间',
       dataIndex: 'statDate',
       // width:200,
@@ -782,6 +793,7 @@
     mixins: [JeecgListMixin],
     data() {
       return {
+        exportLoading:false,
         projectValue: [],
         dateRange: [moment().subtract(1, 'days'), moment()],
         projectData: [],
@@ -820,6 +832,36 @@
       }
     },
     methods: {
+      //导出报表
+      exportExcel() {
+        this.exportLoading=true;
+        let url=''
+        if (this.tabKey == 1) {
+          url='/ctop/report/exportBytedanceSaleProjectInfo'
+         
+        } else if (this.tabKey == 2) {
+          url='/kuaishou/exportKuaishouSaleProjectInfo'
+        }
+        downFilePost(url, {
+          startDate: this.dateRange[0].format('YYYY-MM-DD'),
+          endDate: this.dateRange[1].format('YYYY-MM-DD'), 
+          projectList: this.projectValue,
+          
+        }).then(res => {
+          this.exportLoading=false;
+          let blob = new Blob([res], {
+            type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+          })
+          let downloadElement = document.createElement('a')
+          let href = window.URL.createObjectURL(blob) //创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `${this.dateRange[0].format('YYYY-MM-DD')}~${this.dateRange[1].format('YYYY-MM-DD')}销售报表.xlsx`   //下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() //点击下载
+          document.body.removeChild(downloadElement) //下载完成移除元素
+          window.URL.revokeObjectURL(href) //释放掉blob对象
+        })
+      },
       showClick(record) {
         this.visible = true
         this.loadingChild = true

+ 113 - 11
src/views/modules/kuaishouapp/account/stepForm/Step3.vue

@@ -1,6 +1,6 @@
 <style lang="scss">
-.display-none-selset{
-  display: none!important;
+.display-none-selset {
+  display: none !important;
 }
 .chouzhen span {
   display: inline-block;
@@ -449,9 +449,23 @@ li.chouzhen.first:before {
               placeholder="按回车生成标签"
               v-decorator="['creativeTag']"
               dropdownClassName="display-none-selset"
-              :token-separators="[',',' ',',']"
+              :token-separators="[',', ' ', ',']"
             >
             </a-select>
+            <a-popconfirm @confirm="getInfo(record)">
+              <div slot="title">
+                <div>
+                  分类名称:
+                  <a-input placeholder="请输入" v-model="tagName" style="display: inline-block; width: 300px" />
+                </div>
+              </div>
+              <!-- <a-button slot="okText" type="primary" :disabled="refuseReason == ''">确定</a-button> -->
+              <!-- <a @click="setData(record)">复制</a> -->
+              <a style="margin-right: 10px" :disabled="!getData('creativeTag')">收藏</a>
+              <!-- @click="collection('creativeTag')" -->
+            </a-popconfirm>
+
+            <a @click="showCunTag('creativeTag')">收藏列表</a>
           </a-form-item>
 
           <!-- @change="createChange" -->
@@ -712,7 +726,10 @@ li.chouzhen.first:before {
         您的浏览器不支持 video 标签。
       </video>
     </a-modal>
-
+    <a-modal title="收藏标题" v-model="creativeTagVisible" :width="1000" @ok="okTag">
+      <el-tree :data="optionsTag" show-checkbox node-key="id" :props="defaultProps" :check-strictly="true" ref="tree">
+      </el-tree>
+    </a-modal>
     <a-modal :maskClosable="false" title="选择素材" v-model="stickerVisible" @ok="handleOkCover" :width="1000">
       <a-radio-group v-model="stickerStylesValue" class="sticker-styles" v-if="stickerStyles.length > 0">
         <a-radio v-for="(item, index) in stickerStyles" :key="index" :value="item.overlay_type">
@@ -877,7 +894,7 @@ export default {
       value: '',
       dataOne: [],
       title: [],
-
+      creativeTagVisible: false,
       tags: [],
       visibleMatemal: false,
       visibleVideo: false,
@@ -994,9 +1011,38 @@ export default {
       horizontalPhoto: [],
       creativeMaterialType: '1',
       postAdTrue: false,
+      optionsTag: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        id: 'id',
+      },
+      tagName: '',
+      optionsTag: [],
     }
   },
   methods: {
+    getInfo(item) {
+      if (this.tagName == '') {
+        this.$message.error('请输入分类名称')
+        return
+      } else {
+        let params = {}
+        params.tagName = this.tagName
+        //   params.campaignBudget = this.campaignBudget
+        params.tagArray = JSON.stringify(this.getData('creativeTag'))
+        params.userId = this.userInfo().id
+        params.accountId = localStorage.getItem('accountId')
+        postAction('/tag/kuaiShouCreativeTagCollection/add', params).then((res) => {
+          if (res.success) {
+            this.$message.success('添加成功')
+            this.tagName = ''
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+      }
+    },
     getCoverUrl(index, item, bestIndex) {
       nowIndex = index
       bestIndex = bestIndex
@@ -1113,6 +1159,62 @@ export default {
         })
       }
     },
+    showCunTag(type) {
+      this.creativeTagVisible = true
+      var params = {}
+      params.accountId = localStorage.getItem('accountId')
+      params.userId = this.userInfo().id
+      params.pageSize = 1000
+      params.pageNo = 1
+
+      getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
+        if (res.success) {
+          console.log(res.result)
+          this.optionsTag = res.result.records.map((item) => {
+            return {
+              id: item.id,
+              label: item.tagName,
+              children: JSON.parse(item.tagArray).map((item) => {
+                return {
+                  id: item,
+                  label: item,
+                  disabled: true,
+                }
+              }),
+            }
+          })
+        }
+      })
+    },
+    
+    okTag() {
+      var data = this.$refs.tree.getCheckedKeys()
+      if (data.length > 1) {
+        this.$message.error('只能选择一个选项')
+        //  this.$refs.tree.setCheckedKeys([]);
+      } else {
+        var params = {}
+        params.accountId = localStorage.getItem('accountId')
+        params.userId = this.userInfo().id
+        params.pageSize = 1000
+        params.pageNo = 1
+        params.id = data[0]
+
+        getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
+          if (res.success) {
+            console.log(res.result)
+            this.form.setFieldsValue({
+              creativeTag: JSON.parse(res.result.records[0].tagArray).map((item) => {
+                return item
+              }),
+            })
+            this.creativeTagVisible = false
+          }else{
+            this.$message.error('选择出错,请稍后选择或自行手填')
+          }
+        })
+      }
+    },
     showCunTitle(index, bestIndex) {
       nowIndex = index
       bestIndex = bestIndex
@@ -1531,12 +1633,12 @@ export default {
           })
           var params = Object.assign({}, values)
           // var params = {
-            params.dataJson= allJson.concat(dataAd)
-            // ...values,
-            params.creativeCategory = params.creativeCategory?params.creativeCategory.pop():null
-            params.unitId= this.pansKey
-            params.accountId= localStorage.getItem('accountId')
-            params.content= this.content
+          params.dataJson = allJson.concat(dataAd)
+          // ...values,
+          params.creativeCategory = params.creativeCategory ? params.creativeCategory.pop() : null
+          params.unitId = this.pansKey
+          params.accountId = localStorage.getItem('accountId')
+          params.content = this.content
           // }
           postAction('/kuaishou/batch/createCreative', params).then((res) => {
             if (res.success) {

+ 247 - 98
src/views/modules/kuaishouapp/account/stepForm/Step4.vue

@@ -60,8 +60,8 @@
 .sticker-styles .ant-checkbox-wrapper + .ant-checkbox-wrapper {
   margin-left: 0;
 }
-.display-none-selset{
-  display: none!important;
+.display-none-selset {
+  display: none !important;
 }
 </style>
 <style scoped lang="scss">
@@ -195,7 +195,7 @@ li.chouzhen.first:before {
                       <div class="dynamically_add_form_item">
                         <a-form-item label>
                           <a @click="getVideoList('video', index, item, bestIndex)">选择视频</a>
-                          <a @click="uploadVideo(index, bestIndex)" style="margin-left: 10px">上传视频</a>
+                          <!-- <a @click="uploadVideo(index, bestIndex)" style="margin-left: 10px">上传视频</a> -->
                           <br />
                           <!-- <video
                             :src="item.videoList.url"
@@ -254,7 +254,6 @@ li.chouzhen.first:before {
                           >
                           <a
                             @click="showImages(index, bestIndex)"
-                            v-if="item.chouzhenShow"
                             style="margin-left: 10px"
                             :disabled="item.imageList.length >= 4"
                             >推荐封面</a
@@ -400,6 +399,20 @@ li.chouzhen.first:before {
               :token-separators="[',',' ',',']"
             >
             </a-select>
+            <a-popconfirm @confirm="getInfo(record)">
+              <div slot="title">
+                <div>
+                  分类名称:
+                  <a-input placeholder="请输入" v-model="tagName" style="display: inline-block;width: 300px;" />
+                </div>
+              </div>
+              <!-- <a-button slot="okText" type="primary" :disabled="refuseReason == ''">确定</a-button> -->
+              <!-- <a @click="setData(record)">复制</a> -->
+              <a style="margin-right:10px" :disabled="!getData('creativeTag')">收藏</a>
+               <!-- @click="collection('creativeTag')" -->
+            </a-popconfirm>
+
+            <a @click="showCunTitle('creativeTag')">收藏列表</a>
           </a-form-item>
 
           <a-form-item label="行动号召" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -441,6 +454,10 @@ li.chouzhen.first:before {
               ]"
               placeholder="请输入第三方点击监测链接"
             ></a-input>
+              <a v-if="getData('clickUrl')" @click="clickTrackUrlShow = true" style="margin-right: 10px"
+              >收藏监测链接</a
+            >
+            <a @click="getClickTrackUrlList()">监测链接列表</a>
           </a-form-item>
           <!-- , { validator: handleConfirmValue } -->
 
@@ -675,6 +692,19 @@ li.chouzhen.first:before {
         </a-col>
       </a-row>
     </a-modal>
+            <!-- :load="loadOptions"
+        lazy -->
+    <a-modal title="收藏标题" v-model="creativeTagVisible"  :width="1000"  @ok="okTag">
+      <el-tree
+        :data="optionsTag"
+        show-checkbox
+        node-key="id"
+        :props="defaultProps"
+        :check-strictly="true"
+        ref="tree"
+      >
+      </el-tree>
+    </a-modal>
     <a-modal title="收藏标题" v-model="cunTitleVisible"  :width="1000"  @ok="okTitleCun">
       <a-row :gutter="10">
         <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
@@ -689,7 +719,7 @@ li.chouzhen.first:before {
                     <a @click="removeTitleCun(item)">删除</a>
                   </div>
                   <a-checkbox :value="item">
-                  {{ item.captions?item.captions:item.coverSlogans }}
+                  {{ item.captions?item.captions:item.coverSlogans?item.coverSlogans:item.tag }}
                   </a-checkbox>
                 </a-list-item>
 
@@ -779,6 +809,13 @@ export default {
   },
   data() {
     return {
+      optionsTag: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        id: 'id',
+      },
+      tagName: '',
       fieldNames: {
         label: 'category_name',
         value: 'category_id',
@@ -791,9 +828,25 @@ export default {
       stickerStyles: [],
       captionsList: [{ captions: '' }],
       horizontalPhoto: [
-        { videoList: [], imageList: [], creativeMaterialType: '2', imageUrlList: [], checkArrImage: [] },
+        {
+          videoList: [],
+          imageList: [],
+          creativeMaterialType: '2',
+          imageUrlList: [],
+          checkArrImage: [],
+          chouzhenShow: false,
+        },
       ], //横板
-      verticalPhoto: [{ videoList: [], imageList: [], creativeMaterialType: '1', imageUrlList: [], checkArrImage: [] }], //竖版
+      verticalPhoto: [
+        {
+          videoList: [],
+          imageList: [],
+          creativeMaterialType: '1',
+          imageUrlList: [],
+          checkArrImage: [],
+          chouzhenShow: false,
+        },
+      ], //竖版
       trackName: '',
       showImageChouzhen: false,
       showImageStr: null,
@@ -806,6 +859,7 @@ export default {
       showSite: true,
       titleVisible: false,
       cunTitleVisible: false,
+      creativeTagVisible: false,
       cunTitleList: [],
       options: [],
       data: [],
@@ -928,6 +982,58 @@ export default {
     }
   },
   methods: {
+    loadOptions(node, resolve) {
+      // Typically, do the AJAX stuff here.
+      // Once the server has responded,
+      // assign children options to the parent node & call the callback.
+      console.log(node)
+      var data = []
+      var id = node.label
+      if (node.level == 1) {
+        var params = {}
+        params.accountId = localStorage.getItem('accountId')
+        params.userId = this.userInfo().id
+        params.pageSize = 1000
+        params.pageNo = 1
+        params.id = id
+        getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
+          if (res.success) {
+            data = JSON.parse(res.result.records[0].tagArray).map((item) => {
+              return {
+                id: item,
+                label: item,
+                disabled: true,
+              }
+            })
+            resolve(data)
+          }
+        })
+      } else {
+        data = []
+        resolve(data)
+      }
+    },
+    getInfo(item) {
+      if (this.tagName == '') {
+        this.$message.error('请输入分类名称')
+        return
+      } else {
+        let params = {}
+        params.tagName = this.tagName
+        //   params.campaignBudget = this.campaignBudget
+        params.tagArray = JSON.stringify(this.getData('creativeTag'))
+        params.userId = this.userInfo().id
+        params.accountId = localStorage.getItem('accountId')
+        postAction('/tag/kuaiShouCreativeTagCollection/add', params).then((res) => {
+          if (res.success) {
+            this.$message.success('添加成功')
+            this.tagName = ''
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+      }
+    },
     addCaptions(type) {
       if (type == 'captionsList') {
         this.captionsList.push({ captions: '' })
@@ -942,8 +1048,12 @@ export default {
       if (type == 'captionsList') {
         // this.captionsList.push({ captions: '' })
         params.captionsList = this.captionsList
-      } else {
+      } else if (type == 'creativeTag') {
         // this.coverSlogansList.push({ coverSlogans: '' })
+        params.creativeTag = this.getData('creativeTag').map((item) => {
+          return { tag: item }
+        })
+      } else {
         params.coverSlogansList = this.coverSlogansList
       }
       postAction('/kuaishou/collectionSlogans/add', params).then((res) => {
@@ -956,6 +1066,7 @@ export default {
     deleteCaptions(index, type) {
       if (type == 'captionsList') {
         this.captionsList.splice(index, 1)
+      } else if (type == 'creativeTag') {
       } else {
         this.coverSlogansList.splice(index, 1)
       }
@@ -1012,7 +1123,7 @@ export default {
       params.accountId = localStorage.getItem('accountId')
       params.userId = this.userInfo().id
       params.trackName = this.trackUrlName
-      params.trackUrl = this.getData('clickTrackUrl')
+      params.trackUrl = this.getData('clickUrl')
       postAction('/kuaishou/kuaiShouTrackUrlCollection/add', params).then((res) => {
         if (res.success) {
           this.clickTrackUrlShow = false
@@ -1026,7 +1137,7 @@ export default {
     okClickTrackUrl(item) {
       this.clickTrackUrlList = false
       this.form.setFieldsValue({
-        clickTrackUrl: item.trackUrl,
+        clickUrl: item.trackUrl,
       })
     },
     removeClickTrackUrl(item) {
@@ -1085,23 +1196,55 @@ export default {
       }
     },
     showCunTitle(type) {
-      this.cunTitleVisible = true
+      if (type == 'creativeTag') {
+        this.creativeTagVisible = true
+      } else {
+        this.cunTitleVisible = true
+      }
+
       this.getCunTitle(type)
     },
     getCunTitle(typeAdd) {
-      var params = {}
-      params.accountId = localStorage.getItem('accountId')
-      params.userId = this.userInfo().id
-      params.type = typeAdd == 'captionsList' ? 2 : 1
-      // params.pageNo = 1
-      // params.pageSize = 500
-      // /kuaishou/collectionSlogans/getByUserId?userId=12312312321&accountId=12&type=1
-      getAction('/kuaishou/collectionSlogans/getByUserId', params).then((res) => {
-        if (res.success) {
-          console.log(res.result)
-          this.cunTitleList = res.result.value
-        }
-      })
+      if (typeAdd == 'creativeTag') {
+        var params = {}
+        params.accountId = localStorage.getItem('accountId')
+        params.userId = this.userInfo().id
+        params.pageSize = 1000
+        params.pageNo = 1
+
+        getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
+          if (res.success) {
+            console.log(res.result)
+            this.optionsTag = res.result.records.map((item) => {
+              return {
+                id: item.id,
+                label: item.tagName,
+                children: JSON.parse(item.tagArray).map((item) => {
+                  return {
+                    id: item,
+                    label: item,
+                    disabled: true,
+                  }
+                }),
+              }
+            })
+          }
+        })
+      } else {
+        var params = {}
+        params.accountId = localStorage.getItem('accountId')
+        params.userId = this.userInfo().id
+        params.type = typeAdd == 'captionsList' ? 2 : 1
+        // params.pageNo = 1
+        // params.pageSize = 500
+        // /kuaishou/collectionSlogans/getByUserId?userId=12312312321&accountId=12&type=1
+        getAction('/kuaishou/collectionSlogans/getByUserId', params).then((res) => {
+          if (res.success) {
+            console.log(res.result)
+            this.cunTitleList = res.result.value
+          }
+        })
+      }
     },
     removeTitleCun(item) {
       console.log(item)
@@ -1116,6 +1259,16 @@ export default {
         params.captionsList = this.cunTitleList
         params.type = 'delete'
         typeAdd = 'captionsList'
+      } else if (item.tag) {
+        var index = this.cunTitleList.findIndex((v) => v.tag === item.tag)
+        this.cunTitleList.splice(index, 1)
+        var params = {}
+        params.userId = this.userInfo().id
+        params.accountId = localStorage.getItem('accountId')
+
+        params.creativeTag = this.cunTitleList
+        params.type = 'delete'
+        typeAdd = 'creativeTag'
       } else {
         var index = this.cunTitleList.findIndex((v) => v.coverSlogans === item.coverSlogans)
         this.cunTitleList.splice(index, 1)
@@ -1140,6 +1293,7 @@ export default {
         if (res.success) {
           this.$message.success('删除成功')
           this.getCunTitle(typeAdd)
+          this.guanggao = []
         }
       })
       // deleteAction('/kuaishou/kuaiShouTitleCollection/delete', {
@@ -1150,17 +1304,52 @@ export default {
       //   }
       // })
     },
+    okTag() {
+      var data = this.$refs.tree.getCheckedKeys()
+      if (data.length > 1) {
+        this.$message.error('只能选择一个选项')
+        //  this.$refs.tree.setCheckedKeys([]);
+      } else {
+        var params = {}
+        params.accountId = localStorage.getItem('accountId')
+        params.userId = this.userInfo().id
+        params.pageSize = 1000
+        params.pageNo = 1
+        params.id = data[0]
+
+        getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
+          if (res.success) {
+            console.log(res.result)
+            this.form.setFieldsValue({
+              creativeTag: JSON.parse(res.result.records[0].tagArray).map((item) => {
+                return item
+              }),
+            })
+            this.creativeTagVisible = false
+          }else{
+            this.$message.error('选择出错,请稍后选择或自行手填')
+          }
+        })
+      }
+      console.log(data)
+    },
     okTitleCun(item) {
       if (this.guanggao.length > 0) {
         if (this.guanggao[0].captions) {
-          if(this.guanggao.length>3){
+          if (this.guanggao.length > 3) {
             this.$message.error('广告语最多选择3条')
             return
           }
           this.captionsList = []
           this.captionsList.push(...this.guanggao)
+        } else if (this.guanggao[0].tag) {
+          this.form.setFieldsValue({
+            creativeTag: this.guanggao.map((t) => {
+              return t.tag
+            }),
+          })
         } else {
-           if(this.guanggao.length>6){
+          if (this.guanggao.length > 6) {
             this.$message.error('封面广告语最多选择6条')
             return
           }
@@ -1411,13 +1600,6 @@ export default {
         this.active = 0
         this.time = []
         this.channelType = 0
-        //   var params = {}
-        //   params.accountId = localStorage.getItem('accountId')
-        //   params.materialType = this.getData('creativeMaterialType')
-        //   params.pageSize = this.ipagination.pageSize
-        //   params.pageNo = this.ipagination.current
-        //   params.params.channelType = 0 = 0
-        //   this.showVideoList('/kuaishou/batch/getVideoList', params)
       } else {
         this.$refs.check.showCheck(
           this.getData('creativeMaterialType'),
@@ -1480,44 +1662,16 @@ export default {
 
     handleSubmit(e) {
       e.preventDefault()
-      // var index = this.pans.findIndex((item) => item.key === this.pansKey)
-      // var data = this.pans[index].list.map((item) => {
-      //   return item.imageList.length + item.imageUrlList.length
-      // })
-      // if (this.contentAll > 15) {
-      //   this.$message.error('封面最多15张')
-      //   return
-      // }
 
       this.form.validateFields((err, values) => {
         if (!err) {
           this.loading = true
           var index = this.pans.findIndex((item) => item.key === this.pansKey)
-          // var data = this.verticalPhoto.map((item) => {
-          //   if (item.imageList.length > 0) {
-          //     return item.imageList.map((i) => {
-          //       return i.signature
-          //     })
-          //   } else {
-          //     return []
-          //   }
-          // })
-          // var dataTwo = this.horizontalPhoto.map((item) => {
-          //   if (item.imageList.length > 0) {
-          //     return item.imageList.map((i) => {
-          //       return i.signature
-          //     })
-          //   } else {
-          //     return []
-          //   }
-          // })
-          // var dataElse = tqFun(data)
-          // var dataTwoElse = tqFun(dataTwo)
 
           var params = {
             // dataJson: allJson,
             ...values,
-            creativeCategory:values.creativeCategory?values.creativeCategory.pop():null,
+            creativeCategory: values.creativeCategory ? values.creativeCategory.pop() : null,
             unitId: this.pansKey,
             accountId: localStorage.getItem('accountId'),
             content: this.content,
@@ -1525,9 +1679,12 @@ export default {
               return item.captions
             }),
             stickerStyles: this.stickerStylesValue,
-            coverSlogans: this.stickerStylesValue?this.coverSlogansList.map((item) => {
-              return item.coverSlogans
-            }):[],
+            coverSlogans:
+              this.stickerStylesValue.length > 0
+                ? this.coverSlogansList.map((item) => {
+                    return item.coverSlogans
+                  })
+                : [],
             horizontalPhotoIds: this.horizontalPhoto[0].videoList.map((item) => {
               return item.photoId
             }),
@@ -1600,6 +1757,7 @@ export default {
         this.pans[index].imageList.push({
           imageList: [],
           creativeMaterialType: '1',
+          chouzhenShow: false,
         })
       })
     },
@@ -1652,17 +1810,17 @@ export default {
           }
         }
       }
-      if (arr.length + this.pans[bestIndex].list[nowIndex].imageList.length > 4) {
+      if (arr.length + this.pans[bestIndex].imageList[nowIndex].imageList.length > 4) {
         this.$message.error(
           '当前选择封面' +
             arr.length +
             '张,最多可选择' +
-            (4 - this.pans[bestIndex].list[nowIndex].imageList.length) +
+            (4 - this.pans[bestIndex].imageList[nowIndex].imageList.length) +
             '张'
         )
         return
       } else {
-        this.pans[bestIndex].list[nowIndex].imageList.push(...arr)
+        this.pans[bestIndex].imageList[nowIndex].imageList.push(...arr)
         this.chouzhen = false
         this.chouzhenList = []
         this.checkList = []
@@ -1674,15 +1832,16 @@ export default {
       this.chouzhenList = []
       nowIndex = index
       bestIndex = bestIndex
+
       var params = {
-        videoSignature: this.pans[bestIndex].list[index].videoList.signature,
-        pageSize: 20,
-        pageNo: 1,
+        md5Arr: this.pans[bestIndex].list[nowIndex].videoList.map((item) => {
+          return item.signature
+        }),
       }
-      getAction('/cutFrame/material/list', params).then((res) => {
+      postAction('/ctop/kuaishouProgramCreative/getProgramCreativeCover', params).then((res) => {
         console.log(res)
         if (res.success) {
-          this.chouzhenList.push(...res.result.records)
+          this.chouzhenList.push(...res.result)
         }
       })
     },
@@ -1722,18 +1881,18 @@ export default {
       }
       postAction('/kusiShouUpload/image', params).then((res) => {
         if (res.success) {
-          if (res.result.length + this.pans[bestIndex].list[nowIndex].imageList > 4) {
+          if (res.result.length + this.pans[bestIndex].imageList[nowIndex].imageList > 4) {
             this.$message.error(
               '当前上传封面' +
                 res.result.length +
                 '张,最多可上传' +
-                (4 - this.pans[bestIndex].list[nowIndex].imageList.length) +
+                (4 - this.pans[bestIndex].imageList[nowIndex].imageList.length) +
                 '张'
             )
             this.loadingImage = false
             return
           } else {
-            this.pans[bestIndex].list[nowIndex].imageList.push(...res.result)
+            this.pans[bestIndex].imageList[nowIndex].imageList.push(...res.result)
             this.closeImage()
             this.loadingImage = false
           }
@@ -1907,10 +2066,11 @@ export default {
         postAction('/kusiShouUpload/video', params).then((res) => {
           console.log(res)
           if (res.success) {
-            this.pans[bestIndex].list[nowIndex].videoList = {
+            this.pans[bestIndex].list[nowIndex].videoList.push({
               photoId: res.result.photoId,
               url: this.urlList.url,
-            }
+              coverUrl: res.result.coverUrl,
+            })
             this.loadingVideo = false
             this.closeVideo()
           } else {
@@ -1937,25 +2097,15 @@ export default {
       //
 
       this.pans[bestIndex].list[nowIndex].imageList = []
-      this.pans[bestIndex].list[nowIndex].videoList = this.checkVideo
+      if (this.pans[bestIndex].list[nowIndex].videoList.length >= 5) {
+        this.$message.error('最多选择五个视频')
+        return
+      }
+      this.pans[bestIndex].list[nowIndex].videoList = this.pans[bestIndex].list[nowIndex].videoList.concat(
+        this.checkVideo
+      )
       this.ipagination.current = 1
       this.visibleMatemal = false
-      // var params = {
-      //   videoSignature: this.checkVideo[0].signature,
-      //   pageSize: 20,
-      //   pageNo: 1,
-      // }
-      // getAction('/cutFrame/material/list', params).then((res) => {
-      //   console.log(res)
-      //   if (res.success) {
-      //     if (res.result.records.length > 0) {
-      //       this.pans[bestIndex].list[nowIndex].chouzhenShow = true
-      //     } else {
-      //       this.pans[bestIndex].list[nowIndex].chouzhenShow = false
-      //     }
-      //     this.visibleMatemal = false
-      //   }
-      // })
     },
     judge(item) {
       var re = /[(.*?)]/g
@@ -2081,8 +2231,8 @@ export default {
     },
   },
   watch: {
-    cunTitleVisible(n,o){
-      if(!n){
+    cunTitleVisible(n, o) {
+      if (!n) {
         this.guanggao = []
         this.cunTitleList = []
       }
@@ -2184,7 +2334,6 @@ export default {
         }
       })
 
-
       getAction('/kuaishou/batch/getCreativeCategory', {
         accountId: localStorage.getItem('accountId'),
       }).then((res) => {

+ 178 - 0
src/views/modules/material/musicTab.vue

@@ -0,0 +1,178 @@
+<style lang='scss'>
+.only-there .ant-tabs-bar {
+  background: white;
+  padding: 0 24px;
+}
+.ant-card-head .ant-tabs-bar {
+  padding: 0;
+}
+#updateInfo .ant-modal-content,
+#updateInfo .ant-modal-body {
+  width: 500px;
+  position: relative;
+  padding-top: 10px;
+  .updateBOX {
+    height: 600px;
+    overflow: auto;
+  }
+}
+.Updatecontent {
+  padding: 0 20px 40px;
+  position: relative;
+  .Updateitem {
+    margin-bottom: 30px;
+  }
+}
+.Updatetitle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+  color: #1890ff;
+  margin-bottom: 20px;
+  /* margin-top: 20px; */
+}
+.Updatetime {
+  font-size: 16px;
+  font-weight: 700;
+  color: #000;
+  margin-bottom: 15px;
+}
+.updateicon {
+  font-size: 26px;
+  position: relative;
+  top: 4px;
+}
+.updateSpan {
+  margin-left: 10px;
+}
+.textTitle {
+  font-weight: 600;
+  font-size: 1.17em;
+
+  font-family: Helvetica, Arial, '\5b8b\4f53', sans-serif;
+}
+.okBtn {
+  position: absolute;
+  right: 3%;
+  bottom: 3%;
+}
+.updatelist {
+  .circular {
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    color: #999;
+  }
+}
+</style>
+<template>
+  <div class="music-tab" style="background:white;padding:20px">
+    <a-tabs default-active-key="1">
+      <a-tab-pane key="1" tab="网易云">
+        <wyyMusic />
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="抖音">
+          
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+import wyyMusic from './musicMaterial.vue'
+export default {
+  name: 'music-tab',
+  components: {
+   wyyMusic
+  },
+  data() {
+    return {
+      loading: true,
+      center: null,
+      rankList,
+      barData,
+      loginfo: {},
+      visitFields: ['ip', 'visit'],
+      visitInfo: [],
+      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
+      roleCode: localStorage.getItem('roleCode'),
+      visible: false, //更新通知消息提示框
+      updateTime: ['2020-06-10', '2020-06-17', '2020-06-24', '2020-07-01'],
+      versionId: 0, //存储版本号 判断通知什么时候显示
+    }
+  },
+  created() {
+
+  },
+  methods: {
+   
+  },
+  mounted() {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.circle-cust {
+  position: relative;
+  top: 28px;
+  left: -100%;
+}
+
+.extra-wrapper {
+  line-height: 55px;
+  padding-right: 24px;
+
+  .extra-item {
+    display: inline-block;
+    margin-right: 24px;
+
+    a {
+      margin-left: 24px;
+    }
+  }
+}
+
+/* 首页访问量统计 */
+.head-info {
+  position: relative;
+  text-align: left;
+  padding: 0 32px 0 0;
+  min-width: 125px;
+
+  &.center {
+    text-align: center;
+    padding: 0 32px;
+  }
+
+  span {
+    color: rgba(0, 0, 0, 0.45);
+    display: inline-block;
+    font-size: 0.95rem;
+    line-height: 42px;
+    margin-bottom: 4px;
+  }
+
+  p {
+    line-height: 42px;
+    margin: 0;
+
+    a {
+      font-weight: 600;
+      font-size: 1rem;
+    }
+  }
+}
+</style>
+<style lang="less">
+.ant-tabs-bar {
+  margin: 0 0 12px 0;
+  /* height: 55px; */
+  border-bottom: 1px solid #e8e8e8;
+  outline: none;
+  -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+</style>

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 409 - 457
src/views/modules/material/videoMaterial.vue


+ 347 - 11
src/views/modules/workBench/index.vue

@@ -14,7 +14,7 @@
                         <span>华北地区-头条事业部</span>
                     </p>
                 </div>
-                <a-button type='primary' class="mybtn">
+                <a-button type='primary' class="mybtn" @click="sendOrder">
                     <a-icon type="plus" />
                     发起订单
                 </a-button>
@@ -24,18 +24,149 @@
             <div class="sectionBody">
                 <div class="sectionLeftBox">
                     <div class="leftTop">
-
+                        <div class="sectionHead">
+                            我的工作内容
+                        </div>
+                        <div class="zhanshiBox">
+                            <div class="item">
+                                <div class="title">
+                                    <img src="@/assets/work.png" alt="" class="iconImg">
+                                    <span>我发起的</span>
+                                </div>
+                                <div class="itemBody">
+                                    <p class="count">60 <span>个</span></p>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="title">
+                                    <img src="@/assets/work.png" alt="" class="iconImg">
+                                    <span>我发起的</span>
+                                </div>
+                                <div class="itemBody">
+                                    <p class="count">60 <span>个</span></p>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="title">
+                                    <img src="@/assets/work.png" alt="" class="iconImg">
+                                    <span>我发起的</span>
+                                </div>
+                                <div class="itemBody">
+                                    <p class="count">60 <span>个</span></p>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="title">
+                                    <img src="@/assets/work.png" alt="" class="iconImg">
+                                    <span>我发起的</span>
+                                </div>
+                                <div class="itemBody">
+                                    <p class="count">60 <span>个</span></p>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="title">
+                                    <img src="@/assets/work.png" alt="" class="iconImg">
+                                    <span>我发起的</span>
+                                </div>
+                                <div class="itemBody">
+                                    <p class="count">60 <span>个</span></p>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="title">
+                                    <img src="@/assets/work.png" alt="" class="iconImg">
+                                    <span>我发起的</span>
+                                </div>
+                                <div class="itemBody">
+                                    <p class="count" >60 <span>个</span></p>
+                                </div>
+                            </div>
+                        </div>  
                     </div>
                     <div class="leftBottom">
-
+                        <div class="sectionHead">
+                            订单进度
+                             <a-button type="link" class="allOrder" @click="allOrder">全部订单</a-button>
+                        </div>
+                        <div class="orderProgress">
+                            <ul class="orderProgress-list">
+                                <li v-for="(item,index) in orderProgressList" :key="index"  >
+                                    <router-link to="/workBench/orderDetail" style="display:block;width:100%">
+                                    <div style="display:flex;align-items: center;" class="orderProgress-list-item">
+                                        <div style="display:flex;width:80%; align-items: center;" >
+                                            <span class="item-icon"></span>
+                                            <div class="content">
+                                                <p class="name">我是一个任务名称嗷嗷嗷啊</p>
+                                                <p class="desc">这是对这个任务的简介,所以得好好寻…</p>
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="progress">
+                                            <a-progress type="circle" :percent="75" :width='30' :showInfo='false'  :strokeWidth='10' />
+                                            <span style="margin-left:15px">75%</span>
+                                        </div>
+                                    </div>
+                                    </router-link>
+                                </li>
+                            </ul>
+                            <!-- hideOnSinglePage -->
+                            <a-pagination size="small" :total="totalPage" :current='currentPage' class="fenye" :change='pageChange'  show-size-changer show-quick-jumper hideOnSinglePage />
+                        </div>
                     </div>
                 </div>
                 <div class="sectionRightBox">
                     <div class="rightTop">
-
+                        <div class="sectionHead">
+                            操作记录
+                        </div>
+                        <div class="optionRecordList">
+                            <a-timeline>
+                                <a-timeline-item color='#F0F2F5' style="height:30px">
+                                   <p style="margin-bottom:0px">
+                                       Create a services site 2015-09-01
+                                    <span style="float:right">1分钟前</span>
+                                   </p>
+                                </a-timeline-item>
+                                <a-timeline-item color='#F0F2F5' style="height:30px">
+                                   <p style="margin-bottom:0px">
+                                       Create a services site 2015-09-01
+                                    <span style="float:right">1分钟前</span>
+                                   </p>
+                                </a-timeline-item>
+                                <a-timeline-item color='#F0F2F5' style="height:30px">
+                                   <p style="margin-bottom:0px">
+                                       Create a services site 2015-09-01
+                                    <span style="float:right">1分钟前</span>
+                                   </p>
+                                </a-timeline-item>
+                                <a-timeline-item color='#F0F2F5' style="height:30px">
+                                   <p style="margin-bottom:0px">
+                                       Create a services site 2015-09-01
+                                    <span style="float:right">1分钟前</span>
+                                   </p>
+                                </a-timeline-item>
+                                
+                            </a-timeline>
+                        </div>
                     </div>
                     <div class="rightBottom">
-
+                        <div class="sectionHead">
+                            本周项目燃尽图
+                        </div>
+                        <div class="burnDown">
+                             <a-progress type="circle" :percent="75"  :width='150' :strokeWidth='6' />
+                             <div class="tip">
+                                <p class="done">
+                                    <span class="item-icon"></span>
+                                    <span>已完成订单:{{}}个</span>
+                                </p>
+                                <p class="all">
+                                    <span class="item-icon"></span>
+                                    <span>未完成订单:{{}}个</span>
+                                </p>
+                             </div>
+                        </div>
                     </div>
                 </div>
                 
@@ -49,18 +180,58 @@ import moment from 'moment';
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
 
 export default {
-    
+    data() {
+        return {
+            // 订单进度
+            orderProgressList:[
+                {},
+                {},
+                {}
+            ],
+
+            // 操作记录
+            optionRecord:[],
+
+            // 本周项目燃尽图
+            burnDownChart:[],
+
+            // 分页参数
+            totalPage:0,
+            currentPage:1,
+
+        }
+    },
+    methods: {
+        // 分页页码改变
+        pageChange(page, pageSize){
+
+        },
+        // 全部订单
+        allOrder() {
+            
+        },
+        // 发起订单
+        sendOrder(){
+            this.$router.push('/workBench/placeOrder')
+        },
+    },
 }
 </script>
 
 <style lang="scss" scoped>
 .workBench{
+    ul,li{
+        margin: 0;
+        padding: 0;
+    }
     width: 100%;
     .topBody{
         width: 100%;
         height: 146px;
         background: #FFFFFF;
         margin-bottom: 24px;
+        padding: 20px;
+        box-sizing: border-box;
         .breadcrumb{
             width: 42px;
             height: 22px;
@@ -73,7 +244,7 @@ export default {
         .bottom{
             display: flex;
             position: relative;
-            padding: 20px;
+            // padding: 20px;
             .touxiang{
                 width: 72px;
                 height: 72px;
@@ -100,8 +271,8 @@ export default {
             }
             .mybtn{
                 position: absolute;
-                top: 50%;
-                margin-left: -18px;
+                // top: 50%;
+                // margin-left: -18px;
                 right: 0;
             }
         }
@@ -110,19 +281,184 @@ export default {
     .section{
         .sectionBody{
             display: flex;
+            .sectionHead{
+                padding: 15px 20px;
+                // height: 24px;
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.85);
+                line-height: 24px;
+                border-bottom: 1px solid  #E9E9E9;;
+                .allOrder{
+                    float: right;
+                }
+            }
             .sectionLeftBox{
-                width: 60%;
+                width: 70%;
+               
                 .leftTop{
                     height: 370px;
+                    background: white;
+                }
+                .zhanshiBox{
+                    display: flex;
+                    flex-wrap: wrap;
+                    .item{
+                        width: 33.33%;
+                        // background: brown;
+                        padding: 20px ;
+                        border-right: 1px solid #E9E9E9;
+                        border-bottom: 1px solid #E9E9E9;
+                        .title{
+                            padding-bottom: 34px;
+                            .iconImg{
+                                width: 24px;
+                                margin-right: 8px;
+                            }
+                        }
+                        .itemBody{
+                            text-align: center;
+                            .count{
+                                
+                                font-size: 24px;
+                                font-family: PingFangSC-Medium, PingFang SC;
+                                font-weight: 500;
+                                color: #000000;
+                                line-height: 32px;
+                                cursor: pointer;
+                                span{
+                                    font-size: 16px;
+                                    cursor: pointer;
+                                }
+                            }
+                            .count:hover{                                
+                                color: #1890FF;
+                            }
+                        }
+                    }
+                    .item:nth-child(3n){
+                        border-right: 0;
+                    }
+                }
+                .leftBottom{
+                    margin-top: 20px;
+                    background: white;
+                    .orderProgress{
+                        padding: 0 20px;
+                        .orderProgress-list-item{
+                            padding: 10px 0;
+                            display: flex;
+                            align-items: center;
+                            border-bottom: 1px solid  #E9E9E9;;
+                            justify-content:space-between;
+                            cursor: pointer;
+                            .item-icon{
+                                width: 8px;
+                                height: 8px;
+                                background: #3BA0FF;
+                                margin-right: 15px;
+                                display: inline-block;
+                                border-radius: 50%;
+                            }
+                            .content{
+                                width: 70%;
+                                overflow: hidden;
+                                font-size: 14px;
+                                font-family: PingFangSC-Regular, PingFang SC;
+                                font-weight: 400;
+                                .name{
+                                    height: 22px;                                    
+                                    color: rgba(0, 0, 0, 0.65);
+                                    line-height: 22px;
+                                    text-overflow: ellipsis;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    margin-bottom: 0px;
+                                }
+                                .desc{
+                                    height: 22px;
+                                    color: rgba(0, 0, 0, 0.25);
+                                    line-height: 22px;
+                                    text-overflow: ellipsis;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                     margin-bottom: 0px;
+                                }
+                            }
+                            .progress{
+                                float: right;
+                            }
+                        }
+                        .fenye{
+                            padding: 20px 0;
+                            text-align: right;
+                        }
+                    }
                 }
             }
             .sectionRightBox{
-                width: 40%;
+                width: 29%;
+                // background: white;
+                margin-left: 20px;
                 .rightTop{
                     height: 370px;
+                     background: white;
+                     .optionRecordList{
+                         padding: 20px;
+                     }
+                }
+                .rightBottom{
+                    margin-top: 20px;
+                     background: white;
+                    .burnDown{
+                         padding: 30px 20px;
+                         text-align: center;
+                         .tip{
+                            margin-top: 40px;
+                            display: flex;
+                            justify-content: space-around;
+                             
+                            height: 22px;
+                            font-size: 14px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: rgba(0, 0, 0, 0.65);
+                            line-height: 22px;
+                             .done{
+                                .item-icon{
+                                     width: 8px;
+                                    height: 8px;
+                                    background: #3BA0FF;
+                                    margin-right: 15px;
+                                    display: inline-block;
+                                    border-radius: 50%;
+                                }
+                             }
+                             .all{
+                                .item-icon{
+                                    width: 8px;
+                                    height: 8px;
+                                    background: #F0F2F5;
+                                    margin-right: 15px;
+                                    display: inline-block;
+                                    border-radius: 50%;
+                                } 
+                             }
+                         }
+                    }
+
                 }
             }
         }
     }
 }
+</style>
+
+<style lang="less">
+    .workBench{
+        .ant-timeline-item-head{
+            background: rgb(240,242,245);
+        }
+    }
 </style>

+ 796 - 0
src/views/modules/workBench/orderDetail.vue

@@ -0,0 +1,796 @@
+
+<style lang="scss" scoped>
+.orderDetail{
+    ul,li{
+        margin: 0;
+        padding: 0;
+    }
+   
+    width: 100%;
+    .topBody{
+        width: 100%;
+        background: #FFFFFF;
+        margin-bottom: 24px;
+        padding: 20px;
+        box-sizing: border-box;
+        .breadcrumb{
+            height: 22px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            line-height: 22px;
+        }
+        .bottom{
+            display: flex;
+            position: relative;
+            justify-content: space-between;
+            // padding: 20px;
+            .orderIcon{
+                width: 28px;
+                height: 28px;
+                margin-right: 15px;
+                img{
+                    width: 100%;
+                }
+            }
+            .tip{
+                .greet{
+                    width: 300px;
+                    height: 28px;
+                    font-size: 20px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.85);
+                    line-height: 28px;
+                    margin-bottom: 5px;
+                }
+                .descPosition{
+                    
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: rgba(0, 0, 0, 0.45);
+                    overflow: hidden;
+                    margin-bottom: 0;
+                    li{
+                        height: 22px;
+                        line-height: 22px;
+                        margin-top:3px ;
+                    }
+                    span{
+                        width: 250px;
+                        display: inline-block;
+                    }
+                }
+
+            }
+            .optBody{
+                width: 200px;
+                flex-shrink:0;
+                // justify-content: flex-end;
+                text-align: right;
+                .btnBody{
+                    margin-bottom: 10px;
+                }
+                .orderInfo{
+                    display: flex;
+                    justify-content: space-between;
+                    text-align: right;
+                    p{
+                        margin-bottom: 0;
+                    }
+                    
+                    .markName{                        
+                        height: 22px;
+                        font-size: 14px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: rgba(0, 0, 0, 0.45);
+                        line-height: 22px;
+                    }
+                    .big{                                               
+                        height: 28px;
+                        font-size: 20px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: rgba(0, 0, 0, 0.85);
+                        line-height: 28px;
+                    }
+                }
+
+            }
+        }
+
+    }
+    .section{
+        .sectionBody{
+            
+            p{
+                margin-bottom: 0;
+            }
+            .section-item{
+                background: white;
+                margin-bottom: 20px;
+            }
+            .tabBox{
+                padding: 15px 20px 0;
+            }
+            .sectionHead{
+                padding: 15px 20px;
+                // height: 24px;
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.85);
+                line-height: 24px;
+                border-bottom: 1px solid  #E9E9E9;;
+                .allOrder{
+                    float: right;
+                }
+            }
+            .section-box{
+                padding: 20px 20px;
+                .description{
+                    margin-top: 10px;
+                    .time{
+                        height: 32px;
+                        line-height: 32px;
+                    }
+                }
+                ul{
+                    display: flex;
+                    flex-wrap: wrap;
+                    // justify-content: space-around;
+                }
+                li{
+                    
+                    width: 30%;
+                    height: 22px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: rgba(0, 0, 0, 0.85);
+                    line-height: 22px;
+                    text-align: left;
+                    margin-bottom: 15px;
+                }
+                .top{
+                    margin-bottom: 25px;
+                }
+                .bottom{
+                    h4{
+                        
+                        font-size: 15px;
+                        font-family: PingFangSC-Medium, PingFang SC;
+                        font-weight: 600;
+                        color: rgba(0, 0, 0, 0.85);
+                        margin-bottom: 25px;
+                    }
+                }
+                .shenhe{
+                    width: 6px;
+                    height: 6px;
+                    display: inline-block;
+                    background: #52C41A;
+                    border-radius: 50%;
+                    position: relative;
+                    top: -2px;
+
+                }
+                .wancheng{
+                    width: 6px;
+                    height: 6px;
+                     display: inline-block;
+                    background: #1890FF;
+                    border-radius: 50%;
+                    // margin-right: 3px;
+                    position: relative;
+                    top: -2px;
+                }
+                .bohui{
+                    width: 6px;
+                    height: 6px;
+                    display: inline-block;
+                    background: #F5222D;
+                    border-radius: 50%;
+                    position: relative;
+                    top: -2px;
+                }
+            }
+            
+        }
+    }
+}
+.videoBox{
+    width: 320px;
+    height: 180px;
+}
+.imgBox{
+    width: 100%;
+    height: 180px;
+}
+.marterialInfo{
+    
+    p{margin-bottom: 0;}
+    ul,li{
+        margin: 0;
+        padding: 0;
+    }
+    .info-item{
+        margin-bottom: 20px;
+        display: flex;
+        // justify-content: center;
+        align-items: center;
+        span{
+            display: inline-block;
+            width: 70px;
+            text-align: left;
+        }
+        .ant-tag{
+            width: auto;
+            min-width: 50px;
+            text-align: center;
+        }
+    }
+    .info{
+        ul{
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+        }
+        li{
+            width: 33.3%;
+            margin-bottom: 20px;
+        }
+        margin-bottom: 0;
+    }
+    .bottom-btn{
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        bottom: 20px;
+        left: 0;
+
+    }
+}
+</style>
+
+<style lang="less">
+    .orderDetail{
+        .ant-timeline-item-head{
+            background: rgb(240,242,245);
+        }
+    }
+</style>
+<template>
+    <div class="orderDetail ">
+        <div class="topBody">
+            <p class="breadcrumb">
+                <a-breadcrumb style="display:block;width:100%">
+                    <a-breadcrumb-item><router-link to="/workBench">工作台</router-link></a-breadcrumb-item>
+                    <a-breadcrumb-item>订单详情</a-breadcrumb-item>
+                </a-breadcrumb>
+            </p>
+            <div class="bottom">
+                <div class="left" style="display:flex;width:70%">
+                     <div class="orderIcon">
+                        <img src="@/assets/orderIcon.png" alt="">
+                    </div>  
+                    <div class='tip'>
+                        <p class="greet">订单标题</p>
+                        <p class="descPosition">
+                        <ul>
+                            <li>
+                                <span>订单发起人:{{}}</span>
+                                <span>关联项目:{{}}</span>
+                            </li>
+                            <li>
+                                <span>创建时间:{{}}</span>
+                                <span>设计负责人:{{}}</span>
+                            </li>
+                            <li>
+                                <span>订单周期:{{}}</span>
+                            </li>
+                        </ul>
+                        </p>
+                    </div>
+                </div>
+               
+                <div class="optBody">
+                    <div class="btnBody">
+                        <a-button type='default' style="margin-right:15px" @click="withdrawOrder">撤回订单</a-button>
+                        <a-dropdown>
+                            <a-menu slot="overlay" @click="handleMenuClick">
+                                <a-menu-item key="1">1</a-menu-item>
+                                <a-menu-item key="2">2</a-menu-item>
+                                <a-menu-item key="3">3</a-menu-item>
+                            </a-menu>
+                            <a-button> 更多 <a-icon type="down" /> </a-button>
+                        </a-dropdown>
+                    </div>
+                    <div class="orderInfo">
+                        <div>
+                            <p class="markName">状态</p>
+                            <p class="big">{{ orderInfo.status || '待确定'}}</p>
+                        </div>
+                        <div>
+                            <p class="markName">订单进度</p>
+                            <p class="big">{{orderInfo.progress|| 0 }}%</p>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+        <div class="section">
+            <div class="sectionBody">
+                <!-- 订单进度 -->
+                <div class="section-item">
+                    <div class="sectionHead">订单进度</div>
+                    <div class="section-box">
+                        <a-steps progress-dot :current="currentStep">
+                            <a-step title="创建订单"  >
+                                <div class="description" slot="description" v-if="currentStep>=0">
+                                    <p class="people">吴永前</p>
+                                    <p class="time">2020-10-16 12:20</p>
+                                </div>
+                                
+                            </a-step>
+                            <a-step title="设计组长接单"  >
+                                <div class="description" slot="description" v-if="currentStep>=1">
+                                    <p class="people">王垒</p>
+                                    <p class="time" v-if="currentStep==1">
+                                        <a-button type='link' @click="hurryUp">催一下</a-button>
+                                    </p>
+                                    <p class="time" v-else>2020-10-16 12:20</p>
+                                </div>
+                                
+                            </a-step>
+                            <a-step title="素材制作"  >
+                                <div class="description" slot="description" v-if="currentStep>=2">
+                                    <p class="people">王垒</p>
+                                    <p class="time" v-if="currentStep==2">
+                                        <a-button type='link'  @click="hurryUp">催一下</a-button>
+                                    </p>
+                                    <p class="time" v-else>2020-10-16 12:20</p>
+                                </div>
+                                
+                            </a-step>
+                            <a-step title="订单完成"  >
+                                <div class="description" slot="description" v-if="currentStep>=3">
+                                    <p class="people">吴永前</p>
+                                    <p class="time" v-if="currentStep==3">
+                                        <a-button type='link'  @click="checkAccept">待验收</a-button>
+                                    </p>
+                                    <p class="time" v-else>2020-10-16 12:20</p>
+                                </div>
+                                
+                            </a-step>
+                           
+                        </a-steps>
+                    </div>
+                </div>
+                <!-- 订单详情 -->
+                <div class="section-item">
+                    <div class="sectionHead">订单详情</div>
+                    <div class="section-box">
+                        <div class="top">
+                            <ul>
+                                <li>
+                                    订单发起人:<span>吴永前</span>
+                                </li>
+                                <li>
+                                    订单所含素材总数:<span>20</span>
+                                </li>
+                                <li>
+                                    订单状态:<span>设计中</span>
+                                </li>
+                                <li>
+                                    订单所属项目:<span>北京聚划算</span>
+                                </li>
+                                <li>
+                                    要求日更素材:<span>4</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="bottom">
+                            <h4>素材负责人</h4>
+                            <ul>
+                                <li> 设计组长:<span>毕洁泉</span></li>
+                                <li> 摄像:<span>王垒</span></li>
+                                <li> </li>
+                                <li> 编导:<span>毕洁泉</span></li>
+                                <li> 剪辑:<span>毕洁泉</span></li>
+                                <li> </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </div>
+                <!-- 素材列表 -->
+                <div class="section-item">
+                    <div class="tabBox">
+                        <a-tabs v-model="tabKey" @change="tabChange">
+                            <a-tab-pane :key='1' tab="素材"></a-tab-pane>
+                            <a-tab-pane :key='2' tab="脚本"></a-tab-pane>
+                            <a-button type='primary' slot="tabBarExtraContent">上传素材</a-button>
+                        </a-tabs>
+                    </div>
+                        
+                    
+                    <div class="section-box">
+                         <a-table
+                            size="middle"
+                            :columns="columns"
+                            :dataSource="data"
+                            bordered
+                            id="outTable"
+                            :pagination="ipagination"
+                            :loading="loading"
+                            @change="sort"
+                            style="word-break: break-all;"
+                            >
+                            <div slot="status" slot-scope="text" >
+                                <!-- <a-spin :spinning="record.spin" size="small" >
+                                    <div class="spin-content">
+                                        <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
+                                    </div>
+                                </a-spin>
+                                <a-switch size="default" :checked=text  @change="switchChange(text,record)"/> -->
+                               
+                                <span class="shenhe" v-if="text=='待审核'"> </span>
+                                <span class="wancheng" v-else-if="text=='已完成'"> </span>
+                                <span class="bohui" v-else> </span>
+                                {{text}}
+                            </div>
+                            <span slot="options" slot-scope="text,record">
+
+                                <a href="javascript:;" @click="viewDetails(record)">详情</a>
+                                <a-divider type="vertical" />
+                                <a href="javascript:;" @click="hurryUp(record)">催一下</a>
+                                <a-divider type="vertical" />
+                                <a href="javascript:;" @click="viewDetails(record)">通过</a>
+                                <a-divider type="vertical" />
+                                <a href="javascript:;" @click="viewDetails(record)">驳回</a>
+                                <a-divider type="vertical" />
+
+                                <!-- <a-divider type="vertical" />
+                                <a href="javascript:;" @click="recordsRule(record)">计划分析</a>
+                                <a-divider type="vertical" />
+                                <a-popconfirm
+                                    title="确定删除该规则吗?"
+                                    @confirm="deleteRule(record)"                            
+                                >
+                                    <a href="javascript:;" >删除</a>
+                                </a-popconfirm> -->                                
+                            </span>
+
+                        </a-table>
+                    </div>
+                    <a-drawer
+                    title="素材详情"
+                    width="640"
+                    :placement="placement"
+                    :closable="false"
+                    :visible="visible"
+                    @close="onClose"
+                    >
+                        <div class="videoBody">
+                            <div class="videoBox">
+                                <video :src="currentMaterial.src" ></video>
+                            </div>
+                            
+                            <div class="imgBox">
+                                <img src="" alt="">
+                                <img src="" alt="">
+                            </div>
+                        </div>
+                        <div class="marterialInfo">
+                            <div class="info-item">
+                                <span>素材状态:</span>
+                                <p>未审核</p>
+                            </div>
+                            <div class="info-item">
+                                <span>生成水印:</span>
+                                <a-select :defaultValue="4" v-model="size" style="width:70%;">
+                                    <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
+                                        item.name
+                                    }}</a-select-option>
+                                </a-select>
+                                <a-button type="primary" @click="getWater">生成</a-button>
+                            </div>
+                            <div class="info-item">
+                                <span>视频标签:</span>
+                                <a-tag>Tag 1</a-tag>
+                                <a-tag>Tag 1</a-tag>
+                            </div>
+                            <div class="info-item info">
+                                <ul>
+                                    <li><span>视频时长:</span> 17秒 </li>
+                                    <li><span>视频尺寸:</span> 1080*1920 </li>
+                                    <li><span>视频大小:</span> 31.42M </li>
+                                    <li><span>策划:</span> 吴永前 </li>
+                                    <li><span>拍摄:</span> 吴永前 </li>
+                                    <li><span>剪辑:</span> 吴永前 </li>                                    
+                                </ul>
+                            </div>
+                            <div class="info-item">
+                                <span>广告语:</span>
+                                <p>14354534324454354水电费水电费方式手动</p>
+                            </div>
+                            <div class="bottom-btn">
+                                <a-button type='primary' @click="approved" style="margin-right:20px">通过审核</a-button>
+                                <a-button type='default' @click="reject">驳回</a-button>
+                            </div>
+                        </div>
+                    </a-drawer>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+
+let materialColumns=[
+    {
+        title: '素材名称',
+        dataIndex: 'name',
+        align: 'center',        
+        key: 'name',
+        scopedSlots: { customRender: 'name' }
+    },
+    {
+        title: '素材类型',
+        dataIndex: 'type',
+        align: 'center',        
+        key: 'type',
+        scopedSlots: { customRender: 'type' }
+    },
+    {
+        title: '素材状态',
+        dataIndex: 'status',
+        align: 'center',        
+        key: 'status',
+        scopedSlots: { customRender: 'status' }
+    },
+    {
+        title: '完结时间',
+        dataIndex: 'time',
+        align: 'center',        
+        key: 'time',
+        scopedSlots: { customRender: 'time' }
+    },
+    {
+        title: '备注',
+        dataIndex: 'remarks',
+        align: 'center',        
+        key: 'remarks',
+        scopedSlots: { customRender: 'remarks' }
+    },
+    {
+        title: '操作',
+        dataIndex: 'options',
+        align: 'center',        
+        key: 'options',
+        scopedSlots: { customRender: 'options' }
+    },
+]
+let scriptColumns=[
+    {
+        title: '素材名称',
+        dataIndex: 'name',
+        align: 'center',        
+        key: 'name',
+        scopedSlots: { customRender: 'name' }
+    },
+    {
+        title: '素材标签',
+        dataIndex: 'tag',
+        align: 'center',        
+        key: 'tag',
+        scopedSlots: { customRender: 'tag' }
+    },
+    {
+        title: '素材状态',
+        dataIndex: 'status',
+        align: 'center',        
+        key: 'status',
+        scopedSlots: { customRender: 'status' }
+    },
+    {
+        title: '完结时间',
+        dataIndex: 'time',
+        align: 'center',        
+        key: 'time',
+        scopedSlots: { customRender: 'time' }
+    },
+    {
+        title: '备注',
+        dataIndex: 'remarks',
+        align: 'center',        
+        key: 'remarks',
+        scopedSlots: { customRender: 'remarks' }
+    },
+    {
+        title: '操作',
+        dataIndex: 'options',
+        align: 'center',        
+        key: 'options',
+        scopedSlots: { customRender: 'options' }
+    },
+]
+
+let marterialData=[
+    {
+        name:'1111',
+        type:'真人',
+        status:'待审核',
+        time:'2020-10-20 19:23:12',
+        id:0,
+        remarks:'xx'
+    },
+    {
+        name:'2211',
+        type:'vlog',
+        status:'已完成',
+        time:'2020-10-20 19:23:12',
+        id:1
+    },
+    {
+        name:'3331',
+        type:'真人',
+        status:'已驳回',
+        time:'2020-10-20 19:23:12',
+        id:2
+    },
+    {
+        name:'4444',
+        type:'真人',
+        status:'待审核',
+        time:'2020-10-20 19:23:12',
+        id:3
+    },
+]
+export default {
+    data() {
+        return {
+            tabKey:1,
+
+            columns:[...materialColumns],
+            data:[...marterialData],
+            loading:false,
+            ipagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + "-" + range[1] + " 共" + total + "条"
+                },
+                showQuickJumper: true,
+                showSizeChanger:true,
+                pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.ipagination.current = current;
+                    this.ipagination.pageSize= pageSize;
+                }
+            },
+            // 订单进度
+            orderInfo:{
+                status:undefined,
+                progress:0,
+            },
+            currentStep:1,
+
+            visible: false,
+            placement: 'right',
+            currentMaterial:{},
+
+
+            sizeType:[],
+            size: "4",
+        }
+    },
+    methods: {
+        // 查看详情
+        viewDetails(record){
+            console.log(record)
+            this.visible = true;
+        },
+        
+        onClose() {
+            this.visible = false;
+        },
+        // 撤回订单
+        withdrawOrder(){
+
+        },
+        // 更多操作
+        handleMenuClick(e) {
+            console.log('click', e);
+        },
+
+        // 催一下
+        hurryUp(){
+
+        },
+
+        // 验收
+        checkAccept(){
+
+        },
+
+        // 上传素材
+        uploadMaterial(){
+
+        },
+
+        sort(pagination, filters, sorter, { currentDataSource }){
+        
+            this.ipagination.current=pagination.current;
+
+            this.ipagination.pageSize=pagination.pageSize;
+            this.materialHttp()
+        },
+        // 请求素材
+        materialHttp(){
+            // this.loading=true;           
+            this.data=[];
+        },
+
+        
+
+        // tabqiehuan
+        tabChange(key){
+            console.log(key);
+            if(key==1){
+                this.columns=[...materialColumns]
+            }else{
+                this.columns=[...scriptColumns]
+            }
+        },
+
+        // 素材通过审核
+        approved(){
+
+        },
+        // 素材驳回
+        reject(){
+
+        },
+        // 生成水印
+        getWater() {
+        var params = qs.stringify({
+          id: this.id,
+          watermarkTemplateId: this.size
+        })
+        postAction('/ctop/materialInfo/watermark', params).then(res => {
+          if (res.success) {
+            // getAction("/ctop/videoWatermarkTask/list").then(res=>{
+            //     console.log(res)
+            // })
+            this.$message.success('水印素材生成中,请一分钟后刷新')
+            this.visibleDetail = false
+            this.refuseFile = []
+            this.refuseReason = ''
+            closeAllVideoFun()
+            this.loadData()
+          }
+        })
+      },
+    },
+    created(){
+        getAction('/ctop/videoWatermarkTemplate/list').then(res => {
+            if (res.success) {
+            this.sizeType = res.result.records
+            }
+        })
+    }
+}
+</script>

+ 512 - 0
src/views/modules/workBench/placeOrder.vue

@@ -0,0 +1,512 @@
+<style lang="scss" scoped>
+.placeOrder{
+    ul,li{
+        margin: 0;
+        padding: 0;
+    }
+    width: 100%;
+    .topBody{
+        width: 100%;
+        height: 146px;
+        background: #FFFFFF;
+        margin-bottom: 24px;
+        padding: 20px;
+        box-sizing: border-box;
+         .breadcrumb{
+            height: 22px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            line-height: 22px;
+        }
+        .bottom{
+            display: flex;
+            position: relative;
+            // padding: 20px;
+            .touxiang{
+                width: 72px;
+                height: 72px;
+            }
+            .tip{
+                .greet{
+                    width: 300px;
+                    height: 28px;
+                    font-size: 20px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.85);
+                    line-height: 28px;
+                }
+                .descPosition{
+                    height: 22px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: rgba(0, 0, 0, 0.45);
+                    line-height: 22px;
+                }
+
+            }
+            .mybtn{
+                position: absolute;
+                // top: 50%;
+                // margin-left: -18px;
+                right: 0;
+            }
+        }
+
+    }
+    .section{
+        .sectionBody{
+            // background: white;
+            margin-top: 20px;
+            ul,
+            li {
+                margin: 0;
+                padding: 0;
+            }
+            .moduler {
+                background: #fff;
+                margin-bottom: 16px;
+                position: relative;
+                padding: 32px 24px 48px 32px;
+                border-radius: 4px;
+                box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
+                .moduler-title {
+                    display: flex;
+                    align-items: center;
+                    font-size: 22px;
+                    margin-bottom: 20px;
+                }
+                .row-item {
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    margin-bottom: 32px;
+                }
+                .row-item:last-of-type {
+                    margin-bottom: 0;
+                }
+                .row-item .hint-item {
+                    width: 24px;
+                    min-width: 24px;
+                    align-self: flex-start;
+                    line-height: 20px;
+                    height: 20px;
+                    margin-top: 9px;
+                }
+                .row-item .label-item {
+                    position: relative;
+                    align-items: flex-start;
+                    align-self: flex-start;
+                    line-height: 20px;
+                    height: 20px;
+                    margin-top: 10px;
+                    width: 80px;
+                    min-width: 80px;
+                    .text-item {
+                        font-size: 14px;
+                        width: 60px;
+                    }
+                }
+                .row-item .required-item {
+                    width: 4px;
+                    height: 4px;
+                    border-radius: 2px;
+                    background: #f45858;
+                    position: absolute;
+                    right: 10px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+                .row-item .input-item {
+                    min-width: 480px;
+                    position: relative;
+                    // height: 35px;
+                    .tip {
+                        font-size: 12px;
+                        color: tomato;
+                    }
+                }
+                .adName{
+                    display: flex;
+                    .nameList{
+                        width: 90%;
+                    }
+                    .item{
+                        display: inline-block;
+                        width: 30%;
+                        margin-left: 15px;
+                        margin-bottom: 10px;
+                    }
+                }
+                .opt {
+                    text-align: right;
+                }
+            }
+        }
+    }
+}
+</style>
+
+<style lang="less">
+    .placeOrder{
+        .ant-timeline-item-head{
+            background: rgb(240,242,245);
+        }
+        .ant-form-item {          
+            margin-bottom: 0px; 
+        }
+    }
+</style>
+<template>
+    <div class="placeOrder">
+        <div class="topBody">
+             <p class="breadcrumb">
+                <a-breadcrumb style="display:block;width:100%">
+                    <a-breadcrumb-item><router-link to="/workBench">工作台</router-link></a-breadcrumb-item>
+                    <a-breadcrumb-item>素材下单</a-breadcrumb-item>
+                </a-breadcrumb>
+            </p>
+            <div class="bottom">
+                <div class='tip'>
+                    <p class="greet">素材下单</p>
+                    <p class="descPosition">
+                       <span>在此下单给设计组长,下单前请与设计组长沟通日均产出素材量。</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="section">
+            <div class="sectionBody">
+                <a-form-model
+                ref="ruleForm"
+                :model="form"
+                :rules="rules"
+                >
+                <div class="moduler">
+                    <!-- 名称 -->
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">订单标题</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                             <a-form-model-item ref="name"  prop="name">
+                               <a-input
+                                    v-model="form.name"
+                                    @blur="
+                                    () => {
+                                        $refs.name.onFieldBlur();
+                                    }
+                                    "
+                                />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">设计组长</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                             <a-form-model-item ref="designLeader"  prop="designLeader">
+                               <a-select  style="width: 300px" v-model="form.designLeader" mode="multiple" placeholder="请选择设计组长">
+                                    <a-select-option v-for="item in designLeaderList" :key="item.id" :value='item.value'>
+                                        {{item.title}}
+                                    </a-select-option>
+                                </a-select>
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">关联项目</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                             <a-form-model-item ref="designLeader"  prop="designLeader">
+                               <a-select  style="width: 300px" v-model="form.associatedProject" mode="multiple" placeholder="请选择设计组长">
+                                    <a-select-option v-for="item in associatedProjectList" :key="item.id" :value='item.value'>
+                                        {{item.title}}
+                                    </a-select-option>
+                                </a-select>
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">投放系统</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="deliverySystem"  prop="deliverySystem">
+                                <a-radio-group v-model="form.deliverySystem" @change="deliverySystemChange">
+                                     <a-radio-button value="NONE">不限</a-radio-button>
+                                    <a-radio-button value="IOS">IOS</a-radio-button>
+                                    <a-radio-button value="ANDROID">安卓</a-radio-button> 
+                                </a-radio-group>
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" v-if="form.deliverySystem=='ANDROID'">
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">APK链接</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="APKLink"  prop="APKLink">
+                                <a-input
+                                    v-model="form.APKLink"
+                                    @blur="
+                                    () => {
+                                        $refs.APKLink.onFieldBlur();
+                                    }
+                                    "
+                                />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">订单周期</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="APKLink"  prop="APKLink">
+                                <a-range-picker v-model="form.dataValue" />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">素材总量</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="totalMaterial"  prop="totalMaterial">
+                                <a-input-number :min="1" :max="500"  @change="totalMaterialChange" v-model="form.totalMaterial" />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">日均产量</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="averageDayMaterial"  prop="averageDayMaterial">
+                                <a-input-number :min="1" :max="500"  @change="averageDayMaterialChange" v-model="form.averageDayMaterial" />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">素材类型</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="materialType"  prop="materialType">
+                                <a-radio-group v-model="form.materialType" @change="materialTypeChange">
+                                    <a-radio-button value="NONE">不限</a-radio-button>
+                                    <a-radio-button value="REALPEOPLE">真人</a-radio-button>
+                                    <a-radio-button value="CLIP">剪辑</a-radio-button>
+                                    <a-radio-button value="COMBINATION">组合</a-radio-button>
+                                                                      
+                                </a-radio-group>
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" v-if="form.materialType=='COMBINATION'">
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">真人数量</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="realPeoleNum"  prop="realPeoleNum">
+                                 <a-input-number :min="1" :max="500"  @change="averageDayMaterialChange" v-model="form.realPeoleNum" />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" v-if="form.materialType=='COMBINATION'">
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">剪辑数量</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="clipNum"  prop="clipNum">
+                                 <a-input-number :min="1" :max="500"  @change="averageDayMaterialChange" v-model="form.clipNum" />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">订单备注</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="orderNote"  prop="orderNote">
+                                <a-textarea
+                                    v-model="form.orderNote"
+                                    placeholder="请输入订单备注"
+                                    :auto-size="{ minRows: 3,  }"
+                                />
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                    <div class="row-item" >
+                        <div class="hint-item"></div>
+                        <div class="label-item">
+                            <div class="text-item">附件</div>
+                            <div class="required-item"></div>
+                        </div>
+                        <div class="input-item"> 
+                            <a-form-model-item ref="orderNote"  prop="orderNote">
+                                <a-upload
+                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                                    :default-file-list="defaultFileList"
+                                >
+                                    <a-button> <a-icon type="upload" /> 上传附件 </a-button>
+                                </a-upload>
+                            </a-form-model-item>
+                        </div>
+                    </div>
+                </div>
+                <div class="moduler">
+                    <!-- <div class="moduler-title">计划名称</div> -->
+                    <div class="opt">
+                        <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
+                        <a-button type="primary"  style="margin-right:15px" @click="saveHandler" :loading="saveLoading">保存</a-button>
+                    </div>
+                </div>   
+                </a-form-model>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+
+export default {
+    data() {
+        return {
+            defaultFileList:[],
+            saveLoading:false,
+            form: {
+                name: '',               
+                designLeader:undefined,
+                associatedProject:undefined,
+                deliverySystem:'NONE',
+                APKLink:'',
+                dataValue:[],
+                totalMaterial:undefined,
+                averageDayMaterial:undefined,
+                materialType:'NONE',
+                realPeoleNum:undefined,
+                clipNum:undefined,
+                orderNote:'',
+
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请填写规则的具体名称', trigger: 'blur' },
+                    { min: 2, message: '长度不得小于2', trigger: 'blur' },
+                ],
+                APKLink: [
+                    { required: true, message: '请输入APK链接', trigger: 'blur' },
+                    { min: 2, message: '长度不得小于2', trigger: 'blur' },
+                ],
+                dataValue: [{ required: true, message: '请选择订单周期', trigger: 'change' }],
+                applyRange: [{ required: true, message: '请选择具体应用范围', trigger: 'change' }],
+                applyAccount: [{required: true, message: '请选择具体应用范围', trigger: 'change' }],
+                specificMoment: [{required: true, message: '请选择具体时刻', trigger: 'change' }],
+               
+            },
+            // 操作记录
+            designLeaderList:[],
+            associatedProjectList:[],
+
+            // 本周项目燃尽图
+            burnDownChart:[],
+
+            // 分页参数
+            totalPage:0,
+            currentPage:1,
+
+        }
+    },
+    methods: {
+        // 附件上传的方法
+        handleChange({ file, fileList }) {
+        if (file.status !== 'uploading') {
+            console.log(file, fileList);
+        }
+        },
+        // form-modal 自带方法
+        onSubmit() {
+            this.$refs.ruleForm.validate(valid => {
+                if (valid) {
+                    console.log('submit!',valid);
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        resetForm() {
+            this.$refs.ruleForm.resetFields();
+        },
+        // 分页页码改变
+        pageChange(page, pageSize){
+
+        },
+        deliverySystemChange(val){
+            console.log(val);
+            this.form.APKLink='';
+        },
+        totalMaterialChange(e){
+            console.log(e.target.value)
+        },
+        averageDayMaterialChange(){
+
+        },
+        materialTypeChange(val){
+
+        },
+        goBack() {
+            this.$router.replace('/autoRules')
+            this.$bus.$emit('remove', '/newBlankRule')
+           
+        },
+
+        saveHandler(){
+             this.$refs.ruleForm.validate(valid=> {
+                if (valid) {
+                    this.form.rulesList=this.rulesList;
+                    console.log(valid,this.form);
+
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+    },
+}
+</script>
+

+ 442 - 213
src/views/playerPart/playerList.vue

@@ -1,238 +1,467 @@
 <template>
-    <div class="playerList">
-        <div class="top">
-            <div class="playBody">
-                <div class="box">
-                    <div class="byted-card byted-card-inner-line byted-card-bordered css-deu8f5" v-for="(item) in playerList" :key="item.id">
-                        <div class="byted-card-body">
-                            <div class="media">
-                                <div class="main_img">
-                                    <img src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe/tmpl/file/2020082420341062812025.png" alt="图片加载失败">
-                                </div>
-                                <div class="hoverBody">
-                                    <div class="blackBG">
-                                        <a-button type="primary" @click="preview(item)">弹窗预览</a-button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div >
-                                <h5 class="css-1lrzuem">
-                                    <span class="tip">{{item.product}}</span>
-                                    {{item.type}}
-                                </h5>
-                                <div class="css-vfnok7"></div>
-                            </div>
-                        </div>
-                    </div>
+  <div class="playerList">
+    <!-- <div class="top">
+      <div class="playBody">
+        <div class="box">
+          <div
+            class="byted-card byted-card-inner-line byted-card-bordered css-deu8f5"
+            v-for="item in playerList"
+            :key="item.id"
+          >
+            <div class="byted-card-body">
+              <div class="media">
+                <div class="main_img">
+                  <img
+                    src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe/tmpl/file/2020082420341062812025.png"
+                    alt="图片加载失败"
+                  />
                 </div>
-            </div>
-        </div>
-        <div class="previewBody" v-show="previewBody">
-            <div class="content">
-                <div class="content-inner">
-                    <div class="phone">
-                        <iframe :src="playerSrc" width="274" height="487" frameborder="0"></iframe>
-                    </div>
-                    <a-button type='default' @click="closePreview" size='large' class="closePreviewBtn">关闭预览</a-button>
+                <div class="hoverBody">
+                  <div class="blackBG">
+                    <a-button type="primary" @click="preview(item)" style="margin-bottom: 30px">弹窗预览</a-button>
+                    <a-button type="primary" @click="previewVisible=true">使用模板</a-button>
+                  </div>
                 </div>
+              </div>
+              <div>
+                <h5 class="css-1lrzuem">
+                  <span class="tip">{{ item.product }}</span>
+                  {{ item.type }}
+                </h5>
+                <div class="css-vfnok7"></div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
+    </div> -->
+
+    <a-card :bordered="false">
+      <a-button @click="addModules" style="margin: 0 0 15px 0" type="primary">新增模板</a-button>
+      <div>
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :loading="loading"
+        >
+          <span slot="action" slot-scope="text, record">
+            <a @click="preview(record)">替换素材</a>
+
+            <a-divider type="vertical" />
+            <a @click="preview(record)">预览</a>
+
+            <a-divider type="vertical" />
+
+            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+              <a>删除</a>
+            </a-popconfirm>
+          </span>
+        </a-table>
+      </div>
+      <!-- table区域-end -->
+    </a-card>
+    <div class="previewBody" v-if="previewBody">
+      <div class="content">
+        <div class="content-inner">
+          <div class="phone">
+            <iframe :src="playerSrc" width="274" height="487" frameborder="0"></iframe>
+          </div>
+          <a-button type="default" @click="closePreview" size="large" class="closePreviewBtn">关闭预览</a-button>
+        </div>
+      </div>
     </div>
+    <a-modal
+      title="模板上传"
+      :visible="previewVisible"
+      @cancel="handleCancel"
+      :width="1000"
+      @ok="saveFile"
+      :confirm-loading="confirmLoading"
+    >
+      <a-form :form="form">
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板所属账户">
+          <Treeselect :appId.sync="appId" :multiple="false" request="1,3" ref="treeSelect" style="width: 100%" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板类型">
+          <a-input
+            placeholder="请输入模板类型"
+            v-decorator.trim="['fileType', { rules: [{ required: true, message: '请输入模板类型' }] }]"
+          />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板文件">
+          <a-upload
+            name="file"
+            action="http://192.168.1.251/jeecg-boot"
+            :customRequest="customRequest"
+            :fileList="defaultFileList"
+          >
+            <a-button> <a-icon type="upload" /> Click to Upload </a-button>
+          </a-upload>
+          <!-- <input type="file" @change="customRequest"> -->
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <a-modal
+      title="替换素材"
+      :visible="changeVisible"
+      @cancel="handleCancel"
+      :width="1000"
+      @ok="saveFile"
+      :confirm-loading="confirmLoading"
+    >
+      <a-form :form="form">
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板所属账户">
+          <Treeselect :appId.sync="appId" :multiple="false" request="1,3" ref="treeSelect" style="width: 100%" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板类型">
+          <a-input
+            placeholder="请输入模板类型"
+            v-decorator.trim="['fileType', { rules: [{ required: true, message: '请输入模板类型' }] }]"
+          />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板文件">
+          <a-upload
+            name="file"
+            action="http://192.168.1.251/jeecg-boot"
+            :customRequest="customRequest"
+            :fileList="defaultFileList"
+          >
+            <a-button> <a-icon type="upload" /> Click to Upload </a-button>
+          </a-upload>
+          <!-- <input type="file" @change="customRequest"> -->
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
 </template>
 
 <script>
-import playerList from './playerData'; 
+import { getAction, postAction, uploadAction } from '../../api/manage'
+import playerList from './playerData'
+import { mapGetters } from 'vuex'
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
+import qs from 'qs'
+export default {
+  components: {
+    Treeselect,
+  },
+  data() {
+    return {
+      confirmLoading: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      defaultFileList: [],
+      fileAll: null,
+      playerList,
+      previewBody: false,
+      playerSrc: '',
+      previewVisible: false,
+      changeVisible:false,
+      loading: false,
+      dataSource: [],
+      form: this.$form.createForm(this),
+      appId: '',
+      columns: [
+        {
+          title: '试玩名称',
+          align: 'center',
+          dataIndex: 'fileName',
+        },
+        {
+          title: '试玩分类',
+          align: 'center',
+          dataIndex: 'fileType',
+        },
+        {
+          title: '上传时间',
+          align: 'center',
+          dataIndex: 'createTime',
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'action',
+          },
+        },
+      ],
+    }
+  },
+  methods: {
+    customRequest(data) {
+      var dataAll = {
+        uid: '1',
+        name: data.file.name,
+        status: 'done',
+      }
 
-console.log(playerList)
+      this.defaultFileList = [dataAll]
+      this.fileAll = data.file
+      // this.saveFile(data.file)
+    },
+    saveFile(e) {
+      this.confirmLoading = true
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          let that = this
+          let formData = new FormData()
+          console.log(this.defaultFileList)
+          formData.append('file', this.fileAll)
+          formData.append('userId', this.userInfo().id)
+          formData.append('fileType', values.fileType)
+          uploadAction('/shiwan/shiwanFileUpload/saveOrUpdateFile', formData).then((res) => {
+            if (res.success) {
+              this.confirmLoading = false
+              this.defaultFileList = []
+              this.fileAll = null
+              this.form.resetFields()
+              this.previewVisible = false
+              this.getPlayableList()
+            } else {
+              this.confirmLoading = false
+              this.$message.error(res.message)
+              this.defaultFileList = []
+              this.fileAll = null
+            }
+          })
+        }
+      })
+    },
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
+    changeView(item) {
+      getAction('/shiwan/shiwanFileUpload/selectListByParentId', { id: item.id }).then((res) => {
+        if (res.success) {
+          this.previewBody = true
+          this.playerSrc = res.result.filter((i) => {
+            return i.fileSuffix == 'html'
+          })[0].fileUrl
+        }
+      })
+    },
+    preview(item) {
+      console.log(item)
 
-export default {
-    data() {
-        return {
-            playerList,
-            previewBody:false,
-            playerSrc:'',
+      getAction('/shiwan/shiwanFileUpload/selectListByParentId', { id: item.id }).then((res) => {
+        if (res.success) {
+          this.previewBody = true
+          this.playerSrc = res.result.filter((i) => {
+            return i.fileSuffix == 'html'
+          })[0].fileUrl
         }
+      })
     },
-    methods:{
-        preview(item){
-            console.log(item);
-            this.previewBody=true;
-            this.playerSrc=item.link
-        },
-        closePreview(){
-            this.previewBody=false;
+    closePreview() {
+      this.previewBody = false
+    },
+    handleCancel() {
+      this.previewVisible = false
+    },
+    addModules() {
+      this.previewVisible = true
+    },
+    handleDelete(item) {
+      postAction('/shiwan/shiwanFileUpload/edit', { id: item, fileStatus: '0' }).then((res) => {
+        if (res.success) {
+          this.getPlayableList()
         }
-    }
+      })
+    },
+    getPlayableList() {
+      getAction('/shiwan/shiwanFileUpload/list', {
+        pageNo: 1,
+        pageSize: 1000,
+      }).then((res) => {
+        if (res.success) {
+          this.dataSource = res.result.records
+        }
+      })
+    },
+  },
+  mounted() {
+    this.getPlayableList()
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.playerList{
-    
-    position: relative;
-    .top{
-        width: calc(100% - 160px);
-        margin: 0px auto;
-    }
-    .playBody{
+.playerList {
+  position: relative;
+  .top {
+    width: calc(100% - 160px);
+    margin: 0px auto;
+  }
+  .playBody {
+    width: 100%;
+    padding: 20px;
+    .box {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      -webkit-box-pack: center;
+      justify-content: flex-start;
+      .css-deu8f5 {
+        width: 224px;
+        margin: 10px !important;
+      }
+      .byted-card-inner-line {
+        padding: 0;
+      }
+      .byted-card-bordered {
+        border: 1px solid #e0e0e0;
+        box-shadow: none;
+      }
+      .byted-card {
+        font-size: 14px;
+        line-height: 22px;
+        position: relative;
+        color: #333;
+        background: #fff;
+        box-sizing: border-box;
+        border-radius: 4px;
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05);
+        border: 1px solid transparent;
+      }
+      .byted-card > .byted-card-body {
+        box-shadow: rgb(204, 204, 204) 0px 0px 10px;
+        padding: 0px !important;
+      }
+      .byted-card > .byted-card-body .media {
+        height: 392px;
+        width: 100%;
+        position: relative;
+        cursor: pointer;
+        overflow: hidden;
+        border-bottom: 1px solid rgb(204, 204, 204);
+      }
+      .byted-card > .byted-card-body .media .main_img {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        position: absolute;
+      }
+      .byted-card > .byted-card-body .media .main_img img:last-child {
         width: 100%;
-        padding: 20px;
-        .box{
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-wrap: wrap;
-            -webkit-box-pack: center;
-            justify-content: flex-start;
-            .css-deu8f5 {
-                width: 224px;
-                margin: 10px !important;
-            }
-            .byted-card-inner-line {
-                padding: 0;
-            }
-            .byted-card-bordered {
-                border: 1px solid #e0e0e0;
-                box-shadow: none;
-            }
-            .byted-card {
-                font-size: 14px;
-                line-height: 22px;
-                position: relative;
-                color: #333;
-                background: #fff;
-                box-sizing: border-box;
-                border-radius: 4px;
-                box-shadow: 0 1px 6px 0 rgba(0,0,0,.05);
-                border: 1px solid transparent;
-            }
-            .byted-card > .byted-card-body {
-                box-shadow: rgb(204, 204, 204) 0px 0px 10px;
-                padding: 0px !important;
-            }
-            .byted-card > .byted-card-body .media {
-                height: 392px;
-                width: 100%;
-                position: relative;
-                cursor: pointer;
-                overflow: hidden;
-                border-bottom: 1px solid rgb(204, 204, 204);
-            }
-            .byted-card > .byted-card-body .media .main_img {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                -webkit-box-align: center;
-                align-items: center;
-                position: absolute;
-            }
-            .byted-card > .byted-card-body .media .main_img img:last-child {
-                width: 100%;
-                position: absolute;
-            }
-            .byted-card > .byted-card-body .media .main_img img:first-child {
-                width: 100%;
-                height: 100%;
-                // filter: blur(10px);
-                position: absolute;
-            }
-            .css-1lrzuem {
-                display: flex;
-                -webkit-box-align: center;
-                align-items: center;
-                font-size: 14px;
-                font-weight: 600;
-                color: rgb(51, 51, 51);
-                line-height: 20px;
-                text-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
-                word-break: keep-all;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                margin: 16px 16px 0px;
-                overflow: hidden;
-            }
-            .css-vfnok7 {
-                height: 40px;
-                display: flex;
-                flex-direction: row-reverse;
-                -webkit-box-align: center;
-                align-items: center;
-            }
-            .hoverBody{
-                display: none;
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                width: 100%;
-                height: 100%;
-               
-            }
-            .blackBG{
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                -webkit-box-align: center;
-                align-items: center;
-                -webkit-box-pack: center;
-                justify-content: center;
-                background-color: rgba(0, 0, 0, 0.5);
-
-            }
-            .byted-card:hover {
-                box-shadow: rgb(153, 153, 153) 0px 0px 20px;
-            }
-            .byted-card:hover .hoverBody{
-                display: block;
-            }
-            .tip{
-                display: inline-block;
-                margin-right: 15px;
-                background: #FF6633;
-                width: 80px;
-                padding: 2px 10px;
-                text-align: center;
-                border-radius: 10px;
-            }
-        }
-    }
-    .previewBody{
-        background: rgba(0,0,0,.5);
         position: absolute;
-        top: 0;
-        left: 0;
-        padding: 20px 80px;
+      }
+      .byted-card > .byted-card-body .media .main_img img:first-child {
         width: 100%;
         height: 100%;
-        .content{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100%;
-        }
-        .content-inner{
-            font-size: 14px;
-            line-height: 22px;
-            padding: 0 24px 8px;
-            color: #666;
-            text-align: center;
-            position: fixed;
-            top: 200px;
-        }
-        .phone {
-            background-color: rgb(255, 255, 255);
-            position: relative;
-            padding: 9px 8px 7px;
-            border-radius: 24px;
-        }
-        .phone iframe {
-            border-radius: 18px;
-        }
-        .closePreviewBtn{
-            margin-top: 30px;
-        }
+        // filter: blur(10px);
+        position: absolute;
+      }
+      .css-1lrzuem {
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 600;
+        color: rgb(51, 51, 51);
+        line-height: 20px;
+        text-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px;
+        word-break: keep-all;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 16px 16px 0px;
+        overflow: hidden;
+      }
+      .css-vfnok7 {
+        height: 40px;
+        display: flex;
+        flex-direction: row-reverse;
+        -webkit-box-align: center;
+        align-items: center;
+      }
+      .hoverBody {
+        display: none;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+      }
+      .blackBG {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        flex-flow: column;
+      }
+      .byted-card:hover {
+        box-shadow: rgb(153, 153, 153) 0px 0px 20px;
+      }
+      .byted-card:hover .hoverBody {
+        display: block;
+      }
+      .tip {
+        display: inline-block;
+        margin-right: 15px;
+        background: #ff6633;
+        width: 80px;
+        padding: 2px 10px;
+        text-align: center;
+        border-radius: 10px;
+      }
+    }
+  }
+  .previewBody {
+    background: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 20px 80px;
+    width: 100%;
+    height: 100%;
+    .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+    .content-inner {
+      font-size: 14px;
+      line-height: 22px;
+      padding: 0 24px 8px;
+      color: #666;
+      text-align: center;
+      position: fixed;
+      top: 200px;
+    }
+    .phone {
+      background-color: rgb(255, 255, 255);
+      position: relative;
+      padding: 9px 8px 7px;
+      border-radius: 24px;
+    }
+    .phone iframe {
+      border-radius: 18px;
+    }
+    .closePreviewBtn {
+      margin-top: 30px;
     }
+  }
 }
 </style>

+ 3 - 3
src/views/user/Login.vue

@@ -65,13 +65,13 @@
           @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
         </a-button>
       </a-form-item>
-      <div class="otherLogin" v-if="customActiveKey != 'tab1'"><span class="titleTip">其他登录方式</span></div>
-      <div class="feishu" @click="FSlogin" v-if="customActiveKey != 'tab1'">
+      <!-- <div class="otherLogin" v-if="customActiveKey != 'tab1'"><span class="titleTip">其他登录方式</span></div> -->
+      <!-- <div class="feishu" @click="FSlogin" v-if="customActiveKey != 'tab1'">
         <span class="FSicon">
           <img src="@/assets/feishu.png" alt="">
         </span>
         <span class="FSinfo">使用飞书快捷登录</span>
-      </div>
+      </div> -->
       <!-- <div class="user-login-other">
         <span>其他登陆方式</span>
         <a><a-icon class="item-icon" type="alipay-circle"></a-icon></a>

+ 4 - 2
vue.config.js

@@ -71,11 +71,13 @@ module.exports = {
         //  target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
          target: 'http://jiaoyangapi.shyouteng.com.cn', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
-        // target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
+        // target: 'http://192.168.1.188:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
 
         // target: 'http://192.168.1.74:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
+        // target: 'http://192.168.1.74:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
+        
         // target: 'http://192.168.0.170:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
 
         // target: 'http://192.168.1.94:8080', //请求本地 需要jeecg-boot后台项目  赵西安
@@ -84,7 +86,7 @@ module.exports = {
         //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // 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://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目
         // target:'http://118.24.244.213:8804',