BJ_web_developers / HSpark

Blame view

src/views/dashboard/index.vue 11.5 KB
Edit Raw Normal View History Permalink
a72ae217   王富生   第一次提交 
1
2
3
4
5
6
 
  <template>
    <div>
      <div class="panel-group el-row" style="margin-left: -20px; margin-right: -20px;">
        <div class="card-panel-col el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-8"
             style="padding-left: 20px; padding-right: 20px;">
          <div class="card-panel">
a7fa495f   liuqimichale   首页icon 
7
 
            <div class="card-panel-icon-wrapper icon-order">
a72ae217   王富生   第一次提交 
8
9
10
 
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
46081f33   王飞   交互 
11
 
                本月订单： {{cardData.monthOrderNum}}
a72ae217   王富生   第一次提交 
12
13
 
              </div>
              <div class="card-panel-text">
46081f33   王飞   交互 
14
 
                订单总量： {{cardData.totalOrderNum}}
a72ae217   王富生   第一次提交 
15
16
17
18
19
20
21
 
              </div>
            </div>
          </div>
        </div>
        <div class="card-panel-col el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-8"
             style="padding-left: 20px; padding-right: 20px;">
          <div class="card-panel">
a7fa495f   liuqimichale   首页icon 
22
 
            <div class="card-panel-icon-wrapper icon-card">
a72ae217   王富生   第一次提交 
23
24
25
 
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
46081f33   王飞   交互 
26
 
                可用卡券： {{cardData.validCouponNum}}
a72ae217   王富生   第一次提交 
27
28
 
              </div>
              <div class="card-panel-text">
46081f33   王飞   交互 
29
 
                卡券总量： {{cardData.totalCouponNum}}
a72ae217   王富生   第一次提交 
30
31
32
33
34
35
36
 
              </div>
            </div>
          </div>
        </div>
        <div class="card-panel-col el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-8"
             style="padding-left: 20px; padding-right: 20px;">
          <div class="card-panel">
a7fa495f   liuqimichale   首页icon 
37
 
            <div class="card-panel-icon-wrapper icon-integral">
a72ae217   王富生   第一次提交 
38
39
40
 
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
46081f33   王飞   交互 
41
 
                可用积分： {{cardData.validScore}}
a72ae217   王富生   第一次提交 
42
43
 
              </div>
              <div class="card-panel-text">
46081f33   王飞   交互 
44
 
                全部积分： {{cardData.totalScore}}
a72ae217   王富生   第一次提交 
45
46
47
48
49
50
51
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
104
105
106
107
108
109
110
111
 
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="table-wrap">
        <p class="table-title">消费统计</p>
        <el-table
          :data="moneyData"
          style="width: 100%;">
          <el-table-column
            prop="name"
            label="月份">
          </el-table-column>
          <el-table-column
            prop="january"
            label="1月">
          </el-table-column>
          <el-table-column
            prop="february"
            label="2月">
          </el-table-column>
          <el-table-column
            prop="march"
            label="3月">
          </el-table-column>
          <el-table-column
            prop="april"
            label="4月">
          </el-table-column>
          <el-table-column
            prop="april"
            label="5月">
          </el-table-column>
          <el-table-column
            prop="june"
            label="6月">
          </el-table-column>
          <el-table-column
            prop="july"
            label="7月">
          </el-table-column>
          <el-table-column
            prop="august"
            label="8月">
          </el-table-column>
          <el-table-column
            prop="september"
            label="9月">
          </el-table-column>
          <el-table-column
            prop="october"
            label="10月">
          </el-table-column>
          <el-table-column
            prop="november"
            label="11月">
          </el-table-column>
          <el-table-column
            prop="december"
            label="12月">
          </el-table-column>
        </el-table>
      </div>
  
      <div class="table-wrap">
83e23298   王飞   补缴 
112
 
        <p class="table-title">最新订单(近三个月)</p>
a72ae217   王富生   第一次提交 
113
114
115
116
117
 
        <el-table
          :data="orderData"
          style="width: 100%;"
          :show-overflow-tooltip="true">
          <el-table-column
46081f33   王飞   交互 
118
 
            prop="plName"
a72ae217   王富生   第一次提交 
119
120
121
122
 
            label="停车场"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
46081f33   王飞   交互 
123
 
            prop="carNumber"
a72ae217   王富生   第一次提交 
124
125
126
127
 
            label="车牌"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
83e23298   王飞   补缴 
128
129
130
131
132
133
134
 
            prop="orderTotalFee"
            label="应收费用">
            <template slot-scope="scope">
              <span>{{(scope.row.orderTotalFee) |fen2Yuan}} </span>
            </template>
          </el-table-column>
          <el-table-column
