* 中心点设置

src/components/map/GeoJson.js

@@ -0,0 +1,37 @@
+import {uuid} from "@/utils";
+
+export const Circle = ({radius, coordinates, symbol = []}) => {
+  const uuidstr = uuid();
+  const [
+    line = {
+      lineColor: "#FF0000",
+      lineWidth: 3,
+      polygonOpacity: 0.4,
+      polygonFill: "#DCE372"
+    },
+    text = {
+      // textName: "geom2",
+      // textFill: "#FF0000",
+      // textSize: 20
+    }
+  ] = symbol;
+  return {
+    name: uuidstr,
+    geojson: {
+      feature: {
+        type: "Feature",
+        geometry: {"type": "Polygon"},
+        id: uuidstr,
+        properties: {"name": "geom2"}
+      },
+      subType: "Circle",
+      coordinates: coordinates,
+      radius: radius,
+      options: {},
+      symbol: [
+        line,
+        text
+      ]
+    }
+  }
+}

src/utils/ComponentHandle.js

@@ -0,0 +1,57 @@
+import store from '@/store';
+import Vue from 'vue';
+
+/**
+ * 组件处理对象，用于创建和管理Vue组件。
+ */
+const ComponentHandle = {
+  /**
+   * 创建一个组件实例。
+   *
+   * @param {Object} options 组件配置对象。
+   * @param {string} options.wrapper 组件挂载的DOM元素ID，默认为'left-side-window-ins'。
+   * @param {Object} options.component 要创建的组件对象。
+   * @param {Object} options.props 组件的props配置。
+   * @param {Function} options.onclose 组件关闭时的回调函数，默认为空函数。
+   * @returns {Object} 返回创建的组件实例。
+   */
+  createComponent({
+                    wrapper = 'left-side-window-ins',
+                    component,
+                    props,
+                    onclose = () => {
+                      console.log('ComponentHandle onclose');
+                    },
+                  }) {
+    let comp;
+    // 自定义弹出窗口组件
+    //自定义弹框
+    let Content = Vue.extend({
+      // 自定义模板
+      //自定义模板继承
+      template: `
+        <base-info class='window-content' :propData='nameExtend'
+                   :close='close'></base-info>`,
+      name: 'child',
+      components: {
+        'base-info': component, // 引用传入的组件作为子组件
+      },
+      data() {
+        return {
+          nameExtend: props, // 传递props数据给子组件
+        };
+      },
+      methods: {
+        close(params) {
+          onclose && onclose(params); // 调用关闭回调函数
+        },
+      },
+    });
+    // 获取挂载容器并创建组件实例
+    // const div = document.getElementById(wrapper);
+    comp = new Content({store}).$mount();
+    // div.appendChild(comp.$el);
+    return comp;
+  },
+};
+export default ComponentHandle;

src/views/cons/screen/PileHoleDetail.vue

@@ -1,13 +1,10 @@
 <template>
-  <el-dialog
-      class="screen-dialog"
-      :title="$t('screen.pileHoleIndex')"
-      :visible.sync="open"
-      :modal="false"
-      append-to-body
-      :destroy-on-close="true"
-      :before-close="closeDialog"
-  >
+  <div class="screen-dialog">
+    <div class="dialog-header">
+      {{ $t('screen.pileHoleIndex') }}
+
+      <svg-icon icon-class="close"/>
+    </div>
     <div class="dialog-content">
       <el-descriptions :column="2">
         <el-descriptions-item :label="$t('screen.pileNumber')">
@@ -62,7 +59,7 @@
         </div>
       </div>
     </div>
-  </el-dialog>
+  </div>
 </template>
 
 <script>

src/views/cons/screen/index.scss

@@ -351,20 +351,24 @@
 
 
 .screen-dialog {
-  ::v-deep {
-    .el-dialog {
-      background: #02102C;
-      border: solid 2px rgba(49, 185, 253, 0.8);
-      box-sizing: border-box;
-      border-radius: 4px;
-      width: fit-content;
-    }
+  position: fixed;
+  z-index: 9999;
+  top: 10vh;
+  left: 20vw;
+  background: #02102C;
+  border: solid 2px rgba(49, 185, 253, 0.8);
+  box-sizing: border-box;
+  border-radius: 4px;
+  width: fit-content;
+  padding: 10px;
 
-    .el-dialog__header {
-      padding: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+  ::v-deep {
+    .dialog-header {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 13px;
+      letter-spacing: 1px;
+      color: #FFFFFF;
 
 
       .el-dialog__headerbtn {

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>
@@ -115,8 +115,10 @@ import maphandle from "@/components/map/maphandle";
 import MachineIndex from "@/views/cons/screen/MachineIndex.vue";
 import PileHoleDetail from "@/views/cons/screen/PileHoleDetail.vue";
 import {copyObj} from "@/utils";
+import {Circle} from "@/components/map/GeoJson";
 import pileMachine from "./img/pile-machine.svg"
 import {MachineStatus} from "@/utils/EnumConst";
+import ComponentHandle from "@/utils/ComponentHandle"
 
 export default {
   components: {
@@ -318,22 +320,108 @@ export default {
       listPileHoleRealtimeIndex({}).then(response => {
         this.pileHoleList = response.data
         this.pileHoleList.forEach((item, index) => {
-          let circle = new BDLayers.Lib.Overlays.Circle(`circle${index}`, {
-            center: [item.lng, item.lat], // 圆的中心点点坐标
+          const geom = new BDLayers.Lib.Overlays.FromGeoJson(Circle({
             radius: 0.4,
-            symbol: {
-              lineColor: '#34495e',
-              lineWidth: 1,
-              polygonFill: '#1bbc9b',
-              polygonOpacity: 0.2
-            },
-          });
-          circle.cust = item
-          circle.on('click', (e) => {
+            coordinates: [item.lng, item.lat],
+            symbol: [
+              {
+                lineColor: '#34495e',
+                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)
           })
-          this.pileHoleLayer.addGeometry(circle);
+          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) {

vue.config.js

@@ -14,6 +14,7 @@ const port = process.env.port || process.env.npm_config_port || 80 // 端口
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
 module.exports = {
+  runtimeCompiler: true,
   // 部署生产环境和开发环境下的URL。
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。