From 421d01b5967ff18a9a194f7fe82d97eb13afd98d Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 20 Apr 2022 18:26:29 +0800 Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E5=8A=9B=E5=9B=BE=E9=9D=99=E6=80=81?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=A7=A3=E6=9E=90=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tools/configure/widget-heatmap.js | 275 ++++++++++-------- .../designer/widget/heatmap/widgetHeatmap.vue | 34 ++- 2 files changed, 190 insertions(+), 119 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js index bbe503eb..7512ab54 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js @@ -65,10 +65,10 @@ export const widgetHeatmap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -87,9 +87,9 @@ export const widgetHeatmap = { required: false, placeholder: '', selectOptions: [ - { code: 'center', name: '居中' }, - { code: 'left', name: '左对齐' }, - { code: 'right', name: '右对齐' }, + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, ], value: 'center' }, @@ -116,10 +116,10 @@ export const widgetHeatmap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -296,7 +296,7 @@ export const widgetHeatmap = { ], }, { - name: '图例操作', + name: '图设置', list: [ { type: 'el-switch', @@ -324,7 +324,7 @@ export const widgetHeatmap = { }, { type: 'vue-color', - label: '字体颜色', + label: '数值颜色', name: 'lengedColor', required: false, placeholder: '', @@ -332,12 +332,57 @@ export const widgetHeatmap = { }, { type: 'el-input-number', - label: '字体大小', + label: '图例大小', name: 'lengedFontSize', required: false, placeholder: '', value: 12, }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + required: false, + placeholder: '', + value: 12, + }, + { + 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' + }, ], }, { @@ -445,7 +490,7 @@ export const widgetHeatmap = { label: '', name: 'lengedColorList', required: false, - value: [{ color: '#abd9e9' }, { color: '#74add1' }, { color: '#4575b4' }, { color: '#313695' }], + value: [{color: '#abd9e9'}, {color: '#74add1'}, {color: '#4575b4'}, {color: '#313695'}], }, ], }, @@ -489,106 +534,106 @@ export const widgetHeatmap = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - [0, 0, 3320], - [0, 1, 1561], - [0, 2, 3194], - [0, 3, 2899], - [0, 4, 2363], - [0, 5, 3945], - [0, 6, 2051], - [0, 7, 3657], - [0, 8, 3304], - [0, 9, 2990], - [1, 9, 2663], - [1, 0, 378], - [1, 1, 4076], - [1, 2, 3178], - [1, 3, 1501], - [1, 4, 1660], - [1, 5, 726], - [1, 6, 4148], - [1, 7, 720], - [1, 8, 430], - [2, 9, 2983], - [2, 0, 1917], - [2, 1, 1188], - [2, 2, 3581], - [2, 3, 1781], - [2, 4, 4725], - [2, 5, 4077], - [2, 6, 299], - [2, 7, 4828], - [2, 8, 1778], - [3, 9, 3171], - [3, 0, 2944], - [3, 1, 763], - [3, 2, 1678], - [3, 3, 1765], - [3, 4, 2949], - [3, 5, 966], - [3, 6, 4622], - [3, 7, 2818], - [3, 8, 3913], - [4, 9, 4382], - [4, 0, 1670], - [4, 1, 4532], - [4, 2, 2116], - [4, 3, 2383], - [4, 4, 510], - [4, 5, 33], - [4, 6, 4974], - [4, 7, 3627], - [4, 8, 2737], - [5, 9, 656], - [5, 0, 3689], - [5, 1, 713], - [5, 2, 3551], - [5, 3, 3159], - [5, 4, 4150], - [5, 5, 1416], - [5, 6, 3021], - [5, 7, 1778], - [5, 8, 863], - [6, 9, 772], - [6, 0, 1675], - [6, 1, 1323], - [6, 2, 2023], - [6, 3, 43], - [6, 4, 4964], - [6, 5, 4781], - [6, 6, 2608], - [6, 7, 2278], - [6, 8, 3285], - [7, 9, 1977], - [7, 0, 882], - [7, 1, 2434], - [7, 2, 4694], - [7, 3, 3022], - [7, 4, 1798], - [7, 5, 2503], - [7, 6, 693], - [7, 7, 275], - [7, 8, 3774], - [8, 9, 1386], - [8, 0, 1212], - [8, 1, 1982], - [8, 2, 1509], - [8, 3, 94], - [8, 4, 2082], - [8, 5, 3930], - [8, 6, 4528], - [8, 7, 1861], - [8, 8, 4582], - [9, 9, 3038], - [9, 0, 4038], - [9, 1, 357], - [9, 2, 306], - [9, 3, 479], - [9, 4, 823], - [9, 5, 3442], - [9, 6, 904], - [9, 7, 399], - [9, 8, 4869] + {"axis": "0", "yaxis": "0", "num": 3320}, + {"axis": "0", "yaxis": "1", "num": 1561}, + {"axis": "0", "yaxis": "2", "num": 3194}, + {"axis": "0", "yaxis": "3", "num": 2899}, + {"axis": "0", "yaxis": "4", "num": 2363}, + {"axis": "0", "yaxis": "5", "num": 3945}, + {"axis": "0", "yaxis": "6", "num": 2051}, + {"axis": "0", "yaxis": "7", "num": 3657}, + {"axis": "0", "yaxis": "8", "num": 3304}, + {"axis": "0", "yaxis": "9", "num": 2990}, + {"axis": "1", "yaxis": "9", "num": 2663}, + {"axis": "1", "yaxis": "0", "num": 378}, + {"axis": "1", "yaxis": "1", "num": 4076}, + {"axis": "1", "yaxis": "2", "num": 3178}, + {"axis": "1", "yaxis": "3", "num": 1501}, + {"axis": "1", "yaxis": "4", "num": 1660}, + {"axis": "1", "yaxis": "5", "num": 726}, + {"axis": "1", "yaxis": "6", "num": 4148}, + {"axis": "1", "yaxis": "7", "num": 720}, + {"axis": "1", "yaxis": "8", "num": 430}, + {"axis": "2", "yaxis": "9", "num": 2983}, + {"axis": "2", "yaxis": "0", "num": 1917}, + {"axis": "2", "yaxis": "1", "num": 1188}, + {"axis": "2", "yaxis": "2", "num": 3581}, + {"axis": "2", "yaxis": "3", "num": 1781}, + {"axis": "2", "yaxis": "4", "num": 4725}, + {"axis": "2", "yaxis": "5", "num": 4077}, + {"axis": "2", "yaxis": "6", "num": 299}, + {"axis": "2", "yaxis": "7", "num": 4828}, + {"axis": "2", "yaxis": "8", "num": 1778}, + {"axis": "3", "yaxis": "9", "num": 3171}, + {"axis": "3", "yaxis": "0", "num": 2944}, + {"axis": "3", "yaxis": "1", "num": 763}, + {"axis": "3", "yaxis": "2", "num": 1678}, + {"axis": "3", "yaxis": "3", "num": 1765}, + {"axis": "3", "yaxis": "4", "num": 2949}, + {"axis": "3", "yaxis": "5", "num": 966}, + {"axis": "3", "yaxis": "6", "num": 4622}, + {"axis": "3", "yaxis": "7", "num": 2818}, + {"axis": "3", "yaxis": "8", "num": 3913}, + {"axis": "4", "yaxis": "9", "num": 4382}, + {"axis": "4", "yaxis": "0", "num": 1670}, + {"axis": "4", "yaxis": "1", "num": 4532}, + {"axis": "4", "yaxis": "2", "num": 2116}, + {"axis": "4", "yaxis": "3", "num": 2383}, + {"axis": "4", "yaxis": "4", "num": 510}, + {"axis": "4", "yaxis": "5", "num": 33}, + {"axis": "4", "yaxis": "6", "num": 4974}, + {"axis": "4", "yaxis": "7", "num": 3627}, + {"axis": "4", "yaxis": "8", "num": 2737}, + {"axis": "5", "yaxis": "9", "num": 656}, + {"axis": "5", "yaxis": "0", "num": 3689}, + {"axis": "5", "yaxis": "1", "num": 713}, + {"axis": "5", "yaxis": "2", "num": 3551}, + {"axis": "5", "yaxis": "3", "num": 3159}, + {"axis": "5", "yaxis": "4", "num": 4150}, + {"axis": "5", "yaxis": "5", "num": 1416}, + {"axis": "5", "yaxis": "6", "num": 3021}, + {"axis": "5", "yaxis": "7", "num": 1778}, + {"axis": "5", "yaxis": "8", "num": 863}, + {"axis": "6", "yaxis": "9", "num": 772}, + {"axis": "6", "yaxis": "0", "num": 1675}, + {"axis": "6", "yaxis": "1", "num": 1323}, + {"axis": "6", "yaxis": "2", "num": 2023}, + {"axis": "6", "yaxis": "3", "num": 43}, + {"axis": "6", "yaxis": "4", "num": 4964}, + {"axis": "6", "yaxis": "5", "num": 4781}, + {"axis": "6", "yaxis": "6", "num": 2608}, + {"axis": "6", "yaxis": "7", "num": 2278}, + {"axis": "6", "yaxis": "8", "num": 3285}, + {"axis": "7", "yaxis": "9", "num": 1977}, + {"axis": "7", "yaxis": "0", "num": 882}, + {"axis": "7", "yaxis": "1", "num": 2434}, + {"axis": "7", "yaxis": "2", "num": 4694}, + {"axis": "7", "yaxis": "3", "num": 3022}, + {"axis": "7", "yaxis": "4", "num": 1798}, + {"axis": "7", "yaxis": "5", "num": 2503}, + {"axis": "7", "yaxis": "6", "num": 693}, + {"axis": "7", "yaxis": "7", "num": 275}, + {"axis": "7", "yaxis": "8", "num": 3774}, + {"axis": "8", "yaxis": "9", "num": 1386}, + {"axis": "8", "yaxis": "0", "num": 1212}, + {"axis": "8", "yaxis": "1", "num": 1982}, + {"axis": "8", "yaxis": "2", "num": 1509}, + {"axis": "8", "yaxis": "3", "num": 94}, + {"axis": "8", "yaxis": "4", "num": 2082}, + {"axis": "8", "yaxis": "5", "num": 3930}, + {"axis": "8", "yaxis": "6", "num": 4528}, + {"axis": "8", "yaxis": "7", "num": 1861}, + {"axis": "8", "yaxis": "8", "num": 4582}, + {"axis": "9", "yaxis": "9", "num": 3038}, + {"axis": "9", "yaxis": "0", "num": 4038}, + {"axis": "9", "yaxis": "1", "num": 357}, + {"axis": "9", "yaxis": "2", "num": 306}, + {"axis": "9", "yaxis": "3", "num": 479}, + {"axis": "9", "yaxis": "4", "num": 823}, + {"axis": "9", "yaxis": "5", "num": 3442}, + {"axis": "9", "yaxis": "6", "num": 904}, + {"axis": "9", "yaxis": "7", "num": 399}, + {"axis": "9", "yaxis": "8", "num": 4869}, ] }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue index e6d4fd22..81f02056 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue @@ -290,11 +290,18 @@ export default { visualMap.show = optionsSetup.isShowLegend; visualMap.min = optionsSetup.dataMin; visualMap.max = optionsSetup.dataMax; - visualMap.textStyle.fontSize = optionsSetup.lengedFontSize; - visualMap.textStyle.color = optionsSetup.lengedColor; + visualMap.textStyle = { + fontSize : optionsSetup.lengedFontSize, + color : optionsSetup.lengedColor + }; visualMap.inRange.color = optionsSetup.lengedColorList.map((x) => { return x.color; }); + visualMap.left = optionsSetup.lateralPosition; + visualMap.top = optionsSetup.longitudinalPosition; + visualMap.bottom = optionsSetup.longitudinalPosition; + visualMap.orient = optionsSetup.layoutFront; + visualMap.itemWidth = optionsSetup.lengedWidth; }, setOptionsData() { const optionsData = this.optionsData; // 数据类型 静态 or 动态 @@ -302,9 +309,28 @@ export default { ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, + //去重 + setUnique(arr) { + let newArr = []; + arr.forEach(item => { + return newArr.includes(item) ? '' : newArr.push(item); + }); + return newArr; + }, staticDataFn(val) { - const staticData = typeof val == "string" ? JSON.parse(val) : val; - this.renderingFn(staticData); + const data = []; + let xAxisList = []; + let yAxisList = []; + for (const i in val) { + xAxisList[i] = val[i].axis; + yAxisList[i] = val[i].yaxis; + data[i] = [val[i].axis,val[i].yaxis,val[i].num] + } + xAxisList = this.setUnique(xAxisList); + yAxisList = this.setUnique(yAxisList); + this.options.xAxis.data = xAxisList; + this.options.yAxis.data = yAxisList; + this.options.series[0].data = data; }, dynamicDataFn(val, refreshTime) { if (!val) return;