| | |
| | | <template> |
| | | <div :class="showClass"> |
| | | <div class="card-box" :style="`width:${borderWidth}`"> |
| | | <div class="card-box" :style="`width:${borderWidth};min-width:456px`" > |
| | | <ul> |
| | | <li style="max-width:30px;" v-if="ShowLocalVedio"> |
| | | <div class="total-box"> |
| | |
| | | </li> |
| | | </ul> |
| | | </div>--> |
| | | <div class="eCharts-box" :style="`width:${liquidWidth}`"> |
| | | <div class="eCharts-box" v-if="PollData.barCharts.length>0"> |
| | | <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar> |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | borderWidth: { |
| | | type: String, |
| | | default: '70%' |
| | | default: '64%' |
| | | }, |
| | | liquidWidth: { |
| | | type: String, |
| | |
| | | this.$forceUpdate(); |
| | | } |
| | | }, |
| | | mounted(){ |
| | | console.log('PollData.RealTimeValidCount',this.PollData.RealTimeValidCount) |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | |
| | | height: 100%; |
| | | .card-box { |
| | | width: 50%; |
| | | float: left; |
| | | @media screen and (min-width: 1280px) and (max-width: 1440px) { |
| | | width: 65%; |
| | | } |
| | |
| | | font-weight: 700; |
| | | } |
| | | } |
| | | ul{ |
| | | padding-left: 0; |
| | | } |
| | | } |
| | | .eCharts-box { |
| | | width: 50%; |
| | | width: 46%; |
| | | float: left; |
| | | box-sizing: border-box; |
| | | height: 100%; |
| | | margin-left: 5px; |
| | | @media screen and (min-width: 1280px) and (max-width: 1440px) { |
| | | width: 35%; |
| | | } |
| | | @media screen and (max-width: 1279px) { |
| | | width: 30%; |
| | | } |
| | | padding-left: 10px; |
| | | //margin-left: 10px; |
| | | // @media screen and (min-width: 1280px) and (max-width: 1440px) { |
| | | // width: 35%; |
| | | // } |
| | | // @media screen and (max-width: 1279px) { |
| | | // width: 30%; |
| | | // } |
| | | } |
| | | .chart-box { |
| | | float: left; |