瀏覽代碼

Merge branch 'master' into feature/work-jyf

jiayufei 4 年之前
父節點
當前提交
167f9ac996

+ 0 - 5
src/views/modules/Statistics/components/customColumn.vue

@@ -90,7 +90,6 @@ export default {
     },
     listNum: {
       handler(newValue, oldValue) {
-        console.log(newValue, oldValue)
         this.mylistNum = newValue
       },
       immediate: true
@@ -100,7 +99,6 @@ export default {
   methods: {
      //li展示里的关闭按钮 删除当前被选中的这一个列
     deleteCol(item, index) {
-      console.log(this.mylistNum, 'this.mylistNumthis.mylistNumthis.mylistNumthis.mylistNum');
       this.mylistNum = this.mylistNum.filter((item1, num) => {
         return num != index
       })
@@ -121,7 +119,6 @@ export default {
         return
       }
       const newItems = [...this.mylistNum]
-      console.log(newItems)
       const src = newItems.findIndex(v => v.dataIndex === this.dragging)
       const dst = newItems.findIndex(v => v.dataIndex === item)
 
@@ -196,7 +193,6 @@ export default {
             index = ind
           }
         })
-        console.log(index)
         this.mylistNum.splice(index, 1)
       } else {
         this.mylistNum.push(val)
@@ -204,7 +200,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.mylistNum, 'mylistNum');
   }
 }
 </script>

+ 182 - 57
src/views/modules/autoLaunch/configLaunchInfo.vue

@@ -34,11 +34,11 @@
                 <div class="input-item">
                     <a-form-item >
                         <a-radio-group   v-decorator="['campaignType',{initialValue:2 }]" @change="campaignTypeChange">
-                            <a-radio-button :value="2">提升应用安装</a-radio-button>
+                            <a-radio-button :value="2" :disabled="editRecordId!==''">提升应用安装</a-radio-button>
                             <a-radio-button :value="3" :disabled='true'>获取电商下单</a-radio-button>                                   
                             <a-radio-button :value="4" :disabled='true'>推广品牌活动</a-radio-button>                                   
-                            <a-radio-button :value="5" :disabled='true'>收集销售线索</a-radio-button>                                   
-                            <a-radio-button :value="7" :disabled='true'>提高应用活跃</a-radio-button>                                   
+                            <a-radio-button :value="5" :disabled="editRecordId!==''">收集销售线索</a-radio-button>                                   
+                            <a-radio-button :value="7" :disabled="editRecordId!==''">提高应用活跃</a-radio-button>                                   
                         </a-radio-group>
                     </a-form-item>
                 </div>
@@ -216,7 +216,7 @@
 
             
         </div>
-        <div class="moduler">
+        <div class="moduler" v-if="getData('campaignType') === 2">
                 <div class="moduler-title">目标应用</div>
                 <div class="ad-range">
                     <div class="row-item" >
@@ -346,6 +346,97 @@
                 </div>        
              
         </div>
+        <div class="moduler" v-if="getData('campaignType') === 5">
+                <div class="moduler-title">链接</div>
+                <div class="ad-range">
+                    <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-item>
+                                <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
+                            </a-form-item>
+                        
+                        </div>
+                    </div>
+
+                    <div class="row-item" v-if="getFormData('campaignType') == 2||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
+                        <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-item  >
+                                <span v-if="convertId&&!convert" style="display:block;font-size:16px">已选择转化目标: {{convertId.label}}</span>
+                                <a-button type="primary" @click="showConvert">{{convertId?'更换转化目标':'选择转化目标'}}</a-button>
+                            </a-form-item>
+                        </div>
+                    </div>
+
+                </div>        
+             
+        </div>
+        <div class="moduler" v-if="getData('campaignType') === 7">
+            <div class="moduler-title">链接</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-item>
+                        <a-select v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
+                            placeholder="选择应用目标" optionFilterProp="children" style="width: 500px"  
+                            :filterOption="filterOption" @change="appIdChange">
+                            <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
+                                {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
+                                appModel.platform | platform
+                                }}
+                            </a-select-option>
+                        </a-select>
+                        <a-button type="primary" @click="addApplication" style="margin-left:10px" :loading="tongbuLoading">刷新应用</a-button>
+                    </a-form-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-item>
+                            <a-input placeholder="请填写链接" v-decorator="['schemaUri', { rules: [{ required: true,message:'链接不能为空'}] }]" />
+                        </a-form-item>
+                    </div>
+                </div>
+
+
+                <div class="row-item">
+                    <div class="hint-item"></div>
+                    <div class="label-item">
+                    <div class="text-item">H5链接</div>
+                    <div class="required-item"></div>
+                    </div>
+                    <div class="input-item">
+                        <a-form-item>
+                            <a-input placeholder="请填写H5链接" v-decorator="['url', { rules: [{ required: true,message:'H5链接不能为空'}] }]" />
+                        </a-form-item>
+                    
+                    </div>
+                </div>
+
+      
+             
+        </div>
         <div class="moduler">
             <div class="moduler-title">用户定向
             <!-- <div style="margin-left:30px;position:relative;top:-2px">
@@ -613,7 +704,7 @@
                                     <a-radio-button :value="2">广告计划</a-radio-button>
                                     <a-radio-button :value="3">本账户</a-radio-button>
                                     <a-radio-button :value="4">公司主体</a-radio-button>
-                                    <a-radio-button :value="5">APP</a-radio-button>
+                                    <a-radio-button :value="5" :disabled="getData('campaignType')===5||getData('campaignType')===7">APP</a-radio-button>
                                 </a-radio-group>
                             </a-form-item>
                         </div>
@@ -808,6 +899,21 @@
                                 <a-select-option :value="396" v-if="
                                     groupTypeData.isRegister == '1'
                                 ">注册优化目标</a-select-option>
+
+
+                                <a-select-option :value="324" v-if="
+                                    groupTypeData.isAppInvoked == '1'
+                                ">唤起应用</a-select-option>
+                                <a-select-option :value="715" v-if="
+                                    groupTypeData.isAddWechat == '1'
+                                ">微信复制优化目标</a-select-option>
+                                <a-select-option :value="716" v-if="
+                                    groupTypeData.isMultiConversion == '1'
+                                ">多转化事件</a-select-option>
+                                <a-select-option :value="717" v-if="
+                                    groupTypeData.isAdWatchTimes == '1'
+                                ">广告观看次数</a-select-option>
+                                
                             </a-select>
 
                            
@@ -984,7 +1090,26 @@
                         </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-item >
+                                <a-input-number
+                                    style="width:200px"
+                                    :max="15"
+                                    :step="1"
+                                    :min='1'
+                                    v-decorator="['imageCnt',{ initialValue:5, rules: [{ required: true, message: '请填写关联封面数' }] } ]"
+                                    @change="setImageCnt"
+                                />
+                          </a-form-item>
+                                
+                        </div>
+                    </div>
 
                     <div class="row-item" v-if="getData('openProgramCreate')!=1">
                         <div class="hint-item"></div>
@@ -995,7 +1120,7 @@
                         <div class="input-item">
                         <a-form-item>
                             <a-input-number
-                                v-model="customUnitCnt"
+                                v-decorator="['customUnitCnt',{ initialValue:400, rules: [{ required: true, message: '请填写自定义组上限' }] } ]"
                                 style="width: 100%"
                                 placeholder="仅支持输入自然数"
                                 :max="customUnitCntMax"
@@ -1015,7 +1140,7 @@
                         <div class="input-item">
                         <a-form-item>
                             <a-input-number
-                                v-model="programUnitCnt"
+                                v-decorator="['programUnitCnt',{ initialValue:60, rules: [{ required: true, message: '请填写程序化组上限' }] } ]"
                                 style="width: 100%"
                                 placeholder="仅支持输入自然数"
                                 :max="60"
@@ -1234,26 +1359,7 @@
                         
                         </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-item >
-                                <a-input-number
-                                    style="width:200px"
-                                    :max="15"
-                                    :step="1"
-                                    :min='1'
-                                    v-decorator="['imageCnt',{ initialValue:5, rules: [{ required: true, message: '请填写关联封面数' }] } ]"
-                                    @change="setImageCnt"
-                                />
-                          </a-form-item>
-                                
-                        </div>
-                    </div>
+
                     <div class="row-item">
                         <div class="hint-item"> </div>
                         <div class="label-item">
@@ -1292,6 +1398,24 @@
                         </a-form-item>
                         </div>
                     </div>  
