Smart_platform_ui/src/views/ProductionManagement/index.vue

<template>
    <div class="home">
        <div id="mybox" style="display: flex;transform-origin: top left;">
            <!--左边的-->
            <div class="leftbox">
                <!--本金-->
                <div class="principalBox" style="background: #f4c179">
                    <div class="leftimgbox"><img src="../../assets/produceImg/qianbao.png" alt=""></div>
                    <div class="BoldText">{{TotalMoney}}元</div>
                </div>
                <!--固定成本-->
                <div class="principalBox" style="justify-content: center;background: #d5f593">
                    <div class="CostTextLeft">固定成本：</div>
                    <div class="CostTextRight">{{FixedExpenses}}</div>
                </div>
                <!--时间-->
                <div class="principalBox" style="background: #c5fbfe">
                    <div style="display: flex;align-items: center;margin-right: 18px">
                        <div class="leftimgbox">
                            <img src="../../assets/produceImg/shijian.png" alt="">
                        </div>
                        <span>{{ DigitalWeekfun(CurrentDays) }}</span>
                    </div>
                    <div class="CostTextRight">{{formatdate}}</div>
                </div>
                <!--下面的员工-->
                <div class="PersonnelResources">
                    <div class="renlitext">人力资源部</div>
                    <!--深蓝色-->
                    <div class="staffBox">
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{DarkBlueStaff.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/DarkBlue.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="DarkBlueStaff.postName"
                                           placeholder="请选择" size="mini"
                                           >
                                    <el-option
                                        v-for="item in DarkBlueOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <!--绿色-->
                    <div class="staffBox staffBoxflex">
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{GreenStaff1.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/Green.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="GreenStaff1.postName" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in GreenOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{GreenStaff2.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/Green.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="GreenStaff2.postName" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in GreenOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <!--褐色-->
                    <div class="staffBox">
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{BrownStaff.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/Brown.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="BrownStaff.postName" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in BrownOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <!--蓝色-->
                    <div class="staffBox staffBoxflex">
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{BlueStaff1.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/Blue.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="BlueStaff1.postName" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in BlueOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{BlueStaff2.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/Blue.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="BlueStaff2.postName" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in BlueOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <!--紫色-->
                    <div class="staffBox staffBoxflex">
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{PurpleStaff1.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/Purple.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="PurpleStaff1.postName" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in PurpleOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="staffBoxren">
                            <span class="staffBoxtext">{{PurpleStaff2.postName}}</span>
                            <div class="staffBox-img"><img style="width: 100%;" src="../../assets/produceImg/Purple.jpeg" alt=""></div>
                            <div class="xialawz">
                                <el-select v-model="PurpleStaff2.postName" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in PurpleOptionalPost"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
                <!--倍速播放-->
                <div class="MultiplyPlaybackBox">
                    <div class="speedbox" @click="jiakuai">+</div>
                    <div style="font-size: 14px">速度{{DoubleSpeed}}</div>
                    <div class="speedbox" @click="jianman">-</div>
                </div>
                <!--开始-->
                <div class="StartButton"
                     :style="timerType?'background: #e5b972':'background: #4b6767'"
                     @click="StartButtonfun">{{timerType?'暂停':'开始'}}</div>
            </div>
            <!--右边的-->
            <div class="rightbox">
                <div class="flowChartBox">
                    <!--卖出-->
                    <div class="PositionlineBox">
                        <div class="postBox" style="background: #dfa056">
                            <div class="postBoxLeft">
                                <div>tu</div>
                                <div>P1</div>
                            </div>
                            <div class="postBoxRight">
                                <div>需求：{{demand1.TotalProduction}}</div>
                                <div>交付：{{demand1.produced}}</div>
                            </div>
                        </div>
                        <div class="postBox"></div>
                        <div class="postBox"></div>
                        <div class="postBox" style="background: #dfa056">
                            <div class="postBoxLeft">
                                <div>tu</div>
                                <div>P2</div>
                            </div>
                            <div class="postBoxRight">
                                <div>需求：{{demand2.TotalProduction}}</div>
                                <div>交付：{{demand2.produced}}</div>
                            </div>
                        </div>
                        <div class="postBox"></div>
                        <div class="postBox" style="background: #dfa056">
                            <div class="postBoxLeft">
                                <div>tu</div>
                                <div>P3</div>
                            </div>
                            <div class="postBoxRight">
                                <div>需求：{{demand3.TotalProduction}}</div>
                                <div>交付：{{demand3.produced}}</div>
                            </div>
                        </div>
                    </div>
                    <!--9行-->
                    <div class="PositionlineBox">
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{A9Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ A9Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">A9</div>
                                    <div class="limit" @click="xianchanfun('A9')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{A9Obj.date}}分</div>
                                    <div>准备：{{A9Obj.PreparationTime}}分</div>
                                    <div>限产：{{A9Obj.ProductionRestriction?A9Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{D9Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ D9Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">D9</div>
                                    <div class="limit" @click="xianchanfun('D9')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{D9Obj.date}}分</div>
                                    <div>准备：{{D9Obj.PreparationTime}}分</div>
                                    <div>限产：{{D9Obj.ProductionRestriction?D9Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{F9Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ F9Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">F9</div>
                                    <div class="limit" @click="xianchanfun('F9')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{F9Obj.date}}分</div>
                                    <div>准备：{{F9Obj.PreparationTime}}分</div>
                                    <div>限产：{{F9Obj.ProductionRestriction?F9Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--7行-->
                    <div class="PositionlineBox">
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{A7Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ A7Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">A7</div>
                                    <div class="limit" @click="xianchanfun('A7')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{A7Obj.date}}分</div>
                                    <div>准备：{{A7Obj.PreparationTime}}分</div>
                                    <div>限产：{{A7Obj.ProductionRestriction?A7Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{D7Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ D7Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">D7</div>
                                    <div class="limit" @click="xianchanfun('D7')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{D7Obj.date}}分</div>
                                    <div>准备：{{D7Obj.PreparationTime}}分</div>
                                    <div>限产：{{D7Obj.ProductionRestriction?D7Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{F7Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ F7Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">F7</div>
                                    <div class="limit" @click="xianchanfun('F7')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{F7Obj.date}}分</div>
                                    <div>准备：{{F7Obj.PreparationTime}}分</div>
                                    <div>限产：{{F7Obj.ProductionRestriction?F7Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--6行-->
                    <div class="PositionlineBox">
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{A6Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ A6Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">A6</div>
                                    <div class="limit" @click="xianchanfun('A6')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{A6Obj.date}}分</div>
                                    <div>准备：{{A6Obj.PreparationTime}}分</div>
                                    <div>限产：{{A6Obj.ProductionRestriction?A6Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <!--<div id="sizeid" style="width: 100%;">-->
                            <!--    <canvas id="canvasIdC6"></canvas>-->
                            <!--</div>-->
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                    </div>
                    <!--5行-->
                    <div class="PositionlineBox">
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{A5Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ A5Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">A5</div>
                                    <div class="limit" @click="xianchanfun('A5')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{A5Obj.date}}分</div>
                                    <div>准备：{{A5Obj.PreparationTime}}分</div>
                                    <div>限产：{{A5Obj.ProductionRestriction?A5Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{C5Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ C5Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">C5</div>
                                    <div class="limit" @click="xianchanfun('C5')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{C5Obj.date}}分</div>
                                    <div>准备：{{C5Obj.PreparationTime}}分</div>
                                    <div>限产：{{C5Obj.ProductionRestriction?C5Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{E5Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ E5Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">E5</div>
                                    <div class="limit" @click="xianchanfun('E5')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{E5Obj.date}}分</div>
                                    <div>准备：{{E5Obj.PreparationTime}}分</div>
                                    <div>限产：{{E5Obj.ProductionRestriction?E5Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{F5Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ F5Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">F5</div>
                                    <div class="limit" @click="xianchanfun('F5')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{F5Obj.date}}分</div>
                                    <div>准备：{{F5Obj.PreparationTime}}分</div>
                                    <div>限产：{{F5Obj.ProductionRestriction?F5Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--4行-->
                    <div class="PositionlineBox">
                        <div class="stationBox">
                            <div style="height: 60px;width: 150px"></div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                    </div>
                    <!--3行-->
                    <div class="PositionlineBox">
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{B3Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ B3Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">B3</div>
                                    <div class="limit" @click="xianchanfun('B3')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{B3Obj.date}}分</div>
                                    <div>准备：{{B3Obj.PreparationTime}}分</div>
                                    <div>限产：{{B3Obj.ProductionRestriction?B3Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{F3Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ F3Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">F3</div>
                                    <div class="limit" @click="xianchanfun('F3')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{F3Obj.date}}分</div>
                                    <div>准备：{{F3Obj.PreparationTime}}分</div>
                                    <div>限产：{{F3Obj.ProductionRestriction?F3Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--2行-->
                    <div class="PositionlineBox">
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{E2Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ E2Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">E2</div>
                                    <div class="limit" @click="xianchanfun('E2')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{E2Obj.date}}分</div>
                                    <div>准备：{{E2Obj.PreparationTime}}分</div>
                                    <div>限产：{{E2Obj.ProductionRestriction?E2Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{F2Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ F2Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">F2</div>
                                    <div class="limit" @click="xianchanfun('F2')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{F2Obj.date}}分</div>
                                    <div>准备：{{F2Obj.PreparationTime}}分</div>
                                    <div>限产：{{F2Obj.ProductionRestriction?F2Obj.LimitedProductionQuantity:'无限'}}分</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--1行-->
                    <div class="PositionlineBox">
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{A1Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ A1Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">A1</div>
                                    <div class="limit" @click="xianchanfun('A1')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{A1Obj.date}}分</div>
                                    <div>准备：{{A1Obj.PreparationTime}}分</div>
                                    <div>限产：{{A1Obj.ProductionRestriction?A1Obj.LimitedProductionQuantity:'无限'}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{C1Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ C1Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">C1</div>
                                    <div class="limit" @click="xianchanfun('C1')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{C1Obj.date}}分</div>
                                    <div>准备：{{C1Obj.PreparationTime}}分</div>
                                    <div>限产：{{C1Obj.ProductionRestriction?C1Obj.LimitedProductionQuantity:'无限'}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox"></div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{E1Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ E1Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">E1</div>
                                    <div class="limit" @click="xianchanfun('E1')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{E1Obj.date}}分</div>
                                    <div>准备：{{E1Obj.PreparationTime}}分</div>
                                    <div>限产：{{E1Obj.ProductionRestriction?E1Obj.LimitedProductionQuantity:'无限'}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="stationBox">
                            <div class="PositionInventory">
                                <div>图表</div>
                                <div>库存：{{F1Obj.inventory}}</div>
                            </div>
                            <div class="JobInformation" :style="'background:'+ F1Obj.color">
                                <div class="JobInformation-left">
                                    <div class="postTitle">F1</div>
                                    <div class="limit" @click="xianchanfun('F1')">限</div>
                                </div>
                                <div class="JobInformation-right">
                                    <div>生产：{{F1Obj.date}}分</div>
                                    <div>准备：{{F1Obj.PreparationTime}}分</div>
                                    <div>限产：{{F1Obj.ProductionRestriction?F1Obj.LimitedProductionQuantity:'无限'}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--原材料-->
                    <div class="rawmaterialBox">
                        <div class="procurebox" style="border: 1px solid #bfbfbf;" @click="rawMaterialTruefun('A1')">
                            <div class="procureboxIocn">图表</div>
                            <span>R1采购:{{A1Obj.RawMaterialNumber}}</span>
                        </div>
                        <div class="procurebox"></div>
                        <div class="procurebox" style="border: 1px solid #bfbfbf;" @click="rawMaterialTruefun('C1')">
                            <div class="procureboxIocn">图表</div>
                            <span>R2采购:{{C1Obj.RawMaterialNumber}}</span>
                        </div>
                        <div class="procurebox"></div>
                        <div class="procurebox" style="border: 1px solid #bfbfbf;" @click="rawMaterialTruefun('E1')">
                            <div class="procureboxIocn">图表</div>
                            <span>R3采购:{{E1Obj.RawMaterialNumber}}</span>
                        </div>
                        <div class="procurebox" style="border: 1px solid #bfbfbf;" @click="rawMaterialTruefun('F1')">
                            <div class="procureboxIocn">图表</div>
                            <span>R4采购:{{F1Obj.RawMaterialNumber}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div>
            <!--<div style="position: fixed;bottom: 20%">-->
            <!--    <div @click="kaishi">开始</div>-->
            <!--    <div @click="stopfun">暂停</div>-->
            <!--    <div @click="jiakuai">时间倍速加快{{DoubleSpeed}}</div>-->
            <!--    <div @click="jianman">时间倍速减{{DoubleSpeed}}</div>-->
            <!--    <div>{{formatdate}}</div>-->
            <!--    <div>当前天数{{CurrentDays}}</div>-->
            <!--    <div>在跑时间：{{totalTime}}</div>-->
            <!--    <div>花费原材料的钱{{rawMaterialSpendCash}}</div>-->
            <!--    <div>现金：{{TotalMoney}}</div>-->
            <!--</div>-->
            <!--<div style="display: flex;width: 90%;margin: 0 auto">-->
            <!--    <div class="leftbox">-->
            <!--        <div style="width: 50px;height: 50px;background: blue;color: #fff">-->
            <!--            <SelectOption :OptionalPost="DarkBlueOptionalPost" @DropDownfun="DropDownfun($event,'深蓝色')">-->
            <!--                {{DarkBlueStaff.postName}}-->
            <!--            </SelectOption>-->
            <!--            <div>{{EmployeeStatusfun(DarkBlueStaff.currentState)}}</div>-->
            <!--        </div>-->
            <!--        <div style="display: flex;">-->
            <!--            <div style="width: 50px;height: 50px;background: #7efc26;color: #000">-->
            <!--                <SelectOption :OptionalPost="GreenOptionalPost" @DropDownfun="DropDownfun($event,'绿色',GreenStaff2,GreenStaff1)">-->
            <!--                    {{GreenStaff1.postName}}-->
            <!--                </SelectOption>-->
            <!--                <div>{{EmployeeStatusfun(GreenStaff1.currentState)}}</div>-->
            <!--            </div>-->
            <!--            <div style="width: 50px;height: 50px;background: #7efc26;color: #000">-->
            <!--                <SelectOption :OptionalPost="GreenOptionalPost" @DropDownfun="DropDownfun($event,'绿色',GreenStaff1,GreenStaff2)">-->
            <!--                    {{GreenStaff2.postName}}-->
            <!--                </SelectOption>-->
            <!--                <div>{{EmployeeStatusfun(GreenStaff2.currentState)}}</div>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--        <div style="width: 50px;height: 50px;background: #a87718;color: #000">-->
            <!--            <SelectOption :OptionalPost="BrownOptionalPost" @DropDownfun="DropDownfun($event,'褐色')">-->
            <!--                {{BrownStaff.postName}}-->
            <!--            </SelectOption>-->
            <!--            <div>{{EmployeeStatusfun(BrownStaff.currentState)}}</div>-->
            <!--        </div>-->
            <!--        <div style="display: flex">-->
            <!--            <div style="width: 50px;height: 50px;background: #7efefe;color: #000">-->
            <!--                <SelectOption :OptionalPost="BlueOptionalPost" @DropDownfun="DropDownfun($event,'蓝色',BlueStaff2,BlueStaff1)">-->
            <!--                    {{BlueStaff1.postName}}-->
            <!--                </SelectOption>-->
            <!--                <div>{{EmployeeStatusfun(BlueStaff1.currentState)}}</div>-->
            <!--            </div>-->
            <!--            <div style="width: 50px;height: 50px;background: #7efefe;color: #000">-->
            <!--                <SelectOption :OptionalPost="BlueOptionalPost" @DropDownfun="DropDownfun($event,'蓝色',BlueStaff1,BlueStaff2)">-->
            <!--                    {{BlueStaff2.postName}}-->
            <!--                </SelectOption>-->
            <!--                <div>{{EmployeeStatusfun(BlueStaff2.currentState)}}</div>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--        <div style="display: flex">-->
            <!--            <div style="width: 50px;height: 50px;background: #dc23fc;color: #000">-->
            <!--                <SelectOption :OptionalPost="PurpleOptionalPost" @DropDownfun="DropDownfun($event,'紫色',PurpleStaff2,PurpleStaff1)">-->
            <!--                    {{PurpleStaff1.postName}}-->
            <!--                </SelectOption>-->
            <!--                <div>{{EmployeeStatusfun(PurpleStaff1.currentState)}}</div>-->
            <!--            </div>-->
            <!--            <div style="width: 50px;height: 50px;background: #dc23fc;color: #000">-->
            <!--                <SelectOption :OptionalPost="PurpleOptionalPost" @DropDownfun="DropDownfun($event,'紫色',PurpleStaff1,PurpleStaff2)">-->
            <!--                    {{PurpleStaff2.postName}}-->
            <!--                </SelectOption>-->
            <!--                <div>{{EmployeeStatusfun(PurpleStaff2.currentState)}}</div>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->

            <!--    <div class="rightbox">-->
            <!--        &lt;!&ndash;10&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;">需求</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div>需要数量{{demand1.TotalProduction}}</div>-->
            <!--                <div>生产数量{{demand1.produced}}</div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div>需要数量{{demand2.TotalProduction}}</div>-->
            <!--                <div>生产数量{{demand2.produced}}</div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div>需要数量{{demand3.TotalProduction}}</div>-->
            <!--                <div>生产数量{{demand3.produced}}</div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;9&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%">9</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ A9Obj.color" @click="xianchanfun('A9')">-->
            <!--                    <div>A9</div>-->
            <!--                    <div>是否限产{{A9Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{A9Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{A9Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{A9Obj.date}}</div>-->
            <!--                    <div>卖出的价格{{A9Obj.SellingPrice}}</div>-->
            <!--                    <div>准备时间{{A9Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{A9Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{A9Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ D9Obj.color" @click="xianchanfun('D9')">-->
            <!--                    <div>D9</div>-->
            <!--                    <div>是否限产{{D9Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{D9Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{D9Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{D9Obj.date}}</div>-->
            <!--                    <div>卖出的价格{{D9Obj.SellingPrice}}</div>-->
            <!--                    <div>准备时间{{D9Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{D9Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{D9Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ F9Obj.color" @click="xianchanfun('F9')">-->
            <!--                    <div>F9</div>-->
            <!--                    <div>是否限产{{F9Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{F9Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{F9Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{F9Obj.date}}</div>-->
            <!--                    <div>卖出的价格{{F9Obj.SellingPrice}}</div>-->
            <!--                    <div>准备时间{{F9Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{F9Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{F9Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;8&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%;min-height: 60px;">8</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdA8"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdD8"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdF8"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;7&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%">7</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ A7Obj.color" @click="xianchanfun('A7')">-->
            <!--                    <div>A7</div>-->
            <!--                    <div>是否限产{{A7Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{A7Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{A7Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{A7Obj.date}}</div>-->
            <!--                    <div>准备时间{{A7Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{A7Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{A7Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ D7Obj.color" @click="xianchanfun('D7')">-->
            <!--                    <div>D7</div>-->
            <!--                    <div>是否限产{{D7Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{D7Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{D7Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{D7Obj.date}}</div>-->
            <!--                    <div>准备时间{{D7Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{D7Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{D7Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ F7Obj.color" @click="xianchanfun('F7')">-->
            <!--                    <div>F7</div>-->
            <!--                    <div>是否限产{{F7Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{F7Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{F7Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{F7Obj.date}}</div>-->
            <!--                    <div>准备时间{{F7Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{F7Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{F7Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;6&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%">6</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ A6Obj.color" @click="xianchanfun('A6')">-->
            <!--                    <div>A6</div>-->
            <!--                    <div>是否限产{{A6Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{A6Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{A6Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{A6Obj.date}}</div>-->
            <!--                    <div>准备时间{{A6Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{A6Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{A6Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdC6"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdE6"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdF6"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;5&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%">5</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ A5Obj.color" @click="xianchanfun('A5')">-->
            <!--                    <div>A5</div>-->
            <!--                    <div>是否限产{{A5Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{A5Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{A5Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{A5Obj.date}}</div>-->
            <!--                    <div>准备时间{{A5Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{A5Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{A5Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ C5Obj.color" @click="xianchanfun('C5')">-->
            <!--                    <div>C5</div>-->
            <!--                    <div>是否限产{{C5Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{C5Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{C5Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{C5Obj.date}}</div>-->
            <!--                    <div>准备时间{{C5Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{C5Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{C5Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ E5Obj.color" @click="xianchanfun('E5')">-->
            <!--                    <div>E5</div>-->
            <!--                    <div>是否限产{{E5Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{E5Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{E5Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{E5Obj.date}}</div>-->
            <!--                    <div>准备时间{{E5Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{E5Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{E5Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ F5Obj.color" @click="xianchanfun('F5')">-->
            <!--                    <div>F5</div>-->
            <!--                    <div>是否限产{{F5Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{F5Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{F5Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{F5Obj.date}}</div>-->
            <!--                    <div>准备时间{{F5Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{F5Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{F5Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;4&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%;min-height: 60px;">4</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdA4"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdC4"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdE4"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdF4"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;3&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%">3</div></el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ B3Obj.color" @click="xianchanfun('B3')">-->
            <!--                    <div>B3</div>-->
            <!--                    <div>是否限产{{B3Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{B3Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{B3Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{B3Obj.date}}</div>-->
            <!--                    <div>准备时间{{B3Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{B3Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{B3Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdE3"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ F3Obj.color" @click="xianchanfun('F3')">-->
            <!--                    <div>F3</div>-->
            <!--                    <div>是否限产{{F3Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{F3Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{F3Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{F3Obj.date}}</div>-->
            <!--                    <div>准备时间{{F3Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{F3Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{F3Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;2&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%">2</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdA2"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div id="sizeid" style="width: 100%;">-->
            <!--                    <canvas id="canvasIdC2"></canvas>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ E2Obj.color" @click="xianchanfun('E2')">-->
            <!--                    <div>E2</div>-->
            <!--                    <div>是否限产{{E2Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{E2Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{E2Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{E2Obj.date}}</div>-->
            <!--                    <div>准备时间{{E2Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{E2Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{E2Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ F2Obj.color"  @click="xianchanfun('F2')">-->
            <!--                    <div>F2</div>-->
            <!--                    <div>是否限产{{F2Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{F2Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{F2Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{F2Obj.date}}</div>-->
            <!--                    <div>准备时间{{F2Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{F2Obj.RunningTime}}</div>-->
            <!--                    <div>单价{{F2Obj.unitPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;1&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="display: flex;align-items: center;height: 100%">1</div></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ A1Obj.color" @click="xianchanfun('A1')">-->
            <!--                    <div>A1</div>-->
            <!--                    <div>是否限产{{A1Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{A1Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{A1Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{A1Obj.date}}</div>-->
            <!--                    <div>准备时间{{A1Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{A1Obj.RunningTime}}</div>-->
            <!--                    <div @click.stop="rawMaterialTruefun('A1')">原材料数量{{A1Obj.RawMaterialNumber}}</div>-->
            <!--                    <div>原材料价格{{A1Obj.RawMaterialPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ C1Obj.color" @click="xianchanfun('C1')">-->
            <!--                    <div>C1</div>-->
            <!--                    <div>是否限产{{C1Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{C1Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{C1Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{C1Obj.date}}</div>-->
            <!--                    <div>准备时间{{C1Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{C1Obj.RunningTime}}</div>-->
            <!--                    <div @click.stop="rawMaterialTruefun('C1')">原材料数量{{C1Obj.RawMaterialNumber}}</div>-->
            <!--                    <div>原材料价格{{C1Obj.RawMaterialPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3"></el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ E1Obj.color"  @click="xianchanfun('E1')">-->
            <!--                    <div>E1</div>-->
            <!--                    <div>是否限产{{E1Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{E1Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{E1Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{E1Obj.date}}</div>-->
            <!--                    <div>准备时间{{E1Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{E1Obj.RunningTime}}</div>-->
            <!--                    <div @click.stop="rawMaterialTruefun('E1')">原材料数量{{E1Obj.RawMaterialNumber}}</div>-->
            <!--                    <div>原材料价格{{E1Obj.RawMaterialPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--            <el-col :span="3">-->
            <!--                <div class="xiaohezi" :style="'background:'+ F1Obj.color"  @click="xianchanfun('F1')">-->
            <!--                    <div>F1</div>-->
            <!--                    <div>是否限产{{F1Obj.ProductionRestriction}}</div>-->
            <!--                    <div>限产数量{{F1Obj.LimitedProductionQuantity}}</div>-->
            <!--                    <div>库存{{F1Obj.inventory}}</div>-->
            <!--                    <div>生产时间{{F1Obj.date}}</div>-->
            <!--                    <div>准备时间{{F1Obj.PreparationTime}}</div>-->
            <!--                    <div>在跑时间{{F1Obj.RunningTime}}</div>-->
            <!--                    <div @click.stop="rawMaterialTruefun('F1')">原材料数量{{F1Obj.RawMaterialNumber}}</div>-->
            <!--                    <div>原材料价格{{F1Obj.RawMaterialPrice}}</div>-->
            <!--                </div>-->
            <!--            </el-col>-->
            <!--        </el-row>-->
            <!--        &lt;!&ndash;0&ndash;&gt;-->
            <!--        <el-row type="flex" justify="center">-->
            <!--            <el-col :span="1"><div style="text-align: center"></div></el-col>-->
            <!--            <el-col :span="3"><div style="text-align: center">A</div></el-col>-->
            <!--            <el-col :span="3"><div style="text-align: center">B</div></el-col>-->
            <!--            <el-col :span="3"><div style="text-align: center">C</div></el-col>-->
            <!--            <el-col :span="3"><div style="text-align: center">D</div></el-col>-->
            <!--            <el-col :span="3"><div style="text-align: center">E</div></el-col>-->
            <!--            <el-col :span="3"><div style="text-align: center">F</div></el-col>-->
            <!--        </el-row>-->

            <!--    </div>-->
            <!--</div>-->
        </div>



        <!--购买原材料的弹窗-->
        <el-dialog
            :title="StagingName + '原材料购买'"
            :visible.sync="rawMaterialDialog"
            width="40%"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="rawMaterialBefore">
            <div>
                <el-input v-model="StagingNumber" placeholder="请输入购买数量"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="rawMaterialBefore">取 消</el-button>
            <el-button type="primary" @click="PopUpPurchasefun(StagingName)">确 定</el-button>
          </span>
        </el-dialog>

        <!--限产弹窗-->
        <el-dialog
            :title="StagingName + '限产'"
            :visible.sync="limitDialog"
            width="40%"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="LimitBefore">
            <div>
                <el-input v-model="xianchanInput" placeholder="请输入限产数量"></el-input>
            </div>
            <div style="margin-top: 30px;">
                <el-button type="success" @click="Cancellationlimitatio(StagingName)">取消限产状态</el-button>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="LimitBefore">取 消</el-button>
            <el-button type="primary" @click="LimtDialogfun(StagingName)">确 定</el-button>
          </span>
        </el-dialog>

        <!--结算弹窗-->
        <el-dialog
            title="提示"
            :visible.sync="settlementDialog"
            width="50%">
            <div>
                <div>初始金额:10000</div>
                <div>剩余金额:{{TotalMoney}}</div>
                <div>购买原料花费的总价钱:{{rawMaterialSpendCash}}</div>
                <div>固定支出:{{FixedExpenses}}</div>
            </div>
            <div>
                <div>产品A任务需要:40</div>
                <div>产品A完成数量:{{ demand1.produced }}</div>
                <div>产品A未完成数量:{{ demand1.TotalProduction }}</div>
            </div>
            <div>
                <div>产品D任务需要:50</div>
                <div>产品D完成数量:{{ demand2.produced }}</div>
                <div>产品D未完成数量:{{ demand2.TotalProduction }}</div>
            </div>
            <div>
                <div>产品F任务需要:40</div>
                <div>产品F完成数量:{{ demand3.produced }}</div>
                <div>产品F未完成数量:{{ demand3.TotalProduction }}</div>
            </div>
            <span slot="footer" class="dialog-footer">
            <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
            <el-button type="primary" @click="endConfirmfun">确 定</el-button>
          </span>
        </el-dialog>


    </div>
</template>

<script>
// import SelectOption from "@/components/SelectOption.vue";
export default {
    name: 'home',
    // components:{
    //     SelectOption
    // },
    data() {
        return {
            // 绿色的岗位
            A1Obj:{
                date:4, // 生产时间
                inventory:'0', // 库存数量
                OnDuty:false, // 是否在岗 false 不在岗 true 在岗
                RunningTime:0, // 这个岗位在跑的事件，八小时之后保存的时间
                RawMaterialNumber:0, // 原材料数量
                RawMaterialPrice:30,// 原材料的价格
                subordinate:[], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#d5f593', // 颜色
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            C1Obj:{
                date:5,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                RawMaterialNumber:0,
                RawMaterialPrice:35,
                subordinate:[], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#d5f593', // 颜色
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            F1Obj:{
                date:15,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                RawMaterialNumber:0,
                RawMaterialPrice:65,
                subordinate:[], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#d5f593', // 颜色
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            A5Obj:{
                date:15,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['B3Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#d5f593', // 颜色
                unitPrice:65,// 成本价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            // 深蓝的岗位
            E5Obj:{
                date:28,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['E2Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#5894de', // 颜色
                unitPrice:30,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            C5Obj:{
                date:6,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['B3Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#5894de', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量

            },
            F5Obj:{
                date:14,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['F3Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#5894de', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            // 浅蓝的岗位
            A6Obj:{
                date:15,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['A5Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#7efefe', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            A9Obj:{
                date:18,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                SellingPrice: 180,// 卖出的成品价格
                subordinate:['A7Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#7efefe', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            D9Obj:{
                date:6,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                SellingPrice: 240,// 卖出的成品价格
                subordinate:['D7Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#7efefe', // 颜色
                unitPrice:95,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            E1Obj:{
                date:9,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                RawMaterialNumber:0,
                RawMaterialPrice:30,
                subordinate:[], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#7efefe', // 颜色
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            F2Obj:{
                date:12,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['F1Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#7efefe', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            F9Obj:{
                date:10,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                SellingPrice: 180,// 卖出的成品价格
                subordinate:['F7Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#7efefe', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            // 紫色的岗位
            E2Obj:{
                date:18,
                inventory:'15',
                OnDuty:false,
                RunningTime:0,
                subordinate:['E1Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#b188f0', // 颜色
                unitPrice:30,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            F3Obj:{
                date:20,
                inventory:'10',
                OnDuty:false,
                RunningTime:0,
                subordinate:['F2Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#b188f0', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            F7Obj:{
                date:7,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['F5Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#b188f0', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            A7Obj:{
                date:20,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['A6Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#b188f0', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            // 褐色的岗位
            B3Obj:{
                date:8,
                inventory:'25',
                OnDuty:false,
                RunningTime:0,
                subordinate:['A1Obj','C1Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#c2a750', // 颜色
                unitPrice:65,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },
            D7Obj:{
                date:9,
                inventory:'0',
                OnDuty:false,
                RunningTime:0,
                subordinate:['C5Obj','E5Obj'], // 关联的下级
                PreparationTime:0,// 准备时间 在选择该岗位的时候赋值的员工的准备时间，判断是否为0
                color:'#c2a750', // 颜色
                unitPrice:95,// 单价
                ProductionRestriction:false, // 是否限产
                LimitedProductionQuantity:0, // 限产的数量
            },

            // 深蓝色员工
            DarkBlueStaff:{
                PreparationTime:15, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            // 绿色员工
            GreenStaff1:{
                PreparationTime:120, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            GreenStaff2:{
                PreparationTime:120, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            // 蓝色员工
            BlueStaff1:{
                PreparationTime:60, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            BlueStaff2:{
                PreparationTime:60, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            // 紫色员工
            PurpleStaff1:{
                PreparationTime:30, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            PurpleStaff2:{
                PreparationTime:30, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            // 褐色员工
            BrownStaff:{
                PreparationTime:0, // 准备时间
                currentState:0, // 当前的状态
                postName:'-' // 岗位
            },
            // 员工的状态字典
            Typedata:[
                {
                    id:0,
                    name:'闲置' // 当没有工位的时候和当前工位下级没有货物的时候变成闲置状态
                },
                {
                    id:1,
                    name:'生产' // 过了准备时间之后就变成这个状态了
                },
                {
                    id:2,
                    name:'转换' // 准备时间是这个状态
                },
                {
                    id:3,
                    name:'限终' //设置限产数量之后，生产完的状态
                },
                {
                    id:4,
                    name:'限产' // 设置成限产之后的状态
                },
            ],
            // 蓝色员工可选岗位
            DarkBlueOptionalPost:[
                {
                    id:'C5',
                    name:'C5'
                },
                {
                    id:'E5',
                    name:'E5'
                },
                {
                    id:'F5',
                    name:'F5'
                }
            ],
            // 绿色的员工
            GreenOptionalPost:[
                {
                    id:'A1',
                    name:'A1'
                },
                {
                    id:'C1',
                    name:'C1'
                },
                {
                    id:'F1',
                    name:'F1'
                },
                {
                    id:'A5',
                    name:'A5'
                }
            ],
            // 蓝色员工
            BlueOptionalPost:[
                {
                    id:'E1',
                    name:'E1'
                },
                {
                    id:'F2',
                    name:'F2'
                },
                {
                    id:'A6',
                    name:'A6'
                },
                {
                    id:'A9',
                    name:'A9'
                },
                {
                    id:'D9',
                    name:'D9'
                },
                {
                    id:'F9',
                    name:'F9'
                }
            ],
            // 紫色员工
            PurpleOptionalPost:[
                {
                    id:'A7',
                    name:'A7'
                },
                {
                    id:'E2',
                    name:'E2'
                },
                {
                    id:'F3',
                    name:'F3'
                },
                {
                    id:'F7',
                    name:'F7'
                }
            ],
            // 褐色员工
            BrownOptionalPost:[
                {
                    id:'B3',
                    name:'B3'
                },
                {
                    id:'D7',
                    name:'D7'
                },
            ],
            // 三个生产线需要的需求
            demand1:{
                TotalProduction:40, // 这条线总生产数
                produced:0 // 这条线已经生产数量
            },
            demand2:{
                TotalProduction:50, // 这条线总生产数
                produced:0 // 这条线已经生产数量
            },
            demand3:{
                TotalProduction:40, // 这条线总生产数
                produced:0 // 这条线已经生产数量
            },

            // 当前在跑的总时间
            totalTime:0,
            // 倍速
            DoubleSpeed:1,
            // 计时器
            stopInter:null,
            // 购买原材料输入的数量
            StagingNumber:0,
            // 总钱数 一万
            TotalMoney:10000,
            // 固定支出
            FixedExpenses:11000,
            // 时间处理 00:00
            formatdate:'00:00',
            // 购买原材料弹窗的开启和关闭
            rawMaterialDialog:false,
            // 弹窗需要的暂存的工位名称
            StagingName:'',
            // 当前计时器是否在开启过程中
            timerType:false,
            // 当前的天数
            CurrentDays:1,
            // 结算弹窗页面的开启和关闭
            settlementDialog:false,
            // 购买原材料花费的价钱
            rawMaterialSpendCash:0,
            // 限产弹窗的打开和关闭
            limitDialog:false,
            // 限产弹窗里的输入框
            xianchanInput:0,
            // 字符串的星期
            DigitalWeekList:['星期一','星期二','星期三','星期四','星期五']
        }
    },
    created() {


    },
    mounted() {
        // window.onresize = function () {
        //     // console.log(document.getElementById('mybox').clientHeight)
        //     // console.log(document.documentElement.clientHeight)
        //
        // }
        let myboxming = document.getElementById('mybox')
        let v = window.innerHeight
        let r = v / myboxming.clientHeight

        // document.getElementById('mybox').style.transform = `scale(${r})`
        // this.canvasfun()

    },
    methods:{
        // 获取canvas 的数据
        canvasfun(){
            // 页面加载完成之后调用
            window.onload = ()=>{
                const size = document.getElementById('sizeid')
                let arr = [
                    {
                        name:'canvasIdA2',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdC2',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdA4',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdC4',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdC6',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdE6',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdE4',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdE3',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdF4',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdF6',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdA8',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdD8',
                        canvas:null,
                        ctx:null,
                    },
                    {
                        name:'canvasIdF8',
                        canvas:null,
                        ctx:null,
                    }
                ]
                for(let item of arr) {
                    item.canvas = document.getElementById(item.name);
                    item.ctx = item.canvas.getContext('2d');
                    item.canvas.width = size.clientWidth
                    item.canvas.height = size.clientHeight
                    // 判断箭头位置
                    if (item.name == 'canvasIdA4') {
                        this.drawLineArrow(item, item.canvas.clientWidth, item.canvas.clientHeight, item.canvas.clientWidth/2, 10, "#000");
                    }else if (item.name == 'canvasIdC4') {
                        this.drawLineArrow(item, 0, item.canvas.clientHeight, item.canvas.clientWidth/2, 10, "#000");
                    }else if (item.name == 'canvasIdA2' || item.name == 'canvasIdC6') {
                        this.drawLineArrow(item, item.canvas.clientWidth/2, item.canvas.clientHeight, item.canvas.clientWidth-10, 10, "#000");
                    }else if (item.name == 'canvasIdC2' || item.name == 'canvasIdE6') {
                        this.drawLineArrow(item, item.canvas.clientWidth/2, item.canvas.clientHeight, 10, 10, "#000");
                    }else {
                        this.drawLineArrow(item, item.canvas.clientWidth/2, item.canvas.clientHeight, item.canvas.clientWidth/2, 10, "#000");
                    }
                }
            }
        },
        /**
         * 绘制带有箭头的直线
         * @param cavParam canvas画布变量
         * @param fromX/fromY 起点坐标
         * @param toX/toY 终点坐标
         * @param color 线与箭头颜色
         **/
        drawLineArrow(cavParam, fromX, fromY, toX, toY, color) {
            const headlen = 10;//自定义箭头线的长度
            const theta = 45;//自定义箭头线与直线的夹角，个人觉得45°刚刚好
            let arrowX, arrowY;//箭头线终点坐标
            // 计算各角度和对应的箭头终点坐标
            const angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
            const angle1 = (angle + theta) * Math.PI / 180;
            const angle2 = (angle - theta) * Math.PI / 180;
            const topX = headlen * Math.cos(angle1);
            const topY = headlen * Math.sin(angle1);
            const botX = headlen * Math.cos(angle2);
            const botY = headlen * Math.sin(angle2);
            // 需要的开始路径
            cavParam.ctx.beginPath();
            // 设置画笔线条的粗细
            cavParam.ctx.lineWidth = 2
            //画直线
            cavParam.ctx.moveTo(fromX, fromY);
            cavParam.ctx.lineTo(toX, toY);
            arrowX = toX + topX;
            arrowY = toY + topY;
            //画上边箭头线
            cavParam.ctx.moveTo(arrowX, arrowY);
            cavParam.ctx.lineTo(toX, toY);
            arrowX = toX + botX;
            arrowY = toY + botY;
            //画下边箭头线
            cavParam.ctx.lineTo(arrowX, arrowY);
            // 更换画笔颜色
            cavParam.ctx.strokeStyle = color;
            cavParam.ctx.stroke();
        },
        StartButtonfun(){
            if (this.timerType) {
                this.stopfun()
            }else {
                this.kaishi()
            }
        },
        // 开始
        kaishi() {
            if (this.timerType) {
                return
            }
            this.setIntfun()
        },
        // 倍速加快
        jiakuai(){
            if (this.DoubleSpeed < 10) {
                this.DoubleSpeed++
                // 判断当前计时器是否是开启状态
                if (this.timerType) {
                    this.stopfun()
                    this.setIntfun()
                }

            }
        },
        // 倍速减慢
        jianman(){
            if(this.DoubleSpeed > 1) {
                this.DoubleSpeed--
                if (this.timerType) {
                    this.stopfun()
                    this.setIntfun()
                }
            }
        },
        // 下拉反的参数
        // 第一个参数 组件反的当前选择的数据
        // 第二个参数 员工是什么颜色的；
        // 第三个参数 两个员工的另一个员工数据
        // 第四个参数 当前员工的数据
        DropDownfun(e,type,staffName,currentData) {
            if (type == '深蓝色') {
                // 深蓝色只有一个员工
                switch(e)
                {
                    case 'C5':
                        if (this.DarkBlueStaff.postName != e) {
                            this[e+'Obj'].OnDuty = true
                            this[e+'Obj'].PreparationTime = this.DarkBlueStaff.PreparationTime
                            this.DarkBlueStaff.currentState = 2 // 把 员工的状态变成转换
                        }
                        this.ClearanceTimefun('E5Obj')
                        this.ClearanceTimefun('F5Obj')
                        break;
                    case 'E5':
                        if (this.DarkBlueStaff.postName != e) {
                            this[e+'Obj'].OnDuty = true
                            this[e+'Obj'].PreparationTime = this.DarkBlueStaff.PreparationTime
                            this.DarkBlueStaff.currentState = 2 // 把 员工的状态变成转换
                        }
                        this.ClearanceTimefun('C5Obj')
                        this.ClearanceTimefun('F5Obj')
                        break;
                    case 'F5':
                        if (this.DarkBlueStaff.postName != e) {
                            this[e+'Obj'].OnDuty = true
                            this[e+'Obj'].PreparationTime = this.DarkBlueStaff.PreparationTime
                            this.DarkBlueStaff.currentState = 2 // 把 员工的状态变成转换
                        }
                        this.ClearanceTimefun('E5Obj')
                        this.ClearanceTimefun('C5Obj')
                        break;
                    default:
                        break;
                }
                this.DarkBlueStaff.postName = e
            }else if (type =='绿色') {
                // 绿色的员工两个
                this.MultipleEmployeesfun(this.GreenOptionalPost,e,staffName,currentData)
            }else if (type =='褐色') {
                // 褐色只有一个员工
                switch(e)
                {
                    case 'B3':
                        if (this.DarkBlueStaff.postName != e) {
                            this[e+'Obj'].OnDuty = true
                            this[e+'Obj'].PreparationTime = this.BrownStaff.PreparationTime
                            this.BrownStaff.currentState = 2 // 把 员工的状态变成转换
                        }
                        this.ClearanceTimefun('D7Obj')
                        break;
                    case 'D7':
                        if (this.DarkBlueStaff.postName != e) {
                            this[e+'Obj'].OnDuty = true
                            this[e+'Obj'].PreparationTime = this.BrownStaff.PreparationTime
                            this.BrownStaff.currentState = 2 // 把 员工的状态变成转换
                        }
                        this.ClearanceTimefun('B3Obj')
                        break;
                    default:
                        break;
                }
                this.BrownStaff.postName = e

            }else if (type =='蓝色') {
                // 蓝色的员工两个
                this.MultipleEmployeesfun(this.BlueOptionalPost,e,staffName,currentData)
            }else if(type == '紫色') {
                // 紫色的员工两个
                this.MultipleEmployeesfun(this.PurpleOptionalPost,e,staffName,currentData)
            }else {

            }

        },
        // 计时器开启
        setIntfun(){
            this.timerType = true
            this.stopInter = setInterval(res=>{
                // 总共跑了多少时间
                this.totalTime++
                // 获取 00:00 格式的时间
                this.formatdate = this.formatfun(this.totalTime)
                // 判断是否到了一天的时间
                if(this.formatdate === '08:00') {
                    // 到了第五天游戏就结束了
                    if (this.CurrentDays == 5) {
                        this.settlementDialog = true
                        this.TotalMoney -= this.FixedExpenses
                        this.stopfun()
                        return
                    }
                    this.$alert('今日工作最多只能工作八小时，请准时下班', '下班', {
                        confirmButtonText: '确定',
                        callback: action => {}
                    });
                    this.CurrentDays++
                    this.formatdate = '00:00'
                    this.totalTime = 0
                    this.stopfun()
                }

                // 绿色A1工位的状况
                this.BottomRawMaterialfun('A1','GreenStaff')

                // 绿色C1工位的状况
                this.BottomRawMaterialfun('C1','GreenStaff')

                // 绿色F1工位的状况
                this.BottomRawMaterialfun('F1','GreenStaff')

                // 蓝色E1工位的状况
                this.BottomRawMaterialfun('E1','BlueStaff')

                // 紫色E2工位的状况
                this.InferiorJudgmentfun('E2','PurpleStaff')

                // 蓝色F2工位的状况
                this.InferiorJudgmentfun('F2','BlueStaff')

                // 褐色B3工位状况
                this.ConfluenceStationfun('B3','BrownStaff')

                // 紫色F3工位的状况
                this.InferiorJudgmentfun('F3','PurpleStaff')

                // 绿色A5工位的状况
                this.InferiorJudgmentfun('A5','GreenStaff')

                // 深蓝色C5工位的状况
                this.InferiorJudgmentfun('C5','DarkBlueStaff',true)

                // 深蓝色E5工位状况
                this.InferiorJudgmentfun('E5','DarkBlueStaff',true)

                // 深蓝色F5工位状况
                this.InferiorJudgmentfun('F5','DarkBlueStaff',true)

                // 蓝色A6工位状况
                this.InferiorJudgmentfun('A6','BlueStaff')

                // 紫色A7工位状况
                this.InferiorJudgmentfun('A7','PurpleStaff')

                // 褐色D7工位状况
                this.ConfluenceStationfun('D7','BrownStaff')

                // 紫色F7工位状况
                this.InferiorJudgmentfun('F7','PurpleStaff')

                // 蓝色A9工位的状况
                this.TopWorkstation('A9','BlueStaff','demand1') // 顶部要卖出的方法

                // 蓝色D9工位状况
                this.TopWorkstation('D9','BlueStaff','demand2') // 顶部要卖出的方法

                // 蓝色F9工位状况
                this.TopWorkstation('F9','BlueStaff','demand3') // 顶部要卖出的方法

            },1000 / this.DoubleSpeed)
        },
        // 查看下级是否有人 参数是下级的数组名称
        // 如果没有下级的直接反 true
        ViewSubordinatesfun(list) {
            if (list.length > 0) {
                if (list.length == 1) {
                    if (this[list[0]].inventory > 0) {
                        return true
                    }else {
                        return false
                    }
                }else if (list.length == 2) {
                    if (this[list[0]].inventory > 0 && this[list[1]].inventory > 0) {
                        return true
                    }else {
                        return false
                    }
                }
            }else {
                return true
            }
        },
        // 清空工位的在跑时间和是否在岗状态
        // 参数的当前要离岗的对象名称
        ClearanceTimefun(objname) {
            this[objname].OnDuty = false // 变成离岗状态
            this[objname].RunningTime = 0 // 在跑时间变成零
            this[objname].ProductionRestriction = false // 变成不限产状态
            this[objname].LimitedProductionQuantity = 0 // 限产数量变成 0
        },
        // 查询员工的状态 参数查询的id
        EmployeeStatusfun(e){
            for(let item of this.Typedata) {
                if (item.id == e) {
                    return item.name
                }
            }
        },
        // 弹窗购买原材料
        // 参数是 当前的工位名称
        PopUpPurchasefun(name) {
            if ((this[name + 'Obj'].RawMaterialNumber + Number(this.StagingNumber)) < 0) {
                this.$message.warning('输入的负数不能大于已经应有数量');
                return
            }
            this[name + 'Obj'].RawMaterialNumber += Number(this.StagingNumber)
            this.rawMaterialSpendCash += this.StagingNumber * this[name + 'Obj'].RawMaterialPrice
            this.TotalMoney = this.TotalMoney - (this.StagingNumber * this[name + 'Obj'].RawMaterialPrice)
            this.rawMaterialBefore()
        },
        // 限产弹窗的确认事件
        LimtDialogfun(name){
            if (this.xianchanInput > 0){
                this[name+'Obj'].ProductionRestriction = true
                this[name+'Obj'].LimitedProductionQuantity = Number(this.xianchanInput)
                this.LimitBefore()
            }
        },

        // 工位顶部卖出的公用方法
        // 第三个参数的要卖个谁
        TopWorkstation(station,name,SalesName) {
            // 判断是否在职
            if(this[station + 'Obj'].OnDuty){
                // 判断是否有准备时间
                if(this[station + 'Obj'].PreparationTime == 0) {
                    // 判断下级是否有货物
                    if (this.ViewSubordinatesfun(this[station + 'Obj'].subordinate)) {
                        // 判断是否数限产
                        if (this[station+'Obj'].ProductionRestriction) {
                            if (this[name+'1'].postName == station) {
                                this[name+'1'].currentState = 4 // 把 员工的状态变成限产
                            }else {
                                this[name + '2'].currentState = 4 // 把 员工的状态变成限产
                            }
                            // 判断限产数量是否生产完
                            if (this[station+'Obj'].LimitedProductionQuantity == 0) {
                                if (this[name + '1'].postName == station) {
                                    this[name + '1'].currentState = 3 // 把 员工的状态变成限终
                                }else {
                                    this[name + '2'].currentState = 3 // 把 员工的状态变成限终
                                }
                                return;
                            }
                        }else {
                            // 判断员工
                            if (this[name+'1'].postName == station) {
                                this[name+'1'].currentState = 1 // 把 员工的状态变成生产
                            }else {
                                this[name + '2'].currentState = 1 // 把 员工的状态变成生产
                            }
                        }
                        // 判断是否达到生产时间
                        if (this[station + 'Obj'].RunningTime >= this[station + 'Obj'].date) {
                            this[station + 'Obj'].inventory++
                            this[this[station + 'Obj'].subordinate[0]].inventory--
                            // 如果限产就减限产数量
                            if (this[station+'Obj'].ProductionRestriction) {
                                this[station+'Obj'].LimitedProductionQuantity--
                            }
                            // 卖出的价格
                            // this[station + 'Obj'].SellingPrice
                            if (this[station + 'Obj'].inventory > 0) {
                                this.TotalMoney += this[station + 'Obj'].SellingPrice * this[station + 'Obj'].inventory
                                this[station + 'Obj'].inventory = 0
                                this[SalesName].produced++
                                this[SalesName].TotalProduction--
                            }else {

                            }
                            this[station + 'Obj'].RunningTime = 0
                        }else {
                            this[station + 'Obj'].RunningTime++
                        }
                    }else {
                        if (this[name+'1'].postName == station) {
                            this[name+'1'].currentState = 0 // 把 员工的状态变成闲置
                        }else {
                            this[name+'2'].currentState = 0 // 把 员工的状态变成闲置
                        }
                    }
                }else {
                    this[station + 'Obj'].PreparationTime--
                }
            }
        },

        // 中间的只需要判断下级的工位 type只有一个员工就传 true，两个员工的不传或传false
        InferiorJudgmentfun(station,name,type=false){
            // 判断是否在岗位
            if (this[station + 'Obj'].OnDuty) {
                // 判断是否有准备时间
                if (this[station + 'Obj'].PreparationTime == 0) {
                    // 判断下级是否要货物
                    if(this.ViewSubordinatesfun(this[station + 'Obj'].subordinate)) {
                        // 判断是否数限产
                        if (this[station+'Obj'].ProductionRestriction) {
                            if (type) {
                                this[name].currentState = 4 // 把 员工的状态变成限产
                            }else {
                                if (this[name + '1'].postName == station) {
                                    this[name + '1'].currentState = 4 // 把 员工的状态变成限产
                                }else {
                                    this[name + '2'].currentState = 4 // 把 员工的状态变成限产
                                }
                            }
                            // 判断限产数量是否生产完
                            if (this[station+'Obj'].LimitedProductionQuantity == 0) {
                                if (type) {
                                    this[name].currentState = 3 // 把 员工的状态变成限终
                                }else {
                                    if (this[name + '1'].postName == station) {
                                        this[name + '1'].currentState = 3 // 把 员工的状态变成限终
                                    }else {
                                        this[name + '2'].currentState = 3 // 把 员工的状态变成限终
                                    }
                                }
                                return;
                            }
                        }else {
                            // 下面正常执行的代码
                            if (type) {
                                this[name].currentState = 1 // 把 员工的状态变成生产
                            }else {
                                if (this[name + '1'].postName == station) {
                                    this[name + '1'].currentState = 1 // 把 员工的状态变成生产
                                }else {
                                    this[name + '2'].currentState = 1 // 把 员工的状态变成生产
                                }
                            }
                        }
                        // 判断是否生产出货物
                        if (this[station + 'Obj'].RunningTime >= this[station + 'Obj'].date) {
                            this[station + 'Obj'].inventory++
                            this[this[station + 'Obj'].subordinate[0]].inventory--
                            this[station + 'Obj'].RunningTime = 0
                            // 如果限产就减限产数量
                            if (this[station+'Obj'].ProductionRestriction) {
                                this[station+'Obj'].LimitedProductionQuantity--
                            }
                        }else {
                            this[station + 'Obj'].RunningTime++
                        }
                    }else {
                        if (type) {
                            this[name].currentState = 0 // 把 员工的状态变成闲置
                        }else {
                            if (this[name + '1'].postName == station) {
                                this[name + '1'].currentState = 0 // 把 员工的状态变成闲置
                            }else {
                                this[name + '2'].currentState = 0 // 把 员工的状态变成闲置
                            }
                        }
                    }
                }else {
                    this[station + 'Obj'].PreparationTime--
                }
            }
        },

        // 褐色汇聚的方法
        ConfluenceStationfun(station,name){
            // 判断是否在岗
            if (this[station + 'Obj'].OnDuty) {
                // 判断是否有准备时间
                if (this[station + 'Obj'].PreparationTime == 0) {
                    // 判断下级是否有库存
                    if (this.ViewSubordinatesfun(this[station + 'Obj'].subordinate)) {
                        // 判断是否设置成限产
                        if (this[station+'Obj'].ProductionRestriction) {
                            this[name].currentState = 4 // 把 员工的状态变成限产
                            // 判断限产数量是否生产完
                            if (this[station+'Obj'].LimitedProductionQuantity == 0) {
                                this[name].currentState = 3 // 把 员工的状态变成限终
                                return;
                            }
                        }else {
                            this[name].currentState = 1 // 把 员工的状态变成生产
                        }
                        // 判读是否生产
                        if (this[station + 'Obj'].RunningTime >= this[station + 'Obj'].date) {
                            this[station + 'Obj'].inventory++
                            this[this[station + 'Obj'].subordinate[0]].inventory--
                            this[this[station + 'Obj'].subordinate[1]].inventory--
                            this[station + 'Obj'].RunningTime = 0
                            // 如果限产就减限产数量
                            if (this[station+'Obj'].ProductionRestriction) {
                                this[station+'Obj'].LimitedProductionQuantity--
                            }
                        }else {
                            this[station + 'Obj'].RunningTime++
                        }
                    }else {
                        this[name].currentState = 0 // 把 员工的状态变成闲置
                    }
                }else {
                    this[station + 'Obj'].PreparationTime--
                }
            }
        },

        // 底部需要买原材料的方法
        BottomRawMaterialfun(station,name){
            // 判断是否在岗和是否有原材料
            if (this[[station + 'Obj']].OnDuty && this.ViewSubordinatesfun(this[station + 'Obj'].subordinate)) {
                // 判断是否有准备时间
                if (this[station + 'Obj'].PreparationTime == 0) {
                    // 判断是否有原材料库存
                    if(this[station + 'Obj'].RawMaterialNumber != 0) {
                        // 判断是否要限产
                        if (this[station+'Obj'].ProductionRestriction) {
                            if (this[name + '1'].postName == station) {
                                this[name + '1'].currentState = 4 // 把 员工的状态变成限产
                            }else {
                                this[name + '2'].currentState = 4 // 把 员工的状态变成限产
                            }
                            if (this[station+'Obj'].LimitedProductionQuantity == 0) {
                                if (this[name + '1'].postName == station) {
                                    this[name + '1'].currentState = 3 // 把 员工的状态变成限终
                                }else {
                                    this[name + '2'].currentState = 3 // 把 员工的状态变成限终
                                }
                                return
                            }
                        }else {
                            // 判断是哪个员工是
                            if (this[name + '1'].postName == station) {
                                this[name + '1'].currentState = 1 // 把 员工的状态变成生产
                            }else {
                                this[name + '2'].currentState = 1 // 把 员工的状态变成生产
                            }
                        }
                        // 判断是否达到生产时间
                        if (this[station + 'Obj'].RunningTime >= this[station + 'Obj'].date) {
                            this[station + 'Obj'].inventory++
                            this[station + 'Obj'].RawMaterialNumber--
                            this[station + 'Obj'].RunningTime = 0
                            // 如果限产就减限产数量
                            if (this[station+'Obj'].ProductionRestriction) {
                                this[station+'Obj'].LimitedProductionQuantity--
                            }
                        }else {
                            this[station + 'Obj'].RunningTime++
                        }
                    }else {
                        if (this[name + '1'].postName == station) {
                            this[name + '1'].currentState = 0 // 把 员工的状态变成闲置
                        }else {
                            this[name + '2'].currentState = 0 // 把 员工的状态变成闲置
                        }
                    }
                }else {
                    this[station + 'Obj'].PreparationTime--
                }
            }
        },

        // 下拉选择工位两个人的公用方法
        // 参数传员工当前可选的数组数据 剩下的上一个方法带出来的
        MultipleEmployeesfun(OptionalPost,e,staffName,currentData) {
            for(let item of OptionalPost) {
                if (item.name == e || e == '-') {
                    // 判断另一个员工是否在这个岗位 是就提醒不是就赋值
                    if (staffName.postName == e) {
                        console.log('该岗位已经有人在了')
                        this.$message.warning('该岗位已经有人在工作了');
                    }else {
                        // 不能重复选一个工位 如果想加取消就在这个 if 后面加 else
                        if (currentData.postName != e) {
                            this[e+'Obj'].OnDuty = true // 更改成在职状态
                            this[e+'Obj'].PreparationTime = currentData.PreparationTime // 赋值准备时间
                            currentData.currentState = 2 // 把 员工的状态变成转换
                        }
                        currentData.postName = e
                    }
                }else {
                    if (staffName.postName != item.name) {
                        // 清空其他岗位的在职状态
                        this.ClearanceTimefun(item.name+'Obj')
                    }
                }
            }
        },

        // 把记录的时间秒转化成 00:00 格式
        formatfun(seconds) {
            let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
            seconds -= 3600 * hour; // 算小时
            let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
            seconds -= 60 * min;
            let sec = seconds >= 10 ? seconds : '0' + seconds;
            return min + ':' + sec;
        },

        // 购买原材料的弹窗的开启
        rawMaterialTruefun(name) {
            this.StagingName = name
            this.rawMaterialDialog = true
            this.stopfun()
        },
        // 购买原材料的弹窗的关闭
        rawMaterialBefore(){
            this.rawMaterialDialog = false
            this.StagingNumber = 0
        },
        // 限产弹窗的开启
        xianchanfun(name){
            this.StagingName = name
            this.limitDialog = true
            this.stopfun()
        },
        // 取消限产状态的事件
        Cancellationlimitatio(name){
            this.$message.success('取消限产成功');
            this[name+'Obj'].ProductionRestriction = false
            this[name+'Obj'].LimitedProductionQuantity = 0
            this.LimitBefore()
        },
        // 限产弹窗的关闭
        LimitBefore(){
            this.limitDialog = false
            this.xianchanInput = 0
        },
        // 结束确认弹窗
        endConfirmfun(){
            this.$confirm('确定关闭弹窗并重新开始吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.settlementDialog = false
                this.$router.go(0);
            }).catch(() => {});

        },
        // 数字星期转 字符串星期
        DigitalWeekfun(name){
            return this.DigitalWeekList[name-1]
        },
        // 计时器停止
        stopfun() {
            this.timerType = false
            clearInterval(this.stopInter)
        },
    }
}
</script>

<style scoped>
.home {
    width: 100vw;
    //height: 100vh;
    padding: 5px 20px;
    background: #fff;
    box-sizing: border-box;
}
.leftbox {
    width: 240px;
}
.leftbox > div {
    margin: 10px 0;
}
.principalBox {
    width: 100%;
    background: #f4c179;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
//justify-content: center;
}
.leftimgbox {
    width: 40px;
}
.leftimgbox > img {
    width: 100%;
    height: 100%;
}
.BoldText {
    font-size: 26px;
    font-weight: bold;
}
.CostTextLeft {
    font-size: 18px;
    font-weight: bold;
}
.CostTextRight {
    font-size: 16px;
    font-weight: bold;
}

.PersonnelResources {
    //height: 600px;
    border: 2px dashed #b9b9b9;
    display: flex;
    flex-direction: column;
    padding: 10px 30px;
    box-sizing: border-box;
    position: relative;
}
.renlitext {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 14px;
    color: #7b7b7b;
}
.staffBox {
    flex: 1;
    margin-bottom: 25px;
//margin-bottom: 10px;
}
.staffBoxflex {
    display: flex;
    justify-content: space-between;
}
.staffBoxren {
    width: 70px;
    position: relative;
//transform: scale(0.8);
}
.staffBoxtext {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
}
.xialawz {
    position: absolute;
    width: 70px;
    margin-top: -8px;
//bottom: 0;
}
.staffBox-img {
//width: 90%;
    width: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


.MultiplyPlaybackBox {
    width: 100%;
    height: 40px;
    border: 1px solid #b6b6b6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.speedbox {
    width: 20px;
    height: 20px;
    margin: 0 20px;
    background: #111111;
    color: #fff;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

.StartButton {
    width: 100%;
    height: 50px;
    background: #487373;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}

.rightbox {
    //width: calc(100vw - 200px);
    padding-top: 5px;
    //padding-left: 40px;
    box-sizing: border-box;
}
.flowChartBox {

}
.PositionlineBox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 40px;
}
.postBox {
    width: 150px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    margin-left: 40px;
}
.postBox:first-child {
    margin-left: 20px;
}
.postBoxLeft {
    display: flex;
}
.postBoxRight {
    font-size: 12px;
    color: #fff;
}

.stationBox {
    width: 150px;
    margin-left: 40px;
}
.stationBox:first-child {
    margin-left: 20px;
}
.stationBox:last-child {
    margin-right: 20px;
}

.PositionInventory {
    width: 130px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #8d8d8d;
    margin-bottom: 2px;
    font-size: 12px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.JobInformation {
    width: 130px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    //box-sizing: border-box;
}
.JobInformation-left {
    height: 100%;
    border-right: 2px solid #fff;
    text-align: center;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.postTitle {
    color: #000;
    font-size: 24px;
}
.limit {
    width: 40px;
    height: 18px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    background: #6f2ee7;
    cursor: pointer;
}
.JobInformation-right {
    height: 100%;
    font-size: 12px;
    text-align: right;
    margin-left: 8px;
}
.JobInformation-right > div {
    display: flex;
    align-items: center;
}

.rawmaterialBox {
    border: 2px dashed #b9b9b9;
    height: 60px;
    margin-left: 40px;
    display: flex;
    align-items: center;
}
.procurebox {
    width: 150px;
    height: 40px;
    border-radius: 8px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    position: relative;
    margin-left: 40px;
    box-sizing: border-box;
    cursor: pointer;
}
.procurebox:first-child {
    margin-left: 20px;
}
.procureboxIocn {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}


.xiaohezi {
    background: #42b983;
//width: 100px;
    width: 95%;
    height: 95%;
//height: 80px;
    font-size: 12px;
    text-align: center;
    margin: auto auto 10px;
}

::v-deep .el-input--mini .el-input__inner {
    height: 20px;
    line-height: 20px;
    border-radius: 6px;
    padding-right: 25px;
}
::v-deep .el-input--mini .el-input__icon {
    line-height: 20px;
}

</style>