From f1760e9271336a66f60c5b6145284d007485a6af Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Wed, 17 Apr 2024 09:09:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/modules/home/devicepop.vue          |   95 +-
 .../{devicepop1.vue => devicepop_back.vue}    |   95 +-
 src/pages/modules/home/index.vue              |    2 +-
 src/pages/modules/home/workshop.vue           | 1577 ++++-------------
 src/pages/modules/home/workshop1.vue          |  400 -----
 src/pages/modules/home/workshop_back.vue      | 1334 ++++++++++++++
 6 files changed, 1751 insertions(+), 1752 deletions(-)
 rename src/pages/modules/home/{devicepop1.vue => devicepop_back.vue} (78%)
 delete mode 100644 src/pages/modules/home/workshop1.vue
 create mode 100644 src/pages/modules/home/workshop_back.vue

diff --git a/src/pages/modules/home/devicepop.vue b/src/pages/modules/home/devicepop.vue
index 8c82665..06c021c 100644
--- a/src/pages/modules/home/devicepop.vue
+++ b/src/pages/modules/home/devicepop.vue
@@ -1,22 +1,19 @@
 <template>
-  <div v-if="((type === 'yaossx' || type === 'yao' || type === 'hljdjw') && pkId === data.pointName) || ((type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'hlj') && pkId === data.device_code)" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}">
-    <div class="popup_arrow" :class="{'popup_arrow_down': direction === 'down'}">
-      <img src="../../../images/device/arrow.png">
-    </div>
+  <div ref="pop" class="popup_wraper">
     <div class="popup_bg">
       <div class="popup_block">
         <div class="pop_header">
-          <div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw'" class="pop_name">{{data.pointName}}</div>
-          <div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
+          <div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_name">{{data.pointName}}</div>
+          <div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
           <div v-show="type === 'yaossx'" class="pop_status">
             <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.stat)]"></div>
             <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.stat)] }}</div>
           </div>
-          <div v-show="type === 'yj' || type === 'jxs' || type === 'hlj' || type === 'yjmdw'" class="pop_status">
+          <div v-show="type === 'yj' || type === 'jxs' || type === 'hlj' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_status">
             <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.device_status)]"></div>
             <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.device_status)] }}</div>
           </div>
-          <div v-show="type === 'hljdjw'" class="pop_status">
+          <div v-show="type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_status">
             <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.pointStatus)]"></div>
             <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.pointStatus)] }}</div>
           </div>
@@ -121,7 +118,7 @@
             <div class="popup_val">{{ data.error }}</div>
           </div>
         </div>
-        <div v-show="type === 'yjmdw'" class="pop_content">
+        <div v-show="type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_content">
           <div class="popup_item">
             <div class="popup_label">工作模式</div>
             <div class="popup_val">{{ data.mode }}</div>
@@ -143,7 +140,7 @@
             <div class="popup_val">{{ data.barcode }}</div>
           </div>
         </div>
-        <div v-show="type === 'hljdjw'" class="pop_content">
+        <div v-show="type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_content">
           <div class="popup_item">
             <div class="popup_label">点位编码</div>
             <div class="popup_val">{{ data.pointCode }}</div>
@@ -158,10 +155,8 @@
 export default {
   name: 'devicepop',
   props: {
-    pkId: String,
     type: String,
-    data: Object,
-    direction: String
+    data: Object
   },
   methods: {
   }
@@ -171,32 +166,12 @@ export default {
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .popup_wraper
-  position absolute
-  left 50%
-  transform translateX(-50%) translateY(calc(-100% - 13px))
-  top 0
+  display none
+  position fixed
   z-index 100
+  _wh(530px, auto)
   padding 20px 0 30px 0
   background top center / 100% 100% url(../../../images/popup_bg.png) no-repeat
-  _wh(530px, auto)
-.popup_wraper_down
-  top auto
-  bottom 0
-  transform translateX(-50%) translateY(calc(100% + 13px))
-.popup_arrow
-  position absolute
-  _wh(22px, 23px)
-  left calc(50% - 11px)
-  bottom -23px
-  // animation todown 1.5s ease-in-out infinite
-  img
-    _wh(100%, 100%)
-.popup_arrow_down
-  bottom auto
-  top -23px
-  // animation toUp 1.5s ease-in-out infinite
-  img
-    transform rotateZ(180deg)
 .popup_bg
   _wh(100%, auto)
   background none
@@ -250,52 +225,4 @@ export default {
     span
       font-size 13px
       color #fff
-.icon-guanbi
-    position absolute
-    top -30px
-    right -30px
-    _wh(30px, 30px)
-    _font(18px, 30px, #fff,,center)
-    border 1px solid #fff
-    border-radius 50%
-    background transparent
-@keyframes todown {
-    0% {
-      transform: translateY(0)
-    }
-    100% {
-      transform: translateY(60px)
-    }
-}
-@keyframes toUp {
-    0% {
-      transform: translateY(0)
-    }
-    100% {
-      transform: translateY(-60px)
-    }
-}
-.popup_table_wrap
-  width 100%
-  max-height 132px
-.popup_table
-  width calc(100% - 14px)
-  height auto
-  margin 0 7px
-  tr
-    th
-      _font(12px, 24px, #0ff,,left)
-      background-color #262f52
-      padding 0 10px
-    td
-      _font(13px, 18px, #fff,,left)
-      min-height 24px
-      padding 0 10px
-      vertical-align middle
-    &:nth-child(2n)
-      td
-        background rgba(38,47,82,0.50)
-    &:nth-child(2n+1)
-      td
-        background rgba(38,47,82,0.80)
 </style>
diff --git a/src/pages/modules/home/devicepop1.vue b/src/pages/modules/home/devicepop_back.vue
similarity index 78%
rename from src/pages/modules/home/devicepop1.vue
rename to src/pages/modules/home/devicepop_back.vue
index 06c021c..8c82665 100644
--- a/src/pages/modules/home/devicepop1.vue
+++ b/src/pages/modules/home/devicepop_back.vue
@@ -1,19 +1,22 @@
 <template>
-  <div ref="pop" class="popup_wraper">
+  <div v-if="((type === 'yaossx' || type === 'yao' || type === 'hljdjw') && pkId === data.pointName) || ((type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'hlj') && pkId === data.device_code)" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}">
+    <div class="popup_arrow" :class="{'popup_arrow_down': direction === 'down'}">
+      <img src="../../../images/device/arrow.png">
+    </div>
     <div class="popup_bg">
       <div class="popup_block">
         <div class="pop_header">
-          <div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_name">{{data.pointName}}</div>
-          <div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
+          <div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw'" class="pop_name">{{data.pointName}}</div>
+          <div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
           <div v-show="type === 'yaossx'" class="pop_status">
             <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.stat)]"></div>
             <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.stat)] }}</div>
           </div>
-          <div v-show="type === 'yj' || type === 'jxs' || type === 'hlj' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_status">
+          <div v-show="type === 'yj' || type === 'jxs' || type === 'hlj' || type === 'yjmdw'" class="pop_status">
             <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.device_status)]"></div>
             <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.device_status)] }}</div>
           </div>
-          <div v-show="type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_status">
+          <div v-show="type === 'hljdjw'" class="pop_status">
             <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.pointStatus)]"></div>
             <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.pointStatus)] }}</div>
           </div>
@@ -118,7 +121,7 @@
             <div class="popup_val">{{ data.error }}</div>
           </div>
         </div>
-        <div v-show="type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_content">
+        <div v-show="type === 'yjmdw'" class="pop_content">
           <div class="popup_item">
             <div class="popup_label">工作模式</div>
             <div class="popup_val">{{ data.mode }}</div>
@@ -140,7 +143,7 @@
             <div class="popup_val">{{ data.barcode }}</div>
           </div>
         </div>
-        <div v-show="type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_content">
+        <div v-show="type === 'hljdjw'" class="pop_content">
           <div class="popup_item">
             <div class="popup_label">点位编码</div>
             <div class="popup_val">{{ data.pointCode }}</div>