+                    <div class="row-item">
+                        <div class="hint-item"> </div>
+                        <div class="label-item">
+                        <div class="text-item">素材关键字</div>
+                        </div>
+                        <div class="input-item">
+                        <a-form-item>  
+                            <div style="position:relative">              
+                            <a-textarea
+                                class="rending"
+                                placeholder="请输入素材关键字"
+                                v-decorator="['materialKeyword']"
+                                :autosize="{ minRows: 2, maxRows: 6 }"
+                            ></a-textarea>
+                            </div>
+                        </a-form-item>
+                        </div>
+                    </div>  
                 </div>
              
         </div>
@@ -1751,7 +1875,7 @@ export default {
     },
     methods: {
         setImageCnt(e){
-            this.customUnitCntMax = Math.floor(2000/e)
+            this.customUnitCntMax = e?Math.floor(2000/e):2000
         },
         platformOsChange(e){
             //console.log(e);
@@ -1835,12 +1959,6 @@ export default {
                         description: this.getData('description').replace(/\s/g,'')
                     })
                 })
-            }else{
-                this.$nextTick(()=>{
-                    this.form.setFieldsValue({
-                        description: undefined
-                    })
-                })
             }
             this.description=e.target.value.replace(/\s/g,'')
 
@@ -2294,8 +2412,18 @@ export default {
                     //     values.beginTime=this.dateRange[0].format('YYYY-MM-DD');
                     //     values.endTime= this.dateRange[1].format('YYYY-MM-DD');
                     // }
-                    values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId):JSON.stringify([values.appId])
-                    values.appId=undefined;
+                    if(this.getData('campaignType') === 2 ) {
+                        values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId):JSON.stringify([values.appId])
+                        values.appId=undefined;
+                    }else if(this.getData('campaignType') === 7){
+                        values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId):JSON.stringify([values.appId])
+                        values.appId=undefined;
+                        values.singleAppid = 1
+                    }else {
+                        values.singleAppid = 1
+                        values.appIdArray=JSON.stringify([])
+                    }
+                    values.appId = undefined
                     values.agesRange=this.agesRange[0]==1?JSON.stringify([]):JSON.stringify(this.agesRange)
                     values.region=JSON.stringify(this.region);
                     
