派生自 wuyushui/SewerAndRainNetwork
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
@@ -1,53 +1,54 @@ <template> <div class="click-location"> <el-row> <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"> <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 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"> <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-card>--> <el-row style="text-align: right"> <el-button type="primary" size="small" @click="confirm">确认</el-button> </el-row> </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" size="small" @click="confirm">确认</el-button> </el-row> </div> </template> <script> @@ -65,7 +66,9 @@ // 点击定位绑定数据 clickLocation: '', searchList: [], marker: null, marker: window.L.layerGroup().addTo(window.map), layer: window.L.layerGroup().addTo(window.map), layersGroupArrList: [], total: 0, // 分页 默认展示 currentPage: 1, @@ -98,29 +101,23 @@ } // $http.get('http://10.246.133.164//api/search?', data) reportLocationSearch(data).then(res => { console.log(res) // console.log(res) this.searchList = res.pois this.total = res.pois.length // this.searchList = res.statistics.priorityCitys // this.total = res.statistics.priorityCitys.length }) }, // 点击定位 locationMapClick (val, index) { this.activeNum = index // console.log(val) const ps = val.lonlat.trim().split(' ') // const htmls = '<div><ul><li>' + val.name + '</li></ul></div>' // var myIcon = window.L.divIcon({ // html: htmls, // className: 'company-bindTooltip', // iconSize: 16 // }) this.marker = window.L.marker([ps[1], ps[0]], { icon: window.L.icon({ iconUrl: iconUrl, iconSize: [25, 40], iconAnchor: [15, 15] iconSize: [26, 40], iconAnchor: [13, 20] }) // icon: myIcon }) .bindTooltip(val.name, { permanent: 'true', @@ -130,15 +127,19 @@ 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 () { window.mapManager.clearHighlight() window.map.removeLayer(this.marker) 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) } } @@ -146,91 +147,91 @@ </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); /*/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); h3 { font-size: 0.1rem; } } h3 { font-size: 0.1rem; } } /*<!--.environmental-risk-list:hover {-->*/ /*<!-- color: @color-highlight;-->*/ /*<!-- background: @background-color;-->*/ /*<!--}-->*/ .search-list { h3:hover { color: @color-highlight; } } /*<!--.environmental-risk-list:hover {-->*/ /*<!-- color: @color-highlight;-->*/ /*<!-- background: @background-color;-->*/ /*<!--}-->*/ .search-list { h3:hover { color: @color-highlight; } } .hover { color: @color-highlight; } .hover { color: @color-highlight; } .click-location { margin: 0 auto; text-align: center; .click-location { margin: 0 auto; text-align: center; .el-input { width: 80%; margin: 15px auto; } } .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; } /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 { 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.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; } .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-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; } } .btn-next { background-color: transparent; border: 1px solid #25AECD; color: #e4e8f1; } } </style>
