Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

chenzeping

2021-04-13 04ed9679adccde76c00bb9648124326de54719d6

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

 src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue

@@ -3,10 +3,10 @@
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i>120343.18</i></span>
        <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>
      </div>
    </div>
    <div class="form-echrts">
@@ -25,16 +25,16 @@
            </span>
          </div>
        </div>
        <div>
          采样点数:
          <el-select v-model="formInline.region" placeholder="50">
            <el-option label="0" value="0"></el-option>
            <el-option label="25" value="25"></el-option>
            <el-option label="50" value="50"></el-option>
            <el-option label="75" value="75"></el-option>
            <el-option label="100" value="100"></el-option>
          </el-select>
        </div>
<!--        <div>-->
<!--          采样点数:-->
<!--          <el-select v-model="formInline.region" placeholder="50">-->
<!--            <el-option label="0" value="0"></el-option>-->
<!--            <el-option label="25" value="25"></el-option>-->
<!--            <el-option label="50" value="50"></el-option>-->
<!--            <el-option label="75" value="75"></el-option>-->
<!--            <el-option label="100" value="100"></el-option>-->
<!--          </el-select>-->
<!--        </div>-->
        <div class="detailbtn"  @click="onSubmit">查询</div>
        <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
      </div>
@@ -138,6 +138,10 @@
        datatype: 1
      }
    }
  },
  mounted () {
    this.onSubmit()
    // this.CreateChart(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype)
  },
  methods: {
    onSubmit () {
@@ -667,40 +671,6 @@
    //   }
    //   return options
    // }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.drawChart()
    //   const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse()
    //   console.log(dataWatch)
    //   var dateDate = []
    //   // {COD:[3,4,5]}
    //   var data = {}
    //   for (var n = 0; n < dataWatch.length; n++) {
    //     var d = dataWatch[n].MonTimeStr.substring(5, 9)
    //     if (dateDate.indexOf(d) < 0) {
    //       dateDate.push(d)
    //     }
    //     if (data[dataWatch[n].PoltmtrlName]) {
    //       data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty)
    //     } else {
    //       data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty]
    //     }
    //   }
    //   var series = []
    //   for (var k in data) {
    //     series.push({
    //       name: k,
    //       type: 'line',
    //       yAxisIndex: k === '废水流量' ? 1 : 0,
    //       data: data[k]
    //     })
    //   }
    //   console.log(series)
    //   const opitons = this.initOptions(dateDate, series)
    //   this.mychartDay = this.$echarts.init(this.$refs.main)
    //   this.mychartDay.setOption(opitons)
    // })
  }
}
</script>

 src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue

@@ -3,10 +3,10 @@
    <div id="Tab">
        <div class="infomation">
          <div>
            <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
            <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
            <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
            <span class="grid-content">废气流量 : <i>120343.18</i></span>
            <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i>  标准 : 100</span>
            <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span>
            <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span>
            <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>
          </div>
        </div>
        <div class="form-echrts">
@@ -30,16 +30,16 @@
                      </span>
                    </div>
                </div>
                <div>
                    采样点数:
                    <el-select v-model="formInline.region">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="50" value="50"></el-option>
                        <el-option label="75" value="75"></el-option>
                        <el-option label="100" value="100"></el-option>
                    </el-select>
                </div>
<!--                <div>-->
<!--                    采样点数:-->
<!--                    <el-select v-model="formInline.region">-->
<!--                        <el-option label="0" value="0"></el-option>-->
<!--                        <el-option label="25" value="25"></el-option>-->
<!--                        <el-option label="50" value="50"></el-option>-->
<!--                        <el-option label="75" value="75"></el-option>-->
<!--                        <el-option label="100" value="100"></el-option>-->
<!--                    </el-select>-->
<!--                </div>-->
                <div class="detailbtn"  @click="onSubmit">查询</div>
                <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
             </div>
