大屏

ruoyi-ui/src/views/bigScreen/resources/index.vue

@@ -206,7 +206,8 @@ export default {
       mapxzqh:'',
       polygons:[],
       tiptext:'中国',
-      tipMarker:{}
+      tipMarker:{},
+      pointSimplifierIns:{}
     }
   },
 
@@ -270,11 +271,11 @@ export default {
       const retdata = await getSqxq({code:this.locationcurrCode})
       if (retdata.code === 200) {
         this.currsqData=retdata.data;
-        this.heatmapData=[];
+        //this.heatmapData=[];
         this.currsqData.forEach((item) => {
           let coluts = Math.floor(Math.random() * 101) + 1;
           coluts=parseInt(item.sixtym)+parseInt(item.sixtyw);
-          this.heatmapData.push({"lng": item.lng, "lat": item.lat, "count": coluts})
+         // this.heatmapData.push({"lng": item.lng, "lat": item.lat, "count": coluts})
         })
       }
     },
@@ -312,11 +313,19 @@ export default {
       if (this.heatmap.hide)
         this.heatmap.hide();
 
+      this.pointSimplifierIns.setData([]);
+
     },
     getMarkerList() {
+      this.heatmapData=[];
       getOrgMarkers().then(({ code, data }) => {
         if (code !== 200) return
         this.querydata=data;
+        this.querydata.forEach((item) => {
+          if (item.lng) {
+            this.heatmapData.push({"lng": item.lng, "lat": item.lat})
+          }
+        })
         this.initAMap(this.querydata)
       })
     },
