<template>
    <!-- 密封防腐作业区 -->
    <div class="page-pack">
        <div class="container-pack">
            <div class="return-pack" @click="doReturnMonitorIndex"></div>
            <!-- 第一行 -->
            <div
                class="sealed-row-1-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-57') && sealedAnticorrosion['HDG1-57'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-57'].busType, 'HDG1-57')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-57'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-57'].busNo}}</p>
            </div>
            <div
                class="sealed-row-1-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-67') && sealedAnticorrosion['HDG1-67'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-67'].busType, 'HDG1-67')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-67'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-67'].busNo}}</p>
            </div>
            <div
                class="sealed-row-1-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-68') && sealedAnticorrosion['HDG1-68'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-68'].busType, 'HDG1-68')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-68'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-68'].busNo}}</p>
            </div>
            <div
                class="sealed-row-1-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-69') && sealedAnticorrosion['HDG1-69'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-69'].busType, 'HDG1-69')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-69'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-69'].busNo}}</p>
            </div>
            <div
                class="sealed-row-1-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-70') && sealedAnticorrosion['HDG1-70'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-70'].busType, 'HDG1-70')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-70'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-70'].busNo}}</p>
            </div>
            <!-- 第二行 -->
            <div
                class="sealed-row-2-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-58') && sealedAnticorrosion['HDG1-58'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-58'].busType, 'HDG1-58')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-58'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-58'].busNo}}</p>
            </div>
            <div
                class="sealed-row-2-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-71') && sealedAnticorrosion['HDG1-71'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-71'].busType, 'HDG1-71')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-71'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-71'].busNo}}</p>
            </div>
            <div
                class="sealed-row-2-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-72') && sealedAnticorrosion['HDG1-72'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-72'].busType, 'HDG1-72')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-72'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-72'].busNo}}</p>
            </div>
            <div
                class="sealed-row-2-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-73') && sealedAnticorrosion['HDG1-73'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-73'].busType, 'HDG1-73')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-73'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-73'].busNo}}</p>
            </div>
            <div
                class="sealed-row-2-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-74') && sealedAnticorrosion['HDG1-74'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-74'].busType, 'HDG1-74')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-74'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-74'].busNo}}</p>
            </div>
            <!-- 第三行 -->
            <div
                class="sealed-row-3-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-75') && sealedAnticorrosion['HDG1-75'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-75'].busType, 'HDG1-75')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-75'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-75'].busNo}}</p>
            </div>
            <div
                class="sealed-row-3-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-76') && sealedAnticorrosion['HDG1-76'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-76'].busType, 'HDG1-76')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-76'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-76'].busNo}}</p>
            </div>
            <div
                class="sealed-row-3-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-77') && sealedAnticorrosion['HDG1-77'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-77'].busType, 'HDG1-77')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-77'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-77'].busNo}}</p>
            </div>
            <div
                class="sealed-row-3-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-78') && sealedAnticorrosion['HDG1-78'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-78'].busType, 'HDG1-78')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-78'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-78'].busNo}}</p>
            </div>
            <div
                class="sealed-row-3-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-79') && sealedAnticorrosion['HDG1-79'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-79'].busType, 'HDG1-79')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-79'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-79'].busNo}}</p>
            </div>
            <!-- 第四行 -->
            <div
                class="sealed-row-4-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-80') && sealedAnticorrosion['HDG1-80'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-80'].busType, 'HDG1-80')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-80'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-80'].busNo}}</p>
            </div>
            <div
                class="sealed-row-4-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-81') && sealedAnticorrosion['HDG1-81'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-81'].busType, 'HDG1-81')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-81'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-81'].busNo}}</p>
            </div>
            <div
                class="sealed-row-4-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-82') && sealedAnticorrosion['HDG1-82'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-82'].busType, 'HDG1-82')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-82'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-82'].busNo}}</p>
            </div>
            <div
                class="sealed-row-4-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-83') && sealedAnticorrosion['HDG1-83'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-83'].busType, 'HDG1-83')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-83'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-83'].busNo}}</p>
            </div>
            <div
                class="sealed-row-4-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-84') && sealedAnticorrosion['HDG1-84'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-84'].busType, 'HDG1-84')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-84'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-84'].busNo}}</p>
            </div>
            <!-- 第五行 -->
            <div
                class="sealed-row-5-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-85') && sealedAnticorrosion['HDG1-85'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-85'].busType, 'HDG1-85')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-85'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-85'].busNo}}</p>
            </div>
            <div
                class="sealed-row-5-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-86') && sealedAnticorrosion['HDG1-86'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-86'].busType, 'HDG1-86')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-86'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-86'].busNo}}</p>
            </div>
            <div
                class="sealed-row-5-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-87') && sealedAnticorrosion['HDG1-87'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-87'].busType, 'HDG1-87')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-87'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-87'].busNo}}</p>
            </div>
            <div
                class="sealed-row-5-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-88') && sealedAnticorrosion['HDG1-88'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-88'].busType, 'HDG1-88')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-88'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-88'].busNo}}</p>
            </div>
            <div
                class="sealed-row-5-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-89') && sealedAnticorrosion['HDG1-89'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-89'].busType, 'HDG1-89')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-89'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-89'].busNo}}</p>
            </div>
            <!-- 第六行 -->
            <div
                class="sealed-row-6-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-90') && sealedAnticorrosion['HDG1-90'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-90'].busType, 'HDG1-90')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-90'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-90'].busNo}}</p>
            </div>
            <div
                class="sealed-row-6-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-91') && sealedAnticorrosion['HDG1-91'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-91'].busType, 'HDG1-91')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-91'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-91'].busNo}}</p>
            </div>
            <div
                class="sealed-row-6-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-92') && sealedAnticorrosion['HDG1-92'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-92'].busType, 'HDG1-92')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-92'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-92'].busNo}}</p>
            </div>
            <div
                class="sealed-row-6-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-93') && sealedAnticorrosion['HDG1-93'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-93'].busType, 'HDG1-93')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-93'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-93'].busNo}}</p>
            </div>
            <div
                class="sealed-row-6-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG1-94') && sealedAnticorrosion['HDG1-94'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG1-94'].busType, 'HDG1-94')"
                @click="doCarStationClick(sealedAnticorrosion['HDG1-94'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG1-94'].busNo}}</p>
            </div>
            <!-- 右一列 -->
            <div
                class="sealed-right-column-1-1"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-8') && sealedAnticorrosion['HDG5-8'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-8'].busType, 'HDG5-8')"
                @click="doCarStationClick(sealedAnticorrosion['HDG5-8'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG5-8'].busNo}}</p>
            </div>
            <div
                class="sealed-right-column-1-2"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-9') && sealedAnticorrosion['HDG5-9'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-9'].busType, 'HDG5-9')"
                @click="doCarStationClick(sealedAnticorrosion['HDG5-9'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG5-9'].busNo}}</p>
            </div>
            <div
                class="sealed-right-column-1-3"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-10') && sealedAnticorrosion['HDG5-10'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-10'].busType, 'HDG5-10')"
                @click="doCarStationClick(sealedAnticorrosion['HDG5-10'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG5-10'].busNo}}</p>
            </div>
            <div
                class="sealed-right-column-1-4"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-11') && sealedAnticorrosion['HDG5-11'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-11'].busType, 'HDG5-11')"
                @click="doCarStationClick(sealedAnticorrosion['HDG5-11'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG5-11'].busNo}}</p>
            </div>
            <div
                class="sealed-right-column-1-5"
                v-if="sealedAnticorrosion.hasOwnProperty('HDG5-12') && sealedAnticorrosion['HDG5-12'].state !== 'FREE'"
                :class="judgeCarTypeAndCarStationStyle(sealedAnticorrosion['HDG5-12'].busType, 'HDG5-12')"
                @click="doCarStationClick(sealedAnticorrosion['HDG5-12'].busNo)"
            >
                <p>{{sealedAnticorrosion['HDG5-12'].busNo}}</p>
            </div>
        </div>
        <!-- 实时车辆 -->
        <div class="onlineNum">
            <p>总量 <span>{{ this.onlineNum !== null ? this.onlineNum : '0' }}</span></p>
        </div>
        <!-- 详细信息展示组件 -->
        <Tooltip
            ref="toolRef"
            :query="currentBusInfo"
        >
        </Tooltip>
    </div>
