Browse Source

'首页-头条'

魏志佳 5 years ago
parent
commit
aebf08892e

+ 2 - 0
src/components/DatePicker.vue

@@ -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
                 };
 
             },

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

@@ -0,0 +1,643 @@
+<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}}</span>
+            </p>
+          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+            <span>  {{costcompare.next}} </span>
+            </p>
+          <p>环比:
+            <span>  {{(costcompare.next-costcompare.prev)/costcompare.prev| toPercentage}}</span>
+            </p>
+        </div>
+        <div class="costcompare">
+          <div>点击数对比</div>
+          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
+             <span> {{clickcompare.prev}}</span>
+            </p>
+          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+            <span>  {{clickcompare.next}}</span>
+            </p>
+          <p>环比:
+            <span>  {{(clickcompare.next-clickcompare.prev)/clickcompare.prev| toPercentage}}</span>
+            </p>
+        </div>
+        <div class="costcompare">
+          <div>展示数对比</div>
+          <p>{{compareSign=='month'?moment(monthValue[0]).format('YYYY-MM') : moment(dateValue[0]).format('YYYY-MM-DD')}}:
+             <span> {{showNumcompare.prev}} </span>
+              </p>
+          <p>{{compareSign=='month'?moment(monthValue[1]).format('YYYY-MM') : moment(dateValue[1]).format('YYYY-MM-DD')}}:
+            <span>  {{showNumcompare.prev}}</span>
+              </p>
+          <p>环比:
+            <span>  {{(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev| toPercentage}}</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 => {
+              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
+              }
+            })
+
+            this.smallDate = [...res.result.list.smallDate]
+            res.result.list.bigDate.forEach(ele => {
+              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
+              }
+              // 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
+      }
+    }
+  }
+}
+</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: 10px;
+      }
+    }
+  }
+}
+.compareChart {
+  border: 1px solid #e0e0e0;
+  margin-bottom: 20px;
+}
+.tableCompare {
+  border: 1px solid #e0e0e0;
+  padding: 1px 20px 15px;
+}
+</style>

+ 145 - 64
src/views/modules/Statistics/newHome.vue

@@ -62,7 +62,7 @@
                 {{click.weekClickSumLink|toPercentage}}
                 <span
                   class="greenIcon"
-                  v-if="cost.weekCostSumLink>0"
+                  v-if="click.weekClickSumLink>0"
                 ></span>
                 <span class="redIcon" v-else></span>
               </span>
@@ -88,7 +88,7 @@
                 {{showNum.weekShowNumSumLink | toPercentage}}
                 <span
                   class="greenIcon"
-                  v-if="cost.weekCostSumLink>0"
+                  v-if="showNum.weekShowNumSumLink>0"
                 ></span>
                 <span class="redIcon" v-else></span>
               </span>
@@ -110,7 +110,7 @@
         <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' />
+            <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'
@@ -172,13 +171,15 @@ let option = {
     // right: '4%',
     bottom: '-10%',
     top: '12%',
-    containLabel: false
+    containLabel: false,
+    
   },
   xAxis: [
     {
       type: 'category',
       data: [],
       show: false,
+      
       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,6 +300,7 @@ let columns = [
     dataIndex: 'statDate',
     scopedSlots: { customRender: 'statDate' },
     align: 'center',
+    key:'statDate'
     
   },
   {
@@ -282,6 +308,7 @@ let columns = [
     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: '平均千次展现费用',
     dataIndex: 'cpm',
     align: 'center',
     scopedSlots: { customRender: 'cpm' },
-   
+    key:'cpm'
   },
   {
     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,14 @@ 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 +468,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
             //处理今天
@@ -516,7 +539,38 @@ export default {
                 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)=>{
+              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
+              }
+              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]
           }
         })
       })
@@ -551,11 +605,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 +624,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 +644,50 @@ 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
+      }
+      
     }
   }
 }
@@ -722,7 +798,12 @@ export default {
       }
     }
   }
-
+.footertip{
+  background: #fff;
+  padding: 0 15px 20px;
+  font-size: 16px;
+  text-align: center;
+}
 
 }
 </style>

+ 0 - 9
vue.config.js

@@ -66,7 +66,6 @@ module.exports = {
       '/jeecg-boot': {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
         // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
-<<<<<<< HEAD
         // 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后台项目  英豪
@@ -74,14 +73,6 @@ module.exports = {
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.1.54:8080', //请求本地 需要jeecg-boot后台项目  孙震
         target: 'http://192.168.1.165:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
-=======
-        target: 'http://192.168.1.23:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        // target: 'http://192.168.1.22: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后台项目  毕洁泉
->>>>>>> a27f3b64d100e3e51d26f42b0fcae6625fd0d1ea
         ws: false,
         changeOrigin: true
       },