事件上报页面修改

陈泽平

2021-05-26 08271621c9a7096cc29a3cfeeb67b772b13a4dfd

事件上报页面修改

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

@@ -1,14 +1,8 @@
<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">
    <div class="event-report">
<!--        :rules="rules"-->
<!--        :show-close="false"-->
        <el-form :model="ruleForm" ref="ruleForm" label-width="90px" class="search-form">
            <!--            事件名称-->
            <el-form-item class="input-event-name" label="事件名称" prop="nameOfEvent">
                <el-input
@@ -67,7 +61,7 @@
                <!--                事发位置-->
                <el-col :span="12">
                    <el-form-item label="事发位置" prop="positionOf">
                        <el-input v-model="ruleForm.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"
@@ -139,19 +133,29 @@
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
<!--    </el-dialog>-->
    <!--    </div>-->
        <el-dialog
                custom-class="el-dialog--center"
                :visible.sync="dialogLocation"
                :append-to-body="true"
                :modal="false"
                v-dialogDragBottom
        >
            <ReportLocation @locationClick="getlocaltionClick"></ReportLocation>
        </el-dialog>
    </div>
</template>

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

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

export default {
  name: 'EventsReported',
  components: {
    ReportLocation
  },
  data () {
    return {
      // 判断弹框是否能展示 temp=>临时true 开发
      dialogVisible: false,
      // 表单绑定数据
      ruleForm: {
        // 事件名称 绑定数据
@@ -255,75 +259,81 @@
      // 上传地址
      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: []
      },
      // 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
      // 定位位置选择弹框
      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) {
@@ -334,17 +344,7 @@
    },
    // 点击定位 进行位置选择
    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
      this.dialogLocation = !this.dialogLocation
    },
    // 表单的确认按钮点击事件
    submitForm (formName) {
@@ -360,17 +360,11 @@
          return false
        }
      })
      this.circlePopup()
      this.$refs[formName].resetFields()
    },
    // 点击关闭 事件上报
    circlePopup () {
      this.eventsReported = false
    },
    // form表单的取消按钮点击事件 重置信息
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.circlePopup()
    }
  }
}
@@ -378,61 +372,47 @@

