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

ChenZeping

2021-05-10 bacd67f317f8f3851f2f6e8b460d95f25bb5988e

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


 Conflicts:

	src/components/panel/topicSearch/SewersSearch.vue

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -2,15 +2,12 @@
    <div class="inner-panel">
        <div class="filter-group">
            <div v-for="item in layers" :key="item.code" class="filter-item">
                <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked"
                                          @change="swAllSubFilter(item)">{{item.name}}
                <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked" @change="swAllSubFilter(item)">{{item.name}}
                </div>
                <!--  <el-scrollbar style="height:100%"> -->
                    <div class="content">
                        <div v-for="filter in item.layers" :key="filter.code">
                            <input type="checkbox" :value="filter.code" :checked="filter.checked"
                                   @change="swAllSubFilter(filter)"><label
                                :title="filter.name">{{filter.name}}</label>
                            <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swAllSubFilter(filter)"><label :title="filter.name">{{filter.name}}</label>
                        </div>
                    </div>
                <!--  </el-scrollbar> -->

 src/components/LayerController/service/LayerFactory.js

@@ -1,6 +1,6 @@
import WfsLayerService from './WfsLayerService'
import { clone } from '../../../utils/utils'
import { logicMapper } from '../../../conf/Constants'
import { logicMapper, SERVICE_TYPE } from '../../../conf/Constants'
import WmsLayerService from './WmsLayerService'

/**
@@ -65,8 +65,7 @@

  loadLogic (config) {
    var code = config.code
    var wfs = config.wfs
    var wmsLayers = config.wmsLayers
    var type = config.type

    const file = logicMapper[code]
    var logic = this.layersLogic[code]
@@ -74,9 +73,9 @@
      if (file) {
        var BusiLayer = require('../logic/' + file)
        logic = new BusiLayer()
      } else if (wfs) {
      } else if (type === SERVICE_TYPE.WFS) {
        logic = new WfsLayerService(config)
      } else if (wmsLayers) {
      } else if (type === SERVICE_TYPE.WMS) {
        var layer = {}
        layer[config.code] = config
        this.wmsLayers.push(layer)
@@ -184,9 +183,17 @@
        break
      case 'MultiLineString':
        var coordinates = feature.geometry.coordinates
        point = coordinates[parseInt(coordinates.length / 2)][0]
        var coordinate = coordinates[parseInt(coordinates.length / 2)][0]
        if (coordinate.length > 2) {
          point = [coordinate[0], coordinate[1]]
        }
        break
      case 'LineString':
        var lineString = feature.geometry.coordinates
        point = lineString[parseInt(lineString.length / 2)][0]
        break
    }
    console.log(point)
    window.map.flyTo(point.reverse(), 17)
    code && this.openPopup(code, feature.id)
  }

 src/components/LayerController/service/WmsLayerService.js

@@ -1,6 +1,7 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import List from '../../../utils/List'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
@@ -27,13 +28,12 @@
    // 存放getfeatureinfo的图层组
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.layers = []
    this.layers = new List()
    for (var i = 0; i < layersConfig.length; i++) {
      const config = layersConfig[i]
      for (var k in config) {
        if (k === 'wmsLayers') {
          this.layers.push(config[k])
        }
      const typeName = config.typeName
      if (typeName) {
        this.layers.add(config.index, typeName)
      }
    }
  }
@@ -46,23 +46,18 @@
  }

  add (config) {
    const wmsLayers = config.wmsLayers
    if (wmsLayers) {
      if (this.layers.indexOf(wmsLayers) < 0) {
        this.layers.push(config.wmsLayers)
    const typeName = config.typeName
    if (typeName) {
      if (!this.layers.contains(typeName)) {
        this.layers.add(config.index, typeName)
        this.wmsLayer.setParams({ layers: this.layers.join(',') })
      }
    }
  }

  remove (config) {
    const wmsLayers = config.wmsLayers
    for (var i = 0; i < this.layers.length; i++) {
      const layerName = this.layers[i]
      if (wmsLayers === layerName) {
        this.layers.splice(i, 1)
      }
    }
    const typeName = config.typeName
    this.layers.remove(typeName)
    this.wmsLayer.setParams({ layers: this.layers.join(',') })
  }

@@ -70,18 +65,19 @@
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      layers: layers.join(',')
      layers: this.layers.join(',')
    }).addTo(this.map)
  }

  clickListener () {
    window.map.on('click', (e) => {
      console.log(e)
      this.featureGroup.clearLayers()
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()
      // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()

      if (this.layers && this.layers.length > 0) {
      if (this.layers.length() > 0) {
        const params = Object.assign({
          LAYERS: this.layers.join(','),
          QUERY_LAYERS: this.layers.join(','),
@@ -94,13 +90,13 @@
        AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
          const features = res.data.features
          /**
             * {
             *     title: 'New Tab',
             *     name: newTabName,
             *     content: 'New Tab content'
             * }
             * @type {*[]}
             */
           * {
           *     title: 'New Tab',
           *     name: newTabName,
           *     content: 'New Tab content'
           * }
           * @type {*[]}
           */
          const popupDatas = []
          if (features) {
            for (var i = 0; i < features.length; i++) {
@@ -140,7 +136,9 @@
                    datas: popupDatas
                  }
                },
                title: '' // 标题
                title: '', // 标题
                left: e.originalEvent.clientX,
                top: e.originalEvent.clientY
              })
            }
            // this.popupComp.setDatas(popupDatas)

 src/components/helpers/WfsHelper.js

