XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化国标树型展示

Browse Source
This commit is contained in:
648540858
2022-07-03 07:40:54 +08:00
parent 0da452293f
commit f5fcc79a2c
29 changed files with 1341 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
web_src/src/components/map.vue
View File

@@ -16,7 +16,8 @@
<el-descriptions class="margin-top" :title="channel.name" :column="1" :colon="true" size="mini" :labelStyle="labelStyle" >
<el-descriptions-item label="编号" >{{channel.channelId}}</el-descriptions-item>
<el-descriptions-item label="型号">{{channel.model}}</el-descriptions-item>
<el-descriptions-item label="经纬度" >{{channel.longitude}},{{channel.latitude}}</el-descriptions-item>
<el-descriptions-item label="经度" >{{channel[longitudeStr]}}</el-descriptions-item>
<el-descriptions-item label="纬度" >{{channel[latitudeStr]}}</el-descriptions-item>
<el-descriptions-item label="生产厂商">{{channel.manufacture}}</el-descriptions-item>
<el-descriptions-item label="行政区域" >{{channel.civilCode}}</el-descriptions-item>
<el-descriptions-item label="设备归属" >{{channel.owner}}</el-descriptions-item>
@@ -28,7 +29,7 @@
</el-descriptions-item>
</el-descriptions>
<div style="padding-top: 10px">
<el-button type="primary" size="small" title="播放" icon="el-icon-video-play" @click="play(channel)"></el-button>
<el-button v-bind:disabled="device == null || device.online === 0" type="primary" size="small" title="播放" icon="el-icon-video-play" @click="play(channel)"></el-button>
<el-button type="primary" size="small" title="编辑位置" icon="el-icon-edit" @click="edit(channel)"></el-button>
<el-button type="primary" size="small" title="轨迹查询" icon="el-icon-map-location" @click="getTrace(channel)"></el-button>
</div>
@@ -64,11 +65,14 @@ export default {
layer: null,
lineLayer: null,
channel: null,
device: null,
infoBoxId: null,
labelStyle: {
width: "56px"
},
isLoging: false,
longitudeStr: "longitude",
latitudeStr: "latitude",
};
},
created() {
@@ -78,17 +82,27 @@ export default {
setTimeout(()=>{ // 延迟以等待地图加载完成 TODO 后续修改为通过是实际这；状态加回调完成
this.deviceService.getAllChannel(false, false, this.$route.query.deviceId, this.channelsHandler)
}, 1000)
}
if (window.mapParam.coordinateSystem == "GCJ-02") {
this.longitudeStr = "longitudeGcj02";
this.latitudeStr = "latitudeGcj02";
}else if (window.mapParam.coordinateSystem == "WGS84") {
this.longitudeStr = "longitudeWgs84";
this.latitudeStr = "latitudeWgs84";
}else {
this.longitudeStr = "longitude";
this.latitudeStr = "latitude";
}
},
destroyed() {
},
methods: {
clickEvent: function (data) {
if (data.channelId && data.subCount == 0) {
clickEvent: function (device, data, isCatalog) {
this.device = device;
if (data.channelId && !isCatalog) {
// 点击通道
if (data.longitude * data.latitude === 0) {
if (data[this.longitudeStr] * data[this.latitudeStr] === 0) {
this.$message.error('未获取到位置信息');
} else {
if (this.layer != null) {
@@ -96,26 +110,29 @@ export default {
}
this.closeInfoBox()
this.layer = this.$refs.map.addLayer([{
position: [data.longitude, data.latitude],
position: [data[this.longitudeStr], data[this.latitudeStr]],
image: {
src: this.getImageByChannel(data),
anchor: [0.5, 1]
},
data: data
}], this.featureClickEvent)
this.$refs.map.panTo([data.longitude, data.latitude], mapParam.maxZoom)
this.$refs.map.panTo([data[this.longitudeStr], data[this.latitudeStr]], mapParam.maxZoom)
}
}
},
contextmenuEventHandler: function (event, data) {
if (data.channelId && data.subCount == 0) {
contextmenuEventHandler: function (device, event, data, isCatalog) {
console.log(device)
console.log(device.online)
this.device = device;
if (data.channelId && !isCatalog) {
// 点击通道
this.$contextmenu({
items: [
{
label: "播放",
icon: "el-icon-video-play",
disabled: false,
disabled: device.online === 0,
onClick: () => {
this.play(data);
}
@@ -183,22 +200,11 @@ export default {
this.clean()
this.closeInfoBox()
let params = [];
let longitudeStr;
let latitudeStr;
if (window.mapParam.coordinateSystem == "GCJ-02") {
longitudeStr = "longitudeGcj02";
latitudeStr = "latitudeGcj02";
}else if (window.mapParam.coordinateSystem == "WGS84") {
longitudeStr = "longitudeWgs84";
latitudeStr = "latitudeWgs84";
}else {
longitudeStr = "longitude";
latitudeStr = "latitude";
}
for (let i = 0; i < channels.length; i++) {
let longitude = channels[i][longitudeStr];
let latitude = channels[i][latitudeStr];
let longitude = channels[i][this.longitudeStr];
let latitude = channels[i][this.latitudeStr];
if (longitude * latitude === 0) {
continue;
}
@@ -217,7 +223,7 @@ export default {
this.layer = this.$refs.map.addLayer(params, this.featureClickEvent)
console.log(4)
if (params.length === 1) {
this.$refs.map.panTo([channels[0][longitudeStr], channels[0][latitudeStr]], mapParam.maxZoom)
this.$refs.map.panTo([channels[0][this.longitudeStr], channels[0][this.latitudeStr]], mapParam.maxZoom)
} else if (params.length > 1) {
this.$refs.map.fit(this.layer)
} else {
@@ -266,19 +272,7 @@ export default {
this.channel = channels[0]
}
this.$nextTick(() => {
let longitudeStr;
let latitudeStr;
if (window.mapParam.coordinateSystem == "GCJ-02") {
longitudeStr = "longitudeGcj02";
latitudeStr = "latitudeGcj02";
}else if (window.mapParam.coordinateSystem == "WGS84") {
longitudeStr = "longitudeWgs84";
latitudeStr = "latitudeWgs84";
}else {
longitudeStr = "longitude";
latitudeStr = "latitude";
}
let position = [this.channel[longitudeStr], this.channel[latitudeStr]];
let position = [this.channel[this.longitudeStr], this.channel[this.latitudeStr]];
this.infoBoxId = this.$refs.map.openInfoBox(position, this.$refs.infobox, [0, -50])
})
},