困料弹框

src/pages/modules/hunniankunliao/two.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="n_container">
+    <div  @click.stop="closeModal" class="n_container">
         <div class="n_header">
             <div class="n_header_h1">
                 <h1>据控制中心</h1>
@@ -23,47 +23,227 @@
                       </div>
                   </div>
                   <div class="box_l1">
-                    <div  v-for="(e,i) in TrappedShelf40List.slice(0, 20)" :key="i" class="picbox" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}">
+                    <div  v-for="(e,i) in TrappedShelf40List.slice(0, 20)" :key="i" class="picbox" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}" @click.stop="getInfo1(e, i)">
-                    <!-- <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]" :key="i" class="picbox" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}"> -->
-                      <!-- <img src="../../../images/workshop/lz.png" alt=""> -->
-                      <!-- <img :class="e.point_status === '0' ? 'hidden': ''" src="../../../images/workshop/lz.png" alt=""> -->
                       <img v-show="String(e.stand_status) === ''" src="../../../images/workshop/hj.png" alt="">
                       <img v-show="String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_green.png" alt="">
                       <img v-show="String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                       <img v-show="String(e.stand_status) === '3' || String(e.stand_status) === '4'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
+                      <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"></div>
+                        <div class="popup_bg">
+                          <div class="popup_block">
+                            <div class="pop_header">
+                              <div class="pop_name">{{pkObj.point_code}}</div>
+                              <div class="pop_status">
+                                <!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
+                                <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
+                                <div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
+                              </div>
+                            </div>
+                            <div class="pop_content">
+                              <div class="pop_item">
+                                <div class="pop_label">状态</div>
+                                <div class="pop_val">{{pkObj.point_status_name}}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">载具</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">BOM号</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">碾次</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">重量(kg)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
+                                <div class="pop_unit">kg</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">入库时间</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">静置(h)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
+                                <div class="pop_unit">h</div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
+                      </div>
                     </div>
                   </div>
                   <div class="box_l2">
-                    <div  v-for="(e,i) in TrappedShelf40List.slice(20, 40)" :key="i" class="picbox" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}">
+                    <div  v-for="(e,i) in TrappedShelf40List.slice(20, 40)" :key="i" class="picbox" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}" @click.stop="getInfo1(e, i)">
-                    <!-- <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]" :key="i" class="picbox" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}"> -->
-                      <!-- <img src="../../../images/workshop/lz.png" alt=""> -->
-                      <!-- <img :class="e.point_status === '0' ? 'hidden': ''" src="../../../images/workshop/lz.png" alt=""> -->
                       <img v-show="String(e.stand_status) === ''" src="../../../images/workshop/hj.png" alt="">
                       <img v-show="String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_green.png" alt="">
                       <img v-show="String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                       <img v-show="String(e.stand_status) === '3' || String(e.stand_status) === '4'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
+                      <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"></div>
+                        <div class="popup_bg">
+                          <div class="popup_block">
+                            <div class="pop_header">
+                              <div class="pop_name">{{pkObj.point_code}}</div>
+                              <div class="pop_status">
+                                <!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
+                                <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
+                                <div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
+                              </div>
+                            </div>
+                            <div class="pop_content">
+                              <div class="pop_item">
+                                <div class="pop_label">状态</div>
+                                <div class="pop_val">{{pkObj.point_status_name}}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">载具</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">BOM号</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">碾次</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">重量(kg)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
+                                <div class="pop_unit">kg</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">入库时间</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">静置(h)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
+                                <div class="pop_unit">h</div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
+                      </div>
                     </div>
                   </div>
                   <div class="box_r1">
-                    <div  v-for="(e,i) in TrappedShelf6List.slice(0, 3)" :key="i" class="picbox">
+                    <div  v-for="(e,i) in TrappedShelf6List.slice(0, 3)" :key="i" class="picbox" @click.stop="getInfo2(e, i)">
-                    <!-- <div  v-for="(e,i) in [1,2,3]" :key="i" class="picbox"> -->
-                      <!-- <img src="../../../images/workshop/lz.png" alt=""> -->
-                      <!-- <img :class="e.point_status === '0' ? 'hidden': ''" src="../../../images/workshop/lz.png" alt=""> -->
                       <img v-show="String(e.stand_status) === ''" src="../../../images/workshop/hj.png" alt="">
                       <img v-show="String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_green.png" alt="">
                       <img v-show="String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                       <img v-show="String(e.stand_status) === '3' || String(e.stand_status) === '4'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
+                      <div v-if="pkId === e.point_code" class="popup_block_wraper popup_block_wraper2" :style="{'top': top, 'left': left}">
+                        <div class="foldline foldline_left2"></div>
+                        <div class="popup_bg">
+                          <div class="popup_block">
+                            <div class="pop_header">
+                              <div class="pop_name">{{pkObj.point_code}}</div>
+                              <div class="pop_status">
+                                <!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
+                                <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
+                                <div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
+                              </div>
+                            </div>
+                            <div class="pop_content">
+                              <div class="pop_item">
+                                <div class="pop_label">状态</div>
+                                <div class="pop_val">{{pkObj.point_status_name}}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">载具</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">BOM号</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">碾次</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">重量(kg)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
+                                <div class="pop_unit">kg</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">入库时间</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">静置(h)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
+                                <div class="pop_unit">h</div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
+                      </div>
                     </div>
                   </div>
                   <div class="box_r2">
