visualization-design/src/services/defaults.ts

import { Pen, FormItem } from '@meta2d/core';
import { cdn } from './api';

export const lineDashObj = [
  undefined,
  [5, 5],
  [10, 10],
  [10, 10, 2, 10],
  [1, 16],
];

/**
 * 默认动画
 */
export const normalAnimate: any = {
  upDown: [
    {
      y: -10,
      duration: 100,
    },
    { y: 0, duration: 100 },
    { y: -10, duration: 200 },
  ],
  leftRight: [
    {
      x: -10,
      duration: 100,
    },
    {
      x: 10,
      duration: 80,
    },
    {
      x: -10,
      duration: 50,
    },
    {
      x: 10,
      duration: 30,
    },
    {
      x: 0,
      duration: 300,
    },
  ],
  heart: [
    {
      // 通过 scale 来替代原版心跳
      scale: 1.1,
      duration: 100,
    },
    {
      scale: 1,
      duration: 400,
    },
  ],
  success: [{ background: '#389e0d22', color: '#237804', duration: 500 }],
  warning: [
    {
      color: '#fa8c16',
      lineDash: [10, 10],
      duration: 300,
    },
    {
      color: '#fa8c16',
      lineDash: undefined,
      duration: 500,
    },
    {
      color: '#fa8c16',
      lineDash: [10, 10],
      duration: 300,
    },
  ],
  error: [{ color: '#cf1322', background: '#cf132222', duration: 100 }],
  show: [
    {
      color: '#fa541c',
      rotate: -10,
      duration: 100,
    },
    {
      color: '#fa541c',
      rotate: 10,
      duration: 100,
    },
    {
      color: '#fa541c',
      rotate: 0,
      duration: 100,
    },
  ],
  rotate: [
    {
      rotate: 360,
      duration: 1000,
    },
  ],
};

export const defaultFormat: Pen = {
  borderRadius: 0,
  rotate: 0,
  paddingLeft: 0,
  paddingRight: 0,
  paddingTop: 0,
  paddingBottom: 0,
  progress: 0,
  progressColor: '#fff0',
  verticalProgress: false,
  flipX: false,
  flipY: false,
  input: false,
  lineDash: [],
  lineCap: 'round',
  lineJoin: 'round',
  strokeType: 0,
  lineGradientFromColor: undefined,
  lineGradientToColor: undefined,
  lineGradientAngle: 0,
  // color: "#222",
  hoverColor: undefined,
  activeColor: undefined,
  lineWidth: 1,
  bkType: 0,
  gradientFromColor: undefined,
  gradientToColor: undefined,
  gradientAngle: 0,
  gradientRadius: 0,
  hoverBackground: undefined,
  activeBackground: undefined,
  globalAlpha: 1,
  anchorColor: undefined,
  anchorRadius: 0,
  shadowColor: undefined,
  shadowBlur: 0,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  textHasShadow: undefined,
  fontFamily: undefined,
  fontSize: 0,
  textColor: undefined,
  hoverTextColor: undefined,
  activeTextColor: undefined,
  textBackground: undefined,
  fontStyle: undefined,
  fontWeight: undefined,
  textAlign: undefined,
  textBaseline: undefined,
  lineHeight: 0,
  whiteSpace: undefined,
  textWidth: 0,
  textHeight: 0,
  textLeft: 0,
  textTop: 0,
  ellipsis: false,
  hiddenText: false,
  keepDecimal: 0,
  borderWidth: 0,
  borderColor: undefined,
  animateLineWidth: 0,
  lineAnimateType: 0,
  frames: [],
  animateColor: undefined,
  // animateType: undefined,
  animateReverse: false,
  background: '#fff0',
  gradientColors: undefined,
  lineGradientColors: undefined,
  gradientSmooth: 0,
};

export interface FormItemType extends FormItem {
  key: string; // 属性标识，绑定变量时使用
  key2?: string; // 有些属性存在嵌套
  name: string; // 标题
  tips?: string; // 提示
  placeholder?: string; // input placeholder
  type:
    | 'text' // string 类型输入框
    | 'number'
    | 'color'
    | 'textarea'
    | 'select'
    | 'switch'
    | 'code'
    | 'image'
    | 'icon'
    | 'slider'
    | 'autoComplete'
    | 'label'; // 文字，不含输入框;
  options?: {
    // 选项
    label: string; // 选项的标题，可以使用 html
    value: any; // 选项的值
    disabled?: boolean;
  }[];
  min?: number; // 最小值
  max?: number; // 最大值
  step?: number; // 步长
  rows?: number; // textarea 所需要的行数
  iconFamily?: string; // icon 类型节点需要
  title?: string; // code 类型编辑器需要
  language?: 'javascript' | 'json' | 'markdown'; // code 编辑器需要
  readonly?: boolean; // 是否只读
  mode?: 'multiple' | 'tags'; // select 选项
  isNotString?: boolean; // monaco 需要 string 类型的 code ，不是 string 协助转换

  multiple?: boolean; // 绑定多个属性
  isTime?: boolean; // 是否是时序的， undefined 不会出现 历史趋势 的 checkbox
  isYCategory?: boolean; // y 轴是否是分类，true y 轴分类，false x 轴分类，undefined 不会出现 y轴分类轴 的 checkbox
  // 绑定单个属性是对象， 多个数组
  // dataIds?: BindId | BindId[]; // 关联业务数据
  precision?: number; //精度
  gradient?: boolean; //是否为渐变色
  hidden?: boolean; //是否隐藏
}

export const iframeCustom = [
  {
    key: 'iframe',
    label: '网页地址',
    type: 'string',
  },
  {
    key: 'zIndex',
    label: 'dom层级(z-index)',
    type: 'number',
    min: 0,
    placeholder: '默认4',
  },
  {
    key: 'operationalRect.x',
    label: '可操作x',
    type: 'number',
    min: 0,
    max: 1,
    placeholder: '范围0-1',
  },
  {
    key: 'operationalRect.y',
    label: '可操作y',
    type: 'number',
    min: 0,
    max: 1,
    placeholder: '范围0-1',
  },
  {
    key: 'operationalRect.width',
    label: '可操作宽度',
    type: 'number',
    min: 0,
    max: 1,
    placeholder: '范围0-1',
  },
  {
    key: 'operationalRect.height',
    label: '可操作高度',
    type: 'number',
    min: 0,
    max: 1,
    placeholder: '范围0-1',
  },
  {
    key: 'blur',
    label: '背景模糊',
    type: 'number',
    min: 0,
  },
  {
    key: 'blurBackground',
    label: '毛玻璃颜色',
    type: 'color',
  },
];