</template>

<script>
import Tooltip from './Tooltip';
export default {
    name: 'MonitorSealedAnticorrosion',
    components: {
        Tooltip
    },
    data () {
        return {
            // 实时车辆总数
            onlineNum: null,
            // 密封防腐作业区域实时数据
            sealedAnticorrosion: {},
            // 筛选条件订单号
            orderNo: '',
            // 筛选条件工单号
            workOrderNo: '',
            // 车体定位数据
            carPostion: {},
            // 当前车体信息
            currentBusInfo: {}
        };
    },
    methods: {
        // 解析车体类型及车体定位样式
        judgeCarTypeAndCarStationStyle (carType, caeNumber) {
            if (this.carPostion.hasOwnProperty(caeNumber)) {
                return 'monitor-car-location-position';
            } else {
                if (carType === 'OWN') {
                    return '';
                } else {
                    return 'monitor-car-external';
                }
            }
        },
        // 点击工位
        doCarStationClick (busNo) {
            let queryParams = { busNo: busNo };
            this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
            let left = window.event.clientX;
            let top = window.event.clientY;
            this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px';
            this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px';
            this.$fetch('area-controller/busNo-get', queryParams).then(
                response => {
                    this.currentBusInfo = _.cloneDeep(response);
                }
            );
        },
        // 获取密封防腐作业区实时数据
        getSealedAnticorrosionRealTimeData () {
            let queryParams = { areaNo: '3' };
            this.$fetch('area-controller/realTime-get', queryParams).then(
                response => {
                    for (let item of response) {
                        if (item.code === '3') {
                            this.sealedAnticorrosion = _.cloneDeep(item.stationMap);
                            this.onlineNum = _.cloneDeep(item.onlineNum);
                            break;
                        }
                    }
                }
            );
        },
        // 根据工单号或订单号定位当前车体位置
        getCurrentPosition () {
            let queryParams = {
                orderNo: this.orderNo,
                workOrderNo: this.workOrderNo
            };
            this.$fetch('area-controller/workOrderNo-get', queryParams).then(
                response => {
                    this.carPostion = _.cloneDeep(response);
                }
            );
        },
        // 点击返回AVI大屏首页
        doReturnMonitorIndex () {
            this.$router.push({
                path: '/monitor/monitorIndex'
            })
        },
        // 轮询查询区域实时信息
        pollingGetAreaRealTimeData () {
            // 获取密封防腐作业区实时数据
            this.getSealedAnticorrosionRealTimeData();
            // 根据工单号或订单号定位当前车体位置
            this.getCurrentPosition();
            setInterval(() => {
                this.carPostion = {};
                // 获取密封防腐作业区实时数据
                this.getSealedAnticorrosionRealTimeData();
            }, 20000);
        }
    },
    mounted () {
        setTimeout(() => {
            // 轮询查询区域实时信息
            this.pollingGetAreaRealTimeData();
        }, 0);
    }
};
</script>

