数据处理-样式处理-支付

数据处理

let ret =  [
  { dictCode: 'TRADE_SUBJECT', itemCode: '01', itemName: '挂号', itemParentCode: '', itemSort: 68116 },
  { dictCode: 'TRADE_SUBJECT', itemCode: '02', itemName: '取药', itemParentCode: '', itemSort: 68117 },
  { dictCode: 'TRADE_SUBJECT', itemCode: '03', itemName: '检查', itemParentCode: '', itemSort: 68118 },
  { dictCode: 'TRADE_SUBJECT', itemCode: '04', itemName: '检验', itemParentCode: '', itemSort: 68119 },
  { dictCode: 'TRADE_SUBJECT', itemCode: '05', itemName: '住院', itemParentCode: '', itemSort: 68120 },
  { dictCode: 'TRADE_SUBJECT', itemCode: '06', itemName: '体检', itemParentCode: '', itemSort: 68121 }
]
let yssj = _.map(ret, item => {
  return { code: 'total_amount_' + item.itemCode, key: item.itemCode, name: item.itemName, type: 'success', width: '30' }
})
console.log('yssj', yssj)
// let yssj =  [
//   { code: 'total_amount_01', key: '01', name: '"挂号', type: 'success', width: '30' },
//   { code: 'total_amount_02', key: '02', name: '"取药', type: 'success', width: '30' },
//   { code: 'total_amount_03', key: '03', name: '"检查', type: 'success', width: '30' },
//   { code: 'total_amount_04', key: '04', name: '"检验', type: 'success', width: '30' },
//   { code: 'total_amount_05', key: '05', name: '"住院', type: 'success', width: '30' },
//   { code: 'total_amount_06', key: '06', name: '"体检', type: 'success', width: '30' }
// ]
let datax =
  [
    { receiptAmount: 0, payTime: '2020-12-13', total_amount: 0 },
    { receiptAmount: 0, payTime: '2020-12-12', total_amount: 0 },
    { receiptAmount: 52, payTime: '2020-12-11', total_amount: 52, tradeSubject: '01' },
    { receiptAmount: 0.01, payTime: '2020-12-10', total_amount: 0.01, tradeSubject: '05' },
    { receiptAmount: 6, payTime: '2020-12-10', total_amount: 6, tradeSubject: '01' },
    { receiptAmount: 9, payTime: '2020-12-10', total_amount: 9, tradeSubject: '02' },
    { receiptAmount: 0.01, payTime: '2020-12-09', total_amount: 0.01, tradeSubject: '01' },
    { receiptAmount: 0.01, payTime: '2020-12-08', total_amount: 0.01, tradeSubject: '01' },
    { receiptAmount: 8.01, payTime: '2020-12-07', total_amount: 8.01, tradeSubject: '01' },
    { receiptAmount: 32.01, payTime: '2020-12-07', total_amount: 32.01, tradeSubject: '02' }
  ]
let xz = _.sortBy(_.uniq(_.map(datax, item => {
  return moment(item.payTime).format('YYYY-MM-DD')
})))
console.log('xz', xz)
// let xz = ['2020-12-07', '2020-12-08', '2020-12-09', '2020-12-10', '2020-12-11', '2020-12-12', '2020-12-13'] 

let fz = _.groupBy(datax, 'tradeSubject')
console.log('fz', fz)
// let fz =
//   {
//     '01': [{ receiptAmount: 52, payTime: '2020-12-11', total_amount: 52, tradeSubject: '01' },
//            { receiptAmount: 6, payTime: '2020-12-10', total_amount: 6, tradeSubject: '01' },
//            { receiptAmount: 0.01, payTime: '2020-12-09', total_amount: 0.01, tradeSubject: '01' },
//            { receiptAmount: 0.01, payTime: '2020-12-08', total_amount: 0.01, tradeSubject: '01' },
//            { receiptAmount: 8.01, payTime: '2020-12-07', total_amount: 8.01, tradeSubject: '01' }],
//     '02': [{ receiptAmount: 9, payTime: '2020-12-10', total_amount: 9, tradeSubject: '02' },
//            { receiptAmount: 32.01, payTime: '2020-12-07', total_amount: 32.01, tradeSubject: '02' }],
//     '05': [{ receiptAmount: 0.01, payTime: '2020-12-10', total_amount: 0.01, tradeSubject: '05' }],
//     'undefined': [{ receiptAmount: 0, payTime: '2020-12-13', total_amount: 0 },
//                   { receiptAmount: 0, payTime: '2020-12-12', total_amount: 0 }]
//   }

