固废查询

chenzeping

2021-04-14 447610041c067c090497108c49f923b4ae5ea76e

 src/components/panel/topicSearch/SewersSearch.vue

@@ -6,24 +6,22 @@
        <div class="search-panel ">
          <el-form ref="form" :model="form" label-width="90px" class="search-form">
            <el-form-item label="设施类型：" size="mini" class="search-panel-item">
              <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                         :popper-class="'select-down'">
              <el-select style="width: 100%"  v-model="form.pipelineType" @change="handlePipelineType"  :popper-class="'select-down'">
                <el-option
                    v-for="item in pipelineTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                        v-for="item in items"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="form.pipelineType+'：'" size="mini">
              <el-select style="width: 100%" v-model="form.dataType" @change="handleDataType"
                         :popper-class="'select-down'">
              <el-select style="width: 100%"  v-model="form.dataType"  @change="handleDataType" :popper-class="'select-down'">
                <el-option
                    v-for="item in dataTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                        v-for="item in subItems"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
@@ -63,42 +61,45 @@
      <el-tab-pane label="分析" name="second">
        <SewersAnalysis></SewersAnalysis>
      </el-tab-pane>
      <el-tab-pane label="历史" name="third">历史</el-tab-pane>
      <el-tab-pane label="历史" name="third">
        <SewersHistory></SewersHistory>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'
import { LayerPipeLines } from '@src/conf/layers/LayerPipeLines'
import { LayerFsss } from '@src/conf/layers/LayerFsss'
import { LayerHbss } from '@src/conf/layers/LayerHbss'
import { LayerPk } from '@src/conf/layers/LayerPk'
import { LayerArea } from '@src/conf/layers/LayerArea'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'

// 引入分析组件内容
import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis'
import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory'

export default {
  name: 'SewersSearch',
  components: {
    SewersAnalysis
    SewersAnalysis,
    SewersHistory
  },
  data () {
    return {
      activeName: 'first',
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      items: [LayerPipeLines, LayerFsss, LayerHbss, LayerPk, LayerArea],
      subItems: LayerPipeLines.layers,
      total: 0,
      pipelineTypeOptions: PipelineTypeOptions,
      dataTypeOptions: PipelineTypeOptions[0].options,
      form: {
        pipelineType: PipelineTypeOptions[0].label,
        dataType: PipelineTypeOptions[0].options[0].label,
        query: PipelineTypeOptions[0].options[0],
        keyword: '研究院01路YS000001'
        // ,
        // size: 10,
        // current: 1
        pipelineType: '管网',
        dataType: '',
        keyword: ''
      },
      // pageSize: 10,
      // current: 1,
@@ -112,34 +113,22 @@
      console.log(tab, event)
    },
    handlePipelineType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {
          this.dataTypeOptions = itm.options
          this.form.pipelineType = itm.label
          this.form.labelList = itm.labelList
      for (var i = 0; i < this.items.length; i++) {
        const item = this.items[i]
        if (val === item.name) {
          this.subItems = item.layers
          return
        }
      })
      this.form.dataType = this.dataTypeOptions[0].label
      this.form.key = this.dataTypeOptions[0].key
    },
    handleDataType (val) {
      this.dataTypeOptions.forEach((itm) => {
        if (val === itm.value) {
          this.form.query = itm
        }
      })
      }
    },
    async handleSearch () {
      const param = {
        pipelineType: this.form.pipelineType,
        dataType: this.form.dataType
      }
      console.log(param)
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName(this.form.query.layerName)
      wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // todo 现在管网还没区分开类型，后面改
      wfsHelper.addTypeName('管网')
      wfsHelper.addLike('name', this.form.keyword)
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.list = res.features
      }
@@ -147,9 +136,9 @@
    handleLocation (val) {
      console.log(val)
      const bound = this.L.geoJSON([val], {}).getBounds()
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
      // var layer = window.layerFactory.flyByLayerId(val.id, bound)
      window.map.flyToBounds(bound)
      // layer && layer.openPopup()
    }
  }
}