@@ -2355,17 +2483,6 @@ export default {
 
                     values.campaignDayBudget = this.budgetType =='1'?0: values.campaignDayBudget*1000
                     values.unitDayBudget = this.dayBudgetType =='1'?0: values.unitDayBudget*1000
-                    if(this.getData('openProgramCreate')==0){
-                        values.customUnitCnt = this.customUnitCnt
-                    }else if(this.getData('openProgramCreate')==1){
-                        values.programUnitCnt = this.programUnitCnt
-                    }else{
-                        values.customUnitCnt = this.customUnitCnt
-                        values.programUnitCnt = this.programUnitCnt
-                    }
-                    
-                    
-                    //console.log('Received values of form: ', values)
                     let url=''
                     if(this.editRecordId){
                         url='/ctop/aiKuaishouAdvertiserStrategy/edit';
@@ -2541,13 +2658,17 @@ export default {
         // 获取行动号召按钮
         getActionBarText(){
             this.actionBarTextList=[]
-            getAction('/kuaishou/batch/getActionBarTextByType', {
-              type:this.getFormData('campaignType')
-            }).then((res) => {
-            if (res.success) {
-                this.actionBarTextList = res.result
-            }
+            let that = this
+            setTimeout(()=>{
+                getAction('/kuaishou/batch/getActionBarTextByType', {
+                type:that.getFormData('campaignType')
+                }).then((res) => {
+                if (res.success) {
+                    that.actionBarTextList = res.result
+                }
+                })
             })
+            
 
             
         },
@@ -2643,10 +2764,10 @@ export default {
                         this.form.setFieldsValue({
                              ...res.result,
                             creativeTag:res.result.creativeTag?JSON.parse(res.result.creativeTag):[],
-                            useAppMarket:res.result.useAppMarket==1?true:false,
+                            
                             isOpen:res.result.isOpen?res.result.isOpen:0,
                             cpaBid:res.result.cpaBid/1000,
-                            appId:res.singleAppid?JSON.parse(res.result.appIdArray)[0]:JSON.parse(res.result.appIdArray),
+                            
                             deviceBrand:res.result.deviceBrand?JSON.parse(res.result.deviceBrand):[],
                             devicePrice:res.result.devicePrice?JSON.parse(res.result.devicePrice):[],
                            
@@ -2657,8 +2778,12 @@ export default {
                     },0)
                     setTimeout(()=>{
                          this.form.setFieldsValue({
-                             androidOsv:res.result.androidOsv?res.result.androidOsv:3,
+                            androidOsv:res.result.androidOsv?res.result.androidOsv:3,
                             iosOsv:res.result.iosOsv?res.result.iosOsv:6,
+                            url:res.result.url,
+                            schemaUri:res.result.schemaUri,
+                            appId:res.result.singleAppid?JSON.parse(res.result.appIdArray)[0]:JSON.parse(res.result.appIdArray),
+                            useAppMarket:res.result.useAppMarket==1?true:false,
                         })
                         
                     },100)

+ 9 - 1
src/views/modules/crowd-control/crowd-control.less

@@ -99,4 +99,12 @@
     .push-plate {
         margin-bottom: 20px;
     }
-}
+}
+
+.grid-form-item-account {
+    /deep/ .ant-form-item-control {
+        line-height: inherit;
+    }
+}
+
+

+ 2 - 2
src/views/modules/crowd-control/crowd-control.vue

@@ -19,7 +19,7 @@
                         />
                     </a-form-item>
                     <a-form-item
-                        class="grid-form-item" label="账户"
+                        class="grid-form-item grid-form-item-account" label="账户"
                         :colon="false"
                     >
                         <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false"></acount-search>
@@ -112,7 +112,7 @@
                             :disabled="personNameDisabled"
                         />
                     </a-form-model-item>
-                    <a-form-model-item label="选择账户">
+                    <a-form-model-item label="选择账户" class="grid-form-item-account">
                         <acount-search class="acount-search-class" :appId.sync="uploadAcountIds" :multiple="false"></acount-search>
                     </a-form-model-item>
                     <a-form-model-item label="上传人群包">

+ 92 - 2
src/views/modules/material/accountCheckBytedance.vue

@@ -2,11 +2,100 @@
 .select-project {
   width: 50%;
 }
+.row-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.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: 140px;
+  //   min-width: 80px;
+  .text-item {
+    font-size: 14px;
+    width: 120px;
+  }
+}
+.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;
+  }
+  .inventory-tags-lists-header {
+    background-color: #F8F9FA;
+    border: 1px solid #E4E9ED;
+    height: 36px;
+    line-height: 33px;
+    border-radius: 4px 4px 0 0;
+    font-weight: bold;
+    display: flex;
+  }
+
+  .inventory-tags-lists-container {
+    border: 1px solid #E4E9ED;
+    margin-top: -1px;
+    height: 100%;
+    padding: 4px 0px;
+    border-radius: 0 0 4px 4px;
+  }
+
+  .inventory-tags-lists-item {
+    width: 100%;
+    height: 37px;
+    line-height: 37px;
+    padding-left: 12px;
+    padding-right: 12px;
+    display: flex;
+    font-size: 14px;
+    color: #333;
+  }
+}
 </style>
 <template>
   <div class="select-project">
     <a-modal title="账户选择" v-model="showEdit" @ok="handleOk" @cancel="close" width="80%">
-      {{ value }}
+      <!-- <span style="margin-bottom:15px">是否同步快手主页</span> -->
+      <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-item>
+            <a-switch v-model="shieldBackwardSwitch" />
+          </a-form-item>
+        </div>
+      </div>
       <!-- <treeselect
         :multiple="multiple"
         :disable-branch-nodes="!multiple"
@@ -67,6 +156,7 @@ export default {
       label: 'label',
       id: 'id',
     },
+    shieldBackwardSwitch: true,
     showEdit: false,
     value: null,
     valueConsistsOf: 'LEAF_PRIORITY',
@@ -123,7 +213,7 @@ export default {
       console.log(e)
       var data = this.$refs.tree.getCheckedKeys()
       this.showEdit = false
-      this.$emit('synchro', data)
+      this.$emit('synchro', {treeData:data,shieldBackwardSwitch:this.shieldBackwardSwitch})
     },
     close() {
       this.showEdit = false

+ 6 - 1
src/views/modules/material/videoMaterial.vue

@@ -2207,10 +2207,15 @@ export default {
       })
     },
     implement(data) {
+      // {treeData:data,shieldBackwardSwitch:this.shieldBackwardSwitch}
       var params = {}
       params.mediaId = this.mediaId
       params.materialArray = JSON.stringify(this.checkArr)
-      params.accountArray = JSON.stringify(data)
+      params.accountArray = data.treeData?JSON.stringify(data.treeData):JSON.stringify(data)
+      if(this.mediaId == '2'){
+        params.shieldBackwardSwitch = data.shieldBackwardSwitch
+      }
+      
       postAction('/ctop/materialUpload/uploadAccount', params).then((res) => {
         if (res.code == 0) {
           this.checkArr = []

+ 30 - 20
src/views/modules/stockWatch/accountPage.vue

@@ -1017,15 +1017,15 @@ const columns=[
                 return current  && !(current > (moment().subtract(1,'months')) && current < moment())
             }, 
             onChange(date, dateString) {                
-                console.log(date, dateString);
+                // console.log(date, dateString);
                 this.getAllIndex();
                 this.getAccountIndexData();
 
                 if(dateString.length>0&&dateString[0]!=dateString[1]){
                     let interval=date[1].diff(date[0],'days')
-                    console.log(interval);
+                    // console.log(interval);
                     this.dateStringShow=`${moment(date[0]).subtract(1+interval,'days').format('YYYY-MM-DD')}~${moment(date[0]).subtract(1,'days').format('YYYY-MM-DD')}`
-                    console.log(this.dateStringShow)
+                    // console.log(this.dateStringShow)
                 }
             },
             materialDataChange(date, dateString){
@@ -1147,7 +1147,7 @@ const columns=[
                     ]
                 };
                 //单一天数
-                console.log(data)
+                // console.log(data)
                 
                 if(this.dateValue[0].format('YYYY-MM-DD')==this.dateValue[1].format('YYYY-MM-DD')){
                     option.xAxis[0].data=data.xData;
@@ -1164,7 +1164,7 @@ const columns=[
                 option.series[1].name=data.yData?data.yData.today.name:''
                 option.series[0].data=data.yData?data.yData.yesterday.data:[]
                 option.series[1].data=data.yData?data.yData.today.data:[] 
-                console.log(option)
+                // console.log(option)
                 return option
             },  
 
@@ -2112,7 +2112,7 @@ const columns=[
                         data.legend.push(item.type)
                     }   
                 });
-                console.log(data)
+                // console.log(data)
                 data.legend.forEach((item,index)=>{
                     data.yData.push({
                         name:item,
@@ -2130,7 +2130,7 @@ const columns=[
                          
                     });
                 })
-                console.log(data)
+                // console.log(data)
                 return data       
             },
             // 性别对应数据图
@@ -2294,19 +2294,29 @@ const columns=[
             //         this.accountPageSpinning=false 
             //     }
             // })
-            getAction('/etl/reportAccountHourly/getMaxChargeAccountIdByUser',{                
-                userId:this.userInfo().id,
-            }).then(res=>{
-                if(res.success){
-                    // this.currentAccount=res.result;
-                    this.accountId=res.result;
-                    this.selectaccountId=res.result;
-                    this.accountPageSpinning=false;
-                }else{
-                    // this.$message.error(res.message)
-                    this.accountPageSpinning=false; 
-                }
-            })
+            if(localStorage.getItem('stockWatchAccountId')) {
+                let data = JSON.parse(localStorage.getItem('stockWatchAccountId'));
+                this.accountId = data.accountId;
+                this.selectaccountId = data.accountId;
+                this.dateValue = [moment(data.timeRange[0]),moment(data.timeRange[1])];
+                this.accountPageSpinning = false;
+            }
+            else {
+                getAction('/etl/reportAccountHourly/getMaxChargeAccountIdByUser',{                
+                    userId:this.userInfo().id,
+                }).then(res=>{
+                    if(res.success){
+                        // this.currentAccount=res.result;
+                        this.accountId=res.result;
+                        this.selectaccountId=res.result;
+                        this.accountPageSpinning=false;
+                    }else{
+                        // this.$message.error(res.message)
+                        this.accountPageSpinning=false; 
+                    }
+                })
+            }
+            
          
         },
         filters:{

+ 261 - 0
src/views/modules/stockWatch/modules/keep-manage/keep-manage-data.js

@@ -0,0 +1,261 @@
+/**
+ * @file 盯盘基础展示数据
+ * @author zhuxinbo(zhuxinbo@c-top.com.cn)
+ */
+import moment from 'moment'
+class keepPersonServer {
+    constructor() {}
+
+    // 固定不可删除的列-账户
+    setNoDeleteColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                scopedSlots: { customRender: 'authName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },
+            {
+                title: '运营人员',
+                dataIndex: 'realname',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '消耗',
+                dataIndex: 'cost',
+                scopedSlots: { customRender: 'cost' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '余额',
+                dataIndex: 'totalBalance',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '预算',
+                dataIndex: 'budget',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+                customRender: function (text) {
+                    if (text>0) {
+                        return text
+                    } else {
+                        return '不限制预算'
+                    }
+                },
+            }
+        ]
+    }
+
+    // 固定不可删除的列-项目
+    setNoDeleteProjectColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'projectName',
+                scopedSlots: { customRender: 'projectName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'accountCount',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '运营人数',
+                dataIndex: 'userCount',
+                scopedSlots: { customRender: 'userCount' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '花费',
+                dataIndex: 'cost',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            }
+        ]
+    }
+
+    // 默认初始展示列
+    setDefaultColumns() {
+        return [
+            {
+                title: '封面曝光数',
+                dataIndex: 'photoShow',
+                tip: '广告在瀑布流被观看次数',
+                align: 'center',
+                scopedSlots: { customRender: 'photoShow' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击数',
+                dataIndex: 'photoClick',
+                tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'photoClick' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击率',
+                dataIndex: 'clickRate',
+                tip: '封面点击数占封面展示数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'clickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '素材曝光数',
+                dataIndex: 'aClick',
+                tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'aClick' },
+                sorter: () => {},
+            },
+            {
+                title: '行为数',
+                dataIndex: 'bClick',
+                tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'bClick' },
+                sorter: () => {},
+            },
+        
+            {
+                title: '行为率',
+                dataIndex: 'bClickRate',
+                tip: '行为数占素材曝光数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'bClickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '平均千次封面曝光花费(元)',
+                dataIndex: 'cpm',
+                tip: '花费/封面曝光数*1000',
+                align: 'center',
+                scopedSlots: { customRender: 'cpm' },
+                sorter: () => {},
+            },
+            {
+                title: '平均封面点击单价(元)',
+                dataIndex: 'cpc',
+                tip: '花费/封面点击数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpc' },
+                sorter: () => {},
+            },
+            {
+                title: '平均行为单价(元)',
+                dataIndex: 'cpb',
+                tip: '总花费/行为数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpb' },
+                sorter: () => {},
+            },
+        ]
+    }
+
+    //时间段筛选
+    setTimeRange() {
+        return {
+            昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+            // 今天: [moment(), moment()],
+    
+            近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
+            近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+            近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
+            近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
+            近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
+            近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
+        }
+    }
+
+    //运营人员表格字段
+    setOperateField() {
+        return  [
+            {
+                title: '运营人员',
+                dataIndex: 'realName',
+                scopedSlots: { customRender: 'realName' },
+                align: 'center',
+                key: 'date',
+                width: 100,
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'accountCount',
+                align: 'center',
+                width: 100,
+            },
+            {
+                title: '消耗',
+                dataIndex: 'charge',
+                scopedSlots: { customRender: 'charge' },
+                align: 'center',
+                width: 150,
+            },
+            {
+                title: '本周消耗',
+                dataIndex: 'weekCharge',
+                align: 'center',
+                width: 150,
+            },
+            {
+                title: '消耗环比',
+                dataIndex: 'grew',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            },
+            {
+                title: '有效素材数',
+                dataIndex: 'effectiveCount',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            },
+            {
+                title: '新上计划数',
+                dataIndex: 'campaignCount',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            },
+            {
+                title: '新上组数',
+                dataIndex: 'unitCount',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            }
+        ]
+    }
+
+
+}
+
+export default new keepPersonServer();

+ 157 - 2
src/views/modules/stockWatch/modules/keep-manage/keep-manage.less

@@ -1,3 +1,158 @@
 .keep-manage-content {
-    
-}
+    /deep/ .keep-manage-col {
+        min-height: 300px;
+        margin-bottom: 20px;
+    }
+    .echarts-card {
+        /deep/  .ant-card-body {
+            padding: 0;
+        }
+    }
+    .keep-person-content {
+        .person-content-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 60px;
+            background: #fff;
+            padding: 0 20px;
+            .content-title-acount {
+                font-size: 20px;
+            }
+            .content-title-checkout {
+                .title-checkout-custom {
+                    cursor: pointer;
+                }
+                .title-checkout-time {
+                    margin-left: 20px;
+                }
+            }
+        }
+        .pagin-table-class {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+    }
+    .title-checkout-select {
+        /deep/ .ant-select-enabled {
+            width: 150px;
+            margin-left: 10px;
+        }
+        
+    }
+    .accountIndexEchart {
+        width: 100%;
+        height: 315px;
+        margin: 0 auto;
+    }
+    .card-content {
+        min-height: 400px;
+        max-height: 400px;
+        h2 {
+            display: flex;
+            justify-content: space-between;
+            .no-person {
+                color: rgb(0,153,255);
+                font-size: 36px;
+                font-weight: bold;
+                line-height: 37px;
+            }
+        }
+        h1 {
+            text-align: center;
+            font-size: 40px;
+        }
+        .header-left-title {
+            height: 50px;
+            line-height: 50px;
+            font-size: 20px;
+            .left-title-radio {
+                margin-left: 30px;
+                color: #1afa29;
+                .title-radio-img {
+                    width: 25px;
+                    height: 25px;
+                    margin-bottom: 5px;
+                    margin-right: 5px;
+                    transform: rotate(180deg);
+                }
+            }
+            .left-title-radio-down {
+                margin-left: 30px;
+                color: #d81e06;
+                .title-radio-img {
+                    width: 25px;
+                    height: 25px;
+                    margin-bottom: 5px;
+                    margin-right: 5px;
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        @media (max-width: 1450px) {
+            .left-title-radio { 
+                margin-left: -15px!important;
+            }
+            .left-title-radio-down {
+                margin-left: -15px!important;
+            }
+            .no-person {
+                color: rgb(0,153,255);
+                font-size: 25px!important;
+                font-weight: bold;
+                line-height: 35px!important;
+            }
+        }
+        .header-left-title-else {
+            font-size: 16px;
+            display: flex;
+            line-height: 30px;
+            /deep/ .anticon {
+                line-height: 37px;
+            }
+            .title-label {
+                width: 100px;
+                text-align: right;
+                margin-right: 30px;
+            }
+            .left-title-radio {
+                color: #1afa29;
+                .title-radio-img {
+                    width: 25px;
+                    height: 25px;
+                    margin-bottom: 5px;
+                    margin-right: 5px;
+                    transform: rotate(180deg);
+                }
+            }
+            .left-title-radio-down {
+                color: #d81e06;
+                .title-radio-img {
+                    width: 25px;
+                    height: 25px;
+                    margin-bottom: 5px;
+                    margin-right: 5px;
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+    .between-row {
+        margin-bottom: 20px;
+    }
+}
+
+#outTable {
+    /deep/ .ant-table-header-column {
+        word-break: break-all; 
+        font-size: 14px; 
+        font-weight: 600
+    }
+   
+}
+/deep/ .ant-card-extra {
+    padding: 0!important;
+}
+
+

+ 808 - 2
src/views/modules/stockWatch/modules/keep-manage/keep-manage.vue

@@ -1,11 +1,817 @@
 <template>
     <div class="keep-manage-content">
-        这个是运营经理的页面
+        <a-spin :spinning="accountPageSpinning">
+            <a-row :gutter="24">
+                <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
+                    <a-card title="数据趋势" class="card-content echarts-card">
+                        <div class="person-content-title" slot="extra">
+                            <div class="content-title-acount"></div>
+                            <div class="content-title-checkout">
+                                <span class="title-checkout-time">
+                                    <a-range-picker
+                                    v-model="dateEchart"
+                                    :ranges="dateRanges"
+                                    :disabled-date="disabledDate"
+                                    @change="setDataQuery"
+                                    />
+                                </span>
+                                <span class="title-checkout-select">
+                                    <a-select v-model="selectValue" @change="getQueryNewlyData">
+                                        <a-select-option value="charge">花费</a-select-option>
+                                        <a-select-option value="campaign" :disabled="checkDisabled">新上计划数</a-select-option>
+                                        <a-select-option value="unit" :disabled="checkDisabled">新上组数</a-select-option>
+                                    </a-select>
+                                </span>
+                            </div>
+                        </div>
+                        <div style="float:right;margin:10px">
+                            更新时间:{{updateAccountEchart||'-'}}
+                        </div>
+                        <div class="accountIndexEchart" id="accountIndexEchart" ref="accountIndexEchart" :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }">
+                            <a-empty  />
+                        </div>
+                    
+                    </a-card>
+                </a-col>
+                <a-col :sm="6" :md="6" :xl="6"  class="keep-manage-col">
+                    <a-card class="card-content" v-if="personData">
+                        <h2>
+                            <span>你好!{{personData.realName||'-'}}</span>
+                            <span class="no-person">NO.{{personData.rank||'-'}}</span>
+                        </h2>
+                        <div class="header-left-title">
+                            <span>
+                                今日消耗:
+                            </span>
+                            <span class="left-title-radio" v-if="personData && personData.grew < 0">
+                                <img class="title-radio-img" src="@/assets/up.png" alt="">
+                                {{  personData.grew + '%'  }}
+                            </span>
+                            <!-- TODO 这个是下降的样式,后续优化  -->
+                            <span class="left-title-radio-down" v-else-if="personData && personData.grew >= 0">
+                                <img class="title-radio-img" src="@/assets/down.png" alt="">
+                                {{ personData.grew + '%' }}
+                            </span>
+                            <a-tooltip class="">
+                                <template slot="title">
+                                截止此时今日与昨日的花费同比
+                                </template>
+                                <a-icon type="question-circle" />
+                            </a-tooltip>
+                        </div>
+                        <h1><span v-if="personData">{{personData.charge | decimalsHandle}}</span><span v-else>-</span></h1>
+                        <div class="header-left-title-else">
+                            <span class="title-label">账户数:</span>
+                            <span>
+                                {{ personData.accouuntCount }}
+                            </span>
+                        </div>
+                        <div class="header-left-title-else">
+                            <span class="title-label">本周消耗:</span>
+                            <span>
+                                {{ personData.weekCharge }}
+                            </span>
+                        </div>
+                        <div class="header-left-title-else">
+                            <span class="title-label">上周消耗:</span>
+                            <span>
+                                {{ personData.lweekCharge }}
+                            </span>
+                        </div>
+                        <div class="header-left-title-else">
+                            <span class="title-label">
+                                周消耗环比:
+                            </span>
+                            <span class="left-title-radio" v-if="personData && personData.weekGrew < 0">
+                                {{ personData.weekGrew + '%'  }}
+                                <img class="title-radio-img" src="@/assets/up.png" alt="">
+                            </span>
+                            <!-- TODO 这个是下降的样式,后续优化  -->
+                            <span class="left-title-radio-down" v-else-if="personData && personData.weekGrew >= 0">
+                                {{ personData.weekGrew + '%' }}
+                                <img class="title-radio-img" src="@/assets/down.png" alt="">
+                            </span>
+                        </div>
+                    </a-card>
+                </a-col>
+            </a-row>
+            <a-row :gutter="24" class="between-row">
+                <a-col>
+                    <a-card title="运营数据详情">
+                        <div class="person-content-title" slot="extra">
+                            <div class="content-title-acount"></div>
+                            <div class="content-title-checkout">
+                                <span class="title-checkout-time">
+                                    <a-range-picker
+                                    v-model="dateMiddle"
+                                    :ranges="dateRanges"
+                                    :disabled-date="disabledDate"
+                                    @change="getOperatingStaffDataList"
+                                    />
+                                </span>
+                            </div>
+                        </div>
+                        <a-table
+                        size="middle"
+                        :dataSource="echartsData"
+                        bordered
+                        id="outTable"
+                        :pagination="echartsIpagination"
+                        :loading="echartsLoading"
+                        ref="accountTable"
+                        >
+                            <a-table-column key="realName" data-index="realName" title="运营人员" align="center">
+                                <template slot-scope="tags,records">
+                                    <a @click="toPerson(records)">
+                                        {{ tags }}
+                                    </a>
+                                </template>
+                            </a-table-column>
+                            <a-table-column key="accountCount" data-index="accountCount" title="账户数量"  align="center"/>
+                            <a-table-column key="charge" data-index="charge" title="花费"  align="center"/>
+                            <a-table-column key="weekCharge" data-index="weekCharge"  align="center">
+                                <span slot="title">本周花费 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        最近本周(周一到周日)广告账户花费
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                            <a-table-column key="grew" data-index="grew"  align="center">
+                                <span slot="title">花费环比 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        本周与上周的消耗环比
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                            <a-table-column key="effectiveCount" data-index="effectiveCount" title="有效素材数"  align="center"/>
+                            <a-table-column key="campaignCount" data-index="campaignCount"  align="center">
+                                <span slot="title">新上计划数 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        显示数据为昨日新建计划数
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                            <a-table-column key="unitCount" data-index="unitCount"  align="center">
+                                <span slot="title">新上组数 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        显示数据为昨日新建广告组数
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                        </a-table>
+                    </a-card>
+                </a-col>
+            </a-row>
+            <a-card :title="typeValue === 'project' ? '项目列表' : '账户列表'">
+                <div class="keep-person-content" slot="extra">
+                    <div class="person-content-title">
+                        <div class="content-title-acount"></div>
+                        <div class="content-title-checkout">
+                            <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
+                            <span class="title-checkout-time">
+                                <a-range-picker
+                                v-model="dateValue"
+                                :ranges="dateRanges"
+                                :disabled-date="disabledDate"
+                                @change="getPersonList()"
+                                />
+                            </span>
+                            <span class="title-checkout-time">
+                                <a-radio-group v-model="typeValue" @change="checkOutType">
+                                    <a-radio-button value="project">
+                                    项目
+                                    </a-radio-button>
+                                    <a-radio-button value="account">
+                                    账户
+                                    </a-radio-button>
+                                </a-radio-group>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <a-table
+                    size="middle"
+                    :columns="columns"
+                    :dataSource="dataSource"
+                    bordered
+                    id="outTable"
+                    :pagination="ipagination"
+                    :scroll="{ x: scrollX }"
+                    :loading="loading"
+                    ref="accountTable"
+                    @change="sort"
+                    v-if="showChange"
+                >
+                <!-- style="word-break: break-all; font-size: 16px; font-weight: 600" -->
+                    <a slot="projectName" slot-scope="text,records" @click="toAccount(records)">{{ text }}</a>
+                    <a slot="authName" slot-scope="text,records" @click="toDetail(records)">{{ text }}</a>
+                    <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                    <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
+                    <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
+                    <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
+                    <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
+                    <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
+                    <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
+                    <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
+                    <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
+                    <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                    <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
+                    <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
+                    <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
+                    <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
+                    <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
+                    <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
+                    <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
+                    <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
+                    <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
+                    <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
+                    <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
+                    <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
+                    <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
+                    <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
+                    <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                    <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
+                    eventCreditGrantLandingPage | formatCurrency
+                    }}</span>
+                    <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
+                    <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
+                    eventCreditGrantLandingPageCost | decimalsHandle
+                    }}</span>
+                    <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
+                    <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
+                    eventCreditGrantLandingPageRate | toPercentage
+                    }}</span>
+                    <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
+                    play25FeedBreakRate | toPercentage
+                    }}</span>
+                    <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
+
+                    <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
+                    <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
+                    <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                    <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
+                    <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
+                    <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                    <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
+                    <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
+                    <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
+                    <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                    <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
+                    <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
+                    <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                    <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
+                    gameAddictionCost | decimalsHandle
+                    }}</span>
+                    <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
+                    downloadFinishCost | decimalsHandle
+                    }}</span>
+                    <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
+                    downloadStartCost | decimalsHandle
+                    }}</span>
+                    <span slot="installFinishCost" slot-scope="installFinishCost">{{
+                    installFinishCost | decimalsHandle
+                    }}</span>
+                    <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
+
+                    <span slot="downloadStartRate" slot-scope="downloadStartRate">{{ downloadStartRate | toPercentage }}</span>
+                    <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
+                    downloadFinishRate | toPercentage
+                    }}</span>
+                    <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                    <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
+                    activeRegisterRate | toPercentage
+                    }}</span>
+                    <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{ gameAddictionRate | toPercentage }}</span>
+                    <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
+                </a-table>
+            </a-card>
+        </a-spin>
+        <customColumn
+            :visible="visible"
+            :listNum="listNum"
+            :fiexColumn="columnsFixd"
+            :mediaType="2"
+            @closeCustomColumn="closeCustomColumn"
+            @changeColumn="changeColumn"
+        />
     </div>
 </template>
 <script>