@@ -1,14 +1,14 @@
/**
 * 加载WMS,拼接FILTER,LAYERS参数等
 */
import { PIPELINE_WFS } from '../../conf/Constants'
import { WFS_URL } from '../../conf/Constants'
function WfsHelper () {
  this.filters = []
  this.typeNames = []
  this.url = PIPELINE_WFS
  this.url = WFS_URL
  this.params = {
    REQUEST: 'getfeature',
    OUTPUTFORMAT: 'JSON',
    OUTPUTFORMAT: 'application/json',
    maxFeatures: 20000,
    version: '1.0.0'
  }
@@ -17,16 +17,19 @@
    this.typeNames.push(typeName)
  }

  this.addEquals = (property, literal) => {
    var filter = '<PropertyIsEqualTo><PropertyName>' + property + '</PropertyName><Literal>' + literal + '</Literal></PropertyIsEqualTo>'
  this.addEquals = (property, equals) => {
    // var filter = '<PropertyIsEqualTo><PropertyName>' + property + '</PropertyName><Literal>' + literal + '</Literal></PropertyIsEqualTo>'
    var filter = property + '=' + equals
    this.filters.push(filter)
  }

  this.addLike = (property, literal) => {
    if (property && literal) {
      var filter = '<PropertyIsLike><PropertyName>' + property + '</PropertyName><Literal>*' + literal + '*</Literal></PropertyIsLike>'
      this.filters.push(filter)
    }
    // if (property && literal) {
    // var filter = '<PropertyIsLike><PropertyName>' + property + '</PropertyName><Literal>*' + literal + '*</Literal></PropertyIsLike>'
    // this.filters.push(filter)
    // }
    var filter = property + ' like \'%' + literal + '%\''
    this.filters.push(filter)
  }

  /**
@@ -34,7 +37,7 @@
   * @returns {string|null}
   */
  this.getFilterParams = () => {
    var head = '<Filter xmlns="http://www.opengis.net/ogc">'
    /* var head = '<Filter xmlns="http://www.opengis.net/ogc">'
    var end = '</Filter>'
    var filter = ''
    if (this.filters.length > 0) {
@@ -46,8 +49,19 @@
        return ('FILTER=' + head + '<And>' + filter + '</And>' + end)
      }
      return ('FILTER=' + head + filter + end)
    } */
    var filter = ''
    if (this.filters.length > 0) {
      filter = 'CQL_FILTER='
      for (var i = 0; i < this.filters.length; i++) {
        filter += this.filters[i]
        if (i !== this.filters.length - 1) {
          filter += ' AND '
        }
      }
      return filter
    }
    return null
    return filter
  }

  this.getUrlParams = () => {
@@ -62,7 +76,8 @@
    if (filterParam) {
      params += '&' + filterParam
    }
    return encodeURI(params)
    // return encodeURI(params)
    return params
  }

  this.getUrl = () => {

 src/components/layer/src/layer.js

@@ -20,6 +20,7 @@
   * @return {[type]}         [description]
   */
  self.open = function (opt) {
    console.log(opt)
    self.closeAll()
    var options = mergeJson(opt, defOptions)
    const id = `notification_${new Date().getTime()}_${seed++}`

 src/components/layer/src/layer.vue

@@ -28,6 +28,18 @@
  },
  computed: {},
  mounted () {
    let left = this.left
    let top = this.top
    if (left > 0) {
      left = left + 'px'
    }
    if (top > 0) {
      top = top + 'px'
    }
    this.style = {
      left: left || '25%',
      top: top || '35%'
    }
  },
  methods: {
    close () {
@@ -72,8 +84,6 @@
.public-bounced {
  z-index: 2000;
  position: absolute;
  top: 35%;
  left: 20%;

  .public-bounced-title {
    cursor: move;

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,78 +1,72 @@
<template>
    <div class="sewers-search" v-if="gdVisible">
        <div class="panel-title">{{ title }}</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="查询" name="first">
                <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.pipelineType" @change="handlePipelineType"
                                       :popper-class="'select-down'">
                                <el-option
                                        v-for="item in items"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="form.pipelineType+'：'" size="mini">
                            <el-select style="width: 100%" v-model="form.dataType" value-key="code"
                                       :popper-class="'select-down'" @change="handleDataType">
                                <el-option
                                        v-for="item in subItems"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item">
                                </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:380.44px;">
                    <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
                         :class="activeNum==index?'hover':''">
                        <img class="state" :src="getImgSrc()" style="background: none"/>
                        <div>
                            <h3 @click="handleLocation(item,index)">{{ item.properties.pipename }}</h3>
                            <p>所属企业：<span>{{ item.properties.orgcode }}</span>
                            <p>设施类型：<span>{{ item.properties.teetype }}</span>
                                <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini"
                                           style="margin-right: 0.04rem;" @click="btnAffiliatedFacilities(item,index)">
                                    附属设施
                                </el-button>
                            </p>
                        </div>
                    </div>
                </el-scrollbar>
                <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>
            </el-tab-pane>
            <el-tab-pane label="分析" name="second">
                <SewersAnalysis></SewersAnalysis>
            </el-tab-pane>
            <el-tab-pane label="历史" name="third">
                <SewersHistory></SewersHistory>
            </el-tab-pane>
        </el-tabs>
        <!-- 附属设施面板 -->
        <affiliated-facilities :facilitiesParameter="facilitiesParameter"
                               v-if="fuShuSheShiShow"></affiliated-facilities>
    </div>
  <div class="sewers-search" v-if="gdVisible">
    <div class="panel-title">{{ title }}</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="查询" name="first">
        <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.pipelineType" @change="handlePipelineType"
                         :popper-class="'select-down'">
                <el-option
                    v-for="item in items"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="form.pipelineType+'：'" size="mini">
              <el-select style="width: 100%" v-model="form.dataType" value-key="code" :popper-class="'select-down'" @change="handleDataType" >
                <el-option
                      v-for="item in subItems"
                      :key="item.code"
                      :label="item.name"
                      :value="item">
              </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:413px;">
          <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum==index?'hover':''">
            <img class="state" :src="getImgSrc()" style="background: none"/>
            <div>
              <h3 @click="handleLocation(item,index)">{{ item.properties.pipename }}</h3>
              <p>所属企业：<span>{{ item.properties.orgcode }}</span>
              <p>设施类型：<span>{{ item.properties.teetype }}</span>
               <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="btnAffiliatedFacilities(item,index)" >附属设施</el-button>
              </p>
            </div>
          </div>
        </el-scrollbar>
        <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>
      </el-tab-pane>
      <el-tab-pane label="分析" name="second">
        <SewersAnalysis></SewersAnalysis>
      </el-tab-pane>
      <el-tab-pane label="历史" name="third">
        <SewersHistory></SewersHistory>
      </el-tab-pane>
    </el-tabs>
    <!-- 附属设施面板 -->
    <affiliated-facilities :facilitiesParameter="facilitiesParameter"  v-if="fuShuSheShiShow" ></affiliated-facilities>
  </div>
</template>

<script>
@@ -150,11 +144,12 @@
      this.list = []
      var wfsHelper = new WfsHelper()
      // todo 现在管网还没区分开类型，后面改
      wfsHelper.addTypeName(this.form.dataType.sname)
      wfsHelper.addLike('name', this.form.keyword)
      wfsHelper.addTypeName(this.form.dataType.typeName)
      if (this.form.keyword) {
        wfsHelper.addLike('name', this.form.keyword)
      }
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.list = res.features
      }

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue

@@ -9,99 +9,32 @@
    <el-card class="box-card">
      <el-scrollbar style="height:2rem">
        <span class="clearfix">起始管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="startingSection"
            max-height="200"
            style="width: 100%" size="mini">
          <el-table-column
              prop="lineloopna"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="pipecode"
              label="管线名称"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              label="终点编号"
          >
          </el-table-column>
          <el-table-column
              class-name="fixed-tablea"
              fixed="right"
              label="操作"
          >
        <el-table ref="singleTable" highlight-current-row :data="startingSection" max-height="200" style="width: 100%" size="mini">
          <el-table-column prop="lineloopna" label="管线类型"></el-table-column>
          <el-table-column sortable prop="pipecode" label="管线名称"></el-table-column>
          <el-table-column sortable prop="startpoint" label="起点编号"></el-table-column>
          <el-table-column sortable prop="endpointnu" label="终点编号"></el-table-column>
          <el-table-column class-name="fixed-tablea" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span class="clearfix">结束管段</span>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="管线类型">
          </el-table-column>
          <el-table-column
              prop="name"
              label="管线名称">
          </el-table-column>
          <el-table-column
              prop="province"
              label="起点编号">
          </el-table-column>
          <el-table-column
              prop="city"
              label="终点编号">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作">
          </el-table-column>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="管线类型"></el-table-column>
          <el-table-column prop="name" label="管线名称"></el-table-column>
          <el-table-column prop="province" label="起点编号"></el-table-column>
          <el-table-column prop="city" label="终点编号"></el-table-column>
          <el-table-column class-name="fixed-table" fixed="right" label="操作"></el-table-column>
        </el-table>
        <span class="clearfix">分析结果</span>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="管线类型">
          </el-table-column>
          <el-table-column
              prop="name"
              label="管线名称">
          </el-table-column>
          <el-table-column
              prop="province"
              label="起点编号">
          </el-table-column>
          <el-table-column
              prop="city"
              label="终点编号">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作">
          </el-table-column>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="管线类型"></el-table-column>
          <el-table-column prop="name" label="管线名称"></el-table-column>
          <el-table-column prop="province" label="起点编号"></el-table-column>
          <el-table-column prop="city" label="终点编号"></el-table-column>
          <el-table-column class-name="fixed-table" fixed="right" label="操作"></el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>

 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

@@ -4,153 +4,45 @@
        <!--<el-card>-->
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="连通性" name="first">
                <el-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击选择需要进行连通分析的管段">起始管段
                </el-button>
                <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击与所选管段连通管段">结束管段
                </el-button>
                <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管段进行连通性分析">连通性分析
                </el-button>
                <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管段进行连通性分析">清除
                </el-button>
               <div>
                   <el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段</el-button>
                   <el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button>
                   <el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
                   <el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button>
               </div>
                <!--        <el-scrollbar style="height:450px">-->
                <!--          <el-card shadow="hover">-->
                <span class="fixed-style">起始管段</span>
                <el-table
                        class="tableBox"
                        height="100"
                        max-height="200"
                        :data="tableDataLinkStart"
                        @row-click="linkSelectStart"
                        highlight-current-row
                        style="width: 100%" size="mini">
                    <el-table-column
                            prop="datasource"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="终点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            class-name="fixed-table"
                            label="操作"
                    >
                <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart" @row-click="linkSelectStart" highlight-current-row style="width: 100%" size="mini">
                    <el-table-column prop="datasource" label="管段类型"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column>
                    <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
                    <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
                    <el-table-column fixed="right" class-name="fixed-table" label="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span class="fixed-style">结束管段</span>
                <el-table
                        class="tableBox"
                        height="100"
                        max-height="200"
                        highlight-current-row
                        :data="tableDataLinkEnd"
                        @row-click="linkSelectEnd"
                        style="width: 100%" size="mini">
                    <el-table-column
                            prop="datasource"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="终点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                <el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd" @row-click="linkSelectEnd" style="width: 100%" size="mini">
                    <el-table-column prop="datasource" label="管段类型"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column>
                    <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
                    <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span class="fixed-style">分析结果:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span>
                <el-table
                        class="tableBox"
                        highlight-current-row
                        max-height="200"
                        :data="tableDataLinkResult"
                        @row-click="linkResultSelect"
                        style="width: 100%" size="mini">

                    <el-table-column
                            prop="material"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="终点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult" @row-click="linkResultSelect" style="width: 100%" size="mini">
                    <el-table-column prop="material" label="管段类型"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column>
                    <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
                    <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
@@ -160,110 +52,32 @@
                <!--</el-card>-->
                <!--</el-scrollbar>-->
            </el-tab-pane>
            <el-tab-pane label="爆管" style=";color: #cccccc" name="second">
            <el-tab-pane label="爆管" style="color: #cccccc" name="second">
                <el-row>
                    <span>爆管（相关开关）</span>
                    <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;"
                               title="地图上点击选择发生爆管的管段">
                        选择管段
                    </el-button>
                    <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">
                        清除
                    </el-button>
                    <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" title="地图上点击选择发生爆管的管段">选择管段</el-button>
                    <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">清除</el-button>
                </el-row>
                <!--        <el-card shadow="hover">-->
                <span class="fixed-style">发生爆裂的管段</span>
                <el-table
                        max-height="200"
                        class="tableBox"
                        ref="singleTable"
                        highlight-current-row
                        :data="bgPipeLine"
                        style="width: 100%" size="mini">
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="终点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                <el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine" style="width: 100%" size="mini">
                    <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="bgSelect(scope.row)" type="text" size="small">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span class="fixed-style">需要关闭的阀门</span>
                <el-table
                        class="tableBox"
                        highlight-current-row
                        max-height="200"
                        :data="bgFm"
                        @row-click="bgFmClick"
                        style="width: 100%" size="mini">
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            :show-overflow-tooltip="true"
                            width="100"
                            prop="pipecode"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            :show-overflow-tooltip="true"
                            width="100"
                            prop="pipecode"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="终点编号"
                    >
                    </el-table-column>

                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                <el-table class="tableBox" highlight-current-row max-height="200" :data="bgFm" @row-click="bgFmClick" style="width: 100%" size="mini">
                    <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
                    <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="管段名称"></el-table-column>
                    <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="起点编号"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
@@ -272,152 +86,61 @@
                <!--        </el-card>-->
            </el-tab-pane>
            <el-tab-pane label="流向" name="third">
                <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击要显示流向的管段">
                    选择管段
                </el-button>
                <el-table
                        max-height="200"
                        class="tableBox"
                        :data="tableDataLiuxiang" size="mini">
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="终点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                            width="100"
                    >
                <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;" title="地图上点击要显示流向的管段">选择管段</el-button>
                <el-table max-height="200" class="tableBox" :data="tableDataLiuxiang" size="mini">
                    <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="操作" width="60">
                        <template slot-scope="scope">
                            <el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span class="fixed-style">分析结果</span>
                <el-table
                        class="tableBox"
                        highlight-current-row
                        max-height="200"
                        :data="lxTableDataResult"
                        @row-click="lxResultSelect"
                        style="width: 100%" size="mini">

                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管段类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            width="100"
                            sortable
                            prop="pipecode"
                            label="管段名称"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="终点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="操作"
                    >
                <el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult" @row-click="lxResultSelect" style="width: 100%" size="mini">
                    <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" width="100" sortable prop="pipecode" label="管段名称"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="横断面" name="fourth">
                <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;"
                           title="地图上绘制要进行分析截断面的线">
                    绘制线段
                </el-button>
                <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析
                </el-button>
                <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
                </el-button>
                <div>
                    <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;" title="地图上绘制要进行分析截断面的线">绘制线段</el-button>
                    <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析</el-button>
                    <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除</el-button>
                </div>
                <!--        <el-card class="box-card">-->
                <div slot="header" class="fixed-style">
                    <span>管段查询结果</span>
                </div>
                <el-table
                        class="tableBox"
                        :data="tableData"
                        max-height="200"
                        style="width: 100%" @row-click="selectRow" size="mini">
                    <el-table-column
                            prop="pipename"
                            label="管段名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="mediumtype"
                            label="管段类型"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            class-name="fixed-table"
                            fixed="right"
                            label="图表查看"
                    >
                <el-table class="tableBox" :data="tableData" max-height="200" style="width: 100%" @row-click="selectRow" size="mini">
                    <el-table-column prop="pipename" label="管段名称"></el-table-column>
                    <el-table-column prop="mediumtype" label="管段类型" width="80"></el-table-column>
                    <el-table-column class-name="fixed-table" fixed="right" label="图表"  width="40">
                        <template slot-scope="scope">
                            <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--        </el-card>-->
                <el-card class="box-card">
                <!-- <el-card class="box-card">
                    <div slot="header" class="fixed-style">
                        <span>断面图</span>
                    </div>
                    <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
                    <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
                </el-card>
                </el-card> -->
                <span class="fixed-style">断面图</span>
                <span v-show="!myChartShow" style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span>
                <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" -->
            </el-tab-pane>
        </el-tabs>
        <!--</el-card>-->
@@ -1016,10 +739,11 @@
          }
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          // containLabel: true
          left: '10px',
          right: '0',
          top: '10px',
          bottom: '5px',
          containLabel: true
        },
        xAxis: [
          {
@@ -1084,6 +808,13 @@
</script>

<style lang="less" scoped>
    /deep/ .el-tabs .el-tabs__item{
        height: 20px;
        line-height: 20px;
    }
    /deep/ .el-tabs--border-card>.el-tabs__content{
        padding: 5px;
    }
    /deep/ .el-table .has-gutter tr th {
        border: none !important;
    }
@@ -1099,8 +830,7 @@
    /deep/ .fixed-style {
        font-size: 12px;
        display: inline-block;
        color: #ffffff;
        margin: 15px;
        color: #00fff6;
    }

    /deep/ th.is-leaf {
@@ -1109,6 +839,9 @@

    /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
        background: none;
    }
    /deep/ .el-table__empty-text{
        line-height: 170px;
    }

    /deep/ .el-table__body .el-table__row.hover-row td {
@@ -1128,6 +861,10 @@
        display: none;
    }

    /deep/ .el-tab-pane{
        min-height: 506.19px;
    }

    /*/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {*/
    /*    padding-left: 20px;*/
    /*}*/

 src/components/panel/topicSearch/SewersSelect/SewersHistory.vue

@@ -20,7 +20,7 @@
        </div>
      </el-form>
    </div>
    <el-scrollbar style="height:286.22px">
    <el-scrollbar style="height:377px">
      <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>

 src/conf/Constants.js

@@ -4,6 +4,12 @@
  POLYGON: 'polygon'
}

export const SERVICE_TYPE = {
  WFS: 'wfs',
  WMS: 'wms'
}

export const WFS_URL = 'http://xearth.cn:6240/geoserver/sewer/ows?service=WFS'
export const PIPELINE_WFS = 'http://xearth.cn:8088/server/ogcserver/PipeLine2/wfs'
export const PIPELINE_WMS = 'http://xearth.cn:6240/geoserver/sewer/wms'


 src/conf/layers/LayerFsss.js

@@ -1,30 +1,32 @@
/**
 * 区域
 */
import { PIPELINE_WFS } from '../Constants'
import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
const WFS_URL = PIPELINE_WFS
export const LayerFsss = {
  code: 'sewersFsss',
  name: '附属设施',
  checked: false, // 默认选中状态
  layers: [
    {
    /* {
      code: 'pipeSection',
      name: '管段',
      sname: '管段',
      checked: false,
      wmsLayers: 'sewer:pipesegment'
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipesegment&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=orgname=\'巴陵石化\''
    },
    }, */
    {
      code: 'fourlink',
      name: '四通',
      sname: '四通',
      checked: true,
      minZoom: 16,
      wmsLayers: 'sewer:fourlink',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:fourlink',
      // wfs: WFS_URL + '?TYPENAME=四通',
      icon: 'sewers/四通.png'
      icon: 'sewers/四通.png',
      index: 3
    },
    {
      code: 'tee',
@@ -32,16 +34,19 @@
      sname: '三通',
      checked: false,
      minZoom: 16,
      wmsLayers: 'sewer:tee',
      typeName: 'sewer:tee',
      type: SERVICE_TYPE.WMS,
      // wfs: WFS_URL + '?TYPENAME=三通',
      icon: 'sewers/三通.png'
      icon: 'sewers/三通.png',
      index: 3
    },
    {
      code: 'piperack',
      name: '管架(墩)',
      sname: 'PipeRack',
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=管架',
      type: SERVICE_TYPE.WMS,
      typeName: WFS_URL + '?TYPENAME=管架',
      checked: false
    },
    {
@@ -49,13 +54,15 @@
      name: '管廊(带)',
      sname: 'PipeGallery',
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=管廊',
      type: SERVICE_TYPE.WMS,
      typeName: '?TYPENAME=管廊',
      checked: false
    },
    {
      code: 'pipesegment',
      name: '流向',
      sname: 'ywslx',
      type: SERVICE_TYPE.WMS,
      checked: false
    },
    {
@@ -64,7 +71,8 @@
      minZoom: 10,
      sname: '阀门',
      checked: false,
      wmsLayers: 'sewer:valve',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:valve',
      // wfs: WFS_URL + '?TYPENAME=阀门',
      icon: 'sewers/阀门.png'
    },
@@ -74,7 +82,8 @@
      sname: '弯头',
      minZoom: 16,
      checked: false,
      wmsLayers: 'sewer:elbow',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:elbow',
      // wfs: WFS_URL + '?TYPENAME=弯头',
      icon: 'sewers/弯头.png'
    }

 src/conf/layers/LayerHbss.js

@@ -1,7 +1,7 @@
/**
 * 区域
 */
import { PIPELINE_WFS } from '../Constants'
import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
const WFS_URL = PIPELINE_WFS
export const LayerHbss = {
  code: 'sewersHbss',
@@ -14,6 +14,7 @@
      sname: '窨井',
      checked: false,
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wmsLayers: 'sewer:manhole',
      icon: 'sewers/窨井.png'
    },
@@ -23,7 +24,8 @@
      sname: '雨篦子',
      checked: false,
      minZoom: 16,
      wmsLayers: 'sewer:raingate',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:raingate',
      // wfs: WFS_URL + '?TYPENAME=雨篦子',
      icon: 'sewers/雨篦子.png'
    },
@@ -32,6 +34,7 @@
      name: '防火堤',
      sname: '防火堤',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=防火堤',
      checked: false
    },
@@ -42,12 +45,14 @@
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=集水池',
      checked: false,
      type: SERVICE_TYPE.WMS,
      icon: 'sewers/集水池.png'
    },
    {
      code: 'jlz',
      name: '截流闸',
      sname: '截流闸',
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=截流闸',
      checked: false
    },
@@ -56,6 +61,7 @@
      name: '溢流堰',
      sname: '溢流堰',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=溢流堰',
      checked: false
    },
@@ -65,6 +71,7 @@
      sname: '隔油池',
      minZoom: 16,
      checked: false,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=隔油池',
      icon: 'sewers/隔油池.png'
    }

 src/conf/layers/LayerPipeLines.js

@@ -4,8 +4,7 @@
import { LayerHbss } from './LayerHbss'
import { LayerFsss } from './LayerFsss'

import { PIPELINE_WFS } from '../Constants'
const WFS_URL = PIPELINE_WFS
import { SERVICE_TYPE } from '../Constants'

export const LayerPipeLines = {
  code: 'sewersPipeLines',
@@ -19,110 +18,126 @@
      name: '雨水线',
      sname: '管网',
      checked: false,
      type: 0,
      wmsLayers: 'sewer:pipeline_rain',
      // wfs: WFS_URL + '?TYPENAME=管网&FILTER=<Filter xmlns="http://www.opengis.net/ogc"><PropertyIsEqualTo><PropertyName>mediumtype</PropertyName><Literal>雨水管线</Literal></PropertyIsEqualTo></Filter>',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
      styles: {
        COLOR: '#0070ff',
        FILL_COLOR: '#0070ff'
      }
      },
      filter: 'mediumtype = \'雨水\'',
      index: 1
    },
    {
      code: 'accidentline',
      name: '事故水',
      sname: '事故水',
      checked: false,
      // wmsLayers: 'sewer:pipeline_accident',
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=事故水'
      filter: 'mediumtype = \'事故水\'',
      index: 1
    },
    {
      code: 'oilline',
      name: '含油污水',
      sname: '含油污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      minZoom: 13,
      color: '#ffaa00',
      wmsLayers: 'sewer:pipeline_sewer',
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      filter: 'mediumtype = \'含油\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
      }
      },
      index: 1
    },
    {
      code: 'saltline',
      name: '含盐污水',
      sname: '含盐污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=含盐污水'
      filter: 'mediumtype = \'含盐\'',
      index: 1
    },
    {
      code: 'alkaliline',
      name: '含碱污水',
      sname: '含碱污水',
      checked: false,
      type: 0,
      wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含碱\'',
      minZoom: 10,
      index: 1
    },
    {
      code: 'sulfurline',
      name: '含硫污水',
      sname: '含硫污水',
      checked: false,
      type: 0,
      wmsLayers: 'sewer:pipeline_sulfur',
      // wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含硫\'',
      minZoom: 10,
      index: 1
    },
    {
      code: 'lifeline',
      name: '生活污水',
      sname: '生活污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'生活污水\'',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=生活污水'
      index: 1
    },
    {
      code: 'purifyline',
      name: '净化水',
      sname: '净化水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'净化水\'',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=净化水'
      index: 1
    },
    {
      code: 'loopline',
      name: '循环水',
      sname: '循环水',
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'循环水\'',
      checked: false,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=循环水'
      index: 1
    },
    {
      code: 'buildline',
      name: '生产污水',
      sname: '生产污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'生产污水\'',
      minZoom: 13,
      color: '#a8a800',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'生产污水\'',
      styles: {
        COLOR: '#a8a800',
        FILL_COLOR: '#a8a800'
      }
      },
      index: 1
    }
  ]
}

 src/utils/List.js