let jg = _.map(yssj, ({ name, key, width }) => {
  if (!!_.get(fz, key)) {
    let dataarr = _.map(xz, xItem => {
      let mm = !!_.find(fz[key], { payTime: xItem }) ? _.find(fz[key], { payTime: xItem }).receiptAmount : 0
      return mm
    })
    return { name, type: 'bar', width, data: dataarr }
  }
})
console.log('jg', jg)


// let jg = [
//   { name: '挂号', type: 'bar', barMaxWidth: '30', data: [8.01, 0.01, 0.01, 6, 52, 0, 0] },
//   undefined,
//   undefined,
//   { name: '取药', type: 'bar', barMaxWidth: '30', data: [32.01, 0, 0, 9, 0, 0, 0] },
//   { name: '住院', type: 'bar', barMaxWidth: '30', data: [0, 0, 0, 0.01, 0, 0, 0] },
//   undefined
// ]

样式处理

  
<el-row :gutter="15">
  <el-col v-for="(item, index) in todayData" :key="index" :span="8"
		  style="margin-top: 20px;">
	<div :class="`${item.color}` + ' card-flex'">
	  <div class="flex-item">
		<img :src="item.icon">
	  </div>
	  <div class="flex-item" :lg="8">
		<p class="num">{{ todayOverview[item.prop] || 0 }}</p>
		<p class="desc">{{ item.label }}</p>
	  </div>
	</div>
  </el-col>
</el-row>
 todayData: [
	{ prop: 'total_amount', label: '总交易金额(元)', color: 'green-card', icon: require('@/assets/icon/total.png') },
	{ prop: 'trade_num', label: '支付笔数', color: 'blue-card', icon: require('@/assets/icon/pay.png') },
	{ prop: 'refund_num', label: '退费笔数', color: 'red-card', icon: require('@/assets/icon/refund.png') }
  ], 
todayOverview = {total_amount: 0, refund_amount: 0, receipt_amount: 0}

.green-card{
  background: -webkit-linear-gradient(bottom,#27c0b5, #3edf9c);
  background: -o-linear-gradient(bottom,#27c0b5, #3edf9c);
  background: -moz-linear-gradient(bottom,#27c0b5, #3edf9c);
  background: linear-gradient(to right,#27c0b5, #3edf9c); /* 标准的语法（必须放在最后） */
}
.blue-card{
  background: -webkit-linear-gradient(bottom,#4d94fe, #52bafb);
  background: -o-linear-gradient(bottom,#4d94fe, #52bafb);
  background: -moz-linear-gradient(bottom,#4d94fe, #52bafb);
  background: linear-gradient(to right,#4d94fe, #52bafb); /* 标准的语法（必须放在最后） */
}
.red-card{
  background: -webkit-linear-gradient(bottom,#ff6794, #fc78a0);
  background: -o-linear-gradient(bottom,#ff6794, #fc78a0);
  background: -moz-linear-gradient(bottom,#ff6794, #fc78a0);
  background: linear-gradient(to right,#ff6794, #fc78a0); /* 标准的语法（必须放在最后） */
}
 

.card-flex{
  height: 110px;
  display: flex;
  display: -webkit-flex;
  align-items:center;
  justify-content:space-around;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  .flex-item{
    text-align: center;
    color: #ffffff;
    .num{
      font-weight: 600;
      font-size: 28px;
      margin: 0px;
      line-height: 32px;
      text-align: left;
    }
    .num1{
      margin: 0px;
    }
    .desc{
      align-items:center;
      text-align: center;
      margin: 0px;
      line-height: 32px;
      font-size: 14px;
      text-align: center;
    }
  }
}