+import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
+import keepPersonData from './keep-manage-data';
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+// 引入基本模板
+var echarts = require('echarts');
+// 引入柱状图组件
+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');
 export default {
-    name: 'keep-manage'
+    name: 'keep-manage',
+    components: {
+        customColumn
+    },
+    data() {
+        return {
+            accountPageSpinning: false,
+            typeValue: 'project',
+            selectValue: 'charge',
+            loading: false,
+            totalAll: 100,
+            projectId: null,
+            dataSource: [],
+            showChange: true,
+            url: '/etl/reportAccountHourly/projectList',
+            listNum: [],
+            visible: false,
+            columns: [...keepPersonData.setNoDeleteProjectColumns() , ...keepPersonData.setDefaultColumns()],
+            echartsColumns: [...keepPersonData.setOperateField()],
+            echartsData: [],
+            columnsFixd: keepPersonData.setNoDeleteProjectColumns(),
+            scrollX: 1500,
+            personData: null,
+            dateEchart: [moment(), moment()],
+            dateMiddle: [moment(), moment()],
+            dateValue: [moment(), moment()],
+            dateRanges: keepPersonData.setTimeRange(),
+            target: 'cost',
+            order: 'descend',
+            clientWidth: 0,
+            updateAccountEchart: null,
+            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
+                },
+            },
+            echartsLoading: false,
+            echartsIpagination: {
+                current: 1,
+                pageSize: 5,
+                //   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.echartsIpagination.current = current
+                    this.echartsIpagination.pageSize = pageSize
+                },
+            },
+        }
+    },
+    computed: {
+        checkDisabled() {
+            if(this.dateEchart.length === 2&&
+            moment(this.dateEchart[0]).format('YYYY-MM-DD') === moment(this.dateEchart[1]).format('YYYY-MM-DD')) {
+               return true
+            }
+            else {
+                return false
+            }
+        }
+    },
+    methods: {
+        ...mapGetters(["userInfo"]),
+        
+        sort(pagination, filters, sorter, { currentDataSource }) {
+            // console.log(pagination, filters, sorter)
+            this.ipagination.current = pagination.current
+            this.ipagination.pageSize = pagination.pageSize
+            if (sorter.order) {
+                this.order = sorter.order ? sorter.order : 'descend'
+                this.target = sorter.columnKey
+                this.getPersonList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
+            }
+        },
+        disabledDate(current) {
+            return current && current > moment().endOf('day')
+        },
+        handleDataPicker(date, dateString) {
+            console.log(date, dateString, '-------');
+        },
+        handleCustomClick () {
+            this.visible = true
+            this.listNum = [...this.columns]
+        },
+        onShowSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'current, pageSize');
+        },
+        handleCauseSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'size-size');
+        },
+        handleCancelClick(status) {
+            this.isCustomVisible = status;
+        },
+        //自定义列相关
+        closeCustomColumn() {
+            this.visible = false
+        },
+        changeColumn(val) {
+            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 = 0
+            } 
+            else if (this.columns.length >= 8) {
+                this.columns.forEach((element, index) => {
+                    if (index < this.columnsFixd.length) {
+                        element.width = 150
+                        element.fixed = 'left'
+                    }
+                })
+
+                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
+            } 
+            else {
+                this.scrollX = 0
+                this.columns.forEach((element) => {
+
+                    element.width = 'auto'
+                    element.fixed = false
+                    
+                })
+            }
+
+            let arr = JSON.stringify(this.columns)
+            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+                json: arr,
+                columnType: this.typeValue === 'project' ? 15 : 16,
+            }).then((res) => {
+            })
+        },
+        showColumn() {
+            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
+                columnType: this.typeValue === 'project' ? 15 : 16,
+            }).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 >= this.columnsFixd.length) {
+                        columns.map((item, index) => {
+                        if (index > this.columnsFixd.length - 1) {
+                            item.sorter = function (a, b) {}
+                        }
+                        })
+                        columns = columns.slice(this.columnsFixd.length)
+                        this.columns = [...this.columnsFixd, ...columns]
+
+                        // this.tableHandle()
+                    }
+
+                    // console.log(this.columns)
+                    }
+                }
+
+                this.changeColumn(this.columns)
+                }
+            })
+        },
+        //自定义列结束
+
+        //获取个人绩效
+        getPersonAchievements() {
+            let params = {};
+            params.userId = this.userInfo().id;
+            this.getAction('/etl/reportAccountHourly/personalAchievements', params).then(res => {
+                this.accountPageSpinning = false;
+                if(res.success) {
+                    this.personData = res.result;
+                }
+                else {
+                    this.$message.error(res.message);
+                }
+            }).catch(error => {
+                this.accountPageSpinning = false;
+                console.log(error, 'eeee');
+            });
+        },
+
+        //切换列表账户项目选项
+        checkOutType() {
+            this.showChange = false;
+            this.projectId = null;
+            this.ipagination.current = 1
+            if(this.typeValue === 'account') {
+                this.url = '/etl/reportAccountHourly/leaderAccountPageList';
+                this.columns = [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()];
+                this.columnsFixd = keepPersonData.setNoDeleteColumns();
+            }
+            else {
+                this.url = '/etl/reportAccountHourly/projectList';
+                this.columns = [...keepPersonData.setNoDeleteProjectColumns() , ...keepPersonData.setDefaultColumns()];
+                this.columnsFixd = keepPersonData.setNoDeleteProjectColumns();
+            }
+            this.showChange = true;
+            this.showColumn();
+            this.getPersonList();
+        },
+
+        //点击项目查看账户
+        toAccount(item) {
+            this.showChange = false;
+            this.projectId = item.projectId;
+            this.ipagination.current = 1
+            this.typeValue = 'account';
+            this.url = '/etl/reportAccountHourly/leaderAccountPageList';
+            this.columns = [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()];
+            this.columnsFixd = keepPersonData.setNoDeleteColumns();
+            this.showChange = true;
+            this.getPersonList();
+        },
+
+        //跳转个人页面
+        toPerson(records) {
+            let params = {};
+            params.person = records.userId;
+            params.timeRange = this.dateMiddle;
+            localStorage.setItem('stockWatchUserId',JSON.stringify(params));
+            this.$nextTick(() => {
+                this.$router.push('/modules/stockWatch/modules/keep-person/keep-person?person=' + records.userId );
+            })
+        },
+
+        //点击跳转盯盘详情页
+        toDetail(item) {
+            let params = {};
+            params.accountId = item.accountId;
+            params.timeRange = this.dateValue;
+            localStorage.setItem('stockWatchAccountId',JSON.stringify(params));
+            this.$nextTick(() => {
+                this.$router.push('/modules/stockWatch/accountPage');
+            })
+            
+        },
+
+        //获取列表
+        getPersonList(data) {
+            this.loading = true;
+            let params = {};
+            params.userId = this.userInfo().id;
+            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null;
+            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null;
+            params.pageNo = this.ipagination.current;
+            params.pageSize = this.ipagination.pageSize;
+            
+            if( this.typeValue === 'account' ) {
+                params.projectId = this.projectId
+            }
+
+            if (data) {
+                params.sortCode = data.target
+                if (data.order == 'descend') {
+                    params.sortType = 'DESC'
+                } 
+                else {
+                    params.sortType = 'ASC'
+                }
+            } 
+            else {
+                params.sortCode = this.target
+                params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
+            }
+            this.postDataAction(this.url,params).then(res => {
+                this.loading = false;
+                if(res.success) {
+                    this.dataSource = res.result.list
+                    this.ipagination.total = res.result.total
+                }
+            })
+        },
+
+        //获取运营人员详情列表
+        getOperatingStaffDataList() {
+            this.echartsLoading = true;
+            let params = {};
+            params.startTime = this.dateMiddle.length === 2 ? moment(this.dateMiddle[0]).format('YYYY-MM-DD') : null;
+            params.endTime = this.dateMiddle.length === 2 ? moment(this.dateMiddle[1]).format('YYYY-MM-DD') : null;
+            params.pageNo = this.echartsIpagination.current;
+            params.pageSize = this.echartsIpagination.pageSize;
+            params.userId = this.userInfo().id;
+            // echartsData
+            this.postDataAction('/etl/reportAccountHourly/operatingStaffDataList',params).then(res => {
+                this.echartsLoading = false;
+                if(res.success) {
+                    this.echartsData = res.result.list
+                    this.echartsIpagination.total = res.result.total
+                }
+                else {
+                    this.$message.error(res.message)
+                }
+            }).catch(error => {
+                this.echartsLoading = false;
+                console.log(error)
+            })
+        },
+
+        //单日数据只查询花费判断
+        setDataQuery() {
+            if(this.dateEchart.length === 2
+            &&
+            moment(this.dateEchart[0]).format('YYYY-MM-DD') === moment(this.dateEchart[1]).format('YYYY-MM-DD')) {
+                this.$message.warning('单日数据只查询花费')
+                this.selectValue = 'charge'
+            }
+            this.getQueryNewlyData()
+        },
+
+
+
+        //趋势图数据接口
+        getQueryNewlyData() {
+            let params = {};
+            params.userId = this.userInfo().id;
+            params.parameterCode = this.selectValue;
+            params.startTime = this.dateEchart.length === 2 ? moment(this.dateEchart[0]).format('YYYY-MM-DD') : null;
+            params.endTime = this.dateEchart.length === 2 ? moment(this.dateEchart[1]).format('YYYY-MM-DD') : null;
+            this.postDataAction('/etl/reportAccountHourly/queryNewlyData',params).then(res => {
+                if(res.success){
+                    this.initEchart('accountIndexEchart',this.initAccountIndexEchart(res.result.data))
+                    this.updateAccountEchart = res.result.updateTime
+                }
+            }).catch(error => {
+                console.log(error)
+            })
+        },
+
+        //趋势图echarts配置
+        initAccountIndexEchart(data){
+            // let type='激活'
+            // console.log(res);(data)
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    
+                },
+                grid:{
+                    x: this.clientWidth>1100?'6%':'8%',
+                    width: '90%',
+                    y: '12%',
+                    bottom: '25px',
+                    right: '15px'
+
+                },
+                xAxis: [{
+                    data: data.map(item => {
+                        if(this.checkDisabled) {
+                            return (item.time >= 10 ? item.time: '0' + item.time)+ ':00'
+                        }
+                        else {
+                            return item.time
+                        }
+                        
+                    }), 
+                    axisLine: {
+                        lineStyle: {
+                            color: '#ddd'
+                        }
+                    },
+                    axisTick: {
+                        show: true
+                    },
+                    axisLabel: {
+                        show:true,
+                        textStyle: {
+                            color: '#c56790'
+                        },
+                    },
+                    boundaryGap: true
+                    
+      
+                }],
+                yAxis: [{
+                    type: 'value',
+                    show:true,
+                }],
+                series: [
+                    {
+                        name: this.selectValue === 'campaign'
+                        ?'上新计划数':this.selectValue === 'unit'
+                        ?'上新组数':'花费',
+                        data: data.map(item => {
+                            return item.value
+                        }),
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'circle',
+                        lineStyle: {                               
+                            color: '#007AFF',   
+                            width: 3,
+                        },
+                        itemStyle:{
+                            color:'#007AFF',
+                            borderWidth:2,
+                            borderColor:'#fff'
+                        },
+                        areaStyle: {
+                            color:{
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: '#007AFF' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'white' // 100% 处的颜色
+                                }],
+                            }
+                        }
+                    },
+                
+                ]
+            };
+
+            return option
+        },  
+        //获取echart的值
+        initEchart(idName, optionName) {
+            let that = this;
+            const chart = this.$refs[idName]
+            //   // console.log(res);(chart)
+            if (chart) {
+                const myChart = echarts.init(document.getElementById(idName))
+                // myChart.showLoading({
+                //     text: "图表数据正在努力加载..."
+                // });
+                myChart.clear()
+                myChart.setOption(optionName)
+                window.addEventListener('resize', function() {
+                    that.clientWidth = document.documentElement.clientWidth - 224
+                    myChart.resize()
+                })
+            }
+        },
+    },
+    watch: {
+        'ipagination.current':function(n,o) {
+            if(n !== o) {
+                this.getPersonList()
+            }
+        },
+        'echartsIpagination.current':function(n,o) {
+            if(n !== o) {
+                this.getOperatingStaffDataList()
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.accountPageSpinning = true
+            this.clientWidth = document.documentElement.clientWidth - 224
+            this.showColumn();
+            this.getPersonAchievements();
+            this.getPersonList();
+            this.getQueryNewlyData();
+            this.getOperatingStaffDataList();
+           
+        })
+    }
 };
 </script>
 <style lang="less" scoped>

