地图打点

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

@@ -1,5 +1,241 @@
 <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">{{deviceName}}</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-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-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-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-row>
+            <!-- <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}}</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">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-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-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-row>
+            <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" 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"
+              highlight-current-row
+              style="width: 100%"
+              class="tableSc">
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50">
+              </el-table-column>
+              <el-table-column
+                property="name"
+                label="监测点"
+                width="100">
+              </el-table-column>
+              <el-table-column
+                :label="'硫含量'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'黑度'">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
+                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                property="date"
+                label="监测时间">
+              </el-table-column>
+            </el-table>
+
+          </el-tab-pane>
+
+          <el-tab-pane label="其它监测数据" name="thrid">
+            <el-table
+              :header-cell-style="{ background: '#e4eafc'}"
+              ref="singleTable"
+              :data="tableData"
+              highlight-current-row
+              style="width: 100%"
+              class="tableSc"
+              height=200>
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50">
+              </el-table-column>
+              <el-table-column
+                property="name"
+                label="监测点"
+                >
+              </el-table-column>
+              <el-table-column
+                :label="'SO2浓度'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'NO2浓度'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'CO2浓度'"
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
+                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="'硫碳比'">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑</div>
+                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                property="date"
+                label="监测时间">
+              </el-table-column>
+            </el-table>
+
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+ </div>
 </template>
 
 <script>
@@ -30,8 +266,40 @@ export default {
   data() {
     return {
       map: null,
+      shipName:'',
+      deviceShow:false,
+      deviceName:'',
       drawLayer: null,
-      draw: null
+      draw: null,
+      normalPer: 0.1,
+      normalCount: 1,
+      activeName:'first',
+       tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        value: 0.19,
+        count: 1.9,
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        value: 0.1,
+        count: 1.3,
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        value: 0.2,
+        count: 2,
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        value: 0.08,
+        count: 0.6,
+        address: '上海市普陀区金沙江路 1516 弄'
+      }],
+       shipShow: false,
     };
   },
   mounted() {
@@ -54,7 +322,16 @@ export default {
                alert("我是线："+tadata.towerNumber)
              }
              if(tadata.sectionId=="point"){
-               alert("我是点："+tadata.towerNumber)
+               console.log(tadata);
+               if(tadata.type == "ship"){
+                    console.log(111111);
+                     that.shipShow = true;
+                     that.shipName = tadata.data
+               }else if(tadata.type == "device"){
+                     that.deviceShow = true;
+                     that.deviceName = tadata.data
+               }
+              //  alert("我是点："+tadata.data)
              }
           //含有lnglat 参数的点标记触发事件
           }
