企业应急-事件上报-定位修改

陈泽平

2021-05-29 c42c548a635e7086f6cffc132625c5c7902b63b5

企业应急-事件上报-定位修改

 src/components/base-page/enterprise-emergency/discard/PipelineFile.vue

File was renamed from src/components/base-page/enterprise-emergency/PipelineFile.vue
@@ -6,7 +6,7 @@
                    <el-form-item label="管线名称">
                        <el-input v-model="form.pipeName">
                            <el-button style="padding-right:10px;" slot="suffix" type="text">
                                <img src="../../../../public/assets/images/map/emergency/search.png" alt="">
                                <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
                            </el-button>
                        </el-input>
                    </el-form-item>
@@ -15,7 +15,7 @@
                    <el-form-item label="管段编码">
                        <el-input v-model="form.pipeCode">
                            <el-button style="padding-right:10px;" slot="suffix" type="text">
                                <img src="../../../../public/assets/images/map/emergency/search.png" alt="">
                                <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
                            </el-button>
                        </el-input>
                    </el-form-item>
@@ -45,9 +45,9 @@
</template>

<script>
import eventBus from '../../../eventBus'
import foldPng from '../../../../public/assets/images/map/emergency/fold.png'
import filePng from '../../../../public/assets/images/map/emergency/file.png'
import eventBus from '../../../../eventBus'
import foldPng from '../../../../../public/assets/images/map/emergency/fold.png'
import filePng from '../../../../../public/assets/images/map/emergency/file.png'

