混料

src/pages/modules/firedry/one.vue

@@ -26,27 +26,6 @@
                             <div class="status_name">故障</div>
                         </div>
                     </div>
-                    <!-- <div class="machine_wrap yao_wrap">
-                      <div class="yaosb">
-                        <img src="../../../images/workshop/yao.png" alt="">
-                      </div>
-                      <div class="sh_machine yjbyx_1">
-                        <img src="../../../images/workshop/yjbyx.png" alt="">
-                      </div>
-                      <div class="sh_machine yjbyx_2">
-                        <img src="../../../images/workshop/yjbyx.png" alt="">
-                      </div>
-                      <div class="machine_wrap mtp_wrap_3">
-                        <div v-for="(e,i) in [1,2,3,4]" :key="i" class="mtp">
-                          <img src="../../../images/workshop/mtp.png" alt="">
-                        </div>
-                      </div>
-                      <div class="machine_wrap mtp_wrap_3 mtp_wrap_4">
-                        <div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28]" :key="i" class="mtp">
-                          <img src="../../../images/workshop/mtp.png" alt="">
-                        </div>
-                      </div>
-                    </div> -->
                     <div class="machine_wrap yao_wrap">
                       <div class="yaosb">
                         <img src="../../../images/workshop/yao.png" alt="">
@@ -57,18 +36,25 @@
                       <div class="sh_machine yjbyx_2">
                         <img src="../../../images/workshop/yjbyx.png" alt="">
                       </div>
-                      <div class="machine_wrap mtp_wrap_3">
+                      <div class="machine_wrap mtp_wrap_3 yao_left">
                         <div v-for="(e,i) in [1,2,3,4]" :key="i" class="mtp">
                           <img src="../../../images/workshop/mtp.png" alt="">
                         </div>
                       </div>
+                      <div class="machine_wrap mtp_wrap_3 yao_right">
+                        <div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" :key="i" class="mtp">
+                          <img src="../../../images/workshop/mtp.png" alt="">
+                        </div>
+                      </div>
                       <div v-if="FinishedProductShelfList.length > 0" class="machine_wrap mtp_wrap_3 mtp_wrap_4">
+                        <!-- <div v-for="(e,i) in FinishedProductShelfList.slice(0, 26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)" @mouseover="mouseoverHandle(e)" @mouseout="mouseoutHandle(e)"> -->
                         <div v-for="(e,i) in FinishedProductShelfList.slice(0, 26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)">
-                          <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt="">
+                          <!-- <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt=""> -->
                           <!-- <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt=""> -->
-                          <div :class="hightlight"><img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt=""></div>
+                          <div v-show="String(e.point_status) === '0'" class="img1" :class="{yellow:(pkId && e.bglight)}"></div>
+                          <div v-show="String(e.point_status) === '1'" class="img2" :class="{yellow:(pkId && e.bglight)}"></div>
                           <div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
-                            <div class="foldline foldline_left" :class="foldlineStyle" style="display: none;"></div>
+                            <div class="foldline foldline_left" :class="foldlineStyle" style="display: block;"></div>
                             <div class="popup_bg">
                               <div class="popup_block">
                                 <div class="pop_header">
@@ -119,12 +105,15 @@
                           </div>
                         </div>
                       </div>
-                      <div class="machine_wrap mtp_wrap_3 mtp_wrap_4 mtp_wrap_5">
+                      <div v-if="FinishedProductShelfList.length > 0" class="machine_wrap mtp_wrap_3 mtp_wrap_4 mtp_wrap_5">
+                        <!-- <div v-for="(e,i) in FinishedProductShelfList.slice(26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)" @mouseover="mouseoverHandle(e)" @mouseout="mouseoutHandle(e)"> -->
                         <div v-for="(e,i) in FinishedProductShelfList.slice(26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)">
-                          <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt="">
+                          <!-- <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt=""> -->
-                          <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt="">
+                          <!-- <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt=""> -->
+                          <div v-show="String(e.point_status) === '0'" class="img1" :class="{yellow:(pkId && e.bglight)}"></div>
+                          <div v-show="String(e.point_status) === '1'" class="img2" :class="{yellow:(pkId && e.bglight)}"></div>
                           <div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