@@ -66,6 +343,9 @@ export default {
   },
   methods: {
     //[[1111,1111]]
+     handleClick(tab, event) {
+      console.log(tab, event);
+    },
     transpoints: function(points, type) {
       if (ispro) {
         return points;
@@ -252,13 +532,15 @@ export default {
 
     },
 
-    addpoint: function() {
-      var lnglat = this.transpoints([[118.78, 32.04]], 0)[0];
+    addpoint: function(addrArry,data,img,type) {
+      var lnglat = this.transpoints(addrArry, 0)[0];
 
       let tamarker = new Feature({
         tadata: {
           sectionId: "point",
-          towerNumber: 22
+          towerNumber: 22,
+          data:data,
+          type:type
         }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
         geometry: new Point(lnglat) //这里是点坐标的位置，这里要注意fromLonLat
       });
@@ -267,7 +549,7 @@ export default {
           image: new Icon({
             color: "#eee",
             crossOrigin: "anonymous",
-            src: require("../../assets/images/icon/qiaoliang_1@2x.png") //本地的样式
+            src: require("../../assets/images/icon/"+img) //本地的样式                              
           })
         })
       ); //这里是样式
@@ -282,7 +564,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 #map {
   height: 100%;
 }
@@ -291,4 +573,58 @@ export default {
 .ol-zoom {
   display: none;
 }
+
+.shipDiv {
+  position: absolute;
+  top: 250rem;
+  left: 140rem;
+  width: 220rem;
+  height: 130rem;
+  background-color: white;
+}
+
+.shipTitle {
+  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.is-active {
+  color: #0d25a5
+}
+
+.shipContent >>> .el-tabs__active-bar {
+  margin-left: 10rem
+}
+
+.shipContent >>> .el-tabs__nav {
+  padding-left: 10rem
+}
+
+.shipContent >>> .el-tabs__active-bar {
+  background-color: #0d25a5
+}
+
+.tableSc >>> tr {
+  padding: 0;
+  height: 3rem;
+  line-height: 3rem;
+  font-size: 5rem;
+}
+
+.tableSc >>> td {
+  padding: 0;
+  height: 3rem;
+  line-height: 3rem
+}
 </style>

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

@@ -1,201 +1,6 @@
 <template>
   <div style="width:100%;height:100%;background-color:rgb(0, 9, 40)">
-    <mapdiv></mapdiv>
-    <div class="shipDiv" v-show="shipShow">
-      <div class="shipTitle">
-        <span style="float:left">一号船</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">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-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-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">SO<sub>2</sub>浓度:</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">CO<sub>2</sub>浓度:</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">NO<sub>2</sub>浓度:</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-row>
-            <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" 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"
-              highlight-current-row
-              style="width: 100%"
-              class="tableSc">
-              <el-table-column
-                type="index"
-                label="序号"
-                width="50">
-              </el-table-column>
-              <el-table-column
-                property="name"
-                label="监测点"
-                width="100">
-              </el-table-column>
-              <el-table-column
-                :label="'硫含量'"
-              >
-                <template slot-scope="scope">
-                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
-                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                :label="'黑度'">
-                <template slot-scope="scope">
-                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
-                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                property="date"
-                label="监测时间">
-              </el-table-column>
-            </el-table>
-
-          </el-tab-pane>
-
-          <el-tab-pane label="其它监测数据" name="thrid">
-            <el-table
-              :header-cell-style="{ background: '#e4eafc'}"
-              ref="singleTable"
-              :data="tableData"
-              highlight-current-row
-              style="width: 100%"
-              class="tableSc"
-              height=200>
-              <el-table-column
-                type="index"
-                label="序号"
-                width="50">
-              </el-table-column>
-              <el-table-column
-                property="name"
-                label="监测点"
-                >
-              </el-table-column>
-              <el-table-column
-                :label="'SO2浓度'"
-              >
-                <template slot-scope="scope">
-                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
-                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                :label="'NO2浓度'"
-              >
-                <template slot-scope="scope">
-                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
-                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                :label="'CO2浓度'"
-              >
-                <template slot-scope="scope">
-                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
-                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                :label="'硫碳比'">
-                <template slot-scope="scope">
-                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑</div>
-                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                property="date"
-                label="监测时间">
-              </el-table-column>
-            </el-table>
-
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </div>
+    <mapdiv ref="mapv"></mapdiv>
 
     <div class="shipInCount">
       <img src="@/assets/picture/img_wgcb.png" style="margin-top:5rem;margin-left:5rem"/>
@@ -244,9 +49,9 @@
 
     <div class="shipInformation">
       <img src="@/assets/picture/img_xycbxx.png" style="margin-top:5rem;margin-left:5rem"/>
-      <scroll illegalStatus=1></scroll>
+      <!-- <scroll illegalStatus=1></scroll> -->
       <img src="@/assets/picture/img_wgcbxx.png" style="margin-top:5rem;margin-left:5rem"/>
-      <scroll illegalStatus=1></scroll>
+      <!-- <scroll illegalStatus=1></scroll> -->
     </div>
 
     <div class="equipmentContent">
@@ -388,15 +193,95 @@ export default {
         shipDateArry:[
 
         ],
+        heyDeviceData:[
+            {"name":"南京三桥黑烟1","locations":[[118.643133,31.969894]],"data":{'监测点':"南京三桥",'类型':'黑烟检测'}},
+            {"name":"南京三桥黑烟2","locations":[[118.642232,31.970804]],"data":{'监测点':"南京三桥",'类型':'黑烟检测'}},
+            {"name":"南京三桥黑烟3","locations":[[118.6503,31.965016]]},
+            {"name":"南京三桥黑烟4","locations":[[118.638434,31.973189]]},
+            {"name":"南京三桥黑烟5","locations":[[118.643283,31.970076]]},
+            {"name":"南京三桥黑烟6","locations":[[118.647403,31.967309]]},
+            {"name":"苏通大桥黑烟1","locations":[[121.001581,31.78503]]},
+            {"name":"苏通大桥黑烟2","locations":[[120.997083,31.76303]]},
+            {"name":"苏通大桥黑烟3","locations":[[120.998929,31.771094]]},
+            {"name":"苏通大桥黑烟4","locations":[[121.002491,31.791012]]},
+            {"name":"江阴大桥黑烟1","locations":[[120.27317,31.945522]]},
+            {"name":"江阴大桥黑烟2","locations":[[120.274763,31.942572]]},
+            {"name":"润扬大桥黑烟1","locations":[[119.366033,32.210959]]},
+            {"name":"润扬大桥黑烟2","locations":[[119.370324,32.202425]]},
+        ],
+          so2DeviceData:[
+            {"name":"南京三桥嗅探1","locations":[[118.640237,31.971992]]},
+            {"name":"南京三桥嗅探2","locations":[[118.647447,31.967359]]},
+            {"name":"南京三桥嗅探3","locations":[[118.641632,31.971064]]},
+            {"name":"苏通大桥嗅探1","locations":[[121.003306,31.792982]]},
+            {"name":"苏通大桥嗅探2","locations":[[120.999529,31.775326]]},
+            {"name":"江阴大桥嗅探1","locations":[[120.272167,31.947384]]},
+            {"name":"江阴大桥嗅探2","locations":[[120.274441,31.943087]]},
+            {"name":"润扬大桥嗅探1","locations":[[119.367277,32.209071]]},
+            {"name":"润扬大桥嗅探2","locations":[[119.369466,32.204568]]},
+        ],
+        aisDeviceData:[
+            {"name":"南京三桥光谱1","locations":[[118.642876,31.970445]]},
+            {"name":"南京三桥光谱2","locations":[[118.648949,31.966386]]},
+            {"name":"南京三桥光谱3","locations":[[118.651223,31.964747]]},
+            {"name":"苏通大桥光谱1","locations":[[121.003134,31.789772]]},
+            {"name":"苏通大桥光谱2","locations":[[120.997985,31.762921]]},
+            {"name":"江阴大桥光谱1","locations":[[120.272044,31.947069]]},
+            {"name":"江阴大桥光谱2","locations":[[120.276078,31.940587]]},
+            {"name":"润扬大桥光谱1","locations":[[119.367235,32.209107]]},
+            {"name":"润扬大桥光谱2","locations":[[119.369724,32.204459]]},
+        ],
+        ship:[
+             {"name":"一号船","locations":[[118.639711,31.96602]],'type':1},
+             {"name":"二号船","locations":[[118.649839,31.970352]],'type':2},
+             {"name":"三号船","locations":[[118.638466,31.970716]],'type':1},
+             {"name":"四号船","locations":[[118.643402,31.961505]],'type':3},
+             {"name":"五号船","locations":[[118.64941,31.973519]],'type':2},
+        ]
     }
   }, mounted() {
     this.getMonthDate();
     //this.getStaticDevice();
     this.getIllegalShipStatic();
+    this.addDevicePoint();
+    this.addAisPoint();
+    this.addSo2Point();
+    this.addshipPoint();
     //  console.log(111111111111)
     //  this.getChart();
   },
   methods: {
+    addDevicePoint(){
+          for(var index in this.heyDeviceData){
+                var obj = this.heyDeviceData[index]
+                this.$refs.mapv.addpoint(obj.locations,obj.name,'hy.png','device');
+
+          }
+    },
+     addAisPoint(){
+          for(var index in this.aisDeviceData){
+                var obj = this.aisDeviceData[index]
+                this.$refs.mapv.addpoint(obj.locations,obj.name,'ais.png','device');
+          }
+    },
+    addSo2Point(){
+          for(var index in this.so2DeviceData){
+                var obj = this.so2DeviceData[index]
+                this.$refs.mapv.addpoint(obj.locations,obj.name,'so2.png','device');
+          }
+    },
+    addshipPoint(){
+          for(var index in this.ship){
+                var obj = this.ship[index]
+                var img = 'zc.png'
+                if(obj.type == 2){
+                      img ='xy.png'
+                }else if(obj.type == 3){
+                      img ='wg.png'
+                }
+                this.$refs.mapv.addpoint(obj.locations,obj.name,img,'ship');
+          }
+    },
     getSo2Time(){
            getSo2Time(this.shipDate).then(data =>{
                   this.getMonthArry(this.shipDate.startMonth,this.shipDate.endMonth);