46081f33   王飞   交互 
135
 
            prop="orderActFee"
83e23298   王飞   补缴 
136
 
            label="实收费用">
46081f33   王飞   交互 
137
138
139
 
            <template slot-scope="scope">
              <span>{{(scope.row.orderActFee) |fen2Yuan}} </span>
            </template>
a72ae217   王富生   第一次提交 
140
141
 
          </el-table-column>
          <el-table-column
46081f33   王飞   交互 
142
 
            prop="parkInTime"
a72ae217   王富生   第一次提交 
143
144
 
            label="入场时间"
            :show-overflow-tooltip="true">
46081f33   王飞   交互 
145
146
147
 
            <template slot-scope="scope">
              <span>{{(scope.row.parkInTime) |string2Date(7)}} </span>
            </template>
a72ae217   王富生   第一次提交 
148
149
 
          </el-table-column>
          <el-table-column
46081f33   王飞   交互 
150
 
            prop="parkOutTime"
a72ae217   王富生   第一次提交 
151
152
 
            label="出场时间"
            :show-overflow-tooltip="true">
46081f33   王飞   交互 
153
154
155
 
            <template slot-scope="scope">
              <span>{{(scope.row.parkOutTime) |string2Date(7)}} </span>
            </template>
a72ae217   王富生   第一次提交 
156
157
 
          </el-table-column>
          <el-table-column
46081f33   王飞   交互 
158
 
            prop="parkingDuration"
a72ae217   王富生   第一次提交 
159
160
 
            label="停车时长"
            :show-overflow-tooltip="true">
46081f33   王飞   交互 
161
162
163
 
            <template slot-scope="scope">
              <span>{{(scope.row) |parkingDurationFormatter(scope.row.parkingDuration)}} </span>
            </template>
a72ae217   王富生   第一次提交 
164
165
 
          </el-table-column>
          <el-table-column
46081f33   王飞   交互 
166
 
            prop="berthNo"
a72ae217   王富生   第一次提交 
167
168
169
 
            label="泊位编号">
          </el-table-column>
          <el-table-column
46081f33   王飞   交互 
170
 
            prop="orderState"
a72ae217   王富生   第一次提交 
171
 
            label="订单状态">
46081f33   王飞   交互 
172
173
174
 
            <template slot-scope="scope">
              <span>{{(scope.row) |inOutStateFormatter}} </span>
            </template>
a72ae217   王富生   第一次提交 
175
176
177
 
          </el-table-column>
        </el-table>
        <el-pagination
dcf87b64   Andy   table bug修复 
178
 
          :page-size="5"
a72ae217   王富生   第一次提交 
179
180
 
          :pager-count="11"
          layout="prev, pager, next"
46081f33   王飞   交互 
181
182
183
184
185
186
 
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleSizeChange"
          @prev-click="handleSizeChange"
          @next-click="handleSizeChange"
        >