<style lang="less" scoped>

    .event-report-dialog {

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

    /deep/ .el-dialog--center {
        /*left: 5.3rem !important;*/
        margin-top: 0.13979rem !important;
        margin-left: 5.5rem !important;
    }

    /*.event-report-dialog {*/
    /*    left: 2rem !important;*/
    /*    top: 0.73979rem !important;*/
    /*}*/

    /deep/ .el-dialog {
        width: 30%;
        width: 20%;
    }
    /deep/.el-dialog__header {
        /*display: none;*/
        /*max-height: 0.05rem !important;*/
        border: none !important;
    }

    .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;
                }
            }
            /*.el-button {*/
            /*    margin-right: 30px;*/
            /*}*/
        }
    }

    /deep/ .el-form-item {
        margin: 10px 0;
        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;
@@ -450,7 +430,6 @@
    }

    /deep/ input {
        /*width: 145px;*/
        border-radius: 0;
        background-color: rgba(0, 255, 246, 0.14);
        border: solid 1px #00fff6;
@@ -468,6 +447,7 @@

    /deep/ .el-input__inner {
        /*width: 145px;*/
        height: 0.2rem !important;
        border-radius: 5px;
        background: rgba(0, 16, 30, 0.5);
    }
@@ -482,8 +462,6 @@

    .confirmCancel {
        text-align: right;
        margin: 15px;
        /*display: flex;*/
        /*justify-content: flex-end;*/
        margin: 0.071234rem !important;
    }
</style>

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

New file
@@ -0,0 +1,139 @@
<template>
    <div class="report-file-box">
        <el-row style="margin: 5px 15px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-col :span="12">
                    <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="">
                            </el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <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="">
                            </el-button>
                        </el-input>
                    </el-form-item>
                </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">
                <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>
            </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: 'ReportFile',
  data () {
    return {
      pipelineFile: false,
      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 () {
    eventBus.$on('pipelineFile-choose', (obj) => {
      // console.log(obj)
      this.pipelineFile = obj
    })
  },
  methods: {
    fileAccord (item) {
      item.fileCode = !item.fileCode
    },
    codeAccord (item) {
      item.fileCode = !item.fileCode
    }
  }
}
</script>

<style lang="less" scoped>

    .file {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    /deep/ .el-input__inner {
        border-radius: 5px;
        background: rgba(0, 16, 30, 0.5);
        border-color: @color;
    }

    /deep/ .el-form-item__label {
        color: @color;
    }

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

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

New file
@@ -0,0 +1,365 @@
<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">
                    <div class="place">
                        <div class="place-top">
                            <!--                        <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.code"
                                                :label="item.name"
                                                :value="item.code">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="place-bottom">
                            <el-button type="primary" @click="confirm">确认</el-button>
                        </div>
                    </div>
                    <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>
                </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">
                        <el-button type="primary" @click="confirm">确认</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog
                custom-class="el-dialog--center"
                :visible.sync="dialogFile"
                :append-to-body="true"
                :modal="false"
                v-dialogDragBottom
        >
            <ReportFile></ReportFile>
        </el-dialog>
    </div>
</template>

<script>
import eventBus from '../../../eventBus'
import ReportFile from '../../../components/base-page/enterprise-emergency/ReportFile'

import { LayerFsss } from '../../../conf/layers/LayerFsss'

export default {
  name: 'ReportLocation',
  components: {
    ReportFile
  },
  data () {
    return {
      dialogFile: false,
      pipelineFile: false,
      // active tab切换
      activeName: 'first',
      // 管段查询table
      pipeTable: false,
      // 分页功能
      pageSize: 3,
      total: 0,
      currentPage: 1,
      // 点击定位绑定数据
      clickLocation: '',
      // 经纬度定位
      LongLatPos: {
        longPos: '',
        latPos: ''
      },
      // 管段定位
      linePos: {
        lineName: '',
        affFac: '',
        affFacList: LayerFsss.layers
      },
      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 () {
    // 接收规定 每次重新选择定位 都指定 选择第一个开始
    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()
    },
    // 分页功能 currentPage 改变时会触发
    handlePage (val) {
      // console.log(val)
      this.currentPage = val
    },
    // 分页功能 pageSize 改变时会触发
    handleSizeChange (val) {
      // console.log(val)
      this.pageSize = val
    },
    // 点击文件选择 显示第三级页面 进行管线/段选择
    fileChoose () {
      this.dialogFile = !this.dialogFile
    },
    // 点击确认按钮事件
    confirm () {
      // 通过子组件向父组件传递数据
      this.$emit('locationClick', this.LongLatPos)
      this.clickLocation = ''
      this.LongLatPos.longPos = ''
      this.LongLatPos.latPos = ''
    },
    // 管段查询表格展示
    tableAccod () {
      this.pipeTable = !this.pipeTable
    }
  }
}
</script>

<style lang="less" scoped>

    /deep/ .el-dialog--center {
        /*left: 2rem !important;*/
        margin-left: 8rem !important;
        margin-top: 0.13979rem !important;
    }

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

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

    #pane-third {
        text-align: center;
    }

    /*/deep/ .el-dialog .el-dialog__header {*/
    /*    display: none;*/
    /*}*/
    /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;
    }

    .event-report-dialog {
        min-width: 1.94532rem;
        max-width: 1.94532rem;
    }

    .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/panel/topicSearch/enterprise-emergency/EventQuery.vue

@@ -32,9 +32,7 @@
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-row>
                    <el-button type="primary" small @click="dialogVisible = !dialogVisible">事件上报</el-button>
                </el-row>
                <el-button type="primary" small @click="dialogVisibleChange">事件上报</el-button>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
@@ -71,7 +69,8 @@
                <div>
                    <h3>
                        <span @click="disposalfx">件名称:XXX事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="startAnalysis">
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="startAnalysis">
                            <span>开始分析</span>
                        </el-button>
                    </h3>
@@ -91,10 +90,9 @@
                </div>
            </div>
        </el-scrollbar>
<!--        :show-close="false"-->
        <div class="event-report">
            <el-dialog
                    custom-class="event-report-dialog"
                    custom-class="el-dialog--center"
                    title="事件上报"
                    :visible.sync="dialogVisible"
                    :append-to-body="true"
@@ -103,27 +101,10 @@
            >
                <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>
<!--        <Dialog ref="EReported" title="事件上报2">-->
<!--            <EventsReported></EventsReported>-->
<!--        </Dialog>-->
    </div>
</template>

@@ -134,13 +115,14 @@

import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
import eventBus from '../../../../eventBus'

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

// import Dialog from '../../../../views/popup/Dialog'

export default {
  name: 'EventQuery',
  components: {
    // DisposalEvent
    // Dialog,
    EventsReported
  },
  data () {
@@ -150,10 +132,6 @@
      list: [],
      total: 0,
      activeNum: -1,
      LayerEvent: {},
      LayerResources: {},
      // items: [LayerEvent, LayerResources],
      // subItems: LayerEntEmer.layers,
      items: [],
      subItems: [],
      form: {
@@ -179,6 +157,9 @@
    // this.wfsHelper = new WfsHelper()
  },
  methods: {
    dialogVisibleChange () {
      this.dialogVisible = !this.dialogVisible
    },
    // 点击事件管理
    accordPopup () {
      eventBus.$emit('disposal-analysis', true)
@@ -236,13 +217,18 @@
</script>

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

 src/components/table/summarySheets.vue

@@ -51,6 +51,7 @@
// import '@/components/plugin/DialogDrag'

import bus from '@/eventBus'

export default {
  name: 'summary-sheet.vue',
  components: {
@@ -130,13 +131,16 @@
  /*width: 850px;*/
  /*height: 265px;*/
  z-index: 500;

  .subtopic{
    display: inline-flex;

    .iconBtn{
      margin-left: 0.03rem;
      border-color:#00fff6;
      color:#00fff6;
    }

    .iconBtn.active-button{
      //border-color:#00fff6 !important;
      //color:#00fff6 !important;
@@ -150,6 +154,7 @@
    top: 15%;
    left: 3rem;
  }

    .animationChange-enter-active, .animationChange-leave-active {
        transition: all 0.5s;
    }
@@ -158,6 +163,7 @@
        opacity: 0;
        transform: translateX(-100px);
    }

  /*color: #fff;*/

  .el-icon-c-scale-to-original {