热力图静态数据解析变更

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},
         ]
       },
       {

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;