profitManage1.2/src/views/resource/serverRegister/tabsChart.vue

<template>
  <div class="w100 h100">
    <div class="w100" style="height: 40px;">
      <el-date-picker
        v-model="timeList"
        :style="{width: '360px!important', marginRight: '10px'}"
        type="datetimerange"
        :disabled="!timeShow"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        range-separator="至"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="(val) => dateChange(val)"/>
      <el-checkbox v-model="timeShow">选择时间</el-checkbox>
      <!--   不同条时间件切换   -->
      <el-radio-group v-model="timeModel" size="medium" class="ml20" :disabled="timeShow" @input="radioTimeChange">
        <el-radio-button v-for="item of radioTimeList" :label="item.value">{{item.name}}</el-radio-button>
      </el-radio-group>
      <!--   单双列切换   -->
      <el-radio-group v-model="layoutModel" size="medium" class="ml20" style="float: right;" @input="radioLayouteChange">
        <el-radio-button v-for="item of radioLayoutList" :label="item.value">{{item.name}}</el-radio-button>
      </el-radio-group>
    </div>
    <template v-if="Object.keys(echartList).length > 0">
      <div v-for="(item, key, index) of echartList" class="disInlineBlock mt20 mb20 plr-10" :style="`width: calc(100% / ${layoutModel}); height:200px;`">
        <EchartsLine v-if="item && item.dataVal" :key="`chart-${key || ''}-${index}`" :lineData="item && item.dataVal || {}"
                     :title="item && item.title || '图表数据'" class="w100 h100" style="border: 1.5px solid #cfcfcf;"
                     :chartData="(valData, unit) => chartDataEvent(valData, item.fnEvent,val.title, unit)"></EchartsLine>
      </div>
    </template>
    <div v-else class="w100 h100 flex-center disInlineBlock mt20 mb20 plr-10" :style="`width: calc(100% / ${layoutModel}); height:200px;background: #f5f7fa;`">
      <div class="loading-placeholder">
        <i class="el-icon-loading"></i>
        <span>加载中...</span>
      </div>
    </div>
    <div v-if="activeName === '系统监控'">
      <div v-for="(item, key) of systemContent" class="disInlineBlock w50">{{key}}：{{sysForm[key]}}</div>
    </div>
  </div>
</template>

<script>
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: "serRegisTabsChart",
    components: {EchartsLine},
    props: {
      activeName: {
        type: String,
        default: ''
      },
      chartModelList: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      activeName: {
        handler(val) {
          this.$nextTick(() => {
            let chartData = 1;
            if (val && (val === '网卡流量监控' || val === '硬盘设备监控')) {
              chartData = 2;
            }
            this.echartList = {};
            this.chartListData(chartData);
          });
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        timeList: [],
        timeShow: false,
        radioTimeList: [{name: '近6小时', value: '6'}, {name: '近24小时', value: '24'}, {name: '昨天', value: '-1'}, {name: '今天', value: '1'}],
        timeModel: '6',
        radioLayoutList: [{name: '单列显示', value: '1'}, {name: '双列显示', value: '2'}],
        layoutModel: '1',
        systemContent: {
          systemSwOsCollect: '操作系统', systemSwArchCollect: '操作系统架构', kernelMaxprocCollect: '最大进程数', systemDiskSizeTotalCollect: '硬盘-总可用空间(GB)',
          systemBoottimeCollect: '系统启动时间', systemUptimeCollect: '系统正确运行时间', systemLocaltimeCollect: '系统本地时间', avg1: 'CPU的1分钟负载(%)',
          avg5: 'CPU的5分钟负载(%)', avg15: 'CPU的15分钟负载(%)', uti: 'CPU使用率(%)', normal: 'CPU正常运行时间(s)', idle: 'CPU空闲时间(s)', iowait: 'CPU等待响应时间(s)',
          system: 'CPU系统时间(s)', noresp: 'CPU软件无响应时间(s)', user: 'CPU运行用户进程所花费的时间(s)',runProcNum: '正在运行的进程数(个)', usersNum: '登录用户数(个)',
          swapSizeFree: '交换卷/文件的可用空间(字节)', swapSizePercent: '可用交换空间百分比(%)', available: '可用内存(G)', percent: '可用内存百分比(%)'
        },
        sysForm: {},
        echartList: {},
        echartData: {
          title: ' ',
          dataVal: {
            // titleVal: {textAlign: 'center'},
            yAxisName: ' ',
            gridTop: '30%',
            legend: {top: '12%', left: '10%'},
            hiddenTime: true,
            lineXData: ['a','b','c','d','e'],
            // unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
            dataList: [{
              name: '出战流量',
              data: [1,2,3,4,5],
            },{
              name: '入站流量',
              data: [6,7,8,9,10]
            }]
          }
        },
      }
    },
    created() {
    },
    methods: {
      // 时间变化时
      dateChange(val){
        // this.currTimeList = {startTime: val[0], endTime: val[1]};
        // this.getNetTraffic(this.paramsData.clientIdList);
      },
      // 时间按钮切换
      radioTimeChange(val) {
        this.timeModel = val;
      },
      // 单双列按钮切换
      radioLayouteChange(val) {
        this.layoutModel = val;
        this.$nextTick(() => {
          const resizeEvent = new Event('resize');
          // 派发这个事件，这会触发所有已绑定的 window resize 监听器
          window.dispatchEvent(resizeEvent);
        });
      },
      chartListData(charNum) {
        setTimeout(() => {
          let echartsModel = JSON.parse(JSON.stringify(this.echartData));
          if (charNum === 1) {
            delete echartsModel['dataVal'].dataList;
            echartsModel['dataVal'].data = [1,3,5,7,9];
          }
          this.echartList = {one: echartsModel, tow: echartsModel};
        },200);
      },
      chartDataEvent(valData, funcName, tabName, unit) {
        this.$emit("chartFnEvent", valData, funcName, tabName, unit);
        // // 检查函数是否存在，避免报错
        // if (typeof this[funcName] === 'function') {
        //   // 调用实际函数，并传递参数（如选中的值、当前项）
        //   // this[funcName]({startTime: valData[0], endTime: valData[1]});
        // } else {
        //   console.warn(`函数 ${funcName} 未定义`);
        // }
      }
    }
  }
</script>

<style scoped>
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #1890ff!important;
    background-color: unset!important;
  }
  .loading-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.1rem;
  }
</style>