@@ -141,18 +141,31 @@
      }
    }
  },
  // mounted () {
  //   // this.$nextTick(() => {
  //   //   console.log(1)
  created () {
    // this.$nextTick(() => {
  //   this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
  //   // }
  // },
    // }
  },
  mounted () {
    this.onSubmit()
    // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
  },
  methods: {
    onSubmit () {
      console.log(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      this.CreateChart()
      // console.log(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
    },
    CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
    CreateChart: function () {
      // var id = this.JsonCtarts.id
      // var title = this.JsonCtarts.title
      var legend = this.JsonCtarts.legend
      var xdata = this.JsonCtarts.xdata
      var ydatas = this.JsonCtarts.ydatas
      var yname = this.JsonCtarts.yname
      // var jcdId = this.JsonCtarts.jcdID
      var datatype = this.JsonCtarts.datatype

      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.clear()
      var dataUnit = ''
@@ -450,6 +463,7 @@
        }],
        series: serLists
      }
      console.log(option)
      this.myChart.setOption(option)
      /*
      this.myChart.on('legendselectchanged', function (params) {

 src/components/BaseNav/PublicBounced/GasComponents/EChartsHourWasteWater.vue

@@ -587,6 +587,9 @@
    border-radius: 2px;
    margin-right: 10px;
    padding:0 10px
  //>i{
  //    color: #f00;
  //  }
}
.infomation {
  padding: 5px 10px;

 src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue

@@ -2,10 +2,10 @@
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i>120343.18</i></span>
        <span class="grid-content">氮氧化物 :<i  style="color: #e8ee0b">29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i  style="color: #e8ee0b">17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i  style="color: #e8ee0b">6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i  style="color: #e8ee0b">120343.18</i></span>
      </div>
    </div>
    <div class="form-echrts">
@@ -205,10 +205,20 @@
      }
    }
  },
  // mounted () {
  //   this.DrawEXHRealTimeDateChart()
  // },
  mounted () {
    // const Day = new Date()
    // console.log(Day)
    this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname)
  },
  methods: {
    // EndTime () {
    //   var myDate = new Date()
    //   var mytime = myDate.toLocaleTimeString() // 获取当前时间
    //   console.log(mytime)
    // },
    // handleshowcomplaint(row) {
    //   this.temp.complaint_consultationtime = new Date()
    // },
    onSubmit () {
      this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname)
    },
@@ -490,6 +500,9 @@
  border-radius: 2px;
  margin-right: 10px;
  padding:0 10px
  >i{
    color: #ffffff;
  }
}
.animation {
  //width: 600px;

 src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue

@@ -5,10 +5,14 @@
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <ul class="tab">
            <li @click='tabTaggle("ECharts")'>实时数据</li>
            <li @click='tabTaggle("EChartsHour")'>小时数据</li>
            <li @click='tabTaggle("EChartsDate")'>日数据</li>
            <li @click='tabTaggle("EChartsTable")'>人工数据</li>
<!--            <li @click='tabTaggle("ECharts")'>实时数据</li>-->
<!--            <li @click='tabTaggle("EChartsHour")'>小时数据</li>-->
<!--            <li @click='tabTaggle("EChartsDate")'>日数据</li>-->
<!--            <li @click='tabTaggle("EChartsDate")'>人工数据</li>-->
            <li :class="active==0?'hover':''" @click='tabTaggle("ECharts",0)'>实时数据</li>
            <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>小时数据</li>
            <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDate",2)'>日数据</li>
            <li :class="active==3?'hover':''" @click='tabTaggle("EChartsTable",3)'>人工数据</li>
        </ul>
        <div class="legend" >
            <span >正常</span>
@@ -18,7 +22,7 @@
            <span >超标</span>
            <i style=" background: orange;"></i>
        </div>
        <component :is="currentTab" v-bind="$attrs"></component>
        <component :is="currentTab" v-bind="$attrs" ref="Echatrs"></component>
    </div>
</template>

@@ -40,14 +44,19 @@
    EChartsHourWasteWater,
    EChartsTable
  },
  mounted () {
    this.$refs.Echatrs.CreateChart()
  },
  data () {
    return {
      currentTab: 'EChartsHour'
      currentTab: 'EChartsHour',
      active: '1'
    }
  },
  methods: {
    tabTaggle (taggleMenu) {
    tabTaggle (taggleMenu, num) {
      this.currentTab = taggleMenu
      this.active = num
      // debugger
    }
  }

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -63,7 +63,7 @@
  mounted () {
    // this.$nextTick(() => {
    // console.log(this.$refs.publicBounced)
    // console.log(this.$refs.PublicChart)
    console.log(this.$refs.PublicChart)
    // })
  },
  methods: {
@@ -82,11 +82,12 @@
      this.value = value
    },
    setGasData (data, dataDetails, GasHourData, ManualData, value) {
      // console.log(this.$refs)
      this.setWasteGasdata = data
      this.getWasteGasDetails = dataDetails
      this.getQueryOnlineMonData = GasHourData
      this.ManualData = ManualData
      console.log(this.getQueryOnlineMonData)
      // console.log(this.getQueryOnlineMonData)
      this.displayContentTitle = data.Name
      this.flag = true
      this.value = value

 src/components/LayerController/logic/WasteGas.js

@@ -82,10 +82,10 @@
    // console.log(result.Result.DataInfo)
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi')
    // console.log(e.layer.options.test)
    instance.$mount()
    document.body.appendChild(instance.$el)
    instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi')
    this.setPanTo(e.latlng, 80)
  }
  // 不同类型图片加载

 src/components/panel/RightSearchPanel.vue

@@ -57,6 +57,9 @@
import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
import SewersSearch from '@components/panel/topicSearch/SewersSearch'
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'

import bus from '@/eventBus'

export default {
@@ -143,6 +146,12 @@
        case '管线':
          this.gcComp = SewersSearch
          break
        case '管道变更':
          this.gcComp = PipeChangesSearch
          break
        case '管道信息':
          this.gcComp = PipeInformationSearch
          break
      }
    },
    handlePage (page) {

 src/components/panel/topicSearch/pipeChangesSearch.vue

New file
@@ -0,0 +1,157 @@
<template>
    <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,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <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,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <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,index) in areaTypeOptions2" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </div>
        <el-scrollbar style="height:416.44px">
            <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1 <button style="float:right">附属设施</button></h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
            <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1</h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<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 { PipelineTypeOptions } from '@/conf/layers/LayerSewers'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'DischargeSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      form: {
        areaVal: '',
        type: ''
      },
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      areaTypeOptions: [
        { label: '生活污水管线', value: '1' },
        { label: '含盐管线', value: '2' },
        { label: '雨水管线', value: '3' },
        { label: '含油管线', value: '4' },
        { label: '事故水管线', value: '5' },
        { label: '含碱管线', value: '6' },
        { label: '循环水管线', value: '7' },
        { label: '净化水管线', value: '8' }
      ],
      areaTypeOptions1: [
        { label: '2016', value: '1' },
        { label: '2017', value: '2' },
        { label: '2018', value: '3' },
        { label: '2019', value: '4' },
        { label: '2020', value: '5' },
        { label: '2016', value: '6' }
      ],
      areaTypeOptions2: [
        { label: '全部', value: '1' },
        { label: '在用', value: '2' },
        { label: '停用', value: '3' },
        { label: '废弃', value: '4' },
        { label: '拆除', value: '5' },
        { label: '其他', value: '6' }
      ]
    }
  },
  props: ['title'],
  methods: {
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    async handleSearch () {
      const param = {
        pipelineType: this.form.pipelineType,
        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
      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()
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/panel/topicSearch/pipeInformationSearch.vue

New file
@@ -0,0 +1,139 @@
<template>
    <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,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <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,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </div>
        <el-scrollbar style="height:416.44px">
            <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1 <button style="float:right">附属设施</button></h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
            <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1</h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<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 { PipelineTypeOptions } from '@/conf/layers/LayerSewers'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'DischargeSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      form: {
        areaVal: '',
        type: ''
      },
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      areaTypeOptions: [
        { label: '管线本体', value: '1' }, { label: '附属设施', value: '2' }, { label: '环保设施', value: '3' }
      ],
      areaTypeOptions1: [
        { label: '全部管线', value: '1' },
        { label: '生活污水管线', value: '1' },
        { label: '含盐管线', value: '1' },
        { label: '雨水管线', value: '1' },
        { label: '含油管线', value: '1' },
        { label: '事故水管线', value: '1' },
        { label: '含碱管线', value: '1' },
        { label: '循环水管线', value: '1' },
        { label: '净化水管线', value: '1' }
      ]
    }
  },
  props: ['title'],
  methods: {
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    async handleSearch () {
      const param = {
        pipelineType: this.form.pipelineType,
        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
      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()
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/conf/Topic.js

@@ -60,4 +60,18 @@
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '管道变更',
  id: 8,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '管道信息',
  id: 9,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}]