From 8a484723d5e896866823ce59d5dd3fe1285c3ae8 Mon Sep 17 00:00:00 2001 From: chenxg Date: Thu, 24 Aug 2023 14:36:30 +0800 Subject: [PATCH 01/42] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6-=E6=B5=81=E5=85=89=E7=9B=B4=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styleWidget/widget-decorate-flow-line.js | 81 +++++++++++ .../bigscreenDesigner/designer/tools/main.js | 2 + .../styleWidget/widgetDecorateFlowLine.vue | 133 ++++++++++++++++++ .../designer/widget/temp.vue | 2 + .../designer/widget/widget.vue | 2 + 5 files changed, 220 insertions(+) create mode 100644 report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js create mode 100644 report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js new file mode 100644 index 00000000..c1952297 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js @@ -0,0 +1,81 @@ +/** + * author:chenxg + * date:2023-08-24 + */ +export const widgetDecorateFlowLine = { + code: 'widget-decorate-flow-line', + type: 'border', + tabName: '样式组件', + label: '流光直线', + icon: 'icontupian1', + 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-select', + label: '流动方向', + name: 'flowDirection', + required: false, + placeholder: '', + selectOptions: [ + { code: 'left', name: '自左向右' }, + { code: 'right', name: '自右向左' }, + ], + value: 'left' + }, + ], + // 数据 + data: [], + // 坐标 + 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/main.js b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js index 53f1c773..952635c1 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js @@ -45,12 +45,14 @@ import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertic import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal" import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart"; import {widgetBorder} from "./configure/styleWidget/widget-border"; +import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line"; import {widgetDecoration} from "./configure/styleWidget/widget-decoration"; export const widgetTool = [ // type=html类型的组件 widgetText, widgetBorder, + widgetDecorateFlowLine, widgetDecoration, widgetMarquee, widgetHref, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue new file mode 100644 index 00000000..e9834fa9 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue @@ -0,0 +1,133 @@ + + + diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue index df892766..b4688145 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue @@ -46,6 +46,7 @@ import widgetFormTime from "./form/widgetFormTime.vue"; import widgetScaleVertical from "./scale/widgetScaleVertical.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; +import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue"; @@ -55,6 +56,7 @@ export default { widgetHref, widgetText, widgetBorder, + widgetDecorateFlowLine, widgetDecoration, WidgetMarquee, widgetTime, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue index dd2bf6d9..ead97485 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -54,6 +54,7 @@ import widgetScaleVertical from "./scale/widgetScaleVertical.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue"; +import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue"; export default { @@ -62,6 +63,7 @@ export default { widgetHref, widgetText, widgetBorder, + widgetDecorateFlowLine, widgetDecoration, WidgetMarquee, widgetTime, From 93c578139721d9b1176d3a53e869ae2761b1c9d8 Mon Sep 17 00:00:00 2001 From: chenxg Date: Thu, 24 Aug 2023 15:36:04 +0800 Subject: [PATCH 02/42] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6-=E6=B5=81=E5=85=89=E7=9B=B4=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../configure/styleWidget/widget-decorate-flow-line.js | 8 ++++++++ .../widget/styleWidget/widgetDecorateFlowLine.vue | 9 ++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js index c1952297..3fa99555 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js @@ -39,6 +39,14 @@ export const widgetDecorateFlowLine = { ], value: 'left' }, + { + type: 'el-input-number', + label: '旋转角度', + name: 'rotationAngle', + required: false, + placeholder: '', + value: '0' + }, ], // 数据 data: [], diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue index e9834fa9..55569cfb 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue @@ -18,7 +18,8 @@ export default ({ optionsSetup: {}, direction: 'left', // 控制流光的方向，可选值: 'left' 和 'right' background: 'red', // 控制底色的值 - containerWidth: '400px' + containerWidth: '400px', + rotationAngle: 0, // 旋转的角度 } }, props: { @@ -66,7 +67,8 @@ export default ({ height: '4px', position: 'relative', overflow: 'hidden', - flexDirection: this.direction === 'left' ? 'row-reverse' : 'row' // 根据流光方向设置进度条的方向 + flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', // 根据流光方向设置进度条的方向 + transform: `rotate(${this.rotationAngle}deg)` // 添加旋转角度 } }, flowingLightStyle() { @@ -85,6 +87,7 @@ export default ({ const optionsStyle = this.optionsStyle; this.background = optionsSetup.background; this.direction = optionsSetup.flowDirection; + this.rotationAngle = optionsSetup.rotationAngle; this.containerWidth = optionsStyle.width; }, } @@ -96,7 +99,7 @@ export default ({ display: flex; justify-content: center; align-items: center; - background: #282c34; + background: transparent; } .progress-bar { From 671a15c148b2ed4be50c5b298140e2abd137b968 Mon Sep 17 00:00:00 2001 From: chenxg Date: Tue, 5 Sep 2023 09:24:33 +0800 Subject: [PATCH 03/42] =?UTF-8?q?=E6=B5=81=E5=85=89=E7=9B=B4=E7=BA=BF?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styleWidget/widget-decorate-flow-line.js | 36 ++++++++++++++++++- .../styleWidget/widgetDecorateFlowLine.vue | 27 +++++++++++--- 2 files changed, 57 insertions(+), 6 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js index 3fa99555..f1fde1c5 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js @@ -27,6 +27,14 @@ export const widgetDecorateFlowLine = { placeholder: '', value: '' }, + { + type: 'vue-color', + label: '流光颜色', + name: 'lightColor', + required: false, + placeholder: '', + value: '#fff' + }, { type: 'el-select', label: '流动方向', @@ -39,6 +47,32 @@ export const widgetDecorateFlowLine = { ], value: 'left' }, + { + type: 'el-select', + label: '流动速度', + name: 'flowingLightSpeed', + required: false, + placeholder: '', + selectOptions: [ + { code: 'low', name: '低' }, + { code: 'medium', name: '中' }, + { code: 'high', name: '高' }, + ], + value: 'medium' + }, + { + type: 'el-select', + label: '旋转中心', + name: 'flowingLightRotationCenter', + required: false, + placeholder: '', + selectOptions: [ + { code: 'left', name: '左' }, + { code: 'center', name: '中' }, + { code: 'right', name: '右' }, + ], + value: 'center' + }, { type: 'el-input-number', label: '旋转角度', @@ -82,7 +116,7 @@ export const widgetDecorateFlowLine = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 300, + value: 4, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue index 55569cfb..14777a7b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue @@ -19,7 +19,11 @@ export default ({ direction: 'left', // 控制流光的方向，可选值: 'left' 和 'right' background: 'red', // 控制底色的值 containerWidth: '400px', + containerHeight: '4px', rotationAngle: 0, // 旋转的角度 + flowingLightColor: null, + flowingLightSpeed: 'medium', + flowingLightRotationCenter: 'center', } }, props: { @@ -64,20 +68,30 @@ export default ({ return { background: this.background, width: '100%', - height: '4px', + height: this.containerHeight + "px", position: 'relative', overflow: 'hidden', flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', // 根据流光方向设置进度条的方向 - transform: `rotate(${this.rotationAngle}deg)` // 添加旋转角度 + transform: `rotate(${this.rotationAngle}deg)`, // 添加旋转角度 + transformOrigin: this.flowingLightRotationCenter, // 设置旋转中心 } }, flowingLightStyle() { + let duration = 0; // 初始化动画持续时间 + + if (this.flowingLightSpeed === 'low') { + duration = 8; // 低速持续时间 + } else if (this.flowingLightSpeed === 'medium') { + duration = 4; // 中速持续时间 + } else if (this.flowingLightSpeed === 'high') { + duration = 2; // 高速持续时间 + } return { height: '4px', width: '80px', - background: 'linear-gradient(to right, transparent, #fff)', + background: 'linear-gradient(to right, transparent,' + this.flowingLightColor + ')', position: 'absolute', - animation: this.direction === 'left' ? 'right_to_left 4s 0s infinite' : 'left_to_right 4s 0s infinite' // 根据流光方向设置动画 + animation: this.direction === 'right' ? `right_to_left ${duration}s 0s infinite` : `left_to_right ${duration}s 0s infinite` // 根据流光方向设置动画 } }, }, @@ -89,13 +103,16 @@ export default ({ this.direction = optionsSetup.flowDirection; this.rotationAngle = optionsSetup.rotationAngle; this.containerWidth = optionsStyle.width; + this.containerHeight = optionsStyle.height; + this.flowingLightColor = optionsSetup.lightColor; + this.flowingLightSpeed = optionsSetup.flowingLightSpeed; + this.flowingLightRotationCenter = optionsSetup.flowingLightRotationCenter; }, } }) diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue index b4688145..685e5b71 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue @@ -49,6 +49,7 @@ import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue"; +import widgetBarMap from "./map/widgetBarMap.vue"; export default { name: "WidgetTemp", @@ -92,6 +93,7 @@ export default { //widgetInput, widgetFormTime, widgetBarDoubleYaxisChart, + widgetBarMap }, 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 ead97485..322a11bd 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -56,6 +56,7 @@ import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue"; +import widgetBarMap from "./map/widgetBarMap.vue"; export default { name: "Widget", @@ -99,6 +100,7 @@ export default { //widgetInput, widgetFormTime, widgetBarDoubleYaxisChart, + widgetBarMap }, model: { prop: "value", From 660a47a3b0c4b6b2a69c0f529f4500af981f8010 Mon Sep 17 00:00:00 2001 From: qianming Date: Mon, 11 Sep 2023 13:58:19 +0800 Subject: [PATCH 07/42] =?UTF-8?q?feat--=E4=BC=98=E5=8C=96=E4=B8=AD?= =?UTF-8?q?=E5=9B=BD=E5=9C=B0=E5=9B=BE=E6=9F=B1=E5=BD=A2=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/widget/map/widgetBarMap.vue | 454 +++++++----------- 1 file changed, 161 insertions(+), 293 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue index e115b7a2..fc8da64c 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue @@ -11,137 +11,6 @@ import {conversionProvince} from "@/utils/china"; import echarts from "echarts"; let geoCoordMap = conversionProvince; -let data = [ - { - name: "北京市", - value: 70, - }, - { - name: "天津市", - value: 20, - }, - { - name: "上海市", - value: 150, - }, - { - name: "重庆市", - value: 75, - }, - { - name: "河北省", - value: 40, - }, - { - name: "河南省", - value: 83, - }, - { - name: "云南省", - value: 50, - }, - { - name: "辽宁省", - value: 49, - }, - { - name: "黑龙江省", - value: 25, - }, - { - name: "湖南省", - value: 69, - }, - { - name: "安徽省", - value: 36, - }, - { - name: "山东省", - value: 39, - }, - { - name: "新疆维吾尔自治区", - value: 42, - }, - { - name: "江苏省", - value: 42, - }, - { - name: "浙江省", - value: 56, - }, - { - name: "江西省", - value: 23, - }, - { - name: "湖北省", - value: 98, - }, - { - name: "广西壮族自治区", - value: 33, - }, - { - name: "宁夏回族自治区", - value: 47, - }, - { - name: "山西省", - value: 18, - }, - { - name: "内蒙古自治区", - value: 57, - }, - { - name: "陕西省", - value: 22, - }, - { - name: "吉林省", - value: 44, - }, - { - name: "福建省", - value: 36, - }, - { - name: "贵州省", - value: 39, - }, - { - name: "广东省", - value: 96, - }, - { - name: "青海省", - value: 27, - }, - { - name: "西藏自治区", - value: 31, - }, - { - name: "四川省", - value: 46, - } -]; -let convertData = function (data) { - let res = []; - for (let i = 0; i < data.length; i++) { - let geoCoord = geoCoordMap[data[i].name]; - if (geoCoord) { - res.push({ - name: data[i].name, - value: geoCoord.concat(data[i].value), - }); - } - } - return res; -}; export default { name: "widgetBarMap", @@ -280,7 +149,7 @@ export default { }, }, }, - data: data + data: [] }, // 柱状体的主干 { @@ -297,7 +166,7 @@ export default { curveness: 0 // 尾迹线条曲直度 }, silent: true, - data: this.lineData(data) + data: [] }, // 柱状体的顶部 { @@ -329,7 +198,7 @@ export default { opacity: 1 }, silent: true, - data: this.scatterData(data) + data: [] }, // 柱状体的底部 { @@ -357,7 +226,7 @@ export default { opacity: 1 }, silent: true, - data: this.scatterData2(data) + data: [] }, // 底部外框 { @@ -398,7 +267,7 @@ export default { opacity: 1 }, silent: true, - data: convertData(data) + data: [] } ] }, @@ -536,87 +405,27 @@ export default { this.options.series[0]['label'] = label; this.options.series[0]['itemStyle'] = itemStyle; }, - // 柱形设置 - setOptionsBarTrunk() { - const optionsSetup = this.optionsSetup; - const lineStyle = { - width: optionsSetup.barWidth, - color: optionsSetup.barColor, - opacity: 1, // 尾迹线条透明度 - curveness: 0 // 尾迹线条曲直度 - } - this.options.series[1]['lineStyle'] = lineStyle; - }, - setOptionsBarTop() { - const optionsSetup = this.optionsSetup; - // this.options.series[2]['symbolSize'] = [optionsSetup.barWidth, 10]; - }, - setOptionsBarBottom() { - const optionsSetup = this.optionsSetup; - /* const label = { - // 这儿是处理的 - show: optionsSetup.isShowFontText, - formatter: '{b}', - position: 'bottom', - fontSize: optionsSetup.fontTextSize, - color: optionsSetup.fontTextColor, - fontWeight: optionsSetup.fontTextWeight, - fontStyle: optionsSetup.fontTextStyle, - distance: 10, - }; - this.options.series[3]['label'] = label;*/ - //this.options.series[3]['symbolSize'] = [optionsSetup.barWidth, 10]; - }, - setOptionsBarBottomOut() { - const optionsSetup = this.optionsSetup; - // this.options.series[4]['symbolSize'] = [optionsSetup.barBottomOutSymbolSize, 10]; - const itemStyle = { - color: { - type: 'radial', - x: 0.5, - y: 0.5, - r: 0.5, - colorStops: [ - { - offset: 0, color: 'rgba(22,255,255, 0)' // 0% 处的颜色 - }, - { - offset: .75, color: 'rgba(22,255,255, 0)' // 100% 处的颜色 - }, - { - offset: .751, color: optionsSetup.barBottomOutColor // 100% 处的颜色 - }, - { - offset: 1, color: optionsSetup.barBottomOutColor // 100% 处的颜色 - } - ], - global: false // 缺省为 false - }, - opacity: 1 - }; - this.options.series[4]['itemStyle'] = itemStyle; - }, // 计算柱图的高度比例 - lineMaxHeight(val, heightRate) { + calMaxHeight(val, heightRate) { const maxValue = Math.max.apply(null, val.map(item => item.value)) return heightRate / maxValue; }, // 柱体的主干 - lineData(val, heightRate) { + calScatterTrunk(val, heightRate) { return val.map((item) => { return { - coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(val, heightRate)]] + coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate)]] } }) }, // 柱体顶部 - scatterData(val, heightRate) { + calScatterTop(val, heightRate) { return val.map((item) => { - return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(val, heightRate), item.value] + return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate), item.value] }) }, // 柱体的底部 - scatterData2(val) { + calScatterBottom(val) { return val.map((item) => { return { name: item.name, @@ -645,6 +454,152 @@ export default { }; this.options.tooltip = tooltip; }, + // 柱体主干 + getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate) { + const barTrunk = { + type: 'lines', + zlevel: 1, + effect: { + show: false, + symbolSize: 5 // 图标大小 + }, + lineStyle: { + width: optionsSetup.barWidth, // 尾迹线条宽度 + color: (params) => { + return arrColor[params.dataIndex]; + }, + opacity: 1, // 尾迹线条透明度 + curveness: 0 // 尾迹线条曲直度 + }, + silent: true, + data: this.calScatterTrunk(allData, heightRate), + }; + return barTrunk; + }, + // 柱体顶 + getOptionsBarTop(optionsSetup, arrColor, allData, heightRate) { + const barTop = { + type: 'scatter', + coordinateSystem: 'geo', + //geoIndex: 0, + zlevel: 1, + rippleEffect: { + brushType: "stroke", + }, + label: { + show: optionsSetup.isShowFontData, + formatter: function (params) { + return "{cnNum|" + params.data[2] + "}"; + }, + rich: { + cnNum: { + // 数值字号 + fontSize: optionsSetup.fontDataSize, + color: (params) => { + return arrColor[params.dataIndex]; + }, + fontWeight: optionsSetup.fontDataWeight, + fontStyle: optionsSetup.fontDataStyle, + }, + }, + position: "top" + }, + symbol: 'circle', + symbolSize: [optionsSetup.barWidth, 10], + itemStyle: { + color: (params) => { + return arrColor[params.dataIndex]; + }, + opacity: 1 + }, + silent: true, + data: this.calScatterTop(allData, heightRate) + } + return barTop; + }, + // 柱底 + getOptionsBarBottom(optionsSetup, arrColor, allData) { + const batBottom = { + type: 'scatter', + coordinateSystem: 'geo', + rippleEffect: { + brushType: "stroke", + }, + //geoIndex: 0, + zlevel: 1, + label: { + // 这儿是处理的 + show: optionsSetup.isShowFontText, + formatter: '{b}', + position: 'bottom', + fontSize: optionsSetup.fontTextSize, + color: (params) => { + return arrColor[params.dataIndex]; + }, + fontWeight: optionsSetup.fontTextWeight, + fontStyle: optionsSetup.fontTextStyle, + distance: 10, + }, + symbol: 'circle', + symbolSize: [optionsSetup.barWidth, 10], + itemStyle: { + color: (params) => { + return arrColor[params.dataIndex]; + }, + opacity: 1, + }, + silent: true, + data: this.calScatterBottom(allData), + } + return batBottom; + }, + // 柱底外圆 + getOptionsBarBottomOut(optionsSetup, arrColor, allData) { + const barBottomOut = { + type: 'scatter', + coordinateSystem: 'geo', + //geoIndex: 0, + rippleEffect: { + brushType: "stroke", + }, + zlevel: 1, + label: { + show: false + }, + symbol: 'circle', + symbolSize: [optionsSetup.barBottomOutSymbolSize, 10], + // 渐变色 + itemStyle: { + color: (params) => { + return { + type: 'radial', + x: 0.5, + y: 0.5, + r: 0.5, + colorStops: [ + { + offset: 0, color: 'rgba(22,255,255, 0)' // 0% 处的颜色 + }, + { + offset: .75, color: 'rgba(22,255,255, 0)' // 100% 处的颜色 + }, + { + offset: .751, color: arrColor[params.dataIndex] // 100% 处的颜色 + }, + { + offset: 1, color: arrColor[params.dataIndex] // 100% 处的颜色 + } + ], + global: false // 缺省为 false + } + }, + opacity: 1, + }, + silent: true, + data: this.calScatterBottom(allData), + } + return barBottomOut; + }, //数据解析 setOptionsData(e, paramsConfig) { const optionsData = this.optionsData; // 数据类型 静态 or 动态 @@ -699,98 +654,11 @@ export default { for (const i in val) { arrColor.push(customColor[i % customColor.length].color) } - const itemStyle = { - color: (params) => { - //console.log(params) - return arrColor[params.dataIndex]; - }, - opacity: 1, - }; - const lineStyle = { - width: optionsSetup.barWidth, - color: (params) => { - //console.log(params) - return arrColor[params.dataIndex]; - }, - opacity: 1, // 尾迹线条透明度 - curveness: 0 // 尾迹线条曲直度 - } - - const labelTop = { - show: optionsSetup.isShowFontData, - formatter: function (params) { - return "{cnNum|" + params.data[2] + "}"; - }, - rich: { - cnNum: { - // 数值字号 - fontSize: optionsSetup.fontDataSize, - color: (params) => { - return arrColor[params.dataIndex]; - }, - fontWeight: optionsSetup.fontDataWeight, - fontStyle: optionsSetup.fontDataStyle, - }, - }, - position: "top" - }; - const labelBottom = { - // 这儿是处理的 - show: optionsSetup.isShowFontText, - formatter: '{b}', - position: 'bottom', - fontSize: optionsSetup.fontTextSize, - color: (params) => { - return arrColor[params.dataIndex]; - }, - fontWeight: optionsSetup.fontTextWeight, - fontStyle: optionsSetup.fontTextStyle, - distance: 10, - }; - // 渐变 - const itemStyle4 = { - color: (params) => { - return { - type: 'radial', - x: 0.5, - y: 0.5, - r: 0.5, - colorStops: [ - { - offset: 0, color: 'rgba(22,255,255, 0)' // 0% 处的颜色 - }, - { - offset: .75, color: 'rgba(22,255,255, 0)' // 100% 处的颜色 - }, - { - offset: .751, color: arrColor[params.dataIndex] // 100% 处的颜色 - }, - { - offset: 1, color: arrColor[params.dataIndex] // 100% 处的颜色 - } - ], - global: false // 缺省为 false - } - }, - opacity: 1, - } - this.options.series[1]['lineStyle'] = lineStyle; - this.options.series[1].data = this.lineData(allData, heightRate); - - this.options.series[2]['symbolSize'] = [optionsSetup.barWidth, 10]; - this.options.series[2]['itemStyle'] = itemStyle; - this.options.series[2]['label'] = labelTop; - this.options.series[2].data = this.scatterData(allData, heightRate); - - this.options.series[3]['symbolSize'] = [optionsSetup.barWidth, 10]; - this.options.series[3]['itemStyle'] = itemStyle; - this.options.series[3]['label'] = labelBottom; - this.options.series[3].data = convertData(allData); - this.options.series[4]['symbolSize'] = [optionsSetup.barBottomOutSymbolSize, 10]; - this.options.series[4]['itemStyle'] = itemStyle4; - console.log(this.options) - this.options.series[4].data = convertData(allData); + this.options.series[1] = this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate); + this.options.series[2] = this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate); + this.options.series[3] = this.getOptionsBarBottom(optionsSetup, arrColor, allData); + this.options.series[4] = this.getOptionsBarBottomOut(optionsSetup, arrColor, allData); }, dynamicDataFn(val, refreshTime) { if (!val) return; From 3f789c4541d43259566247ef8994a01142ec1eaa Mon Sep 17 00:00:00 2001 From: qianming Date: Mon, 11 Sep 2023 18:53:06 +0800 Subject: [PATCH 08/42] =?UTF-8?q?feat--dyn=E5=85=BC=E5=AE=B9string?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bigscreenDesigner/designer/components/dynamicComponents.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue index 684f53f6..84310260 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue @@ -58,7 +58,7 @@ export default { props: { chartType: String, dictKey: String, - formData: Object + formData: Object | String }, data() { return { From 0abd256c44a676c5f29c1d552020da01d4b2b25c Mon Sep 17 00:00:00 2001 From: qianlishi Date: Fri, 8 Sep 2023 13:45:02 +0800 Subject: [PATCH 09/42] =?UTF-8?q?=E5=85=A5=E5=8F=82=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- report-ui/src/mixins/queryform.js | 44 ++++++++++++++++++- .../src/views/bigScreenReport/aj/index.vue | 15 +++++-- 2 files changed, 54 insertions(+), 5 deletions(-) diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index 4004384c..271201b2 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -95,13 +95,55 @@ export default { }, // 查询echarts 数据 queryEchartsData(params) { + const queryParams = this.toEchartsDataQueryParams(params) return new Promise(async (resolve) => { - const { code, data } = await getData(params); + const { code, data } = await getData(queryParams); if (code != 200) return const analysisData = this.analysisChartsData(params, data); resolve(analysisData) }) }, + /** + * 将url参数解析到图表参数中 + * 1. tenantCode=aaa + * 2. [setCode].tenantCode=aaa + * 判断是否有点(.) + * a. 没有 -> 把所有的参数全部给插入contextData + * b. 有 -> 点前缀的值去匹配相同的值再把对应的值插入contextData + * + * **/ + toEchartsDataQueryParams(params) { + const queryParams = this.deepClone(params) + const query = this.$route.query + if(!this.isIncludePoints(query)) { + queryParams.contextData = { ...queryParams.contextData, ...query } + } else { + Object.keys(query).forEach(item => { + if(item.indexOf('.') > -1) { + const obj = {} + const key1 = item.split('.')[0] + const key2 = item.split('.')[1] + obj[key2] = query[item] + if (queryParams.setCode == key1) { + const newObj = { ...queryParams.contextData, ...obj } + queryParams.contextData = newObj + } + } + }) + } + + return queryParams + }, + // 判断对象是否包含点 + isIncludePoints(query) { + let isPoints = false + Object.keys(query).forEach(item => { + if(item.indexOf('.') > -1) { + isPoints = true + } + }) + return isPoints + }, // 解析不同图标的数据 analysisChartsData(params, data) { // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图 diff --git a/report-ui/src/views/bigScreenReport/aj/index.vue b/report-ui/src/views/bigScreenReport/aj/index.vue index ee94ff4f..61959d3b 100644 --- a/report-ui/src/views/bigScreenReport/aj/index.vue +++ b/report-ui/src/views/bigScreenReport/aj/index.vue @@ -43,7 +43,7 @@ export default { methods: { async handleOpen() { const url = window.location.href; - const shareCode = url.substring(url.lastIndexOf("/") + 1); + const shareCode = url.split('?')[0].substring(url.lastIndexOf("/") + 1); const { code, data } = await reportShareDetailByCode(shareCode); if (code != "200") return; this.reportCode = data.reportCode; @@ -66,13 +66,20 @@ export default { }, pushAj() { setShareToken(this.shareToken); + const url = window.location.href; + const urlParamsObj = this.toUrlParamsMap(url.split('?')[1]) + const queryParams = { ...urlParamsObj, reportCode: this.reportCode } this.$router.push({ path: "/bigscreen/viewer", - query: { - reportCode: this.reportCode - } + query: queryParams }); }, + toUrlParamsMap(params) { + if(!params) return {} + const urlObj = {} + params.split("&").map(item => urlObj[item.split("=")[0]] = item.split("=")[1]) + return urlObj + }, handleClose(done) { this.$confirm("确认关闭？") .then(_ => { From df494710c843f6c9de16eabc340efa5e3ec8f27e Mon Sep 17 00:00:00 2001 From: qianlishi Date: Mon, 11 Sep 2023 10:45:52 +0800 Subject: [PATCH 10/42] =?UTF-8?q?iframe=20=E8=A7=A3=E6=9E=90=E5=9C=B0?= =?UTF-8?q?=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/widget/texts/widgetIframe.vue | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetIframe.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetIframe.vue index 9e1c22fc..de96836e 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetIframe.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetIframe.vue @@ -1,7 +1,7 @@