diff --git a/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-conical-column-chart.js b/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-conical-column-chart.js new file mode 100644 index 0000000..62fcda2 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-conical-column-chart.js @@ -0,0 +1,202 @@ +/* + * @Descripttion: 锥形柱图 + */ +export const widgetConicalColumnChart = { + code: 'widget-conical-column-chart', + type: 'funnel', + tabName: '漏斗图', + label: '锥形柱图', + icon: 'iconloudoutu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '漏斗图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '显示数值', + name: 'showValue', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-switch', + label: '图片显示', + name: 'showImg', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '图片边长', + name: 'imgSideLength', + required: false, + placeholder: '', + value: 30 + }, + { + type: 'vue-color', + label: '柱颜色', + name: 'columnColor', + required: false, + placeholder: '', + value: 'rgba(0, 194, 255, 0.4)' + }, + { + type: 'vue-color', + label: '文字颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#fff' + } + ], + // 数据 + 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: '周口', + value: 55, + // img:'/static/images/conicalColumnChart/1st.png' + }, + { + name: '南阳', + value: 120, + // img:'/static/images/conicalColumnChart/2st.png' + }, + { + name: '西峡', + value: 71, + // img:'/static/images/conicalColumnChart/3st.png' + }, + { + name: '驻马店', + value: 66, + // img:'/static/images/conicalColumnChart/4st.png' + }, + { + name: '新乡', + value: 80, + // img:'/static/images/conicalColumnChart/5st.png' + }, + { + name: '信阳', + value: 35, + // img:'/static/images/conicalColumnChart/6st.png' + }, + { + name: '漯河', + value: 15, + // img:'/static/images/conicalColumnChart/7st.png' + } + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-funnel', + relactiveDomValue: 'dynamicData', + dictKey: 'PIE_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: 500, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 250, + }, + ], + } +} diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js index ad7b1d9..cbfc807 100644 --- a/src/views/bigscreenDesigner/designer/tools/main.js +++ b/src/views/bigscreenDesigner/designer/tools/main.js @@ -39,6 +39,7 @@ import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond"; import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop"; import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board"; import {widgetActiveRingChart} from "./configure/pieCharts/widget-active-ring-chart"; +import {widgetConicalColumnChart} from "./configure/funnelCharts/widget-conical-column-chart"; export const widgetTool = [ @@ -85,5 +86,6 @@ export const widgetTool = [ widgetRadar, widgetBarLineStack, widgetProgress, - widgetActiveRingChart + widgetActiveRingChart, + widgetConicalColumnChart ] diff --git a/src/views/bigscreenDesigner/designer/widget/funnel/widgetConicalColumnChart.vue b/src/views/bigscreenDesigner/designer/widget/funnel/widgetConicalColumnChart.vue new file mode 100644 index 0000000..7707e3f --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/funnel/widgetConicalColumnChart.vue @@ -0,0 +1,156 @@ + + + + diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue index ea5b507..b55d306 100644 --- a/src/views/bigscreenDesigner/designer/widget/temp.vue +++ b/src/views/bigscreenDesigner/designer/widget/temp.vue @@ -45,7 +45,7 @@ import widgetWaterLevelPond from "./text/widgetWaterLevelPond"; import widgetDigitalFlop from "./text/widgetDigitalFlop"; import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard"; import widgetActiveRingChart from "./pie/widgetActiveRingChart"; - +import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart"; export default { name: "WidgetTemp", @@ -89,7 +89,8 @@ export default { widgetWaterLevelPond, widgetDigitalFlop, widgetScrollRankingBoard, - widgetActiveRingChart + widgetActiveRingChart, + widgetConicalColumnChart }, model: { prop: "value", diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue index 72eaa3a..d18486b 100644 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue +++ b/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue @@ -111,10 +111,10 @@ export default { }; - - - - - - - + diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue index 20c4518..b7ede0b 100644 --- a/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -56,6 +56,7 @@ import widgetWaterLevelPond from "./text/widgetWaterLevelPond"; import widgetDigitalFlop from "./text/widgetDigitalFlop"; import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard"; import widgetActiveRingChart from "./pie/widgetActiveRingChart"; +import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart"; export default { name: "Widget", components: { @@ -98,8 +99,8 @@ export default { widgetWaterLevelPond, widgetDigitalFlop, widgetScrollRankingBoard, - widgetActiveRingChart - + widgetActiveRingChart, + widgetConicalColumnChart }, model: { prop: "value", diff --git a/static/images/conicalColumnChart/1st.png b/static/images/conicalColumnChart/1st.png new file mode 100644 index 0000000..f5d99de --- /dev/null +++ b/static/images/conicalColumnChart/1st.png diff --git a/static/images/conicalColumnChart/2st.png b/static/images/conicalColumnChart/2st.png new file mode 100644 index 0000000..2509820 --- /dev/null +++ b/static/images/conicalColumnChart/2st.png diff --git a/static/images/conicalColumnChart/3st.png b/static/images/conicalColumnChart/3st.png new file mode 100644 index 0000000..d4f39d7 --- /dev/null +++ b/static/images/conicalColumnChart/3st.png diff --git a/static/images/conicalColumnChart/4st.png b/static/images/conicalColumnChart/4st.png new file mode 100644 index 0000000..de5ce32 --- /dev/null +++ b/static/images/conicalColumnChart/4st.png diff --git a/static/images/conicalColumnChart/5st.png b/static/images/conicalColumnChart/5st.png new file mode 100644 index 0000000..813ac77 --- /dev/null +++ b/static/images/conicalColumnChart/5st.png diff --git a/static/images/conicalColumnChart/6st.png b/static/images/conicalColumnChart/6st.png new file mode 100644 index 0000000..af2b9d3 --- /dev/null +++ b/static/images/conicalColumnChart/6st.png diff --git a/static/images/conicalColumnChart/7st.png b/static/images/conicalColumnChart/7st.png new file mode 100644 index 0000000..53819df --- /dev/null +++ b/static/images/conicalColumnChart/7st.png