<template>
    
  <div>
    <el-row>
      <el-col :span="22">
        <h3>物理资源监控</h3>
      </el-col>

    </el-row>
    <el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>CPU使用情况（%）</h4>
      </el-col>
      <el-col :span="6" :offset="1">
        <h4>内存使用情况（%）</h4>
      </el-col>
    </el-row>

    <el-row type="flex" :gutter="90">
      <el-col :span="11" :offset="1">
        <el-card shadow="hover" body-style="padding:1px">
          <cpu-use :charData="cpuUtil" :id="'chart1'"></cpu-use>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover" body-style="padding:1px">
          <memory-util :charData="memoryUtil" :id="'chart2'"></memory-util>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>CPU平均负载</h4>
      </el-col>
      <el-col :span="6" :offset="1">
        <h4>磁盘使用量（GB）</h4>
      </el-col>
    </el-row>

    <el-row type="flex" :gutter="90">
      <el-col :span="12" :offset="1">
        <el-card shadow="hover" body-style="padding:1px">
          <cpu-load-view :charData="cpuLoad" :id="'chart3'"></cpu-load-view>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover" body-style="padding:1px">
         <disk-usge-view :charData="diskUsge" :id="'chart4'"></disk-usge-view>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>inode使用量</h4>
      </el-col>
      <el-col :span="6" :offset="1">
        <h4>磁盘吞吐率（MB/s）</h4>
      </el-col>
    </el-row>

    <el-row type="flex" :gutter="100">
      <el-col :span="12" :offset="1">
        <el-card shadow="hover" body-style="padding:1px">
         <inode-util-view :charData="inodeUtil" :id="'chart5'" ></inode-util-view>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover" body-style="padding:1px">
             <disk-read-write-throughout-view :charData="diskReadWriteThroughout" :id="'chart6'" ></disk-read-write-throughout-view>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>IOPS</h4>
      </el-col>
      <el-col :span="6" :offset="1">
        <h4>网络宽带（Kbps）</h4>
      </el-col>
    </el-row>

    <el-row type="flex" :gutter="130">
      <el-col :span="12" :offset="1">
        <el-card shadow="hover" body-style="padding:1px">
         <iop-read-write-view :charData="iopReadWrite" :id="'chart7'" ></iop-read-write-view>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover" body-style="padding:5px">
          <net-view :charData="netState" :id="'chart8'"> </net-view>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>容器组运行状态</h4>
      </el-col>
    </el-row>

    <el-row type="flex" :gutter="130">
      <el-col :span="12" :offset="1">
        <el-card shadow="hover" body-style="padding:5px">
           <pod-view :charData="podState" :id="'chart9'"> </pod-view>
        </el-card>
      </el-col>
    </el-row>

      
  </div>
</template>

