| | |
| | | <template> |
| | | <el-row :gutter="40" class="panel-group"> |
| | | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
| | | <div class="top2">单日累计产量</div> |
| | | <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col"> |
| | | <div class="card-panel" @click="handleSetLineChartData('newVisitis')"> |
| | | <div class="card-panel-icon-wrapper icon-people"> |
| | | <svg-icon icon-class="peoples" class-name="card-panel-icon" /> |
| | | </div> |
| | | <div class="card-panel-description"> |
| | | <div class="card-panel-text"> |
| | | 访客 |
| | | 合箱上线 |
| | | </div> |
| | | <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
| | | <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col"> |
| | | <div class="card-panel" @click="handleSetLineChartData('messages')"> |
| | | <div class="card-panel-icon-wrapper icon-message"> |
| | | <svg-icon icon-class="message" class-name="card-panel-icon" /> |
| | | </div> |
| | | <div class="card-panel-description"> |
| | | <div class="card-panel-text"> |
| | | 消息 |
| | | 合箱下线 |
| | | </div> |
| | | <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" /> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
| | | <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col"> |
| | | <div class="card-panel" @click="handleSetLineChartData('purchases')"> |
| | | <div class="card-panel-icon-wrapper icon-money"> |
| | | <svg-icon icon-class="money" class-name="card-panel-icon" /> |
| | | </div> |
| | | <div class="card-panel-description"> |
| | | <div class="card-panel-text"> |
| | | 金额 |
| | | 总装上线 |
| | | </div> |
| | | <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" /> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
| | | <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col"> |
| | | <div class="card-panel" @click="handleSetLineChartData('shoppings')"> |
| | | <div class="card-panel-icon-wrapper icon-shopping"> |
| | | <svg-icon icon-class="shopping" class-name="card-panel-icon" /> |
| | | </div> |
| | | <div class="card-panel-description"> |
| | | <div class="card-panel-text"> |
| | | 订单 |
| | | 总装下线 |
| | | </div> |
| | | <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col"> |
| | | <div class="card-panel" @click="handleSetLineChartData('shoppings')"> |
| | | <div class="card-panel-icon-wrapper icon-shopping"> |
| | | <svg-icon icon-class="shopping" class-name="card-panel-icon" /> |
| | | </div> |
| | | <div class="card-panel-description"> |
| | | <div class="card-panel-text"> |
| | | CVT上线 |
| | | </div> |
| | | <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col"> |
| | | <div class="card-panel" @click="handleSetLineChartData('shoppings')"> |
| | | <div class="card-panel-icon-wrapper icon-shopping"> |
| | | <svg-icon icon-class="shopping" class-name="card-panel-icon" /> |
| | | </div> |
| | | <div class="card-panel-description"> |
| | | <div class="card-panel-text"> |
| | | CVT下线 |
| | | </div> |
| | | <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | |
| | | |
| | | </el-row> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .top2{ |
| | | font-size: 26px; |
| | | font-weight: bold; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .panel-group { |
| | | margin-top: 18px; |
| | | |