企业应急-事件处置-周边资源信息

yangdelong

2021-05-28 038d3b71ed121785df9476ea404dc4b12ad3ff8c

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

@@ -3,36 +3,44 @@
        <div class="report-box map-background">
            <div class="public-bounced-title panel-title">
                <span>事件上报</span>
                <i class="el-icon-close"></i>
                <i class="el-icon-close" @click="circlePopup"></i>
            </div>
            <div class="form-popup">
                <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-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-radio v-for="(item,index) in ruleForm.eventOfTypeList" :label="item.value" :key="index">
                                <span>{{ item.name }}</span>
                            </el-radio>
                            <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-form-item label="事件分级" prop="eventOfLevel">
                        <el-radio-group v-model="ruleForm.eventOfLevel">
                            <el-radio v-for="(item,index) in ruleForm.eventOfLevelList" :label="item.value"
                                      :key="index">
                                <span>{{ item.name }}</span>
                            </el-radio>
                            <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-select v-model="ruleForm.unit" placeholder="单位,装置选择">
                                    <el-option
                                            v-for="item in ruleForm.unitList"
                                            :key="item.value"
@@ -48,7 +56,7 @@
                                <el-date-picker
                                        v-model="ruleForm.atTime"
                                        type="datetime"
                                        placeholder="选择日期时间">
                                        placeholder="年/月/日">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
@@ -94,19 +102,15 @@
                        <el-upload
                                class="upload-demo"
                                action="uploadAction"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed"
                                :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="infotsChange">
                        <el-checkbox-group v-model="ruleForm.beingPushed" @change="infoChange">
                            <el-checkbox v-for="item in ruleForm.beingPushList"
                                         :key="item.name"
                                         :label="item.name"
@@ -115,15 +119,15 @@
                        </el-checkbox-group>
                    </el-form-item>
                    <!--            // 描述 接收 展示、隐藏-->
                    <div v-show="wayTo">
                    <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="desc">
                            <el-input type="textarea" resize="none" v-model="ruleForm.desc"
                        <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>
@@ -135,19 +139,18 @@
                </el-form>
            </div>
        </div>
<!--        <div class="side-popup map-background">-->
            <PositionChange :location="location"></PositionChange>
<!--        </div>-->
<!--        <div class="pipeline-file map-background">-->
        <div class="local-box">
            <PositionChange :location="location" @localCation="getLocalCation"></PositionChange>
        </div>
        <div class="file-box">
            <PipelineFile></PipelineFile>
<!--        </div>-->
        </div>
    </div>
</template>

<script>
import '../../../utils/dragBoxes'
import eventBus from '../../../eventBus'
import DisposalEvent from './DisposalEvent'
// 引入组件
import PositionChange from './PositionChange'
import PipelineFile from './PipelineFile'

@@ -159,10 +162,8 @@
  },
  data () {
    return {
      // 判断弹框是否能展示
      // 判断弹框是否能展示 temp=>临时true 开发
      eventsReported: false,
      // eventsReported: true,
      saveSuccess: false,
      // 表单绑定数据
      ruleForm: {
        // 事件名称 绑定数据
@@ -172,16 +173,24 @@
        // 事件类型可选择数据radio 绑定数据
        eventOfTypeList: [
          {
            name: '待补充',
            name: '海(水)上溢油污染',
            value: 1
          },
          {
            name: '待补充',
            name: '油气管道泄漏污染',
            value: 2
          },
          {
            name: '待补充',
            name: '辐射污染',
            value: 3
          },
          {
            name: '生态环境破坏',
            value: 4
          },
          {
            name: '其他',
            value: 5
          }
        ],
        // 事件等级
@@ -189,16 +198,28 @@
        // 事件等级可选择数据radio 绑定数据
        eventOfLevelList: [
          {
            name: '待补充',
            name: '特别重大环境事件',
            value: 1
          },
          {
            name: '待补充',
            name: '重大环境事件',
            value: 2
          },
          {
            name: '待补充',
            name: '较大环境事件',
            value: 3
          },
          {
            name: '一般A级',
            value: 4
          },
          {
            name: '一般B级',
            value: 5
          },
          {
            name: '一般C级',
            value: 6
          }
        ],
        // 事发单位 绑定数据值
@@ -235,8 +256,16 @@
            name: '手机应用推送',
            value: false
          }
        ]
        ],
        // 事件描述
        desc: '',
        // 接收人员
        receiveOne: ''
      },
      // 上传列表
      fileList: [],
      // 上传地址
      uploadAction: '',
      // 表单验证
      rules: {
        // 事件名称校验
@@ -302,85 +331,67 @@
      },
      // 描述 接收 => 展示/隐藏
      wayTo: false,
      location: false,
      // 上传列表
      fileList: [],
      // 上传地址
      uploadAction: ''
      // 控制显示定位二级页面展示/隐藏
      location: false
    }
  },
  mounted () {
    // 点击确认
    eventBus.$on('local-cation', (obj) => {
      this.location = obj
    })
    eventBus.$on('start-analysis', (obj) => {
      this.eventsReported = obj
    })
  },
  methods: {
    // 消息推送 选择推送的对象
    infotsChange () {
    infoChange () {
      if (this.ruleForm.beingPushed.indexOf('短信推送') > -1 || this.ruleForm.beingPushed.indexOf('手机应用推送') > -1) {
        // console.log('包含该元素')
        this.wayTo = true
      } else {
        // console.log('不包含该元素')
        this.wayTo = false
      }
    },
    // 点击定位 进行位置选择
    locationInfo () {
      // console.log('位置信息选择')
      // 父组件 传递数据控制二级附属框的显示隐藏
      this.location = !this.location
      // 传递 数据 控制 三级附属框的隐藏
      eventBus.$emit('pipelineFile-choose', false)
      // 通过 bus 控制tab 栏 显示 哪一个 传递数据规定 每次重新选择定位 都指定 选择第一个开始
      eventBus.$emit('tab-change', 'first')
    },
    // 点击上传 的取消上传事件
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击上传 的上传事件
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    // 接收子组件 传递 数据 进行 二级 附属框的显示/隐藏
    getLocalCation (value) {
      // console.log(value)
      this.location = value
    },
    // 表单的确认按钮点击事件
    submitForm (formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!')
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })

      // temp临时
      // window.mapManager.clickDialogSwitch = false
      // this.eventsReported = false
      // eventBus.$emit('events-reported', true)

      // this.eventsReported = false
      // this.saveSuccess = true

      // temp 临时方法2
      window.$layer.open({
        content: {
          comp: DisposalEvent,
          parent: this,
          data: { // 传递的参数
            // info: this.info
          }
        },
        title: '事件处置'
      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()
    },
    // 处置分析
    // DisposalAnalysisContinued
    disposalAnalysis () {
      this.saveSuccess = false
      eventBus.$emit('events-reported', true)
    // 点击关闭 事件上报
    circlePopup () {
      this.eventsReported = false
    },
    // form表单的取消按钮点击事件 重置信息
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.eventsReported = false
      this.circlePopup()
    }
  }
}
@@ -388,15 +399,27 @@

<style lang="less" scoped>

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

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

    .report-incident {
        position: absolute;
        display: inline-flex;
        overflow: hidden;
        top: 0.42979rem;
        left: 0.14583rem;
        z-index: 500;
        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;
@@ -435,6 +458,10 @@
        color: #00fff6 !important;
    }

    /deep/ .el-icon-time:before {
        content: " ";
    }

    /deep/ input {
        /*width: 145px;*/
        border-radius: 0;