Browse Source

'账户报表改2'

魏志佳 5 years ago
parent
commit
7e667c4cc3

+ 8 - 1
src/components/DatePicker.vue

@@ -109,7 +109,7 @@ let pickOptions = [
 ]
 
 export default {
-  props: ['openOptions', 'left'],
+  props: ['openOptions', 'left','parentDate'],
   data() {
     return {
       moment,
@@ -120,6 +120,13 @@ export default {
     }
   },
   directives: { clickoutside },
+  watch: {
+    parentDate(n,o){
+        if(n[0].format('YYYY-MM-DD')!=this.dateValue[0].format('YYYY-MM-DD')){
+              this.dateValue=n
+        } 
+    }
+  },
   methods: {
     //日期改变事件
     onChange(date, dateString) {

+ 96 - 52
src/views/modules/Statistics/accountReport.vue

@@ -6,19 +6,18 @@
           <span>项目选择:</span>
           <a-tree-select
             v-model="treeValue"
-            style="width: 48%;height:30px"
+            style="width: 760px;height:30px"
+            :dropdownMatchSelectWidth='true'
             :tree-data="treeData"
             tree-checkable
             :show-checked-strategy="SHOW_PARENT"
             placeholder="请选择项目和账户"
             :allowClear="true"
             @change="treeChange"
-            :maxTagCount='2'
+            :maxTagCount='2'            
           />
-     
-     
       <div style="float:right"   @click="opendate">
-            <DatePicker :openOptions='openOptions' :left=left />
+            <DatePicker :openOptions='openOptions' :left=left :parentDate='dateValue' />
       </div>
       <div class="optionTow">
           <div class="optItem">
@@ -50,7 +49,7 @@
                 </a-tooltip>
             </div>
             <div class="infoNum">¥ 
-                <span class="red">{{costLink.cost | formatCurrency }}</span> 
+                <span class="red">{{costLink.cost | decimalsHandle }}</span> 
                 <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')" ><span class="huanbi">环比: </span> {{ costLink.CostSumLink|toPercentage  }}</span> 
             </div>
         </div>
@@ -65,7 +64,7 @@
                 </a-tooltip>
             </div>
             <div class="infoNum">¥ 
-               <span class="red">{{discountCostLink.discountCost | formatCurrency }}</span> 
+               <span class="red">{{discountCostLink.discountCost | decimalsHandle }}</span> 
                 <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ discountCostLink.discountCostLink|toPercentage  }}</span> 
             </div>
         </div>
@@ -153,7 +152,7 @@
                 ref="accountTable"
                 :width="tableWidth"
                 @change="sort"
-                style="word-break: break-all;font-size:16px;font-weight:500"
+                style="word-break: break-all;font-size:16px;font-weight:600"
               >
                 <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                 <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
@@ -183,7 +182,7 @@
                 <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 | 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
@@ -271,9 +270,10 @@ let sectionOption={
         type: 'line', // 默认为直线,可选为:'line' | 'shadow',
         
         }, 
+        
     },
     legend: {
-        data: ['总消耗']
+        data: []
     },
     grid: {
         left: '2%',
@@ -299,14 +299,14 @@ let sectionOption={
     ],
     series: [
         {
-            name: '总消耗',
+            name: '',
             type: 'line',
             smooth: true,
             data:  [],
             color:'#32CD32'
         },
         {
-            name: '总消耗',
+            name: '',
             type: 'line',
             smooth: true,
             data:  [],
@@ -419,6 +419,7 @@ let initDay ={
     name:'昨天'
   },
   huanbi:{
+    name:'环比',
     y:[]
   }
 }
@@ -497,46 +498,32 @@ export default {
   },
   watch:{
     type(n,o){
-      // console.log(n,o)
-        // console.log(this.type)
-        // if(this.type<9){
-        //     this.sectionHttp({type:this.type})
-            
-        // }else if(this.type==9){
-        //   this.sectionHttp({
-        //     type:this.type,
-        //     startDate:this.dateValue[0].format('YYYY-MM-DD'),
-        //     endDate:this.dateValue[1].format('YYYY-MM-DD')
-        //     })
-        // }
+      
+    },
+    dateValue(newName,oldName){
+      console.log(newName,oldName)
+          if( newName[0].format('YYYY-MM-DD')==oldName[0].format('YYYY-MM-DD') || newName[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
+                
+          }else{
+            this.searchgetData();
+          }
     },
-      dateValue: {
-          handler(newName, oldName) {
-            // console.log(newName,oldName)
-              // this.sectionHttp({
-              //     type:this.type,
-              //     startDate:this.dateValue[0].format('YYYY-MM-DD'),
-              //     endDate:this.dateValue[1].format('YYYY-MM-DD')
-              //     })
-          },
-          immediate: true,
-          deep: true
-      },
   },
   methods: {
 
     //项目改变后的事件
     treeChange(val) {
       // console.log(this.treeData)
+      // console.log(val[0])
       this.accountId = [];
       //选择一个后禁用其他
       if(val.length==1){
           if(val[0]*1){
             let selectindex=0
-              this.treeData.map((ele,index)=>{                   
+              this.treeData.forEach((ele,index)=>{                   
                   if(ele.children){
-                      ele.children.map((item,ind)=>{I
-                            if(item.value=val[0]){
+                     ele.children.map((item,ind)=>{
+                            if(item.value==val[0]){
                                 selectindex=index;
                                 this.mediaId=ele.mediaId
                             }
@@ -544,7 +531,7 @@ export default {
                   }                   
               });
               if(selectindex){
-                this.treeData.map((ele,index)=>{
+                this.treeData.forEach((ele,index)=>{
                     if(ele.value!=val[0]){
                          ele.disableCheckbox = true;
                          if(ele.children){
@@ -553,17 +540,17 @@ export default {
                               })
                          }
                     }
-              })
+                })
               }
               
           }else{
             //  console.log(1)
-              this.treeData.map((ele,index)=>{
+              this.treeData.forEach((ele,index)=>{
                     if(ele.value!=val[0]){
                          ele.disableCheckbox = true;
                          
                          if(ele.children){
-                              ele.children.map((item,ind)=>{
+                              ele.children.forEach((item,ind)=>{
                                    item.disableCheckbox = true;
                               })
                          }
@@ -587,11 +574,11 @@ export default {
       }
 
       if(val.length==0){
-          this.treeData.map((ele,index)=>{              
+          this.treeData.forEach((ele,index)=>{              
                 ele.disableCheckbox = false;
                 this.mediaId=ele.mediaId;
                 if(ele.children){
-                    ele.children.map((item,ind)=>{
+                    ele.children.forEach((item,ind)=>{
                           item.disableCheckbox = false;
                     })
                 }
@@ -627,8 +614,11 @@ export default {
 
     //查询按钮的事件
     searchgetData(){
+      
+      this.myChart.clear()
       if(this.accountId.length>0){
         // console.log();
+        
         this.loading=true;
         this.searchDisabled=true;
         this.tabCost={}
@@ -687,11 +677,9 @@ export default {
       this.clickLink={};
       this.costLink={};
       this.convertNumLink={};
-
-      
-      this.myChart.clear()
      
-     this.dateValue=[moment(),moment()]
+      this.myChart.clear()    
+      this.dateValue=[moment(),moment()]
 
     },
     //打开日期框
@@ -759,6 +747,7 @@ export default {
                             this.tabconvertNum.today.y.push(item.afterData.convertNum)
                             //环比  
                             this.tabClick.huanbi.y.push(item.afterData.photoClickProportion)
+                            // console.log((item.afterData.photoClickProportion*100).toFixed(2)+'%')
                             this.tabCost.huanbi.y.push(item.afterData.costProportion)
                             this.tabShowNum.huanbi.y.push(item.afterData.showProportion)
                             this.tabDiscountCost.huanbi.y.push(item.afterData.costProportion)   
@@ -818,7 +807,7 @@ export default {
      this.treeValue=[];
      getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
        if(res.success){
-            console.log(res);
+            // console.log(res);
             if(res.result){
                 res.result.forEach((element,index) => {
                   if(element){                  
@@ -859,6 +848,7 @@ export default {
         })
         this.myChart=myChart
       }
+      
     },
 
     //tab切换页的事件
@@ -868,7 +858,7 @@ export default {
         this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
         if(key=='cost'){
             if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
-                this.sectionOption.legend.data=['今天','昨天','环比'];
+                this.sectionOption.legend.data=['今天','昨天'];
                 this.sectionOption.xAxis[0].data=this.tabCost.x;
                 this.sectionOption.series[0].data=this.tabCost.today.y;
                 this.sectionOption.series[0].name=this.tabCost.today.name;
@@ -876,9 +866,20 @@ export default {
                 this.sectionOption.series[1].name=this.tabCost.yesterday.name;
                 this.sectionOption.series[2].data=this.tabCost.huanbi.y;
                 this.sectionOption.series[2].name=this.tabCost.huanbi.name;
+                this.sectionOption.tooltip.formatter=(params)=>{
+                    // console.log(params)
+                    params[2].data=(params[2].data*100).toFixed(2)+'%'
+                    return `
+                      ${params[0].marker}今天:${params[0].data}<br />
+                      ${params[1].marker}昨天:${params[1].data}<br />
+                      ${params[2].marker}环比:${params[2].data}
+                      `
+                }
             }else{
+                this.sectionOption.legend.data=['总消耗'];
                 this.sectionOption.xAxis[0].data=this.tabCost.x;
                 this.sectionOption.series[0].data=this.tabCost.yesterday.y;
+                this.sectionOption.series[0].name='总消耗';
             }
         }else if(key=='click'){
             
@@ -891,6 +892,15 @@ export default {
                 this.sectionOption.series[1].name=this.tabClick.yesterday.name;
                 this.sectionOption.series[2].data=this.tabClick.huanbi.y;
                 this.sectionOption.series[2].name=this.tabClick.huanbi.name;
+                this.sectionOption.tooltip.formatter=(params)=>{
+                    // console.log(params)
+                    params[2].data=(params[2].data*100).toFixed(2)+'%'
+                    return `
+                      ${params[0].marker}今天:${params[0].data}<br />
+                      ${params[1].marker}昨天:${params[1].data}<br />
+                      ${params[2].marker}环比:${params[2].data}
+                      `
+                }
             }else{   
                 this.sectionOption.legend.data=['点击数'];
                 this.sectionOption.xAxis[0].data=this.tabClick.x;
@@ -907,6 +917,15 @@ export default {
                 this.sectionOption.series[1].name=this.tabShowNum.yesterday.name;
                 this.sectionOption.series[2].data=this.tabShowNum.huanbi.y;
                 this.sectionOption.series[2].name=this.tabShowNum.huanbi.name;
+                this.sectionOption.tooltip.formatter=(params)=>{
+                    // console.log(params)
+                    params[2].data=(params[2].data*100).toFixed(2)+'%'
+                    return `
+                      ${params[0].marker}今天:${params[0].data}<br />
+                      ${params[1].marker}昨天:${params[1].data}<br />
+                      ${params[2].marker}环比:${params[2].data}
+                      `
+                }
             }else{
               this.sectionOption.legend.data=['展示数'];
                 this.sectionOption.xAxis[0].data=this.tabShowNum.x;
@@ -923,6 +942,15 @@ export default {
                 this.sectionOption.series[1].name=this.tabDiscountCost.yesterday.name;
                 this.sectionOption.series[2].data=this.tabDiscountCost.huanbi.y;
                 this.sectionOption.series[2].name=this.tabDiscountCost.huanbi.name;
+                this.sectionOption.tooltip.formatter=(params)=>{
+                    // console.log(params)
+                    params[2].data=(params[2].data*100).toFixed(2)+'%'
+                    return `
+                      ${params[0].marker}今天:${params[0].data}<br />
+                      ${params[1].marker}昨天:${params[1].data}<br />
+                      ${params[2].marker}环比:${params[2].data}
+                      `
+                }
             }else{
               this.sectionOption.legend.data=['折后消耗'];
                 this.sectionOption.xAxis[0].data=this.tabDiscountCost.x;
@@ -939,6 +967,15 @@ export default {
               this.sectionOption.series[1].name=this.tabconvertNum.yesterday.name;
               this.sectionOption.series[2].data=this.tabconvertNum.huanbi.y;
                 this.sectionOption.series[2].name=this.tabconvertNum.huanbi.name;
+                this.sectionOption.tooltip.formatter=(params)=>{
+                    // console.log(params)
+                    params[2].data=(params[2].data*100).toFixed(2)+'%'
+                    return `
+                      ${params[0].marker}今天:${params[0].data}<br />
+                      ${params[1].marker}昨天:${params[1].data}<br />
+                      ${params[2].marker}环比:${params[2].data}
+                      `
+                }
             }else{
               this.sectionOption.legend.data=['转化数'];
               this.sectionOption.xAxis[0].data=this.tabconvertNum.x;
@@ -1106,7 +1143,8 @@ export default {
   },
   mounted() {
     this.accountHttp()
-   
+    this.getEchartData('sectionChart', this.sectionOption)
+    
      postAction('/toutiao/videoReportDaily/getColumnJson', {
       columnType: 5
     }).then(res => {
@@ -1220,6 +1258,12 @@ export default {
 
 <style lang="scss" scoped>
 .accountReport {
+  .circul{
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: #32CD32;;
+  }
   .optionLine:hover{
     box-shadow: 0 0 15px rgba(0,0,0,.15);
     border-radius: 10px;

+ 2 - 2
src/views/modules/Statistics/newHome.vue

@@ -116,7 +116,7 @@
         <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
         <a-button class="duibi" @click="comparehandle" type='default' >对比</a-button>
         <div class="time"  @click="opendate" >
-            <DatePicker :openOptions='openOptions' :left='0' />
+            <DatePicker :openOptions='openOptions' :left='0' :parentDate='dateValue' />
         </div>
     </div>
 
@@ -132,7 +132,7 @@
           bordered
           id="outTable"       
           :loading="loading"
-          style="word-break: break-all;"
+          style="word-break: break-all;font-size:16px;font-weight:600"
         >
         <span slot="costProportion" slot-scope="costProportion">{{ costProportion | toPercentage }}</span>
         <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>

+ 4 - 21
src/views/modules/Statistics/performanceRelated/performanceRelated.vue

@@ -43,8 +43,9 @@
                     </a-select-option>
                 </a-select>
             </div>
+            
             <div>
-                <span>姓名:</span>
+                <span>职位:</span>
                 <a-select default-value="" style="width: 120px" @change="handleChange">
                     <a-select-option value="huabei">
                         华北
@@ -58,18 +59,8 @@
                 </a-select>
             </div>
             <div>
-                <span>职位:</span>
-                <a-select default-value="" style="width: 120px" @change="handleChange">
-                    <a-select-option value="huabei">
-                        华北
-                    </a-select-option>
-                    <a-select-option value="huanan">
-                        华南
-                    </a-select-option>
-                    <a-select-option value="huadong">
-                        华东
-                    </a-select-option>
-                </a-select>
+                <span>姓名:</span>
+                
             </div>
         </div>
         <div class="optionBTN">
@@ -120,14 +111,6 @@ const columnsFixd = [
     width: 100,
     fixed: 'left'
   },
-//   {
-//     title: '视频链接',
-//     dataIndex: 'videoUrl',
-//     align: 'center',
-//     width: 150,
-//     fixed: 'left'
-//   },
-
   {
     title: '视频描述',
     dataIndex: 'materialDesc',