New file
@@ -0,0 +1,96 @@
class List {
  constructor () {
    this.dataSouce = []
  }

  add (index, element) {
    if (!index) {
      this.addEnd(element)
    } else if (index >= this.dataSouce.length) {
      this.addEnd(element)
    } else if (index === 1) {
      this.addFront(element)
    } else {
      this._add(index, element)
    }
  }

  /**
    * 在列表的末尾添加新元素
    * @param {*} element 要添加的元素
    */
  addEnd (element) {
    this.dataSouce[this.dataSouce.length] = element
  }

  /**
    * 在列表头部添加新元素
    * @param {*} element
    * @param {*} after
    */
  addFront (element) {
    this._add(0, element)
  }

  _add (index, element) {
    const newArr = []
    for (var i = this.dataSouce.length - 1; i > index - 1; i--) {
      newArr[i + 1] = this.dataSouce[i]
    }
    newArr[index] = element
    this.dataSouce = newArr
  }

  /**
     * 在列表中移除一个元素
     * @param {*} element 要删除的元素
     */
  remove (element) {
    // 查找当前元素的索引
    const index = this.dataSouce.indexOf(element)
    if (index >= 0) {
      this.dataSouce.splice(index, 1)
      return true
    }
    return false
  }

  /**
     * 判断给定的值是否在列表中
     */
  contains (element) {
    return this.dataSouce.indexOf(element) > -1
  }

  /**
     * 清楚列表中的元素
     */
  clear () {
    delete this.dataSouce
    this.dataSouce = []
  }

  /**
     * 列表的长度
     */
  length () {
    return this.dataSouce.length
  }

  join (comma) {
    this.removeBlank()
    return this.dataSouce.join(comma)
  }

  removeBlank () {
    const arr = this.dataSouce
    console.log(arr)
    for (const k in arr) {
      if (!arr[k]) {
        this.dataSouce.splice(k, 1)
      }
    }
  }
}

export default List

 src/views/popup/Popup.vue

@@ -1,6 +1,6 @@
<template>
  <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px">
    <el-tabs :value="0" type="card">
    <el-tabs value="0" type="card">
      <el-tab-pane
              :key="item.name"
              v-for="(item,index) in datas"