From 08271621c9a7096cc29a3cfeeb67b772b13a4dfd Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期三, 26 五月 2021 21:27:42 +0800 Subject: [PATCH] 事件上报页面修改 --- src/components/base-page/enterprise-emergency/EventsReported.vue | 506 ++++++++++++++++++++++++++----------------------------- 1 files changed, 242 insertions(+), 264 deletions(-) diff --git a/src/components/base-page/enterprise-emergency/EventsReported.vue b/src/components/base-page/enterprise-emergency/EventsReported.vue index 66beb36..fcc52d7 100644 --- a/src/components/base-page/enterprise-emergency/EventsReported.vue +++ b/src/components/base-page/enterprise-emergency/EventsReported.vue @@ -1,157 +1,161 @@ <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: { // 浜嬩欢鍚嶇О 缁戝畾鏁版嵁 @@ -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> -- Gitblit v1.8.0