| | |
| | | <span >超标</span> |
| | | <i style=" background: orange;"></i> |
| | | </div> |
| | | <component :is="currentTab" v-bind="$attrs" ref="Echatrs"></component> |
| | | <component :is="currentTab" v-bind="$attrs" ref="Echats"></component> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import ECharts from './Echarts' |
| | | import EChartsHour from './EChartsHour' |
| | | import EChartsDate from './EChartsDate' |
| | | import EChartsTable from './EChartsTable' |
| | | import ECharts from './echarts/Echarts' |
| | | import EChartsHour from './echarts/EChartsHour' |
| | | import EChartsDate from './echarts/EChartsDate' |
| | | import EChartsTable from './echarts/EChartsTable' |
| | | |
| | | import EChartsRealWasteWater from './EChartsRealWasteWater' |
| | | import EChartsHourWasteWater from './EChartsHourWasteWater' |
| | | import EChartsDateWasteWater from './EChartsDateWasteWater' |
| | | import EChartsWasteWaterTable from './EChartsWasteWaterTable' |
| | | import EChartsRealWasteWater from './echarts/EChartsRealWasteWater' |
| | | import EChartsHourWasteWater from './echarts/EChartsHourWasteWater' |
| | | import EChartsDateWasteWater from './echarts/EChartsDateWasteWater' |
| | | import EChartsWasteWaterTable from './echarts/EChartsWasteWaterTable' |
| | | |
| | | export default { |
| | | name: 'PublicChart', |
| | |
| | | EChartsDateWasteWater, |
| | | EChartsWasteWaterTable |
| | | }, |
| | | mounted () { |
| | | this.$refs.Echatrs.CreateChart() |
| | | }, |
| | | data () { |
| | | return { |
| | | currentTab: 'EChartsHour', |
| | | active: '1' |
| | | currentTab: this.current(), |
| | | active: '0' |
| | | } |
| | | }, |
| | | // updated () { |
| | | // this.$refs.Echats.DrawEXHRealTimeDateChart() |
| | | // }, |
| | | methods: { |
| | | tabTaggle (taggleMenu, num) { |
| | | this.currentTab = taggleMenu |
| | | this.active = num |
| | | // debugger |
| | | }, |
| | | current (currentTab) { |
| | | if (this.$attrs.value === 'feishui') { |
| | | currentTab = 'EChartsRealWasteWater' |
| | | } else { |
| | | currentTab = 'ECharts' |
| | | } |
| | | return currentTab |
| | | } |
| | | } |
| | | } |
| | |
| | | <style scoped lang="less"> |
| | | .win { |
| | | position: relative; |
| | | /*margin-bottom: 13px;*/ |
| | | background:@background-color; |
| | | border: 0.8px solid #396d83; |
| | | /*height: 1.5rem;*/ |
| | | } |
| | | |
| | | .border_corner { |
| | |
| | | .tab { |
| | | display: flex; |
| | | border-bottom: 1px solid #396d83; |
| | | padding:5px 10px |
| | | padding:0.02rem 0.04rem; |
| | | } |
| | | |
| | | .tab li { |
| | | background-color: #243a55; |
| | | line-height: 25px; |
| | | line-height:0.15rem; |
| | | height: 0.15rem; |
| | | text-align: center; |
| | | border-radius: 5px; |
| | | margin-right: 10px; |
| | | padding:0 15px |
| | | margin-right: 0.04rem; |
| | | padding:0 0.04rem; |
| | | } |
| | | .tab li.hover, |
| | | .tab li:hover { |
| | |
| | | } |
| | | .legend{ |
| | | position: absolute; |
| | | top:10px; |
| | | top:0.05rem; |
| | | right: 0; |
| | | display: flex; |
| | | justify-items: center; |
| | | } |
| | | .legend i { |
| | | display: block; |
| | | width: 35px; |
| | | height: 15px; |
| | | margin:0 10px 0 3px; |
| | | border-radius: 3px; |
| | | width: 0.2rem; |
| | | height: 0.09rem; |
| | | margin:0 0.1rem 0 0.05rem; |
| | | border-radius: 0.02rem; |
| | | } |
| | | .legend span{ |
| | | line-height: 15px; |
| | | line-height: 0.09rem; |
| | | height: 0.09rem; |
| | | font-size: 0.06rem; |
| | | } |
| | | |
| | | </style> |