antissoft / antis-greenway

Blame view

pages/salesReporting/salesReporting.vue 4.24 KB
Edit Raw Normal View History
4dfe89e4   monkeyhouyi   初始化 
1
2
3
 
  <template>
  	<view class="zhuti">
  		<view class="futi">
354e3811   杨鑫   '验收' 
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
  			<!-- <view class="saleTian" @click="toSaleReport">上报线下销售数据</view> -->
  			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;">
  				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
  					<view style="font-weight: bold;font-size: 28rpx;">线下销售数据</view>
  					<view class="cardMu">
  						<view class="cardOne">
  							<view class="title" style="font-size: 26rpx;">
  								今日销售金额
  							</view>
  							<view class="num">21</view>
  							<view>同比昨日上升5</view>
  						</view>
  						<!-- <view class="cardOne">
  							<view class="title">
  								今日销售金额
  							</view>
  							<view class="num">10</view>
  							<view>同比昨日上升1</view>
  						</view> -->
4dfe89e4   monkeyhouyi   初始化 
23
 
  					</view>
4dfe89e4   monkeyhouyi   初始化 
24
 
  				</view>
354e3811   杨鑫   '验收' 
25
26
27
28
29
30
 
  			</view>
  			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
  				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
  					<view style="font-weight: bold;font-size: 28rpx;">营业额趋势</view>
  					<view style="height: 300px;width: 100%;margin-top: 20rpx;">
  						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
4dfe89e4   monkeyhouyi   初始化 
31
 
  					</view>
4dfe89e4   monkeyhouyi   初始化 
32
33
 
  				</view>
  			</view>
354e3811   杨鑫   '验收' 
34
35
36
37
38
39
40
41
 
  			
  			<view class="" style="width: 96%;margin: 0 auto;background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;">
  				<view class="" style="width: 96%;margin: 0 auto;padding: 20rpx 20rpx;">
  					<view style="font-weight: bold;font-size: 28rpx;">销量排名</view>
  					<view style="height: 300px;width: 100%;margin-top: 20rpx;">
  						<qiun-data-charts type="bar" :opts="opts1" :chartData="chartData1" />
  					</view>
  				</view>
4dfe89e4   monkeyhouyi   初始化 
42
 
  			</view>
354e3811   杨鑫   '验收' 
43
4dfe89e4   monkeyhouyi   初始化 
44
45
46
47
48
 
  		</view>
  	</view>
  </template>
  
  <script>
4dfe89e4   monkeyhouyi   初始化 
49
50
51
 
  	export default {
  		data() {
  			return {
354e3811   杨鑫   '验收' 
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
  				chart: null,
  				chartData: {},
  				opts: {
  					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  						"#ea7ccc"
  					],
  					padding: [15, 10, 0, 15],
  					enableScroll: false,
  					legend: {},
  					xAxis: {
  						disableGrid: true
  					},
  					yAxis: {
  						gridType: "dash",
  						dashLength: 2
  					},
  					extra: {
  						line: {
  							type: "straight",
  							width: 2,
  							activeType: "hollow"
  						}
  					}
  				},
  				chartData1: {},
  				opts1: {
  					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  						"#ea7ccc"
  					],
  					padding: [15, 30, 0, 5],
  					enableScroll: false,
  					legend: {},
  					xAxis: {
  						boundaryGap: "justify",
  						disableGrid: false,
  						min: 0,
  						axisLine: false,
  						max: 70
  					},
  					yAxis: {},
  					extra: {
  						bar: {
  							type: "stack",
  							width: 30,
  							meterBorde: 1,
  							meterFillColor: "#FFFFFF",
  							activeBgColor: "#000000",
  							activeBgOpacity: 0.08,
  							categoryGap: 2
  						}
  					}
  				}
4dfe89e4   monkeyhouyi   初始化 
104
105
 
  			}
  		},
354e3811   杨鑫   '验收' 
106
107
108
 
  		onReady() {
  			this.getServerData();
  		},
4dfe89e4   monkeyhouyi   初始化 
109
 
  		mounted() {
354e3811   杨鑫   '验收' 
110
4dfe89e4   monkeyhouyi   初始化 
111
112
113
 
  		},
  		methods: {
  			getServerData() {
354e3811   杨鑫   '验收' 
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
  				//模拟从服务器获取数据时的延时
  				setTimeout(() => {
  					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
  					let res = {
  						categories: ["2020", "2021", "2022", "2023", "2024", "2025"],
  						series: [{
  								name: "成交量A",
  								data: [0, 0, 0, 0, 4,0]
  							},
  							{
  								name: "成交量B",
  								data: [0,0 ,0, 0, 44, 0]
  							},
  							{
  								name: "成交量C",
  								data: [0, 0, 0, 0, 112, 0]
  							}
  						]
  					};
  					this.chartData = JSON.parse(JSON.stringify(res));
  				}, 500);
4dfe89e4   monkeyhouyi   初始化 
135
354e3811   杨鑫   '验收' 
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
  				setTimeout(() => {
  					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
  					let res = {
  						categories: ["2020", "2021", "2022", "2023", "2024", "2025"],
  						series: [{
  								name: "目标值",
  								data: [0, 0, 0,0 ,13, 0]
  							},
  							{
  								name: "完成量",
  								data: [0, 0, 0, 0, 6, 0]
  							}
  						]
  					};
  					this.chartData1 = JSON.parse(JSON.stringify(res));
  				}, 500);
  			},
  			// 跳转到销售上报页面
  			toSaleReport(){
  				uni.navigateTo({
  					url:'/pages/saleReport/saleReport'
  				})
  			},
4dfe89e4   monkeyhouyi   初始化 
159
160
161
162
 
  		}
  	}
  </script>
c62ab6f2   杨鑫   1 
163
 
  <style lang="scss" scoped>
4dfe89e4   monkeyhouyi   初始化 
164
165
 
  	@import 'salesReporting.scss';
  </style>