nsgk_mobile/src/views/lawEnforcement/caseDistribution/caseDistribution.vue

<template>
    <div class="home_wrapper">
      <div class="header_main">
        案件分布
        <div class="return_btn" @click="onClickLeft"></div>
      </div>
      <div class="tab">
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item v-model="value1" :options="option1" @change="changeYear" />
          <van-dropdown-item v-model="value2" :options="option2" @change="changeDept" />
        </van-dropdown-menu>
      </div>
      <div id='container'></div>
    </div>
</template>

<script>
  import {casePointList, treeselect} from "@/api/lawEnforcement/index";
  let map ;
  let myGeo ;
  export default {
    name: "caseAllocation",
    data() {
      return {
        value1: 2022,
        value2: '',
        option1: [
          { text: '2022', value: 2022 },
          { text: '2021', value: 2021 },
          { text: '2020', value: 2020 },
          { text: '2019', value: 2019 },
          { text: '2018', value: 2018 },
        ],
        option2: [
          { text: '全部', value: '' },
          { text: '羊亭镇', value: '山东省威海市羊亭镇' },
          { text: '张村镇', value: '山东省威海市张村镇' },
          { text: '桥头镇', value: '山东省威海市桥头镇' },
          { text: '温泉镇', value: '山东省威海市温泉镇' },
        ],
        geoJson: "",
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 1, //地图展示级别
      };
    },
    created() {
      treeselect().then((response) => {
        if (response.code == 200) {
          this.deptOptions = response.data;
        }
      })
    },
    mounted(){

      this.getCasePointList();

    },
    methods: {
      getCasePointList(){
        let query = {
          year:'2022',
          deptId:'100'
        };
        casePointList(query).then(res => {
          this.clockin_user = res.data.userName;
          // 将地址解析结果显示在地图上，并调整地图视野
          map = new BMapGL.Map('container');
          //创建地址解析器实例
          myGeo = new BMapGL.Geocoder();
          for (let i = 0 ; i < res.data.length ; i++){
            myGeo.getPoint(res.data[i].address, function(point) {
              if (point) {
                map.centerAndZoom(point, 10);
                map.enableScrollWheelZoom(true);
                map.addOverlay(new BMapGL.Marker(point, {}))
              }
            },'北京市')
          }
        })
      },
      changeDept(val){
        myGeo.getPoint(val, function(point) {
          if (point) {
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom(true);
            // map.addOverlay(new BMapGL.Marker(point, {}))
          }
        })
      },
      changeYear(val){
        let query = {
          year:val,
          deptId:'100'
        };
        casePointList(query).then(res => {
          this.clockin_user = res.data.userName;
          // 将地址解析结果显示在地图上，并调整地图视野
          map = new BMapGL.Map('container');
          //创建地址解析器实例
          myGeo = new BMapGL.Geocoder();
          for (let i = 0 ; i < res.data.length ; i++){
            myGeo.getPoint(res.data[i].address, function(point) {
              if (point) {
                map.centerAndZoom(point, 10);
                map.enableScrollWheelZoom(true);
                map.addOverlay(new BMapGL.Marker(point, {}))
              }
            },'北京市')
          }
        })
      }

    },
  }
</script>

<style scoped lang="scss">

  #container{
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  #result{
    position: fixed;
    top: 10px;
    left: 10px;
    width: 250px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    border-radius: 7px;
    z-index: 99;
  }
.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    padding: 0 ;
    background: url('../../../../static/images/lawEnforcement/new/map.png') no-repeat 27%;
    background-size: auto 100%;
    .header_main{
        height: 116px;
        background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        z-index: 999;
        .return_btn{
            width: 24px;
            height: 43.2px;
            background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
        .add_btn{
            width: 56.4px;
            height: 40.8px;
            background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
}
  .tab{
    width: 94%;
    position: absolute;
    top: 130px;
    left: 3%;
    border-radius: 8PX;
    overflow: hidden;
    z-index: 999999;
    /deep/ .van-dropdown-item__content{
      width: 94%;
      left: 3%;
      border-bottom-left-radius: 8PX;
      border-bottom-right-radius: 8PX;
    }
  }
.map_area {
  width: 100vw;
  height: 100vh;
  background: #ddd;
  position: absolute;
  left: 0;
  top: 0;
}
</style>