Merge remote-tracking branch 'origin/master'

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

@@ -1,264 +1,209 @@
 <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">
-          <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">{{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 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">{{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>
               </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">{{ scope.row.rcgSoot }}度</div>
+                        </template>
               </el-table-column>
               <el-table-column
                 property="createTime"
@@ -290,33 +235,37 @@
               <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"
@@ -377,486 +326,598 @@
 import "ol/ol.css";
 import Map from "ol/Map";
 import TileLayer from "ol/layer/Tile";
+import ImageLayer from "ol/layer/Image";
 import View from "ol/View";
+
+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 {queryShipByDeviceId,queryDatabymmsi} from "@/api/data/deviceData";
+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 { queryShipByDeviceId, queryDatabymmsi } 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: '',
-      deviceShow: false,
-      deviceData: '',
-      checkList: [],
-      drawLayer: null,
-      draw: null,
-      normalPer: 0.1,
-      normalCount: 1,
-      activeName: 'first',
-      tabledatas: [],
-
-      d_activeName: 'd_first',
-      tableData: {minor:[],main:[]},
-      addrlist: [{name: "南京四桥", location: [1, 1]}],
-      caddr: "南京四桥",
-      shipShow: false,
-      shipdata:{},
-    };
-  },
-  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") {
-            console.log(tadata);
-            if (tadata.type == "ship") {
-              that.shipShow = true;
-              that.deviceShow = false;
-              that.shipName = tadata.data;
-              that.activeName = "first";
-
-            } else if (tadata.type == "device") {
-              that.deviceShow = true;
-              that.shipShow = false;
-              that.deviceData = tadata.data;
-              that.d_activeName= 'd_first';
-
-            }
-            //  alert("我是点："+tadata.data)
-          }
-          //含有lnglat 参数的点标记触发事件
+    props: {
+        src: {
+            type: String,
+            required: false
+        }
+    },
+    data() {
+        return {
+            map: null,
+            shipName: '',
+            deviceShow: false,
+            deviceData: '',
+            checkList: [],
+            drawLayer: null,
+            draw: null,
+            normalPer: 0.1,
+            normalCount: 1,
+            activeName: 'first',
+            tabledatas: [],
+
+            d_activeName: 'd_first',
+            tableData: { minor: [], main: [] },
+            addrlist: [{ name: "南京四桥", location: [1, 1] }],
+            caddr: "南京四桥",
+            shipShow: false,
+            shipdata: {},
+        };
+    },
+    mounted() {
+        that = this;
+        if (ispro) {
+            this.initprod();
+        } else {
+            this.initdev();
         }
-      }
-    });
-
-    //  this.addpoint();
-    //  this.addline();
-  },
-  methods: {
-    //[[1111,1111]]
-    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);
+        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") {
+                        console.log(tadata);
+                        if (tadata.type == "ship") {
+                            that.shipShow = true;
+                            that.deviceShow = false;
+                            that.shipName = tadata.data;
+                            that.activeName = "first";
+
+                        } else if (tadata.type == "device") {
+                            that.deviceShow = true;
+                            that.shipShow = false;
+                            that.deviceData = tadata.data;
+                            that.d_activeName = 'd_first';
+
+                        }
+                        //  alert("我是点："+tadata.data)
+                    }
+                    //含有lnglat 参数的点标记触发事件
+                }
+            }
         });
-      });
-      //dd
 
+        //  this.addpoint();
+        //  this.addline();
     },
