2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

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

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

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

/**
 * @description 获取图表视图配置表单
 * @param {object} card       // 图表对象
 */
export function getBaseForm (card) {
  // let appType = sessionStorage.getItem('appType')
  // let menulist = null

  // if (appType === 'pc') {
  //   menulist = sessionStorage.getItem('appMenus')
  //   if (Array.isArray(card.linkmenu)) {
  //     card.linkmenu = ''
  //   }
  // } else {
  //   menulist = sessionStorage.getItem('fstMenuList')
  // }

  // if (menulist) {
  //   try {
  //     menulist = JSON.parse(menulist)
  //     if (appType === 'pc') {
  //       menulist = menulist.map(item => {
  //         item.value = item.MenuID
  //         item.text = item.MenuName
  //         return item
  //       })
  //     }
  //   } catch (e) {
  //     menulist = []
  //   }
  // } else {
  //   menulist = []
  // }

  let roleList = sessionStorage.getItem('sysRoles')
  if (roleList) {
    try {
      roleList = JSON.parse(roleList)
    } catch (e) {
      roleList = []
    }
  } else {
    roleList = []
  }

  return [
    {
      type: 'text',
      key: 'title',
      label: '标题',
      initVal: card.title,
      required: false
    },
    {
      type: 'text',
      key: 'name',
      label: '组件名称',
      initVal: card.name,
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      key: 'width',
      label: '宽度',
      initVal: card.width,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
      decimal: 0,
      required: true
    },
    {
      type: 'number',
      key: 'height',
      label: '高度',
      initVal: card.height,
      min: 100,
      max: 1000,
      decimal: 0,
      required: true
    },
    {
      type: 'select',
      key: 'blacklist',
      label: '黑名单',
      initVal: card.blacklist || [],
      multi: true,
      required: false,
      options: roleList
    },
    // {
    //   type: 'cascader',
    //   key: 'linkmenu',
    //   label: '关联菜单',
    //   initVal: card.linkmenu || [],
    //   tooltip: '在使用柱形图且未启用自定义设置时有效。',
    //   required: false,
    //   forbid: appType === 'pc' || appType === 'mob',
    //   options: menulist
    // },
    // {
    //   type: 'select',
    //   key: 'linkmenu',
    //   label: '关联菜单',
    //   initVal: card.linkmenu || '',
    //   tooltip: '双击柱状图，会打开关联的菜单。',
    //   required: false,
    //   forbid: appType !== 'pc',
    //   options: menulist
    // },
    // {
    //   type: 'radio',
    //   key: 'open',
    //   label: '打开方式',
    //   initVal: card.open || 'blank',
    //   required: false,
    //   forbid: appType !== 'pc',
    //   options: [
    //     { value: 'blank', text: '新窗口' },
    //     { value: 'self', text: '当前窗口' }
    //   ]
    // }
  ]
}

/**
 * @description 获取图表视图配置表单
 * @param {object} card       // 图表对象
 * @param {Array}  columns    // 显示列
 */
