Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

seatonwan9

2021-05-28 593f6ccd3aec8045a26b4b330f2b034df05bfd9f

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

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

File was deleted

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

File was deleted

 src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue

@@ -1,25 +1,25 @@
<template>
  <div>
<!--    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">-->
<!--      <el-table-column prop="define" label="建议处置措施" show-overflow-tooltip></el-table-column>-->
<!--      <el-table-column type="selection" label="预览" width="55"></el-table-column>-->
    <div>
        <!--    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">-->
        <!--      <el-table-column prop="define" label="建议处置措施" show-overflow-tooltip></el-table-column>-->
        <!--      <el-table-column type="selection" label="预览" width="55"></el-table-column>-->

<!--    </el-table>-->
    <div class="" style="padding: 5px;">
<!--      <div v-for="o in tableData" :key="o" class="text item">-->
<!--        {{ o.content }}-->
<!--      </div>-->
      <div>
        1、关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流
        <div>
        <!--    </el-table>-->
        <div class="" style="padding: 5px;">
            <!--      <div v-for="o in tableData" :key="o" class="text item">-->
            <!--        {{ o.content }}-->
            <!--      </div>-->
            <div>
                1、关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流
                <div>

                </div>
            </div>
        </div>
      </div>
    </div>
    <div >
</div>
        <div>
        </div>

  </div>
    </div>
</template>

<script>
@@ -35,9 +35,25 @@
          type: 'closeFM',
          fmGxList: {
            // 上游阀门
            syfm: [{ name: '阀门B', lng: 114, lat: 32 }, { name: '阀门a', lng: 114, lat: 32 }],
            syfm: [{
              name: '阀门B',
              lng: 114,
              lat: 32
            }, {
              name: '阀门a',
              lng: 114,
              lat: 32
            }],
            // 下游阀门
            xyfm: [{ name: '阀门E', lng: 114, lat: 32 }, { name: '阀门F', lng: 114, lat: 32 }]
            xyfm: [{
              name: '阀门E',
              lng: 114,
              lat: 32
            }, {
              name: '阀门F',
              lng: 114,
              lat: 32
            }]
          }
        }, {
          no: 1,
@@ -46,9 +62,25 @@
          type: 'closeFM',
          fmGxList: {
            // 上游阀门
            syfm: [{ name: '阀门B', lng: 114, lat: 32 }, { name: '阀门a', lng: 114, lat: 32 }],
            syfm: [{
              name: '阀门B',
              lng: 114,
              lat: 32
            }, {
              name: '阀门a',
              lng: 114,
              lat: 32
            }],
            // 下游阀门
            xyfm: [{ name: '阀门E', lng: 114, lat: 32 }, { name: '阀门F', lng: 114, lat: 32 }]
            xyfm: [{
              name: '阀门E',
              lng: 114,
              lat: 32
            }, {
              name: '阀门F',
              lng: 114,
              lat: 32
            }]
          }
        }, {
          no: 1,
@@ -57,17 +89,31 @@
          type: 'closeFM',
          fmGxList: {
            // 上游阀门
            syfm: [{ name: '阀门B', lng: 114, lat: 32 }, { name: '阀门a', lng: 114, lat: 32 }],
            syfm: [{
              name: '阀门B',
              lng: 114,
              lat: 32
            }, {
              name: '阀门a',
              lng: 114,
              lat: 32
            }],
            // 下游阀门
            xyfm: [{ name: '阀门E', lng: 114, lat: 32 }, { name: '阀门F', lng: 114, lat: 32 }]
            xyfm: [{
              name: '阀门E',
              lng: 114,
              lat: 32
            }, {
              name: '阀门F',
              lng: 114,
              lat: 32
            }]
          }
        }]

    }
  },
  methods: {

  }
  methods: {}
}
</script>


 src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue

@@ -1,34 +1,39 @@
<template>
  <div>
    <div>

<!--&lt;!&ndash;    基本信息&ndash;&gt;-->
<!--    <event-base-info>-->
        <!--&lt;!&ndash;    基本信息&ndash;&gt;-->
        <!--    <event-base-info>-->

