fix

README.md

@@ -99,4 +99,13 @@ sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES
 
 - 三子系统ES中共同的字段：mmsi、shipName、destination、berthName、monitorPointName
 - 黑烟提供的接口文档地址：https://yx00mdxxzb.feishu.cn/docs/doccnv5xXUqxHYTqMyhj5UkQjPd#
-- 不过期的token： Authorization:Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjJiNzliMGJjLWIzYzktNDYzNi1hODRiLTQ2NGM2OGM5MTYxNSJ9.QHG8CoKPfGizflQAKXcl8et-PpNdmmwRCwGRnt4jgRkwmZaiG5c4ibNg_oVD1XBL2XIU-oVlkHHRoot4g8Zy6w
+- 不过期的token： Authorization:Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjJiNzliMGJjLWIzYzktNDYzNi1hODRiLTQ2NGM2OGM5MTYxNSJ9.QHG8CoKPfGizflQAKXcl8et-PpNdmmwRCwGRnt4jgRkwmZaiG5c4ibNg_oVD1XBL2XIU-oVlkHHRoot4g8Zy6w
+
+> 服务器启动
+
+- cd C:\cbwq\nginx-1.18.0
+- start nginx
+- cd C:\Program Files\Redis
+- redis-server.exe redis.windows.conf
+- cd C:\cbwq\api
+- java -jar ais-kafka.jar

ruoyi-admin/src/main/java/com/ruoyi/web/controller/gas/GasCommonController.java

@@ -4,6 +4,7 @@ import cn.hutool.core.bean.BeanUtil;
 import cn.hutool.core.bean.copier.CopyOptions;
 import cn.hutool.core.convert.Convert;
 import cn.hutool.core.date.DateUtil;
+import cn.hutool.core.map.MapUtil;
 import cn.hutool.core.util.NumberUtil;
 import cn.hutool.core.util.ObjectUtil;
 import cn.hutool.core.util.StrUtil;
@@ -16,6 +17,7 @@ import com.ruoyi.common.constant.CacheConstants;
 import com.ruoyi.common.constant.ElasticConstants;
 import com.ruoyi.common.core.domain.AjaxResult;
 import com.ruoyi.common.core.redis.RedisCache;
+import com.ruoyi.common.utils.StringUtils;
 import com.ruoyi.common.utils.uuid.IdUtils;
 import com.ruoyi.framework.config.ElasticSearchClient;
 import com.ruoyi.system.domain.DeviceBo;
@@ -37,6 +39,7 @@ import com.ruoyi.web.service.IGasCommonService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import lombok.SneakyThrows;
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.access.prepost.PreAuthorize;
@@ -66,6 +69,7 @@ import java.util.stream.Collectors;
 @RestController
 @RequestMapping("/gas/common")
 @Api(tags = "公共接口")
