工作区域地图预览

src/views/mes/wa/workarea/MapData.vue

@@ -0,0 +1,262 @@
+<template>
+  <div id="container" ref="container"></div>
+</template>
+<script>
+import Konva from "konva";
+export default {
+  name: "MapData",
+  props: {
+    points: {
+      type: [Array, String], // Allow both types to avoid warnings
+      required: true,
+    },
+  },
+  data() {
+    return {
+      stage: null,
+      layer: null,
+      selectedStates: [], // 用于存储每个元素的选中状态
+      // selectedText: [], // 用于存储未选中的元素文本
+      // rects: [], //白色rect合集
+      // texts: [], //白色text合集
+      // redrects: [], //红色rect合集
+      // redtexts: [], //白色text合集
+    };
+  },
+  watch: {
+    points: {
+      immediate: true,
+      handler(newPoints) {
+        if (this.layer) {
+          this.renderGrid(newPoints); // Re-render grid when points data changes
+        }
+      },
+    },
+  },
+  computed: {
+    parsedPoints() {
+      // Check if points is a string and parse it
+      return typeof this.points === "string"
+        ? JSON.parse(this.points)
+        : this.points;
+    },
+  },
+  mounted() {
+    this.initKonva();
+  },
+  methods: {
+    initKonva() {
+      // 创建舞台
+      this.stage = new Konva.Stage({
+        container: this.$refs.container, // 容器元素
+        width: 1270,
+        height: 830,
+      });
+      // 创建图层
+      this.layer = new Konva.Layer();
+      // 创建底图
+      const bgImage = new Image();
+      bgImage.src = require("@/assets/images/table.png");
+      bgImage.onload = () => {
+        const knovaImage = new Konva.Image({
+          x: 330,
+          y: 10,
+          image: bgImage,
+          width: 500,
+          height: 790,
+          draggable: false,
+        });
+        this.layer.add(knovaImage);
+        this.layer.draw();
+      };
+      // 绘制无限网格
+      this.drawGrid(50, 50, "#e0e0e0"); // 每个单元格50x50，浅灰色网格
+      // 渲染数据
+      const imageSrc = require("@/assets/images/localSetIcon.jpg"); // 图片路径
+      this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25);
+      // 将图层添加到舞台
+      this.stage.add(this.layer);
+      this.layer.draw();
+      // 禁止舞台拖拽
+      this.stage.draggable(false);
+    },
+    // 绘制无限网格
+    drawGrid(cellWidth, cellHeight, gridColor) {
+      const width = 1270;
+      const height = 830;
+      // 绘制竖线
+      for (let i = 0; i <= width; i += cellWidth) {
+        const verticalLine = new Konva.Line({
+          points: [i, 0, i, height],
+          stroke: gridColor,
+          strokeWidth: 1,
+        });
+        this.layer.add(verticalLine);
+      }
+      // 绘制横线
+      for (let j = 0; j <= height; j += cellHeight) {
+        const horizontalLine = new Konva.Line({
+          points: [0, j, width, j],
+          stroke: gridColor,
+          strokeWidth: 1,
+        });
+        this.layer.add(horizontalLine);
+      }
+      this.layer.draw();
+    },
+    renderGrid(imageSrc) {
+      this.selectedStates = {}; // 用对象来存储选中状态，键为文字内容
+      this.rects = {};
+      this.texts = {};
+      this.redrects = {};
+      this.redtexts = {};
+      this.selectedText = [];
+      // const positions = [
+      //   { row: 2, col: 9 }, // E-1
+      //   { row: 2, col: 11 }, // E-2
+      //   { row: 2, col: 13 }, // E-3
+      //   { row: 4, col: 9 }, // E-4
+      //   { row: 4, col: 11 }, // E-5
+      //   { row: 4, col: 13 }, // E-6
+      //   { row: 6, col: 9 }, // E-7
+      //   { row: 6, col: 11 }, // E-8
+      //   { row: 6, col: 13 }, // E-9
+      //   { row: 8, col: 9 }, // E-10
+      //   { row: 8, col: 11 }, // E-11
+      //   { row: 8, col: 13 }, // E-12
+      //   { row: 10, col: 9 }, // E-13
+      //   { row: 10, col: 11 }, // E-14
+      //   { row: 10, col: 13 }, // E-15
+      //   { row: 12, col: 9 }, // E-16
+      //   { row: 12, col: 11 }, // E-17
+      //   { row: 12, col: 13 }, // E-18
+      // ];
+      this.parsedPoints.forEach((pos, index) => {
+        const x = pos.col * 50; // 每个单元格宽度为50
+        const y = pos.row * 50; // 每个单元格高度为50
+        const labelText = `E-${index + 1}`; // 对应的文字
+        const point = new Image();
+        point.src = imageSrc;
+        point.onload = () => {
+          const knovaImage = new Konva.Image({
+            x: x,
+            y: y,
+            image: point,
+            width: 50,
+            height: 50,
+            draggable: false,
+          });
+          knovaImage.on("click", () => {
+            // 切换选中状态，基于文本内容
+            this.selectedStates[labelText] = !this.selectedStates[labelText];
+            // 判断当前是否选中
+            if (this.selectedStates[labelText]) {
+              // 选中状态
+              // 显示红色矩形和文字，隐藏普通矩形和文字
+              this.rects[labelText].visible(false);
+              this.texts[labelText].visible(false);
+              this.redrects[labelText].visible(true);
+              this.redtexts[labelText].visible(true);
+              // 切换图片为选中状态的图片
+              const selectedImage = new Image();
+              selectedImage.src = require("@/assets/images/localSetSelect.jpg"); // 选中的图片路径
+              selectedImage.onload = () => {
+                knovaImage.image(selectedImage); // 更新图像
+                this.layer.draw(); // 更新图层
+              };
+              // 将选中的 labelText 推入数组
+              this.selectedText.push({
+                label: labelText,
+                value: index + 1,
+              });
+            } else {
+              // 取消选中状态
+              // 显示普通矩形和文字，隐藏红色矩形和文字
+              this.rects[labelText].visible(true);
+              this.texts[labelText].visible(true);
+              this.redrects[labelText].visible(false);
+              this.redtexts[labelText].visible(false);
+              // 切换图片为未选中状态的图片
+              const normalImage = new Image();
+              normalImage.src = imageSrc; // 未选中的默认图片路径
+              normalImage.onload = () => {
+                knovaImage.image(normalImage); // 更新图像
+                this.layer.draw(); // 更新图层
+              };
+              // 从选中数组中移除该项
+              this.selectedText = this.selectedText.filter(
+                (item) => item.label !== labelText
+              );
+            }
+
+            // 最后确保图层重新渲染
+            this.layer.draw();
+            // 传递选中的元素文本到父组件
+            this.$emit("selection-changed", [...this.selectedStates]);
+          });
+          this.layer.add(knovaImage);
+          // 普通矩形
+          const rect = new Konva.Rect({
+            x: x - 3,
+            y: y + 55,
+            width: 60,
+            height: 25,
+            cornerRadius: 10,
+            stroke: "red",
+            strokeWidth: 2,
+            fill: "white",
+          });
+          this.layer.add(rect);
+          this.rects[labelText] = rect; // 用文字作为键存储
+          // 普通文字
+          const text = new Konva.Text({
+            x: x + 12,
+            y: y + 60,
+            fontSize: 20,
+            text: labelText,
+            fontFamily: "Calibri",
+            fill: "red",
+          });
+          this.layer.add(text);
+          this.texts[labelText] = text; // 用文字作为键存储
+          // 红色矩形（初始隐藏）
+          const redrect = new Konva.Rect({
+            x: x - 3,
+            y: y + 55,
+            width: 60,
+            height: 25,
+            cornerRadius: 10,
+            stroke: "red",
+            strokeWidth: 2,
+            fill: "red",
+            visible: false,
+          });
+          this.layer.add(redrect);
+          this.redrects[labelText] = redrect; // 用文字作为键存储
+          // 红色文字（初始隐藏）
+          const redtext = new Konva.Text({
+            x: x + 12,
+            y: y + 60,
+            fontSize: 20,
+            text: labelText,
+            fontFamily: "Calibri",
+            fill: "white",
+            visible: false,
+          });
+          this.layer.add(redtext);
+          this.redtexts[labelText] = redtext; // 用文字作为键存储
+          this.layer.draw();
+        };
+      });
+    },
+    //     methods结束
+  },
+};
+</script>
+<style scoped lang="scss">
+#container {
+  width: 100%;
+  height: 100%;
+  // background: #000;
+}
+</style>

