事件上报页面修改

陈泽平

2021-05-26 2d117e34a857890400ebfa00b338f5649c38b5cb

事件上报页面修改

 public/assets/images/map/emergency/file.png

 public/assets/images/map/emergency/fold.png

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

New file
@@ -0,0 +1,489 @@
<template>
    <!--    <div class="event-report">-->
<!--    <el-dialog-->
<!--            custom-class="event-report-dialog"-->
<!--            title="事件上报"-->
<!--            :visible.sync="dialogVisible"-->
<!--            :append-to-body="true"-->
<!--            :modal="false"-->
<!--            v-dialogDragBottom-->
<!--    >-->
        <el-form :model="ruleForm" :rules="rules" 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">
                            <!--                            <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>-->
    <!--    </div>-->
</template>

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

export default {
  name: 'EventsReported',
  data () {
    return {
      // 判断弹框是否能展示 temp=>临时true 开发
      dialogVisible: false,
      // 表单绑定数据
      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,
      // 控制显示定位二级页面展示/隐藏
      location: false
    }
  },
  methods: {
    // 消息推送 选择推送的对象
    infoChange () {
      if (this.ruleForm.beingPushed.indexOf('短信推送') > -1 || this.ruleForm.beingPushed.indexOf('手机应用推送') > -1) {
        this.wayTo = true
      } else {
        this.wayTo = false
      }
    },
    // 点击定位 进行位置选择
    locationInfo () {
      // 父组件 传递数据控制二级附属框的显示隐藏
      this.location = !this.location
      // 传递 数据 控制 三级附属框的隐藏
      eventBus.$emit('pipelineFile-choose', false)
      // 通过 bus 控制tab 栏 显示 哪一个 传递数据规定 每次重新选择定位 都指定 选择第一个开始
      eventBus.$emit('tab-change', 'first')
    },
    // 接收子组件 传递 数据 进行 二级 附属框的显示/隐藏
    getLocalCation (value) {
      // console.log(value)
      this.location = value
    },
    // 表单的确认按钮点击事件
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.$message({
            message: '事件上报提交成功',
            type: 'success'
          })
        } else {
          this.$message('事件上报提交失败')
          return false
        }
      })
      this.circlePopup()
      this.$refs[formName].resetFields()
    },
    // 点击关闭 事件上报
    circlePopup () {
      this.eventsReported = false
    },
    // form表单的取消按钮点击事件 重置信息
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.circlePopup()
    }
  }
}
</script>

<style lang="less" scoped>

    .event-report-dialog {

    }

    /deep/ .el-dialog {
        width: 30%;
    }

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

    /deep/ .form-popup {
        margin: 0 15px;
    }

    .report-incident {
        position: absolute;
        top: 0.42979rem;
        left: 3.14583rem;
        z-index: 999;
        display: flex;

        .report-box {
            min-width: 3.4674324rem;
            max-width: 3.4674324rem;

            .public-bounced-title {
                display: flex;
                align-items: center;
                justify-content: space-between;

                span {
                    color: #f4f7ff;
                    margin: 0 15px;
                    font-size: 14px;
                }

                i {
                    color: #C0C4CC;
                    margin: 0 15px;
                    font-size: 22px;
                    cursor: pointer;
                }
            }
        }
    }

    /deep/ .el-form-item {
        margin: 10px 0;
    }

    /deep/ .el-textarea__inner {
        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 {
        /*width: 145px;*/
        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 {
        /*width: 145px;*/
        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: 15px;
        /*display: flex;*/
        /*justify-content: flex-end;*/
    }
</style>

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

@@ -1,6 +1,6 @@
<template>
    <div class="pipeline-file map-background" v-show="pipelineFile">
        <el-row style="margin: 0 15px">
        <el-row style="margin: 5px 15px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-col :span="12">
                    <el-form-item label="管线名称">
@@ -22,11 +22,32 @@
                </el-col>
            </el-form>
        </el-row>
        <div v-for="(item,index) in folderList" :key="index">
            <div class="fold-box">
                <img :src="item.fold" alt="" @click="fileAccord(item)"/>
                <span @click="fileAccord(item)">{{ item.introduce }}</span>
            </div>
            <div v-for="(ite,ind) in item.items" :key="ind" v-show="item.fileCode" class="file">
                <!--                <el-col :span="12">-->
                <div class="file-left">
                    <img :src="ite.file" alt="" @click="codeAccord(ite)"/>
                    <span @click="codeAccord(ite)">{{ite.introduce}}</span>
                </div>
                <div class="file-right">
                    <span v-show="ite.fileCode">{{item.code}}</span>
                </div>
                <!--                </el-col>-->
                <!--                <el-col :span="12">-->
                <!--                </el-col>-->
            </div>
        </div>
    </div>
</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'

export default {
  name: 'PipelineFile',
@@ -36,7 +57,49 @@
      form: {
        pipeName: '',
        pipeCode: ''
      }
      },
      folderList: [
        {
          fold: foldPng,
          introduce: '生产一区',
          code: '400001',
          fileCode: false,
          items: [
            {
              file: filePng,
              introduce: '管线A',
              code: '1000001',
              fileCode: false
            },
            {
              file: filePng,
              introduce: '管线B',
              code: '2000002',
              fileCode: false
            }
          ]
        },
        {
          fold: foldPng,
          introduce: '生产二区',
          code: '400002',
          fileCode: false,
          items: [
            {
              file: filePng,
              introduce: '管线C',
              code: '3000003',
              fileCode: false
            },
            {
              file: filePng,
              introduce: '管线D',
              code: '4000004',
              fileCode: false
            }
          ]
        }
      ]
    }
  },
  mounted () {
@@ -44,17 +107,27 @@
      // console.log(obj)
      this.pipelineFile = obj
    })
  },
  methods: {
    fileAccord (item) {
      item.fileCode = !item.fileCode
    },
    codeAccord (item) {
      item.fileCode = !item.fileCode
    }
  }
}
</script>