+@Slf4j
 public class GasCommonController {
 
     @Autowired
@@ -177,7 +181,7 @@ public class GasCommonController {
         List<DeviceBo> tz = new ArrayList<>();
         List<DeviceBo> jy = new ArrayList<>();
         List<DeviceBo> st = new ArrayList<>();
-        Map<String, Object> data = new HashMap<>();
+        Map<String, Object> data = MapUtil.newHashMap(6, true);
         List<DeviceBo> so2 = so2Service.queryDeviceList(monitor);
         List<DeviceBo> ais = aisDatabase.queryDeviceList(monitor);
         List<DeviceBo> heiyan = heiYanService.queryDeviceList(monitor);
@@ -291,7 +295,7 @@ public class GasCommonController {
         equalsCondition.put("mmsi", "!0");
         Map<String, Object> rangeCondition = new HashMap<>();
         if (StrUtil.isBlank(startTime)) {
-            startTime = DateUtil.formatDateTime(DateUtil.offsetDay(new Date(), -1));
+            startTime = DateUtil.formatDateTime(DateUtil.offsetHour(new Date(), -3));
         }
         rangeCondition.put("createTime", StrUtil.concat(true, "[", startTime, ",", DateUtil.now(), "]"));
         List<String> orderBy = new ArrayList<>();
@@ -314,7 +318,12 @@ public class GasCommonController {
                     illegalInfo.setLat(jsonObject.getBigDecimal("lat"));
                     illegalInfo.setLng(jsonObject.getBigDecimal("lng"));
                     if (StrUtil.isNotBlank(jsonObject.getStr("receive"))) {
-                        illegalInfo.setReceive(DateUtil.parseDateTime(jsonObject.getStr("receive").replace("T", " ").substring(0, jsonObject.getStr("receive").lastIndexOf("."))));
+                        try {
+                            illegalInfo.setReceive(DateUtil.parseDateTime(jsonObject.getStr("receive").replace("T", " ").substring(0, 19)));
+                        } catch (Exception e) {
+                            log.error("error：value={}", jsonObject.getStr("receive"));
+                            continue;
+                        }
                     }
                     illegalInfo.setHead(jsonObject.getStr("head", "-"));
                     illegalInfo.setSpeed(jsonObject.getStr("speed", "-") + "节");
@@ -330,7 +339,10 @@ public class GasCommonController {
 
     @GetMapping("/queryRdsShipList")
     @ApiOperation("获取redis中所有正常船舶数据-用于地图展示船舶")
-    public AjaxResult queryRedisShipList() {
+    public AjaxResult queryRedisShipList(@RequestParam(required = false) Double areaLatitude1,
+                                         @RequestParam(required = false) Double areaLatitude2,
+                                         @RequestParam(required = false) Double areaLongitude1,
+                                         @RequestParam(required = false) Double areaLongitude2) {
         Map<String, Object> cacheMap = redisCache.getCacheMap("ais:ship");
 
         Map<String, Object> equalsCondition = new HashMap<>();
@@ -352,7 +364,15 @@ public class GasCommonController {
         for (IllegalInfo illegalInfo : pageList) {
             cacheMap.remove(illegalInfo.getMmsi());
         }
-        return AjaxResult.success(toMapList(cacheMap));
+        if (ObjectUtil.hasEmpty(areaLatitude1, areaLatitude2)) {
+            areaLatitude1 = Double.valueOf("31.700130");
+            areaLatitude2 = Double.valueOf("32.417070");
+        }
+        if (ObjectUtil.hasEmpty(areaLongitude1, areaLongitude2)) {
+            areaLongitude1 = Double.valueOf("118.413390");
+            areaLongitude2 = Double.valueOf("121.327510");
+        }
+        return AjaxResult.success(toMapList(cacheMap, areaLatitude1, areaLatitude2, areaLongitude1, areaLongitude2));
     }
 
     @GetMapping("/queryShipMonitorInfo")
@@ -626,11 +646,15 @@ public class GasCommonController {
         }
     }
 
-    private List<Object> toMapList(Map<String, Object> listMap) {
+    private List<Object> toMapList(Map<String, Object> listMap, Double areaLatitude1, Double areaLatitude2, Double areaLongitude1, Double areaLongitude2) {
         List<Object> resultList = new ArrayList<>();
         for (Map.Entry<String, Object> entry : listMap.entrySet()) {
-            resultList.add(JSONUtil.toBean(entry.getValue().toString(), HuiHAisInfo.class));
+            HuiHAisInfo huiHAisInfo = JSONUtil.toBean(entry.getValue().toString(), HuiHAisInfo.class);
+            if (StringUtils.isInArea(Convert.toDouble(huiHAisInfo.getLat()), Convert.toDouble(huiHAisInfo.getLng()), areaLatitude1, areaLatitude2, areaLongitude1, areaLongitude2)) {
+                resultList.add(huiHAisInfo);
+            }
         }
+        log.info("redis get ship data size:{}", resultList.size());
         return resultList;
     }
 

ruoyi-admin/src/main/resources/application-prod.yml

@@ -23,9 +23,9 @@ spring:
       slaveso2:
         # 从数据源开关/默认关闭
         enabled: true
-        url: jdbc:mysql://198.17.25.31:3306/ship?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
-        username: root
-        password: 1qaz!QAZ
+        url: jdbc:mysql://198.17.188.56:3306/ship?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+        username: canal
+        password: canal
       # 从库数据源(黑烟)
       slaveblack:
         # 从数据源开关/默认关闭
@@ -134,8 +134,8 @@ third:
   shipEepReportRecInfo: http://198.17.188.111:6201/huiyan/getShipEepReportRec # 船舶进出港记录
   shipBaseInfo: http://198.17.239.239:7001/getInfosByCondition # 船舶基本信息
   shipDynamicInfo: http://198.17.239.239:9004/getInfosByMmsi?mmsi= #船舶动态数据信息
-  userTokenInfo: http://36.156.155.131:8099/api/portal/user/userInfo # 大交管用户信息
-  userLogin: http://36.156.155.131:8099/api/main/mobile/login # 总和平台登录接口
+  userTokenInfo: http://198.17.188.64:80/slipperBack/portal/user/userInfo # 大交管用户信息
+  userLogin: http://198.17.188.64:80/slipperBack/main/mobile/login # 综合平台登录接口
 
 system:
   security: self # 走何种校验方式 self自身用户密码校验；third第三方登录校验

ruoyi-common/src/main/java/com/ruoyi/common/utils/StringUtils.java

@@ -1,5 +1,9 @@
 package com.ruoyi.common.utils;
 
+import com.ruoyi.common.constant.Constants;
+import com.ruoyi.common.core.text.StrFormatter;
+
+import javax.servlet.http.HttpServletRequest;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.HashSet;
@@ -7,11 +11,6 @@ import java.util.List;
 import java.util.Map;
 import java.util.Set;
 
-import com.ruoyi.common.constant.Constants;
-import com.ruoyi.common.core.text.StrFormatter;
-
-import javax.servlet.http.HttpServletRequest;
-
 /**
  * 字符串工具类
  *
@@ -430,4 +429,37 @@ public class StringUtils extends org.apache.commons.lang3.StringUtils {
         }
         return filename;
     }
+
+    /**
+     * 判断是否在区域内
+     *
+     * @param latitue
+     * @param longitude
+     * @param areaLatitude1
+     * @param areaLatitude2
+     * @param areaLongitude1
+     * @param areaLongitude2
+     * @return
+     */
+    public static boolean isInArea(Double latitue, Double longitude, Double areaLatitude1, Double areaLatitude2, Double areaLongitude1, Double areaLongitude2) {
+        if (isInRange(latitue, areaLatitude1, areaLatitude2)) {//如果在纬度的范围内
+            if (areaLongitude1 * areaLongitude2 > 0) {//如果都在东半球或者都在西半球
+                return isInRange(longitude, areaLongitude1, areaLongitude2);
+            } else {//如果一个在东半球，一个在西半球
+                if (Math.abs(areaLongitude1) + Math.abs(areaLongitude2) < 180.0) {//如果跨越0度经线在半圆的范围内
+                    return isInRange(longitude, areaLongitude1, areaLongitude2);
+                } else {//如果跨越180度经线在半圆范围内
+                    double left = Math.max(areaLongitude1, areaLongitude2);//东半球的经度范围left-180
+                    double right = Math.min(areaLongitude1, areaLongitude2);//西半球的经度范围right-（-180）
+                    return isInRange(longitude, left, 180.0) || isInRange(longitude, right, -180.0);
+                }
+            }
+        } else {
+            return false;
+        }
+    }
+
+    private static boolean isInRange(Double point, Double left, Double right) {
+        return point >= Math.min(left, right) && point <= Math.max(left, right);
+    }
 }

ruoyi-system/src/main/resources/mapper/system/AisDatabaseMapper.xml

@@ -26,7 +26,7 @@
                    when 1 then '在线'
                    when 0 then '离线'
                    end                             status,
-               'ais'                            as deviceType,
+               '嗅探'                             as deviceType,
                now()                            as updateTime,
                'ais_illegal_ship'               as source
         from sem_instrument

ruoyi-system/src/main/resources/mapper/system/HeiYanMapper.xml

@@ -20,7 +20,7 @@
                concat(longitude, ',', latitude) as                                latilongti,
                name,
                snapPos                          as                                monitorName,
-               type                             as                                deviceType,
+               '黑烟'                             as                                deviceType,
                case status when 'ENABLED' then '在线' when 'DISABLED' then '离线' end status,
                orgName,
                liveStreamUrl,

ruoyi-system/src/main/resources/mapper/system/So2Mapper.xml

@@ -9,22 +9,20 @@
         from monitor_point t1
             left join device d
         on t1.id = d.monitor_point_id
+        where d.type = 0
         group by t1.id;
     </select>
 
     <select id="queryDeviceCount" resultType="java.lang.Integer">
         select count(1)
         from device
+        where type = 0
     </select>
 
     <select id="queryDeviceList" resultType="com.ruoyi.system.domain.DeviceBo">
         select d.id                                 as deviceId,
                d.name                               as name,
-               case d.type
-                   when 0 then 'ais设备'
-                   when 1 then '遥测设备'
-                   when 2 then '气象站设备'
-                   end                                 deviceType,
+               '光谱'                                 as deviceType,
                t1.name                                 monitorName,
                case online_status
                    when 0 then '在线'
@@ -36,6 +34,7 @@
         from device d
                  left join monitor_point t1
                            on t1.id = d.monitor_point_id
+        where d.type = 0
     </select>
 
     <select id="queryById" resultType="java.util.Map">

ruoyi-ui/src/components/map/index.vue

@@ -1,210 +1,211 @@
 <template>
-    <div style="width:100%;height:100%">
-        <div id="map" ref="rootmap"></div>
-
-        <div class="shipDiv" v-show="deviceShow">
-            <div class="shipTitle">
-                <span style="float:left">{{ deviceData.name }}</span>
-                <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="deviceShow=false"></i>
-            </div>
-            <div style="padding—left:10rem" class="shipContent">
-
-                <el-tabs v-model="d_activeName" @tab-click="handleClick1">
-                    <el-tab-pane label="设备信息" name="d_first">
-                        <el-row :gutter="3" style="margin-top:5rem">
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595;">设备名称:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.name }}</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.monitorName }}</div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="3" style="margin-top:3rem">
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">设备状态:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.status }}</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">管辖机构:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.orgName }}</div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="3" style="margin-top:3rem">
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">更新时间:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.updateTime }}</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经纬度:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.latilongti }}</div>
-                            </el-col>
-                        </el-row>
-
-                    </el-tab-pane>
-                    <el-tab-pane label="嫌疑船舶" name="d_second">
-                        <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
-                            <el-table-column type="index" label="序号" width="50">
-                            </el-table-column>
-                            <el-table-column property="mmsi" label="MMSI" width="100">
-                            </el-table-column>
-                            <el-table-column property="shipName" label="船名" width="100">
-                            </el-table-column>
-                            <el-table-column property="values" label="监测值" width="100">
-                            </el-table-column>
-                            <el-table-column property="createTime" label="监测时间">
-                            </el-table-column>
-                        </el-table>
-
-                    </el-tab-pane>
-
-                    <el-tab-pane label="违规船舶" name="d_thrid">
-                        <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
-                            <el-table-column type="index" label="序号" width="50">
-                            </el-table-column>
-                            <el-table-column property="mmsi" label="MMSI" width="100">
-                            </el-table-column>
-                            <el-table-column property="shipName" label="船名" width="100">
-                            </el-table-column>
-                            <el-table-column property="values" label="监测值" width="100">
-                            </el-table-column>
-                            <el-table-column property="createTime" label="监测时间">
-                            </el-table-column>
-                        </el-table>
-
-                    </el-tab-pane>
-                </el-tabs>
-
-                <!-- <el-row :gutter="3" style="margin-top:3rem">
+  <div style="width:100%;height:100%">
+    <div id="map" ref="rootmap"></div>
+
+    <div class="shipDiv" v-show="deviceShow">
+      <div class="shipTitle">
+        <span style="float:left">{{ deviceData.name }}</span>
+        <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="deviceShow=false"></i>
+      </div>
+      <div style="padding—left:10rem" class="shipContent">
+
+        <el-tabs v-model="d_activeName" @tab-click="handleClick1">
+          <el-tab-pane label="设备信息" name="d_first">
+            <el-row :gutter="3" style="margin-top:5rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595;">设备名称:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.name }}</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.monitorName }}</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">设备状态:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.status }}</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">管辖机构:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.orgName }}</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">更新时间:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.updateTime }}</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经纬度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.latilongti }}</div>
+              </el-col>
+            </el-row>
+
+          </el-tab-pane>
+          <el-tab-pane label="嫌疑船舶" name="d_second">
+            <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
+              <el-table-column type="index" label="序号" width="50">
+              </el-table-column>
+              <el-table-column property="mmsi" label="MMSI" width="100">
+              </el-table-column>
+              <el-table-column property="shipName" label="船名" width="100">
+              </el-table-column>
+              <el-table-column property="values" label="监测值" width="100">
+              </el-table-column>
+              <el-table-column property="createTime" label="监测时间">
+              </el-table-column>
+            </el-table>
+
+          </el-tab-pane>
+
+          <el-tab-pane label="违规船舶" name="d_thrid">
+            <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
+              <el-table-column type="index" label="序号" width="50">
+              </el-table-column>
+              <el-table-column property="mmsi" label="MMSI" width="100">
+              </el-table-column>
+              <el-table-column property="shipName" label="船名" width="100">
+              </el-table-column>
+              <el-table-column property="values" label="监测值" width="100">
+              </el-table-column>
+              <el-table-column property="createTime" label="监测时间">
+              </el-table-column>
+            </el-table>
+
+          </el-tab-pane>
+        </el-tabs>
+
+        <!-- <el-row :gutter="3" style="margin-top:3rem">
+      <el-col :span="4">
+        <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+      </el-col>
+      <el-col :span="4">
+        <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="3" style="margin-top:3rem">
+      <el-col :span="4">
+        <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+      </el-col>
+      <el-col :span="4">
+        <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+      </el-col> -->
+        <!-- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button> -->
+      </div>
+    </div>
+
+    <div class="shipDiv" v-show="shipShow">
+      <div class="shipTitle">
+        <span style="float:left">{{ shipName.shipName }}</span>
+        <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
+      </div>
+      <div style="padding—left:10rem" class="shipContent">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="AIS信息" name="first">
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.mmsi }}</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.monitorPointName }}</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lng }}</div>
+              </el-col>
+              <el-col :span="4">
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lat }}</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="3" style="margin-top:3rem">
               <el-col :span="4">
                 <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
               </el-col>
               <el-col :span="8">
-                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.speed }}</div>
               </el-col>
               <el-col :span="4">
-                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">实际航向:</div>
               </el-col>
               <el-col :span="8">
-                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.head }}</div>
               </el-col>
             </el-row>
             <el-row :gutter="3" style="margin-top:3rem">
               <el-col :span="4">
-                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">地面航线:</div>
               </el-col>
               <el-col :span="8">
-                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.course }}</div>
               </el-col>
               <el-col :span="4">
-                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
+                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">位置接收时间:</div>
               </el-col>
               <el-col :span="8">