export default {
  name: 'PipelineFile',

 src/components/base-page/enterprise-emergency/discard/PositionChange.vue

File was renamed from src/components/base-page/enterprise-emergency/PositionChange.vue
@@ -99,8 +99,7 @@
</template>

<script>
import eventBus from '../../../eventBus'

import eventBus from '../../../../eventBus'
export default {
  name: 'PositionChange',
  props: ['location'],

 src/components/base-page/enterprise-emergency/discard/ReportIncident.vue

File was renamed from src/components/base-page/enterprise-emergency/ReportIncident.vue
@@ -70,7 +70,7 @@
                                    <!--                                       @click="locationInfo"></el-button>-->
                                    <el-button style="padding-right:10px;" slot="suffix" type="text"
                                               @click="locationInfo">
                                        <img src="../../../../public/assets/images/map/loc.png" alt="">
                                        <img src="../../../../../public/assets/images/map/loc.png" alt="">
                                    </el-button>
                                </el-input>
                            </el-form-item>
@@ -148,8 +148,8 @@
    </div>
</template>
<script>
import '../../../utils/dragBoxes'
import eventBus from '../../../eventBus'
import '../../../../utils/dragBoxes'
import eventBus from '../../../../eventBus'
// 引入组件
import PositionChange from './PositionChange'
import PipelineFile from './PipelineFile'

 src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue

@@ -139,7 +139,7 @@
                :modal="false"
                v-dialogDrag
        >
            <ReportLocation @locationClick="getlocaltionClick"></ReportLocation>
            <ReportLocation></ReportLocation>
        </el-dialog>
    </div>
</template>
@@ -336,12 +336,12 @@
    })
  },
  methods: {
    // 接收子组件传递的数据
    getlocaltionClick (val) {
      // console.log(val)
      this.ruleForm.positionOf = val.latPos + '-' + val.longPos
      this.dialogLocation = !this.dialogLocation
    },
    // // 接收子组件传递的数据
    // getlocaltionClick (val) {
    //   // console.log(val)
    //   this.ruleForm.positionOf = val.latPos + '-' + val.longPos
    //   this.dialogLocation = !this.dialogLocation
    // },
    // 消息推送 选择推送的对象
    infoChange () {
      if (this.ruleForm.beingPushed.indexOf('短信推送') > -1 || this.ruleForm.beingPushed.indexOf('手机应用推送') > -1) {

 src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue

@@ -8,133 +8,34 @@
                <ReportLocationSection></ReportLocationSection>
            </el-tab-pane>
            <el-tab-pane label="经纬度定位" name="third">
                <el-row class="place-box">
                    <div class="place-left">
                        <el-form :model="LongLatPos" label-width="90px">
                            <el-form-item label="经度:">
                                <el-input v-model="LongLatPos.longPos"></el-input>
                            </el-form-item>
                            <el-form-item label="纬度:">
                                <el-input v-model="LongLatPos.latPos"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="place-right">
                        <el-button type="primary" size="small" @click="mapPoints">点击定位</el-button>
                        <el-button type="primary" size="small" @click="dataPoints">数据定位</el-button>
                    </div>
                </el-row>
                <div class="place-bottom" style="text-align: center;margin: 5px">
                    <el-button type="primary" @click="confirm">确认</el-button>
                </div>
                <ReportLocationPoint></ReportLocationPoint>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
// import eventBus from '../../../../eventBus'

// 管段定位组件
import ReportLocationSection from './ReportLocationSection'
import ReportLocationSearch from './ReportLocationSearch'

import { pulseEffect } from '../../../../utils/utils'

import iconUrl from '../../../../../public/assets/images/map/loc.png'
import ReportLocationPoint from './ReportLocationPoint'

export default {
  name: 'ReportLocation',
  components: {
    ReportLocationSearch,
    ReportLocationSection
    ReportLocationSection,
    ReportLocationPoint
  },
  data () {
    return {
      // active tab切换
      activeName: 'first',
      // 经纬度定位
      LongLatPos: {
        longPos: '',
        latPos: ''
      }
    }
  },
  methods: {
    // 点击定位
    mapPoints () {
      window.map.on('click', (e) => {
        this.LongLatPos.longPos = parseFloat(e.latlng.lng).toFixed(6)
        this.LongLatPos.latPos = parseFloat(e.latlng.lat).toFixed(6)
        const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
        // console.log(as)
        window.map.setView(as, 17)
        pulseEffect(as)
        const marker = window.L.marker(as, {
          icon: window.L.icon({
            iconUrl: iconUrl,
            iconSize: [30, 30],
            iconAnchor: [15, 15]
          })
        })
        window.map.addLayer(marker)
        window.map.off('click')
      })
    },
    // 通过数据定位
    dataPoints () {
      const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
      // console.log(as)
      window.map.setView(as, 17)
      pulseEffect(as)
      const marker = window.L.marker(as, {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      window.map.addLayer(marker)
      this.LongLatPos.latPos = ''
      this.LongLatPos.longPos = ''
    },
    // 点击确认按钮事件
    confirm () {
      // 通过子组件向父组件传递数据
      this.$emit('locationClick', this.LongLatPos)
      this.clickLocation = ''
      this.LongLatPos.longPos = ''
      this.LongLatPos.latPos = ''
      activeName: 'first'
    }
  }
}
</script>

<style lang="less" scoped>
    .place-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .place {
        text-align: center;

        .place-top {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .place-right {
                .el-button {
                    margin: 15px;
                }
            }
        }

        .place-bottom {
            .el-button {
                /*margin: 15px;*/
            }
        }
    }
</style>

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue

New file
@@ -0,0 +1,111 @@
<template>
    <div class="location-lon-and-lat">
        <el-row class="place-box">
            <div class="place-left">
                <el-form :model="LongLatPos" label-width="90px">
                    <el-form-item label="经度:">
                        <el-input v-model="LongLatPos.longPos"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度:">
                        <el-input v-model="LongLatPos.latPos"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="place-right">
                <el-button type="primary" size="small" @click="mapPoints">点击定位</el-button>
                <el-button type="primary" size="small" @click="dataPoints">数据定位</el-button>
            </div>
        </el-row>
        <div class="place-bottom" style="text-align: right;margin: 5px">
            <el-button type="primary" @click="confirm">确认</el-button>
        </div>
    </div>
</template>

<script>
import { pulseEffect } from '../../../../utils/utils'
import iconUrl from '../../../../../public/assets/images/map/loc.png'
import eventBus from '../../../../eventBus'

export default {
  name: 'ReportLocationPoint',
  data () {
    return {
      // 经纬度定位
      LongLatPos: {
        longPos: '',
        latPos: ''
      }
    }
  },
  methods: {
    // 点击定位
    mapPoints () {
      window.map.on('click', (e) => {
        this.LongLatPos.longPos = parseFloat(e.latlng.lng).toFixed(6)
        this.LongLatPos.latPos = parseFloat(e.latlng.lat).toFixed(6)
        const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
        // console.log(as)
        window.map.setView(as, 17)
        pulseEffect(as)
        const marker = window.L.marker(as, {
          icon: window.L.icon({
            iconUrl: iconUrl,
            iconSize: [30, 30],
            iconAnchor: [15, 15]
          })
        })
        window.map.addLayer(marker)
        window.map.off('click')
      })
    },
    // 通过数据定位
    dataPoints () {
      const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
      // console.log(as)
      window.map.setView(as, 17)
      pulseEffect(as)
      const marker = window.L.marker(as, {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      window.map.addLayer(marker)
      this.LongLatPos.latPos = ''
      this.LongLatPos.longPos = ''
    },
    // 点击确认按钮事件
    confirm () {
      eventBus.$emit('location-setChange', true)
      this.LongLatPos.longPos = ''
      this.LongLatPos.latPos = ''
    }
  }
}
</script>

<style lang="less" scoped>
    .place-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .place {
        text-align: center;

        .place-top {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .place-right {
                .el-button {
                    margin: 15px;
                }
            }
        }
    }
</style>

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue

@@ -18,8 +18,8 @@
                <!--            </el-pagination>-->
            </el-row>
        </el-scrollbar>
        <el-row>
            <el-button type="primary" @click="confirm" style="text-align: right">确认</el-button>
        <el-row style="text-align: right">
            <el-button type="primary" @click="confirm">确认</el-button>
        </el-row>
    </div>
</template>
@@ -41,7 +41,7 @@
    }
  },
  methods: {
    // 获得焦点 进行定位
    // 搜索定位
    focusLocation () {
      // console.log(this.clickLocation)
      // console.log(window.map.getZoom())
@@ -75,6 +75,7 @@
        //   }
        // }
      })
      this.clickLocation = ''
    },
    // 点击定位
    locationMapClick (val) {
@@ -108,10 +109,9 @@
    },
    // 点击确认按钮事件
    confirm () {
      // 通过子组件向父组件传递数据
      // this.$emit('locationClick', this.LongLatPos)
      this.searchList = []
      this.clickLocation = ''
      eventBus.$emit('location-setChange', true)
      // console.log('搜索定位')
    }
  }
}

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue

@@ -117,7 +117,7 @@
                    <el-table-column
                            show-overflow-tooltip
                            width="150"
                            prop="properties.code"
                            prop="properties.pipecode"
                            label="编号">
                    </el-table-column>
                    <el-table-column
@@ -147,12 +147,9 @@
</template>

<script>

// import { pulseEffect } from '../../../../utils/utils'
// import mapApi from '../../../../api/mapApi'
import { highlight, fitBounds } from '../../../helpers/LocateHelper'
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
import { fitBounds, highlight } from '../../../../components/helpers/LocateHelper'
import eventBus from '../../../../eventBus'
import { WMS_URL } from '../../../../conf/Constants'

@@ -208,10 +205,6 @@
        const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
        console.log(resAffFac)
        if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
          // console.log(resAffFac.features)
          // for (let i = 0; i < resAffFac.features.length; i++) {
          //   console.log(resAffFac.features[i])
          // }
          this.tableDataAffFac = resAffFac.features
        }
        this.wfsHelper = new WfsHelper()
@@ -273,7 +266,7 @@
          EXCEPTIONS: 'application/vnd.ogc.se_inimage'
        })
        AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
          console.log(res)
          // console.log(res)
          for (let i = 0; i < res.data.features.length; i++) {
            // console.log(res.data.features[i])
            this.tableList.push(res.data.features[i])
@@ -289,8 +282,8 @@
      // 数据 重新获取 进行置空
      this.tableList = []
      this.tableListSection = []
      this.form.pipeName = ''
      this.tableDataAffFac = []
      this.form.pipeName = ''
      this.form.sectionName = ''
      this.form.affiliatedFacilities = ''
    },
