| | |
| | | <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> |
| | | <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 |
| | | 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-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 :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-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-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-col> |
| | | <!-- 位置描述--> |
| | | <el-col :span="12"> |
| | | <el-form-item label="位置描述" prop="positionDescription"> |
| | | <el-input v-model="ruleForm.positionDescription"></el-input> |
| | | <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> |
| | | </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> |
| | | </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-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>--> |
| | | </el-form> |
| | | <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: { |
| | | // 事件名称 绑定数据 |
| | |
| | | // 上传地址 |
| | | 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) { |
| | |
| | | }, |
| | | // 点击定位 进行位置选择 |
| | | 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) { |
| | |
| | | return false |
| | | } |
| | | }) |
| | | this.circlePopup() |
| | | this.$refs[formName].resetFields() |
| | | }, |
| | | // 点击关闭 事件上报 |
| | | circlePopup () { |
| | | this.eventsReported = false |
| | | }, |
| | | // form表单的取消按钮点击事件 重置信息 |
| | | resetForm (formName) { |
| | | this.$refs[formName].resetFields() |
| | | this.circlePopup() |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <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; |
| | |
| | | } |
| | | |
| | | /deep/ input { |
| | | /*width: 145px;*/ |
| | | border-radius: 0; |
| | | background-color: rgba(0, 255, 246, 0.14); |
| | | border: solid 1px #00fff6; |
| | |
| | | |
| | | /deep/ .el-input__inner { |
| | | /*width: 145px;*/ |
| | | height: 0.2rem !important; |
| | | border-radius: 5px; |
| | | background: rgba(0, 16, 30, 0.5); |
| | | } |
| | |
| | | |
| | | .confirmCancel { |
| | | text-align: right; |
| | | margin: 15px; |
| | | /*display: flex;*/ |
| | | /*justify-content: flex-end;*/ |
| | | margin: 0.071234rem !important; |
| | | } |
| | | </style> |