修复图层重复加载、图层动画颜色不一致、地图数据缺失问题

徐旺旺

2021-04-19 0547901378595158423e4f992ad889abe9d0aad0

 src/components/panel/topicSearch/WaterWasteSearch.vue

@@ -1,183 +1,259 @@
<template>
    <div class="solidwaste-search" v-if="judgeVisible">
        <div class="search-title">
            <span>废水</span>
            <!--      <span>{{ title }}</span>-->
  <div class="sewers-search" v-if="gdVisible">
    <div class="panel-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.areaVal" @change="areaType"  :popper-class="'select-down'">
            <el-option
                v-for="item in inareaTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称：" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseVal"  @change="enterpriseType" :popper-class="'select-down'">
            <el-option
                v-for="item in enterpriseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级单位：" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType" :popper-class="'select-down'">
            <el-option
                v-for="item in enterpriseSubunitsTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级单位：" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType" :popper-class="'select-down'">
            <el-option
                v-for="item in enterpriseSubunitsTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="风险级别" size="mini"></el-form-item>-->
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio>
        </el-radio-group>
        <!--              <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>
        <div class="search-panel ">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="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 solidWasteTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索">
                    <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i>
                </el-input>
                <div class="search-radio">
                    <el-radio v-model="radio" label="1">全部</el-radio>
                    <el-radio v-model="radio" label="2">正常</el-radio>
                    <el-radio v-model="radio" label="3">超标</el-radio>
                    <el-radio v-model="radio" label="4">异常</el-radio>
                    <el-radio v-model="radio" label="5">停产</el-radio>
                </div>
            </el-form>
            <div>
                <el-card class="box-card" v-for="(item,index) in searchDataDisplay" :key="index">
                    <div v-if="total > 3">
                        {{ item.CompanyName }}
                    </div>
                </el-card>
                <!--        <el-pagination-->
                <!--            small-->
                <!--            layout="prev, pager, next"-->
                <!--            :total=total-->
                <!--            :current-page=1-->
                <!--            class="warnPagination"-->
                <!--        >-->
                <!--        </el-pagination>-->
            </div>
            <!--      <el-scrollbar style="height:100%">-->
            <!--      <el-card class="footer-page">-->
            <!--        <ul>-->
            <!--          {{ searchDataDisplay }}-->
            <!--          <li v-for="(item,index) in searchDataDisplay" :key="index">-->
            <!--            {{ item.CompanyName }}-->
            <!--          </li>-->
            <!--        </ul>-->
            <!--      </el-card>-->
            <!--          <el-pagination-->
            <!--              small-->
            <!--              @current-change="handlePage"-->
            <!--              :page-size=pageSize-->
            <!--              layout="prev, pager, next"-->
            <!--              :total=total-->
            <!--              :current-page=current-->
            <!--              class="warnPagination"-->
            <!--          >-->
            <!--          </el-pagination>-->
            <!--      </el-card>-->
            <!--      </el-scrollbar>-->
        </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>
</template>
    <el-scrollbar style="height:264px">
      <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" @click="handleLocation(item)"><!--  -->
        <img src="../../../../public/assets/images/map/exhaust/fq_green2.png" alt="" class="state"/>
        <div>
          <h3>{{ item.Name }}</h3>
          <p>所属部门：<span>{{ item.porltName }}</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>

    </el-scrollbar>
    <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
    <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 mapApi from '@/api/mapApi'
import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'// import WfsHelper from '@components/helpers/WfsHelper'
import ImagGreen from '../../../../public/assets/images/map/wastewater/fs_bright_green.png'

