diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js new file mode 100644 index 00000000..a24b36a1 --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js @@ -0,0 +1,650 @@ +/* + * @Descripttion: 折线对比图 json + * @version: + * @Author: foming + * @Date: 2021-08-29 07:39:35 + * @LastEditors: foming + * @LastEditTime: 2021-08-30 + */ +export const widgetLineCompare = { + code: 'widgetLineCompareChart', + type: 'chart', + label: '折线对比图', + icon: 'iconzhexian', + 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-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, + ], + },*/ + { + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题', + name: 'isNoTitle', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '标题', + name: 'titleText', + required: false, + placeholder: '', + value: '', + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#FFD700' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'textFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-select', + label: '字体位置', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + ], + }, + { + name: '左X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideXLeft', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'XcolorLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeXLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-switch', + label: '刻度线', + name: 'tickLineLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-switch', + label: 'X轴线', + name: 'xLineLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorXLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '竖分割线', + name: 'SplitLineLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'SplitLineColorLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'SplitLinefontSizeLeft', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '边框线', + name: 'frameLineLeft', + require: false, + placeholder: '', + value: false, + }, + ], + }, + { + name: '右X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideXRight', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'splitNumberRight', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'XcolorRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeXRight', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-switch', + label: '刻度线', + name: 'tickLineRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-switch', + label: 'X轴线', + name: 'xLineRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorXRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '竖分割线', + name: 'SplitLineRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'SplitLineColorRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'SplitLinefontSizeRight', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '边框线', + name: 'frameLineRight', + require: false, + placeholder: '', + value: false, + }, + ], + }, + { + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideY', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-select', + label: '数值对齐', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-switch', + label: '刻度线', + name: 'tickLineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-switch', + label: 'Y轴线', + name: 'lineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 14 + }, + { + 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' + }, + ], + }, + { + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + }, + ], + }, + { + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左右边距(像素)', + name: 'marginLeftRight', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 40, + }, + { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + required: false, + placeholder: '', + value: 15, + }, + { + 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: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#36c5e7'}, {color: '#e68b55'}], + }, + ], + }, + ], + ], + // 数据 + 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: 'px', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis":"07-25","name":"success","data":"2"}, + {"axis":"07-25","name":"fail","data":"10"}, + {"axis":"07-26","name":"success","data":"5"}, + {"axis":"07-26","name":"fail","data":"20"}, + {"axis":"07-27","name":"success","data":"15"}, + {"axis":"07-27","name":"fail","data":"30"}, + {"axis":"07-28","name":"success","data":"10"}, + {"axis":"07-28","name":"fail","data":"12"}, + {"axis":"07-29","name":"success","data":"9"}, + {"axis":"07-29","name":"fail","data":"16"}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: 'px', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-stackchart', + dictKey: 'STACK_PROPERTIES', + value: '', + }, + ], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: 'px', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: 'px', + 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: 200, + }, + ], + } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/main.js b/report-ui/src/views/report/bigscreen/designer/tools/main.js index 12525036..1e37d575 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/main.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/main.js @@ -1,6 +1,6 @@ /* * @Descripttion: json 入口文件 - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:46:46 * @LastEditors: qianlishi @@ -31,6 +31,7 @@ import { widgetAirbubbleMap } from "./componentsJSON/widget-airbubble-map" import { widgetBarStack } from "./componentsJSON/widget-bar-stack" import { widgetLineStack } from "./componentsJSON/widget-line-stack" import { widgetBarCompare } from "./componentsJSON/widget-bar-compare" +import { widgetLineCompare } from "./componentsJSON/widget-line-compare" export const widgetTool = [ // type=html类型的组件 @@ -57,5 +58,6 @@ export const widgetTool = [ widgetAirbubbleMap, widgetBarStack, widgetLineStack, - widgetBarCompare -] \ No newline at end of file + widgetBarCompare, + widgetLineCompare +] diff --git a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue new file mode 100644 index 00000000..0f22eeef --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue @@ -0,0 +1,564 @@ + + + + + diff --git a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue index 9396d3f3..f0b126d4 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue @@ -34,6 +34,7 @@ import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; import widgetBarStackChart from "./bar/widgetBarStackChart"; import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; +import widgetLineCompareChart from "./line/widgetLineCompareChart"; export default { name: "WidgetTemp", @@ -60,7 +61,8 @@ export default { widgetAirBubbleMap, widgetBarStackChart, widgetLineStackChart, - widgetBarCompareChart + widgetBarCompareChart, + widgetLineCompareChart }, model: { prop: "value", diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue index 7b603787..1f587d61 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue @@ -44,6 +44,7 @@ import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; import widgetBarStackChart from "./bar/widgetBarStackChart"; import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; +import widgetLineCompareChart from "./line/widgetLineCompareChart"; export default { name: "Widget", @@ -70,7 +71,8 @@ export default { widgetAirBubbleMap, widgetBarStackChart, widgetLineStackChart, - widgetBarCompareChart + widgetBarCompareChart, + widgetLineCompareChart }, model: { prop: "value",