设备货道故障

mini-pro-web/src/assets/styles/variables.scss

@@ -1,2 +1,2 @@
$frontColors: fff ccc aaa 111 333 999 888 666 555 b7b7b7 d7d7d7 dcdcdc '000' 'ff5e6c' '17b3ec' '12b7f5' 'ff9526' 'ff6d26'; 
$bgColors: '000' fff ccc 444 999 a4e1e1 b5b5b5 eee '20d7ad' 'f5f5f5' '17b3ec';  
$bgColors: '000' fff ccc 444 999 a4e1e1 b5b5b5 eee '20d7ad' 'f5f5f5' '17b3ec' 'ff5e6c';  

mini-pro-web/src/components/ProductItem/index.vue

@@ -1,5 +1,5 @@
<template>
    <div @click="toSet" class='components-product-item' :class="{'pitem-full':data.cargoCapacity==data.qty, 'pitem-close': data.cargoState!=1}">
    <div @click="toSet" class='components-product-item' :class="{'pitem-full':data.cargoCapacity==data.qty, 'pitem-close': data.cargoState!=1, 'pitem-fault': data.faultState==1}">
        <div :style="'height: '+ (rate) +'%'" class="pitem-bg"></div>
        <div class="pitem-inner" >
            <div class="kitbox " >
@@ -105,5 +105,12 @@ export default{
            display: none;
        }
    }
    &.pitem-fault{
        background-color: #ff5e6c;
        color: #fff;
        .pitem-bg{
            display: none;
        }
    }
}
</style>

mini-pro-web/src/views/device/cargoLane/index.vue

@@ -18,6 +18,10 @@
                    <div class='c-ff5e6c c-f16 mb5'>{{closeCount}}</div>
                    <span>禁用</span>
                </div>
                <div class="c-t-center">
                    <div class='c-ff5e6c c-f16 mb5'>{{faultCount}}</div>
                    <span>故障</span>
                </div>
            </div>
            <div class='bgc-fff p10'>
                <div class='flex f_y_c f_x_s'>
@@ -41,13 +45,13 @@
                    <div v-for='(item, j) in citem.list' :key="j">
                        <div @click="onSelect(item)" class='c-t-center w50 ptb10 mt10 bgc-fff c-border c-position-r' 
                            :class="{'mr10': (Math.ceil(number/6))!=index+1, 'active': selectList.indexOf(item)!=-1}">
                            <!-- <div>
                                <div v-if='true' class='c-20d7ad'>正常</div>
                                <div v-else class='c-ff9526'>故障</div>
                            </div> -->
                            <div>
                                <div v-if='item.faultState==1' class='c-ff5e6c'>故障</div>
                                <div v-else class='c-20d7ad'>正常</div>
                            </div>
                            <div>
                                <div v-if='item.cargoState==1' class='c-20d7ad'>已开启</div>
                                <div v-else class='c-ff5e6c'>已关闭</div>
                                <div v-else class='c-ff9526'>已关闭</div>
                            </div>
                            <!-- <div>
                                <div v-if='true' class='c-20d7ad'>售卖</div>
