派生自 wuyushui/SewerAndRainNetwork

seatonwan9
2021-05-31 d4fca49a4b70fe60c730d7e32e2035153a91fcc5
src/components/base-page/enterprise-emergency/events-reported/EventsReported.vue
@@ -1,147 +1,147 @@
<template>
    <div class="event-report">
        <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-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" 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-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" size="small" @click="submitForm('ruleForm')">确认</el-button>
                <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
        <el-dialog
                custom-class="event-report-dialog"
                title="事发位置定位"
                :visible.sync="dialogLocation"
                :append-to-body="true"
                :modal="false"
                v-dialogDrag
        >
            <ReportLocation></ReportLocation>
        </el-dialog>
    </div>
  <div class="event-report">
    <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-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" 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-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" size="small" @click="submitForm('ruleForm')">确认</el-button>
        <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        custom-class="event-report-dialog"
        title="事发位置定位"
        :visible.sync="dialogLocation"
        :append-to-body="true"
        :modal="false"
        v-dialogDrag
    >
      <ReportLocation></ReportLocation>
    </el-dialog>
  </div>
</template>
<!--        :rules="rules"-->
<!--        :show-close="false"-->
@@ -376,90 +376,85 @@
<style lang="less" scoped>
    /*/deep/ .el-dialog .el-dialog--center {*/
    /*    margin-top: 1rem !important;*/
    /*    margin-left: 6.4rem !important;*/
    /*}*/
/deep/ .event-report-dialog {
  left: 5rem;
  top: 1rem;
  margin-top: 2rem;
  margin-left: 2rem;
}
    /deep/ .event-report-dialog {
        left: 5rem;
        top: 1rem;
        margin-top: 2rem;
        margin-left: 2rem;
    }
/deep/ .el-dialog {
  left: 5rem;
  top: 1rem;
  width: 3.087834rem;
}
    /deep/ .el-dialog {
        left: 5rem;
        top: 1rem;
        width: 3.087834rem;
    }
.event-report {
  margin: 0 5px !important;
}
    .event-report {
        margin: 0 5px !important;
    }
.way-to {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
    .way-to {
        /deep/ .el-form-item__content {
            display: flex;
        }
    }
/deep/ .el-form-item {
  margin: 2px 0 !important;
  color: #00fff6 !important;
}
    /deep/ .el-form-item {
        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;
  background-color: rgba(0, 255, 246, 0.14);
  outline: none;
  font-size: 0.01rem;
}
    /deep/ .el-textarea__inner {
        height: 0.28rem !important;
        max-height: 0.45rem !important;
        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/ .el-checkbox__label {
        color: #00fff6 !important;
    }
/deep/ .el-icon-time:before {
  content: " ";
}
    /deep/ .el-icon-time:before {
        content: " ";
    }
/deep/ input {
  border-radius: 0;
  background-color: rgba(0, 255, 246, 0.14);
  border: solid 1px #00fff6;
  color: #C0C4CC;
  font-size: 0.01rem;
}
    /deep/ input {
        border-radius: 0;
        background-color: rgba(0, 255, 246, 0.14);
        border: solid 1px #00fff6;
        color: #C0C4CC;
        font-size: 0.01rem;
    }
/deep/ .el-input.is-disabled .el-input__inner {
  color: #C0C4CC;
  font-size: 0.01rem;
  border-radius: 4px;
  background: @background-color;
  border-color: @color;
}
    /deep/ .el-input.is-disabled .el-input__inner {
        color: #C0C4CC;
        font-size: 0.01rem;
        border-radius: 4px;
        background: @background-color;
        border-color: @color;
    }
/deep/ .el-input__inner {
  height: 0.2rem !important;
  border-radius: 5px;
  background: rgba(0, 16, 30, 0.5);
}
    /deep/ .el-input__inner {
        height: 0.2rem !important;
        border-radius: 5px;
        background: rgba(0, 16, 30, 0.5);
    }
/deep/ .el-form-item__label {
  color: @color;
}
    /deep/ .el-form-item__label {
        color: @color;
    }
/deep/ .el-radio__label {
  color: @color;
}
    /deep/ .el-radio__label {
        color: @color;
    }
    .confirmCancel {
        text-align: right;
        margin: 0.071234rem !important;
    }
.confirmCancel {
  text-align: right;
  margin: 0.071234rem !important;
}
</style>