export const shapes = [
  {
    name: '基本形状',
    show: true,
    list: [
      {
        name: '正方形',
        icon: 'l-rect',
        id: 1,
        data: {
          width: 100,
          height: 100,
          name: 'square',
        },
      },
      {
        name: '矩形',
        icon: 'l-rectangle',
        id: 2,
        data: {
          width: 200,
          height: 50,
          borderRadius: 0.1,
          name: 'rectangle',
        },
      },
      {
        name: '圆',
        icon: 'l-circle',
        id: 3,
        data: {
          width: 100,
          height: 100,
          name: 'circle',
        },
      },
      {
        name: '三角形',
        icon: 'l-triangle',
        id: 4,
        data: {
          width: 100,
          height: 100,
          name: 'triangle',
        },
      },
      {
        name: '菱形',
        icon: 'l-diamond',
        id: 5,
        data: {
          width: 100,
          height: 100,
          name: 'diamond',
        },
      },
      {
        name: '五边形',
        icon: 'l-pentagon',
        id: 6,
        data: {
          width: 100,
          height: 100,
          name: 'pentagon',
        },
      },
      {
        name: '六边形',
        icon: 'l-hexagon',
        id: 7,
        data: {
          width: 100,
          height: 100,
          name: 'hexagon',
        },
      },
      {
        name: '五角星',
        icon: 'l-pentagram',
        id: 8,
        data: {
          width: 100,
          height: 100,
          name: 'pentagram',
        },
      },
      {
        name: '左箭头',
        icon: 'l-arrow-left',
        id: 9,
        data: {
          width: 120,
          height: 60,
          name: 'leftArrow',
        },
      },
      {
        name: '右箭头',
        icon: 'l-arrow-right',
        id: 10,
        data: {
          width: 120,
          height: 60,
          name: 'rightArrow',
        },
      },
      {
        name: '双向箭头',
        icon: 'l-twoway-arrow',
        id: 11,
        data: {
          width: 150,
          height: 60,
          name: 'twowayArrow',
        },
      },
      {
        name: '云',
        icon: 'l-cloud',
        id: 13,
        data: {
          width: 100,
          height: 100,
          name: 'cloud',
        },
      },
      {
        name: '消息框',
        icon: 'l-msg',
        id: 14,
        data: {
          textTop: -0.1,
          width: 100,
          height: 100,
          name: 'message',
        },
      },
      {
        name: '文件',
        icon: 'l-file',
        id: 15,
        data: {
          width: 80,
          height: 100,
          name: 'file',
        },
      },
      {
        name: '立方体',
        icon: 'l-cube',
        id: 18,
        data: {
          width: 60,
          height: 100,
          name: 'cube',
          z: 0.25,
          props: {
            custom: [
              {
                key: 'z',
                label: 'Z',
                type: 'number',
                min: 0,
                placeholder: '<= 1 即宽度的比例',
              },
              {
                key: 'backgroundFront',
                label: '前背景色',
                type: 'color',
              },
              {
                key: 'backgroundUp',
                label: '顶背景色',
                type: 'color',
              },
              {
                key: 'backgroundRight',
                label: '右背景色',
                type: 'color',
              },
            ],
          },
        },
      },
      {
        name: '人',
        icon: 'l-people',
        id: 19,
        data: {
          width: 70,
          height: 100,
          name: 'people',
        },
      },
    ],
  },
  {
    name: '脑图',
    show: true,
    list: [
      {
        name: '主题',
        icon: 'l-zhuti',
        data: {
          text: '主题',
          width: 200,
          height: 50,
          name: 'mindNode',
          borderRadius: 0.5,
        },
      },
      {
        name: '子主题',
        icon: 'l-zizhuti',
        data: {
          text: '子主题',
          width: 160,
          height: 40,
          name: 'mindLine',
        },
      },
    ],
  },
  {
    name: '流程图',
    show: true,
    list: [
      {
        name: '开始/结束',
        icon: 'l-flow-start',
        id: 21,
        data: {
          text: '开始/结束',
          width: 120,
          height: 40,
          borderRadius: 0.5,
          name: 'rectangle',
        },
      },
      {
        name: '流程',
        icon: 'l-rectangle',
        id: 22,
        data: {
          text: '流程',
          width: 120,
          height: 40,
          name: 'rectangle',
        },
      },
      {
        name: '判定',
        icon: 'l-diamond',
        id: 23,
        data: {
          text: '判定',
          width: 120,
          height: 60,
          name: 'diamond',
        },
      },
      {
        name: '数据',
        icon: 'l-flow-data',
        id: 24,
        data: {
          text: '数据',
          width: 120,
          height: 50,
          name: 'flowData',
          offsetX: 0.14,
          form: [
            {
              key: 'offsetX',
              name: '斜率',
              type: 'number',
              min: 0,
              step: 0.1,
              placeholder: '<= 1 即宽度的比例',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '准备',
        icon: 'l-flow-ready',
        id: 25,
        data: {
          text: '准备',
          width: 120,
          height: 50,
          name: 'hexagon',
        },
      },
      {
        name: '子流程',
        icon: 'l-flow-subprocess',
        id: 26,
        data: {
          text: '子流程',
          width: 120,
          height: 50,
          name: 'flowSubprocess',
        },
      },
      {
        name: '数据库',
        icon: 'l-db',
        id: 27,
        data: {
          text: '数据库',
          width: 80,
          height: 120,
          name: 'flowDb',
        },
      },
      {
        name: '文档',
        icon: 'l-flow-document',
        id: 28,
        data: {
          text: '文档',
          width: 120,
          height: 100,
          name: 'flowDocument',
        },
      },
      {
        name: '内部存储',
        icon: 'l-internal-storage',
        id: 29,
        data: {
          text: '内部存储',
          width: 120,
          height: 80,
          name: 'flowInternalStorage',
        },
      },
      {
        name: '外部存储',
        icon: 'l-extern-storage',
        id: 30,
        data: {
          text: '外部存储',
          width: 120,
          height: 80,
          name: 'flowExternStorage',
        },
      },
      {
        name: '队列',
        icon: 'l-flow-queue',
        id: 31,
        data: {
          text: '队列',
          width: 100,
          height: 100,
          name: 'flowQueue',
        },
      },
      {
        name: '手动输入',
        icon: 'l-flow-manually',
        id: 32,
        data: {
          text: '手动输入',
          width: 120,
          height: 80,
          name: 'flowManually',
        },
      },
      {
        name: '展示',
        icon: 'l-flow-display',
        id: 33,
        data: {
          text: '展示',
          width: 120,
          height: 80,
          name: 'flowDisplay',
        },
      },
      {
        name: '并行模式',
        icon: 'l-flow-parallel',
        id: 34,
        data: {
          text: '并行模式',
          width: 120,
          height: 50,
          name: 'flowParallel',
        },
      },
      {
        name: '注释',
        icon: 'l-flow-comment',
        id: 35,
        data: {
          text: '注释',
          width: 100,
          height: 100,
          name: 'flowComment',
        },
      },
    ],
  },
  {
    name: '活动图',
    show: true,
    list: [
      {
        name: '开始',
        icon: 'l-inital',
        id: 36,
        data: {
          text: '',
          width: 30,
          height: 30,
          name: 'circle',
          background: '#555',
          lineWidth: 0,
        },
      },
      {
        name: '结束',
        icon: 'l-final',
        id: 37,
        data: {
          width: 30,
          height: 30,
          name: 'activityFinal',
        },
      },
      {
        name: '活动',
        icon: 'l-action',
        id: 38,
        data: {
          text: '活动',
          width: 120,
          height: 50,
          borderRadius: 0.25,
          name: 'rectangle',
        },
      },
      {
        name: '决策/合并',
        icon: 'l-diamond',
        id: 39,
        data: {
          text: '决策/合并',
          width: 120,
          height: 50,
          name: 'diamond',
        },
      },
      {
        name: '垂直泳道',
        icon: 'l-swimlane-v',
        id: 40,
        data: {
          text: '垂直泳道',
          width: 200,
          height: 500,
          name: 'swimlaneV',
          textBaseline: 'top',
          textTop: 20,
          // textHeight: ,
          lineTop: 0.08,
        },
      },
      {
        name: '水平泳道',
        icon: 'l-swimlane-h',
        id: 41,
        data: {
          text: '水平泳道',
          width: 500,
          height: 200,
          name: 'swimlaneH',
          textWidth: 0.01,
          textLeft: 0.04,
          textAlign: 'left',
          lineLeft: 0.08,
        },
      },
      {
        name: '垂直分岔/汇合',
        icon: 'l-fork-v',
        id: 42,
        data: {
          text: '垂直分岔/汇合',
          width: 10,
          height: 150,
          name: 'forkV',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
      {
        name: '水平分岔/汇合',
        icon: 'l-fork',
        id: 43,
        data: {
          text: '水平分岔/汇合',
          width: 150,
          height: 10,
          name: 'forkH',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
    ],
  },
  {
    name: '时序图和类图',
    show: true,
    list: [
      {
        name: '生命线',
        icon: 'l-lifeline',
        id: 44,
        data: {
          text: '生命线',
          width: 150,
          height: 400,
          textHeight: 50,
          name: 'lifeline',
        },
      },
      {
        name: '激活',
        icon: 'l-focus',
        id: 45,
        data: {
          text: '激活',
          width: 12,
          height: 200,
          name: 'sequenceFocus',
        },
      },
      {
        name: '简单类',
        icon: 'l-simple-class',
        id: 46,
        data: {
          text: 'Topolgoy',
          width: 270,
          height: 200,
          textHeight: 200,
          name: 'simpleClass',
          textAlign: 'center',
          textBaseline: 'top',
          textTop: 10,
          list: [
            {
              text: '- name: string\n+ setName(name: string): void',
            },
          ],
        },
      },
      {
        name: '类',
        icon: 'l-class',
        id: 47,
        data: {
          text: 'Topolgoy',
          width: 270,
          height: 200,
          textHeight: 200,
          name: 'interfaceClass',
          textAlign: 'center',
          textBaseline: 'top',
          textTop: 10,
          list: [
            {
              text: '- name: string',
            },
            {
              text: '+ setName(name: string): void',
            },
          ],
        },
      },
    ],
  },

  {
    name: '故障树',
    show: true,
    list: [
      {
        name: '与门',
        icon: 'l-ANDmen',
        data: {
          name: 'andGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '基本事件',
        icon: 'l-jibenshijian',
        data: {
          name: 'basicEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: '未展开事件',
        icon: 'l-weizhankaishijian',
        data: {
          name: 'unexpandedEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: '优先AND门',
        icon: 'l-youxianANDmen',
        data: {
          name: 'priorityAndGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '禁止门',
        icon: 'l-jinzhimen',
        data: {
          name: 'forbiddenGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '事件',
        icon: 'l-shijian',
        data: {
          name: 'event',
          width: 100,
          height: 150,
        },
      },
      {
        name: '开关事件',
        icon: 'l-kaiguanshijian',
        data: {
          name: 'switchEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: '条件事件',
        icon: 'l-tiaojianshijian',
        data: {
          name: 'conditionalEvent',
          width: 150,
          height: 100,
        },
      },
      {
        name: '转移符号',
        icon: 'l-zhuanyifuhao',
        data: {
          name: 'transferSymbol',
          width: 100,
          height: 150,
        },
      },
      {
        name: '或门',
        icon: 'l-ORmen',
        data: {
          name: 'orGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '异或门',
        icon: 'l-yihuomen',
        data: {
          name: 'xorGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '表决门',
        icon: 'l-biaojuemen',
        data: {
          name: 'votingGate',
          width: 100,
          height: 150,
        },
      },
    ],
  },
];

export const formComponents = [
  {
    name: '基础',
    show: true,
    list: [
      {
        name: '文本',
        icon: 'l-wenben',
        data: {
          width: 160,
          height: 30,
          name: 'text',
          text: '乐吾乐le5le - 大屏可视化',
          textAutoAdjust: true,
          props: {
            custom: [
              {
                key: 'textAutoAdjust',
                label: '文本自动大小',
                type: 'bool',
              },
            ],
          },
        },
      },
      {
        name: '数字',
        icon: 'l-shuzi',
        data: {
          width: 160,
          height: 30,
          name: 'text',
          text: '3.1415926',
          keepDecimal: 2,
        },
      },
      {
        name: '进度条',
        icon: 'l-jindutiao',
        data: {
          anchors: [],
          disableAnchor: true,
          name: 'progress',
          width: 164,
          height: 6,
          borderRadius: 0.5,
          progressColor: '#4583FF',
          progress: 0.8,
          background: '#303746',
          disableInput: true,
          lineWidth: 0,
          borderWidth: 0,
          props: {
            custom: [
              {
                key: 'progress',
                label: '进度',
                type: 'number',
                max: 1,
                min: 0,
              },
              {
                key: 'progressColor',
                label: '进度颜色',
                type: 'color',
              },
            ],
          },
        },
      },
      {
        name: '图标',
        icon: 'l-tubiao',
        data: {
          width: 100,
          height: 100,
          name: 'image',
          icon: '\uea86',
          iconFamily: 'l-icon',
        },
      },
      {
        name: '图片',
        icon: 'l-tupian',
        data: {
          width: 100,
          height: 100,
          name: 'image',
          image: (cdn ? cdn + '/v' : '') + '/img/logo.png',
        },
      },
      {
        name: 'GIF',
        icon: 'l-GIF',
        data: {
          width: 100,
          height: 100,
          name: 'gif',
          image: (cdn ? cdn + '/v' : '') + '/png/电信机房/防火墙.gif',
        },
      },
      {
        name: '视频',
        icon: 'l-shipin',
        data: {
          width: 200,
          height: 200,
          externElement: true,
          name: 'video',
          video:
            'https://video.699pic.com/videos/17/69/11/a_aa3jeKZ0D63g1556176911_10s.mp4',
          props: {
            custom: [
              {
                key: 'video',
                label: '视频地址',
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: 'FLV视频流',
        icon: 'l-pc',
        data: {
          name: 'flvPlayerDom',
          width: 477,
          height: 268,
          externElement: true,
          video:
            'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv',
          mediaDataSource: {},
          optionalConfig: {},
          props: {
            custom: [
              {
                key: 'video',
                label: '视频地址',
                type: 'string',
              },
              {
                key: 'mediaDataSource',
                label: '媒体数据源',
                type: 'code',
                placeholder:
                  '具体配置参考:https://github.com/bilibili/flv.js/blob/master/docs/api.md',
              },
              {
                key: 'optionalConfig',
                label: '配置',
                type: 'code',
                placeholder:
                  '具体配置参考:https://github.com/bilibili/flv.js/blob/master/docs/api.md',
              },
            ],
          },
        },
      },
      {
        name: '音频',
        icon: 'l-yinpin',
        data: {
          width: 200,
          height: 40,
          externElement: true,
          name: 'video',
          audio: 'https://www.xzmp3.com/down/597caee79849.mp3',
          props: {
            custom: [
              {
                key: 'audio',
                label: '视频地址',
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: '头像',
        icon: 'l-touxiang',
        data: {
          width: 30,
          height: 30,
          disableAnchor: true,
          name: 'square',
          lineWidth: 0,
          image: (cdn ? cdn + '/v' : '') + '/img/avatar.png',
          imageRadius: 0.5,
          background: '#689f38',
          borderRadius: 0.5,
          ratio: true,
        },
      },
      {
        name: '徽标',
        icon: 'l-huibiao',
        data: {
          width: 35,
          height: 20,
          name: 'square',
          borderRadius: 0.5,
          lineWidth: 0,
          background: '#d54941',
          color: '#fff',
          text: '99+',
        },
      },
      {
        name: '标签',
        icon: 'l-biaoqian',
        data: {
          text: 'success',
          width: 80,
          height: 24,
          borderRadius: 0.1,
          name: 'rectangle',
          lineWidth: 1,
          fontSize: 12,
          icon: '\uea10',
          iconFamily: 'l-icon',
          iconColor: '#FFFFFF99', //#52c41a
          iconSize: 12,
          iconAlign: 'left',
          iconLeft: 8,
          textAlign: 'right',
          color: '#FFFFFFAA',
          background: '#282E3B', //#f6ffed
          textLeft: -6,
        },
      },
    ],
  },
  {
    name: '时间',
    show: true,
    list: [
      {
        name: '时间',
        icon: 'l-clock',
        data: {
          name: 'time',
          width: 300,
          height: 40,
          text: '当前时间',
          lineWidth: 0,
          timeFormat:
            '`${year}-${month}-${day} ${hours}:${minutes}:${seconds} 星期${week}`',
          props: {
            custom: [
              {
                key: 'timeFormat',
                label: '显示格式',
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: '倒计时',
        icon: 'l-daojishi',
        data: {
          name: 'countdown',
          width: 300,
          height: 40,
          text: '倒计时',
          deadline: '2024/1/1 00:00:00', //配置未来的时间
          borderWidth: 0,
          timeFormat:
            '`距离2024年还有：${day}天${hours}时${minutes}分${seconds}秒`',
          props: {
            custom: [
              {
                key: 'timeFormat',
                label: '显示格式',
                type: 'string',
              },
              {
                key: 'deadline',
                label: '截止时间',
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: '水平时间轴',
        icon: 'l-shuipingshijianzhou',
        data: {
          name: 'timeline',
          width: 300,
          height: 40,
          hiddenText: true,
          direction: 'horizontal',
          labelAlign: 'top', //left/right/alternate/top/bottom
          mode: 'alternate', //alternate
          data: [
            {
              label: '2022-01-01',
              content: '事件一',
              circleBg: '#BFDBFF',
              circleShadow: '#4583FF33',
              color: '#BFDBFF',
              textColor: '#FFFFFF',
              // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
            },
            {
              label: '2022-02-01',
              content: '事件二',
              circleBg: '#BFDBFF',
              circleShadow: '#4583FF33',
              textColor: '#FFFFFF',
            },
            {
              label: '2022-03-01',
              content: '事件三',
              textColor: '#FFFFFF66',
            },
            {
              label: '2022-04-01',
              content: '事件四',
              textColor: '#FFFFFF66',
            },
          ],
          text: '时间轴',
          props: {
            custom: [
              {
                key: 'mode',
                label: '标签分布',
                type: 'select',
                options: [
                  { label: '同侧', value: 'same' },
                  { label: '交叉', value: 'alternate' },
                ],
              },
              {
                key: 'labelAlign',
                label: '标签对齐',
                type: 'select',
                options: [
                  { label: '顶部', value: 'top' },
                  { label: '底部', value: 'bottom' },
                ],
              },
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '垂直时间轴',
        icon: 'l-chuizhishijianzhou',
        data: {
          name: 'timeline',
          width: 40,
          height: 300,
          text: '时间轴',
          hiddenText: true,
          direction: 'vertical',
          labelAlign: 'left', //left/right/alternate/top/bottom
          mode: 'alternate', //alternate
          data: [
            {
              label: '2022-01-01',
              content: '事件一',
              circleBg: '#BFDBFF',
              circleShadow: '#4583FF33',
              color: '#BFDBFF',
              textColor: '#FFFFFF',
              // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
            },
            {
              label: '2022-02-01',
              content: '事件二',
              circleBg: '#BFDBFF',
              circleShadow: '#4583FF33',
              textColor: '#FFFFFF',
            },
            {
              label: '2022-03-01',
              content: '事件三',
              textColor: '#FFFFFF66',
            },
            {
              label: '2022-04-01',
              content: '事件四',
              textColor: '#FFFFFF66',
            },
          ],
          props: {
            custom: [
              {
                key: 'mode',
                label: '标签分布',
                type: 'select',
                options: [
                  { label: '同侧', value: 'same' },
                  { label: '交叉', value: 'alternate' },
                ],
              },
              {
                key: 'labelAlign',
                label: '标签对齐',
                type: 'select',
                options: [
                  { label: '靠左', value: 'left' },
                  { label: '靠右', value: 'right' },
                ],
              },
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '日历(日期)',
        icon: 'l-rili',
        data: {
          width: 280,
          height: 326,
          hiddenText: true,
          name: 'calendar',
          background: '#fff0',
          hoverTextColor: '#fff',
          dbInput: true,
          // input: true,
          text: '8月',
        },
      },
      {
        name: '日历（日期时间）',
        icon: 'l-rili',
        data: {
          width: 496,
          height: 326,
          hiddenText: true,
          name: 'calendar',
          background: '#fff0',
          hoverTextColor: '#fff',
          dbInput: true,
          // input: true,
          text: '8月',
          calendarType: 'time',
        },
      },
    ],
  },
  {
    name: '面板',
    show: true,
    list: [
      {
        name: '列表',
        icon: 'l-liebiao',
        data: {
          width: 400,
          height: 200,
          name: 'list',
          headingColor: '#FFFFFFE6',
          headingSize: 16,
          background: '#282E3B',
          textColor: '#FFFFFF66',
          hoverTextColor: '#FFFFFF66',
          data: [
            {
              title: '列表标题',
              description: '列表内容的描述性文字',
            },
            {
              title: '列表标题',
              description: '列表内容的描述性文字',
            },
            {
              title: '列表标题',
              description: '列表内容的描述性文字',
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '表格',
        icon: 'l-biaoge',
        data: {
          name: 'table2',
          width: 0,
          height: 0,
          disableAnchor: true,
          colWidth: 150,
          rowHeight: 40,
          data: [
            ['设备 ID', '设备名称', '数据协议', '状态', '操作'],
            ['1', '200', 'MQTT', '正在运行', {}],
            ['2', '湿度传感器', 'MQTT', '正在运行', {}],
            ['3', '物联网设备', 'MQTT', '正在运行', {}],
            ['4', '物联网设备/智能家居/智慧城市', 'MQTT', '正在运行', {}],
          ],
          styles: [
            {
              row: 1,
              col: 1,
              color: '#ff0000',
              background: '#ffff00',
              wheres: [
                //触发条件 成立后才允许配置样式
                {
                  comparison: '<=',
                  value: '123',
                },
              ],
            },
            {
              row: 0,
              height: 60,
            },
            {
              col: 4,
              width: 200, //为该列设置额外的节点
              pens: [
                {
                  name: 'rectangle',
                  width: 50,
                  height: 20,
                  text: '编辑',
                  fontSize: 0.6,
                  disableAnchor: true,
                  activeBackground: '#2D71EC',
                  activeColor: '#40a9ff',
                  background: '#4583FF',
                  color: '#1890ff',
                  hoverBackground: '#7DA4FF',
                  hoverColor: '#40a9ff',
                  textColor: '#ffffff',
                  hoverTextColor: '#ffffff',
                  activeTextColor: '#ffffff',
                  events: [
                    {
                      action: 5,
                      name: 'click',
                      value: 'alert("点击了编辑")',
                    },
                  ],
                },
                {
                  name: 'rectangle',
                  width: 80,
                  height: 20,
                  text: '实时数据',
                  fontSize: 0.6,
                  disableAnchor: true,
                  activeBackground: '#2D71EC',
                  activeColor: '#40a9ff',
                  background: '#4583FF',
                  color: '#1890ff',
                  hoverBackground: '#7DA4FF',
                  hoverColor: '#40a9ff',
                  textColor: '#ffffff',
                  hoverTextColor: '#ffffff',
                  activeTextColor: '#ffffff',
                  events: [
                    {
                      action: 5,
                      name: 'click',
                      value: 'alert("点击了实时数据")',
                    },
                  ],
                },
              ],
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'styles',
                label: '样式',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '斑马纹表格',
        icon: 'l-biaoge',
        data: {
          name: 'table2',
          width: 0,
          height: 0,
          disableAnchor: true,
          colWidth: 90,
          rowHeight: 32,
          bordered: false,
          vLine: false,
          hLine: false,
          stripe: true,
          stripeColor: '#407FFF1F', //'#15181c',
          // hasHeader: false,
          textColor: '#FFFFFF',
          data: [
            ['设备 ID', '设备名称', '数据协议', '级别'],
            [
              '1',
              '200',
              'MQTT',
              {
                text: '一级告警',
                // background: '#650b09',
                textColor: '#FF5D3CFF',
              },
            ],
            [
              '2',
              '湿度传感器',
              'MQTT',
              {
                text: '二级告警',
                // background: '#4d2a02',
                textColor: '#E6A82EFF',
              },
            ],
            [
              '3',
              '物联网设备',
              'MQTT',
              {
                text: '一级告警',
                // background: '#650b09',
                textColor: '#FF5D3CFF',
              },
            ],
            [
              '4',
              '物联网设备/智能家居/智慧城市',
              'MQTT',
              {
                text: '三级告警',
                textColor: '#58CC84FF',
                // background: '#042617;',
              },
            ],
          ],
          styles: [
            {
              row: 0,
              textColor: '#ffffff66',
            },
            {
              col: 3,
              pens: [
                {
                  name: 'rectangle',
                  width: 56,
                  height: 20,
                  fontSize: 0.6,
                  disableAnchor: true,
                  lineWidth: 0,
                },
              ],
            },
          ],
          props: {
            custom: [
              {
                key: 'stripe',
                label: '显示斑马纹',
                type: 'bool',
              },
              {
                key: 'stripeColor',
                label: '斑马纹颜色',
                type: 'color',
              },
              {
                key: 'bordered',
                label: '外边框',
                type: 'bool',
              },
              {
                key: 'hLine',
                label: '水平线',
                type: 'bool',
              },
              {
                key: 'vLine',
                label: '垂直线',
                type: 'bool',
              },
              {
                key: 'hasHeader',
                label: '有无头部',
                type: 'bool',
              },
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'styles',
                label: '样式',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '树',
        icon: 'l-shu', //l-shu
        data: {
          name: 'tree',
          width: 150,
          height: 210,
          expanded: ['1', '2'],
          fontSize: 20,
          disableInput: true,
          textColor: '#FFFFFF',
          hoverTextColor: '#FFFFFF',
          // iconFamily:'l-icon',
          // icon:'\ue607',
          data: [
            {
              key: '1',
              label: '1',
              children: [
                {
                  key: '1-1',
                  label: '1-1',
                },
                {
                  key: '1-1',
                  label: '1-2',
                },
              ],
            },
            {
              key: '2',
              label: '2',
              children: [
                {
                  key: '2-1',
                  label: '2-1',
                  children: [
                    {
                      key: '2-1-1',
                      label: '2-1-1',
                    },
                    {
                      key: '2-1-2',
                      label: '2-2-2',
                    },
                  ],
                },
                {
                  key: '2-2',
                  label: '2-2',
                },
              ],
            },
            {
              key: '3',
              label: '3',
            },
          ],
          props: {
            custom: [
              {
                key: 'expandAll',
                label: '展开全部节点',
                type: 'bool',
              },
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '网页',
        icon: 'l-iframe',
        data: {
          name: 'iframe',
          width: 500,
          height: 400,
          externElement: true,
          iframe: 'https://le5le.com',
          props: {
            custom: iframeCustom,
          },
        },
      },
    ],
  },
  {
    name: '提醒',
    show: true,
    list: [
      {
        name: '业务指标',
        icon: 'l-yewuzhibiao',
        data: {
          width: 115,
          height: 25,
          name: 'indicator',
          data: [
            {
              type: 'text',
              color: '#FFFFFFD9',
              x: 0,
              text: '业务指标',
            },
            {
              type: 'icon',
              x: 0.5,
              size: 0.5, //高度的倍数
              color: '#ff0000',
              background: '#f00',
              path: 'M116.77950993 500.07050546c15.9195644 15.9195644 41.65144342 15.9195644 57.57100785 0L471.28500154 203.13602167 471.28500154 919.14998461c0 22.47467916 18.24031931 40.71499846 40.71499846 40.71499845s40.71499846-18.24031931 40.71499846-40.71499845l0-716.01396294 296.93448376 296.93448379c15.9195644 15.9195644 41.65144342 15.9195644 57.57100785 0s15.9195644-41.65144342 1e-8-57.57100783l-366.43498616-366.39427116c-3.74577985-3.78649485-8.26514469-6.75868973-13.27308951-8.83515464C522.5858996 65.19360688 517.29294978 64.13501693 512 64.13501694s-10.5858996 1.05858996-15.55312942 3.13505489c-5.00794479 2.07646491-9.48659464 5.0486598-13.27308948 8.83515464l-366.43498616 366.39427115C100.85994556 458.41906201 100.85994555 484.15094105 116.77950993 500.07050546z',
            },
            {
              textColor: '#f00',
              type: 'text',
              color: '',
              x: 0.6,
              text: '20%',
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '全局消息',
        icon: 'l-quanjuxiaoxi',
        data: {
          width: 200,
          height: 40,
          text: '用于表示普通操作信息提示',
          borderRadius: 6,
          name: 'rectangle',
          icon: '\ue6e4',
          iconFamily: 'l-icon',
          iconColor: '#4583ff',
          iconSize: 17.5,
          iconAlign: 'left',
          iconLeft: 10,
          textAlign: 'left',
          color: 'rgba(235, 235, 235, 1)',
          background: '#282E3B',
          textLeft: 30,
          lineWidth: 0,
          shadow: false,
          textColor: '#FFFFFF',
          hoverTextColor: 'rgba(0, 0, 0, 1)',
          shadowColor: '#00000014',
          shadowOffsetX: 6,
          shadowOffsetY: 6,
          shadowBlur: 20,
        },
      },
      {
        name: '通知',
        icon: 'l-tongzhi',
        data: {
          width: 360,
          height: 178,
          text: '通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；',
          borderRadius: 6,
          name: 'notification',
          icon: '\ue6e4',
          iconFamily: 'l-icon',
          iconColor: '#4583ff',
          iconSize: 18,
          iconAlign: 'left-top',
          iconLeft: 15,
          iconTop: 20,
          textAlign: 'left',
          textBaseline: 'top',
          textLeft: 40,
          textTop: 50,
          color: 'rgba(235, 235, 235, 1)',
          background: '#282E3B',
          shadow: false,
          textColor: '#FFFFFF99',
          hoverTextColor: '#666666',
          shadowColor: '#0000000D',
          shadowOffsetX: 6,
          shadowOffsetY: 6,
          textWidth: 300,
          shadowBlur: 24,
          heading: '标题名称',
          headingColor: '#FFFFFFE6',
          headingSize: 16,
          // headingWeight: 'bold',
          props: {
            custom: [
              {
                key: 'heading',
                label: '标题',
                type: 'string',
              },
              {
                key: 'headingColor',
                label: '标题颜色',
                type: 'color',
              },
              {
                key: 'headingSize',
                label: '标题大小',
                type: 'number',
              },
              {
                key: 'headingWeight',
                label: '标题加粗',
                type: 'select',
                options: [
                  { label: '加粗', value: 'bold' },
                  { label: '正常', value: '' },
                ],
              },
            ],
          },
        },
      },
      // {
      //   name: '对话框',
      //   icon: 'l-pc',
      //   data: {
      //     width: 200,
      //     height: 200,
      //   },
      // },
    ],
  },
  {
    name: '轮播',
    show: true,
    list: [
      {
        name: '水平轮播',
        icon: 'l-paomadeng',
        data: {
          name: 'swiperline',
          width: 200,
          height: 40,
          data: ['轮播第一次数据', '轮播第二次数据', '轮播第三次数据'],
          hiddenText: true,
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'timeout',
                label: '轮播时间',
                type: 'number',
              },
            ],
          },
        },
      },
      {
        name: '垂直轮播',
        icon: 'l-chuizhigundong',
        data: {
          name: 'swiperline',
          width: 200,
          height: 24,
          direction: 'vertical',
          lineHeight: 2,
          data: ['轮播第一次数据', '轮播第二次数据', '轮播第三次数据'],
          hiddenText: true,
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'timeout',
                label: '轮播时间',
                type: 'number',
              },
            ],
          },
        },
      },
      {
        name: '轮播图',
        icon: 'l-lunbotu',
        data: {
          name: 'swiperDom',
          width: 400,
          height: 300,
          data: [
            {
              src: 'https://2ds.le5le.com/img/banner1.bc890350.png',
            },
            {
              src: 'https://2ds.le5le.com/img/banner2.adab6a6e.png',
            },
            {
              src: 'https://2ds.le5le.com/img/banner3.86b53aed.png',
            },
          ],
          hiddenText: true,
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '轮播页面',
        icon: 'l-lunboyemian',
        data: {
          name: 'swiperDom',
          width: 400,
          height: 300,
          swiperType: 'iframe',
          data: [
            {
              src: 'https://2d.le5le.com/preview?id=6357a9e2d44b9402de84d2e8',
            },
            {
              src: 'https://2d.le5le.com/preview?id=6357aec8d44b9402de84d2f1',
            },
            {
              src: 'https://2d.le5le.com/preview?id=641d524a8df2c654ea652d7e',
            },
          ],
          hiddenText: true,
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '导航',
    show: true,
    list: [
      {
        name: '链接',
        icon: 'l-lianjie',
        data: {
          text: '乐吾乐2D编辑器',
          width: 100,
          height: 30,
          name: 'text',
          textColor: '#0052d9',
          events: [
            {
              name: 'click',
              actions: [
                {
                  action: 0,
                  params: '_blank',
                  value: 'https://2d.le5le.com/',
                },
              ],
            },
          ],
        },
      },
      {
        name: '返回',
        icon: 'l-fanhui',
        data: {
          width: 40,
          height: 40,
          name: 'image',
          icon: '\ue697',
          iconFamily: 'l-icon',
          events: [
            {
              name: 'click',
              actions: [
                {
                  action: 5,
                  value: 'window.history.go(-1);',
                },
              ],
            },
          ],
        },
      },
      {
        name: '锚点',
        icon: 'l-anchor',
        data: {
          width: 40,
          height: 40,
          name: 'image',
          icon: '\uea7b',
          iconFamily: 'l-icon',
          events: [
            // {
            //   action: 5,
            //   name: 'click',
            //   params: 'pen.id/tag',
            //   value:
            //     'let pens = context.meta2d.find(params);\r\nif (!pens.length) {\r\n    pens = [pen]\r\n}\r\ncontext.meta2d.active(pens, true);\r\ncontext.meta2d.gotoView(pens[0]);\r\ncontext.meta2d.resize();\r\ncontext.meta2d.render();',
            //   where: { type: null },
            // },
            {
              name: 'click',
              actions: {
                action: 5,
                params: 'pen.id/tag',
                value:
                  'let pens = context.meta2d.find(params);\r\nif (!pens.length) {\r\n    pens = [pen]\r\n}\r\ncontext.meta2d.active(pens, true);\r\ncontext.meta2d.gotoView(pens[0]);\r\ncontext.meta2d.resize();\r\ncontext.meta2d.render();',
              },
            },
          ],
        },
      },
      {
        name: '回到顶部',
        icon: 'l-huidaodingbu',
        data: {
          width: 64,
          height: 64,
          name: 'rectangle',
          activeBackground: '#282E3B',
          background: '#282E3B',
          borderRadius: 0.1,
          color: '#eee',
          hoverBackground: '#282E3B',
          hoverColor: '#eee',
          hoverTextColor: '#FFFFFFE6',
          iconAlign: 'top',
          iconColor: '#FFFFFFE6',
          iconSize: 20,
          iconTop: 10,
          text: 'TOP',
          textBaseline: 'bottom',
          lineWidth: 0,
          textColor: '#FFFFFFE6',
          textTop: -2,
          icon: '\uec57',
          iconFamily: 'l-icon',
          events: [
            // {
            //   action: 5,
            //   name: 'click',
            //   // params: 'pen.id/tag',
            //   value: `
            //   const { scale, origin, y: dataY } = context.meta2d.store.data;
            //   context.meta2d.translate(
            //     0,
            //     ((parseInt(params)||32) * context.meta2d.store.data.scale - origin.y) / scale - dataY / scale
            //   );`,
            //   where: { type: null },
            // },
            {
              name: 'click',
              actions: [
                {
                  action: 0,
                  params: '_blank',
                  value: 'https://2d.le5le.com/',
                },
              ],
            },
          ],
        },
      },
      {
        name: '面包屑',
        icon: 'l-mianbaoxie', //l-mianbaoxie
        data: {
          name: 'breadcrumb',
          width: 200,
          height: 20,
          data: [
            {
              key: '1',
              text: '页面1',
              to: 'https://www.baidu.com',
              target: '_blank',
            },
            {
              key: '2',
              text: '页面2',
              to: 'https://2d.le5le.com/?id=641d524a8df2c654ea652d7e',
              target: '_blank',
            },
            {
              key: '3',
              text: '页面3',
              to: 'https://2d.le5le.com/?id=6357a9e2d44b9402de84d2e8',
              target: '_self',
            },
          ],
          props: {
            custom: [
              {
                key: 'gap',
                label: '间距',
                type: 'number',
                min: 0,
              },
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '下拉菜单',
        icon: 'l-xialacaidan',
        data: {
          name: 'headMenuDom',
          width: 650,
          height: 60,
          externElement: true,
          selectedKeys: ['1'],
          // activeColor: '#4E85E5',
          iconPosition: 'left',
          data: [
            {
              key: '1',
              icon: 'l-icon l-user',
              title: '个人中心',
              children: [
                {
                  key: '1-1',
                  icon: 'l-icon l-fly',
                  title: '测试测试',
                },
              ],
            },
            {
              key: '2',
              icon: 'l-icon l-panel',
              title: '安全运行',
            },
            {
              key: '3',
              icon: 'l-icon l-align-center',
              title: '智慧能源',
            },
            {
              key: '4',
              icon: 'l-icon l-kongzhuangtai1',
              title: '数据分析',
            },
            {
              key: '5',
              icon: 'l-icon l-quanjutishi',
              title: '运维管理',
            },
          ],
        },
      },
      {
        name: '导航菜单',
        icon: 'l-daohangcaidan',
        data: {
          name: 'menuDom',
          width: 200,
          height: 400,
          externElement: true,
          data: [
            {
              title: '实时监测',
              key: '0',
              show: true,
              icon: 'l-icon l-suofang',
              children: [
                {
                  title: '站点看板',
                  key: '',
                  show: true,
                  icon: 'l-icon l-fenzuzhuzhuangtu',
                  children: [
                    {
                      title: '三级标题',
                      key: '',
                      show: true,
                    },
                    {
                      title: '三级标题',
                      key: '',
                      show: true,
                    },
                  ],
                },
                {
                  title: '监控画面',
                  key: '',
                  show: true,
                  icon: 'l-icon l-biaoge',
                },
                {
                  title: '设备监控',
                  key: '',
                  show: true,
                  icon: 'l-icon l-zhexiantu',
                },
              ],
            },
            {
              title: '控制中心',
              key: '',
              show: true,
              icon: 'l-icon l-tiaoxingtu',
            },
            {
              title: '告警管理',
              key: '',
              show: true,
              icon: 'l-icon l-zhishideng',
            },
          ],
          expand: true,
        },
      },
      {
        name: '分页',
        icon: 'l-fenye', //l-fenye
        data: {
          name: 'pagination',
          width: 300,
          height: 200,
          size: 'small',
          total: 25,
          pageSize: 5,
          current: 1,
          maxPageBtn: 5,
          disableInput: true,
          pageSizeOptions: [5, 10, 20, 30],
          props: {
            custom: [
              {
                key: 'total',
                label: '数据总条数',
                type: 'number',
                min: 0,
              },
              {
                key: 'pageSize',
                label: '每页数据量',
                type: 'number',
              },
              {
                key: 'pageSizeOptions',
                label: '分页大小',
                type: 'code',
              },
              // {
              //   key: 'maxPageBtn',
              //   label: '最多显示页码数按钮数',
              //   type: 'number',
              // },
            ],
          },
        },
      },
      {
        name: '步骤条',
        icon: 'l-buzhoutiao',
        data: {
          name: 'steps',
          width: 500,
          height: 40,
          hiddenText: true,
          direction: 'horizontal', //horizontal/vertical
          labelAlign: '', //left/right/alternate/top/bottom
          // theme: 'dot', //dot
          current: 2,
          data: [
            {
              title: '已完成的步骤',
              content: '这里是提示文字',
              status: 'finish', //default/process/finish/error
              // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
            },
            {
              title: '出错的步骤',
              content: '这里是提示文字',
              status: 'error', //default/process/finish/error
            },
            {
              title: '进行中的步骤',
              content: '这里是提示文字',
              status: 'process', //default/process/finish/error
            },
            {
              title: '未完成的步骤',
              content: '这里是提示文字',
              status: 'default', //default/process/finish/error
            },
          ],
        },
      },
      {
        name: '选项卡',
        icon: 'l-xuanxiangka',
        data: {
          name: 'tab',
          width: 500,
          height: 50,
          direction: 'horizontal',
          selectKey: '1',
          selectedKeys: [],
          theme: '',
          disableInput: true,
          data: [
            { text: '场景一', key: '0', isForbidden: true },
            { text: '场景二', key: '1' },
            { text: '场景三', key: '2' },
            { text: '场景四', key: '3' },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '多选选项卡',
        icon: 'l-duoxiangxuanxiangka',
        data: {
          name: 'tab',
          width: 500,
          height: 50,
          direction: 'horizontal',
          selectedKeys: ['0'],
          theme: 'multiple',
          disableInput: true,
          data: [
            { text: '场景一', key: '0' },
            { text: '场景二', key: '1', isForbidden: true },
            { text: '场景三', key: '2' },
            { text: '场景四', key: '3' },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '输入',
    show: true,
    list: [
      {
        name: '按钮',
        icon: 'l-anniu',
        data: {
          name: 'rectangle',
          x: 300,
          y: 200,
          width: 80,
          height: 30,
          disableAnchor: true,
          borderRadius: 2,
          text: '按钮',
          activeBackground: '#2D71EC',
          activeColor: '#40a9ff',
          background: '#4583FF',
          color: '#1890ff',
          hoverBackground: '#40a9ff',
          hoverColor: '#7DA4FF',
          textColor: '#ffffff',
          hoverTextColor: '#ffffff',
          activeTextColor: '#ffffff',
        },
      },
      {
        name: '文本输入框',
        icon: 'l-wenbenshurukuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          input: true,
          ellipsis: true,
          text: '输入文本',
          textAlign: 'left',
          background: '#15181C',
          color: '#424B61',
          textColor: '#FFFFFFE6',
          // color: '#D9D9D9FF',
          // hoverTextColor: '#000000FF',
          // activeTextColor: '#000000FF',
          textLeft: 10,
        },
      },
      {
        name: '数字输入框',
        icon: 'l-shuzishurukuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          input: true,
          ellipsis: true,
          text: '输入数字',
          textAlign: 'left',
          background: '#15181C',
          color: '#424B61',
          textColor: '#FFFFFFE6',
          // color: '#D9D9D9FF',
          // textColor: '#000000FF',
          // hoverTextColor: '#000000FF',
          // activeTextColor: '#000000FF',
          textLeft: 10,
          events: [
            {
              action: 5,
              name: 'inactive',
              value:
                'context.meta2d.setValue({ id: pen.id, text: parseFloat(pen.text) }, { doEvent: false });',
              where: { type: null },
            },
          ],
        },
      },
      {
        name: '单选框',
        icon: 'l-danxuanxiang',
        data: {
          name: 'radio',
          width: 300,
          height: 30,
          disableAnchor: true,
          direction: 'horizontal', // 'vertical', //'horizontal',
          theme: 'normal',
          itemPosition: [],
          data: [
            { key: '1', text: '选项一', isForbidden: true },
            { key: '2', text: '选项示例二' },
            { key: '3', text: '选项三' },
          ],
          selectKey: '2',
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'direction',
                label: '排列方向',
                type: 'select',
                options: [
                  { label: '横向', value: 'horizontal' },
                  { label: '纵向', value: 'vertical' },
                ],
              },
              {
                key: 'theme',
                label: '模式',
                type: 'select',
                options: [
                  { label: '通用模式', value: 'normal' },
                  { label: '按钮模式', value: 'button' },
                ],
              },
            ],
          },
        },
      },
      {
        name: '多选框',
        icon: 'l-duoxuanxiang',
        data: {
          name: 'checkbox',
          width: 300,
          height: 30,
          direction: 'horizontal', // 'vertical', //'horizontal',
          theme: 'normal', //button   normal
          data: [
            { key: '1', text: '选项一', isForbidden: true },
            { key: '2', text: '选项示例二' },
            { key: '3', text: '选项三' },
          ],
          selectedKeys: ['2', '3'],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'direction',
                label: '排列方向',
                type: 'select',
                options: [
                  { label: '横向', value: 'horizontal' },
                  { label: '纵向', value: 'vertical' },
                ],
              },
              {
                key: 'theme',
                label: '模式',
                type: 'select',
                options: [
                  { label: '通用模式', value: 'normal' },
                  { label: '按钮模式', value: 'button' },
                ],
              },
            ],
          },
        },
      },
      {
        name: '下拉选择器',
        icon: 'l-xialaxuanzekuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          ellipsis: true,
          text: '选项1',
          textAlign: 'left',
          input: true,
          background: '#15181C',
          color: '#424B61',
          textColor: '#FFFFFFE6',
          hoverTextColor: '#FFFFFFE6',
          activeTextColor: '#FFFFFFE6',
          textLeft: 10,
          dropdownList: [
            {
              text: '选项1',
            },
            {
              text: '选项2',
            },
            {
              text: '选项3',
            },
          ],
        },
      },
      {
        name: '时间选择器',
        icon: 'l-shijianxuanzekuang',
        data: {
          name: 'inputDom',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'time',
          hiddenText: true,
        },
      },
      {
        name: '日期选择器',
        icon: 'l-riqixuanzekuang',
        data: {
          name: 'inputDom',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'date',
          hiddenText: true,
        },
      },
      {
        name: '颜色选择器',
        icon: 'l-yansexuanzekuang',
        data: {
          name: 'inputDom',
          width: 32,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'color',
          hiddenText: true,
        },
      },
      {
        name: '开关',
        icon: 'l-kaiguan',
        data: {
          name: 'switch',
          disableAnchor: true,
          height: 30,
          width: 60,
          checked: true,
          offColor: '#303746',
          onColor: '#4583FF',
          disableOffColor: '#E5E5E5',
          disableOnColor: '#A3D3FF',
          hoverBackground: '#40a9ff',
        },
      },
      {
        name: '滑块',
        icon: 'l-huakuai',
        data: {
          anchors: [],
          disableAnchor: true,
          name: 'slider',
          width: 300,
          height: 20,
          value: 10,
          textWidth: 50,
          barHeight: 4,
          min: 0,
          max: 100,
          activeColor: '#4583FF',
          background: '#303746',
          textColor: '#FFFFFF66',
          unit: '%',
        },
      },
    ],
  },
  {
    name: '工控',
    show: true,
    list: [
      {
        name: '圆柱水位',
        icon: 'l-yuanzhushuiwei',
        data: {
          name: 'waterTank',
          width: 128,
          height: 128,
          disableAnchor: true,
          color: '#FFFFFF00',
          progress: 0.5,
          progressColor: '#4583FF',
        },
      },
      {
        name: '球形水位',
        icon: 'l-qiuxingshuiwei',
        data: {
          name: 'watermeter',
          width: 128,
          height: 128,
          disableAnchor: true,
          background: '#4583FF',
          value: 50,
          max: 70,
          min: 20,
          maxBackground: '#f5222d',
          minBackground: '#52c41a',
          // maxText: 'max',
          // minText: 'min',
          scaleShow: false,
        },
      },
      {
        name: '指示灯',
        icon: 'l-zhishideng',
        data: {
          name: 'indicatorLight',
          disableAnchor: true,
          width: 128,
          height: 128,
          displayStatus: 0, //显示状态 默认 方形 圆形
          background: '#4583FF33',
          color: '#4583FF',
          hiddenText: true,
          onColor: '#58CC84',
          frames: [
            {
              background: '#4583FF33',
              color: '#4583FF',
              bkType: 0,
              duration: 200,
              strokeType: 0,
              visible: true,
            },
            {
              background: '#4583FF33',
              color: '#4583FF',
              bkType: 0,
              duration: 200,
              strokeType: 0,
              visible: true,
            },
          ],
          animateType: 'custom',
        },
        props: {
          custom: [
            {
              key: 'state',
              value: 'on',
              type: 'select',
              options: [
                { label: '开', value: 'on' },
                { label: '关', value: 'off' },
              ],
            },
          ],
        },
      },
      {
        name: '圆形按钮',
        icon: 'l-yuanxinganniu', //l-yuanxinganniu
        data: {
          name: 'roundSwitch',
          width: 128,
          height: 128,
          checked: true,
          disableInput: true,
          offColor: '#FFA98F',
          onColor: '#80D99F',
          color: '#4583FF', //66 33
          background: '#4583FF33',
          offShadowColor: '#FF5D3C',
          onShadowColor: '#58CC84',
        },
      },
      {
        name: '船型开关',
        icon: 'l-chuanxingkaiguan',
        data: {
          name: 'rockerSwitch',
          width: 72,
          height: 128,
          disableInput: true,
          offColor: '#FFA98F',
          onColor: '#80D99F',
          color: '#4583FF', //66 33
          background: '#4583FF33',
          offShadowColor: '#FF5D3C',
          onShadowColor: '#58CC84',
        },
      },
      {
        name: '转换开关',
        icon: 'l-zhuanhuankaiguan', //l-zhuanhuankaiguan
        data: {
          name: 'transferSwitch',
          width: 128,
          height: 128,
          checked: true,
          disableInput: true,
          offColor: '#FFA98F',
          onColor: '#80D99F',
          color: '#4583FF', //66 33
          background: '#4583FF33',
          offShadowColor: '#FF5D3C',
          onShadowColor: '#58CC84',
        },
      },
      {
        name: '闸刀',
        icon: 'l-zhadao',
        data: {
          name: 'knifeSwitch',
          width: 64,
          height: 128,
          color: '#4583FF',
          disableInput: true,
          background: '#4583FF33',
          offColor: '#FF5D3C',
          onColor: '#58CC84',
          // events: [
          //   {
          //     action: 5,
          //     name: 'click',
          //     value: 'window.meta2d.setValue({id:pen.id,switch:!pen.switch});',
          //   },
          // ],
        },
      },
      {
        name: '拨动开关',
        icon: 'l-bodongkaiguan',
        data: {
          name: 'toggleSwitch',
          width: 128,
          height: 128,
          checked: true,
          disableInput: true,
          color: '#4583FF',
          background: '#4583FF33',
          offColor: '#FF5D3C',
          onColor: '#58CC84',
          // events: [
          //   {
          //     action: 5,
          //     name: 'click',
          //     value:
          //       'window.meta2d.setValue({id:pen.id,switch:!pen.switch});window.meta2d.render()',
          //   },
          // ],
        },
      },
      {
        name: '空气开关',
        icon: 'l-kongqikaiguan',
        data: {
          name: 'airSwitch',
          width: 120,
          height: 128,
          switch: true,
          color: '#4583FF',
          background: '#4583FF33',
          offColor: '#FF5D3C',
          onColor: '#58CC84',
          disableInput: true,
        },
      },
      {
        name: '水柱温度计',
        icon: 'l-shuizhuwendu',
        data: {
          name: 'thermometer',
          width: 32,
          height: 128,
          disableAnchor: true,
          color: '#4583FF',
          textColor: '#FFFFFFB3',
          background: '#FF5D3C33',
          activeBacground: '#FF5D3C',
          value: -10,
          min: -20,
          max: 20,
        },
      },
      {
        name: '扁平温度计',
        icon: 'l-bianpingwendu',
        data: {
          name: 'thermometer1',
          disableAnchor: true,
          width: 48,
          height: 128,
          backgroundColor: '#666',
          value: 0,
          min: -20,
          max: 20,
          color: '#4583FF',
          markColor: '#fff',
          background: '#FF5D3C33',
          activeBackground: '#FF5D3C',
          textColor: '#FFFFFFB3',
          sub: 5,
          barrel: {
            x: 0.3,
            y: 0.2,
            width: 0.2,
            height: 7 / 9,
          },
        },
      },
    ],
  },
];

export const cases: any[] = [
  { name: '智慧物联' },
  { name: '电力能源' },
  { name: '智慧水务' },
  { name: '智慧工厂' },
  { name: '智慧校园' },
  { name: '智慧园区' },
  { name: '智慧交通' },
  { name: '智慧城市' },
  { name: '智慧农业' },
  { name: '电信机房' },
  { name: '航天航空' },
  { name: '智能家居' },
];

export const templates: any[] = [
  { name: '主题', list: [] },
  { name: '布局', list: [] },
];

export const defaultPureColor: string[] = [
  '#ff925c',
  '#e6d950',
  '#51e69b',
  '#59c8ff',
  '#FF7875',
  '#FF9C6E',
  '#FFC069',
  '#FFD666',
  '#FFF566',
  '#D3F261',
  '#95DE64',
  '#5CDBD3',
  '#69C0FF',
  '#85A5FF',
  '#B37FEB',
  '#FF85C0',
  '#000000',
  '#FFFFFF',
  '#FFFFFF00',
];

// export const defaultGradientColor: string[] = [
//   'linear-gradient(90deg, #E52600 0%, #CC0000 12%, #FF925C 80%, #FF622E 100%)',
//   'linear-gradient(90deg, #B36800 0%, #B36800 12%, #E6D950 80%, #CCB125 100%)',
//   'linear-gradient(90deg, #00B35A 0%, #00735F 12%, #51E69B 80%, #24CC6B 100%)',
//   'linear-gradient(90deg, #0073E6 0%, #1433CC 12%, #59C8FF 80%, #2EA5FF 100%)',
//   'linear-gradient(90deg, #a3aab2 0%, #7b7f8c 12%, #e5ecf0 80%, #bac2c9 100%)',
//
//   'linear-gradient(90deg, #FF622E 0%, #FF622E 18%,#CC0000 20%,#FF622E 50%, #CC0000 80%,#FF622E 82%, #FF622E 100%)',
//   'linear-gradient(90deg, #ccb125 0%, #ccb125 18%,#B36800 20%,#CCB125 50%, #B36800 80%,#CCB125 82%, #CCB125 100%)',
//   'linear-gradient(90deg, #24CC6B 0%, #24CC6B 18%,#00735F 20%,#24CC6B 50%, #00735F 80%,#24CC6B 82%, #24CC6B 100%)',
//   'linear-gradient(90deg, #2EA5FF 0%, #2EA5FF 18%,#1433CC 20%,#2EA5FF 50%, #1433CC 80%,#2EA5FF 82%, #2EA5FF 100%)',
//   'linear-gradient(90deg, #bac2c9 0%, #bac2c9 18%,#7b7f8c 20%,#bac2c9 50%, #7b7f8c 80%,#bac2c9 82%, #bac2c9 100%)'
// ]

export const defaultGradientColor: string[] = [
  '#ff925c',
  '#e6d950',
  '#51e69b',
  '#59c8ff',
  '#FF7875',
  '#FF9C6E',
  '#FFC069',
  '#FFD666',
  '#FFF566',
  '#D3F261',
  '#95DE64',
  '#5CDBD3',
  '#69C0FF',
  '#85A5FF',
  '#B37FEB',
  '#FF85C0',
  '#000000',
  '#FFFFFF',
];