派生自 wuyushui/SewerAndRainNetwork
src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue
@@ -1,147 +1,147 @@ <template> <div class="event-report"> <el-form :model="ruleForm" ref="ruleForm" label-width="90px" class="search-form"> <!-- 事件名称--> <el-form-item class="input-event-name" label="事件名称" prop="nameOfEvent"> <el-input v-model="ruleForm.nameOfEvent" placeholder="将事件命名" ></el-input> </el-form-item> <!-- 事件类型--> <el-form-item label="事件类型" prop="eventOfType"> <el-radio-group v-model="ruleForm.eventOfType"> <el-col :span="8" v-for="(item,index) in ruleForm.eventOfTypeList" :key="index" :style="{margin:'5px 0'}"> <el-radio :label="item.value"> <span>{{ item.name }}</span> </el-radio> </el-col> </el-radio-group> </el-form-item> <!-- 事件等级--> <el-form-item label="事件分级" prop="eventOfLevel"> <el-radio-group v-model="ruleForm.eventOfLevel"> <el-col :span="8" v-for="(item,index) in ruleForm.eventOfLevelList" :key="index" :style="{margin:'5px 0'}"> <el-radio :label="item.value"> <span>{{ item.name }}</span> </el-radio> </el-col> </el-radio-group> </el-form-item> <el-row> <!-- 事发单位--> <el-col :span="12"> <el-form-item label="事发单位" prop="unit"> <el-select v-model="ruleForm.unit" placeholder="单位,装置选择"> <el-option v-for="item in ruleForm.unitList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <!-- 事发时间--> <el-col :span="12"> <el-form-item class="search-panel-item" label="事发时间" prop="atTime"> <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="positionOf"> <el-input v-model="ruleForm.positionOf" clearable> <!-- <el-button slot="suffix" type="text" class="el-icon-location-information"--> <!-- @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=""> </el-button> </el-input> </el-form-item> </el-col> <!-- 位置描述--> <el-col :span="12"> <el-form-item label="位置描述" prop="positionDescription"> <el-input v-model="ruleForm.positionDescription"></el-input> </el-form-item> </el-col> </el-row> <el-row> <!-- 管线名称--> <el-col :span="12"> <el-form-item label="管线名称" prop="lineName" class="search-panel-item"> <el-input disabled v-model="ruleForm.lineName" placeholder="自动带出不可修改" class="report-input"></el-input> </el-form-item> </el-col> <!-- 管线类型--> <el-col :span="12"> <el-form-item label="管线类型" prop="lineType"> <label>{{ ruleForm.lineTypeText }}</label> </el-form-item> </el-col> </el-row> <!-- 点击上传--> <el-form-item label="附件上传" prop="upload"> <el-upload class="upload-demo" action="uploadAction" multiple :limit="3" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <!-- 消息推送--> <el-form-item label="消息推送" prop="beingPush"> <el-checkbox-group v-model="ruleForm.beingPushed" @change="infoChange"> <el-checkbox v-for="item in ruleForm.beingPushList" :key="item.name" :label="item.name" > </el-checkbox> </el-checkbox-group> </el-form-item> <!-- // 描述 接收 展示、隐藏--> <div v-show="wayTo" class="way-to"> <el-form-item label="事件描述" prop="desc"> <el-input type="textarea" resize="none" v-model="ruleForm.desc" placeholder="带出事件类型，事件位置，事件单位，事件时间等字段自动生产一部分描述"> </el-input> <el-button type="primary">一键<br/>生成</el-button> </el-form-item> <el-form-item label="接收人员" prop="receiveOne"> <el-input type="textarea" resize="none" v-model="ruleForm.receiveOne" placeholder="张三；李四，"></el-input> <el-button type="primary">+</el-button> </el-form-item> </div> <el-form-item class="confirmCancel"> <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 custom-class="event-report-dialog" title="事发位置定位" :visible.sync="dialogLocation" :append-to-body="true" :modal="false" v-dialogDrag > <ReportLocation></ReportLocation> </el-dialog> </div> <div class="event-report"> <el-form :model="ruleForm" ref="ruleForm" label-width="90px" class="search-form"> <!-- 事件名称--> <el-form-item class="input-event-name" label="事件名称" prop="nameOfEvent"> <el-input v-model="ruleForm.nameOfEvent" placeholder="将事件命名" ></el-input> </el-form-item> <!-- 事件类型--> <el-form-item label="事件类型" prop="eventOfType"> <el-radio-group v-model="ruleForm.eventOfType"> <el-col :span="8" v-for="(item,index) in ruleForm.eventOfTypeList" :key="index" :style="{margin:'5px 0'}"> <el-radio :label="item.value"> <span>{{ item.name }}</span> </el-radio> </el-col> </el-radio-group> </el-form-item> <!-- 事件等级--> <el-form-item label="事件分级" prop="eventOfLevel"> <el-radio-group v-model="ruleForm.eventOfLevel"> <el-col :span="8" v-for="(item,index) in ruleForm.eventOfLevelList" :key="index" :style="{margin:'5px 0'}"> <el-radio :label="item.value"> <span>{{ item.name }}</span> </el-radio> </el-col> </el-radio-group> </el-form-item> <el-row> <!-- 事发单位--> <el-col :span="12"> <el-form-item label="事发单位" prop="unit"> <el-select v-model="ruleForm.unit" placeholder="单位,装置选择"> <el-option v-for="item in ruleForm.unitList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <!-- 事发时间--> <el-col :span="12"> <el-form-item class="search-panel-item" label="事发时间" prop="atTime"> <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="positionOf"> <el-input v-model="ruleForm.positionOf" clearable> <!-- <el-button slot="suffix" type="text" class="el-icon-location-information"--> <!-- @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=""> </el-button> </el-input> </el-form-item> </el-col> <!-- 位置描述--> <el-col :span="12"> <el-form-item label="位置描述" prop="positionDescription"> <el-input v-model="ruleForm.positionDescription"></el-input> </el-form-item> </el-col> </el-row> <el-row> <!-- 管线名称--> <el-col :span="12"> <el-form-item label="管线名称" prop="lineName" class="search-panel-item"> <el-input disabled v-model="ruleForm.lineName" placeholder="自动带出不可修改" class="report-input"></el-input> </el-form-item> </el-col> <!-- 管线类型--> <el-col :span="12"> <el-form-item label="管线类型" prop="lineType"> <label>{{ ruleForm.lineTypeText }}</label> </el-form-item> </el-col> </el-row> <!-- 点击上传--> <el-form-item label="附件上传" prop="upload"> <el-upload class="upload-demo" action="uploadAction" multiple :limit="3" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <!-- 消息推送--> <el-form-item label="消息推送" prop="beingPush"> <el-checkbox-group v-model="ruleForm.beingPushed" @change="infoChange"> <el-checkbox v-for="item in ruleForm.beingPushList" :key="item.name" :label="item.name" > </el-checkbox> </el-checkbox-group> </el-form-item> <!-- // 描述 接收 展示、隐藏--> <div v-show="wayTo" class="way-to"> <el-form-item label="事件描述" prop="desc"> <el-input type="textarea" resize="none" v-model="ruleForm.desc" placeholder="带出事件类型，事件位置，事件单位，事件时间等字段自动生产一部分描述"> </el-input> <el-button type="primary">一键<br/>生成</el-button> </el-form-item> <el-form-item label="接收人员" prop="receiveOne"> <el-input type="textarea" resize="none" v-model="ruleForm.receiveOne" placeholder="张三；李四，"></el-input> <el-button type="primary">+</el-button> </el-form-item> </div> <el-form-item class="confirmCancel"> <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 custom-class="event-report-dialog" title="事发位置定位" :visible.sync="dialogLocation" :append-to-body="true" :modal="false" v-dialogDrag > <ReportLocation></ReportLocation> </el-dialog> </div> </template> <!-- :rules="rules"--> <!-- :show-close="false"--> @@ -376,90 +376,85 @@ <style lang="less" scoped> /*/deep/ .el-dialog .el-dialog--center {*/ /* margin-top: 1rem !important;*/ /* margin-left: 6.4rem !important;*/ /*}*/ /deep/ .event-report-dialog { left: 5rem; top: 1rem; margin-top: 2rem; margin-left: 2rem; } /deep/ .event-report-dialog { left: 5rem; top: 1rem; margin-top: 2rem; margin-left: 2rem; } /deep/ .el-dialog { left: 5rem; top: 1rem; width: 3.087834rem; } /deep/ .el-dialog { left: 5rem; top: 1rem; width: 3.087834rem; } .event-report { margin: 0 5px !important; } .event-report { margin: 0 5px !important; } .way-to { /deep/ .el-form-item__content { display: flex; } } .way-to { /deep/ .el-form-item__content { display: flex; } } /deep/ .el-form-item { margin: 2px 0 !important; color: #00fff6 !important; } /deep/ .el-form-item { margin: 2px 0 !important; color: #00fff6 !important; } /deep/ .el-textarea__inner { height: 0.28rem !important; max-height: 0.45rem !important; width: 2rem; color: darkgrey; border: solid 1px #00fff6; background-color: rgba(0, 255, 246, 0.14); outline: none; font-size: 0.01rem; } /deep/ .el-textarea__inner { height: 0.28rem !important; max-height: 0.45rem !important; width: 2rem; color: darkgrey; border: solid 1px #00fff6; background-color: rgba(0, 255, 246, 0.14); outline: none; font-size: 0.01rem; } /deep/ .el-checkbox__label { color: #00fff6 !important; } /deep/ .el-checkbox__label { color: #00fff6 !important; } /deep/ .el-icon-time:before { content: " "; } /deep/ .el-icon-time:before { content: " "; } /deep/ input { border-radius: 0; background-color: rgba(0, 255, 246, 0.14); border: solid 1px #00fff6; color: #C0C4CC; font-size: 0.01rem; } /deep/ input { border-radius: 0; background-color: rgba(0, 255, 246, 0.14); border: solid 1px #00fff6; color: #C0C4CC; font-size: 0.01rem; } /deep/ .el-input.is-disabled .el-input__inner { color: #C0C4CC; font-size: 0.01rem; border-radius: 4px; background: @background-color; border-color: @color; } /deep/ .el-input.is-disabled .el-input__inner { color: #C0C4CC; font-size: 0.01rem; border-radius: 4px; background: @background-color; border-color: @color; } /deep/ .el-input__inner { height: 0.2rem !important; border-radius: 5px; background: rgba(0, 16, 30, 0.5); } /deep/ .el-input__inner { height: 0.2rem !important; border-radius: 5px; background: rgba(0, 16, 30, 0.5); } /deep/ .el-form-item__label { color: @color; } /deep/ .el-form-item__label { color: @color; } /deep/ .el-radio__label { color: @color; } /deep/ .el-radio__label { color: @color; } .confirmCancel { text-align: right; margin: 0.071234rem !important; } .confirmCancel { text-align: right; margin: 0.071234rem !important; } </style> src/components/base-page/enterprise-emergency/events-reported/ReportLocation.js
New file @@ -0,0 +1,17 @@ // 公共方法 上报数据 到数据库中 export function publicLocationStore (data) { // const data = { // ID: '', // EventID: '', // EventPipeline: '', // EventPipeSeg: '', // EventAffType: '', // EventAffCode: '', // EventAffPointNum: '', // EventPosX: '', // EventPosY: '', // AcquisitionPeople: '', // AcquisitionDate: '' // } console.log(data) } src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
@@ -1,44 +1,45 @@ <template> <div class="location-lon-and-lat"> <el-form :model="lonlatpos" label-width="60px"> <el-row class="pipe-line-search"> <el-col :span="12"> <el-form-item label="经度:"> <el-input v-model="lonlatpos.longPos"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="纬度:"> <el-input v-model="lonlatpos.latPos"></el-input> </el-form-item> </el-col> </el-row> </el-form> <el-row> <el-col :span="12" style="text-align: center;margin: 5px 0"> <el-button type="primary" size="small" @click="mapPoints">精确定位</el-button> </el-col> <el-col :span="12" style="text-align: center;margin: 5px 0"> <el-button type="primary" size="small" @click="dataPoints">位置拾取</el-button> </el-col> </el-row> <el-row style="text-align: right;margin: 5px"> <el-button type="primary" @click="confirm" size="small">确认</el-button> </el-row> </div> <div class="location-lon-and-lat"> <el-form :model="positionLocationForm" label-width="60px"> <el-row class="pipe-line-search"> <el-col :span="12"> <el-form-item label="经度:"> <el-input v-model="positionLocationForm.longPos"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="纬度:"> <el-input v-model="positionLocationForm.latPos"></el-input> </el-form-item> </el-col> </el-row> </el-form> <el-row> <el-col :span="12" style="text-align: center;margin: 5px 0"> <el-button type="primary" size="small" @click="mapPoints">精确定位</el-button> </el-col> <el-col :span="12" style="text-align: center;margin: 5px 0"> <el-button type="primary" size="small" @click="dataPoints">位置拾取</el-button> </el-col> </el-row> <el-row style="text-align: right;margin: 5px"> <el-button type="primary" @click="confirm" size="small">确认</el-button> </el-row> </div> </template> <script> import { pulseEffect } from '../../../../utils/utils' import iconUrl from '../../../../../public/assets/images/map/marker-icon.png' import eventBus from '../../../../eventBus' import { publicLocationStore } from './ReportLocation' export default { name: 'ReportLocationPoint', data () { return { // 经纬度定位 lonlatpos: { positionLocationForm: { longPos: '', latPos: '' }, @@ -50,8 +51,8 @@ // 精确定位 mapPoints () { window.map.on('click', (e) => { this.lonlatpos.longPos = parseFloat(e.latlng.lng).toFixed(8) this.lonlatpos.latPos = parseFloat(e.latlng.lat).toFixed(8) this.positionLocationForm.longPos = parseFloat(e.latlng.lng).toFixed(8) this.positionLocationForm.latPos = parseFloat(e.latlng.lat).toFixed(8) const as = [e.latlng.lat, e.latlng.lng] // console.log(as) window.map.setView(as, 17) @@ -63,17 +64,17 @@ iconAnchor: [13, 20] }) }) // 添加点数据 window.map.addLayer(this.marker) this.layersGroupArrList.push(this.marker) // 事件结束 关闭点击事件 window.map.off('click') // this.lonlatpos.latPos = '' // this.lonlatpos.longPos = '' }) }, // 通过数据定位 dataPoints () { if (this.lonlatpos.latPos !== '' && this.lonlatpos.longPos !== '') { const as = [this.lonlatpos.latPos, this.lonlatpos.longPos] if (this.positionLocationForm.latPos !== '' && this.positionLocationForm.longPos !== '') { const as = [this.positionLocationForm.latPos, this.positionLocationForm.longPos] window.map.setView(as, 17) pulseEffect(as) this.marker = window.L.marker(as, { @@ -91,14 +92,32 @@ }, // 点击确认按钮事件 confirm () { // 循环数据 清除 图层添加的点数据 for (let i = 0; i < this.layersGroupArrList.length; i++) { window.map.removeLayer(this.layersGroupArrList[i]) } window.mapManager.clearHighlight() // window.map.removeLayer(this.marker) eventBus.$emit('location-setChange', true) this.lonlatpos.longPos = '' this.lonlatpos.latPos = '' // 事件上报 位置信息 存储数据库 const data = { ID: '', EventID: '', EventPipeline: '', EventPipeSeg: '', EventAffType: '', EventAffCode: '', EventAffPointNum: '', EventPosX: this.positionLocationForm.longPos, EventPosY: this.positionLocationForm.latPos, AcquisitionPeople: '', AcquisitionDate: '' } // 通过方法 存储数据 进行 数据库存储数据 publicLocationStore(data) // 确定点数据 位置信息 进行数据 的置空 this.positionLocationForm.longPos = '' this.positionLocationForm.latPos = '' } } } src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
@@ -2,7 +2,7 @@ <div class="click-location"> <el-row> <!-- clearable--> <el-input type="text" v-model="clickLocation" @change="focusLocation"> <el-input type="text" v-model="clickLocation" @change="focusLocation" style="display:flex;align-items: center"> <el-button slot="suffix" type="text" @click="focusLocation"> <img src="../../../../../public/assets/images/map/emergency/search.png" alt=""> </el-button> @@ -10,29 +10,6 @@ </el-row> <!-- <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"> <!-- <div v-if="item.resultType === 1">--> <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 style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden" :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 style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">电话：<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> <!-- </div>--> </el-row> <el-row v-for="(item,index) in searchListStatistics.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"> <!-- <div v-if="item.resultType === 1">--> @@ -43,13 +20,38 @@ <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> <h3 style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden" :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> <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">电话：<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 type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(1,item,index)"> 定位 </el-button> </el-col> <!-- </div>--> </el-row> <el-row v-for="(item,index) in searchListStatistics.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"> <!-- <div v-if="item.resultType === 1">--> <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.adminCode }}</span> <p></p> </div> </el-col> <el-col :span="8" style="text-align: right"> <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(2,item,index)"> 定位 </el-button> </el-col> @@ -79,6 +81,7 @@ import { pulseEffect } from '../../../../utils/utils' import eventBus from '../../../../eventBus' import iconUrl from '../../../../../public/assets/images/map/marker-icon.png' import { publicLocationStore } from './ReportLocation' export default { name: 'ReportLocationSearch', @@ -103,13 +106,6 @@ } }, methods: { handlePage (currentPage) { // this.focusLocation() this.currentPage = currentPage }, handleLocation (index) { this.activeNum = index }, // 搜索定位 focusLocation () { // 每次进行搜索 都对之前数组列表进行置空 @@ -135,40 +131,76 @@ console.log(res) // 返回数据类型 1（普通POI） if (res.resultType === 1) { this.searchList = res.pois // this.total = res.count this.total = res.pois.length if (res.pois) { this.searchList = res.pois // this.total = res.count this.total = res.pois.length } } else if (res.resultType === 2) { // 返回数据类型 2（统计 this.searchListStatistics = res.statistics.priorityCitys this.total = res.statistics.priorityCitys.length } else if (res.resultType === 3) { // 返回数据类型 3 area 区域 } else { this.$message('未搜索到您想要数据') } }) }, // 点击定位 locationMapClick (val, index) { locationMapClick (type, val, index) { // console.log(val) if (type === 1) { this.activeNum = index const ps = val.lonlat.trim().split(' ') this.marker = window.L.marker([ps[1], ps[0]], { icon: window.L.icon({ iconUrl: iconUrl, iconSize: [26, 40], iconAnchor: [13, 20] }) }) .bindTooltip(val.name, { permanent: 'true', direction: 'bottom', offset: [0, 10], sticky: true, className: '' }) window.map.addLayer(this.marker) this.layersGroupArrList.push(this.marker) window.map.setView([ps[1], ps[0]], 17) pulseEffect([ps[1], ps[0]]) } else if (type === 2) { this.activeNum = index const ps = [val.lon, val.lat] this.marker = window.L.marker([ps[1], ps[0]], { icon: window.L.icon({ iconUrl: iconUrl, iconSize: [26, 40], iconAnchor: [13, 20] }) }) .bindTooltip(val.name, { permanent: 'true', direction: 'bottom', offset: [0, 10], sticky: true, className: '' }) window.map.addLayer(this.marker) this.layersGroupArrList.push(this.marker) window.map.setView([ps[1], ps[0]], 17) pulseEffect([ps[1], ps[0]]) } }, // 分页功能 当前页 handlePage (currentPage) { this.currentPage = currentPage }, // 下标更改 事件 handleLocation (index) { this.activeNum = index const ps = val.lonlat.trim().split(' ') this.marker = window.L.marker([ps[1], ps[0]], { icon: window.L.icon({ iconUrl: iconUrl, iconSize: [26, 40], iconAnchor: [13, 20] }) }) .bindTooltip(val.name, { permanent: 'true', direction: 'bottom', offset: [0, 10], sticky: true, className: '' }) window.map.addLayer(this.marker) this.layersGroupArrList.push(this.marker) window.map.setView([ps[1], ps[0]], 17) pulseEffect([ps[1], ps[0]]) }, // 点击确认按钮事件 confirm () { @@ -176,9 +208,28 @@ for (let i = 0; i < this.layersGroupArrList.length; i++) { window.map.removeLayer(this.layersGroupArrList[i]) } // 事件上报 位置信息 存储数据库 const data = { ID: '', EventID: '', EventPipeline: '', EventPipeSeg: '', EventAffType: '', EventAffCode: '', EventAffPointNum: '', EventPosX: '', EventPosY: '', AcquisitionPeople: '', AcquisitionDate: '' } // 通过方法 存储数据 进行 数据库存储数据 publicLocationStore(data) // 确认事件 置空数据 this.searchList = [] this.searchListStatistics = [] this.clickLocation = '' this.total = 0 // 通过 传递数据 关闭 位置选择 eventBus.$emit('location-setChange', true) } } @@ -186,12 +237,6 @@ </script> <style lang="less" scoped> /*/deep/ .el-row {*/ /* margin: 2px 0 !important;*/ /* padding: 0;*/ /* height: 10px;*/ /* max-height: 10px;*/ /*}*/ .environmental-risk-list { color: @color; border-bottom: 1px solid rgba(0, 255, 246, 0.14); src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
@@ -1,156 +1,156 @@ <template> <div class="ReportLocationSection"> <el-form :model="form" label-width="120px"> <el-row class="pipe-line-search"> <el-col :span="18"> <el-form-item label="管线名称:"> <el-input v-model="form.pipeName" @change="pipelineSearch"> <el-button style="padding-right:10px;" slot="suffix" type="text" @click="pipelineSearch"> <img src="../../../../../public/assets/images/map/emergency/search.png" alt=""> </el-button> </el-input> </el-form-item> </el-col> <el-col :span="6"> <el-button type="primary" size="small" icon="el-icon-location-outline" @click="pipeClickLocation">定位 </el-button> </el-col> </el-row> <el-row> <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-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> </el-form> <div class="pipe-table" v-show="this.tableList.length>=1"> <el-card> <span class="fixed-style" style="display: block">管线名称</span> <el-table :data="tableList" border height="120" max-height="140" @row-click="sectionShowClick" style="width: 100%"> <el-table-column label="序号" type="index" > </el-table-column> <el-table-column show-overflow-tooltip prop="properties.pipename" label="管线名称"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.subchaname" label="支线名称"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.mediumtype" label="管线类型"> </el-table-column> <el-table-column width="40" fixed="right" label="操作"> <template slot-scope="scope"> <el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button> </template> </el-table-column> </el-table> </el-card> <el-card> <span class="fixed-style" style="display: block">管段列表</span> <el-table :data="tableListSection" border @row-click="sectionCode" height="100" max-height="100" style="width: 100%"> <el-table-column show-overflow-tooltip prop="properties.pipesegcode" label="管段编码"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.startpointnumber" label="起点探查号"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.endpointnumber" label="终点探查号"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.material" label="材质"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.embeddingmode" label="埋设方式"> </el-table-column> <el-table-column width="40" fixed="right" label="操作"> <template slot-scope="scope"> <el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button> </template> </el-table-column> </el-table> <span class="fixed-style" style="display: block">附属设施列表</span> <el-table :data="tableDataAffFac" border @row-click="affFacName" height="120" max-height="140" style="width: 100%"> <el-table-column show-overflow-tooltip width="150" prop="properties.pipecode" label="管线编号"> </el-table-column> <el-table-column show-overflow-tooltip width="150" prop="properties.name" label="附属设施名称"> </el-table-column> <el-table-column width="150" show-overflow-tooltip prop="properties.type" label="设施类型"> </el-table-column> <el-table-column width="90" fixed="right" label="操作"> <template slot-scope="scope"> <el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button> </template> </el-table-column> </el-table> </el-card> </div> <el-row style="text-align: right;margin: 10px"> <el-button type="primary" @click="confirm" size="small">确认</el-button> </el-row> <div class="ReportLocationSection"> <el-form :model="form" label-width="120px"> <el-row class="pipe-line-search"> <el-col :span="18"> <el-form-item label="管线名称:"> <el-input v-model="form.pipeName" @change="pipelineSearch"> <el-button style="padding-right:10px;" slot="suffix" type="text" @click="pipelineSearch"> <img src="../../../../../public/assets/images/map/emergency/search.png" alt=""> </el-button> </el-input> </el-form-item> </el-col> <el-col :span="6"> <el-button type="primary" size="small" icon="el-icon-location-outline" @click="pipeClickLocation">定位 </el-button> </el-col> </el-row> <el-row> <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-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> </el-form> <div class="pipe-table" v-show="this.tableList.length>=1"> <el-card> <span class="fixed-style" style="display: block">管线名称</span> <el-table :data="tableList" border height="120" max-height="140" @row-click="sectionShowClick" style="width: 100%"> <el-table-column label="序号" type="index" > </el-table-column> <el-table-column show-overflow-tooltip prop="properties.pipename" label="管线名称"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.subchaname" label="支线名称"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.mediumtype" label="管线类型"> </el-table-column> <el-table-column width="40" fixed="right" label="操作"> <template slot-scope="scope"> <el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button> </template> </el-table-column> </el-table> </el-card> <el-card> <span class="fixed-style" style="display: block">管段列表</span> <el-table :data="tableListSection" border @row-click="sectionCode" height="100" max-height="100" style="width: 100%"> <el-table-column show-overflow-tooltip prop="properties.pipesegcode" label="管段编码"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.startpointnumber" label="起点探查号"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.endpointnumber" label="终点探查号"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.material" label="材质"> </el-table-column> <el-table-column show-overflow-tooltip prop="properties.embeddingmode" label="埋设方式"> </el-table-column> <el-table-column width="40" fixed="right" label="操作"> <template slot-scope="scope"> <el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button> </template> </el-table-column> </el-table> <span class="fixed-style" style="display: block">附属设施列表</span> <el-table :data="tableDataAffFac" border @row-click="affFacName" height="120" max-height="140" style="width: 100%"> <el-table-column show-overflow-tooltip width="150" prop="properties.pipecode" label="管线编号"> </el-table-column> <el-table-column show-overflow-tooltip width="150" prop="properties.name" label="附属设施名称"> </el-table-column> <el-table-column width="150" show-overflow-tooltip prop="properties.type" label="设施类型"> </el-table-column> <el-table-column width="90" fixed="right" label="操作"> <template slot-scope="scope"> <el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button> </template> </el-table-column> </el-table> </el-card> </div> <el-row style="text-align: right;margin: 10px"> <el-button type="primary" @click="confirm" size="small">确认</el-button> </el-row> </div> </template> <script> @@ -159,6 +159,7 @@ import AjaxUtils from '@utils/AjaxUtils' import eventBus from '../../../../eventBus' import { WMS_URL } from '../../../../conf/Constants' import { publicLocationStore } from './ReportLocation' export default { name: 'ReportLocationSection', @@ -355,9 +356,27 @@ confirm () { // console.log('点击确定选择完成') eventBus.$emit('location-setChange', true) // 事件上报 位置信息 存储数据库 const data = { ID: '', EventID: '', EventPipeline: this.form.pipeName, EventPipeSeg: this.form.sectionName, EventAffType: this.form.affiliatedFacilitiesCode, EventAffCode: this.form.affiliatedFacilities, EventAffPointNum: '', EventPosX: '', EventPosY: '', AcquisitionPeople: '', AcquisitionDate: '' } // 通过方法 存储数据 进行 数据库存储数据 publicLocationStore(data) // 数据置空 this.form.pipeName = '' this.form.sectionName = '' this.form.affiliatedFacilities = '' this.form.affiliatedFacilitiesCode = '' this.tableList = [] this.tableListSection = [] this.tableDataAffFac = [] @@ -368,86 +387,23 @@ </script> <style lang="less" scoped> /*/deep/ .el-input {*/ /* width: 0.74353rem;*/ /*}*/ .pipe-line-search { display: flex; align-items: center; .pipe-line-search { display: flex; align-items: center; .el-button { margin: 0 15px; } .el-button { margin: 0 15px; } } .pipe-table { /deep/ .el-card { .el-table { margin: 0.05345rem auto; } } } .pipe-table { /*display: flex;*/ /*align-items: center;*/ /*justify-content: space-around;*/ /deep/ .el-card { /*width: 1.39523rem;*/ /*max-width: 1.39523rem;*/ /*height: 0.9343rem;*/ /*max-height: 0.9343rem;*/ .el-table { margin: 0.05345rem auto; } } } .fixed-style { color: @color; } /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/panel/topicSearch/SewersSearch.vue
@@ -1,85 +1,84 @@ <template> <div class="sewers-search" v-if="gdVisible"> <div class="panel-title">{{ title }}</div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="查询" name="first"> <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item label="设施类型：" size="mini" class="search-panel-item"> <el-select style="width: 100%" v-model="form.pipelineType" :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="page_total"> <p>共计 <span>{{total}}</span> 条记录 </p> </div> <div class="rightButtonSearch"> <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input> <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> </el-form> </div> <el-scrollbar style="height:413px;"> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''"> <img class="state" :src="getImgSrc()" style="background: none"/> <div> <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code }}</h3> <p>所属企业：<span>{{ item.properties.orgname }}</span> <p>设施类型：<span>{{ item.properties.type }}</span> <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="btnAffiliatedFacilities(item,index)"> 附属设施 </el-button> </p> </div> </div> </el-scrollbar> <el-card class="footer-page" v-if="total > 10"> <el-pagination small @current-change="handlePage" :page-size=pageSize layout="prev, pager, next" :total=total class="warnPagination" > </el-pagination> </el-card> </el-tab-pane> <el-tab-pane label="分析" name="second"> <SewersAnalysis></SewersAnalysis> </el-tab-pane> <el-tab-pane label="历史" name="third"> <SewersHistory></SewersHistory> </el-tab-pane> </el-tabs> <!-- 附属设施面板 --> <affiliated-facilities :facilitiesParameter="facilitiesParameter" v-if="fuShuSheShiShow"></affiliated-facilities> </div> <div class="sewers-search" v-if="gdVisible"> <div class="panel-title">{{ title }}</div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="查询" name="first"> <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item label="设施类型：" size="mini" class="search-panel-item"> <el-select style="width: 100%" v-model="form.pipelineType" :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="page_total"> <p>共计 <span>{{ total }}</span> 条记录 </p> </div> <div class="rightButtonSearch"> <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input> <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> </el-form> </div> <el-scrollbar style="height:413px;"> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''"> <img class="state" :src="getImgSrc()" style="background: none"/> <div> <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code }}</h3> <p>所属企业：<span>{{ item.properties.orgname }}</span> <p>设施类型：<span>{{ item.properties.type }}</span> <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="btnAffiliatedFacilities(item,index)"> 附属设施 </el-button> </p> </div> </div> </el-scrollbar> <el-card class="footer-page" v-if="total > 10"> <el-pagination small @current-change="handlePage" :page-size=pageSize layout="prev, pager, next" :total=total class="warnPagination" > </el-pagination> </el-card> </el-tab-pane> <el-tab-pane label="分析" name="second"> <SewersAnalysis></SewersAnalysis> </el-tab-pane> <el-tab-pane label="历史" name="third"> <SewersHistory></SewersHistory> </el-tab-pane> </el-tabs> <!-- 附属设施面板 --> <affiliated-facilities :facilitiesParameter="facilitiesParameter" v-if="fuShuSheShiShow"></affiliated-facilities> </div> </template> <script>
