| | |
| | | <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 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-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-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 :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-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-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" |
| | |
| | | </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="带出事件类型,事件位置,事件单位,事件时间等字段自动生产一部分描述"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="local-box"> |
| | | <PositionChange :location="location" @localCation="getlocalCation"></PositionChange> |
| | | <PositionChange :location="location" @localCation="getLocalCation"></PositionChange> |
| | | </div> |
| | | <div class="file-box"> |
| | | <PipelineFile></PipelineFile> |
| | |
| | | <script> |
| | | import '../../../utils/dragBoxes' |
| | | import eventBus from '../../../eventBus' |
| | | // 引入组件 |
| | | import PositionChange from './PositionChange' |
| | | import PipelineFile from './PipelineFile' |
| | | |
| | |
| | | return { |
| | | // 判断弹框是否能展示 temp=>临时true 开发 |
| | | eventsReported: false, |
| | | // eventsReported: true, |
| | | saveSuccess: false, |
| | | // 表单绑定数据 |
| | | ruleForm: { |
| | | // 事件名称 绑定数据 |
| | |
| | | // 事件类型可选择数据radio 绑定数据 |
| | | eventOfTypeList: [ |
| | | { |
| | | name: '待补充', |
| | | name: '海(水)上溢油污染', |
| | | value: 1 |
| | | }, |
| | | { |
| | | name: '待补充', |
| | | name: '油气管道泄漏污染', |
| | | value: 2 |
| | | }, |
| | | { |
| | | name: '待补充', |
| | | name: '辐射污染', |
| | | value: 3 |
| | | }, |
| | | { |
| | | name: '生态环境破坏', |
| | | value: 4 |
| | | }, |
| | | { |
| | | name: '其他', |
| | | value: 5 |
| | | } |
| | | ], |
| | | // 事件等级 |
| | |
| | | // 接收人员 |
| | | receiveOne: '' |
| | | }, |
| | | // 上传列表 |
| | | fileList: [], |
| | | // 上传地址 |
| | | uploadAction: '', |
| | | // 表单验证 |
| | | rules: { |
| | | // 事件名称校验 |
| | |
| | | }, |
| | | // 描述 接收 => 展示/隐藏 |
| | | wayTo: false, |
| | | location: false, |
| | | // 上传列表 |
| | | fileList: [], |
| | | // 上传地址 |
| | | uploadAction: '', |
| | | getLocalInfo: '' |
| | | // 控制显示定位二级页面展示/隐藏 |
| | | location: false |
| | | } |
| | | }, |
| | | mounted () { |
| | |
| | | }, |
| | | methods: { |
| | | // 消息推送 选择推送的对象 |
| | | infotsChange () { |
| | | infoChange () { |
| | | if (this.ruleForm.beingPushed.indexOf('短信推送') > -1 || this.ruleForm.beingPushed.indexOf('手机应用推送') > -1) { |
| | | this.wayTo = true |
| | | } else { |
| | |
| | | eventBus.$emit('tab-change', 'first') |
| | | }, |
| | | // 接收子组件 传递 数据 进行 二级 附属框的显示/隐藏 |
| | | getlocalCation (value) { |
| | | getLocalCation (value) { |
| | | // console.log(value) |
| | | this.location = value |
| | | }, |
| | |
| | | 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.$refs[formName].resetFields() |
| | | }, |
| | | // 点击关闭 事件上报 |
| | | circlePopup () { |
| | | this.eventsReported = false |
| | | }, |
| | | // form表单的取消按钮点击事件 重置信息 |
| | | resetForm (formName) { |
| | | this.$refs[formName].resetFields() |
| | | this.eventsReported = false |
| | | }, |
| | | // 点击上传 的取消上传事件 |
| | | 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}?`) |
| | | this.circlePopup() |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | |
| | | .way-to { |
| | | /deep/ .el-form-item__content { |
| | | display: flex; |
| | | } |
| | | } |
| | | |
| | | /deep/ .form-popup { |
| | | margin: 0 15px; |
| | |
| | | .report-box { |
| | | min-width: 3.4674324rem; |
| | | max-width: 3.4674324rem; |
| | | |
| | | .public-bounced-title { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | color: #00fff6 !important; |
| | | } |
| | | |
| | | /deep/ .el-icon-time:before { |
| | | content: " "; |
| | | } |
| | | |
| | | /deep/ input { |
| | | /*width: 145px;*/ |
| | | border-radius: 0; |