表格内显示占比效果

最新推荐文章于 2022-09-29 08:47:22 发布

星辰落入深海

最新推荐文章于 2022-09-29 08:47:22 发布

阅读量423

点赞数 1

分类专栏： javascript vue 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/juan_bing/article/details/126506517

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

vue 表格内数据显示--占比可视化

效果图
实现代码

效果图

在这里插入图片描述

实现代码

			<a-table
                :rowKey="(record) => (Math.random() * 10000).toFixed(0)"
                :columns="arrAppTop10Col"
                :data-source="ress"
              >
                <template slot="name" slot-scope="text, record, index">
                  <div :style="{ width: 100 - (index + 1) * 5 + '%' }">
                    <em
                      v-for="(item, index) in record.unitval"
                      :style="{
                        width: item.width * 100 + '%',
                        height: '15px',
                        'background-color': item.color,
                        display: 'inline-block',
                      }"
                      :key="index"
                      :title="item.name + ':' + item.oVal"
                    ></em>
                  </div>
                </template>
              </a-table>


//模拟数据
let res =[
    {
        "dstaddr": "1.1.1.1",
        "ratio": "20.21%",
        "dOctets": "8.6GB",
        "totalMap": {
            "NFS": "8.6GB",
            "SNMP": "206.4KB"
        }
    },
    {
        "dstaddr": "1.1.1.2",
        "ratio": "16.57%",
        "dOctets": "7.05GB",
        "totalMap": {
            "SMB": "7.05GB",
            "OTHER": "333.33KB",
            "NETBIOS": "35.21KB"
        }
    },
    {
        "dstaddr": "1.1.1.3",
        "ratio": "12.01%",
        "dOctets": "5.11GB",
        "totalMap": {
            "POP3": "5.11GB"
        }
    },
    {
        "dstaddr": "1.1.1.4",
        "ratio": "11.52%",
        "dOctets": "4.9GB",
        "totalMap": {
            "MSSQL": "4.9GB"
        }
    },
    {
        "dstaddr": "172.16.3.50",
        "ratio": "9.42%",
        "dOctets": "4.01GB",
        "totalMap": {
            "OTHER": "4.01GB",
            "NETBIOS": "14.91KB"
        }
    },
    {
        "dstaddr": "1.1.1.5",
        "ratio": "8.49%",
        "dOctets": "3.61GB",
        "totalMap": {
            "HTTP": "2.92GB",
            "OTHER": "704.53MB",
            "CLC-BUILD-DAEMON": "989.16KB",
            "ZABBIX-AGENT": "296.07KB",
            "NRPE": "135.15KB"
        }
    }
]

let ress = this.processingCapacity(res);

getFlowVal(val) {
      var alph = val.charAt(val.length - 2);
      console.log(alph);
      var unit =
        alph != "K" && alph != "M" && alph != "G" && alph != "T"
          ? val.substring(val.length - 1)
          : val.substring(val.length - 2);
      switch (unit) {
        case "B":
          return parseFloat(val.substring(0, val.length - 1) / 1024).toFixed(4);
          break;
        case "KB":
          return parseFloat(val.substring(0, val.length - 2)).toFixed(4);
          break;
        case "MB":
          return parseFloat(val.substring(0, val.length - 2) * 1024).toFixed(4);
          break;
        case "GB":
          return parseFloat(
            val.substring(0, val.length - 2) * 1024 * 1024
          ).toFixed(4);
          break;
        case "TB":
          return parseFloat(
            val.substring(0, val.length - 2) * 1024 * 1024 * 1024
          ).toFixed(4);
          break;
      }
    },
    processingCapacity(obj) {
      let _this = this;
      //处理容量
      let color = [
        "#61D3D4",
        "#90EE90",
        "#B2E577",
        "#04AEE6",
        "#7763EB",
        "#F2B884",
        "#7FFFD4",
        "#5ACE39",
        "#6399EB",
        "#EBB763",
        "#8E8E8E",
      ];
      let retNewObj = JSON.parse(JSON.stringify(obj));
      $.each(retNewObj, function (i, obj) {
        if (!obj.dOctets) {
          return;
        }
        var mapValue = obj.totalMap;
        var total = _this.getFlowVal(obj.dOctets);
        var unitval = new Array();
        for (var items in mapValue) {
          var newObj = new Object();
          var val = mapValue[items];
          newObj.oVal = val;
          newObj.name = items;
          var alph = val.charAt(val.length - 2);
          var unit =
            alph != "K" && alph != "M" && alph != "G" && alph != "T"
              ? val.substring(val.length - 1)
              : val.substring(val.length - 2);
          switch (unit) {
            case "B":
              val = parseFloat(val.substring(0, val.length - 1) / 1024).toFixed(
                4
              );
              newObj.nVal = val;
              newObj.color = color[parseInt(Math.random() * color.length)];
              let emWidth = Number((val / total).toFixed(2));
              if (emWidth < 0.01) {
                emWidth = 0.01;
              };
              newObj.width = emWidth;
              unitval.push(newObj);
              break;
            case "KB":
              val = parseFloat(val.substring(0, val.length - 2)).toFixed(4);
              newObj.nVal = val;
              let emWidth1 = Number((val / total).toFixed(2));
              if (emWidth1 < 0.01) {
                emWidth1 = 0.01;
              };
              newObj.width = emWidth1;
              newObj.color = color[parseInt(Math.random() * color.length)];
              unitval.push(newObj);
              break;
            case "MB":
              val = parseFloat(val.substring(0, val.length - 2) * 1024).toFixed(
                4
              );
              newObj.nVal = val;
              let emWidth2 = Number((val / total).toFixed(2));
              if (emWidth2 < 0.01) {
                emWidth2 = 0.01;
              }
              newObj.color = color[parseInt(Math.random() * color.length)];
              newObj.width = emWidth2;
              unitval.push(newObj);
              break;
            case "GB":
              val = parseFloat(
                val.substring(0, val.length - 2) * 1024 * 1024
              ).toFixed(4);
              newObj.nVal = val;
              newObj.color = color[parseInt(Math.random() * color.length)];
              let emWidth3 = Number((val / total).toFixed(2));
              if (emWidth3 < 0.01) {
                emWidth3 = 0.01;
              }
              if (
                (emWidth3 + Object.keys(mapValue).length / 10).toFixed(2) > 1
              ) {
                emWidth3 =
                  emWidth3 - (Object.keys(mapValue).length / 100).toFixed(2);
              }
              newObj.width = emWidth3;
              unitval.push(newObj);
              break;
            case "TB":
              val = parseFloat(
                val.substring(0, val.length - 2) * 1024 * 1024 * 1024
              ).toFixed(4);
              newObj.nVal = val;
              newObj.color = color[parseInt(Math.random() * color.length)];
              let emWidth4 = Number((val / total).toFixed(2));
              if (emWidth4 < 0.01) {
                emWidth4 = 0.01;
              }
              newObj.width = emWidth4;
              unitval.push(newObj);
              break;
          }
        }
        retNewObj[i].unitval = [];
        retNewObj[i].unitval = [...unitval];
      });
      return retNewObj;
    },