2024-05-16

king

2024-05-16 b69b5f6329ca5f87932436b7a6c1ddfc3377e10f

 src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx

@@ -1,8 +1,3 @@
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'

const Formdict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

/**
 * @description 获取图表视图配置表单
 * @param {object} card       // 图表对象
@@ -10,6 +5,8 @@
export function getBaseForm (card, columns = []) {
  let appType = sessionStorage.getItem('appType')
  let roleList = sessionStorage.getItem('sysRoles')
  let isprint = sessionStorage.getItem('MenuType') === 'billPrint'
  let ispop = sessionStorage.getItem('editMenuType') === 'popview'
  if (roleList) {
    try {
      roleList = JSON.parse(roleList)
@@ -49,81 +46,97 @@
  return [
    {
      type: 'text',
      key: 'title',
      field: 'title',
      label: '标题',
      initVal: card.title,
      initval: card.title,
      required: false
    },
    {
      type: 'text',
      key: 'name',
      field: 'name',
      label: '组件名称',
      initVal: card.name,
      initval: card.name,
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      key: 'width',
      field: 'width',
      label: '宽度',
      initVal: card.width,
      initval: card.width,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
      decimal: 0,
      precision: 0,
      required: true
    },
    {
      type: 'number',
      key: 'height',
      label: '高度',
      initVal: card.height,
      min: 100,
      max: 1000,
      decimal: 0,
      required: true
      type: 'styleInput',
      field: 'height',
      label: '图表高度',
      initval: card.height,
      tooltip: '图表绘图区域的高度，不包括标题及内外边距。',
      required: true,
      options: ['px', 'vh', 'vw']
    },
    {
      type: 'radio',
      key: 'permission',
      field: 'permission',
      label: '权限验证',
      initVal: card.permission || 'false',
      initval: card.permission || 'false',
      required: false,
      options: [
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
    },
    {
      type: 'select',
      key: 'blacklist',
      label: '黑名单',
      initVal: card.blacklist || [],
      multi: true,
      required: false,
      options: roleList,
      forbid: !!appType
      forbid: !appType || ispop || isprint
    },
    {
      type: 'radio',
      key: 'click',
      field: 'cacheLocal',
      label: '本地缓存',
      initval: card.cacheLocal || 'true',
      required: false,
      options: [
        {value: 'true', label: '继承菜单'},
        {value: 'false', label: '禁用'},
      ],
      forbid: ispop || isprint
    },
    {
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initval: card.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType || isprint
    },
    {
      type: 'radio',
      field: 'click',
      label: '点击事件',
      initVal: card.click || '',
      tooltip: '当绑定点击事件时，柱形图的切换功能将失效。',
      initval: card.click || '',
      tooltip: '点击柱子时触发的事件，启用自定义设置时无效。',
      required: false,
      forbid: appType === 'mob' || card.chartType !== 'bar',
      options: [
        {value: '', label: '无'},
        {value: '', label: '数据切换'},
        {value: 'menu', label: '菜单'},
        {value: 'menus', label: '菜单组'}
      ],
      controlFields: [
        {field: 'menu', values: ['menu']},
        {field: 'open', values: ['menu', 'menus']},
        {field: 'menuType', values: ['menus']},
        {field: 'menus', values: ['menus']},
      ]
    },
    {
      type: appType === '' ? 'cascader' : 'select',
      key: 'menu',
      field: 'menu',
      label: '关联菜单',
      initVal: card.menu || (appType === '' ? [] : ''),
      initval: card.menu || (appType === '' ? [] : ''),
      tooltip: '在使用柱形图且未启用自定义设置时有效。',
      required: true,
      forbid: appType === 'mob' || card.chartType !== 'bar',
@@ -132,9 +145,9 @@
    },
    {
      type: 'select',
      key: 'menuType',
      field: 'menuType',
      label: '菜单类型',
      initVal: card.menuType || '',
      initval: card.menuType || '',
      required: true,
      forbid: appType === 'mob' || card.chartType !== 'bar',
      hidden: card.click !== 'menus',
@@ -142,9 +155,9 @@
    },
    {
      type: 'radio',
      key: 'open',
      field: 'open',
      label: '打开方式',
      initVal: card.open || 'blank',
      initval: card.open || 'blank',
      required: false,
      options: [
        {value: 'blank', label: '新窗口'},
@@ -154,26 +167,13 @@
      hidden: card.click !== 'menu' && card.click !== 'menus'
    },
    {
      type: 'radio',
      key: 'joint',
      label: '参数拼接',
      initVal: card.joint || 'true',
      required: false,
      options: [
        {value: 'true', label: '是'},
        {value: 'false', label: '否'},
      ],
      forbid: appType === 'mob' || card.chartType !== 'bar',
      hidden: card.click !== 'menu' && card.click !== 'menus'
    },
    {
      type: 'table',
      key: 'menus',
      field: 'menus',
      label: '菜单组',
      initVal: card.menus || [],
      initval: card.menus || [],
      required: true,
      span: 24,
      actions: ['view'],
      actions: ['edit', 'del', 'add', 'move', 'view'],
      forbid: appType === 'mob' || card.chartType !== 'bar',
      hidden: card.click !== 'menus',
      columns: [
@@ -210,27 +210,41 @@
export function getOptionForm (card, columns) {
  let appType = sessionStorage.getItem('appType')
  let shapes = []
  let shape = card.shape

  if (card.chartType === 'line') {
    shapes = [
      { field: 'smooth', label: 'smooth（平滑线）' },
      { field: 'line', label: 'line（直线）' },
      { field: 'dot', label: 'dot（点状线）' },
      { field: 'dash', label: 'dash（虚线）' },
      { field: 'hv', label: 'hv（水平-垂直线）' },
      { field: 'vh', label: 'vh（垂直-水平线）' },
      { field: 'hvh', label: 'hvh（水平-垂直-水平线）' },
      { field: 'vhv', label: 'vhv（垂直-水平-垂直线）' }
      { field: 'smooth', label: '平滑线' },
      { field: 'line', label: '直线' },
      { field: 'dot', label: '点状线' },
      { field: 'dash', label: '虚线' },
      { field: 'hv', label: '水平-垂直线' },
      { field: 'vh', label: '垂直-水平线' },
      { field: 'hvh', label: '水平-垂直-水平线' },
      { field: 'vhv', label: '垂直-水平-垂直线' }
    ]
  } else if (card.chartType === 'bar') {
    shapes = [
      { field: 'rect', label: 'rect（矩形）' },
      { field: 'hollow-rect', label: 'hollow-rect（空心矩形）' },
      { field: 'line', label: 'line（线条）' },
      { field: 'tick', label: 'tick（波动）' },
      // { field: 'funnel', label: 'funnel' },
      { field: 'pyramid', label: 'pyramid（角锥）' }
      { field: 'rect', label: '矩形' },
      { field: 'hollow-rect', label: '空心矩形' },
      // { field: 'hollow', label: 'hollow（空心矩形）' },
      // { field: 'line', label: 'line（线条）' },
      // { field: 'tick', label: 'tick（波动）' },
      // { field: 'funnel', label: 'funnel（漏斗图）' },
      { field: 'pyramid', label: '金字塔' },
      { field: 'barChart', label: '条形图' },
      { field: 'roseChart', label: '玫瑰图' },
    ]

    if (card.transpose === 'true') {
      shape = 'barChart'
    } else if (card.coordinate === 'polar') {
      shape = 'roseChart'
    }
  }

  if (!shape) {
    shape = shapes[0].field
  }

  let xfields = columns.filter(item => /^Nvarchar/ig.test(item.datatype))
@@ -238,68 +252,118 @@

  let labelOptions = [{
    value: 'false',
    text: '隐藏'
    label: '隐藏'
  }, {
    value: 'true',
    text: '显示'
    label: '显示'
  }]

  if (card.chartType === 'bar') {
    labelOptions[1].text = '外部'
    labelOptions[1].label = '外部'
    labelOptions.push(...[{
      value: 'top',
      text: '顶部'
      label: '顶部'
    }, {
      value: 'middle',
      text: '中间'
      label: '中间'
    }, {
      value: 'bottom',
      text: '底部'
      label: '底部'
    }])
  }

  let _label = card.label || 'false'
  let axis = []
  if (card.grid !== 'hidden') {
    axis.push('grid')
  }
  if (card.x_line !== 'hidden') {
    axis.push('x_line')
  }
  if (card.y_line !== 'hidden') {
    axis.push('y_line')
  }
  if (card.tick !== 'hidden') {
    axis.push('tick')
  }

  let tickVals = []
  if (card.x_label !== 'hidden') {
    tickVals.push('x_label')
  }
  if (card.y_label !== 'hidden') {
    tickVals.push('y_label')
  }
  
  let datatype = card.datatype || 'query'
  if (card.enabled === 'true') {
    datatype = 'custom'
  }

  return [
    {
      type: 'radio',
      key: 'datatype',
      label: '数据类型',
      initVal: card.datatype || 'query',
      field: 'datatype',
      label: '图形类型',
      initval: datatype,
      tooltip: '统计图表适用于展示数据类型为动态值。',
      required: false,
      $trans: true,
      options: [
        { value: 'query', text: '查询' },
        { value: 'statistics', text: '统计' }
        { value: 'query', label: card.chartType !== 'line' ? '柱状图' : '折线图' },
        { value: 'custom', label: '自定义图形' },
        { value: 'statistics', label: '统计' }
      ],
      controlFields: [
        {field: 'InfoType', values: ['statistics']},
        {field: 'InfoValue', values: ['statistics']},
        {field: 'Yaxis', values: ['query', 'custom']},
        {field: 'adjust', values: ['query', 'statistics']},
        {field: 'area', values: ['query', 'statistics']},
        {field: 'show', values: ['query', 'statistics']},
        {field: 'selectColor', values: ['query']},
        {field: 'barSize', values: card.chartType !== 'line' ? ['query', 'custom', 'statistics'] : ['custom']},
        {field: 'mutilBar', values: ['custom']},
      ]
    }, {
      type: 'select',
      key: 'Xaxis',
      field: 'Xaxis',
      label: 'X-轴',
      initVal: card.Xaxis || '',
      initval: card.Xaxis || '',
      required: true,
      options: xfields
    }, {
      type: 'select',
      key: 'InfoType',
      field: 'InfoType',
      label: '类型',
      initVal: card.InfoType || '',
      hidden: card.datatype !== 'statistics',
      initval: card.InfoType || '',
      required: true,
      options: xfields
    }, {
      type: 'select',
      key: 'InfoValue',
      field: 'InfoValue',
      label: '值',
      initVal: card.InfoValue || '',
      hidden: card.datatype !== 'statistics',
      initval: card.InfoValue || '',
      required: true,
      options: yfields
    }, {
      type: 'select',
      key: 'legend',
      field: 'shape',
      label: '形状',
      initval: shape,
      required: false,
      options: shapes
    }, {
      type: 'multiselect',
      field: 'Yaxis',
      label: 'Y-轴',
      initval: card.Yaxis || [],
      required: true,
      options: yfields
    }, {
      type: 'select',
      field: 'legend',
      label: '图例位置',
      initVal: card.legend || 'bottom',
      initval: card.legend || 'bottom',
      required: false,
      options: [
        { field: 'bottom', label: '下' },
@@ -317,317 +381,259 @@
        { field: 'hidden', label: '隐藏' }
      ]
    }, {
      type: 'select',
      key: 'Yaxis',
      label: 'Y-轴',
      initVal: card.Yaxis || [],
      multi: true, // 多选
      hidden: card.datatype === 'statistics',
      required: true,
      options: yfields
    }, {
      type: 'select',
      key: 'shape',
      label: '形状',
      initVal: card.shape || (shapes[0] && shapes[0].field),
      required: false,
      options: shapes
    }, {
      type: 'radio',
      key: 'tooltip',
      field: 'tooltip',
      label: '悬浮提示',
      initVal: card.tooltip || 'true',
      initval: card.tooltip || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '显示'
        label: '显示'
      }, {
        value: 'false',
        text: '隐藏'
        label: '隐藏'
      }]
    }, {
      type: 'radio',
      key: 'point',
      label: '点图',
      initVal: card.point || 'false',
      required: false,
      forbid: !['line'].includes(card.chartType),
      options: [{
        value: 'true',
        text: '显示'
      }, {
        value: 'false',
        text: '隐藏'
      }]
    }, {
      type: 'radio',
      key: 'transpose',
      label: '变换',
      initVal: card.transpose || 'false',
      tooltip: '横纵坐标轴交换',
      required: false,
      options: [{
        value: 'true',
        text: Formdict['model.true']
      }, {
        value: 'false',
        text: Formdict['model.false']
      }]
    }, {
      type: 'radio',
      key: 'show',
      field: 'show',
      label: '显示',
      initVal: card.show || 'value',
      tooltip: '当使用自定义设置时，可在显示（值/%）处单独设置显示类型。注：自定义为空时使用此处设置。',
      initval: card.show || 'value',
      required: false,
      options: [{
        value: 'value',
        text: '数值'
        label: '数值'
      }, {
        value: 'percent',
        text: '百分比'
        label: '百分比'
      }, {
        value: 'thdSeparator',
        label: '千分位'
      }]
    }, {
      type: labelOptions.length > 20 ? 'select' : 'radio',
      key: 'label',
      type: 'radio',
      field: 'label',
      label: '标注',
      initVal: _label,
      initval: card.label || 'false',
      tooltip: '图形节点处的数值。',
      required: false,
      options: labelOptions
      options: labelOptions,
      controlFields: [
        {field: 'labelUnit', values: ['true', 'top', 'middle', 'bottom']}
      ]
    }, {
      type: 'radio',
      key: 'labelColor',
      label: '标注颜色',
      initVal: card.labelColor || 'system',
      tooltip: '使用系统色时，使用色系选项设置的系统颜色，使用自定义为颜色设置中定义的图形颜色。',
      required: false,
      hidden: _label !== 'true',
      options: [{
        value: 'system',
        text: '系统'
      }, {
        value: 'custom',
        text: '自定义'
      }]
    }, {
      type: 'radio',
      key: 'labelValue',
      label: '标注值',
      initVal: card.labelValue || 'default',
      tooltip: '标注值的显示规则。',
      required: false,
      hidden: _label === 'false',
      options: [{
        value: 'default',
        text: '默认'
      }, {
        value: 'zero',
        text: '隐藏 0 值'
      }],
    }, {
      type: 'radio',
      key: 'adjust',
      field: 'adjust',
      label: '多柱排列',
      initVal: card.adjust || 'dodge',
      initval: card.adjust || 'dodge',
      required: false,
      forbid: !['bar'].includes(card.chartType),
      options: [{
        value: 'dodge',
        text: '分组'
        label: '分组'
      }, {
        value: 'stack',
        text: '堆叠'
        label: '堆叠'
      }]
    }, {
      type: 'radio',
      key: 'area',
      label: '面积图',
      initVal: card.area || 'false',
      // tooltip: '仅在形状为smooth时有效。',
      field: 'mutilBar',
      label: '多柱排列',
      initval: card.mutilBar || 'dodge',
      required: false,
      forbid: ['bar'].includes(card.chartType),
      options: [{
        value: 'dodge',
        label: '分组'
      }, {
        value: 'stack',
        label: '堆叠'
      }]
    }, {
      type: 'radio',
      field: 'point',
      label: '点图',
      initval: card.point || 'false',
      required: false,
      forbid: card.chartType === 'bar',
      options: [{
        value: 'true',
        text: '显示'
        label: '显示'
      }, {
        value: 'false',
        text: '不显示'
        label: '隐藏'
      }]
    }, {
      type: 'radio',
      key: 'repeat',
      label: '重复数据',
      initVal: card.repeat || 'unrepeat',
      field: 'area',
      label: '面积图',
      initval: card.area || 'false',
      required: false,
      forbid: card.chartType === 'bar',
      options: [{
        value: 'true',
        label: '显示'
      }, {
        value: 'false',
        label: '不显示'
      }]
    }, {
      type: 'checkbox',
      field: 'axis',
      label: '坐标轴',
      initval: axis,
      required: false,
      options: [{
        value: 'unrepeat',
        text: '去重'
        value: 'grid',
        label: '网格线'
      }, {
        value: 'average',
        text: '平均'
        value: 'x_line',
        label: 'X轴'
      }, {
        value: 'cumsum',
        text: '累加'
      }]
        value: 'y_line',
        label: 'Y轴'
      }, {
        value: 'tick',
        label: '刻度线'
      }],
      controlFields: [
        {field: 'lineColor', notNull: true},
      ]
    }, {
      type: 'radio',
      key: 'coordinate',
      label: '坐标',
      initVal: card.coordinate || 'angle',
      type: 'checkbox',
      field: 'tickVals',
      label: '刻度值',
      initval: tickVals,
      required: false,
      options: [{
        value: 'angle',
        text: '二维坐标'
        value: 'x_label',
        label: 'X轴'
      }, {
        value: 'polar',
        text: '极坐标'
      }]
        value: 'y_label',
        label: 'Y轴'
      }],
      controlFields: [
        {field: 'color', notNull: true},
      ]
    }, {
      type: 'radio',
      key: 'grid',
      label: '网格线',
      initVal: card.grid || 'show',
      required: false,
      options: [{
        value: 'show',
        text: '显示'
      }, {
        value: 'hidden',
        text: '隐藏'
      }]
    }, {
      type: 'radio',
      key: 'y_line',
      label: 'y轴边线',
      initVal: card.y_line || 'hidden',
      tooltip: '图形左侧或右侧的边线。',
      required: false,
      options: [{
        value: 'show',
        text: '显示'
      }, {
        value: 'hidden',
        text: '隐藏'
      }]
    }, {
      type: 'radio',
      key: 'download',
      label: '导出图片',
      initVal: card.download || 'forbid',
      required: false,
      forbid: appType === 'mob',
      options: [{
        value: 'forbid',
        text: '禁用'
      }, {
        value: 'enable',
        text: '启用'
      }]
    }, {
      type: 'radio',
      key: 'empty',
      field: 'empty',
      label: '空值隐藏',
      initVal: card.empty || 'show',
      initval: card.empty || 'show',
      tooltip: '当查询数据为空时，隐藏该组件。',
      required: false,
      options: [
        {value: 'show', text: '否'},
        {value: 'hidden', text: '是'},
        {value: 'show', label: '否'},
        {value: 'hidden', label: '是'},
      ],
    }, {
      type: 'number',
      key: 'barSize',
      field: 'barSize',
      label: '柱形宽度',
      tooltip: '空值时，宽度自适应。',
      min: 5,
      max: 100,
      decimal: 0,
      initVal: card.barSize,
      forbid: !['bar'].includes(card.chartType),
      max: 200,
      precision: 0,
      initval: card.barSize,
      required: false
    }, {
      type: 'number',
      key: 'barRadius',
      field: 'barRadius',
      label: '柱形圆角',
      tooltip: '柱形图上端圆角。',
      min: 0,
      max: 200,
      decimal: 0,
      initVal: card.barRadius || 0,
      forbid: !['bar'].includes(card.chartType),
      precision: 0,
      initval: card.barRadius || 0,
      forbid: card.chartType === 'line',
      required: false
    }, {
      type: 'number',
      key: 'min',
      field: 'min',
      label: '最小值',
      tooltip: 'y轴最小值，为空时自适应。',
      initVal: card.min,
      initval: card.min,
      required: false
    }, {
      type: 'number',
      key: 'max',
      field: 'max',
      label: '最大值',
      tooltip: 'y轴最大值，为空时自适应。',
      initVal: card.max,
      initval: card.max,
      required: false
    }, {
      type: 'number',
      field: 'XLimit',
      min: 2,
      label: '字符限制',
      tooltip: 'X轴最大字符限制。',
      initval: card.XLimit || 11,
      forbid: appType === 'mob',
      required: false
    }, {
      type: 'text',
      field: 'labelUnit',
      label: '标注单位',
      initval: card.labelUnit ||'',
      forbid: appType === 'mob',
      required: false
    }, {
      type: 'color',
      key: 'color',
      label: '色系',
      initVal: card.color || 'rgba(0, 0, 0, 0.65)',
      tooltip: '坐标轴提示文字及示例的颜色。',
      required: false
    }, {
      type: 'color',
      key: 'lineColor',
      label: '轴线颜色',
      initVal: card.lineColor,
      tooltip: '坐标轴线的颜色，包括x轴、y轴及网格线。',
      field: 'lineColor',
      label: '坐标轴颜色',
      initval: card.lineColor || '',
      tooltip: '坐标轴线的颜色，包括x轴、y轴、网格线、刻度线。',
      allowClear: true,
      required: false
    }, {
      type: 'color',
      key: 'selectColor',
      label: '选中颜色',
      initVal: card.selectColor || '',
      tooltip: '选中柱形图的颜色，在交互效果《元素选中（多选）》和《元素选中（单选）》中有效，启用自定义设置时无效。',
      forbid: !['bar'].includes(card.chartType),
      field: 'color',
      label: '刻度值颜色',
      initval: card.color || '',
      allowClear: true,
      required: false
    }, {
      type: 'number',
      key: 'rotate',
      field: 'rotate',
      label: '旋转',
      tooltip: '坐标轴标注文本的旋转角度。',
      min: 0,
      max: 360,
      decimal: 0,
      initVal: card.rotate,
      precision: 0,
      initval: card.rotate,
      forbid: appType !== 'mob',
      required: false
    // }, {
    //   type: 'multiselect',
    //   field: 'interaction',
    //   label: '交互效果',
    //   initval: card.interaction || [],
    //   required: false,
    //   forbid: appType === 'mob',
    //   options: [
    //     { value: 'element-active', label: '元素聚焦' },
    //     { value: 'element-selected', label: '元素选中（多选）' },
    //     { value: 'element-single-selected', label: '元素选中（单选）' },
    //     { value: 'active-region', label: '背景框' },
    //     { value: 'view-zoom', label: '视图缩放' },
    //     { value: 'element-highlight', label: '元素高亮' },
    //     { value: 'element-highlight-by-color', label: '同色元素高亮' },
    //     { value: 'element-highlight-by-x', label: '同X轴元素高亮' },
    //     { value: 'legend-filter', label: '图例过滤' },
    //     { value: 'legend-active', label: '图例聚焦' },
    //     { value: 'legend-highlight', label: '图例高亮' },
    //     { value: 'brush', label: '选框过滤' },
    //   ],
    //   controlFields: [
    //     {field: 'selectColor', values: ['element-selected', 'element-single-selected']},
    //   ]
    }, {
      type: 'select',
      key: 'interaction',
      label: '交互效果',
      initVal: card.interaction || [],
      multi: true,
      required: false,
      forbid: appType === 'mob',
      options: [
        { value: 'element-active', label: '元素聚焦' },
        { value: 'element-selected', label: '元素选中（多选）' },
        { value: 'element-single-selected', label: '元素选中（单选）' },
        { value: 'active-region', label: '背景框' },
        { value: 'view-zoom', label: '视图缩放' },
        { value: 'element-highlight', label: '元素高亮' },
        { value: 'element-highlight-by-color', label: '同色元素高亮' },
        { value: 'element-highlight-by-x', label: '同X轴元素高亮' },
        { value: 'legend-filter', label: '图例过滤' },
        { value: 'legend-active', label: '图例聚焦' },
        { value: 'legend-highlight', label: '图例高亮' },
        { value: 'brush', label: '选框过滤' },
      ]
      type: 'color',
      field: 'selectColor',
      label: '选中颜色',
      initval: card.selectColor || '',
      tooltip: '选中柱形图的颜色。',
      forbid: card.chartType === 'line',
      allowClear: true,
      required: false
    }
  ]
}