| | |
| | | <h5>{{changeAmount}}名称:{{item.properties.name}}</h5> |
| | | <p>负责人:<span>{{item.properties.resperson}}</span></p> |
| | | <p>电话:<span>{{item.properties.telephone}}</span></p> |
| | | <p v-if="item.properties.address">地址:<span>{{item.properties.address}}</span></p> |
| | | <p v-else>地址:<span>{{item.properties.adminzonename}}</span></p> |
| | | </div> |
| | | </el-scrollbar> |
| | | </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 { pulseEffect } from '../../../../utils/utils' |
| | | import { loadPointWfs, pointZoom } from '../../../helpers/LocateHelper' |
| | | |
| | | export default { |
| | | name: 'ResourcesQuery', |
| | | data () { |
| | | return { |
| | | // form 表单绑定数据 |
| | | form: { |
| | | eventName: '', |
| | | pipelineType: LayerEmergencySource.name, |
| | | dataType: '', |
| | | keyword: '', |
| | | eventNameList: [ |
| | | { name: '金陵石化' }, |
| | | { name: '南京化学' } |
| | | { name: '扬子石化' }, |
| | | { name: '仪征化纤' } |
| | | ] |
| | | }, |
| | | // 搜索到的数据绑定的active的样式 |
| | | activeNum: -1, |
| | | // 搜索到的数据进行存储的list |
| | | list: [], |
| | | // form表单绑定的图层数据 |
| | | items: [LayerEmergencySource, LayerSurroundings], |
| | | subItems: LayerEmergencySource.layers || LayerSurroundings.layers, |
| | | // wfs |
| | | WfsHelper: null, |
| | | // 应急 || 周边 的区分绑定数据 |
| | | changeAmount: '资源' |
| | | } |
| | | }, |
| | |
| | | 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 = [] |
| | |
| | | this.changeAmount = '环境' |
| | | } |
| | | }, |
| | | // 二级from表单选择数据清空 已有展示数据 |
| | | handleDataType (val) { |
| | | // console.log(val) |
| | | this.list = [] |
| | | }, |
| | | // 点击搜索事件 |
| | | async handleSearch () { |
| | | this.list = [] |
| | | this.wfsHelper.clearFilter() |
| | | // todo 现在企业应急还没区分开类型,后面改 |
| | | // console.log(this.form.dataType) |
| | | // this.wfsHelper.setTypeName([this.form.dataType.typeName]) |
| | | this.wfsHelper.setTypeName(['sewer:emergency']) |
| | | this.wfsHelper.setMaxFeatures(100) |
| | | // form表单选择搜索 |
| | | if (this.form.dataType) { |
| | | this.wfsHelper.addEquals('orgname', '\'' + this.form.eventName + '\'') |
| | | this.wfsHelper.addEquals('type', '\'' + this.form.dataType.name + '\'') |
| | | } |
| | | // 搜索框keyword |
| | | if (this.form.keyword) { |
| | | this.wfsHelper.addLike('name', this.form.keyword) |
| | | } |
| | | const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) |
| | | console.log(res) |
| | | // 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) |
| | | pulseEffect([val.properties.y, val.properties.x]) |
| | | const positionArea = [val.properties.y, val.properties.x] |
| | | window.map.setView(positionArea, 17) |
| | | pointZoom(positionArea, this.form.dataType.icon) |
| | | // 图片 |
| | | loadPointWfs(positionArea) |
| | | // 弹窗 |
| | | pulseEffect(positionArea) |
| | | } |
| | | } |
| | | } |