visualization-design/src/services/defaults.ts

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

const getRootDomain = ()=>{ 
  const a =location.host.split('.');
  return `.${a[a.length-2]}.${a[a.length-1]}`
};

export let rootDomain = getRootDomain().indexOf('localhost')!==-1?'.le5le.com':getRootDomain();

export const fromArrows = [
  { icon: '#l-line', value: '' },
  { icon: '#l-from-triangle', value: 'triangle' },
  { icon: '#l-from-diamond', value: 'diamond' },
  { icon: '#l-from-circle', value: 'circle' },
  { icon: '#l-from-lineDown', value: 'lineDown' },
  { icon: '#l-from-lineUp', value: 'lineUp' },
  { icon: '#l-from-triangleSolid', value: 'triangleSolid' },
  { icon: '#l-from-diamondSolid', value: 'diamondSolid' },
  { icon: '#l-from-circleSolid', value: 'circleSolid' },
  { icon: '#l-from-line', value: 'line' },
];

export const toArrows = [
  { icon: '#l-line', value: '' },
  { icon: '#l-to-triangle', value: 'triangle' },
  { icon: '#l-to-diamond', value: 'diamond' },
  { icon: '#l-to-circle', value: 'circle' },
  { icon: '#l-to-lineDown', value: 'lineDown' },
  { icon: '#l-to-lineUp', value: 'lineUp' },
  { icon: '#l-to-triangleSolid', value: 'triangleSolid' },
  { icon: '#l-to-diamondSolid', value: 'diamondSolid' },
  { icon: '#l-to-circleSolid', value: 'circleSolid' },
  { icon: '#l-to-line', value: 'line' },
];

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' : import.meta.env.BASE_URL.slice(0,-1)) + '/img/logo.png',
        },
      },
      {
        name: 'GIF',
        icon: 'l-GIF',
        data: {
          width: 100,
          height: 100,
          name: 'gif',
          image: (cdn ? cdn + '/v' : '') + '/png/电信机房/防火墙.gif',
        },
      },
      {
        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,
          props: {
            custom: [
              {
                key: 'imageRadius',
                label: '图片圆角半径',
                type: 'slider',
              },
            ],
          },
        },
      },
      {
        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-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-10',
        data: {
          width: 400,
          height: 250,
          name: 'rtspPlayerDom',
          externElement: true,
          mse: true,
          url: '',
          rtspUrl: '',
          props: {
            custom: [
              {
                key: 'mse',
                label: '类型',
                type: 'select',
                options: [
                  { label: 'Webrtc(低延迟,仅支持H264格式)', value: false },
                  { label: 'MSE(支持H265格式,需最新chrome)', value: true },
                ],
              },
              {
                key: 'url',
                label: '流服务',
                type: 'string',
              },
              {
                key: 'rtspUrl',
                label: 'RTSP URL',
                type: 'string',
              },
            ],
          },
        },
      }
    ],
  },
  {
    name: '时间',
    show: true,
    list: [
      {
        name: '时间',
        icon: 'l-clock',
        data: {
          name: 'time',
          width: 300,
          height: 40,
          text: '当前时间',
          lineWidth: 0,
          fillZero: true,
          timeFormat:
            '`${year}-${month}-${day} ${hours}:${minutes}:${seconds} 星期${week}`',
          props: {
            custom: [
              {
                key: 'timeFormat',
                label: '显示格式',
                type: 'string',
              },
              // {
              //   key: 'fillZero',
              //   label: '补0',
              //   type: 'switch',
              // },
            ],
          },
        },
      },
      {
        name: '倒计时',
        icon: 'l-daojishi',
        data: {
          name: 'countdown',
          width: 300,
          height: 40,
          text: '倒计时',
          // deadline: '2024/1/1 00:00:00', //配置未来的时间
          borderWidth: 0,
          timeFormat:
            '`距离下一年还有：${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',
              },
              {
                key: 'background',
                label: '背景颜色',
                type: 'color',
              },
              {
                key: 'headingSize',
                label: '标题大小',
                type: 'number',
              },
              {
                key: 'headingColor',
                label: '标题颜色',
                type: 'color',
              },
            ],
          },
        },
      },
      {
        name: '表格',
        icon: 'l-biaoge',
        data: {
          name: 'table2',
          width: 0,
          height: 0,
          disableAnchor: true,
          // disableSize: 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,
          disableSize: 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',
              },
            ],
          },
          realTimes: [
            {
              label: '自定义',
              key: 'data.1.3.text',
              type: 'string',
              mock: '{一级告警,二级告警,三级告警}',
              enableMock: true,
              triggers: [
                {
                  name: '触发器1',
                  conditionType: 'and',
                  conditions: [
                    {
                      type: '',
                      operator: '=',
                      valueType: '',
                      value: '一级告警',
                    },
                  ],
                  actions: [
                    {
                      action: 5,
                      value:
                        "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#FF5D3CFF'},{doEvent:false,render:true})",
                      params: '',
                    },
                  ],
                },
                {
                  name: '触发器2',
                  conditionType: 'and',
                  conditions: [
                    {
                      type: '',
                      operator: '=',
                      valueType: '',
                      value: '二级告警',
                    },
                  ],
                  actions: [
                    {
                      action: 5,
                      value:
                        "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#E6A82EFF'},{doEvent:false,render:true})",
                      params: '',
                    },
                  ],
                },
                {
                  name: '触发器3',
                  conditionType: 'and',
                  conditions: [
                    {
                      type: '',
                      operator: '=',
                      valueType: '',
                      value: '三级告警',
                    },
                  ],
                  actions: [
                    {
                      action: 5,
                      value:
                        "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#58CC84FF'},{doEvent:false,render:true})",
                      params: '',
                    },
                  ],
                },
              ],
            },
          ],
        },
      },
      {
        name: '滚动表格',
        icon: 'l-biaoge',
        data: {
          name: 'table2',
          width: 0,
          height: 0,
          disableAnchor: true,
          disableSize: true,
          colWidth: 90,
          rowHeight: 32,
          bordered: false,
          vLine: false,
          hLine: true,
          // stripe: true,
          swiper:true,
          // stripeColor: '#407FFF1F', //'#15181c',
          hasHeader:true,
          textColor: '#FFFFFF',
          maxNum:5,
          data: [
            [
                "序号",
                "时间",
                "事件内容",
                "处理状态"
            ],
            [
                {
                    "text": "1"
                },
                "2023-06-17 13:50",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "2"
                },
                "2023-06-17 13:51",
                "事件内容",
                {
                    "text": "已完成",
                    "textColor": "#B3D1FFFF"
                }
            ],
            [
                {
                    "text": "3"
                },
                "2023-06-17 13:52",
                "事件内容",
                {
                    "text": "待处理",
                    "textColor": "#E6A82EFF"
                }
            ],
            [
                {
                    "text": "4"
                },
                "2023-06-17 13:53",
                "事件内容",
                {
                    "text": "已完成",
                    "textColor": "#B3D1FFFF"
                }
            ],
            [
                {
                    "text": "5"
                },
                "2023-06-17 13:54",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "6"
                },
                "2023-06-17 13:55",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "7"
                },
                "2023-06-17 13:57",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "8"
                },
                "2023-06-17 13:58",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "9"
                },
                "2023-06-17 13:59",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "10"
                },
                "2023-06-17 14:00",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "11"
                },
                "2023-06-17 14:01",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ],
            [
                {
                    "text": "12"
                },
                "2023-06-17 13:02",
                "事件内容",
                {
                    "text": "处理中",
                    "textColor": "#05CFF9FF"
                }
            ]
        ],
          styles: [
            {
                "col": 1,
                "width": 112
            },
            {
                "col": 2,
                "width": 112
            },
            {
                "col": 3,
                "pens": [
                    {
                        "disableAnchor": true,
                        "fontSize": 0.6,
                        "height": 20,
                        "lineWidth": 0,
                        "name": "rectangle",
                        "textColor": "#05CFF9FF",
                        "width": 56
                    }
                ],
                "width": 70
            },
            {
                "col": 0,
                "pens": [
                    {
                        "background": "#4583FF33",
                        "disableAnchor": true,
                        "height": 20,
                        "isBottom": false,
                        "lineWidth": 0,
                        "name": "rectangle",
                        "width": 20
                    }
                ],
                "width": 40
            }
        ],
          props: {
            custom: [
              {
                key: 'hasHeader',
                label: '有无表头',
                type: 'bool',
              },
              {
                key: 'swiper',
                label: '是否轮播',
                type: 'bool',
              },
              {
                key: 'maxNum',
                label: '最大展示数',
                type: 'number',
              },
              {
                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://${rootDomain?.slice(1)}`,
          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,
          props: {
            custom: [
              {
                key: 'text',
                label: '文本',
                type: 'text',
              },
              {
                key: 'textColor',
                label: '文本颜色',
                type: 'color',
              },
            ],
          },
        },
      },
      {
        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',
          externElement: true,
          width: 400,
          height: 300,
          data: [
            {
              src: `https://2ds${rootDomain}/img/banner1.bc890350.png`,
            },
            {
              src: `https://2ds${rootDomain}/img/banner2.adab6a6e.png`,
            },
            {
              src: `https://2ds${rootDomain}/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${rootDomain}/preview?id=6357a9e2d44b9402de84d2e8`,
            },
            {
              src: `https://2d${rootDomain}/preview?id=6357aec8d44b9402de84d2f1`,
            },
            {
              src: `https://2d${rootDomain}/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${rootDomain}`,
                },
              ],
            },
          ],
          props: {
            custom: [
              {
                key: 'events.0.actions.0.value',
                label: '地址',
                type: 'string',
              },
            ],
          },
        },
      },
      {
        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: [
            {
              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();',
                },
              ],
            },
          ],
          props: {
            custom: [
              {
                key: 'events.0.actions.0.params',
                label: '定位图元',
                type: 'string',
              },
            ],
          },
        },
      },
      {
        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: [
            {
              name: 'click',
              actions: [
                {
                  action: 5,
                  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
);`,
                },
              ],
            },
          ],
        },
      },
      {
        name: '面包屑',
        icon: 'l-mianbaoxie', //l-mianbaoxie
        data: {
          name: 'breadcrumb',
          width: 200,
          height: 20,
          data: [
            {
              key: '1',
              title: '页面1',
              to: `https://doc${rootDomain}/document/135787991`,
              target: '_blank',
            },
            {
              key: '2',
              title: '页面2',
              to: `https://2d${rootDomain}/?id=641d524a8df2c654ea652d7e`,
              target: '_blank',
            },
            {
              key: '3',
              title: '页面3',
              to: `https://2d${rootDomain}/?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',
          renderSubMenu:true,
          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: '运维管理',
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: "background",
                label: "背景颜色",
                type: "color"
              },
              {
                key: "textColor",
                label: "字体颜色",
                type: "color"
              },
              {
                key: "fontSize",
                label: "字体大小",
                type: "number"
              },
              {
                key: "iconSize",
                min: 12,
                label: "图标大小",
                type: "number"
              },
              {
                key: "iconPosition",
                label: "图标位置",
                type: 'select',
                options: [
                  { label: '靠左', value: 'left' },
                  { label: '靠下', value: 'bottom' },
                ],
              },
              {
                isNotString: true,
                key: "marginRight",
                label: "图标右间距",
                type: "number"
              },
              {
                isNotString: true,
                key: "menuItemWidth",
                min: 100,
                label: "选项宽度",
                type: "number"
              },
              {
                isNotString: true,
                key: "menuItemBgImg",
                label: "选项背景图",
                type: "text"
              },
              {
                isNotString: true,
                key: "menuItemHeight",
                min: 0,
                label: "选项高度",
                type: "number"
              },
              {
                key: "hoverBackground",
                label: "hover背景色",
                type: "color"
              },
              {
                isNotString: true,
                key: "hoverColor",
                label: "hover字体颜色",
                type: "color"
              },
              {
                isNotString: true,
                key: "activeBackground",
                label: "选中背景色",
                type: "color"
              },
              {
                key: "activeColor",
                label: "选中字体颜色",
                type: "color"
              },
              {
                key: "dropContentBgColor",
                label: "下拉内容背景色",
                type: "color"
              },
              {
                isNotString: true,
                key: "renderSubMenu",
                label: "是否渲染二级菜单",
                type: "switch"
              },
              {
                key: 'iframe',
                label: '关联Iframe',
                type: 'text',
              },
            ],
          },
        },
      },
      {
        name: '导航菜单',
        icon: 'l-daohangcaidan',
        data: {
          name: 'menuDom',
          width: 200,
          height: 400,
          externElement: true,
          data: [
            {
              title: '实时监测',
              key: '0',
              icon: 'l-icon l-suofang',
              children: [
                {
                  title: '站点看板',
                  key: '',
                  icon: 'l-icon l-fenzuzhuzhuangtu',
                  children: [
                    {
                      title: '三级标题',
                      key: '',
                    },
                    {
                      title: '三级标题',
                      key: '',
                    },
                  ],
                },
                {
                  title: '监控画面',
                  key: '',
                  icon: 'l-icon l-biaoge',
                },
                {
                  title: '设备监控',
                  key: '',
                  icon: 'l-icon l-zhexiantu',
                },
              ],
            },
            {
              title: '控制中心',
              key: '',
              icon: 'l-icon l-tiaoxingtu',
            },
            {
              title: '告警管理',
              key: '',
              icon: 'l-icon l-zhishideng',
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        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: 600,
          height: 60,
          direction: 'horizontal', //horizontal/vertical
          theme: 'default', //dot
          data: [
            {
              title: '已完成的步骤',
              content: '这里是提示文字',
              status: 'finish', //default/process/finish/error
            },
            {
              title: '出错的步骤',
              content: '这里是提示文字',
              status: 'error', //default/process/finish/error
            },
            {
              title: '进行中的步骤',
              content: '这里是提示文字',
              status: 'process', //default/process/finish/error
            },
            {
              title: '未完成的步骤',
              content: '这里是提示文字',
              status: 'default', //default/process/finish/error
            },
          ],
          statusColor:{
            default: {
              titleColor: '#FFFFFF66',
              contentColor: '#FFFFFF66',
              iconColor: '#FFFFFF66',
            },
            finish: {
              titleColor: '#FFFFFFE6',
              contentColor: '#FFFFFF99',
              iconColor: '#4583FF',
            },
            process: {
              titleColor: '#4583FF',
              contentColor: '#FFFFFF99',
              iconColor: '#4583FF ',
            },
            error: {
              titleColor: '#FF5D3C',
              contentColor: '#FFFFFF99',
              iconColor: '#FF5D3C',
            },
          },
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'statusColor',
                label: '各个状态颜色',
                type: 'code',
              },
              {
                key: 'direction',
                label: '方向',
                type: 'select',
                options: [
                  { label: '水平', value: 'horizontal' },
                  { label: '垂直', value: 'vertical' },
                ],
              },
            ],
          },
        },
      },
      {
        name: '选项卡',
        icon: 'l-xuanxiangka',
        data: {
          name: 'tab',
          width: 440,
          height: 48,
          direction: 'horizontal',
          selectedKey: '1',
          btnHeight: 32,
          btnWidth: 100,
          gap:8,
          // selectedKeys: [],
          disableInput: true,
          data: [
            { text: '场景一', key: '0', isForbidden: true },
            { text: '场景二', key: '1' },
            { text: '场景三', key: '2' },
            { text: '场景四', key: '3' },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'direction',
                label: '方向',
                type: 'select',
                options: [
                  { label: '水平', value: 'horizontal' },
                  { label: '垂直', value: 'vertical' },
                ],
              },
              {
                key: 'gap',
                label: '间隔',
                type: 'number',
                min:1
              },
              {
                key: 'btnWidth',
                label: '按钮宽度',
                type: 'number',
                min:1
              },
              {
                key: 'btnHeight',
                label: '按钮高度',
                type: 'number',
                min:1
              },
              {
                key: 'activeBackground',
                label: '选中背景',
                type: 'color',
              },
              {
                key: 'activeColor',
                label: '选中边框',
                type: 'color',
              },
              {
                key: 'activeTextColor',
                label: '选中文字',
                type: 'color',
              }, 
              {
                key: 'activeBgImage',
                label: '选中背景图片',
                type: 'string',
              },
              {
                key: 'background',
                label: '(未选中)背景',
                type: 'color',
              },
              {
                key: 'color',
                label: '(未选中)边框',
                type: 'color',
              },
              {
                key: 'textColor',
                label: '(未选中)文字',
                type: 'color',
              },
              {
                key: 'bgImage',
                label: '(未选中)背景图片',
                type: 'string',
              }
            ],
          },
        },
      },
      {
        name: '多选选项卡',
        icon: 'l-duoxiangxuanxiangka',
        data: {
          name: 'tab',
          width: 440,
          height: 48,
          direction: 'horizontal',
          selectedKeys: ['0'],
          multiple:true,
          disableInput: true,
          btnHeight: 32,
          btnWidth: 100,
          gap:8,
          data: [
            { text: '场景一', key: '0' },
            { text: '场景二', key: '1', isForbidden: true },
            { text: '场景三', key: '2' },
            { text: '场景四', key: '3' },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: '数据',
                type: 'code',
              },
              {
                key: 'direction',
                label: '方向',
                type: 'select',
                options: [
                  { label: '水平', value: 'horizontal' },
                  { label: '垂直', value: 'vertical' },
                ],
              },
              {
                key: 'gap',
                label: '间隔',
                type: 'number',
                min:1
              },
              {
                key: 'btnWidth',
                label: '按钮宽度',
                type: 'number',
                min:1
              },
              {
                key: 'btnHeight',
                label: '按钮高度',
                type: 'number',
                min:1
              },
              {
                key: 'activeBackground',
                label: '选中背景',
                type: 'color',
              },
              {
                key: 'activeColor',
                label: '选中边框',
                type: 'color',
              },
              {
                key: 'activeTextColor',
                label: '选中文字',
                type: 'color',
              }, 
              {
                key: 'activeBgImage',
                label: '选中背景图片',
                type: 'string',
              },
              {
                key: 'background',
                label: '(未选中)背景',
                type: 'color',
              },
              {
                key: 'color',
                label: '(未选中)边框',
                type: 'color',
              },
              {
                key: 'textColor',
                label: '(未选中)文字',
                type: 'color',
              },
              {
                key: 'bgImage',
                label: '(未选中)背景图片',
                type: 'string',
              }
            ],
          },
        },
      },
    ],
  },
  {
    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,
              actions:[
                {
                    "action": 5,
                    "value": "context.meta2d.setValue({ id: pen.id, text: parseFloat(pen.text) }, { doEvent: false });",
                    "params": ""
                }
              ],
              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',
            },
          ],
          props: {
            custom: [
              {
                key: 'dropdownList',
                label: '下拉列表',
                type: 'code',
              },
            ]
          }
        },
      },
      {
        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',
          props: {
            custom: [
              {
                key: 'onColor',
                label: '开颜色',
                type: 'color',
              },
              {
                key: 'offColor',
                label: '关颜色',
                type: 'color',
              },
              {
                key: 'disable',
                label: '是否禁用',
                type: 'bool',
              },
              {
                key: 'disableOnColor',
                label: '开（禁）颜色',
                type: 'color',
              },
              {
                key: 'disableOffColor',
                label: '关（禁）颜色',
                type: 'color',
              },
            ]
          }
        },
      },
      {
        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',
          props: {
            custom: [
              {
                key: 'progress',
                label: '水位',
                type: 'number',
                min:0,
                max:1,
              },
              {
                key: 'progressColor',
                label: '水位颜色',
                type: 'color',
              }
            ]
          }
        },
      },
      {
        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,
          props: {
            custom: [
              {
                key: 'value',
                label: '值',
                type: 'number',
              },
              {
                key: 'max',
                label: '最大值',
                type: 'number',
              },
              {
                key: 'min',
                label: '最小值',
                type: 'number',
              },
              {
                key: 'maxBackground',
                label: '>最大颜色',
                type: 'color',
              },
              {
                key: 'minBackground',
                label: '<最小颜色',
                type: 'color',
              },
              {
                key: 'scaleShow',
                label: '刻度显示',
                type: 'bool',
              }
            ]
          }
        },
      },
      {
        name: '指示灯',
        icon: 'l-zhishideng',
        data: {
          name: 'indicatorLight',
          disableAnchor: true,
          width: 128,
          height: 128,
          displayStatus: 0, //显示状态 默认 方形 圆形
          background: '#4583FF33',
          color: '#4583FF',
          hiddenText: true,
          // onColor: '#58CC84',
          animations:[
            {
                name: "动画1",
                temType: "id",
                animate: "custom",
                frames: [
                    {
                      background: '#4583FF33',
                      color: '#4583FF',
                      bkType: 0,
                      duration: 200,
                      strokeType: 0,
                      visible: true,
                    },
                    {
                      background: '#58CC8433',
                      color: '#58CC84',
                      bkType: 0,
                      duration: 200,
                      strokeType: 0,
                      visible: true,
                    }
                ]
            }
        ],
          // 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: 'displayStatus',
                label: '显示状态',
                type: 'number',
              },
            ]
          }
        },
        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',
          props: {
            custom: [
              {
                key: 'onColor',
                label: '开时颜色',
                type: 'color',
              },
              {
                key: 'offColor',
                label: '关时颜色',
                type: 'color',
              },
              {
                key: 'onShadowColor',
                label: '开时阴影颜色',
                type: 'color',
              },
              {
                key: 'offShadowColor',
                label: '关时阴影颜色',
                type: 'color',
              },
            ]
          }
        },
      },
      {
        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',
          props: {
            custom: [
              {
                key: 'onColor',
                label: '开时颜色',
                type: 'color',
              },
              {
                key: 'offColor',
                label: '关时颜色',
                type: 'color',
              },
              {
                key: 'onShadowColor',
                label: '开时阴影颜色',
                type: 'color',
              },
              {
                key: 'offShadowColor',
                label: '关时阴影颜色',
                type: 'color',
              },
            ]
          }
        },
      },
      {
        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',
          props: {
            custom: [
              {
                key: 'onColor',
                label: '开时颜色',
                type: 'color',
              },
              {
                key: 'offColor',
                label: '关时颜色',
                type: 'color',
              },
              {
                key: 'onShadowColor',
                label: '开时阴影颜色',
                type: 'color',
              },
              {
                key: 'offShadowColor',
                label: '关时阴影颜色',
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: '闸刀',
        icon: 'l-zhadao',
        data: {
          name: 'knifeSwitch',
          width: 64,
          height: 128,
          color: '#4583FF',
          disableInput: true,
          background: '#4583FF33',
          offColor: '#FF5D3C',
          onColor: '#58CC84',
          props: {
            custom: [
              {
                key: 'onColor',
                label: '开时颜色',
                type: 'color',
              },
              {
                key: 'offColor',
                label: '关时颜色',
                type: 'color',
              },
            ]
          }
          // 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',
          props: {
            custom: [
              {
                key: 'onColor',
                label: '开时颜色',
                type: 'color',
              },
              {
                key: 'offColor',
                label: '关时颜色',
                type: 'color',
              },
            ]
          }
          // 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,
          props: {
            custom: [
              {
                key: 'onColor',
                label: '开时颜色',
                type: 'color',
              },
              {
                key: 'offColor',
                label: '关时颜色',
                type: 'color',
              },
            ]
          }
        },
      },
      {
        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,
          },
        },
      },
      {
        name: '电池',
        icon: 'l-dianchi',
        data: {
          name: 'battery',
          disableAnchor: true,
          width: 40,
          height: 80,
          // rotate: 90,
          progress:0.6,
          color:'#4583FF',
          background:'#4583FF33',
          progressColor:'#58CC84',
          props: {
            custom: [
              {
                key: 'min',
                label: '最小值',
                type: 'number',
                placeholder:'默认0'
              },
              {
                key: 'max',
                label: '最大值',
                type: 'number',
                placeholder:'默认1'
              },
              {
                key: 'splitNumber',
                label: '分段数',
                type: 'number',
              },
              {
                key: 'gap',
                label: '间隔占比',
                type: 'number',
                min:0,
                max:1,
              },
            ],
            
          },
        },
      },
    ],
  },
];

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[] = [
  '#FF5959',
  '#F5693B',
  '#E6B420',
  '#30EE6F',
  '#30EEDC',
  '#31A7F5',
  '#7381FF',
  '#AB73FF',
  '#F054B1',
  '#F75781',
  '#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',
];