|
|
@@ -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>
|
459242451@qq.com