From a19ce43fb54c9d5e3aeb237ca3b2ca2f2abe0ba8 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期三, 14 四月 2021 10:38:08 +0800 Subject: [PATCH] 废水图标完善 --- src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 56 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue index 2729caf..e4d0a61 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue @@ -4,11 +4,17 @@ <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> - <ul class="tab"> - <li @click='tabTaggle("Echarts")'>瀹炴椂鏁版嵁</li> - <li @click='tabTaggle("EChartsHour")'>灏忔椂鏁版嵁</li> - <li @click='tabTaggle("EChartsDate")'>鏃ユ暟鎹�</li> - <li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li> + <ul class="tab" v-if="this.$attrs.value === 'feiqi'"> + <li :class="active==0?'hover':''" @click='tabTaggle("ECharts",0)'>瀹炴椂鏁版嵁</li> + <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>灏忔椂鏁版嵁</li> + <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDate",2)'>鏃ユ暟鎹�</li> + <li :class="active==3?'hover':''" @click='tabTaggle("EChartsTable",3)'>浜哄伐鏁版嵁</li> + </ul> + <ul class="tab" v-else> + <li :class="active==0?'hover':''" @click='tabTaggle("EChartsRealWasteWater",0)'>瀹炴椂鏁版嵁</li> + <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHourWasteWater",1)'>灏忔椂鏁版嵁</li> + <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDateWasteWater",2)'>鏃ユ暟鎹�</li> + <li :class="active==3?'hover':''" @click='tabTaggle("EChartsWasteWaterTable",3)'>浜哄伐鏁版嵁</li> </ul> <div class="legend" > <span >姝e父</span> @@ -18,30 +24,46 @@ <span >瓒呮爣</span> <i style=" background: orange;"></i> </div> - <component :is="currentTab" v-bind="$attrs"></component> + <component :is="currentTab" v-bind="$attrs" ref="Echatrs"></component> </div> </template> <script> +import ECharts from './Echarts' import EChartsHour from './EChartsHour' import EChartsDate from './EChartsDate' -import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts' +import EChartsTable from './EChartsTable' + +import EChartsRealWasteWater from './EChartsRealWasteWater' +import EChartsHourWasteWater from './EChartsHourWasteWater' +import EChartsDateWasteWater from './EChartsDateWasteWater' +import EChartsWasteWaterTable from './EChartsWasteWaterTable' export default { name: 'PublicChart', components: { EChartsHour, EChartsDate, - Echarts + ECharts, + EChartsTable, + EChartsHourWasteWater, + EChartsDateWasteWater, + EChartsRealWasteWater, + EChartsWasteWaterTable + }, + mounted () { + this.$refs.Echatrs.CreateChart() }, data () { return { - currentTab: 'EChartsHour' + currentTab: 'EChartsHour', + active: '1' } }, methods: { - tabTaggle (taggleMenu) { + tabTaggle (taggleMenu, num) { this.currentTab = taggleMenu + this.active = num // debugger } } @@ -49,17 +71,11 @@ </script> -<style scoped> -* { - margin: 0; - padding: 0; - list-style: none; -} - +<style scoped lang="less"> .win { position: relative; /*margin-bottom: 13px;*/ - background-color: rgba(33, 41, 69, 0.9); + background:@background-color; border: 0.8px solid #396d83; /*height: 1.5rem;*/ } @@ -115,10 +131,10 @@ margin-right: 10px; padding:0 15px } - +.tab li.hover, .tab li:hover { background-color: #0e639e; - color: #682000; + color: #fff; cursor: pointer; } .legend{ -- Gitblit v1.8.0