浏览代码

'穿山甲'

魏志佳 5 年之前
父节点
当前提交
7cf7af5ffe

+ 136 - 0
src/components/DatePicker.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="datePicker">
+        <a-range-picker
+            v-model="dateValue"
+            style="width:250px;height:150px"
+            :open='openOptions'
+             :disabled-date="disabledDate"
+             :openChange='openChange'
+            @change="onChange" />
+        <div class="pickOptions" v-show='openOptions'>
+            <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import moment from 'moment';
+let pickOptions=[
+    {
+        title:'今天',
+        key:'1',
+        value:1,
+        dateValue:[moment(),moment()]
+        
+    },
+    {
+        title:'昨天',
+        key:'2',
+        value:2,
+        dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')]
+        
+    },
+    {
+        title:'一周',
+        key:'3',
+        value:3,
+        dateValue:[moment().subtract(7,'days'),moment()]
+        
+    },
+    {
+        title:'一个月',
+        key:'5',
+        value:5,
+        dateValue:[moment().subtract(1,'months'),moment()]
+        
+    },
+    {
+        title:'三个月',
+        key:'6',
+        value:6,
+        dateValue:[moment().subtract(3,'months'),moment()]
+        
+    },
+    {
+        title:'六个月',
+        key:'7',
+        value:7,
+        dateValue:[moment().subtract(6,'months'),moment()]
+        
+    },
+    {
+        title:'一年',
+        key:'8',
+        value:8,
+        dateValue:[moment().subtract(1,'years'),moment()]
+    },
+]
+
+    export default {
+        props:['openOptions'],
+        data() {
+            return {
+                moment,
+                dateValue:[],
+                type:0,
+                pickOptions
+                // pickOptions:JSON.parse(JSON.stringify(pickOptions))
+            }
+        },
+        methods: {
+            //日期改变事件
+            onChange(date,dateString){
+                this.dateValue=date;
+                console.log(this.dateValue)
+                if(dateString.length==2){
+                    this.$parent.opendate();
+                };
+
+            },
+            //侧边的按钮点击事件
+            changeDate(val){
+                this.type=val.value
+                this.dateValue=val.dateValue;
+                //  console.log(this.dateValue)
+                this.$parent.type=val.value
+                this.$parent.dateValue=val.dateValue
+            },
+            
+            disabledDate(current) {
+            // console.log(current)
+
+                return current && current > moment().subtract(1, 'day')
+            },
+            openChange(open){
+                console.log(open)
+            },
+
+        },
+        mounted() {
+            this.dateValue=[moment(),moment()]
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+.datePicker{
+    position: relative;
+    .pickOptions{
+        width: 100px;
+        background-color: #FFF;
+        height: 302px;
+        position: absolute;
+        top: -2px;
+        left: -402px;
+        border-right: 1px solid #999;
+        box-shadow: 0 0 15px rgba(0,0,0,0.1);
+        div{
+            height: 43px;           
+            padding: 10px 15px;
+            box-sizing: border-box;
+            
+        }
+    }
+}
+</style>

+ 7 - 4
src/views/dashboard/Analysis.vue

@@ -144,11 +144,14 @@
       </a-row>
     </div>
 
-    <statistics v-else-if="roleCode == 'kuaishouOperationManager'" />
+    <!-- <statistics v-else-if="roleCode == 'kuaishouOperationManager'" />
     <statistics v-else-if="roleCode == 'sale'||roleCode=='saleDirector'" />
     <statistics v-else-if="roleCode == 'admin'" />
     <Workbench v-else-if="roleCode == 'clip'" />
-    <Workbench v-else-if="roleCode == 'plane'" />
+    <Workbench v-else-if="roleCode == 'plane'" /> -->
+
+    <newHome v-else-if="roleCode == 'kuaishouOperationManager'" />
+     <newHome v-else-if="roleCode == 'admin'" />
   </div>
 </template>
 
@@ -166,7 +169,7 @@ import HeadInfo from '@/components/tools/HeadInfo.vue'
 
 import Trend from '@/components/Trend'
 import { getLoginfo, getVisitInfo } from '@/api/api'
-import statistics from '@/views/modules/Statistics/Statistics.vue'
+import newHome from '@/views/modules/Statistics/newHome.vue'
 import Workbench from '@/views/dashboard/Workbench.vue'
 const rankList = []
 for (let i = 0; i < 7; i++) {
@@ -196,7 +199,7 @@ export default {
     Trend,
     LineChartMultid,
     HeadInfo,
-    statistics,
+    newHome,
     Workbench
   },
   data() {

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

@@ -46,7 +46,7 @@
       </a-col>
     </a-row>
     <a-row :gutter="16" v-if="kuaishou">
-      <a-col :sm="24" :md="12" :xl="12" :xxl="6">
+      <a-col :sm="24" :md="6" :xl="6" :xxl="6">
         <lifting
           :kuaishou.sync="kuaishou"
           :active.sync="active"
@@ -55,7 +55,7 @@
           typeThan="costProportion"
         ></lifting>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="12" :xxl="6">
+      <a-col :sm="24" :md="6" :xl="6" :xxl="6">
         <lifting
           :kuaishou.sync="kuaishou"
           :active.sync="active"
@@ -64,7 +64,7 @@
           typeThan="photoClickProportion"
         ></lifting>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="12" :xxl="6">
+      <a-col :sm="24" :md="6" :xl="6" :xxl="6">
         <lifting
           :kuaishou.sync="kuaishou"
           :active.sync="active"
@@ -73,7 +73,7 @@
           typeThan="showProportion"
         ></lifting>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="12" :xxl="6">
+      <a-col :sm="24" :md="6" :xl="6" :xxl="6">
         <lifting
           :kuaishou.sync="kuaishou"
           :active.sync="active"

+ 81 - 5
src/views/modules/Statistics/chuanshanjia/activateSta.vue

@@ -1,7 +1,20 @@
 <template>
     <div class="activateSta">
         <div class="optionLine">
-            <span>应用:</span>
+             <div class="xiangmuxuanze">
+                <span>项目选择:</span>
+                <a-tree-select
+                    v-model="treeValue"
+                    style="width: 50%"
+                    :tree-data="treeData"
+                    tree-checkable
+                    :show-checked-strategy="SHOW_PARENT"
+                    searchPlaceholder="请选择项目和账户"
+                    :allowClear=true
+                    @change="treeChange"
+                />
+             </div>
+            <span>应用选择:</span>
             <a-select default-value="0" style="width: 150px" @change="APPChange">
                     <a-select-option value="0">全部</a-select-option>
                     <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>                  
@@ -42,6 +55,8 @@
 <script>
 import moment from 'moment'
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 let columns=[
     {
         title: '时间',
@@ -110,14 +125,40 @@ export default {
             //table的参数
             loading:false,
             columns,
-            dataSource:[]
-
+            dataSource:[],
 
+            //treeselect的参数
+            treeValue:[],
+            treeData:[],
+            SHOW_PARENT,
 
         }
     },
+    
     methods: {
         moment,
+        //项目改变后的事件
+        treeChange(val){
+            this.projectId=[];
+            this.accountName=[];
+            console.log(val,this.treeValue);
+            this.treeValue.forEach((item,index)=>{
+                if(parseInt(item)){
+                     this.projectId.push(item)
+                }else{
+                    this.accountName.push(item)
+                }
+            })
+           postAction('/pangolin/api/app/list',{
+                projectId:this.projectId,
+                accountName:this.accountName
+            }).then(res=>{
+                console.log(res)
+                if(res.success){
+                    this.optionArr=res.data
+                }
+            })
+        },
         //应用选择
         APPChange(value){
             this.APPID=value;
@@ -152,7 +193,9 @@ export default {
                 startDate:this.dateStr[0],
                 endDate:this.dateStr[1],
                 operateSystem:this.selectValue,
-                appId:this.APPID
+                appId:this.APPID,
+                projectId:this.projectId,
+                accountName:this.accountName
             }).then(res => {
                 
                 console.log(res)
@@ -172,18 +215,48 @@ export default {
                     this.totalItem=res.data.total
                 }
             })
+        },
+         //项目请求
+        accountHttp(){
+            postAction('/pangolin/api/memberList',{
+                projectId:this.projectId,
+                accountName:this.accountName
+            }).then(res => {
+                
+                console.log(res)
+                if(res.success){
+                    res.data.forEach((element,index) => {
+                        this.treeData.push({});
+                        this.treeData[index].title=element.projectName;
+                        this.treeData[index].value=element.projectId;
+                        this.treeData[index].key=element.projectId;
+                        this.treeData[index].children=[];
+                        element.accountList.forEach((ele,i)=>{
+                            this.treeData[index].children.push({});
+                             this.treeData[index].children[i].title=ele.accountName;
+                             this.treeData[index].children[i].value=ele.accountName;
+                             this.treeData[index].children[i].key=ele.accountName;
+                        })  
+                    }); 
+                }
+                console.log(this.treeData)
+            })
         }
     },
     mounted() {
         this.dateStr=[moment().subtract(1,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
         this.dateRange=[moment().subtract(1,'days'),moment()]
         this.HttpPost();
-        postAction('/pangolin/api/app/list').then(res=>{
+        postAction('/pangolin/api/app/list',{
+             projectId:this.projectId,
+            accountName:this.accountName
+        }).then(res=>{
             console.log(res)
             if(res.success){
                 this.optionArr=res.data
             }
         })
+        this.accountHttp()
     },
 }
 </script>
@@ -230,4 +303,7 @@ export default {
     }
 
 }
+.xiangmuxuanze{
+  margin-bottom: 20px;;
+}
 </style>

+ 87 - 7
src/views/modules/Statistics/chuanshanjia/checkBill.vue

@@ -1,7 +1,20 @@
 <template>
     <div class="checkBill">
         <div class="optionLine">
-            <span>应用:</span>
+            <div class="xiangmuxuanze">
+                <span>项目选择:</span>
+                <a-tree-select
+                    v-model="treeValue"
+                    style="width: 50%"
+                    :tree-data="treeData"
+                    tree-checkable
+                    :show-checked-strategy="SHOW_PARENT"
+                    searchPlaceholder="请选择项目和账户"
+                    :allowClear=true
+                    @change="treeChange"
+                />
+            </div>
+            <span>应用选择:</span>
             <a-select default-value="0" style="width: 150px" @change="APPChange">
                     <a-select-option value="0">全部</a-select-option>
                     <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>                  
@@ -41,7 +54,8 @@
 <script>
 import moment from 'moment'
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
-
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 
 let columns=[
     {
@@ -109,12 +123,43 @@ export default {
 
             //分页器的参数
             currentPage:1,
-            totalItem:10
+            totalItem:10,
 
+             //treeselect的参数
+            treeValue:[],
+            treeData:[],
+            SHOW_PARENT,
+            projectId:[],
+            accountName:[],
         }
     },
+   
     methods: {
         moment,
+        //项目改变后的事件
+        treeChange(val){
+            this.projectId=[];
+            this.accountName=[];
+            console.log(val,this.treeValue);
+            this.treeValue.forEach((item,index)=>{
+                if(parseInt(item)){
+                     this.projectId.push(item)
+                }else{
+                    this.accountName.push(item)
+                }
+            });
+            postAction('/pangolin/api/app/list',{
+                projectId:this.projectId,
+                accountName:this.accountName
+            }).then(res=>{
+                console.log(res)
+                if(res.success){
+                    this.optionArr=res.data
+                }
+            })
+    
+        },
+
         //应用选择
         APPChange(value){
             this.APPID=value;
@@ -152,7 +197,9 @@ export default {
                 startDate:this.monthStr[0],
                 endDate:this.monthStr[1],
                 operateSystem:this.selectValue,
-                appId:this.APPID
+                appId:this.APPID,
+                projectId:this.projectId,
+                accountName:this.accountName
             }).then(res => {
                 
                 console.log(res)
@@ -166,19 +213,49 @@ export default {
                  this.totalItem=res.data.total
                 }
             })
+        },
+        //项目请求
+        accountHttp(){
+            postAction('/pangolin/api/memberList',{
+                projectId:this.projectId,
+                accountName:this.accountName
+            }).then(res => {
+                
+                console.log(res)
+                if(res.success){
+                    res.data.forEach((element,index) => {
+                        this.treeData.push({});
+                        this.treeData[index].title=element.projectName;
+                        this.treeData[index].value=element.projectId;
+                        this.treeData[index].key=element.projectId;
+                        this.treeData[index].children=[];
+                        element.accountList.forEach((ele,i)=>{
+                            this.treeData[index].children.push({});
+                             this.treeData[index].children[i].title=ele.accountName;
+                             this.treeData[index].children[i].value=ele.accountName;
+                             this.treeData[index].children[i].key=ele.accountName;
+                        })  
+                    }); 
+                }
+                console.log(this.treeData)
+            })
         }
-        
     },
     mounted() {
         this.monthStr=[moment().format('YYYY-MM'),moment().format('YYYY-MM')];
         this.monthRange=[moment(),moment()]
-        this.HttpPost()
-        postAction('/pangolin/api/app/list').then(res=>{
+        
+        postAction('/pangolin/api/app/list',{
+             projectId:this.projectId,
+            accountName:this.accountName
+        }).then(res=>{
             console.log(res)
             if(res.success){
                 this.optionArr=res.data
             }
         })
+        this.accountHttp()
+        this.HttpPost()
     },
 }
 </script>
@@ -212,4 +289,7 @@ export default {
     margin: 30px 15px 10px;
     overflow: hidden;
 }
+.xiangmuxuanze{
+     margin-bottom: 20px;;
+}
 </style>

+ 97 - 8
src/views/modules/Statistics/chuanshanjia/realTimeData.vue

@@ -1,11 +1,25 @@
 <template>
   <div class="realData" ref="chart">
     <div class="optionLine">
-        <span>应用:</span>
+        <span>项目选择:</span>
+         <a-tree-select
+                    v-model="treeValue"
+                    style="width: 50%"
+                    :tree-data="treeData"
+                    tree-checkable
+                    :show-checked-strategy="SHOW_PARENT"
+                    searchPlaceholder="请选择项目和账户"
+                    :allowClear=true
+                    @change="treeChange"
+                />
+            <span>应用选择:</span>
             <a-select default-value="0" style="width: 150px" @change="APPChange">
                     <a-select-option value="0">全部</a-select-option>
                     <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>                  
             </a-select>
+            <div class="btn">
+                <a-button type='primary'  @click="getData">查询</a-button>
+            </div>
             
     </div>
     <div class="tabchange">
@@ -38,6 +52,8 @@
 <script>
 import moment from 'moment'
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 // 引入基本模板
 var echarts = require('echarts')
 // 引入柱状图组件
@@ -182,10 +198,41 @@ export default {
 
       //echart的参数
       option:JSON.parse(JSON.stringify(option)),
+
+      //treeselect的参数
+            treeValue:[],
+            treeData:[],
+            SHOW_PARENT,
     }
   },
+
   methods: {
     moment,
+    //项目改变后的事件
+        treeChange(val){
+            this.projectId=[];
+            this.accountName=[];
+            console.log(val,this.treeValue);
+            this.treeValue.forEach((item,index)=>{
+                if(parseInt(item)){
+                     this.projectId.push(item)
+                }else{
+                    this.accountName.push(item)
+                }
+            })
+            if(this.treeValue.length==0){
+                this.optionArr=[]
+            }
+           postAction('/pangolin/api/app/list',{
+                projectId:this.projectId,
+                accountName:this.accountName
+            }).then(res=>{
+                console.log(res)
+                if(res.success){
+                    this.optionArr=res.data
+                }
+            })
+        },
     disabledDate(current) {
       // console.log(current)
 
@@ -291,7 +338,9 @@ export default {
         type:this.tabKey,
         compareTime1:this.dateStr[0],
         compareTime2:this.dateStr[1],
-        appId:this.APPID
+        appId:this.APPID,
+        projectId:this.projectId,
+        accountName:this.accountName
       }).then(res => {
         console.log(res)
         if (res.success) {
@@ -341,23 +390,63 @@ export default {
       })
 })
     },
+     //项目请求
+        accountHttp(){
+            postAction('/pangolin/api/memberList',{
+                projectId:this.projectId,
+                accountName:this.accountName
+            }).then(res => {
+                
+                console.log(res)
+                if(res.success){
+                    res.data.forEach((element,index) => {
+                        this.treeData.push({});
+                        this.treeData[index].title=element.projectName;
+                        this.treeData[index].value=element.projectId;
+                        this.treeData[index].key=element.projectId;
+                        this.treeData[index].children=[];
+                        element.accountList.forEach((ele,i)=>{
+                            this.treeData[index].children.push({});
+                             this.treeData[index].children[i].title=ele.accountName;
+                             this.treeData[index].children[i].value=ele.accountName;
+                             this.treeData[index].children[i].key=ele.accountName;
+                        })  
+                    }); 
+                }
+                console.log(this.treeData)
+            })
+        },
+        
+        //确定按钮的事件
+        getData(){
+           
+            console.log(this.monthStr,this.selectValue);
+            this.loading=true;
+            this.HttpPost()
+            
+        },
   
   },
+  
   mounted() {
     //   this.HttpPost()
     
     // console.log(this.dateStr)
     this.option=JSON.parse(JSON.stringify(option))
     // console.log(this.option.legend.data,option,'------------------------------')
-    postAction('/pangolin/api/app/list').then(res=>{
-            // console.log(res)
-            if(res.success){
-                this.optionArr=res.data
-            }
-    })
+    // postAction('/pangolin/api/app/list',{
+    //    projectId:this.projectId,
+    //   accountName:this.accountName
+    // }).then(res=>{
+    //         // console.log(res)
+    //         if(res.success){
+    //             this.optionArr=res.data
+    //         }
+    // })
     this.HttpPost().then(item=>{
          this.getEchartData()
     })
+    this.accountHttp()
   }
 }
 </script>

+ 118 - 0
src/views/modules/Statistics/components/vueEchart.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="echart" style="width:100%;height:150px" ref="chart"></div>
+  </div>
+</template>
+
+<script>
+var echarts = require('echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+require('echarts/lib/chart/pie')
+require('echarts/lib/chart/line')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+require('echarts/lib/component/graphic')
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/legend')
+
+
+
+export default {
+
+    data() {
+        return {
+            option:{
+                color: ['#3398DB'],
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器,坐标轴触发有效
+                        type: 'line'        // 默认为直线,可选为:'line' | 'shadow'
+                    }
+                },
+                grid: {
+                    left: '0%',
+                    // right: '4%',
+                    bottom: '0%',
+                    top:'12%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: this.xdata,
+                        show:false,
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        name: this.echartTitle,
+                        type: this.echartType,
+                        barWidth: '40%',
+                        data: this.ydata
+                    }
+                ]
+}
+        }
+    },
+   
+    props:{
+        xdata:{
+            default(){
+                return []
+            }
+        },
+        ydata:{
+            default(){
+                return []
+            }
+        },
+        echartType:{
+            default(){
+                return 'bar'
+            }
+        },
+        echartTitle:{
+            default(){
+                return ''
+            }
+        },
+    },
+    methods: {
+         //获取echart的值
+        getEchartData() {
+            console.log('echart')
+            const chart = this.$refs.chart
+            if (chart) {
+                const myChart = echarts.init(document.getElementsByClassName('echart'))
+                mychart.forEach(element => {
+                    
+                });
+                myChart.setOption(this.option)
+                window.addEventListener('resize', function() {
+                myChart.resize()
+                })
+            }
+        },
+    },
+    mounted() {
+        this.$nextTick(()=>{
+             this.getEchartData()
+        })
+
+       
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

+ 728 - 0
src/views/modules/Statistics/newHome.vue

@@ -0,0 +1,728 @@
+<template>
+  <div class="homePage">
+    <div class="topBox">
+      <a-row :gutter="16">
+        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+          <div class="showBox">
+            <h2 class="title">
+              Top7项目消耗
+              <a-tooltip>
+                <template slot="title">最近七天的top7项目消耗</template>
+                <span>
+                  <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>
+        </a-col>
+        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+          <div class="showBox">
+            <h2 class="title">
+              总消耗
+              <p class="numshow">¥{{cost.weekCostSum}}</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 class="footerInfo">
+              周同比
+              <span class="num">
+                {{cost.weekCostSumLink|toPercentage}}
+                <span
+                  class="greenIcon"
+                  v-if="cost.weekCostSumLink>0"
+                ></span>
+                <span class="redIcon" v-else></span>
+              </span>
+            </div>
+          </div>
+        </a-col>
+        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+          <div class="showBox">
+            <h2 class="title">
+              点击数
+              <p class="numshow">{{click.weekClickSum}}</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 class="footerInfo">
+              周同比
+              <span class="num">
+                {{click.weekClickSumLink|toPercentage}}
+                <span
+                  class="greenIcon"
+                  v-if="cost.weekCostSumLink>0"
+                ></span>
+                <span class="redIcon" v-else></span>
+              </span>
+            </div>
+          </div>
+        </a-col>
+        <a-col :sm="24" :md="6" :xl="6" :xxl="6">
+          <div class="showBox">
+            <h2 class="title">
+              展示数
+              <p class="numshow">{{showNum.weekShowNumSum}}</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 class="footerInfo">
+              周同比
+              <span class="num">
+                {{showNum.weekShowNumSumLink | toPercentage}}
+                <span
+                  class="greenIcon"
+                  v-if="cost.weekCostSumLink>0"
+                ></span>
+                <span class="redIcon" v-else></span>
+              </span>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <!-- 折线图模块 -->
+    <div class="section">
+        <a-tabs default-active-key="cost" @change="callback" >
+            <a-tab-pane key="cost" tab="总消耗"> 
+            </a-tab-pane>
+            <a-tab-pane key="click" tab="点击数" >     
+            </a-tab-pane>
+            <a-tab-pane key="showNum" tab="展示数">      
+            </a-tab-pane>
+        </a-tabs>
+        <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
+        <div class="duibi" @click="comparehandle">对比</div>
+        <div class="time"  @click="opendate">
+            <DatePicker :openOptions='openOptions' />
+        </div>
+    </div>
+
+
+    <!-- table数据 -->
+    <div class="tableshow">
+        <p><span>{{dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span></p>
+        <a-table
+          size="middle"
+          :columns="columns"
+          :dataSource="tableData"
+          bordered
+          id="outTable"
+          
+          :loading="loading"
+          style="word-break: break-all;"
+        >
+        <span slot="cpm" slot-scope="cpm">{{ cpm | tofixed }}</span>
+        <span slot="statDatetime" slot-scope>{{ dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span>
+        </a-table>
+    </div>
+    <!-- /展示的对比数据的模态框 -->
+    <a-modal v-model="compareVisiable" title="数据对比" @ok="handleOk" width='80%'>
+     
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import DatePicker from '@/components/DatePicker.vue'
+
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+// import vueEchart from './components/vueEchart'
+// 引入基本模板
+var echarts = require('echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+require('echarts/lib/chart/pie')
+require('echarts/lib/chart/line')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+require('echarts/lib/component/graphic')
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/legend')
+
+let option = {
+  color: ['#1890ff'],
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      // 坐标轴指示器,坐标轴触发有效
+      type: 'line' // 默认为直线,可选为:'line' | 'shadow'
+    }
+  },
+  grid: {
+    left: '0%',
+    // right: '4%',
+    bottom: '-10%',
+    top: '12%',
+    containLabel: false
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: [],
+      show: false,
+      axisTick: {
+        alignWithLabel: true
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      show: true
+    }
+  ],
+  series: [
+    {
+      name: '',
+      type: 'bar',
+      barWidth: '40%',
+      smooth: true,
+      areaStyle: {
+        color: '#1890ff'
+      },
+      data: []
+    }
+  ]
+}
+
+let sectionOption={
+    tooltip: {
+        trigger: 'axis',
+            axisPointer: {
+            // 坐标轴指示器,坐标轴触发有效
+            type: 'line' // 默认为直线,可选为:'line' | 'shadow'
+            }
+    },
+    legend: {
+        data: ['总消耗']
+    },
+    grid: {
+        left: '2%',
+        right: '0%',
+        bottom: '0%',
+        top: '12%',
+        containLabel: true
+    },
+    xAxis: [
+        {
+            type: 'category',
+            data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisTick: {
+                alignWithLabel: true
+            }
+        }
+    ],
+    yAxis: [
+        {
+        type: 'value',
+        show: true
+        }
+    ],
+    series: [
+        {
+            name: '总消耗',
+            type: 'line',
+            smooth: true,
+            data:  [820, 932, 901, 934, 1290, 1330, 1320],
+            color:'#32CD32'
+        },
+        {
+            name: '',
+            type: 'line',
+            smooth: true,
+            data:  [],
+            color:'#8A2BE2'
+        },
+    ]
+}
+
+let init={
+    today:{
+        x:['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00'],
+        y:[],
+        name:"今天"
+    },
+    yesterday:{
+        x:['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00'],
+        y:[],
+        name:"昨天"
+    }
+}
+
+
+let columns = [
+  {
+    title: '日期/时间',
+    dataIndex: 'statDate',
+    scopedSlots: { customRender: 'statDate' },
+    align: 'center',
+    
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+   
+  },
+  {
+    title: '消耗环比',
+    dataIndex: 'costProportion',
+    scopedSlots: { customRender: 'costProportion' },
+    align: 'center',
+    
+  },
+  {
+    title: '点击数',
+    dataIndex: 'clickMaterial',
+    align: 'center',
+    scopedSlots: { customRender: 'clickMaterial' },
+   
+  },
+  {
+    title: '点击率',
+    dataIndex: 'ctr',
+    align: 'center',
+    scopedSlots: { customRender: 'ctr' },
+   
+  },
+
+  {
+    title: '展示数',
+    dataIndex: 'showMaterial',
+    align: 'center',
+    scopedSlots: { customRender: 'showMaterial' },
+   
+  },
+  {
+    title: '平均千次展现费用',
+    dataIndex: 'cpm',
+    align: 'center',
+    scopedSlots: { customRender: 'cpm' },
+   
+  },
+  {
+    title: '平均点击单价',
+    dataIndex: 'cp',
+    align: 'center',
+    scopedSlots: { customRender: 'cp' },
+    
+  },
+  
+]
+export default {
+  
+    components:{
+        DatePicker
+    },
+  data() {
+    return {
+      //echart的配置项option
+      topOption: JSON.parse(JSON.stringify(option)),
+      costOption: JSON.parse(JSON.stringify(option)),
+      clickOption: JSON.parse(JSON.stringify(option)),
+      showOption: JSON.parse(JSON.stringify(option)),
+      sectionOption:JSON.parse(JSON.stringify(sectionOption)),
+    //页面四个块的数据
+      cost: {},
+      click: {},
+      showNum: {},
+    //tab的选中key
+        tabKey:'',
+        tabCost:{},
+        tabClick:{},
+        tabShowNum:{},
+    //对比的模态框
+      compareVisiable:false,
+      compareSign:'day',
+      //table
+      loading: false,
+      columns,
+      tableData:[],
+      //子元素的数据存储
+    
+        type:1,
+        dateValue:[moment(),moment()],
+      //日期矿打开
+      openOptions:false,
+
+    }
+  },
+  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],
+            endDate:this.dateValue[1]
+            })
+        }else if(this.type==10){
+            this.sectionHttp({
+              type:this.type,
+              startDate:this.dateValue[0],
+              endDate:this.dateValue[1],
+              sign:this.compareSign
+            })
+        }
+    },
+    
+  },
+  methods: {
+    //获取echart的值
+    getEchartData(idName, optionName) {
+      const chart = this.$refs[idName]
+      //   console.log(chart)
+      if (chart) {
+        const myChart = echarts.init(document.getElementById(idName))
+        myChart.setOption(optionName)
+        window.addEventListener('resize', function() {
+          myChart.resize()
+        })
+      }
+    },
+
+    //网络请求方法
+    echartsHttp() {
+     
+      return new Promise((resolve, reject) => {
+        postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
+        //   console.log(res)
+          if (res.success) {
+            this.loading = false
+
+            this.cost = res.result.costWeekLink
+            this.click = res.result.clickWeekLink
+            this.showNum = res.result.showNumWeekLink
+            res.result.top.top7.forEach((element, index) => {
+              this.topOption.xAxis[0].data.push(element.authName)
+              this.topOption.series[0].data.push(element.cost)
+            })
+
+            for (let [key, value] of Object.entries(res.result.costWeek)) {
+              this.costOption.xAxis[0].data.push(key)
+              this.costOption.series[0].data.push(value)
+            }
+            for (let [key, value] of Object.entries(res.result.clickWeek)) {
+              this.clickOption.xAxis[0].data.push(key)
+              this.clickOption.series[0].data.push(value)
+            }
+            for (let [key, value] of Object.entries(res.result.showNumWeek)) {
+              this.showOption.xAxis[0].data.push(key)
+              this.showOption.series[0].data.push(value)
+            }
+
+            this.getEchartData('topChart', this.topOption)
+            this.getEchartData('costChart', this.costOption)
+            this.getEchartData('clickChart', this.clickOption)
+            this.getEchartData('showChart', this.showOption)
+            
+          }
+        })
+      })
+    },
+    //处理echart
+    sectionHttp(params) {
+      this.loading = true
+      return new Promise((resolve, reject) => {
+        postAction('/ctop/byteDance/homePage/report/chart', params).then(res => {
+          console.log(res)
+          if (res.success) {
+            this.loading = false
+            //处理今天
+            if(res.result.chart[0].afterData && res.result.chart[0].afterData.statDate==moment().format('YYYY-MM-DD')){
+                this.tabCost=JSON.parse(JSON.stringify(init))
+                this.tabClick=JSON.parse(JSON.stringify(init))
+                this.tabShowNum=JSON.parse(JSON.stringify(init))
+                res.result.chart.forEach((item,index)=>{
+                    this.tabClick.yesterday.y.push(item.click)
+                    this.tabCost.yesterday.y.push(item.cost) 
+                    this.tabShowNum.yesterday.y.push(item.showNum)   
+                    if(item.afterData){
+                        this.tabClick.today.y.push(item.afterData.click)
+                        this.tabCost.today.y.push(item.afterData.cost)
+                        this.tabShowNum.today.y.push(item.afterData.showNum)
+                    }else{
+                        this.tabClick.today.y.push(0)
+                        this.tabCost.today.y.push(0)
+                        this.tabShowNum.today.y.push(0)
+                    }
+                    
+                });
+                this.sectionOption.legend.data=['今天','昨天'];
+                this.sectionOption.xAxis[0].data=this.tabCost.today.x;
+                this.sectionOption.series[0].data=this.tabCost.today.y;
+                this.sectionOption.series[0].name=this.tabCost.today.name;
+                this.sectionOption.series[1].data=this.tabCost.yesterday.y;
+                this.sectionOption.series[1].name=this.tabCost.yesterday.name;
+                
+
+            }else if(res.result.chart[0].afterData&& res.result.chart[0].afterData.statDate==moment().subtract(1,'days').format('YYYY-MM-DD')){
+                //处理昨天
+                this.tabCost=[]
+                this.tabClick=[]
+                this.tabShowNum=[]
+                res.result.chart.forEach((item,index)=>{ 
+                    if(item.afterData){
+                        this.tabClick.push(item.afterData.click)
+                        this.tabCost.push(item.afterData.cost)
+                        this.tabShowNum.push(item.afterData.showNum)
+                    }else{
+                        this.tabClick.push(0)
+                        this.tabCost.push(0)
+                        this.tabShowNum.push(0)
+                    }
+                    
+                });
+                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)=>{ 
+                    
+                        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.sectionOption.xAxis[0].data=this.tabCost.x;
+                this.sectionOption.series[0].data=this.tabCost.y;
+            }           
+           this.getEchartData('sectionChart', this.sectionOption)
+          }
+        })
+      })
+    },
+
+    //tab切换页的事件
+    callback(key) {
+        // console.log(key);
+        // this.tabKey=key;
+        this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
+        if(key=='cost'){
+            if(this.type==1){
+                this.sectionOption.legend.data=['今天','昨天'];
+                this.sectionOption.xAxis[0].data=this.tabCost.today.x;
+                this.sectionOption.series[0].data=this.tabCost.today.y;
+                this.sectionOption.series[0].name=this.tabCost.today.name;
+                this.sectionOption.series[1].data=this.tabCost.yesterday.y;
+                this.sectionOption.series[1].name=this.tabCost.yesterday.name;
+            }else if(this.type==2){
+                this.sectionOption.xAxis[0].data=init.today.x;
+                this.sectionOption.series[0].data=this.tabCost;
+            }else{
+                this.sectionOption.xAxis[0].data=this.tabCost.x;
+                this.sectionOption.series[0].data=this.tabCost.y;
+            }
+        }else if(key=='click'){
+             if(this.type==1){
+                this.sectionOption.legend.data=['今天','昨天'];
+                this.sectionOption.xAxis[0].data=this.tabClick.today.x;
+                this.sectionOption.series[0].data=this.tabClick.today.y;
+                this.sectionOption.series[0].name=this.tabClick.today.name;
+                this.sectionOption.series[1].data=this.tabClick.yesterday.y;
+                this.sectionOption.series[1].name=this.tabClick.yesterday.name;
+            }else if(this.type==2){
+                this.sectionOption.xAxis[0].data=init.today.x;
+                this.sectionOption.series[0].data=this.tabClick;
+            }else{   
+                this.sectionOption.xAxis[0].data=this.tabClick.x;
+                this.sectionOption.series[0].data=this.tabClick.y;
+            }
+        }else{
+             if(this.type==1){
+                this.sectionOption.legend.data=['今天','昨天'];
+                this.sectionOption.xAxis[0].data=this.tabShowNum.today.x;
+                this.sectionOption.series[0].data=this.tabShowNum.today.y;
+                this.sectionOption.series[0].name=this.tabShowNum.today.name;
+                this.sectionOption.series[1].data=this.tabShowNum.yesterday.y;
+                this.sectionOption.series[1].name=this.tabShowNum.yesterday.name;
+            }else if(this.type==2){
+                this.sectionOption.xAxis[0].data=init.today.x;
+                this.sectionOption.series[0].data=this.tabShowNum;
+            }else{
+                this.sectionOption.xAxis[0].data=this.tabShowNum.x;
+                this.sectionOption.series[0].data=this.tabShowNum.y;
+            }
+        }
+        this.getEchartData('sectionChart', this.sectionOption)
+    },
+   
+   //打开日期框
+   opendate(){
+       this.openOptions=!this.openOptions;
+      //  console.log(this.openOptions)
+   },
+
+   //对比按钮的事件
+   comparehandle(){
+     this.compareVisiable=true;
+     
+   },
+   //motaikuang
+   handleOk(e) {
+      // console.log(e);
+      this.compareVisiable = false;
+   },
+
+    
+  },
+  mounted() {
+    //处理四个图标的样式
+    this.costOption.yAxis[0].show = false
+    
+    this.costOption.series[0].type = 'line'
+    this.showOption.yAxis[0].show = false
+    
+    this.showOption.series[0].type = 'line'
+    this.clickOption.yAxis[0].show = false
+    
+
+    this.echartsHttp();
+    this.sectionHttp({type:1});
+  },
+  filters: {
+    toPercentage(val) {
+      return (val * 100).toFixed(2) + '%'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.homePage {
+    .topBox{
+        margin-bottom: 20px;;
+    }
+  .showBox {
+    width: 98%;
+    box-sizing: border-box;
+    margin-right: 20px;
+    padding: 25px;
+    background-color: #fff;
+    .title {
+      position: relative;
+      span {
+        position: absolute;
+        top: 0;
+        right: 0;
+        cursor: pointer;
+      }
+    }
+    .numshow {
+      padding: 5px 0;
+      height: 30px;
+      margin-bottom: 0;
+    }
+  }
+
+  .footerInfo {
+    border-top: 1px solid #333;
+    padding-top: 10px;
+    font-weight: 500;
+    font-size: 16px;
+    position: relative;
+    height: 60px;
+    .num {
+      display: inline-block;
+      margin-left: 10px;
+      padding-right: 15px;
+      position: relative;
+    }
+    .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;
+    }
+  }
+
+  .section{
+      width: 100%;
+      background-color: #fff;
+      padding: 10px 15px 20px;
+      position: relative;
+      margin-bottom: 20px;;
+      .duibi{
+          position: absolute;
+          
+          height: 30px;
+          line-height: 30px;
+          padding: 0 15px;
+          top: 15px;
+          right: 300px;
+          border: 1px solid #666;
+          cursor: pointer;
+      }
+      .time{
+        position: absolute;
+          
+         width:280px;
+          
+          top: 15px;
+          right: 0px;
+          
+          cursor: pointer;  
+      }
+  }
+  .tableshow{
+    width: 100%;
+    padding: 20px 15px;
+    background-color: #fff;
+    p{
+      width: 100%;
+      border-bottom: 1px solid #666;
+      padding-bottom: 20px;
+      span{
+        display: inline-block;
+        border: 1px solid #666;
+        padding: 5px 15px;
+      }
+    }
+  }
+
+
+}
+</style>

+ 1 - 1
src/views/modules/Statistics/videoStatics/vSummary.vue

@@ -117,7 +117,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="cpm">{{ cpm | tofixed }}</span>
+      <span slot="cpc" slot-scope="cpc">{{ cpc | tofixed }}</span>
       <span slot="cpm" slot-scope="cpm">{{ cpm | tofixed }}</span>
       <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
       <span

+ 4 - 3
vue.config.js

@@ -67,11 +67,12 @@ module.exports = {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
         // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.1.13:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        // target: 'http://192.168.1.22:8088', //请求本地 需要jeecg-boot后台项目  英豪
+        // target: 'http://192.168.1.22:8080', //请求本地 需要jeecg-boot后台项目  英豪
+        // target: 'http://192.168.0.125:8080', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.103:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
-        target: 'http://192.168.1.54:8080', //请求本地 需要jeecg-boot后台项目  孙震
-        // target: 'http://192.168.1.165:8080', //请求本地 需要jeecg-boot后台项目  毕洁泉
+        // target: 'http://192.168.1.54:8080', //请求本地 需要jeecg-boot后台项目  孙震
+        target: 'http://192.168.1.165:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         ws: false,
         changeOrigin: true
       },