From 3963a224656350f75d431d9b1af8274d4681a2bf Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 06 四月 2021 18:05:22 +0800
Subject: [PATCH] 弹出框固废相关样式修改
---
src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue | 15 +--
src/assets/css/map/map-panel-style.less | 21 +++++
src/conf/MapConfig.js | 2
src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue | 39 ++++++---
src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue | 113 ++++++++++++++++++---------
src/components/BaseNav/PublicBounced/PublicBounced.vue | 27 +++---
6 files changed, 142 insertions(+), 75 deletions(-)
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
index b806be3..b76016e 100644
--- a/src/assets/css/map/map-panel-style.less
+++ b/src/assets/css/map/map-panel-style.less
@@ -250,4 +250,23 @@
.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
/* padding-left: 10px; */
text-align: center;
-}
\ No newline at end of file
+}
+.el-table th>.cell {
+ color: #00fff6;
+}
+.el-table__row>td{
+ border: none;
+}
+.el-table::before {//鍘绘帀鏈�涓嬮潰鐨勯偅涓�鏉＄嚎
+ height: 0;
+}
+.el-table td, .el-table th.is-leaf {
+ border: none;
+}
+.el-table .warning-row {
+ background: #28304d;
+}
+
+.el-table .success-row {
+ background: #30455f;
+}
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
index 9ff98d3..cf0be6c 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue
@@ -6,18 +6,20 @@
<div class="border_corner border_corner_left_bottom"></div>
<div class="border_corner border_corner_right_bottom"></div>
<div class="main">
- <div class="main-video">
+ <div class="main-table">
<el-table
- border
+ stripe='stripe'
+ :height="300"
tooltip-effect="dark"
:data="displayContentTableData"
+ :row-class-name="tableRowClassName"
>
<el-table-column prop="StoragePlaceId" label="搴忓彿"></el-table-column>
<el-table-column prop="StoragePlaceTypeName" label="绫诲埆"></el-table-column>
<el-table-column prop="StoragePlaceName" label="鍥哄簾鍚嶇О"></el-table-column>
<el-table-column prop="StorageZDMJ" label="浠ｇ爜"></el-table-column>
- <el-table-column prop="StorageZCNL" label="浜х敓閲�"></el-table-column>
- <el-table-column prop="StorageZCL" label="鍌ㄥ瓨閲�"></el-table-column>
+ <el-table-column prop="StorageZCNL" label="浜х敓閲�(t)"></el-table-column>
+ <el-table-column prop="StorageZCL" label="鍌ㄥ瓨閲�(t)"></el-table-column>
<el-table-column prop="StorageType" label="浜х敓瑁呯疆"></el-table-column>
</el-table>
</div>
@@ -38,42 +40,49 @@
this.$nextTick(() => {
this.displayContentTable.forEach(item => {
this.displayContentTableData = item
- // console.log(item[0])
})
})
+ },
+ methods: {
+ tableRowClassName ({
+ row,
+ rowIndex
+ }) {
+ if (rowIndex % 2 === 0) {
+ return 'warning-row'
+ } else if (rowIndex % 2 === 1) {
+ return 'success-row'
+ }
+ return ''
+ }
}
}
</script>
<style lang="less" scoped>
+
.win {
position: relative;
background-color: rgba(33, 41, 69, 0.9);
+ min-height: 300px;
}
.main {
width: 100%;
height: 100%;
- .main-video {
+ .main-table {
width: 100%;
- min-height: 195px;
- //border: 1px @color solid;
-
- video {
- width: 100%;
- height: 100%;
- outline: none;
- }
}
}
+
.border_corner {
z-index: 999;
position: absolute;
width: 14px;
height: 14px;
background: rgba(0, 0, 0, 0);
- border: 1.5px solid #47d5ea;
+ border: 1px solid #47d5ea;
}
.border_corner_left_top {
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
index 29723b3..6c039cd 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
@@ -16,22 +16,20 @@
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="8">鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</el-col>
- <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
- <el-col :span="8">鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</el-col>
+ <el-col :span="18">鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
+ <el-col :span="18">鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</el-col>
</el-row>
</div>
- <div v-else-if="value === 'gufei'">
- <el-row type="flex" class="row-bg row-item-one" justify="space-around">
- <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{ displayContentTab2.StoragePlaceName }}</el-col>
- <el-col :span="8">鐢熶骇鍗曚綅:{{ displayContentTab2.StoragePlaceName }}</el-col>
- <el-col :span="8">鎺掓斁绫诲瀷鍔犺浇:{{ displayContentTab2.DesignFloorArea }}</el-col>
- </el-row>
- <el-row type="flex" class="row-bg" justify="space-around">
- <el-col :span="8">鎺掓斁鍘诲悜:{{ displayContentTab2.StorageQty }}</el-col>
- <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ displayContentTab2.SurplusFloorArea }}</el-col>
- <el-col :span="8">鍐�/澶栨帓鍙�:{{ displayContentTab2.StorageDate }}</el-col>
- </el-row>
- </div>
+ <div v-else-if="value === 'gufei'">
+ <ul>
+ <li>鍦烘墍鍚嶇О:{{ tabData.StoragePlaceName }}</li>
+ <li>璐瓨鑳藉姏:{{ tabData.StorageQty }}(鍚�)</li>
+ <li>鍓╀綑璐瓨鑳藉姏:{{ tabData.SurplusFloorArea }}(鍚�)</li>
+ <li>鍗犲湴闈㈢Н(銕�):{{ tabData.DesignFloorArea }}(銕�)</li>
+ <li>鏈�杩戣串瀛樻棩鏈�:{{ tabData.StorageDate }}</li>
+ <li></li>
+ </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">鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</el-col>
@@ -55,16 +53,19 @@
props: ['displayContentTab', 'value', 'setWasteGasdata'],
data () {
return {
- displayContentTab2: []
+ tabData: []
}
},
mounted () {
- this.$nextTick(() => {
- this.displayContentTab.forEach(item => {
- this.displayContentTab2 = item
- // console.log(item)
- })
- })
+ this.processingData()
+ },
+ methods: {
+ processingData () {
+ for (var i = 0; i < this.displayContentTab.length; i++) {
+ console.log(this.displayContentTab[i])
+ this.tabData = this.displayContentTab[i]
+ }
+ }
}
}
</script>
@@ -73,67 +74,103 @@
.win {
position: relative;
- margin-bottom: 13px;
- background-color: rgba(33, 41, 69,0.9);
+ margin-bottom: 10px;
+ background-color: rgba(33, 41, 69, 0.9);
}
+
.main {
width: 100%;
height: 100%;
- .main-matter{
+
+ .main-matter {
font-size: 13px;
font-weight: normal;
- padding: 10px 6px;
+ //padding: 10px 6px;
+ min-height: 70px;
border: 1px solid #396d83;
- .row-item-one{
+
+ .row-item-one {
margin-bottom: 7px;
}
+
.el-row {
width: 100%;
color: #00d0f9;
display: flex;
font-size: 12px !important;
- .el-col{
+
+ .el-col {
flex: 1;
width: 100%;
- background-color: #243a55;;
+ background-color: #243a55;
text-align: center;
line-height: 28px;
margin-left: 6px;
border-radius: 4px;
- &:nth-child(1){
- margin-left:0;
+
+ &:nth-child(1) {
+ margin-left: 0;
}
+ }
+ }
+
+ ul {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ line-height: 35px;
+
+ li {
+ text-align: center;
+ width: 32%;
+ height: 30px;
+ margin: 5px auto;
+ background-color: #243a55;
+ color: #00d0f9;
+ border-radius: 4px;
+ }
+
+ li:last-child {
+ visibility: hidden
}
}
}
}
-.border_corner{
+
+.border_corner {
z-index: 999;
position: absolute;
width: 10px;
- height: 10px;
- background: rgba(0,0,0,0);
- border: 1.5px solid #47d5ea;
+ //height: 10px;
+ background: rgba(0, 0, 0, 0);
+ border: 1px solid #47d5ea;
}
-.border_corner_left_top{
+
+.border_corner_left_top {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
-.border_corner_right_top{
+
+.border_corner_right_top {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
}
-.border_corner_left_bottom{
+
+.border_corner_left_bottom {
bottom: 0;
left: 0;
border-right: none;
border-top: none;
}
-.border_corner_right_bottom{
+
+.border_corner_right_bottom {
bottom: 0;
right: 0;
border-left: none;
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue
index 9519388..9c29b81 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue
@@ -6,12 +6,12 @@
<div class="border_corner border_corner_left_bottom"></div>
<div class="border_corner border_corner_right_bottom"></div>
<div class="main">
- <div class="main-video">
+<!-- <div class="main-video">-->
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
- </div>
+<!-- </div>-->
</div>
</div>
</template>
@@ -30,15 +30,14 @@
.main {
border: 1px solid #396d83;
padding: 6px;
- .main-video {
- width: 100%;
- height: 100%;
+ //.main-video {
+ height: 378px;
video {
width: 100%;
- height: 100%;
+ height: 378px;
outline: none;
}
- }
+ //}
}
.border_corner{
z-index: 999;
@@ -46,7 +45,7 @@
width: 14px;
height: 14px;
background: rgba(0,0,0,0);
- border: 1.5px solid #47d5ea;
+ border: 1px solid #47d5ea;
}
.border_corner_left_top{
top: 0;
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 9a379d9..41a96c1 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -6,15 +6,16 @@
</div>
<div class="public-bounced-content">
<div class="public-bounced-content-left">
- <PublicTabs :displayContentTab="displayContentTab" :value="value"
- :setWasteGasdata="setWasteGasdata"></PublicTabs>
+ <public-tabs :displayContentTab="displayContentTab" :value="value"
+ :setWasteGasdata="setWasteGasdata"></public-tabs>
<div class="public-bounced-content-left-bottom">
- <PublicTable v-if="value === 'gufei'" :displayContentTable="displayContentTable"></PublicTable>
- <PublicChart v-else></PublicChart>
+ <public-table v-if="value === 'gufei'"
+ :displayContentTable="displayContentTable"></public-table>
+ <public-chart v-else></public-chart>
</div>
</div>
<div class="public-bounced-content-right">
- <PublicVideo></PublicVideo>
+ <public-video></public-video>
</div>
</div>
</div>
@@ -48,13 +49,13 @@
},
methods: {
setData (dataBasic, dataDetailed, value) {
+ this.flag = true
+ this.value = value
dataBasic.forEach(item => {
this.displayContentTitle = item.StoragePlaceName
})
this.displayContentTab = dataBasic
this.displayContentTable = dataDetailed
- this.flag = true
- this.value = value
},
setGasData (data, value) {
this.setWasteGasdata = data
@@ -102,20 +103,22 @@
.public-bounced-content {
margin: 15px auto;
display: flex;
- //align-items: center;
+ align-items: center;
justify-content: space-around;
padding: 10px;
.public-bounced-content-left {
flex: 3;
- height: 100%;
- margin-right: 10px;
+ //width: 64%;
+ //height: 100%;
+ //margin-right: 10px;
}
.public-bounced-content-right {
flex: 2;
- //width: 48%;
- height: 100%;
+ margin-left: 10px;
+ //width: 34%;
+ //height: 100%;
}
}
}
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 704279b..a9247bf 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -32,7 +32,7 @@
// center: [26, 104],
center: [38.828558921813965, 117.41676807403564],
// center: [29.454345703125, 113.40362548828125],
- zoom: 14,
+ zoom: 5,
worldCopyJump: true,
inertia: true,
zoomControl: false,
--
Gitblit v1.8.0