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

seatonwan9

2021-05-31 d4fca49a4b70fe60c730d7e32e2035153a91fcc5

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

@@ -2,7 +2,7 @@
  <div class="click-location">
    <el-row>
      <!--      clearable-->
      <el-input type="text" v-model="clickLocation" @change="focusLocation">
      <el-input type="text" v-model="clickLocation" @change="focusLocation" style="display:flex;align-items: center">
        <el-button slot="suffix" type="text" @click="focusLocation">
          <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
        </el-button>
@@ -10,29 +10,6 @@
    </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">-->
@@ -43,13 +20,38 @@
      <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>
          <h3 style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden"
              :class="activeNum===index?'hover':''" @click="locationMapClick(1, item, index)">名称：{{ item.name }}</h3>
          <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">地址：<span>{{ item.address }}</span>
          <p>电话：<span>{{ item.phone }}</span></p>
          <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 type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(1,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 @click="locationMapClick(2, item, index)" :class="activeNum===index?'hover':''">名称：{{ item.name }}</h3>
          <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">行政代码：<span>{{ item.adminCode }}</span>
          <p></p>
        </div>
      </el-col>
      <el-col :span="8" style="text-align: right">
        <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(2,item,index)">
          定位
        </el-button>
      </el-col>
@@ -79,6 +81,7 @@
import { pulseEffect } from '../../../../utils/utils'
import eventBus from '../../../../eventBus'
import iconUrl from '../../../../../public/assets/images/map/marker-icon.png'
import { publicLocationStore } from './ReportLocation'

export default {
  name: 'ReportLocationSearch',
@@ -103,13 +106,6 @@
    }
  },
  methods: {
    handlePage (currentPage) {
      // this.focusLocation()
      this.currentPage = currentPage
    },
    handleLocation (index) {
      this.activeNum = index
    },
    // 搜索定位
    focusLocation () {
      // 每次进行搜索 都对之前数组列表进行置空
@@ -135,40 +131,82 @@
        console.log(res)
        // 返回数据类型 1（普通POI）
        if (res.resultType === 1) {
          this.searchList = res.pois
          // this.total = res.count
          this.total = res.pois.length
          if (res.pois) {
            this.searchList = res.pois
            // this.total = res.count
            this.total = res.pois.length
          }
        } else if (res.resultType === 2) {
          // 返回数据类型 2（统计
          this.searchListStatistics = res.statistics.priorityCitys
          this.total = res.statistics.priorityCitys.length
        } else if (res.resultType === 3) {
          // 返回数据类型 3 area 区域
        } else {
          this.$message('未搜索到您想要数据')
        }
      })
    },
    // getStyle (index) {
    //   console.log(index)
    //   if (this.activeNum === index) {
    //     return { color: 'red' }
    //   }
    // },
    // 点击定位
    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]
    locationMapClick (type, val, index) {
      // this.activeNum = index
      // this.getStyle(index)
      // console.log(val)
      if (type === 1) {
        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: ''
          .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]])
      } else if (type === 2) {
        this.activeNum = index
        const ps = [val.lon, val.lat]
        this.marker = window.L.marker([ps[1], ps[0]], {
          icon: window.L.icon({
            iconUrl: iconUrl,
            iconSize: [26, 40],
            iconAnchor: [13, 20]
          })
        })
      window.map.addLayer(this.marker)
      this.layersGroupArrList.push(this.marker)
      window.map.setView([ps[1], ps[0]], 17)
      pulseEffect([ps[1], ps[0]])
          .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]])
      }
    },
    // 分页功能 当前页
    handlePage (currentPage) {
      console.log(currentPage)
      this.currentPage = currentPage
      this.activeNum = -1
    },
    // 点击确认按钮事件
    confirm () {
@@ -176,9 +214,28 @@
      for (let i = 0; i < this.layersGroupArrList.length; i++) {
        window.map.removeLayer(this.layersGroupArrList[i])
      }
      // 事件上报 位置信息 存储数据库
      const data = {
        ID: '',
        EventID: '',
        EventPipeline: '',
        EventPipeSeg: '',
        EventAffType: '',
        EventAffCode: '',
        EventAffPointNum: '',
        EventPosX: '',
        EventPosY: '',
        AcquisitionPeople: '',
        AcquisitionDate: ''
      }
      // 通过方法 存储数据 进行 数据库存储数据
      publicLocationStore(data)
      // 确认事件 置空数据
      this.searchList = []
      this.searchListStatistics = []
      this.clickLocation = ''
      this.total = 0
      // 通过 传递数据 关闭 位置选择
      eventBus.$emit('location-setChange', true)
    }
  }
@@ -186,12 +243,6 @@
</script>

<style lang="less" scoped>
/*/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);
@@ -211,6 +262,16 @@
  }
}

//.environmental-risk-list :hover {
//  h3 {
//    color: @color-highlight;
//  }
//}

//.search-list :hover {
//  color: @color-highlight;
//}

.hover {
  color: @color-highlight;
}