<script>
import memoryUtil from "./memoryUtil.vue";
import cpuUse from "./cpuUse.vue"
import DiskUsgeView from './diskUsgeView.vue';
import  inodeUtilView from './inodeUtilView.vue';
import cpuLoadView from './cpuLoadView.vue';
import diskReadWriteThroughoutView   from './diskReadWriteThroughoutView.vue';
import   iopReadWriteView   from'./iopReadWriteView.vue';
import netView  from'./netView.vue';
import podView from './podView.vue';
export default {
  components: {
    memoryUtil,
    cpuUse,
    DiskUsgeView,
    inodeUtilView,
    cpuLoadView,
    diskReadWriteThroughoutView,
    iopReadWriteView,
    netView,
    podView
  },
  ///kapis/monitoring.kubesphere.io/v1alpha3/cluster
  data() {
    return {
    
    };
  },
  computed: {
 
    //CPU使用率
    cpuUtil() {
      var cpuUtil = [];
  
      const physical = this.$store.state.monitor.physicalMonitor;

         cpuUtil.splice(0, cpuUtil.length); //清零
       if(physical.cluster_cpu_utilisation){
         // console.log('111111111111');
        console.log(physical.cluster_cpu_utilisation);
           physical.cluster_cpu_utilisation.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = this.formatNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre });
      });

       }
  
      return cpuUtil;
    },

    //内存使用率
    memoryUtil() {
      var memoryUtil = [];
      const physical = this.$store.state.monitor.physicalMonitor;
      // console.log(physical);

      memoryUtil.splice(0, memoryUtil.length);
      if(physical.cluster_memory_utilisation){
      physical.cluster_memory_utilisation.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = this.formatNumber(test[1]);
        memoryUtil.push({ name: time1, value: socre });
      });

      }
      return memoryUtil;
    },

    //磁盘使用率

    diskUsge() {
      var diskUsge = [];
        const physical = this.$store.state.monitor.physicalMonitor;
      diskUsge.splice(0, diskUsge.length);

       if(physical.cluster_disk_size_usage){

          physical.cluster_disk_size_usage.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = test[1] / 1000000000;
        diskUsge.push({ name: time1, value: socre });
      });

       }
     
      return diskUsge;
    },

    //IOP磁盘读和写
    iopReadWrite() {
      var iopReadWrite = [];
      const physical = this.$store.state.monitor.physicalMonitor;

      iopReadWrite.splice(0, iopReadWrite.length);


       if(physical.cluster_disk_write_iops){
      physical.cluster_disk_write_iops.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = test[1]/10;
        iopReadWrite.push({ name: time1, value: socre, type: "iops写(×10)" });
      });
     physical.cluster_disk_read_iops.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = test[1]/10;
        iopReadWrite.push({ name: time1, value: socre, type: "iops读（×10）" });
      });

       }
      return iopReadWrite;
    },
    //CPU平均负载
    cpuLoad() {
      var cpuLoad = [];

        const physical = this.$store.state.monitor.physicalMonitor;
      //清零
      cpuLoad.splice(0, cpuLoad.length);


      //1分钟平均负载
         if(physical.cluster_disk_size_usage){
      physical.cluster_load1.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = test[1];
        socre = this.formPointNumber(socre);
        cpuLoad.push({ name: time1, value: socre, type: "1分钟平均负载 " });
      });
      //5分钟平均负载
      physical.cluster_load5.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = test[1];
        socre = this.formPointNumber(socre);
        cpuLoad.push({ name: time1, value: socre, type: "5分钟平均负载" });
      });
      //15分钟平均负载

      physical.cluster_load15.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = test[1];
        socre = this.formPointNumber(socre);
        cpuLoad.push({ name: time1, value: socre, type: "15分钟平均负载" });
      });

         }
      return cpuLoad;
    },
    //inode使用率
    inodeUtil() {
      var inodeUtil = [];
        const physical = this.$store.state.monitor.physicalMonitor;

      inodeUtil.splice(0, inodeUtil.length);


         if(physical.cluster_disk_size_usage){
      physical.cluster_disk_inode_usage.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = test[1] * 1;
        inodeUtil.push({ name: time1, value: socre, type: "inode使用总量" });
      });

     }
      return inodeUtil;
    },
    //容器运行异常  cluster_pod_abnormal_count
    //容器运行中 cluster_pod_running_count
  podState(){
    var diskReadWriteThroughout = [];
        const physical = this.$store.state.monitor.physicalMonitor;

      diskReadWriteThroughout.splice(0, diskReadWriteThroughout.length);

      //容器运行异常

         if(physical.cluster_pod_running_count){
      // physical.cluster_pod_abnormal_count.forEach((test) => {
      //   var time1 = this.formatTime(test[0]);
      //   var socre = (test[1] * 1) ;
      //   diskReadWriteThroughout.push({
      //     name: time1,
      //     value: socre,
      //     type: "容器运行异常数目",
      //   });
      // });
    


      //容器运行数目

    physical.cluster_pod_running_count.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = (test[1] * 1.0);
        diskReadWriteThroughout.push({
          name: time1,
          value: socre,
          type: "容器运行数目",
        });
      });

         }
      return diskReadWriteThroughout;

  },



  //cluster_net_bytes_received 网络数接受
      //cluster_net_bytes_transmitted  网络数发送
