基础设施
This commit is contained in:
851673013@qq.com
parent
a357f1a1b0
commit
e309dbbb90
|
|
@ -8,7 +8,7 @@
|
||||||
<span
|
<span
|
||||||
v-for="itemContent in item.content"
|
v-for="itemContent in item.content"
|
||||||
:key="itemContent"
|
:key="itemContent"
|
||||||
@click="tabClick(index, itemContent)"
|
@click="tabClick(index, itemContent, itemContent)"
|
||||||
:class="
|
:class="
|
||||||
clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
|
clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
|
||||||
"
|
"
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
class="ant-table-striped"
|
class="ant-table-striped"
|
||||||
:dataSource="dataSource"
|
:dataSource="dataSource"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:scroll="{ y: 600 }"
|
:scroll="{ y: tableHeight }"
|
||||||
:rowClassName="
|
:rowClassName="
|
||||||
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
||||||
"
|
"
|
||||||
|
|
@ -79,7 +79,12 @@
|
||||||
selectedRowKeys: selectedRowKeys,
|
selectedRowKeys: selectedRowKeys,
|
||||||
onChange: onSelectChange,
|
onChange: onSelectChange,
|
||||||
}"
|
}"
|
||||||
/>
|
>
|
||||||
|
<template slot="status" slot-scope="text, record, index">
|
||||||
|
<span>正常</span>
|
||||||
|
<span>失效</span>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -115,20 +120,41 @@
|
||||||
}
|
}
|
||||||
let clickList = ref([]) //存储点击的tab
|
let clickList = ref([]) //存储点击的tab
|
||||||
init()
|
init()
|
||||||
|
//表格的高度
|
||||||
|
let tableHeight = ref('600')
|
||||||
//tab切换点击事件
|
//tab切换点击事件
|
||||||
const tabClick = (indexFather, name) => {
|
const tabClick = (indexFather, name, fatherName) => {
|
||||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||||
// debugger
|
debugger
|
||||||
|
if (fatherName == '视频资源') {
|
||||||
|
debugger
|
||||||
|
tableHeight.value = 330
|
||||||
|
} else if (fatherName == '云资源') {
|
||||||
|
debugger
|
||||||
|
tableHeight.value = 600
|
||||||
|
} else if (fatherName == '感知资源') {
|
||||||
|
debugger
|
||||||
|
tableHeight.value = 330
|
||||||
|
}
|
||||||
clickList.value[indexFather].content.splice(
|
clickList.value[indexFather].content.splice(
|
||||||
clickList.value[indexFather].content.indexOf(name),
|
clickList.value[indexFather].content.indexOf(name),
|
||||||
1
|
1
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
// debugger
|
debugger
|
||||||
|
if (fatherName == '视频资源') {
|
||||||
|
debugger
|
||||||
|
tableHeight.value = 330
|
||||||
|
} else if (fatherName == '云资源') {
|
||||||
|
debugger
|
||||||
|
tableHeight.value = 600
|
||||||
|
} else if (fatherName == '感知资源') {
|
||||||
|
debugger
|
||||||
|
tableHeight.value = 330
|
||||||
|
}
|
||||||
clickList.value[indexFather].content[0] = name
|
clickList.value[indexFather].content[0] = name
|
||||||
}
|
}
|
||||||
console.log('clickList.value', clickList.value)
|
console.log('clickList.value', clickList.value)
|
||||||
// debugger
|
|
||||||
}
|
}
|
||||||
const name = ref('')
|
const name = ref('')
|
||||||
// 搜索框
|
// 搜索框
|
||||||
|
|
@ -294,129 +320,131 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.infrastructrueBox {
|
.infrastructrueBox {
|
||||||
width: 10.87rem;
|
width: 10.87rem;
|
||||||
padding: 0.2rem;
|
|
||||||
background: #f3f5f9;
|
|
||||||
.infrastructrue-tab {
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
background: #f3f5f9;
|
||||||
span {
|
.infrastructrue-tab {
|
||||||
display: inline-block;
|
background: #ffffff;
|
||||||
height: 0.24rem;
|
padding: 0.2rem;
|
||||||
line-height: 0.24rem;
|
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||||
border: 0.01rem solid #cccccc;
|
span {
|
||||||
border-radius: 0.12rem;
|
display: inline-block;
|
||||||
margin-left: 0.1rem;
|
height: 0.24rem;
|
||||||
text-align: center;
|
font-size: 0.14rem;
|
||||||
color: #666666;
|
line-height: 0.24rem;
|
||||||
cursor: pointer;
|
border: 0;
|
||||||
padding: 0 0.08rem;
|
border-radius: 0.12rem;
|
||||||
}
|
margin-left: 0.1rem;
|
||||||
.leftType {
|
text-align: center;
|
||||||
margin: 0.1rem 0;
|
|
||||||
}
|
|
||||||
.down {
|
|
||||||
border: 0.01rem solid #0087ff;
|
|
||||||
color: #0087ff;
|
|
||||||
}
|
|
||||||
.tabBox {
|
|
||||||
margin-bottom: 0.16rem;
|
|
||||||
}
|
|
||||||
.tabBox:last-of-type {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.infrastructrue-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.14rem 0.2rem 0.1rem;
|
|
||||||
background: #ffffff;
|
|
||||||
.contentNum {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
p {
|
|
||||||
color: #666666;
|
color: #666666;
|
||||||
padding: 0;
|
cursor: pointer;
|
||||||
margin: 0;
|
padding: 0 0.08rem;
|
||||||
span {
|
|
||||||
color: #0087ff;
|
|
||||||
font-size: 0.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
p:first-of-type {
|
.leftType {
|
||||||
padding-right: 0.16rem;
|
margin: 0.1rem 0;
|
||||||
margin-right: 0.16rem;
|
|
||||||
}
|
}
|
||||||
.boundary {
|
.down {
|
||||||
position: absolute;
|
background: #0087ff;
|
||||||
left: 0.9rem;
|
color: #ffffff;
|
||||||
top: 0.07rem;
|
}
|
||||||
display: block;
|
.tabBox {
|
||||||
width: 0.02rem;
|
height: 0.3rem;
|
||||||
border-radius: 0.01rem;
|
margin-bottom: 0.16rem;
|
||||||
height: 0.2rem;
|
}
|
||||||
background: rgba(150, 144, 144, 0.3);
|
.tabBox:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.contentRight {
|
.infrastructrue-content {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.boundary {
|
padding: 0.14rem 0.2rem 0.1rem;
|
||||||
position: absolute;
|
background: #ffffff;
|
||||||
left: 3.74rem;
|
.contentNum {
|
||||||
top: 0.07rem;
|
position: relative;
|
||||||
display: block;
|
|
||||||
width: 0.02rem;
|
|
||||||
border-radius: 0.01rem;
|
|
||||||
height: 0.2rem;
|
|
||||||
background: rgba(150, 144, 144, 0.3);
|
|
||||||
}
|
|
||||||
.searchInput {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-right: 0.2rem;
|
p {
|
||||||
.ant-input-search {
|
color: #666666;
|
||||||
max-width: 4rem;
|
padding: 0;
|
||||||
}
|
margin: 0;
|
||||||
:deep(.ant-input) {
|
span {
|
||||||
width: 2rem;
|
color: #0087ff;
|
||||||
height: 0.36rem;
|
font-size: 0.2rem;
|
||||||
font-size: 0.14rem;
|
font-weight: 500;
|
||||||
color: #b2b2b2;
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
:deep(.ant-input-group-addon) {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 0.1rem;
|
|
||||||
.ant-input-search-button {
|
|
||||||
width: 0.8rem;
|
|
||||||
height: 0.36rem;
|
|
||||||
background: #0558e1;
|
|
||||||
border-radius: 0.04rem;
|
|
||||||
font-size: 0.14rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:deep(.ant-btn) {
|
p:first-of-type {
|
||||||
background: #0558e1;
|
padding-right: 0.16rem;
|
||||||
border-radius: 0.04rem;
|
margin-right: 0.16rem;
|
||||||
|
}
|
||||||
|
.boundary {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.9rem;
|
||||||
|
top: 0.07rem;
|
||||||
|
display: block;
|
||||||
|
width: 0.02rem;
|
||||||
|
border-radius: 0.01rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
background: rgba(150, 144, 144, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.buttonAdd {
|
.contentRight {
|
||||||
background: #0558e1;
|
position: relative;
|
||||||
border-radius: 0.04rem;
|
display: flex;
|
||||||
height: 0.36rem;
|
justify-content: space-between;
|
||||||
border-color: #0558e1;
|
.boundary {
|
||||||
margin-left: 0.1rem;
|
position: absolute;
|
||||||
|
left: 3.74rem;
|
||||||
|
top: 0.07rem;
|
||||||
|
display: block;
|
||||||
|
width: 0.02rem;
|
||||||
|
border-radius: 0.01rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
background: rgba(150, 144, 144, 0.3);
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
.ant-input-search {
|
||||||
|
max-width: 4rem;
|
||||||
|
}
|
||||||
|
:deep(.ant-input) {
|
||||||
|
width: 2rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
color: #b2b2b2;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
:deep(.ant-input-group-addon) {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
.ant-input-search-button {
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
background: #0558e1;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-btn) {
|
||||||
|
background: #0558e1;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buttonAdd {
|
||||||
|
background: #0558e1;
|
||||||
|
border-radius: 0.04rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
border-color: #0558e1;
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.infrastructrue-table {
|
||||||
|
.ant-table-striped :deep(.table-striped) td {
|
||||||
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.infrastructrue-table {
|
|
||||||
.ant-table-striped :deep(.table-striped) td {
|
|
||||||
background-color: #fafafa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue