爱奇艺小卡销售
Showing
7 changed files
with
586 additions
and
50 deletions
... | @@ -3,7 +3,7 @@ ENV = 'development' | ... | @@ -3,7 +3,7 @@ ENV = 'development' |
3 | # 接口地址 | 3 | # 接口地址 |
4 | # VUE_APP_BASE_API = 'http://10.100.6.140:18006' | 4 | # VUE_APP_BASE_API = 'http://10.100.6.140:18006' |
5 | # VUE_APP_BASE_API = 'http://139.196.4.234:18006' | 5 | # VUE_APP_BASE_API = 'http://139.196.4.234:18006' |
6 | VUE_APP_BASE_API = 'http://139.196.192.242:18000' | 6 | VUE_APP_BASE_API = 'http://139.196.4.234:8011/' |
7 | # VUE_APP_BASE_API = 'http://10.100.6.90:8000' | 7 | # VUE_APP_BASE_API = 'http://10.100.6.90:8000' |
8 | # VUE_APP_WS_API = 'ws://localhost:8000' | 8 | # VUE_APP_WS_API = 'ws://localhost:8000' |
9 | 9 | ... | ... |
src/api/aiqiyi/aiqiyi.js
0 → 100644
1 | import request from '@/utils/request' | 1 | import request from '@/utils/request' |
2 | 2 | ||
3 | // 获取开卡数,激活数接口 | ||
4 | function getNumInfo(params) { | ||
5 | return request({ | ||
6 | url: 'api/statistics/getNumInfo', | ||
7 | method: 'get', | ||
8 | params | ||
9 | }) | ||
10 | } | ||
11 | // 查询地区分布 | ||
12 | function getRegionStatistics(params) { | ||
13 | return request({ | ||
14 | url: 'api/statistics/getRegionStatistics', | ||
15 | method: 'get', | ||
16 | params | ||
17 | }) | ||
18 | } | ||
19 | // 查询批次分布 | ||
20 | function getBatchStatistics(params) { | ||
21 | return request({ | ||
22 | url: 'api/statistics/getBatchStatistics', | ||
23 | method: 'get', | ||
24 | params | ||
25 | }) | ||
26 | } | ||
27 | // 查询渠道分布 | ||
28 | function getChannelStatistics(params) { | ||
29 | return request({ | ||
30 | url: 'api/statistics/getChannelStatistics', | ||
31 | method: 'get', | ||
32 | params | ||
33 | }) | ||
34 | } | ||
3 | function getSexStatistics() { | 35 | function getSexStatistics() { |
4 | return request({ | 36 | return request({ |
5 | url: 'api/statistics/sexStatistics', | 37 | url: 'api/statistics/sexStatistics', |
... | @@ -44,6 +76,10 @@ function getActivityStatistics() { | ... | @@ -44,6 +76,10 @@ function getActivityStatistics() { |
44 | } | 76 | } |
45 | 77 | ||
46 | export default { | 78 | export default { |
79 | getNumInfo, | ||
80 | getRegionStatistics, | ||
81 | getBatchStatistics, | ||
82 | getChannelStatistics, | ||
47 | getSexStatistics, | 83 | getSexStatistics, |
48 | getAgeStatistics, | 84 | getAgeStatistics, |
49 | getVodStatistics, | 85 | getVodStatistics, | ... | ... |
src/views/aiqiyi/index.vue
0 → 100644
1 | <template> | ||
2 | <div class="app-container"> | ||
3 | <!--工具栏--> | ||
4 | <div class="head-container"> | ||
5 | <div> | ||
6 | <!-- 搜索 --> | ||
7 | <el-select v-model="searchObj.vipType" filterable class="filter-item" clearable size="mini" placeholder="请选择VIP类型"> | ||
8 | <el-option | ||
9 | v-for="item in vipTypeList" | ||
10 | :key="item.value" | ||
11 | :label="item.label" | ||
12 | :value="item.value" | ||
13 | /> | ||
14 | </el-select> | ||
15 | <el-select v-model="searchObj.status" filterable class="filter-item" clearable size="mini" placeholder="请选择状态"> | ||
16 | <el-option | ||
17 | v-for="item in statusList" | ||
18 | :key="item.value" | ||
19 | :label="item.label" | ||
20 | :value="item.value" | ||
21 | /> | ||
22 | </el-select> | ||
23 | <el-select v-model="searchObj.channel" filterable class="filter-item" clearable size="mini" placeholder="请选择渠道"> | ||
24 | <el-option | ||
25 | v-for="item in dictMap.channel" | ||
26 | :key="item.value" | ||
27 | :label="item.label" | ||
28 | :value="item.value" | ||
29 | /> | ||
30 | </el-select> | ||
31 | <el-select v-model="searchObj.region" filterable class="filter-item" clearable size="mini" placeholder="请选择地区"> | ||
32 | <el-option | ||
33 | v-for="item in dictMap.origin" | ||
34 | :key="item.value" | ||
35 | :label="item.label" | ||
36 | :value="item.value" | ||
37 | /> | ||
38 | </el-select> | ||
39 | <el-input v-model="searchObj.cardNum" clearable size="small" placeholder="请输入卡号" style="width: 200px;" class="filter-item" /> | ||
40 | <el-input v-model="searchObj.batch" clearable size="small" placeholder="请输入批次(数字)" style="width: 200px;" class="filter-item" /> | ||
41 | <el-input v-model="searchObj.rcvMobile" clearable size="small" placeholder="请输入手机号" style="width: 200px;" class="filter-item" /> | ||
42 | <poly-search :query-type-options="queryTypeOptions" @toQuery="searchQuery" /> | ||
43 | <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getSmallSellList('reset')">搜索</el-button> | ||
44 | </div> | ||
45 | </div> | ||
46 | <!--表格渲染--> | ||
47 | <el-table | ||
48 | v-loading="loading" | ||
49 | :max-height="tableHeight" | ||
50 | :data="smallSellList" | ||
51 | > | ||
52 | <el-table-column label="ID" width="125px" prop="id" /> | ||
53 | <el-table-column label="vip类型" width="125px" prop="vipType"> | ||
54 | <template slot-scope="scope"> | ||
55 | <span v-if="Number(scope.row.vipType) === 1">爱奇艺包月</span> | ||
56 | <span v-if="Number(scope.row.vipType) === 4">爱奇艺包年</span> | ||
57 | </template> | ||
58 | </el-table-column> | ||
59 | <el-table-column label="卡号" width="125px" prop="cardNum" /> | ||
60 | <el-table-column label="卡密" width="125px" prop="cardKey" /> | ||
61 | <el-table-column label="vip类型" width="125px" prop="status"> | ||
62 | <template slot-scope="scope"> | ||
63 | <span v-if="Number(scope.row.status) === 0">未兑换</span> | ||
64 | <span v-if="Number(scope.row.status) === 1">已兑换</span> | ||
65 | <span v-if="Number(scope.row.status) === 2">兑换失败</span> | ||
66 | <span v-if="Number(scope.row.status) === 3">已失效</span> | ||
67 | </template> | ||
68 | </el-table-column> | ||
69 | <el-table-column label="地区" width="125px" prop="region" /> | ||
70 | <el-table-column label="渠道" width="125px" prop="channel" /> | ||
71 | <el-table-column label="批次" width="125px" prop="batch" /> | ||
72 | <el-table-column label="产品id" width="125px" prop="productId" /> | ||
73 | <el-table-column label="产品" width="125px" prop="productName" /> | ||
74 | <el-table-column label="大屏账号" width="125px" prop="account" /> | ||
75 | <el-table-column label="订单号" width="125px" prop="bossOrderNo" /> | ||
76 | <el-table-column label="备注" width="125px" prop="remark" /> | ||
77 | <el-table-column label="领取手机号" width="125px" prop="rcvMobile" /> | ||
78 | </el-table> | ||
79 | <el-pagination | ||
80 | :page-size.sync="searchObj.size" | ||
81 | :total="total" | ||
82 | :current-page.sync="searchObj.page" | ||
83 | style="margin-top: 8px;" | ||
84 | layout="total, prev, pager, next, sizes" | ||
85 | @size-change="changeSize" | ||
86 | @current-change="changePage" | ||
87 | /> | ||
88 | </div> | ||
89 | </template> | ||
90 | |||
91 | <script> | ||
92 | import aiqiyi from '@/api/aiqiyi/aiqiyi' | ||
93 | import polySearch from '@/components/polySearch/index' | ||
94 | import initDict from '@/mixins/initDict' | ||
95 | |||
96 | export default { | ||
97 | name: 'AiqiyiVipCard', | ||
98 | components: { polySearch }, | ||
99 | mixins: [initDict], | ||
100 | data() { | ||
101 | return { | ||
102 | loading: false, | ||
103 | smallSellList: [], | ||
104 | queryTypeOptions: [ | ||
105 | { key: 'account', display_name: '大屏账号' }, | ||
106 | { key: 'bossOrderNo', display_name: '订单号' } | ||
107 | ], | ||
108 | vipTypeList: [{ label: '爱奇艺包月', value: '1' }, { label: '爱奇艺包年', value: '4' }], | ||
109 | statusList: [{ label: '未兑换', value: '0' }, { label: '已兑换', value: '1' }, { label: '兑换失败', value: '2' }, { label: '已失效', value: '3' }], | ||
110 | total: 0, | ||
111 | tableHeight: '', | ||
112 | searchObj: { | ||
113 | page: 0, | ||
114 | size: 20, | ||
115 | vipType: '', | ||
116 | cardNum: '', | ||
117 | status: '', | ||
118 | region: '', | ||
119 | channel: '', | ||
120 | batch: '', | ||
121 | account: '', | ||
122 | bossOrderNo: '', | ||
123 | rcvMobile: '', | ||
124 | userId: this.$store.state.user.user.id | ||
125 | } | ||
126 | } | ||
127 | }, | ||
128 | created() { | ||
129 | this.$nextTick(() => { | ||
130 | this.getDictMap('channel,origin') | ||
131 | this.getSmallSellList() | ||
132 | }) | ||
133 | }, | ||
134 | mounted() { | ||
135 | this.$nextTick(() => { | ||
136 | this.tableHeight = window.innerHeight - (window.innerWidth < 1530 ? 300 : 280) | ||
137 | }) | ||
138 | }, | ||
139 | methods: { | ||
140 | searchQuery(e) { | ||
141 | console.log(e) | ||
142 | this.queryTypeOptions.forEach(item => { | ||
143 | this.searchObj[item.key] = '' | ||
144 | }) | ||
145 | this.searchObj[e.type] = e.value | ||
146 | }, | ||
147 | getSmallSellList(type) { | ||
148 | if (type === 'reset') { | ||
149 | this.searchObj.page = 0 | ||
150 | } | ||
151 | this.loading = true | ||
152 | aiqiyi.getSmallSellList(this.searchObj).then(res => { | ||
153 | this.loading = false | ||
154 | this.smallSellList = res.content | ||
155 | this.total = res.totalElements | ||
156 | }).catch(() => { | ||
157 | this.smallSellList = [] | ||
158 | this.total = 0 | ||
159 | this.loading = false | ||
160 | }) | ||
161 | }, | ||
162 | changePage(e) { | ||
163 | console.log(e) | ||
164 | this.searchObj.page = e | ||
165 | this.getSmallSellList() | ||
166 | }, | ||
167 | changeSize(e) { | ||
168 | console.log(e) | ||
169 | this.searchObj.page = 0 | ||
170 | this.searchObj.size = e | ||
171 | this.getSmallSellList() | ||
172 | } | ||
173 | } | ||
174 | } | ||
175 | </script> | ||
176 | |||
177 | <style rel="stylesheet/scss" lang="scss" scoped> | ||
178 | </style> |
src/views/dashboard/BarChart.vue
0 → 100644
1 | <template> | ||
2 | <div :class="className" :style="{height:height,width:width}" /> | ||
3 | </template> | ||
4 | |||
5 | <script> | ||
6 | import echarts from 'echarts' | ||
7 | require('echarts/theme/macarons') // echarts theme | ||
8 | import { debounce } from '@/utils' | ||
9 | |||
10 | export default { | ||
11 | props: { | ||
12 | className: { | ||
13 | type: String, | ||
14 | default: 'chart' | ||
15 | }, | ||
16 | width: { | ||
17 | type: String, | ||
18 | default: '100%' | ||
19 | }, | ||
20 | height: { | ||
21 | type: String, | ||
22 | default: '300px' | ||
23 | }, | ||
24 | option: { | ||
25 | type: Object, | ||
26 | default: () => {} | ||
27 | }, | ||
28 | optionData: { | ||
29 | type: Object, | ||
30 | default: () => {} | ||
31 | } | ||
32 | }, | ||
33 | data() { | ||
34 | return { | ||
35 | chart: null, | ||
36 | colorList: [ | ||
37 | '#ff7e50', '#97d3f9', '#dd70d9', '#34cf34', | ||
38 | '#6497ef', '#85802b', '#D7504B', '#C6E579', | ||
39 | '#F4E001', '#F0805A', '#26C0C0' | ||
40 | ] | ||
41 | } | ||
42 | }, | ||
43 | watch: { | ||
44 | option: { | ||
45 | handler(newVal) { | ||
46 | // console.log('获取配置', newVal) | ||
47 | if (this.chart) { | ||
48 | this.setOption() | ||
49 | } | ||
50 | }, | ||
51 | immediate: true, | ||
52 | deep: true | ||
53 | }, | ||
54 | optionData: { | ||
55 | handler(newVal) { | ||
56 | console.log('获取柱状数据', newVal, this.chart) | ||
57 | if (this.chart) { | ||
58 | this.initData() | ||
59 | } | ||
60 | }, | ||
61 | immediate: true, | ||
62 | deep: true | ||
63 | } | ||
64 | }, | ||
65 | mounted() { | ||
66 | this.initChart() | ||
67 | this.__resizeHandler = debounce(() => { | ||
68 | if (this.chart) { | ||
69 | this.chart.resize() | ||
70 | } | ||
71 | }, 100) | ||
72 | window.addEventListener('resize', this.__resizeHandler) | ||
73 | }, | ||
74 | beforeDestroy() { | ||
75 | if (!this.chart) { | ||
76 | return | ||
77 | } | ||
78 | window.removeEventListener('resize', this.__resizeHandler) | ||
79 | this.chart.dispose() | ||
80 | this.chart = null | ||
81 | }, | ||
82 | methods: { | ||
83 | initChart() { | ||
84 | this.chart = echarts.init(this.$el, 'macarons') | ||
85 | |||
86 | const option = { | ||
87 | title: { | ||
88 | show: false, | ||
89 | right: 'center', | ||
90 | textStyle: { | ||
91 | fontSize: 14 | ||
92 | } | ||
93 | }, | ||
94 | tooltip: { | ||
95 | trigger: 'axis' | ||
96 | // formatter: function(a, b, c, d) { | ||
97 | // console.log(a, b, c, d) | ||
98 | // } | ||
99 | }, | ||
100 | grid: { | ||
101 | top: '10%', | ||
102 | left: '3%', | ||
103 | right: '4%', | ||
104 | bottom: '3%', | ||
105 | containLabel: true | ||
106 | }, | ||
107 | xAxis: { | ||
108 | type: 'value', | ||
109 | // axisLabel: { | ||
110 | // formatter: function(index, value) { | ||
111 | // console.log(index, value) | ||
112 | // } | ||
113 | // }, | ||
114 | boundaryGap: [0, 0.01], | ||
115 | splitNumber: 5, | ||
116 | max: 'auto', | ||
117 | data: [], | ||
118 | axisLine: { | ||
119 | show: false | ||
120 | }, | ||
121 | axisTick: { | ||
122 | show: false | ||
123 | } | ||
124 | }, | ||
125 | yAxis: { | ||
126 | type: 'category', | ||
127 | axisLine: { | ||
128 | show: false | ||
129 | }, | ||
130 | axisTick: { | ||
131 | show: false, | ||
132 | alignWithLabel: true | ||
133 | }, | ||
134 | splitLine: { | ||
135 | show: false | ||
136 | }, | ||
137 | axisPointer: { | ||
138 | type: 'shadow' | ||
139 | } | ||
140 | }, | ||
141 | series: [ | ||
142 | { | ||
143 | name: '标签人数分布', | ||
144 | type: 'bar', | ||
145 | data: [], | ||
146 | itemStyle: { | ||
147 | color: (params) => { | ||
148 | return this.colorList[params.dataIndex] | ||
149 | } | ||
150 | } | ||
151 | } | ||
152 | ] | ||
153 | } | ||
154 | this.chart.setOption(option) | ||
155 | if (Object.keys(this.option).length > 0) { | ||
156 | this.setOption() | ||
157 | } | ||
158 | console.log(this.optionData) | ||
159 | if (Object.keys(this.optionData).length > 0) { | ||
160 | this.initData() | ||
161 | } | ||
162 | }, | ||
163 | initData() { | ||
164 | console.log(123) | ||
165 | console.log(this.optionData) | ||
166 | const keyArray = Object.keys(this.optionData) | ||
167 | let yAxis = [] | ||
168 | const xAxis = [] | ||
169 | if (typeof this.optionData[keyArray[0]] !== 'object') { | ||
170 | keyArray.forEach(item => { | ||
171 | yAxis.push(item) | ||
172 | xAxis.push(this.optionData[item]) | ||
173 | }) | ||
174 | console.log(yAxis, xAxis) | ||
175 | } else { | ||
176 | if (keyArray.length > 1) { | ||
177 | keyArray.forEach(item => { | ||
178 | const array = Object.keys(this.optionData[item]) | ||
179 | array.forEach(itemArray => { | ||
180 | yAxis.push(item + ':' + itemArray) | ||
181 | xAxis.push(this.optionData[item][itemArray]) | ||
182 | }) | ||
183 | }) | ||
184 | } else { | ||
185 | yAxis = Object.keys(this.optionData[keyArray[0]]) | ||
186 | yAxis.forEach(item => { | ||
187 | xAxis.push(this.optionData[keyArray[0]][item]) | ||
188 | }) | ||
189 | } | ||
190 | } | ||
191 | const option = { | ||
192 | yAxis: { | ||
193 | data: yAxis | ||
194 | }, | ||
195 | series: [ | ||
196 | { | ||
197 | data: xAxis | ||
198 | } | ||
199 | ] | ||
200 | } | ||
201 | console.log(option) | ||
202 | this.chart.setOption(option) | ||
203 | }, | ||
204 | setOption() { | ||
205 | this.chart.setOption(this.option) | ||
206 | } | ||
207 | } | ||
208 | } | ||
209 | </script> |
1 | <template> | 1 | <template> |
2 | <el-row :gutter="40" class="panel-group"> | 2 | <el-row :gutter="40" class="panel-group"> |
3 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> | 3 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
4 | <div class="card-panel" @click="handleSetLineChartData('newVisitis')"> | 4 | <div class="card-panel" @click="handleSetLineChartData('all')"> |
5 | <div class="card-panel-icon-wrapper icon-people"> | 5 | <div class="card-panel-icon-wrapper icon-people"> |
6 | <svg-icon icon-class="peoples" class-name="card-panel-icon" /> | 6 | <svg-icon icon-class="peoples" class-name="card-panel-icon" /> |
7 | </div> | 7 | </div> |
8 | <div class="card-panel-description"> | 8 | <div class="card-panel-description"> |
9 | <div class="card-panel-text"> | 9 | <div class="card-panel-text"> |
10 | New Visits | 10 | 开卡数 |
11 | </div> | 11 | </div> |
12 | <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> | 12 | <count-to :start-val="0" :end-val="countData.all" :duration="2600" class="card-panel-num" /> |
13 | </div> | 13 | </div> |
14 | </div> | 14 | </div> |
15 | </el-col> | 15 | </el-col> |
16 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> | 16 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
17 | <div class="card-panel" @click="handleSetLineChartData('messages')"> | 17 | <div class="card-panel" @click="handleSetLineChartData('already')"> |
18 | <div class="card-panel-icon-wrapper icon-message"> | 18 | <div class="card-panel-icon-wrapper icon-message"> |
19 | <svg-icon icon-class="message" class-name="card-panel-icon" /> | 19 | <svg-icon icon-class="message" class-name="card-panel-icon" /> |
20 | </div> | 20 | </div> |
21 | <div class="card-panel-description"> | 21 | <div class="card-panel-description"> |
22 | <div class="card-panel-text"> | 22 | <div class="card-panel-text"> |
23 | Messages | 23 | 激活数 |
24 | </div> | 24 | </div> |
25 | <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" /> | 25 | <count-to :start-val="0" :end-val="countData.already" :duration="3000" class="card-panel-num" /> |
26 | </div> | 26 | </div> |
27 | </div> | 27 | </div> |
28 | </el-col> | 28 | </el-col> |
29 | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> | 29 | <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
30 | <div class="card-panel" @click="handleSetLineChartData('purchases')"> | 30 | <div class="card-panel" @click="handleSetLineChartData('purchases')"> |
31 | <div class="card-panel-icon-wrapper icon-money"> | 31 | <div class="card-panel-icon-wrapper icon-money"> |
32 | <svg-icon icon-class="money" class-name="card-panel-icon" /> | 32 | <svg-icon icon-class="money" class-name="card-panel-icon" /> |
... | @@ -51,20 +51,56 @@ | ... | @@ -51,20 +51,56 @@ |
51 | <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> | 51 | <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> |
52 | </div> | 52 | </div> |
53 | </div> | 53 | </div> |
54 | </el-col> | 54 | </el-col> --> |
55 | </el-row> | 55 | </el-row> |
56 | </template> | 56 | </template> |
57 | 57 | ||
58 | <script> | 58 | <script> |
59 | import CountTo from 'vue-count-to' | 59 | import CountTo from 'vue-count-to' |
60 | import homeData from '../../api/home/homeData' | ||
60 | 61 | ||
61 | export default { | 62 | export default { |
62 | components: { | 63 | components: { |
63 | CountTo | 64 | CountTo |
64 | }, | 65 | }, |
66 | data() { | ||
67 | return { | ||
68 | countData: { | ||
69 | 'all': 174, | ||
70 | 'already': 37 | ||
71 | } | ||
72 | } | ||
73 | }, | ||
74 | watch: { | ||
75 | '$store.state.user': { | ||
76 | handler(newVal) { | ||
77 | console.log('用户信息', newVal, newVal.id) | ||
78 | if (newVal.user.id) { | ||
79 | this.getNumInfoData() | ||
80 | } | ||
81 | }, | ||
82 | deep: true | ||
83 | } | ||
84 | }, | ||
85 | created() { | ||
86 | console.log(homeData.getNumInfo) | ||
87 | if (this.$store.state.user.user && this.$store.state.user.user.id) { | ||
88 | this.getNumInfoData() | ||
89 | } | ||
90 | }, | ||
65 | methods: { | 91 | methods: { |
92 | getNumInfoData() { | ||
93 | homeData.getNumInfo({ | ||
94 | userId: this.$store.state.user.user.id | ||
95 | }).then(res => { | ||
96 | this.countData = res | ||
97 | console.log(res) | ||
98 | }).catch(err => { | ||
99 | console.log(err) | ||
100 | }) | ||
101 | }, | ||
66 | handleSetLineChartData(type) { | 102 | handleSetLineChartData(type) { |
67 | this.$emit('handleSetLineChartData', type) | 103 | // this.$emit('handleSetLineChartData', type) |
68 | } | 104 | } |
69 | } | 105 | } |
70 | } | 106 | } | ... | ... |
... | @@ -2,73 +2,123 @@ | ... | @@ -2,73 +2,123 @@ |
2 | <div class="dashboard-container"> | 2 | <div class="dashboard-container"> |
3 | <div class="dashboard-editor-container"> | 3 | <div class="dashboard-editor-container"> |
4 | <github-corner class="github-corner" /> | 4 | <github-corner class="github-corner" /> |
5 | <panel-group @handleSetLineChartData="handleSetLineChartData" /> | 5 | <panel-group /> |
6 | <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> | 6 | <div class="active-open-card"> |
7 | <line-chart :chart-data="lineChartData" /> | 7 | <el-card> |
8 | <div slot="header" class="clearfix"> | ||
9 | <span>开卡地区</span> | ||
10 | </div> | ||
11 | <el-row> | ||
12 | <el-col :xs="24" :sm="24" :lg="24"> | ||
13 | <div class="chart-wrapper"> | ||
14 | <bar-chart :option-data="regionStatistics[0]" :option="{title: { show: true, text: '开卡地区:地区分布' }}" /> | ||
15 | </div> | ||
16 | </el-col> | ||
17 | <el-col :xs="24" :sm="24" :lg="24"> | ||
18 | <div class="chart-wrapper"> | ||
19 | <bar-chart :option-data="batchStatistics[0]" :option="{title: { show: true, text: '开卡地区:批次分布' }}" /> | ||
20 | </div> | ||
21 | </el-col> | ||
22 | <el-col :xs="24" :sm="24" :lg="24"> | ||
23 | <div class="chart-wrapper"> | ||
24 | <bar-chart :option-data="channelStatistics[0]" :option="{title: { show: true, text: '开卡地区:渠道分布' }}" /> | ||
25 | </div> | ||
26 | </el-col> | ||
8 | </el-row> | 27 | </el-row> |
9 | <el-row :gutter="32"> | 28 | </el-card> |
10 | <el-col :xs="24" :sm="24" :lg="8"> | 29 | <el-card> |
30 | <div slot="header" class="clearfix"> | ||
31 | <span>激活地区</span> | ||
32 | </div> | ||
33 | <el-row> | ||
34 | <el-col :xs="24" :sm="24" :lg="24"> | ||
11 | <div class="chart-wrapper"> | 35 | <div class="chart-wrapper"> |
12 | <radar-chart /> | 36 | <bar-chart :option-data="regionStatistics[1]" :option="{title: { show: true, text: '激活地区:地区分布' }}" /> |
13 | </div> | 37 | </div> |
14 | </el-col> | 38 | </el-col> |
15 | <el-col :xs="24" :sm="24" :lg="8"> | 39 | <el-col :xs="24" :sm="24" :lg="24"> |
16 | <div class="chart-wrapper"> | 40 | <div class="chart-wrapper"> |
17 | <pie-chart /> | 41 | <bar-chart :option-data="batchStatistics[1]" :option="{title: { show: true, text: '激活地区:批次分布' }}" /> |
18 | </div> | 42 | </div> |
19 | </el-col> | 43 | </el-col> |
20 | <el-col :xs="24" :sm="24" :lg="8"> | 44 | <el-col :xs="24" :sm="24" :lg="24"> |
21 | <div class="chart-wrapper"> | 45 | <div class="chart-wrapper"> |
22 | <bar-chart /> | 46 | <bar-chart :option-data="channelStatistics[1]" :option="{title: { show: true, text: '激活地区:渠道分布' }}" /> |
23 | </div> | 47 | </div> |
24 | </el-col> | 48 | </el-col> |
25 | </el-row> | 49 | </el-row> |
50 | </el-card> | ||
51 | </div> | ||
26 | </div> | 52 | </div> |
27 | </div> | 53 | </div> |
28 | </template> | 54 | </template> |
29 | <script> | 55 | <script> |
30 | import GithubCorner from '@/components/GithubCorner' | 56 | import GithubCorner from '@/components/GithubCorner' |
31 | import PanelGroup from './dashboard/PanelGroup' | 57 | import PanelGroup from './dashboard/PanelGroup' |
32 | import LineChart from './dashboard/LineChart' | 58 | import BarChart from './dashboard/BarChart' |
33 | import RadarChart from '@/components/Echarts/RadarChart' | 59 | import homeData from '@/api/home/homeData' |
34 | import PieChart from '@/components/Echarts/PieChart' | 60 | |
35 | import BarChart from '@/components/Echarts/BarChart' | ||
36 | const lineChartData = { | ||
37 | newVisitis: { | ||
38 | expectedData: [100, 120, 161, 134, 105, 160, 165], | ||
39 | actualData: [120, 82, 91, 154, 162, 140, 145] | ||
40 | }, | ||
41 | messages: { | ||
42 | expectedData: [200, 192, 120, 144, 160, 130, 140], | ||
43 | actualData: [180, 160, 151, 106, 145, 150, 130] | ||
44 | }, | ||
45 | purchases: { | ||
46 | expectedData: [80, 100, 121, 104, 105, 90, 100], | ||
47 | actualData: [120, 90, 100, 138, 142, 130, 130] | ||
48 | }, | ||
49 | shoppings: { | ||
50 | expectedData: [130, 140, 141, 142, 145, 150, 160], | ||
51 | actualData: [120, 82, 91, 154, 162, 140, 130] | ||
52 | } | ||
53 | } | ||
54 | export default { | 61 | export default { |
55 | name: 'Dashboard', | 62 | name: 'Dashboard', |
56 | components: { | 63 | components: { |
57 | GithubCorner, | 64 | GithubCorner, |
58 | PanelGroup, | 65 | PanelGroup, |
59 | LineChart, | ||
60 | RadarChart, | ||
61 | PieChart, | ||
62 | BarChart | 66 | BarChart |
63 | }, | 67 | }, |
64 | data() { | 68 | data() { |
65 | return { | 69 | return { |
66 | lineChartData: lineChartData.newVisitis | 70 | regionStatistics: [{}, {}], |
71 | batchStatistics: [{}, {}], | ||
72 | channelStatistics: [{}, {}] | ||
67 | } | 73 | } |
68 | }, | 74 | }, |
75 | mounted() { | ||
76 | this.getRegionStatistics(0) | ||
77 | this.getBatchStatistics(0) | ||
78 | this.getChannelStatistics(0) | ||
79 | this.getRegionStatistics(1) | ||
80 | this.getBatchStatistics(1) | ||
81 | this.getChannelStatistics(1) | ||
82 | }, | ||
69 | methods: { | 83 | methods: { |
70 | handleSetLineChartData(type) { | 84 | getRegionStatistics(status) { |
71 | this.lineChartData = lineChartData[type] | 85 | homeData.getRegionStatistics({ |
86 | userId: this.$store.state.user.user.id, | ||
87 | status: status | ||
88 | }).then(res => { | ||
89 | console.log(res) | ||
90 | this.$set(this.regionStatistics, status, res) | ||
91 | }).catch(err => { | ||
92 | this.$message.error(err.message) | ||
93 | this.$set(this.regionStatistics, status, []) | ||
94 | console.log(err) | ||
95 | }) | ||
96 | }, | ||
97 | getBatchStatistics(status) { | ||
98 | homeData.getBatchStatistics({ | ||
99 | userId: this.$store.state.user.user.id, | ||
100 | status: status | ||
101 | }).then(res => { | ||
102 | console.log(res) | ||
103 | this.$set(this.batchStatistics, status, res) | ||
104 | }).catch(err => { | ||
105 | this.$message.error(err.message) | ||
106 | this.$set(this.batchStatistics, status, []) | ||
107 | console.log(err) | ||
108 | }) | ||
109 | }, | ||
110 | getChannelStatistics(status) { | ||
111 | homeData.getChannelStatistics({ | ||
112 | userId: this.$store.state.user.user.id, | ||
113 | status: status | ||
114 | }).then(res => { | ||
115 | console.log(res) | ||
116 | this.$set(this.channelStatistics, status, res) | ||
117 | }).catch(err => { | ||
118 | this.$message.error(err.message) | ||
119 | this.$set(this.channelStatistics, status, []) | ||
120 | console.log(err) | ||
121 | }) | ||
72 | } | 122 | } |
73 | } | 123 | } |
74 | } | 124 | } |
... | @@ -86,8 +136,13 @@ export default { | ... | @@ -86,8 +136,13 @@ export default { |
86 | } | 136 | } |
87 | .chart-wrapper { | 137 | .chart-wrapper { |
88 | background: #fff; | 138 | background: #fff; |
89 | padding: 16px 16px 0; | 139 | padding: 16px; |
90 | margin-bottom: 32px; | 140 | border-top: 1px solid #ccc; |
141 | } | ||
142 | .el-col:nth-of-type(1) { | ||
143 | .chart-wrapper { | ||
144 | border-top: 0; | ||
145 | } | ||
91 | } | 146 | } |
92 | } | 147 | } |
93 | @media (max-width:1024px) { | 148 | @media (max-width:1024px) { |
... | @@ -95,4 +150,13 @@ export default { | ... | @@ -95,4 +150,13 @@ export default { |
95 | padding: 8px; | 150 | padding: 8px; |
96 | } | 151 | } |
97 | } | 152 | } |
153 | .active-open-card { | ||
154 | display: flex; | ||
155 | justify-content: space-between; | ||
156 | } | ||
157 | .el-card { | ||
158 | width: 48%; | ||
159 | flex-shrink: 0; | ||
160 | flex-grow: 0; | ||
161 | } | ||
98 | </style> | 162 | </style> | ... | ... |
-
Please register or sign in to post a comment