摄像机管理

ZZJ

2022-04-12 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22

 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>