+ 162 - 0
src/views/modules/stockWatch/modules/keep-person/keep-person-data.js

@@ -0,0 +1,162 @@
+/**
+ * @file 盯盘基础展示数据
+ * @author zhuxinbo(zhuxinbo@c-top.com.cn)
+ */
+import moment from 'moment'
+class keepPersonServer {
+    constructor() {}
+
+    // 固定不可删除的列
+    setNoDeleteColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                scopedSlots: { customRender: 'authName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },
+            {
+                title: '运营人员',
+                dataIndex: 'realname',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '消耗',
+                dataIndex: 'cost',
+                scopedSlots: { customRender: 'cost' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '余额',
+                dataIndex: 'totalBalance',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '预算',
+                dataIndex: 'budget',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+                customRender: function (text) {
+                    if (text>0) {
+                        return text
+                    } else {
+                        return '不限制预算'
+                    }
+                },
+            }
+        ]
+    }
+
+    // 默认初始展示列
+    setDefaultColumns() {
+        return [
+            {
+                title: '封面曝光数',
+                dataIndex: 'photoShow',
+                tip: '广告在瀑布流被观看次数',
+                align: 'center',
+                scopedSlots: { customRender: 'photoShow' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击数',
+                dataIndex: 'photoClick',
+                tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'photoClick' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击率',
+                dataIndex: 'clickRate',
+                tip: '封面点击数占封面展示数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'clickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '素材曝光数',
+                dataIndex: 'aClick',
+                tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'aClick' },
+                sorter: () => {},
+            },
+            {
+                title: '行为数',
+                dataIndex: 'bClick',
+                tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'bClick' },
+                sorter: () => {},
+            },
+        
+            {
+                title: '行为率',
+                dataIndex: 'bClickRate',
+                tip: '行为数占素材曝光数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'bClickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '平均千次封面曝光花费(元)',
+                dataIndex: 'cpm',
+                tip: '花费/封面曝光数*1000',
+                align: 'center',
+                scopedSlots: { customRender: 'cpm' },
+                sorter: () => {},
+            },
+            {
+                title: '平均封面点击单价(元)',
+                dataIndex: 'cpc',
+                tip: '花费/封面点击数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpc' },
+                sorter: () => {},
+            },
+            {
+                title: '平均行为单价(元)',
+                dataIndex: 'cpb',
+                tip: '总花费/行为数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpb' },
+                sorter: () => {},
+            },
+        ]
+    }
+
+    //时间段筛选
+    setTimeRange() {
+        return {
+            昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+            // 今天: [moment(), moment()],
+    
+            近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
+            近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+            近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
+            近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
+            近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
+            近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
+        }
+    }
+
+
+}
+
+export default new keepPersonServer();

