<template>
    <div class="page-body">
        <div class="paint-content">
            <div class="return-pack" @click="doReturnMonitorIndex"></div>
            <!-- 第一行 -->
            <div
                class="paint-row-1-0"
                @click="doCarStationClick(query['HDG1-134'].busNo)"
                v-if="query.hasOwnProperty('HDG1-134') && query['HDG1-134'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-134'].busType, 'HDG1-134')"
            >
                <p>{{query['HDG1-134'].busNo}}</p>
            </div>
            <div
                class="paint-row-1-1"
                @click="doCarStationClick(query['HDG1-150'].busNo)"
                v-if="query.hasOwnProperty('HDG1-150') && query['HDG1-150'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-150'].busType, 'HDG1-150')"
            >
                <p>{{query['HDG1-150'].busNo}}</p>
            </div>
            <div
                class="paint-row-1-2"
                @click="doCarStationClick(query['HDG1-166'].busNo)"
                v-if="query.hasOwnProperty('HDG1-166') && query['HDG1-166'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-166'].busType, 'HDG1-166')"
            >
                <p>{{query['HDG1-166'].busNo}}</p>
            </div>
            <div
                class="paint-row-1-3"
                @click="doCarStationClick(query['HDG1-167'].busNo)"
                v-if="query.hasOwnProperty('HDG1-167') && query['HDG1-167'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-167'].busType, 'HDG1-167')"
            >
                <p>{{query['HDG1-167'].busNo}}</p>
            </div>
            <div
                class="paint-row-1-4"
                @click="doCarStationClick(query['HDG1-168'].busNo)"
                v-if="query.hasOwnProperty('HDG1-168') && query['HDG1-168'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-168'].busType, 'HDG1-168')"
            >
                <p>{{query['HDG1-168'].busNo}}</p>
            </div>
            <!-- 第二行 -->
            <div
                class="paint-row-2-0"
                @click="doCarStationClick(query['HDG1-135'].busNo)"
                v-if="query.hasOwnProperty('HDG1-135') && query['HDG1-135'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-135'].busType, 'HDG1-135')"
            >
                <p>{{query['HDG1-135'].busNo}}</p>
            </div>
            <div
                class="paint-row-2-1"
                @click="doCarStationClick(query['HDG1-151'].busNo)"
                v-if="query.hasOwnProperty('HDG1-151') && query['HDG1-151'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-151'].busType, 'HDG1-151')"
            >
                <p>{{query['HDG1-151'].busNo}}</p>
            </div>
            <div
                class="paint-row-2-2"
                @click="doCarStationClick(query['HDG1-169'].busNo)"
                v-if="query.hasOwnProperty('HDG1-169') && query['HDG1-169'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-169'].busType, 'HDG1-169')"
            >
                <p>{{query['HDG1-169'].busNo}}</p>
            </div>
            <div
                class="paint-row-2-3"
                @click="doCarStationClick(query['HDG1-170'].busNo)"
                v-if="query.hasOwnProperty('HDG1-170') && query['HDG1-170'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-170'].busType, 'HDG1-170')"
            >
                <p>{{query['HDG1-170'].busNo}}</p>
            </div>
            <div
                class="paint-row-2-4"
                @click="doCarStationClick(query['HDG1-171'].busNo)"
                v-if="query.hasOwnProperty('HDG1-171') && query['HDG1-171'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-171'].busType, 'HDG1-171')"
            >
                <p>{{query['HDG1-171'].busNo}}</p>
            </div>
            <!-- 第三行 -->
            <div
                class="paint-row-3-0"
                @click="doCarStationClick(query['HDG1-136'].busNo)"
                v-if="query.hasOwnProperty('HDG1-136') && query['HDG1-136'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-136'].busType, 'HDG1-136')"
            >
                <p>{{query['HDG1-136'].busNo}}</p>
            </div>
            <div
                class="paint-row-3-1"
                @click="doCarStationClick(query['HDG1-152'].busNo)"
                v-if="query.hasOwnProperty('HDG1-152') && query['HDG1-152'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-152'].busType, 'HDG1-152')"
            >
                <p>{{query['HDG1-152'].busNo}}</p>
            </div>
            <div
                class="paint-row-3-2"
                @click="doCarStationClick(query['HDG1-172'].busNo)"
                v-if="query.hasOwnProperty('HDG1-172') && query['HDG1-172'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-172'].busType, 'HDG1-172')"
            >
                <p>{{query['HDG1-172'].busNo}}</p>
            </div>
            <div
                class="paint-row-3-3"
                @click="doCarStationClick(query['HDG1-173'].busNo)"
                v-if="query.hasOwnProperty('HDG1-173') && query['HDG1-173'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-173'].busType, 'HDG1-173')"
            >
                <p>{{query['HDG1-173'].busNo}}</p>
            </div>
            <div
                class="paint-row-3-4"
                @click="doCarStationClick(query['HDG1-174'].busNo)"
                v-if="query.hasOwnProperty('HDG1-174') && query['HDG1-174'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-174'].busType, 'HDG1-174')"
            >
                <p>{{query['HDG1-174'].busNo}}</p>
            </div>
            <!-- 第四行 -->
            <div
                class="paint-row-4-0"
                @click="doCarStationClick(query['HDG1-137'].busNo)"
                v-if="query.hasOwnProperty('HDG1-137') && query['HDG1-137'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-137'].busType, 'HDG1-137')"
            >
                <p>{{query['HDG1-137'].busNo}}</p>
            </div>
            <div
                class="paint-row-4-1"
                @click="doCarStationClick(query['HDG1-153'].busNo)"
                v-if="query.hasOwnProperty('HDG1-153') && query['HDG1-153'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-153'].busType, 'HDG1-153')"
            >
                <p>{{query['HDG1-153'].busNo}}</p>
            </div>
            <div
                class="paint-row-4-2"
                @click="doCarStationClick(query['HDG1-175'].busNo)"
                v-if="query.hasOwnProperty('HDG1-175') && query['HDG1-175'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-175'].busType, 'HDG1-175')"
            >
                <p>{{query['HDG1-175'].busNo}}</p>
            </div>
            <div
                class="paint-row-4-3"
                @click="doCarStationClick(query['HDG1-176'].busNo)"
                v-if="query.hasOwnProperty('HDG1-176') && query['HDG1-176'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-176'].busType, 'HDG1-176')"
            >
                <p>{{query['HDG1-176'].busNo}}</p>
            </div>
            <div
                class="paint-row-4-4"
                @click="doCarStationClick(query['HDG1-177'].busNo)"
                v-if="query.hasOwnProperty('HDG1-177') && query['HDG1-177'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-177'].busType, 'HDG1-177')"
            >
                <p>{{query['HDG1-177'].busNo}}</p>
            </div>
            <!-- 第五行 -->
            <div
                class="paint-row-5-0"
                @click="doCarStationClick(query['HDG1-138'].busNo)"
                v-if="query.hasOwnProperty('HDG1-138') && query['HDG1-138'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-138'].busType, 'HDG1-138')"
            >
                <p>{{query['HDG1-138'].busNo}}</p>
            </div>
            <div
                class="paint-row-5-1"
                @click="doCarStationClick(query['HDG1-154'].busNo)"
                v-if="query.hasOwnProperty('HDG1-154') && query['HDG1-154'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-154'].busType, 'HDG1-154')"
            >
                <p>{{query['HDG1-154'].busNo}}</p>
            </div>
            <div
                class="paint-row-5-2"
                @click="doCarStationClick(query['HDG1-178'].busNo)"
                v-if="query.hasOwnProperty('HDG1-178') && query['HDG1-178'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-178'].busType, 'HDG1-178')"
            >
                <p>{{query['HDG1-178'].busNo}}</p>
            </div>
            <div
                class="paint-row-5-3"
                @click="doCarStationClick(query['HDG1-179'].busNo)"
                v-if="query.hasOwnProperty('HDG1-179') && query['HDG1-179'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-179'].busType, 'HDG1-179')"
            >
                <p>{{query['HDG1-179'].busNo}}</p>
            </div>
            <div
                class="paint-row-5-4"
                @click="doCarStationClick(query['HDG1-180'].busNo)"
                v-if="query.hasOwnProperty('HDG1-180') && query['HDG1-180'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-180'].busType, 'HDG1-180')"
            >
                <p>{{query['HDG1-180'].busNo}}</p>
            </div>
            <!-- 第六行 -->
            <div
                class="paint-row-6-0"
                @click="doCarStationClick(query['HDG1-139'].busNo)"
                v-if="query.hasOwnProperty('HDG1-139') && query['HDG1-139'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-139'].busType, 'HDG1-139')"
            >
                <p>{{query['HDG1-139'].busNo}}</p>
            </div>
            <div
                class="paint-row-6-1"
                @click="doCarStationClick(query['HDG1-155'].busNo)"
                v-if="query.hasOwnProperty('HDG1-155') && query['HDG1-155'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-155'].busType, 'HDG1-155')"
            >
                <p>{{query['HDG1-155'].busNo}}</p>
            </div>
            <div
                class="paint-row-6-2"
                @click="doCarStationClick(query['HDG1-181'].busNo)"
                v-if="query.hasOwnProperty('HDG1-181') && query['HDG1-181'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-181'].busType, 'HDG1-181')"
            >
                <p>{{query['HDG1-181'].busNo}}</p>
            </div>
            <div
                class="paint-row-6-3"
                @click="doCarStationClick(query['HDG1-182'].busNo)"
                v-if="query.hasOwnProperty('HDG1-182') && query['HDG1-182'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-182'].busType, 'HDG1-182')"
            >
                <p>{{query['HDG1-182'].busNo}}</p>
            </div>
            <div
                class="paint-row-6-4"
                @click="doCarStationClick(query['HDG1-183'].busNo)"
                v-if="query.hasOwnProperty('HDG1-183') && query['HDG1-183'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-183'].busType, 'HDG1-183')"
            >
                <p>{{query['HDG1-183'].busNo}}</p>
            </div>
            <!-- 第七行 -->
            <div
                class="paint-row-7-0"
                @click="doCarStationClick(query['HDG1-140'].busNo)"
                v-if="query.hasOwnProperty('HDG1-140') && query['HDG1-140'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-140'].busType, 'HDG1-140')"
            >
                <p>{{query['HDG1-140'].busNo}}</p>
            </div>
            <div
                class="paint-row-7-1"
                @click="doCarStationClick(query['HDG1-156'].busNo)"
                v-if="query.hasOwnProperty('HDG1-156') && query['HDG1-156'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-156'].busType, 'HDG1-156')"
            >
                <p>{{query['HDG1-156'].busNo}}</p>
            </div>
            <div
                class="paint-row-7-2"
                @click="doCarStationClick(query['HDG1-184'].busNo)"
                v-if="query.hasOwnProperty('HDG1-184') && query['HDG1-184'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-184'].busType, 'HDG1-184')"
            >
                <p>{{query['HDG1-184'].busNo}}</p>
            </div>
            <div
                class="paint-row-7-3"
                @click="doCarStationClick(query['HDG1-185'].busNo)"
                v-if="query.hasOwnProperty('HDG1-185') && query['HDG1-185'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-185'].busType, 'HDG1-185')"
            >
                <p>{{query['HDG1-185'].busNo}}</p>
            </div>
            <div
                class="paint-row-7-4"
                @click="doCarStationClick(query['HDG1-186'].busNo)"
                v-if="query.hasOwnProperty('HDG1-186') && query['HDG1-186'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-186'].busType, 'HDG1-186')"
            >
                <p>{{query['HDG1-186'].busNo}}</p>
            </div>
            <!-- 第八行 -->
            <div
                class="paint-row-8-0"
                @click="doCarStationClick(query['HDG1-141'].busNo)"
                v-if="query.hasOwnProperty('HDG1-141') && query['HDG1-141'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-141'].busType, 'HDG1-141')"
            >
                <p>{{query['HDG1-141'].busNo}}</p>
            </div>
            <div
                class="paint-row-8-1"
                @click="doCarStationClick(query['HDG1-157'].busNo)"
                v-if="query.hasOwnProperty('HDG1-157') && query['HDG1-157'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-157'].busType, 'HDG1-157')"
            >
                <p>{{query['HDG1-157'].busNo}}</p>
            </div>
            <div
                class="paint-row-8-2"
                @click="doCarStationClick(query['HDG1-187'].busNo)"
                v-if="query.hasOwnProperty('HDG1-187') && query['HDG1-187'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-187'].busType, 'HDG1-187')"
            >
                <p>{{query['HDG1-187'].busNo}}</p>
            </div>
            <div
                class="paint-row-8-3"
                @click="doCarStationClick(query['HDG1-188'].busNo)"
                v-if="query.hasOwnProperty('HDG1-188') && query['HDG1-188'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-188'].busType, 'HDG1-188')"
            >
                <p>{{query['HDG1-188'].busNo}}</p>
            </div>
            <div
                class="paint-row-8-4"
                @click="doCarStationClick(query['HDG1-189'].busNo)"
                v-if="query.hasOwnProperty('HDG1-189') && query['HDG1-189'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-189'].busType, 'HDG1-189')"
            >
                <p>{{query['HDG1-189'].busNo}}</p>
            </div>
            <!-- 第九行 -->
            <div
                class="paint-row-9-0"
                @click="doCarStationClick(query['HDG1-142'].busNo)"
                v-if="query.hasOwnProperty('HDG1-142') && query['HDG1-142'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-142'].busType, 'HDG1-142')"
            >
                <p>{{query['HDG1-142'].busNo}}</p>
            </div>
            <div
                class="paint-row-9-1"
                @click="doCarStationClick(query['HDG1-158'].busNo)"
                v-if="query.hasOwnProperty('HDG1-158') && query['HDG1-158'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-158'].busType, 'HDG1-158')"
            >
                <p>{{query['HDG1-158'].busNo}}</p>
            </div>
            <div
                class="paint-row-9-2"
                @click="doCarStationClick(query['HDG1-190'].busNo)"
                v-if="query.hasOwnProperty('HDG1-190') && query['HDG1-190'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-190'].busType, 'HDG1-190')"
            >
                <p>{{query['HDG1-190'].busNo}}</p>
            </div>
            <div
                class="paint-row-9-3"
                @click="doCarStationClick(query['HDG1-191'].busNo)"
                v-if="query.hasOwnProperty('HDG1-191') && query['HDG1-191'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-191'].busType, 'HDG1-191')"
            >
                <p>{{query['HDG1-191'].busNo}}</p>
            </div>
            <div
                class="paint-row-9-4"
                @click="doCarStationClick(query['HDG1-192'].busNo)"
                v-if="query.hasOwnProperty('HDG1-192') && query['HDG1-192'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-192'].busType, 'HDG1-192')"
            >
                <p>{{query['HDG1-192'].busNo}}</p>
            </div>
            <!-- 第十行 -->
            <div
                class="paint-row-10-0"
                @click="doCarStationClick(query['HDG1-143'].busNo)"
                v-if="query.hasOwnProperty('HDG1-143') && query['HDG1-143'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-143'].busType, 'HDG1-143')"
            >
                <p>{{query['HDG1-143'].busNo}}</p>
            </div>
            <div
                class="paint-row-10-1"
                v-if="query.hasOwnProperty('HDG1-159') && query['HDG1-159'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-159'].busType, 'HDG1-159')"
            >
                <p>{{query['HDG1-159'].busNo}}</p>
            </div>
            <div
                class=" paint-row-10-2"
                @click="doCarStationClick(query['HDG1-193'].busNo)"
                v-if="query.hasOwnProperty('HDG1-193') && query['HDG1-193'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-193'].busType, 'HDG1-193')"
            >
                <p>{{query['HDG1-193'].busNo}}</p>
            </div>
            <div
                class="paint-row-10-3"
                @click="doCarStationClick(query['HDG1-194'].busNo)"
                v-if="query.hasOwnProperty('HDG1-194') && query['HDG1-194'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-194'].busType, 'HDG1-194')"
            >
                <p>{{query['HDG1-194'].busNo}}</p>
            </div>
            <div
                class=" paint-row-10-4"
                @click="doCarStationClick(query['HDG1-195'].busNo)"
                v-if="query.hasOwnProperty('HDG1-195') && query['HDG1-195'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-195'].busType, 'HDG1-195')"
            >
                <p>{{query['HDG1-195'].busNo}}</p>
            </div>
            <!-- 第十一行 -->
            <div
                class=" paint-row-11-0"
                @click="doCarStationClick(query['HDG1-144'].busNo)"
                v-if="query.hasOwnProperty('HDG1-144') && query['HDG1-144'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-144'].busType, 'HDG1-144')"
            >
                <p>{{query['HDG1-144'].busNo}}</p>
            </div>
            <div
                class=" paint-row-11-1"
                @click="doCarStationClick(query['HDG1-160'].busNo)"
                v-if="query.hasOwnProperty('HDG1-160') && query['HDG1-160'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-160'].busType, 'HDG1-160')"
            >
                <p>{{query['HDG1-160'].busNo}}</p>
            </div>
            <div
                class=" paint-row-11-2"
                @click="doCarStationClick(query['HDG1-196'].busNo)"
                v-if="query.hasOwnProperty('HDG1-196') && query['HDG1-196'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-196'].busType, 'HDG1-196')"
            >
                <p>{{query['HDG1-196'].busNo}}</p>
            </div>
            <div
                class="paint-row-11-3"
                @click="doCarStationClick(query['HDG1-197'].busNo)"
                v-if="query.hasOwnProperty('HDG1-197') && query['HDG1-197'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-197'].busType, 'HDG1-197')"
            >
                <p>{{query['HDG1-197'].busNo}}</p>
            </div>
            <div
                class="paint-row-11-4"
                @click="doCarStationClick(query['HDG1-198'].busNo)"
                v-if="query.hasOwnProperty('HDG1-198') && query['HDG1-198'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-198'].busType, 'HDG1-198')"
            >
                <p>{{query['HDG1-198'].busNo}}</p>
            </div>
            <!-- 第十二行 -->
            <div
                class=" paint-row-12-0"
                @click="doCarStationClick(query['HDG1-145'].busNo)"
                v-if="query.hasOwnProperty('HDG1-145') && query['HDG1-145'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-145'].busType, 'HDG1-145')"
            >
                <p>{{query['HDG1-145'].busNo}}</p>
            </div>
            <div
                class="paint-row-12-2"
                @click="doCarStationClick(query['HDG1-161'].busNo)"
                v-if="query.hasOwnProperty('HDG1-161') && query['HDG1-161'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-161'].busType, 'HDG1-161')"
            >
                <p>{{query['HDG1-161'].busNo}}</p>
            </div>
            <div
                class="paint-row-12-3"
                @click="doCarStationClick(query['HDG1-199'].busNo)"
                v-if="query.hasOwnProperty('HDG1-199') && query['HDG1-199'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-199'].busType, 'HDG1-199')"
            >
                <p>{{query['HDG1-199'].busNo}}</p>
            </div>
            <div
                class="paint-row-12-4"
                @click="doCarStationClick(query['HDG1-200'].busNo)"
                v-if="query.hasOwnProperty('HDG1-200') && query['HDG1-200'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-200'].busType, 'HDG1-200')"
            >
                <p>{{query['HDG1-200'].busNo}}</p>
            </div>
            <div
                class="paint-row-12-5"
                @click="doCarStationClick(query['HDG1-201'].busNo)"
                v-if="query.hasOwnProperty('HDG1-201') && query['HDG1-201'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-201'].busType, 'HDG1-201')"
            >
                <p>{{query['HDG1-201'].busNo}}</p>
            </div>
            <!-- 第十三行 -->
            <div
                class="paint-row-13-0"
                @click="doCarStationClick(query['HDG1-146'].busNo)"
                v-if="query.hasOwnProperty('HDG1-146') && query['HDG1-146'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-146'].busType, 'HDG1-146')"
            >
                <p>{{query['HDG1-146'].busNo}}</p>
            </div>
            <div
                class="paint-row-13-1"
                @click="doCarStationClick(query['HDG1-162'].busNo)"
                v-if="query.hasOwnProperty('HDG1-162') && query['HDG1-162'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-162'].busType, 'HDG1-162')"
            >
                <p>{{query['HDG1-162'].busNo}}</p>
            </div>
            <div
                class="paint-row-13-2"
                @click="doCarStationClick(query['HDG1-202'].busNo)"
                v-if="query.hasOwnProperty('HDG1-202') && query['HDG1-202'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-202'].busType, 'HDG1-202')"
            >
                <p>{{query['HDG1-202'].busNo}}</p>
            </div>
            <div
                class="paint-row-13-3"
                @click="doCarStationClick(query['HDG1-203'].busNo)"
                v-if="query.hasOwnProperty('HDG1-203') && query['HDG1-203'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-203'].busType, 'HDG1-203')"
            >
                <p>{{query['HDG1-203'].busNo}}</p>
            </div>
            <div
                class="paint-row-13-5"
                @click="doCarStationClick(query['HDG1-204'].busNo)"
                v-if="query.hasOwnProperty('HDG1-204') && query['HDG1-204'].state !== 'FREE'"
                :class="judgeCarTypeAndcarStationstyle(query['HDG1-204'].busType, 'HDG1-204')"
            >
                <p>{{query['HDG1-204'].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>
/**
 * @author MARS 2019-09-28 <wangyunfan@vtstar.net>
 * @fileoverview 面/漆作业区
 */
import Tooltip from './Tooltip';
export default {
    name: 'MonitorComplexionPaint',
    components: {
        Tooltip
    },
    data () {
        return {
            // 定时器
            timer: null,
            // 当前在线人数
            onlineNum: null,
            // 车辆定位数据
            carPostionInfo: {},
            // 面色/漆作业区域实时信息
            query: {},
            // 根据车身号获得当前车体信息
            BusInformation: {
                saleOrderNo: '2019-10-11 11:09',
                planOrderNo: '83848484',
                code: 'EDSCSFDGVG',
                busType: 'car',
                orderSize: '2222222255555550',
                unit: 'From China',
                shop: '二号车间',
                line: '4-25'
            }
        };
    },

    mounted () {
        this.pollingGetInterface();
    },
    beforeDestroy () {
        clearInterval(this.timer);
    },
    methods: {
        //  获取面色/漆作业区实时信息
        getComplexionPaintInformation () {
            this.$fetch('area-controller/realTime-get', { areaNo: '6' })
                .then(res => {
                    for (let item of res) {
                        if (item.code === '6') {
                            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 '';
                }
            }
        },
        doCarStationClick (busNub) {
            console.log(busNub);
            let left = window.event.clientX;
            let top = window.event.clientY;
            this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible';
            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: busNub })
                .then(res => {
                    console.log('res', res);
                    // this.BusInformation = _.cloneDeep(res);
                })
                .catch(error => {
                    reject(error);
                });
        },
        // 查询车辆定位
        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 () {
            // 查询车辆定位
            console.log('2222', this.$route.query);
            if (
                this.$route.query.hasOwnProperty('orderNo') ||
                this.$route.query.hasOwnProperty('workOrderNo')
            ) {
                this.getCarPostion();
            }
            // 获取面色/漆作业区实时信息
            this.getComplexionPaintInformation();
            this.timer = setInterval(() => {
                this.carPostionInfo = {};
                // 获取面色/漆作业区实时信息
                this.getComplexionPaintInformation();
            }, 20000);
        }
    }
};
</script>
<style lang="scss" scoped>
.page-body {
    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;
        }
    }
    .paint-content {
        position: relative;
        margin: 0 auto;
        width: 1600px;
        height: 900px;
        background: url("../../../assets/images/Monitor/paint-bg.png") no-repeat;

        .paint-row-1-0,
        .paint-row-1-1,
        .paint-row-1-2,
        .paint-row-1-3,
        .paint-row-1-4,
        .paint-row-1-5,
        .paint-row-2-0,
        .paint-row-2-1,
        .paint-row-2-2,
        .paint-row-2-3,
        .paint-row-2-4,
        .paint-row-2-5,
        .paint-row-3-0,
        .paint-row-3-1,
        .paint-row-3-2,
        .paint-row-3-3,
        .paint-row-3-4,
        .paint-row-3-5,
        .paint-row-4-0,
        .paint-row-4-1,
        .paint-row-4-2,
        .paint-row-4-3,
        .paint-row-4-4,
        .paint-row-4-5,
        .paint-row-5-0,
        .paint-row-5-1,
        .paint-row-5-2,
        .paint-row-5-3,
        .paint-row-5-4,
        .paint-row-5-5,
        .paint-row-6-0,
        .paint-row-6-1,
        .paint-row-6-2,
        .paint-row-6-3,
        .paint-row-6-4,
        .paint-row-6-5,
        .paint-row-7-0,
        .paint-row-7-1,
        .paint-row-7-2,
        .paint-row-7-3,
        .paint-row-7-4,
        .paint-row-7-5,
        .paint-row-8-0,
        .paint-row-8-1,
        .paint-row-8-2,
        .paint-row-8-3,
        .paint-row-8-4,
        .paint-row-8-5,
        .paint-row-9-0,
        .paint-row-9-1,
        .paint-row-9-2,
        .paint-row-9-3,
        .paint-row-9-4,
        .paint-row-9-5,
        .paint-row-10-0,
        .paint-row-10-1,
        .paint-row-10-2,
        .paint-row-10-3,
        .paint-row-10-4,
        .paint-row-10-5,
        .paint-row-11-0,
        .paint-row-11-1,
        .paint-row-11-2,
        .paint-row-11-3,
        .paint-row-11-4,
        .paint-row-11-5,
        .paint-row-12-0,
        .paint-row-12-2,
        .paint-row-12-3,
        .paint-row-12-4,
        .paint-row-12-5,
        .paint-row-13-0,
        .paint-row-13-1,
        .paint-row-13-2,
        .paint-row-13-3,
        .paint-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;
            }
        }
        // ?第0行 left
        .paint-row-1-0,
        .paint-row-2-0,
        .paint-row-3-0,
        .paint-row-4-0,
        .paint-row-5-0,
        .paint-row-6-0,
        .paint-row-7-0,
        .paint-row-8-0,
        .paint-row-9-0,
        .paint-row-10-0,
        .paint-row-11-0,
        .paint-row-12-0,
        .paint-row-13-0 {
            left: 157px;
        }

        // ? 第一行 top
        .paint-row-1-0,
        .paint-row-1-1,
        .paint-row-1-2,
        .paint-row-1-3,
        .paint-row-1-4 {
            top: 151px;
        }
        .paint-row-1-5 {
            top: 142px;
        }
        // ?第一行 left
        .paint-row-1-1,
        .paint-row-2-1,
        .paint-row-3-1,
        .paint-row-4-1,
        .paint-row-5-1,
        .paint-row-6-1,
        .paint-row-7-1,
        .paint-row-8-1,
        .paint-row-9-1,
        .paint-row-10-1,
        .paint-row-11-1,
        .paint-row-13-1 {
            left: 315px;
        }
        .paint-row-1-2,
        .paint-row-5-2,
        .paint-row-7-2,
        .paint-row-8-2,
        .paint-row-12-2 {
            left: 675px;
        }
        .paint-row-1-3,
        .paint-row-2-3,
        .paint-row-7-3,
        .paint-row-11-3 {
            left: 802px;
        }
        .paint-row-1-4,
        .paint-row-3-4,
        .paint-row-4-4,
        .paint-row-6-4,
        .paint-row-7-4,
        .paint-row-9-4,
        .paint-row-10-4,
        .paint-row-11-4,
        .paint-row-12-4 {
            left: 961px;
        }
        .paint-row-1-5,
        .paint-row-2-5,
        .paint-row-3-5,
        .paint-row-4-5,
        .paint-row-5-5,
        .paint-row-6-5,
        .paint-row-7-5,
        .paint-row-8-5,
        .paint-row-9-5,
        .paint-row-10-5,
        .paint-row-11-5,
        .paint-row-12-5,
        .paint-row-13-5 {
            left: 1295px;
        }

        // ?第二行 top
        .paint-row-2-0,
        .paint-row-2-1,
        .paint-row-2-2,
        .paint-row-2-3,
        .paint-row-2-4 {
            top: 210px;
        }
        .paint-row-2-5 {
            top: 202px;
        }
        // ?第二行 left
        .paint-row-2-2,
        .paint-row-3-2,
        .paint-row-4-2,
        .paint-row-6-2,
        .paint-row-9-2,
        .paint-row-10-2,
        .paint-row-11-2,
        .paint-row-13-2 {
            left: 635px;
        }
        .paint-row-2-4,
        .paint-row-5-4,
        .paint-row-8-4 {
            left: 995px;
        }

        // ?第三行 top
        .paint-row-3-0,
        .paint-row-3-1,
        .paint-row-3-2,
        .paint-row-3-3,
        .paint-row-3-4 {
            top: 266px;
        }
        .paint-row-3-5 {
            top: 256px;
        }

        .paint-row-3-3,
        .paint-row-4-3,
        .paint-row-5-3,
        .paint-row-6-3,
        .paint-row-8-3,
        .paint-row-9-3,
        .paint-row-10-3,
        .paint-row-12-3,
        .paint-row-13-3 {
            left: 848px;
        }

        // ?第四行 top
        .paint-row-4-0,
        .paint-row-4-1,
        .paint-row-4-2,
        .paint-row-4-3,
        .paint-row-4-4 {
            top: 325px;
        }
        .paint-row-4-5 {
            top: 315px;
        }

        // ?第五行 top
        .paint-row-5-0,
        .paint-row-5-1,
        .paint-row-5-2,
        .paint-row-5-3,
        .paint-row-5-4 {
            top: 382px;
        }
        .paint-row-5-5 {
            top: 372px;
        }

        // ?第六行 top
        .paint-row-6-0,
        .paint-row-6-1,
        .paint-row-6-2,
        .paint-row-6-3,
        .paint-row-6-4 {
            top: 438px;
        }
        .paint-row-6-5 {
            top: 428px;
        }

        // ?第七行 top
        .paint-row-7-0,
        .paint-row-7-1,
        .paint-row-7-2,
        .paint-row-7-3,
        .paint-row-7-4 {
            top: 495px;
        }
        .paint-row-7-5 {
            top: 485px;
        }

        // ?第八行 top
        .paint-row-8-0,
        .paint-row-8-1,
        .paint-row-8-2,
        .paint-row-8-3,
        .paint-row-8-4 {
            top: 550px;
        }
        .paint-row-8-5 {
            top: 544px;
        }

        // ?第九行
        .paint-row-9-0,
        .paint-row-9-1 {
            top: 610px;
        }
        .paint-row-9-2,
        .paint-row-9-3,
        .paint-row-9-4,
        .paint-row-9-5 {
            top: 602px;
        }

        // ?第十行
        .paint-row-10-0,
        .paint-row-10-1,
        .paint-row-10-2,
        .paint-row-10-3,
        .paint-row-10-4,
        .paint-row-10-5 {
            top: 666px;
        }

        // ?第十一行
        .paint-row-11-0,
        .paint-row-11-1 {
            top: 723px;
        }
        .paint-row-11-2,
        .paint-row-11-3,
        .paint-row-11-4 {
            top: 730px;
        }
        .paint-row-11-5 {
            top: 713px;
        }

        // ?第十二行
        .paint-row-12-0,
        .paint-row-12-2,
        .paint-row-12-3,
        .paint-row-12-4 {
            top: 780px;
        }
        .paint-row-12-5 {
            top: 759px;
        }

        // ?第十三行
        .paint-row-13-0,
        .paint-row-13-1,
        .paint-row-13-3,
        .paint-row-13-2 {
            top: 816px;
        }
        .paint-row-13-5 {
            top: 808px;
        }
        .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;
            background-image: none;
        }
    }
}
</style>
