<div id="app-fullsrn" class="body  padlf10 "   style="display:none;">
    <div
        class="list hflex hflex-hstart h100p"
        style="flex-wrap:wrap;align-content:
        flex-start;padding-left:5px;padding-right:5px;">

        <div
            class="device padlf10 padtb10 hflex hflex-space-between"
            @click="showDetail(device)"
            :class="{green:device.status=='green',gray:device.status=='gray',red:device.status=='red',yellow:device.status=='yellow'}"
            v-for="(device,ix) in devices"
            style="margin:5px;width:calc(20% - 12px);height:calc(25% - 12px);border-left:solid 1px transparent;border-bottom:solid 1px transparent;"
            v-if="ix>=(devicePage-1)*20 && ix<devicePage*20">
                <div class="h100p w70p vflex vflex-space-between">
                    <div class=" row hflex hflex-space-between h70p">
                        <div class="col16 row hflex hflex-space-between
                            h100p">
                            <img :src="'static/devices/'+device.EquNo+'.png'"
                                style="width:100%;height:100%;object-fit: contain;" ></img>
                    </div>
                    <div class="col8 row hflex hflex-hend hflex-vc">
                        <span
                            style="color:rgba(255,255,255,0.3);font-size:32px;">{{device.EquNo}}</span>
                    </div>
                </div>
                <div class="vflex vflex-space-around h30p"
                    style="padding-left:10px;padding-right:10px;">
                    <div class="row hflex hflex-space-between ">
                        <div class="col24 small-size overflow-h title4">制令单：{{device.PFormMNo}}</div>
                    </div>
                    <div class="row hflex hflex-space-between ">
                        <div class="col24 small-size overflow-h title4">品号：{{device.ProNo}}</div>
                    </div>
                    <div class="row hflex hflex-space-between ">
                        <div class="col24 small-size overflow-h title4">品名：{{device.ProName}}</div>
                    </div>

                </div>

            </div>
            <div class="h100p w30p vflex vflex-space-around vflex-hend">
                <div class="circle circle-1">
                    <div class="up">
                        <img src="static/image/a.png" />
                    </div>
                    <div class="down overflow-h title3">
                        {{device.TotalNum}}
                    </div>
                </div>
                <div class="circle circle-2">
                    <div class="up">
                        <img src="static/image/b.png" />
                    </div>
                    <div class="down overflow-h title3">
                        {{device.RunRate}}
                    </div>
                </div>
                <div class="circle circle-3">
                    <div class="up">
                        <img src="static/image/c.png" />
                    </div>
                    <div class="down overflow-h title3">
                        {{device.Eff}}
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>
