<template>
    <!-- 电泳工作区 -->
    <div class="page-pack">
        <div class="elect-content">
            <!-- 第 1 行 -->
            <div
                class="elect-row-1-1"
                @click="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(query['SSTC1-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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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'].No}}</p>
            </div>

            <div
                class="elect-row-13-5"
                @click="clickBtn(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>
            <Tooltip
                ref="toolRef"
                :query="BusInformation"
            ></Tooltip>
        </div>
    </div>
</template>

<script>
import Tooltip from './Tooltip';
export default {
    components: {
        Tooltip
    },
    data () {
        return {
            // 电泳作业区域实时信息
            query: {
                'STC1-1': {
                    areaId: 0,
                    areaName: 'DF20191010',
                    busNo: 'DF20191010',
                    busType: 'OTHER', //IN/OUT
                    code: 'string',
                    id: 0,
                    keyStation: true,
                    laneCode: 'string',
                    laneId: 0,
                    sequence: 0,
                    skidID: 0,
                    state: 'USE', //0.1 Y/N
                    workshopCode: 'string'
                },
                'STC1-8': {
                    areaId: 0,
                    areaName: 'DF205411010',
                    busNo: 'DF20191010',
                    busType: 'OWN', //IN/OUT
                    code: 'string',
                    id: 0,
                    keyStation: true,
                    laneCode: 'string',
                    laneId: 0,
                    sequence: 0,
                    skidID: 0,
                    state: 'USE', //0.1 Y/N
                    workshopCode: 'string'
                },
                'HDG1-31': {
                    areaId: 0,
                    areaName: 'DF205411010',
                    busNo: 'DF20191010',
                    busType: 'OTHER', //IN/OUT
                    code: 'string',
                    id: 0,
                    keyStation: true,
                    laneCode: 'string',
                    laneId: 0,
                    sequence: 0,
                    skidID: 0,
                    state: 'USE', //0.1 Y/N
                    workshopCode: 'string'
                }
            },
            // 根据车身号获得当前车体信息
            BusInformation: {
                'saleOrderNo': '201905201252',
                'planOrderNo': '83848484',
                'code': 'EDSCSFDGVG',
                'busType': 'car',
                'orderSize': '20',
                'unit': 'From China',
                'shop': '二号车间',
                'line': '4-25'
            }
        };
    },
    mounted () {
        this.getElectrophoresisInformation();
        console.log(this.$route)
    },
    methods: {
        // 点击车位弹出车体信息
        clickBtn (row) {
            console.log(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 => {
                console.log('res', res);
                // this.BusInformation = _.cloneDeep(res);
            }).catch(error => {
                reject(error)
            })
        },
        //  查询电泳实时信息
        getElectrophoresisInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '2' })
                .then(res => {
                    console.log('getall', res);
                })
                .catch(error => {
                    reject(error);
                });
        },
        //  解析车体类型及车体定位样式
        judgeCarTypeAndcarStationstyle (outOrIn, station) {
            //根据车位编码Station 判断是否该车位已经被定位
            // let stateTemp = _.cloneDeep(this.$route.query);
            // console.log('aaa', stateTemp);
            // this.$fetch('area-controller/busNo-get', {stateTemp}).then(res => {
            //     console.log(res);
            //     this.busPosition = _.cloneDeep(res);
            //     if (this.busPosition.hasOwnProperty(station)) {
            //         return 'isPositioned'
            //     } else {
            if (outOrIn === 'OTHER') {
                return 'carOutFactory';
            } else {
                return '';
            }
            //     }
            // }).catch(error => {
            //     reject(error);
            // })
        }
    }
};
</script>

<style lang="scss" scoped>
.page-pack {
    min-height: 100%;
    background: rgba(0, 7, 12, 1);

    .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: 140px;
            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: 14px;
                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;
        }
    }
}
</style>
