diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 66fbf3a6..190693ef 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -1164,6 +1164,14 @@ const widgetTools = [ placeholder: '', value: 12, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + } ], }, { @@ -1225,6 +1233,14 @@ const widgetTools = [ placeholder: '', value: 12, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + } ], }, { @@ -1700,6 +1716,14 @@ const widgetTools = [ placeholder: '', value: 12, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + } ], }, { @@ -1761,6 +1785,14 @@ const widgetTools = [ placeholder: '', value: 12, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + } ], }, { @@ -2156,6 +2188,14 @@ const widgetTools = [ placeholder: '', value: 12, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + } ], }, { @@ -2217,6 +2257,14 @@ const widgetTools = [ placeholder: '', value: 12, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + } ], }, { @@ -2766,6 +2814,14 @@ const widgetTools = [ placeholder: '', value: 16, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + } ], }, { @@ -2827,6 +2883,14 @@ const widgetTools = [ placeholder: '', value: 12, }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + } ], }, { 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 e88f76a2..3a1c9f4e 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 @@ -1,412 +1,413 @@ diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue index cd9a6fb2..73f24ee5 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue @@ -1,6 +1,7 @@ @@ -13,7 +14,7 @@ export default { value: Object, ispreview: Boolean }, - data() { + data () { return { options: { legend: { @@ -54,7 +55,7 @@ export default { }; }, computed: { - styleObj() { + styleObj () { return { position: this.ispreview ? "absolute" : "static", width: this.optionsStyle.width + "px", @@ -67,7 +68,7 @@ export default { }, watch: { value: { - handler(val) { + handler (val) { console.log(val); this.optionsStyle = val.position; this.optionsData = val.data; @@ -78,7 +79,7 @@ export default { deep: true } }, - mounted() { + mounted () { this.optionsStyle = this.value.position; this.optionsData = this.value.data; this.optionsCollapse = this.value.setup; @@ -87,7 +88,7 @@ export default { }, methods: { // 修改图标options属性 - editorOptions() { + editorOptions () { this.setOptionsTitle(); // this.setOptionsX() // this.setOptionsY() @@ -99,7 +100,7 @@ export default { this.setOptionsData(); }, // 标题修改 - setOptionsTitle() { + setOptionsTitle () { const optionsCollapse = this.optionsSetup; const title = {}; title.text = optionsCollapse.titleText; @@ -120,7 +121,7 @@ export default { this.options.title = title; }, // X轴设置 - setOptionsX() { + setOptionsX () { const optionsCollapse = this.optionsSetup; const xAxis = { type: "category", @@ -144,14 +145,14 @@ export default { axisLine: { show: true, lineStyle: { - color: "#fff" + color: optionsCollapse.lineColorX } } }; this.options.xAxis = xAxis; }, // Y轴设置 - setOptionsY() { + setOptionsY () { const optionsCollapse = this.optionsSetup; const yAxis = { type: "value", @@ -175,7 +176,7 @@ export default { axisLine: { show: true, lineStyle: { - color: "#fff" + color: optionsCollapse.lineColorY } } }; @@ -183,7 +184,7 @@ export default { this.options.yAxis = yAxis; }, // 数值设定 or 柱体设置 - setOptionsTop() { + setOptionsTop () { const optionsCollapse = this.optionsSetup; const series = this.options.series; @@ -204,7 +205,7 @@ export default { this.options.series = series; }, // tooltip 设置 - setOptionsTooltip() { + setOptionsTooltip () { const optionsCollapse = this.optionsSetup; const tooltip = { trigger: "item", @@ -217,7 +218,7 @@ export default { this.options.tooltip = tooltip; }, // 边距设置 - setOptionsMargin() { + setOptionsMargin () { const optionsCollapse = this.optionsSetup; const grid = { left: optionsCollapse.marginLeft, @@ -229,7 +230,7 @@ export default { this.options.grid = grid; }, // 图例操作 legend - setOptionsLegend() { + setOptionsLegend () { const optionsCollapse = this.optionsSetup; const legend = this.options.legend; legend.show = optionsCollapse.isShowLegend; @@ -246,7 +247,7 @@ export default { legend.itemWidth = optionsCollapse.lengedWidth; }, // 图例颜色修改 - setOptionsColor() { + setOptionsColor () { const optionsCollapse = this.optionsSetup; const customColor = optionsCollapse.customColor; if (!customColor) return; @@ -270,7 +271,7 @@ export default { this.options = Object.assign({}, this.options); }, // 数据解析 - setOptionsData() { + setOptionsData () { const optionsSetup = this.optionsSetup; console.log(optionsSetup); const optionsData = this.optionsData; // 数据类型 静态 or 动态 @@ -280,7 +281,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsSetup); }, // 静态数据 - staticDataFn(val, optionsSetup) { + staticDataFn (val, optionsSetup) { const staticData = JSON.parse(val); // x轴 if (optionsSetup.verticalShow) { @@ -303,7 +304,7 @@ export default { } }, // 动态数据 - dynamicDataFn(val, optionsSetup) { + dynamicDataFn (val, optionsSetup) { console.log(val); if (!val) return; // x轴 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 509a2632..af25039c 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue @@ -1,6 +1,7 @@ @@ -12,7 +13,7 @@ export default { value: Object, ispreview: Boolean }, - data() { + data () { return { options: { grid: {}, @@ -58,7 +59,7 @@ export default { }; }, computed: { - styleObj() { + styleObj () { return { position: this.ispreview ? "absolute" : "static", width: this.optionsStyle.width + "px", @@ -71,7 +72,7 @@ export default { }, watch: { value: { - handler(val) { + handler (val) { console.log(val); this.optionsStyle = val.position; this.optionsData = val.data; @@ -82,7 +83,7 @@ export default { deep: true } }, - mounted() { + mounted () { this.optionsStyle = this.value.position; this.optionsData = this.value.data; this.optionsCollapse = this.value.setup; @@ -91,7 +92,7 @@ export default { }, methods: { // 修改图标options属性 - editorOptions() { + editorOptions () { this.setOptionsTitle(); this.setOptionsX(); this.setOptionsY(); @@ -103,7 +104,7 @@ export default { this.setOptionsData(); }, // 标题修改 - setOptionsTitle() { + setOptionsTitle () { const optionsCollapse = this.optionsSetup; const title = {}; title.text = optionsCollapse.titleText; @@ -124,7 +125,7 @@ export default { this.options.title = title; }, // X轴设置 - setOptionsX() { + setOptionsX () { const optionsCollapse = this.optionsSetup; const xAxis = { type: "category", @@ -148,14 +149,14 @@ export default { axisLine: { show: true, lineStyle: { - color: "#fff" + color: optionsCollapse.lineColorX } } }; this.options.xAxis = xAxis; }, // Y轴设置 - setOptionsY() { + setOptionsY () { const optionsCollapse = this.optionsSetup; const yAxis = { type: "value", @@ -179,7 +180,7 @@ export default { axisLine: { show: true, lineStyle: { - color: "#fff" + color: optionsCollapse.lineColorY } } }; @@ -187,7 +188,7 @@ export default { this.options.yAxis = yAxis; }, // 数值设定 or 柱体设置 - setOptionsTop() { + setOptionsTop () { const optionsCollapse = this.optionsSetup; const series = this.options.series; @@ -208,7 +209,7 @@ export default { this.options.series = series; }, // tooltip 设置 - setOptionsTooltip() { + setOptionsTooltip () { const optionsCollapse = this.optionsSetup; const tooltip = { trigger: "item", @@ -221,7 +222,7 @@ export default { this.options.tooltip = tooltip; }, // 边距设置 - setOptionsMargin() { + setOptionsMargin () { const optionsCollapse = this.optionsSetup; const grid = { left: optionsCollapse.marginLeft, @@ -233,7 +234,7 @@ export default { this.options.grid = grid; }, // 图例操作 legend - setOptionsLegend() { + setOptionsLegend () { const optionsCollapse = this.optionsSetup; const legend = this.options.legend; legend.show = optionsCollapse.isShowLegend; @@ -250,7 +251,7 @@ export default { legend.itemWidth = optionsCollapse.lengedWidth; }, // 图例颜色修改 - setOptionsColor() { + setOptionsColor () { const optionsCollapse = this.optionsSetup; const customColor = optionsCollapse.customColor; if (!customColor) return; @@ -274,7 +275,7 @@ export default { this.options = Object.assign({}, this.options); }, // 数据解析 - setOptionsData() { + setOptionsData () { const optionsSetup = this.optionsSetup; console.log(optionsSetup); const optionsData = this.optionsData; // 数据类型 静态 or 动态 @@ -284,7 +285,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsSetup); }, // 静态数据 - staticDataFn(val, optionsSetup) { + staticDataFn (val, optionsSetup) { const staticData = JSON.parse(val); // x轴 if (optionsSetup.verticalShow) { @@ -307,7 +308,7 @@ export default { } }, // 动态数据 - dynamicDataFn(val, optionsSetup) { + dynamicDataFn (val, optionsSetup) { if (!val) return; // x轴 if (optionsSetup.verticalShow) { 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 489ac4e8..7e5cd55a 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue @@ -1,6 +1,7 @@ @@ -12,7 +13,7 @@ export default { value: Object, ispreview: Boolean, }, - data() { + data () { return { options: { color: [], @@ -98,7 +99,7 @@ export default { } }, computed: { - styleObj() { + styleObj () { return { position: this.ispreview ? 'absolute' : 'static', width: this.optionsStyle.width + 'px', @@ -111,7 +112,7 @@ export default { }, watch: { value: { - handler(val) { + handler (val) { this.optionsStyle = val.position this.optionsData = val.data this.optionsCollapse = val.collapse @@ -121,7 +122,7 @@ export default { deep: true, }, }, - created() { + created () { this.optionsStyle = this.value.position this.optionsData = this.value.data this.optionsCollapse = this.value.collapse @@ -130,7 +131,7 @@ export default { }, methods: { // 修改图标options属性 - editorOptions() { + editorOptions () { this.setOptionsTitle() this.setOptionsX() this.setOptionsY() @@ -143,7 +144,7 @@ export default { this.setOptionsColor() }, // 标题修改 - setOptionsTitle() { + setOptionsTitle () { const optionsCollapse = this.optionsSetup const title = {} title.text = optionsCollapse.titleText @@ -164,7 +165,7 @@ export default { this.options.title = title }, // X轴设置 - setOptionsX() { + setOptionsX () { const optionsCollapse = this.optionsSetup const xAxis = { type: 'category', @@ -188,14 +189,14 @@ export default { axisLine: { show: true, lineStyle: { - color: '#fff', + color: optionsCollapse.lineColorX, }, }, } this.options.xAxis = xAxis }, // Y轴设置 - setOptionsY() { + setOptionsY () { const optionsCollapse = this.optionsSetup const yAxis = [ { @@ -246,7 +247,7 @@ export default { axisLine: { show: true, lineStyle: { - color: '#fff', + color: optionsCollapse.lineColorY, }, }, }, @@ -255,7 +256,7 @@ export default { this.options.yAxis = yAxis }, // 折线设置 - setOptionsTop() { + setOptionsTop () { const optionsCollapse = this.optionsSetup const series = this.options.series for (const key in series) { @@ -288,7 +289,7 @@ export default { } this.options.series = series }, - setOptionsBar() { + setOptionsBar () { const optionsCollapse = this.optionsSetup const series = this.options.series for (const key in series) { @@ -309,7 +310,7 @@ export default { this.options.series = series }, // tooltip 设置 - setOptionsTooltip() { + setOptionsTooltip () { const optionsCollapse = this.optionsSetup const tooltip = { trigger: 'item', @@ -322,7 +323,7 @@ export default { this.options.tooltip = tooltip }, // 边距设置 - setOptionsMargin() { + setOptionsMargin () { const optionsCollapse = this.optionsSetup const grid = { left: optionsCollapse.marginLeft, @@ -334,7 +335,7 @@ export default { this.options.grid = grid }, // 图例操作 legend - setOptionsLegend() { + setOptionsLegend () { const optionsCollapse = this.optionsSetup const legend = this.options.legend legend.show = optionsCollapse.isShowLegend @@ -350,7 +351,7 @@ export default { legend.itemWidth = optionsCollapse.lengedWidth }, // 图例颜色修改 - setOptionsColor() { + setOptionsColor () { const optionsCollapse = this.optionsSetup const customColor = optionsCollapse.customColor if (!customColor) return @@ -362,11 +363,11 @@ export default { this.options = Object.assign({}, this.options) }, // 数据处理 - setOptionsData() { + setOptionsData () { const optionsData = this.optionsData // 数据类型 静态 or 动态 optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) }, - staticDataFn(val) { + staticDataFn (val) { const staticData = JSON.parse(val) // x轴 this.options.xAxis.data = staticData.xAxis @@ -380,7 +381,7 @@ export default { } } }, - dynamicDataFn(val) { + dynamicDataFn (val) { if (!val) return // x轴 this.options.xAxis.data = val.xAxis 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 ee58a63e..65cfeb01 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue @@ -1,6 +1,7 @@ @@ -12,7 +13,7 @@ export default { value: Object, ispreview: Boolean, }, - data() { + data () { return { options: { grid: {}, @@ -65,7 +66,7 @@ export default { } }, computed: { - styleObj() { + styleObj () { return { position: this.ispreview ? 'absolute' : 'static', width: this.optionsStyle.width + 'px', @@ -78,7 +79,7 @@ export default { }, watch: { value: { - handler(val) { + handler (val) { this.optionsStyle = val.position this.optionsData = val.data this.optionsCollapse = val.collapse @@ -88,7 +89,7 @@ export default { deep: true, }, }, - created() { + created () { this.optionsStyle = this.value.position this.optionsData = this.value.data this.optionsCollapse = this.value.collapse @@ -97,7 +98,7 @@ export default { }, methods: { // 修改图标options属性 - editorOptions() { + editorOptions () { this.setOptionsTitle() this.setOptionsX() this.setOptionsY() @@ -109,7 +110,7 @@ export default { this.setOptionsColor() }, // 标题修改 - setOptionsTitle() { + setOptionsTitle () { const optionsCollapse = this.optionsSetup const title = {} title.text = optionsCollapse.titleText @@ -130,7 +131,7 @@ export default { this.options.title = title }, // X轴设置 - setOptionsX() { + setOptionsX () { const optionsCollapse = this.optionsSetup const xAxis = { type: 'category', @@ -154,14 +155,14 @@ export default { axisLine: { show: true, lineStyle: { - color: '#fff', + color: optionsCollapse.lineColorX, }, }, } this.options.xAxis = xAxis }, // Y轴设置 - setOptionsY() { + setOptionsY () { const optionsCollapse = this.optionsSetup const yAxis = { type: 'value', @@ -185,7 +186,7 @@ export default { axisLine: { show: true, lineStyle: { - color: '#fff', + color: optionsCollapse.lineColorY, }, }, } @@ -193,7 +194,7 @@ export default { this.options.yAxis = yAxis }, // 折线设置 - setOptionsTop() { + setOptionsTop () { const optionsCollapse = this.optionsSetup const series = this.options.series for (const key in series) { @@ -227,7 +228,7 @@ export default { this.options.series = series }, // tooltip 设置 - setOptionsTooltip() { + setOptionsTooltip () { const optionsCollapse = this.optionsSetup const tooltip = { trigger: 'item', @@ -240,7 +241,7 @@ export default { this.options.tooltip = tooltip }, // 边距设置 - setOptionsMargin() { + setOptionsMargin () { const optionsCollapse = this.optionsSetup const grid = { left: optionsCollapse.marginLeft, @@ -252,7 +253,7 @@ export default { this.options.grid = grid }, // 图例操作 legend - setOptionsLegend() { + setOptionsLegend () { const optionsCollapse = this.optionsSetup const legend = this.options.legend legend.show = optionsCollapse.isShowLegend @@ -269,7 +270,7 @@ export default { console.log(legend) }, // 图例颜色修改 - setOptionsColor() { + setOptionsColor () { const optionsCollapse = this.optionsSetup const customColor = optionsCollapse.customColor if (!customColor) return @@ -281,11 +282,11 @@ export default { this.options = Object.assign({}, this.options) }, // 处理数据 - setOptionsData() { + setOptionsData () { const optionsData = this.optionsData // 数据类型 静态 or 动态 optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) }, - staticDataFn(val) { + staticDataFn (val) { const staticData = JSON.parse(val) // x轴 this.options.xAxis.data = staticData.categories @@ -297,7 +298,7 @@ export default { } } }, - dynamicDataFn(val) { + dynamicDataFn (val) { if (!val) return // x轴 this.options.xAxis.data = val.xAxis