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 +++++++++++------------ src/components/table/summarySheets.vue | 170 ++++--- src/components/base-page/enterprise-emergency/ReportLocation.vue | 365 +++++++++++++++++ src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue | 66 +- src/components/base-page/enterprise-emergency/ReportFile.vue | 139 ++++++ 5 files changed, 860 insertions(+), 386 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> diff --git a/src/components/base-page/enterprise-emergency/ReportFile.vue b/src/components/base-page/enterprise-emergency/ReportFile.vue new file mode 100644 index 0000000..efa0e23 --- /dev/null +++ b/src/components/base-page/enterprise-emergency/ReportFile.vue @@ -0,0 +1,139 @@ +<template> + <div class="report-file-box"> + <el-row style="margin: 5px 15px"> + <el-form ref="form" :model="form" label-width="80px"> + <el-col :span="12"> + <el-form-item label="绠$嚎鍚嶇О"> + <el-input v-model="form.pipeName"> + <el-button style="padding-right:10px;" slot="suffix" type="text"> + <img src="../../../../public/assets/images/map/emergency/search.png" alt=""> + </el-button> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="绠℃缂栫爜"> + <el-input v-model="form.pipeCode"> + <el-button style="padding-right:10px;" slot="suffix" type="text"> + <img src="../../../../public/assets/images/map/emergency/search.png" alt=""> + </el-button> + </el-input> + </el-form-item> + </el-col> + </el-form> + </el-row> + <div v-for="(item,index) in folderList" :key="index"> + <div class="fold-box"> + <img :src="item.fold" alt="" @click="fileAccord(item)"/> + <span @click="fileAccord(item)">{{ item.introduce }}</span> + </div> + <div v-for="(ite,ind) in item.items" :key="ind" v-show="item.fileCode" class="file"> + <div class="file-left"> + <img :src="ite.file" alt="" @click="codeAccord(ite)"/> + <span @click="codeAccord(ite)">{{ite.introduce}}</span> + </div> + <div class="file-right"> + <span v-show="ite.fileCode">{{item.code}}</span> + </div> + </div> + </div> + </div> +</template> + +<script> +import eventBus from '../../../eventBus' +import foldPng from '../../../../public/assets/images/map/emergency/fold.png' +import filePng from '../../../../public/assets/images/map/emergency/file.png' + +export default { + name: 'ReportFile', + data () { + return { + pipelineFile: false, + form: { + pipeName: '', + pipeCode: '' + }, + folderList: [ + { + fold: foldPng, + introduce: '鐢熶骇涓�鍖�', + code: '400001', + fileCode: false, + items: [ + { + file: filePng, + introduce: '绠$嚎A', + code: '1000001', + fileCode: false + }, + { + file: filePng, + introduce: '绠$嚎B', + code: '2000002', + fileCode: false + } + ] + }, + { + fold: foldPng, + introduce: '鐢熶骇浜屽尯', + code: '400002', + fileCode: false, + items: [ + { + file: filePng, + introduce: '绠$嚎C', + code: '3000003', + fileCode: false + }, + { + file: filePng, + introduce: '绠$嚎D', + code: '4000004', + fileCode: false + } + ] + } + ] + } + }, + mounted () { + eventBus.$on('pipelineFile-choose', (obj) => { + // console.log(obj) + this.pipelineFile = obj + }) + }, + methods: { + fileAccord (item) { + item.fileCode = !item.fileCode + }, + codeAccord (item) { + item.fileCode = !item.fileCode + } + } +} +</script> + +<style lang="less" scoped> + + .file { + display: flex; + align-items: center; + justify-content: space-evenly; + } + + /deep/ .el-input__inner { + border-radius: 5px; + background: rgba(0, 16, 30, 0.5); + border-color: @color; + } + + /deep/ .el-form-item__label { + color: @color; + } + + /deep/ .el-radio__label { + color: @color; + } +</style> diff --git a/src/components/base-page/enterprise-emergency/ReportLocation.vue b/src/components/base-page/enterprise-emergency/ReportLocation.vue new file mode 100644 index 0000000..cff83dc --- /dev/null +++ b/src/components/base-page/enterprise-emergency/ReportLocation.vue @@ -0,0 +1,365 @@ +<template> + <div class="report-location-box"> + <div class="report-location"> + <el-tabs v-model="activeName"> + <el-tab-pane label="鐐瑰嚮瀹氫綅" name="first"> + <div class="click-location"> + <el-row> + <el-input type="text" v-model="clickLocation" clearable @focus="focusLocation"></el-input> + </el-row> + <el-row> + <el-button type="primary" @click="confirm">纭</el-button> + </el-row> + </div> + </el-tab-pane> + <el-tab-pane label="绠℃瀹氫綅" name="second"> + <div class="place"> + <div class="place-top"> + <!-- <div class="place-left">--> + <el-form :model="linePos" label-width="90px"> + <el-row class="elrow"> + <el-col :span="16"> +<!-- 绠℃缂栫爜--> + <el-form-item label="绠$嚎鍚嶇О:"> + <el-input v-model="linePos.lineName"></el-input> + </el-form-item> + </el-col> + <el-col :span="8" style="vertical-align: middle !important;"> + <el-button type="primary" size="mini" @click="fileChoose">...</el-button> + <el-button type="primary" size="mini" @click="tableAccod">鎼滅储</el-button> + </el-col> + </el-row> + <el-form-item label="闄勫睘璁炬柦:"> + <el-select v-model="linePos.affFac"> + <el-option + v-for="item in linePos.affFacList" + :key="item.code" + :label="item.name" + :value="item.code"> + </el-option> + </el-select> + </el-form-item> + </el-form> + </div> + <div class="place-bottom"> + <el-button type="primary" @click="confirm">纭</el-button> + </div> + </div> + <div class="pipe-table" v-show="pipeTable"> + <el-table + :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" + border + style="width: 100%"> + <el-table-column + prop="number" + label="搴忓彿"> + </el-table-column> + <el-table-column + prop="seares" + label="鎼滅储缁撴灉"> + </el-table-column> + <el-table-column + prop="restype" + label="缁撴灉绫诲瀷"> + </el-table-column> + </el-table> + <!-- <el-card class="footer-page" v-if="total >= 0">--> + <el-pagination + mini + @size-change="handleSizeChange" + @current-change="handlePage" + :page-size=pageSize + :current-page="currentPage" + layout="prev, pager, next" + :total=total + class="warnPagination" + > + </el-pagination> + <!-- </el-card>--> + </div> + </el-tab-pane> + <el-tab-pane label="缁忕含搴﹀畾浣�" name="third"> + <el-row class="place-box"> + <div class="place-left"> + <el-form :model="LongLatPos" label-width="90px"> + <el-form-item label="缁忓害:"> + <el-input v-model="LongLatPos.longPos"></el-input> + </el-form-item> + <el-form-item label="绾害:"> + <el-input v-model="LongLatPos.latPos"></el-input> + </el-form-item> + </el-form> + </div> + <div class="place-right"> + <el-button type="primary" @click="mapPoints">瀹氫綅</el-button> + </div> + </el-row> + <div class="place-bottom"> + <el-button type="primary" @click="confirm">纭</el-button> + </div> + </el-tab-pane> + </el-tabs> + </div> + <el-dialog + custom-class="el-dialog--center" + :visible.sync="dialogFile" + :append-to-body="true" + :modal="false" + v-dialogDragBottom + > + <ReportFile></ReportFile> + </el-dialog> + </div> +</template> + +<script> +import eventBus from '../../../eventBus' +import ReportFile from '../../../components/base-page/enterprise-emergency/ReportFile' + +import { LayerFsss } from '../../../conf/layers/LayerFsss' + +export default { + name: 'ReportLocation', + components: { + ReportFile + }, + data () { + return { + dialogFile: false, + pipelineFile: false, + // active tab鍒囨崲 + activeName: 'first', + // 绠℃鏌ヨtable + pipeTable: false, + // 鍒嗛〉鍔熻兘 + pageSize: 3, + total: 0, + currentPage: 1, + // 鐐瑰嚮瀹氫綅缁戝畾鏁版嵁 + clickLocation: '', + // 缁忕含搴﹀畾浣� + LongLatPos: { + longPos: '', + latPos: '' + }, + // 绠℃瀹氫綅 + linePos: { + lineName: '', + affFac: '', + affFacList: LayerFsss.layers + }, + tableData: [ + { + number: 1, + seares: '20璺洦姘寸绾�', + restype: '绠$嚎鍚嶇О' + }, { + number: 2, + seares: '20璺洦姘寸绾�', + restype: '绠$嚎鍚嶇О' + }, { + number: 3, + seares: '100020', + restype: '绠℃缂栫爜' + }, + { + number: 4, + seares: '20璺洦姘寸绾�', + restype: '绠$嚎鍚嶇О' + }, { + number: 5, + seares: '20璺洦姘寸绾�', + restype: '绠$嚎鍚嶇О' + }, { + number: 6, + seares: '100020', + restype: '绠℃缂栫爜' + } + ] + } + }, + mounted () { + // 鎺ユ敹瑙勫畾 姣忔閲嶆柊閫夋嫨瀹氫綅 閮芥寚瀹� 閫夋嫨绗竴涓紑濮� + eventBus.$on('tab-change', (obj) => { + this.activeName = obj + }) + }, + methods: { + // 鍦板浘涓婄偣鍑� + selectPipeLine () { + window.map.on('click', this.selectClick) + // window.mapManager.clickDialogSwitch = false + }, + // 鍦板浘涓婄偣鍑诲洖璋� + selectClick (e) { + window.map.off('click', this.selectClick) + // const point = [e.latlng.lng, e.latlng.lat] + const pointX = e.latlng.lng + const pointY = e.latlng.lat + this.clickLocation = '\'' + pointX + '\'' + pointY + '' + this.mapPointResult(e) + }, + mapPointResult (e) { + console.log(e) + this.LongLatPos.longPos = e.latlng.lng + this.LongLatPos.latPos = e.latlng.lat + }, + // 鑾峰緱鐒︾偣 杩涜瀹氫綅 + focusLocation () { + this.selectPipeLine() + }, + // 缁忕含搴﹀畾浣� + mapPoints () { + this.selectPipeLine() + }, + // 鍒嗛〉鍔熻兘 currentPage 鏀瑰彉鏃朵細瑙﹀彂 + handlePage (val) { + // console.log(val) + this.currentPage = val + }, + // 鍒嗛〉鍔熻兘 pageSize 鏀瑰彉鏃朵細瑙﹀彂 + handleSizeChange (val) { + // console.log(val) + this.pageSize = val + }, + // 鐐瑰嚮鏂囦欢閫夋嫨 鏄剧ず绗笁绾ч〉闈� 杩涜绠$嚎/娈甸�夋嫨 + fileChoose () { + this.dialogFile = !this.dialogFile + }, + // 鐐瑰嚮纭鎸夐挳浜嬩欢 + confirm () { + // 閫氳繃瀛愮粍浠跺悜鐖剁粍浠朵紶閫掓暟鎹� + this.$emit('locationClick', this.LongLatPos) + this.clickLocation = '' + this.LongLatPos.longPos = '' + this.LongLatPos.latPos = '' + }, + // 绠℃鏌ヨ琛ㄦ牸灞曠ず + tableAccod () { + this.pipeTable = !this.pipeTable + } + } +} +</script> + +<style lang="less" scoped> + + /deep/ .el-dialog--center { + /*left: 2rem !important;*/ + margin-left: 8rem !important; + margin-top: 0.13979rem !important; + } + + /deep/ .el-dialog { + width: 20%; + } + + .place-box { + display: flex; + align-items: center; + justify-content: space-around; + } + + #pane-third { + text-align: center; + } + + /*/deep/ .el-dialog .el-dialog__header {*/ + /* display: none;*/ + /*}*/ + /deep/ + .warnPagination { + .btn-quicknext, .btn-quickprev { + color: #e4e8f1 !important; + background-color: transparent; + // border: 1px solid #25AECD; + border-left: 1px solid #25AECD; + border-bottom: 1px solid #25AECD; + border-top: 1px solid #25AECD; + color: #e4e8f1; + } + + .el-pager li { + color: #e4e8f1; + background: transparent; + // border: 1px solid #25AECD; + border-left: 1px solid #25AECD; + border-bottom: 1px solid #25AECD; + border-top: 1px solid #25AECD; + } + + .el-pager li.active { + border-color: #25AECD; + background-color: rgba(38, 222, 253, 0.3); + color: #e4e8f1; + } + + .el-pager li:hover { + border-color: #25AECD; + background-color: rgba(38, 222, 253, 0.3); + color: #34e0ff; + } + + .btn-prev { + background-color: transparent; + // border: 1px solid #25AECD; + border-left: 1px solid #25AECD; + border-bottom: 1px solid #25AECD; + border-top: 1px solid #25AECD; + color: #e4e8f1; + } + + .btn-next { + background-color: transparent; + border: 1px solid #25AECD; + color: #e4e8f1; + } + } + + .elrow { + display: flex; + align-items: center; + justify-content: space-around; + } + + .event-report-dialog { + min-width: 1.94532rem; + max-width: 1.94532rem; + } + + .click-location { + margin: 0 auto; + text-align: center; + + .el-input { + width: 80%; + margin: 15px auto; + } + + .el-button { + margin: 15px auto; + } + } + + .place { + text-align: center; + + .place-top { + display: flex; + align-items: center; + justify-content: space-around; + + .place-right { + .el-button { + margin: 15px; + } + } + } + + .place-bottom { + .el-button { + margin: 15px; + } + } + } +</style> diff --git a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue index 1d1c7a2..e76118d 100644 --- a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue +++ b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue @@ -32,9 +32,7 @@ </el-radio> </el-radio-group> </el-form-item> - <el-row> - <el-button type="primary" small @click="dialogVisible = !dialogVisible">浜嬩欢涓婃姤</el-button> - </el-row> + <el-button type="primary" small @click="dialogVisibleChange">浜嬩欢涓婃姤</el-button> <div class="page_total"> <p>鍏辫 <span>{{total}}</span> @@ -71,7 +69,8 @@ <div> <h3> <span @click="disposalfx">浠跺悕绉�:XXX浜嬩欢</span> - <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="startAnalysis"> + <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" + @click="startAnalysis"> <span>寮�濮嬪垎鏋�</span> </el-button> </h3> @@ -91,10 +90,9 @@ </div> </div> </el-scrollbar> -<!-- :show-close="false"--> <div class="event-report"> <el-dialog - custom-class="event-report-dialog" + custom-class="el-dialog--center" title="浜嬩欢涓婃姤" :visible.sync="dialogVisible" :append-to-body="true" @@ -103,27 +101,10 @@ > <EventsReported></EventsReported> </el-dialog> - <el-dialog - custom-class="event-report-dialog" - title="閫夋嫨椤哄簭" - :visible.sync="dialogVisible" - :append-to-body="true" - :modal="false" - v-dialogDragBottom - > - <span>local閫夋嫨</span> - </el-dialog> - <el-dialog - custom-class="event-report-dialog" - title="鏂囦欢閫夋嫨" - :visible.sync="dialogVisible" - :append-to-body="true" - :modal="false" - v-dialogDragBottom - > - <span>file</span> - </el-dialog> </div> +<!-- <Dialog ref="EReported" title="浜嬩欢涓婃姤2">--> +<!-- <EventsReported></EventsReported>--> +<!-- </Dialog>--> </div> </template> @@ -134,13 +115,14 @@ import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent' import eventBus from '../../../../eventBus' - import EventsReported from '../../../../components/base-page/enterprise-emergency/EventsReported' + +// import Dialog from '../../../../views/popup/Dialog' export default { name: 'EventQuery', components: { - // DisposalEvent + // Dialog, EventsReported }, data () { @@ -150,10 +132,6 @@ list: [], total: 0, activeNum: -1, - LayerEvent: {}, - LayerResources: {}, - // items: [LayerEvent, LayerResources], - // subItems: LayerEntEmer.layers, items: [], subItems: [], form: { @@ -179,6 +157,9 @@ // this.wfsHelper = new WfsHelper() }, methods: { + dialogVisibleChange () { + this.dialogVisible = !this.dialogVisible + }, // 鐐瑰嚮浜嬩欢绠$悊 accordPopup () { eventBus.$emit('disposal-analysis', true) @@ -236,13 +217,18 @@ </script> <style lang="less" scoped> - .event-report { - display: flex; - } - /*/deep/ .el-row {*/ - /* text-align: right;*/ - /*}*/ + /*.event-report {*/ + /deep/ .el-dialog--center { + /*left: 2rem !important;*/ + margin-left: 2rem !important; + margin-top: 0.73979rem !important; + /*bottom: 0 !important;*/ + } + //} + /*.event-report {*/ /deep/ .el-dialog { - width: 30%; - } + /*width: 30%;*/ + width: 550px; + } + /*}*/ </style> diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue index 007ffcc..f8a9396 100644 --- a/src/components/table/summarySheets.vue +++ b/src/components/table/summarySheets.vue @@ -1,43 +1,43 @@ <template> - <div class="summary-sheets"> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left"> - <div :class='["iconBtn",selectGroup ? "active-button" : ""]' @click="subtopicBtn" > - <i class="el-icon-tickets icon"></i> - </div> - </el-tooltip> - <transition name="animationChange"> - <div class="subtopic" v-show="selectGroup"> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom"> - <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn"> - <!-- --> - <i class="icon iconfont iconbiaoge2"></i> - <!--<span class="icon-name">缁熻琛�</span>--> - </div> - </el-tooltip> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom"> - <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog()" > - <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> --> - <i class="el-icon-office-building icon"></i> - </div> - </el-tooltip> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom"> - <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog()" > - <i class="icon iconfont iconbaojing01"></i> - <!--<span class="icon-name">棰勬姤璀�</span>--> - </div> - </el-tooltip> - </div> - </transition> - <Dialog ref="summarySheets" title="鎶ヨ〃" class="baoBiao" > - <tab-handover></tab-handover> - </Dialog> - <Dialog ref="warnDialog" title="棰勬姤璀�" > - <warn></warn> - </Dialog> - <Dialog ref="indexStatisticsDialog" title="浼佷笟鎸囨爣鍒嗙被缁熻" > - <index-statistics></index-statistics> - </Dialog> - </div> + <div class="summary-sheets"> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left"> + <div :class='["iconBtn",selectGroup ? "active-button" : ""]' @click="subtopicBtn"> + <i class="el-icon-tickets icon"></i> + </div> + </el-tooltip> + <transition name="animationChange"> + <div class="subtopic" v-show="selectGroup"> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom"> + <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn"> + <!-- --> + <i class="icon iconfont iconbiaoge2"></i> + <!--<span class="icon-name">缁熻琛�</span>--> + </div> + </el-tooltip> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom"> + <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog()"> + <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> --> + <i class="el-icon-office-building icon"></i> + </div> + </el-tooltip> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom"> + <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog()"> + <i class="icon iconfont iconbaojing01"></i> + <!--<span class="icon-name">棰勬姤璀�</span>--> + </div> + </el-tooltip> + </div> + </transition> + <Dialog ref="summarySheets" title="鎶ヨ〃" class="baoBiao"> + <tab-handover></tab-handover> + </Dialog> + <Dialog ref="warnDialog" title="棰勬姤璀�"> + <warn></warn> + </Dialog> + <Dialog ref="indexStatisticsDialog" title="浼佷笟鎸囨爣鍒嗙被缁熻"> + <index-statistics></index-statistics> + </Dialog> + </div> </template> <script> @@ -51,6 +51,7 @@ // import '@/components/plugin/DialogDrag' import bus from '@/eventBus' + export default { name: 'summary-sheet.vue', components: { @@ -121,55 +122,60 @@ </script> <style lang="less"> -.summary-sheets { - position: absolute; - display: inline-flex; - overflow: hidden; - top: 0.42979rem; - left: 0.14583rem; - /*width: 850px;*/ - /*height: 265px;*/ - z-index: 500; - .subtopic{ - display: inline-flex; - .iconBtn{ - margin-left: 0.03rem; - border-color:#00fff6; - color:#00fff6; - } - .iconBtn.active-button{ - //border-color:#00fff6 !important; - //color:#00fff6 !important; - } - } + .summary-sheets { + position: absolute; + display: inline-flex; + overflow: hidden; + top: 0.42979rem; + left: 0.14583rem; + /*width: 850px;*/ + /*height: 265px;*/ + z-index: 500; - .dialog { - //width: 800px; - //height: 300px; - position: absolute; - top: 15%; - left: 3rem; - } - .animationChange-enter-active, .animationChange-leave-active { - transition: all 0.5s; - } + .subtopic { + display: inline-flex; - .animationChange-enter, .animationChange-leave-to { - opacity: 0; - transform: translateX(-100px); - } - /*color: #fff;*/ + .iconBtn { + margin-left: 0.03rem; + border-color: #00fff6; + color: #00fff6; + } - .el-icon-c-scale-to-original { - width: 30px; - height: 30px; - font-size: 30px; - } + .iconBtn.active-button { + //border-color:#00fff6 !important; + //color:#00fff6 !important; + } + } - .el-dialog.el-dialog--center{ + .dialog { + //width: 800px; + //height: 300px; + position: absolute; + top: 15%; + left: 3rem; + } + + .animationChange-enter-active, .animationChange-leave-active { + transition: all 0.5s; + } + + .animationChange-enter, .animationChange-leave-to { + opacity: 0; + transform: translateX(-100px); + } + + /*color: #fff;*/ + + .el-icon-c-scale-to-original { + width: 30px; + height: 30px; + font-size: 30px; + } + + .el-dialog.el-dialog--center { left: 0.5rem; top: 0.73979rem; } -} + } </style> -- Gitblit v1.8.0