wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev

This commit is contained in:
guoyue 2022-06-25 14:01:30 +08:00
parent b379c87cd4 598f60ca17
commit c6c9d06b85
5 changed files with 933 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
back/src/assets/img/排行榜背景图.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

58
back/src/views/modules/abilityStatistics/applicationResources.vue
View File

@ -98,7 +98,7 @@ export default {
},
axisLine:{
lineStyle:{
color:"#ebebeb"
color:"#f5f5f5"
}
},
axisLabel: {//y轴文字的配置
@ -133,11 +133,25 @@ export default {
},
},
series: [
{
data: [5, 5, 5, 5, 5, 5],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
])
},
},
{
data: [60, 90, 50, 80],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -285,11 +299,25 @@ export default {
},
},
series: [
{
data: [5, 5, 5, 5],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
])
},
},
{
data: [60, 90, 50, 80],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -317,9 +345,9 @@ export default {
type: 'category',
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
color:['#f5f5f5'],
axisTick:{
show:false,//不显示坐标轴刻度线
},
axisTick: { // 坐标轴 刻度
show: false, // 是否显示
},
splitLine: {
show: true,
color:['#f5f5f5']
@ -362,10 +390,24 @@ export default {
},
series: [
{
data: [5, 5, 5, 5, 5, 5],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
])
},
},
{
data: [60, 90, 50, 80, 50, 80],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -374,7 +416,7 @@ export default {
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' }
])
},
}
},
]
};

1
back/src/views/modules/abilityStatistics/componentServices.vue
View File

