<div id="app-cnc"   style="display:none;height:100%;width:100%;position:fixed;background:transparent;left:0px;top:0px;">
    <div id="app-cnc-inner"  style="height:70%;width:70%;position:absolute;top:15%;left:15%;">
        <?php require('app.header2.php'); ?>
        <div class="body  padlf10 " style="flex-wrap:wrap;align-content:
            flex-start;padding-left:5px;padding-right:5px;">
            <div class="row" style="height:20%;padding:5px;">
                <div class="col4 vflex vflex-space-around " style="padding:5px;">
                    <div class="h100p w100p vflex vflex-space-around " style="padding:10px;">
                        <div class="hflex " style="font-size:30px;">{{machineId}}</div>
                        <div class="hflex " style="font-size:30px;color:#48a1fd">{{cncStatusx}}</div>
                    </div>
                </div>
                <div class="col4" style="padding:5px;">
                    <div class="h100p w100p vflex vflex-space-around "
                        style="background:#105b82;padding:10px;padding-left:20px;">
                        <div class="hflex " style="font-size:30px;color:#a1bfcd">程序信息</div>
                        <div class="hflex " style="font-size:40px;color:#a1bfcd">{{mainPrgmName}}</div>
                    </div>
                </div>
                <div class="col4 " style="padding:5px;">
                    <div class="h100p w100p vflex vflex-space-around"
                        style="background:#105b82;padding:10px;padding-left:20px;">
                        <div class="hflex " style="font-size:30px;color:#a1bfcd">刀号</div>
                        <div class="hflex " style="font-size:40px;color:#a1bfcd">{{toolNumber}}</div>
                    </div>
                </div>
                <div class="col4 " style="padding:5px;">
                    <div class="h100p w100p vflex vflex-space-around"
                        style="background:#105b82;padding:10px;padding-left:20px;">
                        <div class="hflex " style="font-size:30px;color:#a1bfcd">负载</div>
                        <div class="hflex " style="font-size:40px;color:#a1bfcd">{{spindleLoad}}</div>
                    </div>
                </div>
                <div class="col4 " style="padding:5px;">
                    <div class="h100p w100p vflex vflex-space-around"
                        style="background:#105b82;padding:10px;padding-left:20px;">
                        <div class="hflex " style="font-size:30px;color:#a1bfcd">进给</div>
                        <div class="hflex " style="font-size:40px;color:#a1bfcd">{{actFeed}}</div>
                    </div>
                </div>
                <div class="col4 " style="padding:5px;">
                    <div class="h100p w100p vflex vflex-space-around"
                        style="background:#105b82;padding:10px;padding-left:20px;">
                        <div class="hflex " style="font-size:30px;color:#a1bfcd">转数</div>
                        <div class="hflex " style="font-size:40px;color:#a1bfcd">{{actSpindle}}</div>
                    </div>
                </div>
            </div>
            <div class="row" style="height:80%;">
                <div class="col16 h100p">
                    <div class="row" style="height:55%;">
                        <div class="col12 h100p">
                            <div id="chartFsOutput1" ref="chartFsOutput1" class="w100p h100p"></div>
                        </div>
                        <div class="col12 h100p">
                            <div id="chartFs24RunRate1" ref="chartFs24RunRate1" class="w100p h100p"></div>
                        </div>
                    </div>
                    <div class="row padlf10" style="height:45%;">
                        <div id="chartFsCnsStatus1" ref="chartFsCnsStatus1" class="w100p h100p"></div>
                    </div>
                </div>
                <div class="col8 h100p">
                    <div class="row" style="height:35%;">
                        <div class="col20-10 h100p padlf5 padtb5">
                            <div id="chartFsOverFeed1" ref="chartFsOverFeed1" style="background:#105b82;" class="w100p   h100p"></div>
                        </div>
                        <div class="col20-10 h100p padlf5 padtb5">
                            <div id="chartFsOverSpindle1" ref="chartFsOverSpindle1" style="background:#105b82;" class="w100p h100p"> </div>
                        </div>
                    </div>
                    <div class="row" style="height:65%;">
                        <div class="alarmMsgs h100p w100p">
                            <div class="title" style="height:40px">当前警报</div>
                            <div class="list " style="height:calc(100% - 80px)">
                                <el-table :data="alarmMsgs" height="100%">
                                    <el-table-column prop="alarmTime" label="时间"></el-table-column>
                                    <el-table-column prop="alarmMsg" label="预警内容"></el-table-column>
                                    <el-table-column prop="alarmActive" label="状态">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.alarmActive==0">解除</span>
                                            <span v-if="scope.row.alarmActive==1">激活</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>