| | |
| | | |
| | | <style lang="less" scoped> |
| | | |
| | | /*/deep/ .el-dialog .el-dialog--center {*/ |
| | | /* margin-top: 1rem !important;*/ |
| | | /* margin-left: 6.4rem !important;*/ |
| | | /*}*/ |
| | | |
| | | /deep/ .event-report-dialog { |
| | | left: 5rem; |
| | | top: 1rem; |
New file |
| | |
| | | // 公共方法 上报数据 到数据库中 |
| | | export function publicLocationStore (data) { |
| | | // const data = { |
| | | // ID: '', |
| | | // EventID: '', |
| | | // EventPipeline: '', |
| | | // EventPipeSeg: '', |
| | | // EventAffType: '', |
| | | // EventAffCode: '', |
| | | // EventAffPointNum: '', |
| | | // EventPosX: '', |
| | | // EventPosY: '', |
| | | // AcquisitionPeople: '', |
| | | // AcquisitionDate: '' |
| | | // } |
| | | console.log(data) |
| | | } |
| | |
| | | <template> |
| | | <div class="location-lon-and-lat"> |
| | | <el-form :model="lonlatpos" label-width="60px"> |
| | | <el-form :model="positionLocationForm" label-width="60px"> |
| | | <el-row class="pipe-line-search"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="经度:"> |
| | | <el-input v-model="lonlatpos.longPos"></el-input> |
| | | <el-input v-model="positionLocationForm.longPos"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="纬度:"> |
| | | <el-input v-model="lonlatpos.latPos"></el-input> |
| | | <el-input v-model="positionLocationForm.latPos"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | import { pulseEffect } from '../../../../utils/utils' |
| | | import iconUrl from '../../../../../public/assets/images/map/marker-icon.png' |
| | | import eventBus from '../../../../eventBus' |
| | | import { publicLocationStore } from './ReportLocation' |
| | | |
| | | export default { |
| | | name: 'ReportLocationPoint', |
| | | data () { |
| | | return { |
| | | // 经纬度定位 |
| | | lonlatpos: { |
| | | positionLocationForm: { |
| | | longPos: '', |
| | | latPos: '' |
| | | }, |
| | |
| | | // 精确定位 |
| | | mapPoints () { |
| | | window.map.on('click', (e) => { |
| | | this.lonlatpos.longPos = parseFloat(e.latlng.lng).toFixed(8) |
| | | this.lonlatpos.latPos = parseFloat(e.latlng.lat).toFixed(8) |
| | | this.positionLocationForm.longPos = parseFloat(e.latlng.lng).toFixed(8) |
| | | this.positionLocationForm.latPos = parseFloat(e.latlng.lat).toFixed(8) |
| | | const as = [e.latlng.lat, e.latlng.lng] |
| | | // console.log(as) |
| | | window.map.setView(as, 17) |
| | |
| | | iconAnchor: [13, 20] |
| | | }) |
| | | }) |
| | | // 添加点数据 |
| | | window.map.addLayer(this.marker) |
| | | this.layersGroupArrList.push(this.marker) |
| | | // 事件结束 关闭点击事件 |
| | | window.map.off('click') |
| | | // this.lonlatpos.latPos = '' |
| | | // this.lonlatpos.longPos = '' |
| | | }) |
| | | }, |
| | | // 通过数据定位 |
| | | dataPoints () { |
| | | if (this.lonlatpos.latPos !== '' && this.lonlatpos.longPos !== '') { |
| | | const as = [this.lonlatpos.latPos, this.lonlatpos.longPos] |
| | | if (this.positionLocationForm.latPos !== '' && this.positionLocationForm.longPos !== '') { |
| | | const as = [this.positionLocationForm.latPos, this.positionLocationForm.longPos] |
| | | window.map.setView(as, 17) |
| | | pulseEffect(as) |
| | | this.marker = window.L.marker(as, { |
| | |
| | | }, |
| | | // 点击确认按钮事件 |
| | | confirm () { |
| | | // 循环数据 清除 图层添加的点数据 |
| | | for (let i = 0; i < this.layersGroupArrList.length; i++) { |
| | | window.map.removeLayer(this.layersGroupArrList[i]) |
| | | } |
| | | window.mapManager.clearHighlight() |
| | | // window.map.removeLayer(this.marker) |
| | | eventBus.$emit('location-setChange', true) |
| | | this.lonlatpos.longPos = '' |
| | | this.lonlatpos.latPos = '' |
| | | // 事件上报 位置信息 存储数据库 |
| | | const data = { |
| | | ID: '', |
| | | EventID: '', |
| | | EventPipeline: '', |
| | | EventPipeSeg: '', |
| | | EventAffType: '', |
| | | EventAffCode: '', |
| | | EventAffPointNum: '', |
| | | EventPosX: this.positionLocationForm.longPos, |
| | | EventPosY: this.positionLocationForm.latPos, |
| | | AcquisitionPeople: '', |
| | | AcquisitionDate: '' |
| | | } |
| | | // 通过方法 存储数据 进行 数据库存储数据 |
| | | publicLocationStore(data) |
| | | // 确定点数据 位置信息 进行数据 的置空 |
| | | this.positionLocationForm.longPos = '' |
| | | this.positionLocationForm.latPos = '' |
| | | } |
| | | } |
| | | } |
| | |
| | | <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> |
| | |
| | | <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> |
| | | <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 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" |
| | | <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">--> |
| | |
| | | <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> |
| | | <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(item,index)"> |
| | | <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(2,item,index)"> |
| | | 定位 |
| | | </el-button> |
| | | </el-col> |
| | |
| | | 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', |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | handlePage (currentPage) { |
| | | // this.focusLocation() |
| | | this.currentPage = currentPage |
| | | }, |
| | | handleLocation (index) { |
| | | this.activeNum = index |
| | | }, |
| | | // 搜索定位 |
| | | focusLocation () { |
| | | // 每次进行搜索 都对之前数组列表进行置空 |
| | |
| | | console.log(res) |
| | | // 返回数据类型 1(普通POI) |
| | | 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('未搜索到您想要数据') |
| | | } |
| | | }) |
| | | }, |
| | | // 点击定位 |
| | | locationMapClick (val, index) { |
| | | locationMapClick (type, val, 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]], { |
| | |
| | | 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] |
| | | }) |
| | | }) |
| | | .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) { |
| | | this.currentPage = currentPage |
| | | }, |
| | | // 下标更改 事件 |
| | | handleLocation (index) { |
| | | this.activeNum = index |
| | | }, |
| | | // 点击确认按钮事件 |
| | | confirm () { |
| | |
| | | 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) |
| | | } |
| | | } |
| | |
| | | </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); |
| | |
| | | import AjaxUtils from '@utils/AjaxUtils' |
| | | import eventBus from '../../../../eventBus' |
| | | import { WMS_URL } from '../../../../conf/Constants' |
| | | import { publicLocationStore } from './ReportLocation' |
| | | |
| | | export default { |
| | | name: 'ReportLocationSection', |
| | |
| | | confirm () { |
| | | // console.log('点击确定选择完成') |
| | | eventBus.$emit('location-setChange', true) |
| | | // 事件上报 位置信息 存储数据库 |
| | | const data = { |
| | | ID: '', |
| | | EventID: '', |
| | | EventPipeline: this.form.pipeName, |
| | | EventPipeSeg: this.form.sectionName, |
| | | EventAffType: this.form.affiliatedFacilitiesCode, |
| | | EventAffCode: this.form.affiliatedFacilities, |
| | | EventAffPointNum: '', |
| | | EventPosX: '', |
| | | EventPosY: '', |
| | | AcquisitionPeople: '', |
| | | AcquisitionDate: '' |
| | | } |
| | | // 通过方法 存储数据 进行 数据库存储数据 |
| | | publicLocationStore(data) |
| | | // 数据置空 |
| | | this.form.pipeName = '' |
| | | this.form.sectionName = '' |
| | | this.form.affiliatedFacilities = '' |
| | | this.form.affiliatedFacilitiesCode = '' |
| | | this.tableList = [] |
| | | this.tableListSection = [] |
| | | this.tableDataAffFac = [] |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | /*/deep/ .el-input {*/ |
| | | /* width: 0.74353rem;*/ |
| | | /*}*/ |
| | | |
| | | .pipe-line-search { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .pipe-table { |
| | | /*display: flex;*/ |
| | | /*align-items: center;*/ |
| | | /*justify-content: space-around;*/ |
| | | |
| | | /deep/ .el-card { |
| | | /*width: 1.39523rem;*/ |
| | | /*max-width: 1.39523rem;*/ |
| | | /*height: 0.9343rem;*/ |
| | | /*max-height: 0.9343rem;*/ |
| | | |
| | | .el-table { |
| | | margin: 0.05345rem auto; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .fixed-style { |
| | | color: @color; |
| | | } |
| | | |
| | | /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> |
| | |
| | | :class="activeNum===index?'hover':''"> |
| | | <img class="state" :src="getImgSrc()" style="background: none"/> |
| | | <div> |
| | | <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code |
| | | }}</h3> |
| | | <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code }}</h3> |
| | | <p>所属企业:<span>{{ item.properties.orgname }}</span> |
| | | <p>设施类型:<span>{{ item.properties.type }}</span> |
| | | <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" |