@ -358,6 +358,7 @@ export default {
padding-left: 20px;
margin-top: 20px;
margin-right: 20px;
/* background-image:url("../../../assets/img/排行榜背景图.png"); */
}
.container-body5{
width:640px;

893
front/src/views/home/DetailsPageconetent.vue
View File

@ -2,10 +2,13 @@
<!-- 青岛 -->
<div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
<home-header></home-header>
<div class="details-pageconetent-left">
<div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
<detailsPageconetentTree />
</div>
<div class="top" v-if="Cardsname != '知识库'">
<div class="details-pageconetent-left" v-else>
<detailsPageInfrastructureTree />
</div>
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
<div class="top-title">
<div
v-for="item in titleName"
@ -143,6 +146,28 @@
<a-empty />
</div>
</div>
<div class="top" v-else-if="Cardsname === '基础设施'">
<div class="top-title">
<div
v-for="item in titleName"
:key="item.name"
:class="item.name === Cardsname ? 'sel' : ''"
@click="changeCards(item.name)"
>
<span
class="photo"
:style="{
backgroundImage: `url(${item.photo}) `,
backgroundSize: 'cover',
}"
></span>
<span>{{ item.name }}</span>
</div>
</div>
<div class="top-content-father">
<infrastructurePage />
</div>
</div>
<div class="top" v-else>
<div class="top-title">
<div
@ -656,6 +681,10 @@
// import VideoSurveillance from '@/views/home/videoSurveillance'
// 数据资源引用
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
// 基础设施引用
import infrastructurePage from '@/views/home/infrastructurePage.vue'
import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
export default defineComponent({
setup() {
// const store = useStore()
@ -1291,6 +1320,8 @@
// VideoCameraOutlined,
// VideoSurveillance,
DetailsPageResource,
infrastructurePage,
detailsPageInfrastructureTree,
},
beforeUnmount() {
mybus.off('selectCardsitem')
@ -1303,474 +1334,474 @@
})
</script>
<style lang="less" scoped>
.resultListSearchInput-father {
background: #f3f5f9;
padding-left: 0.2rem;
padding-top: 0.2rem;
.resultListSearchInput-son {
background: #fff;
padding: 0.2rem 0.2rem 0rem 0.3rem;
margin-right: 0.2rem;
.hengxian {
width: 100%;
height: 0.01rem;
background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem;
}
.resultListSearchInput-father {
background: #f3f5f9;
padding-left: 0.2rem;
padding-top: 0.2rem;
.resultListSearchInput-son {
background: #fff;
padding: 0.2rem 0.2rem 0rem 0.3rem;
margin-right: 0.2rem;
.hengxian {
width: 100%;
height: 0.01rem;
background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem;
}
}
.resultListSearchInput {
margin-left: 0.1rem;
:deep(.ant-input) {
width: 4rem;
height: 0.36rem;
background: #fff;
border-radius: 0.04rem;
}
:deep(.ant-input-search-button) {
width: 0.8rem;
height: 0.36rem;
background: #0087ff;
border-radius: 0.04rem !important;
font-size: 0.14rem;
font-weight: 400;
color: #fff;
line-height: 0.34rem;
margin-left: 0.1rem;
}
:deep(.ant-input-group-addon) {
left: 0 !important;
}
}
.resultListSearchInput {
margin-left: 0.1rem;
:deep(.ant-input) {
width: 4rem;
height: 0.36rem;
background: #fff;
border-radius: 0.04rem;
}
.button-reset {
border: 0;
outline: none;
:deep(.ant-input-search-button) {
width: 0.8rem;
height: 0.36rem;
background: #e1edfa;
border-radius: 0.04rem;
background: #0087ff;
border-radius: 0.04rem !important;
font-size: 0.14rem;
font-weight: 400;
color: #0087ff;
color: #fff;
line-height: 0.34rem;
margin-left: 2.5rem;
cursor: pointer;
margin-left: 0.1rem;
}
.details-pageconetent {
height: 100%;
width: 100%;
display: flex;
// flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.67rem;
:deep(.ant-input-group-addon) {
left: 0 !important;
}
}
.button-reset {
border: 0;
outline: none;
width: 0.8rem;
height: 0.36rem;
background: #e1edfa;
border-radius: 0.04rem;
font-size: 0.14rem;
font-weight: 400;
color: #0087ff;
line-height: 0.34rem;
margin-left: 2.5rem;
cursor: pointer;
}
.details-pageconetent {
height: 100%;
width: 100%;
display: flex;
// flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.67rem;
position: relative;
background: rgba(245, 243, 243, 0.3);
.details-pageconetent-left {
max-height: 6.9rem;
position: absolute;
width: 2.5rem;
top: 0.17rem;
left: 2.5rem;
margin-right: 0.17rem;
overflow: auto;
}
.top {
min-height: 7.2rem;
position: relative;
background: rgba(245, 243, 243, 0.3);
.details-pageconetent-left {
max-height: 6.9rem;
position: absolute;
width: 2.5rem;
top: 0.17rem;
left: 2.5rem;
margin-right: 0.17rem;
overflow: auto;
width: 10.87rem;
display: flex;
padding-top: 0.2rem;
flex-direction: column;
// align-items: center;
font-size: 0.16rem;
justify-content: left;
margin-left: 2.5rem;
.pagination {
background: #f3f5f9;
padding-bottom: 0.6rem;
}
.top {
min-height: 7.2rem;
position: relative;
width: 10.87rem;
display: flex;
padding-top: 0.2rem;
flex-direction: column;
// align-items: center;
font-size: 0.16rem;
justify-content: left;
margin-left: 2.5rem;
.pagination {
background: #f3f5f9;
padding-bottom: 0.6rem;
}
.jichusheshi {
// display: flex;
// flex-direction: column;
// justify-content: center;
// padding-top: .4rem;
height: 4.45rem;
// overflow: hidden;
.yunziyuan {
width: 100%;
position: relative;
.shuoming {
position: absolute;
right: 0.2rem;
top: 0.15rem;
font-size: 0.12rem;
}
.yunziyuan-title {
display: flex;
align-items: center;
.tupian {
// width: .89rem;
// height: .74rem;
// background: url('~@/assets/home/yunziyuan.png');
}
.title {
margin-left: 0.1rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
}
.fenlei {
display: flex;
margin-left: 0.2rem;
margin-right: 0.3rem;
justify-content: space-between;
}
.keyongziyuan {
display: flex;
justify-content: space-between;
margin-left: 0.3rem;
margin-right: 0.3rem;
div {
display: flex;
div:last-child {
font-weight: 600;
}
}
}
.jichusheshi {
// display: flex;
// flex-direction: column;
// justify-content: center;
// padding-top: .4rem;
height: 4.45rem;
// overflow: hidden;
.yunziyuan {
width: 100%;
position: relative;
.shuoming {
position: absolute;
right: 0.2rem;
top: 0.15rem;
font-size: 0.12rem;
}
.yunziyuan > div {
margin-bottom: 0.1rem;
}
.shipin {
width: 100%;
.shipin-title {
display: flex;
align-items: center;
.tupian {
// width: .56rem;
// height: .5rem;
// background: url('~@/assets/home/shipin.png');
}
.title {
margin-left: 0.1rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
}
.fenlei {
display: flex;
margin-left: 0.2rem;
div {
margin-right: 0.6rem;
}
.shuzi {
font-weight: 600;
}
}
}
.shipin > div {
margin-bottom: 0.1rem;
}
}
.jichusheshi > div {
// background: #eaf4ff;
padding-top: 0.1rem;
border-radius: 0.04rem;
margin-bottom: 0.2rem;
padding-bottom: 0.4rem;
}
.shujuziyuan {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 0.4rem;
.yunziyuan {
width: 100%;
position: relative;
.shuoming {
position: absolute;
right: 0.2rem;
top: 0.15rem;
font-size: 0.12rem;
}
.yunziyuan-title {
display: flex;
align-items: center;
margin-left: 0.2rem;
.tupian {
// width: .51rem;
// height: .5rem;
// background: url('~@/assets/home/shujuziyuan.png');
}
.title {
margin-left: 0.1rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
}
.fenlei {
display: flex;
margin-left: 0.2rem;
margin-right: 0.3rem;
justify-content: space-between;
}
.keyongziyuan {
display: flex;
justify-content: space-between;
margin-left: 0.3rem;
margin-right: 0.3rem;
div {
display: flex;
div:last-child {
font-weight: 600;
}
}
}
}
.yunziyuan > div {
margin-bottom: 0.1rem;
}
}
.shujuziyuan > div {
background: #eaf4ff;
padding-top: 0.1rem;
border-radius: 0.04rem;
margin-bottom: 0.2rem;
padding-bottom: 0.4rem;
}
.top-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.2rem;
font-family: 'Alibaba PuHuiTi';
color: #000000;
line-height: 0.34rem;
.photo {
display: inline-block;
height: 0.44rem;
width: 0.44rem;
margin-right: 0.1rem;
}
div {
margin: 0 0.2rem;
padding: 0 0.1rem;
cursor: pointer;
.yunziyuan-title {
display: flex;
align-items: center;
.tupian {
// width: .89rem;
// height: .74rem;
// background: url('~@/assets/home/yunziyuan.png');
}
.title {
margin-left: 0.1rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
}
div:hover {
color: #0087ff;
.fenlei {
display: flex;
margin-left: 0.2rem;
margin-right: 0.3rem;
justify-content: space-between;
}
.sel {
font-weight: 600;
color: #0087ff;
border-bottom: 0.02rem solid #0087ff;
.keyongziyuan {
display: flex;
justify-content: space-between;
margin-left: 0.3rem;
margin-right: 0.3rem;
div {
display: flex;
div:last-child {
font-weight: 600;
}
}
}
}
.top-content-father {
width: 10.87rem;
padding-left: 0.2rem;
// margin-bottom: .2rem;
background: #f3f5f9;
.top-content-son {
background: #fff;
margin: 0rem 0.2rem 0.2rem 0rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.top-content {
.yunziyuan > div {
margin-bottom: 0.1rem;
}
.shipin {
width: 100%;
.shipin-title {
display: flex;
margin-top: 0rem;
span:nth-child(1) {
display: inline-block;
position: relative;
// width: .7rem;
line-height: 0.3614rem;
white-space: normal;
text-align: center;
vertical-align: middle;
align-items: center;
.tupian {
// width: .56rem;
// height: .5rem;
// background: url('~@/assets/home/shipin.png');
}
// .top-content-title {
// top: -0.2rem;
// }
.leixingsumfather {
width: 8.1rem;
display: inline-block;
height: 0.3014rem;
overflow: hidden;
// width: 7.18rem;
}
.leixingsumfather2 {
width: 9.2rem;
}
.leixingsum {
display: inline-block;
.title {
margin-left: 0.1rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
text-align: center;
margin-top: 0.05rem;
// margin-bottom: .1rem;
.ant-tag-checkable {
width: 0.83rem;
height: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0.05rem;
padding-right: 0.05rem;
float: left;
margin: 0 0.15rem;
font-family: 'AlibabaPuHuiTiR';
font-size: 0.14rem;
color: #333333;
font-weight: 500;
text-align: center;
line-height: 0.14rem;
}
:deep(.ant-tag-checkable-checked) {
// width: .67rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
text-align: center;
}
.ant-tag-checkable:active,
.ant-tag-checkable-checked {
width: 0.85rem;
font-family: 'Alibaba PuHuiTi';
font-weight: 500;
background-color: #0087ff;
color: #ffffff;
border-radius: 0.16rem;
}
}
.fenlei {
display: flex;
margin-left: 0.2rem;
div {
margin-right: 0.6rem;
}
.shuzi {
font-weight: 600;
}
}
}
.shipin > div {
margin-bottom: 0.1rem;
}
}
.jichusheshi > div {
// background: #eaf4ff;
padding-top: 0.1rem;
border-radius: 0.04rem;
margin-bottom: 0.2rem;
padding-bottom: 0.4rem;
}
.shujuziyuan {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 0.4rem;
.yunziyuan {
width: 100%;
position: relative;
.shuoming {
position: absolute;
right: 0.2rem;
top: 0.15rem;
font-size: 0.12rem;
}
.yunziyuan-title {
display: flex;
align-items: center;
margin-left: 0.2rem;
.tupian {
// width: .51rem;
// height: .5rem;
// background: url('~@/assets/home/shujuziyuan.png');
}
.title {
margin-left: 0.1rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
}
.fenlei {
display: flex;
margin-left: 0.2rem;
margin-right: 0.3rem;
justify-content: space-between;
}
.keyongziyuan {
display: flex;
justify-content: space-between;
margin-left: 0.3rem;
margin-right: 0.3rem;
div {
display: flex;
div:last-child {
font-weight: 600;
}
}
.active {
font-family: Alibaba PuHuiTi;
}
}
.yunziyuan > div {
margin-bottom: 0.1rem;
}
}
.shujuziyuan > div {
background: #eaf4ff;
padding-top: 0.1rem;
border-radius: 0.04rem;
margin-bottom: 0.2rem;
padding-bottom: 0.4rem;
}
.top-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.2rem;
font-family: 'Alibaba PuHuiTi';
color: #000000;
line-height: 0.34rem;
.photo {
display: inline-block;
height: 0.44rem;
width: 0.44rem;
margin-right: 0.1rem;
}
div {
margin: 0 0.2rem;
padding: 0 0.1rem;
cursor: pointer;
display: flex;
align-items: center;
}
div:hover {
color: #0087ff;
}
.sel {
font-weight: 600;
color: #0087ff;
border-bottom: 0.02rem solid #0087ff;
}
}
.top-content-father {
width: 10.87rem;
padding-left: 0.2rem;
// margin-bottom: .2rem;
background: #f3f5f9;
.top-content-son {
background: #fff;
margin: 0rem 0.2rem 0.2rem 0rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.top-content {
display: flex;
margin-top: 0rem;
span:nth-child(1) {
display: inline-block;
position: relative;
// width: .7rem;
line-height: 0.3614rem;
white-space: normal;
text-align: center;
vertical-align: middle;
}
// .top-content-title {
// top: -0.2rem;
// }
.leixingsumfather {
width: 8.1rem;
display: inline-block;
height: 0.3014rem;
overflow: hidden;
// width: 7.18rem;
}
.leixingsumfather2 {
width: 9.2rem;
}
.leixingsum {
display: inline-block;
cursor: pointer;
text-align: center;
margin-top: 0.05rem;
// margin-bottom: .1rem;
.ant-tag-checkable {
width: 0.83rem;
height: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0.05rem;
padding-right: 0.05rem;
float: left;
margin: 0 0.15rem;
font-family: 'AlibabaPuHuiTiR';
font-size: 0.14rem;
color: #333333;
font-weight: 500;
text-align: center;
line-height: 0.14rem;
}
:deep(.ant-tag-checkable-checked) {
// width: .67rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
text-align: center;
}
.ant-tag-checkable:active,
.ant-tag-checkable-checked {
width: 0.85rem;
font-family: 'Alibaba PuHuiTi';
font-weight: 500;
background-color: #0087ff;
color: #ffffff;
border-radius: 0.16rem;
}
}
.top-content:nth-child(1) {
margin-top: 0rem !important;
}
}
}
}
.shrinkTag {
width: 0.5rem;
display: flex;
justify-content: center;
align-items: flex-end;
margin-bottom: 0.05rem;
span {
cursor: pointer;
}
}
.shrink {
height: unset !important;
overflow: unset !important;
}
.talk-monitor {
position: fixed;
bottom: 0.5rem;
right: 0.1rem;
z-index: 9999;
cursor: pointer;
i {
width: 0.64rem;
height: 0.64rem;
display: inline-block;
background: url('~@/assets/home/icon-talk.png');
background-size: cover;
}
}
.top-content-father {
width: 10.87rem;
padding-left: 0.2rem;
// margin-bottom: .2rem;
.top-content {
display: flex;
margin-top: 0.23rem;
span:nth-child(1) {
display: inline-block;
position: relative;
width: 0.68rem;
font-weight: 600;
white-space: normal;
text-align: center;
vertical-align: middle;
font-size: 0.16rem;
margin-left: 0.3rem;
}
// .top-content-title {
// top: -0.2rem;
// }
.leixingsumfather {
width: 7.7rem;
display: inline-block;
height: 0.3014rem;
overflow: hidden;
// width: 7.18rem;
}
.leixingsum {
width: 0.93rem;
display: inline-block;
cursor: pointer;
text-align: center;
margin-top: 0.05rem;
// margin-bottom: .1rem;
.ant-tag-checkable {
width: 0.85rem;
height: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0.05rem;
padding-right: 0.05rem;
float: left;
margin: 0 0.15rem;
font-family: 'AlibabaPuHuiTiR';
font-size: 0.14rem;
color: #333333;
font-weight: 500;
text-align: center;
line-height: 0.14rem;
}
:deep(.ant-tag-checkable-checked) {
// width: .67rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
text-align: center;
}
.ant-tag-checkable:active,
.ant-tag-checkable-checked {
width: 0.85rem;
font-family: 'Alibaba PuHuiTi';
.active {
font-family: Alibaba PuHuiTi;
font-weight: 500;
background-color: #0087ff;
color: #ffffff;
border-radius: 0.16rem;
}
}
.active {
font-family: Alibaba PuHuiTi;
.top-content:nth-child(1) {
margin-top: 0rem !important;
}
}
}
}
.shrinkTag {
width: 0.5rem;
display: flex;
justify-content: center;
align-items: flex-end;
margin-bottom: 0.05rem;
span {
cursor: pointer;
}
}
.shrink {
height: unset !important;
overflow: unset !important;
}
.talk-monitor {
position: fixed;
bottom: 0.5rem;
right: 0.1rem;
z-index: 9999;
cursor: pointer;
i {
width: 0.64rem;
height: 0.64rem;
display: inline-block;
background: url('~@/assets/home/icon-talk.png');
background-size: cover;
}
}
.top-content-father {
width: 10.87rem;
padding-left: 0.2rem;
// margin-bottom: .2rem;
.top-content {
display: flex;
margin-top: 0.23rem;
span:nth-child(1) {
display: inline-block;
position: relative;
width: 0.68rem;
font-weight: 600;
white-space: normal;
text-align: center;
vertical-align: middle;
font-size: 0.16rem;
margin-left: 0.3rem;
}
// .top-content-title {
// top: -0.2rem;
// }
.leixingsumfather {
width: 7.7rem;
display: inline-block;
height: 0.3014rem;
overflow: hidden;
// width: 7.18rem;
}
.leixingsum {
width: 0.93rem;
display: inline-block;
cursor: pointer;
text-align: center;
margin-top: 0.05rem;
// margin-bottom: .1rem;
.ant-tag-checkable {
width: 0.85rem;
height: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0.05rem;
padding-right: 0.05rem;
float: left;
margin: 0 0.15rem;
font-family: 'AlibabaPuHuiTiR';
font-size: 0.14rem;
color: #333333;
font-weight: 500;
text-align: center;
line-height: 0.14rem;
}
:deep(.ant-tag-checkable-checked) {
// width: .67rem;
margin-left: 0.15rem;
margin-right: 0.15rem;
text-align: center;
}
.ant-tag-checkable:active,
.ant-tag-checkable-checked {
width: 0.85rem;
font-family: 'Alibaba PuHuiTi';
font-weight: 500;
background-color: #0087ff;
color: #ffffff;
border-radius: 0.16rem;
}
}
.top-content:nth-child(1) {
margin-top: 0.41rem !important;
.active {
font-family: Alibaba PuHuiTi;
font-weight: 500;
background-color: #0087ff;
color: #ffffff;
}
}
:deep(.ant-card-grid) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
.top-content:nth-child(1) {
margin-top: 0.41rem !important;
}
}
:deep(.ant-card-grid) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
}
</style>

423
front/src/views/home/infrastructurePage.vue
View File

@ -1,5 +1,422 @@
<!-- 基础设施 -->
<template>
<div>1234567890</div>
<div class="infrastructrueBox">
<!-- 选项卡 -->
<div class="infrastructrue-tab">
<div v-for="(item, index) in tabList" :key="index" class="tabBox">
<b class="leftType">{{ item.title }}</b>
<span
v-for="itemContent in item.content"
:key="itemContent"
@click="tabClick(index, itemContent)"
:class="
clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
"
>
{{ itemContent }}
</span>
</div>
</div>
<!-- 功能行 -->
<div class="infrastructrue-content">
<!-- 表格数据统计 -->
<div class="contentNum">
<p>
备选
<span>{{ dataSource.length }}</span>
个
</p>
<i class="boundary"></i>
<p>
已选
<span>22</span>
个
</p>
</div>
<!-- 右侧 -->
<div class="contentRight">
<!-- 搜索@search="onSearch" -->
<div class="searchInput">
<a-input-search
v-model:value="name"
placeholder="请输入关键词"
enter-button="搜索"
size="large"
@change="onSearch"
/>
<a-button
type="primary"
style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
@click="clean"
>
重置
</a-button>
</div>
<i class="boundary"></i>
<!-- 添加至购物车 -->
<a-button type="primary" @click="addShopCar" class="buttonAdd">
添加至购物车
</a-button>
<!-- 一键申请 -->
<a-button type="primary" @click="apply" class="buttonAdd">
一键申请
</a-button>
</div>
</div>
<!-- 表格 -->
<div class="infrastructrue-table">
<a-table
class="ant-table-striped"
:dataSource="dataSource"
:columns="columns"
:scroll="{ y: 600 }"
:rowClassName="
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
"
:pagination="pagination"
@change="handleTableChange"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
</div>
</div>
</template>
<script></script>
<style lang="less" scoped></style>
<script setup>
import { ref, onCreated } from 'vue'
const tabList = ref([
{
title: '设施类型',
content: ['视频资源', '云资源', '感知资源'],
},
{
title: '视频细分',
content: [
'云主机',
'算力主机',
'对象存储',
'堡垒机',
'防火墙',
'网闸',
'负载均衡',
'公网IP',
],
},
]) //初始化数据
const init = () => {
tabList.value.map((item) => {
let params = {
title: item.title,
content: [],
}
clickList.value.push(params)
})
}
let clickList = ref([]) //存储点击的tab
init()
//tab切换点击事件
const tabClick = (indexFather, name) => {
if (clickList.value[indexFather].content.indexOf(name) != -1) {
// debugger
clickList.value[indexFather].content.splice(
clickList.value[indexFather].content.indexOf(name),
1
)
} else {
// debugger
clickList.value[indexFather].content[0] = name
}
console.log('clickList.value', clickList.value)
// debugger
}
const name = ref('')
// 搜索框
const onSearch = (name) => {
name.value = name
console.log(name.value)
}
// 重置
const clean = () => {
name.value = ''
}
// onCreated(() => {
// })
// onMounted(() => {
// })
// 一键申请
const apply = () => {
console.log('一键申请')
}
// 添加至购物车
const addShopCar = () => {
console.log('添加至购物车')
}
// 表格
const dataSource = ref([
{
key: '1',
name: '沈腾',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '3',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '4',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '5',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '6',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '7',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '8',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '9',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '10',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '11',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '12',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '13',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '14',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '15',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '16',
name: '沈腾',
age: 42,
address: '西湖区湖底公园1号',
},
])
const columns = ref([
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
])
// const selectedRowKeys =
const pagination = ref({
total: 0,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ['5', '15', '30', '45'], //每页中显示的数据
})
const queryParam = ref({
page: 1, //第几页
size: 10, //每页中显示数据的条数
hosName: '',
hosCode: '',
province: '',
city: '',
})
const handleTableChange = (val) => {
pagination.value.current = val.current
pagination.value.pageSize = val.pageSize
this.queryParam.page = val.current
this.queryParam.size = val.pageSize
// this.getTableList()
}
</script>
<style lang="less" scoped>
.infrastructrueBox {
width: 10.87rem;
padding: 0.2rem;
background: #f3f5f9;
.infrastructrue-tab {
background: #ffffff;
padding: 0.2rem;
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
span {
display: inline-block;
height: 0.24rem;
line-height: 0.24rem;
border: 0.01rem solid #cccccc;
border-radius: 0.12rem;
margin-left: 0.1rem;
text-align: center;
color: #666666;
cursor: pointer;
padding: 0 0.08rem;
}
.leftType {
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;
padding: 0;
margin: 0;
span {
color: #0087ff;
font-size: 0.2rem;
font-weight: 500;
}
}
p:first-of-type {
padding-right: 0.16rem;
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);
}
}
.contentRight {
position: relative;
display: flex;
justify-content: space-between;
.boundary {
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;
}
}
}
</style>