Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

seatonwan9

2021-05-30 dc2421508ec5cc18dc5ff2b2df6b39aba59188c8

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue

@@ -1,82 +1,273 @@
<template>
    <div class="click-location">
        <el-row>
            <el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input>
        </el-row>
        <el-row>
            <el-button type="primary" @click="confirm" style="text-align: right">确认</el-button>
        </el-row>
  <div class="click-location">
    <el-row>
      <!--      clearable-->
      <el-input type="text" v-model="clickLocation" @change="focusLocation">
        <el-button slot="suffix" type="text" @click="focusLocation">
          <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
        </el-button>
      </el-input>
    </el-row>
    <!--        <el-scrollbar style="height:250.34px">-->
    <el-row v-for="(item,index) in searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
            style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
            class="environmental-risk-list">
<!--      <div v-if="item.resultType === 1">-->
        <el-col :span="4">
          <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
               style="background: none;margin: 0 15px">
        </el-col>
        <el-col :span="12">
          <div class=search-list>
            <!--                        <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
            <h3 style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden" :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：{{ item.name }}</h3>
            <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">地址：<span>{{ item.address }}</span>
            <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">电话：<span>{{ item.phone }}</span></p>
          </div>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
            定位
          </el-button>
        </el-col>
<!--      </div>-->
    </el-row>
    <el-row v-for="(item,index) in searchListStatistics.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
            style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
            class="environmental-risk-list">
      <!--      <div v-if="item.resultType === 1">-->
      <el-col :span="4">
        <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
             style="background: none;margin: 0 15px">
      </el-col>
      <el-col :span="12">
        <div class=search-list>
          <!--                        <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
          <h3 :class="activeNum===index?'hover':''" @click="handleLocation(index)" >名称：{{ item.name }}</h3>
          <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">地址：<span>{{ item.address }}</span>
          <p>电话：<span>{{ item.phone }}</span></p>
        </div>
      </el-col>
      <el-col :span="8" style="text-align: right">
        <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
          定位
        </el-button>
      </el-col>
      <!--      </div>-->
    </el-row>
    <div v-if="total > 5">
      <el-pagination
          small
          @current-change="handlePage"
          :page-size=pageSize
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total=total
          class="warnPagination"
      >
      </el-pagination>
    </div>
    <el-row style="text-align: right">
      <el-button type="primary" size="small" @click="confirm">确认</el-button>
    </el-row>
  </div>
</template>

<script>

import { reportLocationSearch } from '../../../../api/request'
import { pulseEffect } from '../../../../utils/utils'
import eventBus from '../../../../eventBus'
import iconUrl from '../../../../../public/assets/images/map/marker-icon.png'