src/views/mes/wa/workarea/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
       <el-form-item label="工作区域编码" prop="workareaCode">
         <el-input
           v-model="queryParams.workareaCode"
@@ -26,8 +33,16 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -40,20 +55,20 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['mes:wa:waa:add']"
-        >新增
+          >新增
         </el-button>
       </el-col>
-<!--            <el-col :span="1.5">-->
-<!--              <el-button-->
-<!--                type="success"-->
-<!--                plain-->
-<!--                icon="el-icon-edit"-->
-<!--                size="mini"-->
-<!--                :disabled="single"-->
-<!--                @click="handleUpdate"-->
-<!--                v-hasPermi="['mes:cal:team:edit']"-->
-<!--              >修改</el-button>-->
-<!--            </el-col>-->
+      <!--            <el-col :span="1.5">-->
+      <!--              <el-button-->
+      <!--                type="success"-->
+      <!--                plain-->
+      <!--                icon="el-icon-edit"-->
+      <!--                size="mini"-->
+      <!--                :disabled="single"-->
+      <!--                @click="handleUpdate"-->
+      <!--                v-hasPermi="['mes:cal:team:edit']"-->
+      <!--              >修改</el-button>-->
+      <!--            </el-col>-->
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -63,7 +78,7 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['mes:wa:waa:batchremove']"
-        >批量删除
+          >批量删除
         </el-button>
       </el-col>
       <!--      <el-col :span="1.5">-->