a72ae217   王富生   第一次提交 
187
188
189
190
191
192
 
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
46081f33   王飞   交互 
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
    import { mapGetters } from 'vuex'
    import {getCustIndexBaseInfo,queryOwnerPayOutByMonth,queryOwnerParkRecord} from '@/api/index';
    import {fen2Yuan,string2Date,inOutStateFormatter,parkingDurationFormatter} from '@/filters/index';
    export default {
      name: 'Dashboard',
      computed: {
        ...mapGetters([
          'name'
        ])
      },
      data() {
        return {
          cardData: {
            totalOrderNum: 0,
            monthOrderNum: 0,
            totalCouponNum: 0,
            validCouponNum: 0,
            totalScore: 0,
            validScore: 0,
a72ae217   王富生   第一次提交 
212
 
          },
83e23298   王飞   补缴 
213
 
          total: 0,
46081f33   王飞   交互 
214
 
          currentPage: 1,
dcf87b64   Andy   table bug修复 
215
 
          pageSize: 4,
46081f33   王飞   交互 
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
 
          moneyData: [{
            name: '消费金额',
            january: '0',
            february: '0',
            march: '0',
            april: '0',
            may: '0',
            june: '0',
            july: '0',
            august: '0',
            september: '0',
            october: '0',
            november: '0',
            december: '0'
          }],
          orderData: [],
        }
      },
  
      mounted: function() {
        this.getCustIndexBaseInfo();
        this.queryOwnerPayOutByMonth();
        this.queryOwnerParkRecord();
      },
  
      methods: {
        /**
         * 获取查询参数
         */
        getQueryParams: function() {
          let userInfo = this.$store.state.user.userInfo;
          let beginTime = new Date();
          let endTime = new Date();
          beginTime.setMonth(0);
          beginTime.setDate(1);
          endTime.setMonth(11);
          endTime.setDate(31);
  
          let req = {
            custId:userInfo.custId,
            //custId:'501519113641649119232',
            beginTime:beginTime,
            endTime:endTime,
          }
          return req;
        },
        /**
         * 查询首页卡片信息
         */
        getCustIndexBaseInfo: function() {
          let req = this.getQueryParams();
          getCustIndexBaseInfo(req).then(response =>{
            if(response.code=='8888'){
              let data = response.data;
              this.cardData.totalOrderNum = data.totalOrderNum == null ? 0: data.totalOrderNum;
              this.cardData.monthOrderNum = data.monthOrderNum == null ? 0: data.monthOrderNum;
              this.cardData.totalCouponNum = data.totalCouponNum == null ? 0: data.totalCouponNum;
              this.cardData.validCouponNum = data.validCouponNum == null ? 0: data.validCouponNum;
              this.cardData.totalScore = data.totalScore == null ? 0: data.totalScore;
              this.cardData.validScore = data.validScore == null ? 0: data.validScore;
            }else{
              console.log(response);
            }
  
          });
        },
        /**
         * 查询首页月支出信息
         */
        queryOwnerPayOutByMonth: function() {
          let req = this.getQueryParams();
  
          queryOwnerPayOutByMonth(req).then(response =>{
            if(response.code=='8888'){
              let data = response.data;
              this.moneyData[0].january = fen2Yuan(data[0].fee);
              this.moneyData[0]. february = fen2Yuan(data[1].fee);
              this.moneyData[0]. march = fen2Yuan(data[2].fee);
              this.moneyData[0]. april = fen2Yuan(data[3].fee);
              this.moneyData[0]. may = fen2Yuan(data[4].fee);
              this.moneyData[0]. june = fen2Yuan(data[5].fee);
              this.moneyData[0]. july = fen2Yuan(data[6].fee);
              this.moneyData[0]. august = fen2Yuan(data[7].fee);
              this.moneyData[0]. september = fen2Yuan(data[8].fee);
              this.moneyData[0]. october = fen2Yuan(data[9].fee);
              this.moneyData[0]. november =fen2Yuan( data[10].fee);
              this.moneyData[0]. december = fen2Yuan(data[11].fee);
  
            }else{
              console.log(response);
            }
  
          });
        },
  
        /**
         * 查询首页订单信息
         */
        queryOwnerParkRecord: function() {
          let req = this.getQueryParams();
          //查询最近三个月的
          let beginTime = new Date();
          let endTime = new Date();
          beginTime.setMonth(beginTime.getMonth() - 3);
          req.beginTime = beginTime;
          req.endTime = endTime;
          req.baseRequest={
              pageNum:this.currentPage,
              pageSize:this.pageSize,
a72ae217   王富生   第一次提交 
325
 
          },
46081f33   王飞   交互 
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
 
          queryOwnerParkRecord (req).then(response =>{
            if(response.code=='8888'){
                this.orderData = response.data.dataList;
                this.total = response.data.pageTotals;
            }else{
              console.log(response);
            }
  
          });
        },
        // 获取子组件页码方法
        handleSizeChange: function(page) {
          console.log(page)
          this.currentPage = page;
          /** 调用表格数据.*/
          this.queryOwnerParkRecord();
  
        },
  
  
      },
a72ae217   王富生   第一次提交 
348
 
    }
a72ae217   王富生   第一次提交 
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
 
  </script>
  
  <style lang="scss" scoped>
    .panel-group .card-panel {
      height: 108px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
    }
  
    .card-panel-icon-wrapper {
      float: left;
      margin: 26px 0 0 15px;
      padding: 16px;
      -webkit-transition: all .38s ease-out;
      transition: all .38s ease-out;
      border-radius: 6px;
      background: #f0f;
      width: 60px;
      height: 60px;
  
    }
  
    .card-panel-description {
      float: right;
      font-weight: 700;
      margin: 26px;
      margin-left: 0;
    }
  
    .card-panel-text {
      line-height: 18px;
      color: rgba(0, 0, 0, .45);
      font-size: 16px;
      margin-bottom: 20px;
    }
  
    .card-panel-num {
      font-size: 20px;
    }
a7fa495f   liuqimichale   首页icon 
395
396
397
398
399
400
401
402
403
 
    .icon-order{
      background: url("../../assets/dashboard_images/order.png") no-repeat;
    }
    .icon-card{
      background: url("../../assets/dashboard_images/card.png") no-repeat;
    }
    .icon-integral{
      background: url("../../assets/dashboard_images/integral.png") no-repeat;
    }
a72ae217   王富生   第一次提交 
404
405
 
  
  </style>