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

徐旺旺

2021-05-30 f8865d1c7f36c4ffa66002e0dd3a9d5e99e4fe6b

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

@@ -3,23 +3,45 @@
        <el-row>
            <el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input>
        </el-row>
        <el-scrollbar style="height:86.22px">
            <el-row v-for="(item,index) in searchList" :key="index" style="display: flex;align-items: center">
                <el-col :span="12">
                    <span>{{ item.name }}</span>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item)">定位
                    </el-button>
                </el-col>
                <!--            <el-pagination-->
                <!--                    layout="prev, pager, next"-->
                <!--                    :total="50">-->
                <!--            </el-pagination>-->
            </el-row>
        </el-scrollbar>
        <!--        <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">
            <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>
        </el-row>
        <!--        </el-scrollbar>-->
        <!--        <el-card class="footer-page" >-->
        <div v-if="total > 10">
            <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-card>-->
        <el-row style="text-align: right">
            <el-button type="primary" @click="confirm">确认</el-button>
            <el-button type="primary" size="small" @click="confirm">确认</el-button>
        </el-row>
    </div>
</template>
@@ -29,24 +51,34 @@
import { reportLocationSearch } from '../../../../api/request'
import { pulseEffect } from '../../../../utils/utils'
import eventBus from '../../../../eventBus'
import iconUrl from '../../../../../public/assets/images/map/loc.png'
import iconUrl from '../../../../../public/assets/images/map/marker-icon.png'

export default {
  name: 'ReportLocationSearch',
  data () {
    return {
      activeNum: -1,
      // 点击定位绑定数据
      clickLocation: '',
      searchList: [],
      marker: null
      marker: null,
      total: 0,
      // 分页 默认展示
      currentPage: 1,
      // 分页 每页多少数据
      pageSize: 3
    }
  },
  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
      const data = {
        postStr: {
@@ -60,45 +92,33 @@
        },
        type: 'query'
      }
      // console.log(data)
      reportLocationSearch(data).then(res => {
        // console.log(res)
        console.log(res)
        this.searchList = res.pois
        // console.log(this.searchList)
        // 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]])
        //   }
        // }
        this.total = res.pois.length
      })
      this.clickLocation = ''
    },
    // 点击定位
    locationMapClick (val) {
      console.log(val)
    locationMapClick (val, index) {
      this.activeNum = index
      // console.log(val)
      const ps = val.lonlat.trim().split(' ')
      // const htmls = '<div><ul><li>' + val.name + '</li> + <li>' + val.adress + '</li></ul></div>'
      // const htmls = '<div><ul><li>' + val.name + '</li></ul></div>'
      // var myIcon = window.L.divIcon({
      //   html: htmls,
      //   className: 'company-bindTooltip',
      //   iconSize: 16
      // })
      const htmls = '<div><ul><li>' + val.name + '</li> <br/> <li>' + val.address + '</li> <br/> <li>' + val.phone + '</li></ul></div>'
      this.marker = window.L.marker([ps[1], ps[0]], {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconSize: [25, 40],
          iconAnchor: [15, 15]
        })
        // icon: myIcon
      })
        .bindTooltip(htmls, {
          // permanent: 'true',
        .bindTooltip(val.name, {
          permanent: 'true',
          direction: 'bottom',
          offset: [0, 10],
          sticky: true,
@@ -127,8 +147,27 @@
    /*    height: 10px;*/
    /*    max-height: 10px;*/
    /*}*/
    .div-list-search {
    .environmental-risk-list {
        color: @color;
        border-bottom: 1px solid rgba(0, 255, 246, 0.14);

        h3 {
            font-size: 0.1rem;
        }
    }

    /*<!--.environmental-risk-list:hover {-->*/
    /*<!--    color: @color-highlight;-->*/
    /*<!--    background: @background-color;-->*/
    /*<!--}-->*/
    .search-list {
        h3:hover {
            color: @color-highlight;
        }
    }

    .hover {
        color: @color-highlight;
    }

    .click-location {
@@ -144,4 +183,53 @@
            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>