@@ -76,18 +91,25 @@
       <!--          v-hasPermi="['mes:cal:team:export']"-->
       <!--        >导出</el-button>-->
       <!--      </el-col>-->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="workareaList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
+    <el-table
+      v-loading="loading"
+      :data="workareaList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="工作区域Id" align="center" prop="workareaId">
         <template slot-scope="scope">
           <el-button
             type="text"
             @click="handleView(scope.row)"
             v-hasPermi="['mes:wa:waa:query']"
-          >{{ scope.row.workareaId }}
+            >{{ scope.row.workareaId }}
           </el-button>
         </template>
       </el-table-column>
@@ -97,28 +119,45 @@
             type="text"
             @click="handleView(scope.row)"
             v-hasPermi="['mes:wa:waa:query']"
-          >{{ scope.row.workareaCode }}
+            >{{ scope.row.workareaCode }}
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="工作区域名称" align="center" prop="workareaName"/>
-      <el-table-column label="工作区域类型" align="center" prop="workareaType"/>
-      <el-table-column label="所属车间" align="center" prop="workshopName"/>
+      <el-table-column
+        label="工作区域名称"
+        align="center"
+        prop="workareaName"
+      />
+      <el-table-column
+        label="工作区域类型"
+        align="center"
+        prop="workareaType"
+      />
+      <el-table-column label="所属车间" align="center" prop="workshopName" />
 