<!--    </event-base-info>-->
<!--    建议处置-->
    <disposal-proposed>
        <!--    </event-base-info>-->
        <!--    建议处置-->
        <disposal-proposed>

    </disposal-proposed>
    <!--    有效容积计算-->
    <div class="footer">
      <el-button type="primary" size="mini" @click="toggleShowCalc">事故水计算</el-button>
      <el-button type="primary" size="mini" @click="rimRes">周边资源</el-button>
      <el-button type="primary" size="mini" @click="report">生成报告</el-button>
      <el-button type="primary" size="mini" @click="close">返回</el-button>
        </disposal-proposed>
        <!--    有效容积计算-->
        <div class="footer">
            <el-button type="primary" size="mini" @click="toggleShowCalc">事故水计算</el-button>
            <el-button type="primary" size="mini" @click="rimRes">周边资源</el-button>
            <el-button type="primary" size="mini" @click="report">生成报告</el-button>
            <el-button type="primary" size="mini" @click="close">返回</el-button>
        </div>
        <effective-volume-calc ref="effectVolCalc"></effective-volume-calc>
    </div>
    <effective-volume-calc ref="effectVolCalc"></effective-volume-calc>
  </div>

</template>

<script>

import EventBaseInfo from '@components/base-page/enterprise-emergency/event-handling/EventBaseInfo'
// import EventBaseInfo from '@components/base-page/enterprise-emergency/event-handling/EventBaseInfo'
import DisposalProposed from '@components/base-page/enterprise-emergency/event-handling/DisposalProposed'
import EffectiveVolumeCalc from '@components/base-page/enterprise-emergency/EffectiveVolumeCalc'

export default {
  name: 'EventHandling',
  components: { DisposalProposed, EventBaseInfo, EffectiveVolumeCalc },
  components: {
    DisposalProposed,
    // EventBaseInfo,
    EffectiveVolumeCalc
  },

  methods: {
    toggleShowCalc () {
@@ -43,7 +48,9 @@
    report () {
      console.log('生成报告')
    },
    close () { console.log('返回') }
    close () {
      console.log('返回')
    }

  }
}

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

New file
@@ -0,0 +1,466 @@
<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" @click="submitForm('ruleForm')">确认</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
        <el-dialog
                custom-class="el-dialog--center"
                :visible.sync="dialogLocation"
                :append-to-body="true"
                :modal="false"
                v-dialogDrag
        >
            <ReportLocation @locationClick="getlocaltionClick"></ReportLocation>
        </el-dialog>
    </div>
</template>
<!--        :rules="rules"-->
<!--        :show-close="false"-->
<script>

import ReportLocation from './ReportLocation'
import eventBus from '../../../../eventBus'

export default {
  name: 'EventsReported',
  components: {
    ReportLocation
  },
  data () {
    return {
      // 表单绑定数据
      ruleForm: {
        // 事件名称 绑定数据
        nameOfEvent: '',
        // 事件类型 绑定数据值
        eventOfType: '',
        // 事件类型可选择数据radio 绑定数据
        eventOfTypeList: [
          {
            name: '海(水)上溢油污染',
            value: 1
          },
          {
            name: '油气管道泄漏污染',
            value: 2
          },
          {
            name: '辐射污染',
            value: 3
          },
          {
            name: '生态环境破坏',
            value: 4
          },
          {
            name: '其他',
            value: 5
          }
        ],
        // 事件等级
        eventOfLevel: '',
        // 事件等级可选择数据radio 绑定数据
        eventOfLevelList: [
          {
            name: '特别重大环境事件',
            value: 1
          },
          {
            name: '重大环境事件',
            value: 2
          },
          {
            name: '较大环境事件',
            value: 3
          },
          {
            name: '一般A级',
            value: 4
          },
          {
            name: '一般B级',
            value: 5
          },
          {
            name: '一般C级',
            value: 6
          }
        ],
        // 事发单位 绑定数据值
        unit: '',
        unitList: [
          {
            label: '扬子',
            value: '1'
          },
          {
            label: '南京',
            value: '2'
          }
        ],
        // 事发时间 绑定数据
        atTime: '',
        // 事发位置
        positionOf: '',
        // 位置描述
        positionDescription: '',
        // 管线名称
        lineName: '',
        // 管线类型
        lineType: '',
        lineTypeText: '自动带出不可修改',
        // 消息推送
        beingPushed: [],
        beingPushList: [
          {
            name: '短信推送',
            value: false
          },
          {
            name: '手机应用推送',
            value: false
          }
        ],
        // 事件描述
        desc: '',
        // 接收人员
        receiveOne: ''
      },
      // 上传列表
      fileList: [],
      // 上传地址
      uploadAction: '',
      // 表单验证
      // rules: {
      //   // 事件名称校验
      //   nameOfEvent: [
      //     {
      //       required: true,
      //       message: '请输入活动名称',
      //       trigger: 'blur'
      //     }
      //   ],
      //   // 事件类型校验
      //   eventOfType: [
      //     {
      //       required: true,
      //       message: '请选择事件类型',
      //       trigger: 'blur'
      //     }
      //   ],
      //   // 事件等级校验
      //   eventOfLevel: [
      //     {
      //       required: true,
      //       message: '请选择事件等级',
      //       trigger: 'blur'
      //     }
      //   ],
      //   // 事发单位 绑定数据值
      //   unit: [
      //     {
      //       required: true,
      //       message: '请选择活动区域',
      //       trigger: 'change'
      //     }
      //   ],
      //   // 事发时间
      //   atTime: [
      //     {
      //       required: true,
      //       message: '请选择活动资源',
      //       trigger: 'change'
      //     }
      //   ],
      //   // 事件位置校验
      //   positionOf: [
      //     {
      //       required: true,
      //       message: '请输入活动位置',
      //       trigger: 'blur'
      //     }
      //   ],
      //   // 位置描述校验
      //   positionDescription: [
      //     {
      //       required: true,
      //       message: '请输入位置描述',
      //       trigger: 'blur'
      //     }
      //   ],
      //   // 管线名称
      //   lineName: [],
      //   // 管线类型
      //   lineType: []
      // },
      // 描述 接收 => 展示/隐藏
      wayTo: false,
      // 定位位置选择弹框
      dialogLocation: false
    }
  },
  mounted () {
    eventBus.$on('section-search', (obj) => {
      if (obj) {
        this.dialogLocation = false
      }
    })
  },
  methods: {
    // 接收子组件传递的数据
    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) {
        this.wayTo = true
      } else {
        this.wayTo = false
      }
    },
    // 点击定位 进行位置选择
    locationInfo () {
      this.dialogLocation = !this.dialogLocation
    },
    // 表单的确认按钮点击事件
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.$message({
            message: '事件上报提交成功',
            type: 'success'
          })
        } else {
          this.$message('事件上报提交失败')
          return false
        }
      })
      this.$refs[formName].resetFields()
    },
    // form表单的取消按钮点击事件 重置信息
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>

    /*/deep/ .el-dialog .el-dialog--center {*/
    /*    margin-top: 1rem !important;*/
    /*    margin-left: 6.4rem !important;*/
    /*}*/

    /deep/ .el-dialog--center {
        left: 5rem;
        top: 1rem;
        margin-top: 2rem;
        margin-left: 2rem;
    }

    /deep/ .el-dialog {
        width: 3.087834rem;
    }

    .event-report {
        margin: 0 5px !important;
    }

    .way-to {
        /deep/ .el-form-item__content {
            display: flex;
        }
    }

    /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-checkbox__label {
        color: #00fff6 !important;
    }

    /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/ .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-form-item__label {
        color: @color;
    }

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

    .confirmCancel {
        text-align: right;
        margin: 0.071234rem !important;
    }
