企业应急-事件上报-定位布局优化

陈泽平

2021-05-30 f2ca9d635d62888e80d5629ede9af899149b6815

企业应急-事件上报-定位布局优化

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

@@ -127,8 +127,8 @@
                </el-form-item>
            </div>
            <el-form-item class="confirmCancel">
                <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">确认</el-button>
                <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
        <el-dialog

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

@@ -3,28 +3,42 @@
        <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-row style="display: flex;align-items: center">
                        <el-form-item label="经度:" style="display: inline-block">
                            <el-col :span="20">
                                <el-input v-model="LongLatPos.longPos"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-col :span="4">
                            <el-button type="primary" size="small" @click="mapPoints">点击定位</el-button>
                        </el-col>
                    </el-row>
                    <el-row style="display: flex;align-items: center">
                        <el-form-item label="纬度:">
                            <el-col :span="20">
                                <el-input v-model="LongLatPos.latPos"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-col :span="4">
                            <el-button type="primary" size="small" @click="dataPoints">数据定位</el-button>
                        </el-col>
                    </el-row>
                </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>
            <!--            <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>
            <el-button type="primary" @click="confirm" size="small">确认</el-button>
        </div>
    </div>
</template>

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

export default {
@@ -52,7 +66,7 @@
        this.marker = window.L.marker(as, {
          icon: window.L.icon({
            iconUrl: iconUrl,
            iconSize: [30, 30],
            iconSize: [25, 45],
            iconAnchor: [15, 15]
          })
        })

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

@@ -3,23 +3,45 @@
        <el-row>
            <el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input>
        </el-row>
        <el-scrollbar style="height:86.22px">
            <el-row v-for="(item,index) in searchList" :key="index" style="display: flex;align-items: center">
                <el-col :span="12">
                    <span>{{ item.name }}</span>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item)">定位
                    </el-button>
                </el-col>
                <!--            <el-pagination-->
                <!--                    layout="prev, pager, next"-->
                <!--                    :total="50">-->
                <!--            </el-pagination>-->
            </el-row>
        </el-scrollbar>
        <!--        <el-scrollbar style="height:250.34px">-->
        <el-row v-for="(item,index) in searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
                style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
                class="environmental-risk-list">
            <el-col :span="4">
                <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
                     style="background: none;margin: 0 15px">
            </el-col>
            <el-col :span="12">
                <div class=search-list>
                    <!--                        <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
                    <h3 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：{{ item.name }}</h3>
                    <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">地址：<span>{{ item.address }}</span>
                    <p>电话：<span>{{ item.phone }}</span></p>
                </div>
            </el-col>
            <el-col :span="8" style="text-align: right">
                <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
                    定位
                </el-button>
            </el-col>
        </el-row>
        <!--        </el-scrollbar>-->
        <!--        <el-card class="footer-page" >-->
        <div v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    :current-page.sync="currentPage"
                    layout="prev, pager, next"
                    :total=total
                    class="warnPagination"
            >
            </el-pagination>
        </div>
        <!--        </el-card>-->
        <el-row style="text-align: right">
            <el-button type="primary" @click="confirm">确认</el-button>
            <el-button type="primary" size="small" @click="confirm">确认</el-button>
        </el-row>
    </div>
</template>
@@ -29,24 +51,34 @@
import { reportLocationSearch } from '../../../../api/request'
import { pulseEffect } from '../../../../utils/utils'
import eventBus from '../../../../eventBus'
import iconUrl from '../../../../../public/assets/images/map/loc.png'
import iconUrl from '../../../../../public/assets/images/map/marker-icon.png'