@@ -155,8 +158,10 @@
 export default {
   name: 'devicepop',
   props: {
+    pkId: String,
     type: String,
-    data: Object
+    data: Object,
+    direction: String
   },
   methods: {
   }
@@ -166,12 +171,32 @@ export default {
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .popup_wraper
-  display none
-  position fixed
+  position absolute
+  left 50%
+  transform translateX(-50%) translateY(calc(-100% - 13px))
+  top 0
   z-index 100
-  _wh(530px, auto)
   padding 20px 0 30px 0
   background top center / 100% 100% url(../../../images/popup_bg.png) no-repeat
+  _wh(530px, auto)
+.popup_wraper_down
+  top auto
+  bottom 0
+  transform translateX(-50%) translateY(calc(100% + 13px))
+.popup_arrow
+  position absolute
+  _wh(22px, 23px)
+  left calc(50% - 11px)
+  bottom -23px
+  // animation todown 1.5s ease-in-out infinite
+  img
+    _wh(100%, 100%)
+.popup_arrow_down
+  bottom auto
+  top -23px
+  // animation toUp 1.5s ease-in-out infinite
+  img
+    transform rotateZ(180deg)
 .popup_bg
   _wh(100%, auto)
   background none
@@ -225,4 +250,52 @@ export default {
     span
       font-size 13px
       color #fff
+.icon-guanbi
+    position absolute
+    top -30px
+    right -30px
+    _wh(30px, 30px)
+    _font(18px, 30px, #fff,,center)
+    border 1px solid #fff
+    border-radius 50%
+    background transparent
+@keyframes todown {
+    0% {
+      transform: translateY(0)
+    }
+    100% {
+      transform: translateY(60px)
+    }
+}
+@keyframes toUp {
+    0% {
+      transform: translateY(0)
+    }
+    100% {
+      transform: translateY(-60px)
+    }
+}
+.popup_table_wrap
+  width 100%
+  max-height 132px
+.popup_table
+  width calc(100% - 14px)
+  height auto
+  margin 0 7px
+  tr
+    th
+      _font(12px, 24px, #0ff,,left)
+      background-color #262f52
+      padding 0 10px
+    td
+      _font(13px, 18px, #fff,,left)
+      min-height 24px
+      padding 0 10px
+      vertical-align middle
+    &:nth-child(2n)
+      td
+        background rgba(38,47,82,0.50)
+    &:nth-child(2n+1)
+      td
+        background rgba(38,47,82,0.80)
 </style>
diff --git a/src/pages/modules/home/index.vue b/src/pages/modules/home/index.vue
index 5d2ee54..02c0619 100644
--- a/src/pages/modules/home/index.vue
+++ b/src/pages/modules/home/index.vue
@@ -138,7 +138,7 @@ import bg2 from '@img/bg2.png'
 import bg3 from '@img/bg3.png'
 import bg4 from '@img/bg4.png'
 import vTime from '@components/time.vue'
-import TWorkshop from './workshop1'
+import TWorkshop from './workshop'
 export default {
   components: {
     vTime,
diff --git a/src/pages/modules/home/workshop.vue b/src/pages/modules/home/workshop.vue
index 7e58a64..045c2dd 100644
--- a/src/pages/modules/home/workshop.vue
+++ b/src/pages/modules/home/workshop.vue
@@ -1,528 +1,219 @@
 <template>
   <div class="center_wrapper">
-    <!-- <t-canvas></t-canvas> -->
-    <div class="status_wrap">
-      <div class="status_item">
-          <div class="status_tip gray"></div>
-          <div class="status_name">停机</div>
-      </div>
-      <div class="status_item">
-          <div class="status_tip yellow"></div>
-          <div class="status_name">暂停</div>
-      </div>
-      <div class="status_item">
-          <div class="status_tip green"></div>
-          <div class="status_name">运行</div>
-      </div>
-      <div class="status_item">
-          <div class="status_tip red"></div>
-          <div class="status_name">故障</div>
-      </div>
-    </div>
-    <div class="m_block m_block_2">
-      <div class="m_wraper">
-        <div class="p_device ddxt_wrap" v-for="(e, i) in [1, 1]" :key="'ddxt' + i" :class="'ddxt_wrap_' + (i +1)">
-          <div class="p_device weilan_ddxt_wrap">
-            <div class="weilan_ddxt" v-for="(e, i) in [1, 1]" :key="'cmdwl' + i">
-              <img class="device_img" :class="{'rotatey180': i === 1}" src="../../../images/device/wl_cmd_1.png" alt="">
-            </div>
-          </div>
-          <div class="p_device ssj_wrap">
-            <img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
-          </div>
-          <div v-show="i === 1" class="p_device ktp_cmd_wrap">
-            <div class="ktp_cmd" v-for="e in SortAndPalletizingList.slice(0,2)" :key="e.device_code" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <device-pop
-                :pkId="pkId"
-                type="yjmdw"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div v-show="i === 1" class="p_device ktp_cmd_wrap cmdssj_wrap">
-            <div class="ktp_cmd" v-for="(e,i) in SortAndPalletizingList.slice(2,4)" :key="e.device_code" @click="getInfo2(e)">
-              <img class="device_img" :class="{'rotatex180': i === 1}" :src="require('../../../images/device/cmdssj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <device-pop
-                :pkId="pkId"
-                type="yjmdw"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_1" v-for="e in ManipulatorInfoList.slice(0,1)" :key="e.device_code" :class="{'rotate_3': Number(e.device_status) === 1}" @click="getInfo2(e)">
-            <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="jxs"
-            :data="e"
-          ></device-pop>
-          </div>
-          <div v-show="i === 0" class="p_device robot_cmd_wrap robot_cmd_wrap_2" v-for="e in ManipulatorInfoList.slice(2,3)" :key="e.device_code" :class="{'rotate_4': Number(e.device_status) === 1}" @click="getInfo2(e)">
-            <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="jxs"
-            :data="e"
-          ></device-pop>
-          </div>
-          <div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_2" v-for="e in ManipulatorInfoList.slice(1,2)" :key="e.device_code" :class="{'rotate_4': Number(e.device_status) === 1}" @click="getInfo2(e)">
-            <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="jxs"
-            :data="e"
-          ></device-pop>
-          </div>
-        </div>
-        <div class="rgv_line_wrap">
-          <div class="rgv_line_1">
-            <div class="rgv_line_begine"></div>
-            <div class="rgv_line_begine rgv_line_end"></div>
-            <div class="rgv_line_node_wrap">
-              <div class="rgv_line_node"  v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="'rgvlinea' + i"></div>
-            </div>
-          </div>
-          <div class="rgv_line_1 rgv_line_2">
-            <div class="rgv_line_begine"></div>
-            <div class="rgv_line_begine rgv_line_end"></div>
-            <div class="rgv_line_node_wrap">
-              <div class="rgv_line_node"  v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="'rgvlineb' + i"></div>
-            </div>
-          </div>
-          <div class="rgv_line_3"></div>
-        </div>
-        <div class="p_device rgvct">
-          <img class="device_img" src="../../../images/device/rgv_ct_gray.png" alt="">
-        </div>
-        <div class="p_device ggtj_wrap ggtj_wrap_1">
-          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2]" :key="'gtssja' + i">
-        </div>
-        <div class="p_device ggtj_wrap ggtj_wrap_2">
-          <img class="fmj" src="../../../images/device/fmj_gray.png" alt="">
-          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="'gtssjb' + i">
-        </div>
-        <div class="p_device rgpt"></div>
-        <div class="p_device fmj2">
-          <img class="device_img" src="../../../images/device/fmj2_gray.png" alt="">
-        </div>
-        <div class="p_device ggtj_wrap ggtj_wrap_3">
-          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2,3]" :key="'gtssjc' + i">
-          <img class="ltssj" src="../../../images/device/ltssj_gray.png" alt="">
-          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2]" :key="'gtssjd' + i">
-          <img class="crj" src="../../../images/device/crj_gray.png" alt="">
-          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="'gtssje' + i">
-        </div>
-      </div>
-    </div>
-    <div class="m_block m_block_1">
-      <div class="m_wraper">
-        <div class="yao_wrap yao_1" @click="getInfo1(yaoObj)">
-          <div class="yao_layer3"></div>
-          <div class="yao_layer1 yao_layer1_1"></div>
-          <div class="yao_layer2 yao_layer2_1">
-            <p>进窑</p>
-          </div>
-          <device-pop
-            :pkId="pkId"
-            type="yao"
-            :data="yaoObj"
-          ></device-pop>
-        </div>
-        <div class="yao_wrap yao_2">
-          <div class="yao_layer3"></div>
-          <div class="yao_layer1 yao_layer1_1"></div>
-          <div class="yao_layer2 yao_layer2_1">
-            <p>出窑</p>
-          </div>
-        </div>
-        <div class="p_device jyw_wrap">
-          <div class="p_device" v-for="(e, i) in  [1,1,1,1]" :key="'jyw' + i" :class="'jyw' + (i+1)">
-            <img class="device_img" src="../../../images/device/ktpv_gray.png" alt="">
-          </div>
-        </div>
-        <div class="p_device dpw_wrap">
-          <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
-        </div>
-        <div class="p_device cpj_wrap">
-          <img class="device_img" src="../../../images/device/cpj_gray.png" alt="">
-        </div>
-        <div class="p_device" v-for="(e, i) in [1,1]" :key="'yjbyx' + i" :class="'yjbyx_' + (i + 1)">
-          <img class="device_img" src="../../../images/device/yjbyx_gray.png" alt="">
-        </div>
-        <div class="p_device ktp_yao_enter_wrap" v-for="el in yaossxArr.slice(0,1)" :key="el.pointName" @click="getInfo1(el)">
-          <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="'aktpyao' + i">
-            <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(el.stat)] + '.png')">
-          </div>
-          <device-pop
-            :pkId="pkId"
-            type="yaossx"
-            :data="el"
-          ></device-pop>
-        </div>
-        <div class="p_device ktp_yao_out_wrap" v-for="el in yaossxArr.slice(1,2)" :key="el.pointName" @click="getInfo1(el)">
-          <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="'bktpyao' + i">
-            <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(el.stat)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="yaossx"
-            :data="el"
-          ></device-pop>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="m_block_8">
-      <div class="p_device rgcdw_wrap">
-        <div class="rgcdw" v-for="e in manualSortingList" :key="e.pointCode" @click="getInfo1(e)">
-          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="hljdjw"
-            :data="e"
-          ></device-pop>
-        </div>
-      </div>
-      <div class="p_device cdw_wrap cdw_wrap_1">
-        <div class="cdw" v-for="e in hchjList1" :key="e.pointCode" @click="getInfo1(e)">
-          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="hljdjw"
-            :data="e"
-          ></device-pop>
-        </div>
-      </div>
-      <div class="p_device cdw_wrap cdw_wrap_2">
-        <div class="cdw" v-for="e in hchjList2" :key="e.pointCode" @click="getInfo1(e)">
-          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="hljdjw"
-            :data="e"
-          ></device-pop>
-        </div>
-      </div>
-      <div class="p_device cdw_wrap cdw_wrap_3">
-        <div class="cdw" v-for="e in hchjList3" :key="e.pointCode" @click="getInfo1(e)">
-          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="hljdjw"
-            :data="e"
-          ></device-pop>
-        </div>
-      </div>
-      <div class="p_device cdw_wrap cdw_wrap_4">
-        <div class="cdw" v-for="e in hchjList4" :key="e.pointCode" @click="getInfo1(e)">
-          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="hljdjw"
-            :data="e"
-          ></device-pop>
-        </div>
-      </div>
-      <div class="p_device cdw_wrap cdw_wrap_5">
-        <div class="cdw" v-for="e in hchjList5" :key="e.pointCode" @click="getInfo1(e)">
-          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="hljdjw"
-            :data="e"
-          ></device-pop>
-        </div>
-      </div>
-      <div class="p_device cdw_wrap cdw_wrap_6">
-        <div class="cdw" v-for="e in hchjList6" :key="e.pointCode" @click="getInfo1(e)">
-          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="hljdjw"
-            :data="e"
-          ></device-pop>
-        </div>
-      </div>
-    </div>
-    <div class="m_block m_block_3">
-      <div class="m_wraper">
-        <div class="yj_block" v-for="(el, index) in [1,1]" :key="'yj630' + index" >
-          <div class="p_device weilan_630_wrap">
-            <img class="device_img" src="../../../images/device/wl.png" alt="">
-          </div>
-          <div class="p_device flexwrap slw_630_wrap">
-            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630a' + i">
-              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
-            </div>
-          </div>
-          <div class="p_device flexwrap ktp_630_wrap">
-            <div v-show="index === 0" class="ktp_630" v-for="(e,i) in StackingPositionList.slice(0,4)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <device-pop
-                :pkId="pkId"
-                type="yjmdw"
-                :data="e"
-              ></device-pop>
-            </div>
-            <div v-show="index === 1" class="ktp_630" v-for="(e,i) in StackingPositionList.slice(4,8)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <device-pop
-                :pkId="pkId"
-                type="yjmdw"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div class="p_device yj_630_wrap">
-            <div v-show="index === 0" class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <p>{{ e.device_code }}</p>
-              <device-pop
-                :pkId="pkId"
-                type="yj"
-                :data="e"
-              ></device-pop>
-            </div>
-            <div v-show="index === 1" class="yj_630" v-for="e in PressMachineList.slice(2,4)" :key="e.device_code" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <p>{{ e.device_code }}</p>
-              <device-pop
-                :pkId="pkId"
-                type="yj"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(3+index,4+index)" :key="e.device_code" :class="{'rotate_1': Number(e.device_status) === 1}" @click="getInfo2(e)">
-            <img class="device_img" :src="require('../../../images/device/robot_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-            <device-pop
-            :pkId="pkId"
-            type="jxs"
-            :data="e"
-          ></device-pop>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="m_block m_block_4">
-      <div class="m_wraper">
-        <div class="yj_block">
-          <div class="p_device weilan_630_wrap">
-            <img class="device_img" src="../../../images/device/wl.png" alt="">
-          </div>
-          <div class="p_device flexwrap slw_630_wrap">
-            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630b' + i">
-              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
-            </div>
-          </div>
-          <div class="p_device flexwrap ktp_630_wrap">
-            <div class="ktp_630" v-for="(e, i) in StackingPositionList.slice(8,12)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <device-pop
-                :pkId="pkId"
-                type="yjmdw"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div class="p_device yj_630_wrap">
-            <div class="yj_630" v-for="e in PressMachineList.slice(4,6)" :key="e.device_code" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <p>{{ e.device_code }}</p>
-              <device-pop
-                :pkId="pkId"
-                type="yj"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(5,6)" :key="e.device_code" :class="{'rotate_1': Number(e.device_status) === 1}" @click="getInfo2(e)">
-            <img class="device_img" :src="require('../../../images/device/robot_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-            <device-pop
-              :pkId="pkId"
-              type="jxs"
-              :data="e"
-            ></device-pop>
-          </div>
-        </div>
-        <div class="yj_block yj_1250_block" v-for="(e, index) in [1, 1]" :key="'yj1250' + index">
-          <div class="p_device weilan_630_wrap">
-            <img class="device_img" src="../../../images/device/wl.png" alt="">
-          </div>
-          <div class="p_device flexwrap slw_630_wrap slw_1250_wrap">
-            <div class="slw_630" v-for="(e, i) in [1,1]" :key="'slw630c' + i">
-              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
-            </div>
-          </div>
-          <div class="p_device flexwrap ktp_630_wrap">
-            <div v-show="index === 0" class="ktp_630 ktp_yyj" v-for="(e, i) in StackingPositionList.slice(12,14)" :key="e.device_code" :class="'ktp_yyj_'+(i+1)" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <device-pop
-                :pkId="pkId"
-                type="yjmdw"
-                :data="e"
-              ></device-pop>
-            </div>
-            <div v-show="index === 1" class="ktp_630 ktp_yyj" v-for="(e, i) in StackingPositionList.slice(14,16)" :key="e.device_code" :class="'ktp_yyj_'+(i+1)" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <device-pop
-                :pkId="pkId"
-                type="yjmdw"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div class="p_device yj_630_wrap">
-            <div class="yj_630 yj_1250" v-for="e in PressMachineList.slice(6+index,7+index)" :key="e.device_code" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-              <p>{{ e.device_code }}</p>
-              <device-pop
-                :pkId="pkId"
-                type="yj"
-                :data="e"
-              ></device-pop>
-            </div>
-          </div>
-          <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(6+index,7+index)" :key="e.device_code" :class="{'rotate_5': Number(e.device_status) === 1}" @click="getInfo2(e)">
-            <img class="device_img" :src="require('../../../images/device/robot_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
-            <device-pop
-              :pkId="pkId"
-              type="jxs"
-              :data="e"
-            ></device-pop>
-          </div>
-        </div>
-        <div class="yj_block yyj_block" v-for="(e, i) in [1, 1]" :key="'yyjblock' + i">
-          <div class="p_device weilan_630_wrap">
-            <img class="device_img" src="../../../images/device/wl.png" alt="">
-          </div>
-          <div v-show="i === 0" class="p_device flexwrap slw_630_wrap slw_1250_wrap">
-            <div class="slw_630" v-for="(e, i) in [1,1]" :key="'slw630d' + i">
-              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
-            </div>
-          </div>
-          <div v-show="i === 1" class="p_device flexwrap slw_630_wrap slw_yyj_wrap">
-            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630e' + i">
-              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
-            </div>
-          </div>
-          <div class="p_device flexwrap ktp_630_wrap" style="opacity:0.1">
-            <div class="ktp_630 ktp_yyj" v-for="(e, i) in [1,1]" :key="'ktpyyj' + i">
-              <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
-            </div>
-          </div>
-          <div class="p_device yj_630_wrap yyj_wrap">
-            <div class="yj_630" style="opacity:0.1">
-              <img class="device_img" src="../../../images/device/yyj_gray.png" alt="">
-              <!-- <img class="device_img" :src="require('../../../images/device/yyj_' + ['gray', 'yellow', 'green', 'red'][Number(PressMachineList[8+i].device_status)] + '.png')"> -->
-            </div>
-          </div>
-          <div class="p_device robot_630_wrap" style="opacity:0.1">
-            <img src="../../../images/device/robot_gray.png" alt="">
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="m_block m_block_5">
-      <div class="p_device agv_1" v-for="(e, i) in [1,1]" :key="'agv' + i" :class="'agv_' + (i+1)">
-        <img src="../../../images/device/agv_gray.png" alt="">
-      </div>
-    </div>
-    <div class="m_block m_block_6">
-      <div class="m_wraper">
-        <div class="lzhlj_wrap">
-          <div class="lz_wrap">
-            <div class="lz" v-for="e in MixBlankingList" :key="e.pointCode" @click="getInfo1(e)">
-              <img class="device_img" :src="require('../../../images/device/lz_hj_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')" alt="">
-              <device-pop
-              :pkId="pkId"
-              type="hljdjw"
-              :data="e"
-            ></device-pop>
-            </div>
-          </div>
-          <div class="hlj_wrap">
-            <div class="hlj" v-for="e in MixMachineList" :key="e.device_code" @click="getInfo2(e)">
-              <img class="device_img" :src="require('../../../images/device/hlj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')" alt="">
-              <device-pop
-              :pkId="pkId"
-              type="hlj"
-              :data="e"
-            ></device-pop>
-            </div>
-          </div>
-        </div>
-        <!-- <div class="lzhlj_wrap cbj_wrap">
-          <div class="lz_wrap">
-            拆包机没图片
-          </div>
-          <div class="hlj_wrap">
-            拆包机没图片
-          </div>
-        </div> -->
-      </div>
-    </div>
-    <div class="m_block_7">
-      <div class="p_device klw_wraper_1">
-        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwa' + i">
-          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
-        </div>
-      </div>
-      <div class="p_device klw_wraper_2">
-        <div class="klw" v-for="(e, i) in [1,1,1,1]" :key="'klwb' + i">
-          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
-        </div>
-      </div>
-      <div class="p_device klw_wraper_3">
-        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwc' + i">
-          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
-        </div>
-      </div>
-      <div class="p_device klw_wraper_4">
-        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwd' + i">
-          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
-        </div>
-      </div>
-      <div class="p_device klw_wraper_5">
-        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwe' + i">
-          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
-        </div>
-      </div>
-    </div>
+    <img src="../../../images/scene.png" width="1002" height="905" usemap="#image-map" @click.stop="closePop">
+    <map name="image-map" id="map">
+      <area v-for="(e, i) in areaList" :key="i" :alt="e.device_code" :title="e.device_code" :coords="e.coords" :shape="e.shape" @click="showPop($event, e)">
+    </map>
+    <device-pop ref="pop" :type="pkObj.type" :data="pkObj"/>
+    <div v-show="pkId !== ''" ref="pointer" class="pop_pointer"></div>
   </div>
 </template>
 
 <script>
-// import TCanvas from './canvas.vue'
 import DevicePop from './devicepop.vue'
 import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
 // import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
 export default {
   name: 'workshop',
   components: {
-    // TCanvas: TCanvas,
     DevicePop: DevicePop
   },
   data () {
     return {
+      areaList: [
+        {type: 'hlj', device_code: 'HNJ01', coords: '727,135,711,120', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ02', coords: '701,136,683,121', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ03', coords: '648,136,632,120', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ04', coords: '621,137,602,120', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ05', coords: '570,137,554,121', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ06', coords: '541,137,523,120', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ07', coords: '490,137,473,120', shape: 'rect'},
+        {type: 'hlj', device_code: 'HNJ08', coords: '463,137,445,121', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ01DJW', coords: '709,140,719,149', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ02DJW', coords: '679,140,699,149', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ03DJW', coords: '632,140,643,147', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ04DJW', coords: '597,140,619,149', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ05DJW', coords: '553,141,569,148', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ06DJW', coords: '518,140,539,148', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ07DJW', coords: '473,140,489,148', shape: 'rect'},
+        {type: 'hljdjw', device_code: 'HNJ08DJW', coords: '445,141,464,148', shape: 'rect'},
+        {type: 'jxs', device_code: 'FJCDJXS01', coords: '342,779,370,799', shape: 'rect'},
+        {type: 'jxs', device_code: 'FJMDJXS01', coords: '440,780,468,799', shape: 'rect'},
+        {type: 'jxs', device_code: 'FJMDJXS02', coords: '444,711,472,732', shape: 'rect'},
+        {type: 'jxs', device_code: 'YZJXS01', coords: '805,424,815,389', shape: 'rect'},
+        {type: 'jxs', device_code: 'YZJXS02', coords: '673,425,681,390', shape: 'rect'},
+        {type: 'jxs', device_code: 'YZJXS03', coords: '542,425,552,387', shape: 'rect'},
+        {type: 'jxs', device_code: 'YZJXS04', coords: '425,411,447,387', shape: 'rect'},
+        {type: 'jxs', device_code: 'YZJXS05', coords: '342,413,361,387', shape: 'rect'},
+        {type: 'fjmdw', device_code: 'FJ01CDW01', coords: '474,699,487,718', shape: 'rect'},
+        {type: 'fjmdw', device_code: 'FJ01CDW02', coords: '474,723,487,740', shape: 'rect'},
+        {type: 'fjmdw', device_code: 'FJ01MDW01', coords: '472,766,483,786', shape: 'rect'},
+        {type: 'fjmdw', device_code: 'FJ01MDW02', coords: '471,793,484,811', shape: 'rect'},
+        {type: 'rgfjc', device_code: 'RGFJC01', coords: '928,556,944,573', shape: 'rect'},
+        {type: 'rgfjc', device_code: 'RGFJC02', coords: '933,581,946,598', shape: 'rect'},
+        {type: 'rgfjc', device_code: 'RGFJC03', coords: '935,605,949,623', shape: 'rect'},
+        {type: 'rgfjc', device_code: 'RGFJC04', coords: '939,631,952,648', shape: 'rect'},
+        {type: 'rgfjc', device_code: 'RGFJC05', coords: '943,657,955,674', shape: 'rect'},
+        {type: 'rgfjc', device_code: 'RGFJC06', coords: '944,683,959,701', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ01', coords: '829,347,873,378', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ02', coords: '757,347,800,376', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ03', coords: '694,347,737,376', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ04', coords: '622,347,664,376', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ05', coords: '561,348,603,376', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ06', coords: '488,347,531,376', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ07', coords: '414,345,471,379', shape: 'rect'},
+        {type: 'yj', device_code: 'YJ08', coords: '326,344,386,380', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ01', coords: '734,565,747,573', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ02', coords: '732,590,747,598', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ03', coords: '735,617,750,624', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ04', coords: '735,645,750,650', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ05', coords: '737,668,752,677', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ06', coords: '740,696,755,705', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ07', coords: '739,680,756,695', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ08', coords: '754,671,739,652', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ09', coords: '739,627,752,642', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ10', coords: '737,603,750,617', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ11', coords: '736,576,747,590', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ12', coords: '735,550,746,564', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ13', coords: '805,513,819,522', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ14', coords: '806,541,821,549', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ15', coords: '807,566,824,574', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ16', coords: '826,599,810,592', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ17', coords: '815,616,829,625', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ18', coords: '816,642,831,649', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ19', coords: '816,669,834,673', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ20', coords: '820,695,835,704', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ21', coords: '824,678,838,697', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ22', coords: '823,651,834,667', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ23', coords: '821,625,832,642', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ24', coords: '818,600,829,616', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ25', coords: '815,574,827,589', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ26', coords: '814,550,825,565', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ27', coords: '811,523,822,539', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ28', coords: '810,496,820,513', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ29', coords: '848,513,858,521', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ30', coords: '846,542,861,548', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ31', coords: '853,566,865,573', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ32', coords: '852,592,869,599', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ33', coords: '853,617,869,624', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ34', coords: '856,643,873,650', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ35', coords: '859,669,876,676', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ36', coords: '861,697,879,705', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ37', coords: '868,678,879,692', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ38', coords: '863,652,875,666', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ39', coords: '862,625,873,640', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ40', coords: '859,599,871,617', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ41', coords: '857,574,868,589', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ42', coords: '855,550,866,565', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ43', coords: '849,523,863,538', shape: 'rect'},
+        {type: 'hchj', device_code: 'HCHJ44', coords: '849,497,860,512', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ01XLW01', coords: '822,399,834,416', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ01XLW02', coords: '824,419,835,435', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ02XLW01', coords: '787,399,799,415', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ02XLW02', coords: '788,419,800,434', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ03XLW01', coords: '689,400,699,415', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ03XLW02', coords: '690,419,700,433', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ04XLW01', coords: '654,400,665,414', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ04XLW02', coords: '655,419,666,432', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ05XLW01', coords: '557,401,568,416', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ05XLW02', coords: '560,419,568,433', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ06XLW01', coords: '524,399,533,414', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ06XLW02', coords: '526,420,535,435', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ07XLW01', coords: '436,417,449,429', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ07XLW02', coords: '409,417,424,429', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ08XLW01', coords: '351,415,364,428', shape: 'rect'},
+        {type: 'yjxlw', device_code: 'YJ08XLW02', coords: '326,414,339,427', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ01SLW01', coords: '832,323,847,332', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ01SLW02', coords: '833,334,848,346', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ02SLW01', coords: '761,321,777,333', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ02SLW02', coords: '763,335,778,345', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ03SLW01', coords: '702,323,715,332', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ03SLW02', coords: '702,334,717,345', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ04SLW01', coords: '633,321,647,332', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ04SLW02', coords: '632,334,648,345', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ05SLW01', coords: '573,323,587,334', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ05SLW02', coords: '572,336,588,347', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ06SLW01', coords: '504,323,518,332', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ06SLW02', coords: '504,335,519,346', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ07SLW01', coords: '438,323,451,332', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ07SLW02', coords: '437,333,451,344', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ08SLW01', coords: '354,322,368,331', shape: 'rect'},
+        {type: 'yjslw', device_code: 'YJ08SLW02', coords: '352,333,368,343', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW01', coords: '827,220,839,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW02', coords: '824,237,836,249', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW03', coords: '825,236,814,221', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW04', coords: '810,238,820,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW05', coords: '798,219,808,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW06', coords: '796,239,803,249', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW07', coords: '784,219,793,235', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW08', coords: '779,237,790,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW09', coords: '769,221,777,234', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW10', coords: '766,237,774,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW11', coords: '752,220,763,237', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW12', coords: '749,237,761,247', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW13', coords: '718,220,730,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW14', coords: '717,238,729,249', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW15', coords: '703,221,715,238', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW16', coords: '703,239,714,246', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW17', coords: '688,220,698,237', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW18', coords: '687,238,697,247', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW19', coords: '672,220,684,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW20', coords: '670,236,683,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW21', coords: '393,220,405,235', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW22', coords: '393,237,409,250', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW23', coords: '379,221,389,235', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW24', coords: '378,237,392,247', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW25', coords: '363,220,373,234', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW26', coords: '364,238,375,247', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW27', coords: '349,219,360,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW28', coords: '349,237,362,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW29', coords: '332,220,344,235', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW30', coords: '333,239,345,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW31', coords: '316,221,331,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW32', coords: '317,238,331,249', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW33', coords: '285,221,295,235', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW34', coords: '285,238,299,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW35', coords: '270,220,281,234', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW36', coords: '270,238,282,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW37', coords: '253,220,266,234', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW38', coords: '256,237,267,246', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW39', coords: '237,220,251,237', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW40', coords: '240,238,253,247', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW41', coords: '222,219,235,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW42', coords: '223,240,237,247', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW43', coords: '209,222,221,234', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW44', coords: '209,237,220,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW45', coords: '175,220,188,236', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW46', coords: '177,238,191,249', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW47', coords: '160,221,172,235', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW48', coords: '161,237,176,246', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW49', coords: '144,219,157,234', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW50', coords: '146,238,158,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW51', coords: '130,219,142,235', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW52', coords: '133,238,144,247', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW53', coords: '113,220,126,237', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW54', coords: '117,238,130,248', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW55', coords: '99,221,111,234', shape: 'rect'},
+        {type: 'klhw', device_code: 'KLHW56', coords: '100,239,116,248', shape: 'rect'},
+        {type: 'yaossx', device_code: '入窑输送线', coords: '97,520,579,539', shape: 'rect'},
+        {type: 'yaossx', device_code: '出窑输送线', coords: '94,635,592,654', shape: 'rect'}
+      ],
       interTime: this.$store.getters.setTime,
       timer3: null,
       MixMachineList: [], // 混碾机
       MixBlankingList: [], // 混碾机对接位
       PressMachineList: [], // 压机
       ManipulatorInfoList: [], // 压制、分拣机械手
-      StackingPositionList: [], // 压制码垛位情况显示
+      StackingPositionList: [], // 压机下料位
+      yzslwPositionList: [], // 压机上料位
       SortAndPalletizingList: [], // 分拣拆码垛对接位
       manualSortingList: [], // 人工分拣拆码垛
-      hchjList1: [], // 出窑口缓存货架
-      hchjList2: [], // 出窑口缓存货架
-      hchjList3: [], // 出窑口缓存货架
-      hchjList4: [], // 出窑口缓存货架
-      hchjList5: [], // 出窑口缓存货架
-      hchjList6: [], // 出窑口缓存货架
+      TrappedMaterialShelfList: [], // 困料货位
+      hchjList: [], // 出窑口缓存货架
       yaossxArr: [],
       yaoObj: {},
-      pkId: ''
+      pkId: '',
+      pkObj: {}
     }
   },
   created () {
@@ -535,14 +226,111 @@ export default {
     })
   },
   methods: {
+    showPop ($event, e) {
+      this.pkId = this.pkId === e.device_code ? '' : e.device_code
+      if (this.pkId) {
+        this.$refs.pop.$el.style.display = 'block'
+        this.$refs.pop.$el.style.left = $event.x + 'px'
+        this.$refs.pop.$el.style.top = $event.y + 'px'
+        if (this.pkId === 'FJ01MDW02' || this.pkId === 'FJCDJXS01') {
+          this.$refs.pop.$el.style.top = ($event.y - 200) + 'px'
+        }
+        this.$refs.pointer.style.left = ($event.x - 5) + 'px'
+        this.$refs.pointer.style.top = ($event.y - 5) + 'px'
+      } else {
+        this.$refs.pop.$el.style.display = 'none'
+      }
+      if (e.type === 'hlj') {
+        this.MixMachineList.map(el => {
+          if (el.device_code === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'hljdjw') {
+        this.MixBlankingList.map(el => {
+          if (el.pointCode === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'jxs') {
+        this.ManipulatorInfoList.map(el => {
+          if (el.device_code === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'fjmdw') {
+        this.SortAndPalletizingList.map(el => {
+          if (el.device_code === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'rgfjc') {
+        this.manualSortingList.map(el => {
+          if (el.pointCode === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'hchj') {
+        this.hchjList.map(el => {
+          if (el.pointCode === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'yj') {
+        this.PressMachineList.map(el => {
+          if (el.device_code === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'yjxlw') {
+        this.StackingPositionList.map(el => {
+          if (el.device_code === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'yjslw') {
+        this.yzslwPositionList.map(el => {
+          if (el.device_code === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'klhw') {
+        this.TrappedMaterialShelfList.map(el => {
+          if (el.pointCode === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      } else if (e.type === 'yaossx') {
+        this.yaossxArr.map(el => {
+          if (el.pointName === e.device_code) {
+            this.pkObj = el
+            this.pkObj.type = e.type
+          }
+        })
+      }
+    },
+    closePop () {
+      this.$refs.pop.$el.style.display = 'none'
+      this.pkId = ''
+    },
     refresh () {
       this._deviceCondition()
       this._inOutKilnDetail()
-      this._kilnDetail()
+      // this._kilnDetail()
       this.timer3 = setInterval(() => {
         this._deviceCondition()
         this._inOutKilnDetail()
-        this._kilnDetail()
+        // this._kilnDetail()
       }, this.interTime)
     },
     async _deviceCondition () {
@@ -552,17 +340,12 @@ export default {
       this.PressMachineList = [...res.PressMachineList]
       this.ManipulatorInfoList = [...res.ManipulatorInfoList]
       this.StackingPositionList = [...res.StackingPositionList]
+      this.yzslwPositionList = [...res.yzslwPositionList]
       this.SortAndPalletizingList = [...res.SortAndPalletizingList]
       this.manualSortingList = [...res.manualSortingList]
       this.manualSortingList = this.manualSortingList.reverse()
-      let hchjList = [...res.hchjList]
-      this.hchjList1 = hchjList.slice(0, 6).reverse()
-      this.hchjList2 = hchjList.slice(6, 12)
-      this.hchjList3 = hchjList.slice(12, 20).reverse()
-      this.hchjList4 = hchjList.slice(20, 28)
-      this.hchjList5 = hchjList.slice(28, 36).reverse()
-      this.hchjList6 = hchjList.slice(36, 44)
-      console.log(this.hchjList2)
+      this.hchjList = [...res.hchjList]
+      this.TrappedMaterialShelfList = [...res.TrappedMaterialShelfList]
     },
     async _inOutKilnDetail () {
       let res = await inOutKilnDetail()
@@ -571,12 +354,6 @@ export default {
     async _kilnDetail () {
       let res = await kilnDetail()
       this.yaoObj = res
-    },
-    getInfo1 (e) {
-      this.pkId = this.pkId === e.pointName ? '' : e.pointName
-    },
-    getInfo2 (e) {
-      this.pkId = this.pkId === e.device_code ? '' : e.device_code
     }
   }
 }
@@ -587,748 +364,36 @@ export default {
   width 100%
   height 100%
   position relative
-.status_wrap
-    position absolute
-    top 2%
-    left 0
-    z-index 1
-    display: flex
-    justify-content space-between
-    align-items center
-.status_item
-    display: flex
-    justify-content space-between
-    align-items center
-    margin-left 20px
-.status_tip
-    width 15px
-    height 15px
-    border-radius 50%
-    margin-right 10px
-    box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
-.status_name
-    font-size 16px
-    line-height 1
-    color #fff
-.m_block
-  position absolute
-  border: 1px solid #00c8da;
-  padding: 12px;
-  box-shadow: 0 0 15px #0087ac;
-  border-radius: 10px;
-.m_wraper
-  position relative
-  width 100%
-  height 100%
-  display flex
-  justify-content space-between
-  align-items center
-.p_device
-  position absolute
-  top 0
-  left 0
-  display inline-flex
-  justify-content space-between
-.device_img
-  width 100%
-  height auto
-// 分拣拆垛位start
-.m_block_2
-  width: 55%;
-  height: 22%;
-  left: auto
-  right: 2%
-  top: 7%;
-.ddxt_wrap
-  width 30%
-  height 49%
-.ddxt_wrap_2
-  top auto
-  bottom 0
-.weilan_ddxt_wrap
-  width 100%
-  height 100%
-  display flex
-.weilan_ddxt
-  width 45%
-  display inline-flex
-.ssj_wrap
-  width: 36%;
-  top: 46%;
-  left: 32%;
-.ktp_cmd_wrap
-  width 19px
-  height 90%
-  display flex
-  flex-direction column
-  top 5%
-  left 3%
-.ktp_cmd
-  position relative
-  width 100%
-  display inline-flex
-.cmdssj_wrap
-  width 28px
-  left auto
-  right 3%
-.rotatex180
-  transform rotateX(180deg)
-.rotatey180
-  transform rotateY(180deg)
-.robot_cmd_wrap
-  width: 18px;
-  height: 18px;
-  img
-    position absolute
-    width: 36px;
-    height: 20px;
-    top: -2px;
-    left: -1px;
-.robot_cmd_wrap_1
-  left: 11%;
-  top: 42%;
-.robot_cmd_wrap_2
-  left: 79%;
-  top: 41%;
-  img
-    transform rotateY(180deg)
-    left -19px
-.rgv_line_wrap
-  position absolute
-  top 0
-  left 31%
-  width 5.5%
-  height 100%
-.rgv_line_1
-  position absolute
-  top 6%
-  left 0
-  width 3px
-  height 88%
-  background-color #b2b2b2
-  margin 0 auto
-  box-shadow 0px 3px 10px #333333
-  _fj(row)
-.rgv_line_begine
-  position absolute
-  width 10px
-  height 3px
-  top 0
-  left -3.5px
-  background-color #b2b2b2
-  border-radius 50%
-  box-shadow 0px 3px 10px #333333
-.rgv_line_end
-  top auto
-  bottom 0
-.rgv_line_node_wrap
-  position absolute
-  width 6px
-  left -1.5px
-  height 100%
-  display flex
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-.rgv_line_node
-  width 6px
-  height 3px
-  background-color #b2b2b2
-  border-radius 50%
-  box-shadow 0px 1px 4px #333333
-.rgv_line_2
-  left auto
-  right 0
-.rgv_line_3
-  position absolute
-  top 0
-  left 50%
-  z-index 4
-  width 2px
-  height 100%
-  background-color #b2b2b2
-  box-shadow 0px 3px 10px #333333
-.rgvct
-  width 5.5%
-  top 10%
-  left: 31%;
-  z-index: 99
-.ggtj_wrap
-  display flex
-  justify-content flex-start
-  left 36.5%
-.gtssj
-  width 27px
-  height 25px
-.fmj
-  width 30px
-  height 30px
-.rgpt
-  width 50px
-  height 50px
-  background-color #b4b4b4
-  left 51.8%
-  top 56%
-.ltssj
-  width 53.59px
-  height 25px
-.crj
-  width auto
-  height 40px
-  position relative
-  top -14px
-.fmj2
-  width 26px
-  height 32px
-  left 68%
-  top 62%
-.ggtj_wrap_1
-  top 18%
-.ggtj_wrap_2
-  top 37%
-.ggtj_wrap_3
-  top 64%
-// 分拣拆垛位end
-// 压机模块start
-.m_block_3
-  width 29%
-  height 22%
-  left 2%
-  top 60%
-  .yj_block
-    width 48%
-.m_block_4
-  width 66%
-  height 22%
-  left auto
-  right 2%
-  top 60%
-  .yj_block
-    width 20%
-    &:nth-child(1)
-      width 21%
-    &:nth-child(2), &:nth-child(3)
-      width 16%
-.yj_block
-  position relative
-  height 100%
-.weilan_630_wrap
-  width 70%
-  height 45%
-  left 15%
-  img
-    transform rotate(180deg)
-.slw_630_wrap
-  width 100%
-  top auto
-  bottom 0
-.slw_630
-  display inline-flex
-  width 50%
-  img
-    width 23px
-    margin 0 auto
-.slw_1250_wrap
-  width 50%
-  left 6%
-  .slw_630
-    width 100%
-.slw_yyj_wrap
-    width 50%
-    left auto
-    right 0
-    .slw_630
-      width 100%
-.ktp_630_wrap
-  width: 60%;
-  height: 32%;
-  left: 20%;
-  top 4%
-.ktp_630
-  position absolute
-  width 19px
-.ktp_630_1
-  left 0
-  bottom 0
-.ktp_630_2
-  left 0
-  top 0
-.ktp_630_3
-  right 0
-  bottom 0
-.ktp_630_4
-  right 0
-  top 0
-.ktp_yyj
-  width 26.78px
-.ktp_yyj_1
-  left 0
-  top 0
-  bottom auto
-.ktp_yyj_2
-  left auto
-  right 0
-  top 0
-.yj_630_wrap
-  width 100%
-  height 20%
-  top 47%
-.yj_630
-  position relative
-  width 48%
-  height 100%
-  img
-    height 100%
-  p
-    position absolute
+.pop_pointer
+  position: fixed;
+  z-index 101;
+  width: 10px;
+  height: 10px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
+  &::after
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    color: #333;
-.yj_1250
-  width 63%
-.yyj_wrap
-  height 27.5%
-  top 40%
-.robot_630_wrap
-  width 18px
-  height 18px
-  left calc(50% - 9px)
-  top 20%
-  img
-    position absolute
-    width 23px
-    height auto
-    left -6px
-// 压机模块end
-// 叉车start
-.m_block_5
-  width 15%
-  left 5%
-  top 14%
-  padding 20px
-  border none
-  box-shadow none
-.agv_1
-  width 17%
-  left 16%
-  top -30%
-  img
-    width 100%
-.agv_2
-  left 59%
-// 叉车end
-// 混料机start
-.m_block_6
-  width 96%
-  height 10%
-  top auto
-  bottom 2%
-  left 2%
-  padding 6px
-.lzhlj_wrap
-  width 70%
-  height 100%
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around
-.cbj_wrap
-  width 14%
-  border 2px solid #465e7b
-  border-radius 5px
-  .lz_wrap,.hlj_wrap
-    justify-content center
-.lz_wrap
-  width 100%
-  display flex
-  justify-content space-between
-  align-items center
-.hlj_wrap
-  width 100%
-  display flex
-  justify-content space-between
-  align-items center
-.lz
-  position relative
-  width 40px
-  height 26.31px
-  img
-    position relative
-    left 5px
-    width 30px
-.hlj
-  position relative
-  width 40px
-  height 30.3px
-// 混料机end
-// 窑start
-.m_block_1
-  width: 77%;
-  height: 24%;
-  right: 2%;
-  top: 31%;
-.yao_wrap
-  position absolute
-  width 80%
-  height 50px
-.yao_1
-  left 15%
-  bottom 22%
-.yao_2
-  left 15%
-  top 22%
-.yao_layer3
-  position absolute
-  width: 10%;
-  height: 70%;
-  top: 0;
-  left: 0;
-  background-color: #A0927E;
-.yao_layer1
-  position absolute
-  left 1%
-  top 0
-  width 98%
-  height 50%
-  transform: skew(26deg);
-.yao_layer1_1
-  background-image: linear-gradient(to bottom, #00ff00, #b2fbb2);
-  box-shadow: inset 1px 3px 6px 0px #04b004;
-  border: 2px solid #028802;
-.yao_layer1_2
-  background-image: linear-gradient(to bottom, #bfbfbf, #f1f1f1);
-  box-shadow: inset 1px 3px 6px 0px #838282;
-  border: 2px solid #8e8a8a;
-.yao_layer2
-  position: absolute;
-  left: 2%;
-  top: 50%;
-  width: 98%;
-  height: 50%;
-  background-color: #CCC4BB;
-  border-top: 0;
-  padding-left 10px
-  p
-    line-height: 22px;
-    font-size: 20px;
-    color: #F04826;
-    transform: scale(1, 0.7);
-    text-shadow 2px 2px 2px rgba(0, 0, 0, 0.3);
-.yao_layer2_1
-  border: 2px solid #028802;
-.yao_layer2_2
-  border: 2px solid #8e8a8a;
-.jyw_wrap
-  width 2.205%
-  height 76%
-  top: 21.1%
-  left 8%
-.jyw1
-  top 15%
-.jyw2
-  top 38%
-.jyw3
-  top 62%
-.jyw4
-  top 86%
-.dpw_wrap
-  width: 4%;
-  top: -27%;
-  left: 15%;
-.cpj_wrap
-  width 6%
-  top 80%
-.yjbyx_1
-  width: 4%;
-  height: 76%;
-  top: 22%;
-  left: 10%;
-.yjbyx_2
-  width: 4%;
-  height: 79%;
-  left: auto;
-  right: 0;
-.ktp_yao_enter_wrap
-  width 86%
-  left auto
-  top auto
-  bottom 0
-  right 0
-.ktp_yao_out_wrap
-  width 86%
-  left: auto
-  right: 4%;
-.ktp_yao
-  float left
-  width calc(100% / 39)
-  img
-    height auto
-// 窑end
-// 困料货位start
-.m_block_7
-  position absolute
-  width: 100%;
-  height: 4%;
-  top: auto;
-  bottom: 12%;
-.klw_wraper_1
-  left 2%
-.klw_wraper_2
-  left 18%
-.klw_wraper_3
-  left 49%
-.klw_wraper_4
-  left 65%
-.klw_wraper_5
-  left 81%
-.klw
-  width 25.03px
-  height 21.97px
-  float left
-// 困料货位end
-// 货位start
-.m_block_8
-  position absolute
-  width: 17%;
-  height: 24%;
-  top: 31%
-  left: 2%
-.rgcdw_wrap
-  width 15%
-  height: 70%;
-  top: 15%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-.cdw_wrap
-  width 15%
-  height: 80%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-.rgcdw
-  position relative
-.cdw
-  position relative
-  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 60%);
-.cdw_wrap_1
-  left: 80%
-  top 10%
-.cdw_wrap_2
-  left: 84%
-  top: 8%;
-.cdw_wrap_3
-  height 100%
-  left: 50%
-.cdw_wrap_4
-  height 100%
-  left: 54%;
-  top: -2%;
-.cdw_wrap_5
-  height 100%
-  left 20%
-.cdw_wrap_6
-  height 100%
-  left: 24%
-  top: -2%
-// 困料货位end
-.rotate_1
-  animation rotate_1 9s linear 1s infinite
-@keyframes rotate_1 {
-    0% {
-      transform: rotateZ(20deg)
-    }
-    2% {
-        transform: rotateZ(20deg)
-    }
-    8% {
-        transform: rotateZ(60deg)
-    }
-    10% {
-        transform: rotateZ(60deg)
-    }
-    18% {
-      transform: rotateZ(20deg)
-    }
-    20% {
-        transform: rotateZ(20deg)
-    }
-    28% {
-      transform: rotateZ(100deg)
-    }
-    30% {
-        transform: rotateZ(100deg)
-    }
-    43% {
-      transform: rotateZ(-20deg)
-    }
-    50% {
-        transform: rotateZ(-20deg)
-    }
-    58% {
-      transform: rotateZ(-60deg)
-    }
-    60% {
-        transform: rotateZ(-60deg)
-    }
-    68% {
-      transform: rotateZ(-20deg)
-    }
-    70% {
-        transform: rotateZ(-20deg)
-    }
-    78% {
-      transform: rotateZ(-120deg)
-    }
-    80% {
-        transform: rotateZ(-120deg)
-    }
-    93% {
-      transform: rotateZ(20deg)
-    }
-    100% {
-        transform: rotateZ(20deg)
-    }
-}
-.rotate_2
-  animation rotate_2 4s linear 1s infinite
-@keyframes rotate_2 {
-    0% {
-      transform: rotateZ(-45deg)
-    }
-    3% {
-        transform: rotateZ(-45deg)
-    }
-    17% {
-        transform: rotateZ(-90deg)
-    }
-    20% {
-        transform: rotateZ(-90deg)
-    }
-    43% {
-        transform: rotateZ(45deg)
-    }
-    50% {
-        transform: rotateZ(45deg)
-    }
-    72% {
-        transform: rotateZ(90deg)
-    }
-    75% {
-        transform: rotateZ(90deg)
-    }
-    93% {
-        transform: rotateZ(-45deg)
-    }
-    100% {
-        transform: rotateZ(-45deg)
-    }
-}
-.rotate_3
-  animation rotate_3 4s linear 1s infinite
-@keyframes rotate_3 {
-    0%{
-      transform: rotateZ(-120deg)
-    }
-    3% {
-        transform: rotateZ(-120deg)
-    }
-    20% {
-        transform: rotateZ(0deg)
-    }
-    25% {
-        transform: rotateZ(0deg)
-    }
-    47% {
-        transform: rotateZ(120deg)
-    }
-    50% {
-        transform: rotateZ(120deg)
-    }
-    70% {
-        transform: rotateZ(0deg)
-    }
-    75% {
-        transform: rotateZ(0deg)
-    }
-    97%{
-      transform: rotateZ(-120deg)
-    }
-    100% {
-        transform: rotateZ(-120deg)
-    }
-}
-.rotate_4
-  animation rotate_4 4s linear 1s infinite
-@keyframes rotate_4 {
-    0% {
-      transform: rotateZ(0deg)
-    }
-    3% {
-        transform: rotateZ(0deg)
-    }
-    22% {
-      transform: rotateZ(-90deg)
-    }
-    25% {
-        transform: rotateZ(-90deg)
-    }
-    43% {
-      transform: rotateZ(0deg)
-    }
-    50% {
-        transform: rotateZ(0deg)
-    }
-    72% {
-      transform: rotateZ(90deg)
-    }
-    75% {
-        transform: rotateZ(90deg)
-    }
-    93% {
-        transform: rotateZ(0deg)
-    }
-    100% {
-        transform: rotateZ(0deg)
-    }
-}
-.rotate_5
-  animation rotate_5 4s linear 1s infinite
-@keyframes rotate_5 {
-    0% {
-      transform: rotateZ(0deg)
-    }
-    3% {
-        transform: rotateZ(0deg)
-    }
-    25% {
-      transform: rotateZ(120deg)
-    }
-    28% {
-        transform: rotateZ(120deg)
-    }
-    50% {
-      transform: rotateZ(0deg)
-    }
-    53% {
-        transform: rotateZ(0deg)
-    }
-    75% {
-        transform: rotateZ(-130deg)
-    }
-    78% {
-        transform: rotateZ(-130deg)
-    }
-    97% {
-        transform: rotateZ(0deg)
-    }
-    100% {
-        transform: rotateZ(0deg)
-    }
+    background-color: #00c4ff;
+    border-radius: 50%;
+    box-shadow: 0 0 5px #00c4ff;
+    animation: glow 2s infinite
+@keyframes glow {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
 }
 </style>
diff --git a/src/pages/modules/home/workshop1.vue b/src/pages/modules/home/workshop1.vue
deleted file mode 100644
index f2310f2..0000000
--- a/src/pages/modules/home/workshop1.vue
+++ /dev/null
@@ -1,400 +0,0 @@
-<template>
-  <div class="center_wrapper">
-    <img src="../../../images/scene.png" width="1002" height="905" usemap="#image-map" @click.stop="closePop">
-    <map name="image-map" id="map">
-      <area v-for="(e, i) in areaList" :key="i" :alt="e.device_code" :title="e.device_code" :coords="e.coords" :shape="e.shape" @click="showPop($event, e)">
-    </map>
-    <device-pop ref="pop" :type="pkObj.type" :data="pkObj"/>
-    <div v-show="pkId !== ''" ref="pointer" class="pop_pointer"></div>
-  </div>
-</template>
-
-<script>
-import DevicePop from './devicepop1.vue'
-import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
-// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
-export default {
-  name: 'workshop',
-  components: {
-    DevicePop: DevicePop
-  },
-  data () {
-    return {
-      areaList: [
-        {type: 'hlj', device_code: 'HNJ01', coords: '727,135,711,120', shape: 'rect'},
-        {type: 'hlj', device_code: 'HNJ02', coords: '701,136,683,121', shape: 'rect'},
-        {type: 'hlj', device_code: 'HNJ03', coords: '648,136,632,120', shape: 'rect'},
-        {type: 'hlj', device_code: 'HNJ04', coords: '621,137,602,120', shape: 'rect'},
-        {type: 'hlj', device_code: 'HNJ05', coords: '570,137,554,121', shape: 'rect'},
-        {type: 'hlj', device_code: 'HNJ06', coords: '541,137,523,120', shape: 'rect'},
-        {type: 'hlj', device_code: 'HNJ07', coords: '490,137,473,120', shape: 'rect'},
-        {type: 'hlj', device_code: 'HNJ08', coords: '463,137,445,121', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ01DJW', coords: '709,140,719,149', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ02DJW', coords: '679,140,699,149', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ03DJW', coords: '632,140,643,147', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ04DJW', coords: '597,140,619,149', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ05DJW', coords: '553,141,569,148', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ06DJW', coords: '518,140,539,148', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ07DJW', coords: '473,140,489,148', shape: 'rect'},
-        {type: 'hljdjw', device_code: 'HNJ08DJW', coords: '445,141,464,148', shape: 'rect'},
-        {type: 'jxs', device_code: 'FJCDJXS01', coords: '342,779,370,799', shape: 'rect'},
-        {type: 'jxs', device_code: 'FJMDJXS01', coords: '440,780,468,799', shape: 'rect'},
-        {type: 'jxs', device_code: 'FJMDJXS02', coords: '444,711,472,732', shape: 'rect'},
-        {type: 'jxs', device_code: 'YZJXS01', coords: '805,424,815,389', shape: 'rect'},
-        {type: 'jxs', device_code: 'YZJXS02', coords: '673,425,681,390', shape: 'rect'},
-        {type: 'jxs', device_code: 'YZJXS03', coords: '542,425,552,387', shape: 'rect'},
-        {type: 'jxs', device_code: 'YZJXS04', coords: '425,411,447,387', shape: 'rect'},
-        {type: 'jxs', device_code: 'YZJXS05', coords: '342,413,361,387', shape: 'rect'},
-        {type: 'fjmdw', device_code: 'FJ01CDW01', coords: '474,699,487,718', shape: 'rect'},
-        {type: 'fjmdw', device_code: 'FJ01CDW02', coords: '474,723,487,740', shape: 'rect'},
-        {type: 'fjmdw', device_code: 'FJ01MDW01', coords: '472,766,483,786', shape: 'rect'},
-        {type: 'fjmdw', device_code: 'FJ01MDW02', coords: '471,793,484,811', shape: 'rect'},
-        {type: 'rgfjc', device_code: 'RGFJC01', coords: '928,556,944,573', shape: 'rect'},
-        {type: 'rgfjc', device_code: 'RGFJC02', coords: '933,581,946,598', shape: 'rect'},
-        {type: 'rgfjc', device_code: 'RGFJC03', coords: '935,605,949,623', shape: 'rect'},
-        {type: 'rgfjc', device_code: 'RGFJC04', coords: '939,631,952,648', shape: 'rect'},
-        {type: 'rgfjc', device_code: 'RGFJC05', coords: '943,657,955,674', shape: 'rect'},
-        {type: 'rgfjc', device_code: 'RGFJC06', coords: '944,683,959,701', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ01', coords: '829,347,873,378', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ02', coords: '757,347,800,376', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ03', coords: '694,347,737,376', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ04', coords: '622,347,664,376', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ05', coords: '561,348,603,376', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ06', coords: '488,347,531,376', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ07', coords: '414,345,471,379', shape: 'rect'},
-        {type: 'yj', device_code: 'YJ08', coords: '326,344,386,380', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ01', coords: '734,565,747,573', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ02', coords: '732,590,747,598', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ03', coords: '735,617,750,624', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ04', coords: '735,645,750,650', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ05', coords: '737,668,752,677', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ06', coords: '740,696,755,705', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ07', coords: '739,680,756,695', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ08', coords: '754,671,739,652', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ09', coords: '739,627,752,642', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ10', coords: '737,603,750,617', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ11', coords: '736,576,747,590', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ12', coords: '735,550,746,564', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ13', coords: '805,513,819,522', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ14', coords: '806,541,821,549', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ15', coords: '807,566,824,574', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ16', coords: '826,599,810,592', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ17', coords: '815,616,829,625', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ18', coords: '816,642,831,649', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ19', coords: '816,669,834,673', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ20', coords: '820,695,835,704', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ21', coords: '824,678,838,697', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ22', coords: '823,651,834,667', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ23', coords: '821,625,832,642', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ24', coords: '818,600,829,616', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ25', coords: '815,574,827,589', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ26', coords: '814,550,825,565', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ27', coords: '811,523,822,539', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ28', coords: '810,496,820,513', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ29', coords: '848,513,858,521', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ30', coords: '846,542,861,548', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ31', coords: '853,566,865,573', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ32', coords: '852,592,869,599', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ33', coords: '853,617,869,624', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ34', coords: '856,643,873,650', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ35', coords: '859,669,876,676', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ36', coords: '861,697,879,705', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ37', coords: '868,678,879,692', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ38', coords: '863,652,875,666', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ39', coords: '862,625,873,640', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ40', coords: '859,599,871,617', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ41', coords: '857,574,868,589', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ42', coords: '855,550,866,565', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ43', coords: '849,523,863,538', shape: 'rect'},
-        {type: 'hchj', device_code: 'HCHJ44', coords: '849,497,860,512', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ01XLW01', coords: '822,399,834,416', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ01XLW02', coords: '824,419,835,435', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ02XLW01', coords: '787,399,799,415', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ02XLW02', coords: '788,419,800,434', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ03XLW01', coords: '689,400,699,415', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ03XLW02', coords: '690,419,700,433', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ04XLW01', coords: '654,400,665,414', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ04XLW02', coords: '655,419,666,432', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ05XLW01', coords: '557,401,568,416', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ05XLW02', coords: '560,419,568,433', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ06XLW01', coords: '524,399,533,414', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ06XLW02', coords: '526,420,535,435', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ07XLW01', coords: '436,417,449,429', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ07XLW02', coords: '409,417,424,429', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ08XLW01', coords: '351,415,364,428', shape: 'rect'},
-        {type: 'yjxlw', device_code: 'YJ08XLW02', coords: '326,414,339,427', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ01SLW01', coords: '832,323,847,332', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ01SLW02', coords: '833,334,848,346', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ02SLW01', coords: '761,321,777,333', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ02SLW02', coords: '763,335,778,345', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ03SLW01', coords: '702,323,715,332', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ03SLW02', coords: '702,334,717,345', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ04SLW01', coords: '633,321,647,332', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ04SLW02', coords: '632,334,648,345', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ05SLW01', coords: '573,323,587,334', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ05SLW02', coords: '572,336,588,347', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ06SLW01', coords: '504,323,518,332', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ06SLW02', coords: '504,335,519,346', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ07SLW01', coords: '438,323,451,332', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ07SLW02', coords: '437,333,451,344', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ08SLW01', coords: '354,322,368,331', shape: 'rect'},
-        {type: 'yjslw', device_code: 'YJ08SLW02', coords: '352,333,368,343', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW01', coords: '827,220,839,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW02', coords: '824,237,836,249', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW03', coords: '825,236,814,221', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW04', coords: '810,238,820,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW05', coords: '798,219,808,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW06', coords: '796,239,803,249', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW07', coords: '784,219,793,235', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW08', coords: '779,237,790,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW09', coords: '769,221,777,234', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW10', coords: '766,237,774,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW11', coords: '752,220,763,237', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW12', coords: '749,237,761,247', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW13', coords: '718,220,730,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW14', coords: '717,238,729,249', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW15', coords: '703,221,715,238', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW16', coords: '703,239,714,246', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW17', coords: '688,220,698,237', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW18', coords: '687,238,697,247', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW19', coords: '672,220,684,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW20', coords: '670,236,683,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW21', coords: '393,220,405,235', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW22', coords: '393,237,409,250', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW23', coords: '379,221,389,235', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW24', coords: '378,237,392,247', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW25', coords: '363,220,373,234', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW26', coords: '364,238,375,247', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW27', coords: '349,219,360,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW28', coords: '349,237,362,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW29', coords: '332,220,344,235', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW30', coords: '333,239,345,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW31', coords: '316,221,331,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW32', coords: '317,238,331,249', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW33', coords: '285,221,295,235', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW34', coords: '285,238,299,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW35', coords: '270,220,281,234', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW36', coords: '270,238,282,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW37', coords: '253,220,266,234', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW38', coords: '256,237,267,246', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW39', coords: '237,220,251,237', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW40', coords: '240,238,253,247', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW41', coords: '222,219,235,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW42', coords: '223,240,237,247', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW43', coords: '209,222,221,234', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW44', coords: '209,237,220,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW45', coords: '175,220,188,236', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW46', coords: '177,238,191,249', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW47', coords: '160,221,172,235', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW48', coords: '161,237,176,246', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW49', coords: '144,219,157,234', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW50', coords: '146,238,158,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW51', coords: '130,219,142,235', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW52', coords: '133,238,144,247', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW53', coords: '113,220,126,237', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW54', coords: '117,238,130,248', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW55', coords: '99,221,111,234', shape: 'rect'},
-        {type: 'klhw', device_code: 'KLHW56', coords: '100,239,116,248', shape: 'rect'},
-        {type: 'yaossx', device_code: '入窑输送线', coords: '97,520,579,539', shape: 'rect'},
-        {type: 'yaossx', device_code: '出窑输送线', coords: '94,635,592,654', shape: 'rect'}
-      ],
-      interTime: this.$store.getters.setTime,
-      timer3: null,
-      MixMachineList: [], // 混碾机
-      MixBlankingList: [], // 混碾机对接位
-      PressMachineList: [], // 压机
-      ManipulatorInfoList: [], // 压制、分拣机械手
-      StackingPositionList: [], // 压机下料位
-      yzslwPositionList: [], // 压机上料位
-      SortAndPalletizingList: [], // 分拣拆码垛对接位
-      manualSortingList: [], // 人工分拣拆码垛
-      TrappedMaterialShelfList: [], // 困料货位
-      hchjList: [], // 出窑口缓存货架
-      yaossxArr: [],
-      yaoObj: {},
-      pkId: '',
-      pkObj: {}
-    }
-  },
-  created () {
-    clearInterval(this.timer3)
-    this.refresh()
-  },
-  beforeDestroy () {
-    this.$once('hook:beforeDestroy', () => {
-      clearInterval(this.timer3)
-    })
-  },
-  methods: {
-    showPop ($event, e) {
-      this.pkId = this.pkId === e.device_code ? '' : e.device_code
-      console.log(this.pkId)
-      if (this.pkId) {
-        this.$refs.pop.$el.style.display = 'block'
-        this.$refs.pop.$el.style.left = $event.x + 'px'
-        this.$refs.pop.$el.style.top = $event.y + 'px'
-        if (this.pkId === 'FJ01MDW02' || this.pkId === 'FJCDJXS01') {
-          this.$refs.pop.$el.style.top = ($event.y - 200) + 'px'
-        }
-        this.$refs.pointer.style.left = ($event.x - 5) + 'px'
-        this.$refs.pointer.style.top = ($event.y - 5) + 'px'
-      } else {
-        this.$refs.pop.$el.style.display = 'none'
-      }
-      if (e.type === 'hlj') {
-        this.MixMachineList.map(el => {
-          if (el.device_code === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'hljdjw') {
-        this.MixBlankingList.map(el => {
-          if (el.pointCode === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'jxs') {
-        this.ManipulatorInfoList.map(el => {
-          if (el.device_code === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'fjmdw') {
-        this.SortAndPalletizingList.map(el => {
-          if (el.device_code === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'rgfjc') {
-        this.manualSortingList.map(el => {
-          if (el.pointCode === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'hchj') {
-        this.hchjList.map(el => {
-          if (el.pointCode === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'yj') {
-        this.PressMachineList.map(el => {
-          if (el.device_code === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'yjxlw') {
-        this.StackingPositionList.map(el => {
-          if (el.device_code === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'yjslw') {
-        this.yzslwPositionList.map(el => {
-          if (el.device_code === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'klhw') {
-        this.TrappedMaterialShelfList.map(el => {
-          if (el.pointCode === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      } else if (e.type === 'yaossx') {
-        this.yaossxArr.map(el => {
-          if (el.pointName === e.device_code) {
-            this.pkObj = el
-            this.pkObj.type = e.type
-          }
-        })
-      }
-    },
-    closePop () {
-      this.$refs.pop.$el.style.display = 'none'
-      this.pkId = ''
-    },
-    refresh () {
-      this._deviceCondition()
-      this._inOutKilnDetail()
-      // this._kilnDetail()
-      this.timer3 = setInterval(() => {
-        this._deviceCondition()
-        this._inOutKilnDetail()
-        // this._kilnDetail()
-      }, this.interTime)
-    },
-    async _deviceCondition () {
-      let res = await deviceCondition()
-      this.MixMachineList = [...res.MixMachineList]
-      this.MixBlankingList = [...res.MixBlankingList]
-      this.PressMachineList = [...res.PressMachineList]
-      this.ManipulatorInfoList = [...res.ManipulatorInfoList]
-      this.StackingPositionList = [...res.StackingPositionList]
-      this.yzslwPositionList = [...res.yzslwPositionList]
-      this.SortAndPalletizingList = [...res.SortAndPalletizingList]
-      this.manualSortingList = [...res.manualSortingList]
-      this.manualSortingList = this.manualSortingList.reverse()
-      this.hchjList = [...res.hchjList]
-      this.TrappedMaterialShelfList = [...res.TrappedMaterialShelfList]
-    },
-    async _inOutKilnDetail () {
-      let res = await inOutKilnDetail()
-      this.yaossxArr = [...res]
-    },
-    async _kilnDetail () {
-      let res = await kilnDetail()
-      this.yaoObj = res
-    }
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-.center_wrapper
-  width 100%
-  height 100%
-  position relative
-.pop_pointer
-  position: fixed;
-  z-index 101;
-  width: 10px;
-  height: 10px;
-  background-color: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
-  &::after
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #00c4ff;
-    border-radius: 50%;
-    box-shadow: 0 0 5px #00c4ff;
-    animation: glow 2s infinite
-@keyframes glow {
-  0% {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1.5);
-    opacity: 0;
-  }
-}
-</style>
diff --git a/src/pages/modules/home/workshop_back.vue b/src/pages/modules/home/workshop_back.vue
new file mode 100644
index 0000000..c5a1dcc
--- /dev/null
+++ b/src/pages/modules/home/workshop_back.vue
@@ -0,0 +1,1334 @@
+<template>
+  <div class="center_wrapper">
+    <!-- <t-canvas></t-canvas> -->
+    <div class="status_wrap">
+      <div class="status_item">
+          <div class="status_tip gray"></div>
+          <div class="status_name">停机</div>
+      </div>
+      <div class="status_item">
+          <div class="status_tip yellow"></div>
+          <div class="status_name">暂停</div>
+      </div>
+      <div class="status_item">
+          <div class="status_tip green"></div>
+          <div class="status_name">运行</div>
+      </div>
+      <div class="status_item">
+          <div class="status_tip red"></div>
+          <div class="status_name">故障</div>
+      </div>
+    </div>
+    <div class="m_block m_block_2">
+      <div class="m_wraper">
+        <div class="p_device ddxt_wrap" v-for="(e, i) in [1, 1]" :key="'ddxt' + i" :class="'ddxt_wrap_' + (i +1)">
+          <div class="p_device weilan_ddxt_wrap">
+            <div class="weilan_ddxt" v-for="(e, i) in [1, 1]" :key="'cmdwl' + i">
+              <img class="device_img" :class="{'rotatey180': i === 1}" src="../../../images/device/wl_cmd_1.png" alt="">
+            </div>
+          </div>
+          <div class="p_device ssj_wrap">
+            <img class="device_img" src="../../../images/device/ssj_gray.png" alt="">
+          </div>
+          <div v-show="i === 1" class="p_device ktp_cmd_wrap">
+            <div class="ktp_cmd" v-for="e in SortAndPalletizingList.slice(0,2)" :key="e.device_code" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <device-pop
+                :pkId="pkId"
+                type="yjmdw"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div v-show="i === 1" class="p_device ktp_cmd_wrap cmdssj_wrap">
+            <div class="ktp_cmd" v-for="(e,i) in SortAndPalletizingList.slice(2,4)" :key="e.device_code" @click="getInfo2(e)">
+              <img class="device_img" :class="{'rotatex180': i === 1}" :src="require('../../../images/device/cmdssj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <device-pop
+                :pkId="pkId"
+                type="yjmdw"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_1" v-for="e in ManipulatorInfoList.slice(0,1)" :key="e.device_code" :class="{'rotate_3': Number(e.device_status) === 1}" @click="getInfo2(e)">
+            <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="jxs"
+            :data="e"
+          ></device-pop>
+          </div>
+          <div v-show="i === 0" class="p_device robot_cmd_wrap robot_cmd_wrap_2" v-for="e in ManipulatorInfoList.slice(2,3)" :key="e.device_code" :class="{'rotate_4': Number(e.device_status) === 1}" @click="getInfo2(e)">
+            <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="jxs"
+            :data="e"
+          ></device-pop>
+          </div>
+          <div v-show="i === 1" class="p_device robot_cmd_wrap robot_cmd_wrap_2" v-for="e in ManipulatorInfoList.slice(1,2)" :key="e.device_code" :class="{'rotate_4': Number(e.device_status) === 1}" @click="getInfo2(e)">
+            <img class="device_img" :src="require('../../../images/device/robot_cmd_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="jxs"
+            :data="e"
+          ></device-pop>
+          </div>
+        </div>
+        <div class="rgv_line_wrap">
+          <div class="rgv_line_1">
+            <div class="rgv_line_begine"></div>
+            <div class="rgv_line_begine rgv_line_end"></div>
+            <div class="rgv_line_node_wrap">
+              <div class="rgv_line_node"  v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="'rgvlinea' + i"></div>
+            </div>
+          </div>
+          <div class="rgv_line_1 rgv_line_2">
+            <div class="rgv_line_begine"></div>
+            <div class="rgv_line_begine rgv_line_end"></div>
+            <div class="rgv_line_node_wrap">
+              <div class="rgv_line_node"  v-for="(e,i) in [1,2,3,4,5,6,7,8]" :key="'rgvlineb' + i"></div>
+            </div>
+          </div>
+          <div class="rgv_line_3"></div>
+        </div>
+        <div class="p_device rgvct">
+          <img class="device_img" src="../../../images/device/rgv_ct_gray.png" alt="">
+        </div>
+        <div class="p_device ggtj_wrap ggtj_wrap_1">
+          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2]" :key="'gtssja' + i">
+        </div>
+        <div class="p_device ggtj_wrap ggtj_wrap_2">
+          <img class="fmj" src="../../../images/device/fmj_gray.png" alt="">
+          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="'gtssjb' + i">
+        </div>
+        <div class="p_device rgpt"></div>
+        <div class="p_device fmj2">
+          <img class="device_img" src="../../../images/device/fmj2_gray.png" alt="">
+        </div>
+        <div class="p_device ggtj_wrap ggtj_wrap_3">
+          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2,3]" :key="'gtssjc' + i">
+          <img class="ltssj" src="../../../images/device/ltssj_gray.png" alt="">
+          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2]" :key="'gtssjd' + i">
+          <img class="crj" src="../../../images/device/crj_gray.png" alt="">
+          <img class="gtssj" src="../../../images/device/gtssj_gray.png" alt="" v-for="(e,i) in [1,2,3,4]" :key="'gtssje' + i">
+        </div>
+      </div>
+    </div>
+    <div class="m_block m_block_1">
+      <div class="m_wraper">
+        <div class="yao_wrap yao_1" @click="getInfo1(yaoObj)">
+          <div class="yao_layer3"></div>
+          <div class="yao_layer1 yao_layer1_1"></div>
+          <div class="yao_layer2 yao_layer2_1">
+            <p>进窑</p>
+          </div>
+          <device-pop
+            :pkId="pkId"
+            type="yao"
+            :data="yaoObj"
+          ></device-pop>
+        </div>
+        <div class="yao_wrap yao_2">
+          <div class="yao_layer3"></div>
+          <div class="yao_layer1 yao_layer1_1"></div>
+          <div class="yao_layer2 yao_layer2_1">
+            <p>出窑</p>
+          </div>
+        </div>
+        <div class="p_device jyw_wrap">
+          <div class="p_device" v-for="(e, i) in  [1,1,1,1]" :key="'jyw' + i" :class="'jyw' + (i+1)">
+            <img class="device_img" src="../../../images/device/ktpv_gray.png" alt="">
+          </div>
+        </div>
+        <div class="p_device dpw_wrap">
+          <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
+        </div>
+        <div class="p_device cpj_wrap">
+          <img class="device_img" src="../../../images/device/cpj_gray.png" alt="">
+        </div>
+        <div class="p_device" v-for="(e, i) in [1,1]" :key="'yjbyx' + i" :class="'yjbyx_' + (i + 1)">
+          <img class="device_img" src="../../../images/device/yjbyx_gray.png" alt="">
+        </div>
+        <div class="p_device ktp_yao_enter_wrap" v-for="el in yaossxArr.slice(0,1)" :key="el.pointName" @click="getInfo1(el)">
+          <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="'aktpyao' + i">
+            <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(el.stat)] + '.png')">
+          </div>
+          <device-pop
+            :pkId="pkId"
+            type="yaossx"
+            :data="el"
+          ></device-pop>
+        </div>
+        <div class="p_device ktp_yao_out_wrap" v-for="el in yaossxArr.slice(1,2)" :key="el.pointName" @click="getInfo1(el)">
+          <div class="ktp_yao" v-for="(e, i) in [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9]" :key="'bktpyao' + i">
+            <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(el.stat)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="yaossx"
+            :data="el"
+          ></device-pop>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m_block_8">
+      <div class="p_device rgcdw_wrap">
+        <div class="rgcdw" v-for="e in manualSortingList" :key="e.pointCode" @click="getInfo1(e)">
+          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="hljdjw"
+            :data="e"
+          ></device-pop>
+        </div>
+      </div>
+      <div class="p_device cdw_wrap cdw_wrap_1">
+        <div class="cdw" v-for="e in hchjList1" :key="e.pointCode" @click="getInfo1(e)">
+          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="hljdjw"
+            :data="e"
+          ></device-pop>
+        </div>
+      </div>
+      <div class="p_device cdw_wrap cdw_wrap_2">
+        <div class="cdw" v-for="e in hchjList2" :key="e.pointCode" @click="getInfo1(e)">
+          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="hljdjw"
+            :data="e"
+          ></device-pop>
+        </div>
+      </div>
+      <div class="p_device cdw_wrap cdw_wrap_3">
+        <div class="cdw" v-for="e in hchjList3" :key="e.pointCode" @click="getInfo1(e)">
+          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="hljdjw"
+            :data="e"
+          ></device-pop>
+        </div>
+      </div>
+      <div class="p_device cdw_wrap cdw_wrap_4">
+        <div class="cdw" v-for="e in hchjList4" :key="e.pointCode" @click="getInfo1(e)">
+          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="hljdjw"
+            :data="e"
+          ></device-pop>
+        </div>
+      </div>
+      <div class="p_device cdw_wrap cdw_wrap_5">
+        <div class="cdw" v-for="e in hchjList5" :key="e.pointCode" @click="getInfo1(e)">
+          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="hljdjw"
+            :data="e"
+          ></device-pop>
+        </div>
+      </div>
+      <div class="p_device cdw_wrap cdw_wrap_6">
+        <div class="cdw" v-for="e in hchjList6" :key="e.pointCode" @click="getInfo1(e)">
+          <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="hljdjw"
+            :data="e"
+          ></device-pop>
+        </div>
+      </div>
+    </div>
+    <div class="m_block m_block_3">
+      <div class="m_wraper">
+        <div class="yj_block" v-for="(el, index) in [1,1]" :key="'yj630' + index" >
+          <div class="p_device weilan_630_wrap">
+            <img class="device_img" src="../../../images/device/wl.png" alt="">
+          </div>
+          <div class="p_device flexwrap slw_630_wrap">
+            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630a' + i">
+              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
+            </div>
+          </div>
+          <div class="p_device flexwrap ktp_630_wrap">
+            <div v-show="index === 0" class="ktp_630" v-for="(e,i) in StackingPositionList.slice(0,4)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <device-pop
+                :pkId="pkId"
+                type="yjmdw"
+                :data="e"
+              ></device-pop>
+            </div>
+            <div v-show="index === 1" class="ktp_630" v-for="(e,i) in StackingPositionList.slice(4,8)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <device-pop
+                :pkId="pkId"
+                type="yjmdw"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div class="p_device yj_630_wrap">
+            <div v-show="index === 0" class="yj_630" v-for="e in PressMachineList.slice(0,2)" :key="e.device_code" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <p>{{ e.device_code }}</p>
+              <device-pop
+                :pkId="pkId"
+                type="yj"
+                :data="e"
+              ></device-pop>
+            </div>
+            <div v-show="index === 1" class="yj_630" v-for="e in PressMachineList.slice(2,4)" :key="e.device_code" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <p>{{ e.device_code }}</p>
+              <device-pop
+                :pkId="pkId"
+                type="yj"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(3+index,4+index)" :key="e.device_code" :class="{'rotate_1': Number(e.device_status) === 1}" @click="getInfo2(e)">
+            <img class="device_img" :src="require('../../../images/device/robot_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+            <device-pop
+            :pkId="pkId"
+            type="jxs"
+            :data="e"
+          ></device-pop>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m_block m_block_4">
+      <div class="m_wraper">
+        <div class="yj_block">
+          <div class="p_device weilan_630_wrap">
+            <img class="device_img" src="../../../images/device/wl.png" alt="">
+          </div>
+          <div class="p_device flexwrap slw_630_wrap">
+            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630b' + i">
+              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
+            </div>
+          </div>
+          <div class="p_device flexwrap ktp_630_wrap">
+            <div class="ktp_630" v-for="(e, i) in StackingPositionList.slice(8,12)" :key="e.device_code" :class="'ktp_630_' + (i + 1)" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/ktpv_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <device-pop
+                :pkId="pkId"
+                type="yjmdw"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div class="p_device yj_630_wrap">
+            <div class="yj_630" v-for="e in PressMachineList.slice(4,6)" :key="e.device_code" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <p>{{ e.device_code }}</p>
+              <device-pop
+                :pkId="pkId"
+                type="yj"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(5,6)" :key="e.device_code" :class="{'rotate_1': Number(e.device_status) === 1}" @click="getInfo2(e)">
+            <img class="device_img" :src="require('../../../images/device/robot_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+            <device-pop
+              :pkId="pkId"
+              type="jxs"
+              :data="e"
+            ></device-pop>
+          </div>
+        </div>
+        <div class="yj_block yj_1250_block" v-for="(e, index) in [1, 1]" :key="'yj1250' + index">
+          <div class="p_device weilan_630_wrap">
+            <img class="device_img" src="../../../images/device/wl.png" alt="">
+          </div>
+          <div class="p_device flexwrap slw_630_wrap slw_1250_wrap">
+            <div class="slw_630" v-for="(e, i) in [1,1]" :key="'slw630c' + i">
+              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
+            </div>
+          </div>
+          <div class="p_device flexwrap ktp_630_wrap">
+            <div v-show="index === 0" class="ktp_630 ktp_yyj" v-for="(e, i) in StackingPositionList.slice(12,14)" :key="e.device_code" :class="'ktp_yyj_'+(i+1)" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <device-pop
+                :pkId="pkId"
+                type="yjmdw"
+                :data="e"
+              ></device-pop>
+            </div>
+            <div v-show="index === 1" class="ktp_630 ktp_yyj" v-for="(e, i) in StackingPositionList.slice(14,16)" :key="e.device_code" :class="'ktp_yyj_'+(i+1)" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/ktp_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <device-pop
+                :pkId="pkId"
+                type="yjmdw"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div class="p_device yj_630_wrap">
+            <div class="yj_630 yj_1250" v-for="e in PressMachineList.slice(6+index,7+index)" :key="e.device_code" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/yj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+              <p>{{ e.device_code }}</p>
+              <device-pop
+                :pkId="pkId"
+                type="yj"
+                :data="e"
+              ></device-pop>
+            </div>
+          </div>
+          <div class="p_device robot_630_wrap" v-for="e in ManipulatorInfoList.slice(6+index,7+index)" :key="e.device_code" :class="{'rotate_5': Number(e.device_status) === 1}" @click="getInfo2(e)">
+            <img class="device_img" :src="require('../../../images/device/robot_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')">
+            <device-pop
+              :pkId="pkId"
+              type="jxs"
+              :data="e"
+            ></device-pop>
+          </div>
+        </div>
+        <div class="yj_block yyj_block" v-for="(e, i) in [1, 1]" :key="'yyjblock' + i">
+          <div class="p_device weilan_630_wrap">
+            <img class="device_img" src="../../../images/device/wl.png" alt="">
+          </div>
+          <div v-show="i === 0" class="p_device flexwrap slw_630_wrap slw_1250_wrap">
+            <div class="slw_630" v-for="(e, i) in [1,1]" :key="'slw630d' + i">
+              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
+            </div>
+          </div>
+          <div v-show="i === 1" class="p_device flexwrap slw_630_wrap slw_yyj_wrap">
+            <div class="slw_630" v-for="(e, i) in [1,1,1,1]" :key="'slw630e' + i">
+              <img class="device_img" src="../../../images/device/lz_gray.png" alt="">
+            </div>
+          </div>
+          <div class="p_device flexwrap ktp_630_wrap" style="opacity:0.1">
+            <div class="ktp_630 ktp_yyj" v-for="(e, i) in [1,1]" :key="'ktpyyj' + i">
+              <img class="device_img" src="../../../images/device/ktp_gray.png" alt="">
+            </div>
+          </div>
+          <div class="p_device yj_630_wrap yyj_wrap">
+            <div class="yj_630" style="opacity:0.1">
+              <img class="device_img" src="../../../images/device/yyj_gray.png" alt="">
+              <!-- <img class="device_img" :src="require('../../../images/device/yyj_' + ['gray', 'yellow', 'green', 'red'][Number(PressMachineList[8+i].device_status)] + '.png')"> -->
+            </div>
+          </div>
+          <div class="p_device robot_630_wrap" style="opacity:0.1">
+            <img src="../../../images/device/robot_gray.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m_block m_block_5">
+      <div class="p_device agv_1" v-for="(e, i) in [1,1]" :key="'agv' + i" :class="'agv_' + (i+1)">
+        <img src="../../../images/device/agv_gray.png" alt="">
+      </div>
+    </div>
+    <div class="m_block m_block_6">
+      <div class="m_wraper">
+        <div class="lzhlj_wrap">
+          <div class="lz_wrap">
+            <div class="lz" v-for="e in MixBlankingList" :key="e.pointCode" @click="getInfo1(e)">
+              <img class="device_img" :src="require('../../../images/device/lz_hj_' + ['gray', 'yellow', 'green', 'red'][Number(e.pointStatus)] + '.png')" alt="">
+              <device-pop
+              :pkId="pkId"
+              type="hljdjw"
+              :data="e"
+            ></device-pop>
+            </div>
+          </div>
+          <div class="hlj_wrap">
+            <div class="hlj" v-for="e in MixMachineList" :key="e.device_code" @click="getInfo2(e)">
+              <img class="device_img" :src="require('../../../images/device/hlj_' + ['gray', 'yellow', 'green', 'red'][Number(e.device_status)] + '.png')" alt="">
+              <device-pop
+              :pkId="pkId"
+              type="hlj"
+              :data="e"
+            ></device-pop>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="lzhlj_wrap cbj_wrap">
+          <div class="lz_wrap">
+            拆包机没图片
+          </div>
+          <div class="hlj_wrap">
+            拆包机没图片
+          </div>
+        </div> -->
+      </div>
+    </div>
+    <div class="m_block_7">
+      <div class="p_device klw_wraper_1">
+        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwa' + i">
+          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
+        </div>
+      </div>
+      <div class="p_device klw_wraper_2">
+        <div class="klw" v-for="(e, i) in [1,1,1,1]" :key="'klwb' + i">
+          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
+        </div>
+      </div>
+      <div class="p_device klw_wraper_3">
+        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwc' + i">
+          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
+        </div>
+      </div>
+      <div class="p_device klw_wraper_4">
+        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwd' + i">
+          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
+        </div>
+      </div>
+      <div class="p_device klw_wraper_5">
+        <div class="klw" v-for="(e, i) in [1,1,1,1,1,1]" :key="'klwe' + i">
+          <img class="device_img" src="../../../images/device/lz_hj_gray.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import TCanvas from './canvas.vue'
+import DevicePop from './devicepop_back.vue'
+import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
+// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/mork2.js'
+export default {
+  name: 'workshop',
+  components: {
+    // TCanvas: TCanvas,
+    DevicePop: DevicePop
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer3: null,
+      MixMachineList: [], // 混碾机
+      MixBlankingList: [], // 混碾机对接位
+      PressMachineList: [], // 压机
+      ManipulatorInfoList: [], // 压制、分拣机械手
+      StackingPositionList: [], // 压制码垛位情况显示
+      SortAndPalletizingList: [], // 分拣拆码垛对接位
+      manualSortingList: [], // 人工分拣拆码垛
+      hchjList1: [], // 出窑口缓存货架
+      hchjList2: [], // 出窑口缓存货架
+      hchjList3: [], // 出窑口缓存货架
+      hchjList4: [], // 出窑口缓存货架
+      hchjList5: [], // 出窑口缓存货架
+      hchjList6: [], // 出窑口缓存货架
+      yaossxArr: [],
+      yaoObj: {},
+      pkId: ''
+    }
+  },
+  created () {
+    clearInterval(this.timer3)
+    this.refresh()
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer3)
+    })
+  },
+  methods: {
+    refresh () {
+      this._deviceCondition()
+      this._inOutKilnDetail()
+      this._kilnDetail()
+      this.timer3 = setInterval(() => {
+        this._deviceCondition()
+        this._inOutKilnDetail()
+        this._kilnDetail()
+      }, this.interTime)
+    },
+    async _deviceCondition () {
+      let res = await deviceCondition()
+      this.MixMachineList = [...res.MixMachineList]
+      this.MixBlankingList = [...res.MixBlankingList]
+      this.PressMachineList = [...res.PressMachineList]
+      this.ManipulatorInfoList = [...res.ManipulatorInfoList]
+      this.StackingPositionList = [...res.StackingPositionList]
+      this.SortAndPalletizingList = [...res.SortAndPalletizingList]
+      this.manualSortingList = [...res.manualSortingList]
+      this.manualSortingList = this.manualSortingList.reverse()
+      let hchjList = [...res.hchjList]
+      this.hchjList1 = hchjList.slice(0, 6).reverse()
+      this.hchjList2 = hchjList.slice(6, 12)
+      this.hchjList3 = hchjList.slice(12, 20).reverse()
+      this.hchjList4 = hchjList.slice(20, 28)
+      this.hchjList5 = hchjList.slice(28, 36).reverse()
+      this.hchjList6 = hchjList.slice(36, 44)
+      console.log(this.hchjList2)
+    },
+    async _inOutKilnDetail () {
+      let res = await inOutKilnDetail()
+      this.yaossxArr = [...res]
+    },
+    async _kilnDetail () {
+      let res = await kilnDetail()
+      this.yaoObj = res
+    },
+    getInfo1 (e) {
+      this.pkId = this.pkId === e.pointName ? '' : e.pointName
+    },
+    getInfo2 (e) {
+      this.pkId = this.pkId === e.device_code ? '' : e.device_code
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.center_wrapper
+  width 100%
+  height 100%
+  position relative
+.status_wrap
+    position absolute
+    top 2%
+    left 0
+    z-index 1
+    display: flex
+    justify-content space-between
+    align-items center
+.status_item
+    display: flex
+    justify-content space-between
+    align-items center
+    margin-left 20px
+.status_tip
+    width 15px
+    height 15px
+    border-radius 50%
+    margin-right 10px
+    box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
+.status_name
+    font-size 16px
+    line-height 1
+    color #fff
+.m_block
+  position absolute
+  border: 1px solid #00c8da;
+  padding: 12px;
+  box-shadow: 0 0 15px #0087ac;
+  border-radius: 10px;
+.m_wraper
+  position relative
+  width 100%
+  height 100%
+  display flex
+  justify-content space-between
+  align-items center
+.p_device
+  position absolute
+  top 0
+  left 0
+  display inline-flex
+  justify-content space-between
+.device_img
+  width 100%
+  height auto
+// 分拣拆垛位start
+.m_block_2
+  width: 55%;
+  height: 22%;
+  left: auto
+  right: 2%
+  top: 7%;
+.ddxt_wrap
+  width 30%
+  height 49%
+.ddxt_wrap_2
+  top auto
+  bottom 0
+.weilan_ddxt_wrap
+  width 100%
+  height 100%
+  display flex
+.weilan_ddxt
+  width 45%
+  display inline-flex
+.ssj_wrap
+  width: 36%;
+  top: 46%;
+  left: 32%;
+.ktp_cmd_wrap
+  width 19px
+  height 90%
+  display flex
+  flex-direction column
+  top 5%
+  left 3%
+.ktp_cmd
+  position relative
+  width 100%
+  display inline-flex
+.cmdssj_wrap
+  width 28px
+  left auto
+  right 3%
+.rotatex180
+  transform rotateX(180deg)
+.rotatey180
+  transform rotateY(180deg)
+.robot_cmd_wrap
+  width: 18px;
+  height: 18px;
+  img
+    position absolute
+    width: 36px;
+    height: 20px;
+    top: -2px;
+    left: -1px;
+.robot_cmd_wrap_1
+  left: 11%;
+  top: 42%;
+.robot_cmd_wrap_2
+  left: 79%;
+  top: 41%;
+  img
+    transform rotateY(180deg)
+    left -19px
+.rgv_line_wrap
+  position absolute
+  top 0
+  left 31%
+  width 5.5%
+  height 100%
+.rgv_line_1
+  position absolute
+  top 6%
+  left 0
+  width 3px
+  height 88%
+  background-color #b2b2b2
+  margin 0 auto
+  box-shadow 0px 3px 10px #333333
+  _fj(row)
+.rgv_line_begine
+  position absolute
+  width 10px
+  height 3px
+  top 0
+  left -3.5px
+  background-color #b2b2b2
+  border-radius 50%
+  box-shadow 0px 3px 10px #333333
+.rgv_line_end
+  top auto
+  bottom 0
+.rgv_line_node_wrap
+  position absolute
+  width 6px
+  left -1.5px
+  height 100%
+  display flex
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+.rgv_line_node
+  width 6px
+  height 3px
+  background-color #b2b2b2
+  border-radius 50%
+  box-shadow 0px 1px 4px #333333
+.rgv_line_2
+  left auto
+  right 0
+.rgv_line_3
+  position absolute
+  top 0
+  left 50%
+  z-index 4
+  width 2px
+  height 100%
+  background-color #b2b2b2
+  box-shadow 0px 3px 10px #333333
+.rgvct
+  width 5.5%
+  top 10%
+  left: 31%;
+  z-index: 99
+.ggtj_wrap
+  display flex
+  justify-content flex-start
+  left 36.5%
+.gtssj
+  width 27px
+  height 25px
+.fmj
+  width 30px
+  height 30px
+.rgpt
+  width 50px
+  height 50px
+  background-color #b4b4b4
+  left 51.8%
+  top 56%
+.ltssj
+  width 53.59px
+  height 25px
+.crj
+  width auto
+  height 40px
+  position relative
+  top -14px
+.fmj2
+  width 26px
+  height 32px
+  left 68%
+  top 62%
+.ggtj_wrap_1
+  top 18%
+.ggtj_wrap_2
+  top 37%
+.ggtj_wrap_3
+  top 64%
+// 分拣拆垛位end
+// 压机模块start
+.m_block_3
+  width 29%
+  height 22%
+  left 2%
+  top 60%
+  .yj_block
+    width 48%
+.m_block_4
+  width 66%
+  height 22%
+  left auto
+  right 2%
+  top 60%
+  .yj_block
+    width 20%
+    &:nth-child(1)
+      width 21%
+    &:nth-child(2), &:nth-child(3)
+      width 16%
+.yj_block
+  position relative
+  height 100%
+.weilan_630_wrap
+  width 70%
+  height 45%
+  left 15%
+  img
+    transform rotate(180deg)
+.slw_630_wrap
+  width 100%
+  top auto
+  bottom 0
+.slw_630
+  display inline-flex
+  width 50%
+  img
+    width 23px
+    margin 0 auto
+.slw_1250_wrap
+  width 50%
+  left 6%
+  .slw_630
+    width 100%
+.slw_yyj_wrap
+    width 50%
+    left auto
+    right 0
+    .slw_630
+      width 100%
+.ktp_630_wrap
+  width: 60%;
+  height: 32%;
+  left: 20%;
+  top 4%
+.ktp_630
+  position absolute
+  width 19px
+.ktp_630_1
+  left 0
+  bottom 0
+.ktp_630_2
+  left 0
+  top 0
+.ktp_630_3
+  right 0
+  bottom 0
+.ktp_630_4
+  right 0
+  top 0
+.ktp_yyj
+  width 26.78px
+.ktp_yyj_1
+  left 0
+  top 0
+  bottom auto
+.ktp_yyj_2
+  left auto
+  right 0
+  top 0
+.yj_630_wrap
+  width 100%
+  height 20%
+  top 47%
+.yj_630
+  position relative
+  width 48%
+  height 100%
+  img
+    height 100%
+  p
+    position absolute
+    width: 100%;
+    height: 100%;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: #333;
+.yj_1250
+  width 63%
+.yyj_wrap
+  height 27.5%
+  top 40%
+.robot_630_wrap
+  width 18px
+  height 18px
+  left calc(50% - 9px)
+  top 20%
+  img
+    position absolute
+    width 23px
+    height auto
+    left -6px
+// 压机模块end
+// 叉车start
+.m_block_5
+  width 15%
+  left 5%
+  top 14%
+  padding 20px
+  border none
+  box-shadow none
+.agv_1
+  width 17%
+  left 16%
+  top -30%
+  img
+    width 100%
+.agv_2
+  left 59%
+// 叉车end
+// 混料机start
+.m_block_6
+  width 96%
+  height 10%
+  top auto
+  bottom 2%
+  left 2%
+  padding 6px
+.lzhlj_wrap
+  width 70%
+  height 100%
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around
+.cbj_wrap
+  width 14%
+  border 2px solid #465e7b
+  border-radius 5px
+  .lz_wrap,.hlj_wrap
+    justify-content center
+.lz_wrap
+  width 100%
+  display flex
+  justify-content space-between
+  align-items center
+.hlj_wrap
+  width 100%
+  display flex
+  justify-content space-between
+  align-items center
+.lz
+  position relative
+  width 40px
+  height 26.31px
+  img
+    position relative
+    left 5px
+    width 30px
+.hlj
+  position relative
+  width 40px
+  height 30.3px
+// 混料机end
+// 窑start
+.m_block_1
+  width: 77%;
+  height: 24%;
+  right: 2%;
+  top: 31%;
+.yao_wrap
+  position absolute
+  width 80%
+  height 50px
+.yao_1
+  left 15%
+  bottom 22%
+.yao_2
+  left 15%
+  top 22%
+.yao_layer3
+  position absolute
+  width: 10%;
+  height: 70%;
+  top: 0;
+  left: 0;
+  background-color: #A0927E;
+.yao_layer1
+  position absolute
+  left 1%
+  top 0
+  width 98%
+  height 50%
+  transform: skew(26deg);
+.yao_layer1_1
+  background-image: linear-gradient(to bottom, #00ff00, #b2fbb2);
+  box-shadow: inset 1px 3px 6px 0px #04b004;
+  border: 2px solid #028802;
+.yao_layer1_2
+  background-image: linear-gradient(to bottom, #bfbfbf, #f1f1f1);
+  box-shadow: inset 1px 3px 6px 0px #838282;
+  border: 2px solid #8e8a8a;
+.yao_layer2
+  position: absolute;
+  left: 2%;
+  top: 50%;
+  width: 98%;
+  height: 50%;
+  background-color: #CCC4BB;
+  border-top: 0;
+  padding-left 10px
+  p
+    line-height: 22px;
+    font-size: 20px;
+    color: #F04826;
+    transform: scale(1, 0.7);
+    text-shadow 2px 2px 2px rgba(0, 0, 0, 0.3);
+.yao_layer2_1
+  border: 2px solid #028802;
+.yao_layer2_2
+  border: 2px solid #8e8a8a;
+.jyw_wrap
+  width 2.205%
+  height 76%
+  top: 21.1%
+  left 8%
+.jyw1
+  top 15%
+.jyw2
+  top 38%
+.jyw3
+  top 62%
+.jyw4
+  top 86%
+.dpw_wrap
+  width: 4%;
+  top: -27%;
+  left: 15%;
+.cpj_wrap
+  width 6%
+  top 80%
+.yjbyx_1
+  width: 4%;
+  height: 76%;
+  top: 22%;
+  left: 10%;
+.yjbyx_2
+  width: 4%;
+  height: 79%;
+  left: auto;
+  right: 0;
+.ktp_yao_enter_wrap
+  width 86%
+  left auto
+  top auto
+  bottom 0
+  right 0
+.ktp_yao_out_wrap
+  width 86%
+  left: auto
+  right: 4%;
+.ktp_yao
+  float left
+  width calc(100% / 39)
+  img
+    height auto
+// 窑end
+// 困料货位start
+.m_block_7
+  position absolute
+  width: 100%;
+  height: 4%;
+  top: auto;
+  bottom: 12%;
+.klw_wraper_1
+  left 2%
+.klw_wraper_2
+  left 18%
+.klw_wraper_3
+  left 49%
+.klw_wraper_4
+  left 65%
+.klw_wraper_5
+  left 81%
+.klw
+  width 25.03px
+  height 21.97px
+  float left
+// 困料货位end
+// 货位start
+.m_block_8
+  position absolute
+  width: 17%;
+  height: 24%;
+  top: 31%
+  left: 2%
+.rgcdw_wrap
+  width 15%
+  height: 70%;
+  top: 15%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+.cdw_wrap
+  width 15%
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+.rgcdw
+  position relative
+.cdw
+  position relative
+  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 60%);
+.cdw_wrap_1
+  left: 80%
+  top 10%
+.cdw_wrap_2
+  left: 84%
+  top: 8%;
+.cdw_wrap_3
+  height 100%
+  left: 50%
+.cdw_wrap_4
+  height 100%
+  left: 54%;
+  top: -2%;
+.cdw_wrap_5
+  height 100%
+  left 20%
+.cdw_wrap_6
+  height 100%
+  left: 24%
+  top: -2%
+// 困料货位end
+.rotate_1
+  animation rotate_1 9s linear 1s infinite
+@keyframes rotate_1 {
+    0% {
+      transform: rotateZ(20deg)
+    }
+    2% {
+        transform: rotateZ(20deg)
+    }
+    8% {
+        transform: rotateZ(60deg)
+    }
+    10% {
+        transform: rotateZ(60deg)
+    }
+    18% {
+      transform: rotateZ(20deg)
+    }
+    20% {
+        transform: rotateZ(20deg)
+    }
+    28% {
+      transform: rotateZ(100deg)
+    }
+    30% {
+        transform: rotateZ(100deg)
+    }
+    43% {
+      transform: rotateZ(-20deg)
+    }
+    50% {
+        transform: rotateZ(-20deg)
+    }
+    58% {
+      transform: rotateZ(-60deg)
+    }
+    60% {
+        transform: rotateZ(-60deg)
+    }
+    68% {
+      transform: rotateZ(-20deg)
+    }
+    70% {
+        transform: rotateZ(-20deg)
+    }
+    78% {
+      transform: rotateZ(-120deg)
+    }
+    80% {
+        transform: rotateZ(-120deg)
+    }
+    93% {
+      transform: rotateZ(20deg)
+    }
+    100% {
+        transform: rotateZ(20deg)
+    }
+}
+.rotate_2
+  animation rotate_2 4s linear 1s infinite
+@keyframes rotate_2 {
+    0% {
+      transform: rotateZ(-45deg)
+    }
+    3% {
+        transform: rotateZ(-45deg)
+    }
+    17% {
+        transform: rotateZ(-90deg)
+    }
+    20% {
+        transform: rotateZ(-90deg)
+    }
+    43% {
+        transform: rotateZ(45deg)
+    }
+    50% {
+        transform: rotateZ(45deg)
+    }
+    72% {
+        transform: rotateZ(90deg)
+    }
+    75% {
+        transform: rotateZ(90deg)
+    }
+    93% {
+        transform: rotateZ(-45deg)
+    }
+    100% {
+        transform: rotateZ(-45deg)
+    }
+}
+.rotate_3
+  animation rotate_3 4s linear 1s infinite
+@keyframes rotate_3 {
+    0%{
+      transform: rotateZ(-120deg)
+    }
+    3% {
+        transform: rotateZ(-120deg)
+    }
+    20% {
+        transform: rotateZ(0deg)
+    }
+    25% {
+        transform: rotateZ(0deg)
+    }
+    47% {
+        transform: rotateZ(120deg)
+    }
+    50% {
+        transform: rotateZ(120deg)
+    }
+    70% {
+        transform: rotateZ(0deg)
+    }
+    75% {
+        transform: rotateZ(0deg)
+    }
+    97%{
+      transform: rotateZ(-120deg)
+    }
+    100% {
+        transform: rotateZ(-120deg)
+    }
+}
+.rotate_4
+  animation rotate_4 4s linear 1s infinite
+@keyframes rotate_4 {
+    0% {
+      transform: rotateZ(0deg)
+    }
+    3% {
+        transform: rotateZ(0deg)
+    }
+    22% {
+      transform: rotateZ(-90deg)
+    }
+    25% {
+        transform: rotateZ(-90deg)
+    }
+    43% {
+      transform: rotateZ(0deg)
+    }
+    50% {
+        transform: rotateZ(0deg)
+    }
+    72% {
+      transform: rotateZ(90deg)
+    }
+    75% {
+        transform: rotateZ(90deg)
+    }
+    93% {
+        transform: rotateZ(0deg)
+    }
+    100% {
+        transform: rotateZ(0deg)
+    }
+}
+.rotate_5
+  animation rotate_5 4s linear 1s infinite
+@keyframes rotate_5 {
+    0% {
+      transform: rotateZ(0deg)
+    }
+    3% {
+        transform: rotateZ(0deg)
+    }
+    25% {
+      transform: rotateZ(120deg)
+    }
+    28% {
+        transform: rotateZ(120deg)
+    }
+    50% {
+      transform: rotateZ(0deg)
+    }
+    53% {
+        transform: rotateZ(0deg)
+    }
+    75% {
+        transform: rotateZ(-130deg)
+    }
+    78% {
+        transform: rotateZ(-130deg)
+    }
+    97% {
+        transform: rotateZ(0deg)
+    }
+    100% {
+        transform: rotateZ(0deg)
+    }
+}
+</style>