room_position_web/src/views/index.vue

<template>
  <div class="home">

    <el-card class="head_card"
      shadow="always">
      <el-row class="head_card_row">
        <el-col :span="5"
          class="head_card_item">
          <span class="button_title">当前设备：</span>
          <el-select v-model="value"
            placeholder="请选择"
            @change="selectDevice">
            <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="4"
          class="head_card_item">
          <span class="button_title">当前设备状态：</span>

          <el-tag type="success"
            v-if="device.statue === 1">设备在线</el-tag>

          <el-tag type="danger"
            v-else-if="device.statue === 0">设备离线</el-tag>
          <el-tag v-else>无设备</el-tag>
        </el-col>

        <el-col :span="5"
          class="head_card_item">
          <span class="button_title">当前设备经度：</span>
          <span style="font-size: 17px;font-weight: bold;">{{ device.lon }}</span>
        </el-col>

        <el-col :span="5"
          class="head_card_item">
          <span class="button_title">当前设备纬度：</span>
          <span style="font-size: 17px;font-weight: bold;">{{ device.lat }}</span>
        </el-col>

        <el-col :span="5"
          class="head_card_item">
          <span class="button_title">当前设备解算状态:</span>
          <span style="font-size: 17px;font-weight: bold;">
            <!-- 只有当 f 为 0 时，显示 "无效" -->
            <span v-if="device.f === 0">无效</span>

            <!-- 当 f 为 1 时，显示 "单点定位" -->
            <span v-else-if="device.f === 1">单点定位</span>

            <!-- 当 f 为 2 时，显示 "差分定位" -->
            <span v-else-if="device.f === 2">差分定位</span>

            <!-- 当 f 为 3 时，显示 "GPS PPS 模式" -->
            <span v-else-if="device.f === 3">GPS PPS 模式</span>

            <!-- 当 f 为 4 时，显示 "RTK Int" -->
            <span v-else-if="device.f === 4">RTK Int</span>

            <!-- 当 f 为 5 时，显示 "RTK Float" -->
            <span v-else-if="device.f === 5">RTK Float</span>

            <!-- 当 f 为 6 时，显示 "惯导模式" -->
            <span v-else-if="device.f === 6">惯导模式</span>

            <!-- 当 f 为 7 时，显示 "手动输入模式" -->
            <span v-else-if="device.f === 7">手动输入模式</span>

            <!-- 当 f 为 8 时，显示 "模拟器模式" -->
            <span v-else-if="device.f === 8">模拟器模式</span>

            <!-- 其他情况都显示 "无" -->
            <span v-else>无</span>
          </span>
        </el-col>


      </el-row>

    </el-card>

    <el-card class="map_card"
      shadow="always">
      <div id="mapContainer"
        class="map"></div>

    </el-card>

  </div>
</template>

<script>
import api from "@/api/item/device";
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: 'Home',
  data() {
    return {
      map: null,                   // 地图实例
      options: [],                 // 设备选项
      value: '',                   // 设备值
      device: [],                  // 设备数据
      marker: null,                // 标记点
    };
  },

  mounted() {
    this.initMap();
    this.getOptions();

  },
  methods: {
    // 获取设备选项
    getOptions() {
      api.getDeviceOptions().then(res => {
        console.log(res.data);
        this.options = res.data;
      })
    },

    // 选择设备
    selectDevice(val) {
      console.log(val);
      api.getDeviceData(val).then(res => {
        console.log(res.data);
        this.device = res.data;
        this.drawMarkers(res.data);
      })

    },

    // 绘制点标记
    drawMarkers(device) {
      console.log(this.marker);

      let image = ''
      if (this.marker) {
        this.map.remove(this.marker);
        this.marker = null;
      }

      if (device.statue === 1) {
        image = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
      } else {
        image = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
      }

      this.marker = new AMap.Marker({
        map: this.map,
        position: [device.lon, device.lat],
        icon: new AMap.Icon({
          size: new AMap.Size(30, 30),
          image: image,
          imageOffset: new AMap.Pixel(0, 0)
        })
      });
      this.marker.on("click", () => {
        console.log(device);
        this.$router.push({ path: '/outdoor', query: { id: device.id, deviceId: device.deviceid } })   // 跳转到详情页
      })
      this.map.setCenter([device.lon, device.lat]);
    },


    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "577ee62b1059d73852c20c1f37638659",
        version: "2.0",
        plugins: ['AMap.Marker', 'AMap.InfoWindow', 'AMap.Polygon', 'AMap.Icon'], // 需要使用的插件列表
      }).then((AMap) => {
        /*初始化地图*/
        this.map = new AMap.Map("mapContainer", { //设置地图容器id
          layers: [
            // 路网
            // new AMap.TileLayer.RoadNet(),
          ],
          center: [116.3912, 39.9062],
          zoom: 12
        });

      }).catch(e => {
        console.log(e)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #ffffff;
}

.button_title {
  font-family: '微软雅黑';
  font-size: 16px;
  margin-right: 10px;
}

.head_card {
  margin-bottom: 10px;
  height: 75px;

  &_row {
    display: flex;
    align-items: center;
    /* 垂直居中所有列 */
  }

  &_item {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: flex-start;
    /* 水平居中，视需要而定 */
    height: 100%;
    /* 确保有足够的高度 */
  }
}

.map_card {
  position: relative;
  height: calc(100% - 80px);
  width: 100%;
}

.map {
  position: absolute;
  width: 98%;
  height: 95%
}
</style>