|
@@ -145,159 +145,68 @@
|
|
</a-row>
|
|
</a-row>
|
|
<a-row :gutter="16" v-if="kuaishou">
|
|
<a-row :gutter="16" v-if="kuaishou">
|
|
<a-col :span="6" style="width:20%">
|
|
<a-col :span="6" style="width:20%">
|
|
- <a-card title="总消耗" :bordered="false">
|
|
|
|
- <!-- <p>{{kuaishou.cost}}</p> -->
|
|
|
|
- <countTo :startVal="0" :endVal="kuaishou.cost" :duration="duration" :decimals="2"></countTo>
|
|
|
|
- <a-icon
|
|
|
|
- v-if="kuaishou.costProportion>0&&active==1"
|
|
|
|
- type="rise"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:red;"
|
|
|
|
- />
|
|
|
|
- <a-icon
|
|
|
|
- v-else-if="kuaishou.costProportion<0&&active==1"
|
|
|
|
- type="fall"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:#0bcd74;"
|
|
|
|
- />
|
|
|
|
- <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
|
|
|
|
- <span
|
|
|
|
- v-if="active==1"
|
|
|
|
- :style="kuaishou.costProportion>0?'color:red':'color:#0bcd74'"
|
|
|
|
- class="styleElse"
|
|
|
|
- style=" margin-left:0"
|
|
|
|
- >{{kuaishou.costProportion?Math.abs(kuaishou.costProportion*100).toFixed(2)+'%':'0.00%'}}</span>
|
|
|
|
- <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
|
|
|
|
- <template slot="title">
|
|
|
|
- <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
|
|
|
|
- </template>
|
|
|
|
- <a-icon type="exclamation-circle" />
|
|
|
|
- </a-tooltip>
|
|
|
|
- </a-card>
|
|
|
|
|
|
+ <lifting
|
|
|
|
+ :kuaishou.sync="kuaishou"
|
|
|
|
+ :active.sync="active"
|
|
|
|
+ title="总消耗"
|
|
|
|
+ typeName="cost"
|
|
|
|
+ typeThan="costProportion"
|
|
|
|
+ ></lifting>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="6" style="width:20%">
|
|
<a-col :span="6" style="width:20%">
|
|
- <a-card title="折后消耗" :bordered="false">
|
|
|
|
- <!-- <p>{{kuaishou.cost}}</p> -->
|
|
|
|
- <countTo :startVal="0" :endVal="kuaishou.discountCost" :duration="duration" :decimals="2"></countTo>
|
|
|
|
- <a-icon
|
|
|
|
- v-if="kuaishou.discountCostProportion>0&&active==1"
|
|
|
|
- type="rise"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:red;"
|
|
|
|
- />
|
|
|
|
- <a-icon
|
|
|
|
- v-else-if="kuaishou.discountCostProportion<0&&active==1"
|
|
|
|
- type="fall"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:#0bcd74;"
|
|
|
|
- />
|
|
|
|
- <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
|
|
|
|
- <span
|
|
|
|
- v-if="active==1"
|
|
|
|
- :style="kuaishou.discountCostProportion>0?'color:red':'color:#0bcd74'"
|
|
|
|
- class="styleElse"
|
|
|
|
- style=" margin-left:0"
|
|
|
|
- >{{kuaishou.discountCostProportion?Math.abs(kuaishou.discountCostProportion*100).toFixed(2)+'%':'0.00%'}}</span>
|
|
|
|
- <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
|
|
|
|
- <template slot="title">
|
|
|
|
- <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
|
|
|
|
- </template>
|
|
|
|
- <a-icon type="exclamation-circle" />
|
|
|
|
- </a-tooltip>
|
|
|
|
- </a-card>
|
|
|
|
|
|
+ <lifting
|
|
|
|
+ :kuaishou.sync="kuaishou"
|
|
|
|
+ :active.sync="active"
|
|
|
|
+ title="折后消耗"
|
|
|
|
+ typeName="discountCost"
|
|
|
|
+ typeThan="discountCostProportion"
|
|
|
|
+ ></lifting>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="6" style="width:20%">
|
|
<a-col :span="6" style="width:20%">
|
|
- <a-card title="封面点击数" :bordered="false">
|
|
|
|
- <!-- <p>{{kuaishou.photoClick}}</p> -->
|
|
|
|
- <countTo :startVal="0" :endVal="kuaishou.photoClick" :duration="duration" :decimals="0"></countTo>
|
|
|
|
- <a-icon
|
|
|
|
- v-if="kuaishou.photoClickProportion>0&&active==1"
|
|
|
|
- type="rise"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:red;"
|
|
|
|
- />
|
|
|
|
- <a-icon
|
|
|
|
- v-else-if="kuaishou.photoClickProportion<0&&active==1"
|
|
|
|
- type="fall"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:#0bcd74"
|
|
|
|
- />
|
|
|
|
- <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
|
|
|
|
- <span
|
|
|
|
- v-if="active==1"
|
|
|
|
- :style="kuaishou.photoClickProportion>0?'color:red':'color:#0bcd74'"
|
|
|
|
- style="margin-left:0"
|
|
|
|
- class="styleElse"
|
|
|
|
- >{{kuaishou.photoClickProportion?Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
|
|
|
|
- <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
|
|
|
|
- <template slot="title">
|
|
|
|
- <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
|
|
|
|
- </template>
|
|
|
|
- <a-icon type="exclamation-circle" />
|
|
|
|
- </a-tooltip>
|
|
|
|
- </a-card>
|
|
|
|
|
|
+ <lifting
|
|
|
|
+ :kuaishou.sync="kuaishou"
|
|
|
|
+ :active.sync="active"
|
|
|
|
+ title="封面点击数"
|
|
|
|
+ typeName="photoClick"
|
|
|
|
+ typeThan="photoClickProportion"
|
|
|
|
+ ></lifting>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="6" style="width:20%">
|
|
<a-col :span="6" style="width:20%">
|
|
- <a-card title="封面曝光数" :bordered="false">
|
|
|
|
- <!-- <p>{{kuaishou.photoShow}}</p> -->
|
|
|
|
- <countTo :startVal="0" :endVal="kuaishou.photoShow" :duration="duration" :decimals="0"></countTo>
|
|
|
|
- <a-icon
|
|
|
|
- v-if="kuaishou.showProportion>0&&active==1"
|
|
|
|
- type="rise"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:red;"
|
|
|
|
- />
|
|
|
|
- <a-icon
|
|
|
|
- v-else-if="kuaishou.showProportion<0&&active==1"
|
|
|
|
- type="fall"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:#0bcd74;"
|
|
|
|
- />
|
|
|
|
- <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
|
|
|
|
- <span
|
|
|
|
- v-if="active==1"
|
|
|
|
- :style="kuaishou.showProportion>0?'color:red':'color:#0bcd74'"
|
|
|
|
- class="styleElse"
|
|
|
|
- style=" margin-left:0"
|
|
|
|
- >{{kuaishou.showProportion?Math.abs(kuaishou.showProportion*100).toFixed(2)+'%':'0.00%'}}</span>
|
|
|
|
- <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
|
|
|
|
- <template slot="title">
|
|
|
|
- <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
|
|
|
|
- </template>
|
|
|
|
- <a-icon type="exclamation-circle" />
|
|
|
|
- </a-tooltip>
|
|
|
|
- </a-card>
|
|
|
|
|
|
+ <lifting
|
|
|
|
+ :kuaishou.sync="kuaishou"
|
|
|
|
+ :active.sync="active"
|
|
|
|
+ title="封面曝光数"
|
|
|
|
+ typeName="photoShow"
|
|
|
|
+ typeThan="showProportion"
|
|
|
|
+ ></lifting>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="6" style="width:20%">
|
|
<a-col :span="6" style="width:20%">
|
|
- <a-card title="素材曝光数" :bordered="false">
|
|
|
|
- <!-- <p>{{kuaishou.aclick}}</p> -->
|
|
|
|
- <countTo :startVal="0" :endVal="kuaishou.aclick" :duration="duration" :decimals="0"></countTo>
|
|
|
|
-
|
|
|
|
- <a-icon
|
|
|
|
- v-if="kuaishou.aClickProportion>0&&active==1"
|
|
|
|
- type="rise"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:red;"
|
|
|
|
- />
|
|
|
|
- <a-icon
|
|
|
|
- v-else-if="kuaishou.aClickProportion<0&&active==1"
|
|
|
|
- type="fall"
|
|
|
|
- class="styleElse"
|
|
|
|
- style="color:#0bcd74;"
|
|
|
|
- />
|
|
|
|
- <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
|
|
|
|
- <span
|
|
|
|
- v-if="active==1"
|
|
|
|
- :style="kuaishou.aClickProportion>0?'color:red':'color:#0bcd74'"
|
|
|
|
- class="styleElse"
|
|
|
|
- style=" margin-left:0"
|
|
|
|
- >{{kuaishou.aClickProportion?Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
|
|
|
|
- <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
|
|
|
|
- <template slot="title">
|
|
|
|
- <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
|
|
|
|
- </template>
|
|
|
|
- <a-icon type="exclamation-circle" />
|
|
|
|
- </a-tooltip>
|
|
|
|
|
|
+ <lifting
|
|
|
|
+ :kuaishou.sync="kuaishou"
|
|
|
|
+ :active.sync="active"
|
|
|
|
+ title="素材曝光数"
|
|
|
|
+ typeName="aclick"
|
|
|
|
+ typeThan="aClickProportion"
|
|
|
|
+ ></lifting>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-row :gutter="10">
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <a-card
|
|
|
|
+ style="width:100%"
|
|
|
|
+ :tabList="tabListNoTitle"
|
|
|
|
+ :activeTabKey="noTitleKey"
|
|
|
|
+ @tabChange="key => onTabChange(key, 'noTitleKey')"
|
|
|
|
+ >
|
|
|
|
+ <div id="chart" style="width:100%;height:500px"></div>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-row :gutter="10" style="margin-top:10px">
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <a-card style="width:100%;">
|
|
|
|
+ <div @click="exportExcel">导出</div>
|
|
|
|
+ <a-table :columns="columns" :dataSource="data" bordered id="outTable"></a-table>
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
@@ -311,19 +220,100 @@ import countTo from 'vue-count-to'
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
import { getAdvertiserList, getReportList } from '@api/statistics'
|
|
import { getAdvertiserList, getReportList } from '@api/statistics'
|
|
import axios from 'axios'
|
|
import axios from 'axios'
|
|
-var interval, objTimer
|
|
|
|
-var a = 0
|
|
|
|
|
|
+
|
|
|
|
+import FileSaver from 'file-saver'
|
|
|
|
+
|
|
|
|
+import XLSX from 'xlsx'
|
|
|
|
+import lifting from './components/lifting'
|
|
|
|
+
|
|
|
|
+// 引入基本模板
|
|
|
|
+let echarts = require('echarts/lib/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')
|
|
|
|
+const columns = [
|
|
|
|
+ {
|
|
|
|
+ title: 'Name',
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ scopedSlots: { customRender: 'name' },
|
|
|
|
+ customRender: function(text, record, index) {
|
|
|
|
+ const obj = {
|
|
|
|
+ children: text,
|
|
|
|
+ attrs: {}
|
|
|
|
+ }
|
|
|
|
+ if (index == 0) {
|
|
|
|
+ obj.attrs.rowSpan = 4
|
|
|
|
+ }
|
|
|
|
+ if (index == 1) {
|
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
|
+ }
|
|
|
|
+ if (index == 2) {
|
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
|
+ }
|
|
|
|
+ if (index == 3) {
|
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
|
+ }
|
|
|
|
+ return obj
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: 'Cash Assets',
|
|
|
|
+ className: 'column-money',
|
|
|
|
+ dataIndex: 'money'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: 'Address',
|
|
|
|
+ dataIndex: 'address'
|
|
|
|
+ }
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+const data = [
|
|
|
|
+ {
|
|
|
|
+ key: '1',
|
|
|
|
+ name: 'John Brown',
|
|
|
|
+ money: '¥300,000.00',
|
|
|
|
+ address: 'New York No. 1 Lake Park'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: '2',
|
|
|
|
+ name: 'Jim Green',
|
|
|
|
+ money: '¥1,256,000.00',
|
|
|
|
+ address: 'London No. 1 Lake Park'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: '3',
|
|
|
|
+ name: 'Joe Black',
|
|
|
|
+ money: '¥120,000.00',
|
|
|
|
+ address: 'Sidney No. 1 Lake Park'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: '4',
|
|
|
|
+ name: 'Joe Black',
|
|
|
|
+ money: '合计',
|
|
|
|
+ address: '123123'
|
|
|
|
+ }
|
|
|
|
+]
|
|
export default {
|
|
export default {
|
|
name: 'data-display-statistics',
|
|
name: 'data-display-statistics',
|
|
components: {
|
|
components: {
|
|
ACol,
|
|
ACol,
|
|
ARow,
|
|
ARow,
|
|
- countTo
|
|
|
|
|
|
+ countTo,
|
|
|
|
+ lifting
|
|
},
|
|
},
|
|
|
|
|
|
data: function() {
|
|
data: function() {
|
|
return {
|
|
return {
|
|
title: '账户数据展示',
|
|
title: '账户数据展示',
|
|
|
|
+ data,
|
|
|
|
+ columns,
|
|
options: [],
|
|
options: [],
|
|
list: [],
|
|
list: [],
|
|
appId: [],
|
|
appId: [],
|
|
@@ -345,7 +335,31 @@ export default {
|
|
showProportion: 0,
|
|
showProportion: 0,
|
|
discountCost: 0,
|
|
discountCost: 0,
|
|
discountCostProportion: 0
|
|
discountCostProportion: 0
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ dataDetail: [],
|
|
|
|
+ tabListNoTitle: [
|
|
|
|
+ {
|
|
|
|
+ key: 'cost',
|
|
|
|
+ tab: '总消耗'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'discountCost',
|
|
|
|
+ tab: '折后总消耗'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'photoClick',
|
|
|
|
+ tab: '封面点击数'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'photoShow',
|
|
|
|
+ tab: '封面曝光数'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'aclick',
|
|
|
|
+ tab: '素材曝光数'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ noTitleKey: 'cost'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
filters: {
|
|
filters: {
|
|
@@ -368,7 +382,6 @@ export default {
|
|
methods: {
|
|
methods: {
|
|
moment,
|
|
moment,
|
|
disabledDate(current) {
|
|
disabledDate(current) {
|
|
- // Can not select days before today and today
|
|
|
|
return current && current > moment().endOf('day')
|
|
return current && current > moment().endOf('day')
|
|
},
|
|
},
|
|
handleChange(value) {
|
|
handleChange(value) {
|
|
@@ -397,7 +410,6 @@ export default {
|
|
if (value !== '') {
|
|
if (value !== '') {
|
|
this.options = this.list.filter(item => {
|
|
this.options = this.list.filter(item => {
|
|
var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
|
|
var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
|
|
- console.log(data, value)
|
|
|
|
return data.toLowerCase().indexOf(value.toLowerCase()) > -1
|
|
return data.toLowerCase().indexOf(value.toLowerCase()) > -1
|
|
})
|
|
})
|
|
} else {
|
|
} else {
|
|
@@ -425,6 +437,8 @@ export default {
|
|
that.kuaishou.discountCost = 0
|
|
that.kuaishou.discountCost = 0
|
|
} else {
|
|
} else {
|
|
that.kuaishou = res.summary
|
|
that.kuaishou = res.summary
|
|
|
|
+ that.dataDetail = res.trend
|
|
|
|
+ that.drawPie(that.noTitleKey, res.trend)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
} else {
|
|
} else {
|
|
@@ -442,7 +456,254 @@ export default {
|
|
this.allValue = []
|
|
this.allValue = []
|
|
}
|
|
}
|
|
this.active = checked
|
|
this.active = checked
|
|
- this.addUser()
|
|
|
|
|
|
+ this.addUser(checked)
|
|
|
|
+ },
|
|
|
|
+ onTabChange(key, type) {
|
|
|
|
+ console.log(key, type)
|
|
|
|
+ this[type] = key
|
|
|
|
+ if (type == 'noTitleKey') {
|
|
|
|
+ this.drawPie(key, this.dataDetail)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ drawPie(type, data) {
|
|
|
|
+ console.log(type)
|
|
|
|
+ var dataLegend = []
|
|
|
|
+ var dataLength = []
|
|
|
|
+ var dataElse = []
|
|
|
|
+ var dataDate = []
|
|
|
|
+ var that = this
|
|
|
|
+ if (this.active == 1 || this.active == 2) {
|
|
|
|
+ dataDate = data.map(item => {
|
|
|
|
+ return item.statHour
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ dataDate = data.map(item => {
|
|
|
|
+ return item.statDate
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ dataLength = data.map(item => {
|
|
|
|
+ return item[type]
|
|
|
|
+ })
|
|
|
|
+ if (type == 'cost') {
|
|
|
|
+ dataLegend = ['总消耗']
|
|
|
|
+ dataElse = data.map(item => {
|
|
|
|
+ if (item.now) {
|
|
|
|
+ return { proportion: (item.now.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
|
+ } else {
|
|
|
|
+ return { proportion: 0, statHour: item.statHour }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else if (type == 'photoClick') {
|
|
|
|
+ dataLegend = ['封面点击数']
|
|
|
|
+ dataElse = data.map(item => {
|
|
|
|
+ if (item.now) {
|
|
|
|
+ return { proportion: (item.now.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
|
+ } else {
|
|
|
|
+ return { proportion: 0, statHour: item.statHour }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else if (type == 'photoShow') {
|
|
|
|
+ dataLegend = ['封面曝光数']
|
|
|
|
+ dataElse = data.map(item => {
|
|
|
|
+ if (item.now) {
|
|
|
|
+ return { proportion: (item.now.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
|
+ } else {
|
|
|
|
+ return { proportion: 0, statHour: item.statHour }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else if (type == 'aclick') {
|
|
|
|
+ dataLegend = ['素材曝光数']
|
|
|
|
+ dataElse = data.map(item => {
|
|
|
|
+ if (item.now) {
|
|
|
|
+ return { proportion: (item.now.aClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
|
+ } else {
|
|
|
|
+ return { proportion: 0, statHour: item.statHour }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else if (type == 'discountCost') {
|
|
|
|
+ dataLegend = ['折后总消耗']
|
|
|
|
+ dataElse = data.map(item => {
|
|
|
|
+ if (item.now) {
|
|
|
|
+ return { proportion: (item.now.discountCostProportion * 100).toFixed(2) + '%', statHour: item.statHour }
|
|
|
|
+ } else {
|
|
|
|
+ return { proportion: 0, statHour: item.statHour }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ dataLength = data.map(item => {
|
|
|
|
+ return (item.cost / this.discount).toFixed(2)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ console.log(dataLength, 134123)
|
|
|
|
+ var series
|
|
|
|
+ if (this.active == 1) {
|
|
|
|
+ dataLegend = ['今天', '昨天']
|
|
|
|
+ series = [
|
|
|
|
+ {
|
|
|
|
+ name: dataLegend[0],
|
|
|
|
+ type: 'line',
|
|
|
|
+ color: '#9933ff',
|
|
|
|
+ smooth: true,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ symbolSize: 1,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2,
|
|
|
|
+ color: '#9933ff'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: '#ffffff',
|
|
|
|
+ borderWidth: 3
|
|
|
|
+ },
|
|
|
|
+ data: data.map(item => {
|
|
|
|
+ if (item.now) {
|
|
|
|
+ return item.now[type]
|
|
|
|
+ } else {
|
|
|
|
+ return 0
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: dataLegend[1],
|
|
|
|
+ type: 'line',
|
|
|
|
+ color: '#0bcd74',
|
|
|
|
+ smooth: true,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ symbolSize: 1,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2,
|
|
|
|
+ color: '#0bcd74'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: '#ffffff',
|
|
|
|
+ borderWidth: 3
|
|
|
|
+ },
|
|
|
|
+ data: dataLength
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ } else {
|
|
|
|
+ series = [
|
|
|
|
+ {
|
|
|
|
+ name: dataLegend[0],
|
|
|
|
+ type: 'line',
|
|
|
|
+ color: '#0bcd74',
|
|
|
|
+ smooth: true,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ symbolSize: 1,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2,
|
|
|
|
+ color: '#0bcd74'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: '#ffffff',
|
|
|
|
+ borderWidth: 3
|
|
|
|
+ },
|
|
|
|
+ data: dataLength
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ var option = {
|
|
|
|
+ backgroundColor: '#fff',
|
|
|
|
+ toolbox: {
|
|
|
|
+ show: true,
|
|
|
|
+ feature: {
|
|
|
|
+ dataView: { readOnly: false }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ formatter: function(params) {
|
|
|
|
+ var index = dataElse.findIndex(v => v.statHour == params[0].name)
|
|
|
|
+ var da = null
|
|
|
|
+ if (index >= 0) {
|
|
|
|
+ da = dataElse[index].proportion
|
|
|
|
+ }
|
|
|
|
+ if (that.active == 1) {
|
|
|
|
+ if (params.length > 1) {
|
|
|
|
+ return `${params[0].marker}今天${params[0].name}时:${params[0].data} <br/>
|
|
|
|
+ ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
|
|
|
|
+ 环比:${da} <br/> `
|
|
|
|
+ } else {
|
|
|
|
+ return `${params[0].marker}时间:${params[0].name} <br/>
|
|
|
|
+ 数值:${params[0].data} `
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ return `${params[0].marker}时间:${params[0].name} <br/>
|
|
|
|
+ 数值:${params[0].data} `
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ data: dataLegend
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '2%',
|
|
|
|
+ right: '2%',
|
|
|
|
+ bottom: '2%',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: dataDate,
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ // 坐标轴线
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#999'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 分割线
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: 'dashed',
|
|
|
|
+ color: '#e5e5e5'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#999'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ splitLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: 'dashed',
|
|
|
|
+ color: '#e5e5e5'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ series: series
|
|
|
|
+ }
|
|
|
|
+ var chart = echarts.init(document.getElementById('chart'))
|
|
|
|
+ chart.clear()
|
|
|
|
+ chart.setOption(option, true)
|
|
|
|
+ window.onresize = function() {
|
|
|
|
+ chart.resize()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ exportExcel() {
|
|
|
|
+ let vb = XLSX.utils.table_to_book(document.getElementById('outTable'), { display: true })
|
|
|
|
+ console.log(document.getElementById('outTable'), vb)
|
|
|
|
+ let vbout = XLSX.write(vb, { bookType: 'xlsx', bookSST: true, type: 'array' })
|
|
|
|
+
|
|
|
|
+ try {
|
|
|
|
+ FileSaver.saveAs(new Blob([vbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
|
|
|
|
+ } catch (e) {
|
|
|
|
+ if (typeof console !== 'undefined') console.log(e, vbout)
|
|
|
|
+ }
|
|
|
|
+ return vbout
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {},
|
|
watch: {},
|