haoxuan
2023-08-31 401524fb5661d57ffb2229d683fe4de85b65fd1c
src/components/subComponents/SystemInfo.vue
@@ -1,6 +1,6 @@
<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">
@@ -75,7 +75,7 @@
        </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>
@@ -114,7 +114,7 @@
    },
    borderWidth: {
      type: String,
      default: '70%'
      default: '64%'
    },
    liquidWidth: {
      type: String,
@@ -126,6 +126,9 @@
      this.$forceUpdate();
    }
  },
  mounted(){
    console.log('PollData.RealTimeValidCount',this.PollData.RealTimeValidCount)
  }
}
</script>
<style lang="scss">
@@ -133,6 +136,7 @@
  height: 100%;
  .card-box {
    width: 50%;
    float: left;
    @media screen and (min-width: 1280px) and (max-width: 1440px) {
      width: 65%;
    }
@@ -172,17 +176,23 @@
        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;