@@ -76,7 +80,8 @@ export default{
            curItem: [],
            selectList: [],
            openCount: 0,
            closeCount: 0
            closeCount: 0,
            faultCount: 0
        }
    },
    created() {
@@ -101,11 +106,14 @@ export default{
                    console.log('findMediicinecabinetInventoryByDeviceId', res)
                    this.$toast.clear()
                    if(res.detailModelList && res.detailModelList.length){
                        var openCount = 0, closeCount = 0
                        var openCount = 0, closeCount = 0, faultCount = 0
                        var list = _.map(res.detailModelList, v=>{
                            var key = _.keys(v)[0]
                            v[key].forEach(m => {
                                m.cargoState==1? openCount++ : closeCount++
                                if(m.faultState==1){
                                    faultCount++
                                }
                            });
                            return {
                                index: key,
@@ -114,6 +122,7 @@ export default{
                        })
                        this.openCount = openCount
                        this.closeCount = closeCount
                        this.faultCount = faultCount
                        list = _.sortBy(list, 'index')
                        this.list = list
                        this.curItem = this.list[0]
@@ -212,7 +221,7 @@ export default{
    
    .grid-4{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        // position: fixed;
        // top: 0;
        // left: 0;

mini-pro-web/src/views/device/cargoLane/setting.vue

@@ -6,11 +6,11 @@
                <span>正常</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ff9526 w60 h30' style='display:inline-block'></div></div>
                <div class='mb5'><div class='bgc-ff5e6c w60 h30' style='display:inline-block'></div></div>
                <span>故障</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ccc w60 h30' style='display:inline-block'></div></div>
                <div class='mb5'><div class='bgc-ff9526 w60 h30' style='display:inline-block'></div></div>
                <span>关闭</span>
            </div>
        </div>
@@ -25,7 +25,7 @@
                        <div @click="onSelectCol(item)" class='c-t-center w30 c-position-r item' 
                            :class='{mr10: cindex!=citem.list.length-1}'>
                            <div>{{cindex+1}}</div>
                            <div class='c-t-center'><div :class='item.cargoState==1? "c-cirlce-17b3ec" : "c-cirlce-ccc"'></div></div>
                            <div class='c-t-center'><div :class='item.faultState==1? "c-cirlce-ff5e6c" : item.cargoState==1? "c-cirlce-17b3ec" : "c-cirlce-ff9526"'></div></div>
                            <div class='c-border ptb5 item-box ellipsis_1' :class='{active: selectList.indexOf(item)!=-1, isMerge: item.state==21||item.state==20}'>{{item.state==21?"主":item.cargoCapacity}}</div>
                        </div>
                    </div>
@@ -275,6 +275,13 @@ export default{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .c-cirlce-ff9526{
        background: #ff9526;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
    }
    .c-cirlce-17b3ec{
        background: #17b3ec;
        width: 7px;
@@ -282,8 +289,8 @@ export default{
        border-radius: 50%;
        display: inline-block;
    }
    .c-cirlce-ccc{
        background: #ccc;
    .c-cirlce-ff5e6c{
        background: #ff5e6c;
        width: 7px;
        height: 7px;
        border-radius: 50%;

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

@@ -4,7 +4,9 @@
            <div class="box-flex-1 box-v-middle fs-14">
                <span>从上往下数</span>
                <div class="color-block"></div>
                <span class="ml5 fs-12">已关闭的通道</span>
                <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>
@@ -13,7 +15,7 @@
            <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}" class="pitem">
                    <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 ">
@@ -90,7 +92,9 @@ export default{
        display: inline-block;
        margin-left: 20px;
        border-radius: 2px;
        
        &.red{
            background: #ff5e6c;
        }
    }
    .list{
        .item{
@@ -144,6 +148,16 @@ export default{
                    &.pitem-close{
                        background-color: #ff9526;
                        color: #fff;
                        .pitem-bg{
                            display: none;
                        }
                    }
                    &.pitem-fault{
                        background-color: #ff5e6c;
                        color: #fff;
                        .pitem-bg{
                            display: none;
                        }
                    }
                }
            }

mini-pro-web/src/views/replenishment/start/deviceDetail.vue

@@ -35,16 +35,17 @@
                <div class="kitbox fs-12 plr10 pb5">
                    <div class="box-flex-1"> 共:{{deviceInfo.device.layer}}层</div>
                    <div class="box-flex-1 ml5">总货道:{{deviceInfo.totalCargo}}</div>
                    <div class="box-flex-1 ml5">故障:0</div>
                    <div class="box-flex-1 ml5">故障:{{faultCount || 0}}</div>
                    <div class="box-flex-1 ml5">关闭:{{deviceInfo.closedCargo || 0}}</div>
                </div>
            </div>
        </van-sticky>
        <div class="fs-14 pl15 ptb10 bgc-fff">
            <span>从上往下数</span>
            <div class="color-block"></div>
            <span class="ml5 fs-12">已关闭的通道</span>
            <span class="ml5 fs-12">已关闭</span>
            <div class="color-block ml10 red"></div>
            <span class="ml5 fs-12">故障</span>
        </div>
        <div class="kitbox">
            <div class="left-list">
@@ -76,7 +77,8 @@ export default{
            activeKey: 0,
            curItem: [],
            openCount: 0,
            closeCount: 0
            closeCount: 0,
            faultCount: 0
        }
    },
    watch:{
@@ -104,11 +106,14 @@ export default{
                    console.log('findMediicinecabinetInventoryByDeviceId', res)
                    this.$toast.clear()
                    if(res.detailModelList && res.detailModelList.length){
                        var openCount = 0, closeCount = 0
                        var openCount = 0, closeCount = 0, faultCount = 0
                        var list = _.map(res.detailModelList, v=>{
                            var key = _.keys(v)[0]
                            v[key].forEach(m => {
                                m.cargoState==1? openCount++ : closeCount++
                                if(m.faultState==1){
                                    faultCount++
                                }
                            });
                            return {
                                index: key,
@@ -117,6 +122,7 @@ export default{
                        })
                        this.openCount = openCount
                        this.closeCount = closeCount
                        this.faultCount = faultCount
                        list = _.sortBy(list, 'index')
                        this.list = list
                        this.curItem = this.list[this.activeKey]
@@ -175,7 +181,9 @@ export default{
        display: inline-block;
        margin-left: 20px;
        border-radius: 2px;
        
        &.red{
            background: #ff5e6c;
        }
    }
}
</style>