| | |
| | | <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" |
| | | :class="activeNum===index?'hover':''" @click="handleLocation(item,index)"> |
| | | <img class="state" :src="getImgSrc(item.properties.type)" style="background: none"/> |
| | | <h3>资源类型:{{item.properties.adminzonename}}</h3> |
| | | <h5>资源名称:{{item.properties.type}}</h5> |
| | | <h3>{{changeAmount}}类型:{{item.properties.type}}</h3> |
| | | <h5>{{changeAmount}}名称:{{item.properties.name}}</h5> |
| | | <p>负责人:<span>{{item.properties.resperson}}</span></p> |
| | | <p>电话:<span>{{item.properties.telephone}}</span></p> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | // wfs ajax |
| | | import WfsHelper from '@components/helpers/WfsHelper' |
| | | import AjaxUtils from '@utils/AjaxUtils' |
| | | |
| | | // import { LayerEmergency } from '../../../../../conf/LayerEmergency' |
| | | // 图层控制选择的数据 |
| | | import { LayerEmergencySource } from '../../../../conf/layers/LayerEmergencySource' |
| | | import { LayerSurroundings } from '../../../../conf/layers/LayerSurroundings' |
| | | import AnimalService from '../../../../components/LayerController/service/AnimalService' |
| | | // 引入的方法 |
| | | import { pulseEffect } from '../../../../utils/utils' |
| | | // import { locate } from '../../../helpers/LocateHelper' |
| | | // import { fitBounds, highlight, locate, openPropsPopup } from '../../../helpers/LocateHelper' |
| | | |
| | | export default { |
| | | name: 'ResourcesQuery', |
| | | data () { |
| | | return { |
| | | // form 表单绑定数据 |
| | | form: { |
| | | eventName: '', |
| | | pipelineType: LayerEmergencySource.name, |
| | |
| | | { name: '南京化学' } |
| | | ] |
| | | }, |
| | | // 搜索到的数据绑定的active的样式 |
| | | activeNum: -1, |
| | | // 搜索到的数据进行存储的list |
| | | list: [], |
| | | // form表单绑定的图层数据 |
| | | items: [LayerEmergencySource, LayerSurroundings], |
| | | subItems: LayerEmergencySource.layers || LayerSurroundings.layers, |
| | | WfsHelper: null |
| | | // wfs |
| | | WfsHelper: null, |
| | | // 应急 || 周边 的区分绑定数据 |
| | | changeAmount: '资源' |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.wfsHelper = new WfsHelper() |
| | | }, |
| | | methods: { |
| | | // 搜索展示图片根据返回值展示 |
| | | getImgSrc (type) { |
| | | // console.log(type) |
| | | // const icon = this.form.dataType.icon |
| | | return 'assets/images/map/sewers/' + type + '.png' |
| | | }, |
| | | // form 表单选择数据数据选择分配 |
| | | handlePipelineType (val) { |
| | | // console.log(val) |
| | | this.list = [] |
| | |
| | | } |
| | | if (this.form.pipelineType === '应急资源') { |
| | | this.subItems = LayerEmergencySource.layers |
| | | this.changeAmount = '资源' |
| | | } else if (this.form.pipelineType === '周边环境') { |
| | | this.subItems = LayerSurroundings.layers |
| | | this.changeAmount = '环境' |
| | | } |
| | | }, |
| | | // 二级from表单选择数据清空 已有展示数据 |
| | | handleDataType (val) { |
| | | // console.log(val) |
| | | this.list = [] |
| | | }, |
| | | // 点击搜索事件 |
| | | async handleSearch () { |
| | | this.list = [] |
| | | this.wfsHelper.clearFilter() |
| | |
| | | this.wfsHelper.addLike('name', this.form.keyword) |
| | | } |
| | | const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) |
| | | // console.log(res) |
| | | if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { |
| | | this.list = res.features |
| | | } |
| | | }, |
| | | // 查询定位功能 |
| | | handleLocation (val, index) { |
| | | // console.log(val) |
| | | this.activeNum = index |
| | | window.map.setView([val.properties.y, val.properties.x], 16) |
| | | this.animalService = new AnimalService({ |
| | | L: window.L, |
| | | layer: window.layer |
| | | }) |
| | | const positionArea = [val.properties.y, val.properties.x] |
| | | window.map.setView(positionArea, 17) |
| | | pulseEffect(positionArea) |
| | | // const config = this.form.dataType |
| | | // locate(val, config) |
| | | // fitBounds(val, this.form.dataType.code) |
| | | // highlight(val, this.form.dataType) |
| | | } |
| | | } |
| | | } |