diff --git a/report-core/src/main/resources/db/migration/V1.0.24__add_dict_radar.sql b/report-core/src/main/resources/db/migration/V1.0.24__add_dict_radar.sql new file mode 100644 index 00000000..63701c6d --- /dev/null +++ b/report-core/src/main/resources/db/migration/V1.0.24__add_dict_radar.sql @@ -0,0 +1,6 @@ +-- 新增雷达图字典 + +REPLACE INTO `aj_report`.`gaea_dict`(`dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('雷达属性', 'RADAR_PROPERTIES', '雷达属性', 'admin', NOW(), 'admin', NOW(), 1); + +REPLACE INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('RADAR_PROPERTIES', '名称', 'name', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1); +REPLACE INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('RADAR_PROPERTIES', '雷达', 'radar', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1); diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index bf7a2e98..08d34140 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -111,6 +111,7 @@ export default { // widget-stackchart 堆叠图 // widget-heatmap 热力图 // widget-mapline 中国地图-路线图 + // widget-radar 雷达图 const chartType = params.chartType if ( chartType == "widget-barchart" || @@ -131,6 +132,8 @@ export default { return this.coordChartFn(params.chartProperties, data) } else if (chartType == "widget-linemap") { return this.linemapChartFn(params.chartProperties, data) + } else if (chartType == "widget-radar") { + return this.radarChartFn(params.chartProperties, data) } else { return data } @@ -269,6 +272,25 @@ export default { } return ananysicData; }, + radarChartFn(chartProperties, data) { + const ananysicData = {}; + // 字段名 + const radarField = []; + let nameField; + for(const key in chartProperties) { + if (chartProperties[key] == 'radar') { + radarField.push(key) + } + if (chartProperties[key] == 'name') { + nameField = key; + } + } + // 拿到数值 + ananysicData["name"] = nameField; + ananysicData["keys"] = radarField; + ananysicData["value"] = data; + return ananysicData; + }, setUnique(arr) { let newArr = []; arr.forEach(item => { diff --git a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue new file mode 100644 index 00000000..168dca44 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue @@ -0,0 +1,178 @@ + + + diff --git a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue index 9544eca0..587cf649 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue @@ -145,6 +145,11 @@ :chart-type="item.chartType" @change="changed($event, item.name)" /> +
@@ -276,6 +281,7 @@ import dynamicComponents from "./dynamicComponents.vue"; import customColorComponents from "./customColorComponents"; import dynamicAddTable from "./dynamicAddTable.vue"; import customUpload from "./customUpload.vue"; +import dynamicAddRadar from "./dynamicAddRadar"; export default { name: "DynamicForm", components: { @@ -284,7 +290,8 @@ export default { dynamicComponents, customColorComponents, dynamicAddTable, - customUpload + customUpload, + dynamicAddRadar }, model: { prop: "value", diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-radar.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-radar.js new file mode 100644 index 00000000..5680a6cb --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-radar.js @@ -0,0 +1,449 @@ +/** + * @Author: foming + */ +export const widgetRadar = { + code: 'widget-radar', + type: 'html', + label: '雷达图', + icon: 'iconleidatu', + options: { + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '雷达图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ + { + name: '雷达设置', + list: [ + { + type: 'el-select', + label: '雷达样式', + name: 'radarShape', + required: false, + placeholder: '', + selectOptions: [ + {code: 'line', name: '线型'}, + {code: 'circle', name: '圆型'}, + ], + value: 'line' + }, + { + type: 'el-input-number', + label: '均分数量', + name: 'splitNumber', + require: false, + placeholder: '', + value: 5, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'axisLineShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'axisLineColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-slider', + label: '坐标轴透明度', + name: 'axisLineOpacity', + required: false, + placeholder: '', + value: 50 + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'splitLineShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-slider', + label: '分割线透明度', + name: 'splitLineOpacity', + required: false, + placeholder: '', + value: 50 + }, + ], + }, + { + name: '顶点设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'axisNameShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '名称大小', + name: 'axisNameFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'axisNameColor', + required: false, + placeholder: '', + value: '#87cefa', + }, + { + type: 'el-select', + label: '字体粗细', + name: 'axisNamFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体风格', + name: 'axisNamFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '多值以' | '隔开', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: 'top' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: 'horizontal' + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 10 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '点大小', + name: 'symbolSize', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-select', + label: '线型效果', + name: 'lineType', + required: false, + placeholder: '', + selectOptions: [ + {code: 'solid', name: '实线'}, + {code: 'dashed', name: '线型虚线'}, + {code: 'dotted', name: '点型虚线'}, + ], + value: 'solid' + }, + { + type: 'el-slider', + label: '透明度', + name: 'opacity', + required: false, + placeholder: '', + value: 50 + }, + ], + }, + { + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + value: 'rgba(0, 206, 209, 1)' + }, + ], + }, + { + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], + }, + ], + }, + ], + { + type: 'dynamic-add-radar', + label: '', + name: 'dynamicAddRadar', + required: false, + placeholder: '', + value: [ + {name: 'SA', key: 'Sales', max: 6500}, + {name: 'Admin', key: 'Admin', max: 16000}, + {name: 'Information', key: 'Information', max: 30000}, + {name: 'Customer', key: 'Customer', max: 38000}, + {name: 'Develop', key: 'Develop', max: 52000}, + ] + } + ], + data: [ + { + type: 'el-radio-group', + label: '数据类型', + name: 'dataType', + require: false, + placeholder: '', + selectValue: true, + selectOptions: [ + { + code: 'staticData', + name: '静态数据', + }, + { + code: 'dynamicData', + name: '动态数据', + }, + ], + value: 'staticData', + }, + { + type: 'el-input-number', + label: '刷新时间(毫秒)', + name: 'refreshTime', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + value: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {name: '2016', Sales: 4200, Admin: 3000, Information: 20000, Customer: 35000, Develop: 50000}, + {name: '2017', Sales: 5000, Admin: 14000, Information: 28000, Customer: 26000, Develop: 42000}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-radar', + dictKey: 'RADAR_PROPERTIES', + value: '', + }, + ], + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 300, + }, + ] + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js index ee0cb1a7..dd98dc62 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js @@ -262,7 +262,7 @@ export const widgetTable = { relactiveDom: 'dataType', relactiveDomValue: 'dynamicData', chartType: 'widget-table', - dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用 + dictKey: 'TEXT_PROPERTIES', value: '', }, ], diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js index ca239ee7..93a10483 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js @@ -36,6 +36,7 @@ import {widgetDecoratePie} from "./configure/widget-decorate-pie"; import {widgetMoreBarLine} from "./configure/widget-more-bar-line"; import {widgetWordCloud} from "./configure/widget-word-cloud"; import {widgetHeatmap} from "./configure/widget-heatmap"; +import {widgetRadar} from "./configure/widget-radar"; export const widgetTool = [ // type=html类型的组件 @@ -67,5 +68,6 @@ export const widgetTool = [ widgetDecoratePie, widgetMoreBarLine, widgetWordCloud, - widgetHeatmap + widgetHeatmap, + widgetRadar ] diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue new file mode 100644 index 00000000..637a893b --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue @@ -0,0 +1,371 @@ + + + diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue index 01b1c918..9d4946f3 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue @@ -39,6 +39,7 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetHeatmap from "./heatmap/widgetHeatmap"; +import widgetRadar from "./radar/widgetRadar"; export default { name: "WidgetTemp", @@ -70,7 +71,8 @@ export default { widgetDecoratePieChart, widgetMoreBarLineChart, widgetWordCloud, - widgetHeatmap + widgetHeatmap, + widgetRadar }, model: { prop: "value", diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue index b7049bd1..ab3ecd34 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -50,6 +50,7 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetHeatmap from "./heatmap/widgetHeatmap"; +import widgetRadar from "./radar/widgetRadar"; export default { name: "Widget", @@ -81,7 +82,8 @@ export default { widgetDecoratePieChart, widgetMoreBarLineChart, widgetWordCloud, - widgetHeatmap + widgetHeatmap, + widgetRadar }, model: { prop: "value",