|
@@ -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>
|