export function getBarOrLineChartOptionForm (card, columns) {
export function getOptionForm (card, columns) {
  let appType = sessionStorage.getItem('appType')
  let shapes = []

  if (card.chartType === 'line') {
@@ -33,28 +160,88 @@
    ]
  }

  let xfields = columns.filter(item => /^Nvarchar/ig.test(item.datatype))
  let yfields = columns.filter(item => /^(Int|Decimal)/ig.test(item.datatype))

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

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

  return [
    {
      type: 'radio',
      key: 'datatype',
      label: '数据类型',
      initVal: card.datatype || 'query',
      tooltip: '统计图表适用于表格不分页，且数据需要转换',
      tooltip: '统计图表适用于展示数据类型为动态值。',
      required: false,
      options: [
        { value: 'query', text: Formdict['header.form.query'] },
        { value: 'statistics', text: Formdict['header.form.statistics'] }
      ]
    },
    {
    }, {
      type: 'select',
      key: 'Xaxis',
      label: 'X-轴',
      initVal: card.Xaxis || '',
      required: true,
      options: columns.filter(col => col.type === 'text')
    },
    {
      options: xfields
    }, {
      type: 'select',
      key: 'InfoType',
      label: '类型',
      initVal: card.InfoType || '',
      hidden: card.datatype !== 'statistics',
      required: true,
      options: xfields
    }, {
      type: 'select',
      key: 'InfoValue',
      label: '值',
      initVal: card.InfoValue || '',
      hidden: card.datatype !== 'statistics',
      required: true,
      options: yfields
    }, {
      type: 'select',
      key: 'legend',
      label: '图例位置',
      initVal: card.legend || 'bottom',
      required: false,
      options: [
        { field: 'bottom', label: '下' },
        { field: 'bottom-left', label: '下左' },
        { field: 'bottom-right', label: '下右' },
        { field: 'top', label: '上' },
        { field: 'top-left', label: '上左' },
        { field: 'top-right', label: '上右' },
        { field: 'right', label: '右' },
        { field: 'right-top', label: '右上' },
        { field: 'right-bottom', label: '右下' },
        { field: 'left', label: '左' },
        { field: 'left-top', label: '左上' },
        { field: 'left-bottom', label: '左下' },
        { field: 'hidden', label: '隐藏' }
      ]
    }, {
      type: 'select',
      key: 'Yaxis',
      label: 'Y-轴',
@@ -62,60 +249,18 @@
      multi: true, // 多选
      hidden: card.datatype === 'statistics',
      required: true,
      options: columns.filter(col => col.type === 'number')
    },
    {
      type: 'select',
      key: 'InfoType',
      label: '类型',
      initVal: card.InfoType || '',
      hidden: card.datatype !== 'statistics',
      required: true,
      options: columns.filter(col => col.type === 'text')
    },
    {
      type: 'select',
      key: 'InfoValue',
      label: '值',
      initVal: card.InfoValue || '',
      hidden: card.datatype !== 'statistics',
      required: true,
      options: columns.filter(col => col.type === 'number')
    },
    {
      type: 'select',
      key: 'legend',
      label: '图例位置',
      initVal: card.legend || 'bottom',
      required: false,
      options: [
        { field: 'top', label: 'top' },
        { field: 'top-left', label: 'top-left' },
        { field: 'top-right', label: 'top-right' },
        { field: 'right', label: 'right' },
        { field: 'right-top', label: 'right-top' },
        { field: 'right-bottom', label: 'right-bottom' },
        { field: 'left', label: 'left' },
        { field: 'left-top', label: 'left-top' },
        { field: 'left-bottom', label: 'left-bottom' },
        { field: 'bottom', label: 'bottom' },
        { field: 'bottom-left', label: 'bottom-left' },
        { field: 'bottom-right', label: 'bottom-right' },
        { field: 'hidden', label: 'hidden' }
      ]
    },
    {
      options: yfields
    }, {
      type: 'select',
      key: 'shape',
      label: '形状',
      initVal: card.shape || (shapes[0] && shapes[0].field),
      required: false,
      options: shapes
    },
    {
    }, {
      type: 'radio',
      key: 'tooltip',
      label: '提示信息',
      label: '悬浮提示',
      initVal: card.tooltip || 'true',
      required: false,
      options: [{
@@ -125,22 +270,7 @@
        value: 'false',
        text: '隐藏'
      }]
    },
    {
      type: 'radio',
      key: 'coordinate',
      label: '坐标',
      initVal: card.coordinate || 'angle',
      required: false,
      options: [{
        value: 'angle',
        text: '二维坐标'
      }, {
        value: 'polar',
        text: '极坐标'
      }]
    },
    {
    }, {
      type: 'radio',
      key: 'point',
      label: '点图',
@@ -154,12 +284,12 @@
        value: 'false',
        text: '隐藏'
      }]
    },
    {
    }, {
      type: 'radio',
      key: 'transpose',
      label: '变换',
      initVal: card.transpose || 'false',
      tooltip: '横纵坐标轴交换',
      required: false,
      options: [{
        value: 'true',
@@ -168,34 +298,54 @@
        value: 'false',
        text: Formdict['model.false']
      }]
    },
    {
    }, {
      type: 'radio',
      key: 'show',
      label: '显示值',
      label: '格式化',
      initVal: card.show || 'value',
      required: false,
      options: [{
        value: 'value',
        text: '无'
      }, {
        value: 'percent',
        text: '百分比'
      }, {
        value: 'value',
        text: '数值'
      }]
    },
    {
      type: 'radio',
    }, {
      type: labelOptions.length > 20 ? 'select' : 'radio',
      key: 'label',
      label: '标注-值',
      label: '标签',
      initVal: card.label || 'false',
      required: false,
      options: labelOptions
    }, {
      type: 'radio',
      key: 'labelColor',
      label: '标签颜色',
      initVal: card.labelColor || 'system',
      tooltip: '使用系统色时，使用色系选项设置的系统颜色，使用自定义为颜色设置中定义的图形颜色。',
      required: false,
      options: [{
        value: 'true',
        text: '显示'
        value: 'system',
        text: '系统'
      }, {
        value: 'false',
        text: '隐藏'
        value: 'custom',
        text: '自定义'
      }]
    // }, {
    //   type: 'radio',
    //   key: 'offset',
    //   label: '标注位置',
    //   initVal: card.offset || 'outer',
    //   required: false,
    //   options: [{
    //     value: 'outer',
    //     text: '外部'
    //   }, {
    //     value: 'inner',
    //     text: '内部'
    //   }],
    //   forbid: card.chartType !== 'bar'
    }, {
      type: 'radio',
      key: 'adjust',
@@ -209,6 +359,21 @@
      }, {
        value: 'stack',
        text: '堆叠'
      }]
    }, {
      type: 'radio',
      key: 'area',
      label: '面积图',
      initVal: card.area || 'false',
      // tooltip: '仅在形状为smooth时有效。',
      required: false,
      forbid: ['bar'].includes(card.chartType),
      options: [{
        value: 'true',
        text: '显示'
      }, {
        value: 'false',
        text: '不显示'
      }]
    }, {
      type: 'radio',
@@ -227,27 +392,138 @@
        text: '累加'
      }]
    }, {
      type: 'number',
      key: 'InfoDefNumber',
      label: '展示数',
      tooltip: '默认显示类型数量',
      min: 1,
      max: 50,
      decimal: 0,
      initVal: card.InfoDefNumber || 5,
      hidden: card.datatype !== 'statistics',
      required: true
      type: 'radio',
      key: 'coordinate',
      label: '坐标',
      initVal: card.coordinate || 'angle',
      required: false,
      options: [{
        value: 'angle',
        text: '二维坐标'
      }, {
        value: 'polar',
        text: '极坐标'
      }]
    }, {
      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: 'number',
      key: 'correction',
      label: '数据修正',
      tooltip: '当数据项少于设置值时，系统会自动修正（避免柱形图过宽）,在自定义中，设置为折线图时失效。',
      key: 'barSize',
      label: '柱形宽度',
      tooltip: '空值时，宽度自适应。',
      min: 5,
      max: 30,
      max: 100,
      decimal: 0,
      initVal: card.correction,
      initVal: card.barSize,
      forbid: !['bar'].includes(card.chartType),
      required: false
    }, {
      type: 'number',
      key: 'barRadius',
      label: '柱形圆角',
      tooltip: '柱形图上端圆角。',
      min: 0,
      max: 200,
      decimal: 0,
      initVal: card.barRadius || 0,
      forbid: !['bar'].includes(card.chartType),
      required: false
    }, {
      type: 'number',
      key: 'min',
      label: '最小值',
      tooltip: 'y轴最小值，为空时自适应。',
      initVal: card.min,
      required: false
    }, {
      type: 'number',
      key: 'max',
      label: '最大值',
      tooltip: 'y轴最大值，为空时自适应。',
      initVal: card.max,
      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轴及网格线。',
      allowClear: true,
      required: false
    }, {
      type: 'color',
      key: 'selectColor',
      label: '选中颜色',
      initVal: card.selectColor || '',
      tooltip: '选中柱形图的颜色，在交互效果《元素选中（多选）》和《元素选中（单选）》中有效，自定义设置中无效。',
      forbid: !['bar'].includes(card.chartType),
      allowClear: true,
      required: false
    }, {
      type: 'number',
      key: 'rotate',
      label: '旋转',
      tooltip: '坐标轴标注文本的旋转角度。',
      min: 0,
      max: 360,
      decimal: 0,
      initVal: card.rotate,
      forbid: appType !== 'mob',
      required: false
    }, {
      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: '选框过滤' },
      ]
    }
  ]
}