右侧面板初步

徐旺旺

2021-04-01 db8c55dcd976be11728b125d7d2e1006c58138c4

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,12 +1,12 @@
<template>
 <div class="sewers-search">
    <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
      <div class="box__content" v-if="gdVisible">
        <div>
          <el-card class="search-panel">
        <div class="sewers-search" v-if="gdVisible">
          <div class="search-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 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"
@@ -16,7 +16,7 @@
                </el-select>
              </el-form-item>
              <el-form-item :label="form.pipelineType+'：'" size="mini">
                <el-select 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"
@@ -38,9 +38,8 @@
              <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
              <!--              </el-form-item>-->
            </el-form>
          </el-card>
          </div>
          <el-scrollbar style="height:100%">
          <el-card class="search-result" >
            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
              <div class="B-TMD-table-list-title">
                <div class="B-TMD-table-list-head">
@@ -82,7 +81,6 @@
              <!--                  货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>-->
              <!--              </div>-->
            </div>
          </el-card>
          </el-scrollbar>
          <el-card class="footer-page" v-if="total > 10">
            <el-pagination
@@ -97,20 +95,16 @@
            </el-pagination>
          </el-card>
        </div>
      </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>-->
    </div>
  </div>

</template>

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

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
@@ -159,7 +153,7 @@
        }
      })
    },
    handleSearch () {
    async handleSearch () {
      const param = {
        pipelineType: this.form.pipelineType,
        dataType: this.form.dataType
@@ -169,17 +163,15 @@
      wfsHelper.addTypeName(this.form.query.layerName)
      wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // const _this = this
      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
        this.list = res.features
      })
      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()
      console.log(bound)
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      console.log(layer)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
    }
@@ -187,6 +179,39 @@
}
</script>

<style lang="less">
@import '@assets/css/map/map-elem-ui';
<style lang="less" scoped>

.sewers-search{
  position: relative;
  overflow: hidden;
  .search-panel{
   background-color: transparent;
    border: 1px solid @background-color-split;
    padding: 10px;

    /deep/ input {
      border-radius: 0;
      background-color: @background-color-split ;
      border: solid 1px @color ;
      color: @color-gray;
      font-size: 0.01rem;
      .el-select .el-input.is-focus .el-input__inner{
        border-color: @color;
      }
    }
    /deep/ input:focus{
      border-color: @color;
    }
  }
  .search-btn{

  }
  //location-btn{
  //
  //}
  .location-btn:hover,.el-input__icon:hover{
    color: @color;
    cursor: pointer;
  }
}
</style>