利用vue-gird-layout 制作可定制桌面 （二）

 

添加資源池

根據項目需求 添加，

 

實例兩個數據

 

{
  "mainData": [
    {
      "x": 0,
      "y": 0,
      "w": 4,
      "h": 4,
      "i": 0,
      "Component": "planExecution",
      "IsResource": false
    }
  ]
}

{
  "mainData": [{
      "x": 0,
      "y": 0,
      "w": 2,
      "h": 2,
      "i": 0,
      "Component": "productionLine",
      "IsResource": true
    },
    {
      "x": 0,
      "y": 0,
      "w": 2,
      "h": 2,
      "i": 0,
      "Component": "takeTime",
      "IsResource": true
    },
    {
      "x": 0,
      "y": 0,
      "w": 4,
      "h": 2,
      "i": 0,
      "Component": "yieldStatistics",
      "IsResource": true
    }
  ]
}

 引到頁面中

  import layoutData from '@/virtualData/layoutData.json'
  import resourcesData from '@/virtualData/resourcesData.json'

增加 資源數據 並且給頁面數據 賦值

      // 初始化數據
      init() {
        this.layoutData = layoutData.mainData
        this.ResourceData = resourcesData.mainData
      }

初始化頁面之后，把資源池數據添加到頁面數據中

 // 打開資源池
      OpenResource() {
        // 資源起始點
        const x = 12
        // 計算向下高度
        let y = 0
        // 是否行並行
        let wFlag = false
        // 並行高度
        let tempY = 0
        const Resource = this.ResourceData
        for (const item of Resource) {
          if (item.w === 2) {
            if (wFlag) {
              // 第二個並行
              item.x = x + 2
              item.y = tempY
              tempY = false
            } else {
              // 第一個並行行
              item.x = x
              item.y = y
              tempY = y
              wFlag = true
            }
          } else {
            item.x = x
            item.y = y
          }
          item.i = this.layoutConfig.index
          y += item.h
          this.layoutConfig.index += 1
        }
        this.layoutData = this.layoutData.concat(Resource)
        this.historyLayout = JSON.parse(JSON.stringify(this.layoutData))
      },

 

 

然后把資源池和頁面數據分開，並且加上校驗。

<div class="Main_border" v-if="layoutConfig.ToolVisible">
      </div>

 .Main_border {
        height: 75%;
        width: 75%;
        position: absolute;
        box-sizing: border-box;
        border: 1px solid #000000;
      }

加上分割線，然后添加移動監聽。

 

  // 監聽組件移動結束位置
      movedEvent(i, newX) {
        const item = this.layoutData.find(t => t.i === i)
        const itemW = item.w
        if (newX + itemW <= 12) { // 放到線中 允許添加
          console.log('放到線中 允許添加')
          item.IsResource = false
          this.historyLayout = JSON.parse(JSON.stringify(this.layoutData))
        } else if (newX >= 12) { // 不在線中 允許添加
          this.historyLayout = JSON.parse(JSON.stringify(this.layoutData))
          item.IsResource = true
          console.log('不在線中 允許添加')
        } else { // 壓線 禁止添加
          this.layoutData = JSON.parse(JSON.stringify(this.historyLayout))
          console.log('壓線 禁止添加')
        }
      }