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,905 @@
|
||||||
|
<template>
|
||||||
|
<div class="title-div">
|
||||||
|
<div class="title-span-div">
|
||||||
|
<div class="title-icon"></div>
|
||||||
|
<div class="title-span">创建算法实例</div>
|
||||||
|
</div>
|
||||||
|
<div class="close-button" @click="emits('changeAddModal',false)"></div>
|
||||||
|
</div>
|
||||||
|
<div class="interval"></div>
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="content-steps-div">
|
||||||
|
<a-steps class="content-steps" :current="instanceSteps" label-placement="vertical" :items="items" />
|
||||||
|
</div>
|
||||||
|
<div class="step0-info-div" v-if="instanceSteps == 0">
|
||||||
|
<div class="left-content">
|
||||||
|
<div class="item-title">实例名称</div>
|
||||||
|
<a-input style="margin-bottom: 12px;" class="item-input" v-model:value="instanceName" placeholder="请输入的字段不得超过20字" />
|
||||||
|
<div class="item-title">设置封面</div>
|
||||||
|
<div class="instance-image-item-div">
|
||||||
|
<div class="default-image-div">
|
||||||
|
<div class="default-image"></div>
|
||||||
|
<div class="default-title-div">默认</div>
|
||||||
|
</div>
|
||||||
|
<div class="select-image-div" @click="changeSelectImageModal(true)">
|
||||||
|
<div class="select-image-icon"></div>
|
||||||
|
<div style="margin-top: 9px;" class="select-image-span">支持JPG、PNG格式</div>
|
||||||
|
<div class="select-image-span">推荐尺寸300*200</div>
|
||||||
|
<div class="select-title-div">本地上传</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-title">显示文案</div>
|
||||||
|
<a-input style="margin-bottom: 17px;" class="item-input" v-model:value="instanceDescription" placeholder="请输入的字段不得超过20字" />
|
||||||
|
</div>
|
||||||
|
<div class="right-content">
|
||||||
|
<div class="item-title">实例描述</div>
|
||||||
|
<a-input style="margin-bottom: 12px;" class="item-input" v-model:value="instanceDescription" placeholder="请输入的字段不得超过200字" />
|
||||||
|
<div class="item-title">显示颜色</div>
|
||||||
|
<div class="select-item-color-div">
|
||||||
|
<div :style="`background: ${item.value}`" class="color-item" v-for="item in colorOptions"></div>
|
||||||
|
</div>
|
||||||
|
<div class="item-title">关联事件</div>
|
||||||
|
<a-select
|
||||||
|
class="item-select"
|
||||||
|
v-model:value="selectEvents"
|
||||||
|
:options="selectEventsOptions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step1-info-div" v-if="instanceSteps == 1">
|
||||||
|
<div class="item-title">AI算法</div>
|
||||||
|
<a-select
|
||||||
|
style="margin-bottom: 6px;"
|
||||||
|
class="item-select item-multiple-select"
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="selectAlgorithm"
|
||||||
|
:options="selectAlgorithmOptions"
|
||||||
|
/>
|
||||||
|
<div style="display: flex;justify-content: space-between;align-items: center;" class="item-title">
|
||||||
|
识别标签
|
||||||
|
<div class="tag-list-button">
|
||||||
|
<div class="select-all-button">全选</div>
|
||||||
|
<div class="clear-button">清空</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tag-show-list-div">
|
||||||
|
<div class="list-title">
|
||||||
|
<div>算法</div>
|
||||||
|
<div>名称</div>
|
||||||
|
<div>枚举值</div>
|
||||||
|
<div>颜色</div>
|
||||||
|
<div>置信度</div>
|
||||||
|
</div>
|
||||||
|
<div class="tag-list-content">
|
||||||
|
<div class="list-item" v-for="value in 10">
|
||||||
|
<a-checkbox class="item-checkbox"></a-checkbox>
|
||||||
|
<div style="width: 72px;margin-right: 60px;" class="item-span">高速排水沟水沟水沟</div>
|
||||||
|
<div style="width: 72px;margin-right: 60px;" class="item-span">高速排水沟水沟水沟</div>
|
||||||
|
<div style="width: 72px;margin-right: 64px;" class="item-span">0</div>
|
||||||
|
<div class="item-color"></div>
|
||||||
|
<div class="item-believe">0.75</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-title">画面识别区域</div>
|
||||||
|
<div class="identify-setting">
|
||||||
|
<div class="identify-setting-item" style="margin-right: 207px;">
|
||||||
|
<div class="item-label">水平方向</div>
|
||||||
|
<div class="item-value">
|
||||||
|
<a-input class="identify-setting-input" />
|
||||||
|
<div class="identify-setting-input-icon">%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="identify-setting-item">
|
||||||
|
<div class="item-label">垂直方向</div>
|
||||||
|
<div class="item-value">
|
||||||
|
<a-input class="identify-setting-input" />
|
||||||
|
<div class="identify-setting-input-icon">%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-title">
|
||||||
|
空间约束
|
||||||
|
<a-switch v-model:checked="spaceConstraints" style="margin-left: 21px;" />
|
||||||
|
</div>
|
||||||
|
<div class="space-constraints-setting">
|
||||||
|
<div class="setting-hint">
|
||||||
|
开启后，识别对象需要在制定区域内才生效，该区域需要在算法实例开启时设置。可用于非法人员闯入，疑似非法盗采等场景。
|
||||||
|
</div>
|
||||||
|
<div class="setting-content" v-if="spaceConstraints">
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="item-label">外扩距离</div>
|
||||||
|
<div class="item-value">
|
||||||
|
<a-input class="setting-input" />
|
||||||
|
<div class="setting-input-icon">米</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-title">
|
||||||
|
时间约束
|
||||||
|
<a-switch v-model:checked="timeConstraints" style="margin-left: 21px;" />
|
||||||
|
</div>
|
||||||
|
<div class="time-constraints-setting">
|
||||||
|
<div class="setting-hint">开启后，仅在设置时间内开启AI识别。</div>
|
||||||
|
<div class="setting-content">
|
||||||
|
<div class="time-constraints-setting-item">
|
||||||
|
<div class="time-constraints-item-label">有效时段</div>
|
||||||
|
<div style="margin-right: 16px;" class="time-constraints-item-value">
|
||||||
|
<a-time-picker :bordered="false" placeholder="开始时间"/>
|
||||||
|
</div>
|
||||||
|
<div style="margin-right: 13px;display: flex;align-items: center;">-</div>
|
||||||
|
<div class="time-constraints-item-value">
|
||||||
|
<a-time-picker :bordered="false" placeholder="结束时间"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step2-info-div" v-if="instanceSteps == 2">
|
||||||
|
<div class="step2-title">飞行速度</div>
|
||||||
|
<div class="step2-setting-div">
|
||||||
|
<div class="step2-hint">取值范围：1m/s-20m/s,飞行速度过快会导致画面模糊，无法识别到对象。</div>
|
||||||
|
<div class="step2-setting-content">
|
||||||
|
<div class="step2-input-div step2-first-input">
|
||||||
|
<a-input class="step2-input"/>
|
||||||
|
<div class="step2-input-icon">m/s</div>
|
||||||
|
</div>
|
||||||
|
<div class="step2-input-interval">-</div>
|
||||||
|
<div class="step2-input-div">
|
||||||
|
<a-input class="step2-input"/>
|
||||||
|
<div class="step2-input-icon">m/s</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step2-title">云台俯仰角</div>
|
||||||
|
<div class="step2-setting-div">
|
||||||
|
<div class="step2-hint">取值范围：0～-90°，俯仰角决定对象在画面中的角度。</div>
|
||||||
|
<div class="step2-setting-content">
|
||||||
|
<div class="step2-input-div step2-first-input">
|
||||||
|
<a-input class="step2-input"/>
|
||||||
|
<div class="step2-input-icon">°</div>
|
||||||
|
</div>
|
||||||
|
<div class="step2-input-interval">-</div>
|
||||||
|
<div class="step2-input-div">
|
||||||
|
<a-input class="step2-input"/>
|
||||||
|
<div class="step2-input-icon">°</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="step2-title">识别对象画面占比</div>
|
||||||
|
<div class="step2-setting-div">
|
||||||
|
<div class="step2-hint">识别对象画面占比比例直接影响识别的准确率，实际需要
|
||||||
|
结合航高、变焦倍率保证识别对象在画面中的占比。</div>
|
||||||
|
<div class="step2-setting-content">
|
||||||
|
<div class="step2-input-div step2-first-input">
|
||||||
|
<a-input class="step2-input"/>
|
||||||
|
<div class="step2-input-icon">%</div>
|
||||||
|
</div>
|
||||||
|
<div class="step2-input-interval">-</div>
|
||||||
|
<div class="step2-input-div">
|
||||||
|
<a-input class="step2-input"/>
|
||||||
|
<div class="step2-input-icon">%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="interval"></div>
|
||||||
|
<div class="footer-div">
|
||||||
|
<a-button class="cancel-button" @click="emits('changeAddModal',false)">取消</a-button>
|
||||||
|
<a-button v-if="instanceSteps != 0" style="margin-right: 14px;" type="primary" class="next-button" @click="last">上一步</a-button>
|
||||||
|
<a-button v-if="instanceSteps != 2" type="primary" class="next-button" @click="next">下一步</a-button>
|
||||||
|
<a-button v-if="instanceSteps == 2" type="primary" class="next-button" @click="submit">确定</a-button>
|
||||||
|
</div>
|
||||||
|
<a-modal v-model:open="selectImageModal" title="选择封面" width="1000px" :footer="null" :destroyOnClose="true">
|
||||||
|
<SelectImageModal @changeSelectImageModal="changeSelectImageModal"/>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, h, defineEmits, defineProps } from "vue"
|
||||||
|
import SelectImageModal from "@/views/demo/resourcemanagement/ailist/SelectImageModal.vue";
|
||||||
|
const emits = defineEmits(['changeAddModal'])
|
||||||
|
const instanceSteps = ref(0)
|
||||||
|
const instanceName = ref('')
|
||||||
|
const instanceDescription = ref('')
|
||||||
|
const selectEvents = ref('')
|
||||||
|
const selectAlgorithm = ref()
|
||||||
|
const spaceConstraints = ref(false)
|
||||||
|
const timeConstraints = ref(false)
|
||||||
|
const selectImageModal = ref(false)
|
||||||
|
const selectEventsOptions = ref([
|
||||||
|
{ label: 'aaa', value: 'aaa' }
|
||||||
|
])
|
||||||
|
const selectAlgorithmOptions = ref([
|
||||||
|
{ label: 'bbb', value: 'bbb' },
|
||||||
|
{ label: 'ccc', value: 'ccc' }
|
||||||
|
])
|
||||||
|
const items = ref([
|
||||||
|
{ title: '基础信息', },
|
||||||
|
{ title: '配置算法', },
|
||||||
|
{ title: '航飞要求', },
|
||||||
|
]);
|
||||||
|
const colorOptions = ref([
|
||||||
|
{ value: '#1951E0' },
|
||||||
|
{ value: '#EB8588' },
|
||||||
|
{ value: '#E9A7FA' },
|
||||||
|
{ value: '#20B0DC' },
|
||||||
|
{ value: '#ADE1FB' },
|
||||||
|
{ value: '#98E5B4' },
|
||||||
|
{ value: '#3ECE40' },
|
||||||
|
{ value: '#DFE546' },
|
||||||
|
{ value: '#FEA352' },
|
||||||
|
{ value: '#E82FB7' },
|
||||||
|
{ value: '#E96755' },
|
||||||
|
{ value: '#085758' },
|
||||||
|
{ value: '#0099A0' },
|
||||||
|
{ value: '#BEEDD8' },
|
||||||
|
{ value: '#FEEF30' },
|
||||||
|
{ value: '#82D4E5' },
|
||||||
|
{ value: '#8B87BF' },
|
||||||
|
{ value: '#D9ADBB' },
|
||||||
|
{ value: '#EAB869' },
|
||||||
|
{ value: '#CED58E' },
|
||||||
|
{ value: '#8DADB6' },
|
||||||
|
])
|
||||||
|
const next = () => {
|
||||||
|
instanceSteps.value ++
|
||||||
|
}
|
||||||
|
const last = () => {
|
||||||
|
instanceSteps.value --
|
||||||
|
}
|
||||||
|
const submit = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
const changeSelectImageModal = (type: boolean) => {
|
||||||
|
selectImageModal.value = type
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title-div{
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-left: 26px;
|
||||||
|
padding-right: 35px;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.title-span-div{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.title-icon{
|
||||||
|
width: 3px;
|
||||||
|
height: 18px;
|
||||||
|
background: #0B60BD;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
.title-span{
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #11131B;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.close-button{
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-image: url('/public/ailist/add_algorithm_close_button.png');
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.interval{
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border: 1px solid #DBDBDB;
|
||||||
|
opacity: 0.66;
|
||||||
|
}
|
||||||
|
.modal-content{
|
||||||
|
padding-top: 33px;
|
||||||
|
// padding-left: 50px;
|
||||||
|
// padding-right: 50px;
|
||||||
|
.item-title{
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
margin-bottom: 9px;
|
||||||
|
.tag-list-button{
|
||||||
|
display: flex;
|
||||||
|
.select-all-button{
|
||||||
|
width: 66px;
|
||||||
|
height: 26px;
|
||||||
|
background: #0D68CB;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border: 1px solid #0D68CB;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 13px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
.clear-button{
|
||||||
|
width: 66px;
|
||||||
|
height: 26px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border: 1px solid #0D68CB;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #0D68CB;
|
||||||
|
// line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 13px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-input{
|
||||||
|
height: 40px;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
}
|
||||||
|
.item-select{
|
||||||
|
width: 100%;
|
||||||
|
:deep(.ant-select-selector){
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
}
|
||||||
|
:deep(.ant-select-selection-item){
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-multiple-select{
|
||||||
|
:deep(.ant-select-selection-item){
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-steps-div{
|
||||||
|
padding: 0px 28px;
|
||||||
|
margin-bottom: 31px;
|
||||||
|
.content-steps{
|
||||||
|
:deep(.ant-steps-item-icon){
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
:deep(.ant-steps-icon){
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 24px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
:deep(.ant-steps-item-title){
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #191919;
|
||||||
|
line-height: 18px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
:deep(.ant-steps-item-active){
|
||||||
|
.ant-steps-item-title{
|
||||||
|
color: #0D68CB;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step0-info-div{
|
||||||
|
padding-left: 28px;
|
||||||
|
display: flex;
|
||||||
|
.left-content{
|
||||||
|
width: 366px;
|
||||||
|
margin-right: 39px;
|
||||||
|
.instance-image-item-div{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 155px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
.default-image-div{
|
||||||
|
position: relative;
|
||||||
|
width: 173px;
|
||||||
|
height: 155px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border: 2px dashed rgba(28,29,34,0.08);
|
||||||
|
margin-right: 19px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.default-image{
|
||||||
|
width: 116px;
|
||||||
|
height: 116px;
|
||||||
|
background-image: url('/public/instance/instance_default_image.png');
|
||||||
|
}
|
||||||
|
.default-title-div{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
background: rgb(0, 0, 0, 0.75);
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border-radius: 0px 0px 2px 2px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select-image-div{
|
||||||
|
position: relative;
|
||||||
|
width: 173px;
|
||||||
|
height: 155px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border: 2px dashed rgba(28,29,34,0.08);
|
||||||
|
padding-top: 26px;
|
||||||
|
cursor: pointer;
|
||||||
|
.select-image-icon{
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background-image: url('/public/instance/instance_upload_image.png');
|
||||||
|
// margin-bottom: 9px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.select-image-span{
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 17px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.select-title-div{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
background: rgb(0, 0, 0, 0.75);
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border-radius: 0px 0px 2px 2px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-content{
|
||||||
|
width: 366px;
|
||||||
|
.select-item-color-div{
|
||||||
|
height: 79px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 15px 25px 14px 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
.color-item{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: #1951E0;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(0,0,0,0.06);
|
||||||
|
// border: 1px solid #FFFFFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step1-info-div{
|
||||||
|
padding-left: 90px;
|
||||||
|
padding-right: 88px;
|
||||||
|
.tag-show-list-div{
|
||||||
|
height: 139px;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
.list-title{
|
||||||
|
height: 41px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
// box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
// border-radius: 2px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
padding-left: 41px;
|
||||||
|
padding-right: 67px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid rgb(219, 219, 219);
|
||||||
|
}
|
||||||
|
.tag-list-content{
|
||||||
|
height: calc(100% - 41px);
|
||||||
|
overflow: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
::-webkit-scrollbar{
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.list-item{
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid rgb(219, 219, 219);
|
||||||
|
padding-left: 12px;
|
||||||
|
.item-checkbox{
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
.item-span{
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0,0,0,0.9);
|
||||||
|
line-height: 20px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.item-color{
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
background: #1951E0;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: 67px;
|
||||||
|
}
|
||||||
|
.item-believe{
|
||||||
|
width: 106px;
|
||||||
|
height: 27px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), inset 0px 1px 3px 0px rgba(0,0,0,0.17);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1C1D22;
|
||||||
|
line-height: 17px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.identify-setting{
|
||||||
|
height: 50px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding-left: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
.identify-setting-item{
|
||||||
|
display: flex;
|
||||||
|
.item-label{
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
margin-right: 13px;
|
||||||
|
}
|
||||||
|
.item-value{
|
||||||
|
width: 123px;
|
||||||
|
height: 34px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border-radius: 2px 0px 0px 2px;
|
||||||
|
display: flex;
|
||||||
|
.identify-setting-input{
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
height: 100%;
|
||||||
|
border: 0PX;
|
||||||
|
box-shadow: none;
|
||||||
|
font-family: Bebas;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
.identify-setting-input-icon{
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.space-constraints-setting{
|
||||||
|
height: 83px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding-left: 12px;
|
||||||
|
padding-right: 12px;
|
||||||
|
// padding-top: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
.setting-hint{
|
||||||
|
flex: 1;
|
||||||
|
height: 56px;
|
||||||
|
background: #EEF5FC;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(0,0,0,0.06);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #0D68CB;
|
||||||
|
line-height: 20px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
.setting-content{
|
||||||
|
width: 250px;
|
||||||
|
height: 34px;
|
||||||
|
padding-left: 50px;
|
||||||
|
.setting-item{
|
||||||
|
display: flex;
|
||||||
|
.item-label{
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
margin-right: 13px;
|
||||||
|
}
|
||||||
|
.item-value{
|
||||||
|
width: 123px;
|
||||||
|
height: 34px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border-radius: 2px 0px 0px 2px;
|
||||||
|
display: flex;
|
||||||
|
.setting-input{
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
height: 100%;
|
||||||
|
border: 0PX;
|
||||||
|
box-shadow: none;
|
||||||
|
font-family: Bebas;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
.setting-input-icon{
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time-constraints-setting{
|
||||||
|
height: 83px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 38px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
.setting-hint{
|
||||||
|
width: 241px;
|
||||||
|
height: 56px;
|
||||||
|
background: #EEF5FC;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(0,0,0,0.06);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-left: 13px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #0D68CB;
|
||||||
|
line-height: 20px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
margin-right: 39px;
|
||||||
|
}
|
||||||
|
.setting-content{
|
||||||
|
height: 34px;
|
||||||
|
.time-constraints-setting-item{
|
||||||
|
display: flex;
|
||||||
|
.time-constraints-item-label{
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
margin-right: 13px;
|
||||||
|
}
|
||||||
|
.time-constraints-item-value{
|
||||||
|
width: 123px;
|
||||||
|
height: 34px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border-radius: 2px 0px 0px 2px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step2-info-div{
|
||||||
|
padding: 0px 89px;
|
||||||
|
margin-bottom: 58px;
|
||||||
|
.step2-title{
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
// text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.step2-setting-div{
|
||||||
|
height: 83px;
|
||||||
|
background: #F5F5F5;
|
||||||
|
padding-left: 13px;
|
||||||
|
// box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
.step2-hint{
|
||||||
|
width: 325px;
|
||||||
|
height: 56px;
|
||||||
|
background: #EEF5FC;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(0,0,0,0.06);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 6px;
|
||||||
|
padding-top: 8px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #0D68CB;
|
||||||
|
line-height: 20px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
margin-right: 36px;
|
||||||
|
}
|
||||||
|
.step2-setting-content{
|
||||||
|
height: 34px;
|
||||||
|
display: flex;
|
||||||
|
.step2-input-div{
|
||||||
|
display: flex;
|
||||||
|
width: 123px;
|
||||||
|
height: 34px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 8px 6px 0px rgba(28,29,34,0.06);
|
||||||
|
border-radius: 2px 0px 0px 2px;
|
||||||
|
.step2-input{
|
||||||
|
border: 0px;
|
||||||
|
box-shadow: none;
|
||||||
|
height: 100%;
|
||||||
|
width: calc(100% - 33px);
|
||||||
|
font-family: Bebas;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
.step2-input-icon{
|
||||||
|
width: 23px;
|
||||||
|
text-align: right;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step2-first-input{
|
||||||
|
margin-right: 11px;
|
||||||
|
}
|
||||||
|
.step2-input-interval{
|
||||||
|
margin-right: 11px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-div{
|
||||||
|
height: 86px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
|
padding-right: 27px;
|
||||||
|
.cancel-button{
|
||||||
|
width: 101px;
|
||||||
|
height: 40px;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #979797;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #222738;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
.next-button{
|
||||||
|
width: 146px;
|
||||||
|
height: 40px;
|
||||||
|
background: #0D68CB;
|
||||||
|
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 33px;
|
||||||
|
text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
<template>
|
||||||
|
<div class="drawer-title">
|
||||||
|
<div class="title-content">
|
||||||
|
<div class="title-icon"></div>
|
||||||
|
<div class="title-span">算法实例详情</div>
|
||||||
|
</div>
|
||||||
|
<div class="title-tools-div">
|
||||||
|
<EditOutlined style="font-size: 19px;margin-right: 19px;"/>
|
||||||
|
<div class="button-interval"></div>
|
||||||
|
<CloseOutlined style="font-size: 19px;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="drawer-content">
|
||||||
|
<img class="content-image" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
|
||||||
|
<div class="content-item-name">
|
||||||
|
<div class="item-name-label">实例名称</div>
|
||||||
|
<div class="item-name-value">公路-隔离栏破损识别</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item-description">
|
||||||
|
<div class="item-description-label">描述</div>
|
||||||
|
<div class="item-description-value">暂无描述</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-interval"></div>
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="item-label">显示内容</div>
|
||||||
|
<div class="item-value">破损隔离栏</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="item-label">关联事件</div>
|
||||||
|
<div class="item-value">-</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="item-label">AI算法</div>
|
||||||
|
<div class="item-value">高速隔离栏破损检测算法</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-interval"></div>
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="item-label" style="margin-right: 0px;width: 101px;">画面识别区域</div>
|
||||||
|
<div class="item-value" style="padding-left: 22px;">水平方向：100% 垂直方向：100%</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="item-label">空间约束</div>
|
||||||
|
<div class="item-value">关闭</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="item-label">时间约束</div>
|
||||||
|
<div class="item-value">关闭</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="item-label">航飞要求</div>
|
||||||
|
<div class="item-value">
|
||||||
|
<div>飞行速度：3m/s~15m/s</div>
|
||||||
|
<div>云台俯仰角：-30°～-90°</div>
|
||||||
|
<div>对象画面对比：5%～10%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {} from "vue"
|
||||||
|
import { EditOutlined, CloseOutlined } from '@ant-design/icons-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.drawer-title{
|
||||||
|
width: 100%;
|
||||||
|
height: 63px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 29px;
|
||||||
|
padding-right: 30px;
|
||||||
|
border-bottom: 1px solid #E7E7E7;
|
||||||
|
.title-content{
|
||||||
|
display: flex;
|
||||||
|
height: 34px;
|
||||||
|
align-items: center;
|
||||||
|
.title-icon{
|
||||||
|
width: 3px;
|
||||||
|
height: 18px;
|
||||||
|
background: #0B60BD;
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
.title-span{
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #11131B;
|
||||||
|
line-height: 33px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title-tools-div{
|
||||||
|
display: flex;
|
||||||
|
height: 19px;
|
||||||
|
align-items: center;
|
||||||
|
.button-interval{
|
||||||
|
width: 1px;
|
||||||
|
height: 18px;
|
||||||
|
background: #E7E7E7;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.drawer-content{
|
||||||
|
padding: 30px;
|
||||||
|
.content-image{
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.content-item-name{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
.item-name-label{
|
||||||
|
width: 68px;
|
||||||
|
height: 26px;
|
||||||
|
background: #0B60BD;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-right: 21px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 7px;
|
||||||
|
}
|
||||||
|
.item-name-value{
|
||||||
|
width: 294px;
|
||||||
|
height: 27px;
|
||||||
|
background: rgba(216, 216, 216, 0.34);
|
||||||
|
padding-left: 28px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1C1D22;
|
||||||
|
line-height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-item-description{
|
||||||
|
display: flex;
|
||||||
|
// margin-bottom: 18px;
|
||||||
|
.item-description-label{
|
||||||
|
width: 68px;
|
||||||
|
height: 26px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8D8E90;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-right: 21px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 7px;
|
||||||
|
}
|
||||||
|
.item-description-value{
|
||||||
|
width: 294px;
|
||||||
|
height: 27px;
|
||||||
|
// background: rgba(216, 216, 216, 0.34);
|
||||||
|
padding-left: 28px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1C1D22;
|
||||||
|
line-height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-item{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
.item-label{
|
||||||
|
width: 68px;
|
||||||
|
height: 26px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8D8E90;
|
||||||
|
background: #f0f0f0;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-right: 21px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 7px;
|
||||||
|
}
|
||||||
|
.item-value{
|
||||||
|
width: 294px;
|
||||||
|
height: 27px;
|
||||||
|
// background: rgba(216, 216, 216, 0.34);
|
||||||
|
padding-left: 28px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1C1D22;
|
||||||
|
line-height: 27px;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-interval{
|
||||||
|
width: 100;
|
||||||
|
height: 1px;
|
||||||
|
background: #E7E7E7;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -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