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

wangqi

2021-04-01 d3ece4cef58a075c8182cf98f107bd5dfcfc34d5

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

 src/assets/css/map/map-panel-style.less

@@ -1,5 +1,15 @@
@import "_map-variable";

/*全局设置***********/
h1,h2,h3,h4,h5,h6,ul,li,p{
  padding: 0;
  margin: 0;
  list-style: none;
}




.el-button--primary {
  color: @color;
  background-color: @background-color;
@@ -12,7 +22,6 @@
    text-align: center;
    height: 20px;
    line-height: 20px;

    color: @color;
    cursor: pointer;
    -ms-flex-negative: 0;
@@ -202,3 +211,34 @@
}



/***************Company 图层 悬浮框样式。*********************************/
.company-bindTooltip{
  background:none;
  border:none;
  color:red;
  font-size: 16px;
  font-weight: 900 !important;
  text-shadow: 0 0 5px #fff;
  box-shadow: none;
}
.company-bindTooltip-hover h3{
  text-align: center;
  border-bottom:1px solid #0B3B6D;
  margin: 0;
  padding:0;
}
.company-bindTooltip-hover ul{
  list-style: none;
  margin: 0;
  padding:0;
  width: 260px;
  display: flex;
  flex-wrap: wrap;
}
.company-bindTooltip-hover ul li{
  margin: 0;
  padding:3px 0;
  width: 50%;
}


 src/base/BaseVectorLayer.js

@@ -1,5 +1,4 @@


/**
 * 基础图层类， 包含图层的创建，加载和清除等基础功能。
 */

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

@@ -193,6 +193,7 @@
        background-color: rgba(0, 255, 246, 0.14);
        color: #00d0f9;
        border: none;
        padding: 0 15px;
    }
  #echarts{
    margin: 0;

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

@@ -4,14 +4,13 @@
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <el-tabs type="card" v-model="activeName">
            <el-tab-pane label="实试数据" name="first"></el-tab-pane>
            <el-tab-pane label="日数据" name="second">
                <ECharts></ECharts>
            </el-tab-pane>
            <el-tab-pane label="月数据" name="third"></el-tab-pane>
            <el-tab-pane label="人工数据" name="fourth"></el-tab-pane>
        </el-tabs>
        <ul class="tab">
            <li @click='tabTaggle("ECharts")'>实试数据</li>
            <li @click='tabTaggle("ECharts")'>日数据</li>
            <li @click='tabTaggle("ECharts")'>月数据</li>
            <li @click='tabTaggle("ECharts")'>人工数据</li>
        </ul>
        <component :is="currentTab"></component>
    </div>
</template>

@@ -25,16 +24,24 @@
  },
  data () {
    return {
      activeName: 'second'
      currentTab: 'ECharts'
    }
  },
  methods: {
    tabTaggle (taggleMenu) {
      this.currentTab = taggleMenu
    }
  }
}

</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .win {
        position: relative;
        margin-bottom: 13px;
@@ -73,4 +80,24 @@
        border-left: none;
        border-top: none;
    }
    .tab{
        display: flex;
        border-bottom: 1px solid #396d83;
        margin-bottom: 10px;
    }
    li{
        background-color: #243a55;
        margin: 10px 10px 2px 10px;
        /*padding: 5px 10px;*/
        width: 90px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 5px;
    }
    ul li:hover{
        background-color: #0e639e;
        color: #682000;
        cursor: pointer;
    }
</style>

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

