html机柜图、vue画机柜图 、用vue生成机柜图，通过修改设备的信息，从而使设备在机柜位置中自动更新

目前存在的问题：

1. 设备的U位是从下而上的，图表中是从上到下，不知怎样能使调换。(已解决：见gitee)

2. 在计算合并的单元格处rowspan的计算方法，有更好的算法大牛，请同步到gitee。

 *** 更新后的版本 ***

cabinet: 生成一个简单的机柜图。 (gitee.com)

<template>
  <div>
    <div style="display: inline-block; margin-right:20px" v-for="cabinet in cabinetDevices" :key="cabinet.name">
      <table>
        <tr>
          <th style="background: dimgray">id</th>
          <th style="background: dimgray; width: 240px">{{cabinet.name}}</th>
          <th style="background: dimgray">id</th>
        </tr>
        <tbody>
        <tr v-for="row in cabinet.cabinet_high" :key="row">
          <td>{{ row }}</td>
          <td v-if="deviceRow(row,cabinet.devices)" :rowspan="deviceSpan(row,cabinet.devices)" :style="deviceColor(row,cabinet.devices)">{{ deviceRow(row,cabinet.devices) }}</td>
          <td>{{ row }}</td>
        </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>

<script>
export default {
  name: "NetworkName",
  data() {
    return {
      cabinetDevices: [
        {
          name: "A01",
          cabinet_high: 42,
          devices: [
            {"name": "Core_R01", "bottom":1, "top": 4, "type": "router", "color": "brown", "ip": "192.168.100.100"},
            {"name": "Core_S01", "bottom":6, "top": 9, "type": "switch", "color": "green", "ip": "192.168.100.102"},
            {"name": "LinuxServer_APP01", "bottom":15, "top": 16, "type": "switch", "color": "orange", "ip": "172.16.10.20"},
            {"name": "LinuxServer_APP02", "bottom":18, "top": 19, "type": "switch", "color": "orange", "ip": "172.16.10.30"},
         ]
        },
        {
          name: "A02",
          cabinet_high: 42,
          devices: [
            {"name": "Core_R02", "bottom":1, "top": 4, "type": "router", "color": "brown", "ip": "192.168.100.101"},
            {"name": "Core_S02", "bottom":6, "top": 9, "type": "switch", "color": "green", "ip": "192.168.100.103"},
            {"name": "LinuxServer_APP03", "bottom":15, "top": 16, "type": "switch", "color": "orange", "ip": "172.16.10.21"},
            {"name": "LinuxServer_APP04", "bottom":18, "top": 19, "type": "switch", "color": "orange", "ip": "172.16.10.31"},
          ]
        },
        {
          name: "A03",
          cabinet_high: 42,
          devices: [
            {"name": "TEST_SERVER_01", "bottom":2, "top": 3, "type": "router", "color": "green", "ip": "10.10.10.189"},
            {"name": "Ubuntu18.04LTS", "bottom":22, "top": 23, "type": "switch", "color": "green", "ip": "192.168.100.103"},
          ]
        }

      ],

    };
  },

  methods: {
    deviceRow(row,device){
      for(let dev of device){
        if(row === dev.bottom){
          // 返回设备信息
          return dev.name+" "+dev.ip
        }
      }
    },
    deviceColor(row,device){
      for(let dev of device){
        if(row === dev.bottom){
          // 返回背景色
          return "background: " + dev.color
        }
      }
    },
    deviceSpan(row,device){
      for(let dev of device){
        if(row === dev.bottom){
          // u位结束-u位开始+1,用来计算合并的单元格数量
          return dev.top - dev.bottom + 1
        }
      }
    },
  },
};
</script>

<style scoped>
table, tr, td, th {
  border: 4px solid silver;
  text-align:center
}
</style>

效果图：