-                    <div  v-for="(e,i) in TrappedShelf6List.slice(3, 6)" :key="i" class="picbox">
+                    <div  v-for="(e,i) in TrappedShelf6List.slice(3, 6)" :key="i" class="picbox" @click.stop="getInfo2(e, i)">
-                    <!-- <div  v-for="(e,i) in [1,2,3]" :key="i" class="picbox"> -->
-                      <!-- <img src="../../../images/workshop/lz.png" alt=""> -->
-                      <!-- <img :class="e.point_status === '0' ? 'hidden': ''" src="../../../images/workshop/lz.png" alt=""> -->
                       <img v-show="String(e.stand_status) === ''" src="../../../images/workshop/hj.png" alt="">
                       <img v-show="String(e.stand_status) === '2'" src="../../../images/workshop/lz_hj_green.png" alt="">
                       <img v-show="String(e.stand_status) === '5'" src="../../../images/workshop/lz_hj_red.png" alt="">
                       <img v-show="String(e.stand_status) === '3' || String(e.stand_status) === '4'" src="../../../images/workshop/lz_hj_yellow.png" alt="">
+                      <div v-if="pkId === e.point_code" class="popup_block_wraper popup_block_wraper2" :style="{'top': top, 'left': left}">
+                        <div class="foldline foldline_left2"></div>
+                        <div class="popup_bg">
+                          <div class="popup_block">
+                            <div class="pop_header">
+                              <div class="pop_name">{{pkObj.point_code}}</div>
+                              <div class="pop_status">
+                                <!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
+                                <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
+                                <div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
+                              </div>
+                            </div>
+                            <div class="pop_content">
+                              <div class="pop_item">
+                                <div class="pop_label">状态</div>
+                                <div class="pop_val">{{pkObj.point_status_name}}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">载具</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">BOM号</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">碾次</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">重量(kg)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
+                                <div class="pop_unit">kg</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">入库时间</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
+                              </div>
+                              <div class="pop_item">
+                                <div class="pop_label">静置(h)</div>
+                                <div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
+                                <div class="pop_unit">h</div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -150,6 +330,15 @@ export default {
   name: 'one',
   data () {
     return {
+      top: '',
+      left: '',
+      youModel: '',
+      foldlineStyle: '',
+      pkId: '',
+      pkObj: {
+        aaa: 'aaa',
+        num: '3'
+      },
       resData: {},
       TrappedShelf40List: [],
       TrappedShelf6List: [],
@@ -189,6 +378,25 @@ export default {
     this.initData()
   },
   methods: {
+    getInfo1 (e, i) {
+      this.pkId = e.point_code
+      this.pkObj = e
+      if (i === 0 || i === 1 || i === 2 || i === 3 || i === 4 || i === 5 || i === 6 || i === 20 || i === 21 || i === 22 || i === 23 || i === 24 || i === 25 || i === 26) {
+        this.youModel = 'popup_block_wraper2'
+        this.foldlineStyle = 'foldline_left2'
+      } else {
+        this.youModel = ''
+        this.foldlineStyle = ''
+      }
+    },
+    getInfo2 (e, i) {
+      this.pkId = e.point_code
+      this.pkObj = e
+    },
+    closeModal () {
+      this.pkId = ''
+      this.pkObj = {}
+    },
     async initData () {
       let res = await trappedMaterialCondition()
       this.resData = res.result
@@ -269,6 +477,7 @@ export default {
   z-index 2
   transform rotate(90deg)
   .picbox
+    position relative
     width 100%
     margin-bottom 1%
     img
@@ -281,6 +490,7 @@ export default {
   z-index 2
   transform rotate(90deg)
   .picbox
+    position relative
     width 100%
     margin-bottom 1%
     img
@@ -293,6 +503,7 @@ export default {
   z-index 2
   transform rotate(90deg)
   .picbox
+    position relative
     width 100%
     margin-bottom 20%
     img
@@ -305,6 +516,7 @@ export default {
   z-index 2
   transform rotate(90deg)
   .picbox
+    position relative
     width 100%
     margin-bottom 20%
     img
@@ -373,4 +585,21 @@ export default {
       // white-space nowrap
       padding 0 5px
       overflow hidden
+.popup_block_wraper
+  position absolute
+  top: -706%;
+  left: -287%;
+  z-index 10
+  transform rotate(-90deg)
+.popup_block_wraper2
+  position absolute
+  top: 506%;
+  left: -287%;
+  z-index 10
+  transform rotate(-90deg)
+.foldline_left2
+  left 530px
+  transform rotateY(0)
+.top1
+  top 100%
 </style>