魏志佳 5 лет назад
Родитель
Сommit
5acd0ab979

+ 5 - 5
src/components/DatePicker.vue

@@ -35,35 +35,35 @@ let pickOptions=[
         title:'一周',
         key:'3',
         value:3,
-        dateValue:[moment().subtract(7,'days'),moment()]
+        dateValue:[moment().subtract(7,'days'),moment().subtract(1,'days')]
         
     },
     {
         title:'一个月',
         key:'5',
         value:5,
-        dateValue:[moment().subtract(1,'months'),moment()]
+        dateValue:[moment().subtract(1,'days').subtract(1,'months'),moment().subtract(1,'days')]
         
     },
     {
         title:'三个月',
         key:'6',
         value:6,
-        dateValue:[moment().subtract(3,'months'),moment()]
+        dateValue:[moment().subtract(1,'days').subtract(3,'months'),moment().subtract(1,'days')]
         
     },
     {
         title:'六个月',
         key:'7',
         value:7,
-        dateValue:[moment().subtract(6,'months'),moment()]
+        dateValue:[moment().subtract(1,'days').subtract(6,'months'),moment().subtract(1,'days')]
         
     },
     {
         title:'一年',
         key:'8',
         value:8,
-        dateValue:[moment().subtract(1,'years'),moment()]
+        dateValue:[moment().subtract(1,'days').subtract(1,'years'),moment().subtract(1,'days')]
     },
 ]
 

+ 107 - 16
src/views/modules/Statistics/CompareData.vue

@@ -31,37 +31,59 @@
         <div class="costcompare">
           <div>总消耗对比</div>
           <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
-            <span>  {{costcompare.prev}}</span>
+            <span>  {{costcompare.prev|decimalsHandle}}</span>
             </p>
           <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
-            <span>  {{costcompare.next}} </span>
+            <span>  {{costcompare.next|decimalsHandle}} </span>
             </p>
           <p>环比:
-            <span>  {{(costcompare.next-costcompare.prev)/costcompare.prev| toPercentage}}</span>
+            <span class="huanbi">  {{(costcompare.next-costcompare.prev)/costcompare.prev| toPercentage}}
+                <span
+                  class="greenIcon"
+                  v-if="(costcompare.next-costcompare.prev)/costcompare.prev >0"
+                ></span>
+                <span class="redIcon" v-else></span>
+            </span>
+            
             </p>
         </div>
         <div class="costcompare">
           <div>点击数对比</div>
           <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
-             <span> {{clickcompare.prev}}</span>
+             <span> {{clickcompare.prev |formatCurrency}}</span>
             </p>
           <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
-            <span>  {{clickcompare.next}}</span>
+            <span>  {{clickcompare.next |formatCurrency}}</span>
             </p>
-          <p>环比:
-            <span>  {{(clickcompare.next-clickcompare.prev)/clickcompare.prev| toPercentage}}</span>
+          <p >环比:
+            <span class="huanbi">  {{
+                (clickcompare.next-clickcompare.prev)/clickcompare.prev| toPercentage}}
+                 <span
+                  class="greenIcon"
+                  v-if="(clickcompare.next-clickcompare.prev)/clickcompare.prev >0"
+                ></span>
+                <span class="redIcon" v-else></span>
+                </span>
+               
             </p>
         </div>
         <div class="costcompare">
           <div>展示数对比</div>
           <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
-             <span> {{showNumcompare.prev}} </span>
+             <span> {{showNumcompare.prev|formatCurrency}} </span>
               </p>
           <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
-            <span>  {{showNumcompare.prev}}</span>
+            <span>  {{showNumcompare.prev|formatCurrency}}</span>
               </p>
           <p>环比:
-            <span>  {{(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev| toPercentage}}</span>
+            <span class="huanbi">  {{(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev| toPercentage}}
+                <span
+                  class="greenIcon"
+                  v-if="(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev>0"
+                ></span>
+                <span class="redIcon" v-else></span>
+            </span>
+            
               </p>
         </div>
       </div>
@@ -182,7 +204,7 @@ let columns = [
     key: 'statDate'
   },
   {
-    title: '消耗',
+    title: '消耗(元)',
     dataIndex: 'cost',
     scopedSlots: { customRender: 'cost' },
     align: 'center',
@@ -218,14 +240,14 @@ let columns = [
     key: 'showNum'
   },
   {
-    title: '平均千次展现费用',
+    title: '平均千次展现费用(元)',
     dataIndex: 'cpm',
     align: 'center',
     scopedSlots: { customRender: 'cpm' },
     key: 'cpm'
   },
   {
-    title: '平均点击单价',
+    title: '平均点击单价(元)',
     dataIndex: 'cp',
     align: 'center',
     scopedSlots: { customRender: 'cp' },
@@ -456,7 +478,7 @@ export default {
             this.getEchartData('compareChart', this.compareOption)
 
             //处理表格数据
-            res.result.list.smallDate.forEach(ele => {
+            res.result.list.smallDate.forEach((ele,index) => {
               if (!ele.costProportion) {
                 ele.costProportion = '-'
               }
@@ -464,10 +486,11 @@ export default {
                 ele.statHour = ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
                 ele.statDate = ele.statDate + ' ' + ele.statHour
               }
+              ele.key=index+1
             })
 
             this.smallDate = [...res.result.list.smallDate]
-            res.result.list.bigDate.forEach(ele => {
+            res.result.list.bigDate.forEach((ele,index) => {
               if (!ele.costProportion) {
                 ele.costProportion = '-'
               }
@@ -475,6 +498,7 @@ export default {
                 ele.statHour = ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
                 ele.statDate = ele.statDate + ' ' + ele.statHour
               }
+              ele.key=index+1
               // console.log(ele)
               this.costcompare.next += ele.cost
               this.clickcompare.next += ele.click
@@ -579,12 +603,51 @@ export default {
   //     })
   // },
   filters: {
+      //变成百分比
     toPercentage(val) {
       if (typeof val != 'string') {
         return (val * 100).toFixed(2) + '%'
       } else {
         return val
       }
+    },
+    //保留两位小数并且变成货币格式
+    decimalsHandle(val){
+        
+        val=val.toFixed(2);
+        let numberStr = val.toString()
+        let str = numberStr.split('.')
+        
+        let str0=str[0].split('').reverse();
+        for (let i = 0; i < str0.length; i++) {
+        if ((i + 1) % 4 === 0) {
+          str0.splice(i, 0, ',')
+            }
+        }
+        str0.reverse()
+        let handleResult = ''
+        for (let j = 0; j < str0.length; j++) {
+            handleResult += str0[j]
+        }
+        
+        return handleResult+'.'+str[1]
+        
+    },
+    //变成货币格式
+    formatCurrency(val){
+        let numberStr = val.toString()
+        let str = numberStr.split('').reverse()
+        for (let i = 0; i < str.length; i++) {
+            if ((i + 1) % 4 === 0) {
+            str.splice(i, 0, ',')
+            }
+        }
+        str.reverse()
+        let handleResult = ''
+        for (let j = 0; j < str.length; j++) {
+            handleResult += str[j]
+        }
+        return handleResult
     }
   }
 }
@@ -627,8 +690,36 @@ export default {
       span{
           font-weight: 500;
           font-size: 16px;
-          margin-left: 10px;
+          margin-left: 15px;
+      }
+      .huanbi{
+          font-weight: 500;
+          font-size: 16px;
+         
+          position: relative;
+          display: inline-block;
+          padding: 0 15px  0;
       }
+      .greenIcon {
+      width: 0;
+      height: 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-bottom: 8px solid green;
+      position: absolute;
+      top: 40%;
+      right: 0;
+    }
+    .redIcon {
+      width: 0;
+      height: 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 8px solid red;
+      position: absolute;
+      top: 40%;
+      right: 0;
+    }
     }
   }
 }

+ 138 - 50
src/views/modules/Statistics/newHome.vue

@@ -1,35 +1,35 @@
 <template>
   <div class="homePage">
-    <div class="topBox">
+    <div >
       <a-row :gutter="16">
-        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+        <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
           <div class="showBox">
-            <h2 class="title">
+            <div class="title">
               Top7项目消耗
               <a-tooltip>
                 <template slot="title">最近七天的top7项目消耗</template>
-                <span>
+                <span class="icon">
                   <a-icon type="exclamation-circle" />
                 </span>
               </a-tooltip>
-            </h2>
-            <div id="topChart" style="width:100%;height:130px" ref="topChart"></div>
-            <div class="footerInfo">TOP1项目消耗数:¥{{this.topOption.series[0].data[0]}}</div>
+            </div>
+            <div id="topChart" style="width:100%;height:100px" ref="topChart"></div>
+            <div class="footerInfo">TOP1消耗数: <span class="num">¥{{this.topOption.series[0].data[0] | decimalsHandle}}</span> </div>
           </div>
         </a-col>
-        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+        <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
           <div class="showBox">
-            <h2 class="title">
+            <div class="title">
               总消耗
-              <p class="numshow">¥{{cost.weekCostSum}}</p>
+              <p class="numshow">¥{{cost.weekCostSum | decimalsHandle}}</p>
               <a-tooltip>
                 <template slot="title">最近七天的总消耗</template>
                 <span>
                   <a-icon type="exclamation-circle" />
                 </span>
               </a-tooltip>
-            </h2>
-            <div id="costChart" style="width:100%;height:100px" ref="costChart"></div>
+            </div>
+            <div id="costChart" style="width:100%;height:70px" ref="costChart"></div>
             <div class="footerInfo">
               周同比
               <span class="num">
@@ -43,19 +43,19 @@
             </div>
           </div>
         </a-col>
-        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+        <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
           <div class="showBox">
-            <h2 class="title">
+            <div class="title">
               点击数
-              <p class="numshow">{{click.weekClickSum}}</p>
+              <p class="numshow">{{click.weekClickSum | formatCurrency}}</p>
               <a-tooltip>
                 <template slot="title">最近七天的点击数</template>
                 <span>
                   <a-icon type="exclamation-circle" />
                 </span>
               </a-tooltip>
-            </h2>
-            <div id="clickChart" style="width:100%;height:100px" ref="clickChart"></div>
+            </div>
+            <div id="clickChart" style="width:100%;height:70px" ref="clickChart"></div>
             <div class="footerInfo">
               周同比
               <span class="num">
@@ -69,19 +69,19 @@
             </div>
           </div>
         </a-col>
-        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+        <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
           <div class="showBox">
-            <h2 class="title">
+            <div class="title">
               展示数
-              <p class="numshow">{{showNum.weekShowNumSum}}</p>
+              <p class="numshow">{{showNum.weekShowNumSum | formatCurrency}}</p>
               <a-tooltip>
                 <template slot="title">最近七天的展示数</template>
                 <span>
                   <a-icon type="exclamation-circle" />
                 </span>
               </a-tooltip>
-            </h2>
-            <div id="showChart" style="width:100%;height:100px" ref="showChart"></div>
+            </div>
+            <div id="showChart" style="width:100%;height:70px" ref="showChart"></div>
             <div class="footerInfo">
               周同比
               <span class="num">
@@ -108,7 +108,7 @@
             </a-tab-pane>
         </a-tabs>
         <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
-        <div class="duibi" @click="comparehandle">对比</div>
+        <a-button class="duibi" @click="comparehandle" type='default' >对比</a-button>
         <div class="time"  @click="opendate">
             <DatePicker :openOptions='openOptions'/>
         </div>
@@ -168,8 +168,8 @@ let option = {
   },
   grid: {
     left: '0%',
-    // right: '4%',
-    bottom: '-10%',
+    right: '0%',
+    bottom: '0%',
     top: '12%',
     containLabel: false,
     
@@ -178,7 +178,7 @@ let option = {
     {
       type: 'category',
       data: [],
-      show: false,
+      show: true,
       
       axisTick: {
         alignWithLabel: true
@@ -304,7 +304,7 @@ let columns = [
     
   },
   {
-    title: '消耗',
+    title: '消耗(元)',
     dataIndex: 'cost',
     scopedSlots: { customRender: 'cost' },
     align: 'center',
@@ -342,14 +342,14 @@ let columns = [
     key:"showNum"
   },
   {
-    title: '平均千次展现费用',
+    title: '平均千次展现费用(元)',
     dataIndex: 'cpm',
     align: 'center',
     scopedSlots: { customRender: 'cpm' },
     key:'cpm'
   },
   {
-    title: '平均点击单价',
+    title: '平均点击单价(元)',
     dataIndex: 'cp',
     align: 'center',
     scopedSlots: { customRender: 'cp' },
@@ -402,6 +402,7 @@ export default {
         // console.log(this.type)
         if(this.type<9){
             this.sectionHttp({type:this.type})
+            
         }else if(this.type==9){
           this.sectionHttp({
             type:this.type,
@@ -494,6 +495,7 @@ export default {
                     }
                     
                 });
+
                 this.sectionOption.legend.data=['今天','昨天'];
                 this.sectionOption.xAxis[0].data=this.tabCost.today.x;
                 this.sectionOption.series[0].data=this.tabCost.today.y;
@@ -519,25 +521,48 @@ export default {
                     }
                     
                 });
-                this.sectionOption.xAxis[0].data=init.today.x;
-                this.sectionOption.series[0].data=this.tabCost;
+                if(this.tabKey=='click'){
+                    this.sectionOption.legend.data=['点击数'];
+                    this.sectionOption.xAxis[0].data=init.today.x;
+                    this.sectionOption.series[0].data=this.tabClick;
+                    this.sectionOption.series[0].name='点击数';
+                }else if(this.tabKey=='showNum'){
+                    this.sectionOption.legend.data=['展示数'];
+                    this.sectionOption.xAxis[0].data=init.today.x;
+                    this.sectionOption.series[0].data=this.tabShowNum;
+                    this.sectionOption.series[0].name='展示数';
+                }else{
+                     this.sectionOption.xAxis[0].data=init.today.x;
+                      this.sectionOption.series[0].data=this.tabCost;
+                }
+               
             }else{
                 this.tabCost={x:[],y:[]}
                 this.tabClick={x:[],y:[]}
                 this.tabShowNum={x:[],y:[]}
-                res.result.chart.forEach((item,index)=>{ 
-                    
+                res.result.chart.forEach((item,index)=>{                    
                         this.tabClick.y.push(item.click)
                         this.tabCost.y.push(item.cost)
                         this.tabShowNum.y.push(item.showNum)
                         this.tabClick.x.push(item.statDate)
                         this.tabCost.x.push(item.statDate)
-                        this.tabShowNum.x.push(item.statDate)
-                   
-                    
+                        this.tabShowNum.x.push(item.statDate)  
                 });
-                this.sectionOption.xAxis[0].data=this.tabCost.x;
-                this.sectionOption.series[0].data=this.tabCost.y;
+                if(this.tabKey=='click'){
+                    this.sectionOption.legend.data=['点击数'];
+                    this.sectionOption.xAxis[0].data=this.tabClick.x;
+                    this.sectionOption.series[0].data=this.tabClick.y;
+                    this.sectionOption.series[0].name='点击数';
+                }else if(this.tabKey=='showNum'){
+                   this.sectionOption.legend.data=['展示数'];
+                    this.sectionOption.xAxis[0].data=this.tabShowNum.x;
+                    this.sectionOption.series[0].data=this.tabShowNum.y;
+                    this.sectionOption.series[0].name='展示数';
+                }else{
+                    this.sectionOption.xAxis[0].data=this.tabCost.x;
+                    this.sectionOption.series[0].data=this.tabCost.y;
+                }
+                
             }           
            this.getEchartData('sectionChart', this.sectionOption);
 
@@ -554,7 +579,7 @@ export default {
               showNum:0
           }
            
-           res.result.list.forEach((ele)=>{
+           res.result.list.forEach((ele,index)=>{
               if(!ele.costProportion){
                   ele.costProportion='-'
               }
@@ -562,6 +587,7 @@ export default {
                   ele.statHour=ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
                   ele.statDate=ele.statDate+' '+ele.statHour
               }
+              ele.key=index+1
               total.click+=ele.click
               total.cost+=ele.cost
               total.showNum+=ele.showNum
@@ -579,7 +605,7 @@ export default {
     //tab切换页的事件
     callback(key) {
         // console.log(key);
-        // this.tabKey=key;
+        this.tabKey=key;
         this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
         if(key=='cost'){
             if(this.type==1){
@@ -610,7 +636,7 @@ export default {
                 this.sectionOption.series[0].data=this.tabClick;
                 this.sectionOption.series[0].name='点击数';
             }else{   
-              this.sectionOption.legend.data=['点击数'];
+                this.sectionOption.legend.data=['点击数'];
                 this.sectionOption.xAxis[0].data=this.tabClick.x;
                 this.sectionOption.series[0].data=this.tabClick.y;
                 this.sectionOption.series[0].name='点击数';
@@ -688,6 +714,50 @@ export default {
         return val
       }
       
+    },
+     //保留两位小数并且变成货币格式
+    decimalsHandle(val){
+        // console.log(val)
+        if(val){
+          val=val.toFixed(2);
+          let numberStr = val.toString()
+          let str = numberStr.split('.')
+          
+          let str0=str[0].split('').reverse();
+          for (let i = 0; i < str0.length; i++) {
+          if ((i + 1) % 4 === 0) {
+            str0.splice(i, 0, ',')
+              }
+          }
+          str0.reverse()
+          let handleResult = ''
+          for (let j = 0; j < str0.length; j++) {
+              handleResult += str0[j]
+          }
+          
+          return handleResult+'.'+str[1]
+        }
+        
+        
+    },
+    //变成货币格式
+    formatCurrency(val){
+      if(val){
+          let numberStr = val.toString()
+        let str = numberStr.split('').reverse()
+        for (let i = 0; i < str.length; i++) {
+            if ((i + 1) % 4 === 0) {
+            str.splice(i, 0, ',')
+            }
+        }
+        str.reverse()
+        let handleResult = ''
+        for (let j = 0; j < str.length; j++) {
+            handleResult += str[j]
+        }
+        return handleResult
+      }
+        
     }
   }
 }
@@ -696,24 +766,36 @@ export default {
 <style lang="scss" scoped>
 .homePage {
     .topBox{
-        margin-bottom: 20px;;
+        margin-bottom: 20px;
     }
   .showBox {
     width: 98%;
     box-sizing: border-box;
     margin-right: 20px;
-    padding: 25px;
+    padding: 25px 25px 0;
     background-color: #fff;
+    
     .title {
+      color: #999;
+      font-size: 16px;
       position: relative;
       span {
+        font-size: 1rem;
+        // color: #1890ff;
         position: absolute;
         top: 0;
         right: 0;
         cursor: pointer;
       }
     }
+    .num{
+      color: #000;
+      font-size: 16px;;
+    }
     .numshow {
+      color:#333 ;
+      font-weight: 500;
+      font-size: 24px;
       padding: 5px 0;
       height: 30px;
       margin-bottom: 0;
@@ -721,17 +803,22 @@ export default {
   }
 
   .footerInfo {
-    border-top: 1px solid #333;
-    padding-top: 10px;
-    font-weight: 500;
+    margin-top: 10px;
+    border-top: 1px solid #eee;
+    padding: 10px 0;
+    color: #666;
     font-size: 16px;
     position: relative;
-    height: 60px;
+ 
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     .num {
       display: inline-block;
       margin-left: 10px;
       padding-right: 15px;
       position: relative;
+      font-weight: 500;
     }
     .greenIcon {
       width: 0;
@@ -769,7 +856,7 @@ export default {
           padding: 0 15px;
           top: 15px;
           right: 300px;
-          border: 1px solid #666;
+          // border: 1px solid #666;
           cursor: pointer;
       }
       .time{
@@ -789,12 +876,13 @@ export default {
     background-color: #fff;
     p{
       width: 100%;
-      border-bottom: 1px solid #666;
+      border-bottom: 1px solid #ccc;
       padding-bottom: 20px;
       span{
         display: inline-block;
-        border: 1px solid #666;
+        border: 1px solid #ccc;
         padding: 5px 15px;
+        border-radius: 5px;
       }
     }
   }