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 | 401 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 344 insertions(+), 57 deletions(-)
diff --git a/src/components/emergency/index.vue b/src/components/emergency/index.vue
index 6bc4374..913378c 100644
--- a/src/components/emergency/index.vue
+++ b/src/components/emergency/index.vue
@@ -1,89 +1,376 @@
<template>
- <el-dialog class="emergency" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag >
- <!-- 鍩虹淇℃伅 -->
- <div class="basicInformation">
- <div>
- <h3 class="panel-title">婕旂粌淇℃伅</h3>
- <ul>
- <li>浜嬩欢绫诲瀷锛�</li>
- <li>浜嬩欢浣嶇疆锛�</li>
- <li>浣嶇疆鎻忚堪锛�</li>
- <li>浜嬩欢鏃堕棿锛�</li>
- <li>闄勪欢锛�<a href="javascript:;">闄勪欢1</a><a href="javascript:;">闄勪欢1</a></li>
- </ul>
- <h3 class="panel-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 href="javascript:;">棰勬</a>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div>
- <div class="panel-title">鎼滅储</div>
+ <div class="emergency">
+ <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag>
+ <!-- 鍩虹淇℃伅 -->
+ <div class="basicInformation" v-if="CZFX">
<div>
+ <h3 class="panel-title">婕旂粌淇℃伅</h3>
+ <ul>
+ <li>浜嬩欢绫诲瀷锛�</li>
+ <li>浜嬩欢浣嶇疆锛�</li>
+ <li>浣嶇疆鎻忚堪锛�</li>
+ <li>浜嬩欢鏃堕棿锛�</li>
+ <li>闄勪欢锛�<a href="javascript:;">闄勪欢1</a><a href="javascript:;">闄勪欢1</a></li>
+ </ul>
+ <h3 class="panel-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 href="javascript:;">棰勬</a>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-button type="primary" size="mini" @click="isShowFenXi=!isShowFenXi">鍒嗘瀽</el-button>
+ </div>
+ <!-- 鍒嗘瀽鐣岄潰 -->
+ <div v-if="isShowFenXi">
+ <div class="panel-title">澶勭疆鍒嗘瀽</div>
+ <div class="area-selected">
+ <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-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>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 寮�濮嬪垎鏋愮晫闈� -->
+ <div v-else class="fenXiChuZhi">
+ <div>
+ <div class="panel-title">浜嬩欢鍩烘湰淇℃伅</div>
<ul>
<li>
- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">鍏ㄩ��</el-checkbox>
- <div style="margin: 15px 0;"></div>
- <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
- <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
- </el-checkbox-group>
+ <p>浜嬩欢绠＄嚎</p>
+ <span>鐢熶骇涓�鍖虹绾緼</span>
+ <span>鍚补姹℃按</span>
+ <span>鐩村煁</span><span>鏃犵紳閽㈢</span><span>鎷︽埅璁炬柦锛�<i>a闃�闂�</i></span>
+ </li>
+ <li>
+ <p>浜嬩欢涓婃父绠＄嚎</p>
+ <span>鐢熶骇涓�鍖虹绾緼</span>
+ <span>鍚补姹℃按</span>
+ <span>鐩村煁</span><span>鏃犵紳閽㈢</span><span>鎷︽埅璁炬柦锛�<i>a闃�闂�</i></span>
</li>
</ul>
</div>
+ <div>
+ <div class="panel-title">寤鸿澶勭疆鎺柦</div>
+ <div class="footer">
+ <el-button type="primary" size="mini">妯旱鏂潰</el-button>
+ <el-button type="primary" size="mini" @click="showCalculate=!showCalculate">浜嬫晠姘磋绠�</el-button>
+ </div>
+ <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">
+ <div>
+ <ul>
+ <li>鍐呮帓鍙� <span>鍏�1鏉�</span></li>
+ <li>澶栨帓鍙�<span>鍏�2鏉�</span></li>
+ <li>鍐呮帓鍙� <span>鍏�1鏉�</span></li>
+ <li>澶栨帓鍙�<span>鍏�2鏉�</span></li>
+ <li>鍐呮帓鍙� <span>鍏�1鏉�</span></li>
+ <li>澶栨帓鍙�<span>鍏�2鏉�</span></li>
+ </ul>
+ </div>
+ <div class="area-selected" style="justify-items: center">
+ <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-select>
+ <el-button type="primary" class="el-icon-search" size="mini"></el-button>
+ <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>
+ </ul>
+ <el-table :data="tableData2" style="width: 80%">
+ <el-table-column prop="date" label="鏃ユ湡" width="180"></el-table-column>
+ <el-table-column prop="name" label="濮撳悕" width="180"></el-table-column>
+ <el-table-column prop="address" label="鍦板潃"></el-table-column>
+ </el-table>
+ </div>
+ <div class="footer">
+ <el-button type="primary" size="mini">鐢熸垚鎶ュ憡</el-button>
+ <el-button type="primary" size="mini" @click="CZFX=!CZFX">杩斿洖</el-button>
+ </div>
+ </div>
</div>
- </div>
- </el-dialog>
+ <!-- -->
+ </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>
+ </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>
+ </ul>
+ <div class="footer">
+ <el-button type="primary" size="mini">璁＄畻</el-button>
+ <el-button type="primary" size="mini">纭</el-button>
+ <el-button type="primary" size="mini">閲嶇疆</el-button>
+ </div>
+ </el-dialog>
+ </div>
</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
+ isIndeterminate: true,
+ value: '',
+ 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: [{
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ }],
+ showCalculate: false
}
},
- methods: {
- handleCheckAllChange (val) {
- this.checkedCities = val ? cityOptions : []
- this.isIndeterminate = false
- },
- handleCheckedCitiesChange (value) {
- const checkedCount = value.length
- this.checkAll = checkedCount === this.cities.length
- this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
- }
+ methods: {},
+ mounted () {
+ eventBus.$on('disposal-analysis', (obj) => {
+ // console.log(obj)
+ this.showSchedule = obj
+ })
}
}
</script>
<style scoped lang="less">
-.emergency{
- /deep/ .el-dialog{
- width: 750px;
+ .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;
+ }
+
+ .analysis-btn {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+
+ .fenXiChuZhi {
+ display: flex;
+ flex-wrap: wrap;
+
+ > div {
+ width: 50%
+ }
+
+ .filteringInformation {
+ width: 100%;
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+
+ ul {
+ display: flex;
+
+ li {
+ span {
+ display: block;
+ }
+ }
+ }
+ }
+
+ .content {
+ display: flex;
+ }
+ }
+ }
+
+ .footer {
+ display: flex;
+ justify-content: flex-end
+ }
+
+ .calculate {
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+
+ li {
+ width: 50%;
+ }
+ }
+
+ /deep/ .el-dialog {
+ left: 810px;
+ }
+ }
}
- .basicInformation{
- display: flex;
+
+ .emergency .widt800 {
+ /deep/ .el-dialog {
+ width: 800px;
+ }
}
-}
</style>
--
Gitblit v1.8.0