!41 大屏设备地图实现

Merge pull request !41 from 孙阿龙/master

springboot/wumei-iot/src/main/java/com/ruoyi/iot/controller/BigScreenController.java

@@ -0,0 +1,40 @@
+package com.ruoyi.iot.controller;
+
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.iot.model.bigscreen.vo.BigScreenMapReqVo;
+import com.ruoyi.iot.service.IBigScreenService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+
+/**
+ * 设备告警Controller
+ * 
+ * @author long
+ * @date 2022-01-13
+ */
+@RestController
+@RequestMapping("/iot/big/screen")
+public class BigScreenController extends BaseController
+{
+    private final IBigScreenService bigScreenService;
+
+    @Autowired
+    public BigScreenController(IBigScreenService bigScreenService) {
+        this.bigScreenService = bigScreenService;
+    }
+
+    /**
+     * 大屏首页 地图
+     */
+    @PostMapping("/map")
+    public AjaxResult index(@RequestBody BigScreenMapReqVo reqVo)
+    {
+        return AjaxResult.success(bigScreenService.map(reqVo));
+    }
+
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/domain/AreaCityGeo.java

@@ -0,0 +1,76 @@
+package com.ruoyi.iot.domain;
+
+/**
+ * @author sunalong
+ */
+public class AreaCityGeo {
+    private String id;
+
+    private String pid;
+
+    private String deep;
+
+    private String name;
+
+    private String extPath;
+
+    private Object geo;
+
+    private Object polygon;
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getPid() {
+        return pid;
+    }
+
+    public void setPid(String pid) {
+        this.pid = pid;
+    }
+
+    public String getDeep() {
+        return deep;
+    }
+
+    public void setDeep(String deep) {
+        this.deep = deep;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getExtPath() {
+        return extPath;
+    }
+
+    public void setExtPath(String extPath) {
+        this.extPath = extPath;
+    }
+
+    public Object getGeo() {
+        return geo;
+    }
+
+    public void setGeo(Object geo) {
+        this.geo = geo;
+    }
+
+    public Object getPolygon() {
+        return polygon;
+    }
+
+    public void setPolygon(Object polygon) {
+        this.polygon = polygon;
+    }
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/domain/Device.java

@@ -69,6 +69,15 @@ public class Device extends BaseEntity
     /** 设备影子 */
     private Integer isShadow;
 
+    /** 设备省 */
+    private String province;
+
+    /** 设备市 */
+    private String city;
+
+    /** 设备区 */
+    private String county;
+
     /** 设备所在地址 */
     @Excel(name = "设备所在地址")
     private String networkAddress;
@@ -334,6 +343,30 @@ public class Device extends BaseEntity
         return activeTime;
     }
 
+    public String getProvince() {
+        return province;
+    }
+
+    public void setProvince(String province) {
+        this.province = province;
+    }
+
+    public String getCity() {
+        return city;
+    }
+
+    public void setCity(String city) {
+        this.city = city;
+    }
+
+    public String getCounty() {
+        return county;
+    }
+
+    public void setCounty(String county) {
+        this.county = county;
+    }
+
     @Override
     public String toString() {
         return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)

springboot/wumei-iot/src/main/java/com/ruoyi/iot/mapper/AreaCityGeoMapper.java

@@ -0,0 +1,20 @@
+package com.ruoyi.iot.mapper;
+
+import com.ruoyi.iot.domain.AreaCityGeo;
+import org.apache.ibatis.annotations.Param;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+/**
+ * @author sunalong
+ */
+@Repository
+public interface AreaCityGeoMapper {
+    /***
+     * 根据坐标查询
+     * @param point 坐标
+     * @return 省市县
+     */
+    List<AreaCityGeo> selectAreaCityGeoByPoint(@Param("point")String point);
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/mapper/DeviceMapper.java

@@ -4,6 +4,8 @@ import com.ruoyi.iot.domain.Device;
 import com.ruoyi.iot.model.*;
 import com.ruoyi.iot.model.ThingsModels.ThingsModelValuesInput;
 import com.ruoyi.iot.model.ThingsModels.ThingsModelValuesOutput;
+import com.ruoyi.iot.model.bigscreen.dto.TotalDeviceArea;
+import org.apache.ibatis.annotations.Param;
 import org.springframework.stereotype.Repository;
 
 import java.util.List;
@@ -197,4 +199,17 @@ public interface DeviceMapper
      */
     public int resetDeviceStatus(String deviceNum);
 
+    /***
+     * 分组所有设备省
+     * @return 结果
+     */
+    List<TotalDeviceArea> groupDeviceProvince();
+
+    /***
+     * 分组所有设备city
+     * @param province  省
+     * @return 结果
+     */
+    List<TotalDeviceArea> groupDeviceCityByProvince(@Param("province") String province);
+
 }

springboot/wumei-iot/src/main/java/com/ruoyi/iot/model/bigscreen/dto/TotalDeviceArea.java

@@ -0,0 +1,29 @@
+package com.ruoyi.iot.model.bigscreen.dto;
+
+
+/**
+ * @author sunalong
+ */
+
+public class TotalDeviceArea {
+    private String name;
+
+    private int value;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public int getValue() {
+        return value;
+    }
+
+    public void setValue(int value) {
+        this.value = value;
+    }
+
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/model/bigscreen/vo/BigScreenMapReqVo.java

@@ -0,0 +1,19 @@
+package com.ruoyi.iot.model.bigscreen.vo;
+
+
+/**
+ * @author sunalong
+ */
+public class BigScreenMapReqVo {
+
+   private String province;
+
+   public String getProvince() {
+      return province;
+   }
+
+   public void setProvince(String province) {
+      this.province = province;
+   }
+
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/model/bigscreen/vo/BigScreenMapRespVo.java

@@ -0,0 +1,23 @@
+package com.ruoyi.iot.model.bigscreen.vo;
+
+
+
+import com.ruoyi.iot.model.bigscreen.dto.TotalDeviceArea;
+
+import java.util.List;
+
+/**
+ * @author sunalong
+ */
+public class BigScreenMapRespVo {
+
+    private List<TotalDeviceArea> list;
+
+    public List<TotalDeviceArea> getList() {
+        return list;
+    }
+
+    public void setList(List<TotalDeviceArea> list) {
+        this.list = list;
+    }
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/service/IBigScreenService.java

@@ -0,0 +1,17 @@
+package com.ruoyi.iot.service;
+
+
+import com.ruoyi.iot.model.bigscreen.vo.BigScreenMapReqVo;
+import com.ruoyi.iot.model.bigscreen.vo.BigScreenMapRespVo;
+
+/**
+ * @author sunalong
+ */
+public interface IBigScreenService {
+    /***
+     * 大屏
+     * @param reqVo 请求
+     * @return BigScreenRespVo
+     */
+    BigScreenMapRespVo map(BigScreenMapReqVo reqVo);
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/service/impl/BigScreenServiceImpl.java

@@ -0,0 +1,39 @@
+package com.ruoyi.iot.service.impl;
+
+
+import com.ruoyi.iot.mapper.DeviceMapper;
+import com.ruoyi.iot.model.bigscreen.dto.TotalDeviceArea;
+import com.ruoyi.iot.model.bigscreen.vo.BigScreenMapReqVo;
+import com.ruoyi.iot.model.bigscreen.vo.BigScreenMapRespVo;
+import com.ruoyi.iot.service.IBigScreenService;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+/**
+ * @author sunalong
+ */
+@Service
+public class BigScreenServiceImpl implements IBigScreenService {
+    private final DeviceMapper deviceMapper;
+
+    public BigScreenServiceImpl(DeviceMapper deviceMapper) {
+        this.deviceMapper = deviceMapper;
+    }
+
+    @Override
+    public BigScreenMapRespVo map(BigScreenMapReqVo reqVo) {
+        String province = reqVo.getProvince();
+
+        List<TotalDeviceArea> list;
+        if (StringUtils.isBlank(province)) {
+            list = deviceMapper.groupDeviceProvince();
+        }else {
+            list = deviceMapper.groupDeviceCityByProvince(province);
+        }
+        BigScreenMapRespVo vo = new BigScreenMapRespVo();
+        vo.setList(list);
+        return vo;
+    }
+}

springboot/wumei-iot/src/main/java/com/ruoyi/iot/service/impl/DeviceServiceImpl.java

@@ -10,10 +10,7 @@ import com.ruoyi.common.utils.DateUtils;
 import com.ruoyi.common.utils.StringUtils;
 import com.ruoyi.common.utils.http.HttpUtils;
 import com.ruoyi.common.utils.ip.IpUtils;
-import com.ruoyi.iot.domain.Device;
+import com.ruoyi.iot.domain.*;
-import com.ruoyi.iot.domain.DeviceLog;
-import com.ruoyi.iot.domain.DeviceUser;
-import com.ruoyi.iot.domain.Product;
 import com.ruoyi.iot.mqtt.EmqxService;
 import com.ruoyi.iot.tdengine.service.ILogService;
 import com.ruoyi.iot.mapper.DeviceLogMapper;
@@ -85,6 +82,9 @@ public class DeviceServiceImpl implements IDeviceService {
     @Lazy
     private EmqxService emqxService;
 
+    @Autowired
+    private com.ruoyi.iot.mapper.AreaCityGeoMapper areaCityGeoMapper;
+
     /**
      * 查询设备
      *
@@ -765,6 +765,7 @@ public class DeviceServiceImpl implements IDeviceService {
             device.setProductId(null);
             device.setProductName(null);
         }
+        setArea(device);
         deviceMapper.updateDevice(device);
         // 设备取消禁用
         if (oldDevice.getStatus() == 2 && device.getStatus() == 4) {
@@ -891,10 +892,33 @@ public class DeviceServiceImpl implements IDeviceService {
             JSONObject location = baiduObject.getJSONObject("result").getJSONObject("location");
             device.setLongitude(location.getBigDecimal("lng"));
             device.setLatitude(location.getBigDecimal("lat"));
+
+            setArea(device);
+
             System.out.println(device.getSerialNumber() + "- 设置经度：" + location.getBigDecimal("lng") + "，设置纬度：" + location.getBigDecimal("lat"));
         }
     }
 
+    private void setArea(Device device){
+        try {
+            List<AreaCityGeo> areaList = areaCityGeoMapper.selectAreaCityGeoByPoint("POINT(" + device.getLongitude() + " " + device.getLatitude() + ")");
+            if (areaList != null && areaList.size() == 3) {
+                String geoProvince = areaList.stream().filter(en -> en.getDeep().equals("0")).findFirst().get().getName();
+                String geoCity = areaList.stream().filter(en -> en.getDeep().equals("1")).findFirst().get().getName();
+                String geoCounty = areaList.stream().filter(en -> en.getDeep().equals("2")).findFirst().get().getName();
+                device.setProvince(geoProvince);
+                if (geoProvince.equals(geoCity)) {
+                    device.setCity(geoCounty);
+                } else {
+                    device.setCity(geoCity);
+                    device.setCounty(geoCounty);
+                }
+            }
+        }catch (Exception ex){
+
+        }
+    }
+
     /**
      * 上报设备信息
      *

springboot/wumei-iot/src/main/resources/mapper/iot/AreaCityGeoMapper.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.iot.mapper.AreaCityGeoMapper">
+  <resultMap id="BaseResultMap" type="com.ruoyi.iot.domain.AreaCityGeo">
+    <!--@mbg.generated-->
+    <!--@Table area_city_geo-->
+    <result column="id" jdbcType="VARCHAR" property="id" />
+    <result column="pid" jdbcType="VARCHAR" property="pid" />
+    <result column="deep" jdbcType="VARCHAR" property="deep" />
+    <result column="name" jdbcType="VARCHAR" property="name" />
+  </resultMap>
+  <sql id="Base_Column_List">
+    <!--@mbg.generated-->
+    id, pid, deep, `name`
+  </sql>
+
+  <select id="selectAreaCityGeoByPoint" resultMap="BaseResultMap">
+   select <include refid="Base_Column_List"/> from area_city_geo where
+    ST_Intersects(polygon, ST_GeomFromText(#{point,jdbcType=VARCHAR},0))=1
+  </select>
+</mapper>

springboot/wumei-iot/src/main/resources/mapper/iot/DeviceMapper.xml

@@ -322,6 +322,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="remark != null">remark,</if>
             <if test="imgUrl != null">img_url,</if>
             <if test="summary != null">summary,</if>
+            <if test="province != null">province,</if>
+            <if test="city != null">city,</if>
+            <if test="county != null">county,</if>
          </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="deviceName != null and deviceName != ''">#{deviceName},</if>
@@ -351,6 +354,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="remark != null">#{remark},</if>
             <if test="imgUrl != null">#{imgUrl},</if>
             <if test="summary != null">#{summary},</if>
+            <if test="province != null">#{province},</if>
+            <if test="city != null">#{city},</if>
+            <if test="county != null">#{county},</if>
          </trim>
     </insert>
 
@@ -384,6 +390,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="remark != null">remark = #{remark},</if>
             <if test="imgUrl != null">img_url = #{imgUrl},</if>
             <if test="summary != null">summary = #{summary},</if>
+            <if test="province != null">province = #{province},</if>
+            <if test="city != null">city = #{city},</if>
+            <if test="county != null">county = #{county},</if>
         </trim>
         where device_id = #{deviceId}
     </update>
@@ -397,6 +406,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="longitude != null">longitude = #{longitude},</if>
             <if test="latitude != null">latitude = #{latitude},</if>
             <if test="activeTime != null">active_time = #{activeTime},</if>
+            <if test="province != null">province = #{province},</if>
+            <if test="city != null">city = #{city},</if>
+            <if test="county != null">county = #{county},</if>
         </trim>
         where serial_number = #{serialNumber}
     </update>
@@ -463,4 +475,18 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="userId != null"> and group_id in(select group_id from iot_group where user_id = #{userId})</if>
         </where>
     </delete>
+
+    <resultMap type="com.ruoyi.iot.model.bigscreen.dto.TotalDeviceArea" id="TotalDeviceAreaResult">
+        <result property="name"    column="name"    />
+        <result property="value"    column="value"    />
+    </resultMap>
+
+    <select id="groupDeviceProvince" resultMap="TotalDeviceAreaResult">
+        select province name,IFNULL(count(device_id), 0)value from iot_device  group by province
+    </select>
+
+    <select id="groupDeviceCityByProvince" resultMap="TotalDeviceAreaResult">
+        select city name,IFNULL(count(device_id), 0)value from iot_device where province = #{province,jdbcType=VARCHAR}  group by city
+    </select>
+
 </mapper>

vue/src/api/iot/bigScreen.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 大屏 map
+export function map(data) {
+  return request({
+    url: '/iot/big/screen/map',
+    method: 'post',
+    data: data
+  })
+}

vue/src/views/bigScreen/indexs/center-map.vue

@@ -6,393 +6,419 @@
       <div class="you"></div>
     </div>
     <div class="mapwrap">
-       <dv-border-box-13 >
+      <dv-border-box-13>
-      <div class="quanguo" @click="getData(-1)" v-if="code !== 'china' && userCode == -1">
+        <div class="quanguo" @click="getbigScreenMapData('',-1)" v-if="code !== 'china' && userCode == -1">
-        中国
+          中国
-      </div>
+        </div>
 
-      <Echart id="CenterMap" :options="options" ref="CenterMap" />
+        <Echart id="CenterMap" :options="options" ref="CenterMap" />
       </dv-border-box-13>
     </div>
   </div>
 </template>
 
 <script>
-import xzqCode from "../../../utils/bigScreen/map/xzqCode";
+  import xzqCode from "../../../utils/bigScreen/map/xzqCode";
-import { currentGET } from '@/api/bigScreen/modules'
 
-import { GETNOBASE } from '@/api/bigScreen/api'
+  import {
-export default {
+    GETNOBASE
-  data() {
+  } from '@/api/bigScreen/api'
-    return {
+  import {
-      maptitle: "设备分布图",
+    map,
-      options: {},
+  } from "@/api/iot/bigScreen";
-      code: "china",
+  export default {
-      userCode: -1,//-1 代表中国 用户权限的行政区code
+    data() {
-      echartBindClick: false
+      return {
-    };
+        maptitle: "设备分布图",
-  },
+        options: {},
-  created() { },
+        code: "china",
+        userCode: -1, //-1 代表中国 用户权限的行政区code
+        echartBindClick: false
+      };
+    },
+    created() {},
 
-  mounted() {
+    mounted() {
-    // console.log(xzqCode);
+      // console.log(xzqCode);
-    this.getData()
+      this.getbigScreenMapData('',-1);
 
-
+    },
-  },
+    methods: {
-  methods: {
+      getbigScreenMapData(province, code) {
-    getData(code) {
+        map({
-      currentGET('big8',{regionCode:code}).then(res => {
+          province: province
-        console.log('设备分布', res);
+        }).then((res) => {
-        if (res.success) {
           if (!code) {
-            this.userCode = res.data.regionCode;
+            this.userCode = code;
           }
-          this.getGeojson(res.data.regionCode, res.data.dataList);
+          this.getGeojson(code, res.data.list);
           this.mapclick();
-
-        } else {
-          this.$Message.warning(res.msg)
-        }
-      })
-    },
-    getGeojson(name, mydata) {
-
-      if (name == -1) {
-        name = 'china'
-      }
-      this.code = name;
-      GETNOBASE("./map-geojson/" + name + ".json").then((res) => {
-        // console.log('地图行政区划', name, res);
-        let cityCenter = {};
-        let arr = res.features;
-        arr.map((item) => {
-          cityCenter[item.properties.name] =
-            item.properties.centroid || item.properties.center;
         });
-        let newData = [];
+      },
-        // console.log('中心点',cityCenter);
+      getGeojson(name, mydata) {
-        mydata.map((item) => {
+        console.log('设备分布1', name);
-          if (cityCenter[item.name]) {
+        console.log('设备分布2', mydata);
-            let color = this.getColor(item.value);
+        if (name == -1) {
-            newData.push({
+          name = 'china'
-              name: item.name,
+        }
-              value: cityCenter[item.name].concat(item.value),
+        this.code = name;
-              // itemStyle: {
+        GETNOBASE("./map-geojson/" + name + ".json").then((res) => {
-              //   color: color,
+          // console.log('地图行政区划', name, res);
-              //   borderColor: color,
+          let cityCenter = {};
-              //   // borderWidth: 4,
+          let arr = res.features;
-              // },
+          arr.map((item) => {
-            });
+            cityCenter[item.properties.name] =
+              item.properties.centroid || item.properties.center;
+          });
+          let newData = [];
+          // console.log('中心点',cityCenter);
+          mydata.map((item) => {
+            if (cityCenter[item.name]) {
+              let color = this.getColor(item.value);
+              newData.push({
+                name: item.name,
+                value: cityCenter[item.name].concat(item.value),
+                // itemStyle: {
+                //   color: color,
+                //   borderColor: color,
+                //   // borderWidth: 4,
+                // },
+              });
+            }
+          });
+          let mapjson = echarts.getMap(name);
+          if (!mapjson) {
+            echarts.registerMap(name, res);
           }
+          this.init(name, mydata, newData);
         });
-        let mapjson = echarts.getMap(name);
+      },
-        if (!mapjson) {
+      getColor(num) {
-          echarts.registerMap(name, res);
+        if (num > 0 && num < 9) {
+          return "#035cf5";
+        } else if (num > 10 && num < 49) {
+          return "#3375e4";
+        } else if (num > 50 && num < 199) {
+          return "#6797ef";
+        } else if (num > 200 && num < 499) {
+          return "#96b5ef";
+        } else if (num > 500 && num < 9999) {
+          return "#bacae8";
+        } else if (num > 1000) {
+          return "#3FF4FF";
+        } else {
+          return "";
+        }
+      },
+      init(name, data, data2) {
+        let top = 45;
+        let zoom = 1.05;
+        if (name == "china") {
+          top = 140;
+          zoom = 1.42;
         }
-        this.init(name, mydata, newData);
-      });
-    },
-    getColor(num) {
-      if (num > 0 && num < 9) {
-        return "#035cf5";
-      } else if (num > 10 && num < 49) {
-        return "#3375e4";
-      } else if (num > 50 && num < 199) {
-        return "#6797ef";
-      } else if (num > 200 && num < 499) {
-        return "#96b5ef";
-      } else if (num > 500 && num < 9999) {
-        return "#bacae8";
-      } else if (num > 1000) {
-        return "#3FF4FF";
-      } else {
-        return "";
-      }
-    },
-    init(name, data, data2) {
-      let top = 45;
-      let zoom = 1.05;
-      if (name == "china") {
-        top = 140;
-        zoom = 1.42;
-      }
 
-      let option = {
+        let option = {
-        backgroundColor: "rgba(0,0,0,0)",
+          backgroundColor: "rgba(0,0,0,0)",
-        tooltip: {
-          show: false,
-        },
-        legend: {
-          show: false,
-        },
-        visualMap: {
-          left: 20,
-          bottom: 20,
-          pieces: [
-            { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
-            { gte: 600, lte: 999, label: "600-999个" },
-            { gte: 200, lte: 599, label: "200-599个" },
-            { gte: 50, lte: 199, label: "49-199个" },
-            { gte: 10, lte: 49, label: "10-49个" },
-            { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
-          ],
-          inRange: {
-            // 渐变颜色，从小到大
-            color: [
-              "#c3d7df",
-              "#5cb3cc",
-              "#8abcd1",
-              "#66a9c9",
-              "#2f90b9",
-              "#1781b5",
-            ],
-          },
-          textStyle: {
-            color: "#fff",
-          },
-        },
-        geo: {
-          map: name,
-          roam: false,
-          selectedMode: false, //是否允许选中多个区域
-          zoom: zoom,
-          top: top,
-          aspectScale: 0.78,
           tooltip: {
             show: false,
           },
-          label: {
+          legend: {
             show: false,
-          }, //地图中文字内容及样式控制
-          itemStyle: {
-            areaColor: "rgba(0,0,0,0)",
-            borderColor: "rgba(0,0,0,0)",
           },
-          emphasis: {
+          visualMap: {
-            disabled: true,
+            left: 20,
+            bottom: 20,
+            pieces: [{
+                gte: 1000,
+                label: "1000个以上"
+              }, // 不指定 max，表示 max 为无限大（Infinity）。
+              {
+                gte: 600,
+                lte: 999,
+                label: "600-999个"
+              },
+              {
+                gte: 200,
+                lte: 599,
+                label: "200-599个"
+              },
+              {
+                gte: 50,
+                lte: 199,
+                label: "49-199个"
+              },
+              {
+                gte: 10,
+                lte: 49,
+                label: "10-49个"
+              },
+              {
+                lte: 9,
+                label: "1-9个"
+              }, // 不指定 min，表示 min 为无限大（-Infinity）。
+            ],
+            inRange: {
+              // 渐变颜色，从小到大
+              color: [
+                "#c3d7df",
+                "#5cb3cc",
+                "#8abcd1",
+                "#66a9c9",
+                "#2f90b9",
+                "#1781b5",
+              ],
+            },
+            textStyle: {
+              color: "#fff",
+            },
           },
-        },
+          geo: {
-        series: [
+            map: name,
-          {
+            roam: false,
-            name: "MAP",
-            type: "map",
-            mapType: name,
-            aspectScale: 0.78,
-            data: data,
-            // data: [1,100],
-
             selectedMode: false, //是否允许选中多个区域
             zoom: zoom,
-            geoIndex: 1,
             top: top,
+            aspectScale: 0.78,
             tooltip: {
-              show: true,
+              show: false,
-              formatter: function (params) {
-                if (params.data) {
-                  return params.name + "：" + params.data["value"];
-                } else {
-                  return params.name;
-                }
-              },
-              backgroundColor: "rgba(0,0,0,.6)",
-              borderColor: "rgba(147, 235, 248, .8)",
-              textStyle: {
-                color: "#FFF",
-              },
             },
             label: {
               show: false,
-              color: "#000",
+            }, //地图中文字内容及样式控制
-              // position: [-10, 0],
-              formatter: function (val) {
-                // console.log(val)
-                if (val.data !== undefined) {
-                  return val.name.slice(0, 2);
-                } else {
-                  return "";
-                }
-              },
-              rich: {},
-              emphasis: { show: false },
-            },
             itemStyle: {
-              borderColor: "rgba(147, 235, 248, .8)",
+              areaColor: "rgba(0,0,0,0)",
-              borderWidth: 1,
+              borderColor: "rgba(0,0,0,0)",
-              areaColor: {
+            },
-                type: "radial",
+            emphasis: {
-                x: 0.5,
+              disabled: true,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
-                  },
-                ],
-                globalCoord: false, // 缺为 false
-              },
-              shadowColor: "rgba(128, 217, 248, .3)",
-              shadowOffsetX: -2,
-              shadowOffsetY: 2,
-              shadowBlur: 10,
-              emphasis: {
-                areaColor: "#389BB7",
-                borderWidth: 1,
-              },
             },
           },
-          {
+          series: [{
-            data: data2,
+              name: "MAP",
-            type: "effectScatter",
+              type: "map",
-            coordinateSystem: "geo",
+              mapType: name,
-            symbolSize: function (val) {
+              aspectScale: 0.78,
-              return 4;
+              data: data,
-              // return val[2] / 50;
+              // data: [1,100],
-            },
-            legendHoverLink: true,
-            showEffectOn: "render",
-            rippleEffect: {
-              // period: 4,
-              scale: 6,
-              color: "rgba(255,255,255, 1)",
-              brushType: "fill",
-            },
-            tooltip: {
-              show: true,
-              formatter: function (params) {
-                if (params.data) {
-                  return params.name + "：" + params.data["value"][2];
-                } else {
-                  return params.name;
-                }
-              },
-              backgroundColor: "rgba(0,0,0,.6)",
-              borderColor: "rgba(147, 235, 248, .8)",
-              textStyle: {
-                color: "#FFF",
-              },
-            },
-            label: {
-              formatter: (param) => {
-                return param.name.slice(0, 2);
-              },
 
-              fontSize: 11,
+              selectedMode: false, //是否允许选中多个区域
-              offset: [0, 2],
+              zoom: zoom,
-              position: "bottom",
+              geoIndex: 1,
-              textBorderColor: "#fff",
+              top: top,
-              textShadowColor: "#000",
+              tooltip: {
-              textShadowBlur: 10,
+                show: true,
-              textBorderWidth: 0,
+                formatter: function (params) {
-              color: "#FFF",
+                  if (params.data) {
-              show: true,
+                    return params.name + "：" + params.data["value"];
+                  } else {
+                    return params.name;
+                  }
+                },
+                backgroundColor: "rgba(0,0,0,.6)",
+                borderColor: "rgba(147, 235, 248, .8)",
+                textStyle: {
+                  color: "#FFF",
+                },
+              },
+              label: {
+                show: false,
+                color: "#000",
+                // position: [-10, 0],
+                formatter: function (val) {
+                  // console.log(val)
+                  if (val.data !== undefined) {
+                    return val.name.slice(0, 2);
+                  } else {
+                    return "";
+                  }
+                },
+                rich: {},
+                emphasis: {
+                  show: false
+                },
+              },
+              itemStyle: {
+                borderColor: "rgba(147, 235, 248, .8)",
+                borderWidth: 1,
+                areaColor: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.8,
+                  colorStops: [{
+                      offset: 0,
+                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺为 false
+                },
+                shadowColor: "rgba(128, 217, 248, .3)",
+                shadowOffsetX: -2,
+                shadowOffsetY: 2,
+                shadowBlur: 10,
+                emphasis: {
+                  areaColor: "#389BB7",
+                  borderWidth: 1,
+                },
+              },
             },
-            // colorBy: "data",
+            {
-            itemStyle: {
+              data: data2,
-              color: "rgba(255,255,255,1)",
+              type: "effectScatter",
-              borderColor: "rgba(2255,255,255,2)",
+              coordinateSystem: "geo",
-              borderWidth: 4,
+              symbolSize: function (val) {
-              shadowColor: "#000",
+                return 4;
-              shadowBlur: 10,
+                // return val[2] / 50;
+              },
+              legendHoverLink: true,
+              showEffectOn: "render",
+              rippleEffect: {
+                // period: 4,
+                scale: 6,
+                color: "rgba(255,255,255, 1)",
+                brushType: "fill",
+              },
+              tooltip: {
+                show: true,
+                formatter: function (params) {
+                  if (params.data) {
+                    return params.name + "：" + params.data["value"][2];
+                  } else {
+                    return params.name;
+                  }
+                },
+                backgroundColor: "rgba(0,0,0,.6)",
+                borderColor: "rgba(147, 235, 248, .8)",
+                textStyle: {
+                  color: "#FFF",
+                },
+              },
+              label: {
+                formatter: (param) => {
+                  return param.name.slice(0, 2);
+                },
+
+                fontSize: 11,
+                offset: [0, 2],
+                position: "bottom",
+                textBorderColor: "#fff",
+                textShadowColor: "#000",
+                textShadowBlur: 10,
+                textBorderWidth: 0,
+                color: "#FFF",
+                show: true,
+              },
+              // colorBy: "data",
+              itemStyle: {
+                color: "rgba(255,255,255,1)",
+                borderColor: "rgba(2255,255,255,2)",
+                borderWidth: 4,
+                shadowColor: "#000",
+                shadowBlur: 10,
+              },
             },
-          },
+          ],
-        ],
+        };
-      };
+        this.options = option;
-      this.options = option;
+      },
+      message(text) {
+        // this.$Message({
+        //   text: text,
+        //   type: 'warning'
+        // })
+        alert(text);
+      },
+      mapclick() {
+        if (this.echartBindClick || this.userCode !== -1) return
+        //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
+        this.$refs.CenterMap.chart.on("click", (params) => {
+          // console.log(params);
+          let xzqData = xzqCode[params.name];
+          console.log(xzqData)
+          if (xzqData) {
+            this.getbigScreenMapData(xzqData.name, xzqData.adcode);
+          } else {
+            //  alert("暂无下级地市!");
+            // this.message("暂无下级地市!");
+          }
+        });
+        this.echartBindClick = true
+      },
     },
-    message(text) {
+  };
-      this.$Message({
+
-        text: text,
-        type: 'warning'
-      })
-    },
-    mapclick() {
-      if (this.echartBindClick || this.userCode !== -1) return
-      //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
-      this.$refs.CenterMap.chart.on("click", (params) => {
-        // console.log(params);
-        let xzqData = xzqCode[params.name];
-        if (xzqData) {
-          this.getData(xzqData.adcode);
-        } else {
-          this.message("暂无下级地市!");
-        }
-      });
-      this.echartBindClick = true
-    },
-  },
-};
 </script>
 <style lang='scss' scoped>
-.centermap {
+  .centermap {
-  margin-bottom: 30px;
+    margin-bottom: 30px;
 
-  .maptitle {
+    .maptitle {
-    height: 60px;
+      height: 60px;
-    display: flex;
+      display: flex;
-    justify-content: center;
+      justify-content: center;
-    padding-top: 10px;
+      padding-top: 10px;
-    box-sizing: border-box;
+      box-sizing: border-box;
 
-    .titletext {
+      .titletext {
-      font-size: 28px;
+        font-size: 28px;
-      font-weight: 900;
+        font-weight: 900;
-      letter-spacing: 6px;
+        letter-spacing: 6px;
-      background: linear-gradient(92deg,
+        background: linear-gradient(92deg,
-          #0072ff 0%,
+            #0072ff 0%,
-          #00eaff 48.8525390625%,
+            #00eaff 48.8525390625%,
-          #01aaff 100%);
+            #01aaff 100%);
-      -webkit-background-clip: text;
+        -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+        -webkit-text-fill-color: transparent;
-      margin: 0 10px;
+        margin: 0 10px;
+      }
+
+      .zuo,
+      .you {
+        background-size: 100% 100%;
+        width: 29px;
+        height: 20px;
+        margin-top: 8px;
+      }
+
+      .zuo {
+        background: url("../../../assets/bigScreen/img/xiezuo.png") no-repeat;
+      }
+
+      .you {
+        background: url("../../../assets/bigScreen/img/xieyou.png") no-repeat;
+      }
     }
 
-    .zuo,
+    .mapwrap {
-    .you {
-      background-size: 100% 100%;
-      width: 29px;
-      height: 20px;
-      margin-top: 8px;
-    }
 
-    .zuo {
+      height: 548px;
-      background: url("../../../assets/bigScreen/img/xiezuo.png") no-repeat;
+      width: 100%;
-    }
+      // padding: 0 0 10px 0;
+      box-sizing: border-box;
+      position: relative;
 
-    .you {
+      .quanguo {
-      background: url("../../../assets/bigScreen/img/xieyou.png") no-repeat;
+        position: absolute;
+        right: 20px;
+        top: -46px;
+        width: 80px;
+        height: 28px;
+        border: 1px solid #00eded;
+        border-radius: 10px;
+        color: #00f7f6;
+        text-align: center;
+        line-height: 26px;
+        letter-spacing: 6px;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
+          0 0 6px rgba(0, 237, 237, 0.4);
+      }
     }
   }
 
-  .mapwrap {
+</style>
-   
-    height: 548px;
-    width: 100%;
-    // padding: 0 0 10px 0;
-    box-sizing: border-box;
-    position: relative;
-
-    .quanguo {
-      position: absolute;
-      right: 20px;
-      top: -46px;
-      width: 80px;
-      height: 28px;
-      border: 1px solid #00eded;
-      border-radius: 10px;
-      color: #00f7f6;
-      text-align: center;
-      line-height: 26px;
-      letter-spacing: 6px;
-      cursor: pointer;
-      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
-        0 0 6px rgba(0, 237, 237, 0.4);
-    }
-  }
-}
-</style>

vue/src/views/bigScreen/indexs/left-top.vue

@@ -1,222 +1,245 @@
 <template>
-    <ul class="user_Overview flex" v-if="pageflag">
+  <ul class="user_Overview flex" v-if="pageflag">
-        <li class="user_Overview-item" style="color: #00fdfa">
+    <li class="user_Overview-item" style="color: #00fdfa">
-            <div class="user_Overview_nums allnum ">
+      <div class="user_Overview_nums allnum ">
-                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
+        <dv-digital-flop :config="config" style="width:100%;height:100%;" />
-            </div>
+      </div>
-            <p>总设备数</p>
+      <p>总设备数</p>
-        </li>
+    </li>
-        <li class="user_Overview-item" style="color: #07f7a8">
+    <li class="user_Overview-item" style="color: #07f7a8">
-            <div class="user_Overview_nums online">
+      <div class="user_Overview_nums online">
-                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
+        <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
-            </div>
+      </div>
-            <p>在线数</p>
+      <p>在线数</p>
-        </li>
+    </li>
-        <li class="user_Overview-item" style="color: #e3b337">
+    <li class="user_Overview-item" style="color: #e3b337">
-            <div class="user_Overview_nums offline">
+      <div class="user_Overview_nums offline">
-                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
+        <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
 
-            </div>
+      </div>
-            <p>掉线数</p>
+      <p>掉线数</p>
-        </li>
+    </li>
-        <li class="user_Overview-item" style="color: #f5023d">
+    <li class="user_Overview-item" style="color: #f5023d">
-            <div class="user_Overview_nums laramnum">
+      <div class="user_Overview_nums laramnum">
-                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
+        <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
-            </div>
+      </div>
-            <p>告警次数</p>
+      <p>告警次数</p>
-        </li>
+    </li>
-    </ul>
+  </ul>
-    <Reacquire v-else @onclick="getData" line-height="200px">
+  <Reacquire v-else @onclick="getData" line-height="200px">
-        重新获取
+    重新获取
-    </Reacquire>
+  </Reacquire>
 </template>
 
 <script>
-import { currentGET } from '@/api/bigScreen/modules'
+  import {
-let style = {
+    getDeviceStatistic,
+  } from "@/api/iot/device";
+  import {
+    listAllDeviceShort,
+  } from "@/api/iot/device";
+  let style = {
     fontSize: 24
-}
+  }
-export default {
+  export default {
     data() {
-        return {
+      return {
-            options: {},
+        // 设备列表
-            userOverview: {
+        deviceList: [],
-                alarmNum: 0,
+        // 设备统计信息
-                offlineNum: 0,
+        deviceStatistic: {},
-                onlineNum: 0,
+        // 设备总数
-                totalNum: 0,
+        deviceCount: 0,
-            },
+        options: {},
-            pageflag: true,
+        userOverview: {
-            timer: null,
+          alarmNum: 0,
-            config: {
+          offlineNum: 0,
-                number: [100],
+          onlineNum: 0,
-                content: '{nt}',
+          totalNum: 0,
-                style: {
+        },
-                    ...style,
+        pageflag: true,
-                    // stroke: "#00fdfa",
+        timer: null,
-                    fill: "#00fdfa",
+        config: {
-                },
+          number: [],
-            },
+          content: '{nt}',
-            onlineconfig: {
+          style: {
-                number: [0],
+            ...style,
-                content: '{nt}',
+            // stroke: "#00fdfa",
-                style: {
+            fill: "#00fdfa",
-                    ...style,
+          },
-                    // stroke: "#07f7a8",
+        },
-                    fill: "#07f7a8",
+        onlineconfig: {
-                },
+          number: [0],
-            },
+          content: '{nt}',
-            offlineconfig: {
+          style: {
-                number: [0],
+            ...style,
-                content: '{nt}',
+            // stroke: "#07f7a8",
-                style: {
+            fill: "#07f7a8",
-                    ...style,
+          },
-                    // stroke: "#e3b337",
+        },
-                    fill: "#e3b337",
+        offlineconfig: {
-                },
+          number: [0],
-            },
+          content: '{nt}',
-            laramnumconfig: {
+          style: {
-                number: [0],
+            ...style,
-                content: '{nt}',
+            // stroke: "#e3b337",
-                style: {
+            fill: "#e3b337",
-                    ...style,
+          },
-                    // stroke: "#f5023d",
+        },
-                    fill: "#f5023d",
+        laramnumconfig: {
-                },
+          number: [0],
-            }
+          content: '{nt}',
+          style: {
+            ...style,
+            // stroke: "#f5023d",
+            fill: "#f5023d",
+          },
+        }
 
-        };
+      };
     },
     filters: {
-        numsFilter(msg) {
+      numsFilter(msg) {
-            return msg || 0;
+        return msg || 0;
-        },
+      },
     },
     created() {
-        this.getData()
+      this.getData()
-    },
-    mounted() {
     },
+    mounted() {},
     beforeDestroy() {
-        this.clearData()
+      this.clearData()
 
     },
     methods: {
-        clearData() {
+      clearData() {
-            if (this.timer) {
+        if (this.timer) {
-                clearInterval(this.timer)
+          clearInterval(this.timer)
-                this.timer = null
+          this.timer = null
+        }
+      },
+      getData() {
+        this.pageflag = true;
+        getDeviceStatistic().then(res => {
+          // this.deviceStatistic = response.data;
+          if (!this.timer) {
+            console.log("设备总览", res);
+          }
+          if (res.code == 200) {
+            this.userOverview = res.data;
+            this.laramnumconfig = {
+              ...this.laramnumconfig,
+              number: [res.data.alertCount]
             }
-        },
+            this.getAllDevice();
-        getData() {
+            this.switper()
-            this.pageflag = true;
+          } else {
-            currentGET("big2").then((res) => {
+            this.pageflag = false;
-                if (!this.timer) {
+            this.$Message.warning(res.msg);
-                    console.log("设备总览", res);
+          }
-                }
+        });
-                if (res.success) {
+      },
-                    this.userOverview = res.data;
+      //轮询
-                    this.onlineconfig = {
+      switper() {
-                        ...this.onlineconfig,
+        if (this.timer) {
-                        number: [res.data.onlineNum]
+          return
-                    }
+        }
-                    this.config = {
+        let looper = (a) => {
-                        ...this.config,
+          this.getData()
-                        number: [res.data.totalNum]
+        };
-                    }
+        this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
-                    this.offlineconfig = {
+      },
-                        ...this.offlineconfig,
+      /**查询所有设备 */
-                        number: [res.data.offlineNum]
+      getAllDevice() {
-                    }
+        listAllDeviceShort(this.queryParams).then(response => {
-                    this.laramnumconfig = {
+          this.deviceList = response.rows;
-                        ...this.laramnumconfig,
+          this.deviceCount = response.total;
-                        number: [res.data.alarmNum]
+          let online = this.deviceList.filter(x => x.status == 3).length;
-                    }
+          let offline = this.deviceList.length - online;
-                    this.switper()
+          this.config = {
-                } else {
+            ...this.config,
-                    this.pageflag = false;
+            number: [this.deviceCount]
-                    this.$Message.warning(res.msg);
+          }
-                }
+          this.onlineconfig = {
-            });
+            ...this.onlineconfig,
-        },
+            number: [online]
-        //轮询
+          }
-        switper() {
+          this.offlineconfig = {
-            if (this.timer) {
+            ...this.offlineconfig,
-                return
+            number: [offline]
-            }
+          }
-            let looper = (a) => {
+        })
-                this.getData()
+      },
-            };
-            this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
-        },
     },
-};
+  };
+
 </script>
 <style lang='scss' scoped>
