From 79d30d2516246db528827d044af735dae9773f05 Mon Sep 17 00:00:00 2001 From: qianlishi <1432731663@qq.com> Date: Fri, 6 Aug 2021 10:31:00 +0800 Subject: [PATCH] update --- .../bigscreen/designer/form/dynamicForm.vue | 6 ++++ .../views/report/bigscreen/designer/tools.js | 16 +++++------ .../bar/widgetGradientColorBarchart.vue | 28 +++++++++++++------ .../widget/pie/widgetPieNightingaleRose.vue | 27 +++++++++--------- .../designer/widget/widgetBarchart.vue | 2 +- .../designer/widget/widgetBarlinechart.vue | 2 +- .../designer/widget/widgetFunnel.vue | 2 +- .../bigscreen/designer/widget/widgetGauge.vue | 10 +++---- .../designer/widget/widgetLinechart.vue | 2 +- .../designer/widget/widgetPiechart.vue | 13 +++++---- 10 files changed, 61 insertions(+), 47 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue index 08d8997a..7b1c3040 100644 --- a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue +++ b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue @@ -331,6 +331,12 @@ export default { }, mounted() {}, methods: { + onJsonChange(val) { + console.log(val); + }, + onJsonSave(val) { + console.log(val); + }, // 无论哪个输入框改变 都需要触发事件 将值回传 changed(val, key) { if (val.extend) { diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 77046c33..3f6aaef9 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -1822,7 +1822,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}', + value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}, }, { type: 'dycustComponents', @@ -2360,7 +2360,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}', + value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}, }, { type: 'dycustComponents', @@ -3003,7 +3003,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]}', + value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]}, }, { type: 'dycustComponents', @@ -3628,7 +3628,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '{"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]}', + value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]}, }, { type: 'dycustComponents', @@ -4021,7 +4021,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '[{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]', + value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}] }, { type: 'dycustComponents', @@ -4395,7 +4395,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '[{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}]', + value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}], }, { type: 'dycustComponents', @@ -4548,7 +4548,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '{"value": 50, "name": "名称", "unit": "%"}', + value: {value: 50, name: "名称", unit: "%"}, }, { type: 'dycustComponents', @@ -4995,7 +4995,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '[{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]', + value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}], }, { type: 'dycustComponents', diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue index 70a1df74..b0e069ca 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue @@ -95,7 +95,12 @@ export default { barWidth: "20px", itemStyle: { normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ { offset: 0, color: "rgba(0,244,255,1)" // 0% 处的颜色 @@ -115,9 +120,9 @@ export default { label: { normal: { show: true, - position: ['-10', '-30'], + position: ["-10", "-30"], distance: 1, - formatter: '{a|{c}}', + formatter: "{a|{c}}", rich: { a: { fontSize: 15, @@ -326,11 +331,16 @@ export default { legend.itemWidth = optionsCollapse.lengedWidth; }, // 渐变色 - setOptionsColor(){ + setOptionsColor() { const optionsCollapse = this.optionsSetup; - const itemStyle = this.options.series[0]['itemStyle'] + const itemStyle = this.options.series[0]["itemStyle"]; const normal = { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ { offset: 0, color: optionsCollapse.bar0color // 0% 处的颜色 @@ -345,8 +355,8 @@ export default { barBorderRadius: optionsCollapse.radius, //圆角 shadowColor: optionsCollapse.shadowColor, // 阴影颜色 shadowBlur: optionsCollapse.shadowBlur //模糊系数 - } - itemStyle['normal'] = normal + }; + itemStyle["normal"] = normal; }, // 数据解析 setOptionsData() { @@ -362,7 +372,7 @@ export default { }, // 静态数据 staticDataFn(val, optionsSetup) { - const staticData = JSON.parse(val); + const staticData = typeof val == "string" ? JSON.parse(val) : val; // x轴 if (optionsSetup.verticalShow) { this.options.xAxis.data = []; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue index c2e568af..fabaa6f4 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue @@ -1,7 +1,6 @@ @@ -13,7 +12,7 @@ export default { value: Object, ispreview: Boolean }, - data () { + data() { return { options: { legend: { @@ -46,7 +45,7 @@ export default { }; }, computed: { - styleObj () { + styleObj() { return { position: this.ispreview ? "absolute" : "static", width: this.optionsStyle.width + "px", @@ -59,7 +58,7 @@ export default { }, watch: { value: { - handler (val) { + handler(val) { console.log(val); this.optionsStyle = val.position; this.optionsData = val.data; @@ -70,7 +69,7 @@ export default { deep: true } }, - mounted () { + mounted() { this.optionsStyle = this.value.position; this.optionsData = this.value.data; this.optionsCollapse = this.value.setup; @@ -79,7 +78,7 @@ export default { }, methods: { // 修改图标options属性 - editorOptions () { + editorOptions() { this.setOptionsTitle(); this.setOptionsValue(); this.setOptionsTooltip(); @@ -89,11 +88,11 @@ export default { this.setOptionsRosetype(); }, // 饼图模式 面积模式"area" 半径模式"radius" - setOptionsRosetype () { - this.options.series[0]['roseType'] = this.optionsSetup.nightingleRosetype + setOptionsRosetype() { + this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype; }, // 标题修改 - setOptionsTitle () { + setOptionsTitle() { const optionsCollapse = this.optionsSetup; const title = {}; title.text = optionsCollapse.titleText; @@ -141,7 +140,7 @@ export default { } }, // tooltip 设置 - setOptionsTooltip () { + setOptionsTooltip() { const optionsCollapse = this.optionsSetup; const tooltip = { trigger: "item", @@ -154,7 +153,7 @@ export default { this.options.tooltip = tooltip; }, // 边距设置 - setOptionsMargin () { + setOptionsMargin() { const optionsCollapse = this.optionsSetup; const grid = { left: optionsCollapse.marginLeft, @@ -166,7 +165,7 @@ export default { this.options.grid = grid; }, // 图例操作 legend - setOptionsLegend () { + setOptionsLegend() { const optionsCollapse = this.optionsSetup; const legend = this.options.legend; legend.show = optionsCollapse.isShowLegend; @@ -202,7 +201,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = JSON.parse(val); + const staticData = typeof val == "string" ? JSON.parse(val) : val; for (const key in this.options.series) { if (this.options.series[key].type == "pie") { this.options.series[key].data = staticData; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue index 60153910..d364bb0f 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue @@ -296,7 +296,7 @@ export default { }, // 静态数据 staticDataFn(val, optionsSetup) { - const staticData = JSON.parse(val); + const staticData = typeof val == "string" ? JSON.parse(val) : val; // x轴 if (optionsSetup.verticalShow) { this.options.xAxis.data = []; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue index 2b5fe52b..7c05f35d 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue @@ -383,7 +383,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = JSON.parse(val); + const staticData = typeof val == "string" ? JSON.parse(val) : val; // x轴 this.options.xAxis.data = staticData.xAxis; // series diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue index aeea0e80..f9ef6a55 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue @@ -204,7 +204,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = JSON.parse(val); + const staticData = typeof val == "string" ? JSON.parse(val) : val; for (const key in this.options.series) { if (this.options.series[key].type == "funnel") { this.options.series[key].data = staticData; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue index 7e448fb7..3893412f 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue @@ -102,24 +102,22 @@ export default { }, setOptionsData() { const optionsData = this.optionsData; // 数据类型 静态 or 动态 - console.log(optionsData); optionsData.dataType == "staticData" ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const unit = JSON.parse(val).unit; + const staticData = typeof val == "string" ? JSON.parse(val) : val; const series = this.options.series; for (const key in series) { - series[key].detail.formatter = `{value}${unit}`; + series[key].detail.formatter = `{value}${staticData.unit}`; series[key].data[0] = { - value: JSON.parse(val).value, - name: JSON.parse(val).name + value: staticData.value, + name: staticData.name }; } }, dynamicDataFn(val, refreshTime) { - console.log(val); if (!val) return; if (this.ispreview) { this.getEchartData(val); diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue index 12ff88fd..a554e8f2 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue @@ -297,7 +297,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = JSON.parse(val); + const staticData = typeof val == "string" ? JSON.parse(val) : val; // x轴 this.options.xAxis.data = staticData.categories; // series diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue index ed5186dc..de26b6f1 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue @@ -93,12 +93,13 @@ export default { this.setOptionsPiechartStyle(); }, // 饼图样式 - setOptionsPiechartStyle(){ + setOptionsPiechartStyle() { if (this.optionsSetup.piechartStyle == "shixin") { - this.options.series[0]['radius'] = "50%" - }else if (this.optionsSetup.piechartStyle == "kongxin"){ - this.options.series[0]['radius'] = ["40%", "70%"] - }else {} + this.options.series[0]["radius"] = "50%"; + } else if (this.optionsSetup.piechartStyle == "kongxin") { + this.options.series[0]["radius"] = ["40%", "70%"]; + } else { + } }, // 标题设置 setOptionsTitle() { @@ -197,7 +198,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = JSON.parse(val); + const staticData = typeof val == "string" ? JSON.parse(val) : val; for (const key in this.options.series) { if (this.options.series[key].type == "pie") { this.options.series[key].data = staticData;