+ 18 - 0
src/views/modules/stockWatch/modules/keep-person/keep-person.less

@@ -29,6 +29,7 @@
                         height: 25px;
                         margin-bottom: 5px;
                         margin-right: 5px;
+                        transform: rotate(180deg);
                     }
                 }
                 .left-title-radio-down {
@@ -39,6 +40,7 @@
                         height: 25px;
                         margin-bottom: 5px;
                         margin-right: 5px;
+                        transform: rotate(180deg);
                     }
                 }
             }
@@ -59,6 +61,7 @@
                         height: 25px;
                         margin-bottom: 5px;
                         margin-right: 5px;
+                        transform: rotate(180deg);
                     }
                     .msg-ranking {
                         font-size: 30px;
@@ -98,5 +101,20 @@
             justify-content: flex-end;
             margin-top: 20px;
         }
+
     }
 }
+
+#outTable {
+    /deep/ .ant-table-header-column {
+        word-break: break-all; 
+        font-size: 14px; 
+        font-weight: 600
+    }
+   
+}
+/deep/ .ant-card-extra {
+    padding: 0!important;
+}
+
+

+ 354 - 71
src/views/modules/stockWatch/modules/keep-person/keep-person.vue

@@ -2,127 +2,274 @@
     <div class="keep-person-main">
         <div class="keep-person-header">
             <div class="person-header-left">