-                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
-              </el-col> -->
-                <!-- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button> -->
-            </div>
-        </div>
-
-        <div class="shipDiv" v-show="shipShow">
-            <div class="shipTitle">
-                <span style="float:left">{{ shipName.shipName }}</span>
-                <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
-            </div>
-            <div style="padding—left:10rem" class="shipContent">
-                <el-tabs v-model="activeName" @tab-click="handleClick">
-                    <el-tab-pane label="AIS信息" name="first">
-                        <el-row :gutter="3" style="margin-top:3rem">
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.mmsi }}</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.monitorPointName }}</div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="3" style="margin-top:3rem">
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lng }}</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lat }}</div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="3" style="margin-top:3rem">
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.speed }}</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">实际航向:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.head }}</div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="3" style="margin-top:3rem">
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">地面航线:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.course }}</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">位置接收时间:</div>
-                            </el-col>
-                            <el-col :span="8">
-                                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.receive }}</div>
-                            </el-col>
-                        </el-row>
-                        <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem;display:none" icon="el-icon-location-information">历史轨迹</el-button>
-                    </el-tab-pane>
-                    <el-tab-pane label="主要监测数据" name="second">
-                        <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tableData.main" highlight-current-row height="200px" style="width: 100%" class="tableSc">
-                            <el-table-column type="index" label="序号" width="50">
-                            </el-table-column>
-                            <el-table-column property="monitorPointName" label="监测点" width="100">
-                            </el-table-column>
-                            <el-table-column :label="'硫含量'">
-                                <template slot-scope="scope">
-                      <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalPer" style="color:red">{{ scope.row.so2Percent }}% ↑ {{ ((scope.row.so2Percent - normalPer) / normalPer * 100).toFixed(0) }}%</div>
-                      <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent <= normalPer">{{ scope.row.so2Percent }}%</div>
-                    </template>
+                <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.receive }}</div>
+              </el-col>
+            </el-row>
+            <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem;display:none" icon="el-icon-location-information">历史轨迹</el-button>
+          </el-tab-pane>
+          <el-tab-pane label="主要监测数据" name="second">
+            <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tableData.main" highlight-current-row height="200px" style="width: 100%" class="tableSc">
+              <el-table-column type="index" label="序号" width="50">
+              </el-table-column>
+              <el-table-column property="monitorPointName" label="监测点" width="100">
+              </el-table-column>
+              <el-table-column :label="'硫含量'">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalPer" style="color:red">{{ scope.row.so2Percent }}% ↑ {{ ((scope.row.so2Percent - normalPer) / normalPer * 100).toFixed(0) }}%</div>
+                  <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent <= normalPer">正常</div>
+                </template>
               </el-table-column>
               <el-table-column
                 :label="'黑度'">
-                  <template slot-scope="scope">
-                      <div v-if="scope.row.rcgSoot!=null && scope.row.rcgSoot > normalCount" style="color:red">
-                          {{ scope.row.rcgSoot }}度 ↑ {{ ((scope.row.rcgSoot - normalCount) / normalCount * 100).toFixed(0) }}%
-                      </div>
-                      <div v-if="scope.row.rcgSoot!=null &&  scope.row.rcgSoot <= normalCount">{{ scope.row.rcgSoot }}度</div>
-                  </template>
+                <template slot-scope="scope">
+                  <div v-if="scope.row.rcgSoot!=null && scope.row.rcgSoot > normalCount" style="color:red">
+                    {{ scope.row.rcgSoot }}度 ↑ {{ ((scope.row.rcgSoot - normalCount) / normalCount * 100).toFixed(0) }}%
+                  </div>
+                  <div v-if="scope.row.rcgSoot!=null &&  scope.row.rcgSoot < normalCount">正常</div>
+                  <div v-if="scope.row.rcgSoot == null && scope.row.illegalType === 'heiyan'">正常</div>
+                </template>
               </el-table-column>
               <el-table-column
                 property="createTime"
@@ -236,41 +237,41 @@
               <el-table-column
                 :label="'SO2浓度'"
               >
-                 <template slot-scope="scope">
-                     <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration > normalPer" style="color:red">
-                         {{ scope.row.so2Concentration }}% ↑
-                     </div>
-                     <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration <= normalPer">{{ scope.row.so2Concentration }}%</div>
-                 </template>
+                <template slot-scope="scope">
+                  <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration > normalPer" style="color:red">
+                    {{ scope.row.so2Concentration }}% ↑
+                  </div>
+                  <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration <= normalPer">{{ scope.row.so2Concentration }}%</div>
+                </template>
               </el-table-column>
               <el-table-column
                 :label="'NO2浓度'"
               >
-                 <template slot-scope="scope">
-                     <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration > normalPer" style="color:red">
-                         {{ scope.row.no2Concentration }}% ↑
-                     </div>
-                     <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration <= normalPer">{{ scope.row.no2Concentration }}%</div>
-                 </template>
+                <template slot-scope="scope">
+                  <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration > normalPer" style="color:red">
+                    {{ scope.row.no2Concentration }}% ↑
+                  </div>
+                  <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration <= normalPer">{{ scope.row.no2Concentration }}%</div>
+                </template>
               </el-table-column>
               <el-table-column
                 :label="'CO2浓度'"
               >
-                 <template slot-scope="scope">
-                     <div v-if="scope.row.co2Concentration!=null &&  scope.row.co2Concentration > normalPer" style="color:red">
-                         {{ scope.row.co2Concentration }}% ↑
-                     </div>
-                     <div v-if=" scope.row.co2Concentration!=null && scope.row.co2Concentration <= normalPer">{{ scope.row.co2Concentration }}%</div>
-                 </template>
+                <template slot-scope="scope">
+                  <div v-if="scope.row.co2Concentration!=null &&  scope.row.co2Concentration > normalPer" style="color:red">
+                    {{ scope.row.co2Concentration }}% ↑
+                  </div>
+                  <div v-if=" scope.row.co2Concentration!=null && scope.row.co2Concentration <= normalPer">{{ scope.row.co2Concentration }}%</div>
+                </template>
               </el-table-column>
               <el-table-column
                 :label="'硫碳比'">
-                  <template slot-scope="scope">
-                      <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalCount" style="color:red">
-                          {{ scope.row.so2Percent }}度 ↑
-                      </div>
-                      <div v-if="scope.row.so2Percent!=null &&  scope.row.so2Percent <= normalCount">{{ scope.row.so2Percent }}度</div>
-                  </template>
+                <template slot-scope="scope">
+                  <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalCount" style="color:red">
+                    {{ scope.row.so2Percent }}度 ↑
+                  </div>
+                  <div v-if="scope.row.so2Percent!=null &&  scope.row.so2Percent <= normalCount">{{ scope.row.so2Percent }}度</div>
+                </template>
               </el-table-column>
               <el-table-column
                 property="createTime"
@@ -381,846 +382,845 @@ import ImageLayer from "ol/layer/Image";
 import View from "ol/View";
 import VueAliplayerV2 from "vue-aliplayer-v2";
 
-import { getTopLeft, getWidth } from "ol/extent";
+import {getTopLeft, getWidth} from "ol/extent";
 
 import ImageWMS from "ol/source/ImageWMS";
 import WMTS from "ol/source/WMTS";
 import TileWMS from "ol/source/TileWMS";
 import WMTSTileGrid from "ol/tilegrid/WMTS";
-import { get as getProjection, transform } from "ol/proj";
+import {get as getProjection, transform} from "ol/proj";
 
