Kaynağa Gözat

'图片消耗'

魏志佳 4 yıl önce
ebeveyn
işleme
930d385a8c

BIN
src/assets/orderIcon.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)
   }
 }

+ 219 - 76
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>
+        
+        <p slot="operation" slot-scope="text">
+          平面:{{ text || '未绑定' }}
+        </p>
         
 
         </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>
@@ -144,7 +160,7 @@ const TTcolumns = [
     key:'operation',
     scopedSlots: { customRender: 'operation' },
     align: 'center',
-    width:100,
+    width:150,
     fixed: 'left'
   },
   
@@ -181,23 +197,23 @@ const TTcolumns = [
     scopedSlots: { customRender: 'convert' },
     sorter: () => {}
   },
-  {
-    title: '上传时间',
-    dataIndex: 'statDate',
-    scopedSlots: { customRender: 'statDate' },
-    align: 'center',
-    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',
@@ -215,54 +231,94 @@ const KScolumns = [
   },
     {
     title:'相关人员',
-    dataIndex:'userName',
-    key:'userName',
-    scopedSlots: { customRender: 'userName' },
+    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: () => {}
   },
   {
     title: '点击数',
-    dataIndex: 'clickMaterial',
+    dataIndex: 'photoClick',
     align: 'center',
 
-    scopedSlots: { customRender: 'clickMaterial' },
+    scopedSlots: { customRender: 'photoClick' },
     sorter: () => {}
     // (a, b) => a.clickMaterial - b.clickMaterial
   },
   {
     title: '展示数',
-    dataIndex: 'showMaterial',
+    dataIndex: 'photoShow',
     align: 'center',
 
-    scopedSlots: { customRender: 'showMaterial' },
+    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' },
+    scopedSlots: { customRender: 'eventJinJianApp' },
     sorter: () => {}
   },
   {
-    title: '上传时间',
-    dataIndex: 'materialUploadTime',
-    scopedSlots: { customRender: 'materialUploadTime' },
+    title: '授信成本',
+    dataIndex: 'eventCreditGrantApp',
     align: 'center',
+
+    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,16 @@ export default {
     methods: {
         tabChange(val){
           this.accountIds=[];
-            if(this.tabKeys==1){
+          this.data=[]
+          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 +479,7 @@ export default {
                 return 
             }
             this.ipagination.current=pagination.current
-            this.HttpPost()
+            // this.HttpPost()
         },
         moment,
         //select切换---项目
@@ -445,8 +503,12 @@ export default {
         consumeOnChange() {},
         //查询按钮
         searchRes() {
-            this.date = []
-            this.HttpPost()       
+            this.data=[];
+            if(this.tabKeys==1){               
+                this.HttpPost('/image/bytedance/cost')
+            }else if (this.tabKeys==2){
+                this.HttpPost('/image/kuaishou/cost')
+            } 
         },
         loadShow(){
             show++
@@ -457,10 +519,10 @@ export default {
             }
         },
         //网络请求table数据函数
-        HttpPost(sort){
+        HttpPost(url){
           this.loading=true;
           show = 0
-          postAction('/image/bytedance/cost', {
+          postAction(url, {
               startDate: this.timedata[0],
               endDate: this.timedata[1],        
               code: this.videoID,
@@ -493,31 +555,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 +586,7 @@ export default {
             downloadElement.click() //点击下载
             document.body.removeChild(downloadElement) //下载完成移除元素
             window.URL.revokeObjectURL(href) //释放掉blob对象
+            this.exportExcelIsOk=false;
         })
         },
 
@@ -611,20 +671,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 +775,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 +813,8 @@ export default {
 }
 .timeDiv {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  position: relative;
 }
 span {
   margin-left: 5px;

+ 4 - 4
src/views/modules/Statistics/videoStatics/KSvideoStatics.vue

@@ -224,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> -->
-                    <p>剪辑:{{record.clip || '数据'}}</p>
-                    <p>拍摄:{{record.shot || '数据'}}</p>
-                    <p>编导:{{record.plan || '数据'}}</p>
+                    <p>剪辑:{{record.clip || '无'}}</p>
+                    <p>拍摄:{{record.shot || '无'}}</p>
+                    <p>编导:{{record.plan || '无'}}</p>
                 </span>
 
                 
@@ -466,7 +466,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:{},

+ 4 - 4
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> -->
-            <p>剪辑:{{record.clip || '数据'}}</p>
-            <p>拍摄:{{record.shot || '数据'}}</p>
-            <p>编导:{{record.plan ||'数据'}}</p>
+            <p>剪辑:{{record.clip || '无'}}</p>
+            <p>拍摄:{{record.shot || '无'}}</p>
+            <p>编导:{{record.plan ||'无'}}</p>
        </span>
 
     </a-table>
@@ -369,7 +369,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:{},

+ 22 - 13
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>
@@ -91,19 +91,23 @@
                         </div>
                         <div class="orderProgress">
                             <ul class="orderProgress-list">
-                                <li v-for="(item,index) in orderProgressList" :key="index" 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>
+                                <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>
-                                    
-                                    <div class="progress">
-                                        <a-progress type="circle" :percent="75" :width='30' :showInfo='false'  :strokeWidth='10' />
-                                        <span style="margin-left:15px">75%</span>
-                                    </div>
+                                    </router-link>
                                 </li>
                             </ul>
                             <!-- hideOnSinglePage -->
@@ -205,7 +209,11 @@ export default {
         // 全部订单
         allOrder() {
             
-        }
+        },
+        // 发起订单
+        sendOrder(){
+            this.$router.push('/workBench/placeOrder')
+        },
     },
 }
 </script>
@@ -344,6 +352,7 @@ export default {
                             align-items: center;
                             border-bottom: 1px solid  #E9E9E9;;
                             justify-content:space-between;
+                            cursor: pointer;
                             .item-icon{
                                 width: 8px;
                                 height: 8px;

+ 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>
+

+ 3 - 3
vue.config.js

@@ -68,9 +68,9 @@ module.exports = {
     open : true,
     proxy: {
       '/jeecg-boot': {
-         target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+        //  target: 'http://192.168.1.8:8080', //请求本地 需要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后台项目  毕洁泉
@@ -81,7 +81,7 @@ module.exports = {
         // target: 'http://192.168.1.94:8080', //请求本地 需要jeecg-boot后台项目  赵西安
 
 
-         target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+        //  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后台项目