百度地图 vue-map 根据状态定位多个

小灰灰 2022-12-30 14:57 114阅读 0赞

<template>
      <div class="baidu_map">
        <baidu-map
          class="map"
          :center="position"
          :zoom="11"
          :scroll-wheel-zoom="true"
          id="map"
          @ready="readyHandle"
        >
          <template>
            <div>
              <bm-marker
                v-for="item in areaData"
                :key="item.code"
                :position="{ lng: item.site.lng, lat: item.site.lat }"
                :icon="{ 
                  url: setIcon(item.status),
                  size: {  width: 32, height: 35 },
                }"
                @click="mapInfroWindowHandle(item, $event)"
                :offset="{ width: 0, height: 0 }"
              ></bm-marker>
            </div>
          </template>
          <bm-info-window
            :position="infoPosition"
            :show="infoWindow.show"
            class="info_window_box"
          >
            <div class="info_window">
              <div class="info_window_one">
                <div>
                  <span>设备编号: </span>
                  <span>123465789</span>
                </div>
                <div @click="jumpDetails">查看更多>></div>
              </div>
              <div>
                <span>安装地点: </span>
                <span class="address">河南省郑州市中原区国家大学科技园Y6栋三楼扁担信息科技有限公司</span>
              </div>
              <div>
                <span>作业时长: </span>
                <span>1.5h</span>
              </div>
              <div>
                <span>负责人: </span>
                <span>刘德华</span>
              </div>
              <div>
                <span>设备状态: </span>
                <span style="color:green;">正常</span>
              </div>
              <div>
                <img
                  src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969077830,2891440464&fm=26&gp=0.jpg"
                  style="width: 100%; height: 100px"
                  alt=""
                />
              </div>
            </div>
          </bm-info-window>
        </baidu-map>
        <ul class="state_icon">
          <li><i class="blue_icon"></i>正常</li>
          <li><i class="red_icon"></i>禁用</li>
          <li><i class="pink_icon"></i>告警</li>
          <li><i class="gray_icon"></i>离线</li>
        </ul>
        <div class="search_bar">
              <div class="search_info" style="display: flex">
                <span>
                  <el-select
                    v-model="searchObj.type"
                    placeholder="请选择设备类型"
                    clearable
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.key"
                      :label="item.name"
                      :value="item.key"
                    ></el-option>
                  </el-select>
                </span>
                <span style="margin: 0 20px">
                  <el-input
                    v-model="searchObj.firmName"
                    placeholder="请输入设备编号"
                    clearable
                  ></el-input>
                </span>
                <span>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="searchProject"
                    >搜索</el-button
                  >
                </span>
              </div>
              <div class="info">
                <div><span>接入企业数量:</span> <span class="info_number">100</span><span>家</span></div>
                <div><span>在线企业数量:</span> <span class="info_number">100</span><span>家</span></div>
                <div><span>接入设备数量:</span> <span class="info_number">100</span><span>台</span></div>
                <div><span>在线设备数量:</span> <span class="info_number">100</span><span>台</span></div>
                <div><span>离线设备数量:</span> <span class="info_number">100</span><span>台</span></div>
              </div>
        </div>
      </div>
    </template>
    <script>
    export default { 
      data() { 
        return { 
          areaData: [],
          position: "北京市",
          show: true,
          infoWindow: { 
            show: false,
          },
          infoPosition: { 
            lng: "",
            lat: "",
          },
          options: [],
          code: "",
          searchObj: { 
            firmName: "",
            type: "",
          },
        };
      },
      computed: { },
      methods: { 
        jumpDetails() { 
          alert("跳转到详情");
        },
        readyHandle({  BMap, map }) { 
          console.log(BMap, map);
          this.searchProject();
        },
        getMapRegions() { 
          let that = this;
          let obj = { };
          that.$api.home
            .getMapRegions(obj)
            .then((res) => { 
              if (res.code == 200) { 
                that.areaData = res.data;
              }
            })
            .catch((err) => { 
              that.$message.error(err.message || "获取区域失败");
            });
        },
        searchProject() { 
          this.getMapRegions();
        },
        setIcon(state) { 
          let iconUrl = "";
          switch (state) { 
            case 0:
              iconUrl = require("../../assets/home_map/gray.png");
              break;
            case 1:
              iconUrl = require("../../assets/home_map/green.png");
              break;
            case 2:
              iconUrl = require("../../assets/home_map/red.png");
              break;
            case 3:
              iconUrl = require("../../assets/home_map/yellow.png");
          }
          return iconUrl;
        },
        mapInfroWindowHandle(item, ev) { 
          console.log(item);
          this.infoWindow.show = true;
          this.infoPosition.lng = ev.point.lng;
          this.infoPosition.lat = ev.point.lat;
        },
      },
      created() { 
        this.position = "郑州市";
      },
      mounted() { },
    };
    </script>
    <style lang="scss" scoped>
    .baidu_map { 
      position: relative;
      box-sizing: border-box;
      height: 100%;
      font-size: 14px;
      .map { 
        width: 100%;
        height: 100%;
      }
      /deep/.BMap_bubble_content { 
        background: #f9f9f9;
      }
      .search_bar { 
        position: absolute;
        top: 10px;
        left: 20px;
        display: flex;
        .info{ 
          display: flex;
          background: #fff;
          padding: 10px 20px;
          margin: 0 50px;
          div{ 
            margin: 0 10px;
            .info_number{ 
              color:#f1bf00;
              font-size: 18px;
              margin: 0 3px;
            }
          }
        }
      }
      .state_icon { 
        position: absolute;
        display: flex;
        right: 30px;
        top: 70px;
        width: 120px;
        background-color: rgba(255, 255, 255, 0.9);
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 0;
        li { 
          width: 100%;
          line-height: 30px;
          font-size: 14px;
          text-align: center;
          color: #000;
          i { 
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 18px;
            vertical-align: middle;
            margin-top: -2px;
          }
          i.blue_icon { 
            background-color: #00e931;
          }
          i.red_icon { 
            background-color: #ff2600;
          }
          i.gray_icon { 
            background-color: gray;
          }
          i.pink_icon { 
            background-color: #ff9900;
          }
        }
      }
      .info_window_box { 
        font-size: 14px;
        width: 250px;
        padding: 10px;
        .info_window { 
          width: 100%;
          div { 
            padding: 5px 0;
          }
          .info_window_one { 
            width: 100%;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            .address{ 
              font-size: 12px;
            }
          }
          .info_window_one div:nth-child(2) { 
            color: #f1bf00;
          }
        }
      }
    }
    </style>