netState(){

var diskReadWriteThroughout = [];
        const physical = this.$store.state.monitor.physicalMonitor;

      diskReadWriteThroughout.splice(0, diskReadWriteThroughout.length);

      //网络数接受

         if(physical.cluster_net_bytes_received){
      physical.cluster_net_bytes_received.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = (test[1] * 1) ;
        diskReadWriteThroughout.push({
          name: time1,
          value: socre,
          type: "网络数接受",
        });
      });
    


      //网络发出

    physical.cluster_net_bytes_transmitted.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = (test[1] * 1.0);
        diskReadWriteThroughout.push({
          name: time1,
          value: socre,
          type: "网络数发出",
        });
      });

         }
      return diskReadWriteThroughout;



},

    //磁盘吞吐量
    diskReadWriteThroughout() {
      var diskReadWriteThroughout = [];
        const physical = this.$store.state.monitor.physicalMonitor;

      diskReadWriteThroughout.splice(0, diskReadWriteThroughout.length);

      //磁盘写

         if(physical.cluster_disk_size_usage){
      physical.cluster_disk_write_throughput.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = (test[1] * 1) / 1000000;
        diskReadWriteThroughout.push({
          name: time1,
          value: socre,
          type: "磁盘 （MB/S）",
        });
      });
      //磁盘读

    physical.cluster_disk_read_throughput.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre = (test[1] * 1.0) / 1000000;
        diskReadWriteThroughout.push({
          name: time1,
          value: socre,
          type: "磁盘读（MB/S）",
        });
      });

         }
      return diskReadWriteThroughout;
    },
  },
  mounted() {
   
  },

  beforeMount() {},
  created() {
    this.getPhysicalMonitor();
    // this.initCpuUtilise();
  },
  methods: {
    init() {},
    //形成百分数
    formatNumber(num) {
      return num * 100;
    },

    //处理小数点后留两位
    formPointNumber(num) {
      return Math.floor(num * 100) / 100;
    },
    formatNumberBinary() {},
    //设置时间格式
    formatTime(time) {
      var newDate = new Date();
      Date.prototype.toLocaleString = function () {
        return (
          this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds()
        );
      };
      newDate.setTime(time * 1000);
      return newDate.toLocaleString();
    },

 

    //获取数据
    getPhysicalMonitor() {
      const physical = {};
      var nowtime = Math.round(new Date().getTime() / 1000).toString();
      this.$http({
        url: '/kubesphereApi/kapis/monitoring.kubesphere.io/v1alpha3/cluster',
        method: "get",
        headers: {
          Authorization: this.$store  .state.connect.Authentation,
        },
        params: this.$http.adornParams({
          start: nowtime - 4000,
          end: nowtime,
          step: "300s",
          times: 50,
          metrics_filter:
            "cluster_cpu_utilisation|cluster_memory_utilisation|cluster_load1|cluster_load5|cluster_load15|cluster_disk_size_usage|cluster_disk_inode_utilisation|cluster_disk_inode_usage|cluster_disk_inode_total|cluster_disk_read_iops|cluster_disk_write_iops|cluster_disk_read_throughput|cluster_disk_write_throughput|cluster_net_bytes_transmitted|cluster_net_bytes_received|cluster_pod_running_count|cluster_pod_succeeded_count",
        }),
      }).then(({ data }) => {

        data.results.forEach((element) => {
          console.log(element);
       //   console.log('222222222222222');
          const key = element.metric_name;
          if(!element.data.result[0].values)
          var value =NaN;
          else{
            var value=element.data.result[0].values
          }
          console.log(value);

          value.forEach((test) => {
            physical[key] = value;
           
          });
        });
      //  console.log('33333333333');
        console.log(physical);
        this.$store.dispatch("monitor/setPhysicalMonitor", physical);
        //this.physical=physical;

      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>