-                <div class="header-left-img"><img src="@/assets/daiban.png" alt=""></div>
+                <div class="header-left-img"><img src="@/assets/touxiang.png" alt=""></div>
                 <div>
-                    <div class="header-left-title">早安,antdesign,祝你开心每一天</div>
+                    <div class="header-left-title">你好,{{ personData ? personData.realName : 'admin' }},祝你开心每一天</div>
                     <div class="header-left-title">
                         <span>今日消耗:</span>
-                        <span>1000000</span>
-                        <span class="left-title-radio"><img class="title-radio-img" src="@/assets/up.png" alt="">10.765%</span>
+                        <span>{{ personData ? personData.charge : '-' }}</span>
+                        <span class="left-title-radio" v-if="personData && personData.grew < 0">
+                            <img class="title-radio-img" src="@/assets/up.png" alt="">
+                            {{ personData.grew ? personData.grew + '%' : '-' }}
+                        </span>
                         <!-- TODO 这个是下降的样式,后续优化  -->
-                        <!-- <span class="left-title-radio-down"><img class="title-radio-img" src="@/assets/down.png" alt="">10.765%</span> -->
+                        <span class="left-title-radio-down" v-else-if="personData && personData.grew >= 0">
+                            <img class="title-radio-img" src="@/assets/down.png" alt="">
+                            {{personData.grew ? personData.grew + '%':'-'}}
+                        </span>
+                        <a-tooltip>
+                            <template slot="title">
+                            截止此时今日与昨日的消耗同比
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip>
                     </div>
                 </div>
             </div>
             <div class="person-header-right">
                 <div class="header-right-msg">
-                    <div class="right-msg-class">周消耗环比</div>
-                    <div class="right-msg-class msg-class-up"><img class="title-radio-img" src="@/assets/up.png" alt="">23.98%</div>
-                    <!-- <div class="right-msg-class msg-class-down"><img class="title-radio-img" src="@/assets/down.png" alt="">23.98%</div> -->
+                    <div class="right-msg-class">周消耗环比
+                        <a-tooltip>
+                            <template slot="title">
+                            本周与上周的消耗环比
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip>
+                    </div>
+                    <div class="right-msg-class msg-class-up" v-if="personData && personData.weekGrew < 0">
+                        <img class="title-radio-img" src="@/assets/up.png" alt="">
+                        {{ personData.weekGrew ? personData.weekGrew + '%' : '-' }}
+                    </div>
+                    <div class="right-msg-class msg-class-down" v-else-if="personData && personData.weekGrew >= 0">
+                        <img class="title-radio-img" src="@/assets/down.png" alt="">
+                        {{ personData.weekGrew ? personData.weekGrew + '%' : '-' }}
+                    </div>
                 </div>
                 <div class="header-right-msg">
                     <div class="right-msg-class">本周消耗</div>
-                    <div class="right-msg-class">4356345635</div>
+                    <div class="right-msg-class">{{ personData ? personData.weekCharge : '-' }}</div>
                 </div>
                 <div class="header-right-msg">
                     <div class="right-msg-class">上周消耗</div>
-                    <div class="right-msg-class">45654567567</div>
+                    <div class="right-msg-class">{{ personData ? personData.lweekCharge : '-' }}</div>
                 </div>
                 <div class="header-right-msg">
                     <div class="right-msg-class">团队内排名</div>
-                    <div class="right-msg-class"><span class="msg-ranking">8</span> / 24</div>
+                    <div class="right-msg-class">
+                        <span class="msg-ranking">{{ personData ? personData.rank : '-' }}</span> 
+                        /{{ personData ? personData.total : '-' }}
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="keep-person-content">
-            <div class="person-content-title">
-                <div class="content-title-acount">账户列表</div>
-                <div class="content-title-checkout">
-                    <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
-                    <span class="title-checkout-time"><a-date-picker @change="handleDataPicker" /></span>
+        <a-card title="账户列表">
+            <div class="keep-person-content" slot="extra">
+                <div class="person-content-title" >
+                    <div class="content-title-acount"></div>
+                    <div class="content-title-checkout">
+                        <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
+                        <span class="title-checkout-time">
+                            <a-range-picker
+                            v-model="dateValue"
+                            :ranges="dateRanges"
+                            :disabled-date="disabledDate"
+                            @change="getPersonList()"
+                            />
+                        </span>
+                    </div>
                 </div>
+
             </div>
             <a-table
-                ref="table"
                 size="middle"
-                bordered
                 :columns="columns"
                 :dataSource="dataSource"
-                :pagination="false"
+                bordered
+                id="outTable"
+                :pagination="ipagination"
+                :scroll="{ x: scrollX }"
+                :loading="loading"
+                ref="accountTable"
+                @change="sort"
             >