-    clickcg: (value) => {
-      //
-      that.addrlist.forEach(element => {
-        if (element.name == value) {
+    methods: {
+        //[[1111,1111]]
+        handleClick1: function(tab, event) {
 
-          var lo = that.transpoints(element.location, 0)[0];
-          console.log(lo)
-          mapv.getView().setCenter(lo);
+            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.addrlist.forEach(element => {
+                if (element.name == value) {
 
-    },
-    handleClick(tab, event) {
-      console.log(tab, event);
-      var sect = tab.name;
-      if (sect == "first") {
-        return;
-      }
-      var q = {
-        mmsi: this.shipName.mmsi
-      }
+                    var lo = that.transpoints(element.location, 0)[0];
+                    console.log(lo)
+                    mapv.getView().setCenter(lo);
 
-      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) {
 
+        },
+        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);
+            });
 
 
-    },
-    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 () {
-      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");
-      const tileGrid = new WMTSTileGrid({
-        tileSize: [256, 256],
-        origin: [-180.0, 90.0],
-        extent: [-180.0, -90.0, 180.0, 90.0],
-        resolutions: [
-          0.703125,
-          0.3515625,
-          0.17578125,
-          0.087890625,
-          0.0439453125,
-          0.02197265625,
-          0.010986328125,
-          0.0054931640625,
-          0.00274658203125,
-          0.001373291015625,
-          6.866455078125e-4,
-          3.4332275390625e-4,
-          1.71661376953125e-4,
-          8.58306884765625e-5,
-          4.291534423828125e-5,
-          2.1457672119140625e-5,
-          1.0728836059570312e-5,
-          5.364418029785156e-6,
-          2.682209014892578e-6,
-          1.341104507446289e-6,
-          6.705522537231445e-7,
-          3.3527612686157227e-7
-        ],
-        matrixIds: [
-          "EPSG:4326:0",
-          "EPSG:4326:1",
-          "EPSG:4326:2",
-          "EPSG:4326:3",
-          "EPSG:4326:4",
-          "EPSG:4326:5",
-          "EPSG:4326:6",
-          "EPSG:4326:7",
-          "EPSG:4326:8",
-          "EPSG:4326:9",
-          "EPSG:4326:10",
-          "EPSG:4326:11",
-          "EPSG:4326:12",
-          "EPSG:4326:13",
-          "EPSG:4326:14",
-          "EPSG:4326:15",
-          "EPSG:4326:16",
-          "EPSG:4326:17",
-          "EPSG:4326:18",
-          "EPSG:4326:19",
-          "EPSG:4326:20",
-          "EPSG:4326:21"
-        ]
-      });
-
-      const ign_source = new WMTS({
-        url:
-          "http://198.17.1.146:9999/geoserver/gwc/service/wmts?CJAUTH=CJUSER",
-        layer: "CJ:G_CJ",
-        matrixSet: "EPSG:4326",
-        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({
-          zoom: 2
-        })
-      });
-      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 () {
 
-      var points = this.transpoints([[118.78, 32.04], [118.88, 32.14]], 0)
 
-      let line = new Feature({
-        tadata: {
-          sectionId: "line",
-          towerNumber: 22
+
+        },
+        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;
+                }
+            }
         },
-        geometry: new LineString(points)
-      });//这里要注意写fromLonLat，很重要
-      line.setStyle(new Style({
-        stroke: new Stroke({
-          width: 3,
-          color: "#008000"
-        })
-      }));
-      this.linevectorLayer = new LayerVec({
-        source: new SourceVec({
-          features: [line] //要绘制多段线，直接push到这里面就行了
-        })
-      });
-      this.map.addLayer(this.linevectorLayer);//这里是执行，执行之后点就出来了
+        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");
+            const tileGrid = new WMTSTileGrid({
+                tileSize: [256, 256],
+                origin: [-180.0, 90.0],
+                extent: [-180.0, -90.0, 180.0, 90.0],
+                resolutions: [
+                    0.703125,
+                    0.3515625,
+                    0.17578125,
+                    0.087890625,
+                    0.0439453125,
+                    0.02197265625,
+                    0.010986328125,
+                    0.0054931640625,
+                    0.00274658203125,
+                    0.001373291015625,
+                    6.866455078125e-4,
+                    3.4332275390625e-4,
+                    1.71661376953125e-4,
+                    8.58306884765625e-5,
+                    4.291534423828125e-5,
+                    2.1457672119140625e-5,
+                    1.0728836059570312e-5,
+                    5.364418029785156e-6,
+                    2.682209014892578e-6,
+                    1.341104507446289e-6,
+                    6.705522537231445e-7,
+                    3.3527612686157227e-7
+                ],
+                matrixIds: [
+                    "EPSG:4326:0",
+                    "EPSG:4326:1",
+                    "EPSG:4326:2",
+                    "EPSG:4326:3",
+                    "EPSG:4326:4",
+                    "EPSG:4326:5",
+                    "EPSG:4326:6",
+                    "EPSG:4326:7",
+                    "EPSG:4326:8",
+                    "EPSG:4326:9",
+                    "EPSG:4326:10",
+                    "EPSG:4326:11",
+                    "EPSG:4326:12",
+                    "EPSG:4326:13",
+                    "EPSG:4326:14",
+                    "EPSG:4326:15",
+                    "EPSG:4326:16",
+                    "EPSG:4326:17",
+                    "EPSG:4326:18",
+                    "EPSG:4326:19",
+                    "EPSG:4326:20",
+                    "EPSG:4326:21"
+                ]
+            });
+
+            const ign_source = new WMTS({
+                url: "http://198.17.1.146:9999/geoserver/gwc/service/wmts?CJAUTH=CJUSER",
+                layer: "CJ:G_CJ",
+                matrixSet: "EPSG:4326",
+                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({
+                    zoom: 2
+                })
+            });
+            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);
+        },
 
-    addpoint: function (addrArry, data, img, type) {
-      var lnglat = this.transpoints(addrArry, 0)[0];
-
-      let tamarker = new Feature({
-        tadata: {
-          sectionId: "point",
-          towerNumber: 22,
-          data: data,
-          type: type
-        }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
-        geometry: new Point(lnglat) //这里是点坐标的位置，这里要注意fromLonLat
-      });
-      tamarker.setStyle(
-        new Style({
-          image: new Icon({
-            color: "#eee",
-            crossOrigin: "anonymous",
-            src: require("../../assets/images/icon/" + img) //本地的样式
-          })
-        })
-      ); //这里是样式
-      var markerta = new LayerVec({
-        source: new SourceVec({
-          features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-        })
-      });
-      this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+        addline: function() {
+
+            var points = this.transpoints([
+                [118.78, 32.04],
+                [118.88, 32.14]
+            ], 0)
+
+            let line = new Feature({
+                tadata: {
+                    sectionId: "line",
+                    towerNumber: 22
+                },
+                geometry: new LineString(points)
+            }); //这里要注意写fromLonLat，很重要
+            line.setStyle(new Style({
+                stroke: new Stroke({
+                    width: 3,
+                    color: "#008000"
+                })
+            }));
+            this.linevectorLayer = new LayerVec({
+                source: new SourceVec({
+                    features: [line] //要绘制多段线，直接push到这里面就行了
+                })
+            });
+            this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
+
+        },
+
+        addpoint: function(addrArry, data, img, type) {
+            var lnglat = this.transpoints(addrArry, 0)[0];
+
+            let tamarker = new Feature({
+                tadata: {
+                    sectionId: "point",
+                    towerNumber: 22,
+                    data: data,
+                    type: type
+                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+                geometry: new Point(lnglat) //这里是点坐标的位置，这里要注意fromLonLat
+            });
+            tamarker.setStyle(
+                new Style({
+                    image: new Icon({
+                        color: "#eee",
+                        crossOrigin: "anonymous",
+                        src: require("../../assets/images/icon/" + img) //本地的样式
+                    })
+                })
+            ); //这里是样式
+            var markerta = new LayerVec({
+                source: new SourceVec({
+                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+                })
+            });
+            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: 130rem;
-  background-color: white;
+    position: absolute;
+    top: 250rem;
+    left: 140rem;
+    width: 240rem;
+    min-height: 130rem;
+    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;
 }
 
-.radio_div > div {
-  line-height: 10rem;
+.radio_div>div {
+    line-height: 10rem;
 }
 
 .el-tabs__header {
-  margin: 0 !important;
+    margin: 0 !important;
 }
 </style>