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