feat(面色漆工作区)：功能联调（50%）

src/views/Monitor/components/ComplexionPaint.vue

@@ -2,251 +2,640 @@
     <div class="page-body">
         <div class="paint-content">
             <!-- 第一行 -->
-            <div class="paint-row-1-0">
-                <p>CDA11323</p>
-            </div>
-            <div class="paint-row-1-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-1-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-1-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-1-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-1-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-1-0"
+                @click="clickBtn(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="clickBtn(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="clickBtn(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="clickBtn(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-4"
+                @click="clickBtn(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-5"
+                @click="clickBtn(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-2-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-2-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-2-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-2-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-2-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-2-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-2-0"
+                @click="clickBtn(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-2-1"
+                @click="clickBtn(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-2-2"
+                @click="clickBtn(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-2-3"
+                @click="clickBtn(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-2-4"
+                @click="clickBtn(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-2-5"
+                @click="clickBtn(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-3-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-3-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-3-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-3-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-3-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-3-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-3-0"
+                @click="clickBtn(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-3-1"
+                @click="clickBtn(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-3-2"
+                @click="clickBtn(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-3-3"
+                @click="clickBtn(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-3-4"
+                @click="clickBtn(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-3-5"
+                @click="clickBtn(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-4-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-4-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-4-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-4-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-4-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-4-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-4-0"
+                @click="clickBtn(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-4-1"
+                @click="clickBtn(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-4-2"
+                @click="clickBtn(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-4-3"
+                @click="clickBtn(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-4-4"
+                @click="clickBtn(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-4-5"
+                @click="clickBtn(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-5-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-5-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-5-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-5-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-5-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-5-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-5-0"
+                @click="clickBtn(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-5-1"
+                @click="clickBtn(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-5-2"
+                @click="clickBtn(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-5-3"
+                @click="clickBtn(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-5-4"
+                @click="clickBtn(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-5-5"
+                @click="clickBtn(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-6-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-6-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-6-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-6-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-6-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-6-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-6-0"
+                @click="clickBtn(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-6-1"
+                @click="clickBtn(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-6-2"
+                @click="clickBtn(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-6-3"
+                @click="clickBtn(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-6-4"
+                @click="clickBtn(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-6-5"
+                @click="clickBtn(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-7-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-7-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-7-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-7-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-7-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-7-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-7-0"
+                @click="clickBtn(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-7-1"
+                @click="clickBtn(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-7-2"
+                @click="clickBtn(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-7-3"
+                @click="clickBtn(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-7-4"
+                @click="clickBtn(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-7-5"
+                @click="clickBtn(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-8-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-8-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-8-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-8-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-8-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-8-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-8-0"
+                @click="clickBtn(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-8-1"
+                @click="clickBtn(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-8-2"
+                @click="clickBtn(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-8-3"
+                @click="clickBtn(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-8-4"
+                @click="clickBtn(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-8-5"
+                @click="clickBtn(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-9-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-9-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-9-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-9-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-9-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-9-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-9-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-9-0"
+                @click="clickBtn(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-9-1"
+                @click="clickBtn(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-9-1"
+                @click="clickBtn(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-9-2"
+                @click="clickBtn(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-9-3"
+                @click="clickBtn(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-9-4"
+                @click="clickBtn(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-9-5"
+                @click="clickBtn(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-10-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-10-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-10-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-10-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-10-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-10-5">
-                <p>CDA231312</p>
+            <div
+                class="paint-row-10-0"
+                @click="clickBtn(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-10-1"
+                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-10-2"
+                @click="clickBtn(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-10-3"
+                @click="clickBtn(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-10-4"
+                @click="clickBtn(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-10-5"
+                @click="clickBtn(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-11-0">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-11-1">
-                <p>CDA23323</p>
-            </div>
-            <div class="paint-row-11-2">
-                <p>CDA2333</p>
-            </div>
-            <div class="paint-row-11-3">
-                <p>CDA23</p>
-            </div>
-            <div class="paint-row-11-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-11-5">
-                <p>CDA231312</p>
+            <div
+                class=" paint-row-11-0"
+                @click="clickBtn(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-11-1"
+                @click="clickBtn(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-11-2"
+                @click="clickBtn(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-11-3"
+                @click="clickBtn(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-11-4"
+                @click="clickBtn(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-11-5"
+                @click="clickBtn(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-12-0">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-12-2">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-12-3">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-12-4">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-12-5">
-                <p>CDA231312</p>
+            <div
+                class=" paint-row-12-0"
+                @click="clickBtn(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-12-2"
+                @click="clickBtn(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-12-3"
+                @click="clickBtn(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-12-4"
+                @click="clickBtn(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-12-5"
+                @click="clickBtn(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-13-0">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-13-1">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-13-2">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-13-3">
-                <p>CDA2</p>
-            </div>
-            <div class="paint-row-13-5">
-                <p>CDA231312</p>
-            </div>
+            <div
+                class="paint-row-13-0"
+                @click="clickBtn(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-13-1"
+                @click="clickBtn(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-13-2"
+                @click="clickBtn(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-13-3"
+                @click="clickBtn(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-13-5"
+                @click="clickBtn(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>
+            <Tooltip
+                ref="toolRef"
+                :query="BusInformation"
+            >
+            </Tooltip>
         </div>
     </div>
 </template>
@@ -255,15 +644,121 @@
  * @author MARS 2019-09-28 <wangyunfan@vtstar.net>
  * @fileoverview 面/漆作业区
  */
+import Tooltip from './Tooltip';
 export default {
+    components: {
+        Tooltip
+    },
     data () {
-        return {}
+        return {
+            // 面色/漆作业区域实时信息
+            query: {
+                'HDG1-134': {
+                    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'
+                },
+                'HDG1-150': {
+                    areaId: 0,
+                    areaName: 'DF205411010',
+                    busNo: 'DF20190110',
+                    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-166': {
+                    areaId: 0,
+                    areaName: 'DF205411010',
+                    busNo: 'DN20191010',
+                    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: '2019-10-11 11:09',
+                planOrderNo: '83848484',
+                code: 'EDSCSFDGVG',
+                busType: 'car',
+                orderSize: '20',
+                unit: 'From China',
+                shop: '二号车间',
+                line: '4-25'
+            }
+        };
     },
 
-    mounted () {},
+    mounted () {
+        this.getComplexionPaintInformation();
+        console.log(this.$route);
+    },
 
-    methods: {}
-}
+    methods: {
+        //查询面色/漆作业区实时信息
+        getComplexionPaintInformation () {
+            this.$fetch('area-controller/realTime-get', { areaNo: '6' })
+                .then(res => {
+                    console.log(res);
+                })
+                .catch(error => {
+                    reject(error);
+                });
+        },
+        judgeCarTypeAndcarStationstyle (outOrIn, station) {
+            //根据车位编码Station 判断是否该车位已经被定位
+            /* .... */
+            console.log('outorin', outOrIn);
+            console.log('车位', station);
+            if (outOrIn === 'OTHER') {
+                return 'carOutFactory';
+            } else {
+                return '';
+            }
+        },
+        clickBtn (busNub) {
+            console.log(busNub);
+            let left = window.event.clientX;
+            let top = window.event.clientY;
+            console.log('left', left);
+            console.log('top', top);
+            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);
+                })
+                .catch(error => {
+                    console.log(error);
+                });
+        }
+    }
+};
 </script>
 <style lang="scss" scoped>
 .page-body {
@@ -275,7 +770,7 @@ export default {
         margin: 0 auto;
         width: 1600px;
         height: 900px;
-        background: url('../../../assets/images/Monitor/paint-bg.png') no-repeat;
+        background: url("../../../assets/images/Monitor/paint-bg.png") no-repeat;
 
         .paint-row-1-0,
         .paint-row-1-1,
@@ -357,7 +852,8 @@ export default {
             width: 140px;
             height: 40px;
             cursor: pointer;
-            background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat;
+            background: url("../../../assets/images/Monitor/monitor_car.png")
+                no-repeat;
             background-size: 35px 18px;
             background-position: 0 16px;
 
@@ -623,6 +1119,18 @@ export default {
         .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;
+        }
     }
 }
 </style>

src/views/Monitor/components/Electrophoresis.vue

@@ -6,7 +6,7 @@
             <div
                 class="elect-row-1-1"
                 @click="clickBtn(query['STC1-1'].busNo)"
-                v-if="query.hasOwnProperty('STC1-1') && query['STC1-1'].state !== 'N'"
+                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>
@@ -14,14 +14,14 @@
             <div
                 class="elect-row-1-2"
                 @click="clickBtn()"
-                v-if="query.hasOwnProperty('STC1-8') && query['STC1-8'].state !== 'N'"
+                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"
-                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'N'"
+                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>
@@ -29,336 +29,336 @@
             <!-- 第 2 行 -->
             <div
                 class="elect-row-2-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                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>
             <div
                 class="elect-row-2-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                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>
             <div
                 class="elect-row-2-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 3 行 -->
             <div
                 class="elect-row-3-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-3-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-3-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 4 行 -->
             <div
                 class="elect-row-4-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-4-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-4-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 5 行 -->
             <div
                 class="elect-row-5-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-5-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-5-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 6 行 -->
             <div
                 class="elect-row-6-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-6-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-6-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 6.5行 -->
             <div
                 class="elect-row-6-4"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 7 行 -->
             <div
                 class="elect-row-7-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-7-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-7-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 8 行 -->
             <div
                 class="elect-row-8-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-8-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-8-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 9 行 -->
             <div
                 class="elect-row-9-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-9-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-9-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-9-4"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 10 行 -->
             <div
                 class="elect-row-10-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-10-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-10-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-10-4"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-10-5"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 11 行 -->
             <div
                 class="elect-row-11-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-11-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-11-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-11-4"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-11-5"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 12 行 -->
             <div
                 class="elect-row-12-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-12-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-12-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-12-4"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-12-5"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <!-- 第 13 行 -->
             <div
                 class="elect-row-13-1"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-13-2"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-13-3"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
             <div
                 class="elect-row-13-4"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
 
             <div
                 class="elect-row-13-5"
-                v-if="query['HDG1-31'].state==='Y'?true:false"
-                :class="query['HDG1-31'].busType==='In'?'carInFactory':'carOutFactory'"
+                v-if="query.hasOwnProperty('HDG1-31') && query['HDG1-31'].state !== 'FREE'"
+                :class="judgeCarTypeAndcarStationstyle(query['HDG1-31'].busType, 'HDG1-31')"
             >
                 <p>CDA11323</p>
             </div>
@@ -384,7 +384,7 @@ export default {
                     areaId: 0,
                     areaName: 'DF20191010',
                     busNo: 'DF20191010',
-                    busType: 'Out', //IN/OUT
+                    busType: 'OTHER', //IN/OUT
                     code: 'string',
                     id: 0,
                     keyStation: true,
@@ -392,14 +392,14 @@ export default {
                     laneId: 0,
                     sequence: 0,
                     skidID: 0,
-                    state: 'Y', //0.1 Y/N
+                    state: 'USE', //0.1 Y/N
                     workshopCode: 'string'
                 },
                 'STC1-8': {
                     areaId: 0,
                     areaName: 'DF205411010',
                     busNo: 'DF20191010',
-                    busType: 'In', //IN/OUT
+                    busType: 'OWN', //IN/OUT
                     code: 'string',
                     id: 0,
                     keyStation: true,
@@ -407,14 +407,14 @@ export default {
                     laneId: 0,
                     sequence: 0,
                     skidID: 0,
-                    state: 'Y', //0.1 Y/N
+                    state: 'USE', //0.1 Y/N
                     workshopCode: 'string'
                 },
                 'HDG1-31': {
                     areaId: 0,
                     areaName: 'DF205411010',
                     busNo: 'DF20191010',
-                    busType: 'Out', //IN/OUT
+                    busType: 'OTHER', //IN/OUT
                     code: 'string',
                     id: 0,
                     keyStation: true,
@@ -422,7 +422,7 @@ export default {
                     laneId: 0,
                     sequence: 0,
                     skidID: 0,
-                    state: 'Y', //0.1 Y/N
+                    state: 'USE', //0.1 Y/N
                     workshopCode: 'string'
                 }
             },
@@ -441,9 +441,7 @@ export default {
     },
     mounted () {
         this.getElectrophoresisInformation();
-        for (let key in this.query) {
-            console.log(key)
-        }
+        console.log(this.$route)
     },
     methods: {
         // 点击车位弹出车体信息
@@ -464,6 +462,7 @@ export default {
             //     code: '222'
             // };
         },
+        //查询电泳实时信息
         getElectrophoresisInformation () {
             this.$fetch('area-controller/realTime-get', { areaNo: '2' })
                 .then(res => {
@@ -478,7 +477,7 @@ export default {
             /* .... */
             console.log('outorin', outOrIn);
             console.log('车位', station);
-            if (outOrIn === 'Out') {
+            if (outOrIn === 'OTHER') {
                 return 'carOutFactory';
             } else {
                 return '';