antv G6

文章目录

目录


前言

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

它是一款国产可视化插件,中文官方文档方便阅读和学习。G6可以实现很多d3才能实现的可视化图表,d3作为一款国外很强大的可视化插件,它的官方文档是非汉语文档,社区虽然很活跃,但几乎是英文文档,阅读和学习起来并不是那么轻松,尤其是英语不太好的同学,阅读和学习d3更吃力。这时候G6就是不错的选择。因为G6包含丰富的图表类型,还可以实现节点,边等自定义。


一、安装G6

 npm install --save @antv/g6

二、使用步骤

1.在需要用的 G6 的 JS 文件中导入:

import G6 from '@antv/g6';

2.使用示例

代码如下(示例):

1 创建容器

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器,通常为 div  标签。G6 在绘制时会在该容器下追加 canvas 标签,然后将图绘制在其中。

<div id="container"></div>

2 数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有 id 和 children 字段,否则会在渲染或者做收缩节点操作时报错。

  • 注意
  • 1、生成树形图的数据中必须包含id 和 children 两个字段.
  • 2、id的数据类型必须为字符串类型.:
 const data= {
    "id": "Firstlid1",
    "children": [
        {
            "id": "Firstlid1Secondlid1",
            "children": [
                {
                    "id": "Firstlid1Secondlid1Thirdlid1",
                    "children": [
                        {
                            "id": "Firstlid1Secondlid1Thirdlid1Fourlid1",
                            "children": []
                        }
                    ]  
                }
            ]
        }    
    ]
}

3 创建关系图

创建关系图(实例化)时,至少需要为图设置容器、宽和高。

const graph = new G6.TreeGraph({
  container: 'container', // String | HTMLElement,必须,在 Step 1 中创建的容器 id 或容器本身
  width: 800, // Number,必须,图的宽度
  height: 500, // Number,必须,图的高度
});

 4 配置数据源,渲染

graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图

三、完整代码

<template>
  <div class="GsixBox">
    <div id="container" :style="{ height: '100%', width: '100%' }" />
  </div>
