Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

seatonwan9

2021-05-21 4d265afb3419bd5cedc6f31ab78d570f6917b520

 src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue

@@ -1,39 +1,52 @@
<template>
    <!--    <div class="public-bounced map-background">-->
    <!--        <div class="public-bounced-title panel-title">-->
    <!--            <span>上报事件</span>-->
    <!--            <i class="el-icon-circle-close" @click="closePopup"></i>-->
    <!--        </div>-->
    <div class="public-bounced-content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form">
            <el-form-item label="事件名称" prop="nameEvent" class="input-event-name">
                <el-input v-model="ruleForm.nameEvent" placeholder="将事件命名"></el-input>
<!--    <el-dialog-->
<!--            custom-class="events-reported"-->
<!--            title="上报事件"-->
<!--            :visible.sync="eventsReported"-->
<!--            :append-to-body="true"-->
<!--            :modal="false"-->
<!--            v-dialogDrag-->
<!--    >-->
<!--    </el-dialog>-->
    <div>
        <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="eventType">
                <el-radio-group v-model="ruleForm.eventType">
                    <el-radio v-for="(item,index) in ruleForm.eventTypeList" :label="item.value" :key="index">
            <!--            事件类型-->
            <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-radio-group>
            </el-form-item>
            <el-form-item label="事件等级" prop="eventLevel">
                <el-radio-group v-model="ruleForm.eventLevel">
                    <el-radio v-for="(item,index) in ruleForm.eventLevelList" :label="item.value" :key="index">
            <!--            事件等级-->
            <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-radio-group>
            </el-form-item>
            <el-row>
                <!--                事发单位-->
                <el-col :span="12">
                    <el-form-item label="事发单位" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="单位位置1" value="shanghai"></el-option>
                            <el-option label="单位位置2" value="beijing"></el-option>
                    <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 label="事发时间" prop="region" class="search-panel-item">
                    <el-form-item class="search-panel-item" label="事发时间" prop="atTime">
                        <el-date-picker
                                v-model="ruleForm.atTime"
                                type="datetime"
@@ -43,30 +56,36 @@
                </el-col>
            </el-row>
            <el-row>
                <!--                事发位置-->
                <el-col :span="12">
                    <el-form-item label="事发位置" prop="region" class="search-panel-item">
                        <el-input v-model="ruleForm.name" class="report-input"></el-input>
                    <el-form-item label="事发位置" prop="positionOf">
                        <el-input v-model="ruleForm.positionOf"></el-input>
                    </el-form-item>
                </el-col>
                <!--                位置描述-->
                <el-col :span="12">
                    <el-form-item label="位置描述" prop="name">
                        <el-input v-model="ruleForm.name" class="report-input"></el-input>
                    <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="region" class="search-panel-item">
                        <el-input v-model="ruleForm.name" class="report-input"></el-input>
                    <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="name">
                        <label>自动带出不可修改</label>
                    <el-form-item label="管线类型" prop="lineType">
                        <label>{{ ruleForm.lineTypeText }}</label>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
            <!--             点击上传-->
            <el-form-item label="附件上传" prop="upload">
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
@@ -80,42 +99,55 @@
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <!--            消息推送-->
            <el-form-item label="消息推送" prop="beingPush">
                <el-radio-group v-model="ruleForm.beingPush">
                    <el-radio v-for="(item,index) in ruleForm.beingPushList" :label="item.value" :key="index">
                        <span>{{ item.name }}</span>
                    </el-radio>
                </el-radio-group>
                <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange">
                    <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">
                <el-form-item label="事件描述" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    <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" v-model="ruleForm.desc"></el-input>
                    <el-input type="textarea" resize="none" v-model="ruleForm.desc" placeholder="张三；李四，"></el-input>
                    <el-button type="primary">+</el-button>
                </el-form-item>
            </div>
            <el-form-item>
            <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>
    </div>
    <!--    </div>-->
</template>

<script>
import '@utils/dragBoxes'

import eventBus from '../../../.././eventBus'

