!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

@@ -7,7 +7,7 @@
     </div>
     <div class="mapwrap">
       <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>
 
@@ -19,9 +19,13 @@
 
 <script>
   import xzqCode from "../../../utils/bigScreen/map/xzqCode";
-import { currentGET } from '@/api/bigScreen/modules'
 
-import { GETNOBASE } from '@/api/bigScreen/api'
+  import {
+    GETNOBASE
+  } from '@/api/bigScreen/api'
+  import {
+    map,
+  } from "@/api/iot/bigScreen";
   export default {
     data() {
       return {
@@ -36,28 +40,24 @@ export default {
 
     mounted() {
       // console.log(xzqCode);
-    this.getData()
+      this.getbigScreenMapData('',-1);
-
 
     },
     methods: {
-    getData(code) {
+      getbigScreenMapData(province, code) {
-      currentGET('big8',{regionCode:code}).then(res => {
+        map({
-        console.log('设备分布', res);
+          province: province
-        if (res.success) {
+        }).then((res) => {
           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) {
-
+        console.log('设备分布1', name);
+        console.log('设备分布2', mydata);
         if (name == -1) {
           name = 'china'
         }
@@ -129,13 +129,34 @@ export default {
           visualMap: {
             left: 20,
             bottom: 20,
-          pieces: [
+            pieces: [{
-            { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
+                gte: 1000,
-            { gte: 600, lte: 999, label: "600-999个" },
+                label: "1000个以上"
-            { gte: 200, lte: 599, label: "200-599个" },
+              }, // 不指定 max，表示 max 为无限大（Infinity）。
-            { gte: 50, lte: 199, label: "49-199个" },
+              {
-            { gte: 10, lte: 49, label: "10-49个" },
+                gte: 600,
-            { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
+                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: {
               // 渐变颜色，从小到大
@@ -173,8 +194,7 @@ export default {
               disabled: true,
             },
           },
-        series: [
+          series: [{
-          {
               name: "MAP",
               type: "map",
               mapType: name,
@@ -214,7 +234,9 @@ export default {
                   }
                 },
                 rich: {},
-              emphasis: { show: false },
+                emphasis: {
+                  show: false
+                },
               },
               itemStyle: {
                 borderColor: "rgba(147, 235, 248, .8)",
@@ -224,8 +246,7 @@ export default {
                   x: 0.5,
                   y: 0.5,
                   r: 0.8,
-                colorStops: [
+                  colorStops: [{
-                  {
                       offset: 0,
                       color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                     },
@@ -306,10 +327,11 @@ export default {
         this.options = option;
       },
       message(text) {
-      this.$Message({
+        // this.$Message({
-        text: text,
+        //   text: text,
-        type: 'warning'
+        //   type: 'warning'
-      })
+        // })
+        alert(text);
       },
       mapclick() {
         if (this.echartBindClick || this.userCode !== -1) return
@@ -317,16 +339,19 @@ export default {
         this.$refs.CenterMap.chart.on("click", (params) => {
           // console.log(params);
           let xzqData = xzqCode[params.name];
+          console.log(xzqData)
           if (xzqData) {
-          this.getData(xzqData.adcode);
+            this.getbigScreenMapData(xzqData.name, xzqData.adcode);
           } else {
-          this.message("暂无下级地市!");
+            //  alert("暂无下级地市!");
+            // this.message("暂无下级地市!");
           }
         });
         this.echartBindClick = true
       },
     },
   };
+
 </script>
 <style lang='scss' scoped>
   .centermap {
@@ -395,4 +420,5 @@ export default {
       }
     }
   }
+
 </style>

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

@@ -32,13 +32,24 @@
 </template>
 
 <script>
-import { currentGET } from '@/api/bigScreen/modules'
+  import {
+    getDeviceStatistic,
+  } from "@/api/iot/device";
+  import {
+    listAllDeviceShort,
+  } from "@/api/iot/device";
   let style = {
     fontSize: 24
   }
   export default {
     data() {
       return {
+        // 设备列表
+        deviceList: [],
+        // 设备统计信息
+        deviceStatistic: {},
+        // 设备总数
+        deviceCount: 0,
         options: {},
         userOverview: {
           alarmNum: 0,
@@ -49,7 +60,7 @@ export default {
         pageflag: true,
         timer: null,
         config: {
-                number: [100],
+          number: [],
           content: '{nt}',
           style: {
             ...style,
@@ -95,8 +106,7 @@ export default {
     created() {
       this.getData()
     },
-    mounted() {
+    mounted() {},
-    },
     beforeDestroy() {
       this.clearData()
 
@@ -110,28 +120,18 @@ export default {
       },
       getData() {
         this.pageflag = true;
-            currentGET("big2").then((res) => {
+        getDeviceStatistic().then(res => {
+          // this.deviceStatistic = response.data;
           if (!this.timer) {
             console.log("设备总览", res);
           }
-                if (res.success) {
+          if (res.code == 200) {
             this.userOverview = res.data;
-                    this.onlineconfig = {
-                        ...this.onlineconfig,
-                        number: [res.data.onlineNum]
-                    }
-                    this.config = {
-                        ...this.config,
-                        number: [res.data.totalNum]
-                    }
-                    this.offlineconfig = {
-                        ...this.offlineconfig,
-                        number: [res.data.offlineNum]
-                    }
             this.laramnumconfig = {
               ...this.laramnumconfig,
-                        number: [res.data.alarmNum]
+              number: [res.data.alertCount]
             }
+            this.getAllDevice();
             this.switper()
           } else {
             this.pageflag = false;
@@ -149,8 +149,30 @@ export default {
         };
         this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
       },
+      /**查询所有设备 */
+      getAllDevice() {
+        listAllDeviceShort(this.queryParams).then(response => {
+          this.deviceList = response.rows;
+          this.deviceCount = response.total;
+          let online = this.deviceList.filter(x => x.status == 3).length;
+          let offline = this.deviceList.length - online;
+          this.config = {
+            ...this.config,
+            number: [this.deviceCount]
+          }
+          this.onlineconfig = {
+            ...this.onlineconfig,
+            number: [online]
+          }
+          this.offlineconfig = {
+            ...this.offlineconfig,
+            number: [offline]
+          }
+        })
+      },
     },
   };
+
 </script>
 <style lang='scss' scoped>
   .user_Overview {
@@ -219,4 +241,5 @@ export default {
       }
     }
   }
+
 </style>