</style>

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

File was renamed from src/components/base-page/enterprise-emergency/ReportFile.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>
@@ -41,9 +41,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: 'ReportFile',

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

New file
@@ -0,0 +1,152 @@
<template>
    <div class="report-location-box">
        <div class="report-location">
            <el-tabs v-model="activeName">
                <el-tab-pane label="点击定位" name="first">
                    <div class="click-location">
                        <el-row>
                            <el-input type="text" v-model="clickLocation" clearable @focus="focusLocation"></el-input>
                        </el-row>
                        <el-row>
                            <el-button type="primary" @click="confirm">确认</el-button>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="管段定位" name="second">
                    <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" @click="mapPoints">定位</el-button>
                        </div>
                    </el-row>
                    <div class="place-bottom" style="text-align: center;margin: 10px">
                        <el-button type="primary" @click="confirm">确认</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
// import eventBus from '../../../../eventBus'
// 管段定位组件
import ReportLocationSection from './ReportLocationSection'

export default {
  name: 'ReportLocation',
  components: {
    ReportLocationSection
  },
  data () {
    return {
      // active tab切换
      activeName: 'first',
      // 点击定位绑定数据
      clickLocation: '',
      // 经纬度定位
      LongLatPos: {
        longPos: '',
        latPos: ''
      }
    }
  },
  // mounted () {
  //   // 接收规定 每次重新选择定位 都指定 选择第一个开始
  //   eventBus.$on('tab-change', (obj) => {
  //     this.activeName = obj
  //   })
  // },
  methods: {
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // window.mapManager.clickDialogSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      window.map.off('click', this.selectClick)
      // const point = [e.latlng.lng, e.latlng.lat]
      const pointX = e.latlng.lng
      const pointY = e.latlng.lat
      this.clickLocation = '\'' + pointX + '\'' + pointY + ''
      this.mapPointResult(e)
    },
    mapPointResult (e) {
      console.log(e)
      this.LongLatPos.longPos = e.latlng.lng
      this.LongLatPos.latPos = e.latlng.lat
    },
    // 获得焦点 进行定位
    focusLocation () {
      this.selectPipeLine()
    },
    // 经纬度定位
    mapPoints () {
      this.selectPipeLine()
    },
    // 点击确认按钮事件
    confirm () {
      // 通过子组件向父组件传递数据
      this.$emit('locationClick', this.LongLatPos)
      this.clickLocation = ''
      this.LongLatPos.longPos = ''
      this.LongLatPos.latPos = ''
    }
  }
}
</script>

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

        .el-input {
            width: 80%;
            margin: 15px auto;
        }

        .el-button {
            margin: 15px auto;
        }
    }
    .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/ReportLocationSection.vue

