派生自 wuyushui/SewerAndRainNetwork

chenyabin
2021-04-14 faadb3a39e89b2cb7a00e81e3778f480f1f09998
src/components/panel/topicSearch/SewersSearch.vue
@@ -9,21 +9,21 @@
              <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" value-key="code" :popper-class="'select-down'">
                <!--  @change="handleDataType"-->
                <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">
                </el-option>
              </el-select>
            </el-form-item>
@@ -37,13 +37,12 @@
        <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' }]">
              <h3 class="B-TMD-table-list-title-y">
                {{ item.properties.pipename }}</h3>
              <p v-for="itm in labelList" :key="itm.label">
              <!--<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>
              </p>-->
            </div>
          </div>
        </el-scrollbar>
@@ -63,42 +62,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,44 +114,31 @@
      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(this.form.dataType.name)
      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
      }
    },
    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)
      window.map.flyToBounds(bound)
      window.layerFactory.flyByLayerId(this.form.dataType.code, val.id)
      // layer && layer.openPopup()
    }
  }
}