-<!--      <el-table-column label="状态" align="center" prop="calendarType">-->
-<!--        <template slot-scope="scope">-->
-<!--          <dict-tag :options="dict.type.mes_calendar_type" :value="scope.row.calendarType"/>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
+      <!--      <el-table-column label="状态" align="center" prop="calendarType">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <dict-tag :options="dict.type.mes_calendar_type" :value="scope.row.calendarType"/>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
       <el-table-column label="地图" align="center" prop="map">
+        <!-- <template slot-scope="scope">
+          {{ scope.row.map }}
+        </template> -->
         <template slot-scope="scope">
-          {{scope.row.map}}
+          <el-button size="mini" type="text" @click="look(scope.row)"
+            >预览
+          </el-button>
         </template>
       </el-table-column>
-<!--      <el-table-column label="备注" align="center" prop="remark">-->
-<!--      </el-table-column>-->
+      <!--      <el-table-column label="备注" align="center" prop="remark">-->
+      <!--      </el-table-column>-->
 
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -126,7 +165,7 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['mes:wa:waa:edit']"
-          >编辑
+            >编辑
           </el-button>
           <el-button
             size="mini"
@@ -134,14 +173,14 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['mes:wa:waa:remove']"
-          >删除
+            >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.current"
       :limit.sync="queryParams.size"
@@ -149,24 +188,39 @@
     />
 
     <!-- 添加或修改班组对话框 -->
-    <el-dialog  :visible.sync="open" width="660px" append-to-body>
+    <el-dialog :visible.sync="open" width="660px" append-to-body>
       <div slot="title" class="dialog-title">
         <i></i>
         <span class="title">{{ title }}</span>
       </div>
       <el-form ref="form" :model="form" :rules="rules" label-width="110px">
-
         <el-form-item label="区域名称" prop="workareaName">
-          <el-input style="width: 318px" v-model="form.workareaName" placeholder="请输入区域名称"       />
+          <el-input
+            style="width: 318px"
+            v-model="form.workareaName"
+            placeholder="请输入区域名称"
+          />
         </el-form-item>
-        <el-form-item label="区域编码" prop="workareaCode" >
-          <el-input style="width: 318px"  v-model="form.workareaCode" placeholder="请输入区域编码" />
+        <el-form-item label="区域编码" prop="workareaCode">
+          <el-input
+            style="width: 318px"
+            v-model="form.workareaCode"
+            placeholder="请输入区域编码"
+          />
         </el-form-item>
         <el-form-item label="区域类型" prop="workareaType">
-          <el-input style="width: 318px"  v-model="form.workareaType" placeholder="请输入区域类型" />
+          <el-input
+            style="width: 318px"
+            v-model="form.workareaType"
+            placeholder="请输入区域类型"
+          />
         </el-form-item>
         <el-form-item label="所属车间" prop="workshopId">
-          <el-select style="width: 318px" v-model="form.workshopId" placeholder="请选择所属车间">
+          <el-select
+            style="width: 318px"
+            v-model="form.workshopId"
+            placeholder="请选择所属车间"
+          >
             <el-option
               v-for="dict in this.WorkShopListOptions"
               :key="dict.key"
@@ -176,20 +230,55 @@
           </el-select>
         </el-form-item>
         <el-form-item label="地图" prop="map">
-          <el-input style="width: 318px"   v-model="form.map" placeholder="请输入地图" />
-<!--          <ImageUpload :limit="1" :value="form.map" :fileSize="5" @onUploaded="handleImgUplaoded" @onRemoved="handleImgRemoved" ></ImageUpload>-->
+          <el-input
+            style="width: 318px"
+            v-model="form.map"
+            placeholder="请输入地图"
+          />
+          <!--          <ImageUpload :limit="1" :value="form.map" :fileSize="5" @onUploaded="handleImgUplaoded" @onRemoved="handleImgRemoved" ></ImageUpload>-->
         </el-form-item>