<style lang="less" scoped>
    .pipeline-file {
        min-width: 2.94532rem;
        min-width: 1.94532rem;
        max-width: 1.94532rem;
    }

    /*/deep/ .el-input {*/
    /*    width: 65%;*/
    /*    margin: 0 auto;*/
    /*}*/
    .file {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
</style>

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

@@ -1,6 +1,6 @@
<template>
    <div class="side-box map-background" v-show="location">
        <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tabs v-model="activeName">
            <el-tab-pane label="点击定位" name="first">
                <div class="click-location">
                    <el-input v-model="clickLocation"></el-input>
@@ -10,26 +10,30 @@
            <el-tab-pane label="管段定位" name="second">
                <div class="place">
                    <div class="place-top">
                        <div class="place-left">
                            <el-form :model="linePos" label-width="90px">
                                <el-form-item label="管线名称:">
                                    <el-input v-model="linePos.lineName"></el-input>
                                </el-form-item>
                                <el-form-item label="附属设施:">
                                    <el-select v-model="linePos.affFac">
                                        <el-option
                                                v-for="item in linePos.affFacList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="place-right">
                            <el-button type="primary" size="small" @click="fileChoose">搜索</el-button>
                        </div>
                        <!--                        <div class="place-left">-->
                        <el-form :model="linePos" label-width="90px">
                            <el-row class="elrow">
                                <el-col :span="16">
                                    <el-form-item label="管线名称:">
                                        <el-input v-model="linePos.lineName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" style="vertical-align: middle !important;">
                                    <el-button type="primary" size="mini" @click="fileChoose">...</el-button>
                                    <el-button type="primary" size="mini" @click="tableAccod">搜索</el-button>
                                </el-col>
                            </el-row>
                            <el-form-item label="附属设施:">
                                <el-select v-model="linePos.affFac">
                                    <el-option
                                            v-for="item in linePos.affFacList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="place-bottom">
                        <el-button type="primary" @click="confirm">确认</el-button>
@@ -59,6 +63,38 @@
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="pipe-table" v-show="pipeTable">
            <el-table
                    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="number"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="seares"
                        label="搜索结果">
                </el-table-column>
                <el-table-column
                        prop="restype"
                        label="结果类型">
                </el-table-column>
            </el-table>
<!--            <el-card class="footer-page" v-if="total >= 0">-->
                <el-pagination
                        mini
                        @size-change="handleSizeChange"
                        @current-change="handlePage"
                        :page-size=pageSize
                        :current-page="currentPage"
                        layout="prev, pager, next"
                        :total=total
                        class="warnPagination"
                >
                </el-pagination>
<!--            </el-card>-->
        </div>
    </div>
</template>

@@ -70,8 +106,17 @@
  props: ['location'],
  data () {
    return {
      // 接收数据 控制页面展示/隐藏
      pipelineFile: false,
      // active tab切换
      activeName: 'first',
      // 管段查询table
      pipeTable: false,
      // 分页功能
      pageSize: 3,
      total: 0,
      currentPage: 1,
      // 点击定位绑定数据
      clickLocation: '',
      // 经纬度定位
      LongLatPos: {
@@ -93,7 +138,35 @@
          }
        ]
      },
      fileChoChange: false
      fileChoChange: false,
      tableData: [
        {
          number: 1,
          seares: '20路雨水管线',
          restype: '管线名称'
        }, {
          number: 2,
          seares: '20路雨水管线',
          restype: '管线名称'
        }, {
          number: 3,
          seares: '100020',
          restype: '管段编码'
        },
        {
          number: 4,
          seares: '20路雨水管线',
          restype: '管线名称'
        }, {
          number: 5,
          seares: '20路雨水管线',
          restype: '管线名称'
        }, {
          number: 6,
          seares: '100020',
          restype: '管段编码'
        }
      ]
    }
  },
  mounted () {
@@ -103,8 +176,16 @@
    })
  },
  methods: {
    // tab 切换用于判断
    handleClick (tab) {},
    // 分页功能 currentPage 改变时会触发
    handlePage (val) {
      // console.log(val)
      this.currentPage = val
    },
    // 分页功能 pageSize 改变时会触发
    handleSizeChange (val) {
      // console.log(val)
      this.pageSize = val
    },
    // 点击文件选择 显示第三级页面 进行管线/段选择
    fileChoose () {
      this.fileChoChange = !this.fileChoChange
@@ -116,12 +197,70 @@
      this.$emit('localCation', false)
      // 通过bus 控制三级附属弹框的隐藏
      eventBus.$emit('pipelineFile-choose', false)
    },
    // 管段查询表格展示
    tableAccod () {
      this.pipeTable = !this.pipeTable
    }
  }
}
</script>