</template>
<script>
import G6 from "@antv/g6";
import FirstContentDataJson from "./data/FirstContentData.json";
import SecondContentDataJson from "./data/SecondContentData.json";
import ThirdContentDataJson from "./data/ThirdContentData.json";
import FourContentDataJson from "./data/FourContentData.json";
import ListDataJson from "./data/ListData.json";
export default {
  data() {
    return {
      treedata: ListDataJson,
    };
  },
  mounted() {
    this.showChart();
  },
  methods: {
    //生成树图
    showChart() {
      //fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
      // fetch('/api/algorithm-category')
      ///.then((res) => res.json())
      this.$axios
        .post("/api/ListData")
        .then((res) => res.data[0])
        .then((data) => {
          G6.registerNode("card-node", {
            draw: function drawShape(cfg, group) {
              const r = 2;
              const color = "#5B8FF9";
              const w = cfg.size[0];
              const h = cfg.size[1];
              const shape = group.addShape("rect", {
                attrs: {
                  x: -w / 2,
                  y: -h / 2,
                  width: w, //200,
                  height: h, // 60
                  stroke: color,
                  radius: r,
                  fill: "#fff",
                },
                name: "main-box",
                draggable: true,
              });

              group.addShape("rect", {
                attrs: {
                  x: -w / 2,
                  y: -h / 2,
                  width: w, //200,
                  height: h / 2, // 60
                  fill: color,
                  radius: [r, r, 0, 0],
                },
                name: "title-box",
                draggable: true,
              });

              // title text
              group.addShape("text", {
                attrs: {
                  textBaseline: "top",
                  x: -w / 2 + 8,
                  y: -h / 2 + 2,
                  lineHeight: 20,
                  text: cfg.id,
                  fill: "#fff",
                },
                name: "title",
              });
              cfg.children &&
                group.addShape("marker", {
                  attrs: {
                    x: w / 2,
                    y: 0,
                    r: 6,
                    cursor: "pointer",
                    symbol: G6.Marker.collapse,
                    stroke: "#666",
                    lineWidth: 1,
                    fill: "#fff",
                  },
                  name: "collapse-icon",
                });
              group.addShape("text", {
                attrs: {
                  textBaseline: "top",
                  x: -w / 2 + 8,
                  y: -h / 2 + 24,
                  lineHeight: 20,
                  text: "description",
                  fill: "rgba(0,0,0, 1)",
                },
                name: `description`,
              });
              return shape;
            },
            setState(name, value, item) {
              if (name === "collapsed") {
                const marker = item
                  .get("group")
                  .find((ele) => ele.get("name") === "collapse-icon");
                const icon = value ? G6.Marker.expand : G6.Marker.collapse;
                marker.attr("symbol", icon);
              }
            },
          });
          const container = document.getElementById("container");
          const width = container.scrollWidth;
          const height = container.scrollHeight || 500;
          // 实例化 Grid 插件
          const grid = new G6.Grid();
          const minimap = new G6.Minimap();
          const graph = new G6.TreeGraph({
            container: "container",
            width,
            height,
            plugins: [grid, minimap], // 配置 Grid 插件和 Minimap 插件
            modes: {
              default: [
                {
                  type: "collapse-expand",
                  onChange: function onChange(item, collapsed) {
                    console.log("onChange---", item);

                    // const data = item.getModel();
                    // data.collapsed = collapsed;
                    collapseSibNode(item, false);

                    return true;
                  },
                },
                "drag-canvas",
              ],
            },
            defaultNode: {
              type: "card-node",
              size: [100, 40],
            },
            defaultEdge: {
              type: "cubic-horizontal",
              style: {
                endArrow: true,
               // fill: "#389",
                stroke: "#389",
              },
            },
            layout: {
              type: "indented",
              direction: "LR",
              dropCap: false,
              indent: 200,
              getHeight: () => {
                return 20;
              },
            },
          });

          graph.data(data);
          graph.render();
          graph.fitCenter();
          graph.fitView(60);

          // // 1 默认展开两层节点,之后,重新渲染
          // G6.Util.traverseTree(data, function (item) {
          //   if (item.depth > 0) {
          //     //collapsed为true时默认收起
          //     item.collapsed = true;
          //   }
          // });
          // graph.data(data);
          // graph.render();
          // graph.fitCenter();
          // graph.fitView();

          /*
           **************************** */
          /**
           * @method: 点击node节点,展开此节点,收缩其他同级节点及其所有子节点
           * @param {*} item 此节点
           * @param {*} collapsed 收缩状态
           */
          function collapseSibNode(item, collapsed) {
            let farNode = item._cfg.parent && item._cfg.parent._cfg.id;
            // 同级节点
            let siblingNode;

            // 当前有父节点
            if (farNode) {
              // 获取兄弟节点
              siblingNode = item._cfg.parent._cfg.children;
              if (siblingNode.length > 0 && siblingNode) {
                collapseNode(siblingNode);
              }
            } else {
              // 当前是根节点
              collapseNode(item._cfg.children);
            }

            // 折叠展开节点
            const data = item.get("model");

            data.collapsed = collapsed;
          }
          /**
           * @method: 递归收起节点
           * @param {*} children
           */
          function collapseNode(children) {
            children.forEach((el) => {
              const data = el.get("model");

              let isChildren = el._cfg.children && el._cfg.children.length > 0;
              if (isChildren) {
                collapseNode(el._cfg.children);
                // 先关闭子节点后关闭父节点
                data.collapsed = true;
              }
            });
          }
          /*
           **************************** */

          if (typeof window !== "undefined")
            window.onresize = () => {
              if (!graph || graph.get("destroyed")) return;
              if (
                !container ||
                !container.scrollWidth ||
                !container.scrollHeight
              )
                return;
              graph.changeSize(container.scrollWidth, container.scrollHeight);
            };
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.GsixBox {
  width: 100%;
  height: 100%;
}
</style>

四、ListaData.json

[
    {
        "Name": "一级水厂1",
        "label": "一级水厂1",
        "Status": 0,
        "Msg": [],
        "IsFather": true,
        "Depth": 1,
        "Time": "13:00",
        "id": "Firstlid1",
        "LID": "Firstlid1",
        "ShowCode": "一级---1",
        "List": [
            {
                "Title": "浊度",
                "Data": 0.23
            },
            {
                "Title": "PH",
                "Data": 3
            },
            {
                "Title": "湿度",
                "Data": 0.63
            },
            {
                "Title": "COD",
                "Data": 0.23
            }
        ],
        "children": [
            {
                "Name": "二级水厂1",
                "label": "二级水厂1",
                "Status": 0,
                "Msg": [],
                "IsFather": true,
                "Depth": 2,
                "Time": "13:00",
                "id": "Firstlid1Secondlid1",
                "LID": "Secondlid1",
                "ShowCode": "一级---1---二级---1",
                "children": [
                    {
                        "Name": "三级水厂1",
                        "label": "三级水厂1",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:00",
                        "id": "Firstlid1Secondlid1Thirdlid1",
                        "LID": "Thirdlid1",
                        "ShowCode": "一级---1---二级---1---三级---1",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid1Secondlid1Thirdlid1Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---1---二级---1---三级---1---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid1Secondlid1Thirdlid1Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---1---二级---1---三级---1---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid1Secondlid1Thirdlid1Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---1---二级---1---三级---1---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid1Secondlid1Thirdlid1Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---1---二级---1---三级---1---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂2",
                        "label": "三级水厂2",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:01",
                        "id": "Firstlid1Secondlid1Thirdlid2",
                        "LID": "Thirdlid2",
                        "ShowCode": "一级---1---二级---1---三级---2",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid1Secondlid1Thirdlid2Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---1---二级---1---三级---2---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid1Secondlid1Thirdlid2Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---1---二级---1---三级---2---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid1Secondlid1Thirdlid2Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---1---二级---1---三级---2---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid1Secondlid1Thirdlid2Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---1---二级---1---三级---2---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂3",
                        "label": "三级水厂3",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:02",
                        "id": "Firstlid1Secondlid1Thirdlid3",
                        "LID": "Thirdlid3",
                        "ShowCode": "一级---1---二级---1---三级---3",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid1Secondlid1Thirdlid3Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---1---二级---1---三级---3---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid1Secondlid1Thirdlid3Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---1---二级---1---三级---3---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid1Secondlid1Thirdlid3Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---1---二级---1---三级---3---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid1Secondlid1Thirdlid3Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---1---二级---1---三级---3---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    }
                ],
                "List": [
                    {
                        "Title": "浊度",
                        "Data": 0.23
                    },
                    {
                        "Title": "PH",
                        "Data": 3
                    },
                    {
                        "Title": "湿度",
                        "Data": 0.63
                    },
                    {
                        "Title": "COD",
                        "Data": 0.23
                    }
                ]
            },
            {
                "Name": "二级水厂2",
                "label": "二级水厂2",
                "Status": 0,
                "Msg": [],
                "IsFather": true,
                "Depth": 2,
                "Time": "13:01",
                "id": "Firstlid1Secondlid2",
                "LID": "Secondlid2",
                "ShowCode": "一级---1---二级---2",
                "children": [
                    {
                        "Name": "三级水厂1",
                        "label": "三级水厂1",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:00",
                        "id": "Firstlid1Secondlid2Thirdlid1",
                        "LID": "Thirdlid1",
                        "ShowCode": "一级---1---二级---2---三级---1",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid1Secondlid2Thirdlid1Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---1---二级---2---三级---1---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid1Secondlid2Thirdlid1Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---1---二级---2---三级---1---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid1Secondlid2Thirdlid1Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---1---二级---2---三级---1---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid1Secondlid2Thirdlid1Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---1---二级---2---三级---1---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂2",
                        "label": "三级水厂2",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:01",
                        "id": "Firstlid1Secondlid2Thirdlid2",
                        "LID": "Thirdlid2",
                        "ShowCode": "一级---1---二级---2---三级---2",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid1Secondlid2Thirdlid2Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---1---二级---2---三级---2---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid1Secondlid2Thirdlid2Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---1---二级---2---三级---2---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid1Secondlid2Thirdlid2Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---1---二级---2---三级---2---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid1Secondlid2Thirdlid2Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---1---二级---2---三级---2---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂3",
                        "label": "三级水厂3",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:02",
                        "id": "Firstlid1Secondlid2Thirdlid3",
                        "LID": "Thirdlid3",
                        "ShowCode": "一级---1---二级---2---三级---3",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid1Secondlid2Thirdlid3Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---1---二级---2---三级---3---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid1Secondlid2Thirdlid3Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---1---二级---2---三级---3---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid1Secondlid2Thirdlid3Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---1---二级---2---三级---3---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid1Secondlid2Thirdlid3Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---1---二级---2---三级---3---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    }
                ],
                "List": [
                    {
                        "Title": "浊度",
                        "Data": 0.23
                    },
                    {
                        "Title": "PH",
                        "Data": 3
                    },
                    {
                        "Title": "湿度",
                        "Data": 0.63
                    },
                    {
                        "Title": "COD",
                        "Data": 0.23
                    }
                ]
            }
        ]
    },
    {
        "Name": "一级水厂2",
        "label": "一级水厂2",
        "Status": 0,
        "Msg": [],
        "IsFather": true,
        "Depth": 1,
        "Time": "13:01",
        "id": "Firstlid2",
        "LID": "Firstlid2",
        "ShowCode": "一级---2",
        "List": [
            {
                "Title": "浊度",
                "Data": 0.23
            },
            {
                "Title": "PH",
                "Data": 3
            },
            {
                "Title": "湿度",
                "Data": 0.63
            },
            {
                "Title": "COD",
                "Data": 0.23
            }
        ],
        "children": [
            {
                "Name": "二级水厂1",
                "label": "二级水厂1",
                "Status": 0,
                "Msg": [],
                "IsFather": true,
                "Depth": 2,
                "Time": "13:00",
                "id": "Firstlid2Secondlid1",
                "LID": "Secondlid1",
                "ShowCode": "一级---2---二级---1",
                "children": [
                    {
                        "Name": "三级水厂1",
                        "label": "三级水厂1",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:00",
                        "id": "Firstlid2Secondlid1Thirdlid1",
                        "LID": "Thirdlid1",
                        "ShowCode": "一级---2---二级---1---三级---1",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid2Secondlid1Thirdlid1Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---2---二级---1---三级---1---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid2Secondlid1Thirdlid1Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---2---二级---1---三级---1---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid2Secondlid1Thirdlid1Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---2---二级---1---三级---1---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid2Secondlid1Thirdlid1Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---2---二级---1---三级---1---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂2",
                        "label": "三级水厂2",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:01",
                        "id": "Firstlid2Secondlid1Thirdlid2",
                        "LID": "Thirdlid2",
                        "ShowCode": "一级---2---二级---1---三级---2",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid2Secondlid1Thirdlid2Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---2---二级---1---三级---2---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid2Secondlid1Thirdlid2Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---2---二级---1---三级---2---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid2Secondlid1Thirdlid2Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---2---二级---1---三级---2---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid2Secondlid1Thirdlid2Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---2---二级---1---三级---2---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂3",
                        "label": "三级水厂3",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:02",
                        "id": "Firstlid2Secondlid1Thirdlid3",
                        "LID": "Thirdlid3",
                        "ShowCode": "一级---2---二级---1---三级---3",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid2Secondlid1Thirdlid3Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---2---二级---1---三级---3---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid2Secondlid1Thirdlid3Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---2---二级---1---三级---3---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid2Secondlid1Thirdlid3Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---2---二级---1---三级---3---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid2Secondlid1Thirdlid3Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---2---二级---1---三级---3---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    }
                ],
                "List": [
                    {
                        "Title": "浊度",
                        "Data": 0.23
                    },
                    {
                        "Title": "PH",
                        "Data": 3
                    },
                    {
                        "Title": "湿度",
                        "Data": 0.63
                    },
                    {
                        "Title": "COD",
                        "Data": 0.23
                    }
                ]
            },
            {
                "Name": "二级水厂2",
                "label": "二级水厂2",
                "Status": 0,
                "Msg": [],
                "IsFather": true,
                "Depth": 2,
                "Time": "13:01",
                "id": "Firstlid2Secondlid2",
                "LID": "Secondlid2",
                "ShowCode": "一级---2---二级---2",
                "children": [
                    {
                        "Name": "三级水厂1",
                        "label": "三级水厂1",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:00",
                        "id": "Firstlid2Secondlid2Thirdlid1",
                        "LID": "Thirdlid1",
                        "ShowCode": "一级---2---二级---2---三级---1",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid2Secondlid2Thirdlid1Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---2---二级---2---三级---1---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid2Secondlid2Thirdlid1Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---2---二级---2---三级---1---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid2Secondlid2Thirdlid1Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---2---二级---2---三级---1---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid2Secondlid2Thirdlid1Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---2---二级---2---三级---1---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂2",
                        "label": "三级水厂2",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:01",
                        "id": "Firstlid2Secondlid2Thirdlid2",
                        "LID": "Thirdlid2",
                        "ShowCode": "一级---2---二级---2---三级---2",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid2Secondlid2Thirdlid2Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---2---二级---2---三级---2---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid2Secondlid2Thirdlid2Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---2---二级---2---三级---2---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid2Secondlid2Thirdlid2Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---2---二级---2---三级---2---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid2Secondlid2Thirdlid2Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---2---二级---2---三级---2---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    },
                    {
                        "Name": "三级水厂3",
                        "label": "三级水厂3",
                        "Status": 1,
                        "Msg": [],
                        "IsFather": true,
                        "Depth": 3,
                        "Time": "13:02",
                        "id": "Firstlid2Secondlid2Thirdlid3",
                        "LID": "Thirdlid3",
                        "ShowCode": "一级---2---二级---2---三级---3",
                        "children": [
                            {
                                "Name": "四级水厂1",
                                "label": "四级水厂1",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:00",
                                "id": "Firstlid2Secondlid2Thirdlid3Fourlid1",
                                "LID": "Fourlid1",
                                "ShowCode": "一级---2---二级---2---三级---3---四级---1",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂2",
                                "label": "四级水厂2",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:01",
                                "id": "Firstlid2Secondlid2Thirdlid3Fourlid2",
                                "LID": "Fourlid2",
                                "ShowCode": "一级---2---二级---2---三级---3---四级---2",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂3",
                                "label": "四级水厂3",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:02",
                                "id": "Firstlid2Secondlid2Thirdlid3Fourlid3",
                                "LID": "Fourlid3",
                                "ShowCode": "一级---2---二级---2---三级---3---四级---3",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            },
                            {
                                "Name": "四级水厂4",
                                "label": "四级水厂4",
                                "Status": 1,
                                "Msg": [],
                                "IsFather": false,
                                "Depth": 4,
                                "Time": "13:03",
                                "id": "Firstlid2Secondlid2Thirdlid3Fourlid4",
                                "LID": "Fourlid4",
                                "ShowCode": "一级---2---二级---2---三级---3---四级---4",
                                "children": [],
                                "List": [
                                    {
                                        "Title": "浊度",
                                        "Data": 0.23
                                    },
                                    {
                                        "Title": "PH",
                                        "Data": 3
                                    },
                                    {
                                        "Title": "湿度",
                                        "Data": 0.63
                                    },
                                    {
                                        "Title": "COD",
                                        "Data": 0.23
                                    }
                                ]
                            }
                        ],
                        "List": [
                            {
                                "Title": "浊度",
                                "Data": 0.23
                            },
                            {
                                "Title": "PH",
                                "Data": 3
                            },
                            {
                                "Title": "湿度",
                                "Data": 0.63
                            },
                            {
                                "Title": "COD",
                                "Data": 0.23
                            }
                        ]
                    }
                ],
                "List": [
                    {
                        "Title": "浊度",
                        "Data": 0.23
                    },
                    {
                        "Title": "PH",
                        "Data": 3
                    },
                    {
                        "Title": "湿度",
                        "Data": 0.63
                    },
                    {
                        "Title": "COD",
                        "Data": 0.23
                    }
                ]
            }
        ]
    }
]

五、GitHub源码 :

五、GitHub源码 :https://github.com/volodyan/vue_g6https://github.com/volodyan/vue_g6

Logo

前往低代码交流专区

更多推荐