From f2ca9d635d62888e80d5629ede9af899149b6815 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期日, 30 五月 2021 13:31:55 +0800
Subject: [PATCH] 企业应急-事件上报-定位布局优化
---
src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue | 40 ++++--
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue | 174 +++++++++++++++++++++-------
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue | 139 +++++++++++++---------
src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue | 4
src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue | 2
5 files changed, 244 insertions(+), 115 deletions(-)
diff --git a/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue b/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue
index 85d1972..71adc84 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue
@@ -127,8 +127,8 @@
</el-form-item>
</div>
<el-form-item class="confirmCancel">
- <el-button type="primary" @click="submitForm('ruleForm')">纭</el-button>
- <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button>
+ <el-button type="primary" size="small" @click="submitForm('ruleForm')">纭</el-button>
+ <el-button size="small" @click="resetForm('ruleForm')">鍙栨秷</el-button>
</el-form-item>
</el-form>
<el-dialog
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
index 96388b5..58c1bc9 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
@@ -3,28 +3,42 @@
<el-row class="place-box">
<div class="place-left">
<el-form :model="LongLatPos" label-width="90px">
- <el-form-item label="缁忓害:">
- <el-input v-model="LongLatPos.longPos"></el-input>
- </el-form-item>
- <el-form-item label="绾害:">
- <el-input v-model="LongLatPos.latPos"></el-input>
- </el-form-item>
+ <el-row style="display: flex;align-items: center">
+ <el-form-item label="缁忓害:" style="display: inline-block">
+ <el-col :span="20">
+ <el-input v-model="LongLatPos.longPos"></el-input>
+ </el-col>
+ </el-form-item>
+ <el-col :span="4">
+ <el-button type="primary" size="small" @click="mapPoints">鐐瑰嚮瀹氫綅</el-button>
+ </el-col>
+ </el-row>
+ <el-row style="display: flex;align-items: center">
+ <el-form-item label="绾害:">
+ <el-col :span="20">
+ <el-input v-model="LongLatPos.latPos"></el-input>
+ </el-col>
+ </el-form-item>
+ <el-col :span="4">
+ <el-button type="primary" size="small" @click="dataPoints">鏁版嵁瀹氫綅</el-button>
+ </el-col>
+ </el-row>
</el-form>
</div>
- <div class="place-right">
- <el-button type="primary" size="small" @click="mapPoints">鐐瑰嚮瀹氫綅</el-button>
- <el-button type="primary" size="small" @click="dataPoints">鏁版嵁瀹氫綅</el-button>
- </div>
+ <!-- <div class="place-right">-->
+ <!-- <el-button type="primary" size="small" @click="mapPoints">鐐瑰嚮瀹氫綅</el-button>-->
+ <!-- <el-button type="primary" size="small" @click="dataPoints">鏁版嵁瀹氫綅</el-button>-->
+ <!-- </div>-->
</el-row>
<div class="place-bottom" style="text-align: right;margin: 5px">
- <el-button type="primary" @click="confirm">纭</el-button>
+ <el-button type="primary" @click="confirm" size="small">纭</el-button>
</div>
</div>
</template>
<script>
import { pulseEffect } from '../../../../utils/utils'
-import iconUrl from '../../../../../public/assets/images/map/loc.png'
+import iconUrl from '../../../../../public/assets/images/map/marker-icon.png'
import eventBus from '../../../../eventBus'
export default {
@@ -52,7 +66,7 @@
this.marker = window.L.marker(as, {
icon: window.L.icon({
iconUrl: iconUrl,
- iconSize: [30, 30],
+ iconSize: [25, 45],
iconAnchor: [15, 15]
})
})
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 709627b..fbd79d3 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
+++ b/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>
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
index b7e9d69..3e9cbff 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
@@ -1,6 +1,6 @@
<template>
<div class="ReportLocationSection">
- <el-form :model="form" label-width="90px">
+ <el-form :model="form" label-width="120px">
<el-row class="pipe-line-search">
<el-col :span="12">
<el-form-item label="绠＄嚎鍚嶇О:">
@@ -17,14 +17,21 @@
</el-col>
</el-row>
<el-row>
- <el-col :span="12">
+ <el-col :span="24">
<el-form-item label="绠℃缂栫爜:">
<el-input v-model="form.sectionName" disabled></el-input>
</el-form-item>
</el-col>
+ </el-row>
+ <el-row>
<el-col :span="12">
- <el-form-item label="闄勫睘璁炬柦:">
+ <el-form-item label="闄勫睘璁炬柦鍚嶇О:">
<el-input v-model="form.affiliatedFacilities" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="闄勫睘璁炬柦缂栫爜:">
+ <el-input v-model="form.affiliatedFacilitiesCode" disabled></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -141,7 +148,7 @@
</el-card>
</div>
<el-row style="text-align: right;margin: 10px">
- <el-button type="primary" @click="confirm">纭</el-button>
+ <el-button type="primary" @click="confirm" size="small">纭</el-button>
</el-row>
</div>
</template>
@@ -160,7 +167,8 @@
form: {
pipeName: '',
sectionName: '',
- affiliatedFacilities: ''
+ affiliatedFacilities: '',
+ affiliatedFacilitiesCode: ''
},
// 绠＄嚎鏌ヨ鏁版嵁鍒楄〃
tableList: [],
@@ -196,57 +204,72 @@
this.tableList = res.features
}
this.wfsHelper = new WfsHelper()
- this.form.pipeName = ''
+ // this.form.pipeName = ''
this.form.sectionName = ''
this.form.affiliatedFacilities = ''
+ this.form.affiliatedFacilitiesCode = ''
},
// 鐐瑰嚮绠＄嚎鍒楄〃 灞曠ず绠℃鍐呭 鍜岄檮灞炶鏂藉唴瀹�
- async sectionShowClick (val) {
- console.log(val)
- // 濡傛灉 SectionAndAffFacTableJudge === true 鏄悳绱㈡暟鎹粨鏋滅殑鍒楄〃 鍙互杩涜 绠℃ 闄勫睘璁炬柦浜や簰 鐐瑰嚮瀹氫綅鏌ヨ缁撴灉 涓嶈繘琛岀偣鍑讳氦浜�
+ sectionShowClick (val) {
+ // console.log(val)
+ // this.SectionAndAffFacTableJudge = true
if (this.SectionAndAffFacTableJudge === true) {
- // 绠℃鏌ヨ
- const sectionNameSearch = val.properties.pipename
- this.tableListSection = []
- this.wfsHelper.clearFilter()
- this.wfsHelper.setTypeName(['sewer:pipesegment'])
- this.wfsHelper.addLike('pipename', sectionNameSearch)
- this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'')
- const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
- // console.log(res)
- if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
- this.tableListSection = res.features
- }
- this.wfsHelper = new WfsHelper()
- // 闄勫睘璁炬柦鏌ヨ
- this.tableDataAffFac = []
- const AffFacSearch = val.properties.pipecode
- console.log(AffFacSearch)
- this.wfsHelper.clearFilter()
- this.wfsHelper.setTypeName(['sewer:view_pipeline'])
- this.wfsHelper.addLike('pipecode', AffFacSearch)
- // this.wfsHelper.addEquals('type', '\'' + AffFacSearch + '\'')
- const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
- console.log(resAffFac)
- if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
- // for (let i = 0; i < resAffFac.features.length; i++) {
- // // console.log(resAffFac.features[i])
- // this.tableDataAffFac.push(resAffFac.features[i].properties)
- // }
- this.tableDataAffFac = resAffFac.features
- }
- this.wfsHelper = new WfsHelper()
+ this.searchSection(val)
+ this.searchAffFacData(val)
+ }
+ },
+ // 绠℃鏌ヨ
+ async searchSection (val) {
+ const sectionNameSearch = val.properties.pipename
+ this.tableListSection = []
+ this.wfsHelper.clearFilter()
+ this.wfsHelper.setTypeName(['sewer:pipesegment'])
+ this.wfsHelper.addLike('pipename', sectionNameSearch)
+ this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'')
+ const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
+ // console.log(res)
+ if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
+ this.tableListSection = res.features
+ }
+ },
+ // 闄勫睘璁炬柦鏌ヨ
+ async searchAffFacData (val) {
+ this.tableDataAffFac = []
+ const AffFacSearch = val.properties.pipecode
+ this.wfsHelper.clearFilter()
+ this.wfsHelper.setTypeName(['sewer:view_pipeline'])
+ this.wfsHelper.addLike('pipecode', AffFacSearch)
+ // this.wfsHelper.addEquals('type', '\'' + AffFacSearch + '\'')
+ const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
+ console.log(resAffFac)
+ if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
+ this.tableDataAffFac = resAffFac.features
+ }
+ },
+ // 鎼滅储鐨勫叕鍏辨柟娉曚紭鍖�
+ async publicSearch (searchVal, searchKeyword, searchTypeName, tableListData) {
+ tableListData = []
+ this.wfsHelper = new WfsHelper()
+ this.wfsHelper.clearFilter()
+ this.wfsHelper.setTypeName(searchTypeName)
+ this.wfsHelper.addLike(searchKeyword, searchVal)
+ this.wfsHelper.addEquals(searchKeyword, '\'' + searchVal + '\'')
+ const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
+ // console.log(res)
+ if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
+ tableListData = res.features
}
},
// 鐐瑰嚮绠℃鍒楄〃 绠℃缂栫爜浼犻��
sectionCode (val) {
// console.log(val)
- this.form.sectionName = val.properties.pipecode
+ this.form.sectionName = val.properties.pipesegcode
},
// 鐐瑰嚮闄勫睘璁炬柦鍒楄〃 绠℃缂栫爜浼犻��
affFacName (val) {
- // console.log(val)
+ console.log(val)
this.form.affiliatedFacilities = val.properties.name
+ this.form.affiliatedFacilitiesCode = val.properties.code
},
// 瀹氫綅鍔熻兘
localAdr (val) {
@@ -258,23 +281,27 @@
pipeClickLocation () {
// 璁炬柦涓嶈繘琛� 绠＄嚎琛ㄦ牸鏁版嵁鐨勭偣鍑讳氦浜�
this.SectionAndAffFacTableJudge = false
- // 鐐瑰嚮鑾峰彇鏁版嵁
- window.map.on('click', (e) => {
- // 鐐瑰嚮鍦板浘鍏抽棴寮规
- window.mapManager.clickDialogSwitch = false
- // 绠＄嚎鐐瑰嚮鏁版嵁
- this.pipeData(e)
- // 绠℃鐐瑰嚮鏁版嵁
- this.sectionData(e)
- // 闄勫睘璁炬柦鏁版嵁
- this.affFacData(e)
- // 鍏抽棴鐐瑰嚮浜嬩欢
- window.map.off('click')
- })
+ if (this.SectionAndAffFacTableJudge === false) {
+ // 鐐瑰嚮鑾峰彇鏁版嵁
+ window.map.on('click', (e) => {
+ this.SectionAndAffFacTableJudge = false
+ // 鐐瑰嚮鍦板浘鍏抽棴寮规
+ window.mapManager.clickDialogSwitch = false
+ // 绠＄嚎鐐瑰嚮鏁版嵁
+ this.pipeData(e)
+ // 绠℃鐐瑰嚮鏁版嵁
+ this.sectionData(e)
+ // 闄勫睘璁炬柦鏁版嵁
+ this.affFacData(e)
+ // 鍏抽棴鐐瑰嚮浜嬩欢
+ window.map.off('click')
+ })
+ }
// 鏁版嵁 閲嶆柊鑾峰彇 杩涜缃┖
this.form.pipeName = ''
this.form.sectionName = ''
this.form.affiliatedFacilities = ''
+ this.form.affiliatedFacilitiesCode = ''
this.tableList = []
this.tableListSection = []
this.tableDataAffFac = []
@@ -317,7 +344,7 @@
BBOX: window.map.getBounds().toBBoxString()
}, defaultWmsParams)
AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
- console.log(res)
+ // console.log(res)
for (let i = 0; i < res.data.features.length; i++) {
dataList.push(res.data.features[i])
}
diff --git a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue
index 860f6e1..c1b30ae 100644
--- a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue
+++ b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue
@@ -66,7 +66,7 @@
<i class="state"></i>
<div>
<h3>
- <span @click="disposalfx">浠跺悕绉�:XXX浜嬩欢</span>
+ <span @click="disposalfx">浜嬩欢鍚嶇О:XXX浜嬩欢</span>
<el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
@click="startAnalysis">
<span>寮�濮嬪垎鏋�</span>
--
Gitblit v1.8.0