profitManage/src/views/index.vue

<template>
  <div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;">
    <!--    header -->
    <div class="w100" style="height: 17%;min-height: 110px;">
      <div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"
           style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">
        <div style="font-size: 14px;">{{item.title}}</div>
        <div style="margin: 15px 0 10px 15px;">
          <div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span>{{item.unit}}</span></div>
          <img src="@/assets/images/line.png" class="fr" width="100" alt="">
        </div>
        <div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>
      </div>
    </div>
    <!--  middle  -->
    <div class="w100" style="height: 35%;margin: 1% 0;">
      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
        <EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>
      </div>
      <div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">
        <EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP10`" class="w100 h100"></EchartsBar>
      </div>
      <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
        <EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>
      </div>
    </div>
    <!--  footer  -->
    <div class="w100" style="height: 44%;margin: 1% 0 0;">
      <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;margin-right: 1%;vertical-align: middle;">
        <div style="font-size: 14px;height: 10%">
          <span>服务器宽带收益</span>
          <span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
        </div>
        <div style="height: 90%;overflow: scroll;" class="newSty">
          <TableList :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList"></TableList>
        </div>
      </div>
      <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: middle;">
        <div style="font-size: 14px;height: 10%">
          <span>资源监控</span>
          <span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
        </div>
        <div style="height: 90%;overflow: scroll;" class="newSty">
          <TableList :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList"></TableList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import EchartsPie from "@/components/echartsList/pie.vue"
  import EchartsLine from "@/components/echartsList/line.vue"
  import EchartsBar from "@/components/echartsList/bar.vue"
  import TableList from "@/components/table/index.vue";
  import {listBandWidth} from "@/api/disRevenue/earnManage"
  import {listTopology} from "@/api/disRevenue/resource"
export default {
  name: "Index",
  components: {EchartsPie, EchartsLine, EchartsBar, TableList},
  data() {
    return {
      // 版本号
      version: "3.6.6",
      headerList: [
        {title: '当前在线服务器的流量相关的业务数', num: '76800', unit: '个'},
        {title: '当前在线服务器发送带宽总流量', num: '1126', unit: 'Mbps'},
        {title: '当前在线交换机接收带宽总流量', num: '1140', unit: 'Mbps'},
        {title: '交换机在线数量', num: '1111', unit: '个', lastVal: '交换机注册总数', lastNum: '11112222'},
      ],
      lineDataParams: {
        titleVal: {x: '1%', y: '3%',fontSize: 14, textAlign: 'left'},
        gridTop: '15%',
        seriesLabel: true,
        hiddenTime: true,
        yAxis: true,
        hidAxisLabel: true,
        hidSplitLine: true,
        name: ' ',
        linexData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
      },
      dataList: [{
        titleVal: {title: '服务器在线率', show: true, x: '1%', y: '3%', textAlign: 'left'},
        centerVal: '82%',
        lastVal: '在线率',
        color: ['#0d52d9', '#bbc4d2'],
        radius: ['60%', '70%'],
        data: [
          { value: 82, name: '在线' },
          { value: 28, name: '总数' }
        ]
      },{
        titleVal: {title: '资源告警处理情况', show: true, x: '1%', y: '3%', textAlign: 'left'},
        centerVal: '82%',
        lastVal: '告警处理率',
        radius: ['60%', '70%'],
        color: ['#0d52d9', '#bbc4d2'],
        data: [
          { value: 82, name: '已处理告警数' },
          { value: 28, name: '总告警数' }
        ]
      }],
      // 列显隐信息
      serverColumns: {
        id: {label: `ID`},
        nodeName: {label: `节点名称`, visible: true},
        businessName: {label: `业务名称`, visible: true},
        effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, width: '160px', visible: true},
        avgMonthlyBandwidth95: {label: `月均日95值Mbps`, width: '130px', visible: true}
      },
      serTableList:[],
      serQueryParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      // 列显隐信息
      resMonitorColumns: {
        id: { label: `ID`, visible: false },
        switchName: { label: `资源名称`, visible: true },
        interfaceName: { label: `ip地址`, visible: true },
        serverSn: { label: `CPU使用率%`,visible: true},
        serverPort: { label: `内存使用率%`, visible: true }
      },
      resTableList: [],
      resQueryParams: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      }
    }
  },
  created() {
    this.serverTableList();
    this.resMonitorTableList();
  },
  methods: {
    serverTableList() {
      listBandWidth(this.serQueryParams).then(response => {
        this.serTableList = response.rows;
        this.serQueryParams.total = response.total;
      })
    },
    resMonitorTableList() {
      listTopology(this.resQueryParams).then(response => {
        this.resTableList = response.rows;
        this.resQueryParams.total = response.total;
      })
    },
    // 跳转页面
    routerLine(num) {
      if (num === 1) {
        this.$router.push({path:'/earnManage/server'});
      }
      if (num === 2) {
        this.$router.push({path:'/resource/resMonitor'});
      }
    }
  }
}
</script>

<style scoped lang="scss">
  ::-webkit-scrollbar {
    width: 0px!important;
    height: 0px!important;
  }
  /*::v-deep .newSty .el-table {*/
  /*  height: 190px;*/
  /*  overflow-y: scroll;*/
  /*}*/
</style>