Merge remote-tracking branch 'origin/develop' into develop

chenyabin

2021-05-10 204b8af237555feb1af83250dfdc28a5dc0a467c

Merge remote-tracking branch 'origin/develop' into develop

 src/api/host.js

@@ -4,3 +4,9 @@
import { getSchemeHost } from '../utils/tools'

export const $HOST = getSchemeHost()

// 管线分析-线上
export const $HOSTANALYSE = 'http://xearth.cn:6202'

// 管线分析-本地
// export const $HOSTANALYSE = 'http://10.238.105.124:8089'

 src/api/mapUrl.js

@@ -1,7 +1,7 @@
/**
 * 该文件配置接口的URL地址
 */
import { $HOST } from './host'
import { $HOST, $HOSTANALYSE } from './host'

export const GetUser = $HOST + '/user/getUser'

@@ -30,8 +30,8 @@
export const getCompany = $HOST + '/company/getCompany'

// 管线分析
export const findPipelineByClickPoint = 'http://xearth.cn:6202' + '/findPipelineByClickPoint'
export const findConnectedPipelines = 'http://xearth.cn:6202' + '/findConnectedPipelines'
export const findFlowDirection = 'http://xearth.cn:6202' + '/findFlowDirection'
export const findLeakages = 'http://xearth.cn:6202' + '/findLeakages'
export const getCrossSection = 'http://xearth.cn:6202' + '/getCrossSection'
export const findPipelineByClickPoint = $HOSTANALYSE + '/findPipelineByClickPoint'
export const findConnectedPipelines = $HOSTANALYSE + '/findConnectedPipelines'
export const findFlowDirection = $HOSTANALYSE + '/findFlowDirection'
export const findLeakages = $HOSTANALYSE + '/findLeakages'
export const getCrossSection = $HOSTANALYSE + '/getCrossSection'

 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/RightSearchPanel.vue

@@ -60,6 +60,7 @@
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'
import ReportSearch from './topicSearch/ReportSearch'

import bus from '@/eventBus'

