intelligent-medicine-cabinet/mini-pro-web/src/views/index/Index.vue

<template>
	<div class="index-wrap pt30">
    	<!-- <div class="panel plr15">
			<div class="kitbox pt15 ">
				<div class="box-flex-1 c-333 fs-16 f-bold">今日订单数量</div>
				<div class="c-666 fs-12 box-v-middle">
					<div @click="searchTypeShow=!searchTypeShow" class="drop-sel c-666 fs-12 plr10 ptb4">
						<span  class="v-middle">{{searchType}}</span>
						<van-icon class="v-middle ml4" name="arrow-down" />
						<div v-show="searchTypeShow" class="sel-body fs-12 c-666">
							<div v-for="(item, i) in options" :key="i" v-show="searchType!=item" @click.stop="searchType=item;searchTypeShow=false;search()" class="ptb6">{{item}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="c-20d7ad fs-23 pt10">
				752,600
			</div>
			<div class="c-666 fs-14 pt10 pb10">今日补货量 <span class="ml10 c-17b3ec">0</span></div>
		</div> -->

		<div class="">
			<div class="panel  sbzl">
				<div class="kitbox pt15 plr15">
					<div class="box-flex-1 c-333 fs-16 f-bold">设备总览</div>
				</div>
				<div class="pt20 pb20 plr5">
					<van-row class="">
						<van-col span="6" class="tc ">
							<div class="fs-23 c-17b3ec">{{countObj.total}}</div>
							<div class="fs-14 c-666 pt5">全部设备</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-ff9526">{{countObj.saleTotal}}</div>
							<div class="fs-14 c-666 pt5">在线设备</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-ff5e6c">{{countObj.onlineRate * 100}}%</div>
							<div class="fs-14 c-666 pt5">在线率</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-17b3ec">{{countObj.onlineTotal}}</div>
							<div class="fs-14 c-666 pt5">在售设备</div>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>

		<div class="mt10">
			<div class="panel cygn">
				<div class="kitbox pt15 plr15">
					<div class="box-flex-1 c-333 fs-16 f-bold">常用功能</div>
				</div>
				<div class="ptb10 plr5">
					<van-row class="">
						<van-col @click="gotoUrl('/order/list')" span="6" class="tc ">
							<div class="fs-23 c-17b3ec"><img src="@/assets/images/dingdanguanli.png" alt=""></div>
							<div class="fs-14 c-666 pt5">订单管理</div>
						</van-col>
						<van-col @click="gotoUrl('/device')" span="6" class="tc">
							<div class="fs-23 c-ff9526"><img src="@/assets/images/shebeiguanli.png" alt=""></div>
							<div class="fs-14 c-666 pt5">设备管理</div>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default {
	name: "index",
	components: {
		
  	},
  	data() {
    	return {
			searchTypeShow: false,
            searchType: "今日",
			options: ['今日', '7天内', '30天内'],
			countObj: {
				"total": 0,							//总的在线数
				"saleTotal": 0,						//在售数
				"onlineRate": 0,					//在线率
				"onlineTotal": 0						//在线设备数
			}
    	}
  	},
	created(){
		this.countall()
	},
  	methods: {
		countall(){
			medicineAbinetApi
				.countAllDevice({
					userId: this.user.id
				})
				.then(res=>{
					console.log('countall', res)
					this.countObj = _.assign(this.countObj, res.obj) 
				})
				.catch(err=>{
					console.error(err)
				})
		}
    },
}
</script>
<style lang="scss" scoped>
.index-wrap {
	background: url('../../assets/images/index_banner.png') no-repeat;
	background-size: 100%;
	.panel{
		width: 345px;
		background-color: #ffffff;
		box-shadow: 0px 2px 10px 0px 
			rgba(0, 0, 0, 0.15);
		border-radius: 5px;
		margin: 0 auto;
		.drop-sel{
            background-color: rgba($color: #000000, $alpha: 0.05);
            border-radius: 12px;
            position: relative;
            .sel-body{
                width: 60px;
                left: 0;
                position: absolute;
                box-shadow: 2px 3px 8px 0px 
                    rgba(0, 0, 0, 0.15);
                border-radius: 11px;
                background-color: rgba($color: #ffff, $alpha: 0.8);
                text-align: center;
                padding: 10px 0;
                top: 30px;
                z-index: 1;
            }
        }
		&.sbzl{
			.van-col {
				position: relative;
				&::after{
					content: "";
					width: 1px;
					height: 41px;
					background-color: #e7e7e7;
					right: 0;
					position: absolute;
					top: 2px;
				}
				&:last-child{
					&::after{
						display: none;
					}
				}
			}
		}
		&.cygn{
			.van-col{
				padding: 10px 0;
				img{
					display: block;
					width: 40px;
					height: 40px;
					margin: 0 auto;
				}
			}
			
		}
	}
}
</style>