Merge branch 'master' of http://192.168.1.220:10080/Amoy2/intelligent-medicine-cabinet

mini-pro-web/src/api/api-medicineAbinet.js

@@ -424,7 +424,34 @@ let service = {
	// 根据用户id，查询设备在线统计
	countAllDevice: function(params) {
		return request({
			url: `${BASE}/baseDevice/countAllDevice`,
			url: `${BASE}/baseDevice/getFirstPageInfo`,
			method: "get",
			params
		});
    },
    // 根据用户id,天数，查询设备取药次数
	getmedicine: function(params) {
		return request({
			url: `${BASE}/baseDevice/getShippingTypeByUserId`,
			method: "get",
			params
		});
    },
    // 根据用户id,天数，查询设备电子处方单次数
	getprescriptions: function(params) {
		return request({
			url: `${BASE}/baseDevice/getPrescriptionStaticsByUserId`,
			method: "get",
			params
		});
    },
    // 根据用户id,天数，查询销售额
	getechartsData: function(params) {
		return request({
			url: `${BASE}/baseDevice/getDevicePriceStatisticsByUserId`,
			method: "get",
			params
		});

mini-pro-web/src/views/index/Index.vue

@@ -1,74 +1,133 @@
<template>
	<div class="index-wrap pt30">
    	<!-- <div class="panel plr15">
	<div class="index-wrap">
        <!-- <div class="home-text">首页</div> -->
        <div class="select">
            
        </div>
        <!-- 设备概况 -->
        <div class="panel  sbzl">
            <div class="kitbox pt15 plr15 box-flex-c">
                <div class="box-flex-c c-333 fs-16 f-bold">设备概况</div>
                <div class="box-flex-c c-333 f-bold fs-12">在线率：{{ overview.onlineRate }}</div>
            </div>
            <div class="box-flex-c pt10 pb20 plr15">
                <div class="Online">
                    <div class="equipment-num">{{ overview.onlineTotal }}</div>
                    <div class="equipment-text">在线设备</div>
                </div>
                <div class="total">
                    <div class="equipment-num">{{ overview.total }}</div>
                    <div class="equipment-text">运营总台数</div>
                </div>
                <div class="offline">
                    <div class="equipment-num">{{ overview.noOnlineTotal }}</div>
                    <div class="equipment-text">离线设备</div>
                </div>
            </div>
        </div>
        <!-- 运维数据 -->
        <div class="panel plr15 mt10 cygn">
			<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 class="box-flex-1 c-333 fs-16 f-bold">运维数据</div>
			</div>
			<div class="c-20d7ad fs-23 pt10">
				752,600
			<div class="pt10">
				<div class="pb20">
                    <van-row>
                    <van-col class="col col-tl" span="12">
                        <div class="operations-num">{{ maintain.addTotal }}</div>
                        <div class="operations-text"><span><img class="img" src="../../assets/images/waiting-equipment.png" alt=""></span>待补设备数</div>
                    </van-col>
                    <van-col class="col" span="12">
                        <div class="operations-num">{{ maintain.hcWaringTotalNum }}</div>
                        <div class="operations-text"><span><img class="img" src="../../assets/images/thermometer.png" alt=""></span>温湿度预警数</div>
                    </van-col>
                    <van-col class="col col-t col-bl" span="12">
                        <div class="operations-num">{{ maintain.noOnlineTotal1WithUserId }}</div>
                        <div class="operations-text"><span><img class="img" src="../../assets/images/waiting-equipment.png" alt=""></span>离线设备数</div>
                    </van-col>
                    <van-col class="col col-t" span="12">
                        <div class="operations-num">{{ maintain.noGetDrugNum }}</div>
                        <div class="operations-text"><span><img class="img" src="../../assets/images/offline-medicine.png" alt=""></span>待取药订单数</div>
                    </van-col>
                </van-row>
                </div>
			</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.onlineTotal}}</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).toFixed(0)}}%</div>
							<div class="fs-14 c-666 pt5">在线率</div>
						</van-col>
						<van-col span="6" class="tc">
							<div class="fs-23 c-17b3ec">{{countObj.saleTotal}}</div>
							<div class="fs-14 c-666 pt5">在售设备</div>
						</van-col>
					</van-row>
				</div>
		</div>
        <!-- 取药次数 -->
        <div class="panel plr15 mt10 medicine">
			<div class="kitbox pt15 box-flex-c">
				<div class="box-flex-c c-333 fs-16 f-bold">取药次数</div>
                <div class="box-flex-c c-333 fs-12 f-bold time">
                    <ul class="ul">
                        <li @click="medicineTime('1')" :class="medicineBag == '1' ? 'li-bag':''">今日</li>
                        <li @click="medicineTime('7')" :class="medicineBag == '7' ? 'li-bag':''">7日</li>
                        <li @click="medicineTime('30')" class="border-r" :class="medicineBag == '30' ? 'li-bag':''">30日</li>
                        <li @click="medicineTime('90')" class="border-r" :class="medicineBag == '90' ? 'li-bag':''">90日</li>
                        <li @click="medicineTime('全部')" :class="medicineBag == '' ? 'li-bag':''">全部</li>
                    </ul>
                </div>
			</div>
            <div class="pt24 pb19">
                <div class="medicine-b-l">
                    <div class="medicine-b-g-num">
                        {{ shippingType.total }}
                        <span>次</span>
                    </div>
                </div>
                <div class="scan">扫码取药：{{ shippingType.saomaTotal }}次</div>
                <div class="care">医保卡取药：{{ shippingType.yibaoTotal }}次</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="$router.replace({path: '/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="$router.replace({path: '/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 class="panel plr15 mt10 medicine">
			<div class="kitbox pt15 box-flex-c">
				<div class="box-flex-c c-333 fs-16 f-bold">电子处方单</div>
                <div class="box-flex-c c-333 fs-12 f-bold time">
                    <ul class="ul">
                        <li @click="prescriptionTime('1')" :class="prescriptionBag == '1' ? 'li-bag':''">今日</li>
                        <li @click="prescriptionTime('7')" :class="prescriptionBag == '7' ? 'li-bag':''">7日</li>
                        <li @click="prescriptionTime('30')" class="border-r" :class="prescriptionBag == '30' ? 'li-bag':''">30日</li>
                        <li @click="prescriptionTime('90')" class="border-r" :class="prescriptionBag == '90' ? 'li-bag':''">90日</li>
                        <li @click="prescriptionTime('全部')" :class="prescriptionBag == '' ? 'li-bag':''">全部</li>
                    </ul>
                </div>
			</div>
		</div> -->
            <div class="pt24 pb19">
                <div class="medicine-b-l prescription">
                    <div class="medicine-b-g-num">
                        {{ prescriptionStatics.total }}
                        <span>次</span>
                    </div>
                </div>
                <div class="prescription-num">药品数量：{{ prescriptionStatics.drugTotal }}件</div>
            </div>
		</div>
        <!-- 销售额 -->
        <div class="panel plr15 mt10 medicine">
			<div class="kitbox pt15 box-flex-c">
				<div class="box-flex-c c-333 fs-16 f-bold">销售额</div>
                <div class="box-flex-c c-333 fs-12 f-bold time">
                    <ul class="ul">
                        <li @click="salesTime('1')" :class="salesBag == '1' ? 'li-bag':''">今日</li>
                        <li @click="salesTime('7')" :class="salesBag == '7' ? 'li-bag':''">7日</li>
                        <li @click="salesTime('30')" class="border-r" :class="salesBag == '30' ? 'li-bag':''">30日</li>
                        <li @click="salesTime('90')" class="border-r" :class="salesBag == '90' ? 'li-bag':''">90日</li>
                        <li @click="salesTime('全部')" :class="salesBag == '' ? 'li-bag':''">全部</li>
                    </ul>
                </div>
			</div>
            <div class="pt20 pb20 sales-data">
                <div>¥{{ amount }}</div>
                <div style="display:none;">月同比:<span>0.40%</span></div>
                <div style="display:none;">日环比:<span>5.00%</span></div>
            </div>
            <div id="sales-chart" class="sales-chart"></div>
		</div>
        <div class="home-bottom"></div>
	</div>
</template>
<script>
import * as echarts from 'echarts';
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default {
	name: "index",
@@ -77,98 +136,197 @@ export default {
  	},
  	data() {
    	return {
			searchTypeShow: false,
            searchType: "今日",
			options: ['今日', '7天内', '30天内'],
			countObj: {
				"total": 0,							//总的在线数
				"saleTotal": 0,						//在售数
				"onlineRate": 0,					//在线率
				"onlineTotal": 0,						//在线设备数
				"outCount": 0 						//缺药设备数
			}
            medicineBag:'1',
            prescriptionBag:'1',
            salesBag:'1',
            count:[],
            date:[],
            amount:'- -',
			overview:{
                total:'- -', // 总台数
                noOnlineTotal:'- -', // 不在线数
                onlineRate:'- -', // 在线率
                onlineTotal:'- -', // 在线台数
            },
            maintain:{
                hcWaringTotalNum:'- -', // 温湿度异常警告
                noOnlineTotal1WithUserId:'- -', // 不在线数
                noGetDrugNum:'- -', // 待取药订单数
                addTotal:'- -', // 缺货设备数
            },
            shippingType:{
                saomaTotal:'- -',
                total:'- -',
                yibaoTotal:'- -'
            },
            prescriptionStatics:{
                total:'- -',
                drugTotal:'- -'
            }
            
    	}
  	},
	created(){
		this.countall()
	},
		this.countall();
		this.medicine();
        this.prescriptions();
    },
    mounted(){
        this.echartsData();
    },
  	methods: {
        // 设备概况 运营数据
		countall(){
			medicineAbinetApi
				.countAllDevice({
					userId: this.user.id
				})
				.then(res=>{
					console.log('countall', res)
					this.countObj = _.assign(this.countObj, res.obj) 
                    console.log('countall', res);
                    this.overview = res.obj.overview;
                    this.maintain = res.obj.maintain;
				})
				.catch(err=>{
					console.error(err)
				})
        },
        // 取药次数
        medicine(){
            medicineAbinetApi
				.getmedicine({
                    userId: this.user.id,
                    day:this.medicineBag
				})
				.then(res=>{
                    console.log('medicine', res)
                    this.shippingType = res.obj;
				})
				.catch(err=>{
					console.error(err)
				})
        },
        // 电子处方单
        prescriptions(){
            medicineAbinetApi
				.getprescriptions({
                    userId: this.user.id,
                    day:this.prescriptionBag
				})
				.then(res=>{
                    // console.log('prescriptions', res)
                    this.prescriptionStatics = res.obj;
				})
				.catch(err=>{
					console.error(err)
				})
		}
        },
        // 取药时间查询
        medicineTime(val){
            if(val == '全部'){
                this.medicineBag = '';
                this.medicine();
                console.log('全部')
            }else{
                this.medicineBag = val;
                this.medicine();
                console.log('1,3,7,9')
            }
            
        },
        // 电子处方单查询
        prescriptionTime(val){
            if(val == '全部'){
                this.prescriptionBag = '';
                this.prescriptions();
                console.log('全部')
            }else{
                this.prescriptionBag = val;
                this.prescriptions();
                console.log('1,3,7,9')
            }
        },
        // 销售额查询
        salesTime(val){
            if(val == '全部'){
                this.salesBag = '';
                console.log('全部')
            }else{
                this.salesBag = val;
                console.log('1,3,7,9')
            }
            this.echartsData();
        },
        echartsData(){
            medicineAbinetApi
                .getechartsData({
                    userId: this.user.id,
                    day:this.salesBag
                })
                .then(res=>{
                    console.log('echartsData', res);
                    this.amount = res.obj.amount;
                    this.count = res.obj.amountdateList.map((item) =>{
                        return item.count
                    });
                    this.date = res.obj.amountdateList.map((item) =>{
                        return item.date
                    });
                    // 基于准备好的dom，初始化echarts实例
                    var myChart;
                    if (myChart != null && myChart != "" && myChart != undefined){
                        // chartDom.clear();
                        myChart.dispose();
                        // document.getElementById('sales-chart').innerHTML = '';
                    }
                    var chartDom = document.getElementById('sales-chart');
                    myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        grid:{
                            left: '3%',
                            right: '4%',
                            bottom: '2%',
                            top:'5%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.date,
                            axisTick:{
                                show:false, // X轴刻度隐藏
                            },
                            axisLabel:{
                                fontSize:'8', // X轴文字字体大小
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                            data: this.count,
                            type: 'line'
                            }
                        ]
                    };
                    // if (myChart != null && myChart != "" && myChart != undefined) {
                    //     myChart.dispose();
                    // }
                    option && myChart.setOption(option);
                })
                .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;
				}
			}
			
		}
	}
}
@import "./scss/index.scss";
</style>