export default {
  name: 'SolidWasteSearch',
  name: 'WaterWasteSearch',
  props: ['title'],
  data () {
    return {
      judgeVisible: true,
      solidWasteTypeOptions: [{
        value: '1',
        label: '区域',
        options: [{
          value: '1',
          layerName: '固废',
          key: 'pipename',
          label: '全部固废'
        }],
        labelList: [{
          label: '输送介质',
          key: 'mediumtype'
        }, {
          label: '长度(m)',
          key: 'length'
        }]
      }, {
        value: '2',
        label: '企业名称',
        options: [{
          value: '1',
          layerName: '固废',
          key: 'pipename',
          label: '全部固废'
        }],
        labelList: [{
          label: '输送介质',
          key: 'mediumtype'
        }, {
          label: '长度(m)',
          key: 'length'
        }]
      }, {
        value: '3',
        label: '二级单位',
        options: [{
          value: '1',
          layerName: '固废',
          key: 'pipename',
          label: '全部固废'
        }],
        labelList: [{
          label: '输送介质',
          key: 'mediumtype'
        }, {
          label: '长度(m)',
          key: 'length'
        }]
      }, {
        value: '4',
        label: '企业名称',
        options: [{
          value: '1',
          layerName: '固废',
          key: 'pipename',
          label: '全部固废'
        }],
        labelList: [{
          label: '输送介质',
          key: 'mediumtype'
        }, {
          label: '长度(m)',
          key: 'length'
        }]
      }],
      radio: '1',
      layer: window.map,
      L: window.L,
      gdVisible: true,
      instance: null,
      list: [],
      total: 0,
      inareaTypeOptions: [],
      enterpriseTypeOptions: [],
      enterpriseSubunitsTypeOptions: [],
      form: {
        keyword: '输入关键字'
        areaVal: '',
        enterpriseVal: '',
        enterpriseSubunitsVal: '',
        type: '1'
      },
      searchDataDisplay: [],
      total: 0
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      levelOfRisk: [
        { name: '全部', value: '1' },
        { name: '正常', value: '2' },
        { name: '超标', value: '3' },
        { name: '异常', value: '4' },
        { name: '停产', value: '5' }
      ]
    }
  },
  methods: {
    handlePipelineType (val) {
      this.solidWasteTypeOptions.forEach((itm) => {
    // 区域筛选
    areaType (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
    },
    // 点击搜索实现数据的搜索展示
    // 企业筛选
    enterpriseType (val) {
      this.dataTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    // 二级单位筛选
    enterpriseSubunitsType (val) {

    },
    // 三级单位筛选
    async handleSearch () {
      // console.log(this.form.keyword)
      const result = await mapApi.getWasteWater()
      console.log(result)
      this.searchDataDisplay = result.Result.DataInfo
      this.total = result.Result.DataInfo.length
      const param = {
        pipelineType: this.form.pipelineType,
        dataType: this.form.dataType
      }
      // console.log(param)
      const res = await mapApi.getWasteWater(param)
      // console.log(res)
      this.list = res.Result.DataInfo
      console.log(this.list)
    },
    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)
    // 弹窗展示
    async handleLocation (val) {
      console.log(val)
      const pos = [val.Latitude, val.Longitude]
      window.map.flyTo(pos, 15)
      const positionX = val.Latitude
      const positionY = val.Longitude

      // 定义类型 用来区分数据的不同 1.接口接口数据来进行数据的判断 2.根据数据类型的不同，进行不同类型的图片显示
      const testValue = val.testValue
      var iconUrl = this.differentTypes(testValue)

      const marker = this.L.marker([positionX, positionY], {
        icon: this.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      this.layer.addLayer(marker)
      const t1 = setTimeout(async () => {
        const dataValue = {
          StoragePlaceId: val.StoragePlaceId
        }
        // 弹框标题
        const title = val
        console.log(title)
        // 基本信息 tabs
        const detailData = await mapApi.getWasteWater(dataValue)
        const WaterOnlinedata = {
          onLineMonEmissPointId: '23',
          monItemId: '28,31',
          beginTime: '2020-04-06 15:13:20',
          endTime: '2020-04-07 15:13:20',
          dataType: '1'
        }
        const WaterManualData = {
          companyId: '3900100145',
          labMonPointId: '219',
          beginTime: '2020-04-06 15:13:20',
          endTime: ' 2020-04-07 15:13:20'
        }
        const dateData = await mapApi.getQueryLabMonData(WaterManualData)
        const hourData = await mapApi.getQueryOnlineMonData(WaterOnlinedata)
        // 绑定弹框实例
        this.instance && this.instance.closePopup()
        const PublicBounced = window.Vue.extend(publicBounced)
        this.instance = new PublicBounced().$mount()
        document.body.appendChild(this.instance.$el)
        // document.body.removeChild(instance.$el)
        // 通过方法 向绑定弹框传递数据
        this.instance.setWaterData(title, detailData.Result.DataInfo, hourData.Result.DataInfo, dateData.Result.DataInfo, 'feishui')
        console.log(title, detailData.Result.DataInfo, hourData.Result.DataInfo, dateData.Result.DataInfo)
        // this.setPanTo(pos, 250)
      }, 100)
      console.log(t1)
    },
    // 不同类型图片加载
    differentTypes (testValue) {
      const testChange = ImagGreen
      // switch (testValue) {
      //   case 1:
      //     testChange = NormalImg
      //     break
      //   case 2:
      //     testChange = OffImg
      //     break
      //   case 3:
      //     testChange = AbnormalImg
      //     break
      //   case 4:
      //     testChange = MissImg
      //     break
      //   case 5:
      //     testChange = NormalImg
      //     break
      //   case 6:
      //     testChange = AlarmImg
      //     break
      //   case 7:
      //     testChange = AbnormalImg
      //     break
      //   case 8:
      //     testChange = WarnImg
      //     break
      // }
      return testChange
    }
  }
}
@@ -185,60 +261,4 @@

<style lang="less" scoped>

    .solidwaste-search {
        position: relative;
        overflow: hidden;
        /*background-color: #365e60;*/

        .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;
                    margin-top: 13px;
                }
            }

            /deep/ input:focus {
                border-color: @color;
            }
        }

        .search-btn {

        }

        /deep/.search-radio {
            margin: 6px 0;
            display: flex;
            flex-wrap: wrap;
            //justify-content: flex-end;
            //align-content: space-between;
            .el-radio {
                color: #ffffff!important;
                line-height: 2;
                .el-radio__label{
                    padding-left: 0px;
                }
            }
        }

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

        .box-card {
            margin: 15px auto;
        }
    }
</style>