派生自 wuyushui/SewerAndRainNetwork

yangdelong
2021-05-30 4adfa4774e09f3b388335bb8dee5dea518856e5b
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
@@ -1,30 +1,37 @@
<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-col :span="18">
                    <el-form-item label="管线名称:">
                        <el-input v-model="form.pipeName">
                        <el-input v-model="form.pipeName" @change="pipelineSearch">
                            <el-button style="padding-right:10px;" slot="suffix" type="text" @click="pipelineSearch">
                                <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
                            </el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-col :span="6">
                    <el-button type="primary" size="small" icon="el-icon-location-outline" @click="pipeClickLocation">定位
                    </el-button>
                </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,73 @@
        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.code
      this.form.affiliatedFacilities = val.properties.name
      this.form.affiliatedFacilitiesCode = val.properties.type
    },
    // 定位功能
    localAdr (val) {
@@ -258,23 +282,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 +345,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])
        }