<div id="body-normal" class="body  padlf10" >
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        @open="openDlg"
        width="30%" >
        <div style="width:100%;height:600px;overflow:auto">
            <el-tree :data="workcenterTree" :props="defaultProps" show-checkbox node-key="id" :default-checked-keys="checkedKeys" ref="tree" :default-expand-all="true"></el- tree>    
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button> 
            <el-button type="primary" @click="handleClose">确 定</el-button> 
        </span>                                                       
    </el-dialog>    
    <div class="row hflex hflex-hstart hflex-vstart" style="height:100%;">
        <div class="col6 vflex" style="height:100%;">
            <div class="header row" style="height:5%;">
                <div class="col24 ">
                    <span class="title">_____完工站统计_____</span>
                </div>
            </div>
            <div class="row row1">
                <div id="chart1" ref="chart1"  style="height:100%;width:100%;"></div>
            </div>
            <div class="row row2">
                <div id="chart2" ref="chart2"  style="height:100%;width:100%;"></div>
            </div>
            <div class="row row3">
                <div id="chart3" ref="chart3"  style="height:100%;width:100%;"></div> 
            </div>
        </div>
        <div class="col18"  style="height:100%;">
            <div class="header row"  style="height:5%;margin-bottom:5px;">
                <div class="col4 hflex hflex-start hflex-vend" >
                    <span class="title">_____设备列表_____</span>
                    <span class="iconfont icon-icf_full_screen" style="font-size:28px" @click="enableFullsrn"></span>
                </div>
                <div class="col3 hflex hflex-hc" >
                    <span class="title" @click="openHisDataDlg">查看历史数据</span>
                </div>
                <div class="col17 hflex hflex-space-between" >
                    <div class="hflex">
                        <div class="time-picker">
                            <span class="title">统计开始时间</span>
                            <div style="border-bottom:solid 2px white;display:inline-block;height:24px" class="title">    
                                <el-date-picker
                                    v-model="starttime"
                                    type="datetime"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd HH:mm"
                                    @change="timeChange" 
                                    >
                                </el-date-picker>
                            </div>  
                        </div>
                        <div class="time-picker">
                            <span class="title" >结束时间</span>
                            <div style="border-bottom:solid 2px white;display:inline-block;height:28px" class="title">
                            <el-date-picker
                                v-model="endtime"
                                type="datetime"
                                placeholder="选择日期"
                                format="yyyy-MM-dd HH:mm"
                                @change="timeChange" >
                            </el-date-picker>  
                            </div>                                  
                        </div>
                    </div>
                    <div class=""  @click="dialogVisible = true" style="max-width:200px;overflow:hidden;text-overflow:ellipsis; white-space: nowrap;padding-right:15px; ">
                            <span class="title">工作站：<span style="text-decoration:underline">{{wcnames_right}}</span></span>
                    </div>
                    <div><span class="title"><select  class="page title" v-model="devicePage" @change="pageChange"><option v-for="page in totalDevicesPage" :value="page">{{page}}</option></select>/{{totalDevicesPage}}</span></div>
                </div>
            </div>
            <div class="list hflex hflex-hstart "  style="flex-wrap:wrap;height:68%;align-content: flex-start;position:relative;" >
                <div class="legend hflex hflex-hstart hflex-vc" style="width:400px;height:55px;position:absolute;bottom:-55px;right:0px;">
                    <div class="padlf10">图例：</div>
                    <div class="pic-block hflex hflex-hc hflex-vc">
                        <div class="pic  hflex hflex-hc hflex-vc " style="background-color:#4280b1;height:50px;width:50px;">
                            <div class=" hflex hflex-hc hflex-vc " style="width:35px;height:35px;border-radius:17.25px;border:solid  1px white;">
                                <img src="static/image/a.png" style="width:20px;height:20px;" />
                            </div>
                        </div>
                        <div class="padlf10">产量</div>
                    </div>                  
                    <div class="pic-block hflex hflex-hc hflex-vc">
                        <div class="pic  hflex hflex-hc hflex-vc " style="background-color:#4280b1;height:50px;width:50px;">
                            <div class=" hflex hflex-hc hflex-vc " style="width:35px;height:35px;border-radius:17.25px;border:solid  1px white;">
                                <img src="static/image/b.png" style="width:20px;height:20px;" />
                            </div>
                        </div>
                        <div class="padlf10">稼动率</div>
                    </div>                     
                    <div class="pic-block hflex hflex-hc hflex-vc">
                        <div class="pic  hflex hflex-hc hflex-vc " style="background-color:#4280b1;height:50px;width:50px;">
                            <div class=" hflex hflex-hc hflex-vc " style="width:35px;height:35px;border-radius:17.25px;border:solid  1px white;">
                                <img src="static/image/c.png" style="width:10px;height:20px;" />
                            </div>
                        </div>
                        <div class="padlf10">效率</div>
                    </div>                                       
                </div>
                <div class="device padlf10 padtb10 vflex vflex-space-between" @click="changeCurDevice(ix)" :class="{green:device.status=='green',gray:device.status=='gray',red:device.status=='red',yellow:device.status=='yellow'}" v-for="(device,ix) in devices" style="width:20%;height:25%;border-left:solid 1px transparent;border-bottom:solid 1px transparent;" v-if="ix>=(devicePage-1)*20 && ix<devicePage*20"> 
                    <div class="row  hflex hflex-space-between ">
                        <div class="col12 small-size  overflow-h title3">设备号：{{device.EquNo}}</div>
                        <div class="col12 small-size  overflow-h title3" v-if="show_device_name=='show'">设备名：{{device.EquName}}</div>                            
                    </div>
                    <div class="row  hflex hflex-space-between ">
                        <div class="col12 small-size overflow-h title3">制令单：{{device.PFormMNo}}</div>
                        <div class="col12 small-size  overflow-h title3" v-if="show_prospec=='show'">规格：{{device.ProSpec}}</div>                            
                    </div>
                    <div class="row hflex hflex-space-between ">
                        <div class="col12 small-size  overflow-h title3">品号：{{device.ProNo}}</div>
                        <div class="col12 small-size  overflow-h title3">品名：{{device.ProName}}</div>
                    </div> 
                    <div class="row hflex hflex-space-between martb5" >
                        <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 class="row" style="height:27%;">
                <div class="hflex">
                    <div style="margin-right:15px;"><span class="title2">_____{{curDeviceName}}_____</span></div>
                    <div class="title2">总共{{totalDevicesNum}}台，运行{{runDevicesNum}}台，停止{{stopDevicesNum}}台，异常{{failDevicesNum}}台，断电{{blackoutDevicesNum}}台</div>
                </div>
                <div class="row">
                    <div class="col16">
                        <div id="chart4" ref="chart4" style="height:200px;"></div>
                    </div>
                    <div class="col8 vflex vflex-vc" style="font-size:18px;padding-top:20px;padding-bottom:20px;">
                        <div class="row">
                            <div class="col8 hflex hflex-hend">自动运转</div>
                            <div class="col4"></div>
                            <div class="col12 hflex hflex-space-between">
                                <div>{{autorun}}</div>
                                <div>{{autorun2}}</div>
                            </div>
                        </div>
                        <div class="row" v-if="mode=='SCADA'">
                            <div class="col8 hflex hflex-hend" >自动停止</div>
                            <div class="col4"></div>
                            <div class="col12 hflex hflex-space-between">
                                <div>{{autostop}}</div>
                                <div>{{autostop2}}</div>
                            </div>
                        </div>
                    
                        <div class="row" >
                            <div class="col8 hflex hflex-hend">准     备</div>
                            <div class="col4"></div>
                            <div class="col12 hflex hflex-space-between">
                                <div>{{prepare}}</div>
                                <div>{{prepare2}}</div>
                            </div>
                        </div>
                        <div class="row" v-if="mode=='SCADA'">
                            <div class="col8 hflex hflex-hend">报     警</div>
                            <div class="col4"></div>
                            <div class="col12 hflex hflex-space-between">
                                <div>{{warntime}}</div>
                                <div>{{warntime2}}</div>
                            </div>
                        </div>    
                        <div class="row" v-if="mode=='SCADA'">
                            <div class="col8 hflex hflex-hend">电源关闭</div>
                            <div class="col4"></div>
                            <div class="col12 hflex hflex-space-between">
                                <div>{{closetime}}</div>
                                <div>{{closetime2}}</div>                                       
                            </div>
                        </div> 
                        <div class="row" v-if="mode=='NORMAL'">
                            <div class="col8 hflex hflex-hend" >停止/关闭</div>
                            <div class="col4"></div>
                            <div class="col12 hflex hflex-space-between">
                                <div>{{autostop}}</div>
                                <div>{{autostop2}}</div>
                            </div>
                        </div>									
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 