工业项目首页百度地图

柔光的暖阳◎ 2022-12-30 13:38 166阅读 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="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>