From 79028970d73bb6fcb3fb6522589affda312dcabe Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期三, 31 三月 2021 19:06:21 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/assets/css/map/map-panel-style.less | 11 ++ src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue | 46 ++++++++-- src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue | 85 +++++++++++++++++--- src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue | 63 ++++----------- src/components/BaseNav/PublicBounced/PublicBounced.vue | 6 + 5 files changed, 138 insertions(+), 73 deletions(-) diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 0f1628e..2a9b8ee 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -191,3 +191,14 @@ .popper__arrow { display: none !important; } + +.el-tabs--card>.el-tabs__header .el-tabs__nav{ + border: none; +} + +.el-tabs--card>.el-tabs__header .el-tabs__item{ + border: none; + margin-left: 10px; +} + + diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue b/src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue index 1016531..1ab150f 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue @@ -1,17 +1,10 @@ <template> - <!-- 妗� --> - <div class="win"> - <div class="main"> - <div class="main-matter"> - <el-row type="flex" class="row-bg row-item-one" justify="space-around"> - <el-col :span="6">姘哀鍖栫墿:{{ displayContent.Name }} 鏍囧噯: 100</el-col> - <el-col :span="6">浜屾哀鍖栫~:{{ displayContent.DeptSname }} 鏍囧噯: 50</el-col> - <el-col :span="6">鐑熷皹:{{ displayContent.EmissTypeName }} 鏍囧噯: 30</el-col> - <el-col :span="6">搴熸皵娴侀噺:{{ displayContent.EmissTypeName }}</el-col> - </el-row> - </div> - </div> - </div> + <div class="Infomation"> + <el-tag>姘哀鍖栫墿: 29.93 鏍囧噯: 100</el-tag> + <el-tag>浜屾哀鍖栫~: 17.34鏍囧噯: 50</el-tag> + <el-tag>鐑熷皹: 6.93鏍囧噯: 30</el-tag> + <el-tag>搴熸皵娴侀噺: 120343.18</el-tag> + </div> </template> <script> @@ -25,40 +18,16 @@ </script> <style scoped lang="less"> - -.win { - position: relative; - margin-bottom: 13px; - background-color: rgba(33, 41, 69,0.9); -} -.main { - width: 100%; - height: 100%; - .main-matter{ - font-size: 13px; - font-weight: normal; - border: 1px solid #396d83; - .row-item-one{ - margin-bottom: 7px; + .Infomation{ + margin-left: 10px; } - .el-row { - width: 100%; - color: #00d0f9; - display: flex; - font-size: 12px !important; - .el-col{ - flex: 1; - width: 100%; - background-color: #243a55;; - text-align: center; - line-height: 28px; - margin-left: 6px; - border-radius: 4px; - &:nth-child(1){ - margin-left:0; - } - } + .el-tag{ + height: 25px; + line-height: 25px; + margin-right: 10px; + font-size: 10px; + background-color: rgba(0, 255, 246, 0.14); + color: #00d0f9; + border: none; } - } -} </style> diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue index 65a7885..8f66ec0 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue @@ -1,7 +1,6 @@ <template> - <div class="main"> - <div id="echarts" ref="main"></div> - </div> + <div id="echarts" ref="main"> + </div> </template> <script> @@ -25,7 +24,32 @@ } }, legend: { - data: ['姘哀鍖栫墿', '浜屾哀鍖栫~', '鐑熷皹', '搴熸皵娴侀噺'] + x: '200px', + y: '30px', + data: [{ + name: '姘哀鍖栫墿', + textStyle: { + color: '#00d0f9' + } + }, + { + name: '浜屾哀鍖栫~', + textStyle: { + color: '#00d0f9' + } + }, + { + name: '鐑熷皹', + textStyle: { + color: '#00d0f9' + } + }, + { + name: '搴熸皵娴侀噺', + textStyle: { + color: '#00d0f9' + } + }] // pageTextStyle: { // color: '#fff' // } @@ -34,7 +58,7 @@ left: '3%', right: '1%', bottom: '3%', - top: '10%', + // top: '1%', containLabel: true }, toolbox: { @@ -92,6 +116,7 @@ // Y 杞寸殑璁剧疆 yAxis: [{ type: 'value', + // position: 'left', // 澶� Y 杞翠娇鐢� // name: yname, // 鍚庢湡鍥炬爣Y杞存樉绀哄崟浣� name: '娴撳害(mg/m鲁)', axisLabel: { @@ -150,15 +175,14 @@ </script> <style scoped lang="less"> - .main{ - background: rgba(255, 255, 255, 0.1); - } #echarts{ - width: 600px; - //height: 260px; - height: 100%; + width: 670px; + height: 260px; position: relative; margin: 0; padding: 0; + /*background-color: rgba(0, 0, 0, 0.6);*/ + border: 1px solid #396d83; + margin: 10px 10px 10px 10px; } </style> diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue index cb65c0c..44f8842 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue @@ -1,25 +1,82 @@ <template> -<div> - <el-tabs v-model="activeName"> - <el-tab-pane label="瀹炶瘯鏁版嵁" name="first">瀹炶瘯鏁版嵁</el-tab-pane> - <el-tab-pane label="鏃ユ暟鎹�" name="second">鏃ユ暟鎹�</el-tab-pane> - <el-tab-pane label="鏈堟暟鎹�" name="third">鏈堟暟鎹�</el-tab-pane> - <el-tab-pane label="浜哄伐鏁版嵁" name="fourth">浜哄伐鏁版嵁</el-tab-pane> - </el-tabs> -<!-- <EchartsTab></EchartsTab>--> -<!-- <GasECharts></GasECharts>>--> -</div> + <div class="win"> + <div class="border_corner border_corner_left_top"></div> + <div class="border_corner border_corner_right_top"></div> + <div class="border_corner border_corner_left_bottom"></div> + <div class="border_corner border_corner_right_bottom"></div> + <el-tabs type="card" v-model="activeName"> + <el-tab-pane label="瀹炶瘯鏁版嵁" name="first"> + <EchartsTab></EchartsTab> + <GasECharts></GasECharts> + </el-tab-pane> + <el-tab-pane label="鏃ユ暟鎹�" name="second"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane> + <el-tab-pane label="鏈堟暟鎹�" name="third"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane> + <el-tab-pane label="浜哄伐鏁版嵁" name="fourth"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane> + </el-tabs> + </div> </template> <script> -// import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts' +import GasECharts from './GasECharts' +import EchartsTab from './EchartsTab' + export default { name: 'GasTabs', - components: {} - // GasECharts + components: { + GasECharts, + EchartsTab + }, + data () { + return { + activeName: 'first' + } + }, + methods: { + handleClick (tab, event) { + console.log(tab, event) + } + } } + </script> <style scoped> - + .win { + position: relative; + margin-bottom: 13px; + background-color: rgba(33, 41, 69,0.9); + border: 0.8px solid #396d83; + } + .border_corner{ + z-index: 999; + position: absolute; + width: 10px; + height: 10px; + background: rgba(0,0,0,0); + border: 1.5px solid #47d5ea; + } + .border_corner_left_top{ + top: 0; + left: 0; + border-right: none; + border-bottom: none; + } + .border_corner_right_top{ + top: 0; + right: 0; + border-left: none; + border-bottom: none; + } + .border_corner_left_bottom{ + bottom: 0; + left: 0; + border-right: none; + border-top: none; + } + .border_corner_right_bottom{ + bottom: 0; + right: 0; + border-left: none; + border-top: none; + } </style> diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index e0df2bb..c766b58 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -7,6 +7,7 @@ <div class="public-bounced-content"> <div class="public-bounced-content-left"> <GasTab :displayContent="displayContent"></GasTab> + <GasTabs></GasTabs> <div class="public-bounced-content-left-bottom"> <PublicTable v-if="value === 'gufei'" :requestSolidWasteData="displayContent.StoragePlaceId"></PublicTable> <GasECharts v-else></GasECharts> @@ -26,14 +27,17 @@ import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable' import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts' import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo' -// import GasTabs from './GasComponents/GasTabs' +import GasTabs from './GasComponents/GasTabs' export default { name: 'PublicBounced', components: { + GasTabs, GasTab, PublicTable, GasECharts, + // PublicTable, + // GasECharts, GasVideo }, data () { -- Gitblit v1.8.0