<style lang="scss" scoped>
.page-pack {
    min-height: 100%;
    background: rgba(0, 7, 12, 1);
    position: relative;
    .onlineNum {
        position: absolute;
        right: 300px;
        top: 50px;
        color: #00b4ff;
        font-size: 16px;
        font-weight: 750;
        span {
            margin: 30px;
            font-size: 24px;
        }
    }
    .container-pack {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/monitor_sealed_anticorrosion.png");

        div {
            position: absolute;
            width: 140px;
            height: 50px;
            cursor: pointer;
            background: url("../../../assets/images/Monitor/monitor_car.png")
                no-repeat;
            background-size: 35px 18px;
            background-position: 0 16px;

            p {
                font-size: 14px;
                margin: 0;
                color: #ffffff;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        // 第一行
        .sealed-row-1-1 {
            top: 265px;
            left: 155px;
        }
        .sealed-row-1-2 {
            top: 265px;
            left: 345px;
        }
        .sealed-row-1-3 {
            top: 265px;
            left: 530px;
        }
        .sealed-row-1-4 {
            top: 265px;
            left: 720px;
        }
        .sealed-row-1-5 {
            top: 265px;
            left: 910px;
        }

        // 第二行
        .sealed-row-2-1 {
            top: 352px;
            left: 155px;
        }
        .sealed-row-2-2 {
            top: 352px;
            left: 345px;
        }
        .sealed-row-2-3 {
            top: 352px;
            left: 530px;
        }
        .sealed-row-2-4 {
            top: 352px;
            left: 720px;
        }
        .sealed-row-2-5 {
            top: 352px;
            left: 910px;
        }

        // 第三行
        .sealed-row-3-1 {
            top: 435px;
            left: 210px;
        }
        .sealed-row-3-2 {
            top: 437px;
            left: 345px;
        }
        .sealed-row-3-3 {
            top: 437px;
            left: 530px;
        }
        .sealed-row-3-4 {
            top: 437px;
            left: 720px;
        }
        .sealed-row-3-5 {
            top: 437px;
            left: 910px;
        }

        // 第四行
        .sealed-row-4-1 {
            top: 520px;
            left: 210px;
        }
        .sealed-row-4-2 {
            top: 520px;
            left: 392px;
        }
        .sealed-row-4-3 {
            top: 520px;
            left: 572px;
        }
        .sealed-row-4-4 {
            top: 520px;
            left: 752px;
        }
        .sealed-row-4-5 {
            top: 520px;
            left: 936px;
        }

        // 第五行
        .sealed-row-5-1 {
            top: 605px;
            left: 155px;
        }
        .sealed-row-5-2 {
            top: 605px;
            left: 345px;
        }
        .sealed-row-5-3 {
            top: 605px;
            left: 530px;
        }
        .sealed-row-5-4 {
            top: 605px;
            left: 720px;
        }
        .sealed-row-5-5 {
            top: 605px;
            left: 910px;
        }

        // 第六行
        .sealed-row-6-1 {
            top: 690px;
            left: 155px;
        }
        .sealed-row-6-2 {
            top: 690px;
            left: 345px;
        }
        .sealed-row-6-3 {
            top: 690px;
            left: 530px;
        }
        .sealed-row-6-4 {
            top: 690px;
            left: 720px;
        }
        .sealed-row-6-5 {
            top: 690px;
            left: 910px;
        }

        // 右一列
        .sealed-right-column-1-1 {
            top: 352px;
            left: 1275px;
        }
        .sealed-right-column-1-2 {
            top: 438px;
            left: 1275px;
        }
        .sealed-right-column-1-3 {
            top: 522px;
            left: 1275px;
        }
        .sealed-right-column-1-4 {
            top: 604px;
            left: 1318px;
        }
        .sealed-right-column-1-5 {
            top: 688px;
            left: 1318px;
        }
        // 返回首页
        .return-pack {
            position: absolute;
            cursor: pointer;
            width: 450px;
            height: 90px;
            top: 0;
            left: 575px;
            background-image: none;
        }
    }
}

// 轻客车体样式
.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>
