弹窗信息补全

徐旺旺

2021-05-18 755baaf11dd4e5c8eb7a5c2aa0ea23732fe47c85

弹窗信息补全

 src/components/helpers/LocateHelper.js

@@ -1,6 +1,33 @@
import { pulseEffect, reversePolyLine } from '../../utils/utils'
import Popup from '@views/popup/Popup'
import { LAYERPROPS, LAYERS } from '../../conf/Constants'

/**
 * 整合定位、高亮、弹窗
 * @param feature  geojson
 * @param config   图层的config
 */
export const locate = function (feature, config, filter) {
  fitBounds(feature)
  highlight(feature, config)
  setTimeout(() => {
    const centerPoint = getCenterPoint(feature)
    const params = { LAYERS: config.layerGroup || config.typeName, QUERY_LAYERS: config.layerGroup || config.typeName }
    const filters = []
    if (config.filter) {
      filters[filters.length] = config.filter
    }
    if (filter) {
      filters[filters.length] = filter
    }
    if (filters.length > 0) {
      params.CQL_FILTER = filters.join(' AND ')
    }
    window.mapManager.loadWfsDatas(centerPoint, params).then((res) => {
      openPropsPopup(centerPoint, res.features)
    })
  }, 1000)
}
/**
 * 根据传的 feature对象定位，
 * @param code
@@ -23,7 +50,7 @@
  }
}

export const highlight = function (feature, config) {
export const highlight = function (feature, icon) {
  const L = window.L
  const type = feature.geometry.type
  window.mapManager.clearHighlight()
@@ -42,26 +69,30 @@
    let point = feature.geometry.coordinates
    point = [point[1], point[0]]

    if (config) {
    if (icon) {
      L.marker(point, {
        icon: L.icon({
          iconUrl: '/assets/images/map/' + config.icon,
          iconUrl: '/assets/images/map/' + icon,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      }).addTo(highlightLayer)
    }
    pulseEffect(point)
    const features = window.mapManager.loadWfsDatas(point)
    openPopup(point, features)
  } else if (type === 'LineString') {
    L.polyline(reversePolyLine(feature), { color: 'red' }).addTo(highlightLayer)
  }
}

export const openPopup = function (xy, features) {
/**
 * 弹出属性列表展示窗口
 * @param xy      弹出窗口跟随要素的经纬度
 * @param layer   查询指定的图层。不指定时，默认为勾选的图层
 */