@@ -32,16 +32,16 @@
           <el-col :span="8">内/外排口:{{ displayContentTab2.StorageDate }}</el-col>
         </el-row>
       </div>
        <div v-else-if="value == 'feishui'">
        <div v-else-if="value === 'feishui'">
          <el-row type="flex" class="row-bg row-item-one" justify="space-around">
            <el-col :span="8">监测点名称:{{ displayContentTab.Name }}</el-col>
            <el-col :span="8">生产单位:{{ displayContentTab.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ displayContentTab.MonTypeName }}</el-col>
            <el-col :span="8">监测点名称:{{ setWasteGasdata.Name }}</el-col>
            <el-col :span="8">生产单位:{{ setWasteGasdata.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ setWasteGasdata.MonTypeName }}</el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="8">排放去向:{{ displayContentTab.EmissDirecti }}</el-col>
            <el-col :span="8">控制级别名称:{{ displayContentTab.ContrLevelShowName }}</el-col>
            <el-col :span="8">内/外排口:{{ displayContentTab.OrOutPortName }}</el-col>
            <el-col :span="8">排放去向:{{ setWasteGasdata.EmissDirecti }}</el-col>
            <el-col :span="8">控制级别名称:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
            <el-col :span="8">内/外排口:{{ setWasteGasdata.OrOutPortName }}</el-col>
          </el-row>
        </div>
      </div>

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -4,19 +4,21 @@
            图层控制
        </div>
        <div class="wms-panel">
            <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                            @change="swAllLayers(item)"/>{{ item.name }}
                </div>
                <div class="layerbox-item">
                    <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox"
                                                                                                      :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                                      :checked="itm.checked"
                                                                                                      :value="itm.code"
                                                                                                      @change="swWmsLayer(itm)"/>{{ itm.name }}
            <el-scrollbar class="wms-panel-scrollbar">
                <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                    <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                                @change="swAllLayers(item)"/>{{ item.name }}
                    </div>
                    <div class="layerbox-item">
                        <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox"
                                                                                                          :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                                          :checked="itm.checked"
                                                                                                          :value="itm.code"
                                                                                                          @change="swWmsLayer(itm)"/>{{ itm.name }}
                        </div>
                    </div>
                </div>
            </div>
            </el-scrollbar>
        </div>
        <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>
    </div>