-                <span slot="action" slot-scope="text, record">
-                    <a @click="handleEdit(record)">推送</a>
-                    <a-divider type="vertical" />
-                    <a @click="handleDelete(record)">删除</a>
-                </span>
-                <span slot="cause" slot-scope="text, record">
-                    <a class="cause-text-class" @click="handleCause(record)">{{ text }}</a>
-                </span>
-                <span slot="depRelax" slot-scope="text, record">
-                    <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
-                </span>
-                <span slot="acountRelax" slot-scope="text, record">
-                    <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
-                </span>
+            <!-- style="word-break: break-all; font-size: 16px; font-weight: 600" -->
+                <a slot="authName" slot-scope="text,records" @click="toDetail(records)">{{ text }}</a>
+                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
+                <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
+                <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
+                <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
+                <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
+                <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
+                <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
+                <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
+                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
+                <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
+                <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
+                <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
+                <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
+                <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
+                <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
+                <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
+                <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
+                <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
+                <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
+                <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
+                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
+                <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
+                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
+                eventCreditGrantLandingPage | formatCurrency
+                }}</span>
+                <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
+                <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
+                eventCreditGrantLandingPageCost | decimalsHandle
+                }}</span>
+                <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
+                <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
+                eventCreditGrantLandingPageRate | toPercentage
+                }}</span>
+                <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
+                play25FeedBreakRate | toPercentage
+                }}</span>
+                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
+
+                <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
+                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
+                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
+                <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
+                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
+                <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
+                <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
+                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
+                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
+                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
+                gameAddictionCost | decimalsHandle
+                }}</span>
+                <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
+                downloadFinishCost | decimalsHandle
+                }}</span>
+                <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
+                downloadStartCost | decimalsHandle
+                }}</span>
+                <span slot="installFinishCost" slot-scope="installFinishCost">{{
+                installFinishCost | decimalsHandle
+                }}</span>
+                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
+
+                <span slot="downloadStartRate" slot-scope="downloadStartRate">{{ downloadStartRate | toPercentage }}</span>
+                <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
+                downloadFinishRate | toPercentage
+                }}</span>
+                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
+                activeRegisterRate | toPercentage
+                }}</span>
+                <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{ gameAddictionRate | toPercentage }}</span>
+                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
             </a-table>
-            <a-pagination
-                class="pagin-table-class"
-                :total="totalAll"
-                :show-total="total => `共 ${totalAll} 条`"
-                size="small"
-                show-size-changer
-                show-quick-jumper
-                @change="onShowSizeChange"
-                @showSizeChange="onShowSizeChange"
-            />
-        </div>
-        <custom-columns :visible="isCustomVisible" @cancelClick="handleCancelClick"></custom-columns>
+        </a-card>
+
+        <customColumn
+            :visible="visible"
+            :listNum="listNum"
+            :fiexColumn="columnsFixd"
+            :mediaType="2"
+            @closeCustomColumn="closeCustomColumn"
+            @changeColumn="changeColumn"
+        />
     </div>
 </template>
 <script>
-import CustomColumns from '../custom-columns/custom-columns';
+import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
+import keepPersonData from './keep-person-data';
+import { mapGetters } from 'vuex';
+import moment from 'moment'
 export default {
     name: 'keep-person',
     components: {
-        CustomColumns
+        customColumn
     },
     data() {
         return {
             isCustomVisible: false,
+            loading: false,
             totalAll: 100,
             dataSource: [],
-            columns: [
-                {
-                    title: '人群包名称',
-                    width: 200,
-                    ellipsis: true,
-                    dataIndex: 'orientationName'
-                },
-                {
-                    title: '人群包类型',
-                    align: 'center',
-                    dataIndex: 'populationType'
+            listNum: [],
+            visible: false,
+            columns: [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()],
+            columnsFixd: keepPersonData.setNoDeleteColumns(),
+            scrollX: 1500,
+            personData: null,
+            dateValue: [moment(), moment()],
+            dateRanges: keepPersonData.setTimeRange(),
+            target: 'cost',
+            order: 'descend',
+            ipagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                return range[0] + '-' + range[1] + ' 共' + total + '条'
                 },
-                {
-                    title: '匹配类型',
-                    align: 'center',
-                    dataIndex: 'typeStr'
+                showQuickJumper: true,
+                // showSizeChanger: true,
+                // pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.ipagination.current = current
+                    this.ipagination.pageSize = pageSize
                 },
-                {
-                    title: '上传时间',
-                    dataIndex: 'statDate',
-                    align: 'center'
-                }
-            ]
+            },
         };
     },
+    watch: {
+        'ipagination.current':function(n,o) {
+            if(n !== o) {
+                this.getPersonList()
+            }
+        }
+    },
     methods: {
+        ...mapGetters(["userInfo"]),
+        //点击跳转盯盘详情页
+        toDetail(item) {
+            let params = {};
+            params.accountId = item.accountId;
+            params.timeRange = this.dateValue;
+            localStorage.setItem('stockWatchAccountId',JSON.stringify(params));
+            this.$nextTick(() => {
+                this.$router.push('/modules/stockWatch/accountPage');
+            })
+            
+        },
+        sort(pagination, filters, sorter, { currentDataSource }) {
+            // console.log(pagination, filters, sorter)
+            this.ipagination.current = pagination.current
+            this.ipagination.pageSize = pagination.pageSize
+            if (sorter.order) {
+                this.order = sorter.order ? sorter.order : 'descend'
+                this.target = sorter.columnKey
+                this.getPersonList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
+            }
+        },
+        disabledDate(current) {
+            return current && current > moment().endOf('day')
+        },
         handleDataPicker(date, dateString) {
             console.log(date, dateString, '-------');
         },
         handleCustomClick () {
-            console.log('这个是自定义列的点击事件');
-            this.isCustomVisible = true;
+            this.visible = true
+            this.listNum = [...this.columns]
         },
         onShowSizeChange(current, pageSize) {
             console.log(current, pageSize, 'current, pageSize');
@@ -132,7 +279,143 @@ export default {
         },
         handleCancelClick(status) {
             this.isCustomVisible = status;
+        },
+        //自定义列相关
+        closeCustomColumn() {
+            this.visible = false
+        },
+        changeColumn(val) {
+            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 = 0
+            } 
+            else if (this.columns.length >= 8) {
+                this.columns.forEach((element, index) => {
+                    if (index < this.columnsFixd.length) {
+                        element.width = 150
+                        element.fixed = 'left'
+                    }
+                })
+
+                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
+            } 
+            else {
+                this.scrollX = 0
+                this.columns.forEach((element) => {
+
+                    element.width = 'auto'
+                    element.fixed = false
+                    
+                })
+            }
+
+            let arr = JSON.stringify(this.columns)
+            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+                json: arr,
+                columnType: 13,
+            }).then((res) => {
+                // console.log(res)
+            })
+        },
+        showColumn() {
+            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
+                columnType: 13,
+            }).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 >= this.columnsFixd.length) {
+                        columns.map((item, index) => {
+                        if (index > this.columnsFixd.length - 1) {
+                            item.sorter = function (a, b) {}
+                        }
+                        })
+                        columns = columns.slice(this.columnsFixd.length)
+                        this.columns = [...this.columnsFixd, ...columns]
+
+                        // this.tableHandle()
+                    }
+
+                    // console.log(this.columns)
+                    }
+                }
+
+                this.changeColumn(this.columns)
+                }
+            })
+        },
+        //自定义列结束
+
+        //获取个人绩效
+        getPersonAchievements() {
+            let params = {}
+            params.userId = this.$route.query.person ? this.$route.query.person : this.userInfo().id;
+            this.getAction('/etl/reportAccountHourly/personalAchievements', params).then(res => {
+                if(res.success) {
+                    this.personData = res.result
+                }
+                else {
+                    this.$message.error(res.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+
+        //获取列表
+        getPersonList(data) {
+            this.loading = true;
+            let params = {};
+            params.userId = this.$route.query.person ? this.$route.query.person : this.userInfo().id;;
+            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null;
+            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null;
+            params.pageNo = this.ipagination.current;
+            params.pageSize = this.ipagination.pageSize;
+
+            if (data) {
+                params.sortCode = data.target
+                if (data.order == 'descend') {
+                    params.sortType = 'DESC'
+                } 
+                else {
+                    params.sortType = 'ASC'
+                }
+            } 
+            else {
+                params.sortCode = this.target
+                params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
+            }
+            this.postDataAction('/etl/reportAccountHourly/accountPageList',params).then(res => {
+                this.loading = false;
+                if(res.success) {
+                    this.dataSource = res.result.list
+                    this.ipagination.total = res.result.total
+                }
+            })
         }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if(localStorage.getItem('stockWatchUserId')&&this.$route.query.person) {
+                let data = JSON.parse(localStorage.getItem('stockWatchUserId'));
+                this.dateValue = [moment(data.timeRange[0]),moment(data.timeRange[1])];
+            }
+            this.showColumn();
+            this.getPersonAchievements();
+            this.getPersonList();
+        })
     }
 };
 </script>

+ 1 - 1
vue.config.js

@@ -69,7 +69,7 @@ module.exports = {
     proxy: {
       '/jeecg-boot': {
           // target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-          // target: 'http://192.168.1.8:8081', //请求本地 需要jeecg-boot后台项目  蒙蒙
+          // target: 'http://192.168.1.3:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.62:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云