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.getSelectSopPoints,
    //   this.getSopEdit,
    //   this.getSopLook,
    //   this.getMapData,
    //   '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 = [];

      let positions;

      // 判断getMapData是否已为数组
      if (Array.isArray(this.getMapData)) {
        // 如果是数组，则直接使用
        positions = this.getMapData;
      } else {
        // 如果不是数组，则尝试将其从JSON字符串转换为数组或其他对象
        try {
          positions = JSON.parse(this.getMapData);
        } catch (e) {
          console.error("Error parsing getMapData:", e);
          // 可以在这里处理错误情况，例如将positions设置为空数组等
          positions = [];
        }
      }

      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; // 阻止事件冒泡
        });
      } 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.onload = () => {
          const knovaImage = new Konva.Image({
            x: x,
            y: y,
            image: point,
            width: 50,
            height: 50,
            draggable: false
          });

          // 添加点击事件，仅当 getSopEdit 为 true 时才允许点击
          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
                  ) {
                    const newItem = {
                      pointName: pos.pointName,
                      pointId: pos.pointId,
                      pointType: pos.pointTypeName,
                      powerType: pos.powerTypeName,
                      prePointId: pos.prePointId,
                    };

                    // 去重处理
                    if (!this.selectedText.some(item => item.pointId === newItem.pointId)) {
                      this.selectedText.push(newItem);
                    }

                    console.log(this.selectedText, 'selectedText');
                    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 = 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) {
            console.log('选中的隔离点渲染',pos)
            // 设置为选中状态
            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 推入数组
            const newItem = {
              pointName: pos.pointName,
              pointId: pos.pointId,
              pointType: pos.pointTypeName,
              powerType: pos.powerTypeName,
              prePointId: pos.prePointId,
            };

            // 去重处理
            if (!this.selectedText.some(item => item.pointId === newItem.pointId)) {
              this.selectedText.push(newItem);
            }
          } 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);
          this.layer.draw();
        }
      });
    },



    //     methods结束
  }
}
</script>

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