@@ -324,6 +333,7 @@ export default {
     getMarkerByFl(fl) {
       this.getheatdata(fl);
       this.clearMap();
+      this.heatmapData=[];
       switch (fl) {
         case 0 :
           var xhr = new XMLHttpRequest();
@@ -332,6 +342,14 @@ export default {
           xhr.onreadystatechange = function() {
             if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
               this.querydata=JSON.parse(xhr.responseText).data;
+              this.querydata.forEach((item) => {
+                if (item.photoAndLocation && item.photoAndLocation.split("/").length==3) {
+                  this.heatmapData.push({"lng": item.photoAndLocation.split("/")[0], "lat": item.photoAndLocation.split("/")[1]})
+                }
+
+              })
+
+
               if (this.deptcurrlevel<this.deptmaxlevel)
                 this.setClusterMarker(this.querydata,fl);
               else
@@ -360,6 +378,11 @@ export default {
           getServiceMarkers(this.PTParams).then(({ code, data }) => {
             if (code !== 200) return
             this.querydata=data;
+            this.querydata.forEach((item) => {
+              if (item.lng) {
+                this.heatmapData.push({"lng": item.lng, "lat": item.lat})
+              }
+            })
             if (this.deptcurrlevel<this.deptmaxlevel)
               this.setClusterMarker(this.querydata,fl);
             else
@@ -383,6 +406,11 @@ export default {
           getMonitorMarkers(this.PTParams).then(({ code, data }) => {
             if (code !== 200) return
             this.querydata=data;
+            this.querydata.forEach((item) => {
+              if (item.lng) {
+                this.heatmapData.push({"lng": item.lng, "lat": item.lat})
+              }
+            })
             if (this.deptcurrlevel<this.deptmaxlevel)
               this.setClusterMarker(this.querydata,fl);
             else
@@ -406,6 +434,11 @@ export default {
           getSmartMarkers(this.PTParams).then(({ code, data }) => {
             if (code !== 200) return
             this.querydata=data;
+            this.querydata.forEach((item) => {
+              if (item.lng) {
+                this.heatmapData.push({"lng": item.lng, "lat": item.lat})
+              }
+            })
             if (this.deptcurrlevel<this.deptmaxlevel)
               this.setClusterMarker(this.querydata,fl);
             else
@@ -429,6 +462,11 @@ export default {
           getOrgMarkers(this.PTParams).then(({ code, data }) => {
             if (code !== 200) return
             this.querydata=data;
+            this.querydata.forEach((item) => {
+              if (item.lng) {
+                this.heatmapData.push({"lng": item.lng, "lat": item.lat})
+              }
+            })
             if (this.deptcurrlevel<this.deptmaxlevel)
               this.setClusterMarker(this.querydata,fl);
             else
@@ -450,7 +488,15 @@ export default {
           break
       }
     },
+
     setheat()
+    {
+      if (this.pattern==1) {
+        this.map.setPitch(0,true,100);
+        this.pointSimplifierIns.setData(this.heatmapData);
+      }
+    },
+    setheat1()
     {
 
       if (this.pattern==1) {
@@ -617,6 +663,19 @@ export default {
         });
       } else {//默认样式
         this.cluster = new AMap.MarkerCluster(this.map, this.latdata, { gridSize: this.gridSize, renderMarker: this._renderMarker });
+        this.cluster.on('click', (data,any) => {
+          if (data.clusterData.length <= 1) return;
+          let alng = 0,
+            alat = 0;
+          for (const m of data.clusterData) {
+            alng += m.lnglat.lng;
+            alat += m.lnglat.lat;
+          }
+          const lat = alat / data.clusterData.length;
+          const lng = alng / data.clusterData.length;
+          this.map.setZoomAndCenter(this.map.getZoom() + 1.5, [lng, lat]);
+
+        });
       }
     },
     setIcon() {
@@ -668,11 +727,11 @@ export default {
           "AMap.PlaceSearch",
           "AMap.CitySearch",
           "AMap.MarkerCluster",
-          'AMap.DistrictSearch'
+          'AMap.DistrictSearch',
         ],
         AMapUI: {
           version: '1.1',
-          plugins: []
+          plugins: ['misc/PointSimplifier']
         },
         Loca: {
           version: '2.0'
@@ -714,6 +773,93 @@ export default {
         });
         this.setIcon();
 
+        AMapUI.loadUI(['misc/PointSimplifier'], PointSimplifier => {
+          if (!PointSimplifier.supportCanvas) {
+            alert('当前环境不支持 Canvas！')
+            return
+          }
+          // 创建组件实例
+          var colors = [
+            "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
+            "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
+            "#651067", "#329262", "#5574a6", "#3b3eac"
+          ];
+          var that=this;
+          this.pointSimplifierIns = new PointSimplifier({
+            zIndex: 115,
+            autoSetFitView: false,
+            map: this.map, //所属的地图实例
+            getPosition: function(item) {
+              if (!item) {
+                return null;
+              }
+
+              var parts = item;
+
+              return [parts.lng, parts.lat];
+            },
+            getHoverTitle: function(dataItem, idx) {
+              return '序号: ' + idx;
+            },
+
+          renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
+            renderOptions: {
+              //点的样式
+              pointStyle: {
+                fillStyle: 'red',
+                width: 5,
+                height: 5
+              },
+              getGroupId: function(item, idx) {
+
+                var parts = item;
+
+                //按纬度区间分组
+                return Math.abs(Math.round(parseFloat(parts.lat)/ 3));
+              },
+              groupStyleOptions: (gid)=> {
+
+                return {
+                  pointStyle: {
+                    fillStyle: colors[gid % colors.length]
+                  }
+                };
+              }
+
+            }
+          });
+          function startAnim() {
+
+            var renderOptions = that.pointSimplifierIns.getRenderOptions();
+            var pointStyle = renderOptions.pointStyle;
+            var size = pointStyle.width,
+              range = [2, 20],
+              step = size < range[1] ? 1 : -1;
+            function anim() {
+
+              size += step;
+              pointStyle.width = pointStyle.height = size;
+              that.pointSimplifierIns.render();
+
+              if (size >= range[1]) {
+                step = -1;
+              } else if (size <= range[0]) {
+                step = 1;
+              }
+              setTimeout(anim, 100);
+            }
+
+            anim();
+          }
+
+          this.pointSimplifierIns.setData([]);
+          startAnim();
+
+        })
+
+
+
+
         if (this.deptcurrlevel<this.deptmaxlevel)
           this.setClusterMarker(markers,1);
         else
@@ -743,8 +889,6 @@ export default {
         // this.heatmapData.push({"lng": item.lng,"lat": item.lat,"count":coluts})
         if (fl == 0) { //老人
           if (item.photoAndLocation && item.photoAndLocation.split("/").length==3) {
-
-
             markeroption= {
               position: new AMap.LngLat(item.photoAndLocation.split("/")[0], item.photoAndLocation.split("/")[1]),
               icon:  this.Icons.oldman,
@@ -839,7 +983,7 @@ export default {
       //this.heatmapData=[];
       data.forEach((item) => {
         if ((item.lat && item.lng) || item.photoAndLocation) {
-          let coluts= Math.floor(Math.random() * 101)+1;
+          let coluts= Math.floor(Math.random() * 3)+1;
           // this.heatmapData.push({"lng": item.lng,"lat": item.lat,"count":coluts});
           if (fl == 0) { //老人
             if (item.photoAndLocation && item.photoAndLocation.split("/").length==3) {
@@ -892,7 +1036,6 @@ export default {
     markerClick(e) {
       this.jgId = e.target._opts.extData.id
       this.isShowInfo = true
-	    console.log(this.jgId)
     },
 
     clickScreen() {
@@ -1300,13 +1443,14 @@ $drawerWidth: 450px;
 }
 
 .drawer {
-  height: 100%;
+  top: 110px;
+  //height: 100%;
   width: 0;
   font-size: 14px;
   color: #fff;
   box-shadow: 0 0 20px 0 rgb(76 132 201);
-  background-image: linear-gradient(to bottom, #4c83c8, #033447 20%);
-  padding: 60px 0 20px;
+  // background-image: linear-gradient(to bottom, #4c83c8, #033447 20%);
+  padding: 5px 0 20px;
   position: absolute;
   bottom: 0;
   right: 0;

ruoyi-yldt/src/components/Org_show/index.js

@@ -0,0 +1,24 @@
+/**
+ * Created by 王立生 on 2022/10/13.
+ */
+import Org_showComponent from './index.vue'
+import { createVNode, render } from "vue";
+const Org_show = {}
+Org_show.install = function (app) {
+  const instance = createVNode(Org_showComponent);
+  const mountNode = document.createElement("div");
+  render(instance, mountNode);
+  document.body.appendChild(mountNode);
+  app.config.globalProperties.$queryorgshow = (para, success, cancel) => {
+    if (typeof success !== 'undefined') {
+      instance.component.props.success = success
+    }
+    if (typeof cancel !== 'undefined') {
+      instance.component.props.cancel = cancel
+    }
+   // instance.component.props.isLoad=false;
+    instance.component.exposed.queryorgshow(para);
+  }
+}
+
+export default Org_show