import { Pen, FormItem } from '@meta2d/core';
import { cdn } from './api';
import i18n from '../i18n';
const $t = i18n.global.t;
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: $t('dom层级(z-index)'),
    type: 'number',
    min: 0,
    placeholder: $t('默认4'),
  },
  {
    key: 'operationalRect.x',
    label: $t('可操作x'),
    type: 'number',
    min: 0,
    max: 1,
    placeholder: $t('范围0-1'),
  },
  {
    key: 'operationalRect.y',
    label: $t('可操作y'),
    type: 'number',
    min: 0,
    max: 1,
    placeholder: $t('范围0-1'),
  },
  {
    key: 'operationalRect.width',
    label: $t('可操作宽度'),
    type: 'number',
    min: 0,
    max: 1,
    placeholder: $t('范围0-1'),
  },
  {
    key: 'operationalRect.height',
    label: $t('可操作高度'),
    type: 'number',
    min: 0,
    max: 1,
    placeholder: $t('范围0-1'),
  },
  {
    key: 'blur',
    label: $t('背景模糊'),
    type: 'number',
    min: 0,
  },
  {
    key: 'blurBackground',
    label: $t('毛玻璃颜色'),
    type: 'color',
  },
];

export const shapes = [
  {
    name: $t('基本形状'),
    show: true,
    list: [
      {
        name: $t('正方形'),
        icon: 'l-rect',
        id: 1,
        data: {
          width: 100,
          height: 100,
          name: 'square',
        },
      },
      {
        name: $t('矩形'),
        icon: 'l-rectangle',
        id: 2,
        data: {
          width: 200,
          height: 50,
          borderRadius: 0.1,
          name: 'rectangle',
          lineCap:"butt"
        },
      },
      {
        name: $t('圆'),
        icon: 'l-circle',
        id: 3,
        data: {
          width: 100,
          height: 100,
          name: 'circle',
          lineCap:"butt"
        },
      },
      {
        name: $t('三角形'),
        icon: 'l-triangle',
        id: 4,
        data: {
          width: 100,
          height: 100,
          name: 'triangle',
        },
      },
      {
        name: $t('菱形'),
        icon: 'l-diamond',
        id: 5,
        data: {
          width: 100,
          height: 100,
          name: 'diamond',
        },
      },
      {
        name: $t('五边形'),
        icon: 'l-pentagon',
        id: 6,
        data: {
          width: 100,
          height: 100,
          name: 'pentagon',
        },
      },
      {
        name: $t('六边形'),
        icon: 'l-hexagon',
        id: 7,
        data: {
          width: 100,
          height: 100,
          name: 'hexagon',
        },
      },
      {
        name: $t('五角星'),
        icon: 'l-pentagram',
        id: 8,
        data: {
          width: 100,
          height: 100,
          name: 'pentagram',
        },
      },
      {
        name: $t('左箭头'),
        icon: 'l-arrow-left',
        id: 9,
        data: {
          width: 120,
          height: 60,
          name: 'leftArrow',
        },
      },
      {
        name: $t('右箭头'),
        icon: 'l-arrow-right',
        id: 10,
        data: {
          width: 120,
          height: 60,
          name: 'rightArrow',
        },
      },
      {
        name: $t('双向箭头'),
        icon: 'l-twoway-arrow',
        id: 11,
        data: {
          width: 150,
          height: 60,
          name: 'twowayArrow',
        },
      },
      {
        name: $t('云'),
        icon: 'l-cloud',
        id: 13,
        data: {
          width: 100,
          height: 100,
          name: 'cloud',
        },
      },
      {
        name: $t('消息框'),
        icon: 'l-msg',
        id: 14,
        data: {
          textTop: -0.1,
          width: 100,
          height: 100,
          name: 'message',
        },
      },
      {
        name: $t('文件'),
        icon: 'l-file',
        id: 15,
        data: {
          width: 80,
          height: 100,
          name: 'file',
        },
      },
      {
        name: $t('立方体'),
        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: $t('<= 1 即宽度的比例'),
              },
              {
                key: 'backgroundFront',
                label: $t('前背景色'),
                type: 'color',
              },
              {
                key: 'backgroundUp',
                label: $t('顶背景色'),
                type: 'color',
              },
              {
                key: 'backgroundRight',
                label: $t('右背景色'),
                type: 'color',
              },
            ],
          },
        },
      },
      {
        name: $t('人'),
        icon: 'l-people',
        id: 19,
        data: {
          width: 70,
          height: 100,
          name: 'people',
        },
      },
    ],
  },
  {
    name: $t('脑图'),
    show: true,
    list: [
      {
        name: $t('主题'),
        icon: 'l-zhuti',
        data: {
          text: $t('主题'),
          width: 200,
          height: 50,
          name: 'mindNode',
          borderRadius: 0.5,
        },
      },
      {
        name: $t('子主题'),
        icon: 'l-zizhuti',
        data: {
          text: $t('子主题'),
          width: 160,
          height: 40,
          name: 'mindLine',
        },
      },
    ],
  },
  {
    name: $t('流程图'),
    show: true,
    list: [
      {
        name: $t('开始/结束'),
        icon: 'l-flow-start',
        id: 21,
        data: {
          text: $t('开始/结束'),
          width: 120,
          height: 40,
          borderRadius: 0.5,
          name: 'rectangle',
        },
      },
      {
        name: $t('流程'),
        icon: 'l-rectangle',
        id: 22,
        data: {
          text: $t('流程'),
          width: 120,
          height: 40,
          name: 'rectangle',
        },
      },
      {
        name: $t('判定'),
        icon: 'l-diamond',
        id: 23,
        data: {
          text: $t('判定'),
          width: 120,
          height: 60,
          name: 'diamond',
        },
      },
      {
        name: $t('数据'),
        icon: 'l-flow-data',
        id: 24,
        data: {
          text: $t('数据'),
          width: 120,
          height: 50,
          name: 'flowData',
          offsetX: 0.14,
          form: [
            {
              key: 'offsetX',
              name: $t('斜率'),
              type: 'number',
              min: 0,
              step: 0.1,
              placeholder: $t('<= 1 即宽度的比例'),
            },
          ] as FormItemType[],
        },
      },
      {
        name: $t('准备'),
        icon: 'l-flow-ready',
        id: 25,
        data: {
          text: $t('准备'),
          width: 120,
          height: 50,
          name: 'hexagon',
        },
      },
      {
        name: $t('子流程'),
        icon: 'l-flow-subprocess',
        id: 26,
        data: {
          text: $t('子流程'),
          width: 120,
          height: 50,
          name: 'flowSubprocess',
        },
      },
      {
        name: $t('数据库'),
        icon: 'l-db',
        id: 27,
        data: {
          text: $t('数据库'),
          width: 80,
          height: 120,
          name: 'flowDb',
        },
      },
      {
        name: $t('文档'),
        icon: 'l-flow-document',
        id: 28,
        data: {
          text: $t('文档'),
          width: 120,
          height: 100,
          name: 'flowDocument',
        },
      },
      {
        name: $t('内部存储'),
        icon: 'l-internal-storage',
        id: 29,
        data: {
          text: $t('内部存储'),
          width: 120,
          height: 80,
          name: 'flowInternalStorage',
        },
      },
      {
        name: $t('外部存储'),
        icon: 'l-extern-storage',
        id: 30,
        data: {
          text: $t('外部存储'),
          width: 120,
          height: 80,
          name: 'flowExternStorage',
        },
      },
      {
        name: $t('队列'),
        icon: 'l-flow-queue',
        id: 31,
        data: {
          text: $t('队列'),
          width: 100,
          height: 100,
          name: 'flowQueue',
        },
      },
      {
        name: $t('手动输入'),
        icon: 'l-flow-manually',
        id: 32,
        data: {
          text: $t('手动输入'),
          width: 120,
          height: 80,
          name: 'flowManually',
        },
      },
      {
        name: $t('展示'),
        icon: 'l-flow-display',
        id: 33,
        data: {
          text: $t('展示'),
          width: 120,
          height: 80,
          name: 'flowDisplay',
        },
      },
      {
        name: $t('并行模式'),
        icon: 'l-flow-parallel',
        id: 34,
        data: {
          text: $t('并行模式'),
          width: 120,
          height: 50,
          name: 'flowParallel',
        },
      },
      {
        name: $t('注释'),
        icon: 'l-flow-comment',
        id: 35,
        data: {
          text: $t('注释'),
          width: 100,
          height: 100,
          name: 'flowComment',
        },
      },
    ],
  },
  {
    name: $t('活动图'),
    show: true,
    list: [
      {
        name: $t('开始'),
        icon: 'l-inital',
        id: 36,
        data: {
          text: '',
          width: 30,
          height: 30,
          name: 'circle',
          background: '#555',
          lineWidth: 0,
        },
      },
      {
        name: $t('结束'),
        icon: 'l-final',
        id: 37,
        data: {
          width: 30,
          height: 30,
          name: 'activityFinal',
        },
      },
      {
        name: $t('活动'),
        icon: 'l-action',
        id: 38,
        data: {
          text: $t('活动'),
          width: 120,
          height: 50,
          borderRadius: 0.25,
          name: 'rectangle',
        },
      },
      {
        name: $t('决策/合并'),
        icon: 'l-diamond',
        id: 39,
        data: {
          text: $t('决策/合并'),
          width: 120,
          height: 50,
          name: 'diamond',
        },
      },
      {
        name: $t('垂直泳道'),
        icon: 'l-swimlane-v',
        id: 40,
        data: {
          text: $t('垂直泳道'),
          width: 200,
          height: 500,
          name: 'swimlaneV',
          textBaseline: 'top',
          textTop: 20,
          // textHeight: ,
          lineTop: 0.08,
        },
      },
      {
        name: $t('水平泳道'),
        icon: 'l-swimlane-h',
        id: 41,
        data: {
          text: $t('水平泳道'),
          width: 500,
          height: 200,
          name: 'swimlaneH',
          textWidth: 0.01,
          textLeft: 0.04,
          textAlign: 'left',
          lineLeft: 0.08,
        },
      },
      {
        name: $t('垂直分岔/汇合'),
        icon: 'l-fork-v',
        id: 42,
        data: {
          text: $t('垂直分岔/汇合'),
          width: 10,
          height: 150,
          name: 'forkV',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
      {
        name: $t('水平分岔/汇合'),
        icon: 'l-fork',
        id: 43,
        data: {
          text: $t('水平分岔/汇合'),
          width: 150,
          height: 10,
          name: 'forkH',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
    ],
  },
  {
    name: $t('时序图和类图'),
    show: true,
    list: [
      {
        name: $t('生命线'),
        icon: 'l-lifeline',
        id: 44,
        data: {
          text: $t('生命线'),
          width: 150,
          height: 400,
          textHeight: 50,
          name: 'lifeline',
        },
      },
      {
        name: $t('激活'),
        icon: 'l-focus',
        id: 45,
        data: {
          text: $t('激活'),
          width: 12,
          height: 200,
          name: 'sequenceFocus',
        },
      },
      {
        name: $t('简单类'),
        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: $t('类'),
        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: $t('故障树'),
    show: true,
    list: [
      {
        name: $t('与门'),
        icon: 'l-ANDmen',
        data: {
          name: 'andGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('基本事件'),
        icon: 'l-jibenshijian',
        data: {
          name: 'basicEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('未展开事件'),
        icon: 'l-weizhankaishijian',
        data: {
          name: 'unexpandedEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('优先AND门'),
        icon: 'l-youxianANDmen',
        data: {
          name: 'priorityAndGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('禁止门'),
        icon: 'l-jinzhimen',
        data: {
          name: 'forbiddenGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('事件'),
        icon: 'l-shijian',
        data: {
          name: 'event',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('开关事件'),
        icon: 'l-kaiguanshijian',
        data: {
          name: 'switchEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('条件事件'),
        icon: 'l-tiaojianshijian',
        data: {
          name: 'conditionalEvent',
          width: 150,
          height: 100,
        },
      },
      {
        name: $t('转移符号'),
        icon: 'l-zhuanyifuhao',
        data: {
          name: 'transferSymbol',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('或门'),
        icon: 'l-ORmen',
        data: {
          name: 'orGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('异或门'),
        icon: 'l-yihuomen',
        data: {
          name: 'xorGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: $t('表决门'),
        icon: 'l-biaojuemen',
        data: {
          name: 'votingGate',
          width: 100,
          height: 150,
        },
      },
    ],
  },
];

export const formComponents = [
  {
    name: $t('基础'),
    show: true,
    list: [
      {
        name: $t('文本'),
        icon: 'l-wenben',
        data: {
          width: 160,
          height: 30,
          name: 'text',
          text: $t('乐吾乐le5le - 大屏可视化'),
          textAutoAdjust: true,
          props: {
            custom: [
              {
                key: 'textAutoAdjust',
                label: $t('文本自动大小'),
                type: 'bool',
              },
            ],
          },
        },
      },
      {
        name: $t('数字'),
        icon: 'l-shuzi',
        data: {
          width: 160,
          height: 30,
          name: 'text',
          text: '3.1415926',
          keepDecimal: 2,
        },
      },
      {
        name: $t('进度条'),
        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: $t('进度'),
          //       type: 'number',
          //       max: 1,
          //       min: 0,
          //     },
          //     {
          //       key: 'progressColor',
          //       label: $t('进度颜色'),
          //       type: 'color',
          //     },
          //   ],
          // },
        },
      },
      {
        name: $t('图标'),
        icon: 'l-tubiao',
        data: {
          width: 100,
          height: 100,
          name: 'image',
          icon: '\uea86',
          iconFamily: 'l-icon',
        },
      },
      {
        name: $t('图片'),
        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: $t('头像'),
        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: $t('图片圆角半径'),
                type: 'slider',
              },
            ],
          },
        },
      },
      {
        name: $t('徽标'),
        icon: 'l-huibiao',
        data: {
          width: 35,
          height: 20,
          name: 'square',
          borderRadius: 0.5,
          lineWidth: 0,
          background: '#d54941',
          color: '#fff',
          text: '99+',
        },
      },
      {
        name: $t('标签'),
        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: $t('音视频'),
    show: true,
    list: [
      {
        name: $t('视频'),
        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: $t('视频地址'),
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: $t('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: $t('视频地址'),
                type: 'string',
              },
              {
                key: 'mediaDataSource',
                label: $t('媒体数据源'),
                type: 'code',
                placeholder:
                  $t('具体配置参考:https://github.com/bilibili/flv.js/blob/master/docs/api.md'),
              },
              {
                key: 'optionalConfig',
                label: $t('配置'),
                type: 'code',
                placeholder:
                  $t('具体配置参考:https://github.com/bilibili/flv.js/blob/master/docs/api.md'),
              },
            ],
          },
        },
      },
      {
        name: $t('音频'),
        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: $t('音频地址'),
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: $t('摄像头'),
        icon: 'l-10',
        data: {
          width: 400,
          height: 250,
          name: 'rtspPlayerDom',
          externElement: true,
          mse: true,
          url: '',
          rtspUrl: '',
          props: {
            custom: [
              {
                key: 'mse',
                label: $t('类型'),
                type: 'select',
                options: [
                  { label: $t('Webrtc(低延迟,仅支持H264格式)'), value: false },
                  { label: $t('MSE(支持H265格式,需最新chrome)'), value: true },
                ],
              },
              {
                key: 'url',
                label: $t('流服务'),
                type: 'string',
              },
              {
                key: 'rtspUrl',
                label: 'RTSP URL',
                type: 'string',
              },
            ],
          },
        },
      }
    ],
  },
  {
    name: $t('时间'),
    show: true,
    list: [
      {
        name: $t('时间'),
        icon: 'l-clock',
        data: {
          name: 'time',
          width: 300,
          height: 40,
          text: $t('当前时间'),
          lineWidth: 0,
          fillZero: true,
          timeFormat:
            '`${year}-${month}-${day} ${hours}:${minutes}:${seconds} 星期${week}`',
          props: {
            custom: [
              {
                key: 'timeFormat',
                label: $t('显示格式'),
                type: 'string',
              },
              // {
              //   key: 'fillZero',
              //   label: $t('补0'),
              //   type: 'switch',
              // },
            ],
          },
        },
      },
      {
        name: $t('倒计时'),
        icon: 'l-daojishi',
        data: {
          name: 'countdown',
          width: 300,
          height: 40,
          text: $t('倒计时'),
          // deadline: '2024/1/1 00:00:00$t(', //配置未来的时间
          borderWidth: 0,
          timeFormat:
            '`距离下一年还有：${day}天${hours}时${minutes}分${seconds}秒`',
          props: {
            custom: [
              {
                key: 'timeFormat',
                label: $t('显示格式'),
                type: 'string',
              },
              {
                key: 'deadline',
                label: $t('截止时间'),
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: $t('水平时间轴'),
        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: $t('事件一'),
              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: $t('事件二'),
              circleBg: '#BFDBFF',
              circleShadow: '#4583FF33',
              textColor: '#FFFFFF',
            },
            {
              label: '2022-03-01',
              content: $t('事件三'),
              textColor: '#FFFFFF66',
            },
            {
              label: '2022-04-01',
              content: $t('事件四'),
              textColor: '#FFFFFF66',
            },
          ],
          text: $t('时间轴'),
          props: {
            text:true,
            custom: [
              {
                key: 'mode',
                label: $t('标签分布'),
                type: 'select',
                options: [
                  { label: $t('同侧'), value: 'same' },
                  { label: $t('交叉'), value: 'alternate' },
                ],
              },
              {
                key: 'labelAlign',
                label: $t('标签对齐'),
                type: 'select',
                options: [
                  { label: $t('顶部'), value: 'top' },
                  { label: $t('底部'), value: 'bottom' },
                ],
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('垂直时间轴'),
        icon: 'l-chuizhishijianzhou',
        data: {
          name: 'timeline',
          width: 40,
          height: 300,
          text: $t('时间轴'),
          hiddenText: true,
          direction: 'vertical',
          labelAlign: 'left', //left/right/alternate/top/bottom
          mode: 'alternate', //alternate
          data: [
            {
              label: '2022-01-01',
              content: $t('事件一'),
              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: $t('事件二'),
              circleBg: '#BFDBFF',
              circleShadow: '#4583FF33',
              textColor: '#FFFFFF',
            },
            {
              label: '2022-03-01',
              content: $t('事件三'),
              textColor: '#FFFFFF66',
            },
            {
              label: '2022-04-01',
              content: $t('事件四'),
              textColor: '#FFFFFF66',
            },
          ],
          props: {
            text:true,
            custom: [
              {
                key: 'mode',
                label: $t('标签分布'),
                type: 'select',
                options: [
                  { label: $t('同侧'), value: 'same' },
                  { label: $t('交叉'), value: 'alternate' },
                ],
              },
              {
                key: 'labelAlign',
                label: $t('标签对齐'),
                type: 'select',
                options: [
                  { label: $t('靠左'), value: 'left' },
                  { label: $t('靠右'), value: 'right' },
                ],
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('日历(日期)'),
        icon: 'l-rili',
        data: {
          width: 280,
          height: 326,
          hiddenText: true,
          name: 'calendar',
          background: '#fff0',
          hoverTextColor: '#fff',
          dbInput: true,
          // input: true,
          text: $t('8月'),
        },
      },
      {
        name: $t('日历（日期时间）'),
        icon: 'l-rili',
        data: {
          width: 496,
          height: 326,
          hiddenText: true,
          name: 'calendar',
          background: '#fff0',
          hoverTextColor: '#fff',
          dbInput: true,
          // input: true,
          text: $t('8月'),
          calendarType: 'time',
        },
      },
    ],
  },
  {
    name: $t('面板'),
    show: true,
    list: [
      {
        name: $t('列表'),
        icon: 'l-liebiao',
        data: {
          width: 400,
          height: 200,
          name: 'list',
          headingColor: '#FFFFFFE6',
          headingSize: 16,
          background: '#282E3B',
          textColor: '#FFFFFF66',
          hoverTextColor: '#FFFFFF66',
          data: [
            {
              title: $t('列表标题'),
              description: $t('列表内容的描述性文字'),
            },
            {
              title: $t('列表标题'),
              description: $t('列表内容的描述性文字'),
            },
            {
              title: $t('列表标题'),
              description: $t('列表内容的描述性文字'),
            },
          ],
          props: {
            text:true,
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'background',
                label: $t('背景颜色'),
                type: 'color',
              },
              {
                key: 'headingSize',
                label: $t('标题大小'),
                type: 'number',
              },
              {
                key: 'headingColor',
                label: $t('标题颜色'),
                type: 'color',
              },
            ],
          },
        },
      },
      {
        name: $t('表格'),
        icon: 'l-biaoge',
        data: {
          name: 'tablePlus',
          width: 0,
          height: 0,
          disableAnchor: true,
          // disableSize: true,
          colWidth: 80,
          rowHeight: 30,
          rowHeaders:true,
          colHeaders:true,
          maxNum:16,
          textColor:'#E3E8F4',
          background:'#10131A',
          tableType:'longlist',
          mergeCells: [
            { row: 1, col: 1, rowspan: 3, colspan: 3 },
            { row: 3, col: 4, rowspan: 2, colspan: 2 },
            { row: 5, col: 6, rowspan: 3, colspan: 2 }
          ],
          styles:[
            {
              row:0,
              background:'#303746',
            },
            {
              col:0,
              background:'#303746',
            }
          ],
          props: {
            look:true,
            text:true,
            custom: [
              {
                key: 'colWidth',
                label: $t('列宽'),
                type: 'number',
              },
              {
                key: 'rowHeight',
                label: $t('行高'),
                type: 'number',
              },
              {
                key: 'rowHeaders',
                label: $t('行头'),
                type: 'bool',
              },
              {
                key: 'colHeaders',
                label: $t('列头'),
                type: 'bool',
              },
              {
                key: 'bordered',
                label: $t('边框'),
                type: 'bool',
              },
              {
                key: 'vLine',
                label: $t('垂直线'),
                type: 'bool',
              },
              {
                key: 'hLine',
                label: $t('水平线'),
                type: 'bool',
              },
              {
                key: 'maxNum',
                label: $t('最大展示数'),
                type: 'number',
              },
              {
                key:'columns',
                label: $t('列配置'),
                type: 'code',
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'styles',
                label: $t('样式'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('斑马纹表格'),
        icon: 'l-biaoge',
        data: {
          name: 'tablePlus',
          width: 0,
          height: 0,
          disableAnchor: true,
          // disableSize: true,
          colHeaders:true,
          colWidth: 90,
          rowHeight: 32,
          bordered: false,
          vLine: false,
          hLine: false,
          stripe: true,
          stripeColor: '#407FFF1F', //'#15181c',
          // hasHeader: false,
          textColor: '#FFFFFF',
          columns:[
            {text:'设备 ID'},
            {text:'设备名称'},
            {text:'数据协议'},
            { 
              text:'级别',
              fnJs:`if(data==='一级告警'){
                  return {
                    text:data,
                    textColor: '#FF5D3CFF',
                  }
                }else if(data==='二级告警'){
                  return {
                    text:data,
                    textColor: '#E6A82EFF',
                  }
                }else if(data==='三级告警'){
                  return {
                    text:data,
                    textColor: '#58CC84FF',
                  }
                }`
            }
          ],
          data: [
            [$t('设备 ID'), $t('设备名称'), $t('数据协议'), $t('级别')],
            [
              '1',
              '200',
              'MQTT',
              '一级告警',
            ],
            [
              '2',
              $t('湿度传感器'),
              'MQTT',
              '二级告警'
            ],
            [
              '3',
              $t('物联网设备'),
              'MQTT',
              '一级告警'
            ],
            [
              '4',
              $t('物联网设备/智能家居/智慧城市'),
              'MQTT',
              '三级告警'
            ],
          ],
          styles: [
            {
              row: 0,
              textColor: '#ffffff66',
            },
            // {
            //   col: 3,
            //   pens: [
            //     {
            //       name: 'rectangle',
            //       width: 56,
            //       height: 20,
            //       fontSize: 0.6,
            //       disableAnchor: true,
            //       lineWidth: 0,
            //     },
            //   ],
            // },
          ],
          props: {
            custom: [
              {
                key: 'colWidth',
                label: $t('列宽'),
                type: 'number',
              },
              {
                key: 'rowHeight',
                label: $t('行高'),
                type: 'number',
              },
              {
                key: 'stripe',
                label: $t('显示斑马纹'),
                type: 'bool',
              },
              {
                key: 'stripeColor',
                label: $t('斑马纹颜色'),
                type: 'color',
              },
              {
                key: 'bordered',
                label: $t('外边框'),
                type: 'bool',
              },
              {
                key: 'hLine',
                label: $t('水平线'),
                type: 'bool',
              },
              {
                key: 'vLine',
                label: $t('垂直线'),
                type: 'bool',
              },
              {
                key: 'colHeaders',
                label: $t('有无表头'),
                type: 'bool',
              },
              {
                key: 'maxNum',
                label: $t('最大展示数'),
                type: 'number',
              },
              {
                key:'columns',
                label: $t('列配置'),
                type: 'code',
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'styles',
                label: $t('样式'),
                type: 'code',
              },
            ],
          },
          realTimes: [
            {
              label: $t('自定义'),
              key: 'data.1.3',
              type: 'string',
              mock: '{一级告警,二级告警,三级告警}',
              enableMock: true,
              // triggers: [
              //   {
              //     name: $t('触发器1'),
              //     conditionType: 'and',
              //     conditions: [
              //       {
              //         type: '',
              //         operator: '=',
              //         valueType: '',
              //         value: $t('一级告警'),
              //       },
              //     ],
              //     actions: [
              //       {
              //         action: 5,
              //         value:
              //           "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#FF5D3CFF'},{doEvent:false,render:true})",
              //         params: '',
              //       },
              //     ],
              //   },
              //   {
              //     name: $t('触发器2'),
              //     conditionType: 'and',
              //     conditions: [
              //       {
              //         type: '',
              //         operator: '=',
              //         valueType: '',
              //         value: $t('二级告警'),
              //       },
              //     ],
              //     actions: [
              //       {
              //         action: 5,
              //         value:
              //           "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#E6A82EFF'},{doEvent:false,render:true})",
              //         params: '',
              //       },
              //     ],
              //   },
              //   {
              //     name: $t('触发器3'),
              //     conditionType: 'and',
              //     conditions: [
              //       {
              //         type: '',
              //         operator: '=',
              //         valueType: '',
              //         value: $t('三级告警'),
              //       },
              //     ],
              //     actions: [
              //       {
              //         action: 5,
              //         value:
              //           "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#58CC84FF'},{doEvent:false,render:true})",
              //         params: '',
              //       },
              //     ],
              //   },
              // ],
            },
          ],
        },
      },
      {
        name: $t('滚动表格'),
        icon: 'l-biaoge',
        data: {
          name: 'tablePlus',
          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',
          colHeaders:true,
          textColor: '#FFFFFF',
          maxNum:5, 
          columns:[{text:"序号"},{text:"时间"},{text:"事件内容"},{
            text:"处理状态",
            fnJs:`
            if(data==='处理中'){
              return {
                text:data,
                textColor: "#05CFF9FF",
              }
            }else if(data==='已完成'){
              return {
                text:data,
                textColor: '#B3D1FFFF',
              }
            }else if(data==='待处理'){
              return {
                text:data,
                textColor: "#E6A82EFF",
              }
            }
          `
          }],
          data: [
            [
                $t("序号"),
                $t("时间"),
                $t("事件内容"),
                $t("处理状态")
            ],
            [
               "1",
                "2023-06-17 13:50",
                "事件内容",
                "处理中"
            ],
            [
                 "2",
                "2023-06-17 13:51",
                "事件内容",
                "已完成"
            ],
            [
                "3",
                "2023-06-17 13:52",
                "事件内容",
                "待处理",
            ],
            [
                "4",
                "2023-06-17 13:53",
                "事件内容",
                "已完成"
            ],
            [
                "5",
                "2023-06-17 13:54",
                "事件内容",
                "处理中"
            ],
            [
                 "6",
                "2023-06-17 13:55",
                "事件内容",
                "处理中",
            ],
            [
                 "7",
                "2023-06-17 13:57",
                "事件内容",
                "待处理"
            ],
            [
                "8",
                "2023-06-17 13:58",
                "事件内容",
                "处理中"
            ],
            [
                "9",
                "2023-06-17 13:59",
                "事件内容",
                "处理中"
            ],
            [
                "10",
                "2023-06-17 14:00",
                "事件内容",
                "已完成"
            ],
            [
                "11",
                "2023-06-17 14:01",
                "事件内容",
                "处理中"
            ],
            [
                "12",
                "2023-06-17 13:02",
                "事件内容",
                "已完成"
            ]
        ],
          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: 'colWidth',
                label: $t('列宽'),
                type: 'number',
              },
              {
                key: 'rowHeight',
                label: $t('行高'),
                type: 'number',
              },
              {
                key: 'colWidth',
                label: $t('列宽'),
                type: 'number',
              },
              {
                key: 'rowHeight',
                label: $t('行高'),
                type: 'number',
              },
              {
                key: 'colHeaders',
                label: $t('有无表头'),
                type: 'bool',
              },
              {
                key: 'swiper',
                label: $t('是否轮播'),
                type: 'bool',
              },
              {
                key: 'maxNum',
                label: $t('最大展示数'),
                type: 'number',
              },
              {
                key: 'bordered',
                label: $t('外边框'),
                type: 'bool',
              },
              {
                key: 'hLine',
                label: $t('水平线'),
                type: 'bool',
              },
              {
                key: 'vLine',
                label: $t('垂直线'),
                type: 'bool',
              },
              {
                key:'columns',
                label: $t('列配置'),
                type: 'code',
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'styles',
                label: $t('样式'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('表格分页'),
        icon: 'l-biaoge',
        data: {
          name: 'tablePlus',
          width: 0,
          height: 0,
          disableAnchor: true,
          // disableSize: true,
          bordered:true,
          hLine:true,
          vLine:true,
          colWidth: 180,
          rowHeight: 30,
          color: "#bdc7db",
          stripe: true,
          stripeColor: "#407FFF1F",
          ellipsis: true,
          whiteSpace: "break-all",
          maxNum:10,
          colHeaders:true,
          pagination: {
            current: 1,
            maxPageBtn: 5,
            pageSize: 10,
            pageSizeOptions: [
              5,
              10,
              20,
              30
            ],
            size: "small",
            total: 88
          }, 
          columns:[{
              text:'场景',
            },{
              text:'图纸id'
            },{
              text:'名称'
            },{
              text:'操作',
              fnJs:` 
              let link = 'https://view.le5le.com/2d?id='+data;
              return  {
                "events": [
                  {
                    "actions": [
                      {
                        "action": 0,
                        "params": "_blank",
                        "value": link
                      }
                    ],
                    "conditions": [],
                    "name": "click"
                  }
                ]
              }`
            }
          ],
          events: [
            {
              "actions": [
                {
                  "action": 15,
                  "callback": " let _data = []; \r\n      let data1 = JSON.parse(data);\r\n      pen.pagination.total = data1.total;\r\n      pen.calculative.paginationPen.total = data1.total;\r\n      data1.list.forEach((item)=>{\r\n        let _item = [item.case?item.case:'无',item.id,item.name,item.id];\r\n        _data.push(_item);\r\n      });\r\n      context.meta2d.setValue({id:pen.id,data:_data},{doEvent:false,history:false});",
                  "input": "",
                  "network": {
                    "httpTimeInterval": 1000,
                    "method": "POST",
                    "options": {},
                    "protocol": "http",
                    "type": "publish",
                    "url": "/api/data/2d/list?current=${pagination.current}&pageSize=${pagination.pageSize}"
                  },
                  "params": "",
                  "targetType": "id",
                  "value": {
                    "shared": true
                  }
                }
              ],
              "conditionType": "and",
              "conditions": [
                {
                  "key": "pageChange",
                  "keyLabel": "pageChange",
                  "keyPopupVisible": false,
                  "operator": "=",
                  "type": "",
                  "value": true,
                  "valueType": ""
                }
              ],
              "name": "click"
            }
          ],
          data: [
          
            [
              "智慧物联",
              "01840e23-efb8-70d4-804b-9402de84d2d7",
              "冷源群控系统",
              "01840e23-efb8-70d4-804b-9402de84d2d7"                      
            ],
            [
              "智慧园区",
              "01871289-7110-708d-80f2-c654ea652d7e",
              "中央空调模拟演示台系统",
              "01871289-7110-708d-80f2-c654ea652d7e"
            ],
            [
              "智慧物联",
              "01864ef5-f3b8-7046-8062-680466d5157b",
              "换热站远程监控系统",
              "01864ef5-f3b8-7046-8062-680466d5157b"
            ],
            [
              "无",
              "018f94fe-12f4-7e6e-90c2-e7354270e7e1",
              "RTO ",
              "018f94fe-12f4-7e6e-90c2-e7354270e7e1",
            ],
            [
              "电力能源",
              "01831702-3460-7028-808d-77e4cee1a1bd",
              "变电站主接线图",
              "01831702-3460-7028-808d-77e4cee1a1bd",
            ],
            [
              "智慧物联",
              "01840e82-bd40-70d4-804b-9402de84d2f1",
              "制冷站",
              "01840e82-bd40-70d4-804b-9402de84d2f1",
            ],
            [
              "智慧水务",
              "0186531b-a898-7046-8062-680466d51d97",
              "废水处理",
              "0186531b-a898-7046-8062-680466d51d97",
            ],
            [
              "电信机房",
              "01840e6f-9ad0-70d4-804b-9402de84d2e8",
              "数据中心",
              "01840e6f-9ad0-70d4-804b-9402de84d2e8",
            ],
            [
              "智慧工厂",
              "018fc8e1-6ccb-734c-a438-72a1c51dd2cb",
              "破碎筛分监控",
              "018fc8e1-6ccb-734c-a438-72a1c51dd2cb",
            ],
            [
              "电力能源",
              "01840e78-7c40-70d4-804b-9402de84d2eb",
              "光伏系统",
              "01840e78-7c40-70d4-804b-9402de84d2eb",
            ],
          ],
          styles: [
            {
              "row": 0,
              "textColor": "#ffffff66"
            },
            {
              "col": 3,
              "pens": [
                {
                  "color": "#0052d9",
                  "disableAnchor": true,
                  "height": 20,
                  "lineWidth": 0,
                  "name": "rectangle",
                  "text": $t("点击查看"),
                  "width": 56
                }
              ]
            }
          ],
          props: {
            custom: [
              {
                key: 'colWidth',
                label: $t('列宽'),
                type: 'number',
              },
              {
                key: 'rowHeight',
                label: $t('行高'),
                type: 'number',
              },
              {
                key: 'stripe',
                label: $t('显示斑马纹'),
                type: 'bool',
              },
              {
                key: 'stripeColor',
                label: $t('斑马纹颜色'),
                type: 'color',
              },
              {
                key: 'bordered',
                label: $t('外边框'),
                type: 'bool',
              },
              {
                key: 'hLine',
                label: $t('水平线'),
                type: 'bool',
              },
              {
                key: 'vLine',
                label: $t('垂直线'),
                type: 'bool',
              },
              {
                key: 'pagination',
                label: $t('分页配置'),
                type: 'code',
              },
              {
                key:'columns',
                label: $t('列配置'),
                type: 'code',
              },
              {
                key:'maxNum',
                label: $t('最大展示数量'),
                type: 'number',
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'styles',
                label: $t('样式'),
                type: 'code',
              },
            ],
          }
        },
      },
      // {
      //   name: '多功能表格',
      //   icon: 'l-biaoge',
      //   data: {
      //     name: 'tablePlus',
      //     width: 0,
      //     height: 0,
      //     disableAnchor: true,
      //     disableSize: true,
      //     bordered:true,
      //     hLine:true,
      //     vLine:true,
      //     colWidth: 180,
      //     rowHeight: 30,
      //     color: "#bdc7db",
      //     stripe: true,
      //     stripeColor: "#407FFF1F",
      //     ellipsis: true,
      //     whiteSpace: "break-all",
      //     columns:[{
      //       type: 'select',
      //       dropdownList: [{text:'选项一'},{text:'选项二'},{text:'选项三'}]
      //     },{
      //       type: 'numeric'
      //     },{
      //       fnJs:`
      //         if(data==='一级告警'){
      //           return {
      //             text:data,
      //             textColor: '#FF5D3CFF',
      //           }
      //         }else if(data==='二级告警'){
      //           return {
      //             text:data,
      //             textColor: '#E6A82EFF',
      //           }
      //         }else if(data==='三级告警'){
      //           return {
      //             text:data,
      //             textColor: '#58CC84FF',
      //           }
      //         }
      //       `
      //     },
      //     ,{
      //       // fnJs:`
      //       //   if(data==='一级告警'){
      //       //     return {
      //       //       text:data,
      //       //       textColor: '#FF5D3CFF',
      //       //     }
      //       //   }else if(data==='二级告警'){
      //       //     return {
      //       //       text:data,
      //       //       textColor: '#E6A82EFF',
      //       //     }
      //       //   }else if(data==='三级告警'){
      //       //     return {
      //       //       text:data,
      //       //       textColor: '#58CC84FF',
      //       //     }
      //       //   }
      //       // `
      //     }],
      //     data: [
      //       [
      //         "场景",
      //         "图纸id",
      //         "名称",
      //         "操作"
      //       ],
      //       [
      //         "智慧物联",
      //         "01840e23-efb8-70d4-804b-9402de84d2d7",
      //         "一级告警",
      //        "1"
      //       ],
      //       [
      //         "智慧园区",
      //         "01871289-7110-708d-80f2-c654ea652d7e",
      //         "一级告警",
      //         "2"
      //       ],
      //       [
      //         "智慧物联",
      //         "01864ef5-f3b8-7046-8062-680466d5157b",
      //         "二级告警",
      //         "3"
      //       ],
      //       [
      //         "无",
      //         "018f94fe-12f4-7e6e-90c2-e7354270e7e1",
      //         "三级告警",
      //      ""
      //       ],
      //       [
      //         "电力能源",
      //         "01831702-3460-7028-808d-77e4cee1a1bd",
      //         "二级告警",
      //        ""
      //       ],
      //       [
      //         "智慧物联",
      //         "01840e82-bd40-70d4-804b-9402de84d2f1",
      //         "三级告警",
      //        ""
      //       ]
      //     ],
      //     styles: [
      //       {
      //         "row": 0,
      //         "textColor": "#ffffff66"
      //       },{
      //         "col": 3,
      //         "pens": [
      //             {
      //                 "background": "#4583FF33",
      //                 "disableAnchor": true,
      //                 "height": 20,
      //                 "isBottom": false,
      //                 "lineWidth": 1,
      //                 "name": "rectangle",
      //                 "width": 20
      //             }
      //         ],
      //         "width": 40
      //     }
      //     ],
      //     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: 'pagination',
      //           label: '分页配置',
      //           type: 'code',
      //         },
      //         {
      //           key: 'data',
      //           label: '数据',
      //           type: 'code',
      //         },
      //         {
      //           key: 'styles',
      //           label: '样式',
      //           type: 'code',
      //         },
      //       ],
      //     }
      //   },
      // },
      {
        name: $t('树'),
        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: {
            text:true,
            custom: [
              {
                key: 'expandAll',
                label: $t('展开全部节点'),
                type: 'bool',
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('网页'),
        icon: 'l-iframe',
        data: {
          name: 'iframe',
          width: 500,
          height: 400,
          externElement: true,
          iframe: `https://${rootDomain?.slice(1)}`,
          props: {
            custom: iframeCustom,
          },
        },
      },
    ],
  },
  {
    name: $t('提醒'),
    show: true,
    list: [
      {
        name: $t('业务指标'),
        icon: 'l-yewuzhibiao',
        data: {
          width: 115,
          height: 25,
          name: 'indicator',
          data: [
            {
              type: 'text',
              color: '#FFFFFFD9',
              x: 0,
              text: $t('业务指标'),
            },
            {
              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: {
            text:true,
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('全局消息'),
        icon: 'l-quanjuxiaoxi',
        data: {
          width: 200,
          height: 40,
          text: $t('用于表示普通操作信息提示'),
          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: $t('文本'),
          //       type: 'text',
          //     },
          //     {
          //       key: 'textColor',
          //       label: $t('文本颜色'),
          //       type: 'color',
          //     },
          //   ],
          // },
        },
      },
      {
        name: $t('通知'),
        icon: 'l-tongzhi',
        data: {
          width: 360,
          height: 178,
          text: $t('通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；通知具体内容；'),
          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: $t('标题名称'),
          headingColor: '#FFFFFFE6',
          headingSize: 16,
          // headingWeight: 'bold',
          props: {
            custom: [
              {
                key: 'heading',
                label: $t('标题'),
                type: 'string',
              },
              {
                key: 'headingColor',
                label: $t('标题颜色'),
                type: 'color',
              },
              {
                key: 'headingSize',
                label: $t('标题大小'),
                type: 'number',
              },
              {
                key: 'headingWeight',
                label: $t('标题加粗'),
                type: 'select',
                options: [
                  { label: $t('加粗'), value: 'bold' },
                  { label: $t('正常'), value: '' },
                ],
              },
            ],
          },
        },
      },
      // {
      //   name: $t('对话框'),
      //   icon: 'l-pc',
      //   data: {
      //     width: 200,
      //     height: 200,
      //   },
      // },
    ],
  },
  {
    name: $t('轮播'),
    show: true,
    list: [
      {
        name: $t('水平轮播'),
        icon: 'l-paomadeng',
        data: {
          name: 'swiperline',
          width: 200,
          height: 40,
          data: [$t('轮播第一次数据'), $t('轮播第二次数据'), $t('轮播第三次数据')],
          hiddenText: true,
          props: {
            text:true,
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'timeout',
                label: $t('轮播时间'),
                type: 'number',
              },
            ],
          },
        },
      },
      {
        name: $t('垂直轮播'),
        icon: 'l-chuizhigundong',
        data: {
          name: 'swiperline',
          width: 200,
          height: 24,
          direction: 'vertical',
          lineHeight: 2,
          data: [$t('轮播第一次数据'), $t('轮播第二次数据'), $t('轮播第三次数据')],
          hiddenText: true,
          props: {
            text:true,
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'timeout',
                label: $t('轮播时间'),
                type: 'number',
              },
            ],
          },
        },
      },
      {
        name: $t('轮播图'),
        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: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('轮播页面'),
        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: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('导航'),
    show: true,
    list: [
      {
        name: $t('链接'),
        icon: 'l-lianjie',
        data: {
          text: $t('乐吾乐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: $t('地址'),
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: $t('返回'),
        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: $t('锚点'),
        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: $t('定位图元'),
                type: 'string',
              },
            ],
          },
        },
      },
      {
        name: $t('回到顶部'),
        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: $t('面包屑'),
        icon: 'l-mianbaoxie', //l-mianbaoxie
        data: {
          name: 'breadcrumb',
          width: 200,
          height: 20,
          data: [
            {
              key: '1',
              title: $t('页面1'),
              to: `https://doc${rootDomain}/document/135787991`,
              target: '_blank',
            },
            {
              key: '2',
              title: $t('页面2'),
              to: `https://2d${rootDomain}/?id=641d524a8df2c654ea652d7e`,
              target: '_blank',
            },
            {
              key: '3',
              title: $t('页面3'),
              to: `https://2d${rootDomain}/?id=6357a9e2d44b9402de84d2e8`,
              target: '_self',
            },
          ],
          props: {
            text:true,
            custom: [
              {
                key: 'gap',
                label: $t('间距'),
                type: 'number',
                min: 0,
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('下拉菜单'),
        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: $t('个人中心'),
              children: [
                {
                  key: '1-1',
                  icon: 'l-icon l-fly',
                  title: $t('测试测试'),
                },
              ],
            },
            {
              key: '2',
              icon: 'l-icon l-panel',
              title: $t('安全运行'),
            },
            {
              key: '3',
              icon: 'l-icon l-align-center',
              title: $t('智慧能源'),
            },
            {
              key: '4',
              icon: 'l-icon l-kongzhuangtai1',
              title: $t('数据分析'),
            },
            {
              key: '5',
              icon: 'l-icon l-quanjutishi',
              title: $t('运维管理'),
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: "background",
                label: $t("背景颜色"),
                type: "color"
              },
              {
                key: "textColor",
                label: $t("字体颜色"),
                type: "color"
              },
              {
                key: "fontSize",
                label: $t("字体大小"),
                type: "number"
              },
              {
                key: "iconSize",
                min: 12,
                label: $t("图标大小"),
                type: "number"
              },
              {
                key: "iconPosition",
                label: $t("图标位置"),
                type: 'select',
                options: [
                  { label: $t('靠左'), value: 'left' },
                  { label: $t('靠下'), value: 'bottom' },
                ],
              },
              {
                isNotString: true,
                key: "marginRight",
                label: $t("图标右间距"),
                type: "number"
              },
              {
                isNotString: true,
                key: "menuItemWidth",
                min: 100,
                label: $t("选项宽度"),
                type: "number"
              },
              {
                isNotString: true,
                key: "menuItemBgImg",
                label: $t("选项背景图"),
                type: "text"
              },
              {
                isNotString: true,
                key: "menuItemHeight",
                min: 0,
                label: $t("选项高度"),
                type: "number"
              },
              {
                key: "hoverBackground",
                label: $t("hover背景色"),
                type: "color"
              },
              {
                isNotString: true,
                key: "hoverColor",
                label: $t("hover字体颜色"),
                type: "color"
              },
              {
                isNotString: true,
                key: "activeBackground",
                label: $t("选中背景色"),
                type: "color"
              },
              {
                key: "activeColor",
                label: $t("选中字体颜色"),
                type: "color"
              },
              {
                key: "dropContentBgColor",
                label: $t("下拉内容背景色"),
                type: "color"
              },
              {
                isNotString: true,
                key: "renderSubMenu",
                label: $t("是否渲染二级菜单"),
                type: "switch"
              },
              {
                key: 'iframe',
                label: $t('关联Iframe'),
                type: 'text',
              },
            ],
          },
        },
      },
      {
        name: $t('导航菜单'),
        icon: 'l-daohangcaidan',
        data: {
          name: 'menuDom',
          width: 200,
          height: 400,
          externElement: true,
          data: [
            {
              title: $t('实时监测'),
              key: '0',
              icon: 'l-icon l-suofang',
              children: [
                {
                  title: $t('站点看板'),
                  key: '',
                  icon: 'l-icon l-fenzuzhuzhuangtu',
                  children: [
                    {
                      title: $t('三级标题'),
                      key: '',
                    },
                    {
                      title: $t('三级标题'),
                      key: '',
                    },
                  ],
                },
                {
                  title: $t('监控画面'),
                  key: '',
                  icon: 'l-icon l-biaoge',
                },
                {
                  title: $t('设备监控'),
                  key: '',
                  icon: 'l-icon l-zhexiantu',
                },
              ],
            },
            {
              title: $t('控制中心'),
              key: '',
              icon: 'l-icon l-tiaoxingtu',
            },
            {
              title: $t('告警管理'),
              key: '',
              icon: 'l-icon l-zhishideng',
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('分页'),
        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: {
            text:true,
            custom: [
              {
                key: 'total',
                label: $t('数据总条数'),
                type: 'number',
                min: 0,
              },
              {
                key: 'pageSize',
                label: $t('每页数据量'),
                type: 'number',
              },
              {
                key: 'pageSizeOptions',
                label: $t('分页大小控制器'),
                type: 'code',
              },
              // {
              //   key: 'maxPageBtn',
              //   label: $t('最多显示页码数按钮数'),
              //   type: 'number',
              // },
              {
                key: 'background',
                label: '背景颜色',
                type: 'color',
              },
              {
                key: 'activeBackground',
                label: '当前页背景颜色',
                type: 'color',
              },
              {
                key: 'color',
                label: '边框颜色',
                type: 'color',
              },
              {
                key: 'activeColor',
                label: '当前页边框颜色',
                type: 'color',
              },
              {
                key: 'textColor',
                label: '文字颜色',
                type: 'color',
              },
              { 
                key: 'activeTextColor',
                label: '当前页文字颜色',
                type: 'color',
              }
            ],
          },
        },
      },
      {
        name: $t('步骤条'),
        icon: 'l-buzhoutiao',
        data: {
          name: 'steps',
          width: 600,
          height: 60,
          direction: 'horizontal', //horizontal/vertical
          theme: 'default', //dot
          data: [
            {
              title: $t('已完成的步骤'),
              content: $t('这里是提示文字'),
              status: 'finish', //default/process/finish/error
            },
            {
              title: $t('出错的步骤'),
              content: $t('这里是提示文字'),
              status: 'error', //default/process/finish/error
            },
            {
              title: $t('进行中的步骤'),
              content: $t('这里是提示文字'),
              status: 'process', //default/process/finish/error
            },
            {
              title: $t('未完成的步骤'),
              content: $t('这里是提示文字'),
              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: {
            text:true,
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'statusColor',
                label: $t('各个状态颜色'),
                type: 'code',
              },
              {
                key: 'direction',
                label: $t('方向'),
                type: 'select',
                options: [
                  { label: $t('水平'), value: 'horizontal' },
                  { label: $t('垂直'), value: 'vertical' },
                ],
              },
            ],
          },
        },
      },
      // {
      //   name: $t('快速选项卡'),
      //   icon: 'l-shandianxuanxiangka',
      //   data: {
      //     name: 'quickTab',
      //     width: 440,
      //     height: 500,
      //     direction: 'horizontal',
      //     selectedKey: '1',
      //     btnHeight: 32,
      //     btnWidth: 100,
      //     gap:8,
      //     disableInput: true,
      //     container: true,
      //     followers: [],
      //     dragRange:true,
      //     disableRotate:true,
      //     data: [
      //       { text: '场景一', key: '0' },
      //       { 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',
      //         },
      //         {
      //           key: 'dragRange',
      //           label: '显示拖拽范围',
      //           type: 'bool',
      //         }
      //       ],
      //     },
      //   },
      // },
      {
        name: $t('基本选项卡'),
        icon: 'l-xuanxiangka',
        data: {
          name: 'tab',
          width: 440,
          height: 48,
          direction: 'horizontal',
          selectedKey: '1',
          btnHeight: 32,
          btnWidth: 100,
          gap:8,
          disableInput: true,
          data: [
            { text: $t('场景一'), key: '0', isForbidden: true },
            { text: $t('场景二'), key: '1' },
            { text: $t('场景三'), key: '2' },
            { text: $t('场景四'), key: '3' },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'direction',
                label: $t('方向'),
                type: 'select',
                options: [
                  { label: $t('水平'), value: 'horizontal' },
                  { label: $t('垂直'), value: 'vertical' },
                ],
              },
              {
                key: 'gap',
                label: $t('间隔'),
                type: 'number',
                min:1
              },
              {
                key: 'btnWidth',
                label: $t('按钮宽度'),
                type: 'number',
                min:1
              },
              {
                key: 'btnHeight',
                label: $t('按钮高度'),
                type: 'number',
                min:1
              },
              {
                key: 'activeBackground',
                label: $t('选中背景'),
                type: 'color',
              },
              {
                key: 'activeColor',
                label: $t('选中边框'),
                type: 'color',
              },
              {
                key: 'activeTextColor',
                label: $t('选中文字'),
                type: 'color',
              }, 
              {
                key: 'activeBgImage',
                label: $t('选中背景图片'),
                type: 'string',
              },
              {
                key: 'background',
                label: $t('(未选中)背景'),
                type: 'color',
              },
              {
                key: 'color',
                label: $t('(未选中)边框'),
                type: 'color',
              },
              {
                key: 'textColor',
                label: $t('(未选中)文字'),
                type: 'color',
              },
              {
                key: 'bgImage',
                label: $t('(未选中)背景图片'),
                type: 'string',
              }
            ],
          },
        },
      },
      {
        name: $t('卡片选项卡'),
        icon: 'l-xuanxiangka',
        data: {
          name: 'tab',
          width: 410,
          height: 36,
          direction: 'horizontal',
          selectedKey: '1',
          btnHeight: 32,
          btnWidth: 100,
          gap:2,
          background:'#272c33',
          activeBackground:'#272c33',
          color:'transparent',
          disableInput: true,
          data: [
            { 
              text: $t('全部(15)'), 
              key: '0',
              radius:[10,10,0,0]
            },
            { 
              text: $t('正常运行(7)'), 
              key: '1',
              textColor:'green',
              activeTextColor:'green'
             },
            { 
              text: $t('故障告警(0)'), 
              key: '2',
              textColor:'red',
              activeTextColor:'red'
            },
            { 
              text: $t('通讯异常(8)'), 
              key: '3',
              textColor:'rgb(68,81,93)',
              activeTextColor:'rgb(68,81,93)'
            },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'direction',
                label: $t('方向'),
                type: 'select',
                options: [
                  { label: $t('水平'), value: 'horizontal' },
                  { label: $t('垂直'), value: 'vertical' },
                ],
              },
              {
                key: 'gap',
                label: $t('间隔'),
                type: 'number',
                min:1
              },
              {
                key: 'btnWidth',
                label: $t('按钮宽度'),
                type: 'number',
                min:1
              },
              {
                key: 'btnHeight',
                label: $t('按钮高度'),
                type: 'number',
                min:1
              },
              {
                key: 'activeBackground',
                label: $t('选中背景'),
                type: 'color',
              },
              {
                key: 'activeColor',
                label: $t('选中边框'),
                type: 'color',
              },
              {
                key: 'activeTextColor',
                label: $t('选中文字'),
                type: 'color',
              }, 
              {
                key: 'activeBgImage',
                label: $t('选中背景图片'),
                type: 'string',
              },
              {
                key: 'background',
                label: $t('(未选中)背景'),
                type: 'color',
              },
              {
                key: 'color',
                label: $t('(未选中)边框'),
                type: 'color',
              },
              {
                key: 'textColor',
                label: $t('(未选中)文字'),
                type: 'color',
              },
              {
                key: 'bgImage',
                label: $t('(未选中)背景图片'),
                type: 'string',
              }
            ],
          },
        },
      },
      {
        name: $t('多选选项卡'),
        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: $t('场景一'), key: '0' },
            { text: $t('场景二'), key: '1', isForbidden: true },
            { text: $t('场景三'), key: '2' },
            { text: $t('场景四'), key: '3' },
          ],
          props: {
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'direction',
                label: $t('方向'),
                type: 'select',
                options: [
                  { label: $t('水平'), value: 'horizontal' },
                  { label: $t('垂直'), value: 'vertical' },
                ],
              },
              {
                key: 'gap',
                label: $t('间隔'),
                type: 'number',
                min:1
              },
              {
                key: 'btnWidth',
                label: $t('按钮宽度'),
                type: 'number',
                min:1
              },
              {
                key: 'btnHeight',
                label: $t('按钮高度'),
                type: 'number',
                min:1
              },
              {
                key: 'activeBackground',
                label: $t('选中背景'),
                type: 'color',
              },
              {
                key: 'activeColor',
                label: $t('选中边框'),
                type: 'color',
              },
              {
                key: 'activeTextColor',
                label: $t('选中文字'),
                type: 'color',
              }, 
              {
                key: 'activeBgImage',
                label: $t('选中背景图片'),
                type: 'string',
              },
              {
                key: 'background',
                label: $t('(未选中)背景'),
                type: 'color',
              },
              {
                key: 'color',
                label: $t('(未选中)边框'),
                type: 'color',
              },
              {
                key: 'textColor',
                label: $t('(未选中)文字'),
                type: 'color',
              },
              {
                key: 'bgImage',
                label: $t('(未选中)背景图片'),
                type: 'string',
              }
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('输入'),
    show: true,
    list: [
      {
        name: $t('按钮'),
        icon: 'l-anniu',
        data: {
          name: 'rectangle',
          x: 300,
          y: 200,
          width: 80,
          height: 30,
          disableAnchor: true,
          borderRadius: 2,
          text: $t('按钮'),
          activeBackground:undefined,
          activeColor: undefined,
          background: '#4583FF',
          color: '#1890ff',
          hoverBackground: '#40a9ff',
          hoverColor: '#7DA4FF',
          textColor: '#ffffff',
          hoverTextColor: '#ffffff',
          activeTextColor: '#ffffff',
          mouseDownValid:true,
          props: {
            custom: [
              {
                key: 'mouseDownColor',
                label: $t('按下颜色'),
                type: 'color',
              },
              {
                key: 'mouseDownBackground',
                label: $t('按下背景'),
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: $t('状态按钮'),
        icon: 'l-anniu',
        data: {
          name: 'rectangle',
          x: 300,
          y: 200,
          width: 80,
          height: 30,
          disableAnchor: true,
          borderRadius: 2,
          text: $t('按钮'),
          // activeBackground:undefined,
          // activeColor: undefined,
          background: '#4583FF',
          color: '#1890ff',
          bkType:1,
          lineWidth:0,
          gradientColors:"linear-gradient(90deg,rgba(25, 110, 104, 1) 0%,rgba(22, 161, 84, 1) 100%)",
          onGradientColors:"linear-gradient(90deg,rgba(5, 207, 193, 1) 0%,rgba(4, 207, 95, 1) 100%)",
          // hoverBackground: '#40a9ff',
          // hoverColor: '#7DA4FF',
          textColor: '#ffffff',
          hoverTextColor: '#ffffff',
          activeTextColor: '#ffffff',
          // mouseDownValid:true,
          switch:true,
          props: {
            custom: [
              {
                key: 'mouseDownColor',
                label: $t('按下颜色'),
                type: 'color',
              },
              {
                key: 'mouseDownBackground',
                label: $t('按下背景'),
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: $t('文本输入框'),
        icon: 'l-wenbenshurukuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          input: true,
          ellipsis: true,
          text: $t('输入文本'),
          textAlign: 'left',
          background: '#15181C',
          color: '#424B61',
          textColor: '#FFFFFFE6',
          // color: '#D9D9D9FF',
          // hoverTextColor: '#000000FF',
          // activeTextColor: '#000000FF',
          textLeft: 10,
          interaction: true,
          props: {
            custom: [
              {
                key: 'autofocus',
                label: '自动获得焦点',
                type: 'bool',
              },
            ]
          }
        },
      },
      {
        name: $t('数字输入框'),
        icon: 'l-shuzishurukuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          input: true,
          ellipsis: true,
          text: $t('输入数字'),
          textAlign: 'left',
          background: '#15181C',
          color: '#424B61',
          textColor: '#FFFFFFE6',
          interaction: true,
          props: {
            custom: [
              {
                key: 'autofocus',
                label: '自动获得焦点',
                type: 'bool',
              },
            ]
          },
          // 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: $t('单选框'),
        icon: 'l-danxuanxiang',
        data: {
          name: 'radio',
          width: 300,
          height: 30,
          disableAnchor: true,
          direction: 'horizontal', // 'vertical', //'horizontal',
          theme: 'normal',
          itemPosition: [],
          data: [
            { key: '1', text: $t('选项一'), isForbidden: true },
            { key: '2', text: $t('选项示例二') },
            { key: '3', text: $t('选项三') },
          ],
          selectKey: '2',
          props: {
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'direction',
                label: $t('排列方向'),
                type: 'select',
                options: [
                  { label: $t('横向'), value: 'horizontal' },
                  { label: $t('纵向'), value: 'vertical' },
                ],
              },
              {
                key: 'theme',
                label: $t('模式'),
                type: 'select',
                options: [
                  { label: $t('通用模式'), value: 'normal' },
                  { label: $t('按钮模式'), value: 'button' },
                ],
              },
            ],
          },
        },
      },
      {
        name: $t('多选框'),
        icon: 'l-duoxuanxiang',
        data: {
          name: 'checkbox',
          width: 300,
          height: 30,
          direction: 'horizontal', // 'vertical', //'horizontal',
          theme: 'normal', //button   normal
          data: [
            { key: '1', text: $t('选项一'), isForbidden: true },
            { key: '2', text: $t('选项示例二') },
            { key: '3', text: $t('选项三') },
          ],
          selectedKeys: ['2', '3'],
          props: {
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
              {
                key: 'direction',
                label: $t('排列方向'),
                type: 'select',
                options: [
                  { label: $t('横向'), value: 'horizontal' },
                  { label: $t('纵向'), value: 'vertical' },
                ],
              },
              {
                key: 'theme',
                label: $t('模式'),
                type: 'select',
                options: [
                  { label: $t('通用模式'), value: 'normal' },
                  { label: $t('按钮模式'), value: 'button' },
                ],
              },
            ],
          },
        },
      },
      {
        name: $t('下拉选择器'),
        icon: 'l-xialaxuanzekuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          ellipsis: true,
          text: $t('选项1'),
          textAlign: 'left',
          input: true,
          background: '#15181C',
          color: '#424B61',
          textColor: '#FFFFFFE6',
          hoverTextColor: '#FFFFFFE6',
          activeTextColor: '#FFFFFFE6',
          textLeft: 10,
          interaction: true,
          dropdownList: [
            {
              text: $t('选项1'),
            },
            {
              text: $t('选项2'),
            },
            {
              text: $t('选项3'),
            },
          ],
          props: {
            custom: [
              {
                key: 'dropdownList',
                label: $t('下拉列表'),
                type: 'code',
              },
              {
                key: 'dropdownBackground',
                label: $t('下拉背景'),
                type: 'color',
              },
              {
                key: 'dropdownColor',
                label: $t('下拉颜色'),
                type: 'color',
              },
              {
                key: 'dropdownHoverBackground',
                label: $t('下拉悬停背景'),
                type: 'color',
              },
              {
                key: 'dropdownHoverColor',
                label: $t('下拉悬停颜色'),
                type: 'color',
              },
              {
                key: 'autofocus',
                label: '自动获得焦点',
                type: 'bool',
              },
            ]
          }
        },
      },
      {
        name: $t('密码输入框'),
        icon: 'l-wenbenshurukuang',
        data: {
          name: 'inputDom',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: true,
          inputType: 'password',
          hiddenText: true,
          suffixOff:true
        },
      },
      {
        name: $t('时间选择器'),
        icon: 'l-shijianxuanzekuang',
        data: {
          name: 'inputDom',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'time',
          hiddenText: true,
        },
      },
      {
        name: $t('日期选择器'),
        icon: 'l-riqixuanzekuang',
        data: {
          name: 'inputDom',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'date',
          hiddenText: true,
        },
      },
      {
        name: $t('颜色选择器'),
        icon: 'l-yansexuanzekuang',
        data: {
          name: 'inputDom',
          width: 32,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'color',
          hiddenText: true,
        },
      },
      {
        name: $t('开关'),
        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: $t('开颜色'),
                type: 'color',
              },
              {
                key: 'offColor',
                label: $t('关颜色'),
                type: 'color',
              },
              {
                key: 'onStrokeColor',
                label: $t('开描边颜色'),
                type: 'color',
              },
              {
                key: 'offStrokeColor',
                label: $t('关描边颜色'),
                type: 'color',
              },
              {
                key: 'disable',
                label: $t('是否禁用'),
                type: 'bool',
              },
              {
                key: 'disableOnColor',
                label: $t('开（禁）颜色'),
                type: 'color',
              },
              {
                key: 'disableOffColor',
                label: $t('关（禁）颜色'),
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: $t('滑块'),
        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: '%',
          props:{
            text:true
          } 
        },
      },
    ],
  },
  {
    name: $t('工控'),
    show: true,
    list: [
      {
        name: $t('圆柱水位'),
        icon: 'l-yuanzhushuiwei',
        data: {
          name: 'waterTank',
          width: 128,
          height: 128,
          disableAnchor: true,
          color: '#FFFFFF00',
          progress: 0.5,
          progressColor: '#4583FF',
          // props: {
          //   custom: [
          //     {
          //       key: 'progress',
          //       label: $t('水位'),
          //       type: 'number',
          //       min:0,
          //       max:1,
          //     },
          //     {
          //       key: 'progressColor',
          //       label: $t('水位颜色'),
          //       type: 'color',
          //     }
          //   ]
          // }
        },
      },
      {
        name: $t('球形水位'),
        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,
          distance:10, 
          props: {
            look:true,
            custom: [
              {
                key: 'value',
                label: $t('值'),
                type: 'number',
              },
              {
                key: 'max',
                label: $t('最大值'),
                type: 'number',
              },
              {
                key: 'min',
                label: $t('最小值'),
                type: 'number',
              },
              {
                key: 'maxBackground',
                label: $t('>最大颜色'),
                type: 'color',
              },
              {
                key: 'minBackground',
                label: $t('<最小颜色'),
                type: 'color',
              },
              {
                key: 'scaleShow',
                label: $t('刻度显示'),
                type: 'bool',
              },
              {
                key: 'wAmplitude',
                label: $t('宽幅，推荐值0-10'),
                type: 'number',
                placeholder:$t('默认2')
              },
              {
                key: 'hAmplitude',
                label: $t('高幅，推荐值1-10'),
                type: 'number',
                placeholder:$t('默认5')
              },
              {
                key: 'distance',
                label: $t('液边距'),
                type: 'number',
              },
            ]
          }
        },
      },
      {
        name: $t('水箱'),
        icon: 'l-pool',
        data: {
          name: 'tank',
          width: 350,
          height: 120,
          disableAnchor: true,
          background: '#4583FF',
          borderRadius: 0.1,
          progress:0.5,
          maxBackground: '#f5222d',
          minBackground: '#52c41a',
          props: {
            look:true,
            custom: [
              {
                key: 'wAmplitude',
                label: $t('宽幅，推荐值0-10'),
                type: 'number',
                placeholder:$t('默认2')
              },
              {
                key: 'hAmplitude',
                label: $t('高幅，推荐值1-10'),
                type: 'number',
                placeholder:$t('默认5')
              },
              {
                key: 'distance',
                label: $t('液边距'),
                type: 'number',
              },
            ]
          }
        }
      },
      {
        name: $t('指示灯'),
        icon: 'l-zhishideng',
        data: {
          name: 'indicatorLight',
          disableAnchor: true,
          width: 128,
          height: 128,
          displayStatus: 0, //显示状态 默认 方形 圆形
          background: '#4583FF33',
          color: '#4583FF',
          hiddenText: true,
          // onColor: '#58CC84',
          animations:[
            {
                name: $t("动画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: $t('显示状态'),
                type: 'number',
              },
            ]
          }
        },
        props: {
          custom: [
            {
              key: 'state',
              value: 'on',
              type: 'select',
              options: [
                { label: $t('开'), value: 'on' },
                { label: $t('关'), value: 'off' },
              ],
            },
          ],
        },
      },
      {
        name: $t('圆形按钮'),
        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: $t('开时颜色'),
                type: 'color',
              },
              {
                key: 'offColor',
                label: $t('关时颜色'),
                type: 'color',
              },
              {
                key: 'onShadowColor',
                label: $t('开时阴影颜色'),
                type: 'color',
              },
              {
                key: 'offShadowColor',
                label: $t('关时阴影颜色'),
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: $t('船型开关'),
        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: $t('开时颜色'),
                type: 'color',
              },
              {
                key: 'offColor',
                label: $t('关时颜色'),
                type: 'color',
              },
              {
                key: 'onShadowColor',
                label: $t('开时阴影颜色'),
                type: 'color',
              },
              {
                key: 'offShadowColor',
                label: $t('关时阴影颜色'),
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: $t('转换开关'),
        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: $t('开时颜色'),
                type: 'color',
              },
              {
                key: 'offColor',
                label: $t('关时颜色'),
                type: 'color',
              },
              {
                key: 'onShadowColor',
                label: $t('开时阴影颜色'),
                type: 'color',
              },
              {
                key: 'offShadowColor',
                label: $t('关时阴影颜色'),
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: $t('闸刀'),
        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: $t('开时颜色'),
                type: 'color',
              },
              {
                key: 'offColor',
                label: $t('关时颜色'),
                type: 'color',
              },
            ]
          }
          // events: [
          //   {
          //     action: 5,
          //     name: 'click',
          //     value: 'window.meta2d.setValue({id:pen.id,switch:!pen.switch});',
          //   },
          // ],
        },
      },
      {
        name: $t('拨动开关'),
        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: $t('开时颜色'),
                type: 'color',
              },
              {
                key: 'offColor',
                label: $t('关时颜色'),
                type: 'color',
              },
            ]
          }
          // events: [
          //   {
          //     action: 5,
          //     name: 'click',
          //     value:
          //       'window.meta2d.setValue({id:pen.id,switch:!pen.switch});window.meta2d.render()',
          //   },
          // ],
        },
      },
      {
        name: $t('空气开关'),
        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: $t('开时颜色'),
                type: 'color',
              },
              {
                key: 'offColor',
                label: $t('关时颜色'),
                type: 'color',
              },
            ]
          }
        },
      },
      {
        name: $t('水柱温度计'),
        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,
          props: {
            custom: [
              {
                key: 'value',
                label: $t('当前值'),
                type: 'number',
              },
              {
                key: 'max',
                label: $t('最大值'),
                type: 'number',
              },
              {
                key: 'min',
                label: $t('最小值'),
                type: 'number',
              },
            ]
          }
        },
      },
      {
        name: $t('扁平温度计'),
        icon: 'l-bianpingwendu',
        data: {
          name: 'thermometer1',
          disableAnchor: true,
          width: 48,
          height: 128,
          backgroundColor: '#666',
          value: 0,
          min: -20,
          max: 20,
          color: '#4583FF',
          background: '#FF5D3C33',
          activeBackground: '#FF5D3C',
          textColor: '#FFFFFFB3',
          props: {
            custom: [
              {
                key: 'value',
                label: $t('当前值'),
                type: 'number',
              },
              {
                key: 'max',
                label: $t('最大值'),
                type: 'number',
              },
              {
                key: 'min',
                label: $t('最小值'),
                type: 'number',
              }
            ]
          }
        },
      },
      {
        name: $t('电池'),
        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: $t('最小值'),
                type: 'number',
                placeholder:$t('默认0')
              },
              {
                key: 'max',
                label: $t('最大值'),
                type: 'number',
                placeholder:$t('默认1')
              },
              {
                key: 'splitNumber',
                label: $t('分段数'),
                type: 'number',
              },
              {
                key: 'gap',
                label: $t('间隔占比'),
                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',
];