-import { Vector as SourceVec } from "ol/source";
-import { Feature } from "ol";
-import { LineString, Point } from "ol/geom";
-import { Icon, Stroke, Style } from "ol/style";
-import { Vector as LayerVec } from "ol/layer";
-import { queryDatabymmsi, queryShipByDeviceId } from "@/api/data/deviceData";
-import WebGLPointsLayer from 'ol/layer/WebGLPoints';
+import {Vector as SourceVec} from "ol/source";
+import {Feature} from "ol";
+import {LineString, Point} from "ol/geom";
+import {Icon, Stroke, Style} from "ol/style";
+import {Vector as LayerVec} from "ol/layer";
+import {queryDatabymmsi, queryShipByDeviceId} from "@/api/data/deviceData";
 
 let ispro = process.env.NODE_ENV === "production";
 let that = null;
 let mapv = null;
 //  ispro = false;
 export default {
-    props: {
-        src: {
-            type: String,
-            required: false
-        }
-    },
-    data() {
-        return {
-            map: null,
-            shipName: '',
-            layersgroup: [{ name: "普通船", label: "普通船" }],
-            deviceShow: false,
-            deviceData: '',
-            showvideos: false,
-            checkList: [],
-            drawLayer: null,
-            draw: null,
-            normalPer: 0.1,
-            normalCount: 1,
-            activeName: 'first',
-            tabledatas: [],
-            deviceTableShow: false,
-            posints: {},
-
-            options: {
-                preload: true,
-                autoplay: true,
-                rePlay: true,
-                isLive: true, //切换为直播流的时候必填
-                format: 'm3u8', //切换为直播流的时候必填
-            },
-            source: "",
-            pointDevice: {
-                name: '',
-                list: [],
-            },
-            // deviceList:[],
-
-            d_activeName: 'd_first',
-            tableData: { minor: [], main: [] },
-            addrlist: [{ name: "南京四桥", location: [1, 1] }],
-            caddr: "南京四桥",
-            cselect: [],
-            shipShow: false,
-            shipdata: {},
-        };
-    },
-    props: ['deviceList'],
-    components: {
-        VueAliplayerV2
-    },
-    mounted() {
-        that = this;
-        if (ispro) {
-            this.initprod();
-        } else {
-            this.initdev();
-        }
-        mapv = this.map;
-
-
-        this.map.on("click", function(e) {
-            // console.log(e)
-            var feature = that.map.forEachFeatureAtPixel(e.pixel,
-                function(feature) {
-                    return feature;
-                });
-            if (feature) { //这里说明我们点击的是点标记，
-                let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
-                if (tadata) {
-                    if (tadata.sectionId == "line") {
-                        // alert("我是线：" + tadata.towerNumber)
-                    }
-                    if (tadata.sectionId == "point") {
-                        if (tadata.type == "ship") {
-                            that.shipShow = true;
-                            that.deviceShow = false;
-                            that.deviceTableShow = false
-                            that.shipName = tadata.data;
-                            that.activeName = "first";
-
-                        } else if (tadata.type == "device") {
-                            that.deviceShow = true;
-                            that.shipShow = false;
-                            that.deviceTableShow = false
-                            that.deviceData = tadata.data;
-                            that.d_activeName = 'd_first';
-                            if (tadata.data.source == "heiyan_ship_recognition") {
-                                that.source = tadata.data.liveStreamUrl;
-                                setTimeout(function() {
-                                    that.$refs.VueAliplayerV2.play();
-                                }, 1000)
-                                that.showvideos = true;
-
-                            }
-
-                        }
-                        //  alert("我是点："+tadata.data)
-                    }
-                    //含有lnglat 参数的点标记触发事件
-                }
-            }
+  props: {
+    src: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      map: null,
+      shipName: '',
+      layersgroup: [{name: "所有船舶", label: "所有船舶"}],
+      deviceShow: false,
+      deviceData: '',
+      showvideos: false,
+      checkList: [],
+      drawLayer: null,
+      draw: null,
+      normalPer: 0.1,
+      normalCount: 1,
+      activeName: 'first',
+      tabledatas: [],
+      deviceTableShow: false,
+      posints: {},
+
+      options: {
+        preload: true,
+        autoplay: true,
+        rePlay: true,
+        isLive: true, //切换为直播流的时候必填
+        format: 'm3u8', //切换为直播流的时候必填
+      },
+      source: "",
+      pointDevice: {
+        name: '',
+        list: [],
+      },
+      // deviceList:[],
+
+      d_activeName: 'd_first',
+      tableData: {minor: [], main: []},
+      addrlist: [{name: "南京四桥", location: [1, 1]}],
+      caddr: "南京四桥",
+      cselect: [],
+      shipShow: false,
+      shipdata: {},
+    };
+  },
+  props: ['deviceList'],
+  components: {
+    VueAliplayerV2
+  },
+  mounted() {
+    that = this;
+    if (ispro) {
+      this.initprod();
+    } else {
+      this.initdev();
+    }
+    mapv = this.map;
+
+
+    this.map.on("click", function (e) {
+      // console.log(e)
+      var feature = that.map.forEachFeatureAtPixel(e.pixel,
+        function (feature) {
+          return feature;
         });
+      if (feature) { //这里说明我们点击的是点标记，
+        let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
+        if (tadata) {
+          if (tadata.sectionId == "line") {
+            // alert("我是线：" + tadata.towerNumber)
+          }
+          if (tadata.sectionId == "point") {
+            if (tadata.type == "ship") {
+              that.shipShow = true;
+              that.deviceShow = false;
+              that.deviceTableShow = false
+              that.shipName = tadata.data;
+              that.activeName = "first";
+
+            } else if (tadata.type == "device") {
+              that.deviceShow = true;
+              that.shipShow = false;
+              that.deviceTableShow = false
+              that.deviceData = tadata.data;
+              that.d_activeName = 'd_first';
+              if (tadata.data.source == "heiyan_ship_recognition") {
+                that.source = tadata.data.liveStreamUrl;
+                setTimeout(function () {
+                  that.$refs.VueAliplayerV2.play();
+                }, 1000)
+                that.showvideos = true;
+
+              }
+
+            }
+            //  alert("我是点："+tadata.data)
+          }
+          //含有lnglat 参数的点标记触发事件
+        }
+      }
+    });
 
 
-        var view=this.map.getView();
+    var view = this.map.getView();
 
-    view.on('change:resolution',function(e){
-        that.$parent.getallshipData();
+    view.on('change:resolution', function (e) {
+      that.$parent.getallshipData();
     });
-    view.on('change:center',function(e){
-        that.$parent.getallshipData();
+    view.on('change:center', function (e) {
+      that.$parent.getallshipData();
     });
-    this.map.on('moveend',function(e){
-         that.$parent.getallshipData();
+    this.map.on('moveend', function (e) {
+      that.$parent.getallshipData();
     });
-        // this.map.on("change:resolution", function(e) {
-        //    console.log('size改变！');
-        //     that.$parent.getallshipData();
-        // });
-        //  this.addpoint();
-        //  this.addline();
-
-        setTimeout(function() {
-            // alert(11);
-            that.closevideo();
-
-        }, 1000)
-
-        window.getmapviewlatlng = function() {
-            var pps = mapv.getView().calculateExtent(mapv.getSize());
-            return (that.transpoints([
-                [pps[0], pps[1]],
-                [pps[2], pps[3]]
-            ], 1));
-        }
+    // this.map.on("change:resolution", function(e) {
+    //    console.log('size改变！');
+    //     that.$parent.getallshipData();
+    // });
+    //  this.addpoint();
+    //  this.addline();
+
+    setTimeout(function () {
+      // alert(11);
+      that.closevideo();
+
+    }, 1000)
+
+    window.getmapviewlatlng = function () {
+      var pps = mapv.getView().calculateExtent(mapv.getSize());
+      return (that.transpoints([
+        [pps[0], pps[1]],
+        [pps[2], pps[3]]
+      ], 1));
+    }
 
 
+  },
+  methods: {
+    //[[1111,1111]]
+    closevideo() {
+      this.showvideos = false;
+      this.$refs.VueAliplayerV2.pause();
     },
-    methods: {
-        //[[1111,1111]]
-        closevideo() {
-            this.showvideos = false;
-            this.$refs.VueAliplayerV2.pause();
-        },
-        handleClick1: function(tab, event) {
-
-            var sect = tab.name;
-            if (sect == "d_first") {
-                return;
-            }
-
-            var q = {
-                deviceId: this.deviceData.deviceId,
-                illegalStatus: sect == "d_second" ? 2 : 3,
-                index: this.deviceData.source
-            }
-
-            this.tabledatas = [];
-            queryShipByDeviceId(q).then(data => {
-                // console.log(data);
-                data.data.forEach(element => {
-                    element["values"] = element.illegalType == "heiyan" ? element.rcgSoot : (element.illegalType == "guangpu" ? element.so2Percent : (element.illegalType == "xiutan" ? element.so2Percent : 0));
-                    this.tabledatas.push(element);
-                });
-            });
-            //dd
-
-        },
-        clickcg: (value) => {
-
-            that.pointDevice.list = that.deviceList[value];
-            that.deviceTableShow = true;
-            that.pointDevice.name = value;
-            that.addrlist.forEach(element => {
-                if (element.name == value) {
-                    var lo = that.transpoints(element.location, 0)[0];
-                    // console.log(lo)
-                    mapv.getView().setCenter(lo);
-                }
-            });
-
-        },
-        clickly: (value) => {
-            if (value.indexOf('普通船') != -1) {
-                that.$parent.startgetall();
-                // console.log(that.posints)
-
-            } else {
-                that.$parent.stopgetall();
-                for (const key in that.posints) {
-                    if (key.indexOf("ship_normal_") == -1) {
-                        continue;
-                    }
-                    var lays = that.posints[key];
-                    if (lays == null) continue;
-                    lays.disposeInternal();
-                    that.map.removeLayer(lays);
-                    that.posints[key] = null;
-                }
-
-            }
+    handleClick1: function (tab, event) {
+
+      var sect = tab.name;
+      if (sect == "d_first") {
+        return;
+      }
+
+      var q = {
+        deviceId: this.deviceData.deviceId,
+        illegalStatus: sect == "d_second" ? 2 : 3,
+        index: this.deviceData.source
+      }
+
+      this.tabledatas = [];
+      queryShipByDeviceId(q).then(data => {
+        // console.log(data);
+        data.data.forEach(element => {
+          element["values"] = element.illegalType == "heiyan" ? element.rcgSoot : (element.illegalType == "guangpu" ? element.so2Percent : (element.illegalType == "xiutan" ? element.so2Percent : 0));
+          this.tabledatas.push(element);
+        });
+      });
+      //dd
 
-        },
-        setaddrlist(list) {
-            this.addrlist = list;
-            this.caddr = list[0].name;
-            var lo = that.transpoints(list[0].location, 0)[0];
-            mapv.getView().setCenter(lo);
-        },
-        addshipData(list) {
+    },
+    clickcg: (value) => {
+
+      that.pointDevice.list = that.deviceList[value];
+      that.deviceTableShow = true;
+      that.pointDevice.name = value;
+      that.addrlist.forEach(element => {
+        if (element.name == value) {
+          var lo = that.transpoints(element.location, 0)[0];
+          // console.log(lo)
+          mapv.getView().setCenter(lo);
+        }
+      });
 
-        },
-        handleClick(tab, event) {
-            // console.log(tab, event);
-            var sect = tab.name;
-            if (sect == "first") {
-                return;
-            }
-            var q = {
-                mmsi: this.shipName.mmsi
-            }
+    },
+    clickly: (value) => {
+      if (value.indexOf('所有船舶') != -1) {
+        that.$parent.startgetall();
+        // console.log(that.posints)
+
+      } else {
+        that.$parent.stopgetall();
+        for (const key in that.posints) {
+          if (key.indexOf("ship_normal_") == -1) {
+            continue;
+          }
+          var lays = that.posints[key];
+          if (lays == null) continue;
+          lays.disposeInternal();
+          that.map.removeLayer(lays);
+          that.posints[key] = null;
+        }
 
-            this.tableData = { minor: [], main: [] };
-            queryDatabymmsi(q).then(data => {
-                // console.log(data);
-                this.tableData = data.data;
-                //  console.log(deviceList);
-            });
+      }
 
+    },
+    setaddrlist(list) {
+      this.addrlist = list;
+      this.caddr = list[0].name;
+      var lo = that.transpoints(list[0].location, 0)[0];
+      mapv.getView().setCenter(lo);
+    },
+    addshipData(list) {
 
-        },
-        transpoints: function(points, type) {
-            if (false) {
-                return points;
-            } else {
-                if (type == 1) {
-                    var pp = [];
-                    points.forEach(point => {
-                        pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
-                    });
-                    return pp;
-                } else {
-                    var pp = [];
-                    points.forEach(point => {
-                        pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
-                    });
-                    return pp;
-                }
-            }
-        },
-        initdev: function() {
-
-            function getWMTSLayer(url, layer) {
-                let key = "98ec3e37b32974c2d58ea1a790640fe7"
-                let projection = getProjection("EPSG:3857");
-                let projectionExtent = projection.getExtent();
-                let size = getWidth(projectionExtent) / 256;
-
-                function getResolutions() {
-                    let resolutions = [];
-                    for (let z = 1; z < 19; ++z) {
-                        resolutions[z] = size / Math.pow(2, z);
-                    }
-                    return resolutions
-                }
-
-                return new TileLayer({
-                    source: new WMTS({
-                        url: url,
-                        layer: layer,
-                        style: "default",
-                        matrixSet: "w",
-                        format: "tiles",
-                        tileGrid: new WMTSTileGrid({
-                            origin: getTopLeft(projectionExtent),
-                            resolutions: getResolutions(),
-                            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
-                        }),
-                    }),
-
-                })
+    },
+    handleClick(tab, event) {
+      // console.log(tab, event);
+      var sect = tab.name;
+      if (sect == "first") {
+        return;
+      }
+      var q = {
+        mmsi: this.shipName.mmsi
+      }
+
+      this.tableData = {minor: [], main: []};
+      queryDatabymmsi(q).then(data => {
+        // console.log(data);
+        this.tableData = data.data;
+        //  console.log(deviceList);
+      });
 
-            }
 
-            var projection = getProjection("EPSG:3857");
-            var format = 'image/png';
-            var bounds = [13325725.763124488, 3757032.814272983,
-                13345293.642365493, 3776600.693513988
-            ];
-            var untiled = new ImageLayer({
-                source: new ImageWMS({
-                    ratio: 1,
-                    url: 'http://36.156.155.131:8090/geoserver/wms',
-                    params: {
-                        'FORMAT': format,
-                        'VERSION': '1.1.1',
-                        "STYLES": '',
-                        "CJAUTH": 'CJUSER',
-                        "LAYERS": 'CJ:G_CJ_NJ',
-                        "TRANSPARENT": 'true',
-                        "exceptions": 'application/vnd.ogc.se_inimage',
-                    }
-                })
-            });
-
-
-            const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');
-
-            var tiled = new TileLayer({
-                visible: false,
-                source: new TileWMS({
-                    url: 'http://36.156.155.131:8090/geoserver/wms',
-                    params: {
-                        'FORMAT': format,
-                        'VERSION': '1.1.1',
-                        tiled: true,
-                        "STYLES": '',
-                        "CJAUTH": 'CJUSER',
-                        "LAYERS": 'CJ:G_CJ_NJ',
-                        "TRANSPARENT": 'true',
-                        "exceptions": 'application/vnd.ogc.se_inimage',
-                        tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
-                    }
-                })
-            });
-
-            var map = new Map({
-                target: 'map',
-                layers: [
-                    ign,
-                    getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
-
-                    untiled,
-                    tiled
-                ],
-                view: new View({
-                    projection: projection
-                })
-            });
-            // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
-            this.map = map;
-            //  map.getView().setCenter(
-            //     [118.642876, 31.970445]
-            // );
-            map.getView().setCenter(this.transpoints([
-                [118.642876, 31.970445]
-            ], 0)[0]);
-            map.getView().setZoom(13);
-        },
-        initdev1: function() {
-            const proj3857 = getProjection("EPSG:3857");
-            const tileGrid = new WMTSTileGrid({
-                tileSize: [256, 256],
-                origin: [-2.003750834e7, 2.003750834e7],
-                extent: [-2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7],
-                resolutions: [
-                    76.43702827453613,
-                    38.218514137268066,
-                    19.109257068634033,
-                    9.554628534317017,
-                    4.777314267158508
-                ],
-                matrixIds: [
-                    "EPSG:3857:10",
-                    "EPSG:3857:11",
-                    "EPSG:3857:12",
-                    "EPSG:3857:13",
-                    "EPSG:3857:14"
-                ]
-            });
-
-            const ign_source = new WMTS({
-                url: "http://geo.xt.wenhq.top:8083/geoserver/gwc/service/wmts?",
-                layer: "test:nj10",
-                matrixSet: "EPSG:3857",
-                format: "image/png",
-                projection: proj3857,
-                tileGrid: tileGrid,
-                style: ""
-            });
-
-            const ign = new TileLayer({
-                source: ign_source
-            });
-            const map = new Map({
-                target: "map",
-                layers: [ign],
-                view: new View({
-                    center: [0, 0],
-                    zoom: 2
-                })
-            });
-            map
-                .getView()
-                .fit(
-                    [
-                        13149614.849955281,
-                        3639625.538826909,
-                        13306157.88388332,
-                        3874440.0897189667
-                    ],
-                    map.getSize()
-                );
-
-            this.map = map;
-            map.getView().setCenter(this.transpoints([
-                [118.642876, 31.970445]
-            ], 0)[0]);
-            map.getView().setZoom(13);
-        },
-        initprod: function() {
-            // const proj3857 = getProjection("EPSG:4326");
-            function getWMTSLayer(url, layer) {
-                let key = "98ec3e37b32974c2d58ea1a790640fe7"
-                let projection = getProjection("EPSG:3857");
-                let projectionExtent = projection.getExtent();
-                let size = getWidth(projectionExtent) / 256;
-
-                function getResolutions() {
-                    let resolutions = [];
-                    for (let z = 1; z < 19; ++z) {
-                        resolutions[z] = size / Math.pow(2, z);
-                    }
-                    return resolutions
-                }
-
-                return new TileLayer({
-                    source: new WMTS({
-                        url: url,
-                        layer: layer,
-                        style: "default",
-                        matrixSet: "w",
-                        format: "tiles",
-                        tileGrid: new WMTSTileGrid({
-                            origin: getTopLeft(projectionExtent),
-                            resolutions: getResolutions(),
-                            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
-                        }),
-                    }),
-
-                })
+    },
+    transpoints: function (points, type) {
+      if (false) {
+        return points;
+      } else {
+        if (type == 1) {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
+          });
+          return pp;
+        } else {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
+          });
+          return pp;
+        }
+      }
+    },
+    initdev: function () {
+
+      function getWMTSLayer(url, layer) {
+        let key = "98ec3e37b32974c2d58ea1a790640fe7"
+        let projection = getProjection("EPSG:3857");
+        let projectionExtent = projection.getExtent();
+        let size = getWidth(projectionExtent) / 256;
+
+        function getResolutions() {
+          let resolutions = [];
+          for (let z = 1; z < 19; ++z) {
+            resolutions[z] = size / Math.pow(2, z);
+          }
+          return resolutions
+        }
 
-            }
+        return new TileLayer({
+          source: new WMTS({
+            url: url,
+            layer: layer,
+            style: "default",
+            matrixSet: "w",
+            format: "tiles",
+            tileGrid: new WMTSTileGrid({
+              origin: getTopLeft(projectionExtent),
+              resolutions: getResolutions(),
+              matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
+            }),
+          }),
+
+        })
+
+      }
+
+      var projection = getProjection("EPSG:3857");
+      var format = 'image/png';
+      var bounds = [13325725.763124488, 3757032.814272983,
+        13345293.642365493, 3776600.693513988
+      ];
+      var untiled = new ImageLayer({
+        source: new ImageWMS({
+          ratio: 1,
+          url: 'http://36.156.155.131:8090/geoserver/wms',
+          params: {
+            'FORMAT': format,
+            'VERSION': '1.1.1',
+            "STYLES": '',
+            "CJAUTH": 'CJUSER',
+            "LAYERS": 'CJ:G_CJ_NJ',
+            "TRANSPARENT": 'true',
+            "exceptions": 'application/vnd.ogc.se_inimage',
+          }
+        })
+      });
+
+
+      const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');
+
+      var tiled = new TileLayer({
+        visible: false,
+        source: new TileWMS({
+          url: 'http://36.156.155.131:8090/geoserver/wms',
+          params: {
+            'FORMAT': format,
+            'VERSION': '1.1.1',
+            tiled: true,
+            "STYLES": '',
+            "CJAUTH": 'CJUSER',
+            "LAYERS": 'CJ:G_CJ_NJ',
+            "TRANSPARENT": 'true',
+            "exceptions": 'application/vnd.ogc.se_inimage',
+            tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
+          }
+        })
+      });
+
+      var map = new Map({
+        target: 'map',
+        layers: [
+          ign,
+          getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
+
+          untiled,
+          tiled
+        ],
+        view: new View({
+          projection: projection
+        })
+      });
+      // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
+      this.map = map;
+      //  map.getView().setCenter(
+      //     [118.642876, 31.970445]
+      // );
+      map.getView().setCenter(this.transpoints([
+        [118.642876, 31.970445]
+      ], 0)[0]);
+      map.getView().setZoom(13);
+    },
+    initdev1: function () {
+      const proj3857 = getProjection("EPSG:3857");
+      const tileGrid = new WMTSTileGrid({
+        tileSize: [256, 256],
+        origin: [-2.003750834e7, 2.003750834e7],
+        extent: [-2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7],
+        resolutions: [
+          76.43702827453613,
+          38.218514137268066,
+          19.109257068634033,
+          9.554628534317017,
+          4.777314267158508
+        ],
+        matrixIds: [
+          "EPSG:3857:10",
+          "EPSG:3857:11",
+          "EPSG:3857:12",
+          "EPSG:3857:13",
+          "EPSG:3857:14"
+        ]
+      });
+
+      const ign_source = new WMTS({
+        url: "http://geo.xt.wenhq.top:8083/geoserver/gwc/service/wmts?",
+        layer: "test:nj10",
+        matrixSet: "EPSG:3857",
+        format: "image/png",
+        projection: proj3857,
+        tileGrid: tileGrid,
+        style: ""
+      });
+
+      const ign = new TileLayer({
+        source: ign_source
+      });
+      const map = new Map({
+        target: "map",
+        layers: [ign],
+        view: new View({
+          center: [0, 0],
+          zoom: 2
+        })
+      });
+      map
+        .getView()
+        .fit(
+          [
+            13149614.849955281,
+            3639625.538826909,
+            13306157.88388332,
+            3874440.0897189667
+          ],
+          map.getSize()
+        );
+
+      this.map = map;
+      map.getView().setCenter(this.transpoints([
+        [118.642876, 31.970445]
+      ], 0)[0]);
+      map.getView().setZoom(13);
+    },
+    initprod: function () {
+      // const proj3857 = getProjection("EPSG:4326");
+      function getWMTSLayer(url, layer) {
+        let key = "98ec3e37b32974c2d58ea1a790640fe7"
+        let projection = getProjection("EPSG:3857");
+        let projectionExtent = projection.getExtent();
+        let size = getWidth(projectionExtent) / 256;
+
+        function getResolutions() {
+          let resolutions = [];
+          for (let z = 1; z < 19; ++z) {
+            resolutions[z] = size / Math.pow(2, z);
+          }
+          return resolutions
+        }
 
-            var projection = getProjection("EPSG:3857");
-            var format = 'image/png';
-            var bounds = [13325725.763124488, 3757032.814272983,
-                13345293.642365493, 3776600.693513988
-            ];
-            var untiled = new ImageLayer({
-                source: new ImageWMS({
-                    ratio: 1,
-                    url: 'http://198.17.188.64/geoserver/gwc/service/wms',
-                    params: {
-                        'FORMAT': format,
-                        'VERSION': '1.1.1',
-                        "STYLES": '',
-                        "CJAUTH": 'CJUSER',
-                        "LAYERS": 'CJ:G_CJ',
-                        "TRANSPARENT": 'true',
-                        "exceptions": 'application/vnd.ogc.se_inimage',
-                    }
-                })
-            });
-
-
-            var tiled = new TileLayer({
-                visible: false,
-                source: new TileWMS({
-                    url: 'http://198.17.188.64/geoserver/gwc/service/wms',
-                    params: {
-                        'FORMAT': format,
-                        'VERSION': '1.1.1',
-                        tiled: true,
-                        "STYLES": '',
-                        "CJAUTH": 'CJUSER',
-                        "LAYERS": 'CJ:G_CJ',
-                        "TRANSPARENT": 'true',
-                        "exceptions": 'application/vnd.ogc.se_inimage',
-                        tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
-                    }
-                })
-            });
-
-            const map = new Map({
-                target: "map",
-                layers: [getWMTSLayer('http://198.17.188.64:9879/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec'), getWMTSLayer('http://198.17.188.64:9879/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
-                    untiled,
-                    tiled
-                ],
-                view: new View({
-                    projection: projection
-                })
-            });
-            map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
-            this.map = map;
-            map.getView().setCenter(this.transpoints([
-                [118.642876, 31.970445]
-            ], 0)[0]);
-            map.getView().setZoom(13);
-        },
+        return new TileLayer({
+          source: new WMTS({
+            url: url,
+            layer: layer,
+            style: "default",
+            matrixSet: "w",
+            format: "tiles",
+            tileGrid: new WMTSTileGrid({
+              origin: getTopLeft(projectionExtent),
+              resolutions: getResolutions(),
+              matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
+            }),
+          }),
+
+        })
+
+      }
+
+      var projection = getProjection("EPSG:3857");
+      var format = 'image/png';
+      var bounds = [13325725.763124488, 3757032.814272983,
+        13345293.642365493, 3776600.693513988
+      ];
+      var untiled = new ImageLayer({
+        source: new ImageWMS({
+          ratio: 1,
+          url: 'http://198.17.188.64/geoserver/gwc/service/wms',
+          params: {
+            'FORMAT': format,
+            'VERSION': '1.1.1',
+            "STYLES": '',
+            "CJAUTH": 'CJUSER',
+            "LAYERS": 'CJ:G_CJ',
+            "TRANSPARENT": 'true',
+            "exceptions": 'application/vnd.ogc.se_inimage',
+          }
+        })
+      });
+
+
+      var tiled = new TileLayer({
+        visible: false,
+        source: new TileWMS({
+          url: 'http://198.17.188.64/geoserver/gwc/service/wms',
+          params: {
+            'FORMAT': format,
+            'VERSION': '1.1.1',
+            tiled: true,
+            "STYLES": '',
+            "CJAUTH": 'CJUSER',
+            "LAYERS": 'CJ:G_CJ',
+            "TRANSPARENT": 'true',
+            "exceptions": 'application/vnd.ogc.se_inimage',
+            tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
+          }
+        })
+      });
+
+      const map = new Map({
+        target: "map",
+        layers: [getWMTSLayer('http://198.17.188.64:9879/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec'), getWMTSLayer('http://198.17.188.64:9879/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
+          untiled,
+          tiled
+        ],
+        view: new View({
+          projection: projection
+        })
+      });
+      map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
+      this.map = map;
+      map.getView().setCenter(this.transpoints([
+        [118.642876, 31.970445]
+      ], 0)[0]);
+      map.getView().setZoom(13);
+    },
 
-        addline: function(linePoint) {
-
-            var points = this.transpoints(linePoint, 0)
-
-            let line = new Feature({
-                tadata: {
-                    sectionId: "line",
-                    towerNumber: 22
-                },
-                geometry: new LineString(points)
-            }); //这里要注意写fromLonLat，很重要
-            line.setStyle(new Style({
-                stroke: new Stroke({
-                    width: 8,
-                    color: "#0814f1"
-                })
-            }));
-            this.linevectorLayer = new LayerVec({
-                source: new SourceVec({
-                    features: [line] //要绘制多段线，直接push到这里面就行了
-                }),
-                zIndex: 2
-            });
-            this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
+    addline: function (linePoint) {
 
+      var points = this.transpoints(linePoint, 0)
 
+      let line = new Feature({
+        tadata: {
+          sectionId: "line",
+          towerNumber: 22
         },
+        geometry: new LineString(points)
+      }); //这里要注意写fromLonLat，很重要
+      line.setStyle(new Style({
+        stroke: new Stroke({
+          width: 8,
+          color: "#0814f1"
+        })
+      }));
+      this.linevectorLayer = new LayerVec({
+        source: new SourceVec({
+          features: [line] //要绘制多段线，直接push到这里面就行了
+        }),
+        zIndex: 2
+      });
+      this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
 
-        addpoint: function(addrArry, data, img, type, rotation = 0, zindex = 3, shipl = "ship_") {
-            var lnglat = this.transpoints(addrArry, 0)[0];
-            var lnglats = null;
 
-            if (data["lnglat"] != undefined) {
-                lnglats = this.transpoints(data["lnglat"], 0);
-            }
-            lnglats = null;
-
-            let tamarker = new Feature({
-                tadata: {
-                    sectionId: "point",
-                    towerNumber: 22,
-                    data: data,
-                    type: type
-                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
-
-                geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
-            });
-            tamarker.setStyle(
-                new Style({
-                    image: new Icon({
-                        color: "#eee",
-                        rotation: rotation,
-                        anchor: [0.5, 0.5],
-                        rotateWithView: true,
-                        // color:"red",
-                        // size:[60,20],
-                        crossOrigin: "anonymous",
-                        src: require("../../assets/images/icon/" + img) //本地的样式
-                    })
-                })
-            ); //这里是样式
-            var markerta = new LayerVec({
-                source: new SourceVec({
-                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-                }),
-                zIndex: zindex
-            });
-
-            var last1 = this.posints[shipl + data["mmsi"]];
-            if (last1 != undefined && last1 != null) {
-                last1.setSource(new SourceVec({
-                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-                }));
-            } else {
-                if (data["mmsi"] != undefined) {
-                    this.posints[shipl + data["mmsi"]] = markerta;
-                }
-                this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
-
-            }
+    },
 
+    addpoint: function (addrArry, data, img, type, rotation = 0, zindex = 3, shipl = "ship_") {
+      var lnglat = this.transpoints(addrArry, 0)[0];
+      var lnglats = null;
+
+      if (data["lnglat"] != undefined) {
+        lnglats = this.transpoints(data["lnglat"], 0);
+      }
+      lnglats = null;
+
+      let tamarker = new Feature({
+        tadata: {
+          sectionId: "point",
+          towerNumber: 22,
+          data: data,
+          type: type
+        }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+
+        geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
+      });
+      tamarker.setStyle(
+        new Style({
+          image: new Icon({
+            color: "#eee",
+            rotation: rotation,
+            anchor: [0.5, 0.5],
+            rotateWithView: true,
+            // color:"red",
+            // size:[60,20],
+            crossOrigin: "anonymous",
+            src: require("../../assets/images/icon/" + img) //本地的样式
+          })
+        })
+      ); //这里是样式
+      var markerta = new LayerVec({
+        source: new SourceVec({
+          features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+        }),
+        zIndex: zindex
+      });
+
+      var last1 = this.posints[shipl + data["mmsi"]];
+      if (last1 != undefined && last1 != null) {
+        last1.setSource(new SourceVec({
+          features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+        }));
+      } else {
+        if (data["mmsi"] != undefined) {
+          this.posints[shipl + data["mmsi"]] = markerta;
+        }
+        this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
 
-            // if (lnglats != null) {
-            //   var that = this;
-            //   var indexp = 0;
+      }
 
-            //   function addlayers(indexp) {
 
-            //     var last = that.posints[shipl + data["mmsi"]];
+      // if (lnglats != null) {
+      //   var that = this;
+      //   var indexp = 0;
 
+      //   function addlayers(indexp) {
 
-            //     let tamarker = new Feature({
-            //       tadata: {
-            //         sectionId: "point",
-            //         towerNumber: 22,
-            //         data: data,
-            //         type: type
-            //       }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+      //     var last = that.posints[shipl + data["mmsi"]];
 
-            //       geometry: new Point(lnglats == null ? lnglat : lnglats[indexp]) //这里是点坐标的位置，这里要注意fromLonLat
-            //     });
-            //     tamarker.setStyle(
-            //       new Style({
-            //         image: new Icon({
-            //           color: "#eee",
-            //           rotation: rotation,
-            //           anchor: [0.5, 0.5],
-            //           rotateWithView: true,
-            //           // color:"red",
-            //           // size:[60,20],
-            //           crossOrigin: "anonymous",
-            //           src: require("../../assets/images/icon/" + img) //本地的样式
-            //         })
-            //       })
-            //     ); //这里是样式
 
-            //     last.setSource(new SourceVec({
-            //       features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-            //     }));
+      //     let tamarker = new Feature({
+      //       tadata: {
+      //         sectionId: "point",
+      //         towerNumber: 22,
+      //         data: data,
+      //         type: type
+      //       }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
 
-            //   }
+      //       geometry: new Point(lnglats == null ? lnglat : lnglats[indexp]) //这里是点坐标的位置，这里要注意fromLonLat
+      //     });
+      //     tamarker.setStyle(
+      //       new Style({
+      //         image: new Icon({
+      //           color: "#eee",
+      //           rotation: rotation,
+      //           anchor: [0.5, 0.5],
+      //           rotateWithView: true,
+      //           // color:"red",
+      //           // size:[60,20],
+      //           crossOrigin: "anonymous",
+      //           src: require("../../assets/images/icon/" + img) //本地的样式
+      //         })
+      //       })
+      //     ); //这里是样式
 
+      //     last.setSource(new SourceVec({
+      //       features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+      //     }));
 
-            //   setInterval(() => {
-            //     indexp = indexp >= lnglats.length ? 0 : indexp;
-            //     addlayers(indexp++);
-            //   }, 1000);
+      //   }
 
 
-            // }
+      //   setInterval(() => {
+      //     indexp = indexp >= lnglats.length ? 0 : indexp;
+      //     addlayers(indexp++);
+      //   }, 1000);
 
-        },
-        addpoints: function(datas,name="ship_normal_") {
-
-            var tt = [];
-            for (const ip in datas) {
-                var pi = datas[ip];
-                var addrArry = pi[0],
-                    data = pi[1],
-                    img = pi[2],
-                    type = pi[3],
-                    rotation = pi[4],
-                    zindex = pi[5],
-                    shipl = pi[6];
-                var lnglat = this.transpoints(addrArry, 0)[0];
-                var lnglats = null;
-
-                if (data["lnglat"] != undefined) {
-                    lnglats = this.transpoints(data["lnglat"], 0);
-                }
-                lnglats = null;
-
-                let tamarker = new Feature({
-                    tadata: {
-                        sectionId: "point",
-                        towerNumber: 22,
-                        data: data,
-                        type: type
-                    }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
-
-                    geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
-                });
-                tamarker.setStyle(
-                    new Style({
-                        image: new Icon({
-                            color: "#eee",
-                            rotation: rotation,
-                            anchor: [0.5, 0.5],
-                            rotateWithView: true,
-                            // color:"red",
-                            // size:[60,20],
-                            crossOrigin: "anonymous",
-                            src: require("../../assets/images/icon/" + img) //本地的样式
-                        })
-                    })
-                ); //这里是样式
-                tt.push(tamarker);
 
+      // }
 
-            }
+    },
+    addpoints: function (datas, name = "ship_normal_") {
+
+      var tt = [];
+      for (const ip in datas) {
+        var pi = datas[ip];
+        var addrArry = pi[0],
+          data = pi[1],
+          img = pi[2],
+          type = pi[3],
+          rotation = pi[4],
+          zindex = pi[5],
+          shipl = pi[6];
+        var lnglat = this.transpoints(addrArry, 0)[0];
+        var lnglats = null;
+
+        if (data["lnglat"] != undefined) {
+          lnglats = this.transpoints(data["lnglat"], 0);
+        }
+        lnglats = null;
 
-            var markerta = new LayerVec({
-                source: new SourceVec({
-                    features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-                }),
-                zIndex: zindex
-            });
-
-            var last1 = this.posints[name + 1];
-            if (last1 != undefined && last1 != null) {
-                last1.setSource(new SourceVec({
-                    features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-                }));
-            } else {
-                // if (data["mmsi"] != undefined) {
-                   this.posints[name + 1] = markerta;
-                // }
-                this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+        let tamarker = new Feature({
+          tadata: {
+            sectionId: "point",
+            towerNumber: 22,
+            data: data,
+            type: type
+          }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
 
-            }
+          geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
+        });
+        tamarker.setStyle(
+          new Style({
+            image: new Icon({
+              color: "#eee",
+              rotation: rotation,
+              anchor: [0.5, 0.5],
+              rotateWithView: true,
+              // color:"red",
+              // size:[60,20],
+              crossOrigin: "anonymous",
+              src: require("../../assets/images/icon/" + img) //本地的样式
+            })
+          })
+        ); //这里是样式
+        tt.push(tamarker);
+
+
+      }
+
+      var markerta = new LayerVec({
+        source: new SourceVec({
+          features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+        }),
+        zIndex: zindex
+      });
+
+      var last1 = this.posints[name + 1];
+      if (last1 != undefined && last1 != null) {
+        last1.setSource(new SourceVec({
+          features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+        }));
+      } else {
+        // if (data["mmsi"] != undefined) {
+        this.posints[name + 1] = markerta;
+        // }
+        this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+
+      }
 
-        }
     }
+  }
 };
 </script>
 
 <style scoped>
 #map {
-    height: 100%;
+  height: 100%;
 }
 
 /*隐藏ol的一些自带元素*/
 
 .ol-attribution,
 .ol-zoom {
-    display: none;
+  display: none;
 }
 
 .contentFont {
-    font-size: 6rem;
-    line-height: 16rem;
+  font-size: 6rem;
+  line-height: 16rem;
 }
 
 .shipDiv {
-    position: absolute;
-    top: 250rem;
-    left: 140rem;
-    width: 240rem;
-    min-height: 120rem;
-    background-color: white;
+  position: absolute;
+  top: 250rem;
+  left: 140rem;
+  width: 240rem;
+  min-height: 120rem;
+  background-color: white;
 }
 
 .el-tabs__header {
-    margin: 0 !important;
+  margin: 0 !important;
 }
 
 .shipTitle {
-    padding-top: 4rem;
-    padding-left: 10rem;
-    padding-right: 10rem;
-    width: 100%;
-    height: 20rem;
-    background-color: #0d25a5;
-    color: white;
-    font-size: 7rem
+  padding-top: 4rem;
+  padding-left: 10rem;
+  padding-right: 10rem;
+  width: 100%;
+  height: 20rem;
+  background-color: #0d25a5;
+  color: white;
+  font-size: 7rem
 }
 
-.shipContent>>>.el-tabs__item {
-    font-weight: bold;
-    color: #A8A8A8
+.shipContent >>> .el-tabs__item {
+  font-weight: bold;
+  color: #A8A8A8
 }
 
-.shipContent>>>.el-tabs__item.is-active {
-    color: #0d25a5
+.shipContent >>> .el-tabs__item.is-active {
+  color: #0d25a5
 }
 
-.shipContent>>>.el-tabs__active-bar {
-    margin-left: 10rem
+.shipContent >>> .el-tabs__active-bar {
+  margin-left: 10rem
 }
 
-.shipContent>>>.el-tabs__nav {
-    padding-left: 10rem
+.shipContent >>> .el-tabs__nav {
+  padding-left: 10rem
 }
 
-.shipContent>>>.el-tabs__active-bar {
-    background-color: #0d25a5
+.shipContent >>> .el-tabs__active-bar {
+  background-color: #0d25a5
 }
 
-.tableSc>>>tr {
-    padding: 0;
-    height: 3rem;
-    line-height: 3rem;
-    font-size: 5rem;
+.tableSc >>> tr {
+  padding: 0;
+  height: 3rem;
+  line-height: 3rem;
+  font-size: 5rem;
 }
 
-.tableSc>>>td {
-    padding: 0;
-    height: 3rem;
-    line-height: 3rem
+.tableSc >>> td {
+  padding: 0;
+  height: 3rem;
+  line-height: 3rem
 }
 
 .icon_div {
-    position: absolute;
-    top: 330rem;
-    right: 160rem;
-    width: 70rem;
-    min-height: 40rem;
-    background-color: white;
+  position: absolute;
+  top: 330rem;
+  right: 160rem;
+  width: 70rem;
+  min-height: 40rem;
+  background-color: white;
 }
 
 .radio_div {
-    position: absolute;
-    top: 50rem;
-    left: 120rem;
-    padding-top: 4rem;
-    padding-left: 5rem;
-    background-color: white;
-    padding-right: 4rem;
+  position: absolute;
+  top: 50rem;
+  left: 120rem;
+  padding-top: 4rem;
+  padding-left: 5rem;
+  background-color: white;
+  padding-right: 4rem;
 }
 
 .layer_div {
-    position: absolute;
-    top: 55rem;
-    right: 160rem;
-    padding-top: 4rem;
-    padding-left: 5rem;
-    padding-right: 4rem;
-    background-color: white;
-    padding-bottom: 5rem;
+  position: absolute;
+  top: 55rem;
+  right: 160rem;
+  padding-top: 4rem;
+  padding-left: 5rem;
+  padding-right: 4rem;
+  background-color: white;
+  padding-bottom: 5rem;
 }
 
-.radio_div>div {
-    line-height: 10rem;
+.radio_div > div {
+  line-height: 10rem;
 }
 
 .el-tabs__header {
-    margin: 0 !important;
+  margin: 0 !important;
 }
 </style>

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

@@ -120,7 +120,7 @@
 <script>
 import scroll from "./scroll.vue"
 import {getDeviceType, getIllegalShipStatic, getSo2Time, getStaticDevice} from "@/api/data/staticalData";
-import {getdeviceList, queryShipData,queryallShipData} from "@/api/data/deviceData";
+import {getdeviceList, queryallShipData, queryShipData} from "@/api/data/deviceData";
 import mapdiv from '../../../components/map/index.vue'
 import {getThresholdList} from "@/api/data/liuData";
 
@@ -145,8 +145,8 @@ export default {
       reqcount:0,
       dialogVisibleShip: false,
       beginTime: '',
-      lastdatep:0,
-      isstart:false,
+      lastdatep: 0,
+      isstart: false,
       so2TimeData: {},
       endTime: '',
       deviceList: [],
@@ -204,8 +204,8 @@ export default {
         {"name": "润扬大桥光谱1", "locations": [[119.367235, 32.209107]]},
         {"name": "润扬大桥光谱2", "locations": [[119.369724, 32.204459]]},
       ],
-      allship:[],
-      ship:[],
+      allship: [],
+      ship: [],
       ship1: [
         {"name": "一号船", "mmsi": "s", "locations": [[118.643133, 31.969894]], 'type': 1, "head": 0, "lnglats": [[118.649711, 31.98602], [118.639711, 31.98602], [118.629711, 31.98602], [118.619711, 31.98602]]},
         // {"name": "二号船", "locations": [[118.639711, 31.96602]], 'type': 2,"head":60},
@@ -232,11 +232,11 @@ export default {
     }, 120000);
 
     setInterval(() => {
-      if(that.isstart){
-         that.getallshipData();
+      if (that.isstart) {
+        that.getallshipData();
       }
 
-    }, 5*60*1000);
+    }, 5 * 60 * 1000);
     setInterval(() => {
       if(that.reqcount>0){
          that.lastdatep=new Date().valueOf()-11000;
@@ -255,10 +255,10 @@ export default {
     //  this.getChart();
   },
   methods: {
-    stopgetall(){
+    stopgetall() {
       this.isstart = false;
     },
-    startgetall(){
+    startgetall() {
       this.isstart = true;
       this.getallshipData();
 
@@ -331,13 +331,13 @@ export default {
     },
 
     getallshipData() {
-      if(!this.isstart) return;
+      if (!this.isstart) return;
 
       var cdatep = new Date().valueOf();
-      if(cdatep-this.lastdatep>10000){
+      if (cdatep - this.lastdatep > 10000) {
         this.reqcount=0;
         this.lastdatep = cdatep;
-      }else{
+      } else {
         this.reqcount++;
         return;
       }
@@ -357,17 +357,22 @@ export default {
       //           }
       // this.addshipPointall();
 
-    // console.log( this.$refs.mapv.map.getView().calculateExtent( this.$refs.mapv.map.getSize()));
+      // console.log( this.$refs.mapv.map.getView().calculateExtent( this.$refs.mapv.map.getSize()));
 
       var sc = window.getmapviewlatlng();
       var urlc = `areaLatitude1=${sc[0][1]}&areaLatitude2=${sc[1][1]}&areaLongitude1=${sc[0][0]}&areaLongitude2=${sc[1][0]}`;
-      queryallShipData({},urlc).then(data => {
+      queryallShipData({}, urlc).then(data => {
+        if (!this.isstart) return;
         var shipdatalist = [];
         for (var key in data.data) {
           var ship = data.data[key];
-          ship["name"] = ship.shipname_cn;
+          ship["shipName"] = ship.shipname_cn;
           ship["locations"] = [[ship.lng, ship.lat]];
           ship["type"] = 1;
+          ship["speed"] = ship.speed == null ? '-' : ship.speed;
+          ship["head"] = ship.head == null ? '-' : ship.head;
+          ship["course"] = ship.course == null ? '-' : ship.course;
+          ship["monitorPointName"] = '-';
           shipdatalist.push(ship);
         }
         // this.allship = this.ship1;
@@ -406,13 +411,13 @@ export default {
         } else if (obj.type == 3) {
           img = 'wg.png'
         }
-        tt.push([obj.locations, obj, img, 'ship', ((obj.head == null ? 0 : parseFloat(obj.head)) - 90) * Math.PI / 180,1]);
+        tt.push([obj.locations, obj, img, 'ship', ((obj.head == null ? 0 : parseFloat(obj.head)) - 90) * Math.PI / 180, 1]);
       }
-       this.$refs.mapv.addpoints(tt,"ship");
+      this.$refs.mapv.addpoints(tt, "ship");
     },
 
     addshipPointall() {
-       var tt = [];
+      var tt = [];
       for (var index in this.allship) {
         var obj = this.allship[index]
         var img = 'zc.png'
@@ -421,9 +426,9 @@ export default {
         } else if (obj.type == 3) {
           img = 'wg.png'
         }
-       tt.push([obj.locations, obj, img, 'ship', ((obj.head == null ? 0 : parseFloat(obj.head)) - 90) * Math.PI / 180,1,"ship_normal_"]);
+        tt.push([obj.locations, obj, img, 'ship', ((obj.head == null ? 0 : parseFloat(obj.head)) - 90) * Math.PI / 180, 1, "ship_normal_"]);
       }
-       this.$refs.mapv.addpoints(tt)
+      this.$refs.mapv.addpoints(tt)
     },
     getSo2Time() {
       // console.log(111);

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

@@ -190,7 +190,7 @@
       <el-row type="flex" v-show="false">
         <el-col :span="0">
         </el-col>
-        <el-radio-group v-model="queryParams.filterMmsi" size="small" >
+        <el-radio-group v-model="queryParams.filterMmsi" size="small">
           <el-radio label="" border>全部</el-radio>
           <el-radio label="!0" border>MMSI不为空</el-radio>
         </el-radio-group>
@@ -249,6 +249,11 @@
         label="监测点">
       </el-table-column>
       <el-table-column
+        prop="illegalType"
+        label="来源"
+        :formatter="illegalTypeFormat">
+      </el-table-column>
+      <el-table-column
         prop="orgName"
         label="管辖机构" v-if="tableShow == 1">
       </el-table-column>
@@ -290,6 +295,11 @@
       </el-table-column>
       <el-table-column
         prop="berthName"
+        label="码头泊位"
+        v-if="tableShow == 1">
+      </el-table-column>
+      <el-table-column
+        prop="berthPlan"
         label="锚铂计划"
         v-if="tableShow == 1">
       </el-table-column>
@@ -342,13 +352,14 @@ export default {
       liuCount: 0.3,
       dialogShow: true,
       liuCountId: '',
-      isselect:false,
+      isselect: true,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         dateRange: '',
         mmsi: '',
         shipName: '',
+        illegalType: '',
         shipRegionType: '',
         destination: '',
         orgName: '',
@@ -438,6 +449,9 @@ export default {
     shipTypeFormat(row, column) {
       return row.shipRegionType == 0 ? "内河船" : row.shipRegionType == 1 ? "海船" : ""
     },
+    illegalTypeFormat(row, column) {
+      return row.illegalType === 'xiutan' ? "嗅探" : row.illegalType === 'guangpu' ? "光谱" : ""
+    },
     tabChange() {
       console.log(this.tableShow);
     },
@@ -453,7 +467,7 @@ export default {
     },
     getLiuLists() {
       this.loading = true;
-      this.queryParams.filterMmsi = this.isselect?"!0":"";
+      this.queryParams.filterMmsi = this.isselect ? "!0" : "";
 
       var dateRange = '';
       if (this.queryParams.startTime != undefined && this.queryParams.startTime != "" && this.queryParams.endTime != undefined && this.queryParams.endTime != "") {
@@ -529,10 +543,11 @@ export default {
   border-radius: 2rem;
 }
 
-.el-date-editor.el-input, .el-date-editor.el-input__inner{
+.el-date-editor.el-input, .el-date-editor.el-input__inner {
   width: auto !important;
 }
-.el-input--small .el-input__inner{
+
+.el-input--small .el-input__inner {
   height: 36px !important;
 }
 </style>

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

@@ -52,7 +52,7 @@
 
             @keyup.enter.native="handleQuery"
           />
-           <el-checkbox v-model="isselect" style="position: absolute;right: 56rem;top: 2rem;">MMSI不为空</el-checkbox>
+          <el-checkbox v-model="isselect" style="position: absolute;right: 56rem;top: 2rem;">MMSI不为空</el-checkbox>
         </el-col>
       </el-row>
       <el-row type="flex">
@@ -265,7 +265,7 @@ export default {
     return {
       total: 0,
       showSearch: true,
-      isselect:false,
+      isselect: true,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -328,7 +328,7 @@ export default {
     getBlackList() {
       // console.log('1'+this.queryParams);
       this.loading = true;
-       this.queryParams.filterMmsi = this.isselect?"!0":"";
+      this.queryParams.filterMmsi = this.isselect ? "!0" : "";
 
       var dateRange = '';
       if (this.queryParams.beginTime != undefined && this.queryParams.beginTime != "" && this.queryParams.endTime != undefined && this.queryParams.endTime != "") {
@@ -444,10 +444,12 @@ export default {
   border: 1rem solid #e1e1e1;
   border-radius: 2rem;
 }
-.el-date-editor.el-input, .el-date-editor.el-input__inner{
+
+.el-date-editor.el-input, .el-date-editor.el-input__inner {
   width: auto !important;
 }
-.el-input--small .el-input__inner{
+
+.el-input--small .el-input__inner {
   height: 36px !important;
 }
 </style>