From 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 12 四月 2022 17:50:21 +0800
Subject: [PATCH] 摄像机管理
---
src/views/hashrate/HashManage/index.vue | 233 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 220 insertions(+), 13 deletions(-)
diff --git a/src/views/hashrate/HashManage/index.vue b/src/views/hashrate/HashManage/index.vue
index a1caf5e..c3d84ef 100644
--- a/src/views/hashrate/HashManage/index.vue
+++ b/src/views/hashrate/HashManage/index.vue
@@ -8,19 +8,22 @@
<img src="/images/hashrate/鎬荤畻鍔�.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="realTime"></HashCard>
</div>
<div class="medium">
<!-- 杞绠楀姏 -->
- <HashCard class="topCard"></HashCard>
+ <HashCard class="topCard" :type="1" :hashrate="polling"></HashCard>
<!-- 鏁版嵁鏍堢畻鍔� -->
- <HashCard></HashCard>
+ <HashCard :type="2" :hashrate="stack"></HashCard>
</div>
<div class="right">
@@ -30,58 +33,262 @@
<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"
+ @back="back"
+ :listType="listType"
+ ></ClusterList>
</div>
</template>
<script>
import HashCard from "./components/HashCard";
import ClusterList from "./components/ClusterList";
+import {
+ userStatisticRunInfo,
+ userSysInfo,
+ userStatisticRun,
+ clusterStatisticRunInfo,
+ clusterSysInfo,
+ clusterStatisticRun,
+ deviceStatisticRunInfo,
+ devicesSysInfo,
+} from "@/api/clusterManage";
export default {
components: {
HashCard,
ClusterList,
},
+ created() {
+ this.getUserInfo();
+ this.getUserDevice();
+ },
+
+ data() {
+ return {
+ total: "",
+ realTime: {},
+ polling: {},
+ stack: {},
+ systemInfo: {
+ cpu: 0,
+ disk: 0,
+ gpu: 0,
+ mem: 0,
+ },
+ deviceList: [],
+ listType: "cluster",
+ };
+ },
+ 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 userSysInfo();
+ 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({ clusterId: 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),
+ };
+ }
+ },
+ //鑾峰彇闆嗙兢璁惧
+ 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);
+ },
+ back() {
+ this.getUserInfo();
+ this.getUserDevice();
+ },
+ },
};
</script>
--
Gitblit v1.8.0