From 737a5478ab7f423acd7750003b0df9705ebbaecd Mon Sep 17 00:00:00 2001 From: yangdelong <828900aaa> Date: 星期六, 29 五月 2021 17:37:46 +0800 Subject: [PATCH] 企业应急-事件处置-事件信息页面 --- src/assets/css/map/map-panel-style.less | 21 +++++ src/components/base-page/enterprise-emergency/DisposalEvent.vue | 195 +++++++++++++++++++++++++++++++----------------- 2 files changed, 147 insertions(+), 69 deletions(-) diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 7ae3d48..1ec2a41 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -829,6 +829,27 @@ padding: 5px; color: #f2f2f2; } +.el-collapse-item__header { + display: flex; + align-items: center; + height: 48px; + line-height: 48px; + background-color: @background-color; + color: @color; + cursor: pointer; + border-bottom: 1px solid @color; + font-size: 13px; + font-weight: 500; + transition: border-bottom-color .3s; + outline: 0; +} +.el-collapse-item__wrap{ + background-color: @background-color; + +} +.el-collapse-item__content{ + color: @color; +} /************鎼滅储鏁版嵁鍒嗛〉鍔熻兘鎬绘暟閲忔牱寮忔坊鍔�************/ .page_total { diff --git a/src/components/base-page/enterprise-emergency/DisposalEvent.vue b/src/components/base-page/enterprise-emergency/DisposalEvent.vue index e7eb185..6185a2f 100644 --- a/src/components/base-page/enterprise-emergency/DisposalEvent.vue +++ b/src/components/base-page/enterprise-emergency/DisposalEvent.vue @@ -1,72 +1,104 @@ <template> - <div class="disposal-event"> - <h4 class="sub-title ">浜嬩欢鍩烘湰淇℃伅</h4> - <div :model="form"> - <el-row> - <el-col class="info-label" :span="6">浜嬩欢鍚嶇О锛�</el-col> - <el-col class="info-text" :span="18">{{ form.nameOfEvent }}</el-col> - </el-row> - <el-row> - <el-col class="info-label" :span="6"> - 浜嬩欢浣嶇疆锛� - </el-col> - <el-col class="info-text" :span="18"> - <label>{{ form.eventLocation }}</label> - </el-col> - </el-row> - <el-row> - <el-col class="info-label" :span="6"> - 浣嶇疆鎻忚堪锛� - </el-col> - <el-col class="info-text" :span="18"> - <label>{{ form.positionDesc }}</label> - </el-col> - </el-row> - <el-row> - <el-col class="info-label" :span="6"> - 浜嬩欢鍗曚綅锛� - </el-col> - <el-col class="info-text" :span="18"> - {{ form.incidentUnit }} - </el-col> - </el-row> - <el-row> - <el-col class="info-label" :span="6"> - 浜嬪彂鏃堕棿锛� - </el-col> - <el-col class="info-text" :span="18"> - {{ form.atTime }} - </el-col> - </el-row> - <el-row> - <el-col class="info-label" :span="6">浜嬩欢鎻忚堪锛�</el-col> - <el-col class="info-text" :span="18">{{ form.eventDesc }}</el-col> - </el-row> - <el-row> - <el-col class="info-label" span="6">闄勪欢锛�</el-col> - <el-col class="info-text" :span="18"><a class="link-btn" href="javascript:">闄勪欢</a> - - <a class="link-btn" href="javascript:">闄勪欢</a> - </el-col> - </el-row> + <div> + <el-scrollbar > + <div class="disposal-event"> +<!-- <el-collapse v-model="activeNames" @change="handleChange">--> +<!-- <el-collapse-item title="浜嬩欢鍩烘湰淇℃伅" name="1">--> + <div> + <h4 class="sub-title ">浜嬩欢鍩烘湰淇℃伅</h4> + <div :model="form"> + <el-row> + <el-col class="info-label" :span="6">浜嬩欢鍚嶇О锛�</el-col> + <el-col class="info-text" :span="18">{{ form.nameOfEvent }}</el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浜嬩欢浣嶇疆锛� + </el-col> + <el-col class="info-text" :span="18"> + <label>{{ form.eventLocation }}</label> + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浣嶇疆鎻忚堪锛� + </el-col> + <el-col class="info-text" :span="18"> + <label>{{ form.positionDesc }}</label> + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浜嬩欢鍗曚綅锛� + </el-col> + <el-col class="info-text" :span="18"> + {{ form.incidentUnit }} + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6"> + 浜嬪彂鏃堕棿锛� + </el-col> + <el-col class="info-text" :span="18"> + {{ form.atTime }} + </el-col> + </el-row> + <el-row> + <el-col class="info-label" :span="6">浜嬩欢鎻忚堪锛�</el-col> + <el-col class="info-text" :span="18">{{ form.eventDesc }}</el-col> + </el-row> + <el-row> + <el-col class="info-label" span="6">闄勪欢锛�</el-col> + <el-col class="info-text" :span="18"><a class="link-btn" href="javascript:">闄勪欢</a> + + <a class="link-btn" href="javascript:">闄勪欢</a> + </el-col> + </el-row> + </div> + </div> +<!-- </el-collapse-item>--> +<!-- <el-collapse-item title="棰勬鍖归厤" name="2">--> + <div> +<!-- <h3 class="sub-title">棰勬鍖归厤</h3>--> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="name" label="棰勬鍚嶇О"></el-table-column> + <el-table-column prop="define" label="棰勬瀹氫箟"></el-table-column> + <el-table-column prop="hierarchy" label="棰勬灞傜骇"></el-table-column> + <el-table-column prop="classification" label="棰勬鍒嗙被"></el-table-column> + <el-table-column label="闄勪欢"> + <template> + <a class="link-btn" href="javascript:">棰勬</a> + </template> + </el-table-column> + </el-table> + </div> +<!-- </el-collapse-item>--> +<!-- <el-collapse-item title="鐜鍒嗘瀽鎶ュ憡" name="3">--> + <div> + <h3 class="sub-title">鐜鍒嗘瀽鎶ュ憡</h3> + <el-table :data="envTableData" style="width: 100%"> + <el-table-column prop="no" label="搴忓彿"></el-table-column> + <el-table-column prop="radius" label="鏌ヨ鍗婂緞"></el-table-column> + <el-table-column prop="reporterTime" label="鐢熸垚鎶ュ憡鏃堕棿"></el-table-column> + <el-table-column prop="classification" label="鎿嶄綔"> + <template slot-scope="scope" > + <el-button class="link-btn" @click="handleClickView(scope.row)" type="text" size="small">鏌ョ湅</el-button> + <el-button class="link-btn" @click="handleClickDownload(scope.row)" type="text" size="small">涓嬭浇</el-button> + </template> + </el-table-column> + </el-table> + </div> +<!-- </el-collapse-item>--> +<!-- </el-collapse>--> + </div> - <h3 class="sub-title">棰勬鍖归厤</h3> - <el-table :data="tableData" style="width: 100%"> - <el-table-column prop="name" label="棰勬鍚嶇О"></el-table-column> - <el-table-column prop="define" label="棰勬瀹氫箟"></el-table-column> - <el-table-column prop="hierarchy" label="棰勬灞傜骇"></el-table-column> - <el-table-column prop="classification" label="棰勬鍒嗙被"></el-table-column> - <el-table-column label="闄勪欢"> - <template> - <a class="link-btn" href="javascript:">棰勬</a> - </template> - </el-table-column> - </el-table> + </el-scrollbar> <div class="event-management"> <el-button type="primary" size="mini" @click="ToManagement">寮�濮嬪垎鏋�</el-button> <!-- <el-button size="mini">鍏抽棴</el-button>--> </div> </div> + </template> <script> @@ -77,6 +109,7 @@ name: 'DisposalEvent', data () { return { + activeNames: ['1'], form: { nameOfEvent: '***************浜嬩欢', eventLocation: '**********瑁呯疆', @@ -116,6 +149,23 @@ hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' } + ], + envTableData: [ + { + no: '1', + radius: '500m', + reporterTime: '2021-6-1 18:00:00', + data: [], + downloadUrl: '' + }, + { + no: '2', + radius: '1km', + reporterTime: '2021-6-1 18:00:00', + data: [], + downloadUrl: '' + } + ] } }, @@ -123,6 +173,15 @@ // 寮�濮嬪垎鏋� ToManagement () { eventBus.$emit('event-handling', {}) + }, + handleClickView (item) { + console.log(item) + }, + handleClickDownload (item) { + console.log(item) + }, + handleChange (val) { + console.log(val) } } } @@ -131,7 +190,7 @@ <style lang="less" scoped> .disposal-event { padding: 5px; - +height: 400px; .fixed-width { width: 3.2459893rem; min-width: 3.2459893rem; @@ -144,11 +203,6 @@ /deep/ .el-form-item__label { color: @color; font-size: 0.08rem; - } - - .event-management { - text-align: right; - margin: 15px; } .sub-title { @@ -170,5 +224,8 @@ text-align: left; } } - +.event-management { + text-align: right; + margin: 15px; +} </style> -- Gitblit v1.8.0