gb18186

ZZJ

2022-07-27 88078aa63c669cffc2d91e1269d460436427d09d

 src/views/GB28181/components/DevList.vue

@@ -4,25 +4,45 @@
    <div class="empty" v-if="devList.length === 0">
      <img src="/images/search/1.png" alt="" />
      <div class="des">您还未添加集群或设备，请在设备管理中添加</div>
      <div class="button add">立即添加</div>
      <div class="button add" @click="$router.push('/equipmentList')">
        立即添加
      </div>
    </div>
    <div class="list scroll">
      <div class="devItem" v-for="(item, index) in devList" :key="index">
      <div class="devItem" v-for="(item, index) in clusterList" :key="index">
        <div class="mainInfo">
          <img
            v-if="item.type == 1"
            src="/images/hashrate/cluster.png"
            alt=""
          />
          <img v-else src="/images/hashrate/equipment.png" alt="" />
          <img src="/images/hashrate/cluster.png" alt="" />

          <div class="right">
            <div class="name">集群123</div>
            <div class="ip">192.168.1.1</div>
            <div class="number">设备总量:7</div>
            <div class="name">{{ item.cluster_name }}</div>
            <div class="ip">{{ item.virtual_ip }}</div>
            <div class="number">设备总量:{{ item.nodeNum }}</div>
          </div>

          <div class="button set" @click="showSettingBox = true">配置</div>
          <div
            class="button set"
            @click="setting({ clusterId: item.cluster_id }, item.nodeList)"
          >
            配置
          </div>
        </div>
      </div>
      <div
        class="devItem"
        v-for="(item, index) in devList"
        :key="index + 'dev'"
      >
        <div class="mainInfo">
          <img src="/images/hashrate/equipment.png" alt="" />

          <div class="right">
            <div class="name">{{ item.devName }}</div>
            <div class="ip">{{ item.devIp }}</div>
          </div>

          <div class="button set" @click="setting({ devId: item.devId })">
            配置
          </div>
        </div>
      </div>
    </div>
@@ -30,73 +50,45 @@
    <SettingBox
      v-if="showSettingBox"
      @close="showSettingBox = false"
      :id="idObj"
      :nodeList="nodeList"
    ></SettingBox>
  </div>
</template>

<script>
import SettingBox from "@/views/GB28181/components/SettingBox";
import { getClusterDevList } from "@/api/clusterManage";

export default {
  components: {
    SettingBox,
  },
  created() {
    this.getClusterDevList();
  },
  data() {
    return {
      devList: [
        {
          type: 1,
        },
        {
          type: 1,
        },

        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },

        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 1,
        },
        {
          type: 0,
        },
        {
          type: 0,
        },
      ],
      clusterList: [],
      devList: [],
      showSettingBox: false,
      idObj: {},
      nodeList: [],
    };
  },
  methods: {
    async getClusterDevList() {
      const res = await getClusterDevList();
      if (res && res.success) {
        this.clusterList = res.data.clusterList;
        this.devList = res.data.devList;
      }
    },
    setting(id, nodeList) {
      this.idObj = id;
      this.nodeList = nodeList ? nodeList : [];
      this.showSettingBox = true;
    },
  },
};
</script>
@@ -213,4 +205,4 @@
    }
  }
}
</style>
</style>