-                            <div class="foldline foldline_left" :class="foldlineStyle" style="display: none;"></div>
+                            <div class="foldline foldline_left" :class="foldlineStyle" style="display: block;"></div>
                             <div class="popup_bg">
                               <div class="popup_block">
                                 <div class="pop_header">
@@ -200,7 +189,6 @@ export default {
   data () {
     return {
       expand: false,
-      hightlight: '',
       top: '',
       left: '',
       youModel: '',
@@ -241,9 +229,33 @@ export default {
           break
       }
     },
+    mouseoverHandle (e) {
+      this.FinishedProductShelfList.map(el => {
+        if (e.material_code !== '-' && e.material_code === el.material_code) {
+          el.bglight = true
+        } else {
+          el.bglight = false
+        }
+      })
+    },
+    mouseoutHandle (e) {
+      this.FinishedProductShelfList.map(el => {
+        el.bglight = false
+      })
+    },
     getInfo1 (e, i) {
-      this.pkId = e.point_code
+      this.pkId = this.pkId ? '' : e.point_code
+      // this.pkId = e.point_code
       this.pkObj = e
+      console.log(i)
+      if (i > 13 && i < 26) {
+        console.log(i, 666)
+        this.youModel = 'popup_block_wraper2'
+        this.foldlineStyle = 'foldline_left2'
+      } else {
+        this.youModel = ''
+        this.foldlineStyle = ''
+      }
     },
     closeModal () {
       this.pkId = ''
@@ -299,13 +311,13 @@ export default {
 .status_name
     _font(16px, 1, #fff)
 .green
-  background-color $green2
+  background-color $green2 !important
 .yellow
-  background-color $yellow
+  background-color $yellow !important
 .gray
-  background-color $gray1
+  background-color $gray1 !important
 .red
-  background-color $orange
+  background-color $orange !important
 .box1
   position relative
   _wh(100%, 100%)
@@ -329,13 +341,20 @@ export default {
   top 39%
   left 1%
   .mtp
+    position relative
     width 100%
-    .hightlight
+    // img
-      width 100%
+    //   _wh(100%, auto)
-      height 100%
+.img1
-      background #ff0
+  display inline-block
-    img
+  _wh(60px, 43px)
-      _wh(100%, auto)
+  background center center / 100% 100% url(../../../images/workshop/ktp_gray.png) no-repeat
+  color #f00
+.img2
+  display inline-block
+  _wh(60px, 43px)
+  background center center / 100% 100% url(../../../images/workshop/mtp.png) no-repeat
+  color #f00
 .gtssj_wrap_1
   width 2.5%
   top 39%
@@ -394,6 +413,7 @@ export default {
   transform rotate(-90deg)
   z-index 4
   .mtp
+    position relative
     width 100%
     margin-bottom 10%
     img
@@ -405,19 +425,30 @@ export default {
 .mtp_wrap_5
   // top 105%
   top 145%
+  z-index 0
 .popup_block_wraper
   position absolute
-  top: 706%;
+  // top: 706%;
-  left: -27%;
+  // left: -27%;
-  z-index 10
+  top: 650%;
+  left: -557%;
+  z-index 1
   transform rotate(90deg)
 .popup_block_wraper2
   position absolute
-  top: 445%;
+  top: -1080%;
-  left: -287%;
+  left: -557%;
   z-index 10
   transform rotate(90deg)
 .foldline_left2
   left 530px
   transform rotateY(0)
+.yao_left
+  margin-left 20px
+  margin-top -160px
+.yao_right
+  margin-right 300px
+  position absolute
+  top 72%
+  left 49.6%
 </style>

src/pages/modules/hunniankunliao/one.vue

@@ -495,8 +495,6 @@ export default {
 .foldline_left2
   left 530px
   transform rotateY(0)
-.top1
-  top 100%
 .hljname
   font-size: 12px;
   line-height: 14px;

src/pages/modules/hunniankunliao/two.vue

@@ -635,6 +635,4 @@ export default {
 .foldline_left2
   left 530px
   transform rotateY(0)
-.top1
-  top 100%
 </style>