From 4d265afb3419bd5cedc6f31ab78d570f6917b520 Mon Sep 17 00:00:00 2001 From: seatonwan9 <seatonwan9@163.com> Date: 星期五, 21 五月 2021 14:30:44 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/emergency/index.vue | 411 ++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 341 insertions(+), 70 deletions(-) diff --git a/src/components/emergency/index.vue b/src/components/emergency/index.vue index 3467c7b..c6fc1bf 100644 --- a/src/components/emergency/index.vue +++ b/src/components/emergency/index.vue @@ -1,55 +1,204 @@ <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> - <el-button type="primary" size="mini">鍒嗘瀽</el-button> - </div> - <!-- <div> - <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 class="emergency"> + <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag> + <!-- 鍩虹淇℃伅 --> + <div class="basicInformation" v-if="CZFX"> <div> - <div class="analysis-btn"> - <div> - <el-button type="primary" size="mini" >閲嶇疆鍒嗘瀽鏉′欢</el-button> - <el-button type="primary" size="mini" >寮�濮嬪垎鏋�</el-button> + <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> - </el-dialog> + </div> + <!-- 寮�濮嬪垎鏋愮晫闈� --> + <div v-else class="fenXiChuZhi"> + <div> + <div class="panel-title">浜嬩欢鍩烘湰淇℃伅</div> + <ul> + <li> + <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> + <!-- --> + </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 () { @@ -57,49 +206,171 @@ tit: '浜嬩欢澶勭疆', 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: [{ + 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: { - - }, + methods: {}, mounted () { - + eventBus.$on('events-reported', (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{ + + .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; - justify-content:space-between; - align-items : center; + 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; + } } } -} + + .emergency .widt800 { + /deep/ .el-dialog { + width: 800px; + } + } </style> -- Gitblit v1.8.0