@@ -332,8 +325,8 @@
      const wmsParams = Object.assign({
        LAYERS: 'sewer:view_pipeline',
        QUERY_LAYERS: 'sewer:view_pipeline',
        // LAYERS: 'pipeline_fs',
        // QUERY_LAYERS: 'pipeline_fs',
        // LAYERS: 'sewer:pipeline_fs',
        // QUERY_LAYERS: 'sewer:pipeline_fs',
        WIDTH: size.x,
        HEIGHT: size.y,
        X: Math.round(point.x),
@@ -352,7 +345,7 @@
        EXCEPTIONS: 'application/vnd.ogc.se_inimage'
      })
      AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
        // console.log(res)
        console.log(res)
        for (let i = 0; i < res.data.features.length; i++) {
          this.tableDataAffFac.push(res.data.features[i])
        }

 src/utils/utils.js

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

 src/views/MapTemplate.vue

@@ -40,7 +40,7 @@
// // 公共展示数据
// import PublicBounced from '@components/base-page/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
import ReportIncident from '../components/base-page/enterprise-emergency/ReportIncident'
import ReportIncident from '../components/base-page/enterprise-emergency/discard/ReportIncident'
import Emergency from '@components/emergency/index'
import MapManager from '../components/helpers/MapManager'
import Message from '@components/message/index'