From 61903a7e8e95405c23d627ad3c08618bd775715e Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期一, 12 四月 2021 11:42:19 +0800
Subject: [PATCH] 弹框样式修改&& 左侧联动关闭操作面板
---
src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 86 +++-------
src/components/table/summarySheets.vue | 13 +
src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue | 166 ++++++++++----------
src/components/panel/ToolBoxPanel.vue | 20 ++
src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue | 54 ++---
src/components/LayerController/LayerController.vue | 15 +
src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue | 80 ++-------
src/components/BaseNav/PublicBounced/PublicBounced.vue | 20 +-
src/eventBus.js | 2
9 files changed, 213 insertions(+), 243 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
index 8e0f659..994a8be 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
@@ -15,19 +15,14 @@
<div class="pickerData">
<span> 寮�濮嬫椂闂�:</span>
<span class="pickerTable">
- <el-date-picker type="datetime" v-model="value1">
- </el-date-picker>
- </span>
+ <el-date-picker type="datetime" v-model="value1"></el-date-picker>
+ </span>
</div>
<div class="pickerData">
<span >缁撴潫鏃堕棿:</span>
<span class="pickerTable">
- <el-date-picker
- type="datetime"
- v-model="value2"
- >
- </el-date-picker>
- </span>
+ <el-date-picker type="datetime" v-model="value2"></el-date-picker>
+ </span>
</div>
</div>
<div>
@@ -308,17 +303,18 @@
// }
//}
.grid-content {
- font-size: 8px !important;
+ font-size: 8px;
background-color: #2e4967;
text-align: center;
- margin: 0 2px 4px 2px;
border-radius: 2px;
+ margin-right: 10px;
+ padding:0 10px
}
.animation {
//width: 600px;
//height: 0.06rem;
- .Infomation {
- margin-left: 10px;
+ .infomation {
+ padding: 5px 10px;
}
}
.form-echrts {
@@ -338,18 +334,8 @@
flex: 1;
display: flex;
>span{line-height: 22px}
- .pickerTable{
- margin-left: 6px;
- /deep/.el-input{
- font-size: 0px;
- .el-input__prefix{
- width: 100%;
- }
- }
- /deep/.el-input__icon {
- width: 100%;
- font-size: 0;
- }
+ .pickerTable {
+ margin-left: 3px;
}
}
}
@@ -358,8 +344,8 @@
}
/deep/.el-input__inner{
position: relative;
- width: 0.9rem!important;
- height: 0.125rem!important;
+ width:140px;
+ height:22px;
background-color: #2e4967;
color: #ffffff;
font-size: 12px;
@@ -368,6 +354,14 @@
//padding-left:20px ;
//padding: 0!important;
}
+ /deep/.el-input__icon{
+ display: block;
+ width: 140px;
+ height: 22px;
+ line-height: 22px;
+ cursor: pointer;
+ font-size: 0;
+ }
.echatsInput{
color: #00ffff;
background-color: #2e4967;
@@ -375,6 +369,7 @@
border-radius: 6px;
width: 80px;
height: 22px;
+ text-align: center;
}
input::-webkit-calendar-picker-indicator {
opacity: 100;
@@ -383,7 +378,7 @@
background-color:#2e4967;
text-align: center;
padding: 0 7px;
- line-height: 20px;
+ line-height: 24px;
border-radius: 4px;
margin-right: 6px;
}
@@ -397,9 +392,6 @@
#echarts {
margin: 0;
padding: 0;
- //height: 3rem;
- //border: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
}
}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
index 981b512..27356eb 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
@@ -298,94 +298,92 @@
<style scoped lang="less">
.grid-content{
- font-size: 8px!important;
- background-color:#2e4967;
- text-align: center;
- margin: 0 2px 4px 2px;
- border-radius: 2px;
+ font-size: 8px;
+ background-color: #2e4967;
+ text-align: center;
+ border-radius: 2px;
+ margin-right: 10px;
+ padding:0 10px
}
-.Infomation {
- margin-left: 10px;
+.infomation {
+ padding: 5px 10px;
}
.form-echrts {
- width: 100%;
- border-top: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
- .from-search{
- display: flex;
- padding:5px;
- >div{margin-left: 10px}
- .pickerMon{
- display: flex;
- >div:first-child{
- margin-right: 10px;
- }
- .pickerData{
- flex: 1;
- display: flex;
- >span{line-height: 22px}
- .pickerTable{
- margin-left: 6px;
- /deep/.el-input{
- font-size: 0px;
- .el-input__prefix{
- width: 100%;
- }
- }
- /deep/.el-input__icon {
- //font-size: 0;
- width: 100%;
- }
- }
- }
- }
- /deep/.el-date-editor--datetime{
- width: 100%;
- }
- /deep/.el-input__inner{
- position: relative;
- width: 0.9rem!important;
- height: 0.125rem!important;
- background-color: #2e4967;
- color: #ffffff;
- font-size: 12px;
- height: 24px;
- padding: 0;
- //padding-left:20px ;
- //padding: 0!important;
- }
- .echatsInput{
- color: #00ffff;
- background-color: #2e4967;
- border: none;
- border-radius: 6px;
- width: 80px;
- height: 22px;
- }
- input::-webkit-calendar-picker-indicator {
- opacity: 100;
- }
- .detailbtn{
- background-color:#2e4967;
- text-align: center;
- padding: 0 7px;
- line-height: 20px;
- border-radius: 4px;
- }
- }
- .el-dialog-div {
- //height: 50vh!important;
- overflow: auto;
- //overflow: hidden;
- }
-
- #echarts {
- margin: 0;
- padding: 0;
- //height: 3rem;
- //border: 1px solid #396d83;
+ width: 100%;
+ border-top: 1px solid #396d83;
//margin: 10px 10px 10px 10px;
- }
+ .from-search{
+ display: flex;
+ padding:5px;
+ >div{margin-left: 10px}
+ .pickerMon{
+ display: flex;
+ >div:first-child {
+ margin-right: 10px;
+ }
+ .pickerData{
+ flex: 1;
+ display: flex;
+ >span{line-height: 22px}
+ .pickerTable {
+ margin-left: 3px;
+ }
+ }
+ }
+ /deep/.el-date-editor--datetime{
+ width: 100%;
+ }
+ /deep/.el-input__inner{
+ position: relative;
+ width:140px;
+ height:22px;
+ background-color: #2e4967;
+ color: #ffffff;
+ font-size: 12px;
+ height: 24px;
+ padding: 0;
+ //padding-left:20px ;
+ //padding: 0!important;
+ }
+ /deep/.el-input__icon{
+ display: block;
+ width: 140px;
+ height: 22px;
+ line-height: 22px;
+ cursor: pointer;
+ font-size: 0;
+ }
+ .echatsInput{
+ color: #00ffff;
+ background-color: #2e4967;
+ border: none;
+ border-radius: 6px;
+ width: 80px;
+ height: 22px;
+ text-align: center;
+ }
+ input::-webkit-calendar-picker-indicator {
+ opacity: 100;
+ }
+ .detailbtn{
+ background-color:#2e4967;
+ text-align: center;
+ padding: 0 7px;
+ line-height: 24px;
+ border-radius: 4px;
+ margin-right: 6px;
+ }
+ }
+ .el-dialog-div {
+ //height: 50vh!important;
+ overflow: auto;
+ //overflow: hidden;
+ }
+
+ #echarts {
+ margin: 0;
+ padding: 0;
+ }
}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
index 7296b46..16f4121 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
@@ -9,16 +9,15 @@
<li @click='tabTaggle("EChartsHour")'>灏忔椂鏁版嵁</li>
<li @click='tabTaggle("EChartsDate")'>鏃ユ暟鎹�</li>
<li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li>
- <div id="title" >
- <span><strong> </strong></span>
- <span >姝ｅ父</span>
- <span ></span>
- <span >棰勮</span>
- <span ></span>
- <span >瓒呮爣</span>
- <span ></span>
- </div>
</ul>
+ <div class="legend" >
+ <span >姝ｅ父</span>
+ <i style=" background: #4ec99c;"></i>
+ <span >棰勮</span>
+ <i style=" background: red;"></i>
+ <span >瓒呮爣</span>
+ <i style=" background: orange;"></i>
+ </div>
<component :is="currentTab" v-bind="$attrs"></component>
</div>
</template>
@@ -103,66 +102,39 @@
.tab {
display: flex;
border-bottom: 1px solid #396d83;
- margin-bottom: 10px;
+ padding:5px 10px
}
-li {
+.tab li {
background-color: #243a55;
- margin: 10px 10px 2px 10px;
- /*padding: 5px 10px;*/
- width: 90px;
- height: 25px;
line-height: 25px;
text-align: center;
border-radius: 5px;
+ margin-right: 10px;
+ padding:0 15px
}
-ul li:hover {
+.tab li:hover {
background-color: #0e639e;
color: #682000;
cursor: pointer;
}
-#title{
- height: 30px;
- /* margin-top: 30px; */
- color: #ffffff;
- margin-top: 5px;
+.legend{
+ position: absolute;
+ top:10px;
+ right: 0;
+ display: flex;
+ justify-items: center;
+}
+.legend i {
+ display: block;
+ width: 35px;
+ height: 15px;
+ margin:0 10px 0 3px;
+ border-radius: 3px;
+}
+.legend span{
+ line-height: 15px;
}
-#title span:nth-child(1){
- /*margin-left: 478px*/
-}
-#title span:nth-child(2){
- /*margin-left: 177px*/
-}
-#title span:nth-child(3){
- display: inline-block;
- background-color: #4ec99c;
- height: 15px;
- width: 35px;
- margin-left: 10px;
- border-radius: 5px;
-}
-#title span:nth-child(6){
- /*margin-left: 21px*/
-}
-#title span:nth-child(7){
- display: inline-block;
- background-color: red;
- height: 15px;
- width: 35px;
- margin-left: 7px;
- border-radius: 5px;
-}
-#title span:nth-child(4){
- margin-left: 17px;
-}
-#title span:nth-child(5){
- display: inline-block;
- background-color: orange;
- height: 15px;
- width: 35px;
- margin-left: 9px;
- border-radius: 5px;
-}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
index 3df30bb..d688dce 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
@@ -9,16 +9,14 @@
<div class="main">
<div class="main-matter">
<div v-if="value === 'feiqi'">
- <el-row type="flex" class="row-bg row-item-one" justify="space-around">
- <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</el-col>
- <el-col :span="8">鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</el-col>
- <el-col :span="8">鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</el-col>
- </el-row>
- <el-row type="flex" class="row-bg row-item-two" justify="space-around">
- <el-col :span="8">鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</el-col>
- <el-col :span="18">鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
- <el-col :span="18">鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</el-col>
- </el-row>
+ <ul>
+ <li>鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</li>
+ <li>鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</li>
+ <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</li>
+ <li>鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</li>
+ <li>鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</li>
+ <li>鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</li>
+ </ul>
</div>
<div v-else-if="value === 'gufei'">
<ul>
@@ -31,16 +29,14 @@
</ul>
</div>
<div v-else-if="value === 'feishui'">
- <el-row type="flex" class="row-bg row-item-one" justify="space-around">
- <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{ setWasteWaterdata.Name }}</el-col>
- <el-col :span="8">鐢熶骇鍗曚綅:{{ setWasteWaterdata.porltName }}</el-col>
- <el-col :span="8">鎺掓斁绫诲瀷鍚嶇О:{{ setWasteWaterdata.MonTypeName }}</el-col>
- </el-row>
- <el-row type="flex" class="row-bg row-item-two" justify="space-around">
- <el-col :span="8">鎺掓斁鍘诲悜:{{ setWasteWaterdata.EmissDirecti }}</el-col>
- <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ setWasteWaterdata.ContrLevelShowName }}</el-col>
- <el-col :span="8">鍐�/澶栨帓鍙�:{{ setWasteWaterdata.OrOutPortName }}</el-col>
- </el-row>
+ <ul>
+ <li>鐩戞祴鐐瑰悕绉�:{{ setWasteWaterdata.Name }}</li>
+ <li>鐢熶骇鍗曚綅:{{ setWasteWaterdata.porltName }}</li>
+ <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteWaterdata.MonTypeName }}</li>
+ <li>鎺掓斁鍘诲悜:{{ setWasteWaterdata.EmissDirecti }}</li>
+ <li>鎺у埗绾у埆鍚嶇О:{{ setWasteWaterdata.ContrLevelShowName }}</li>
+ <li>鍐�/澶栨帓鍙�:{{ setWasteWaterdata.OrOutPortName }}</li>
+ </ul>
</div>
</div>
</div>
@@ -87,40 +83,8 @@
.main-matter {
font-size: 13px;
font-weight: normal;
- padding: 0 6px;
+ padding: 6px;
border: 1px solid #396d83;
-
- .row-item-one {
- //flex-wrap: nowrap;
- overflow: hidden;
- margin-top: 6px;
- margin-bottom: 7px;
- //margin-left: 10px;
- }
- .row-item-two{
- margin-bottom: 6px;
- }
- .el-row {
- width: 100%;
- color: #00d0f9;
- display: flex;
- font-size: 12px !important;
- text-align: center;
-
- .el-col {
- text-align: center;
- flex: 1;
- width: 100%;
- background-color: #243a55;
- margin-left: 6px;
- border-radius: 4px;
-
- &:nth-child(1) {
- margin-left: 0;
- }
- }
- }
-
ul {
//width: 100%;
//height: 100%;
@@ -128,16 +92,14 @@
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
- line-height: 30px;
-
+ margin-bottom: -6px;
li {
+ margin-bottom: 6px;
text-align: center;
- width: 32%;
- height: 30px;
- margin: 5px auto;
+ min-width: 32%;
background-color: #243a55;
color: #00d0f9;
- border-radius: 4px;
+ border-radius: 3px;
font-size: 0.08rem;
}
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index b221e49..27b278a 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,7 +1,7 @@
<template>
- <div class="public-bounced" v-drag v-if="flag">
+ <div class="public-bounced map-background" v-drag v-if="flag">
<!-- <Echarts></Echarts>-->
- <div class="public-bounced-title">
+ <div class="public-bounced-title panel-title">
<span>{{ displayContentTitle }}</span>
<i class="el-icon-circle-close" @click="closePopup"></i>
</div>
@@ -101,16 +101,13 @@
<style lang="less" scoped>
.public-bounced {
- z-index: 999;
+ z-index: 2000;
position: absolute;
top: 15%;
left: 20%;
- background-color: #002432;
- border: 1px #9fc5c8 solid;
.public-bounced-title {
height: 0.1rem;
- border: 1px #a4c0d8 solid;
padding: 10px 0;
display: flex;
align-items: center;
@@ -123,11 +120,14 @@
}
i {
- color: white;
- margin: 0 15px;
- font-size: 22px;
- cursor: pointer;
+ color: #C0C4CC;
+ margin: 0 15px;
+ font-size: 22px;
+ cursor: pointer;
}
+ i:hover{
+ color: #00fff6;
+ }
}
.public-bounced-content {
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index fe80364..ef07406 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -21,7 +21,7 @@
import iconSetting from '@/assets/images/map-pages/icon/setting.png'
import LcServiceLayer from './modules/LcServiceLayer'
-
+import bus from '@/eventBus'
export default {
name: 'LayerController',
components: { LcServiceLayer },
@@ -55,9 +55,22 @@
}
}
},
+ mounted () {
+ const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 3 && state.type) {
+ that.layerControllerVisible = false
+ }
+ })
+ },
methods: {
showPanel () {
this.layerControllerVisible = !this.layerControllerVisible
+ const state = {
+ type: this.layerControllerVisible,
+ num: 3
+ }
+ bus.$emit('changeState', state)
},
switchPanel () {
this.panelSwitch.main = !this.panelSwitch.main
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 9733c83..1e62696 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -96,6 +96,9 @@
// 娴嬮噺鐨勬柟娉�
import Measure from '@/components/plugin/MeaSure'
+//
+import bus from '@/eventBus'
+
export default {
name: 'ToolBoxPanel',
components: {
@@ -263,7 +266,19 @@
]
}
},
+ mounted () {
+ /* import bus from '@/eventBus' */
+ const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 1 && state.type) {
+ that.selectGroup = false
+ that.isShow = []
+ that.active = -1
+ }
+ })
+ },
methods: {
+
init (map) {
this.map = map
this.toolBoxPanelVisible = true
@@ -391,6 +406,11 @@
this.isShow = !this.isShow
this.active = -1
}
+ const state = {
+ type: this.selectGroup,
+ num: 1
+ }
+ bus.$emit('changeState', state)
}
}
}
diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue
index 41239cf..909a35f 100644
--- a/src/components/table/summarySheets.vue
+++ b/src/components/table/summarySheets.vue
@@ -47,7 +47,7 @@
import IndexStatistics from './components/IndexStatistics'
import '@/components/BaseNav/SolidWaste/directive/dir'
-
+import bus from '@/eventBus'
export default {
name: 'summary-sheet.vue',
components: {
@@ -68,6 +68,7 @@
}
},
methods: {
+
closeBtn () {
this.$refs.summarySheets.show()
this.summaryVisible = true
@@ -82,10 +83,20 @@
},
subtopicBtn () {
this.subtopic = !this.subtopic
+ const state = {
+ type: this.subtopic,
+ num: 2
+ }
+ bus.$emit('changeState', state)
}
},
mounted () {
const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 2 && state.type) {
+ that.subtopic = false
+ }
+ })
this.$nextTick(() => {
this.$refs.summarySheets.$on('closeDialog', () => {
that.summaryVisible = false
diff --git a/src/eventBus.js b/src/eventBus.js
new file mode 100644
index 0000000..b0230b5
--- /dev/null
+++ b/src/eventBus.js
@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()
--
Gitblit v1.8.0