-<!--        <el-form-item label="备注" prop="remark">-->
-<!--          <el-input style="width: 318px" type="textarea"  v-model="form.remark" placeholder="请输入备注" />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="备注" prop="remark">-->
+        <!--          <el-input style="width: 318px" type="textarea"  v-model="form.remark" placeholder="请输入备注" />-->
+        <!--        </el-form-item>-->
       </el-form>
 
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
+        <el-button type="primary" @click="cancel" v-if="optType == 'view'"
+          >返回</el-button
+        >
         <el-button type="primary" @click="submitForm" v-else>确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 地图预览 -->
+    <el-dialog
+      title="地图预览"
+      :visible.sync="dialogVisibleMap"
+      width="96%"
+      :before-close="handleClose"
+    >
+      <div class="content" style="display: flex">
+        <!-- 将 mapData 作为 prop 传递给 MapData 组件 -->
+        <MapData
+          :points="mapData"
+          @selection-changed="updateMapData"
+          style="width: 70%; height: 60%"
+        />
+        <div
+          style="width: 26%; padding: 0 2%; line-height: 30px; font-size: 20px"
+        >
+          {{ this.mapData }}
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleMap = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisibleMap = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -201,15 +290,18 @@ import {
   updateWorkarea,
   delWorkarea,
   listAllWorkshop,
-
-} from '@/api/mes/wa/workarea'
-
-import { genCode } from '@/api/system/autocode/rule'
-
+} from "@/api/mes/wa/workarea";
+import MapData from "./MapData.vue";
+import { genCode } from "@/api/system/autocode/rule";
+import { mapState } from "vuex";
+import MapDataVue from "./MapData.vue";
 
 export default {
-  name: 'Workarea',
-  dicts: ['mes_calendar_type'],
+  name: "Workarea",
+  dicts: ["mes_calendar_type"],
+  components: {
+    MapData,
+  },
   data() {
     return {
       //自动生成编码
@@ -225,12 +317,15 @@ export default {
       multiple: true,
       // 显示搜索条件
       showSearch: true,
+      // 地图预览弹框
+      dialogVisibleMap: false,
+      mapData: [], // 用于存储点击行的地图数据
       // 总条数
       total: 0,
       // 班组表格数据
       workareaList: [],
       // 弹出层标题
-      title: '',
+      title: "",
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -239,57 +334,56 @@ export default {
         size: 10,
         workareaCode: null,
         workareaName: null,
-        workareaType: null
+        workareaType: null,
       },
       // 表单参数
       form: {},
-      WorkShopListOptions:null,//所属车间下拉数据
-      EditId:null,//判断是否是编辑弹框的值
+      WorkShopListOptions: null, //所属车间下拉数据
+      EditId: null, //判断是否是编辑弹框的值
       // 表单校验
       rules: {
         teamCode: [
-          { required: true, message: '班组编号不能为空', trigger: 'blur' }
+          { required: true, message: "班组编号不能为空", trigger: "blur" },
         ],
         teamName: [
-          { required: true, message: '班组名称不能为空', trigger: 'blur' }
+          { required: true, message: "班组名称不能为空", trigger: "blur" },
         ],
         calendarType: [
-          { required: true, message: '清选择班组类型', trigger: 'blur' }
-        ]
-      }
-    }
+          { required: true, message: "清选择班组类型", trigger: "blur" },
+        ],
+      },
+    };
   },
   created() {
-    this.getList()
-
+    this.getList();
   },
   methods: {
     /** 查询班组列表 */
     getList() {
-      this.loading = true
-      listWorkarea(this.queryParams).then(response => {
-        console.log(response,'获取工作取区域allList')
+      this.loading = true;
+      listWorkarea(this.queryParams).then((response) => {
+        console.log(response, "获取工作取区域allList");
         this.workareaList = response.data.records;
         this.total = response.data.total;
-        this.loading = false
-      })
+        this.loading = false;
+      });
       // 获取所有车间信息
-      listAllWorkshop().then(response => {
-        console.log(response,'车间信息')
+      listAllWorkshop().then((response) => {
+        console.log(response, "车间信息");
         this.WorkShopListOptions = response.data.map((item) => {
           return {
-            label:item.workshopName,
-            value:item.workshopId,
-            key:item.workshopCode,
-          }
-        })
-      })
+            label: item.workshopName,
+            value: item.workshopId,
+            key: item.workshopCode,
+          };
+        });
+      });
     },
 
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 表单重置
     reset() {
@@ -301,102 +395,119 @@ export default {
         workareaName: null,
         workareaType: null,
         workshopId: null,
-      }
+      };
 
