From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整

---
 src/views/hashrate/HashManage/components/ClusterList.vue |   97 +++++++++++++++++++++++++++++-------------------
 1 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/src/views/hashrate/HashManage/components/ClusterList.vue b/src/views/hashrate/HashManage/components/ClusterList.vue
index 0770a99..b732588 100644
--- a/src/views/hashrate/HashManage/components/ClusterList.vue
+++ b/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,46 @@
   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椤瑰搴�(鍗冲崟涓猧tem鍏冪礌鐨勫搴︽槸澶氬皯)
-      var dom = document.querySelector(".ClusterCard").scrollWidth;
-
-      // [缁撴灉鍙栨暣] 璁＄畻涓�琛岃兘鏀惧灏戜釜item椤�(鍗充竴鎺掕兘鏀惧灏戜釜鍏冪礌)
-      var line = parseInt(allWidth / dom);
-
-      // 璁＄畻闇�瑕佽ˉ澶氬皯涓猧tem椤�(鍏冪礌涓嶉渶瑕佽ˉ鐨勬椂鍊�(=0)蹇呴』浣滃鐞�)
-      // 鍏紡: ( [鎬籭tem椤规暟閲廬 % [涓�琛岃兘鏀惧灏戜釜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;
+      this.$emit("refreshCluster");
+    },
+    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 +118,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;
     }
   }
 

--
Gitblit v1.8.0