<template>
    <!-- 电泳工作区 -->
    <div class="page-pack">
        <div class="elect-content">
            <div class="return-pack" @click="doReturnMonitorIndex"></div>
            <!-- 第 1 行 -->
            <div
                class="elect-row-1-1"
                @click="doCarStationClick(query['STC1-1'].busNo)"
                v-if="query.hasOwnProperty('STC1-1') && query['STC1-1'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-1'].busType, 'STC1-1')"
            >
                <p>{{query['STC1-1'].busNo}}</p>
            </div>
            <div
                class="elect-row-1-2"
                @click="doCarStationClick(query['STC1-8'].busNo)"
                v-if="query.hasOwnProperty('STC1-8') && query['STC1-8'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-8'].busType, 'STC1-8')"
            >
                <p>{{query['STC1-8'].busNo}}</p>
            </div>
            <div
                class="elect-row-1-3"
                @click="doCarStationClick(query['HDG1-31'].busNo)"
                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
            >
                <p>{{query['HDG1-31'].busNo}}</p>
            </div>
            <!-- 第 2 行 -->
            <div
                class="elect-row-2-1"
                @click="doCarStationClick(query['STC1-2'].busNo)"
                v-if="query.hasOwnProperty('STC1-2') && query['STC1-2'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-2'].busType, 'STC1-2')"
            >
                <p>{{query['STC1-2'].busNo}}</p>
            </div>
            <div
                class="elect-row-2-2"
                @click="doCarStationClick(query['STC1-9'].busNo)"
                v-if="query.hasOwnProperty('STC1-9') && query['STC1-9'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-9'].busType, 'STC1-9')"
            >
                <p>{{query['STC1-9'].busNo}}</p>
            </div>
            <div
                class="elect-row-2-3"
                @click="doCarStationClick(query['HDG1-32'].busNo)"
                v-if="query.hasOwnProperty('HDG1-32') && query['HDG1-32'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-32'].busType, 'HDG1-32')"
            >
                <p>{{query['HDG1-32'].busNo}}</p>
            </div>
            <!-- 第 3 行 -->
            <div
                class="elect-row-3-1"
                @click="doCarStationClick(query['STC1-3'].busNo)"
                v-if="query.hasOwnProperty('STC1-3') && query['STC1-3'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-3'].busType, 'STC1-3')"
            >
                <p>{{query['STC1-3'].busNo}}</p>
            </div>
            <div
                class="elect-row-3-2"
                @click="doCarStationClick(query['STC1-10'].busNo)"
                v-if="query.hasOwnProperty('STC1-10') && query['STC1-10'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-10'].busType, 'STC1-10')"
            >
                <p>{{query['STC1-10'].busNo}}</p>
            </div>
            <div
                class="elect-row-3-3"
                @click="doCarStationClick(query['HDG1-33'].busNo)"
                v-if="query.hasOwnProperty('HDG1-33') && query['HDG1-33'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-33'].busType, 'HDG1-33')"
            >
                <p>{{query['HDG1-33'].busNo}}</p>
            </div>
            <!-- 第 4 行 -->
            <div
                class="elect-row-4-1"
                @click="doCarStationClick(query['STC1-4'].busNo)"
                v-if="query.hasOwnProperty('STC1-4') && query['STC1-4'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-4'].busType, 'STC1-4')"
            >
                <p>{{query['STC1-4'].busNo}}</p>
            </div>
            <div
                class="elect-row-4-2"
                @click="doCarStationClick(query['STC1-11'].busNo)"
                v-if="query.hasOwnProperty('STC1-11') && query['STC1-11'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-11'].busType, 'STC1-11')"
            >
                <p>{{query['STC1-11'].busNo}}</p>
            </div>
            <div
                class="elect-row-4-3"
                @click="doCarStationClick(query['HDG1-34'].busNo)"
                v-if="query.hasOwnProperty('HDG1-34') && query['HDG1-34'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-34'].busType, 'HDG1-34')"
            >
                <p>{{query['HDG1-34'].busNo}}</p>
            </div>
            <!-- 第 5 行 -->
            <div
                class="elect-row-5-1"
                @click="doCarStationClick(query['STC1-5'].busNo)"
                v-if="query.hasOwnProperty('STC1-5') && query['STC1-5'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-5'].busType, 'STC1-5')"
            >
                <p>{{query['STC1-5'].busNo}}</p>
            </div>
            <div
                class="elect-row-5-2"
                @click="doCarStationClick(query['STC1-12'].busNo)"
                v-if="query.hasOwnProperty('STC1-12') && query['STC1-12'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-12'].busType, 'STC1-12')"
            >
                <p>{{query['STC1-12'].busNo}}</p>
            </div>
            <div
                class="elect-row-5-3"
                @click="doCarStationClick(query['HDG1-49'].busNo)"
                v-if="query.hasOwnProperty('HDG1-49') && query['HDG1-49'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-49'].busType, 'HDG1-49')"
            >
                <p>{{query['HDG1-49'].busNo}}</p>
            </div>
            <!-- 第 6 行 -->
            <div
                class="elect-row-6-1"
                @click="doCarStationClick(query['STC1-6'].busNo)"
                v-if="query.hasOwnProperty('STC1-6') && query['STC1-6'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-6'].busType, 'STC1-6')"
            >
                <p>{{query['STC1-6'].busNo}}</p>
            </div>
            <div
                class="elect-row-6-2"
                @click="doCarStationClick(query['STC1-13'].busNo)"
                v-if="query.hasOwnProperty('STC1-13') && query['STC1-13'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-13'].busType, 'STC1-13')"
            >
                <p>{{query['STC1-13'].busNo}}</p>
            </div>
            <div
                class="elect-row-6-3"
                @click="doCarStationClick(query['HDG1-50'].busNo)"
                v-if="query.hasOwnProperty('HDG1-50') && query['HDG1-50'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-50'].busType, 'HDG1-50')"
            >
                <p>{{query['HDG1-50'].busNo}}</p>
            </div>
            <!-- 6.5行 -->
            <div
                class="elect-row-6-4"
                @click="doCarStationClick(query['HDG1-51'].busNo)"
                v-if="query.hasOwnProperty('HDG1-51') && query['HDG1-51'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-51'].busType, 'HDG1-51')"
            >
                <p>{{query['HDG1-51'].busNo}}</p>
            </div>
            <!-- 第 7 行 -->
            <div
                class="elect-row-7-1"
                @click="doCarStationClick(query['STC1-7'].busNo)"
                v-if="query.hasOwnProperty('STC1-7') && query['STC1-7'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-7'].busType, 'STC1-7')"
            >
                <p>{{query['STC1-7'].busNo}}</p>
            </div>
            <div
                class="elect-row-7-2"
                @click="doCarStationClick(query['STC1-14'].busNo)"
                v-if="query.hasOwnProperty('STC1-14') && query['STC1-14'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['STC1-14'].busType, 'STC1-14')"
            >
                <p>{{query['STC1-14'].busNo}}</p>
            </div>
            <div
                class="elect-row-7-3"
                @click="doCarStationClick(query['HDG1-52'].busNo)"
                v-if="query.hasOwnProperty('HDG1-52') && query['HDG1-52'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-52'].busType, 'HDG1-52')"
            >
                <p>{{query['HDG1-52'].busNo}}</p>
            </div>
            <!-- 第 8 行 -->
            <div
                class="elect-row-8-1"
                @click="doCarStationClick(query['HDG2-2'].busNo)"
                v-if="query.hasOwnProperty('HDG2-2') && query['HDG2-2'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG2-2'].busType, 'HDG2-2')"
            >
                <p>{{query['HDG2-2'].busNo}}</p>
            </div>
            <div
                class="elect-row-8-2"
                @click="doCarStationClick(query['HDG2-1'].busNo)"
                v-if="query.hasOwnProperty('HDG2-1') && query['HDG2-1'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG2-1'].busType, 'HDG2-1')"
            >
                <p>{{query['HDG2-1'].busNo}}</p>
            </div>
            <div
                class="elect-row-8-3"
                @click="doCarStationClick(query['HDG1-35'].busNo)"
                v-if="query.hasOwnProperty('HDG1-35') && query['HDG1-35'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-35'].busType, 'HDG1-35')"
            >
                <p>{{query['HDG1-35'].busNo}}</p>
            </div>
            <div
                class="elect-row-8-4"
                @click="doCarStationClick(query['HDG1-36'].busNo)"
                v-if="query.hasOwnProperty('HDG1-36') && query['HDG1-36'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-36'].busType, 'HDG1-36')"
            >
                <p>{{query['HDG1-36'].busNo}}</p>
            </div>
            <!-- 第 9 行 -->
            <div
                class="elect-row-9-1"
                @click="doCarStationClick(query['HDG5-2'].busNo)"
                v-if="query.hasOwnProperty('HDG5-2') && query['HDG5-2'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-2'].busType, 'HDG5-2')"
            >
                <p>{{query['HDG5-2'].busNo}}</p>
            </div>
            <div
                class="elect-row-9-2"
                @click="doCarStationClick(query['HDG1-45'].busNo)"
                v-if="query.hasOwnProperty('HDG1-45') && query['HDG1-45'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-45'].busType, 'HDG1-45')"
            >
                <p>{{query['HDG1-45'].busNo}}</p>
            </div>
            <div
                class="elect-row-9-3"
                @click="doCarStationClick(query['HDG1-47'].busNo)"
                v-if="query.hasOwnProperty('HDG1-47') && query['HDG1-47'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-47'].busType, 'HDG1-47')"
            >
                <p>{{query['HDG1-47'].busNo}}</p>
            </div>
            <div
                class="elect-row-9-4"
                @click="doCarStationClick(query['HDG1-48'].busNo)"
                v-if="query.hasOwnProperty('HDG1-48') && query['HDG1-48'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-48'].busType, 'HDG1-48')"
            >
                <p>{{query['HDG1-48'].busNo}}</p>
            </div>
            <div
                class="elect-row-9-5"
                @click="doCarStationClick(query['HDG1-46'].busNo)"
                v-if="query.hasOwnProperty('HDG1-46') && query['HDG1-46'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-46'].busType, 'HDG1-46')"
            >
                <p>{{query['HDG1-46'].busNo}}</p>
            </div>
            <!-- 第 10 行 -->
            <div
                class="elect-row-10-1"
                @click="doCarStationClick(query['HDG5-3'].busNo)"
                v-if="query.hasOwnProperty('HDG5-3') && query['HDG5-3'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-3'].busType, 'HDG5-3')"
            >
                <p>{{query['HDG5-3'].busNo}}</p>
            </div>
            <div
                class="elect-row-10-2"
                @click="doCarStationClick(query['HDG1-37'].busNo)"
                v-if="query.hasOwnProperty('HDG1-37') && query['HDG1-37'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-37'].busType, 'HDG1-37')"
            >
                <p>{{query['HDG1-37'].busNo}}</p>
            </div>
            <div
                class="elect-row-10-3"
                @click="doCarStationClick(query['HDG1-38'].busNo)"
                v-if="query.hasOwnProperty('HDG1-38') && query['HDG1-38'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-38'].busType, 'HDG1-38')"
            >
                <p>{{query['HDG1-38'].busNo}}</p>
            </div>
            <div
                class="elect-row-10-4"
                @click="doCarStationClick(query['HDG1-39'].busNo)"
                v-if="query.hasOwnProperty('HDG1-39') && query['HDG1-39'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-39'].busType, 'HDG1-39')"
            >
                <p>{{query['HDG1-39'].busNo}}</p>
            </div>
            <div
                class="elect-row-10-5"
                @click="doCarStationClick(query['HDG1-40'].busNo)"
                v-if="query.hasOwnProperty('HDG1-40') && query['HDG1-40'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-40'].busType, 'HDG1-40')"
            >
                <p>{{query['HDG1-40'].busNo}}</p>
            </div>
            <!-- 第 11 行 -->
            <div
                class="elect-row-11-1"
                @click="doCarStationClick(query['HDG5-4'].busNo)"
                v-if="query.hasOwnProperty('HDG5-4') && query['HDG5-4'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-4'].busType, 'HDG5-4')"
            >
                <p>{{query['HDG5-4'].busNo}}</p>
            </div>
            <div
                class="elect-row-11-2"
                @click="doCarStationClick(query['HDG1-41'].busNo)"
                v-if="query.hasOwnProperty('HDG1-41') && query['HDG1-41'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-41'].busType, 'HDG1-41')"
            >
                <p>{{query['HDG1-41'].busNo}}</p>
            </div>
            <div
                class="elect-row-11-3"
                @click="doCarStationClick(query['HDG1-42'].busNo)"
                v-if="query.hasOwnProperty('HDG1-42') && query['HDG1-42'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-42'].busType, 'HDG1-42')"
            >
                <p>{{query['HDG1-42'].busNo}}</p>
            </div>
            <div
                class="elect-row-11-4"
                @click="doCarStationClick(query['HDG1-43'].busNo)"
                v-if="query.hasOwnProperty('HDG1-43') && query['HDG1-43'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-43'].busType, 'HDG1-43')"
            >
                <p>{{query['HDG1-43'].busNo}}</p>
            </div>
            <div
                class="elect-row-11-5"
                @click="doCarStationClick(query['HDG1-44'].busNo)"
                v-if="query.hasOwnProperty('HDG1-44') && query['HDG1-44'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-44'].busType, 'HDG1-44')"
            >
                <p>{{query['HDG1-44'].busNo}}</p>
            </div>
            <!-- 第 12 行 -->
            <div
                class="elect-row-12-1"
                @click="doCarStationClick(query['HDG5-5'].busNo)"
                v-if="query.hasOwnProperty('HDG5-5') && query['HDG5-5'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-5'].busType, 'HDG5-5')"
            >
                <p>{{query['HDG5-5'].busNo}}</p>
            </div>
            <div
                class="elect-row-12-2"
                @click="doCarStationClick(query['HDG1-59'].busNo)"
                v-if="query.hasOwnProperty('HDG1-59') && query['HDG1-59'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-59'].busType, 'HDG1-59')"
            >
                <p>{{query['HDG1-59'].busNo}}</p>
            </div>
            <div
                class="elect-row-12-3"
                @click="doCarStationClick(query['HDG1-60'].busNo)"
                v-if="query.hasOwnProperty('HDG1-60') && query['HDG1-60'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-60'].busType, 'HDG1-60')"
            >
                <p>{{query['HDG1-60'].busNo}}</p>
            </div>
            <div
                class="elect-row-12-4"
                @click="doCarStationClick(query['HDG1-61'].busNo)"
                v-if="query.hasOwnProperty('HDG1-61') && query['HDG1-61'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-61'].busType, 'HDG1-61')"
            >
                <p>{{query['HDG1-61'].busNo}}</p>
            </div>
            <div
                class="elect-row-12-5"
                @click="doCarStationClick(query['HDG1-62'].busNo)"
                v-if="query.hasOwnProperty('HDG1-62') && query['HDG1-62'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-62'].busType, 'HDG1-62')"
            >
                <p>{{query['HDG1-62'].busNo}}</p>
            </div>
            <div
                class="elect-row-12-6"
                @click="doCarStationClick(query['HDG5-6'].busNo)"
                v-if="query.hasOwnProperty('HDG5-6') && query['HDG5-6'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-6'].busType, 'HDG5-6')"
            >
                <p>{{query['HDG5-6'].busNo}}</p>
            </div>
            <!-- 第 13 行 -->
            <div
                class="elect-row-13-1"
                @click="doCarStationClick(query['HDG5-7'].busNo)"
                v-if="query.hasOwnProperty('HDG5-7') && query['HDG5-7'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG5-7'].busType, 'HDG5-7')"
            >
                <p>{{query['HDG5-7'].busNo}}</p>
            </div>
            <div
                class="elect-row-13-2"
                @click="doCarStationClick(query['HDG1-63'].busNo)"
                v-if="query.hasOwnProperty('HDG1-63') && query['HDG1-63'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-63'].busType, 'HDG1-63')"
            >
                <p>{{query['HDG1-63'].busNo}}</p>
            </div>
            <div
                class="elect-row-13-3"
                @click="doCarStationClick(query['HDG1-64'].busNo)"
                v-if="query.hasOwnProperty('HDG1-64') && query['HDG1-64'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-64'].busType, 'HDG1-64')"
            >
                <p>{{query['HDG1-64'].busNo}}</p>
            </div>
            <div
                class="elect-row-13-4"
                @click="doCarStationClick(query['HDG1-65'].busNo)"
                v-if="query.hasOwnProperty('HDG1-65') && query['HDG1-65'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-65'].busType, 'HDG1-65')"
            >
                <p>{{query['HDG1-65'].busNo}}</p>
            </div>

            <div
                class="elect-row-13-5"
                @click="doCarStationClick(query['HDG1-66'].busNo)"
                v-if="query.hasOwnProperty('HDG1-66') && query['HDG1-66'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-66'].busType, 'HDG1-66')"
            >
                <p>{{query['HDG1-66'].busNo}}</p>
            </div>
            <!-- 实时车辆 -->
            <div class="onlineNum">
                <p>总量 <span>{{ this.onlineNum !== null ? this.onlineNum : '0' }}</span></p>
            </div>
            <Tooltip
                ref="toolRef"
                :query="BusInformation"
            ></Tooltip>
        </div>
    </div>
