摄像机管理

ZZJ

2022-04-12 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22

 src/views/hashrate/HashManage/components/ClusterList.vue

@@ -1,13 +1,18 @@
<template>
  <div class="ClusterList">
    <div class="title">集群列表</div>
    <div v-if="showCluster">
      <div class="title" v-if="listType == 'cluster'">集群列表</div>
      <div class="back" v-else>
        <span class="iconfont" @click="back">&#xe62c;</span>设备列表
      </div>
      <div class="List">
        <ClusterCard
          v-for="i in listlength"
          :key="i"
          @showDetail="showList"
          v-for="(item, index) in listData"
          :key="index"
          :info="item"
          @showDetail="showList(item)"
        ></ClusterCard>

        <div
          class="ClusterCard"
          v-for="i in emptylength"
@@ -27,7 +32,12 @@
      ></el-pagination>
    </div>

    <EquipmentForm v-else @hiddenList="hiddenList"></EquipmentForm>
    <EquipmentForm
      :name="activeName"
      :id="devId"
      v-else
      @hiddenList="hiddenList"
    ></EquipmentForm>
  </div>
</template>

@@ -35,10 +45,12 @@
import ClusterCard from "./ClusterCard";
import EquipmentForm from "./EquipmentForm";
export default {
  mounted() {
    this.getEmptyElement();
    this.addSizeListener();
  props: {
    list: {},
    listType: {},
  },
  created() {},
  mounted() {},
  components: {
    ClusterCard,
    EquipmentForm,
@@ -46,46 +58,45 @@
  data() {
    return {
      showCluster: true,
      listlength: 11,
      emptylength: 0,
      page: 1,
      size: 10,
      total: 100,
      devId: "",
      activeName: "",
    };
  },
  methods: {
    addSizeListener() {
      window.onresize = () => {
        this.getEmptyElement();
      };
    handleSizeChange(size) {
      this.size = size;
    },
    //回填空白项
    getEmptyElement() {
      //  获取屏幕总宽度(即浏览器窗口的宽度)
      var allWidth = document.body.clientWidth;

      // 获取单个item项宽度(即单个item元素的宽度是多少)
      var dom = document.querySelector(".ClusterCard").scrollWidth;

      // [结果取整] 计算一行能放多少个item项(即一排能放多少个元素)
      var line = parseInt(allWidth / dom);

      // 计算需要补多少个item项(元素不需要补的时候(=0)必须作处理)
      // 公式: ( [总item项数量] % [一行能放多少个item项] )
      // 如果等于0则证明不需要补 | 反之一行减去补全
      var result =
        this.listlength % line == 0 ? 0 : line - (this.listlength % line);

      //通知视图进行补元素(渲染视图上的隐藏元素)
      this.emptylength = result;
    refrash(page) {
      this.page = page;
    },
    handleSizeChange() {},
    refrash() {},
    showList() {
      this.showCluster = false;
    showList(dev) {
      if (dev.type == 1) {
        this.$emit("chooseCluster", dev.id);
      } else {
        this.$emit("chooseDevice", dev.id);
        this.devId = dev.id;
        this.activeName = dev.name;
        this.showCluster = false;
      }
    },
    hiddenList() {
      this.showCluster = true;
    },
    back() {
      this.$emit("back");
    },
  },
  computed: {
    listData() {
      let arr = [];
      arr = this.list.slice((this.page - 1) * this.size, this.page * this.size);
      return arr;
    },
    total() {
      return this.list.length;
    },
  },
};
@@ -106,16 +117,25 @@
    font-size: 16px;
    font-weight: 700;
  }
  .back {
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 700;
    span {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .List {
    display: flex;
    flex-wrap: wrap;

    .ClusterCard {
      width: 434px;
      margin-right: 24px;
      margin-bottom: 24px;
      padding: 20px;
      flex: 1;
    }
  }