@@ -110,8 +112,11 @@
        }

        .wms-panel {
            width: 250px;

            width:  1.79167rem;
            .wms-panel-scrollbar{
                height: 50vh;
                width: 100%;
            }
            .layerbox {
                width: 100%;


 src/components/panel/topicSearch/EnvRiskSearch.vue

@@ -1,183 +1,284 @@
<template>
  <div>
  <div class="sewers-search" v-if="gdVisible">
    <div class="search-title">
      污雨水
      环境风险
    </div>
    <el-card class="search-panel">
    <div class="search-panel ">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item label="类型：">
          <el-select v-model="form.pipelineType" @change="handlePipelineType">
        <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 pipelineTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                    v-for="item in areaTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型：">
          <el-select v-model="form.dataType">
        <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 dataTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                    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="模糊搜索：">
          <el-input v-model="form.key" size="mini"
                    placeholder="在此输入关键字"></el-input>
        <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>
          <input type="button" class="btn-ok" @click="handleSearch" value="查询">
          <input type="button" class="btn-reset" @click="handleSearch" value="重置">
        </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}}<i :style="'background:'+item.color"></i></span></el-radio>
        </el-radio-group>
        <!--              <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" style="height:271px;">
      <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>
            </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>
          <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>
          <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>
        <div class="B-TMD-table-list-bottom">
          <div class="B-TMD-table-list-bottom-name">
            货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>
    </div>
    <el-scrollbar style="height:300px">
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
            <h3>###炼化部</h3>
            <p>所属部门：<span>炼化部</span></p>
            <p>风险级别：<span>三级</span></p>
        </div>
      </div>
    </el-card>

      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</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"
              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: 'MonitorAreaTips',
  components: {},
  name: 'SewersSearch',
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      inareaTypeOptions: [],
      enterpriseTypeOptions: [],
      enterpriseSubunitsTypeOptions: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
        areaVal: '',
        enterpriseVal: '',
        enterpriseSubunitsVal: '',
        type: ''
      },
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      levelOfRisk: [
        { name: '重大风险', value: '1', color: 'red' },
        { name: '一级风险', value: '2', color: 'sandybrown' },
        { name: '二级风险', value: '3', color: 'yellow' },
        { name: '三级风险', value: '4', color: 'green' }
      ]
    }
  },
  props: ['title'],
  methods: {
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSearch () {
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    // 企业筛选
    enterpriseType (val) {
      this.dataTypeOptions.forEach((itm) => {
        if (val === itm.value) {

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

    },
    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)
    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style lang="less">
.monitorHz {
  .el-message-box__content {
    background-color: #030D2E;
<style lang="less" scoped>
  .levelOfRisk-type{
    display: inline-block;
    position: relative;
    padding-right: 5px;
    color:#f5f5f5;
    i{
      display: block;
      width: 15px;
      height: 10px;
      position: absolute;
      top:50%;
      right: -15px;
      margin-top: -5px;
    }
  }

  .search-form .el-form-item {
    margin: 0px;
  }

  .search-form .el-icon-search {
    display: grid;
    line-height: 30px;
    font-size: 18px;
  }

  .search-panel {
    border: #07325B;
    background-color: #07325B;
  }

  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    overflow-y: scroll;
    background-color: #051842;
  }

  .B-TMD-table-list {
    margin-top: 10px;
    text-align: left;
    padding-left: 10px;
    color: #328EB5;
    width: 100%;
    line-height: 25px;
    background-color: #0B3B6D;
  }

  .footer-page {
  .el-radio.is-checked .levelOfRisk-type{color:#409EFF}
  .levelOfRisk{padding-left:20px}
  .levelOfRisk .el-radio{padding-bottom:6px}
.environmental-risk-list{
  border:1px solid @color;
  margin-right: 10px;
  margin-bottom: 15px;
  position: relative;
  padding-left:50px;
  padding-top:3px;
  padding-bottom:3px;
  color: #f5f5f5;
  .state{
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 5px;
    top:50%;
    left:10px;
    margin-top: -15px;
    border-radius: 50%;
    box-shadow: 0 0 3px #000;
    background: #0B3B6D;
  }
}
/******************以下公共部分**********/
  .sewers-search{
    position: relative;
    overflow: hidden;
    .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;
        }
      }
      /deep/ input:focus{
        border-color: @color;
      }
    }
    .search-btn{

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

 src/components/panel/topicSearch/SoilGroundWaterSearch.vue

@@ -0,0 +1,173 @@
<template>
    <div class="sewers-search">
        <div class="search-title">
            土壤及地下水
        </div>
        <el-card class="search-panel">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item label="类型：">
                    <el-select v-model="form.pipelineType" @change="handlePipelineType">
                        <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="数据类型：">
                    <el-select v-model="form.dataType">
                        <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 label="模糊搜索：">
                    <el-input v-model="form.key" size="mini"
                              placeholder="在此输入关键字"></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" style="height:271px;">
            <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>
                        </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>
                    <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>
                    <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>
                <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>
</template>

<script>
export default {
  name: 'MonitorAreaTips',
  components: {},
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      list: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSearch () {

    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style lang="less">
    .sewers-search{
        position: relative;
        overflow: hidden;
        .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;
                }
            }
            /deep/ input:focus{
                border-color: @color;
            }
        }
        .search-btn{

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

 src/components/panel/topicSearch/WaterWasteSearch.vue

@@ -0,0 +1,244 @@
<template>
    <div class="solidwaste-search" v-if="judgeVisible">
        <div class="search-title">
            <span>废水</span>
            <!--      <span>{{ title }}</span>-->
        </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>
    </div>
</template>

<script>

import mapApi from '@/api/mapApi'

export default {
  name: 'SolidWasteSearch',
  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',
      form: {
        keyword: '输入关键字'
      },
      searchDataDisplay: [],
      total: 0
    }
  },
  methods: {
    handlePipelineType (val) {
      this.solidWasteTypeOptions.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
    },
    // 点击搜索实现数据的搜索展示
    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
    },
    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>

    .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>

 src/conf/Topic.js

@@ -7,6 +7,7 @@
export const TopicComp = {
  dischargeSearch: () => import('@components/panel/topicSearch/DischargeSearch'),
  envProtectSearch: () => import('@components/panel/topicSearch/EnvRiskSearch'),
  soilGroundWaterSearch: () => import('@components/panel/topicSearch/SoilGroundWaterSearch'),
  sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue')
}

@@ -39,13 +40,13 @@
  id: 5,
  checked: false,
  icon: '/assets/images/menu/special.png',
  comp: 'dischargeSearch'
  comp: 'envProtectSearch'
}, {
  name: '土壤及地下水',
  id: 6,
  checked: false,
  icon: '/assets/images/menu/special.png',
  comp: 'dischargeSearch'
  comp: 'soilGroundWaterSearch'
}, {
  name: '污雨水管网',
  id: 7,