| | |
| | | </div> |
| | | </div> |
| | | <div class="body" v-if="listType == 'cluster'"> |
| | | <div class="row" v-for="(item, index) in clusterList" :key="index"> |
| | | <div class="content"> |
| | | <div class="rowItem index">{{ index + 1 }}</div> |
| | | <div class="rowItem name">{{ item.clusterName }}</div> |
| | | <div class="rowItem ip">{{ item.virtualIp }}</div> |
| | | <div class="rowItem status"> |
| | | <div v-if="!item.canAdd" class="status green">已添加</div> |
| | | <div v-else class="status">未添加</div> |
| | | <template v-if="clusterList.length > 0"> |
| | | <div class="row" v-for="(item, index) in clusterList" :key="index"> |
| | | <div class="content"> |
| | | <div class="rowItem index">{{ index + 1 }}</div> |
| | | <div class="rowItem name">{{ item.clusterName }}</div> |
| | | <div class="rowItem ip">{{ item.virtualIp }}</div> |
| | | <div class="rowItem status"> |
| | | <div v-if="!item.canAdd" class="status green">已添加</div> |
| | | <div v-else class="status">未添加</div> |
| | | </div> |
| | | <div class="rowItem options"> |
| | | <!-- 添加 --> |
| | | <span v-if="!item.canAdd">-</span> |
| | | <template v-else> |
| | | <span |
| | | class="iconfont option" |
| | | @click="showBox('cluster', item.clusterId)" |
| | | ></span |
| | | > |
| | | <!-- 集群详情 --> |
| | | <span |
| | | class="iconfont option" |
| | | @click="showChildrenLIst(index, item.clusterId)" |
| | | ></span |
| | | > |
| | | </template> |
| | | </div> |
| | | </div> |
| | | <div class="rowItem options"> |
| | | <!-- 添加 --> |
| | | <span v-if="!item.canAdd">-</span> |
| | | <template v-else> |
| | | <span |
| | | class="iconfont option" |
| | | @click="showBox('cluster', item.clusterId)" |
| | | ></span |
| | | > |
| | | <!-- 集群详情 --> |
| | | <span |
| | | class="iconfont option" |
| | | @click="showChildrenLIst(index, item.clusterId)" |
| | | ></span |
| | | > |
| | | </template> |
| | | </div> |
| | | </div> |
| | | |
| | | <div |
| | | class="overList" |
| | | :class="{ isShow: showClusterChild == index }" |
| | | > |
| | | <el-table |
| | | :data="overList" |
| | | :fit="true" |
| | | header-row-class-name="overList-head" |
| | | <div |
| | | class="overList" |
| | | :class="{ isShow: showClusterChild == index }" |
| | | > |
| | | <el-table-column |
| | | label="序号" |
| | | type="index" |
| | | width="146" |
| | | class-name="index " |
| | | <el-table |
| | | :data="overList" |
| | | :fit="true" |
| | | header-row-class-name="overList-head" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="dev_id" |
| | | label="设备ID" |
| | | width="146" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | label="序号" |
| | | type="index" |
| | | width="146" |
| | | class-name="index " |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="dev_id" |
| | | label="设备ID" |
| | | width="146" |
| | | ></el-table-column> |
| | | |
| | | <el-table-column |
| | | prop="dev_ip" |
| | | label="设备IP" |
| | | width="146" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="dev_ip" |
| | | label="设备IP" |
| | | width="146" |
| | | ></el-table-column> |
| | | |
| | | <el-table-column |
| | | prop="dev_name" |
| | | label="设备名称" |
| | | width="240" |
| | | ></el-table-column> |
| | | </el-table> |
| | | <el-table-column |
| | | prop="dev_name" |
| | | label="设备名称" |
| | | width="240" |
| | | ></el-table-column> |
| | | </el-table> |
| | | |
| | | <div class="iconfont" @click="showClusterChild = null"> |
| | |  |
| | | <div class="iconfont" @click="showClusterChild = null"> |
| | |  |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <div class="empty" v-else>暂无数据</div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | .clusterList { |
| | | max-height: 507px; |
| | | overflow-y: overlay; |
| | | |
| | | .empty { |
| | | height: 60px; |
| | | background-color: rgb(233, 235, 238); |
| | | line-height: 60px; |
| | | color: #909399; |
| | | font-size: 14px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | | .tableList { |
| | |
| | | .btns { |
| | | margin-top: 40px; |
| | | display: flex; |
| | | justify-content: end; |
| | | justify-content: flex-end; |
| | | text-align: center; |
| | | line-height: 32px; |
| | | font-size: 14px; |