项目显示优化点

显示1px问题

将盒子的宽高 - 0.5 即可

如何储存数据

• 元素信息事先写入firstChild

• JSON.parse() 与 XY坐标信息合并

• 拖动修改

 // 取出数据
let text = event.dragEvent.target.firstChild.innerText;  
// 转对象
let obj = JSON.parse(`{${text}}`);
//  存新的数据 坐标
saveData(obj, "positionX", x);
// 转字符串
let str = JSON.stringify(obj);
// jsx 不支持HTML大括号写法 所以处理掉大括号
str = str.replace(/[{}]/g, "");
// 将处理后的字符串 填入元素firstChild
event.dragEvent.target.firstChild.innerHTML = str;

只能存一维数据

jsx 不支持HTML大括号写法

不能刷新组件

元素格式标准

   {Array.from(Array(20)).map((e, i) => {
            return (
              <div
              id={`pillar${i}`}                                // 全局唯一的id
              class="drag-drop basic-info  ===== pillar =====  // 柱子的统一类名
              data-index={i}								   // 类中的索引
              style={{
                width: gridX,
                height: gridY,
              }}
            >
                <span className='display-none'>"name":"", "id":"", "type": "Pillar", "modelType": "", "position": ""</span>
              <i
                class="iconfont icon-zhuzi"
                style={{ fontSize: Math.min(gridY, gridX) + "px", lineHeight: gridY + "px" , color: '#9c9c9c'}}
              ></i>
              <span class='basic-text'>机房柱子</span>
            </div>
            )
          })}

根据CLASS类名 document。getelementByClassName 来取元素集合

存

判断lastChild 存入itemList { pillar: [index] }

取

document.getElementByClassName(" type ") [index]

两个去重

柱子 自有 非自有去重 是在 submit 的时候 将 canvasItem 里的数组去重即可

冷暖通道 去重 必须在ondrop时 将上一个group中的索引去掉 新加入的group去重 两步走

defaultGrid [网格白板]

grid 根据 defaultGrid 深克隆的对象

新增 根据已有的 grid => 新的对象地址 => 新的对象加入children => 把对象地址给grid赋值

删除 根据已有的grid => 新的对象地址 => 新的对象删除对应的 children => 把对象地址给grid赋值

页面跳转提示

import { Link, Prompt } from 'react-router-dom'

 <Prompt
    when={!isSaved}  // 一个状态when= true 是才触发下面方法
    message={beforEach}  // 可以是字符串 可以是函数体
/>
 
        =========
    const beforEach = (location) => {
    // location 携带的路径
    const pathUrl = location.pathname + location.search
    console.log(isSaved)
     // 自定义的mode 框窗口
     if (!isSaved) { 
      window.history.go(-1)
      setIsSaved(true)
      // saveCheck(pathUrl)
      Message.show({
        type: "warning",
        content: "页面尚未保存,再次点击离开",
        hasMask: false,
      });

     } 
  // 拦截重点
  return false
}