New file
@@ -0,0 +1,353 @@
<template>
    <div class="ReportLocationSection">
        <el-form :model="form" label-width="90px">
            <el-row class="pipe-line-search">
                <el-col :span="12">
                    <el-form-item label="管线名称:">
                        <el-input v-model="form.pipeName">
                            <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="8">
                    <el-button type="primary" size="small" icon="el-icon-search" @click="pipeClickLocation">定位</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="管段编码:">
                        <el-input v-model="form.sectionName" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="附属设施:">
                        <el-input v-model="form.affiliatedFacilities" 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">管线名称</span>
                <el-table
                        :data="tableList"
                        border
                        height="240"
                        max-height="280"
                        @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.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">管段列表</span>
                <el-table
                        :data="tableListSection"
                        border
                        @row-click="sectionCode"
                        height="100"
                        max-height="120"
                        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">附属设施列表</span>
                <el-table
                        :data="tableDataAffFac"
                        border
                        @row-click="affFacName"
                        height="100"
                        max-height="120"
                        style="width: 120%">
                    <el-table-column
                            show-overflow-tooltip
                            prop="properties.name"
                            label="附属设施名称">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip
                            prop="properties.type"
                            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>
        </div>
        <el-row style="text-align: center;margin: 10px">
            <el-button type="primary" @click="confirm">确认</el-button>
        </el-row>
    </div>
</template>

<script>
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
// import { pulseEffect } from '../../../../utils/utils'
// import mapApi from '../../../../api/mapApi'

import { fitBounds, highlight } from '../../../../components/helpers/LocateHelper'
import eventBus from '../../../../eventBus'
// import MapManager from '../../../helpers/MapManager'

export default {
  name: 'ReportLocationSection',
  data () {
    return {
      form: {
        pipeName: '',
        sectionName: '',
        affiliatedFacilities: ''
      },
      // 管线查询数据列表
      tableList: [],
      // 管段查询数据列表
      tableListSection: [],
      // 附属设施查询列表数据
      tableDataAffFac: [],
      // 分页功能
      pageSize: 3,
      total: 0,
      currentPage: 1
    }
  },
  mounted () {
    this.wfsHelper = new WfsHelper()
  },
  methods: {
    // 点击管线列表 展示管段内容
    async sectionShowClick (val) {
      console.log(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
      }
      this.wfsHelper = new WfsHelper()
      // 附属设施查询
      this.tableDataAffFac = []
      const AffFacSearch = val.properties.pipename
      this.wfsHelper.clearFilter()
      this.wfsHelper.setTypeName(['sewer:view_pipeline'])
      this.wfsHelper.addLike('name', AffFacSearch)
      this.wfsHelper.addEquals('name', '\'' + 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
      }
      this.wfsHelper = new WfsHelper()
    },
    // 点击管段列表 管段编码传递
    sectionCode (val) {
      console.log(val)
      this.form.sectionName = val.properties.pipecode
    },
    // 点击附属设施列表 管段编码传递
    affFacName (val) {
      console.log(val)
      this.form.affiliatedFacilities = val.properties.name
    },
    // 定位功能
    localAdr (val) {
      fitBounds(val)
      highlight(val)
    },
    // 管线点击点击定位功能
    pipeClickLocation () {
      // console.log('val')
      // this.selectPipeLine()
      window.mapManager.clickDialogSwitch = false
      this.tableList = []
      window.map.on('click', (e) => {
        window.mapManager.loadWfsDatas(e.latlng).then((res) => {
          // console.log(res)
          for (let i = 0; i < res.features.length; i++) {
            // console.log(res.features[i].properties)
            this.tableList.push(res.features[i])
          }
          // console.log(this.tableList)
        })
      })
    },
    // 管线搜索
    async pipelineSearch () {
      // this.pipeTable = !this.pipeTable
      this.tableList = []
      this.wfsHelper.clearFilter()
      this.wfsHelper.setTypeName(['sewer:pipeline'])
      if (this.form.pipeName) {
        this.wfsHelper.addLike('name', this.form.pipeName)
      }
      // this.wfsHelper.addEquals('type', '\'' + this.form.pipeName + '\'')
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.total = res.totalFeatures
        // console.log(res.features)
        this.tableList = res.features
      }
      this.wfsHelper = new WfsHelper()
    },
    // 分页功能 currentPage 改变时会触发
    handlePage (val) {
      // console.log(val)
      this.currentPage = val
    },
    // 分页功能 pageSize 改变时会触发
    handleSizeChange (val) {
      // console.log(val)
      this.pageSize = val
    },
    // 点击确认
    confirm () {
      console.log('点击确定选择完成')
      eventBus.$emit('section-search', true)
    }
  }
}
</script>