export const openPropsPopup = function (xy, features) {
  const lt = window.map.latLngToContainerPoint(xy)
  const datas = popupDatas(features)
  console.log(datas)
  if (datas.length > 0) {
    window.$layer.open({
      content: {
@@ -77,6 +108,31 @@
  }
}

export const getCenterPoint = function (feature) {
  const type = feature.geometry.type
  var point = []
  switch (type) {
    case 'Point':
      point = feature.geometry.coordinates
      break
    case 'MultiLineString':
      var coordinates = feature.geometry.coordinates
      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
  }
  if (point.length > 2) {
    point.splice(2, 1)
  }
  return point.reverse()
}

const popupDatas = function (features) {
  const datas = []
  if (features) {
@@ -88,6 +144,9 @@

      const propValues = LAYERPROPS[ids[0]]
      const contents = {}
      if (!propValues) {
        continue
      }
      for (const k in properties) {
        if (propValues[k]) {
          contents[propValues[k]] = properties[k]

 src/components/helpers/MapManager.js

@@ -1,6 +1,6 @@
import AjaxUtils from '../../utils/AjaxUtils'
import { WMS_URL } from '../../conf/Constants'
import { openPopup } from './LocateHelper'
import { highlight, openPropsPopup } from './LocateHelper'

class MapManager {
  constructor () {
@@ -27,27 +27,33 @@
    this.map.on('click', (e) => {
      // console.log(e)
      this.clearHighlight()
      this.loadWfsDatas(e.latlng)
      this.loadWfsDatas(e.latlng).then((res) => {
        console.log(res)
        highlight(res.features)
        openPropsPopup(e.latlng, res.features)
      })
    })
  }

  loadWfsDatas (latlng) {
    const size = this.map.getSize()
    var point = this.map.latLngToContainerPoint(latlng, this.map.getZoom())
    const wmsLayerService = window.layerFactory.wmsLayerService
    const layers = wmsLayerService.wmsLayerList.getLayers()
    // const filters = wmsLayerService.wmsLayerList.getFilters()
    const params = Object.assign({
      LAYERS: layers,
      QUERY_LAYERS: layers,
      WIDTH: size.x,
      HEIGHT: size.y,
      X: Math.round(point.x),
      Y: Math.round(point.y),
      BBOX: this.map.getBounds().toBBoxString()
    }, this.defaultWmsParams)
    AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => {
      openPopup(latlng, res.data.features)
  loadWfsDatas (latlng, params) {
    return new Promise((resolve, reject) => {
      const size = this.map.getSize()
      var point = this.map.latLngToContainerPoint(latlng, this.map.getZoom())
      const wmsLayerService = window.layerFactory.wmsLayerService
      const layers = wmsLayerService.wmsLayerList.getLayers()
      // const filters = wmsLayerService.wmsLayerList.getFilters()
      const wmsParams = Object.assign({
        LAYERS: layers,
        QUERY_LAYERS: layers,
        WIDTH: size.x,
        HEIGHT: size.y,
        X: Math.round(point.x),
        Y: Math.round(point.y),
        BBOX: this.map.getBounds().toBBoxString()
      }, this.defaultWmsParams, params)
      AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
        resolve(res.data)
      })
    })
  }


 src/components/panel/topicSearch/SewersSearch.vue

@@ -83,7 +83,7 @@
// 引入组件内容
import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis'
import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory'
import { fitBounds, highlight } from '../../helpers/LocateHelper'
import { fitBounds, highlight, locate } from '../../helpers/LocateHelper'

export default {
  name: 'SewersSearch',
@@ -162,12 +162,11 @@
      }
    },
    handleLocation (val, index) {
      console.log(this.form.dataType)
      // console.log(val)
      this.activeNum = index
      // layer && layer.openPopup()
      fitBounds(val, this.form.dataType.code)
      highlight(val, this.form.dataType)
      const config = this.form.dataType
      locate(val, config)
    },
    btnAffiliatedFacilities (val, index) {
      this.activeNum = index

 src/conf/Constants.js

@@ -40,14 +40,14 @@
  pipeline: '管线',
  manhole: '窨井',
  valve: '阀门',
  pipegallery: '管廊（带）',
  piperack: '管架（墩）',
  pipegallery: '管廊(带)',
  piperack: '管架(墩)',
  tee: '三通',
  fourlink: '四通',
  elbow: '弯头',
  raingate: '雨篦子',
  firedike: '防火堤',
  collectingbasin: '集水池（罐）',
  collectingbasin: '集水池(罐)',
  dischargeport: '排放口',
  overflowweir: '溢流堰',
  oilseparator: '隔油池',
@@ -64,18 +64,18 @@
  pipenetwork: {
    // 管网
    name: '名称',
    LINENUMTYPE: '管线类型',
    PIPENAME: '管线名称',
    MEDIUMTYPE: '输送介质',
    LENGTH: '长度(m)',
    STARTPOSNAME: '起点位置名称',
    ENDPOSNAME: '终点位置名称',
    BURIEDTIME: '埋设时间',
    COATINGMATERIAL: '防腐状况',
    INSERVICETIME: '投产时间',
    UNITNAME: '所属单位名称',
    ORGNAME: '所属企业名称',
    OPERATIONALSTATUS: '运行状态'
    linenumtype: '管线类型',
    pipename: '管线名称',
    mediumtype: '输送介质',
    length: '长度(m)',
    startposname: '起点位置名称',
    endposname: '终点位置名称',
    buriedtime: '埋设时间',
    coatingmaterial: '防腐状况',
    inservicetime: '投产时间',
    unitname: '所属单位名称',
    orgname: '所属企业名称',
    operationalstatus: '运行状态'
  },
  // 管线
  pipeline: {
@@ -96,74 +96,191 @@
  },
  // 窨井
  manhole: {
    wellid: '井编号',
    wellname: '井名称',
    type: '类型',
    wellmaterial: '井盖材质',
    spesize: '井盖直径(mm)',
    welldeepth: '窨井深度(m)',
    wellneckheight: '井脖高度(cm)',
    havesafetynet: '是否有安全网',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // 阀门
  valve: {
    pointnumber: '测点编号',
    devicecode: '阀门编码',
    devicename: '阀门名称',
    valvetype: '阀门类型',
    manufmodel: '制造型号',
    assetmanufact: '资产制造商',
    startdate: '投用日期',
    factorytime: '出厂时间',
    nominaldiamet: '公称直径(mm)',
    nominalpress: '公称压力(MPa)',
    operatingtype: '控制方式',
    executagencyf: '执行机构形式',
    datasource: '数据来源',
    valveplatem: '阀板(芯)材质',
    installunit: '安装单位',
    sealform: '密封形式',
    constprange: '定压范围(MPa)',
    valvebodytype: '阀体形式',
    spoolform: '阀芯形式',
    nominald: '公称通径(mm)',
    leakaglevel: '泄漏等级(级)',
    circulcap: '流通能力(m3/h)',
    workpress: '工作压力(MPa)',
    worktemp: '工作温度(℃)',
    flowcharact: '流量特性',
    spooldiamet: '阀芯直径(mm)',
    valvegroupname: '所属阀组',
    valvegroupcode: '阀组编号',
    operationalstatus: '运行状态'
  },
  // 管廊（带）
  pipegallery: {
    pipecorridname: '管廊(带)名称',
    pipecorridcode: '管廊(带)编码',
    pipename: '所属管线名称',
    pipecorridsname: '起点管廊(带)名称',
    pipecorridename: '终点管廊(带)名称',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // 管架（墩）
  piperack: {
    piperackcode: '管架(墩)编码',
    piperackname: '管架(墩)名称',
    pipename: '所属管线名称',
    piperacktype: '类型',
    piperackst: '管架(墩）结构类型',
    piperackst: '管架(墩)结构类型',
    longitudinalpiperack: '是否有纵向架',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // 三通
  tee: {
    teetype: '三通类型',
    code: '三通编码',
    branchdiamet: '支线直径(mm)',
    branchthickness: '支线壁厚(mm)',
    exportdiamet: '出口直径(mm)',
    exportthickness: '出口壁厚(mm)',
    exportconnectm: '出口连接方式',
    entrycontype: '入口连接方式',
    entrdiamet: '入口直径',
    entrthick: '入口壁厚',
    teem: '三通材料',
    puttingindate: '投用日期',
    manufactdate: '生产日期',
    pressuregrade: '压力等级(mpa)',
    constructunit: '施工单位',
    supervisionunit: '监理单位',
    detectunit: '检测单位',
    manufacturer: '生产厂商',
    branchconntype: '支管连接类型',
    installdate: '安装日期',
    strengthgrade: '强度等级',
    operationalstatus: '运行状态'

  },
  // 四通
  fourlink: {
    code: '四通编码',
    fourtype: '四通类型',
    exportcontype: '出口连接方式',
    entrycontype: '入口连接方式',
    entrydiamet: '入口直径(mm)',
    entrythick: '入口壁厚(mm)',
    branchdiamet1: '支线1直径(mm)',
    branchthickness1: '支线1壁厚(mm)',
    branchdiamet2: '支线2直径(mm)',
    branchthickness2: '支线2壁厚(mm)',
    exportdiamet: '出口直径(mm)',
    exportthickness: '出口壁厚(mm)',
    exportcontype: '出口连接方式',
    fourm: '四通材料',
    appdate: '投用日期',
    manufactdate: '生产日期',
    pressuregrade: '压力等级(mpa)',
    constructunit: '施工单位',
    supervisionunit: '监理单位',
    detectunit: '检测单位',
    manufacturer: '生产厂商',
    branchconntype1: '支线1连接方式',
    branchconntype2: '支线2连接方式',
    installdate: '安装日期',
    operationalstatus: '运行状态'
  },
  // 弯头
  elbow: {
    pointnumber: '测点编号',
    code: '弯头编码',
    pipename: '所属管线名称',
    pipecode: '所属管线编码',
    bendangle: '弯头角度',
    elbowtype: '弯头类型',
    elbowmaterial: '弯头材料',
    anticorros: '防腐材料',
    entryconntype: '入口连接方式',
    outletconntype: '出口连接方式',
    entrdiameter: '入口直径(mm)',
    entrwallthick: '入口壁厚(mm)',
    exitdiameter: '出口直径(mm)',
    exitwallthick: '出口壁厚(mm)',
    classes: '压力等级(mpa)',
    unitname: '所属单位名称',
    unitcode: '所属单位代码',
    productdate: '生产日期',
    installationdate: '安装日期',
    puttingindate: '投用日期',
    constructunit: '施工单位',
    supervisionunit: '监理单位',
    detectionunit: '检测单位',
    elbowcurvrad: '曲率半径(d)',
    manufacturer: '生产厂商',
    bendlength: '弯头长度',
    benddirection: '弯头方向',
    pipewalldiameter: '管道外壁直径(mm)',
    strengthgrade: '强度等级',
    curvelength: '曲线长',
    tangentlength: '切线长',
    vectordistance: '外矢距',
    mintemperature: '最低设计温度',
    maxtemperature: '最高设计温度',
    operationalstatus: '运行状态'
  },
  // 雨篦子
  raingate: {
    raingrateid: '雨篦子编号',
    rgshape: '雨篦子形状',
    rgmaterial: '雨篦子材质',
    spesize: '雨篦子尺寸(cm)',
    rgdeepth: '雨篦子厚度(mm)',
    operationalstatus: '运行状态'
  },
  // 防火堤
  firedike: {
    name: '名称',
    code: '编码',
    ownertanks: '所属罐区',
    tankscode: '罐区编号',
    operationalstatus: '运行状态'
  },
  // 集水池（罐）
  collectingbasin: {
    companyname: '名称',
    code: '编码',
    mediumtype: '介质',
    size: '尺寸',
    volume: '容积',
    ownersite: '所属站场',
    startdate: '投用日期',
    operationalstatus: '运行状态'
  },
  // 排放口
  dischargeport: {
    name: '名称',
    code: '编码',
    mediumtype: '介质',
    pfktype: '排放口类型',
    level: '级别',
@@ -173,41 +290,98 @@

  // 溢流堰
  overflowweir: {
    name: '名称',
    code: '编码',
    mediumtype: '防溢介质',
    material: '材质',
    height: '高(m)',
    length: '长度(m)',
    operationalstatus: '运行状态'
  },
  // 隔油池
  oilseparator: {
    poolname: '名称',
    no: '编码',
    size: '尺寸',
    volume: '容积',
    operationalstatus: '运行状态'
  },
  // 水体
  pointhydrology: {
    name: '名称',
    telphonenumber: '联系方式',
    velocityaverage: '年平均流速(m/s)',
    erosiondepthavg: '年平均冲刷深度',
    velocitymax: '最大速度(m/s)',
    velocitymin: '最小速度(m/s)',
    highestwaterlevel: '最高水位（m）',
    minwaterlevel: '最低水位（m）',
    maximumflux: '最大流量',
    erosiondepthmax: '最大冲刷深度',
    flowdirection: '河流流向',
    length: '长度（m）',
    hydrotype: '水系类型',
    drinkingresourceind: '是否是饮用水源',
    seasonalriverind: '是否是季节性河流',
    highriskmonth: '高风险月份',
    reservoirlocation: '水库位置',
    coverdepth: '管道埋深',
    gbcode: '国标码',
    operationalstatus: '运行状态'
  },
  // 自然保护区
  pointpreservationzone: {
    datasource: '数据来源'
    name: '名称',
    datasource: '数据来源',
    type: '保护区类型',
    structureoridsitearea: '占地面积',
    preservationobject: '主要保护对象',
    adminzonename: '行政隶属'
  },
  // 医院
  hospital: {
    companyname: '医院名称',
    telephone: '联系电话',
    hospitalleaval: '医院资质等级',
    maxinjurednumber: '可容纳伤员',
    sickbednumber: '病床数量',
    doctornumber: '医生数量',
    nursenumber: '护士数量',
    ambulancenumber: '救护车数量',
    subtypecd: '医院类型',
    address: '单位地址',
    hyperbaricoxygencabin: '高压氧舱',
    distance: '距离',
    datasource: '数据来源'
  },
  // 社会专业应急救援队伍
  emergencyres: {
    name: '名称',
    numberteam: '救援人数',
    rescueobject: '主要救援对象',
    resperson: '负责人',
    telephone: '联系电话',
    datasource: '数据来源'
  },
  // 应急物资
  emergencyesources: {
    resourcesname: '物资名称',
    resourcesnumber: '物资数量',
    ownedstatus: '是否自有物资',
    sourceschargestandard: '物资收费标准',
    resperson: '负责人',
    telephone: '联系电话',
    datasource: '数据来源'
  },
  // 消防单位
  firefightingunit: {
    companyname: '消防单位名称',
    pumpernumber: '消防车数量',
    contacttelephone: '联系电话',
    address: '单位地址',
    supportradius: '服务半径',
    ficroute: '交通路线',
    distance: '距离',
    datasource: '数据来源'
  }
}

 src/utils/utils.js

@@ -27,7 +27,7 @@
 * 脉冲效果
 */
export function pulseEffect (xy) {
  let times = 50
  let times = 1000
  const colors = ['#00f100', '#ff0000']
  // 插件 效果实现
  var pulsingIcon = window.L.icon.pulse({