|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  | 
|---|
|  |  |  | layer: null, | 
|---|
|  |  |  | lineLayer: null, | 
|---|
|  |  |  | channel: null, | 
|---|
|  |  |  | device: null, | 
|---|
|  |  |  | infoBoxId: null, | 
|---|
|  |  |  | labelStyle: { | 
|---|
|  |  |  | width: "56px" | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | isLoging: false, | 
|---|
|  |  |  | longitudeStr: "longitude", | 
|---|
|  |  |  | latitudeStr: "latitude", | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created() { | 
|---|
|  |  |  | 
|---|
|  |  |  | 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) { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 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); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | this.deviceService.getAllSubChannel(false, data.deviceId, data.channelId, this.channelsHandler) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | label: "查询轨迹", | 
|---|
|  |  |  | icon: "el-icon-map-location", | 
|---|
|  |  |  | disabled: false, | 
|---|
|  |  |  | onClick: () => { | 
|---|
|  |  |  | this.getTrace(data) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | event, // 鼠标事件信息 | 
|---|
|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.channel = channels[0] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.infoBoxId = this.$refs.map.openInfoBox([this.channel.longitude, this.channel.latitude], this.$refs.infobox, [0, -50]) | 
|---|
|  |  |  | let position = [this.channel[this.longitudeStr], this.channel[this.latitudeStr]]; | 
|---|
|  |  |  | this.infoBoxId = this.$refs.map.openInfoBox(position, this.$refs.infobox, [0, -50]) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | closeInfoBox: function () { | 
|---|
|  |  |  | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | that.isLoging = false; | 
|---|
|  |  |  | if (res.data.code === 0) { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | that.$refs.devicePlayer.openDialog("media", deviceId, channelId, { | 
|---|
|  |  |  | streamInfo: res.data.data, | 
|---|
|  |  |  | hasAudio: channel.hasAudio | 
|---|
|  |  |  | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | let positions = []; | 
|---|
|  |  |  | for (let i = 0; i < channelPositions.length; i++) { | 
|---|
|  |  |  | if (channelPositions[i].cnLng * channelPositions[i].cnLat > 0) { | 
|---|
|  |  |  | positions.push([channelPositions[i].cnLng, channelPositions[i].cnLat]) | 
|---|
|  |  |  | if (channelPositions[i][this.longitudeStr] * channelPositions[i][this.latitudeStr] > 0) { | 
|---|
|  |  |  | positions.push([channelPositions[i][this.longitudeStr], channelPositions[i][this.latitudeStr]]) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|