派生自 wuyushui/SewerAndRainNetwork

wangqi
2021-04-06 725201fe7dc72061c7a19c1ebb5f3c56f78da02e
src/components/panel/topicSearch/SewersSearch.vue
@@ -1,115 +1,110 @@
<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">
            <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-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 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 >-->
                <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-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>
          </el-card>
          <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">
                  <div class="B-TMD-table-list-title-y"
                       :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
<!--                    <span>运单号:</span>-->
                    <span id="waybillNumber" class=""
                          :title="item.properties.pipename">
  <div class="query-search" v-if="gdVisible">
    <div class="search-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:100%">
      <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">
            <div class="B-TMD-table-list-title-y"
                 :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
              <!--                    <span>运单号:</span>-->
              <span id="waybillNumber" class=""
                    :title="item.properties.pipename">
                                                <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span>
                                            </span>
                  </div>
<!--                  <div class="B-TMD-table-list-title-c">-->
<!--                    {{ labelList[0] }}:-->
<!--                    <span id="plateNumber_p">-->
<!--                                                <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</a></span>-->
<!--                                            </span>-->
<!--                  </div>-->
                </div>
<!--                <div class="B-TMD-table-icons" style="float:right">-->
<!--                  <ul>-->
<!--                    <li class="B-TMD-table-list-title-y-adress"-->
<!--                        @click="handleLocation(item)"></li>-->
<!--                    <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>-->
<!--                  </ul>-->
<!--                </div>-->
              </div>
              <div class="B-TMD-table-list-content">
                <div v-for="itm in labelList" :key="itm.label">
                  <span>{{ itm.label }}:</span>
                  <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
                </div>
<!--                <div><span>收货企业:</span> <span-->
<!--                    id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>-->
<!--                </div>-->
              </div>
<!--              <div class="B-TMD-table-list-bottom">-->
<!--                <div class="B-TMD-table-list-bottom-name">-->
<!--                  货物名称:<span :title="item.materialName">{{ item.materialName }}</span></div>-->
<!--              </div>-->
            </div>
          </el-card>
          <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 class="B-TMD-table-list-title-c">-->
            <!--                    {{ labelList[0] }}:-->
            <!--                    <span id="plateNumber_p">-->
            <!--                                                <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</a></span>-->
            <!--                                            </span>-->
            <!--                  </div>-->
          </div>
          <!--                <div class="B-TMD-table-icons" style="float:right">-->
          <!--                  <ul>-->
          <!--                    <li class="B-TMD-table-list-title-y-adress"-->
          <!--                        @click="handleLocation(item)"></li>-->
          <!--                    <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>-->
          <!--                  </ul>-->
          <!--                </div>-->
        </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>
        <div class="B-TMD-table-list-content">
          <div v-for="itm in labelList" :key="itm.label">
            <span>{{ itm.label }}:</span>
            <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
          </div>
          <!--                <div><span>收货企业:</span> <span-->
          <!--                    id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>-->
          <!--                </div>-->
        </div>
        <!--              <div class="B-TMD-table-list-bottom">-->
        <!--                <div class="B-TMD-table-list-bottom-name">-->
        <!--                  货物名称:<span :title="item.materialName">{{ item.materialName }}</span></div>-->
        <!--              </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>
  </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/LayerSewers'
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
@@ -158,7 +153,7 @@
        }
      })
    },
    handleSearch () {
    async handleSearch () {
      const param = {
        pipelineType: this.form.pipelineType,
        dataType: this.form.dataType
@@ -168,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)
    }
@@ -186,6 +179,6 @@
}
</script>
<style lang="less">
@import '@assets/css/map/map-elem-ui';
<style lang="less" scoped>
</style>