| | |
| | | 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 // 图表对象 |
| | | */ |
| | | export function getBaseForm (card) { |
| | | let appType = sessionStorage.getItem('appType') |
| | | let roleList = sessionStorage.getItem('sysRoles') |
| | | if (roleList) { |
| | | try { |
| | |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'chartType', |
| | | label: '图表类型', |
| | | initVal: card.chartType || 'antv', |
| | | required: true, |
| | | options: [ |
| | | { value: 'antv', text: 'antv' }, |
| | | { value: 'echarts', text: 'echarts' } |
| | | ] |
| | | }, |
| | | { |
| | | type: 'number', |
| | | key: 'width', |
| | | label: '宽度', |
| | |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'permission', |
| | | label: '权限验证', |
| | | initVal: card.permission || 'false', |
| | | required: false, |
| | | options: [ |
| | | {value: 'true', text: '启用'}, |
| | | {value: 'false', text: '禁用'}, |
| | | ], |
| | | forbid: !appType |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'blacklist', |
| | | label: '黑名单', |
| | | initVal: card.blacklist || [], |
| | | multi: true, |
| | | required: false, |
| | | options: roleList |
| | | options: roleList, |
| | | forbid: !!appType |
| | | }, |
| | | // { |
| | | // type: 'cascader', |
| | |
| | | // 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 getOptionForm (card, columns) { |
| | | let appType = sessionStorage.getItem('appType') |
| | | let shapes = [] |
| | | |
| | | 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' } |
| | | ] |
| | | } 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' } |
| | | ] |
| | | } |
| | | |
| | | 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: '统计图表适用于展示数据类型为动态值。', |
| | | 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: 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-轴', |
| | | 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', |
| | | label: '悬浮提示', |
| | | initVal: card.tooltip || 'true', |
| | | required: false, |
| | | options: [{ |
| | | value: 'true', |
| | | text: '显示' |
| | | }, { |
| | | value: 'false', |
| | | text: '隐藏' |
| | | }] |
| | | }, { |
| | | 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', |
| | | label: '格式化', |
| | | initVal: card.show || 'value', |
| | | required: false, |
| | | options: [{ |
| | | value: 'value', |
| | | text: '无' |
| | | }, { |
| | | value: 'percent', |
| | | text: '百分比' |
| | | }] |
| | | }, { |
| | | type: labelOptions.length > 20 ? 'select' : 'radio', |
| | | key: 'label', |
| | | label: '标签', |
| | | initVal: card.label || 'false', |
| | | required: false, |
| | | options: labelOptions |
| | | }, { |
| | | type: 'radio', |
| | | key: 'labelColor', |
| | | label: '标签颜色', |
| | | initVal: card.labelColor || 'system', |
| | | tooltip: '使用系统色时,使用色系选项设置的系统颜色,使用自定义为颜色设置中定义的图形颜色。', |
| | | required: false, |
| | | options: [{ |
| | | value: 'system', |
| | | 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', |
| | | label: '多柱排列', |
| | | initVal: card.adjust || 'dodge', |
| | | required: false, |
| | | forbid: !['bar'].includes(card.chartType), |
| | | options: [{ |
| | | value: 'dodge', |
| | | text: '分组' |
| | | }, { |
| | | 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', |
| | | key: 'repeat', |
| | | label: '重复数据', |
| | | initVal: card.repeat || 'unrepeat', |
| | | required: false, |
| | | options: [{ |
| | | value: 'unrepeat', |
| | | text: '去重' |
| | | }, { |
| | | value: 'average', |
| | | text: '平均' |
| | | }, { |
| | | value: 'cumsum', |
| | | text: '累加' |
| | | }] |
| | | }, { |
| | | 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: 'barSize', |
| | | label: '柱形宽度', |
| | | tooltip: '空值时,宽度自适应。', |
| | | min: 5, |
| | | max: 100, |
| | | decimal: 0, |
| | | 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: '选框过滤' }, |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | } |