fix

ruoyi-ui/src/views/components/table/homeTable.vue

@@ -35,7 +35,7 @@
         <div style="float:right;font-size:9rem;margin-top:1rem">{{ deviceTotal }}个</div>
       </div>
       <div style="padding-left:5rem;padding-top:1rem">
-        <div style="color:white" @click="dialogVisible = true">
+        <div style="color:white" @click="showdevicests">
           <div style="float:left"><img src="@/assets/picture/location.png" style="margin-left:5rem"/></div>
           <div style="float:left;background-image: linear-gradient(transparent 90%,white);font-size:6rem;margin-top:14rem">安装位置</div>
         </div>
@@ -219,6 +219,7 @@ export default {
         // {"name": "五号船", "locations": [[118.639711, 31.96602]], 'type': 2,"head":270},
         // {"name": "五号船", "locations": [[118.639711, 31.96602]], 'type': 2,"head":360},
       ],
+      devicenums:{},
       startMonth: {
         disabledDate: time => {
           if (this.shipDate.endMonth) {
@@ -283,6 +284,13 @@ export default {
     //  this.getChart();
   },
   methods: {
+    showdevicests(){
+      this.dialogVisible = true;
+      setTimeout(() => {
+        this.getChart([],this.devicenums);
+      }, 100);
+
+    },
     clickship(shipdata) {
 
       if (shipdata != null && shipdata != undefined) {
@@ -373,6 +381,31 @@ export default {
             this.$refs.mapv.addpoint(locationArry, obj, icons, 'device');
           }
         }
+
+        let devicesdata = {};
+        for(var i in data.data){
+          //设备列表
+          var t = {};
+          var objs = data.data[i];
+          for(var p in objs){
+            var dd = objs[p];
+            if(t[dd.deviceType]==undefined||t[dd.deviceType]==null){
+              t[dd.deviceType]=1;
+            }else{
+              t[dd.deviceType]+=1;
+            }
+          }
+          devicesdata[i]=t;
+        }
+
+        // debugger
+        this.devicenums = devicesdata;
+
+      // setTimeout(() => {
+      //   //  执行echarts画图方法
+      //   this.getChart([], devicesdata);
+      // }, 1000*4);
+
         //  console.log(deviceList);
       });
     },
@@ -594,13 +627,15 @@ export default {
       getStaticDevice().then(response => {
         let nameArry = [];
         let dataArry = [];
+        // debugger
         this.deviceTotal = 0;
         for (var key in response.data) {
           this.deviceTotal += response.data[key]
           nameArry.push(key);
           dataArry.push(response.data[key]);
         }
-        this.getChart(nameArry, dataArry);
+        // console.log(dataArry)
+        // this.getChart(nameArry, dataArry);
       });
     },
     getIllegalShipStatic() {
@@ -725,24 +760,241 @@ export default {
       myChart.setOption(option);
     },
     getChart(nameArry, dataArry) {
+
+      var orgData = dataArry;
+      var that= this;
+
       var myChart = this.$echarts.init(document.getElementById('equipmentChart'));
+      // var option = {
+      //   tooltip: {
+      //     trigger: 'axis',
+      //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+      //       type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+      //     }
+      //   },
+      //   grid: {
+      //     left: '3%',
+      //     right: '4%',
+      //     bottom: '3%',
+      //     containLabel: true
+      //   },
+      //   xAxis: [
+      //     {
+      //       type: 'category',
+      //       data: nameArry,
+      //       axisTick: {
+      //         alignWithLabel: true
+      //       },
+      //       axisLine: {
+      //         lineStyle: {
+      //           color: 'white'
+      //         }
+      //       },
+      //       axisLabel: {
+      //         interval: 0,
+      //         show: true,
+      //         textStyle: {
+      //           color: 'white' //x轴data 的颜色
+      //         }
+      //       },
+
+      //     },
+      //   ],
+      //   yAxis: [
+      //     {
+      //       type: 'value',
+      //       splitLine: {
+      //         show: true,
+      //         lineStyle: {
+      //           color: ['#435886'],
+      //           width: 1,
+      //           type: 'solid'
+      //         }
+      //       },
+      //       axisLine: {
+      //         lineStyle: {
+      //           color: '#435886'
+      //         }
+      //       },
+      //       axisLabel: {
+      //         interval: 0,
+      //         show: true,
+      //         textStyle: {
+      //           color: 'white' //x轴data 的颜色
+      //         }
+      //       },
+      //     }
+      //   ],
+      //   series: [
+
+      //     {
+      //       name: '光谱',
+      //       type: 'bar',
+      //       barWidth: '10%',
+      //       data: dataArry,
+      //       itemStyle: {
+      //         normal: {
+      //           label: {
+      //             show: true, //开启显示
+      //             position: 'top', //在上方显示
+      //             textStyle: { //数值样式
+      //               color: 'white',
+      //               fontSize: 10
+      //             }
+      //           },
+      //           color: new this.$echarts.graphic.LinearGradient(
+      //             0, 0, 0, 1,
+      //             [
+      //               {offset: 1, color: '#cb7f14'},                   //柱图渐变色
+      //               {offset: 0, color: '#ffd834'},                   //柱图渐变色
+      //             ]
+      //           )
+      //         },
+      //       }
+      //     },
+      //     {
+      //       name: '嗅探',
+      //       type: 'bar',
+      //       barWidth: '10%',
+      //       data: dataArry,
+      //       itemStyle: {
+      //         normal: {
+      //           label: {
+      //             show: true, //开启显示
+      //             position: 'top', //在上方显示
+      //             textStyle: { //数值样式
+      //               color: 'white',
+      //               fontSize: 10
+      //             }
+      //           },
+      //           color: new this.$echarts.graphic.LinearGradient(
+      //             0, 0, 0, 1,
+      //             [
+      //               {offset: 1, color: '#c62029'},                   //柱图渐变色
+      //               {offset: 0, color: '#f66f48'},                   //柱图渐变色
+      //             ]
+      //           )
+      //         },
+      //       }
+      //     },
+      //     {
+      //       name: '黑烟',
+      //       type: 'bar',
+      //       barWidth: '10%',
+      //       data: dataArry,
+      //       itemStyle: {
+      //         normal: {
+      //           label: {
+      //             show: true, //开启显示
+      //             position: 'top', //在上方显示
+      //             textStyle: { //数值样式
+      //               color: 'white',
+      //               fontSize: 10
+      //             }
+      //           },
+      //           color: new this.$echarts.graphic.LinearGradient(
+      //             0, 0, 0, 1,
+      //             [
+      //               {offset: 1, color: '#2275E4'},                   //柱图渐变色
+      //               {offset: 0, color: '#56CCF2'},                   //柱图渐变色
+      //             ]
+      //           )
+      //         },
+      //       }
+      //     }
+      //   ]
+      // };
+      // myChart.setOption(option);
+
+
+
+
+      var xAxisData = []; //x轴坐标的集合
+      // var dataData = [];
+
+      var orgList = [];
+      var orgCount = {};
+      for (var org in orgData) {
+        xAxisData.push(org);
+
+        var odata = orgData[org];
+        var num = 0;
+        for (var ks in odata) {
+          num++;
+          //如果不存在ks，把ks放到orgList数组里边
+          if (orgList.indexOf(ks) == -1) {
+            orgList.push(ks);
+          }
+        }
+
+        orgCount[org] = num; //记录各平台下有几个页面：{北京: 4, 天津: 3, 吉林: 2, 辽宁: 2, 上海: 2}
+      }
+      var dataMap = {};
+      var count = 0;
+      for (var org in orgData) {
+        var odata = orgData[org];
+        var preOrg = undefined;
+        var preCount = 0;
+        for (var ks in odata) {
+          if (dataMap[ks] == undefined) {
+            dataMap[ks] = [];
+          }
+          //ks是具体的哪个页面
+          preCount += checkEmpty(orgList, preOrg, ks);
+
+          dataMap[ks].push([
+            count,
+            count + 1,
+            odata[ks],
+            ks,
+            preCount,
+            orgCount[org],
+          ]);
+
+          preOrg = ks;
+        }
+        count++;
+      }
+      var series = [];
+      for (var d in orgList) {
+        var ks = orgList[d];
+
+        var ds = dataMap[ks];
+        series.push({
+          data: ds,
+          type: "custom",
+          itemStyle: {
+            normal: {
+              label: {
+                show: true, //开启显示
+                position: 'top', //在上方显示
+                textStyle: { //数值样式
+                  color: 'white',
+                  fontSize: 10
+                }
+              }
+            }
+          },
+          renderItem: renderItem,
+          encode: {
+            x: [0, 1],
+            y: 2,
+            tooltip: [3, 2],
+            itemName: 3,
+          },
+        });
+      }
       var option = {
         tooltip: {
-          trigger: 'axis',
-          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
         },
-        xAxis: [
+        xAxis:
           {
             type: 'category',
-            data: nameArry,
+            data: xAxisData,
             axisTick: {
               alignWithLabel: true
             },
@@ -760,62 +1012,124 @@ export default {
             },
 
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: ['#435886'],
-                width: 1,
-                type: 'solid'
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#435886'
-              }
-            },
-            axisLabel: {
-              interval: 0,
-              show: true,
-              textStyle: {
-                color: 'white' //x轴data 的颜色
-              }
-            },
-          }
-        ],
-        series: [
-          {
-            name: '数量',
-            type: 'bar',
-            barWidth: '30%',
-            data: dataArry,
-            itemStyle: {
-              normal: {
-                label: {
-                  show: true, //开启显示
-                  position: 'top', //在上方显示
-                  textStyle: { //数值样式
-                    color: 'white',
-                    fontSize: 10
-                  }
-                },
-                color: new this.$echarts.graphic.LinearGradient(
-                  0, 0, 0, 1,
-                  [
-                    {offset: 1, color: '#2275E4'},                   //柱图渐变色
-                    {offset: 0, color: '#56CCF2'},                   //柱图渐变色
-                  ]
-                )
-              },
-
+          // type: "category",
+          // data: xAxisData,
+        // },
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ['#435886'],
+              width: 1,
+              type: 'solid'
             }
-          }
-        ]
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#435886'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            show: true,
+            textStyle: {
+              color: 'white' //x轴data 的颜色
+            }
+          },
+        }],
+        series: series,
       };
+
+      // var myChart = echarts.init(document.getElementById("c"));
       myChart.setOption(option);
+
+      function checkEmpty(orgList, preOrg, curOrg) {
+        if (preOrg == undefined) {
+          return orgList.indexOf(curOrg);
+        } else {
+          return orgList.indexOf(curOrg) - orgList.indexOf(preOrg) - 1;
+        }
+      }
+      /**
+       *自定义渐变颜色
+       */
+      function newcolor(params) {
+        var colorList = [
+          ["#008AFC", "#0862B1"],
+          ["#FF4E2C", "#EF4F37"],
+          ["#FFB900", "#8C7325"],
+          ["#008AFC", "#0862B1"],
+          ["#FF4E2C", "#EF4F37"],
+          ["#FFB900", "#8C7325"],
+          ["#008AFC", "#0862B1"],
+          ["#008AFC", "#0862B1"],
+          ["#FF4E2C", "#EF4F37"],
+          ["#FFB900", "#8C7325"],
+          ["#11998E", "#64D990"],
+          ["rgb(129, 227, 238)", "rgb(25, 183, 207)"],
+        ];
+        var index = params.seriesIndex;
+        if (params.seriesIndex >= colorList.length) {
+          index = params.seriesIndex - colorList.length;
+        }
+        return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: colorList[index][0],
+          },
+          {
+            offset: 1,
+            color: colorList[index][1],
+          },
+          // {
+          //   offset: 1,
+          //   color: colorList[index][2],
+          // },
+        ]);
+        return _fill;
+      }
+
+      function renderItem(params, api) {
+        let newFill = newcolor(params);
+        var yValue = api.value(2); //当前页面的累加时长
+        var start = api.coord([api.value(0), yValue]);
+        var size = api.size([api.value(1) - api.value(0), yValue]);
+        var style = api.style({
+          // fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+          //   {
+          //     offset: 0,
+          //     color: "#f89741",
+          //   },
+          //   {
+          //     offset: 1,
+          //     color: "#fa6206",
+          //   },
+          // ]),
+          fill: newFill,
+        });
+
+        var barWidth = 10;
+        var emptyCount = api.value(4); //当前类别所属的区域
+        var d = 0;
+        if (emptyCount > 0) {
+          d = -barWidth * emptyCount;
+        }
+
+        var barNum = api.value(5);
+        var p = [(-barNum * barWidth) / 2, 0];
+        return {
+          type: "rect",
+          position: p,
+          shape: {
+            x: start[0] + params.seriesIndex * barWidth + d,
+            y: start[1],
+            width: barWidth,
+            height: size[1],
+          },
+          style: style,
+        };
+      }
     },
     getTypeData() {
       getDeviceType().then(response => {