派生自 wuyushui/SewerAndRainNetwork

chenzeping
2021-03-08 3cc9f0efa740810f88738788b062f348d8d9b48a
src/components/panel/topicSearch/SewersSearch.vue
@@ -30,7 +30,7 @@
                </el-select>
              </el-form-item>
<!--              <el-form-item >-->
                <el-input v-model="form.key" size="mini"
                <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>-->
@@ -43,52 +43,47 @@
<!--              </el-form-item>-->
            </el-form>
          </el-card>
          <el-card class="search-result" style="height:271px;">
          <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="B-TMD-table-list-title-y-num"
                          :title="item.transNo">
                                                <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
<!--                    <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">
                    载具号:
                    <span id="plateNumber_p">
                                                <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></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 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>
                  <span>发货企业:</span>
                  <span id="b_twe_consignment" :title="item.outWarehouseName">{{
                      item.outWarehouseName == null ? "暂无" : item.outWarehouseName
                    }}</span>
                <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>承&nbsp;&nbsp;运&nbsp;&nbsp;商:</span>
                  <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
                </div>
                <div><span>收货企业:</span> <span
                    id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</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 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>
@@ -118,61 +113,54 @@
</template>
<script>
import { PipelineTypeOptions, OutletOptions, AttachOptions, PipelineOptions, EnvironmentOptions, SurroundingsOptions } from '@/conf/LayerSewers'
import { PipelineTypeOptions } from '@/conf/LayerSewers'
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'SewersSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      pipelineTypeOptions: PipelineTypeOptions,
      outletOptions: OutletOptions,
      dataTypeOptions: PipelineTypeOptions,
      attachOptions: AttachOptions,
      pipelineOptions: PipelineOptions,
      environmentOptions: EnvironmentOptions,
      surroundingsOptions: SurroundingsOptions,
      dataTypeOptions: PipelineTypeOptions[0].options,
      form: {
        pipelineType: PipelineTypeOptions[0].label,
        dataType: PipelineOptions[0].label,
        // transNo: null,
        // carrierName: null,
        // transMode: null,
        // vehicleNo: null,
        // orderState: null,
        size: 10,
        current: 1
        dataType: PipelineTypeOptions[0].options[0].label,
        query: PipelineTypeOptions[0].options[0],
        keyword: '研究院01路YS000001'
        // ,
        // size: 10,
        // current: 1
      },
      pageSize: 10,
      current: 1,
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false
    }
  },
  props: ['title'],
  methods: {
    handlePipelineType (item) {
      console.log(item)
      if (item === '2') {
        this.dataTypeOptions = this.outletOptions
      } else if (item === '1') {
        this.dataTypeOptions = this.pipelineOptions
      } else if (item === '3') {
        this.dataTypeOptions = this.attachOptions
      } else if (item === '4') {
        this.dataTypeOptions = this.environmentOptions
      } else if (item === '5') {
        this.dataTypeOptions = this.surroundingsOptions
      }
      this.form.pipelineType = this.pipelineTypeOptions[item - 1].label
    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
    },
    handleDataType (item) {
    handleDataType (val) {
      this.dataTypeOptions.forEach((itm) => {
        if (val === itm.value) {
          this.form.query = itm
        }
      })
    },
    handleSearch () {
      const param = {
@@ -180,6 +168,23 @@
        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
      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
        this.list = res.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)
    }
  }
}