-.user_Overview {
+  .user_Overview {
     li {
-        flex: 1;
+      flex: 1;
 
-        p {
+      p {
-            text-align: center;
+        text-align: center;
-            height: 16px;
+        height: 16px;
-            font-size: 16px;
+        font-size: 16px;
+      }
+
+      .user_Overview_nums {
+        width: 100px;
+        height: 100px;
+        text-align: center;
+        line-height: 100px;
+        font-size: 22px;
+        margin: 50px auto 30px;
+        background-size: cover;
+        background-position: center center;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
         }
 
-        .user_Overview_nums {
+        &.bgdonghua::before {
-            width: 100px;
+          animation: rotating 14s linear infinite;
-            height: 100px;
-            text-align: center;
-            line-height: 100px;
-            font-size: 22px;
-            margin: 50px auto 30px;
-            background-size: cover;
-            background-position: center center;
-            position: relative;
-
-            &::before {
-                content: '';
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-            }
-
-            &.bgdonghua::before {
-                animation: rotating 14s linear infinite;
-            }
         }
+      }
 
-        .allnum {
+      .allnum {
 
-            // background-image: url("../../assets/img/left_top_lan.png");
+        // background-image: url("../../assets/img/left_top_lan.png");
-            &::before {
+        &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
+          background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
 
-            }
         }
+      }
 
-        .online {
+      .online {
-            &::before {
+        &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_lv.png");
+          background-image: url("../../../assets/bigScreen/img/left_top_lv.png");
 
-            }
         }
+      }
 
-        .offline {
+      .offline {
-            &::before {
+        &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_huang.png");
+          background-image: url("../../../assets/bigScreen/img/left_top_huang.png");
 
-            }
         }
+      }
 
-        .laramnum {
+      .laramnum {
-            &::before {
+        &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_hong.png");
+          background-image: url("../../../assets/bigScreen/img/left_top_hong.png");
 
-            }
         }
+      }
     }
-}
+  }
-</style>
+
+</style>