From dd005b03c33258be77e39b2c1cc5cc6f78387542 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期四, 08 四月 2021 10:13:45 +0800 Subject: [PATCH] 弹框问题修改 --- src/components/table/summarySheets.vue | 10 + src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue | 2 src/assets/css/map/map-panel-style.less | 6 src/components/BaseNav/PublicBounced/PublicBounced.vue | 8 src/components/table/components/SolidWaste.vue | 279 ++++++++++++++++++++++++++++++++-------------- 5 files changed, 211 insertions(+), 94 deletions(-) diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 3545ff7..f91da00 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -354,4 +354,8 @@ padding: 10px; text-align: center; border-bottom: 1px solid @background-color-split; -} \ No newline at end of file +} + +.el-tabs__header .is-top { + +} diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue index 426879e..4c581a3 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue @@ -26,7 +26,7 @@ .win { position: relative; background-color: rgba(33, 41, 69, 0.9); - height: 2.1rem; + //height: 2rem; } .main { diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index f760f7e..5a47938 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -93,7 +93,7 @@ <style lang="less" scoped> .public-bounced { - width: 10rem; + width: 8rem; //height: 2.6rem; //width: 70vw; //height: 30vh; @@ -101,8 +101,8 @@ position: absolute; //bottom: 2rem; //left: 5rem; - top: 5%; - left: 5%; + top: 15%; + left: 15%; background-color: #002432; border: 1px #9fc5c8 solid; @@ -135,7 +135,7 @@ justify-content: space-around; .public-bounced-content-left { - width: 6.8rem; + width: 4.8rem; } .public-bounced-content-right { diff --git a/src/components/table/components/SolidWaste.vue b/src/components/table/components/SolidWaste.vue index c90311a..89be52e 100644 --- a/src/components/table/components/SolidWaste.vue +++ b/src/components/table/components/SolidWaste.vue @@ -1,111 +1,201 @@ <template> - <div class="Solid-Waste"> - <el-table - class="tableBox" - :data="tableData" - :header-cell-style="tableHeaderColor" - :cell-style="rowClass" - @cell-click="handle" - > - <el-table-column - width="30px" - label="" - > - <template> - <i class="el-icon-caret-right"></i> - <span style="margin-left: 10px"></span> - </template> - </el-table-column> - <el-table-column - label="搴忓彿" - width="60px" - type="index"> - </el-table-column> - <el-table-column - prop="UserName" - label="浼佷笟鍚嶇О" - width="120px"> - <template slot-scope="scope"> - <div v-if="scope.row.UserName==='闆嗗洟鍚嶇О'" style="color: #00ffff">{{scope.row.UserName}}</div> - <div v-else-if="scope.row.UserName==='澶╂触鐭冲寲'" style="color: #00ffff">{{scope.row.UserName}}</div> - <div v-else >{{scope.row.UserName}}</div> - </template> - </el-table-column> - <el-table-column label="浜х敓閲� 锛堝惃锛�"> - <el-table-column - prop="AddOutPut" - label="涓�鑸浐搴�" - width="100px"> - </el-table-column> - <el-table-column - prop="MonthOutPut" - label="鍗遍櫓搴熺墿" - width="100px"> - </el-table-column> - </el-table-column> - <el-table-column label="璐瓨鐘舵�侊紙涓級"> - <el-table-column - prop="normal" - label="姝e父" - width="100px"> - <template slot-scope="{row,$index}"> - <u v-if="$index!=1" >{{row.normal}}</u> - <el-popover v-else - placement="bottom-end" - width="200" - trigger="click" - title="鐩戞祴鐐规帓鏀炬槑缁�" - > - <ChemicalWastewater></ChemicalWastewater> - <u slot="reference" style="color: #00ffff">{{row.normal}}</u> - </el-popover> - </template> - </el-table-column> - <el-table-column - prop="warning" - label="棰勮" - width="100px"> - </el-table-column> - </el-table-column> - </el-table> - </div> + <div class="waste-water"> + <el-table + class="tableBox" + :data="tableData" + style="width: 100%" + :header-cell-style="tableHeaderColor" + :cell-style="rowClass" + @cell-click="handle" + > + <el-table-column + width="30px" + label="" + > + <template slot-scope="{row,$index}"> + <!-- <i class="el-icon-caret-right" v-if="$index ===1"></i>--> + <el-popover + placement="bottom" + trigger="click" + :disabled="!isShowIcon" + popper-class="popovers" + > + <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater> + <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i> + <!-- <i class="el-icon-caret-bottom" slot="reference" v-else @click="doIcon($index)"></i>--> + </el-popover> + </template> + </el-table-column> + <el-table-column + label="搴忓彿" + width="45px" + type="index"> + </el-table-column> + <el-table-column + prop="UserName" + label="浼佷笟鍚嶇О" + width="120px"> + <template slot-scope="scope"> + <div v-if="scope.row.UserName==='闆嗗洟鍚嶇О'" style="color: #00ffff">{{scope.row.UserName}}</div> + <div v-else-if="scope.row.UserName==='澶╂触鐭冲寲'" style="color: #00ffff">{{scope.row.UserName}}</div> + <div v-else >{{scope.row.UserName}}</div> + </template> + </el-table-column> + <el-table-column + prop="WasteWaters" + label="澶栨帓搴熸按閲忥紙m鲁锛�" + width="100px"> + </el-table-column> + <el-table-column label="COD (t)"> + <el-table-column + prop="AddOutPut" + label="绱浜х敓閲�" + width="70px"> + </el-table-column> + <el-table-column + prop="MonthOutPut" + label="褰撴湀鐢熶骇閲�" + width="70px"> + </el-table-column> + </el-table-column> + <el-table-column label="姘ㄦ爱 (t)"> + <el-table-column + prop="NH4NPut" + label="绱浜х敓閲�" + width="70px"> + </el-table-column> + <el-table-column + prop="NH4NMonth" + label="褰撴湀鐢熶骇閲�" + width="70px"> + </el-table-column> + </el-table-column> + <el-table-column label="鎺掓斁鍙f娴嬬粺璁$姸鎬�"> + <el-table-column + prop="normal" + label="姝e父" + width="60px"> + <template slot-scope="{row,$index}"> + <u v-if="$index!=2" >{{row.normal}}</u> + <el-popover v-else + placement="bottom-end" + width="200" + trigger="click" + popper-class="popovers" + title="鐩戞祴鐐规槑缁嗚〃" + > + <refinery></refinery> + <u slot="reference" style="color: #00ffff">{{row.normal}}</u> + <!-- <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>--> + <!-- <i v-if="isShowIcon" class="el-icon-caret-bottom" slot="reference" @click="isbtn"></i>--> + <!-- <i v-else class="el-icon-caret-right" slot="reference" @click="isbtn"></i>--> + </el-popover> + </template> + </el-table-column> + <el-table-column + prop="overProof" + label="瓒呮爣" + width="60px"> + </el-table-column> + <el-table-column + prop="Abnormal" + label="寮傚父" + width="60px"> + </el-table-column> + <el-table-column + prop="StopProduction" + label="鍋滀骇" + width="60px"> + </el-table-column> + <el-table-column + prop="deficiency" + label="缂哄け" + width="60px"> + <template slot-scope="{row,$index}"> + <u v-if="$index!=1" >{{row.deficiency}}</u> + <el-popover v-else + placement="bottom-end" + width="200" + trigger="click" + title="澶╂触鐭冲寲鐩戞祴鐐圭己澶辨姤璀︽槑缁�" + popper-class="popovers" + > + <MissingAlarm></MissingAlarm> + <u slot="reference" style="color: #00ffff">{{row.deficiency}}</u> + </el-popover> + </template> + </el-table-column> + </el-table-column> + </el-table> + <!-- <ChemicalWastewater v-show="isShowIcon"></ChemicalWastewater>--> + <!-- </el-col>--> + <!-- </el-row>--> + </div> </template> <script> -import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater' +import ChemicalWastewater from './componented/ChemicalWastewater' +import Refinery from '@components/table/components/componented/refinery' +import MissingAlarm from '@components/table/components/componented/MissingAlarm' export default { name: 'SolidWaste', components: { + MissingAlarm, + Refinery, ChemicalWastewater }, data () { return { + isActive: '', + isShowIcon: false, tableData: [{ UserName: '闆嗗洟鍚嶇О', - AddOutPut: '580', - MonthOutPut: '250', - normal: '10', - warning: '9' + WasteWaters: '', + AddOutPut: '', + MonthOutPut: '', + NH4NPut: '', + NH4NMonth: '', + normal: '', + overProof: '', + Abnormal: '', + StopProduction: '', + deficiency: '' }, { UserName: '澶╂触鐭冲寲', WasteWaters: '116.6', AddOutPut: '58.3', MonthOutPut: '13.1', - warning: '13.1', - normal: '21' + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' }, { UserName: 'xxxx鐐煎寲3', WasteWaters: '116.6', MonthOutPut: '13.1', - warning: '13.1', - normal: '21' + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' }, { UserName: 'xxxx4', WasteWaters: '116.6', AddOutPut: '58.3', MonthOutPut: '13.1', - warning: '13.1', - normal: '21' + NH4NPut: '58.3', + NH4NMonth: '13.1', + normal: '21', + overProof: '2', + Abnormal: '2', + StopProduction: '2', + deficiency: '2' + }] } }, @@ -120,14 +210,35 @@ // 鑾峰彇鐐瑰嚮鐨勮〃鏍� handle (row, column, event, cell) { console.log(row.UserName) + }, + doIcon (index) { + if (index !== 1) { + this.isShowIcon = false + this.isActive = '' + return + } + this.isShowIcon = !this.isShowIcon + if (index === this.isActive) { + this.isActive = '' + return + } + this.isActive = index } } } </script> <style scoped> -.Solid-Waste{ - width: 100%; - height: 100%; +.popovers{ + width: auto !important; + background-color: gray !important; } +.popovers.el-popover{ + padding:0; +} +.active { + /*color: red;*/ + transform:rotate(90deg); +} + </style> diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue index 9411a28..6592090 100644 --- a/src/components/table/summarySheets.vue +++ b/src/components/table/summarySheets.vue @@ -9,7 +9,7 @@ <!-- <Dialog ref="summarySheets" title="浼佷笟鎸囨爣鍒嗙被缁熻">--> <!-- <tab-handover></tab-handover>--> <!-- </Dialog >--> - <div class="dialog" v-drag> + <div class="dialog" v-drag v-show="dialogShow"> <tab-handover></tab-handover> </div> </div> @@ -29,11 +29,13 @@ }, data () { return { - summaryVisible: false + summaryVisible: false, + dialogShow: false } }, methods: { closeBtn () { + this.dialogShow = !this.dialogShow // const summary = document.getElementById('summary') // summary.style.display = 'none' this.$refs.summarySheets.show() @@ -61,8 +63,8 @@ z-index: 500; .dialog { - width: 800px; - height: 300px; + //width: 800px; + //height: 300px; position: absolute; top: 15%; left: 3rem; -- Gitblit v1.8.0