前言

前言：无论是什么数据，在解析之前，都需要先创建一个VUE模板文件，即index.vue。后续的数据需要填充到此文件中。
index.vue空模板文件如下：

<template>
  <div class="main-container">
    //（一）在此处插入html代码
  </div>
</template>
<script>
 export default {
  data() {
    return {
      // (二) 在此处插入js变量名
    };
  },
  created() {},
  methods: {
    //  (三) 在此处插入js方法
 },
  mounted() {
    this.$nextTick(() => {});
  },
};
</script>
<style scoped lang="less">
 //（四）在此处插入css代码
</style>

注意：

1、vue文件中，所有的缩进均为空格，一次缩进为两个空格；
2、用<style></style>包裹的代码块均为键值对，且键和值都无引号；
3、后续解析的数据，均需生成html代码和css代码，html代码需要追加到<div class="main-container"></div>里面的（一）处，如
  <div class="main-container">
    <img src="@/assets/imgs/data_center_arr.png" id="img-1679273516" data-equip-name="111" />
  </div>
css代码需要追加到<style scoped lang="less"></style>里面的（四）处，如
<style scoped lang="less">
   #wrap-1679273516 {
    width: 100%;
    height: 20%;
    background: yellow;
    position: absolute;
    left: 0;
    top: 0;
  }
</style>

json和代码片段的对应

每一段json数据都会和html代码、css代码形成对应关系，json示例如下：

"img-1679273516": {
        "src": "img/photo.png",
        "width": "12.8%",
        "height": "16.28%",
        "top": "33.33%",
        "left": "15.9%",
        "position": "absolute",
        "zIndex": 0,
        "equipName": "111" 
 }

其中最外层的键名img-1679273516，以及src、equipName与html相对应，需要生成如下的html代码片段：

<img id="img-1679273516" data-equip-name="111" src="img/photo.png">

其中最外层的键名img-1679273516，以及width、height、top、left、position、zIndex与css相对应，需要生成如下的css代码片段：

#img-1679273516{ 
    width: 12.8%;
    height: 16.28%;
    position: absolute;
    top: 33.33%;
    left: 15.9%;
    z-index: 0;
}

具体的对应关系在API中有详细标注。

元素类型

json包含多种元素，如代表图片的img、代表按钮的button、代表视频的video等等，不同的元素对应不同的html和css代码片段，而且会根据编辑器的完善而增加，我们可以根据json的键名区分元素类型，如img-1679273516代表图片元素，需要对应图片的api。

嵌套关系

json中会出现嵌套关系代码，我们目前只涉及到了一级嵌套，如果有嵌套，则json最外层键名会以wrap开头，我们需要通过内部的键名child解析下一级元素，如

"wrap-1679292022": {
        "equipName":"121",
        "width":"40.62%",
        "height":"63.19%",
        "top":"7.61%",
        "left":"28.99%",
        "position":"absolute",
        "zIndex":0，
        "child":{
               #img-1679273516{ 
                      "equipName":"122",
                      "src": "img/photo.png",
                      "width":"40.62%",
                      "height":"63.19%",
                      "top":"7.61%",
                      "left":"28.99%",
                      "position":"absolute",
                      "zIndex":0，
                }
        }
}

在上述json中出现了嵌套关系，最外层为wrap解析的元素，内部包含一个img元素。wrap开头的键名对应的元素为div，上述json对应的html代码片段为：

        <div id="wrap-1679292022" data-equip-name="121">
            <img id="img-1679273516" data-equip-name="122" src="img/photo.png">
        </div>

上述json对应的css代码片段为：

#wrap-1679273516{ 
    width: 12.8%;
    height: 16.28%;
    position: absolute;
    top: 33.33%;
    left: 15.9%;
    z-index: 0;
}
#img-1679273516{ 
    width: 12.8%;
    height: 16.28%;
    position: absolute;
    top: 33.33%;
    left: 15.9%;
    z-index: 0;
}