前言

前言：無論是什么數(shù)據(jù)斋竞，在解析之前益眉，都需要先創(chuàng)建一個(gè)VUE模板文件陕壹，即index.vue应狱。后續(xù)的數(shù)據(jù)需要填充到此文件中共郭。
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文件中疾呻，所有的縮進(jìn)均為空格除嘹，一次縮進(jìn)為兩個(gè)空格；
2岸蜗、用<style></style>包裹的代碼塊均為鍵值對(duì)尉咕，且鍵和值都無引號(hào)；
3璃岳、后續(xù)解析的數(shù)據(jù)年缎，均需生成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和代碼片段的對(duì)應(yīng)

每一段json數(shù)據(jù)都會(huì)和html代碼、css代碼形成對(duì)應(yīng)關(guān)系犁柜，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相對(duì)應(yīng)馋缅，需要生成如下的html代碼片段：

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

其中最外層的鍵名img-1679273516扒腕，以及width、height萤悴、top瘾腰、left、position稚疹、zIndex與css相對(duì)應(yīng)居灯，需要生成如下的css代碼片段：

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

具體的對(duì)應(yīng)關(guān)系在API中有詳細(xì)標(biāo)注祭务。

元素類型

json包含多種元素，如代表圖片的img怪嫌、代表按鈕的button义锥、代表視頻的video等等，不同的元素對(duì)應(yīng)不同的html和css代碼片段岩灭，而且會(huì)根據(jù)編輯器的完善而增加拌倍，我們可以根據(jù)json的鍵名區(qū)分元素類型，如img-1679273516代表圖片元素噪径，需要對(duì)應(yīng)圖片的api柱恤。

嵌套關(guān)系

json中會(huì)出現(xiàn)嵌套關(guān)系代碼，我們目前只涉及到了一級(jí)嵌套找爱，如果有嵌套梗顺，則json最外層鍵名會(huì)以wrap開頭，我們需要通過內(nèi)部的鍵名child解析下一級(jí)元素车摄，如

"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中出現(xiàn)了嵌套關(guān)系吮播，最外層為wrap解析的元素变屁，內(nèi)部包含一個(gè)img元素。wrap開頭的鍵名對(duì)應(yīng)的元素為div意狠，上述json對(duì)應(yīng)的html代碼片段為：

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

上述json對(duì)應(yīng)的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;
}