工业项目 首页百度地图

<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="jumpToDetails(item.code)"
            :offset="{ width: 0, height: 0 }"
            @mouseover="mouseoverHand(item, $event)"
            @mouseout="mouseoutHand"
          ></bm-marker>
        </div>
      </template>
    </baidu-map>
    <ul :class="bgColor" v-show="infoWindow.show" ref="boxPosition">
      <li>企业名称 : {{ infoWindow.contents.enterpriseName }}</li>
      <li>位置 : {{ infoWindow.contents.address }}</li>
      <li>油烟浓度 : {{ infoWindow.contents.lampblackRtd }}mg/m³</li>
      <li>VOC : {{ infoWindow.contents.vocRtd }}ppm</li>
      <li>颗粒物 : {{ infoWindow.contents.grainRtd }}ug/m³</li>
    </ul>
    <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">
      <el-col>
        <div class="search_info" style="display: flex">
          <span>
            <el-select v-model="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 80px">
            <el-input
              v-model="firmName"
              placeholder="请输入企业名称"
              clearable
            ></el-input>
          </span>
          <span>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchProject"
              >搜索</el-button
            >
          </span>
        </div>
      </el-col>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      areaData: [],
      position: "北京市",
      show: true,
      formInline: {
        projectName: "",
      },
      infoWindow: {
        show: false,
        contents: {
          enterpriseName: "",
          address: "",
          lampblackRtd: "",
          vocRtd: "",
          status: "",
          grainRtd: "",
        },
      },
      showElseColor: false,
      search: false,

      options: [],
      code: "",
      type: undefined,
      firmName: undefined,
      bgColor: "",
    };
  },
  computed: {},
  methods: {
    readyHandle({ BMap, map }) {
      this.searchProject();
    },
    //获取类型
    getEquipmentType() {
      this.$api.equipment.equipmentType().then((res) => {
        if (res.code == 200) {
          const { data } = res;
          this.options = data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getMapRegions() {
      let that = this;
      let obj = {
        type: that.type,
        enterpriseName: that.firmName,
        userCode: that.code,
      };
      that.$api.home
        .search(obj)
        .then((res) => {
          if (res.code == 200) {
            console.log(res)
            that.areaData = res.data;
            // if (obj.type == undefined && obj.enterpriseName == undefined) {
            //    that.position = JSON.parse(JSON.parse(sessionStorage.getItem('userInfo'))).provinceName;
            // } else if (that.areaData.length != 0) {
            //   that.position = {};
            //   that.position.lng = Number(res.data[0].site.lng);
            //   that.position.lat = Number(res.data[0].site.lat);
            // }
          }
        })
        .catch((err) => {
          that.$message.error(err.message || "获取区域失败");
        });
    },
    searchProject() {
      this.search = true;
      this.getMapRegions();
    },
    //配置icon图标
    setIcon(state) {
      let iconUrl = "";
      switch (state) {
        case 0:
          iconUrl = require("../../assets/images/map-gray.png");
          break;
        case 1:
          iconUrl = require("../../assets/images/map-blue.png");
          break;
        case 2:
          iconUrl = require("../../assets/images/map-red.png");
          break;
        case 3:
          iconUrl = require("../../assets/images/map-pink.png");
      }
      return iconUrl;
    },
    setBgCol(state) {
      switch (state) {
        case 0:
          this.bgColor = "marker_message add-gray";
          break;
        case 1:
          this.bgColor = "marker_message add-blue";
          break;
        case 2:
          this.bgColor = "marker_message add-red";
          break;
        case 3:
          this.bgColor = "marker_message add-pink";
      }
      return this.bgColor;
    },
    mouseoverHand(item, data) {
      this.infoWindow.show = true;
      // if (item.status == 0) {
      //   this.showElseColor = false;
      // } else {
      //   this.showElseColor = true;
      // }
      this.setBgCol(item.status);
      let iWidth = document.querySelector(".baidu_map").offsetWidth;
      let iHeight = document.querySelector(".baidu_map").offsetHeight;
      // console.log(iWidth,iHeight)
      let hoverTop = iHeight - 164;
      let hoverLeft = iWidth - 280;
      if (data.pixel.y < 35) {
        this.$refs.boxPosition.style.top = 5 + "px";
      } else if (data.pixel.y > hoverTop) {
        this.$refs.boxPosition.removeAttribute("style");
        this.$refs.boxPosition.style.bottom = 5 + "px";
      } else {
        this.$refs.boxPosition.removeAttribute("style");
        this.$refs.boxPosition.style.top = data.pixel.y - 30 + "px";
      }
      if (data.pixel.x > hoverLeft) {
        this.$refs.boxPosition.style.left = data.pixel.x - 270 + "px";
      } else {
        this.$refs.boxPosition.style.left = data.pixel.x + 20 + "px";
      }
      let {
        enterpriseName,
        address,
        lampblackRtd,
        vocRtd,
        status,
        grainRtd,
      } = item;
      this.infoWindow.contents = {
        enterpriseName,
        address,
        lampblackRtd,
        vocRtd,
        status,
        grainRtd,
      };
    },
    mouseoutHand() {
      this.infoWindow.show = false;
    },
    jumpToDetails(id) {
      this.$router.push({
        path: "/equipment/details",
        query: { code: id },
      });
    },
  },
  created() {
    this.position = JSON.parse(JSON.parse(sessionStorage.getItem('userInfo'))).cityName;
    this.code = JSON.parse(JSON.parse(sessionStorage.getItem("userInfo"))).code;
    this.getEquipmentType();
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
.baidu_map {
  position: relative;
  height: calc(100vh - 60px);
  padding: 5px;
  box-sizing: border-box;
  .map {
    width: 100%;
    height: 100%;
  }
  .marker_message {
    position: absolute;
    width: 260px;
    padding: 10px;
    background-color: rgba(0, 153, 255, 0.8);
    border-radius: 6px;
    box-sizing: border-box;
    li {
      line-height: 1.2em;
      font-size: 14px;
      color: #fff;
      padding: 10px;
    }
  }
  .add-red {
    background-color: rgba(255, 38, 0, 0.8);
  }
  .add-blue {
    background-color: rgba(0, 153, 255, 0.8);
  }
  .add-gray {
    background-color: rgba(169, 169, 169, 0.8);
  }
  .add-pink {
    background-color: rgba(255, 105, 180, 0.8);
  }

  .search_bar {
    position: absolute;
    top: 20px;
    left: 30px;
  }
  .state_icon {
    position: absolute;
    display: flex;
    right: 30px;
    top: 30px;
    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: #0099ff;
      }
      i.red_icon {
        background-color: #ff2600;
      }
      i.gray_icon {
        background-color: gray;
      }
      i.pink_icon {
        background-color: pink;
      }
    }
  }
}
</style>