派生自 wuyushui/SewerAndRainNetwork

陈泽平
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>