AI算法实例画面UI
parent
dcfbb07dc9
commit
a0c1b36d43
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 440 B |
Binary file not shown.
|
After Width: | Height: | Size: 893 B |
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="page-out">
|
||||
<div class="title">
|
||||
<div class="search-div">
|
||||
<a-input class="search-input" v-model:value="instanceName" placeholder="搜索实例名称…">
|
||||
<template #prefix>
|
||||
<div class="search-input-icon"></div>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-select
|
||||
placeholder="请选择算法"
|
||||
class="select-algorithm"
|
||||
v-model:value="instanceAlgorithm"
|
||||
:options="algorithmOptions"
|
||||
/>
|
||||
<a-button class="search-button" type="primary">查询</a-button>
|
||||
</div>
|
||||
<a-button class="add-instance" type="primary" :icon="h(PlusOutlined)" @click="changeAddModal(true)">新建算法实例</a-button>
|
||||
</div>
|
||||
<div class="show-list-div">
|
||||
<div class="show-list">
|
||||
<div class="item-list" v-for="value in 10">
|
||||
<div class="image-div">
|
||||
<img class="image-item" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
|
||||
<div class="image-icon">盖板缺失</div>
|
||||
</div>
|
||||
<div class="show-info-div">
|
||||
<div class="info-title-div">
|
||||
<div class="info-icon"></div>
|
||||
<div class="info-title-inner">
|
||||
<div class="info-title">公路-排水沟盖板确实是识别</div>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<div class="info-subtitle">暂无描述</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>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-raw">
|
||||
<div class="content-label">关联算法</div>
|
||||
<div class="content-value">
|
||||
<div>#高速排水沟盖板缺失检测算法</div>
|
||||
<div>#高速排水沟盖板缺失检测算法</div>
|
||||
<div>#高速排水沟盖板缺失检测算法</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<a-button class="item-del">删除</a-button>
|
||||
<a-button class="item-show" type="primary" @click="showInfoDrawer = true">查看</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-div">
|
||||
<a-pagination
|
||||
size="small"
|
||||
:total="50"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:show-total="total => `共 ${total} 条数据`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal width="853px" v-model:open="addInstanceModal" :footer="false" :closable="false" :destroyOnClose="true" :maskClosable="false" :keyboard="false">
|
||||
<AddInstanceModal @changeAddModal="changeAddModal"/>
|
||||
</a-modal>
|
||||
<a-drawer
|
||||
width="442px"
|
||||
:closable="false"
|
||||
v-model:open="showInfoDrawer"
|
||||
placement="right"
|
||||
rootClassName="instance-show-info-drawer"
|
||||
>
|
||||
<ShowInfoDrawer />
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, h, } from "vue"
|
||||
import { PlusOutlined, } from '@ant-design/icons-vue';
|
||||
import AddInstanceModal from "./AddInstanceModal.vue";
|
||||
import ShowInfoDrawer from "./ShowInfoDrawer.vue";
|
||||
const instanceName = ref('')
|
||||
const instanceAlgorithm = ref()
|
||||
const addInstanceModal = ref(false)
|
||||
const showInfoDrawer = ref(false)
|
||||
const algorithmOptions = ref([
|
||||
{ label: 'aaa', value: 'aaa' },
|
||||
])
|
||||
const changeAddModal = (type: boolean) => {
|
||||
addInstanceModal.value = type
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-out{
|
||||
padding: 16px 30px 53px 17px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title{
|
||||
height: 58px;
|
||||
background: #fff;
|
||||
padding-left: 28px;
|
||||
padding-right: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 17px;
|
||||
.search-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
.search-input{
|
||||
width: 232px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #30384F;
|
||||
margin-right: 13px;
|
||||
.search-input-icon{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url('/public/ailist/search_input_icon.png');
|
||||
}
|
||||
}
|
||||
.select-algorithm{
|
||||
margin-right: 13px;
|
||||
:deep(.ant-select-selector){
|
||||
width: 191px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #30384F;
|
||||
}
|
||||
:deep(.ant-select-selection-placeholder){
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
.search-button{
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
background: #0B60BD;
|
||||
border-radius: 4px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.add-instance{
|
||||
width: 148px;
|
||||
height: 36px;
|
||||
background: #0B60BD;
|
||||
border-radius: 4px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.show-list-div{
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
background: #fff;
|
||||
padding: 26px 26px 0px 26px;
|
||||
|
||||
.show-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 55px;
|
||||
.item-list{
|
||||
width: 300px;
|
||||
height: 291px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 5px 18px 32px 0px rgba(28,29,34,0.1);
|
||||
border-radius: 10px;
|
||||
.image-div{
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
.image-item{
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
.image-icon{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 46px;
|
||||
height: 16px;
|
||||
background: linear-gradient( 320deg, #6C90F5 0%, #3A57E8 100%);
|
||||
border-radius: 8px 0px 8px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
color: #FFFFFF;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
.show-info-div{
|
||||
padding-left: 9px;
|
||||
padding-right: 12px;
|
||||
.info-title-div{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
.info-icon{
|
||||
width: 3px;
|
||||
height: 34px;
|
||||
background: #0B60BD;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.info-title-inner{
|
||||
width: 100%;
|
||||
.info-title{
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #1C1D22;
|
||||
line-height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.info-subtitle{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: rgba(28,29,34,0.5);
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.show-more-info{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
.show-more-span{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #1C1D22;
|
||||
line-height: 15px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.show-more-icon{
|
||||
width: 12px;
|
||||
height: 8px;
|
||||
background-image: url('/public/instance/instance_show_more_icon.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-div{
|
||||
padding-right: 32px;
|
||||
// width: 100%;
|
||||
height: 69px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
border-top: 1px solid rgba(28,29,34,0.08);
|
||||
margin-left: -26px;
|
||||
margin-right: -26px;
|
||||
padding-right: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.instance-show-more-info-popover{
|
||||
.ant-popover-inner{
|
||||
background-color: rgba(5, 5, 5, 0.56);
|
||||
}
|
||||
.show-more-content{
|
||||
width: 232px;
|
||||
.content-raw{
|
||||
display: flex;
|
||||
.content-label{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 17px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.content-value{
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.instance-show-info-drawer{
|
||||
.ant-drawer-body{
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue