Skip to content

官美宏 / aiqiyi-program

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 49d94ec4 49d94ec42209c92ad42012bf8d67583778bc93c4 by 官美宏
Options

调整显示

1 parent e641b803
Inline Side-by-side
Showing 7 changed files with 405 additions and 25 deletions
...@@ -25,8 +25,8 @@ export default { ...@@ -25,8 +25,8 @@ export default {
25 }, 25 },
26 data() { 26 data() {
27 return { 27 return {
28 title: '爱奇艺小卡', 28 title: 'iQIYI',
29 stitle: '爱奇艺小卡', 29 stitle: 'iQIYI',
30 logo: Logo 30 logo: Logo
31 } 31 }
32 } 32 }
......
...@@ -2,7 +2,7 @@ module.exports = { ...@@ -2,7 +2,7 @@ module.exports = {
2 /** 2 /**
3 * @description 网站标题 3 * @description 网站标题
4 */ 4 */
5 title: '爱奇艺小卡', 5 title: '会员卡查询系统',
6 /** 6 /**
7 * @description 是否显示 tagsView 7 * @description 是否显示 tagsView
8 */ 8 */
......
...@@ -28,14 +28,15 @@ ...@@ -28,14 +28,15 @@
28 :value="item.value" 28 :value="item.value"
29 /> 29 />
30 </el-select> --> 30 </el-select> -->
31 <el-select v-model="searchObj.region" filterable class="filter-item" clearable size="mini" placeholder="请选择地区"> 31 <!-- <el-select v-model="searchObj.region" filterable class="filter-item" clearable size="mini" placeholder="请选择地区">
32 <el-option 32 <el-option
33 v-for="item in dictMap['region']" 33 v-for="item in dictMap['region']"
34 :key="item.value" 34 :key="item.value"
35 :label="item.label" 35 :label="item.label"
36 :value="item.value" 36 :value="item.value"
37 /> 37 />
38 </el-select> 38 </el-select> -->
39 <el-input v-model="searchObj.channel" clearable size="small" placeholder="请输入地区" style="width: 200px;" class="filter-item" />
39 <el-input v-model="searchObj.channel" clearable size="small" placeholder="请输入渠道" style="width: 200px;" class="filter-item" /> 40 <el-input v-model="searchObj.channel" clearable size="small" placeholder="请输入渠道" style="width: 200px;" class="filter-item" />
40 <el-input v-model="searchObj.cardNum" clearable size="small" placeholder="请输入卡号" style="width: 200px;" class="filter-item" /> 41 <el-input v-model="searchObj.cardNum" clearable size="small" placeholder="请输入卡号" style="width: 200px;" class="filter-item" />
41 <el-input v-model="searchObj.batch" clearable size="small" placeholder="请输入批次（数字）" style="width: 200px;" class="filter-item" /> 42 <el-input v-model="searchObj.batch" clearable size="small" placeholder="请输入批次（数字）" style="width: 200px;" class="filter-item" />
...@@ -58,13 +59,13 @@ ...@@ -58,13 +59,13 @@
58 </template> 59 </template>
59 </el-table-column> 60 </el-table-column>
60 <el-table-column label="卡号" width="70px" prop="cardNum" /> 61 <el-table-column label="卡号" width="70px" prop="cardNum" />
61 <el-table-column label="卡密" width="250px" prop="cardKey" /> 62 <el-table-column label="卡密" width="160px" prop="cardKey" />
62 <el-table-column label="vip类型" width="80px" prop="status"> 63 <el-table-column label="vip状态" width="80px" prop="status">
63 <template slot-scope="scope"> 64 <template slot-scope="scope">
64 <span v-if="Number(scope.row.status) === 0">未兑换</span> 65 <el-tag v-if="Number(scope.row.status) === 0">未激活</el-tag>
65 <span v-if="Number(scope.row.status) === 1">已兑换</span> 66 <el-tag v-if="Number(scope.row.status) === 1" type="success">已激活</el-tag>
66 <span v-if="Number(scope.row.status) === 2">兑换失败</span> 67 <el-tag v-if="Number(scope.row.status) === 2" type="warning">激活失败</el-tag>
67 <span v-if="Number(scope.row.status) === 3">已失效</span> 68 <el-tag v-if="Number(scope.row.status) === 3" type="info">已失效</el-tag>
68 </template> 69 </template>
69 </el-table-column> 70 </el-table-column>
70 <el-table-column label="地区" show-overflow-tooltip prop="region" /> 71 <el-table-column label="地区" show-overflow-tooltip prop="region" />
...@@ -72,8 +73,8 @@ ...@@ -72,8 +73,8 @@
72 <el-table-column label="批次" width="60px" prop="batch" /> 73 <el-table-column label="批次" width="60px" prop="batch" />
73 <el-table-column label="产品id" width="60px" prop="productId" /> 74 <el-table-column label="产品id" width="60px" prop="productId" />
74 <el-table-column label="产品" width="100px" prop="productName" /> 75 <el-table-column label="产品" width="100px" prop="productName" />
75 <el-table-column label="大屏账号" width="260px" prop="account" /> 76 <el-table-column label="大屏账号" show-overflow-tooltip width="260px" prop="account" />
76 <el-table-column label="订单号" width="150px" prop="bossOrderNo" /> 77 <el-table-column label="订单号" show-overflow-tooltip width="160px" prop="bossOrderNo" />
77 <el-table-column label="备注" show-overflow-tooltip prop="remark" /> 78 <el-table-column label="备注" show-overflow-tooltip prop="remark" />
78 <el-table-column label="领取手机号" width="125px" prop="rcvMobile" /> 79 <el-table-column label="领取手机号" width="125px" prop="rcvMobile" />
79 </el-table> 80 </el-table>
...@@ -107,7 +108,7 @@ export default { ...@@ -107,7 +108,7 @@ export default {
107 { key: 'bossOrderNo', display_name: '订单号' } 108 { key: 'bossOrderNo', display_name: '订单号' }
108 ], 109 ],
109 vipTypeList: [{ label: '爱奇艺包月', value: '1' }, { label: '爱奇艺包年', value: '4' }], 110 vipTypeList: [{ label: '爱奇艺包月', value: '1' }, { label: '爱奇艺包年', value: '4' }],
110 statusList: [{ label: '未兑换', value: '0' }, { label: '已兑换', value: '1' }, { label: '兑换失败', value: '2' }, { label: '已失效', value: '3' }], 111 statusList: [{ label: '未激活', value: '0' }, { label: '已激活', value: '1' }, { label: '激活失败', value: '2' }, { label: '已失效', value: '3' }],
111 total: 0, 112 total: 0,
112 tableHeight: 0, 113 tableHeight: 0,
113 searchObj: { 114 searchObj: {
......
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 },
97 grid: {
98 top: '10%',
99 left: '3%',
100 right: '4%',
101 bottom: '3%',
102 containLabel: true
103 },
104 xAxis: {
105 type: 'category',
106 axisLine: {
107 show: false
108 },
109 axisTick: {
110 show: false,
111 alignWithLabel: true
112 },
113 splitLine: {
114 show: false
115 },
116 axisPointer: {
117 type: 'shadow'
118 }
119 },
120 yAxis: {
121 type: 'value',
122 boundaryGap: [0, 0.01],
123 splitNumber: 5,
124 max: 'auto',
125 data: [],
126 axisLine: {
127 show: false
128 },
129 axisTick: {
130 show: false
131 }
132 },
133 series: [
134 {
135 name: '标签人数分布',
136 type: 'bar',
137 data: [],
138 barWidth: 60,
139 label: {
140 show: true,
141 position: 'inside'
142 },
143 itemStyle: {
144 color: (params) => {
145 return this.colorList[params.dataIndex]
146 }
147 }
148 }
149 ]
150 }
151 this.chart.setOption(option)
152 if (Object.keys(this.option).length > 0) {
153 this.setOption()
154 }
155 console.log(this.optionData)
156 if (Object.keys(this.optionData).length > 0) {
157 this.initData()
158 }
159 },
160 initData() {
161 console.log(123)
162 console.log(this.optionData)
163 const keyArray = Object.keys(this.optionData)
164 const yAxis = []
165 const xAxis = []
166 if (typeof this.optionData[keyArray[0]] !== 'object') {
167 keyArray.forEach(item => {
168 yAxis.push(item)
169 xAxis.push(this.optionData[item])
170 })
171 console.log(yAxis, xAxis)
172 } else {
173 keyArray.forEach(item => {
174 const array = Object.keys(this.optionData[item])
175 array.forEach(itemArray => {
176 const arrayList = Object.keys(this.optionData[item][itemArray])
177 arrayList.forEach(itemArray1 => {
178 yAxis.push(item + ':' + itemArray + ':' + itemArray1)
179 xAxis.push(this.optionData[item][itemArray][itemArray1])
180 })
181 // yAxis.push(item + ':' + itemArray)
182 // xAxis.push(this.optionData[item][itemArray])
183 })
184 })
185 }
186 const option = {
187 xAxis: {
188 data: yAxis
189 },
190 series: [
191 {
192 data: xAxis
193 }
194 ]
195 }
196 console.log(option)
197 this.chart.setOption(option)
198 },
199 setOption() {
200 this.chart.setOption(this.option)
201 }
202 }
203 }
204 </script>
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: 'item'
96 },
97 grid: {
98 top: '10%',
99 left: '3%',
100 right: '4%',
101 bottom: '3%',
102 containLabel: true
103 },
104 series: [
105 {
106 name: '标签人数分布',
107 type: 'pie',
108 radius: '50%',
109 emphasis: {
110 itemStyle: {
111 shadowBlur: 10,
112 shadowOffsetX: 0,
113 shadowColor: 'rgba(0, 0, 0, 0.5)'
114 }
115 }
116 }
117 ]
118 }
119 this.chart.setOption(option)
120 if (Object.keys(this.option).length > 0) {
121 this.setOption()
122 }
123 console.log(this.optionData)
124 if (Object.keys(this.optionData).length > 0) {
125 this.initData()
126 }
127 },
128 initData() {
129 console.log(123)
130 console.log(this.optionData)
131 const keyArray = Object.keys(this.optionData)
132 const yAxis = []
133 const xAxis = []
134 if (typeof this.optionData[keyArray[0]] !== 'object') {
135 keyArray.forEach(item => {
136 // yAxis.push(item)
137 // xAxis.push(this.optionData[item])
138 xAxis.push({
139 value: this.optionData[item],
140 name: item
141 })
142 })
143 console.log(yAxis, xAxis)
144 } else {
145 keyArray.forEach(item => {
146 const array = Object.keys(this.optionData[item])
147 array.forEach(itemArray => {
148 yAxis.push(item + ':' + itemArray)
149 xAxis.push(this.optionData[item][itemArray])
150 })
151 })
152 }
153 const option = {
154 // yAxis: {
155 // data: yAxis
156 // },
157 series: [
158 {
159 data: xAxis
160 }
161 ]
162 }
163 console.log(option)
164 this.chart.setOption(option)
165 },
166 setOption() {
167 this.chart.setOption(this.option)
168 }
169 }
170 }
171 </script>
1 <template> 1 <template>
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 /> 5 <panel-group />
6 <div class="active-open-card"> 6 <div class="active-open-card">
7 <el-card> 7 <el-card>
...@@ -11,17 +11,17 @@ ...@@ -11,17 +11,17 @@
11 <el-row> 11 <el-row>
12 <el-col :xs="24" :sm="24" :lg="24"> 12 <el-col :xs="24" :sm="24" :lg="24">
13 <div class="chart-wrapper"> 13 <div class="chart-wrapper">
14 <bar-chart :option-data="regionStatistics[0]" :option="{title: { show: true, text: '开卡地区：地区分布' }}" /> 14 <pie-chart :option-data="regionStatistics[0]" :option="{title: { show: true, text: '开卡地区：地区分布' }}" />
15 </div> 15 </div>
16 </el-col> 16 </el-col>
17 <el-col :xs="24" :sm="24" :lg="24"> 17 <el-col :xs="24" :sm="24" :lg="24">
18 <div class="chart-wrapper"> 18 <div class="chart-wrapper">
19 <bar-chart :option-data="batchStatistics[0]" :option="{title: { show: true, text: '开卡地区：批次分布' }}" /> 19 <bar-chart :option-data="channelStatistics[0]" :option="{title: { show: true, text: '开卡地区：渠道分布' }}" />
20 </div> 20 </div>
21 </el-col> 21 </el-col>
22 <el-col :xs="24" :sm="24" :lg="24"> 22 <el-col :xs="24" :sm="24" :lg="24">
23 <div class="chart-wrapper"> 23 <div class="chart-wrapper">
24 <bar-chart :option-data="channelStatistics[0]" :option="{title: { show: true, text: '开卡地区：渠道分布' }}" /> 24 <bar-chart-h :option-data="batchStatistics[0]" :option="{title: { show: true, text: '开卡地区：批次分布' }}" />
25 </div> 25 </div>
26 </el-col> 26 </el-col>
27 </el-row> 27 </el-row>
...@@ -33,17 +33,17 @@ ...@@ -33,17 +33,17 @@
33 <el-row> 33 <el-row>
34 <el-col :xs="24" :sm="24" :lg="24"> 34 <el-col :xs="24" :sm="24" :lg="24">
35 <div class="chart-wrapper"> 35 <div class="chart-wrapper">
36 <bar-chart :option-data="regionStatistics[1]" :option="{title: { show: true, text: '激活地区：地区分布' }}" /> 36 <pie-chart :option-data="regionStatistics[1]" :option="{title: { show: true, text: '激活地区：地区分布' }}" />
37 </div> 37 </div>
38 </el-col> 38 </el-col>
39 <el-col :xs="24" :sm="24" :lg="24"> 39 <el-col :xs="24" :sm="24" :lg="24">
40 <div class="chart-wrapper"> 40 <div class="chart-wrapper">
41 <bar-chart :option-data="batchStatistics[1]" :option="{title: { show: true, text: '激活地区：批次分布' }}" /> 41 <bar-chart :option-data="channelStatistics[1]" :option="{title: { show: true, text: '激活地区：渠道分布' }}" />
42 </div> 42 </div>
43 </el-col> 43 </el-col>
44 <el-col :xs="24" :sm="24" :lg="24"> 44 <el-col :xs="24" :sm="24" :lg="24">
45 <div class="chart-wrapper"> 45 <div class="chart-wrapper">
46 <bar-chart :option-data="channelStatistics[1]" :option="{title: { show: true, text: '激活地区：渠道分布' }}" /> 46 <bar-chart-h :option-data="batchStatistics[1]" :option="{title: { show: true, text: '激活地区：批次分布' }}" />
47 </div> 47 </div>
48 </el-col> 48 </el-col>
49 </el-row> 49 </el-row>
...@@ -53,17 +53,21 @@ ...@@ -53,17 +53,21 @@
53 </div> 53 </div>
54 </template> 54 </template>
55 <script> 55 <script>
56 import GithubCorner from '@/components/GithubCorner' 56 // import GithubCorner from '@/components/GithubCorner'
57 import PanelGroup from './dashboard/PanelGroup' 57 import PanelGroup from './dashboard/PanelGroup'
58 import BarChart from './dashboard/BarChart' 58 import BarChart from './dashboard/BarChart'
59 import BarChartH from './dashboard/BarChartH'
60 import PieChart from './dashboard/PieChart'
59 import homeData from '@/api/home/homeData' 61 import homeData from '@/api/home/homeData'
60 62
61 export default { 63 export default {
62 name: 'Dashboard', 64 name: 'Dashboard',
63 components: { 65 components: {
64 GithubCorner, 66 // GithubCorner,
65 PanelGroup, 67 PanelGroup,
66 BarChart 68 BarChart,
69 BarChartH,
70 PieChart
67 }, 71 },
68 data() { 72 data() {
69 return { 73 return {
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <index-bg /> 3 <index-bg />
4 <div class="loginBox"> 4 <div class="loginBox">
5 <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form"> 5 <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
6 <h3 class="title" style="position: relative">爱奇艺小卡<span style="color: #fff;z-index: 999;font-size: 12px;position: absolute;top: 4px;right: 10px" /></h3> 6 <h3 class="title" style="position: relative">会员卡查询系统<span style="color: #fff;z-index: 999;font-size: 12px;position: absolute;top: 4px;right: 10px" /></h3>
7 <el-form-item prop="username"> 7 <el-form-item prop="username">
8 <el-input v-model="loginForm.username" :validate-event="false" class="login-input" type="text" size="mini" placeholder="账号" style="width: 400px;"> 8 <el-input v-model="loginForm.username" :validate-event="false" class="login-input" type="text" size="mini" placeholder="账号" style="width: 400px;">
9 <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> 9 <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
......