From 4df0471b7dff0494625ff09969b1a13b5359a26e Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期一, 31 五月 2021 22:41:47 +0800
Subject: [PATCH] 统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。
---
src/components/emergency/index.vue | 288 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 193 insertions(+), 95 deletions(-)
diff --git a/src/components/emergency/index.vue b/src/components/emergency/index.vue
index 5a02419..913378c 100644
--- a/src/components/emergency/index.vue
+++ b/src/components/emergency/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="emergency">
- <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag >
+ <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag>
<!-- 鍩虹淇℃伅 -->
<div class="basicInformation" v-if="CZFX">
<div>
@@ -33,15 +33,16 @@
<el-button type="primary" class="el-icon-location" size="mini"></el-button>
<el-button type="primary" class="el-icon-location" size="mini"></el-button>
<el-select v-model="value" filterable placeholder="璇烽�夋嫨" size="mini">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+ <el-option v-for="item in options" :key="item.value" :label="item.label"
+ :value="item.value"></el-option>
</el-select>
<el-button type="primary" class="el-icon-search" size="mini"></el-button>
</div>
<div>
<div class="analysis-btn">
<div>
- <el-button type="primary" size="mini" >閲嶇疆鍒嗘瀽鏉′欢</el-button>
- <el-button type="primary" size="mini" @click="CZFX=!CZFX" >寮�濮嬪垎鏋�</el-button>
+ <el-button type="primary" size="mini">閲嶇疆鍒嗘瀽鏉′欢</el-button>
+ <el-button type="primary" size="mini" @click="CZFX=!CZFX">寮�濮嬪垎鏋�</el-button>
</div>
</div>
</div>
@@ -72,20 +73,13 @@
<el-button type="primary" size="mini">妯旱鏂潰</el-button>
<el-button type="primary" size="mini" @click="showCalculate=!showCalculate">浜嬫晠姘磋绠�</el-button>
</div>
- <table>
- <tr>
- <th>寤鸿澶勭疆鎺柦</th>
- <th>棰勮</th>
- </tr>
- <tr>
- <td> 1.鍏抽棴闃�闂˙銆侀榾闂–锛屽涓婃父绠￠亾杩涜鎴祦锛涘叧闂榾闂―锛屽涓嬫父绠￠亾杩涜鎴祦</td>
- <td></td>
- </tr>
- <tr>
- <td> 1.鍏抽棴闃�闂˙銆侀榾闂–锛屽涓婃父绠￠亾杩涜鎴祦锛涘叧闂榾闂―锛屽涓嬫父绠￠亾杩涜鎴祦</td>
- <td></td>
- </tr>
- </table>
+ <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
+ <el-table-column prop="define" label="寤鸿澶勭疆鎺柦" show-overflow-tooltip></el-table-column>
+ <el-table-column type="selection" label="棰勮" width="55"></el-table-column>
+ <!-- <el-table-column label="鏃ユ湡" width="120">
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column> -->
+ </el-table>
</div>
<div class="filteringInformation">
<div class="header">
@@ -103,19 +97,28 @@
<el-button type="primary" class="el-icon-location" size="mini"></el-button>
<el-button type="primary" class="el-icon-location" size="mini"></el-button>
<el-select v-model="value" filterable placeholder="璇烽�夋嫨" size="mini">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+ <el-option v-for="item in options" :key="item.value" :label="item.label"
+ :value="item.value"></el-option>
</el-select>
<el-button type="primary" class="el-icon-search" size="mini"></el-button>
- <el-input placeholder="瀹℃壒浜�" size="mini" style="width: 60px"></el-input>
+ <el-input placeholder="瀹℃壒浜�" size="mini" style="width: 60px"></el-input>
<el-button type="primary" size="mini">鏌ヨ</el-button>
</div>
</div>
<div class="content">
<ul>
- <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li>
- <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li>
- <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li>
- <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li>
+ <li>
+ <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button>
+ </li>
+ <li>
+ <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button>
+ </li>
+ <li>
+ <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button>
+ </li>
+ <li>
+ <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button>
+ </li>
</ul>
<el-table :data="tableData2" style="width: 80%">
<el-table-column prop="date" label="鏃ユ湡" width="180"></el-table-column>
@@ -133,20 +136,55 @@
</el-dialog>
<el-dialog class="calculate" :visible.sync="showCalculate" title="浜嬫晠姘存湁鏁堝绉绠�" :modal="false" v-dialogDrag>
<ul>
- <li>浜嬫晠姘存祦閲忥細<el-input size="mini" style="width: 60px"></el-input>m3/h</li>
- <li>浜嬫晠鏃堕棿锛�<el-input size="mini" style="width: 60px"></el-input>h</li>
- <li>浜嬫晠鐗╂枡閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li>
- <li>杞瓨閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li>
- <li>娑堥槻姘存祦閲忥細<el-input size="mini" style="width: 60px"></el-input>h</li>
- <li>娑堥槻鏃堕棿锛�<el-input size="mini" style="width: 60px"></el-input>h</li>
- <li>闄嶉洦閲忥細<el-input size="mini" style="width: 60px"></el-input>mm</li>
- <li>姹囨按闈㈢Н锛�<el-input size="mini" style="width: 60px"></el-input>m2</li>
- <li>鐢熶骇搴熸按閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li>
- <li>鏀堕泦姹犱綑閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li>
+ <li>浜嬫晠姘存祦閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ m3/h
+ </li>
+ <li>浜嬫晠鏃堕棿锛�
+ <el-input size="mini" style="width: 60px"></el-input>
+ h
+ </li>
+ <li>浜嬫晠鐗╂枡閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ m3
+ </li>
+ <li>杞瓨閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ m3
+ </li>
+ <li>娑堥槻姘存祦閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ h
+ </li>
+ <li>娑堥槻鏃堕棿锛�
+ <el-input size="mini" style="width: 60px"></el-input>
+ h
+ </li>
+ <li>闄嶉洦閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ mm
+ </li>
+ <li>姹囨按闈㈢Н锛�
+ <el-input size="mini" style="width: 60px"></el-input>
+ m2
+ </li>
+ <li>鐢熶骇搴熸按閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ m3
+ </li>
+ <li>鏀堕泦姹犱綑閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ m3
+ </li>
</ul>
<ul>
- <li>浜嬫晠姘村绉細<el-input size="mini" style="width: 60px"></el-input>m3</li>
- <li>鏄惁澶т簬鏀堕泦姹犱綑閲忥細<el-input size="mini" style="width: 60px"></el-input></li>
+ <li>浜嬫晠姘村绉細
+ <el-input size="mini" style="width: 60px"></el-input>
+ m3
+ </li>
+ <li>鏄惁澶т簬鏀堕泦姹犱綑閲忥細
+ <el-input size="mini" style="width: 60px"></el-input>
+ </li>
</ul>
<div class="footer">
<el-button type="primary" size="mini">璁＄畻</el-button>
@@ -158,26 +196,68 @@
</template>
<script>
+import eventBus from '../../eventBus'
const cityOptions = ['涓婃捣', '鍖椾含', '骞垮窞', '娣卞湷']
+
export default {
name: 'index',
data () {
return {
tit: '浜嬩欢澶勭疆',
- showSchedule: true,
+ showSchedule: false,
tableData: [
- { name: '棰勬A', define: '缁煎悎棰勬', hierarchy: '浜岀骇鍗曚綅', classification: '鐜繚' },
- { name: '棰勬B', define: '涓撻」棰勬', hierarchy: '鐩村睘浼佷笟', classification: '鐜繚' },
- { name: '棰勬C', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' },
- { name: '棰勬D', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' },
- { name: '棰勬E', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' }
+ {
+ name: '棰勬A',
+ define: '缁煎悎棰勬',
+ hierarchy: '浜岀骇鍗曚綅',
+ classification: '鐜繚'
+ },
+ {
+ name: '棰勬B',
+ define: '涓撻」棰勬',
+ hierarchy: '鐩村睘浼佷笟',
+ classification: '鐜繚'
+ },
+ {
+ name: '棰勬C',
+ define: '鐜板満澶勭疆棰勬',
+ hierarchy: '鍩哄眰鍗曚綅',
+ classification: '鐢熶骇'
+ },
+ {
+ name: '棰勬D',
+ define: '鐜板満澶勭疆棰勬',
+ hierarchy: '鍩哄眰鍗曚綅',
+ classification: '鐢熶骇'
+ },
+ {
+ name: '棰勬E',
+ define: '鐜板満澶勭疆棰勬',
+ hierarchy: '鍩哄眰鍗曚綅',
+ classification: '鐢熶骇'
+ }
],
checkAll: false,
checkedCities: ['涓婃捣', '鍖椾含'],
cities: cityOptions,
isIndeterminate: true,
value: '',
- options: [{ value: '500', label: '500m' }, { value: '1000', label: '1km' }, { value: '2000', label: '2km' }, { value: '5000', label: '5km' }, { value: '10000', label: '10km' }],
+ options: [{
+ value: '500',
+ label: '500m'
+ }, {
+ value: '1000',
+ label: '1km'
+ }, {
+ value: '2000',
+ label: '2km'
+ }, {
+ value: '5000',
+ label: '5km'
+ }, {
+ value: '10000',
+ label: '10km'
+ }],
isShowFenXi: false,
CZFX: true,
tableData2: [{
@@ -200,78 +280,96 @@
showCalculate: false
}
},
- methods: {
-
- },
+ methods: {},
mounted () {
-
+ eventBus.$on('disposal-analysis', (obj) => {
+ // console.log(obj)
+ this.showSchedule = obj
+ })
}
}
</script>
<style scoped lang="less">
-.emergency{
- /deep/ .el-dialog{
- width: 450px;
- }
- .panel-title{
- text-align: left;
- padding: 5px 0 0 0;
- }
- .basicInformation{
- .area-selected{
- display: flex;
- justify-content:flex-end;
- align-items : center;
+ .emergency {
+ /deep/ .el-dialog {
+ width: 450px;
}
- .analysis-btn{
- display: flex;
- justify-content:space-between;
- align-items : center;
+
+ .panel-title {
+ text-align: left;
+ padding: 5px 0 0 0;
}
- }
- .fenXiChuZhi{
- display: flex;
- flex-wrap: wrap;
- >div{width: 50%}
- .filteringInformation{
- width: 100%;
- .header{
+
+ .basicInformation {
+ .area-selected {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+ .analysis-btn {
display: flex;
justify-content: space-between;
- ul{
+ align-items: center;
+ }
+ }
+
+ .fenXiChuZhi {
+ display: flex;
+ flex-wrap: wrap;
+
+ > div {
+ width: 50%
+ }
+
+ .filteringInformation {
+ width: 100%;
+
+ .header {
display: flex;
- li{
- span{
- display: block;
+ justify-content: space-between;
+
+ ul {
+ display: flex;
+
+ li {
+ span {
+ display: block;
+ }
}
}
}
- }
- .content{
- display: flex;
+
+ .content {
+ display: flex;
+ }
}
}
- }
- .footer{
- display: flex;
- justify-content:flex-end
- }
- .calculate{
- ul{
+
+ .footer {
display: flex;
- flex-wrap: wrap;
- li{
- width: 50%;
+ justify-content: flex-end
+ }
+
+ .calculate {
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+
+ li {
+ width: 50%;
+ }
+ }
+
+ /deep/ .el-dialog {
+ left: 810px;
}
}
- /deep/ .el-dialog{
- left: 810px;
- }
}
-}
- .emergency .widt800{
- /deep/ .el-dialog{
+
+ .emergency .widt800 {
+ /deep/ .el-dialog {
width: 800px;
}
}
--
Gitblit v1.8.0