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