-      this.resetForm('form')
+      this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.current = 1
-      this.getList()
+      this.queryParams.current = 1;
+      this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.queryParams={
+      this.queryParams = {
         current: 1,
         size: 10,
         workareaCode: null,
         workareaName: null,
         workareaType: null,
-      }
-      this.resetForm('queryForm')
-      this.handleQuery()
+      };
+      this.resetForm("queryForm");
+      this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.workareaId)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.workareaId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset()
-      this.open = true
-      this.title = '添加工作区域'
-      this.optType = 'add'
+      this.reset();
+      this.open = true;
+      this.title = "添加工作区域";
+      this.optType = "add";
 
-      this.EditId=null
+      this.EditId = null;
     },
     // 查询明细按钮操作
     handleView(row) {
-      this.reset()
-      this.EditId = row.workareaId || this.ids
-      getWorkareaInfo(this.EditId).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = '查看班组'
-        this.optType = 'view'
-      })
+      this.reset();
+      this.EditId = row.workareaId || this.ids;
+      getWorkareaInfo(this.EditId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "查看班组";
+        this.optType = "view";
+      });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset()
-      this.EditId = row.workareaId || this.ids
-      console.log(row,'row')
-      getWorkareaInfo(this.EditId).then(response => {
-        console.log(response,'获取单条工作区域数据')
-        this.form = response.data
-        this.open = true
+      this.reset();
+      this.EditId = row.workareaId || this.ids;
+      console.log(row, "row");
+      getWorkareaInfo(this.EditId).then((response) => {
+        console.log(response, "获取单条工作区域数据");
+        this.form = response.data;
+        this.open = true;
 
-        this.title = '修改工作区域信息'
-        this.optType = 'edit'
-      })
+        this.title = "修改工作区域信息";
+        this.optType = "edit";
+      });
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs['form'].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.EditId != null) {
-            updateWorkarea(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功')
-              this.open = false
-              this.getList()
-            })
+            updateWorkarea(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           } else {
-            addWorkarea(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功')
-              this.open = false
-              this.EditId=null
-              this.getList()
-            })
+            addWorkarea(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.EditId = null;
+              this.getList();
+            });
           }
         }
-      })
+      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const teamIds = row.workareaId || this.ids
-      this.$modal.confirm('是否确认删除工作区域编号为"' + teamIds + '"的数据项？').then(function() {
-        return delWorkarea(teamIds)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess('删除成功')
-      }).catch(() => {
-      })
+      const teamIds = row.workareaId || this.ids;
+      this.$modal
+        .confirm('是否确认删除工作区域编号为"' + teamIds + '"的数据项？')
+        .then(function () {
+          return delWorkarea(teamIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    // 地图预览
+    look(row) {
+      this.mapData = row.map; // 将行的地图数据赋值给 mapData
+      console.log(this.mapData, "数据复制成功");
+      this.dialogVisibleMap = true; // 显示地图预览弹框
+    },
+    updateMapData(selectedPoints) {
+      // Sync mapData with the selected points in MapData
+      this.mapData = selectedPoints;
     },
 
-  }
-}
+    // 地图弹框关闭按钮
+    handleClose() {
+      this.dialogVisibleMap = false;
+    },
+  },
+};
 </script>
 <style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
 .el-input-width {