</template>

<script>
import Tooltip from './Tooltip';
export default {
    name: 'MonitorElectrophoresis',
    components: {
        Tooltip
    },
    data () {
        return {
            //定时器
            timer: null,
            // 车辆定位数据
            carPostionInfo: {},
            // 当前在线人数
            onlineNum: null,
            // 电泳作业区域实时信息
            query: {},
            // 根据车身号获得当前车体信息
            BusInformation: {}
        };
    },
    mounted () {
        this.pollingGetInterface();
        console.log('2222', this.timer);
        console.log(this.$root.$children[0].$el)
    },
    beforeDestroy () {
        clearInterval(this.timer);
    },
    methods: {
        // 点击车位弹出车体信息
        doCarStationClick (row) {
            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', { busNo: row })
                .then(res => {
                    if (!Array.isArray(res)) {
                        this.BusInformation = _.cloneDeep(res);
                    }
                })
                .catch(error => {
                    reject(error);
                });
        },
        //  查询电泳实时信息
        getElectrophoresisInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '2' })
                .then(res => {
                    for (let item of res) {
                        if (item.code === '2') {
                            this.query = item.stationMap;
                            // 获取当前在线人数
                            this.onlineNum = _.clone(item.onlineNum);
                            console.log(this.onlineNum);
                            break;
                        }
                    }
                })
                .catch(error => {
                    reject(error);
                });
        },
        //  解析车体类型及车体定位样式
        judgeCarTypeAndcarStationstyle (outOrIn, station) {
            // 判断有无车体定位信息
            if (this.carPostionInfo.hasOwnProperty(station)) {
                return 'isPositioned';
            } else {
                if (outOrIn === 'OTHER') {
                    return 'carOutFactory';
                } else {
                    return '';
                }
            }
        },
        // 查询车辆定位
        getCarPostion () {
            let queryParams = { orderNo: '1111', workOrderNo: '' };
            // 请求接口
            this.$fetch('area-controller/busNo-get', { queryParams }).then(
                res => {
                    this.carPostionInfo = _.cloneDeep(res);
                }
            );
        },
        // 点击返回AVI大屏首页
        doReturnMonitorIndex () {
            this.$router.push({
                path: '/monitor/monitorIndex'
            })
        },
        // 轮询请求接口
        pollingGetInterface () {
            // 查询车辆定位
            if (
                this.$route.query.hasOwnProperty('orderNo') ||
                this.$route.query.hasOwnProperty('workOrderNo')
            ) {
                this.getCarPostion();
            }
            // 获取电泳作业区实时信息
            this.getElectrophoresisInformation();
            this.timer = setInterval(() => {
                this.carPostionInfo = {};
                // 获取电泳作业区实时信息
                this.getElectrophoresisInformation();
            }, 20000);
        }
    }
};
</script>

