<template>
  <div class="demo-topology">
    <topology
      ref="topology"
      :graph-data="graphData"
      :node-app-config="nodeAppConfig"
      @doAutoRefresh="doAutoRefresh"
      @doManualRefresh="doManualRefresh"
      @doChangeMode="doChangeMode"
      @doSaveData="doSaveData"
    >
    </topology>
  </div>
</template>

<script>
/* 局部注册 */
import { Topology } from '@/views/system/top/packages/top.js'
import { deepClone, getRandomArrayElements } from '@/views/system/top/index'

export default {
  name: 'DemoTopology',
  components: {
    'topology': Topology
  },
  data() {
    return {
      graphData: {
        nodes: [
          // {
          //   id: "job",
          //   label: "Job",
          //   type:'base',
          //   attrs: [{
          //     key: "id",
          //     type: "number(3)"
          //   },
          //     {
          //       key: "title",
          //       type: "varchar(255)"
          //     },
          //     {
          //       key: "level",
          //       type: "number(3)"
          //     }
          //   ]
          // },
          {
            id: 'client-01',
            x: -95,
            y: -50,
            label: '客户端-01',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII=',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'client-02',
            x: 125,
            y: -50,
            label: '客户端-02',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII=',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'client-03',
            x: 348,
            y: -50,
            label: '客户端-03',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII=',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'firewall-01',
            x: 14,
            y: 88,
            label: '防火墙',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,[encoded data, 9756 characters]',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'firewall-02',
            x: 348,
            y: 88,
            label: '防火墙',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,[encoded data, 9756 characters]',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'server-01',
            x: -95,
            y: 205,
            label: '服务器',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,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',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'server-02',
            x: 348,
            y: 205,
            label: '服务器',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,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',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'database-01',
            x: 125,
            y: 150,
            label: '数据库',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,[encoded data, 4772 characters]',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          },
          {
            id: 'database-02',
            x: 125,
            y: 290,
            label: '数据库',
            labelCfg: {
              position: 'bottom'
            },
            type: 'top-image',
            img: 'data:image/png;base64,[encoded data, 4772 characters]',
            size: [55, 55],
            width: 48,
            height: 48,
            anchorPoints: [
              [0.5, 0], // top
              [1, 0.5], // right
              [0.5, 1], // bottom
              [0, 0.5] // left
            ],
            appState: {
              alert: false
            },
            appConfig: {
              ip: '',
              port: '',
              sysName: ''
            }
          }
        ],
        edges: [
          {
            id: 'edge-01',
            source: 'client-03',
            sourceAnchor: 2,
            target: 'firewall-02',
            type: 'cc-line',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 0
          },
          {
            id: 'edge-02',
            source: 'client-01',
            sourceAnchor: 2,
            target: 'firewall-01',
            type: 'cc-polyline',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 0
          },
          {
            id: 'edge-03',
            source: 'client-02',
            sourceAnchor: 2,
            target: 'firewall-02',
            type: 'cc-polyline',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 3
          },
          {
            id: 'edge-04',
            source: 'firewall-02',
            sourceAnchor: 2,
            target: 'server-02',
            type: 'cc-cubic',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 0
          },
          {
            id: 'edge-05',
            source: 'firewall-01',
            sourceAnchor: 2,
            target: 'server-01',
            type: 'cc-cubic',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 0
          },
          {
            id: 'edge-06',
            source: 'server-01',
            sourceAnchor: 1,
            target: 'database-01',
            type: 'cc-line',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 3
          },
          {
            id: 'edge-07',
            source: 'database-01',
            sourceAnchor: 1,
            target: 'server-02',
            type: 'cc-line',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 3
          },
          {
            id: 'edge-08',
            source: 'server-02',
            sourceAnchor: 3,
            target: 'database-02',
            type: 'cc-line',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 1
          },
          {
            id: 'edge-09',
            source: 'database-02',
            sourceAnchor: 3,
            target: 'server-01',
            type: 'cc-line',
            style: {
              stroke: '#A3B1BF',
              lineWidth: 2,
              strokeOpacity: 0.92,
              lineAppendWidth: 10,
              startArrow: false,
              endArrow: false
            },
            labelCfg: {
              position: 'center',
              autoRotate: false
            },
            targetAnchor: 1
          }
        ]
      },
      nodeTypeList: [
        // { guid: 'blue', label: '蓝色', imgSrc: require('../../assets/images/blue.svg') },
        // { guid: 'green', label: '绿色', imgSrc: require('@/assets/images/green.svg') },
        // { guid: 'purple', label: '紫色', imgSrc: require('@/assets/images/purple.svg') }
      ],
      // 节点配置
      nodeAppConfig: {
        ip: '节点IP',
        port: '节点端口',
        sysName: '设备名称'
      },
      autoRefreshTimer: null
    }
  },
  mounted() {
    let graphData = deepClone(this.graphData)
    this.$refs.topology.initTopo(graphData)
    this.randomChange()
  },
  methods: {
    doAutoRefresh(interval) {
      if (interval === -1) {
        clearInterval(this.autoRefreshTimer)
      } else {
        clearInterval(this.autoRefreshTimer)
        this.autoRefreshTimer = setInterval(() => {
          this.randomChange()
        }, interval)
        this.$once('hook:beforeDestroy', () => {
          clearInterval(this.autoRefreshTimer)
        })
      }
    },
    doChangeMode(graphMode) {
      clearInterval(this.autoRefreshTimer)
      let graphData = deepClone(this.graphData)
      this.$refs.topology.changeGraphMode(graphData, graphMode)
    },
    doManualRefresh() {
      this.randomChange()
    },
    doSaveData(graphData) {
      console.log(JSON.stringify(graphData))
    },
    randomChange() {
      let graphData = deepClone(this.$refs.topology.getGraphData())
      // let { nodes, edges } = graphData
      // let randomIdx = Math.floor((Math.random() * nodes.length))
      // let randomNodeIds = getRandomArrayElements(nodes, 1).map(x => {
      //   return x.id
      // })
      //todo 设置报警状态
      // for (let i = 0, len = nodes.length; i < len; i++) {
      //   let node = nodes[i]
      //   if (randomNodeIds.indexOf(node.id) > -1) {
      //     node.description = `<p class="tooltips-title text-center">${node.label}</p>
      //           <table class="tooltips-table">
      //           <tr>
      //           <td style="text-align:left;color:#303133">设备IP: 10.5.97.1</td>
      //           </tr>
      //           <tr>
      //           <td style="text-align:left;color:#303133">设备名称: chaincloud-01</td>
      //           </tr>
      //           <tr>
      //           <td style="text-align:left;color:#ff0000">CPU使用率: 99%</td>
      //           </tr>
      //           <tr>
      //           <td style="text-align:left;color:#ff0000">内存使用率: 72%</td>
      //           </tr>
      //           <tr>
      //           <td style="text-align:left;color:#303133">最近刷新时间: 2021-10-23 16:04:13</td>
      //           </tr>
      //           </table>`
      //     node.appState.alert = true
      //   } else {
      //     node.description = `<div>${node.label}</div>`
      //     node.appState.alert = false
      //   }
      // }
      this.$refs.topology.changeGraphData(graphData)
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-topology {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
html {
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>
