|  |  | 
 |  |  |           <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]]) | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |           } |