From b200eed05d5bff2e12a45331bdc062f4b00bebf7 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 28 七月 2022 10:20:51 +0800
Subject: [PATCH] 列表样式
---
src/views/hashrate/HashManage/index.vue | 244 ++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 230 insertions(+), 14 deletions(-)
diff --git a/src/views/hashrate/HashManage/index.vue b/src/views/hashrate/HashManage/index.vue
index a1caf5e..1a220da 100644
--- a/src/views/hashrate/HashManage/index.vue
+++ b/src/views/hashrate/HashManage/index.vue
@@ -5,22 +5,25 @@
<!-- 鎬荤畻鍔� -->
<div class="card">
<div class="hashrate">
- <img src="/images/hashrate/鎬荤畻鍔�.png" alt="" />
+ <img src="/images/hashrate/total.png" alt="" />
<div class="hashrateContent">
<div class="label">鎬荤畻鍔�</div>
- <div class="data"><span class="number">42</span>璺�</div>
+ <div class="data">
+ <span class="number">{{ total }}</span
+ >璺�
+ </div>
</div>
</div>
</div>
<!-- 瀹炴椂绠楀姏 -->
- <HashCard></HashCard>
+ <HashCard :type="0" :hashrate="polling"></HashCard>
</div>
<div class="medium">
<!-- 杞绠楀姏 -->
- <HashCard class="topCard"></HashCard>
+ <HashCard class="topCard" :type="1" :hashrate="realTime"></HashCard>
<!-- 鏁版嵁鏍堢畻鍔� -->
- <HashCard></HashCard>
+ <HashCard :type="2" :hashrate="stack"></HashCard>
</div>
<div class="right">
@@ -30,58 +33,271 @@
<div class="row">
<div class="label">鍐呭瓨</div>
<el-progress
- :percentage="50"
+ :percentage="systemInfo.mem"
:stroke-width="24"
:show-text="false"
></el-progress>
- <div class="number">50%</div>
+ <div class="number">{{ systemInfo.mem }}%</div>
</div>
<!-- 绠楀姏杩涘害鏉� -->
<div class="row">
<div class="label">绠楀姏</div>
<el-progress
- :percentage="50"
+ :percentage="systemInfo.gpu"
:stroke-width="24"
:show-text="false"
></el-progress>
- <div class="number">50%</div>
+ <div class="number">{{ systemInfo.gpu }}%</div>
</div>
<!-- CPU杩涘害鏉� -->
<div class="row">
<div class="label">CPU</div>
<el-progress
- :percentage="50"
+ :percentage="systemInfo.cpu"
:stroke-width="24"
:show-text="false"
></el-progress>
- <div class="number">50%</div>
+ <div class="number">{{ systemInfo.cpu }}%</div>
</div>
<!-- 纭洏杩涘害鏉� -->
<div class="row">
<div class="label">纭洏</div>
<el-progress
- :percentage="50"
+ :percentage="systemInfo.disk"
:stroke-width="24"
:show-text="false"
></el-progress>
- <div class="number">50%</div>
+ <div class="number">{{ systemInfo.disk }}%</div>
</div>
</div>
</div>
</div>
- <ClusterList></ClusterList>
+ <ClusterList
+ :list="deviceList"
+ @chooseCluster="chooseCluster"
+ @chooseDevice="chooseDevice"
+ @refreshCluster="chooseCluster(ClusterId)"
+ @back="back"
+ :listType="listType"
+ ></ClusterList>
</div>
</template>
<script>
import HashCard from "./components/HashCard";
import ClusterList from "./components/ClusterList";
+import {
+ userStatisticRunInfo,
+ userStatisticRun,
+ clusterStatisticRunInfo,
+ clusterSysInfo,
+ clusterStatisticRun,
+ deviceStatisticRunInfo,
+ devicesSysInfo,
+} from "@/api/clusterManage";
export default {
components: {
HashCard,
ClusterList,
},
+ created() {
+ sessionStorage.removeItem("devId");
+ sessionStorage.removeItem("clusterId");
+ this.getUserInfo();
+ this.getUserDevice();
+ },
+
+ data() {
+ return {
+ total: "",
+ realTime: {},
+ polling: {},
+ stack: {},
+ systemInfo: {
+ cpu: 0,
+ disk: 0,
+ gpu: 0,
+ mem: 0,
+ },
+ deviceList: [],
+ listType: "cluster",
+ ClusterId: "",
+ };
+ },
+ methods: {
+ //鑾峰彇鍏ㄩ儴淇℃伅
+ async getUserInfo() {
+ const res1 = await userStatisticRunInfo();
+ if (res1 && res1.success) {
+ this.total = res1.data.channelTotal;
+ this.realTime = {
+ total: res1.data.realValidCount,
+ valid: res1.data.realTotal,
+ invalid: res1.data.realInvalidCount,
+ run: res1.data.realRunningCount,
+ noDeal:
+ res1.data.realTotal -
+ res1.data.realRunningCount -
+ res1.data.realInvalidCount,
+ };
+ this.polling = {
+ valid: res1.data.pollTotal,
+ total: res1.data.pollChannelCount,
+ invalid: res1.data.pollInvalidCount,
+ run: res1.data.pollRunningCount,
+ noDeal:
+ res1.data.pollTotal -
+ res1.data.pollRunningCount -
+ res1.data.pollInvalidCount,
+ };
+
+ this.stack = {
+ total: res1.data.stackChannelCount,
+ valid: res1.data.stackTotal,
+ invalid: res1.data.stackInvalidCount,
+ run: res1.data.stackRunningCount,
+ noDeal:
+ res1.data.stackTotal -
+ res1.data.stackInvalidCount -
+ res1.data.stackRunningCount,
+ };
+ }
+ const res2 = await clusterSysInfo({
+ clusterId: "",
+ });
+ if (res2 && res2.success) {
+ this.systemInfo = {
+ cpu: parseInt(res2.data.cpu.usedPercent),
+ disk: parseInt(res2.data.disk.usedPercent),
+ gpu: parseInt(res2.data.gpu.usedPercent),
+ mem: parseInt(res2.data.mem.usedPercent),
+ };
+ }
+ },
+ //鑾峰彇鍏ㄩ儴璁惧
+ async getUserDevice() {
+ const res = await userStatisticRun();
+ if (res && res.success) {
+ this.deviceList = res.data.lists;
+ this.listType = "cluster";
+ }
+ },
+ //鑾峰彇闆嗙兢淇℃伅
+ async getClusterInfo(id) {
+ const res1 = await clusterStatisticRunInfo({ clusterId: id });
+ if (res1 && res1.success) {
+ this.total = res1.data.channelTotal;
+ this.realTime = {
+ total: res1.data.realValidCount,
+ valid: res1.data.realTotal,
+ invalid: res1.data.realInvalidCount,
+ run: res1.data.realRunningCount,
+ noDeal:
+ res1.data.realTotal -
+ res1.data.realRunningCount -
+ res1.data.realInvalidCount,
+ };
+ this.polling = {
+ valid: res1.data.pollTotal,
+ total: res1.data.pollChannelCount,
+ invalid: res1.data.pollInvalidCount,
+ run: res1.data.pollRunningCount,
+ noDeal:
+ res1.data.pollTotal -
+ res1.data.pollRunningCount -
+ res1.data.pollInvalidCount,
+ };
+
+ this.stack = {
+ total: res1.data.stackChannelCount,
+ valid: res1.data.stackTotal,
+ invalid: res1.data.stackInvalidCount,
+ run: res1.data.stackRunningCount,
+ noDeal:
+ res1.data.stackTotal -
+ res1.data.stackInvalidCount -
+ res1.data.stackRunningCount,
+ };
+ }
+ const res2 = await clusterSysInfo(
+ //id
+ { clusterId: "" }
+ );
+ if (res2 && res2.success) {
+ this.systemInfo = {
+ cpu: parseInt(res2.data.cpu.usedPercent),
+ disk: parseInt(res2.data.disk.usedPercent),
+ gpu: parseInt(res2.data.gpu.usedPercent),
+ mem: parseInt(res2.data.mem.usedPercent),
+ };
+ }
+ },
+ //鑾峰彇闆嗙兢璁惧
+ async getClusterDevice(id) {
+ const res = await clusterStatisticRun({ clusterId: id });
+ if (res && res.success) {
+ this.deviceList = res.data.lists;
+ this.listType = "device";
+ }
+ },
+ //鑾峰彇璁惧淇℃伅
+ async chooseDevice(id) {
+ const res1 = await deviceStatisticRunInfo({ deviceId: [id] });
+ if (res1 && res1.success) {
+ this.total = res1.data.channelTotal;
+ this.realTime = {
+ total: res1.data.realValidCount,
+ valid: res1.data.realTotal,
+ invalid: res1.data.realInvalidCount,
+ run: res1.data.realRunningCount,
+ noDeal:
+ res1.data.realTotal -
+ res1.data.realRunningCount -
+ res1.data.realInvalidCount,
+ };
+ this.polling = {
+ valid: res1.data.pollTotal,
+ total: res1.data.pollChannelCount,
+ invalid: res1.data.pollInvalidCount,
+ run: res1.data.pollRunningCount,
+ noDeal:
+ res1.data.pollTotal -
+ res1.data.pollRunningCount -
+ res1.data.pollInvalidCount,
+ };
+
+ this.stack = {
+ total: res1.data.stackChannelCount,
+ valid: res1.data.stackTotal,
+ invalid: res1.data.stackInvalidCount,
+ run: res1.data.stackRunningCount,
+ noDeal:
+ res1.data.stackTotal -
+ res1.data.stackInvalidCount -
+ res1.data.stackRunningCount,
+ };
+ }
+ const res2 = await devicesSysInfo({ deviceId: [id] });
+ if (res2 && res2.success) {
+ this.systemInfo = {
+ cpu: parseInt(res2.data.cpu.usedPercent),
+ disk: parseInt(res2.data.disk.usedPercent),
+ gpu: parseInt(res2.data.gpu.usedPercent),
+ mem: parseInt(res2.data.mem.usedPercent),
+ };
+ }
+ },
+ chooseCluster(id) {
+ this.getClusterInfo(id);
+ this.getClusterDevice(id);
+ this.ClusterId = id;
+ },
+ back() {
+ this.getUserInfo();
+ this.getUserDevice();
+ },
+ },
};
</script>
--
Gitblit v1.8.0