export default {
  name: 'ReportPopup',
  data () {
    return {
      flag: false,
      // eventsReported: true,
      eventsReported: false,
      saveSuccess: false,
      // 表单绑定数据
      ruleForm: {
        nameEvent: '',
        eventType: '',
        eventTypeList: [
        // 事件名称 绑定数据
        nameOfEvent: '',
        // 事件类型 绑定数据值
        eventOfType: '',
        // 事件类型可选择数据radio 绑定数据
        eventOfTypeList: [
          {
            name: '待补充',
            value: 1
@@ -129,8 +161,10 @@
            value: 3
          }
        ],
        eventLevel: '',
        eventLevelList: [
        // 事件等级
        eventOfLevel: '',
        // 事件等级可选择数据radio 绑定数据
        eventOfLevelList: [
          {
            name: '待补充',
            value: 1
@@ -144,63 +178,126 @@
            value: 3
          }
        ],
        // 事发单位 绑定数据值
        unit: '',
        unitList: [
          {
            label: '扬子',
            value: '1'
          },
          {
            label: '南京',
            value: '2'
          }
        ],
        // 事发时间 绑定数据
        atTime: '',
        beingPush: '',
        // 事发位置
        positionOf: '',
        // 位置描述
        positionDescription: '',
        // 管线名称
        lineName: '',
        // 管线类型
        lineType: '',
        lineTypeText: '自动带出不可修改',
        // 消息推送
        beingPushed: [],
        beingPushList: [
          {
            name: '短信推送',
            value: 1
            value: false
          },
          {
            name: '手机应用推送',
            value: 2
            value: false
          }
        ]
      },
      fileList: [],
      wayTo: false,
      // 表单验证
      rules: {
        name: [
        // 事件名称校验
        nameOfEvent: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          },
          }
        ],
        // 事件类型校验
        eventOfType: [
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            required: true,
            message: '请选择事件类型',
            trigger: 'blur'
          }
        ],
        region: [
        // 事件等级校验
        eventOfLevel: [
          {
            required: true,
            message: '请选择事件等级',
            trigger: 'blur'
          }
        ],
        // 事发单位 绑定数据值
        unit: [
          {
            required: true,
            message: '请选择活动区域',
            trigger: 'change'
          }
        ],
        resource: [
        // 事发时间
        atTime: [
          {
            required: true,
            message: '请选择活动资源',
            trigger: 'change'
          }
        ],
        desc: [
        // 事件位置校验
        positionOf: [
          {
            required: true,
            message: '请填写活动形式',
            message: '请输入活动位置',
            trigger: 'blur'
          }
        ]
        ],
        // 位置描述校验
        positionDescription: [
          {
            required: true,
            message: '请输入位置描述',
            trigger: 'blur'
      }
        ],
        // 管线名称
        lineName: [],
        // 管线类型
        lineType: []
      },
      wayTo: false,
      // 上传
      fileList: []
    }
  },
  methods: {
    // 消息推送 选择推送的对象
    infotsChange () {
      if (this.ruleForm.beingPushed.indexOf('短信推送') > -1 || this.ruleForm.beingPushed.indexOf('手机应用推送') > -1) {
        // console.log('包含该元素')
        this.wayTo = true
      } else {
        // console.log('不包含该元素')
        this.wayTo = false
      }
    },
    // 点击上传 的取消上传事件
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击上传 的上传事件
    handlePreview (file) {
      console.log(file)
    },
@@ -210,19 +307,30 @@
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    closePopup () {
      this.flags = false
    },
    // 表单的确认按钮点击事件
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!')
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
      // this.eventsReported = false
      // this.saveSuccess = true

      // temp临时
      window.mapManager.clickDialogSwitch = false
      this.eventsReported = false
      eventBus.$emit('events-reported', true)
    },
    // 处置分析
    disposalAnalysis () {
      this.saveSuccess = false
      eventBus.$emit('events-reported', true)
    },
    // form表单的取消按钮点击事件 重置信息
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
@@ -231,31 +339,45 @@
</script>

<style lang="less" scoped>
    .public-bounced {
        z-index: 2000;
        position: absolute;
        top: 15%;
        left: 20%;

    /deep/ .el-form-item {
        margin: 5px 0;
    }

    /deep/ .el-textarea__inner {
        width: 2rem;
        color: darkgrey;
        border: solid 1px #00fff6;
        background-color: rgba(0, 255, 246, 0.14);
        outline: none;
        font-size: 0.01rem;
    }

    /deep/ .el-checkbox__label {
        color: #00fff6 !important;
    }

    /deep/ input {
        /*width: 145px;*/
        border-radius: 0;
        background-color: rgba(0, 255, 246, 0.14);
        border: solid 1px #00fff6;
        color: #C0C4CC;
        font-size: 0.01rem;
        padding: 0 15px;
    }

    /deep/ .input-event-name {
        margin: 15px 0;
        width: 55%;
    /deep/ .el-input.is-disabled .el-input__inner {
        color: #C0C4CC;
        font-size: 0.01rem;
        border-radius: 4px;
        background: @background-color;
        border-color: @color;
    }

        .el-input__inner {
            width: 100%;
    /deep/ .el-input__inner {
        /*width: 145px;*/
            border-radius: 5px;
            background: rgba(0, 16, 30, 0.5);
        }
    }

    /deep/ .el-form-item__label {
@@ -265,4 +387,10 @@
    /deep/ .el-radio__label {
        color: @color;
    }

    .confirmCancel {
        text-align: right;
        /*display: flex;*/
        /*justify-content: flex-end;*/
    }
</style>