<template>
    <div class="monitor-pack">
        <div class="view-pack">
            <!--车体定位筛选条件-->
            <div class="search-pack">
                <div class="order-number">
                    订单号：
                    <el-input
                        size="mini"
                        style="width: 150px"
                        :placeholder="workOrderNo !== '' ? '已输入工单号' : '请输入订单号'"
                        v-model="orderNo"
                        :disabled="workOrderNo !== ''">
                    </el-input>
                </div>
                <div class="work-order-number">
                    工单号：
                    <el-input
                        size="mini"
                        style="width: 150px"
                        :placeholder="orderNo !== '' ? '已输入订单号' : '请输入工单号'"
                        v-model="workOrderNo"
                        :disabled="orderNo !== ''">
                    </el-input>
                </div>
                <el-button
                    size="mini"
                    type="primary"
                    @click="doSearchClick">
                    搜索
                </el-button>
            </div>
            <!--电泳作业区-->
            <div class="electrophoresis-pack" @click="doElectrophoresisClick">
                <div>
                    <!--上左区-->
                    <div
                        class="t-l-washed-4"
                        v-if="electorophoresis.hasOwnProperty('STC1-1') && electorophoresis['STC1-1'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-1'].busType, 'STC1-1')">
                    </div>
                    <div
                        class="t-l-pure-water-wash-1"
                        v-if="electorophoresis.hasOwnProperty('STC1-2') && electorophoresis['STC1-2'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-2'].busType, 'STC1-2')">
                    </div>
                    <div
                        class="t-l-electrophoretic-transfer"
                        v-if="electorophoresis.hasOwnProperty('STC1-3') && electorophoresis['STC1-3'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-3'].busType, 'STC1-3')">
                    </div>
                    <div
                        class="t-l-electrophoretic-tank"
                        v-if="electorophoresis.hasOwnProperty('STC1-4') && electorophoresis['STC1-4'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-4'].busType, 'STC1-4')">
                    </div>
                    <div
                        class="t-l-UF1"
                         v-if="electorophoresis.hasOwnProperty('STC1-5') && electorophoresis['STC1-5'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-5'].busType, 'STC1-5')">
                    </div>
                    <div
                        class="t-l-UF2"
                        v-if="electorophoresis.hasOwnProperty('STC1-6') && electorophoresis['STC1-6'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-6'].busType, 'STC1-6')">
                    </div>
                    <div
                        class="t-l-pure-water-wash-2"
                        v-if="electorophoresis.hasOwnProperty('STC1-7') && electorophoresis['STC1-7'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-7'].busType, 'STC1-7')">
                    </div>
                    <div
                        class="t-l-electrophoresis-down"
                        v-if="electorophoresis.hasOwnProperty('HDG2-2') && electorophoresis['HDG2-2'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG2-2'].busType, 'HDG2-2')">
                    </div>
                    <div
                        class="t-l-station"
                        v-if="electorophoresis.hasOwnProperty('HDG1-45') && electorophoresis['HDG1-45'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-45'].busType, 'HDG1-45')">
                    </div>
                    <!--上中区-->
                    <div
                        class="t-m-washed-3"
                        v-if="electorophoresis.hasOwnProperty('STC1-8') && electorophoresis['STC1-8'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-8'].busType, 'STC1-8')">
                    </div>
                    <div
                        class="t-m-phosphating"
                        v-if="electorophoresis.hasOwnProperty('STC1-9') && electorophoresis['STC1-9'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-9'].busType, 'STC1-9')">
                    </div>
                    <div
                        class="t-m-tune"
                        v-if="electorophoresis.hasOwnProperty('STC1-10') && electorophoresis['STC1-10'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-10'].busType, 'STC1-10')">

                    </div>
                    <div
                        class="t-m-washed-2"
                        v-if="electorophoresis.hasOwnProperty('STC1-11') && electorophoresis['STC1-11'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-11'].busType, 'STC1-11')">
                    </div>
                    <div
                        class="t-m-washed-1"
                        v-if="electorophoresis.hasOwnProperty('STC1-12') && electorophoresis['STC1-12'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-12'].busType, 'STC1-12')">
                    </div>
                    <div
                        class="t-m-degreasing"
                        v-if="electorophoresis.hasOwnProperty('STC1-13') && electorophoresis['STC1-13'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-13'].busType, 'STC1-13')">
                    </div>
                    <div
                        class="t-m-pre-degreasing"
                        v-if="electorophoresis.hasOwnProperty('STC1-14') && electorophoresis['STC1-14'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['STC1-14'].busType, 'STC1-14')">
                    </div>
                    <div
                        class="t-m-electrophoresis-up"
                        v-if="electorophoresis.hasOwnProperty('HDG2-1') && electorophoresis['HDG2-1'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG2-1'].busType, 'HDG2-1')">
                    </div>
                    <div
                        class="t-m-station"
                        v-if="electorophoresis.hasOwnProperty('HDG1-47') && electorophoresis['HDG1-47'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-47'].busType, 'HDG1-47')">
                    </div>
                    <!-- 中间两车道点 -->
                    <div
                        class="m-m-station-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-36') && electorophoresis['HDG1-36'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-36'].busType, 'HDG1-36')">
                    </div>
                    <div
                        class="m-m-station-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-46') && electorophoresis['HDG1-46'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-46'].busType, 'HDG1-46')">
                    </div>
                    <!--上右区-->
                    <div
                        class="t-r-pretreatment-line-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-31') && electorophoresis['HDG1-31'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-31'].busType, 'HDG1-31')">
                    </div>
                    <div
                        class="t-r-pretreatment-line-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-32') && electorophoresis['HDG1-32'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-32'].busType, 'HDG1-32')">
                    </div>
                    <div
                        class="t-r-pretreatment-line-3"
                        v-if="electorophoresis.hasOwnProperty('HDG1-33') && electorophoresis['HDG1-33'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-33'].busType, 'HDG1-33')">
                    </div>
                    <div
                        class="t-r-pretreatment-line-4"
                        v-if="electorophoresis.hasOwnProperty('HDG1-34') && electorophoresis['HDG1-34'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-34'].busType, 'HDG1-34')">
                    </div>
                    <div
                        class="t-r-station-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-49') && electorophoresis['HDG1-49'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-49'].busType, 'HDG1-49')">
                    </div>
                    <div
                        class="t-r-station-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-50') && electorophoresis['HDG1-50'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-50'].busType, 'HDG1-50')">
                    </div>
                    <div
                        class="t-r-station-3"
                        v-if="electorophoresis.hasOwnProperty('HDG1-51') && electorophoresis['HDG1-51'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-51'].busType, 'HDG1-51')">
                    </div>
                    <div
                        class="t-r-station-4"
                        v-if="electorophoresis.hasOwnProperty('HDG1-52') && electorophoresis['HDG1-52'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-52'].busType, 'HDG1-52')">
                    </div>
                    <div
                        class="t-r-high-pressure-water-wash"
                        v-if="electorophoresis.hasOwnProperty('HDG1-35') && electorophoresis['HDG1-35'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-35'].busType, 'HDG1-35')">
                    </div>
                    <div
                        class="t-r-station"
                        v-if="electorophoresis.hasOwnProperty('HDG1-48') && electorophoresis['HDG1-48'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-48'].busType, 'HDG1-48')">
                    </div>
                    <!--左区-->
                    <div
                        class="l-station-1"
                        v-if="electorophoresis.hasOwnProperty('HDG5-2') && electorophoresis['HDG5-2'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-2'].busType, 'HDG5-2')">
                    </div>
                    <div
                        class="l-station-2"
                        v-if="electorophoresis.hasOwnProperty('HDG5-3') && electorophoresis['HDG5-3'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-3'].busType, 'HDG5-3')">
                    </div>
                    <div
                        class="l-station-3"
                        v-if="electorophoresis.hasOwnProperty('HDG5-4') && electorophoresis['HDG5-4'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-4'].busType, 'HDG5-4')">
                    </div>
                    <div
                        class="l-station-4"
                        v-if="electorophoresis.hasOwnProperty('HDG5-5') && electorophoresis['HDG5-5'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-5'].busType, 'HDG5-5')">
                    </div>
                    <div
                        class="l-station-5"
                        v-if="electorophoresis.hasOwnProperty('HDG5-6') && electorophoresis['HDG5-6'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-6'].busType, 'HDG5-6')">
                    </div>
                    <div
                        class="l-station-6"
                        v-if="electorophoresis.hasOwnProperty('HDG5-7') && electorophoresis['HDG5-7'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG5-7'].busType, 'HDG5-7')">
                    </div>
                    <!--下区-->
                    <div
                        class="b-column-1-electrophoresis-baking-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-37') && electorophoresis['HDG1-37'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-37'].busType, 'HDG1-37')">
                    </div>
                    <div
                        class="b-column-1-electrophoresis-baking-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-41') && electorophoresis['HDG1-41'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-41'].busType, 'HDG1-41')">
                    </div>
                    <div
                        class="b-column-1-frame-baking"
                        v-if="electorophoresis.hasOwnProperty('HDG1-59') && electorophoresis['HDG1-59'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-59'].busType, 'HDG1-59')">
                    </div>
                    <div
                        class="b-column-1-station"
                        v-if="electorophoresis.hasOwnProperty('HDG1-63') && electorophoresis['HDG1-63'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-63'].busType, 'HDG1-63')">
                    </div>
                    <div
                        class="b-column-2-electrophoresis-baking-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-38') && electorophoresis['HDG1-38'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-38'].busType, 'HDG1-38')">
                    </div>
                    <div
                        class="b-column-2-electrophoresis-baking-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-42') && electorophoresis['HDG1-42'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-42'].busType, 'HDG1-42')">
                    </div>
                    <div
                        class="b-column-2-station-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-60') && electorophoresis['HDG1-60'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-60'].busType, 'HDG1-60')">
                    </div>
                    <div
                        class="b-column-2-station-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-64') && electorophoresis['HDG1-64'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-64'].busType, 'HDG1-64')">
                    </div>
                    <div
                        class="b-column-3-electrophoresis-baking"
                        v-if="electorophoresis.hasOwnProperty('HDG1-39') && electorophoresis['HDG1-39'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-39'].busType, 'HDG1-39')">
                    </div>
                    <div
                        class="b-column-3-strong-cold"
                        v-if="electorophoresis.hasOwnProperty('HDG1-43') && electorophoresis['HDG1-43'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-43'].busType, 'HDG1-43')">
                    </div>
                    <div
                        class="b-column-3-station-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-61') && electorophoresis['HDG1-61'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-61'].busType, 'HDG1-61')">
                    </div>
                    <div
                        class="b-column-3-station-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-65') && electorophoresis['HDG1-65'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-65'].busType, 'HDG1-65')">
                    </div>
                    <div
                        class="b-column-4-strong-cold"
                        v-if="electorophoresis.hasOwnProperty('HDG1-40') && electorophoresis['HDG1-40'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-40'].busType, 'HDG1-40')">
                    </div>
                    <div
                        class="b-column-4-station-1"
                        v-if="electorophoresis.hasOwnProperty('HDG1-44') && electorophoresis['HDG1-44'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-44'].busType, 'HDG1-44')">
                    </div>
                    <div
                        class="b-column-4-frame-painting"
                        v-if="electorophoresis.hasOwnProperty('HDG1-62') && electorophoresis['HDG1-62'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-62'].busType, 'HDG1-62')">
                    </div>
                    <div
                        class="b-column-4-station-2"
                        v-if="electorophoresis.hasOwnProperty('HDG1-66') && electorophoresis['HDG1-66'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(electorophoresis['HDG1-66'].busType, 'HDG1-66')">
                    </div>
                </div>
            </div>
            <!--钣金车存放区-->
            <div class="sheet-metal-car-pack" @click="doSheetMetalCarClick">
                <div>
                    <div
                        class="sheet-metal-car-A1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-5') && sheetMetalCar['HDG1-5'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-5'].busType, 'HDG1-5')">
                    </div>
                    <div
                        class="A1-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-4') && sheetMetalCar['HDG1-4'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-4'].busType, 'HDG1-4')">
                    </div>
                    <div
                        class="A1-station-2"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-3') && sheetMetalCar['HDG1-3'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-3'].busType, 'HDG1-3')">
                    </div>
                    <div
                        class="A1-station-3"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-2') && sheetMetalCar['HDG1-2'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-2'].busType, 'HDG1-2')">
                    </div>
                    <div
                        class="A1-station-4"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-1') && sheetMetalCar['HDG1-1'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-1'].busType, 'HDG1-1')">
                    </div>

                    <div
                        class="sheet-metal-car-A2"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-10') && sheetMetalCar['HDG1-10'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-10'].busType, 'HDG1-10')">
                    </div>
                    <div
                        class="A2-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-9') && sheetMetalCar['HDG1-9'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-9'].busType, 'HDG1-9')">
                    </div>
                    <div
                        class="A2-station-2"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-8') && sheetMetalCar['HDG1-8'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-8'].busType, 'HDG1-8')">
                    </div>
                    <div
                        class="A2-station-3"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-7') && sheetMetalCar['HDG1-7'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-7'].busType, 'HDG1-7')">
                    </div>
                    <div
                        class="A2-station-4"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-6') && sheetMetalCar['HDG1-6'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-6'].busType, 'HDG1-6')">
                    </div>

                    <div
                        class="sheet-metal-car-A3"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-15') && sheetMetalCar['HDG1-15'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-15'].busType, 'HDG1-15')">
                    </div>
                    <div
                        class="A3-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-14') && sheetMetalCar['HDG1-14'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-14'].busType, 'HDG1-14')">
                    </div>
                    <div
                        class="A3-station-2"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-13') && sheetMetalCar['HDG1-13'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-13'].busType, 'HDG1-13')">
                    </div>
                    <div
                        class="A3-station-3"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-12') && sheetMetalCar['HDG1-12'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-12'].busType, 'HDG1-12')">
                    </div>
                    <div
                        class="A3-station-4"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-11') && sheetMetalCar['HDG1-11'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-11'].busType, 'HDG1-11')">
                    </div>

                    <div
                        class="sheet-metal-car-A4"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-20') && sheetMetalCar['HDG1-20'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-20'].busType, 'HDG1-20')">
                    </div>
                    <div
                        class="A4-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-19') && sheetMetalCar['HDG1-19'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-19'].busType, 'HDG1-19')">
                    </div>
                    <div
                        class="A4-station-2"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-18') && sheetMetalCar['HDG1-18'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-18'].busType, 'HDG1-18')">
                    </div>
                    <div
                        class="A4-station-3"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-17') && sheetMetalCar['HDG1-17'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-17'].busType, 'HDG1-17')">
                    </div>
                    <div
                        class="A4-station-4"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-16') && sheetMetalCar['HDG1-16'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-16'].busType, 'HDG1-16')">
                    </div>

                    <div
                        class="sheet-metal-car-A5"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-25') && sheetMetalCar['HDG1-25'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-25'].busType, 'HDG1-25')">
                    </div>
                    <div
                        class="A5-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-24') && sheetMetalCar['HDG1-24'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-24'].busType, 'HDG1-24')">
                    </div>
                    <div
                        class="A5-station-2"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-23') && sheetMetalCar['HDG1-23'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-23'].busType, 'HDG1-23')">
                    </div>
                    <div
                        class="A5-station-3"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-22') && sheetMetalCar['HDG1-22'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-22'].busType, 'HDG1-22')">
                    </div>
                    <div
                        class="A5-station-4"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-21') && sheetMetalCar['HDG1-21'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-21'].busType, 'HDG1-21')">
                    </div>

                    <div
                        class="heap"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-30') && sheetMetalCar['HDG1-30'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-30'].busType, 'HDG1-30')">
                    </div>
                    <div
                        class="heap-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-29') && sheetMetalCar['HDG1-29'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-29'].busType, 'HDG1-29')">
                    </div>
                    <div
                        class="heap-station-2"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-28') && sheetMetalCar['HDG1-28'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-28'].busType, 'HDG1-28')">
                    </div>
                    <div
                        class="heap-station-3"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-27') && sheetMetalCar['HDG1-27'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-27'].busType, 'HDG1-27')">
                    </div>
                    <div
                        class="heap-station-4"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-26') && sheetMetalCar['HDG1-26'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-26'].busType, 'HDG1-26')">
                    </div>

                    <div
                        class="take-off-cycle"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-53') && sheetMetalCar['HDG1-53'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-53'].busType, 'HDG1-53')">
                    </div>
                    <div
                        class="take-off-cycle-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-54') && sheetMetalCar['HDG1-54'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-54'].busType, 'HDG1-54')">
                    </div>

                    <div
                        class="change-electrophoresis"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-55') && sheetMetalCar['HDG1-55'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-55'].busType, 'HDG1-55')">
                    </div>
                    <div
                        class="change-electrophoresis-station-1"
                        v-if="sheetMetalCar.hasOwnProperty('HDG1-56') && sheetMetalCar['HDG1-56'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sheetMetalCar['HDG1-56'].busType, 'HDG1-56')">
                    </div>
                </div>
            </div>
            <!--密封防腐作业区-->
            <div class="sealed-anticorrosion-pack" @click="doSealedAnticorrosion">
                <div>
                    <div
                        class="line-1-change-cycle"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-57') && sealedAnticorrosion['HDG1-57'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-57'].busType, 'HDG1-57')">
                    </div>
                    <div
                        class="line-1-roof-seal"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-67') && sealedAnticorrosion['HDG1-67'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-67'].busType, 'HDG1-67')">
                    </div>
                    <div
                        class="line-1-frp-assembly"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-68') && sealedAnticorrosion['HDG1-68'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-68'].busType, 'HDG1-68')">
                    </div>
                    <div
                        class="line-1-trim"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-69') && sealedAnticorrosion['HDG1-69'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-69'].busType, 'HDG1-69')">
                    </div>
                    <div
                        class="line-1-polishing"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-70') && sealedAnticorrosion['HDG1-70'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-70'].busType, 'HDG1-70')">
                    </div>

                    <div
                        class="line-2-change-cycle"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-58') && sealedAnticorrosion['HDG1-58'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-58'].busType, 'HDG1-58')">
                    </div>
                    <div
                        class="line-2-roof-seal"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-71') && sealedAnticorrosion['HDG1-71'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-71'].busType, 'HDG1-71')">
                    </div>
                    <div
                        class="line-2-frp-assembly"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-72') && sealedAnticorrosion['HDG1-72'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-72'].busType, 'HDG1-72')">
                    </div>
                    <div
                        class="line-2-trim"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-73') && sealedAnticorrosion['HDG1-73'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-73'].busType, 'HDG1-73')">
                    </div>
                    <div
                        class="line-2-polishing"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-74') && sealedAnticorrosion['HDG1-74'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-74'].busType, 'HDG1-74')">
                    </div>
                    <div
                        class="line-2-air-conditioning"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG5-8') && sealedAnticorrosion['HDG5-8'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-8'].busType, 'HDG5-8')">
                    </div>

                    <div
                        class="line-3-station-1"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-75') && sealedAnticorrosion['HDG1-75'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-75'].busType, 'HDG1-75')">
                    </div>
                    <div
                        class="line-3-roof-seal-1"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-76') && sealedAnticorrosion['HDG1-76'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-76'].busType, 'HDG1-76')">
                    </div>
                    <div
                        class="line-3-roof-seal-2"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-77') && sealedAnticorrosion['HDG1-77'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-77'].busType, 'HDG1-77')">
                    </div>
                    <div
                        class="line-3-roof-seal-3"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-78') && sealedAnticorrosion['HDG1-78'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-78'].busType, 'HDG1-78')">
                    </div>
                    <div
                        class="line-3-roof-seal-4"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-79') && sealedAnticorrosion['HDG1-79'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-79'].busType, 'HDG1-79')">
                    </div>
                    <div
                        class="line-3-air-conditioning"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG5-9') && sealedAnticorrosion['HDG5-9'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-9'].busType, 'HDG5-9')">
                    </div>

                    <div
                        class="line-4-station-1"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-80') && sealedAnticorrosion['HDG1-80'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-80'].busType, 'HDG1-80')">
                    </div>
                    <div
                        class="line-4-station-2"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-81') && sealedAnticorrosion['HDG1-81'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-81'].busType, 'HDG1-81')">
                    </div>
                    <div
                        class="line-4-station-3"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-82') && sealedAnticorrosion['HDG1-82'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-82'].busType, 'HDG1-82')">
                    </div>
                    <div
                        class="line-4-station-4"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-83') && sealedAnticorrosion['HDG1-83'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-83'].busType, 'HDG1-83')">
                    </div>
                    <div
                        class="line-4-station-5"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-84') && sealedAnticorrosion['HDG1-84'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-84'].busType, 'HDG1-84')">
                    </div>
                    <div
                        class="line-4-air-conditioning"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG5-10') && sealedAnticorrosion['HDG5-10'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-10'].busType, 'HDG5-10')">
                    </div>

                    <div
                        class="line-5-clean-up-1"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-85') && sealedAnticorrosion['HDG1-85'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['DG1-85'].busType, 'DG1-85')">
                    </div>
                    <div
                        class="line-5-damping-glue-spray-paint"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-86') && sealedAnticorrosion['HDG1-86'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['DG1-86'].busType, 'DG1-86')">
                    </div>
                    <div
                        class="line-5-clean-up-2"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-87') && sealedAnticorrosion['HDG1-87'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['DG1-87'].busType, 'DG1-87')">
                    </div>
                    <div
                        class="line-5-foaming-spray"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-88') && sealedAnticorrosion['HDG1-88'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['DG1-88'].busType, 'DG1-88')">
                    </div>
                    <div
                        class="line-5-shadow-protection"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-89') && sealedAnticorrosion['HDG1-89'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['DG1-89'].busType, 'DG1-89')">
                    </div>
                    <div
                        class="line-5-station-1"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG5-11') && sealedAnticorrosion['HDG5-11'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-11'].busType, 'HDG5-11')">
                    </div>

                    <div
                        class="line-6-clean-up-1"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-90') && sealedAnticorrosion['HDG1-90'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-90'].busType, 'HDG1-90')">
                    </div>
                    <div
                        class="line-6-damping-glue-spray-paint"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-91') && sealedAnticorrosion['HDG1-91'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-91'].busType, 'HDG1-91')">
                    </div>
                    <div
                        class="line-6-clean-up-2"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-92') && sealedAnticorrosion['HDG1-92'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-92'].busType, 'HDG1-92')">
                    </div>
                    <div
                        class="line-6-foaming-spray"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-93') && sealedAnticorrosion['HDG1-93'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-93'].busType, 'HDG1-93')">
                    </div>
                    <div
                        class="line-6-shadow-protection"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG1-94') && sealedAnticorrosion['HDG1-94'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-94'].busType, 'HDG1-94')">
                    </div>
                    <div
                        class="line-6-station-1"
                        v-if="sealedAnticorrosion.hasOwnProperty('HDG5-12') && sealedAnticorrosion['HDG5-12'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-12'].busType, 'HDG5-12')">
                    </div>
                </div>
            </div>
            <!--腻子上半作业区-->
            <div class="putty-t-pack" @click="doPuttyClick">
                <div>
                    <div
                        class="line-1-putty-scraping"
                        v-if="putty.hasOwnProperty('HDG1-95') && putty['HDG1-95'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-95'].busType, 'HDG1-95')">
                    </div>
                    <div
                        class="line-1-station-1"
                        v-if="putty.hasOwnProperty('HDG1-96') && putty['HDG1-96'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-96'].busType, 'HDG1-96')">
                    </div>
                    <div
                        class="line-1-station-2"
                        v-if="putty.hasOwnProperty('HDG1-97') && putty['HDG1-97'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-97'].busType, 'HDG1-97')">
                    </div>
                    <div
                        class="line-1-station-3"
                        v-if="putty.hasOwnProperty('HDG1-98') && putty['HDG1-98'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-98'].busType, 'HDG1-98')">
                    </div>
                    <div
                        class="line-1-putty-baking"
                        v-if="putty.hasOwnProperty('HDG1-99') && putty['HDG1-99'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-99'].busType, 'HDG1-99')">
                    </div>
                    <div
                        class="line-1-putty-rough-grinding"
                        v-if="putty.hasOwnProperty('HDG5-13') && putty['HDG5-13'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG5-13'].busType, 'HDG5-13')">
                    </div>

                    <div
                        class="line-2-putty-scraping"
                        v-if="putty.hasOwnProperty('HDG1-100') && putty['HDG1-100'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-100'].busType, 'HDG1-100')">
                    </div>
                    <div
                        class="line-2-station-1"
                        v-if="putty.hasOwnProperty('HDG1-101') && putty['HDG1-101'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-101'].busType, 'HDG1-101')">
                    </div>
                    <div
                        class="line-2-station-2"
                        v-if="putty.hasOwnProperty('HDG1-102') && putty['HDG1-102'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-102'].busType, 'HDG1-102')">
                    </div>
                    <div
                        class="line-2-station-3"
                        v-if="putty.hasOwnProperty('HDG1-103') && putty['HDG1-103'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-103'].busType, 'HDG1-103')">
                    </div>
                    <div
                        class="line-2-putty-baking"
                        v-if="putty.hasOwnProperty('HDG1-104') && putty['HDG1-104'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-104'].busType, 'HDG1-104')">
                    </div>
                    <div
                        class="line-2-putty-rough-grinding"
                        v-if="putty.hasOwnProperty('HDG5-14') && putty['HDG5-14'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG5-14'].busType, 'HDG5-14')">
                    </div>

                    <div
                        class="line-3-station-1"
                        v-if="putty.hasOwnProperty('HDG1-105') && putty['HDG1-105'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-105'].busType, 'HDG1-105')">
                    </div>
                    <div
                        class="line-3-seal"
                        v-if="putty.hasOwnProperty('HDG1-106') && putty['HDG1-106'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-106'].busType, 'HDG1-106')">
                    </div>
                    <div
                        class="line-3-station-2"
                        v-if="putty.hasOwnProperty('HDG1-107') && putty['HDG1-107'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-107'].busType, 'HDG1-107')">
                    </div>
                    <div
                        class="line-3-dust-removal"
                        v-if="putty.hasOwnProperty('HDG1-108') && putty['HDG1-108'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-108'].busType, 'HDG1-108')">
                    </div>
                    <div
                        class="line-3-putty-fine-grinding"
                        v-if="putty.hasOwnProperty('HDG1-109') && putty['HDG1-109'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-109'].busType, 'HDG1-109')">
                    </div>
                    <div
                        class="line-3-putty-fine-scraping"
                        v-if="putty.hasOwnProperty('HDG5-15') && putty['HDG5-15'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG5-15'].busType, 'HDG5-15')">
                    </div>

                    <div
                        class="line-4-station-1"
                        v-if="putty.hasOwnProperty('HDG1-110') && putty['HDG1-110'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-110'].busType, 'HDG1-110')">
                    </div>
                    <div
                        class="line-4-seal"
                        v-if="putty.hasOwnProperty('HDG1-111') && putty['HDG1-111'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-111'].busType, 'HDG1-111')">
                    </div>
                    <div
                        class="line-4-station-2"
                        v-if="putty.hasOwnProperty('HDG1-112') && putty['HDG1-112'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-112'].busType, 'HDG1-112')">
                    </div>
                    <div
                        class="line-4-dust-removal"
                        v-if="putty.hasOwnProperty('HDG1-113') && putty['HDG1-113'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-113'].busType, 'HDG1-113')">
                    </div>
                    <div
                        class="line-4-putty-fine-grinding"
                        v-if="putty.hasOwnProperty('HDG1-114') && putty['HDG1-114'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG1-114'].busType, 'HDG1-114')">
                    </div>
                    <div
                        class="line-4-putty-fine-scraping"
                        v-if="putty.hasOwnProperty('HDG5-16') && putty['HDG5-16'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG5-16'].busType, 'HDG5-16')">
                    </div>
                </div>
            </div>
            <!--腻子下半作业区-->
            <div class="putty-b-pack" @click="doPuttyClick">
                <div>
                    <div
                        class="line-1-putty-baking"
                        v-if="putty.hasOwnProperty('HDG5-17') && putty['HDG5-17'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(putty['HDG5-17'].busType, 'HDG5-17')">
                    </div>
                </div>
            </div>
            <!--中涂左作业区-->
            <div class="middle-coat-l-pack" @click="doMiddleCoatClick">
                <div>
                    <div
                        class="line-1-medium-spray-paint"
                        v-if="middleCoat.hasOwnProperty('HDG1-115') && middleCoat['HDG1-115'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-115'].busType, 'HDG1-115')">
                    </div>
                    <div
                        class="line-1-bake"
                        v-if="middleCoat.hasOwnProperty('HDG1-116') && middleCoat['HDG1-116'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-116'].busType, 'HDG1-116')">
                    </div>
                    <div
                        class="line-1-shading"
                        v-if="middleCoat.hasOwnProperty('HDG1-117') && middleCoat['HDG1-117'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-117'].busType, 'HDG1-117')">
                    </div>
                    <div
                        class="line-1-polishing"
                        v-if="middleCoat.hasOwnProperty('HDG1-118') && middleCoat['HDG1-118'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-118'].busType, 'HDG1-118')">
                    </div>
                    <div
                        class="line-1-delivery-and-dust-removal"
                        v-if="middleCoat.hasOwnProperty('HDG1-119') && middleCoat['HDG1-119'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-119'].busType, 'HDG1-119')">
                    </div>

                    <div
                        class="line-2-station-1"
                        v-if="middleCoat.hasOwnProperty('HDG1-120') && middleCoat['HDG1-120'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-120'].busType, 'HDG1-120')">
                    </div>
                    <div
                        class="line-2-station-2"
                        v-if="middleCoat.hasOwnProperty('HDG1-121') && middleCoat['HDG1-121'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-121'].busType, 'HDG1-121')">
                    </div>
                    <div
                        class="line-2-station-3"
                        v-if="middleCoat.hasOwnProperty('HDG1-122') && middleCoat['HDG1-122'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-122'].busType, 'HDG1-122')">
                    </div>
                    <div
                        class="line-2-station-4"
                        v-if="middleCoat.hasOwnProperty('HDG1-123') && middleCoat['HDG1-123'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-123'].busType, 'HDG1-123')">
                    </div>
                    <div
                        class="line-2-station-5"
                        v-if="middleCoat.hasOwnProperty('HDG1-124') && middleCoat['HDG1-124'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-124'].busType, 'HDG1-124')">
                    </div>

                    <div
                        class="line-3-robot-spraying"
                        v-if="middleCoat.hasOwnProperty('HDG1-125') && middleCoat['HDG1-125'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-125'].busType, 'HDG1-125')">
                    </div>
                    <div
                        class="line-3-bake"
                        v-if="middleCoat.hasOwnProperty('HDG1-126') && middleCoat['HDG1-126'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-126'].busType, 'HDG1-126')">
                    </div>
                    <div
                        class="line-3-shading"
                        v-if="middleCoat.hasOwnProperty('HDG1-127') && middleCoat['HDG1-127'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-127'].busType, 'HDG1-127')">
                    </div>
                    <div
                        class="line-3-polishing"
                        v-if="middleCoat.hasOwnProperty('HDG1-128') && middleCoat['HDG1-128'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-128'].busType, 'HDG1-128')">
                    </div>
                    <div
                        class="line-3-delivery-and-dust-removal"
                        v-if="middleCoat.hasOwnProperty('HDG1-129') && middleCoat['HDG1-129'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-129'].busType, 'HDG1-129')">
                    </div>

                    <div
                        class="line-4-concentrated-paint"
                        v-if="middleCoat.hasOwnProperty('HDG1-130') && middleCoat['HDG1-130'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-130'].busType, 'HDG1-130')">
                    </div>
                    <div
                        class="line-4-drying-room"
                        v-if="middleCoat.hasOwnProperty('HDG1-131') && middleCoat['HDG1-131'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-131'].busType, 'HDG1-131')">
                    </div>
                    <div
                        class="line-4-station-1"
                        v-if="middleCoat.hasOwnProperty('HDG1-132') && middleCoat['HDG1-132'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-132'].busType, 'HDG1-132')">
                    </div>
                    <div
                        class="line-4-station-2"
                        v-if="middleCoat.hasOwnProperty('HDG1-133') && middleCoat['HDG1-133'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG1-133'].busType, 'HDG1-133')">
                    </div>
                </div>
            </div>
            <!--中涂右作业区-->
            <div class="middle-coat-r-pack" @click="doMiddleCoatClick">
                <div>
                    <div
                        class="buffer-trimming-1"
                        v-if="middleCoat.hasOwnProperty('HDG5-18') && middleCoat['HDG5-18'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG5-18'].busType, 'HDG5-18')">
                    </div>
                    <div
                        class="buffer-trimming-2"
                        v-if="middleCoat.hasOwnProperty('HDG5-19') && middleCoat['HDG5-19'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG5-19'].busType, 'HDG5-19')">
                    </div>
                    <div
                        class="buffer-trimming-3"
                        v-if="middleCoat.hasOwnProperty('HDG5-20') && middleCoat['HDG5-20'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(middleCoat['HDG5-20'].busType, 'HDG5-20')">
                    </div>
                </div>
            </div>
            <!--面/色漆作业区-->
            <div class="complexion-paint-pack" @click="doComplexionPaintClick">
                <div>
                    <div
                        class="reserved-station-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-134') && complexionPaint['HDG1-134'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-134'].busType, 'HDG1-134')">
                    </div>
                    <div
                        class="reserved-station-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-135') && complexionPaint['HDG1-135'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-135'].busType, 'HDG1-135')">
                    </div>
                    <div
                        class="reserved-station-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-136') && complexionPaint['HDG1-136'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-136'].busType, 'HDG1-136')">
                    </div>
                    <div
                        class="reserved-station-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-137') && complexionPaint['HDG1-137'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-137'].busType, 'HDG1-137')">
                    </div>
                    <div
                        class="reserved-station-5"
                        v-if="complexionPaint.hasOwnProperty('HDG1-138') && complexionPaint['HDG1-138'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-138'].busType, 'HDG1-138')">
                    </div>
                    <div
                        class="reserved-station-6"
                        v-if="complexionPaint.hasOwnProperty('HDG1-139') && complexionPaint['HDG1-139'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-139'].busType, 'HDG1-139')">
                    </div>
                    <div
                        class="reserved-station-7"
                        v-if="complexionPaint.hasOwnProperty('HDG1-140') && complexionPaint['HDG1-140'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-140'].busType, 'HDG1-140')">
                    </div>
                    <div
                        class="reserved-station-8"
                        v-if="complexionPaint.hasOwnProperty('HDG1-141') && complexionPaint['HDG1-141'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-141'].busType, 'HDG1-141')">
                    </div>
                    <div
                        class="reserved-station-9"
                        v-if="complexionPaint.hasOwnProperty('HDG1-142') && complexionPaint['HDG1-142'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-142'].busType, 'HDG1-142')">
                    </div>
                    <div
                        class="reserved-station-10"
                        v-if="complexionPaint.hasOwnProperty('HDG1-143') && complexionPaint['HDG1-143'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-143'].busType, 'HDG1-143')">
                    </div>
                    <div
                        class="reserved-station-11"
                        v-if="complexionPaint.hasOwnProperty('HDG1-144') && complexionPaint['HDG1-144'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-144'].busType, 'HDG1-144')">
                    </div>
                    <div
                        class="reserved-station-12"
                        v-if="complexionPaint.hasOwnProperty('HDG1-145') && complexionPaint['HDG1-145'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-145'].busType, 'HDG1-145')">
                    </div>
                    <div
                        class="reserved-station-13"
                        v-if="complexionPaint.hasOwnProperty('HDG1-146') && complexionPaint['HDG1-146'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-146'].busType, 'HDG1-146')">
                    </div>

                    <div
                        class="column-1-pattern-paste-1-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-150') && complexionPaint['HDG1-150'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-150'].busType, 'HDG1-150')">
                    </div>
                    <div
                        class="column-1-pattern-paste-1-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-151') && complexionPaint['HDG1-151'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-151'].busType, 'HDG1-151')">
                    </div>
                    <div
                        class="column-1-pattern-paste-1-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-152') && complexionPaint['HDG1-152'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-152'].busType, 'HDG1-152')">
                    </div>
                    <div
                        class="column-1-pattern-paste-1-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-153') && complexionPaint['HDG1-153'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-153'].busType, 'HDG1-153')">
                    </div>
                    <div
                        class="column-1-pattern-paste-2-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-154') && complexionPaint['HDG1-154'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-154'].busType, 'HDG1-154')">
                    </div>
                    <div
                        class="column-1-pattern-paste-2-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-155') && complexionPaint['HDG1-155'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-155'].busType, 'HDG1-155')">
                    </div>
                    <div
                        class="column-1-pattern-paste-2-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-156') && complexionPaint['HDG1-156'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-156'].busType, 'HDG1-156')">
                    </div>
                    <div
                        class="column-1-pattern-paste-2-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-157') && complexionPaint['HDG1-157'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-157'].busType, 'HDG1-157')">
                    </div>
                    <div
                        class="column-1-AUDIT"
                        v-if="complexionPaint.hasOwnProperty('HDG1-158') && complexionPaint['HDG1-158'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-158'].busType, 'HDG1-158')">
                    </div>
                    <div
                        class="column-1-repair-delivery-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-159') && complexionPaint['HDG1-159'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-159'].busType, 'HDG1-159')">
                    </div>
                    <div
                        class="column-1-repair-delivery-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-160') && complexionPaint['HDG1-160'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-160'].busType, 'HDG1-160')">
                    </div>
                    <div
                        class="column-1-finished-car-pack"
                        v-if="complexionPaint.hasOwnProperty('HDG1-161') && complexionPaint['HDG1-161'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-161'].busType, 'HDG1-161')">
                    </div>
                    <div
                        class="column-1-drying-room"
                        v-if="complexionPaint.hasOwnProperty('HDG1-162') && complexionPaint['HDG1-162'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-162'].busType, 'HDG1-162')">
                    </div>

                    <div
                        class="column-2-station-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-166') && complexionPaint['HDG1-166'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-166'].busType, 'HDG1-166')">
                    </div>
                    <div
                        class="column-2-topcoat-drying-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-169') && complexionPaint['HDG1-169'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-169'].busType, 'HDG1-169')">
                    </div>
                    <div
                        class="column-2-topcoat-drying-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-172') && complexionPaint['HDG1-172'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-172'].busType, 'HDG1-172')">
                    </div>
                    <div
                        class="column-2-paint-spraying-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-175') && complexionPaint['HDG1-175'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-175'].busType, 'HDG1-175')">
                    </div>
                    <div
                        class="column-2-station-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-178') && complexionPaint['HDG1-178'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-178'].busType, 'HDG1-178')">
                    </div>
                    <div
                        class="column-2-paint-spraying-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-181') && complexionPaint['HDG1-181'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-181'].busType, 'HDG1-181')">
                    </div>
                    <div
                        class="column-2-station-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-184') && complexionPaint['HDG1-184'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-184'].busType, 'HDG1-184')">
                    </div>
                    <div
                        class="column-2-station-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-187') && complexionPaint['HDG1-187'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-187'].busType, 'HDG1-187')">
                    </div>
                    <div
                        class="column-2-paint-spraying-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-190') && complexionPaint['HDG1-190'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-190'].busType, 'HDG1-190')">
                    </div>
                    <div
                        class="column-2-paint-spraying-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-193') && complexionPaint['HDG1-193'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-193'].busType, 'HDG1-193')">
                    </div>
                    <div
                        class="column-2-flowing-room"
                        v-if="complexionPaint.hasOwnProperty('HDG1-196') && complexionPaint['HDG1-196'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-196'].busType, 'HDG1-196')">
                    </div>
                    <div
                        class="column-2-station-5"
                        v-if="complexionPaint.hasOwnProperty('HDG1-199') && complexionPaint['HDG1-199'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-199'].busType, 'HDG1-199')">
                    </div>
                    <div
                        class="column-2-drying-room"
                        v-if="complexionPaint.hasOwnProperty('HDG1-202') && complexionPaint['HDG1-202'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-202'].busType, 'HDG1-202')">
                    </div>

                    <div
                        class="column-3-topcoat-drying"
                        v-if="complexionPaint.hasOwnProperty('HDG1-167') && complexionPaint['HDG1-167'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-167'].busType, 'HDG1-167')">
                    </div>
                    <div
                        class="column-3-topcoat-spraying"
                        v-if="complexionPaint.hasOwnProperty('HDG1-170') && complexionPaint['HDG1-170'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-170'].busType, 'HDG1-170')">
                    </div>
                    <div
                        class="column-3-station-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-173') && complexionPaint['HDG1-173'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-173'].busType, 'HDG1-173')">
                    </div>
                    <div
                        class="column-3-station-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-176') && complexionPaint['HDG1-176'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-176'].busType, 'HDG1-176')">
                    </div>
                    <div
                        class="column-3-station-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-179') && complexionPaint['HDG1-179'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-179'].busType, 'HDG1-179')">
                    </div>
                    <div
                        class="column-3-station-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-182') && complexionPaint['HDG1-182'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-182'].busType, 'HDG1-182')">
                    </div>
                    <div
                        class="column-3-paint-spraying"
                        v-if="complexionPaint.hasOwnProperty('HDG1-185') && complexionPaint['HDG1-185'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-185'].busType, 'HDG1-185')">
                    </div>
                    <div
                        class="column-3-station-5"
                        v-if="complexionPaint.hasOwnProperty('HDG1-188') && complexionPaint['HDG1-188'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-188'].busType, 'HDG1-188')">
                    </div>
                    <div
                        class="column-3-station-6"
                        v-if="complexionPaint.hasOwnProperty('HDG1-191') && complexionPaint['HDG1-191'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-191'].busType, 'HDG1-191')">
                    </div>
                    <div
                        class="column-3-station-7"
                        v-if="complexionPaint.hasOwnProperty('HDG1-194') && complexionPaint['HDG1-194'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-194'].busType, 'HDG1-194')">
                    </div>
                    <div
                        class="column-3-varnish"
                        v-if="complexionPaint.hasOwnProperty('HDG1-197') && complexionPaint['HDG1-197'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-197'].busType, 'HDG1-197')">
                    </div>
                    <div
                        class="column-3-station-8"
                        v-if="complexionPaint.hasOwnProperty('HDG1-200') && complexionPaint['HDG1-200'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-200'].busType, 'HDG1-200')">
                    </div>
                    <div
                        class="column-3-station-9"
                        v-if="complexionPaint.hasOwnProperty('HDG1-203') && complexionPaint['HDG1-203'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-203'].busType, 'HDG1-203')">
                    </div>

                    <div
                        class="column-4-topcoat-spraying-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-168') && complexionPaint['HDG1-168'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-168'].busType, 'HDG1-168')">
                    </div>
                    <div
                        class="column-4-station-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-171') && complexionPaint['HDG1-171'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-171'].busType, 'HDG1-171')">
                    </div>
                    <div
                        class="column-4-topcoat-spraying-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-174') && complexionPaint['HDG1-174'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-174'].busType, 'HDG1-174')">
                    </div>
                    <div
                        class="column-4-paint-drying-1"
                        v-if="complexionPaint.hasOwnProperty('HDG1-177') && complexionPaint['HDG1-177'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-177'].busType, 'HDG1-177')">
                    </div>
                    <div
                        class="column-4-station-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-180') && complexionPaint['HDG1-180'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-180'].busType, 'HDG1-180')">
                    </div>
                    <div
                        class="column-4-paint-drying-2"
                        v-if="complexionPaint.hasOwnProperty('HDG1-183') && complexionPaint['HDG1-183'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-183'].busType, 'HDG1-183')">
                    </div>
                    <div
                        class="column-4-paint-drying-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-186') && complexionPaint['HDG1-186'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-186'].busType, 'HDG1-186')">
                    </div>
                    <div
                        class="column-4-station-3"
                        v-if="complexionPaint.hasOwnProperty('HDG1-189') && complexionPaint['HDG1-189'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-189'].busType, 'HDG1-189')">
                    </div>
                    <div
                        class="column-4-paint-drying-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-192') && complexionPaint['HDG1-192'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-192'].busType, 'HDG1-192')">
                    </div>
                    <div
                        class="column-4-varnish"
                        v-if="complexionPaint.hasOwnProperty('HDG1-195') && complexionPaint['HDG1-195'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-195'].busType, 'HDG1-195')">
                    </div>
                    <div
                        class="column-4-pretreatment"
                        v-if="complexionPaint.hasOwnProperty('HDG1-198') && complexionPaint['HDG1-198'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-198'].busType, 'HDG1-198')">
                    </div>
                    <div
                        class="column-4-transfer-paint-platform"
                        v-if="complexionPaint.hasOwnProperty('HDG1-201') && complexionPaint['HDG1-201'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-201'].busType, 'HDG1-201')">
                    </div>
                    <div
                        class="column-4-station-4"
                        v-if="complexionPaint.hasOwnProperty('HDG1-204') && complexionPaint['HDG1-204'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG1-204'].busType, 'HDG1-204')">
                    </div>

                    <div
                        class="column-5-trimming-delivery-1"
                        v-if="complexionPaint.hasOwnProperty('HDG5-21') && complexionPaint['HDG5-21'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-21'].busType, 'HDG5-21')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-2"
                        v-if="complexionPaint.hasOwnProperty('HDG5-22') && complexionPaint['HDG5-22'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-22'].busType, 'HDG5-22')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-3"
                        v-if="complexionPaint.hasOwnProperty('HDG5-23') && complexionPaint['HDG5-23'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-23'].busType, 'HDG5-23')">
                    </div>
                    <div
                        class="column-5-water-mill-1"
                        v-if="complexionPaint.hasOwnProperty('HDG5-24') && complexionPaint['HDG5-24'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-24'].busType, 'HDG5-24')">
                    </div>
                    <div
                        class="column-5-water-mill-2"
                        v-if="complexionPaint.hasOwnProperty('HDG5-25') && complexionPaint['HDG5-25'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-25'].busType, 'HDG5-25')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-4"
                        v-if="complexionPaint.hasOwnProperty('HDG5-26') && complexionPaint['HDG5-26'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-26'].busType, 'HDG5-26')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-5"
                        v-if="complexionPaint.hasOwnProperty('HDG5-27') && complexionPaint['HDG5-27'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-27'].busType, 'HDG5-27')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-6"
                        v-if="complexionPaint.hasOwnProperty('HDG5-28') && complexionPaint['HDG5-28'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-28'].busType, 'HDG5-28')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-7"
                        v-if="complexionPaint.hasOwnProperty('HDG5-29') && complexionPaint['HDG5-29'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-29'].busType, 'HDG5-29')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-8"
                        v-if="complexionPaint.hasOwnProperty('HDG5-30') && complexionPaint['HDG5-30'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-30'].busType, 'HDG5-30')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-9"
                        v-if="complexionPaint.hasOwnProperty('HDG5-31') && complexionPaint['HDG5-31'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-31'].busType, 'HDG5-31')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-10"
                        v-if="complexionPaint.hasOwnProperty('HDG5-32') && complexionPaint['HDG5-32'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-32'].busType, 'HDG5-32')">
                    </div>
                    <div
                        class="column-5-trimming-delivery-11"
                        v-if="complexionPaint.hasOwnProperty('HDG5-33') && complexionPaint['HDG5-33'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(complexionPaint['HDG5-33'].busType, 'HDG5-33')">
                    </div>
                </div>
            </div>
            <!--成品车存放区-->
            <div class="finished-car-storage-pack" @click="doFinishedCarStorage">
                <div>
                    <div
                        class="line-1-station-1"
                        v-if="finishedCar.hasOwnProperty('HDG1-147') && finishedCar['HDG1-147'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-147'].busType, 'HDG1-147')">
                    </div>
                    <div
                        class="line-1-station-2"
                        v-if="finishedCar.hasOwnProperty('HDG1-163') && finishedCar['HDG1-163'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-163'].busType, 'HDG1-163')">
                    </div>
                    <div
                        class="line-1-station-3"
                        v-if="finishedCar.hasOwnProperty('HDG1-205') && finishedCar['HDG1-205'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-205'].busType, 'HDG1-205')">
                    </div>
                    <div
                        class="line-1-station-4"
                        v-if="finishedCar.hasOwnProperty('HDG1-206') && finishedCar['HDG1-206'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-206'].busType, 'HDG1-206')">
                    </div>
                    <div
                        class="line-1-station-5"
                        v-if="finishedCar.hasOwnProperty('HDG1-207') && finishedCar['HDG1-207'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-207'].busType, 'HDG1-207')">
                    </div>

                    <div
                        class="line-2-station-1"
                        v-if="finishedCar.hasOwnProperty('HDG1-148') && finishedCar['HDG1-148'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-148'].busType, 'HDG1-148')">
                    </div>
                    <div
                        class="line-2-station-2"
                        v-if="finishedCar.hasOwnProperty('HDG1-164') && finishedCar['HDG1-164'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-164'].busType, 'HDG1-164')">
                    </div>
                    <div
                        class="line-2-station-3"
                        v-if="finishedCar.hasOwnProperty('HDG1-208') && finishedCar['HDG1-208'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-208'].busType, 'HDG1-208')">
                    </div>
                    <div
                        class="line-2-station-4"
                        v-if="finishedCar.hasOwnProperty('HDG1-209') && finishedCar['HDG1-209'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-209'].busType, 'HDG1-209')">
                    </div>
                    <div
                        class="line-2-station-5"
                        v-if="finishedCar.hasOwnProperty('HDG1-210') && finishedCar['HDG1-210'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-210'].busType, 'HDG1-210')">
                    </div>

                    <div
                        class="line-3-station-1"
                        v-if="finishedCar.hasOwnProperty('HDG1-149') && finishedCar['HDG1-149'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-149'].busType, 'HDG1-149')">
                    </div>
                    <div
                        class="line-3-station-2"
                        v-if="finishedCar.hasOwnProperty('HDG1-165') && finishedCar['HDG1-165'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-165'].busType, 'HDG1-165')">
                    </div>
                    <div
                        class="line-3-station-3"
                        v-if="finishedCar.hasOwnProperty('HDG1-211') && finishedCar['HDG1-211'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-211'].busType, 'HDG1-211')">
                    </div>
                    <div
                        class="line-3-station-4"
                        v-if="finishedCar.hasOwnProperty('HDG1-212') && finishedCar['HDG1-212'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-212'].busType, 'HDG1-212')">
                    </div>
                    <div
                        class="line-3-station-5"
                        v-if="finishedCar.hasOwnProperty('HDG1-213') && finishedCar['HDG1-213'].state !== 'FREE'"
                        :class="judgeCarTypeAndCarStationStyle(finishedCar['HDG1-213'].busType, 'HDG1-213')">
                    </div>
                </div>
            </div>
            <!--钣金车进工位-->
            <div
                class="sheet-metal-car"
                v-if="overall.hasOwnProperty('HXG1-1') && overall['HXG1-1'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(overall['HXG1-1'].busType, 'HXG1-1')">
            </div>
            <!--涂装车出工位-->
            <div
                class="paint-car"
                v-if="overall.hasOwnProperty('HXG2-1') && overall['HXG2-1'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(overall['HXG2-1'].busType, 'HXG2-1')">
            </div>
            <!--数据展示区域-->
            <div class="data-demonstration-pack">
                <div>
                    <div class="yesterday-in-car-num">
                        <span v-if="inOutCarInfo.yesterdayCarInNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.yesterdayCarInNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.yesterdayCarInNum}}</span>
                    </div>
                    <div class="today-in-car-num">
                        <span v-if="inOutCarInfo.todayCarInNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.todayCarInNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.todayCarInNum}}</span>
                    </div>
                    <div class="electrophoresis-today-in-car-num">
                        <span v-if="inOutCarInfo.electorophoresisTodayCarInNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.electorophoresisTodayCarInNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.electorophoresisTodayCarInNum}}</span>
                    </div>
                    <div class="sealed-anticorrosion-today-in-car-num">
                        <span v-if="inOutCarInfo.sealedAnticorrosionTodayCarInNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.sealedAnticorrosionTodayCarInNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.sealedAnticorrosionTodayCarInNum}}</span>
                    </div>
                    <div class="putty-today-in-car-num">
                        <span v-if="inOutCarInfo.puttyTodayCarInNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.puttyTodayCarInNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.puttyTodayCarInNum}}</span>
                    </div>
                    <div class="middle-coat-today-in-car-num">
                        <span v-if="inOutCarInfo.middleCoatTodayCarInNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.middleCoatTodayCarInNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.middleCoatTodayCarInNum}}</span>
                    </div>
                    <div class="complexion-paint-today-in-car-num">
                        <span v-if="inOutCarInfo.complexionPaintTodayCarInNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.complexionPaintTodayCarInNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.complexionPaintTodayCarInNum}}</span>
                    </div>

                    <div class="yesterday-out-car-num">
                        <span v-if="inOutCarInfo.yesterdayCarOutNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.yesterdayCarOutNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.yesterdayCarOutNum}}</span>
                    </div>
                    <div class="today-out-car-num">
                        <span v-if="inOutCarInfo.todayCarOutNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.todayCarOutNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.todayCarOutNum}}</span>
                    </div>
                    <div class="electrophoresis-today-out-car-num">
                        <span v-if="inOutCarInfo.electorophoresisTodayCarOutNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.electorophoresisTodayCarOutNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.electorophoresisTodayCarOutNum}}</span>
                    </div>
                    <div class="sealed-anticorrosion-today-out-car-num">
                        <span v-if="inOutCarInfo.sealedAnticorrosionTodayCarOutNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.sealedAnticorrosionTodayCarOutNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.sealedAnticorrosionTodayCarOutNum}}</span>
                    </div>
                    <div class="putty-today-out-car-num">
                        <span v-if="inOutCarInfo.puttyTodayCarOutNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.puttyTodayCarOutNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.puttyTodayCarOutNum}}</span>
                    </div>
                    <div class="middle-coat-today-out-car-num">
                        <span v-if="inOutCarInfo.middleCoatTodayCarOutNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.middleCoatTodayCarOutNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.middleCoatTodayCarOutNum}}</span>
                    </div>
                    <div class="complexion-paint-today-out-car-num">
                        <span v-if="inOutCarInfo.complexionPaintTodayCarOutNum === 0">0</span>
                        <span
                            v-else-if="inOutCarInfo.complexionPaintTodayCarOutNum === null"
                            class="no-message">
                            暂无
                        </span>
                        <span v-else>{{inOutCarInfo.complexionPaintTodayCarOutNum}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'MonitorIndex',
        data () {
            return {
                // 筛选条件工单号
                workOrderNo: '',
                // 筛选条件订单号
                orderNo: '',
                // 车体定位数据
                carLocation: {},
                // 整体区域实时信息(钣金车进、钣金车出两工位)
                overall: {},
                // 电泳工作区实时信息
                electorophoresis: {},
                // 钣金车存放区实时信息
                sheetMetalCar: {},
                // 密封防腐工作区实时信息
                sealedAnticorrosion: {},
                // 腻子作业区实时信息
                putty: {},
                // 中涂作业区实时信息
                middleCoat: {},
                // 面/色漆作业区实时信息
                complexionPaint: {},
                // 成品车存放区实时信息
                finishedCar: {},
                // 定时器
                timer: '',
                // 进出车数据展示
                inOutCarInfo: {
                    // 昨日进车数量
                    yesterdayCarInNum: null,
                    // 当日进车数量
                    todayCarInNum: null,
                    // 电泳当日进车数量
                    electorophoresisTodayCarInNum: null,
                    // 密封防腐当日进车数量
                    sealedAnticorrosionTodayCarInNum: null,
                    // 腻子当日进车数量
                    puttyTodayCarInNum: null,
                    // 中涂当日进车数量
                    middleCoatTodayCarInNum: null,
                    // 面/色漆当日进车数量
                    complexionPaintTodayCarInNum: null,
                    // 昨日交车数量
                    yesterdayCarOutNum: null,
                    // 当日交车数量
                    todayCarOutNum: null,
                    // 电泳当日交车数量
                    electorophoresisTodayCarOutNum: null,
                    // 密封防腐当日交车数量
                    sealedAnticorrosionTodayCarOutNum: null,
                    // 腻子当日交车数量
                    puttyTodayCarOutNum: null,
                    // 中涂当日交车数量
                    middleCoatTodayCarOutNum: null,
                    // 面/色漆当日交车数量
                    complexionPaintTodayCarOutNum: null
                }
            }
        },
        methods: {
            // 点击电泳工作区
            doElectrophoresisClick () {
                this.$router.push({
                    path: '/monitor/monitorElectrophoresis'
                })
            },
            // 点击腻子作业区
            doPuttyClick () {
                this.$router.push({
                    path: '/monitor/monitorPutty'
                })
            },
            // 点击中涂作业区
            doMiddleCoatClick () {
                this.$router.push({
                    path: '/monitor/monitorMiddleCoat'
                })
            },
            // 点击面/色漆作业区
            doComplexionPaintClick () {
                this.$router.push({
                    path: '/monitor/monitorComplexionPaint'
                })
            },
            // 点击钣金车存放区
            doSheetMetalCarClick () {
                this.$router.push({
                    path: '/monitor/monitorSheetMetalCar'
                })
            },
            // 点击密封防腐作业区
            doSealedAnticorrosion () {
                this.$router.push({
                    path: '/monitor/monitorSealedAnticorrosion'
                })
            },
            // 点击成品车存放区
            doFinishedCarStorage () {
                this.$router.push({
                    path: '/monitor/monitorFinishedCar'
                })
            },
            // 获取涂装车间实时信息
            getPaintingWorkshopRealTimeData () {
                this.$fetch('area-controller/realTime-get', {}).then((response) => {
                    for (let item of response) {
                        if (item.code === '0') {
                            this.overall = _.cloneDeep(item.stationMap)
                        }
                        if (item.code === '1') {
                            this.sheetMetalCar = _.cloneDeep(item.stationMap)
                        }
                        if (item.code === '2') {
                            this.electorophoresis = _.cloneDeep(item.stationMap)
                        }
                        if (item.code === '3') {
                            this.sealedAnticorrosion = _.cloneDeep(item.stationMap)
                        }
                        if (item.code === '4') {
                            this.putty = _.cloneDeep(item.stationMap)
                        }
                        if (item.code === '5') {
                            this.middleCoat = _.cloneDeep(item.stationMap)
                        }
                        if (item.code === '6') {
                            this.complexionPaint = _.cloneDeep(item.stationMap)
                        }
                        if (item.code === '7') {
                            this.finishedCar = _.cloneDeep(item.stationMap)
                        }
                    }
                })
            },
            // 解析车体类型及车体定位样式
            judgeCarTypeAndCarStationStyle (carType, carNumber) {
                // 判断工位是否被定位再判断工位上的车体类型
                if (this.carLocation.hasOwnProperty(carNumber)) {
                    return 'monitor-car-location-position'
                } else {
                    if (carType === 'OWN') {
                        return ''
                    } else {
                        return 'monitor-car-external'
                    }
                }
            },
            // 获取各区域进车及交车数量
            getAreaBusStatisticsNumber () {
                this.$fetch('area-controller/statistics-get', {}).then(response => {
                    for (let item of response) {
                        if (item.areaNo === '0') {
                            if (item.busType === 'IN') {
                                if (item.dateType === 'YESTERDAY') {
                                    this.inOutCarInfo.yesterdayCarInNum = _.cloneDeep(item.size)
                                } else {
                                    this.inOutCarInfo.todayCarInNum = _.cloneDeep(item.size)
                                }
                            } else {
                                if (item.dateType === 'YESTERDAY') {
                                    this.inOutCarInfo.yesterdayCarOutNum = _.cloneDeep(item.size)
                                } else {
                                    this.inOutCarInfo.todayCarOutNum = _.cloneDeep(item.size)
                                }
                            }
                        }
                        if (item.areaNo === '2') {
                            if (item.busType === 'IN') {
                                this.inOutCarInfo.electorophoresisTodayCarInNum = _.cloneDeep(item.size)
                            } else {
                                this.inOutCarInfo.electorophoresisTodayCarOutNum = _.cloneDeep(item.size)
                            }
                        }
                        if (item.areaNo === '3') {
                            if (item.busType === 'IN') {
                                this.inOutCarInfo.sealedAnticorrosionTodayCarInNum = _.cloneDeep(item.size)
                            } else {
                                this.inOutCarInfo.sealedAnticorrosionTodayCarOutNum = _.cloneDeep(item.size)
                            }
                        }
                        if (item.areaNo === '4') {
                            if (item.busType === 'IN') {
                                this.inOutCarInfo.puttyTodayCarInNum = _.cloneDeep(item.size)
                            } else {
                                this.inOutCarInfo.puttyTodayCarOutNum = _.cloneDeep(item.size)
                            }
                        }
                        if (item.areaNo === '5') {
                            if (item.busType === 'IN') {
                                this.inOutCarInfo.middleCoatTodayCarInNum = _.cloneDeep(item.size)
                            } else {
                                this.inOutCarInfo.middleCoatTodayCarOutNum = _.cloneDeep(item.size)
                            }
                        }
                        if (item.areaNo === '6') {
                            if (item.busType === 'IN') {
                                this.inOutCarInfo.complexionPaintTodayCarInNum = _.cloneDeep(item.size)
                            } else {
                                this.inOutCarInfo.complexionPaintTodayCarOutNum = _.cloneDeep(item.size)
                            }
                        }
                    }
                })
            },
            // 点击搜索按钮
            doSearchClick () {
                let queryParams = { orderNo: this.orderNo, workOrderNo: this.workOrderNo }
                this.$fetch('area-controller/workOrderNo-get', queryParams).then(response => {
                    this.carLocation = _.cloneDeep(response)
                    // 清除定时器
                    clearInterval(this.timer)
                    // 轮询查询区域实时信息
                    this.pollingGetAreaRealTimeData()
                })
            },
            // 轮询查询区域实时信息
            pollingGetAreaRealTimeData () {
                for (let key in this.inOutCarInfo) {
                    this.inOutCarInfo[key] = null
                }
                // 获取涂装车间实时信息
                this.getPaintingWorkshopRealTimeData()
                // 获取各区域进车及交车数量
                this.getAreaBusStatisticsNumber()
                this.timer = setInterval(() => {
                    for (let key in this.inOutCarInfo) {
                        this.inOutCarInfo[key] = null
                    }
                    // 获取涂装车间实时信息
                    this.getPaintingWorkshopRealTimeData()
                    // 获取各区域进车及交车数量
                    this.getAreaBusStatisticsNumber()
                    this.carLocation = {}
                }, 20000)
            }
        },
        mounted () {
            setTimeout(() => {
                // 轮询查询区域实时信息
                this.pollingGetAreaRealTimeData()
            }, 0)
        }
    }
