ISCS_Ui_Admin_Base/src/views/mes/md/workarea/MapData.vue

<template>
  <div class="mapdata">
    <div id="container" ref="container" style="width:1200px"></div>
    <div class="left">
      <el-input v-model="value" type="textarea" :rows="38" ></el-input>
      <el-button @click="refresh" type="primary" style="width: 80px;align-self: flex-end">刷新</el-button>

    </div>
  </div>

</template>

<script>
import Konva from "konva";
import { getWorkareaInfo,updateWorkarea } from '@/api/mes/wa/workarea'

export default {
  name: "KonvaExample",
  data() {
    return {
      stage: null,
      layer: null,
      selectedStates: [], // 用于存储每个元素的选中状态
      selectedText: [], // 用于存储未选中的元素文本
      rects: [], // 白色r        ect合集
      texts: [], // 白色text合集
      redrects: [], // 红色rect合集
      redtexts: [], // 白色text合集
      value:'',
      form:{},//拿到单个数据
    };
  },
  watch:{
    '$route.query.workareaId':{
      handler(newValue){
        if(newValue){
          this.getWorkAreaInfo()
          this.initKonva();
        }
      }
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.getWorkAreaInfo()
    })
    console.log(this.$route.query.workareaId,'workareaId');
  },

  methods: {
    getWorkAreaInfo(){
      const workareaId=this.$route.query.workareaId;
      getWorkareaInfo(workareaId).then(response => {
        console.log(response,'工作区域预览接口调用');
        this.form=response.data;
        if (response.data.map) {
          try {
            let map = JSON.parse(response.data.map)
            this.value = JSON.stringify(map, null, 4)
          } catch (err) {}
        }
        this.initKonva();
        // console.log(this.value,'Value')
      })
    },
    refresh(){
      this.initKonva();
      this.form.map=this.value
      updateWorkarea(this.form).then(response => {
        console.log(response,'修改车间区域地图 ');
      })
    },
    initKonva() {
      // 创建舞台
      this.stage = new Konva.Stage({
        container: this.$refs.container, // 容器元素
        width: 1200,
        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 = 1200;
      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=JSON.parse(this.value)
      // const positions = [
      //   { row: 2, col: 9, pointName: "E-1" },
      //   { row: 2, col: 11, pointName: "E-2" },
      //   { row: 2, col: 13, pointName: "E-3" },
      //   { row: 4, col: 9, pointName: "E-4" },
      //   { row: 4, col: 11, pointName: "E-5" },
      //   { row: 4, col: 13, pointName: "E-6" },
      //   { row: 6, col: 9, pointName: "E-7" },
      //   { row: 6, col: 11, pointName: "E-8" },
      //   { row: 6, col: 13, pointName: "E-9" },
      //   { row: 8, col: 9, pointName: "E-10" },
      //   { row: 8, col: 11, pointName: "E-11" },
      //   { row: 8, col: 13, pointName: "E-12" },
      //   { row: 10, col: 9, pointName: "E-13" },
      //   { row: 10, col: 11, pointName: "E-14" },
      //   { row: 10, col: 13, pointName: "E-15" },
      //   { row: 12, col: 9, pointName: "E-16" },
      //   { row: 12, col: 11, pointName: "E-17" },
      //   { row: 12, col: 13, pointName: "E-18" },
      // ];

      positions.forEach((pos, index) => {
        const x = pos.col * 50; // 每个单元格宽度为50
        const y = pos.row * 50; // 每个单元格高度为50
        const labelText = pos.pointName; // 对应的文字

        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,
          });

          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.push(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.push(text); // 用数组存储

          this.layer.draw();
        };
      });
    },
  },
};
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}
.mapdata{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>