[
  {
    "name": "CRUD表格",
    "img": "/img/assets/text4.png",
    "option": {
      "name": "CRUD表格",
      "title": "CRUD表格",
      "icon": "icon-vue",
      "img": "/img/assets/text4.png",
      "dataType": 0,
      "data": [
        {
          "name": "张三",
          "sex": "男"
        },
        {
          "name": "李四",
          "sex": "女"
        }
      ],
      "dataFormatter": "",
      "dataHeader": "",
      "dataQuery": "",
      "stylesFormatter": "",
      "component": {
        "width": 780,
        "height": 263,
        "name": "vue",
        "prop": "vue",
        "remoteContent": "<template>\n    <avue-crud :option=\"option\" :data=\"dataChart\"></avue-crud>\n</template>\n<script>\nexport default{\n    data(){\n        return{\n            option:{\n                column:[{\n                    label:'姓名',\n                    prop:'name'\n                },{\n                    label:'性别',\n                    prop:'sex'\n                }]\n            } \n        }\n    },\n    created(){\n       \n    },\n    methods:{\n       \n    }\n}\n</script>\n<style>\n    .test{\n        text-align:center;\n        color:red;\n        font-size:40px;\n    }\n</style>",
        "scale": 0,
        "perspective": 0,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "contrast": 0,
        "saturate": 0,
        "brightness": 0,
        "opacity": 0,
        "grayscale": 0,
        "hueRotate": 0,
        "invert": 0,
        "blur": 0
      },
      "option": {
        "remote": false,
        "content": "<template>\n    <avue-crud :option=\"option\" :data=\"dataChart\"></avue-crud>\n</template>\n<script>\nexport default{\n    data(){\n        return{\n            option:{\n                column:[{\n                    label:'姓名',\n                    prop:'name'\n                },{\n                    label:'性别',\n                    prop:'sex'\n                }]\n            } \n        }\n    },\n    created(){\n       \n    },\n    methods:{\n       \n    }\n}\n</script>\n<style>\n    .test{\n        text-align:center;\n        color:red;\n        font-size:40px;\n    }\n</style>",
        "src": "/vue-remote-temp.js"
      },
      "left": 0,
      "top": 0,
      "display": false,
      "lock": false,
      "group": "",
      "child": {
        "index": [],
        "paramList": []
      },
      "zIndex": 0,
      "rotate": 0
    }
  },
  {
    "name": "FORM表单",
    "img": "/img/assets/text4.png",
    "option": {
      "name": "FORM表单",
      "title": "FORM表单",
      "icon": "icon-vue",
      "img": "/img/assets/text4.png",
      "dataType": 0,
      "data": {
        "name": "张三",
        "sex": "男"
      },
      "dataFormatter": "",
      "dataHeader": "",
      "dataQuery": "",
      "stylesFormatter": "",
      "component": {
        "width": 780,
        "height": 124,
        "name": "vue",
        "prop": "vue",
        "remoteContent": "<template>\n    <avue-form :option=\"option\" v-model=\"dataChart\"></avue-form>\n</template>\n<script>\nexport default{\n    data(){\n        return{\n            option:{\n                column:[{\n                    label:'姓名',\n                    prop:'name'\n                },{\n                    label:'性别',\n                    prop:'sex'\n                }]\n            } \n        }\n    },\n    created(){\n       \n    },\n    methods:{\n       \n    }\n}\n</script>\n<style>\n    \n</style>",
        "scale": 0,
        "perspective": 0,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "contrast": 0,
        "saturate": 0,
        "brightness": 0,
        "opacity": 0,
        "grayscale": 0,
        "hueRotate": 0,
        "invert": 0,
        "blur": 0
      },
      "option": {
        "remote": false,
        "content": "<template>\n    <avue-form :option=\"option\" v-model=\"dataChart\"></avue-form>\n</template>\n<script>\nexport default{\n    data(){\n        return{\n            option:{\n                column:[{\n                    label:'姓名',\n                    prop:'name'\n                },{\n                    label:'性别',\n                    prop:'sex'\n                }]\n            } \n        }\n    },\n    created(){\n       \n    },\n    methods:{\n       \n    }\n}\n</script>\n<style>\n    \n</style>",
        "src": "/vue-remote-temp.js"
      },
      "left": 0,
      "top": 0,
      "display": false,
      "lock": false,
      "group": "",
      "child": {
        "index": [],
        "paramList": []
      },
      "zIndex": 0,
      "rotate": 0
    }
  },
  {
    "name": "2.5D通用节点",
    "img": "/img/assets/text4.png",
    "option": {
      "name": "2.5D通用节点",
      "title": "2.5D通用节点",
      "icon": "icon-vue",
      "img": "/img/assets/text4.png",
      "dataType": 0,
      "data": {
        "label": "服务器",
        "subLabel": "ONLINE"
      },
      "dataFormatter": "",
      "dataHeader": "",
      "dataQuery": "",
      "stylesFormatter": "",
      "component": {
        "width": 420,
        "height": 320,
        "name": "vue",
        "prop": "vue",
        "remoteContent": "",
        "scale": 0,
        "perspective": 0,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "contrast": 0,
        "saturate": 0,
        "brightness": 0,
        "opacity": 0,
        "grayscale": 0,
        "hueRotate": 0,
        "invert": 0,
        "blur": 0
      },
      "option": {
        "vue3": false,
        "remote": false,
        "content": "<template>\n  <div class=\"isometric-node\">\n    <svg viewBox=\"0 0 420 320\" preserveAspectRatio=\"xMidYMid meet\" role=\"img\" :aria-label=\"nodeLabel\">\n      <defs>\n        <linearGradient :id=\"uid + '-front'\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0\" :stop-color=\"mainColor\"></stop>\n          <stop offset=\"1\" :stop-color=\"shadowColor\"></stop>\n        </linearGradient>\n        <linearGradient :id=\"uid + '-top'\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0\" :stop-color=\"highlightColor\"></stop>\n          <stop offset=\"1\" :stop-color=\"mainColor\"></stop>\n        </linearGradient>\n        <filter :id=\"uid + '-glow'\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n          <feGaussianBlur stdDeviation=\"5\" result=\"blur\"></feGaussianBlur>\n          <feMerge><feMergeNode in=\"blur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge>\n        </filter>\n      </defs>\n      <g class=\"node-floor\">\n        <polygon points=\"42,219 210,138 378,219 210,300\" fill=\"rgba(10, 37, 83, .52)\"></polygon>\n        <polygon points=\"42,219 210,138 378,219 210,300\" fill=\"none\" :stroke=\"mainColor\" stroke-width=\"2\"></polygon>\n        <polygon points=\"61,219 210,153 359,219 210,285\" fill=\"none\" :stroke=\"highlightColor\" stroke-width=\"1.5\"></polygon>\n      </g>\n      <g class=\"node-device\" transform=\"translate(210 71)\">\n        <g v-for=\"rack in rackCount\" :key=\"rack\" :transform=\"'translate(' + ((rack - (rackCount + 1) / 2) * 30) + ' ' + ((rack - 1) * 6) + ')'\">\n          <polygon points=\"-54,0 0,-27 54,0 0,27\" :fill=\"'url(#' + uid + '-top)'\" :stroke=\"highlightColor\" stroke-width=\"1.2\"></polygon>\n          <polygon points=\"-54,0 0,27 0,118 -54,91\" fill=\"#071a42\" :stroke=\"mainColor\" stroke-width=\"1.2\"></polygon>\n          <polygon points=\"0,27 54,0 54,91 0,118\" :fill=\"shadowColor\" :stroke=\"mainColor\" stroke-width=\"1.2\"></polygon>\n          <rect x=\"-43\" y=\"12\" width=\"43\" height=\"76\" rx=\"3\" :fill=\"'url(#' + uid + '-front)'\" stroke=\"rgba(175, 228, 255, .76)\" stroke-width=\"1\"></rect>\n          <path d=\"M-37 30H-7M-37 46H-7M-37 62H-7M-37 78H-7\" stroke=\"rgba(211, 246, 255, .75)\" stroke-width=\"2\"></path>\n          <circle cx=\"-32\" cy=\"99\" r=\"3\" :fill=\"statusColor\" :filter=\"'url(#' + uid + '-glow)'\" class=\"node-status\"></circle>\n          <circle cx=\"-18\" cy=\"99\" r=\"3\" :fill=\"statusColor\" :filter=\"'url(#' + uid + '-glow)'\" class=\"node-status node-status--delay\"></circle>\n        </g>\n      </g>\n      <g class=\"node-caption\">\n        <text x=\"210\" y=\"286\" text-anchor=\"middle\" :fill=\"textColor\">{{ nodeLabel }}</text>\n        <text v-if=\"subLabel\" x=\"210\" y=\"306\" text-anchor=\"middle\" :fill=\"subTextColor\" class=\"node-caption__sub\">{{ subLabel }}</text>\n      </g>\n    </svg>\n  </div>\n</template>\n<script>\nexport default {\n  data: function () {\n    return { uid: 'isometric-node-' + Math.random().toString(36).slice(2, 10) };\n  },\n  computed: {\n    dataValue: function () {\n      return this.dataChart && typeof this.dataChart === 'object' && !Array.isArray(this.dataChart) ? this.dataChart : {};\n    },\n    nodeLabel: function () { return this.dataValue.label || this.option.label || '服务器'; },\n    subLabel: function () { return this.dataValue.subLabel || this.option.subLabel || ''; },\n    mainColor: function () { return this.dataValue.primaryColor || this.option.primaryColor || '#0b82ff'; },\n    highlightColor: function () { return this.dataValue.highlightColor || this.option.highlightColor || '#55e8ff'; },\n    shadowColor: function () { return this.dataValue.shadowColor || this.option.shadowColor || '#073884'; },\n    statusColor: function () { return this.dataValue.statusColor || this.option.statusColor || '#35f2a6'; },\n    textColor: function () { return this.dataValue.textColor || this.option.textColor || '#e5f7ff'; },\n    subTextColor: function () { return this.dataValue.subTextColor || this.option.subTextColor || 'rgba(201, 234, 255, .72)'; },\n    rackCount: function () {\n      var value = Number(this.dataValue.rackCount || this.option.rackCount || 3);\n      return Math.max(1, Math.min(5, isNaN(value) ? 3 : value));\n    }\n  }\n};\n</script>\n<style>\n.isometric-node { display: flex; width: 100%; height: 100%; overflow: hidden; }\n.isometric-node svg { width: 100%; height: 100%; overflow: visible; }\n.isometric-node .node-device { filter: drop-shadow(0 15px 10px rgba(0, 0, 0, .32)); }\n.isometric-node .node-status { animation: isometric-node-pulse 1.8s ease-in-out infinite; }\n.isometric-node .node-status--delay { animation-delay: .45s; }\n.isometric-node .node-caption text { font-family: Arial, 'Microsoft YaHei', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 2px; }\n.isometric-node .node-caption .node-caption__sub { font-size: 13px; font-weight: 400; letter-spacing: 1px; }\n@keyframes isometric-node-pulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }\n</style>",
        "src": "/vue-remote-temp.js"
      },
      "left": 0,
      "top": 0,
      "display": false,
      "lock": false,
      "group": "",
      "child": {
        "index": [],
        "paramList": []
      },
      "zIndex": 0,
      "rotate": 0
    }
  }
]