mini-pro-web/src/views/index/scss/index.scss

@@ -0,0 +1,254 @@
.index-wrap {
	background: url('../../assets/images/index_banner.png') no-repeat;
    background-size: 100%;
    padding-top:20px;
    .home-text{
        width:375px;
        height:44px;
        line-height:44px;
        text-align:center;
        color:#fff;
    }
    .select{
        padding:0 5px;
        height:30px; 
    }
	.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;
            }
        }
        .box-flex-c{
            display: flex;
            justify-content:space-between;
        }
		&.sbzl{
            .Online{
                width:80px;
                height:80px;
                background:#2cc3f9;
                border-radius:5px;
            }
            .total{
                width:124px;
                height:80px;
                background:#42e5d4;
                border-radius:5px;
            }
            .offline{
                width:80px;
                height:80px;
                background:#fc87ba;
                border-radius:5px;
            }
            .equipment-num{
                width:100%;
                text-align:center;
                margin-top:20px;
                font-size:25px;
                color:#fff;
            }
            .equipment-text{
                width:100%;
                text-align:center;
                margin-top:10px;
                font-size:12px;
                color:#fff;
            }
		}
		&.cygn{
            .col{
                height:60px;
                text-align: center;
                position: relative;
                .operations-num{
                    font-size:20px;
                    color:#17b3ec;
                }
                .operations-text{
                    font-size:12px;
                    color:#666666;
                    span{
                        width:18px;
                        height:16px;
                        .img{
                            width:18px;
                            height:16px;
                            margin-right:5px;
                            position:relative;
                            top:2px;
                        }
                    }
                }
            }
            .col-t{
                padding-top:20px;
            }
            .col-tl::after{
                content:"";
                position:absolute;
                top:0;
                right:0;
                display:inline-block;
                width:1px;
                height:40px;
                background:#ccc;
            }
            .col-bl::after{
                content:"";
                position:absolute;
                top:20px;
                right:0;
                display:inline-block;
                width:1px;
                height:40px;
                background:#ccc;
            }
        }
        &.medicine{
            position:relative;
            .time{
                width:202px;
                height:28px;
                border:1px solid #ccc;
                border-top-left-radius:28px;
                border-bottom-left-radius:28px;
                border-top-right-radius:28px;
                border-bottom-right-radius:28px;
                .ul{
                    li{
                        float:left;
                        width:40px;
                        height:28px;
                        text-align:center;
                        line-height:28px;
                        color:#17b3ec;
                        cursor: pointer;
                    }
                    li:first-child{
                        border-top-left-radius:28px;
                        border-bottom-left-radius:28px;
                    }
                    li:last-child{
                        border-top-right-radius:28px;
                        border-bottom-right-radius:28px;
                    }
                    .border-r{
                        border-right:1px solid #ccc;
                    }
                    .li-bag{
                        background-color:#17b3ec;
                        color:#fff;
                    }
                }
            }
            .medicine-b-l{
                width:130px;
                height:70px;
                border-radius:5px;
                background:url("../../assets/images/quyaochishu_img.png");
                background-size: 100%;
                display:inline-block;
                position:relative;
                .medicine-b-g-num{
                    font-size:30px;
                    color:#fff;
                    position:absolute;
                    top:20px;
                    left:12px;
                    span{
                        font-size:12px;
                        position:relative;
                        left:-8px;
                    }
                }
            }
            .prescription{
                background:url("../../assets/images/chufangdan_img.png");
                background-size: 100%;
            }
            .care{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                position:absolute;
                bottom:30px;
                right:20px;
            }
            .scan{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                position:absolute;
                bottom:58px;
                right:20px;
            }
            .prescription-num{
                width:120px;
                height:20px;
                line-height:20px;
                text-align:right;
                font-size:14px;
                // background:red;
                position:absolute;
                bottom:47px;
                right:20px;
            }
            .sales-data{
                width:100%;
                height:63px;
                line-height:20px;
                // background:red;
                display: flex;
                justify-content:space-between;
                div{
                    font-size:14px;
                    color:#666666;
                }
                div:first-child{
                    font-size:20px;
                    color: #ff9600;
                }
                span{
                    color: #17b3ec;
                }
            }
            .sales-chart{
                width:100%;
                height:169px;
                padding-bottom:20px;
            }
        }
    }
    .mt10{
        margin-top:10px;
    }
    .home-bottom{
        width:100%;
        height:55px;
    }
}