export default {
  name: 'ReportLocationSearch',
  data () {
    return {
      activeNum: -1,
      // 点击定位绑定数据
      clickLocation: '',
      searchList: [],
      marker: null
      marker: null,
      total: 0,
      // 分页 默认展示
      currentPage: 1,
      // 分页 每页多少数据
      pageSize: 3
    }
  },
  methods: {
    handlePage (currentPage) {
      // this.focusLocation()
      this.currentPage = currentPage
    },
    handleLocation (index) {
      this.activeNum = index
    },
    // 搜索定位
    focusLocation () {
      // console.log(this.clickLocation)
      // console.log(window.map.getZoom())
      // console.log(window.map.getBounds())
      const getBoundsData = '' + window.map.getBounds()._southWest.lng + ',' + window.map.getBounds()._southWest.lat + ',' + window.map.getBounds()._northEast.lng + ',' + window.map.getBounds()._northEast.lat
      const data = {
        postStr: {
@@ -60,45 +92,33 @@
        },
        type: 'query'
      }
      // console.log(data)
      reportLocationSearch(data).then(res => {
        // console.log(res)
        console.log(res)
        this.searchList = res.pois
        // console.log(this.searchList)
        // const as = res.pois[0].lonlat.trim().split(' ')
        // window.map.setView([as[1], as[0]], 17)
        // pulseEffect([as[1], as[0]])
        // for (let i = 0; i < res.pois.length; i++) {
        //   const as = res.pois[i].lonlat.trim().split(' ')
        //   if (res.pois[i].name.indexOf(this.clickLocation) >= 0) {
        //     window.map.setView([as[1], as[0]], 17)
        //     pulseEffect([as[1], as[0]])
        //   }
        // }
        this.total = res.pois.length
      })
      this.clickLocation = ''
    },
    // 点击定位
    locationMapClick (val) {
      console.log(val)
    locationMapClick (val, index) {
      this.activeNum = index
      // console.log(val)
      const ps = val.lonlat.trim().split(' ')
      // const htmls = '<div><ul><li>' + val.name + '</li> + <li>' + val.adress + '</li></ul></div>'
      // const htmls = '<div><ul><li>' + val.name + '</li></ul></div>'
      // var myIcon = window.L.divIcon({
      //   html: htmls,
      //   className: 'company-bindTooltip',
      //   iconSize: 16
      // })
      const htmls = '<div><ul><li>' + val.name + '</li> <br/> <li>' + val.address + '</li> <br/> <li>' + val.phone + '</li></ul></div>'
      this.marker = window.L.marker([ps[1], ps[0]], {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconSize: [25, 40],
          iconAnchor: [15, 15]
        })
        // icon: myIcon
      })
        .bindTooltip(htmls, {
          // permanent: 'true',
        .bindTooltip(val.name, {
          permanent: 'true',
          direction: 'bottom',
          offset: [0, 10],
          sticky: true,
@@ -127,8 +147,27 @@
    /*    height: 10px;*/
    /*    max-height: 10px;*/
    /*}*/
    .div-list-search {
    .environmental-risk-list {
        color: @color;
        border-bottom: 1px solid rgba(0, 255, 246, 0.14);

        h3 {
            font-size: 0.1rem;
        }
    }

    /*<!--.environmental-risk-list:hover {-->*/
    /*<!--    color: @color-highlight;-->*/
    /*<!--    background: @background-color;-->*/
    /*<!--}-->*/
    .search-list {
        h3:hover {
            color: @color-highlight;
        }
    }

    .hover {
        color: @color-highlight;
    }

    .click-location {
@@ -144,4 +183,53 @@
            margin: 15px auto;
        }
    }

    /deep/
    .warnPagination {
        .btn-quicknext, .btn-quickprev {
            color: #e4e8f1 !important;
            background-color: transparent;
            // border: 1px solid #25AECD;
            border-left: 1px solid #25AECD;
            border-bottom: 1px solid #25AECD;
            border-top: 1px solid #25AECD;
            color: #e4e8f1;
        }

        .el-pager li {
            color: #e4e8f1;
            background: transparent;
            // border: 1px solid #25AECD;
            border-left: 1px solid #25AECD;
            border-bottom: 1px solid #25AECD;
            border-top: 1px solid #25AECD;
        }

        .el-pager li.active {
            border-color: #25AECD;
            background-color: rgba(38, 222, 253, 0.3);
            color: #e4e8f1;
        }

        .el-pager li:hover {
            border-color: #25AECD;
            background-color: rgba(38, 222, 253, 0.3);
            color: #34e0ff;
        }

        .btn-prev {
            background-color: transparent;
            // border: 1px solid #25AECD;
            border-left: 1px solid #25AECD;
            border-bottom: 1px solid #25AECD;
            border-top: 1px solid #25AECD;
            color: #e4e8f1;
        }

        .btn-next {
            background-color: transparent;
            border: 1px solid #25AECD;
            color: #e4e8f1;
        }
    }
</style>

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

@@ -1,6 +1,6 @@
<template>
    <div class="ReportLocationSection">
        <el-form :model="form" label-width="90px">
        <el-form :model="form" label-width="120px">
            <el-row class="pipe-line-search">
                <el-col :span="12">
                    <el-form-item label="管线名称:">
@@ -17,14 +17,21 @@
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                <el-col :span="24">
                    <el-form-item label="管段编码:">
                        <el-input v-model="form.sectionName" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="附属设施:">
                    <el-form-item label="附属设施名称:">
                        <el-input v-model="form.affiliatedFacilities" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="附属设施编码:">
                        <el-input v-model="form.affiliatedFacilitiesCode" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
@@ -141,7 +148,7 @@
            </el-card>
        </div>
        <el-row style="text-align: right;margin: 10px">
            <el-button type="primary" @click="confirm">确认</el-button>
            <el-button type="primary" @click="confirm" size="small">确认</el-button>
        </el-row>
    </div>
</template>
@@ -160,7 +167,8 @@
      form: {
        pipeName: '',
        sectionName: '',
        affiliatedFacilities: ''
        affiliatedFacilities: '',
        affiliatedFacilitiesCode: ''
      },
      // 管线查询数据列表
      tableList: [],
@@ -196,57 +204,72 @@
        this.tableList = res.features
      }
      this.wfsHelper = new WfsHelper()
      this.form.pipeName = ''
      // this.form.pipeName = ''
      this.form.sectionName = ''
      this.form.affiliatedFacilities = ''
      this.form.affiliatedFacilitiesCode = ''
    },
    // 点击管线列表 展示管段内容 和附属设施内容
    async sectionShowClick (val) {
      console.log(val)
      // 如果 SectionAndAffFacTableJudge === true 是搜索数据结果的列表 可以进行 管段 附属设施交互 点击定位查询结果 不进行点击交互
    sectionShowClick (val) {
      // console.log(val)
      // this.SectionAndAffFacTableJudge = true
      if (this.SectionAndAffFacTableJudge === true) {
        // 管段查询
        const sectionNameSearch = val.properties.pipename
        this.tableListSection = []
        this.wfsHelper.clearFilter()
        this.wfsHelper.setTypeName(['sewer:pipesegment'])
        this.wfsHelper.addLike('pipename', sectionNameSearch)
        this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'')
        const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
        // console.log(res)
        if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
          this.tableListSection = res.features
        }
        this.wfsHelper = new WfsHelper()
        // 附属设施查询
        this.tableDataAffFac = []
        const AffFacSearch = val.properties.pipecode
        console.log(AffFacSearch)
        this.wfsHelper.clearFilter()
        this.wfsHelper.setTypeName(['sewer:view_pipeline'])
        this.wfsHelper.addLike('pipecode', AffFacSearch)
        // this.wfsHelper.addEquals('type', '\'' + AffFacSearch + '\'')
        const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
        console.log(resAffFac)
        if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
          // for (let i = 0; i < resAffFac.features.length; i++) {
          //   // console.log(resAffFac.features[i])
          //   this.tableDataAffFac.push(resAffFac.features[i].properties)
          // }
          this.tableDataAffFac = resAffFac.features
        }
        this.wfsHelper = new WfsHelper()
        this.searchSection(val)
        this.searchAffFacData(val)
      }
    },
    // 管段查询
    async searchSection (val) {
      const sectionNameSearch = val.properties.pipename
      this.tableListSection = []
      this.wfsHelper.clearFilter()
      this.wfsHelper.setTypeName(['sewer:pipesegment'])
      this.wfsHelper.addLike('pipename', sectionNameSearch)
      this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'')
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      // console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.tableListSection = res.features
      }
    },
    // 附属设施查询
    async searchAffFacData (val) {
      this.tableDataAffFac = []
      const AffFacSearch = val.properties.pipecode
      this.wfsHelper.clearFilter()
      this.wfsHelper.setTypeName(['sewer:view_pipeline'])
      this.wfsHelper.addLike('pipecode', AffFacSearch)
      // this.wfsHelper.addEquals('type', '\'' + AffFacSearch + '\'')
      const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      console.log(resAffFac)
      if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
        this.tableDataAffFac = resAffFac.features
      }
    },
    // 搜索的公共方法优化
    async publicSearch (searchVal, searchKeyword, searchTypeName, tableListData) {
      tableListData = []
      this.wfsHelper = new WfsHelper()
      this.wfsHelper.clearFilter()
      this.wfsHelper.setTypeName(searchTypeName)
      this.wfsHelper.addLike(searchKeyword, searchVal)
      this.wfsHelper.addEquals(searchKeyword, '\'' + searchVal + '\'')
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      // console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        tableListData = res.features
      }
    },
    // 点击管段列表 管段编码传递
    sectionCode (val) {
      // console.log(val)
      this.form.sectionName = val.properties.pipecode
      this.form.sectionName = val.properties.pipesegcode
    },
    // 点击附属设施列表 管段编码传递
    affFacName (val) {
      // console.log(val)
      console.log(val)
      this.form.affiliatedFacilities = val.properties.name
      this.form.affiliatedFacilitiesCode = val.properties.code
    },
    // 定位功能
    localAdr (val) {
@@ -258,23 +281,27 @@
    pipeClickLocation () {
      // 设施不进行 管线表格数据的点击交互
      this.SectionAndAffFacTableJudge = false
      // 点击获取数据
      window.map.on('click', (e) => {
        // 点击地图关闭弹框
        window.mapManager.clickDialogSwitch = false
        // 管线点击数据
        this.pipeData(e)
        // 管段点击数据
        this.sectionData(e)
        // 附属设施数据
        this.affFacData(e)
        // 关闭点击事件
        window.map.off('click')
      })
      if (this.SectionAndAffFacTableJudge === false) {
        // 点击获取数据
        window.map.on('click', (e) => {
          this.SectionAndAffFacTableJudge = false
          // 点击地图关闭弹框
          window.mapManager.clickDialogSwitch = false
          // 管线点击数据
          this.pipeData(e)
          // 管段点击数据
          this.sectionData(e)
          // 附属设施数据
          this.affFacData(e)
          // 关闭点击事件
          window.map.off('click')
        })
      }
      // 数据 重新获取 进行置空
      this.form.pipeName = ''
      this.form.sectionName = ''
      this.form.affiliatedFacilities = ''
      this.form.affiliatedFacilitiesCode = ''
      this.tableList = []
      this.tableListSection = []
      this.tableDataAffFac = []
@@ -317,7 +344,7 @@
        BBOX: window.map.getBounds().toBBoxString()
      }, defaultWmsParams)
      AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
        console.log(res)
        // console.log(res)
        for (let i = 0; i < res.data.features.length; i++) {
          dataList.push(res.data.features[i])
        }

 src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue

@@ -66,7 +66,7 @@
                <i class="state"></i>
                <div>
                    <h3>
                        <span @click="disposalfx">件名称:XXX事件</span>
                        <span @click="disposalfx">事件名称:XXX事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="startAnalysis">
                            <span>开始分析</span>