<style lang="less" scoped>
    /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;
        }
    }

    .elrow {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .side-box {
        min-width: 1.94532rem;
@@ -133,7 +272,7 @@
        text-align: center;

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


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

@@ -371,14 +371,18 @@
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
          // alert('submit!')
          this.$message({
            message: '事件上报提交成功',
            type: 'success'
          })
        } else {
          console.log('error submit!!')
          this.$message('事件上报提交失败')
          return false
        }
      })
      this.circlePopup()
      this.ruleForm.nameOfEvent = this.ruleForm.eventOfType = ''
      this.$refs[formName].resetFields()
    },
    // 点击关闭 事件上报
    circlePopup () {

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

@@ -32,6 +32,9 @@
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-row>
                    <el-button type="primary" small @click="dialogVisible = !dialogVisible">事件上报</el-button>
                </el-row>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
@@ -88,6 +91,39 @@
                </div>
            </div>
        </el-scrollbar>
<!--        :show-close="false"-->
        <div class="event-report">
            <el-dialog
                    custom-class="event-report-dialog"
                    title="事件上报"
                    :visible.sync="dialogVisible"
                    :append-to-body="true"
                    :modal="false"
                    v-dialogDragBottom
            >
                <EventsReported></EventsReported>
            </el-dialog>
            <el-dialog
                    custom-class="event-report-dialog"
                    title="选择顺序"
                    :visible.sync="dialogVisible"
                    :append-to-body="true"
                    :modal="false"
                    v-dialogDragBottom
            >
                <span>local选择</span>
            </el-dialog>
            <el-dialog
                    custom-class="event-report-dialog"
                    title="文件选择"
                    :visible.sync="dialogVisible"
                    :append-to-body="true"
                    :modal="false"
                    v-dialogDragBottom
            >
                <span>file</span>
            </el-dialog>
        </div>
    </div>
</template>

@@ -99,13 +135,17 @@
import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
import eventBus from '../../../../eventBus'

import EventsReported from '../../../../components/base-page/enterprise-emergency/EventsReported'

export default {
  name: 'EventQuery',
  components: {
    // DisposalEvent
    EventsReported
  },
  data () {
    return {
      dialogVisible: false,
      reportIncident: false,
      list: [],
      total: 0,
@@ -196,4 +236,13 @@
</script>

<style lang="less" scoped>
    .event-report {
        display: flex;
    }
    /*/deep/ .el-row {*/
    /*    text-align: right;*/
    /*}*/
    /deep/ .el-dialog {
        width: 30%;
    }
</style>

 src/components/panel/topicSearch/sewers-select/SewersHistory.vue

@@ -35,7 +35,7 @@
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
            <div class="environmental-risk-list hover">
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
@@ -43,7 +43,7 @@
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
            <div class="environmental-risk-list hover">
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
@@ -148,8 +148,9 @@
    }
  },
  methods: {
    handlePage () {

    // 分页
    handlePage (val) {
      console.log(val)
    },
    handlePipelineType (val) {
      console.log(val)

 src/views/MapTemplate.vue

@@ -20,6 +20,7 @@
            <ReportIncident></ReportIncident>
        <Emergency ref="Emergency"></Emergency>
        <Message></Message>
        <EventsReported></EventsReported>
    </div>
</template>

@@ -43,6 +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'

export default {
  name: 'MapTemplate',
@@ -59,7 +61,8 @@
    // PublicBounced,
    Emergency,
    Message,
    ReportIncident
    ReportIncident,
    EventsReported
  },
  data () {
    return {