intelligent-medicine-cabinet/mini-pro-web/src/views/replenishment/device/detail.vue

<template>
    <div class='replenishment-device-detail'>
        <div class="kitbox plr15 ptb10">
            <div class="box-flex-1 box-v-middle fs-14">
                <span>从上往下数</span>
                <div class="color-block"></div>
                <span class="ml5 fs-12">已关闭</span>
                <div class="color-block ml10 red"></div>
                <span class="ml5 fs-12">故障</span>
            </div>
            <div><van-button @click="gotoUrl('/replenishment/start/deviceDetail', {deviceId: deviceId})" type="info" size="small">点击设置药品</van-button></div>
        </div>

        <div class="list ">
            <div v-for="(item, i) in list" :key="i" class="item plr15 bt-e1e1e1 bb-e1e1e1">
                <div class="pt10">第{{i+1}}层</div>
                <div class="item-list ptb10">
                    <div v-for="(data, k) in item.list" :key="k" :class="{'pitem-full':data.cargoCapacity==data.qty, 'pitem-close': data.cargoState!=1, 'pitem-fault': data.faultState==1}" class="pitem">
                        <div :style="'height: '+ (formatRate(data)) +'%'" class="pitem-bg"></div>
                        <div class="pitem-inner">
                            <div class="kitbox ">
                                <div class="box-flex-1">{{k+1}}号位</div>
                                <div>{{data.qty}}/{{data.cargoCapacity}}</div>
                            </div>

                            <template v-if="data.shelfStatus==1">
                                <div class="ellipsis tc pt8">{{data.drugName}}</div>
                                <div class="tc pt5">￥{{data.price}}</div>
                            </template>
                            <div v-else class="ellipsis tc pt8 ">未设药品</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default{
    name: 'replenishmentDeviceDetail',
    data(){
        return {
            deviceId: this.$route.query.deviceId,
            list: []
        }
    },
    created() {
        this.findMediicinecabinetInventoryByDeviceId()
    },
    methods:{
        findMediicinecabinetInventoryByDeviceId(){
            this.$loading('加载中..')
            let p = {
                deviceId: this.deviceId
            }
            console.log('params', p)
            medicineAbinetApi
                .findMediicinecabinetInventoryByDeviceId(p)
                .then(res=>{
                    console.log('findMediicinecabinetInventoryByDeviceId', res)
                    this.$toast.clear()
                    if(res.detailModelList && res.detailModelList.length){
                        var list = _.map(res.detailModelList, v=>{
                            var key = _.keys(v)[0]
                            return {
                                index: key,
                                list: v[key],
                            }
                        })
                        list = _.sortBy(list, 'index')
                        this.list = list
                        console.log(list, this.curItem)
                    }
                })
                .catch(err=>{
                    console.error(err)
                })
        },
        formatRate(data){
            return (data.qty||0) / (data.cargoCapacity||5) * 100
        },
    },
}
</script>
<style lang='scss' scoped>
.replenishment-device-detail{
    .color-block{
        background: #ff9526;
        width: 10px;
        height: 10px;
        display: inline-block;
        margin-left: 20px;
        border-radius: 2px;
        &.red{
            background: #ff5e6c;
        }
    }
    .list{
        .item{
            margin-bottom: 10px;
            background: #fff;
            .item-list{
                overflow-y: scroll;
                width: 100%;
                display: flex;
                // ::v-deep .components-product-item{
                //     overflow: initial;
                //     width: 100px;
                // }
                .pitem{
                    width: 100px;
                    height: 80px;
                    background: rgb(238, 238, 238);
                    border-radius: 10px;
                    margin-left: 10px;
                    padding: 5px;
                    font-size: 14px;
                    position: relative;
                    &.pitem-full{
                        color: #fff;
                    }
                    &:first-child{
                        margin-left: 0;
                    }
                    .pitem-inner{
                        width: 80px;
                        position: relative;
                        z-index: 1;
                        background: transparent;
                    }
                    .pitem-bg{
                        background: #17b3ec;
                        position: absolute;
                        z-index: 0;
                        width: 100%;
                        bottom: 0;
                        left: 0;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        &.orange{
                            background: #ff9526;
                        }
                        &.red{
                             background: #ff5e6c;
                        }
                    }
                    &.pitem-close{
                        background-color: #ff9526;
                        color: #fff;
                        .pitem-bg{
                            display: none;
                        }
                    }
                    &.pitem-fault{
                        background-color: #ff5e6c;
                        color: #fff;
                        .pitem-bg{
                            display: none;
                        }
                    }
                }
            }
        }
    }
}
</style>