修改图例动画功能

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>-->
@@ -50,9 +50,9 @@
                  <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"
                    <span id="waybillNumber" class=""
                          :title="item.properties.pipename">
                                                <span class="B-TMD-table-list-title-y-alarm">{{ item.properties.pipename }}</span>
                                                <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span>
                                            </span>
                  </div>
<!--                  <div class="B-TMD-table-list-title-c">-->
@@ -72,8 +72,8 @@
              </div>
              <div class="B-TMD-table-list-content">

                <div v-for="itm in labelList" :key="itm">
                  <span>{{ itm.label }}：：</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>收货企业：</span> <span-->
@@ -113,8 +113,10 @@
</template>

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

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'SewersSearch',
  data () {
@@ -127,7 +129,9 @@
      dataTypeOptions: PipelineTypeOptions[0].options,
      form: {
        pipelineType: PipelineTypeOptions[0].label,
        dataType: PipelineTypeOptions[0].options[0].label
        dataType: PipelineTypeOptions[0].options[0].label,
        query: PipelineTypeOptions[0].options[0],
        keyword: '研究院01路YS000001'
        // ,
        // size: 10,
        // current: 1
@@ -149,9 +153,14 @@
        }
      })
      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 = {
@@ -159,7 +168,23 @@
        dataType: this.form.dataType
      }
      console.log(param)
      this.list = pipelineDataTest.features
      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)
    }
  }
}