From 38bcd6306f20787e394347a34e50fcf80b265fc6 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期一, 31 五月 2021 14:53:35 +0800
Subject: [PATCH] 企业应急-事件上报-事发位置问题修改
---
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue | 377 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 285 insertions(+), 92 deletions(-)
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
index 33bf401..ff69e83 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
@@ -1,27 +1,78 @@
<template>
- <div class="click-location">
- <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-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" 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>
+ </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="locationMapClick(1, item, 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(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>
+ <!-- </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>
@@ -29,116 +80,258 @@
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'
+import { publicLocationStore } from './ReportLocation'
export default {
name: 'ReportLocationSearch',
data () {
return {
+ activeNum: -1,
+ // 鍒嗛〉
+ total: 0,
+ // 鍒嗛〉 榛樿灞曠ず
+ currentPage: 1,
+ // 鍒嗛〉 姣忛〉澶氬皯鏁版嵁
+ pageSize: 3,
+ // 瀹氫綅鐐瑰睍绀�
+ marker: window.L.layerGroup().addTo(window.map),
+ layersGroupArrList: [],
// 鐐瑰嚮瀹氫綅缁戝畾鏁版嵁
clickLocation: '',
- searchList: []
+ // 鎼滅储鏁版嵁灞曠ず鍒楄〃 1
+ searchList: [],
+ // 鎼滅储鏁版嵁灞曠ず鍒楄〃 2
+ searchListStatistics: []
}
},
methods: {
- // 鑾峰緱鐒︾偣 杩涜瀹氫綅
+ // 鎼滅储瀹氫綅
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)
- 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]])
- // }
- // }
+ console.log(res)
+ // 杩斿洖鏁版嵁绫诲瀷 1锛堟櫘閫歅OI锛�
+ if (res.resultType === 1) {
+ 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) {
- console.log(val)
- const ps = val.lonlat.trim().split(' ')
- // const htmls = '<div><ul><li>' + val.name + '</li> + <li>' + val.adress + '</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>'
- const marker = window.L.marker([ps[1], ps[0]], {
- icon: window.L.icon({
- iconUrl: iconUrl,
- iconSize: [30, 30],
- iconAnchor: [15, 15]
+ 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]
+ })
})
- // icon: myIcon
- })
- .bindTooltip(htmls, {
- // 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(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 () {
- // 閫氳繃瀛愮粍浠跺悜鐖剁粍浠朵紶閫掓暟鎹�
- // this.$emit('locationClick', this.LongLatPos)
+ window.mapManager.clearHighlight()
+ 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)
- // console.log('鎼滅储瀹氫綅')
}
}
}
</script>
<style lang="less" scoped>
- /*/deep/ .el-row {*/
- /* margin: 2px 0 !important;*/
- /* padding: 0;*/
- /* 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;
+ }
+}
- .click-location {
- margin: 0 auto;
- text-align: center;
+/*<!--.environmental-risk-list:hover {-->*/
+/*<!-- color: @color-highlight;-->*/
+/*<!-- background: @background-color;-->*/
+/*<!--}-->*/
+.search-list {
+ h3:hover {
+ color: @color-highlight;
+ }
+}
- .el-input {
- width: 80%;
- margin: 15px auto;
- }
+//.environmental-risk-list :hover {
+// h3 {
+// color: @color-highlight;
+// }
+//}
- .el-button {
- margin: 15px auto;
- }
- }
+//.search-list :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>
--
Gitblit v1.8.0