合并开源主线

648540858

2023-04-04 b4048fbe80dba8e7756ae557a15ab60b4f80a44b

 web_src/src/components/map.vue

@@ -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 @@
      layer: null,
      lineLayer: null,
      channel: null,
      device: null,
      infoBoxId: null,
      labelStyle: {
        width: "56px"
      },
      isLoging: false,
      longitudeStr: "longitude",
      latitudeStr: "latitude",
    };
  },
  created() {
@@ -78,17 +82,27 @@
      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 @@
          }
          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);
              }
@@ -169,6 +186,14 @@
                this.deviceService.getAllSubChannel(false, data.deviceId, data.channelId, this.channelsHandler)
              }
            }
          },
          {
            label: "查询轨迹",
            icon: "el-icon-map-location",
            disabled: false,
            onClick: () => {
              this.getTrace(data)
            }
          }
        ],
        event, // 鼠标事件信息
@@ -183,22 +208,11 @@
        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 +231,7 @@
        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,7 +280,8 @@
        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 () {
@@ -287,7 +302,6 @@
      }).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
@@ -313,8 +327,8 @@
        } 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]])
            }

          }