@@ -70,7 +71,8 @@
    WaterWasteSearch,
    SolidWasteSearch,
    EnvRiskSearch,
    DischargeSearch
    DischargeSearch,
    ReportSearch
  },
  data () {
    return {
@@ -153,6 +155,9 @@
        case '管道信息':
          this.gcComp = PipeInformationSearch
          break
        case '企业应急':
          this.gcComp = ReportSearch
          break
      }
    },
    handlePage (page) {

 src/components/panel/topicSearch/ReportSearch.vue

New file
@@ -0,0 +1,45 @@
<template>
    <div class="sewers-search" v-if="judgeVisible">
        <div class="panel-title">{{ title }}</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="事件查询" name="first">
                <EventQuery></EventQuery>
            </el-tab-pane>
            <el-tab-pane label="资源查询" name="second">
                <ResourcesQuery></ResourcesQuery>
            </el-tab-pane>
        </el-tabs>
        <!--        <ReportPopup></ReportPopup>-->
    </div>
</template>

<script>
import EventQuery from './SewersSelect/EnterpriseEmergency/EventQuery'
import ResourcesQuery from './SewersSelect/EnterpriseEmergency/ResourcesQuery'
// import ReportPopup from './SewersSelect/EnterpriseEmergency/ReportPopup'

export default {
  name: 'ReportSearch',
  props: ['title'],
  components: {
    EventQuery,
    ResourcesQuery
    // ReportPopup
  },
  data () {
    return {
      judgeVisible: true,
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab) {
      console.log(tab)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/panel/topicSearch/SewersSearch.vue

@@ -144,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/PublicWay.js

@@ -1,18 +1,5 @@
export default {
  // 爆管
  bgClick () {
    this.selectPipeLine()
  },
  // 流向地图上点击
  selectPipeLine () {
    // console.log(map)
    window.on('click', this.selectClick)
  },
  // 地图上点击回调
  selectClick (e) {
    console.log(e)
    // window.map.off('click', this.selectClick)
    // const point = [e.latlng.lng, e.latlng.lat]
    // console.log(point)
  clickPopup () {
    console.log('公共方法')
  }
}

 src/components/panel/topicSearch/SewersSelect/EnterpriseEmergency/EventQuery.vue

New file
@@ -0,0 +1,119 @@
<template>
    <div class="search-panel">
        <el-form ref="form" :model="form" label-width="90px" class="search-form">
            <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="事件状态：" 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>
                <el-form-item label="事件类型：">
                    <el-radio-group v-model="form.transferData" class="levelOfRisk">
                        <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index">
                            <span class="levelOfRisk-type">{{ item.name }}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </el-form>
        <el-scrollbar style="height:286.22px">
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span></p>
                </div>
            </div>
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span></p>
                </div>
            </div>
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span></p>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script>
import { LayerEntEmer } from '../../../../../conf/layers/LayerEntEmer'

export default {
  name: 'EventQuery',
  data () {
    return {
      list: [],
      items: [
        { name: '金陵石化' },
        { name: '南京化学' }
      ],
      subItems: LayerEntEmer.layers,
      form: {
        pipelineType: '',
        dataType: '',
        keyword: '',
        transferData: 1,
        levelOfRisk: [
          {
            name: '真实事件',
            value: 1
          },
          {
            name: '模拟演练',
            value: 2
          }
        ]
      }
    }
  },
  methods: {
    handleDataType () {
      console.log('ite')
    },
    handlePipelineType () {
      console.log('数据查询')
    },
    handleSearch () {
      console.log('item')
    }
  }
}
</script>

<style scoped>

</style>

 src/components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup.vue

New file
@@ -0,0 +1,222 @@
<template>
    <div class="report-popup map-background" v-drag>
        <div class="public-bounced-title panel-title">
            <span>上报事件</span>
            <i class="el-icon-circle-close" @click="closePopup"></i>
        </div>
        <div class="report-content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form">
                <el-form-item label="事件名称" prop="nameEvent">
                    <el-input v-model="ruleForm.nameEvent" class="report-input"></el-input>
                </el-form-item>
                <el-form-item label="事件类型" prop="eventType">
                    <el-radio-group v-model="ruleForm.eventType">
                        <el-radio v-for="(item,index) in ruleForm.eventTypeList" :label="item.value" :key="index">
                            <span>{{ item.name }}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="事件等级" prop="eventLevel">
                    <el-radio-group v-model="ruleForm.eventLevel">
                        <el-radio v-for="(item,index) in ruleForm.eventLevelList" :label="item.value" :key="index">
                            <span>{{ item.name }}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="事发单位" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                                <el-option label="单位位置1" value="shanghai"></el-option>
                                <el-option label="单位位置2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="事发时间" prop="region" class="search-panel-item">
                            <el-date-picker
                                    v-model="ruleForm.atTime"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="事发位置" prop="region" class="search-panel-item">
                            <el-input v-model="ruleForm.name" class="report-input"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="位置描述" prop="name">
                            <el-input v-model="ruleForm.name" class="report-input"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="消息推送" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio label="短信推送"></el-radio>
                        <el-radio label="手机应用推送"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="事件描述" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="接收人员" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import '@utils/dragBoxes'

export default {
  name: 'ReportPopup',
  data () {
    return {
      flag: false,
      ruleForm: {
        nameEvent: '',
        eventType: '',
        eventTypeList: [
          {
            name: '待补充',
            value: 1
          },
          {
            name: '待补充',
            value: 2
          },
          {
            name: '待补充',
            value: 3
          }
        ],
        eventLevel: '',
        eventLevelList: [
          {
            name: '待补充',
            value: 1
          },
          {
            name: '待补充',
            value: 2
          },
          {
            name: '待补充',
            value: 3
          }
        ],
        atTime: ''
      },
      fileList: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur'
          }
        ],
        region: [
          {
            required: true,
            message: '请选择活动区域',
            trigger: 'change'
          }
        ],
        resource: [
          {
            required: true,
            message: '请选择活动资源',
            trigger: 'change'
          }
        ],
        desc: [
          {
            required: true,
            message: '请填写活动形式',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    closePopup () {
      this.flag = false
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
    /deep/ .el-form-item__label {
        color: @color;
    }

    /deep/ .el-radio__label {
        color: @color;
    }

    .report-popup {
        width: 35%;
        z-index: 999;
        position: absolute;
        top: 35%;
        left: 20%;
    }
</style>

 src/components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ResourcesQuery.vue

New file
@@ -0,0 +1,116 @@
<template>
    <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.eventName" @change="handlePipelineType"
                           :popper-class="'select-down'">
                    <el-option
                            v-for="item in form.eventNameList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="资源环境：" size="mini" class="search-panel-item">
                <el-select style="width: 100%" v-model="form.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>
        <el-scrollbar style="height:286.22px">
            <div class="environmental-risk-list">
                <!-- v-for="(item,index) in searchDataDisplay" :key="index" @click="setBounced(item)"-->
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span></p>
                </div>
            </div>
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span></p>
                </div>
            </div>
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span></p>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script>
import { LayerEntEmer } from '../../../../../conf/layers/LayerEntEmer'

export default {
  name: 'ResourcesQuery',
  data () {
    return {
      form: {
        eventName: '',
        pipelineType: '资源类型',
        dataType: '',
        keyword: '',
        eventNameList: [
          { name: '金陵石化' },
          { name: '南京化学' }
        ]
      },
      items: [LayerEntEmer],
      subItems: LayerEntEmer.layers,
      searchDataDisplay: []
    }
  },
  methods: {
    handlePipelineType () {
      console.log('item')
    },
    handleDataType () {
      console.log('item')
    },
    handleSearch () {
      console.log('数据查询')
    },
    setBounced (item) {
      console.log(item)
    }
  }
}
</script>

<style scoped>

</style>

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

@@ -166,7 +166,9 @@

      myChart: null,
      options: [],
      echartsList: [],
      myChartShow: false,

      flowPipeLine: null,

      // 用于判断
@@ -205,9 +207,7 @@
      lxTableDataResult: [],

      // 横断面 管段查询结果 的table表格数据
      tableData: [],

      echartsList: []
      tableData: []

    }
  },
@@ -222,7 +222,8 @@
  methods: {
    // tab切换
    handleClick (tab, event) {
      // console.log(tab, event)
      console.log(event)
      // console.log(tab)
      this.clearLinkPipe()
      this.clearLX()
      this.linkClear()
@@ -298,7 +299,6 @@

    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      // console.log(e)
      // console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
@@ -379,6 +379,7 @@
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        // 进行判断
        // if (this.tableDataLinkStart === [] && this.tableDataLinkEnd === []) {
        this.currentLinkIsTrue = '不连通'
        // }

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -73,12 +73,6 @@
      ],
      // 数据搜索之后，存储数据的
      searchDataDisplay: [],
      instance: null,
      intervals: [],
      layer: window.map,
      L: window.L,
      times: 5,
      colors: ['#98FB98', '#ff0000'],
      solidWasteTypeOptions: [{
        value: '1',
        label: '区域',
@@ -163,7 +157,7 @@
    },
    // 数据展示,点击进行弹框及点的展示
    setBounced (val) {
      console.log(val)
      // console.log(val)
      const pos = [val.Latitude, val.Longitude]
      window.map.flyTo(pos, 15)
      window.$layer.open({

 src/components/table/Public.vue

@@ -12,8 +12,8 @@

<script>

// 引入拖拽
import '@/utils/dragBoxes'
// 弹框头部拖拽
// import '@/utils/dragBoxes'

export default {
  name: 'Public'

 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/MapConfig.js

@@ -22,10 +22,10 @@
  minZoom: 3,
  maxZoom: 17,
  // center: [26, 104],
  center: [34.828558921813965, 117.41676807403564],
  zoom: 5,
  // center: [32.25853085517883, 118.78592848777771],
  // zoom: 15,
  // center: [34.828558921813965, 117.41676807403564],
  // zoom: 5,
  center: [32.25853085517883, 118.78592848777771],
  zoom: 15,
  worldCopyJump: true,
  inertia: true,
  zoomControl: false,

 src/conf/Topic.js

@@ -8,7 +8,8 @@
  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')
  sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue'),
  ReportSearchL: () => import('@components/panel/topicSearch/ReportSearch.vue')
}

export const TopicList = [{
@@ -60,7 +61,14 @@
  isShow: true,
  icon: 'iconguanxianxuncha',
  comp: ''
} /* {
}, {
  name: '企业应急',
  id: 8,
  checked: false,
  isShow: true,
  icon: 'iconguanxianxuncha',
  comp: ''
}/* {
  name: '管道变更',
  id: 8,
  checked: false,

 src/conf/layers/LayerEntEmer.js

New file
@@ -0,0 +1,68 @@
/**
 * 企业预警
 */
import { LayerHbss } from './LayerHbss'
import { LayerFsss } from './LayerFsss'

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

export const LayerEntEmer = {
  code: 'reportEntemeage',
  name: '企业预警',
  checked: false,
  type: 0,
  childLayer: [LayerFsss, LayerHbss],
  layers: [
    {
      code: 'rainline',
      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>',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
      styles: {
        COLOR: '#0070ff',
        FILL_COLOR: '#0070ff'
      }
    },
    {
      code: 'accidentline',
      name: '应急物资在',
      sname: '事故水',
      checked: false,
      // wmsLayers: 'sewer:pipeline_accident',
      type: 0,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=事故水'
    },
    {
      code: 'oilline',
      name: '应急车辆',
      sname: '含油污水',
      checked: false,
      type: 0,
      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=\'含油污水\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
      }
    },
    {
      code: 'saltline',
      name: '应急队伍',
      sname: '含盐污水',
      checked: false,
      type: 0,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=含盐污水'
    }
  ]
}

 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/MapTemplate.vue

@@ -1,23 +1,24 @@
<template>
  <div class="full-screen">
    <!--<popup ref="popup" @callPopup="callPopup"></popup>-->
    <div id="map" ref="rootmap">
    <div class="full-screen">
        <!--<popup ref="popup" @callPopup="callPopup"></popup>-->
        <div id="map" ref="rootmap">
        </div>
        <sgis-layer-controller></sgis-layer-controller>
        <monitor-panel></monitor-panel>
        <!--        <top-enterprise-panel></top-enterprise-panel>-->
        <tool-box-panel ref="toolBox"></tool-box-panel>
        <!--    <menu-special></menu-special>-->
        <legend-panel></legend-panel>
        <!--    <summary-sheets></summary-sheets>-->
        <SummarySheet></SummarySheet>
        <!-- <enterprise></enterprise> -->
        <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
        <!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
        <!--    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>-->
        <!--    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>-->
        <PublicBounced ref="PublicBounced"></PublicBounced>
        <!--    <ReportPopup></ReportPopup>-->
    </div>
    <sgis-layer-controller></sgis-layer-controller>
    <monitor-panel></monitor-panel>
    <!--        <top-enterprise-panel></top-enterprise-panel>-->
    <tool-box-panel ref="toolBox"></tool-box-panel>
    <!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
<!--    <summary-sheets></summary-sheets>-->
    <SummarySheet></SummarySheet>
    <!-- <enterprise></enterprise> -->
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
    <!--    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>-->
    <!--    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>-->
    <PublicBounced ref="PublicBounced"></PublicBounced>
  </div>
</template>

<script>
@@ -37,6 +38,7 @@
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
import EventHandler from '../components/LayerController/event/EventHandler'
// import ReportPopup from '../components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup'

export default {
  name: 'MapTemplate',
@@ -51,6 +53,7 @@
    // summarySheets,
    SummarySheet,
    PublicBounced
    // ReportPopup
  },
  data () {
    return {
@@ -121,59 +124,59 @@
</script>

<style lang="less">
.flue-gas {
  position: fixed;
  top: 88px;
  left: 180px;
  z-index: 500;
}
    .flue-gas {
        position: fixed;
        top: 88px;
        left: 180px;
        z-index: 500;
    }

.solid-waste {
  position: absolute;
  top: 88px;
  left: 88px;
  z-index: 999;
}
    .solid-waste {
        position: absolute;
        top: 88px;
        left: 88px;
        z-index: 999;
    }

.full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
    .full-screen {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;

  #map {
    height: 100%;
    width: 100%;
  }
        #map {
            height: 100%;
            width: 100%;
        }

  .barline {
    //width: 100%;
    //height: 1px;
    //background-color: #0661AE;
    border-top: 1px solid #0661AE;
  }
        .barline {
            //width: 100%;
            //height: 1px;
            //background-color: #0661AE;
            border-top: 1px solid #0661AE;
        }

  #map-btn {
    position: fixed;
    top: 20px;
    left: 100px;
    z-index: 9999;
  }
        #map-btn {
            position: fixed;
            top: 20px;
            left: 100px;
            z-index: 9999;
        }

  .leaflet-custom-icon {
    background: white;
  }
        .leaflet-custom-icon {
            background: white;
        }

  .leaflet-marker-icon {
    background: none;
  }
        .leaflet-marker-icon {
            background: none;
        }

  #migic {
    width: 48px;
    height: 48px;
    margin: -18px -20px;
    z-index: 999;
  }
}
        #migic {
            width: 48px;
            height: 48px;
            margin: -18px -20px;
            z-index: 999;
        }
    }
</style>

 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"