</script>

<style lang="scss" scoped>
     html {
        position: relative;
    }

    @keyframes identifier {
        0% { transform: translateY(0px);}
        20% { transform: translateY(-70px);}
        40% { transform: translateY(-140px);}
        60% { transform: translateY(-210px);}
        80% { transform: translateY(-280px);}
        100% { transform: translateY(-350px);}
        // 100% {transform: translateY(-450px);}
    }

    .monitor-pack {
        overflow-x: hidden;
        overflow-y: visible;
        height: 1400px;
        width: 100%;
        background-color: #001927;
        // animation: identifier 10s infinite alternate;
        // animation: identifier 8s infinite  cubic-bezier(1,0,0.5,0);
        .view-pack {
            margin: 0 auto;
            width: 1600px;
            height: 1400px;
            background: url('../../assets/images/Monitor/monitor_index_bg.png');
            background-position: center 0;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
            position: relative;

            // 车体定位筛选条件
            .search-pack {
                width: 550px;
                height: 50px;
                position: absolute;
                right: 0;
                top: 60px;
                display: flex;
                justify-content: center;
                align-items: center;

                div {
                    width: 225px;
                    height: 50px;
                    line-height: 50px;
                    color: #00aef7;
                    font-weight: bold;

                    /deep/ .el-input {

                        .el-input__inner {
                            background-color: #001927;
                            border: 1px solid #00aef7;
                            color: rgb(64, 158, 255);
                        }

                        input::-webkit-input-placeholder {
                            color: rgb(64, 158, 255);
                            font-weight: bold;
                        }
                    }
                }
            }

            // 电泳作业区
            .electrophoresis-pack {
                cursor: pointer;
                position: absolute;
                top: 144px;
                left: 134px;

                div {
                    position: relative;
                    height: 453px;
                    width: 562px;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 上左区
                    // 水洗4
                    .t-l-washed-4 {
                        top: 37px;
                        left: 210px;
                    }

                    // 纯水洗1
                    .t-l-pure-water-wash-1 {
                        left: 210px;
                        top: 67px;
                    }

                    // 电泳转移槽
                    .t-l-electrophoretic-transfer {
                        left: 210px;
                        top: 97px;
                    }

                    // 电泳槽
                    .t-l-electrophoretic-tank {
                        left: 210px;
                        top: 150px;
                    }

                    // UF1
                    .t-l-UF1 {
                        left: 210px;
                        top: 179px;
                    }

                    // UF2
                    .t-l-UF2 {
                        left: 210px;
                        top: 210px;
                    }

                    // 纯水洗2
                    .t-l-pure-water-wash-2 {
                        left: 210px;
                        top: 237px;
                    }

                    // 电泳下件
                    .t-l-electrophoresis-down {
                        left: 210px;
                        top: 274px;
                    }

                    // 车道点
                    .t-l-station {
                        left: 236px;
                        top: 300px;
                    }

                    // 上中区
                    // 水洗3
                    .t-m-washed-3 {
                        top: 38px;
                        left: 385px
                    }

                    // 磷化
                    .t-m-phosphating {
                        left: 385px;
                        top: 86px;
                    }

                    // 表调
                    .t-m-tune {
                        left: 385px;
                        top: 117px;
                    }

                    // 水洗2
                    .t-m-washed-2 {
                        left: 385px;
                        top: 147px;
                    }

                    // 水洗1
                    .t-m-washed-1 {
                        left: 385px;
                        top: 177px;
                    }

                    // 脱脂
                    .t-m-degreasing {
                        left: 385px;
                        top: 208px;
                    }

                    // 预脱脂
                    .t-m-pre-degreasing {
                        left: 385px;
                        top: 238px;
                    }

                    // 电泳上件
                    .t-m-electrophoresis-up {
                        left: 385px;
                        top: 275px;
                    }

                    // 车道点
                    .t-m-station {
                        top: 300px;
                        left: 396px;
                    }

                    // 中间两车道点
                    // 车道点1
                    .m-m-station-1 {
                        top: 275px;
                        left: 320px;
                    }
                    // 车道点2
                    .m-m-station-2 {
                        top: 300px;
                        left: 320px;
                    }

                    // 上右区
                    // 预处理第一行
                    .t-r-pretreatment-line-1 {
                        left: 485px;
                        top: 47px;
                    }

                    // 预处理第二行
                    .t-r-pretreatment-line-2 {
                        left: 485px;
                        top: 77px;
                    }

                    // 预处理第三行
                    .t-r-pretreatment-line-3 {
                        left: 485px;
                        top: 107px;
                    }

                    // 预处理第四行
                    .t-r-pretreatment-line-4 {
                        left: 485px;
                        top: 134px;
                    }

                    // 车道点1
                    .t-r-station-1 {
                        top: 160px;
                        left: 505px;
                    }

                    // 车道点2
                    .t-r-station-2 {
                        top: 189px;
                        left: 505px;
                    }

                    // 车道点3
                    .t-r-station-3 {
                        top: 216px;
                        left: 505px;
                    }

                    // 车道点4
                    .t-r-station-4 {
                        top: 244px;
                        left: 505px;
                    }

                    // 高压水洗
                    .t-r-high-pressure-water-wash {
                        left: 485px;
                        top: 275px;
                    }

                    // 车道点
                    .t-r-station {
                        left: 505px;
                        top: 300px;
                    }

                    // 左区
                    // 车道点1
                    .l-station-1 {
                        top: 302px;
                        left: 55px;
                    }

                    // 车道点2
                    .l-station-2 {
                        left: 55px;
                        top: 325px;
                    }

                    // 车道点3
                    .l-station-3 {
                        left: 55px;
                        top: 347px;
                    }

                    // 车道点4
                    .l-station-4 {
                        left: 55px;
                        top: 370px;
                    }

                    // 车道点5
                    .l-station-5 {
                        left: 55px;
                        top: 396px;
                    }

                    // 车道点6
                    .l-station-6 {
                        left: 55px;
                        top: 430px;
                    }

                    // 下区
                    // 第一列电泳烘烤1
                    .b-column-1-electrophoresis-baking-1 {
                        left: 210px;
                        top: 335px;
                    }

                    // 第一列电泳烘烤2
                    .b-column-1-electrophoresis-baking-2 {
                        left: 210px;
                        top: 368px;
                    }

                    // 第一列车架烘烤
                    .b-column-1-frame-baking {
                        left: 210px;
                        top: 398px;
                    }

                    // 第一列车道点
                    .b-column-1-station {
                        left: 238px;
                        top: 430px;
                    }

                    // 第二列电泳烘烤1
                    .b-column-2-electrophoresis-baking-1 {
                        top: 335px;
                        left: 298px;
                    }

                    // 第二列电泳烘烤2
                    .b-column-2-electrophoresis-baking-2 {
                        left: 298px;
                        top: 368px;
                    }

                    // 第二列车道点1
                    .b-column-2-station-1 {
                        left: 320px;
                        top: 398px;
                    }

                    // 第二列车道点2
                    .b-column-2-station-2 {
                        left: 320px;
                        top: 430px;
                    }

                    // 第三列电泳烘烤
                    .b-column-3-electrophoresis-baking {
                        top: 335px;
                        left: 385px;
                    }

                    // 第三列强冷
                    .b-column-3-strong-cold {
                        left: 385px;
                        top: 368px;
                    }

                    // 第三列车道1
                    .b-column-3-station-1 {
                        top: 398px;
                        left: 410px;
                    }

                    // 第三列车道2
                    .b-column-3-station-2 {
                        left: 410px;
                        top: 430px;
                    }

                    // 第四列强冷
                    .b-column-4-strong-cold {
                        top: 335px;
                        left: 485px;
                    }

                    // 第四列车道点1
                    .b-column-4-station-1 {
                        left: 505px;
                        top: 367px;
                    }

                    // 第四列车架喷漆
                    .b-column-4-frame-painting {
                        top: 398px;
                        left: 485px;
                    }

                    // 第四列车道点2
                    .b-column-4-station-2 {
                        left: 505px;
                        top: 430px;
                    }
                }
            }

            // 钣金车存放区
            .sheet-metal-car-pack {
                cursor: pointer;
                position: absolute;
                top: 167px;
                left: 787px;

                div {
                    width: 450px;
                    height: 173px;
                    position: relative;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 钣金车存放线A1
                    .sheet-metal-car-A1 {
                        left: 13px;
                        top: 5px;
                    }

                    // A1车道点1
                    .A1-station-1 {
                        top: 5px;
                        left: 132px;
                    }

                    // A1车道点2
                    .A1-station-2 {
                        top: 5px;
                        left: 222px;
                    }

                    // A1车道点3
                    .A1-station-3 {
                        top: 5px;
                        left: 320px;
                    }

                    // A1车道点4
                    .A1-station-4 {
                        top: 5px;
                        left: 410px;
                    }

                    // 钣金车存放线A2
                    .sheet-metal-car-A2 {
                        left: 13px;
                        top: 27px;
                    }

                    // A2车道点1
                    .A2-station-1 {
                        top: 27px;
                        left: 132px;
                    }

                    // A2车道点2
                    .A2-station-2 {
                        top: 27px;
                        left: 222px;
                    }

                    // A2车道点3
                    .A2-station-3 {
                        top: 27px;
                        left: 320px;
                    }

                    // A2车道点4
                    .A2-station-4 {
                        top: 27px;
                        left: 410px;
                    }

                    // 钣金车存放线A3
                    .sheet-metal-car-A3 {
                        left: 13px;
                        top: 49px;
                    }

                    // A3车道点1
                    .A3-station-1 {
                        top: 49px;
                        left: 132px;
                    }

                    // A3车道点2
                    .A3-station-2 {
                        top: 49px;
                        left: 222px;
                    }

                    // A3车道点3
                    .A3-station-3 {
                        top: 49px;
                        left: 320px;
                    }

                    // A3车道点4
                    .A3-station-4 {
                        top: 49px;
                        left: 410px;
                    }

                    // 钣金车存放线A4
                    .sheet-metal-car-A4 {
                        left: 13px;
                        top: 71px;
                    }

                    // A4车道点1
                    .A4-station-1 {
                        top: 71px;
                        left: 132px;
                    }

                    // A4车道点2
                    .A4-station-2 {
                        top: 71px;
                        left: 222px;
                    }

                    // A4车道点3
                    .A4-station-3 {
                        top: 71px;
                        left: 320px;
                    }

                    // A4车道点4
                    .A4-station-4 {
                        top: 71px;
                        left: 410px;
                    }

                    // 钣金存放线A5
                    .sheet-metal-car-A5 {
                        left: 13px;
                        top: 91px;
                    }

                    // A5车道点1
                    .A5-station-1 {
                        top: 91px;
                        left: 132px;
                    }

                    // A5车道点2
                    .A5-station-2 {
                        top: 91px;
                        left: 222px;
                    }

                    // A5车道点3
                    .A5-station-3 {
                        top: 91px;
                        left: 320px;
                    }

                    // A5车道点4
                    .A5-station-4 {
                        top: 91px;
                        left: 410px;
                    }

                    // 大循环撬堆放线
                    .heap {
                        left: 13px;
                        top: 113px;
                    }

                    // 大循环撬堆放线车道点1
                    .heap-station-1 {
                        top: 113px;
                        left: 132px;
                    }

                    // 大循环撬堆放栈车道点2
                    .heap-station-2 {
                        top: 113px;
                        left: 222px;
                    }

                    // 大循环撬堆放栈车道点3
                    .heap-station-3 {
                        top: 113px;
                        left: 320px;
                    }

                    // 大循环撬堆放栈车道点4
                    .heap-station-4 {
                        top: 113px;
                        left: 410px;
                    }

                    // 脱大循环撬
                    .take-off-cycle {
                        left: 13px;
                        top: 135px;
                    }

                    // 脱大循环撬
                    .take-off-cycle-station-1 {
                        top: 135px;
                        left: 132px;
                    }

                    // 换电泳撬
                    .change-electrophoresis {
                        left: 13px;
                        top: 157px;
                    }

                    // 换电泳撬车位点1
                    .change-electrophoresis-station-1 {
                        top: 157px;
                        left: 132px;
                    }
                }
            }

            // 密封防腐作业区
            .sealed-anticorrosion-pack {
                cursor: pointer;
                position: absolute;
                top: 345px;
                left: 786px;

                div {
                    width: 650px;
                    height: 190px;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 第一行换大循环撬
                    .line-1-change-cycle {
                        top: 8px;
                        left: 13px;
                    }

                    // 第一行车顶密封
                    .line-1-roof-seal {
                        top: 8px;
                        left: 102px;
                    }

                    // 第一行玻璃钢装配
                    .line-1-frp-assembly {
                        top: 8px;
                        left: 192px;
                    }

                    // 第一行修整
                    .line-1-trim {
                        top: 8px;
                        left: 283px;
                    }

                    // 第一行打磨修整
                    .line-1-polishing {
                        top: 8px;
                        left: 374px;
                    }

                    // 第二行换大循环撬
                    .line-2-change-cycle {
                        left: 13px;
                        top: 37px;
                    }

                    // 第二行车顶密封
                    .line-2-roof-seal {
                        left: 102px;
                        top: 37px;
                    }

                    // 第二行玻璃钢装配
                    .line-2-frp-assembly {
                        left: 192px;
                        top: 37px;
                    }

                    // 第二行修整
                    .line-2-trim {
                        top: 37px;
                        left: 283px;
                    }

                    // 第二行打磨修整
                    .line-2-polishing {
                        top: 37px;
                        left: 374px;
                    }

                    // 第二行空调安装
                    .line-2-air-conditioning {
                        top: 37px;
                        left: 555px;
                    }

                    // 第三行车道点1
                    .line-3-station-1 {
                        top: 68px;
                        left: 38px;
                    }

                    // 第三行车顶密封1
                    .line-3-roof-seal-1 {
                        top: 68px;
                        left: 102px;
                    }

                    // 第三行车顶密封2
                    .line-3-roof-seal-2 {
                        top: 68px;
                        left: 192px;
                    }

                    // 第三行车顶密封3
                    .line-3-roof-seal-3 {
                        top: 68px;
                        left: 283px;
                    }

                    // 第三行车顶密封4
                    .line-3-roof-seal-4 {
                        top: 68px;
                        left: 374px;
                    }

                    // 第三行空调安装
                    .line-3-air-conditioning {
                        top: 68px;
                        left: 555px;
                    }

                    // 第四行车位点1
                    .line-4-station-1 {
                        left: 38px;
                        top: 98px;
                    }

                    // 第四行车位点2
                    .line-4-station-2 {
                        left: 125px;
                        top: 98px;
                    }

                    // 第四行车位点3
                    .line-4-station-3 {
                        left: 215px;
                        top: 98px;
                    }

                    // 第四行车位点4
                    .line-4-station-4 {
                        top: 98px;
                        left: 304px;
                    }

                    // 第四行车位点5
                    .line-4-station-5 {
                        top: 98px;
                        left: 392px;
                    }

                    // 第四行空调安装
                    .line-4-air-conditioning {
                        top: 99px;
                        left: 555px;
                    }

                    // 第五行清理1
                    .line-5-clean-up-1 {
                        top: 131px;
                        left: 13px;
                    }

                    // 第五行阻尼胶喷漆
                    .line-5-damping-glue-spray-paint {
                        top: 131px;
                        left: 102px;
                    }

                    // 第五行清理2
                    .line-5-clean-up-2 {
                        top: 131px;
                        left: 192px;
                    }

                    // 第五行发泡喷涂
                    .line-5-foaming-spray {
                        top: 131px;
                        left: 283px;
                    }

                    // 第五行遮蔽防护
                    .line-5-shadow-protection {
                        top: 131px;
                        left: 374px;
                    }

                    // 第五行车道点1
                    .line-5-station-1 {
                        top: 130px;
                        left: 576px;
                    }

                    // 第六行清理1
                    .line-6-clean-up-1 {
                        top: 162px;
                        left: 13px;
                    }

                    // 第六行阻尼胶喷涂
                    .line-6-damping-glue-spray-paint {
                        top: 162px;
                        left: 102px;
                    }

                    // 第六行清理2
                    .line-6-clean-up-2 {
                        top: 162px;
                        left: 192px;
                    }

                    // 第六行发泡喷涂
                    .line-6-foaming-spray {
                        top: 162px;
                        left: 283px;
                    }

                    // 第六行遮蔽防护
                    .line-6-shadow-protection {
                        top: 162px;
                        left: 374px;
                    }

                    // 第六行车位点1
                    .line-6-station-1 {
                        top: 160px;
                        left: 576px;
                    }
                }
            }

            // 腻子上半作业区
            .putty-t-pack {
                cursor: pointer;
                position: absolute;
                top: 562px;
                left: 786px;

                div {
                    width: 650px;
                    height: 125px;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 第一行腻子粗刮线
                    .line-1-putty-scraping {
                        top: 13px;
                        left: 16px;
                    }

                    // 第一行车位点1
                    .line-1-station-1 {
                        top: 13px;
                        left: 124px;
                    }

                    // 第一行车位点2
                    .line-1-station-2 {
                        top: 13px;
                        left: 212px;
                    }

                    // 第一行车位点3
                    .line-1-station-3 {
                        top: 13px;
                        left: 302px;
                    }

                    // 第一行腻子烘烤
                    .line-1-putty-baking {
                        top: 13px;
                        left: 375px;
                    }

                    // 第一行腻子粗磨
                    .line-1-putty-rough-grinding {
                        top: 11px;
                        left: 556px;
                    }

                    // 第二行腻子刮粗线
                    .line-2-putty-scraping {
                        left: 16px;
                        top: 43px;
                    }

                    // 第二行车位点1
                    .line-2-station-1 {
                        top: 43px;
                        left: 124px;
                    }

                    // 第二行车位点2
                    .line-2-station-2 {
                        top: 43px;
                        left: 212px;
                    }

                    // 第二行车位点3
                    .line-2-station-3 {
                        top: 43px;
                        left: 302px;
                    }

                    // 第二行腻子烘烤
                    .line-2-putty-baking {
                        top: 44px;
                        left: 375px;
                    }

                    // 第二行腻子粗磨
                    .line-2-putty-rough-grinding {
                        top: 41px;
                        left: 556px;
                    }

                    // 第三行车位点1
                    .line-3-station-1 {
                        top: 76px;
                        left: 38px;
                    }

                    // 第三行密封
                    .line-3-seal {
                        top: 75px;
                        left: 106px;
                    }

                    // 第三行车位点2
                    .line-3-station-2 {
                        top: 76px;
                        left: 215px;
                    }

                    // 第三行除尘
                    .line-3-dust-removal {
                        top: 75px;
                        left: 285px;
                    }

                    // 第三行腻子细磨
                    .line-3-putty-fine-grinding {
                        top: 75px;
                        left: 375px;
                    }

                    // 第三行腻子细刮
                    .line-3-putty-fine-scraping {
                        top: 73px;
                        left: 556px;
                    }

                    // 第四行车位点1
                    .line-4-station-1 {
                        top: 106px;
                        left: 38px;
                    }

                    // 第四行密封
                    .line-4-seal {
                        top: 105px;
                        left: 106px;
                    }

                    // 第四行车位点2
                    .line-4-station-2 {
                        top: 105px;
                        left: 214px;
                    }

                    // 第四行除尘
                    .line-4-dust-removal {
                        top: 105px;
                        left: 285px;
                    }

                    // 第四行腻子细磨
                    .line-4-putty-fine-grinding {
                        top: 105px;
                        left: 375px;
                    }

                    // 第四行腻子细刮
                    .line-4-putty-fine-scraping {
                        top: 105px;
                        left: 556px;
                    }
                }
            }

            // 腻子下半作业区
            .putty-b-pack {
                cursor: pointer;
                position: absolute;
                top: 687px;
                left: 1327px;

                div {
                    height: 32px;
                    width: 109px;
                    position: relative;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 第一行腻子烘烤
                    .line-1-putty-baking {
                        top: 11px;
                        left: 15px;
                    }
                }
            }

            // 中涂左作业区
            .middle-coat-l-pack {
                cursor: pointer;
                position: absolute;
                left: 786px;
                top: 690px;

                div {
                    height: 120px;
                    width: 530px;
                    position: relative;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 第一行中涂喷漆
                    .line-1-medium-spray-paint {
                        top: 11px;
                        left: 17px;
                    }

                    // 第一行烘烤
                    .line-1-bake {
                        top: 11px;
                        left: 106px;
                    }

                    // 第一行砂眼找补
                    .line-1-shading {
                        top: 11px;
                        left: 197px;
                    }

                    // 第一行中涂打磨
                    .line-1-polishing {
                        top: 11px;
                        left: 285px;
                    }

                    // 第一行交车除尘
                    .line-1-delivery-and-dust-removal {
                        top: 11px;
                        left: 375px;
                    }

                    // 第二行车位点1
                    .line-2-station-1 {
                        top: 42px;
                        left: 36px;
                    }

                    // 第二行车位点2
                    .line-2-station-2 {
                        top: 42px;
                        left: 124px;
                    }

                    // 第二行车位点3
                    .line-2-station-3 {
                        top: 42px;
                        left: 213px;
                    }

                    // 第二行车位点4
                    .line-2-station-4 {
                        top: 42px;
                        left: 302px;
                    }

                    // 第二行车位点5
                    .line-2-station-5 {
                        top: 42px;
                        left: 392px;
                    }

                    // 第三行机器人喷涂
                    .line-3-robot-spraying {
                        top: 70px;
                        left: 17px;
                    }

                    // 第三行烘烤
                    .line-3-bake {
                        top: 70px;
                        left: 106px;
                    }

                    // 第三行砂眼找补
                    .line-3-shading {
                        top: 70px;
                        left: 197px;
                    }

                    // 第三行中涂打磨
                    .line-3-polishing {
                        top: 70px;
                        left: 285px;
                    }

                    // 第三行交车除尘
                    .line-3-delivery-and-dust-removal {
                        top: 70px;
                        left: 375px;
                    }

                    // 第四行集中输调漆
                    .line-4-concentrated-paint {
                        top: 95px;
                        left: 17px;
                    }

                    // 第四行烘干室
                    .line-4-drying-room {
                        top: 95px;
                        left: 197px;
                    }

                    // 第五行车位点1
                    .line-4-station-1 {
                        top: 96px;
                        left: 302px;
                    }

                    // 第五行车位点2
                    .line-4-station-2 {
                        top: 96px;
                        left: 390px;
                    }
                }
            }

            // 中涂右作业区
            .middle-coat-r-pack {
                cursor: pointer;
                position: absolute;
                left: 1327px;
                top: 722px;

                div {
                    height: 88px;
                    width: 109px;
                    position: relative;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 缓冲修整1
                    .buffer-trimming-1 {
                        top: 13px;
                        left: 14px;
                    }

                    // 缓冲修整2
                    .buffer-trimming-2 {
                        left: 14px;
                        top: 40px;
                    }

                    // 缓冲修整3
                    .buffer-trimming-3 {
                        left: 14px;
                        top: 69px;
                    }
                }
            }

            // 面/色漆作业区
            .complexion-paint-pack {
                cursor: pointer;
                position: absolute;
                top: 816px;
                left: 690px;

                div {
                    height: 390px;
                    width: 747px;
                    position: relative;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 预留工位1
                    .reserved-station-1 {
                        left: 26px;
                        top: 11px;
                    }

                    // 预留工位2
                    .reserved-station-2 {
                        left: 26px;
                        top: 43px;
                    }

                    // 预留工位3
                    .reserved-station-3 {
                        left: 26px;
                        top: 73px;
                    }

                    // 预留工位4
                    .reserved-station-4 {
                        left: 26px;
                        top: 105px;
                    }

                    // 预留工位5
                    .reserved-station-5 {
                        left: 26px;
                        top: 136px;
                    }

                    // 预留工位6
                    .reserved-station-6 {
                        left: 26px;
                        top: 169px;
                    }

                    // 预留工位7
                    .reserved-station-7 {
                        left: 26px;
                        top: 199px;
                    }

                    // 预留工位8
                    .reserved-station-8 {
                        left: 26px;
                        top: 230px;
                    }

                    // 预留工位9
                    .reserved-station-9 {
                        left: 26px;
                        top: 262px;
                    }

                    // 预留工位10
                    .reserved-station-10 {
                        left: 26px;
                        top: 294px;
                    }

                    // 预留工位11
                    .reserved-station-11 {
                        left: 26px;
                        top: 325px;
                    }

                    // 预留工位12
                    .reserved-station-12 {
                        left: 26px;
                        top: 354px;
                    }

                    // 预留工位13
                    .reserved-station-13 {
                        left: 46px;
                        top: 377px;
                    }

                    // 第一列图案粘贴1 1
                    .column-1-pattern-paste-1-1 {
                        top: 11px;
                        left: 113px;
                    }

                    // 第一列图案粘贴1 2
                    .column-1-pattern-paste-1-2 {
                        top: 43px;
                        left: 113px;
                    }

                    // 第一列图案粘贴1 3
                    .column-1-pattern-paste-1-3 {
                        top: 73px;
                        left: 113px;
                    }

                    // 第一列图案粘贴1 4
                    .column-1-pattern-paste-1-4 {
                        top: 105px;
                        left: 113px;
                    }

                    // 第一列图案粘贴2 1
                    .column-1-pattern-paste-2-1 {
                        top: 136px;
                        left: 113px;
                    }

                    // 第一列图案粘贴2 2
                    .column-1-pattern-paste-2-2 {
                        top: 169px;
                        left: 113px;
                    }

                    // 第一列图案粘贴2 3
                    .column-1-pattern-paste-2-3 {
                        top: 199px;
                        left: 113px;
                    }

                    // 第一列图案粘贴2 4
                    .column-1-pattern-paste-2-4 {
                        top: 230px;
                        left: 113px;
                    }

                    // 第一列AUDIT
                    .column-1-AUDIT {
                        top: 262px;
                        left: 113px;
                    }

                    // 第一列修复交车1
                    .column-1-repair-delivery-1 {
                        top: 294px;
                        left: 113px;
                    }

                    // 第一列修复交车2
                    .column-1-repair-delivery-2 {
                        top: 325px;
                        left: 113px;
                    }

                    // 第一列成品车存放区
                    .column-1-finished-car-pack {
                        left: 132px;
                        top: 350px;
                    }

                    // 第一列烘干室
                    .column-1-drying-room {
                        top: 375px;
                        left: 113px;
                    }

                    // 第二列车位点1
                    .column-2-station-1 {
                        top: 11px;
                        left: 313px;
                    }

                    // 第二列面漆烘干1
                    .column-2-topcoat-drying-1 {
                        top: 44px;
                        left: 290px;
                    }

                    // 第二列面漆烘干2
                    .column-2-topcoat-drying-2 {
                        top: 73px;
                        left: 290px;
                    }

                    // 第二列色漆喷涂
                    .column-2-paint-spraying-1 {
                        top: 106px;
                        left: 290px;
                    }

                    // 第二列车位点2
                    .column-2-station-2 {
                        left: 313px;
                        top: 138px;
                    }

                    // 第二列色漆喷涂2
                    .column-2-paint-spraying-2 {
                        left: 290px;
                        top: 169px;
                    }

                    // 第二列车位点3
                    .column-2-station-3 {
                        left: 310px;
                        top: 200px;
                    }

                    // 第二列车位点4
                    .column-2-station-4 {
                        left: 312px;
                        top: 232px;
                    }

                    // 第二列色漆喷涂3
                    .column-2-paint-spraying-3 {
                        left: 290px;
                        top: 258px;
                    }

                    // 第二列色漆喷涂4
                    .column-2-paint-spraying-4 {
                        left: 290px;
                        top: 296px;
                    }

                    // 第二列流平室
                    .column-2-flowing-room {
                        left: 290px;
                        top: 327px;
                    }

                    // 第二列车位点5
                    .column-2-station-5 {
                        left: 313px;
                        top: 355px;
                    }

                    // 第二列烘干室
                    .column-2-drying-room {
                        left: 290px;
                        top: 373px;
                    }

                    // 第三列面漆烘干
                    .column-3-topcoat-drying {
                        left: 380px;
                        top: 11px;
                    }

                    // 第三列面漆喷涂
                    .column-3-topcoat-spraying {
                        left: 380px;
                        top: 45px;
                    }

                    // 第三列车位点1
                    .column-3-station-1 {
                        left: 405px;
                        top: 73px;
                    }

                    // 第三列车位点2
                    .column-3-station-2 {
                        left: 403px;
                        top: 107px;
                    }

                    // 第三列车位点3
                    .column-3-station-3 {
                        left: 405px;
                        top: 138px;
                    }

                    // 第三列车位点4
                    .column-3-station-4 {
                        left: 405px;
                        top: 169px;
                    }

                    // 第三列色漆喷涂
                    .column-3-paint-spraying {
                        left: 380px;
                        top: 200px;
                    }

                    // 第三列车位点5
                    .column-3-station-5 {
                        left: 406px;
                        top: 230px;
                    }

                    // 第三列车位点6
                    .column-3-station-6 {
                        left: 404px;
                        top: 259px;
                    }

                    // 第三列车位7
                    .column-3-station-7 {
                        left: 404px;
                        top: 296px;
                    }

                    // 第三列面/清漆机器人
                    .column-3-varnish {
                        left: 380px;
                        top: 326px;
                    }

                    // 第三列车位点8
                    .column-3-station-8 {
                        left: 404px;
                        top: 355px;
                    }

                    // 第三列车位点9
                    .column-3-station-9 {
                        left: 404px;
                        top: 375px;
                    }

                    // 第四列面漆喷涂1
                    .column-4-topcoat-spraying-1 {
                        left: 468px;
                        top: 11px;
                    }

                    // 第四列车位点1
                    .column-4-station-1 {
                        left: 490px;
                        top: 44px;
                    }

                    // 第四列面漆喷涂2
                    .column-4-topcoat-spraying-2 {
                        left: 468px;
                        top: 73px;
                    }

                    // 第四列色漆烘干1
                    .column-4-paint-drying-1 {
                        left: 468px;
                        top: 106px;
                    }

                    // 第四列车位点2
                    .column-4-station-2 {
                        left: 488px;
                        top: 138px;
                    }

                    // 第四列色漆烘干2
                    .column-4-paint-drying-2 {
                        left: 468px;
                        top: 169px;
                    }

                    // 第四列色漆烘干3
                    .column-4-paint-drying-3 {
                        left: 468px;
                        top: 199px;
                    }

                    // 第四列车位点3
                    .column-4-station-3 {
                        left: 488px;
                        top: 231px;
                    }

                    // 第四列色漆烘干4
                    .column-4-paint-drying-4 {
                        left: 468px;
                        top: 258px;
                    }

                    // 第四列罩光清漆
                    .column-4-varnish {
                        left: 468px;
                        top: 296px;
                    }

                    // 第四列预处理
                    .column-4-pretreatment {
                        left: 468px;
                        top: 327px;
                    }

                    // 第四列输调漆平台
                    .column-4-transfer-paint-platform {
                        left: 468px;
                        top: 356px;
                    }

                    // 第四列车位点4
                    .column-4-station-4 {
                        left: 488px;
                        top: 375px;
                    }

                    // 第五列修整交车1
                    .column-5-trimming-delivery-1 {
                        left: 652px;
                        top: 6px;
                    }

                    // 第五列修整交车2
                    .column-5-trimming-delivery-2 {
                        left: 652px;
                        top: 38px;
                    }

                    // 第五列修整交车3
                    .column-5-trimming-delivery-3 {
                        left: 652px;
                        top: 69px;
                    }

                    // 第五列水磨1
                    .column-5-water-mill-1 {
                        left: 652px;
                        top: 100px;
                    }

                    // 第五列水磨2
                    .column-5-water-mill-2 {
                        left: 652px;
                        top: 131px;
                    }

                    // 第五列修整交车4
                    .column-5-trimming-delivery-4 {
                        left: 652px;
                        top: 164px;
                    }

                    // 第五列修整交车5
                    .column-5-trimming-delivery-5 {
                        left: 652px;
                        top: 195px;
                    }

                    // 第五列修整交车6
                    .column-5-trimming-delivery-6 {
                        left: 652px;
                        top: 226px;
                    }

                    // 第五列修整交车7
                    .column-5-trimming-delivery-7 {
                        left: 652px;
                        top: 258px;
                    }

                    // 第五列修整交车8
                    .column-5-trimming-delivery-8 {
                        left: 652px;
                        top: 294px;
                    }

                    // 第五列修整交车9
                    .column-5-trimming-delivery-9 {
                        left: 652px;
                        top: 320px;
                    }

                    // 第五列修整交车10
                    .column-5-trimming-delivery-10 {
                        left: 652px;
                        top: 344px;
                    }

                    // 第五列修整交车11
                    .column-5-trimming-delivery-11 {
                        left: 652px;
                        top: 370px;
                    }

                }
            }

            // 成品车存放区
            .finished-car-storage-pack {
                cursor: pointer;
                position: absolute;
                top: 1211px;
                left: 692px;

                div {
                    position: relative;
                    height: 60px;
                    width: 740px;

                    div {
                        position: absolute;
                        background: url('../../assets/images/Monitor/monitor_car.png');
                        background-position: center 0;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 20px;
                        height: 12px;
                    }

                    // 第一行车位点1
                    .line-1-station-1 {
                        top: 5px;
                        left: 44px;
                    }

                    // 第一行车位点2
                    .line-1-station-2 {
                        top: 5px;
                        left: 130px;
                    }

                    // 第一行车位点3
                    .line-1-station-3 {
                        top: 5px;
                        left: 310px;
                    }

                    // 第一行车位点4
                    .line-1-station-4 {
                        top: 5px;
                        left: 402px;
                    }

                    // 第一行车位点5
                    .line-1-station-5 {
                        top: 5px;
                        left: 486px;
                    }

                    // 第二行车位点1
                    .line-2-station-1 {
                        top: 20px;
                        left: 44px;
                    }

                    // 第二行车位点2
                    .line-2-station-2 {
                        top: 20px;
                        left: 130px;
                    }

                    // 第二行车位点3
                    .line-2-station-3 {
                        top: 20px;
                        left: 310px;
                    }

                    // 第二行车位点4
                    .line-2-station-4 {
                        top: 20px;
                        left: 402px;
                    }

                    // 第二行车位点5
                    .line-2-station-5 {
                        top: 20px;
                        left: 486px;
                    }

                    // 第三行车位点1
                    .line-3-station-1 {
                        top: 38px;
                        left: 44px;
                    }

                    // 第三行车位点2
                    .line-3-station-2 {
                        top: 38px;
                        left: 130px;
                    }

                    // 第三行车位点3
                    .line-3-station-3 {
                        top: 38px;
                        left: 310px;
                    }

                    // 第三行车位点4
                    .line-3-station-4 {
                        top: 38px;
                        left: 402px;
                    }

                    // 第三行车位点5
                    .line-3-station-5 {
                        top: 38px;
                        left: 486px;
                    }
                }
            }

            // 钣金车进工位
            .sheet-metal-car {
                cursor: pointer;
                background: url('../../assets/images/Monitor/monitor_car.png');
                background-position: center 0;
                background-repeat: no-repeat;
                background-size: cover;
                width: 20px;
                height: 12px;
                position: absolute;
                top: 195px;
                left: 1360px;
            }

            // 涂装车出工位
            .paint-car {
                cursor: pointer;
                background: url('../../assets/images/Monitor/monitor_car.png');
                background-position: center 0;
                background-repeat: no-repeat;
                background-size: cover;
                width: 20px;
                height: 12px;
                position: absolute;
                top: 1232px;
                left: 1360px;
            }

            // 数据展示区域
            .data-demonstration-pack {
                position: absolute;
                /*background-color: rgba(255, 255, 255, 0.2);*/
                left: 135px;
                top: 620px;

                div {
                    position: relative;
                    width: 535px;
                    height: 265px;

                    div {
                        position: absolute;
                        height: 30px;
                        width: 24px;
                        line-height: 30px;
                        text-align: center;
                        font-weight: bold;
                        font-size: 14px;
                        color: #00b4ff;
                    }

                    .no-message {
                        font-size: 6px !important;
                        font-weight: 400;
                    }

                    // 昨日进车数量
                    .yesterday-in-car-num {
                        position: absolute;
                        top: 18px;
                        left: 188px;
                    }
                    // 当日进车数量
                    .today-in-car-num {
                        left: 188px;
                        top: 52px;
                    }
                    // 电泳当日进车数量
                    .electrophoresis-today-in-car-num {
                        left: 188px;
                        top: 85px;
                    }
                    // 密封防腐当日进车
                    .sealed-anticorrosion-today-in-car-num {
                        left: 188px;
                        top: 119px;
                    }
                    // 腻子当日进车数量
                    .putty-today-in-car-num {
                        left: 188px;
                        top: 151.5px;
                    }
                    // 中涂当日进车数量
                    .middle-coat-today-in-car-num {
                        left: 188px;
                        top: 186px;
                    }
                    // 面/色漆当日进车数量
                    .complexion-paint-today-in-car-num {
                        left: 188px;
                        top: 220.5px;
                    }

                    // 昨日交车数量
                    .yesterday-out-car-num {
                        left: 437px;
                        top: 18px;
                    }
                    // 当日交车数量
                    .today-out-car-num {
                        left: 437px;
                        top: 52px;
                    }
                    // 电泳当日交车数量
                    .electrophoresis-today-out-car-num {
                        left: 437px;
                        top: 85px;
                    }
                    // 密封防腐当日交车
                    .sealed-anticorrosion-today-out-car-num {
                        left: 437px;
                        top: 119px;
                    }
                    // 腻子当日交车数量
                    .putty-today-out-car-num {
                        left: 437px;
                        top: 151.5px;
                    }
                    // 中涂当日交车数量
                    .middle-coat-today-out-car-num {
                        left: 437px;
                        top: 186px;
                    }
                    // 面/色漆当日交车数量
                    .complexion-paint-today-out-car-num {
                        left: 437px;
                        top: 220.5px;
                    }
                }
            }
        }
    }

    ::-webkit-scrollbar {
        display: none ! important;
    }

    // 轻客车体样式
    .monitor-car-external {
        background: url('../../assets/images/Monitor/monitor_car_external.png') !important;
        background-size: cover !important;
    }

    // 定位车体样式
    .monitor-car-location-position {
        background: url('../../assets/images/Monitor/monitor_position_car.gif') !important;
        background-size: cover !important;
    }
</style>
