dockersstatus.vue

<template>
  <div class="innnerBox">
    <div class="contentbox">
      <el-col :span="12" v-for="(item,index) in containeslist" :key="index">
        <el-col :span="4" hidden>
          <div class="sylist">CPU</div>
          <div class="sylist">内存</div>
          <div class="sylist">GPU</div>
          <!-- <div class="sylist">4</div> -->
        </el-col>
        <el-col :span="24">
          <div :id="item.container" class="chartbox"></div>
        </el-col>
      </el-col>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      containeslist: [],
      stautsclock:null,
    };
  },
  methods: {
    getcontainer() {
   
      this.$api .device.containeslist().then(res => {
        this.containeslist = res;
         res.map(ele => {
              this.gpuresource(ele);
          });
         this.stautsclock = setInterval(() => {
            res.map(ele => {
              this.gpuresource(ele);
          });
        }, 10000)
       
      });
    },
    gpuresource(val){
      let start= this.$moment().subtract(1, "h").format("YYYY-MM-DD HH:mm:ss"); //当前时间前一天
      let end= this.$moment().format("YYYY-MM-DD HH:mm:ss"); 
      let params ={
        startDt:start,
        endDt:end,
        container:val.container
      }
      this.$api.device.gpuresource(params).then(res => {
        this.setChart(res,val);
        console.log("数据源",res)
      
      });
    },
    refreshData(val) {
      let start= this.$moment().subtract(6, "s").format("YYYY-MM-DD HH:mm:ss"); //当前时间前一天
      let end= this.$moment().format("YYYY-MM-DD HH:mm:ss"); 
      let params ={
        startDt:start,
        endDt:end,
        container:val.container
      }
      this.$api.device.gpuresource(params).then(res => {
        if(res.length> 0) {
          this.gpuresource(val);
        }
      });
    },
    setChart(val,elid) {
       var myChart = this.$echarts.init(
        document.getElementById(elid.container)
      );
      var mdata = [];
      var cdata = [];
      var gdata = [];
      var DAY = 3600 * 24 * 1000;
      var HOUR = 3600 * 1000;
      for (var i = 0; i < val.length; i++) {
        mdata.push([new Date( val[i].recordTime.replace('-', '/')).getTime(),parseInt((val[i].memoryUsed/val[i].memoryLimit*100))]);
        cdata.push([new Date( val[i].recordTime.replace('-', '/')).getTime(), val[i].cpuPercent]);
        gdata.push([new Date( val[i].recordTime.replace('-', '/')).getTime(), parseInt((val[i].resourceMemoryUsed/val[i].resourceMemoryTotal*100))]);
      }
      console.log("测试数据源",mdata)

      //把new Date出来的时间格式转换为data123中的日期格式
      var option = {
        legend: {
            top: 10,
            left: 'center',
            data: ['内存','CPU','GPU']
        },
        title: {
          left: '12',
          text: elid.container,
          textStyle:{
          //文字颜色
          color:'#699',
          //字体大小
  　　　　 fontSize:14
      }
        },
        grid:{
                x:'4.6%',
                y:'9%',
                x2:'1%',
                y2:'30%',
            },
        dataZoom: [
          {
            type: "slider"
          },
          {
            type: "inside"
          }
        ],
        xAxis: {
          type: "time",
          // interval: DAY / 2,
          axisLabel: {
            // formatter: (value)=> {
            //   if (value % DAY === 0) {
            //     var month = this.$echarts.format.formatTime("M月", value);
            //     var dayOfM = this.$echarts.format.formatTime("d日", value);
            //     return "{strong|" + dayOfM + "}\n{lite|" + month + "}";
            //   } else {
            //     var formatted = this.$echarts.format.formatTime("h点", value);
            //     return formatted;
            //   }
            // },
            rich: {
              strong: {
                color: "#2784e8",
                fontSize: 12,
                fontWeight: 700
              },
              lite: {
                color: "#999",
                lineHeight: 25,
                fontSize: 10
              }
            }
          }
        },
        yAxis: {},
        tooltip: {
          trigger: "axis"
        },
        series: [
          { 
            name:'内存',
            type: "line",
            showSymbol: false,
            data: mdata
          },
          { 
            name:'CPU',
            type: "line",
            showSymbol: false,
            data: cdata
          },{ 
            name:'GPU',
            type: "line",
            showSymbol: false,
            data: gdata
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  created() {
    this.getcontainer();
  },
  beforeDestroy(){
    clearInterval(this.stautsclock);
    this.stautsclock = null;
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.contentbox {
  overflow: hidden;
}
.sylist{
  height 60px
  margin-top 15px
  width 90%
  margin 15px auto 0;
  border 1px solid #ccc
  border-radius 2px
}
.chartbox {
  height: 330px;
  overflow hidden
}
</style>