export default {
  name: 'ReportLocationSearch',
  data () {
    return {
      activeNum: -1,
      // 分页
      total: 0,
      // 分页 默认展示
      currentPage: 1,
      // 分页 每页多少数据
      pageSize: 3,
      // 定位点展示
      marker: window.L.layerGroup().addTo(window.map),
      layersGroupArrList: [],
      // 点击定位绑定数据
      clickLocation: ''
      clickLocation: '',
      // 搜索数据展示列表 1
      searchList: [],
      // 搜索数据展示列表 2
      searchListStatistics: []
    }
  },
  methods: {
    // 获得焦点 进行定位
    handlePage (currentPage) {
      // this.focusLocation()
      this.currentPage = currentPage
    },
    handleLocation (index) {
      this.activeNum = index
    },
    // 搜索定位
    focusLocation () {
      // console.log(this.clickLocation)
      // console.log(window.map.getZoom())
      // console.log(window.map.getBounds())
      const getBoundsData = '' + window.map.getBounds()._southWest.lng + ',' + window.map.getBounds()._southWest.lat + ',' + window.map.getBounds()._northEast.lng + ',' + window.map.getBounds()._northEast.lat
      // 每次进行搜索 都对之前数组列表进行置空
      this.searchList = []
      this.total = ''
      this.searchListStatistics = []
      // 搜索数据data参数
      const getBoundsData = '' + window.map.getBounds().getSouthWest().lng + ',' + window.map.getBounds().getSouthWest().lat + ',' + window.map.getBounds().getNorthEast().lng + ',' + window.map.getBounds().getNorthEast().lat
      const data = {
        postStr: {
          keyWord: this.clickLocation,
          level: window.map.getZoom(),
          mapBound: getBoundsData,
          queryType: 7,
          count: 14,
          count: 50,
          start: 0,
          queryTerminal: 10000
        },
        type: 'query'
      }
      // console.log(data)
      // $http.get('http://10.246.133.164//api/search?', data)
      reportLocationSearch(data).then(res => {
        console.log(res)
        // const as = res.pois[0].lonlat.trim().split(' ')
        // window.map.setView([as[1], as[0]], 17)
        // pulseEffect([as[1], as[0]])
        for (let i = 0; i < res.pois.length; i++) {
          const as = res.pois[i].lonlat.trim().split(' ')
          if (res.pois[i].name.indexOf(this.clickLocation) >= 0) {
            window.map.setView([as[1], as[0]], 17)
            pulseEffect([as[1], as[0]])
          }
        // 返回数据类型 1（普通POI）
        if (res.resultType === 1) {
          this.searchList = res.pois
          this.total = res.pois.length
        } else if (res.resultType === 2) {
          // 返回数据类型 2（统计
          this.searchListStatistics = res.statistics.priorityCitys
          this.total = res.statistics.priorityCitys.length
        }
      })
    },
    // 点击定位
    locationMapClick (val, index) {
      this.activeNum = index
      const ps = val.lonlat.trim().split(' ')
      this.marker = window.L.marker([ps[1], ps[0]], {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [26, 40],
          iconAnchor: [13, 20]
        })
      })
        .bindTooltip(val.name, {
          permanent: 'true',
          direction: 'bottom',
          offset: [0, 10],
          sticky: true,
          className: ''
        })
      window.map.addLayer(this.marker)
      this.layersGroupArrList.push(this.marker)
      window.map.setView([ps[1], ps[0]], 17)
      pulseEffect([ps[1], ps[0]])
    },
    // 点击确认按钮事件
    confirm () {
      // 通过子组件向父组件传递数据
      this.$emit('locationClick', this.LongLatPos)
      console.log('搜索定位')
      window.mapManager.clearHighlight()
      for (let i = 0; i < this.layersGroupArrList.length; i++) {
        window.map.removeLayer(this.layersGroupArrList[i])
      }
      this.searchList = []
      this.clickLocation = ''
      this.total = 0
      eventBus.$emit('location-setChange', true)
    }
  }
}
</script>

<style lang="less" scoped>
    .click-location {
        margin: 0 auto;
        text-align: center;
/*/deep/ .el-row {*/
/*    margin: 2px 0 !important;*/
/*    padding: 0;*/
/*    height: 10px;*/
/*    max-height: 10px;*/
/*}*/
.environmental-risk-list {
  color: @color;
  border-bottom: 1px solid rgba(0, 255, 246, 0.14);

        .el-input {
            width: 80%;
            margin: 15px auto;
        }
  h3 {
    font-size: 0.1rem;
  }
}

        .el-button {
            margin: 15px auto;
        }
    }
/*<!--.environmental-risk-list:hover {-->*/
/*<!--    color: @color-highlight;-->*/
/*<!--    background: @background-color;-->*/
/*<!--}-->*/
.search-list {
  h3:hover {
    color: @color-highlight;
  }
}

.hover {
  color: @color-highlight;
}

.click-location {
  margin: 0 auto;
  text-align: center;

  .el-input {
    width: 80%;
    margin: 15px auto;
  }
}

/deep/
.warnPagination {
  .btn-quicknext, .btn-quickprev {
    color: #e4e8f1 !important;
    background-color: transparent;
    // border: 1px solid #25AECD;
    border-left: 1px solid #25AECD;
    border-bottom: 1px solid #25AECD;
    border-top: 1px solid #25AECD;
    color: #e4e8f1;
  }

  .el-pager li {
    color: #e4e8f1;
    background: transparent;
    // border: 1px solid #25AECD;
    border-left: 1px solid #25AECD;
    border-bottom: 1px solid #25AECD;
    border-top: 1px solid #25AECD;
  }

  .el-pager li.active {
    border-color: #25AECD;
    background-color: rgba(38, 222, 253, 0.3);
    color: #e4e8f1;
  }

  .el-pager li:hover {
    border-color: #25AECD;
    background-color: rgba(38, 222, 253, 0.3);
    color: #34e0ff;
  }

  .btn-prev {
    background-color: transparent;
    // border: 1px solid #25AECD;
    border-left: 1px solid #25AECD;
    border-bottom: 1px solid #25AECD;
    border-top: 1px solid #25AECD;
    color: #e4e8f1;
  }

  .btn-next {
    background-color: transparent;
    border: 1px solid #25AECD;
    color: #e4e8f1;
  }
}
</style>