Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

徐旺旺

2021-04-14 be3ff5213201a3a8716f6186f5fd8b20ee264e48

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,100 +1,105 @@
<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.pipelineType" @change="handlePipelineType"  :popper-class="'select-down'">
                  <el-option
                      v-for="item in pipelineTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </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-option
                      v-for="item in dataTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!--              <el-form-item >-->
              <div class="rightButtonSearch">
                <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索">
                  <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->
                  <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
                  <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> -->
                </el-input>
                <el-button class="el-icon-search" @click="handleSearch"></el-button>
              </div>
              <!--              </el-form-item>-->
              <!--              <el-form-item>-->
              <!--                <input type="button" class="btn-ok" @click="handleSearch" value="查询">-->
              <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
              <!--              </el-form-item>-->
            </el-form>
          </div>
          <el-scrollbar style="height:380.44px;" >
            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" >
              <!--  <i class="state"></i> -->
              <div @click="handleLocation(item)">
                <h3  class="B-TMD-table-list-title-y" :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]" >{{ item.properties.pipename }}</h3>
                <p v-for="itm in labelList" :key="itm.label">
                  <span>{{ itm.label }}：</span>
                  <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
                </p>
              </div>
  <div class="sewers-search" v-if="gdVisible">
    <div class="panel-title">{{ title }}</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="查询" name="first">
        <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-option
                        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-option
                        v-for="item in subItems"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name">
                </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-scrollbar>
          <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>
          </el-form>
        </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>-->
        <el-scrollbar style="height:380.44px;">
          <div class="environmental-risk-list" v-for="(item,index) in list" :key="index">
            <div @click="handleLocation(item)">
              <h3 class="B-TMD-table-list-title-y"
                  :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
                {{ item.properties.pipename }}</h3>
              <p v-for="itm in labelList" :key="itm.label">
                <span>{{ itm.label }}：</span>
                <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
              </p>
            </div>
          </div>
        </el-scrollbar>
        <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>
      </el-tab-pane>
      <el-tab-pane label="分析" name="second">
        <SewersAnalysis></SewersAnalysis>
      </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,
    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,
@@ -104,33 +109,23 @@
  },
  props: ['title'],
  methods: {
    handlePipelineType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {
          this.dataTypeOptions = itm.options
          this.form.pipelineType = itm.label
          this.form.labelList = itm.labelList
        }
      })
      this.form.dataType = this.dataTypeOptions[0].label
      this.form.key = this.dataTypeOptions[0].key
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleDataType (val) {
      this.dataTypeOptions.forEach((itm) => {
        if (val === itm.value) {
          this.form.query = itm
    handlePipelineType (val) {
      for (var i = 0; i < this.items.length; i++) {
        const item = this.items[i]
        if (val === item.name) {
          this.subItems = item.layers
          return
        }
      })
      }
    },
    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(), {})
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
@@ -138,11 +133,10 @@
      }
    },
    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()
    }
  }
}