* 优化弹窗展示

src/utils/ComponentHandle.js

@@ -1,5 +1,6 @@
 import store from '@/store';
 import Vue from 'vue';
+import i18n from "@/i18n";
 
 /**
  * 组件处理对象，用于创建和管理Vue组件。
@@ -48,9 +49,9 @@ const ComponentHandle = {
       },
     });
     // 获取挂载容器并创建组件实例
-    // const div = document.getElementById(wrapper);
-    comp = new Content({store}).$mount();
-    // div.appendChild(comp.$el);
+    const div = document.getElementById(wrapper);
+    comp = new Content({store, i18n}).$mount();
+    div.appendChild(comp.$el);
     return comp;
   },
 };

src/views/cons/screen/PileHoleDetail.vue

@@ -2,8 +2,7 @@
   <div class="screen-dialog">
     <div class="dialog-header">
       {{ $t('screen.pileHoleIndex') }}
-
-      <svg-icon icon-class="close"/>
+      <i class="el-icon-close" @click="closeDialog" style="margin-left: auto;cursor: pointer"/>
     </div>
     <div class="dialog-content">
       <el-descriptions :column="2">
@@ -68,11 +67,22 @@ import {listPileHoleHisIndex, pileHoleRealtimeIndex} from "@/api/cons/pileHoleIn
 
 export default {
   components: {LineChartBlock},
-  props: {},
+  props: {
+    propData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    close: {
+      type: Function,
+      default: () => {
+      }
+    },
+  },
   dicts: ['pile_hole_status'],
   data() {
     return {
-      open: false,
       loaded: false,
       realtimeIndex: {},
       lineOpt: {
@@ -134,9 +144,11 @@ export default {
       }
     };
   },
+  created() {
+    this.showDialog(this.propData)
+  },
   methods: {
     showDialog(pileHolleInfo) {
-      this.open = true
       pileHoleRealtimeIndex(pileHolleInfo.id).then(response => {
         this.realtimeIndex = response.data
       })
@@ -183,10 +195,15 @@ export default {
     },
 
     closeDialog() {
-      this.open = false
       this.loaded = false
+      this.close()
     },
   },
 };
 </script>
 <style lang="scss" src="./index.scss" scoped/>
+<style lang="scss">
+.maptalks-close {
+  display: none;
+}
+</style>

src/views/cons/screen/index.scss

@@ -351,10 +351,6 @@
 
 
 .screen-dialog {
-  position: fixed;
-  z-index: 9999;
-  top: 10vh;
-  left: 20vw;
   background: #02102C;
   border: solid 2px rgba(49, 185, 253, 0.8);
   box-sizing: border-box;
@@ -366,10 +362,13 @@
     .dialog-header {
       font-family: PingFangSC-Medium;
       font-weight: 500;
+      height: 25px;
       font-size: 13px;
       letter-spacing: 1px;
       color: #FFFFFF;
-
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
 
       .el-dialog__headerbtn {
         position: unset;

src/views/cons/screen/index.vue

@@ -13,8 +13,8 @@
           </div>
           <div class="ctl-item">
             <cons-unit-tree
-                :placeholder="$t('common.select', {name: $t('cons.consUnit')})"
-                v-model="consUnit"
+              :placeholder="$t('common.select', {name: $t('cons.consUnit')})"
+              v-model="consUnit"
             />
           </div>
         </div>
@@ -74,18 +74,18 @@
       <MachineIndex v-if="selectMachine" :select-machine="selectMachine">
         <template v-slot:title-right="scop">
           <el-tooltip
-              class="item"
-              effect="dark"
-              content="click to machine"
-              placement="top"
+            class="item"
+            effect="dark"
+            content="click to machine"
+            placement="top"
           >
             <svg-icon icon-class="location" @click="()=>{locationMachine(scop.data)}"/>
           </el-tooltip>
           <el-tooltip
-              class="item"
-              effect="dark"
-              content="close"
-              placement="top"
+            class="item"
+            effect="dark"
+            content="close"
+            placement="top"
           >
             <i class="el-icon-close" @click="()=>{locationClose()}" style="margin-left: 5px"/>
           </el-tooltip>
@@ -98,7 +98,7 @@
         </div>
       </div>
     </div>
-    <PileHoleDetail ref="pileHoleDialog"/>
+    <!--    <PileHoleDetail ref="pileHoleDialog"/>-->
   </div>
 </template>
 
@@ -178,6 +178,7 @@ export default {
       pileHoleLayer: null,
       machineStatusCnt: {},
       onlineMachine: [],
+      hisClickGeom: null,
       machineOpt: {
         color: ['#006699', '#4cabce'],
         tooltip: {
@@ -329,99 +330,58 @@ export default {
                 lineWidth: 1,
                 polygonFill: '#1bbc9b',
                 polygonOpacity: 0.2
-              },
-              {
-                textName: item.holeNum,
-                textFill: "#FF0000",
-                textSize: 4
               }
             ]
           }).geojson);
 
           geom.cust = item
           geom.on('click', (e) => {
-            // const comp = ComponentHandle.createComponent({
-            //   wrapper: 'testHH',
-            //   component: ContentBlock,
-            //   props: {
-            //     title: '信息编辑huahuahu',
-            //   }
-            // });
-            // geom.setPopWindow({
-            //   title: '信息编辑',
-            //   content: comp.$el
-            // });
-            this.pileHoleClick(e.target.cust)
+            if (this.hisClickGeom) {
+              this.hisClickGeom.updateSymbol([
+                {
+                  lineColor: '#34495e',
+                  lineWidth: 1,
+                  polygonFill: '#1bbc9b',
+                  polygonOpacity: 0.2
+                }
+              ])
+            }
+            this.hisClickGeom = geom
+            geom.updateSymbol([
+              {
+                lineColor: 'green',
+                lineWidth: 1,
+                polygonFill: '#1bbc9b',
+                polygonOpacity: 0.2
+              }
+            ])
+            const pileHoleInfo = e.target.cust
+            geom.setPopWindow({
+              autoPan: true,
+              content: `<div id='pop-window' class="window-content"></div>`
+            });
+            ComponentHandle.createComponent({
+              wrapper: 'pop-window',
+              component: PileHoleDetail,
+              props: pileHoleInfo,
+              onclose: () => {
+                if (this.hisClickGeom) {
+                  this.hisClickGeom.updateSymbol([
+                    {
+                      lineColor: '#34495e',
+                      lineWidth: 1,
+                      polygonFill: '#1bbc9b',
+                      polygonOpacity: 0.2
+                    }
+                  ])
+                }
+                geom.closePopWindow();
+              }
+            });
+
           })
           this.pileHoleLayer.addGeometry(geom);
         })
-        // const geomCollection = [];
-        // Circle()
-        // const geomUpdateSymbol = [{
-        //   lineColor: '#FFFF00',
-        //   polygonFill: '#00FFFF'
-        // }];
-        // geomCollection.forEach((item, index) => {
-        //   let geoJson = item.geojson
-        //   const geom = new BDLayers.Lib.Overlays.FromGeoJson(geoJson);
-        //   geom.index = index;
-        //   const geomSymbol = geoJson.symbol;
-        //   item.isSelected = false;
-        //   item.symbol = geomSymbol;
-        //   // 多边形编辑的信息
-        //   item.attr = {
-        //     name: '',
-        //     desc: ''
-        //   };
-        //
-        //   geom.on('click', e => {
-        //     const curSelectedGeom = geomCollection.filter((item, i) => i !== index && item.isSelected)[0];
-        //     if (curSelectedGeom) {
-        //       curSelectedGeom.isSelected = false;
-        //       curSelectedGeom.geom.updateSymbol(curSelectedGeom.symbol);
-        //     }
-        //
-        //     // geom根据选中状态切换样式
-        //     geomCollection[index].isSelected = !geomCollection[index].isSelected;
-        //     const isSelected = geomCollection[index].isSelected;
-        //     geom.updateSymbol(isSelected ? geomUpdateSymbol : geomSymbol);
-        //
-        //     if (isSelected) {
-        //       const comp = ComponentHandle.createComponent({
-        //         wrapper: 'testHH',
-        //         component: ContentBlock,
-        //         props: {
-        //           title: '信息编辑huahuahu',
-        //         }
-        //       });
-        //       geom.setPopWindow({
-        //         title: '信息编辑',
-        //         content: comp.$el
-        //       });
-        //       // 点击确认按钮 保存信息
-        //       document.querySelector('.btn-save').addEventListener('click', () => {
-        //         geomCollection[index].attr.name = document.querySelector('.input-name').value;
-        //         geomCollection[index].attr.desc = document.querySelector('.textarea-desc').value;
-        //
-        //         geom.trigger('click');
-        //       });
-        //
-        //       // 点击取消按钮 关闭气泡弹窗
-        //       document.querySelector('.btn-quit').addEventListener('click', () => {
-        //         geom.closePopWindow();
-        //       });
-        //       // 点击气泡弹窗关闭按钮 geom取消选中状态
-        //       geom.on('closePopWindow', () => {
-        //         geomCollection[index].isSelected = false;
-        //         geom.updateSymbol(geomSymbol);
-        //       });
-        //     } else {
-        //       geom.closePopWindow();
-        //     }
-        //   })
-        //   this.pileHoleLayer.addGeometry(geom);
-        //   geomCollection[index].geom = geom;
-        // });
       })
     },
     loaded(map) {
@@ -450,9 +410,6 @@ export default {
     locationClose() {
       this.selectMachine = null
     },
-    pileHoleClick(pileHole) {
-      this.$refs.pileHoleDialog.showDialog(pileHole)
-    },
   },
 };
 </script>