ISCS_Ui_Admin_Base/src/components/separationPoint/index.vue

<template>
  <div id="container" ref="container"></div>
</template>

<script>
import Konva from 'konva'
import {
  selectIsIsolationPointById,
  getIsIsolationPointPage
} from '@/api/mes/spm/segregationPoint'
import { mapGetters } from 'vuex'

export default {
  name: 'KonvaExample',
  props: {
    points: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      stage: null,
      layer: null,
      selectedStates: [], // 用于存储每个元素的选中状态
      selectedText: [], // 用于存储未选中的元素文本
      rects: [], //白色rect合集
      texts: [], //白色text合集
      redrects: [], //红色rect合集
      redtexts: [] //白色text合集
    }
  },
  watch: {
    'getMapData': {
      handler(newval) {
        if (newval) {
          this.$nextTick(()=>{
            this.initKonva()
          })

        }
      }
    }
  },
  mounted() {
    this.initKonva()
    console.log(this.points, 'points')
    console.log(this.getMapData, 'Mapdata')
    console.log(
      this.getSelectSopPoints,
      this.getSopEdit,
      this.getSopLook,
      'getSopEdit - getSelectSopPoints'
    )
  },
  computed: {
    ...mapGetters('sopSelectPoints', [
      'getSelectSopPoints',
      'getSopEdit',
      'getSopLook',
      'getMapData'
    ])
  },
  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 = JSON.parse(this.points.map);
      const positions = this.getMapData
      console.log(positions, 'positions')

      // 检查 this.getSelectSopPoints 是否有内容
      const isLocked = this.getSelectSopPoints.length > 0

      // 添加或移除全局点击事件监听器 this.getSopEdit这是vuex里判断是否可以选择隔离点的操作

      if (isLocked && this.getSopEdit == true) {
        this.layer.on('click', (e) => {
          e.cancelBubble = true // 阻止事件冒泡
          // e.stopPropagation(); // 阻止事件传播
        })
      } else {
        this.layer.off('click') // 移除全局点击事件监听器
      }

      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 = pos.pointIcon
        // point.src = imageSrc;
        point.onload = () => {
          const knovaImage = new Konva.Image({
            x: x,
            y: y,
            image: point,
            width: 50,
            height: 50,
            draggable: false
          })
          // 添加点击事件，仅当 getSopEdit 为 true 时才允许点击a
          if (this.getSopEdit == true && this.getSopLook == 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.$nextTick(() => {
                  if (
                    this.$route.query.sopId !== null ||
                    this.$route.query.ticketId !== null
                  ) {
                    this.selectedText.push({
                      pointName: pos.pointName,
                      pointId: pos.pointId,
                      pointType: pos.pointTypeName,
                      powerType: pos.powerTypeName
                    })
                    this.$emit('selection-changed', this.selectedText)
                    // selectIsIsolationPointById(pos.pointId).then((res) => {
                    //   this.selectedText.push({
                    //     pointName: res.data.pointName,
                    //     pointId: res.data.pointId,
                    //     pointType: res.data.pointType,
                    //     powerType: res.data.powerType,
                    //   });
                    //   console.log(this.selectedText, "$emit");
                    //   this.$emit("selection-changed", this.selectedText);
                    // });
                  }
                })
              } 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 = pos.pointIcon
                // normalImage.src = imageSrc; // 未选中的默认图片路径
                normalImage.onload = () => {
                  knovaImage.image(normalImage) // 更新图像
                  this.layer.draw() // 更新图层
                }

                // 从选中数组中移除该项
                this.selectedText = this.selectedText.filter(
                  (item) => item.pointName !== labelText
                )
              }

              // 确保图层重新渲染
              this.layer.draw()
              this.$emit('selection-changed', this.selectedText)
            })
          }

          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.getSelectSopPoints 是否包含当前点的 pointId
          if (pos.state) {
            // 设置为选中状态
            this.selectedStates[labelText] = true
            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({
              pointName: pos.pointName,
              pointId: pos.pointId,
              pointType: pos.pointTypeName,
              powerType: pos.powerTypeName
            })
          } else {
            // 设置为未选中状态
            this.selectedStates[labelText] = false
            this.rects[labelText].visible(true)
            this.texts[labelText].visible(true)
            this.redrects[labelText].visible(false)
            this.redtexts[labelText].visible(false)
          }

          // 触发父组件的 selection-changed 事件
          this.$emit('selection-changed', this.selectedText)

          // if (this.getSelectSopPoints.includes(pos.pointId.toString())) {
          //   // 设置为选中状态
          //   this.selectedStates[labelText] = true;
          //   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.$nextTick(() => {
          //     getIsIsolationPointPage({ current: 1, size: 100 })
          //       .then((res) => {
          //         const allPoints = res.data.records; // 假设返回的数据结构是 { records: [点数据] }
          //
          //         // 根据 pos.pointId 查找对应的 pointType 和 powerType
          //         const pointInfo = allPoints.find(
          //           (point) => point.pointId == pos.pointId
          //         );
          //
          //         if (pointInfo) {
          //           this.selectedText.push({
          //             pointName: labelText,
          //             pointId: pos.pointId,
          //             pointType: pointInfo.pointType,
          //             powerType: pointInfo.powerType,
          //           });
          //         } else {
          //           // 如果没有找到对应的点信息，可以处理这种情况
          //           console.warn(`未找到 pointId 为 ${pos.pointId} 的点信息`);
          //           this.selectedText.push({
          //             pointName: labelText,
          //             pointId: pos.pointId,
          //             pointType: "",
          //             powerType: "",
          //           });
          //         }
          //         // console.log(this.selectedText,'默认拿到的points')
          //         // 触发父组件的 selection-changed 事件
          //         this.$emit("selection-changed", this.selectedText);
          //       })
          //       .catch((error) => {
          //         console.error("获取隔离点信息失败", error);
          //       });
          //   });
          // }

          this.layer.draw()

        }
      })
    }

    //     methods结束
  }
}
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}
</style>