<style lang="less" scoped>
    /*/deep/ .el-input {*/
    /*    width: 0.74353rem;*/
    /*}*/

    .pipe-line-search {
        display: flex;
        align-items: center;

        .el-button {
            margin: 0 15px;
        }
    }

    .pipe-table {
        display: flex;
        align-items: center;
        justify-content: space-around;

        /deep/ .el-card {
            width: 1.39523rem;
            max-width: 1.39523rem;
            height: 1.9343rem;
            max-height: 1.9343rem;

            .el-table {
                margin: 0.07345rem 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

@@ -193,6 +193,7 @@
      // }
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.total = res.totalFeatures
        this.list = res.features

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

@@ -1,49 +1,47 @@
<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"
                                  @change="redioChange(item.name)">
                            <span class="levelOfRisk-type">{{ item.name }}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-button type="primary" small @click="dialogVisibleChange">事件上报</el-button>
                <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>
            <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"
                              @change="redioChange(item.name)">
                        <span class="levelOfRisk-type">{{ item.name }}</span>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-button type="primary" small @click="dialogVisibleChange">事件上报</el-button>
            <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>
        <el-scrollbar style="height:286.22px">
            <!--            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''" @click="accordPopup(item)">-->
@@ -92,19 +90,16 @@
        </el-scrollbar>
        <div class="event-report">
            <el-dialog
                    custom-class="el-dialog--center"
                    custom-class="event-report-dialog"
                    title="事件上报"
                    :visible.sync="dialogVisible"
                    :append-to-body="true"
                    :modal="false"
                    v-dialogDragBottom
                    v-dialogDrag
            >
                <EventsReported></EventsReported>
            </el-dialog>
        </div>
<!--        <Dialog ref="EReported" title="事件上报2">-->
<!--            <EventsReported></EventsReported>-->
<!--        </Dialog>-->
    </div>
</template>

@@ -116,14 +111,11 @@
import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling'
import eventBus from '../../../../eventBus'
import EventsReported from '../../../../components/base-page/enterprise-emergency/EventsReported'

// import Dialog from '../../../../views/popup/Dialog'
import EventsReported from '../../../base-page/enterprise-emergency/events-reported/EventsReported'

export default {
  name: 'EventQuery',
  components: {
    // Dialog,
    EventsReported
  },
  data () {
@@ -228,18 +220,20 @@
</script>

<style lang="less" scoped>
    /*/deep/ .event-report-dialog {*/
    /*    left: 3rem;*/
    /*    top: 1rem;*/
    /*}*/
    /*.event-report {*/
        /deep/ .el-dialog--center {
            /*left: 2rem !important;*/
            margin-left: 2rem !important;
            margin-top: 0.73979rem !important;
            /*bottom: 0 !important;*/
        }
    //}
    /*.event-report {*/
    /deep/ .el-dialog {
            /*width: 30%;*/
            width: 550px;
        /deep/ .el-dialog {
            width: 3.343545rem;
        }
    /*}*/

    /deep/ .event-report-dialog {
        left: 3rem;
        top: 1rem;
        margin-top: 2rem;
        margin-left: 2rem;
    }
</style>

 src/views/MapTemplate.vue

@@ -44,7 +44,7 @@
import Emergency from '@components/emergency/index'
import MapManager from '../components/helpers/MapManager'
import Message from '@components/message/index'
import EventsReported from '../components/base-page/enterprise-emergency/EventsReported'
import EventsReported from '../components/base-page/enterprise-emergency/events-reported/EventsReported'

export default {
  name: 'MapTemplate',