|
|
|
@ -31,37 +31,29 @@
|
|
|
|
|
<div class="info-title-inner">
|
|
|
|
|
<div class="info-title">{{ item.name }}</div>
|
|
|
|
|
<div style="display: flex;justify-content: space-between;">
|
|
|
|
|
<div class="info-subtitle">{{ item.description }}</div>
|
|
|
|
|
<a-popover overlayClassName="instance-show-more-info-popover" trigger="click" placement="topRight">
|
|
|
|
|
<template #content>
|
|
|
|
|
<div class="show-more-content">
|
|
|
|
|
<div class="content-raw">
|
|
|
|
|
<div class="content-label">关联事件</div>
|
|
|
|
|
<div class="content-value">
|
|
|
|
|
<div>-</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-raw">
|
|
|
|
|
<div class="content-label">关联算法</div>
|
|
|
|
|
<div class="content-value">
|
|
|
|
|
<div v-for="algoName in item.algoNames">{{ `#${algoName}` }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="show-more-info">
|
|
|
|
|
<div class="show-more-span">展开更多</div>
|
|
|
|
|
<div class="show-more-icon"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-popover>
|
|
|
|
|
<div class="info-subtitle">{{ item.description? item.description: '暂无描述' }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-content-div">
|
|
|
|
|
<div class="content-div">
|
|
|
|
|
<div class="content-title-div">关联算法</div>
|
|
|
|
|
<div class="content-info" v-html="getContentStr(item.algoNames)"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<div style="margin-bottom: 13px;">
|
|
|
|
|
<a-button class="delete-button" @click="delData(item)">删除</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<a-button class="show-info-button" type="primary" @click="showInfo(item)">查看</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-footer">
|
|
|
|
|
<!-- <div class="item-footer">
|
|
|
|
|
<a-button class="item-del" @click="delData(item)">删除</a-button>
|
|
|
|
|
<a-button class="item-show" type="primary" @click="showInfo(item)">查看</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pagination-div">
|
|
|
|
@ -172,6 +164,7 @@ const delData = (item) => {
|
|
|
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
|
|
|
okText: '确认',
|
|
|
|
|
cancelText: '取消',
|
|
|
|
|
centered: true,
|
|
|
|
|
onOk() {
|
|
|
|
|
return DeleteAlgoInstance({id: item.id}).then(res => {
|
|
|
|
|
message.success("删除成功")
|
|
|
|
@ -180,11 +173,14 @@ const delData = (item) => {
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
const getContentStr = (list: string[]) => {
|
|
|
|
|
return list.map( item => `#${item}`).join('<br/>')
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.page-out{
|
|
|
|
|
padding: 16px 30px 53px 17px;
|
|
|
|
|
padding: 16px 30px 33px 17px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh - 80px);
|
|
|
|
|
.title{
|
|
|
|
@ -264,7 +260,7 @@ const delData = (item) => {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
padding-bottom: 55px;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
::-webkit-scrollbar{
|
|
|
|
@ -273,7 +269,7 @@ const delData = (item) => {
|
|
|
|
|
}
|
|
|
|
|
.item-list{
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 291px;
|
|
|
|
|
height: 321px;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
box-shadow: 5px 18px 32px 0px rgba(28,29,34,0.1);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
@ -323,7 +319,7 @@ const delData = (item) => {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.info-title-inner{
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: calc(100% - 8px);
|
|
|
|
|
.info-title{
|
|
|
|
|
font-family: PingFangSC-Medium;
|
|
|
|
|
font-weight: 500;
|
|
|
|
@ -331,6 +327,9 @@ const delData = (item) => {
|
|
|
|
|
color: #1C1D22;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.info-subtitle{
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
@ -338,6 +337,9 @@ const delData = (item) => {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: rgba(28,29,34,0.5);
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.show-more-info{
|
|
|
|
@ -362,64 +364,131 @@ const delData = (item) => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.info-content-div{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 66px;
|
|
|
|
|
background-image: url('/public/instance/instance_list_item_info_content.png');
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
margin-bottom: 13px;
|
|
|
|
|
.content-raw{
|
|
|
|
|
display: flex;
|
|
|
|
|
.content-label{
|
|
|
|
|
display: flex;
|
|
|
|
|
.content-div{
|
|
|
|
|
width: 200px;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
padding-top: 8px;
|
|
|
|
|
border-top: 1px dashed rgba(151, 151, 151, 0.37);
|
|
|
|
|
margin-right: 27px;
|
|
|
|
|
.content-title-div{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 47px;
|
|
|
|
|
height: 19px;
|
|
|
|
|
background: rgba(216, 216, 216,0.34);
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #1C1D22;
|
|
|
|
|
line-height: 17px;
|
|
|
|
|
margin-right: 11px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
}
|
|
|
|
|
.content-value{
|
|
|
|
|
font-family: PingFangSC-Medium;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
.content-info{
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #1C1D22;
|
|
|
|
|
line-height: 17px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.button-div{
|
|
|
|
|
.delete-button{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 54px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid #F2F2F2;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #E3150E;
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
}
|
|
|
|
|
.show-info-button{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 54px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
background: #0B60BD;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid #0B60BD;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// .info-content-div{
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// height: 66px;
|
|
|
|
|
// background-image: url('/public/instance/instance_list_item_info_content.png');
|
|
|
|
|
// padding-top: 8px;
|
|
|
|
|
// padding-left: 12px;
|
|
|
|
|
// margin-bottom: 13px;
|
|
|
|
|
// .content-raw{
|
|
|
|
|
// display: flex;
|
|
|
|
|
// .content-label{
|
|
|
|
|
// font-family: PingFangSC-Regular;
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
// font-size: 12px;
|
|
|
|
|
// color: #1C1D22;
|
|
|
|
|
// line-height: 17px;
|
|
|
|
|
// margin-right: 11px;
|
|
|
|
|
// }
|
|
|
|
|
// .content-value{
|
|
|
|
|
// font-family: PingFangSC-Medium;
|
|
|
|
|
// font-weight: 500;
|
|
|
|
|
// font-size: 12px;
|
|
|
|
|
// color: #1C1D22;
|
|
|
|
|
// line-height: 17px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
.item-footer{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 23px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: end;
|
|
|
|
|
padding-right: 12px;
|
|
|
|
|
.item-del{
|
|
|
|
|
width: 54px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid #F2F2F2;
|
|
|
|
|
margin-right: 7px;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #E3150E;
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
}
|
|
|
|
|
.item-show{
|
|
|
|
|
width: 54px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
background: #0B60BD;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid #0B60BD;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// .item-footer{
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// height: 23px;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// justify-content: end;
|
|
|
|
|
// padding-right: 12px;
|
|
|
|
|
// .item-del{
|
|
|
|
|
// width: 54px;
|
|
|
|
|
// height: 23px;
|
|
|
|
|
// border-radius: 2px;
|
|
|
|
|
// border: 1px solid #F2F2F2;
|
|
|
|
|
// margin-right: 7px;
|
|
|
|
|
// font-family: PingFangSC-Regular;
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
// font-size: 11px;
|
|
|
|
|
// color: #E3150E;
|
|
|
|
|
// line-height: 15px;
|
|
|
|
|
// }
|
|
|
|
|
// .item-show{
|
|
|
|
|
// width: 54px;
|
|
|
|
|
// height: 23px;
|
|
|
|
|
// background: #0B60BD;
|
|
|
|
|
// border-radius: 2px;
|
|
|
|
|
// border: 1px solid #0B60BD;
|
|
|
|
|
// font-family: PingFangSC-Regular;
|
|
|
|
|
// font-weight: 400;
|
|
|
|
|
// font-size: 11px;
|
|
|
|
|
// color: #FFFFFF;
|
|
|
|
|
// line-height: 15px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pagination-div{
|
|
|
|
|