<style lang="scss" scoped>
.page-pack {
    min-height: 100%;
    background: rgba(0, 7, 12, 1);
    .onlineNum {
        position: absolute;
        right: 300px;
        top: 50px;
        color: #00b4ff;
        font-size: 16px;
        font-weight: 750;
        span {
            margin: 30px;
            font-size: 24px;
        }
    }
    .elect-content {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/monitor_electrophoresis.png") no-repeat;
        .elect-row-1-1,
        .elect-row-1-2,
        .elect-row-1-3,
        .elect-row-2-1,
        .elect-row-2-2,
        .elect-row-2-3,
        .elect-row-3-1,
        .elect-row-3-2,
        .elect-row-3-3,
        .elect-row-4-1,
        .elect-row-4-2,
        .elect-row-4-3,
        .elect-row-5-1,
        .elect-row-5-2,
        .elect-row-5-3,
        .elect-row-6-1,
        .elect-row-6-2,
        .elect-row-6-3,
        .elect-row-6-4,
        .elect-row-7-1,
        .elect-row-7-2,
        .elect-row-7-3,
        .elect-row-8-1,
        .elect-row-8-2,
        .elect-row-8-3,
        .elect-row-8-4,
        .elect-row-9-1,
        .elect-row-9-2,
        .elect-row-9-3,
        .elect-row-9-4,
        .elect-row-9-5,
        .elect-row-10-1,
        .elect-row-10-2,
        .elect-row-10-3,
        .elect-row-10-4,
        .elect-row-10-5,
        .elect-row-11-1,
        .elect-row-11-2,
        .elect-row-11-3,
        .elect-row-11-4,
        .elect-row-11-5,
        .elect-row-12-1,
        .elect-row-12-2,
        .elect-row-12-3,
        .elect-row-12-4,
        .elect-row-12-5,
        .elect-row-12-6,
        .elect-row-13-1,
        .elect-row-13-2,
        .elect-row-13-3,
        .elect-row-13-4,
        .elect-row-13-5 {
            position: absolute;
            width: 105px;
            height: 40px;
            cursor: pointer;
            background: url("../../../assets/images/Monitor/monitor_car.png")
                no-repeat;
            background-size: 35px 18px;
            background-position: 0 16px;

            p {
                font-size: 12px;
                margin: 0;
                color: #ffffff;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        // ?第一行top
        .elect-row-1-1,
        .elect-row-1-2 {
            top: 165px;
        }
        .elect-row-1-3 {
            top: 180px;
        }
        // ?第一行 left
        .elect-row-1-1,
        .elect-row-2-1,
        .elect-row-3-1,
        .elect-row-4-1,
        .elect-row-5-1,
        .elect-row-6-1,
        .elect-row-7-1,
        .elect-row-8-1 {
            left: 680px;
        }
        .elect-row-1-2,
        .elect-row-2-2,
        .elect-row-3-2,
        .elect-row-4-2,
        .elect-row-5-2,
        .elect-row-6-2,
        .elect-row-7-2,
        .elect-row-8-2 {
            left: 915px;
        }
        .elect-row-1-3,
        .elect-row-2-3,
        .elect-row-3-3,
        .elect-row-4-3,
        .elect-row-8-3 {
            left: 1090px;
        }

        .elect-row-5-3,
        .elect-row-6-3,
        .elect-row-6-4,
        .elect-row-7-3 {
            left: 1130px;
        }
        // ?第二行top
        .elect-row-2-1 {
            top: 210px;
        }
        .elect-row-2-2 {
            top: 240px;
        }
        .elect-row-2-3 {
            top: 230px;
        }
        // ?第三行top
        .elect-row-3-1 {
            top: 255px;
        }
        .elect-row-3-2 {
            top: 290px;
        }
        .elect-row-3-3 {
            top: 278px;
        }
        // ?第四行
        .elect-row-4-1 {
            top: 342px;
        }
        .elect-row-4-2 {
            top: 338px;
        }
        .elect-row-4-3 {
            top: 325px;
        }
        // ?第五行
        .elect-row-5-1,
        .elect-row-5-2 {
            top: 386px;
        }
        .elect-row-5-3 {
            top: 370px;
        }
        // ?第六行
        .elect-row-6-1,
        .elect-row-6-2 {
            top: 435px;
        }
        .elect-row-6-3 {
            top: 405px;
        }
        .elect-row-6-4 {
            top: 440px;
        }
        // ?第七行
        .elect-row-7-1,
        .elect-row-7-2,
        .elect-row-7-3 {
            top: 480px;
        }
        // ?第八行
        .elect-row-8-1,
        .elect-row-8-2,
        .elect-row-8-3,
        .elect-row-8-4 {
            top: 542px;
        }
        // ?第九行
        .elect-row-9-1,
        .elect-row-9-2,
        .elect-row-9-3,
        .elect-row-9-4,
        .elect-row-9-5 {
            top: 596px;
        }
        .elect-row-9-1,
        .elect-row-10-1,
        .elect-row-11-1,
        .elect-row-12-1,
        .elect-row-13-1,
        .elect-row-12-6 {
            left: 420px;
        }
        .elect-row-9-2 {
            left: 725px;
        }
        .elect-row-9-3 {
            left: 960px;
        }
        .elect-row-9-4 {
            left: 1130px;
        }
        // ?第十行
        .elect-row-10-1 {
            top: 640px;
        }
        .elect-row-10-2,
        .elect-row-10-3,
        .elect-row-10-4,
        .elect-row-10-5 {
            top: 675px;
        }
        .elect-row-10-2,
        .elect-row-11-2,
        .elect-row-12-2 {
            left: 660px;
        }
        .elect-row-10-3,
        .elect-row-11-3 {
            left: 797px;
        }
        .elect-row-10-4,
        .elect-row-11-4 {
            left: 935px;
        }
        .elect-row-10-5,
        .elect-row-12-5 {
            left: 1095px;
        }
        // ?第十一行
        .elect-row-11-1 {
            top: 685px;
        }
        .elect-row-11-2,
        .elect-row-11-3,
        .elect-row-11-4,
        .elect-row-11-5 {
            top: 732px;
        }
        .elect-row-11-5,
        .elect-row-13-5 {
            left: 1137px;
        }
        // ?第十二行
        .elect-row-12-1 {
            top: 729px;
        }
        .elect-row-12-2,
        .elect-row-12-3,
        .elect-row-12-4,
        .elect-row-12-5,
        .elect-row-12-6 {
            top: 782px;
        }
        .elect-row-12-3,
        .elect-row-13-3 {
            left: 840px;
        }
        .elect-row-12-4,
        .elect-row-13-4 {
            left: 975px;
        }
        // ?第十三行
        .elect-row-13-1,
        .elect-row-13-2,
        .elect-row-13-3,
        .elect-row-13-4,
        .elect-row-13-5 {
            top: 825px;
        }
        .elect-row-13-2 {
            left: 708px;
        }
        .elect-row-8-4,
        .elect-row-9-5 {
            left: 830px;
        }
        .carOutFactory {
            background: url("../../../assets/images/Monitor/monitor_car_external.png") no-repeat;
            background-size: 35px 18px;
            background-position: 0 16px;
        }
        .isPositioned {
            background: url("../../../assets/images/Monitor/monitor_position_car.gif") no-repeat;
            background-size: 35px 18px;
            background-position: 0 16px;
        }
        // 返回首页
        .return-pack {
            position: absolute;
            cursor: pointer;
            width: 450px;
            height: 90px;
            top: 0;
            left: 575px;
        }
    }
}
</style>
