浏览代码

提交-打版

zhuxinbo 5 年之前
父节点
当前提交
aee4c86d30
共有 4 个文件被更改,包括 1025 次插入119 次删除
  1. 7 5
      src/components/DatePicker.vue
  2. 734 0
      src/views/modules/Statistics/CompareData.vue
  3. 281 112
      src/views/modules/Statistics/newHome.vue
  4. 3 2
      vue.config.js

+ 7 - 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')]
     },
 ]
 
@@ -85,6 +85,8 @@ let pickOptions=[
                 console.log(this.dateValue)
                 if(dateString.length==2){
                     this.$parent.opendate();
+                    this.$parent.type=9
+                    this.$parent.dateValue=date
                 };
 
             },

+ 734 - 0
src/views/modules/Statistics/CompareData.vue

@@ -0,0 +1,734 @@
+<template>
+  <div class="compareData">
+    <!-- /展示的对比数据的模态框 -->
+    <a-modal v-model="compVisiable" title="数据对比" @ok="handleOk" width="65%" border :footer="null">
+      <div class="clickHandle">
+        <a-radio-group v-model="value"  @change="radioChange" name="dateGroup">
+          <a-radio-button value="month" defaultChecked>月对比</a-radio-button>
+          <a-radio-button value="day">天对比</a-radio-button>
+        </a-radio-group>
+
+        <span v-if="compareSign=='month'" class="selectDate">
+          <a-range-picker
+            v-model="monthValue"
+            :placeholder="['选择月份', '选择月份']"
+            format="YYYY-MM"
+            :value="value"
+            :mode="mode2"
+            @panelChange="handlePanelChange2"
+            @change="handleChange"
+          />
+        </span>
+        <span v-else class="selectDate">
+          <a-range-picker v-model="dateValue" @change="onChange" :disabled-date="disabledDate" />
+        </span>
+
+        <span class="searchBtn">
+          <a-button type="primary" @click="searchHandle">查询</a-button>
+        </span>
+      </div>
+      <div class="showbox">
+        <div class="costcompare">
+          <div>总消耗对比</div>
+          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
+            <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|decimalsHandle}} </span>
+            </p>
+          <p>环比:
+            <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 |formatCurrency}}</span>
+            </p>
+          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+            <span>  {{clickcompare.next |formatCurrency}}</span>
+            </p>
+          <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|formatCurrency}} </span>
+              </p>
+          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+            <span>  {{showNumcompare.prev|formatCurrency}}</span>
+              </p>
+          <p>环比:
+            <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>
+      <div class="compareChart">
+        <a-tabs default-active-key="Tcost" @change="compareTab">
+          <a-tab-pane key="Tcost" tab="总消耗"></a-tab-pane>
+          <a-tab-pane key="Tclick" tab="点击数"></a-tab-pane>
+          <a-tab-pane key="TshowNum" tab="展示数"></a-tab-pane>
+        </a-tabs>
+        <div id="compareChart" style="width:100%;height:300px" ref="compareChart"></div>
+      </div>
+      <div class="tableCompare">
+        <div class="time">
+          <a-radio-group v-model="tableTab" @change="tableTabChange">
+            <a-radio-button
+              :value="1"
+              defaultChecked
+            >{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}</a-radio-button>
+            <a-radio-button
+              :value="2"
+            >{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}</a-radio-button>
+          </a-radio-group>
+        </div>
+        <a-table
+          size="middle"
+          :columns="columns"
+          :dataSource="tableData"
+          :pagination="false"
+          bordered
+          id="outTable"
+          :loading="loading"
+          style="word-break: break-all;"
+        >
+          <span
+            slot="costProportion"
+            slot-scope="costProportion"
+          >{{ costProportion | toPercentage }}</span>
+          <!-- <span slot="statDatetime" slot-scope>{{ dateValue[0].format('YYYY-MM-DD')+'~'+dateValue[1].format('YYYY-MM-DD')}}</span> -->
+        </a-table>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+// 引入基本模板
+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 compareOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      // 坐标轴指示器,坐标轴触发有效
+      type: 'line' // 默认为直线,可选为:'line' | 'shadow'
+    }
+  },
+  legend: {
+    data: ['']
+  },
+  grid: {
+    left: '1%',
+    right: '0%',
+    bottom: '5%',
+    top: '10%',
+    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: [],
+      color: '#32CD32'
+    },
+    {
+      name: '',
+      type: 'line',
+      smooth: true,
+      data: [],
+      color: '#8A2BE2'
+    }
+  ]
+}
+
+let columns = [
+  {
+    title: '日期/时间',
+    dataIndex: 'statDate',
+    scopedSlots: { customRender: 'statDate' },
+    align: 'center',
+    key: 'statDate'
+  },
+  {
+    title: '消耗(元)',
+    dataIndex: 'cost',
+    scopedSlots: { customRender: 'cost' },
+    align: 'center',
+    key: 'cost'
+  },
+  {
+    title: '消耗环比',
+    dataIndex: 'costProportion',
+    scopedSlots: { customRender: 'costProportion' },
+    align: 'center',
+    key: 'costProportion'
+  },
+  {
+    title: '点击数',
+    dataIndex: 'click',
+    align: 'center',
+    scopedSlots: { customRender: 'click' },
+    key: 'click'
+  },
+  {
+    title: '点击率',
+    dataIndex: 'clickRate',
+    align: 'center',
+    scopedSlots: { customRender: 'clickRate' },
+    key: 'clickRate'
+  },
+
+  {
+    title: '展示数',
+    dataIndex: 'showNum',
+    align: 'center',
+    scopedSlots: { customRender: 'showNum' },
+    key: 'showNum'
+  },
+  {
+    title: '平均千次展现费用(元)',
+    dataIndex: 'cpm',
+    align: 'center',
+    scopedSlots: { customRender: 'cpm' },
+    key: 'cpm'
+  },
+  {
+    title: '平均点击单价(元)',
+    dataIndex: 'cp',
+    align: 'center',
+    scopedSlots: { customRender: 'cp' },
+    key: 'cp'
+  }
+]
+let initDay = {
+  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 initMonth = {
+  today: {
+    x: [],
+    y: [],
+    name: ''
+  },
+  yesterday: {
+    x: [],
+    y: [],
+    name: ''
+  }
+}
+export default {
+  props: ['compareVisiable'],
+  data() {
+    return {
+      moment,
+      compareOption: JSON.parse(JSON.stringify(compareOption)),
+      //对比的模态框
+      compVisiable: false,
+      compareSign: 'month',
+      //日期选择器
+      mode2: ['month', 'month'],
+      value: "month",
+      dateValue: [],
+      monthValue: [],
+      //tab的选中key
+      tabKey: '',
+      tabCost: {},
+      tabClick: {},
+      tabShowNum: {},
+      //table
+      loading: false,
+      columns,
+      tableData: [],
+      tableTab: 1,
+      smallDate: [],
+      bigDate: [],
+      //showbox里的数据
+      costcompare: {
+        prev: 0,
+        next: 0
+      },
+      clickcompare: {
+        prev: 0,
+        next: 0
+      },
+      showNumcompare: {
+        prev: 0,
+        next: 0
+      }
+    }
+  },
+  watch: {
+    compareVisiable() {
+      this.compVisiable = this.compareVisiable
+    },
+    compVisiable(n) {
+    //   console.log(n)
+      this.$emit('close_modal', n)
+    }
+  },
+  methods: {
+    //单选框选择
+    radioChange(e) {
+      this.compareSign = e.target.value
+    //   console.log(this.compareSign)
+      if (this.compareSign == 'day') {
+
+        this.sectionHttp({
+          type: 10,
+          sign: this.compareSign,
+          smallDate: this.dateValue[0].format('YYYY-MM-DD'),
+          bigDate: this.dateValue[1].format('YYYY-MM-DD')
+        })
+      } else {
+        this.sectionHttp({
+          type: 10,
+          sign: this.compareSign,
+          smallDate: this.monthValue[0].format('YYYY-MM'),
+          bigDate: this.monthValue[1].format('YYYY-MM')
+        })
+      }
+    },
+    tableTabChange(e) {
+      this.tableTab = e.target.value
+      if (e.target.value == '1') {
+        this.tableData = this.smallDate
+      } else {
+        this.tableData = this.bigDate
+      }
+      
+    },
+    //获取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()
+        })
+      }
+    },
+
+    //处理echart
+    sectionHttp(params) {
+      this.loading = true
+      this.compareOption = JSON.parse(JSON.stringify(compareOption))
+      return new Promise((resolve, reject) => {
+        postAction('/ctop/byteDance/homePage/report/compare', params).then(res => {
+        //   console.log(res)
+          if (res.success) {
+            this.loading = false
+            if (this.compareSign == 'day') {
+              this.tabCost = JSON.parse(JSON.stringify(initDay))
+              this.tabClick = JSON.parse(JSON.stringify(initDay))
+              this.tabShowNum = JSON.parse(JSON.stringify(initDay))
+              this.compareOption.legend.data = [
+                this.dateValue[0].format('YYYY-MM-DD'),
+                this.dateValue[1].format('YYYY-MM-DD')
+              ]
+              this.compareOption.series[0].name = this.dateValue[1].format('YYYY-MM-DD')
+              this.compareOption.series[1].name = this.dateValue[0].format('YYYY-MM-DD')
+            } else {
+              this.tabCost = JSON.parse(JSON.stringify(initMonth))
+              this.tabClick = JSON.parse(JSON.stringify(initMonth))
+              this.tabShowNum = JSON.parse(JSON.stringify(initMonth))
+              this.compareOption.legend.data = [
+                this.monthValue[0].format('YYYY-MM'),
+                this.monthValue[1].format('YYYY-MM')
+              ]
+              this.compareOption.series[0].name = this.monthValue[1].format('YYYY-MM')
+              this.compareOption.series[1].name = this.monthValue[0].format('YYYY-MM')
+              res.result.chart.compare.forEach((item, index) => {
+                this.tabClick.yesterday.x.push(item.statDate.split('-')[2])
+                this.tabCost.yesterday.x.push(item.statDate.split('-')[2])
+                this.tabShowNum.yesterday.x.push(item.statDate.split('-')[2])
+              })
+            }
+            res.result.chart.compare.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.compareOption.xAxis[0].data = this.tabCost.yesterday.x
+            this.compareOption.series[0].data = this.tabCost.today.y
+            this.compareOption.series[1].data = this.tabCost.yesterday.y
+            this.getEchartData('compareChart', this.compareOption)
+
+            //处理表格数据
+            res.result.list.smallDate.forEach((ele,index) => {
+              if (!ele.costProportion) {
+                ele.costProportion = '-'
+              }
+              if (ele.statHour || ele.statHour == 0) {
+                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,index) => {
+              if (!ele.costProportion) {
+                ele.costProportion = '-'
+              }
+              if (ele.statHour || ele.statHour == 0) {
+                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
+              this.showNumcompare.next += ele.showNum
+            })
+            if(res.result.list.bigDate.length<res.result.list.smallDate.length){
+                for (let i = 0; i < res.result.list.bigDate.length; i++) {
+                    this.costcompare.prev += res.result.list.smallDate[i].cost
+                    this.clickcompare.prev += res.result.list.smallDate[i].click
+                    this.showNumcompare.prev += res.result.list.smallDate[i].showNum
+                }
+            }else{
+                for (let i = 0; i < res.result.list.smallDate.length; i++) {
+                    this.costcompare.prev += res.result.list.bigDate[i].cost
+                    this.clickcompare.prev += res.result.list.bigDate[i].click
+                    this.showNumcompare.prev += res.result.list.bigDate[i].showNum
+                }
+            }
+            
+
+            this.bigDate = [...res.result.list.bigDate]
+            this.tableData = this.smallDate
+          }
+        })
+      })
+    },
+    //对比模块的tab事件
+    compareTab(key) {
+      // this.compareOption=JSON.parse(JSON.stringify(compareOption))
+      if (key == 'Tcost') {
+        this.compareOption.xAxis[0].data = this.tabCost.yesterday.x
+        this.compareOption.series[0].data = this.tabCost.today.y
+        this.compareOption.series[1].data = this.tabCost.yesterday.y
+      } else if (key == 'Tclick') {
+        this.compareOption.xAxis[0].data = this.tabClick.yesterday.x
+        this.compareOption.series[0].data = this.tabClick.today.y
+        this.compareOption.series[1].data = this.tabClick.yesterday.y
+      } else {
+        this.compareOption.xAxis[0].data = this.tabShowNum.yesterday.x
+        this.compareOption.series[0].data = this.tabShowNum.today.y
+        this.compareOption.series[1].data = this.tabShowNum.yesterday.y
+      }
+      this.getEchartData('compareChart', this.compareOption)
+    },
+    //motaikuang
+    handleOk(e) {
+      // console.log(e);
+      this.compVisiabled = false
+      // this.$emit('update', this.compareVisiabled);
+      // this.$parent.compareVisiable=false;
+    },
+    onChange(date, dateString) {
+    
+      this.dateValue = date
+    },
+    handleChange(value) {
+      console.log(value)
+      this.monthValue = value
+    },
+
+    handlePanelChange2(value, mode) {
+      
+   
+      this.monthValue =value
+      this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
+    },
+
+    //按钮查询事件
+    searchHandle() {
+      if (this.compareSign == 'day') {
+        this.sectionHttp({
+          type: 10,
+          sign: this.compareSign,
+          smallDate: this.dateValue[0].format('YYYY-MM-DD'),
+          bigDate: this.dateValue[1].format('YYYY-MM-DD')
+        })
+      } else {
+        this.sectionHttp({
+          type: 10,
+          sign: this.compareSign,
+          smallDate: this.monthValue[0].format('YYYY-MM'),
+          bigDate: this.monthValue[1].format('YYYY-MM')
+        })
+      }
+    },
+    disabledDate(current) {
+      return current && current > moment().subtract(1, 'day')
+    },
+  },
+
+  mounted() {
+    this.monthValue = [moment().subtract(1, 'months'), moment()]
+    this.dateValue = [moment().subtract(1, 'days'), moment()]
+  },
+  // activated() {
+  //     this.monthValue=[moment().subtract(1,'months'),moment()]
+  //     this.sectionHttp({
+  //         type:10,
+  //         sign:this.compareSign,
+  //         smallDate:moment().subtract(1,'months').format('YYYY-MM'),
+  //         bigDate:moment().format('YYYY-MM'),
+  //     })
+  // },
+  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
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.clickHandle {
+  position: relative;
+  top: -24px;
+  left: 0px;
+  .selectDate {
+    margin-left: 2rem;
+  }
+  .searchBtn {
+    position: absolute;
+    top: 5px;
+    right: 0;
+  }
+}
+.time {
+  margin-bottom: 10px;
+}
+.showbox {
+  padding: 10px 0;
+  display: flex;
+  justify-content: space-between;
+  .costcompare {
+    width: 30%;
+    border: 1px solid #e0e0e0;
+    padding-bottom: 20px;
+    div {
+      border-bottom: 1px solid #e0e0e0;
+      padding: 5px 10px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    p {
+      padding: 15px 15px 5px;
+      margin-bottom: 0;
+      span{
+          font-weight: 500;
+          font-size: 16px;
+          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;
+    }
+    }
+  }
+}
+.compareChart {
+  border: 1px solid #e0e0e0;
+  margin-bottom: 20px;
+}
+.tableCompare {
+  border: 1px solid #e0e0e0;
+  padding: 1px 20px 15px;
+}
+</style>

+ 281 - 112
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,52 +43,52 @@
             </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">
                 {{click.weekClickSumLink|toPercentage}}
                 <span
                   class="greenIcon"
-                  v-if="cost.weekCostSumLink>0"
+                  v-if="click.weekClickSumLink>0"
                 ></span>
                 <span class="redIcon" v-else></span>
               </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">{{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">
                 {{showNum.weekShowNumSumLink | toPercentage}}
                 <span
                   class="greenIcon"
-                  v-if="cost.weekCostSumLink>0"
+                  v-if="showNum.weekShowNumSumLink>0"
                 ></span>
                 <span class="redIcon" v-else></span>
               </span>
@@ -108,9 +108,9 @@
             </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' />
+            <DatePicker :openOptions='openOptions'/>
         </div>
     </div>
 
@@ -122,26 +122,25 @@
           size="middle"
           :columns="columns"
           :dataSource="tableData"
+          :pagination=false
           bordered
-          id="outTable"
-          
+          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>
+        <span slot="costProportion" slot-scope="costProportion">{{ costProportion | toPercentage }}</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>
+    <!-- <p class="footertip">我们是有底线的~</p> -->
+    <CompareData :compareVisiable.sync='compareVisiable'  @close_modal='close_modal' ref="compareData"/>
   </div>
 </template>
 
 <script>
 import moment from 'moment'
 import DatePicker from '@/components/DatePicker.vue'
+import CompareData from './CompareData.vue'
 
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
 // import vueEchart from './components/vueEchart'
@@ -169,16 +168,18 @@ let option = {
   },
   grid: {
     left: '0%',
-    // right: '4%',
-    bottom: '-10%',
+    right: '0%',
+    bottom: '0%',
     top: '12%',
-    containLabel: false
+    containLabel: false,
+    
   },
   xAxis: [
     {
       type: 'category',
       data: [],
-      show: false,
+      show: true,
+      
       axisTick: {
         alignWithLabel: true
       }
@@ -187,7 +188,7 @@ let option = {
   yAxis: [
     {
       type: 'value',
-      show: true
+      show: false
     }
   ],
   series: [
@@ -196,14 +197,38 @@ let option = {
       type: 'bar',
       barWidth: '40%',
       smooth: true,
-      areaStyle: {
-        color: '#1890ff'
+      areaStyle:{},
+      itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+              0, 0, 0, 1,
+              [
+                  {offset: 0, color: '#1890ff'},                 
+                  {offset: 1, color: '#FFF'}
+              ]
+          )
       },
       data: []
     }
   ]
 }
 
+let lineStyle= {
+        color:{
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+         colorStops: [{
+            offset: 0, color: '#1890ff' // 0% 处的颜色
+        }, {
+            offset: 1, color: '#fff' // 100% 处的颜色
+        }],
+         global: false // 缺省为 false
+        },
+        
+        // color: '#1890ff'
+}
 let sectionOption={
     tooltip: {
         trigger: 'axis',
@@ -275,13 +300,15 @@ let columns = [
     dataIndex: 'statDate',
     scopedSlots: { customRender: 'statDate' },
     align: 'center',
+    key:'statDate'
     
   },
   {
-    title: '消耗',
+    title: '消耗(元)',
     dataIndex: 'cost',
     scopedSlots: { customRender: 'cost' },
     align: 'center',
+    key:'cost'
    
   },
   {
@@ -289,50 +316,52 @@ let columns = [
     dataIndex: 'costProportion',
     scopedSlots: { customRender: 'costProportion' },
     align: 'center',
+    key:"costProportion"
     
   },
   {
     title: '点击数',
-    dataIndex: 'clickMaterial',
+    dataIndex: 'click',
     align: 'center',
-    scopedSlots: { customRender: 'clickMaterial' },
-   
+    scopedSlots: { customRender: 'click' },
+    key:'click'
   },
   {
     title: '点击率',
-    dataIndex: 'ctr',
+    dataIndex: 'clickRate',
     align: 'center',
-    scopedSlots: { customRender: 'ctr' },
-   
+    scopedSlots: { customRender: 'clickRate' },
+    key:'clickRate'
   },
 
   {
     title: '展示数',
-    dataIndex: 'showMaterial',
+    dataIndex: 'showNum',
     align: 'center',
-    scopedSlots: { customRender: 'showMaterial' },
-   
+    scopedSlots: { customRender: 'showNum' },
+    key:"showNum"
   },
   {
-    title: '平均千次展现费用',
+    title: '平均千次展现费用(元)',
     dataIndex: 'cpm',
     align: 'center',
     scopedSlots: { customRender: 'cpm' },
-   
+    key:'cpm'
   },
   {
-    title: '平均点击单价',
+    title: '平均点击单价(元)',
     dataIndex: 'cp',
     align: 'center',
     scopedSlots: { customRender: 'cp' },
-    
+    key:"cp"
   },
   
 ]
 export default {
   
     components:{
-        DatePicker
+        DatePicker,
+        CompareData
     },
   data() {
     return {
@@ -351,9 +380,9 @@ export default {
         tabCost:{},
         tabClick:{},
         tabShowNum:{},
-    //对比的模态框
+      //对比的模态框
       compareVisiable:false,
-      compareSign:'day',
+      
       //table
       loading: false,
       columns,
@@ -370,21 +399,15 @@ export default {
   watch:{
     type(n,o){
       // console.log(n,o)
-        console.log(this.type)
+        // 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
+            startDate:this.dateValue[0].format('YYYY-MM-DD'),
+            endDate:this.dateValue[1].format('YYYY-MM-DD')
             })
         }
     },
@@ -446,9 +469,10 @@ export default {
     //处理echart
     sectionHttp(params) {
       this.loading = true
+      this.sectionOption=JSON.parse(JSON.stringify(sectionOption));
       return new Promise((resolve, reject) => {
         postAction('/ctop/byteDance/homePage/report/chart', params).then(res => {
-          console.log(res)
+          // console.log(res)
           if (res.success) {
             this.loading = false
             //处理今天
@@ -471,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;
@@ -496,27 +521,82 @@ 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)
+           this.getEchartData('sectionChart', this.sectionOption);
+
+
+           //处理表格数据
+           let total={
+              statDate:'总计',
+              cost:0,           
+              click:0,
+              clickRate:0,
+              costProportion:'-',
+              cp:0,
+              cpm:0,
+              showNum:0
+          }
+           
+           res.result.list.forEach((ele,index)=>{
+              if(!ele.costProportion){
+                  ele.costProportion='-'
+              }
+              if(ele.statHour||ele.statHour==0){
+                  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
+           })
+            total.cost=(total.cost).toFixed(2)
+           total.clickRate=(total.click/total.showNum*100).toFixed(2)+'%'
+           total.cp=(total.cost/total.click).toFixed(2)
+           total.cpm=(total.cost/total.showNum*1000).toFixed(2)
+           this.tableData=[total,...res.result.list]
           }
         })
       })
@@ -525,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){
@@ -551,11 +631,15 @@ export default {
                 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.legend.data=['点击数'];
                 this.sectionOption.xAxis[0].data=init.today.x;
                 this.sectionOption.series[0].data=this.tabClick;
+                this.sectionOption.series[0].name='点击数';
             }else{   
+                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.type==1){
@@ -566,11 +650,15 @@ export default {
                 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.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.legend.data=['展示数'];
                 this.sectionOption.xAxis[0].data=this.tabShowNum.x;
                 this.sectionOption.series[0].data=this.tabShowNum.y;
+                this.sectionOption.series[0].name='展示数';
             }
         }
         this.getEchartData('sectionChart', this.sectionOption)
@@ -582,36 +670,94 @@ export default {
       //  console.log(this.openOptions)
    },
 
-   //对比按钮的事件
-   comparehandle(){
-     this.compareVisiable=true;
-     
-   },
-   //motaikuang
-   handleOk(e) {
-      // console.log(e);
-      this.compareVisiable = false;
-   },
-
-    
+    //对比按钮的事件
+    comparehandle(){
+      this.compareVisiable=true;
+      this.$refs.compareData.sectionHttp({
+        type: 10,
+        sign: 'month',
+        smallDate: moment()
+          .subtract(1, 'months')
+          .format('YYYY-MM'),
+        bigDate: moment().format('YYYY-MM')
+    })
+    },
+    close_modal(n){
+      // console.log(n)
+      this.compareVisiable=n;
+    },
+    //对比模块的tab事件
+    compareTab(key){
+        console.log(key)
+    }
   },
   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.costOption.series[0].type = 'line';
+    this.costOption.series[0].itemStyle = {};
+    this.costOption.series[0].areaStyle = lineStyle;
 
+    this.costOption.xAxis[0].boundaryGap = false    
+    this.showOption.series[0].type = 'line'  
+    this.showOption.series[0].itemStyle = {};
+    this.showOption.series[0].areaStyle = lineStyle;
+
+    this.showOption.xAxis[0].boundaryGap = false
     this.echartsHttp();
-    this.sectionHttp({type:1});
+    this.sectionHttp({type:this.type});
   },
   filters: {
     toPercentage(val) {
-      return (val * 100).toFixed(2) + '%'
+      if(typeof val != 'string'){
+          return (val * 100).toFixed(2) + '%'
+      }else{
+        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
+      }
+        
     }
   }
 }
@@ -620,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;
@@ -645,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;
@@ -693,7 +856,7 @@ export default {
           padding: 0 15px;
           top: 15px;
           right: 300px;
-          border: 1px solid #666;
+          // border: 1px solid #666;
           cursor: pointer;
       }
       .time{
@@ -713,16 +876,22 @@ 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;
       }
     }
   }
-
+.footertip{
+  background: #fff;
+  padding: 0 15px 20px;
+  font-size: 16px;
+  text-align: center;
+}
 
 }
 </style>

+ 3 - 2
vue.config.js

@@ -66,12 +66,13 @@ module.exports = {
       '/jeecg-boot': {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
         // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
-        target: 'http://192.168.1.23:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+        target: 'http://192.168.1.13:8080', //请求本地 需要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.165:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         ws: false,
         changeOrigin: true
       },