添加管道变更搜索，管道信息搜索

chenyabin

2021-04-13 8e5167a6b2fb0ac1852b1302875bab0cc5f5a639

添加管道变更搜索，管道信息搜索

 src/components/panel/RightSearchPanel.vue

@@ -57,6 +57,9 @@
import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
import SewersSearch from '@components/panel/topicSearch/SewersSearch'
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'

import bus from '@/eventBus'

export default {
@@ -143,6 +146,12 @@
        case '管线':
          this.gcComp = SewersSearch
          break
        case '管道变更':
          this.gcComp = PipeChangesSearch
          break
        case '管道信息':
          this.gcComp = PipeInformationSearch
          break
      }
    },
    handlePage (page) {

 src/components/panel/topicSearch/pipeChangesSearch.vue

New file
@@ -0,0 +1,157 @@
<template>
    <div class="sewers-search" v-if="gdVisible">
        <div class="panel-title">{{title}}</div>
        <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.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更年份：" size="mini" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更类型：" size="mini" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions2" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </div>
        <el-scrollbar style="height:416.44px">
            <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1 <button style="float:right">附属设施</button></h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
            <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1</h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
        </el-scrollbar>
        <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    :current-page=current
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
    <!--        <div class="monitor2" v-if="hbVisible">-->
    <!--          <env-protect-search></env-protect-search>-->
    <!--        </div>-->
    <!--        <div class="monitor2" v-if="pkVisible">-->
    <!--          <discharge-search></discharge-search>-->
    <!--        </div>-->
</template>

<script>
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'DischargeSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      form: {
        areaVal: '',
        type: ''
      },
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      areaTypeOptions: [
        { label: '生活污水管线', value: '1' },
        { label: '含盐管线', value: '2' },
        { label: '雨水管线', value: '3' },
        { label: '含油管线', value: '4' },
        { label: '事故水管线', value: '5' },
        { label: '含碱管线', value: '6' },
        { label: '循环水管线', value: '7' },
        { label: '净化水管线', value: '8' }
      ],
      areaTypeOptions1: [
        { label: '2016', value: '1' },
        { label: '2017', value: '2' },
        { label: '2018', value: '3' },
        { label: '2019', value: '4' },
        { label: '2020', value: '5' },
        { label: '2016', value: '6' }
      ],
      areaTypeOptions2: [
        { label: '全部', value: '1' },
        { label: '在用', value: '2' },
        { label: '停用', value: '3' },
        { label: '废弃', value: '4' },
        { label: '拆除', value: '5' },
        { label: '其他', value: '6' }
      ]
    }
  },
  props: ['title'],
  methods: {
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    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)
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        this.list = res.data.features
      }
    },
    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)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/panel/topicSearch/pipeInformationSearch.vue

New file
@@ -0,0 +1,139 @@
<template>
    <div class="sewers-search" v-if="gdVisible">
        <div class="panel-title">{{title}}</div>
        <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.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="管线信息：" size="mini" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </div>
        <el-scrollbar style="height:416.44px">
            <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1 <button style="float:right">附属设施</button></h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
            <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1</h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
        </el-scrollbar>
        <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    :current-page=current
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
    <!--        <div class="monitor2" v-if="hbVisible">-->
    <!--          <env-protect-search></env-protect-search>-->
    <!--        </div>-->
    <!--        <div class="monitor2" v-if="pkVisible">-->
    <!--          <discharge-search></discharge-search>-->
    <!--        </div>-->
</template>

<script>
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'DischargeSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      form: {
        areaVal: '',
        type: ''
      },
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      areaTypeOptions: [
        { label: '管线本体', value: '1' }, { label: '附属设施', value: '2' }, { label: '环保设施', value: '3' }
      ],
      areaTypeOptions1: [
        { label: '全部管线', value: '1' },
        { label: '生活污水管线', value: '1' },
        { label: '含盐管线', value: '1' },
        { label: '雨水管线', value: '1' },
        { label: '含油管线', value: '1' },
        { label: '事故水管线', value: '1' },
        { label: '含碱管线', value: '1' },
        { label: '循环水管线', value: '1' },
        { label: '净化水管线', value: '1' }
      ]
    }
  },
  props: ['title'],
  methods: {
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    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)
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        this.list = res.data.features
      }
    },
    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)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/conf/Topic.js

@@ -60,4 +60,18 @@
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '管道变更',
  id: 8,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '管道信息',
  id: 9,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}]