visualization-design/src/services/defaults.ts

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

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

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

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

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

export const formComponents = [
  {
    name: '基础',
    show: true,
    list: [
      {
        name: '文本',
        icon: 'l-text',
        data: {
          width: 160,
          height: 30,
          name: 'text',
          text: 'le5le-meta2d',
        },
      },
      {
        name: '数字',
        icon: 'l-text',
        data: {
          width: 160,
          height: 30,
          name: 'text',
          text: '3.1415926',
          keepDecimal: 2,
        },
      },
      {
        name: '进度条',
        icon: 'l-jindutiao',
        data: {
          anchors: [],
          disableAnchor: true,
          name: 'slider',
          width: 300,
          height: 20,
          value: 10,
          textWidth: 50,
          barHeight: 4,
          min: 0,
          max: 100,
          color: '#1890ff',
          background: '#D4D6D9',
          textColor: '#222222',
          unit: '%',
        },
      },
      {
        name: '图标',
        icon: 'l-tubiao',
        data: {
          width: 100,
          height: 100,
          name: 'image',
          icon: '\uea35',
          iconFamily: 'l-icon',
        },
      },
      {
        name: '图片',
        icon: 'l-image',
        data: {
          width: 100,
          height: 100,
          name: 'image',
          image: cdn + '/img/logo.png',
        },
      },
      {
        name: 'GIF',
        icon: 'l-image',
        data: {
          width: 100,
          height: 100,
          name: 'gif',
          image: cdn + '/png/电信机房/防火墙.gif',
        },
      },
      {
        name: '视频',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
          externElement: true,
          name: 'video',
          video:
            'https://video.699pic.com/videos/17/69/11/a_aa3jeKZ0D63g1556176911_10s.mp4',
        },
      },
      {
        name: '音频',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
          externElement: true,
          name: 'video',
          audio: 'https://www.xzmp3.com/down/597caee79849.mp3',
        },
      },
      {
        name: '头像',
        icon: 'l-pc',
        data: {
          width: 30,
          height: 30,
          disableAnchor: true,
          name: 'square',
          lineWidth: 0,
          image: '/img/avatar.png',
          imageRadius: 0.5,
          background: '#689f38',
          borderRadius: 0.5,
          ratio: true,
        },
      },
      {
        name: '徽标',
        icon: 'l-pc',
        data: {
          width: 35,
          height: 20,
          name: 'square',
          borderRadius: 0.5,
          lineWidth: 0,
          background: '#d54941',
          color: '#fff',
          text: '99+',
        },
      },
      {
        name: '标签',
        icon: 'l-pc',
        data: {
          text: 'success',
          width: 80,
          height: 24,
          borderRadius: 0.1,
          name: 'rectangle',
          lineWidth: 1,
          fontSize: 12,
          icon: '\uea10',
          iconFamily: 'l-icon',
          iconColor: '#52c41a',
          iconSize: 12,
          iconAlign: 'left',
          iconLeft: 8,
          textAlign: 'right',
          color: '#52c41a',
          background: '#f6ffed',
          textLeft: -6,
        },
      },
    ],
  },
  {
    name: '时间',
    show: true,
    list: [
      {
        name: '时间',
        icon: 'l-shijianxuanzekuang',
        data: {
          name: 'leTime',
          width: 300,
          height: 40,
          text: '当前时间',
          timeFormat:
            '`${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒 星期${week}`',
        },
      },
      {
        name: '倒计时',
        icon: 'l-shijianxuanzekuang',
        data: {
          name: 'countdown',
          width: 300,
          height: 40,
          text: '倒计时',
          calculativeTime: '2023/9/23 00:00:00', //配置未来的时间
          timeFormat:
            '`距离杭州亚运会还有：${day}天${hours}时${minutes}分${seconds}秒`',
        },
      },
      {
        name: '水平时间轴',
        icon: 'l-shijianzhou',
        data: {
          name: 'leTimeline',
          width: 500,
          height: 40,
          hiddenText: true,
          direction: 'horizontal',
          labelAlign: '', //left/right/alternate/top/bottom
          mode: 'alternate', //alternate
          data: [
            {
              label: '2022-01-01',
              content: '事件一',
              // 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-01-01',
              content: '事件一',
            },
            {
              label: '2022-02-01',
              content: '事件二',
            },
            {
              label: '2022-03-01',
              content: '事件三',
            },
            {
              label: '2022-04-01',
              content: '事件四',
            },
          ],
          text: '时间轴',
        },
      },
      {
        name: '垂直时间轴',
        icon: 'l-shijianzhou',
        data: {
          name: 'leTimeline',
          width: 40,
          height: 500,
          text: '时间轴',
          hiddenText: true,
          direction: 'vertical',
          labelAlign: 'left', //left/right/alternate/top/bottom
          // mode: 'alternate', //alternate
          data: [
            {
              label: '2022-01-01',
              content: '事件一',
              // 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-01-01',
              content: '事件一',
            },
            {
              label: '2022-02-01',
              content: '事件二',
            },
            {
              label: '2022-03-01',
              content: '事件三',
            },
            {
              label: '2022-04-01',
              content: '事件四',
            },
          ],
        },
      },
      {
        name: '日历',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
          name: 'calendar',
        },
      },
    ],
  },
  {
    name: '面板',
    show: true,
    list: [
      {
        name: '列表',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '表格',
        icon: 'l-biaoge',
        data: {
          name: 'table2',
          width: 0,
          height: 0,
          disableAnchor: true,
          colWidth: 150,
          rowHeight: 40,
          data: [
            ['设备 ID', '设备名称', '数据协议', '状态', '操作'],
            ['1', '200', 'MQTT', '正在运行', {}],
            ['2', '湿度传感器', 'MQTT', '正在运行', {}],
            ['3', '物联网设备', 'MQTT', '正在运行', {}],
            ['4', '物联网设备/智能家居/智慧城市', 'MQTT', '正在运行', {}],
          ],
          styles: [
            {
              row: 1,
              col: 1,
              color: '#ff0000',
              background: '#ffff00',
              wheres: [
                //触发条件 成立后才允许配置样式
                {
                  comparison: '<=',
                  value: '123',
                },
              ],
            },
            {
              row: 0,
              height: 60,
            },
            {
              col: 4,
              width: 200, //为该列设置额外的节点
              pens: [
                {
                  name: 'rectangle',
                  width: 50,
                  height: 20,
                  text: '编辑',
                  fontSize: 0.6,
                  disableAnchor: true,
                  activeBackground: '#40a9ff',
                  activeColor: '#40a9ff',
                  background: '#1890ff',
                  color: '#1890ff',
                  hoverBackground: '#40a9ff',
                  hoverColor: '#40a9ff',
                  textColor: '#ffffff',
                  hoverTextColor: '#ffffff',
                  activeTextColor: '#ffffff',
                  events: [
                    {
                      action: 5,
                      name: 'click',
                      value: 'alert("点击了编辑")',
                    },
                  ],
                },
                {
                  name: 'rectangle',
                  width: 80,
                  height: 20,
                  text: '实时数据',
                  fontSize: 0.6,
                  disableAnchor: true,
                  activeBackground: '#40a9ff',
                  activeColor: '#40a9ff',
                  background: '#1890ff',
                  color: '#1890ff',
                  hoverBackground: '#40a9ff',
                  hoverColor: '#40a9ff',
                  textColor: '#ffffff',
                  hoverTextColor: '#ffffff',
                  activeTextColor: '#ffffff',
                  events: [
                    {
                      action: 5,
                      name: 'click',
                      value: 'alert("点击了实时数据")',
                    },
                  ],
                },
              ],
            },
          ],
        },
      },
      {
        name: '树',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '网页',
        icon: 'l-02',
        data: {
          name: 'iframe',
          width: 100,
          height: 100,
          externElement: true,
          iframe: 'https://le5le.com',
        },
      },
    ],
  },
  {
    name: '提醒',
    show: true,
    list: [
      {
        name: '业务指标',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '全局消息',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '通知',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '对话框',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
    ],
  },
  {
    name: '轮播',
    show: true,
    list: [
      {
        name: '水平轮播',
        icon: 'l-shijianzhou',
        data: {
          name: 'leSwiperline',
          width: 200,
          height: 40,
          data: ['轮播第一次数据', '轮播第二次数据', '轮播第三次数据'],
          hiddenText: true,
        },
      },
      {
        name: '垂直轮播',
        icon: 'l-shijianzhou',
        data: {
          name: 'leSwiperline',
          width: 200,
          height: 24,
          direction: 'vertical',
          lineHeight: 2,
          data: ['轮播第一次数据', '轮播第二次数据', '轮播第三次数据'],
          hiddenText: true,
        },
      },
      {
        name: '轮播图',
        icon: 'l-pc',
        data: {
          name: 'leSwiper',
          width: 400,
          height: 300,
          // swiperType: 'iframe',
          // data: [
          //   {
          //     src: 'https://2d.le5le.com/preview?id=6357a9e2d44b9402de84d2e8',
          //   },
          //   {
          //     src: 'https://2d.le5le.com/preview?id=6357aec8d44b9402de84d2f1',
          //   },
          //   {
          //     src: 'https://2d.le5le.com/preview?id=641d524a8df2c654ea652d7e',
          //   },
          // ],
          data: [
            {
              src: 'https://2ds.le5le.com/img/banner1.bc890350.png',
            },
            {
              src: 'https://2ds.le5le.com/img/banner2.adab6a6e.png',
            },
            {
              src: 'https://2ds.le5le.com/img/banner3.86b53aed.png',
            },
          ],
          hiddenText: true,
        },
      },
    ],
  },
  {
    name: '导航',
    show: true,
    list: [
      {
        name: '链接',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '返回',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '锚点',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '回到顶部',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '面包屑',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '下拉菜单',
        icon: 'l-daohangcaidan',
        data: {
          name: 'leHeadMenu',
          width: 650,
          height: 60,
          externElement: true,
          selectedKeys: ['1'],
          activeColor: '#4E85E5',
          data: [
            {
              key: '1',
              icon: 't-icon t-align-top',
              title: '平台中心',
              children: [
                {
                  key: '1-1',
                  icon: 't-icon t-align-top',
                  title: '测试测试',
                },
              ],
            },
            {
              key: '2',
              icon: 't-icon t-04',
              title: '安全运行',
            },
            {
              key: '3',
              icon: 't-icon t-warn',
              title: '智慧能源',
            },
            {
              key: '4',
              icon: 't-icon t-line-chart',
              title: '数据分析',
            },
            {
              key: '5',
              icon: 't-icon t-pie-chart',
              title: '运维管理',
            },
            {
              key: '6',
              icon: 't-icon t-dashboard-chart',
              title: '资产设置',
            },
          ],
        },
      },
      {
        name: '导航菜单',
        icon: 'l-zhediemianban',
        data: {
          name: 'leMenu',
          width: 200,
          height: 400,
          externElement: true,
          data: [
            {
              title: '实时监测',
              key: '0',
              show: true,
              icon: 't-icon t-10',
              children: [
                {
                  title: '站点看板',
                  key: '',
                  show: true,
                  children: [
                    {
                      title: '三级标题',
                      key: '',
                      show: true,
                    },
                    {
                      title: '三级标题',
                      key: '',
                      show: true,
                    },
                  ],
                },
                {
                  title: '监控画面',
                  key: '',
                  show: true,
                },
                {
                  title: '设备监控',
                  key: '',
                  show: true,
                },
                {
                  title: '变压器监测',
                  key: '',
                  show: true,
                },
              ],
            },
            {
              title: '控制中心',
              key: '',
              show: true,
            },
            {
              title: '告警管理',
              key: '',
              show: true,
            },
          ],
          expand: true,
        },
      },
      {
        name: '分页',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '步骤条',
        icon: 'l-pc',
        data: {
          width: 200,
          height: 200,
        },
      },
      {
        name: '选项卡',
        icon: 'l-pc',
        data: {
          name:'leTab',
          width: 500,
          height: 50,
          direction:'vertical',
          selectKey:'1',
          selectedKeys:[],
          them:'',
          data:[
            {text:'场景一',key:'0',isForbidden:true},
            {text:'场景二',key:'1'},
            {text:'场景三',key:'2'},
            {text:'场景四',key:'3'}
          ]
        },
      },
      // {
      //   name: '多选选项卡',
      //   icon: 'l-pc',
      //   data: {
      //     name:'leTabs',
      //     width: 500,
      //     height: 50,
      //     direction:'horizontal',
      //     selectedKeys:['0'],
      //     data:[
      //       {text:'场景一',key:'0'},
      //       {text:'场景二',key:'1',isForbidden:true},
      //       {text:'场景三',key:'2'},
      //       {text:'场景四',key:'3'}
      //     ]
      //   },
      // },
    ],
  },
  {
    name: '输入',
    show: true,
    list: [
      {
        name: '按钮',
        icon: 'l-anniu',
        data: {
          name: 'rectangle',
          x: 300,
          y: 200,
          width: 80,
          height: 30,
          disableAnchor: true,
          borderRadius: 2,
          text: '按钮',
          activeBackground: '#40a9ff',
          activeColor: '#40a9ff',
          background: '#1890ff',
          color: '#1890ff',
          hoverBackground: '#40a9ff',
          hoverColor: '#40a9ff',
          textColor: '#ffffff',
          hoverTextColor: '#ffffff',
          activeTextColor: '#ffffff',
        },
      },
      {
        name: '文本输入框',
        icon: 'l-shurukuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          input: true,
          ellipsis: true,
          text: '输入数据',
          textAlign: 'left',
          color: '#D9D9D9FF',
          textColor: '#000000FF',
          hoverTextColor: '#000000FF',
          activeTextColor: '#000000FF',
          textLeft: 10,
        },
      },
      {
        name: '数字输入框',
        icon: 'l-shurukuang',
        data: {},
      },
      {
        name: '单选框',
        icon: 'l-danxuankuang',
        data: {
          name: 'leRadio',
          width: 150,
          height: 30,
          disableAnchor: true,
          direction: 'horizontal', // 'vertical', //'horizontal',
          them:'button',
          itemPosition:[],
          data: [
            {key:'1', text: '选项一', isForbidden: true },
            {key:'2', text: '选项二徐昂选' },
            {key:'3', text: '选项三' },
          ],
          selectKey: '2',
        },
      },
      {
        name: '多选框',
        icon: 'l-xuanzeqi',
        data: {
          name: 'leCheckBox',
          width: 100,
          height: 30,
          direction: 'horizontal', // 'vertical', //'horizontal',
          them:'',
          data: [
            {key:'1', text: '选项一', isForbidden: true },
            {key:'2', text: '选项二徐昂选' },
            {key:'3', text: '选项三' },
          ],
          selectedKeys:['2','3']
        },
      },
      {
        name: '下拉选择器',
        icon: 'l-xuanzeqi',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          ellipsis: true,
          text: '选项1',
          textAlign: 'left',
          input: true,
          color: '#D9D9D9FF',
          textColor: '#000000FF',
          hoverTextColor: '#000000FF',
          activeTextColor: '#000000FF',
          textLeft: 10,
          dropdownList: [
            {
              text: '选项1',
            },
            {
              text: '选项2',
            },
            {
              text: '选项3',
            },
          ],
        },
      },
      {
        name: '时间选择器',
        icon: 'l-riqixuanzekuang',
        data: {
          name: 'leInput',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'time',
          hiddenText: true,
        },
      },
      {
        name: '日期选择器',
        icon: 'l-riqixuanzekuang',
        data: {
          name: 'leInput',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'date',
          hiddenText: true,
        },
      },
      {
        name: '颜色选择器',
        icon: 'l-maodian',
        data: {
          name: 'leInput',
          width: 200,
          height: 32,
          externElement: true,
          prefix: false,
          suffix: false,
          inputType: 'color',
          hiddenText: true,
        },
      },
      {
        name: '开关',
        icon: 'l-kaiguan',
        data: {
          name: 'switch',
          disableAnchor: true,
          height: 30,
          width: 60,
          checked: true,
          offColor: '#BFBFBF',
          onColor: '#1890ff',
          disableOffColor: '#E5E5E5',
          disableOnColor: '#A3D3FF',
          hoverBackground: '#40a9ff',
        },
      },
      {
        name: '滑块',
        icon: 'l-kaiguan',
        data: {},
      },
    ],
  },
  {
    name: '工控',
    show: true,
    list: [
      {
        name: '圆柱水位',
        icon: 'l-db',
        data: {
          name: 'waterTank',
          width: 100,
          height: 100,
          disableAnchor: true,
          color: '#FFFFFF00',
          progress: 0.5,
          progressColor: '#00a9e6',
        },
      },
      {
        name: '球形水位',
        icon: 'l-shuiliujianceqi',
        data: {
          name: 'watermeter',
          width: 100,
          height: 100,
          disableAnchor: true,
          background: '#faad14',
          value: 50,
          max: 70,
          min: 20,
          maxBackground: '#f5222d',
          minBackground: '#52c41a',
          // maxText: 'max',
          // minText: 'min',
          scaleShow: false,
        },
      },
      {
        name: '指示灯',
        icon: 'l-tuxingzhishideng1',
        data: {
          name: 'indicatorLight',
          width: 100,
          height: 100,
          displayStatus: 0, //显示状态 默认 方形 圆形
          background: '#5ac8f7',
          color: '#5ac8f7',
          hiddenText: true,
          frames: [
            {
              background: '#f53e6c',
              color: '#f53e6c',
              bkType: 0,
              duration: 200,
              strokeType: 0,
              visible: true,
            },
            {
              background: '#5ac8f7',
              color: '#5ac8f7',
              bkType: 0,
              duration: 200,
              strokeType: 0,
              visible: true,
            },
          ],
          animateType: 'custom',
        },
      },
      {
        name: '圆形按钮',
        icon: 'l-tuxingzhishideng1',
        data: {},
      },
      {
        name: '船型开关',
        icon: 'l-tuxingzhishideng1',
        data: {},
      },
      {
        name: '转换开关',
        icon: 'l-tuxingzhishideng1',
        data: {},
      },
      {
        name: '闸刀',
        icon: 'l-zhadao',
        data: {
          name: 'knifeSwitch',
          width: 100,
          height: 100,
          switch: false,
          color: '#0AECA140',
          background: '#748E9140',
          events: [
            {
              action: 5,
              name: 'click',
              value: 'window.meta2d.setValue({id:pen.id,switch:!pen.switch});',
            },
          ],
        },
      },
      {
        name: '拨动开关',
        icon: 'l-bodongkaiguan',
        data: {
          name: 'toggleSwitch',
          width: 100,
          height: 100,
          switch: false,
          color: '#0AECA140',
          background: '#748E9140',
          events: [
            {
              action: 5,
              name: 'click',
              value:
                'window.meta2d.setValue({id:pen.id,switch:!pen.switch});window.meta2d.render()',
            },
          ],
        },
      },
      {
        name: '空气开关',
        icon: 'l-bodongkaiguan',
        data: {
          name: 'airSwitch',
          width: 180,
          height: 240,
          switch: true,
          color: '#748E9173',
          background: '#748E9140',
        },
      },
      {
        name: '水柱温度计',
        icon: 'l-wenduji',
        data: {
          name: 'thermometer',
          width: 100,
          height: 300,
          disableAnchor: true,
          background: '#F40',
          value: 10,
          min: -20,
          max: 20,
        },
      },
      {
        name: '扁平温度计',
        icon: 'l-wenduji',
        data: {
          name: 'thermometer1',
          width: 200,
          height: 300,
          disableAnchor: true,
          backgroundColor: '#666',
          value: 0,
          min: -20,
          max: 20,
          markColor: '#fff',
          barrelColor: '#624',
          barrelShowColor: '#d26',
          fontColor: '#fff',
          sub: 5,
          barrel: {
            x: 0.3,
            y: 0.2,
            width: 0.2,
            height: 7 / 9,
          },
        },
      },
    ],
  },
];

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

export const templates: any[] = [
  { name: '科技蓝', list: [] },
  { name: '简约', list: [] },
];