刘妍 1 week ago
commit 06f2473f6d

@ -13,7 +13,7 @@
<div class="show-list-div">
<div :class="`list-item-outer ${selectItemId == item.id?'list-item-outer-select' : ''}`" v-for="(item,index) in dataList" >
<div class="list-item-inner">
<img class="item-image" :src="`${VITE_GLOB_API_URL}/${item.cover}`" >
<img class="item-image" :src="`${item.cover}`" >
<div class="item-info-div">
<div class="item-confidence">
<div class="confidence-icon"></div>

@ -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{

@ -319,39 +319,39 @@
checkedDronePort: {
type: Object,
},
formData: {
type: Object,
default: () => ({
id: null,
taskName: null,
taskType: 0,
taskAirLineName: null,
taskDronePortName: null,
taskDronePort: null,
taskAirLine: null,
returnAltitude: 20,
lossOfControlAction: 1,
continuationMode: 0,
aiInspection: null,
status: 0,
periodicFormula: null,
airLineId: null,
createId: 0,
createTime: '',
waylinePrecisionType: 0,
scheduledStartTime: '',
scheduledEndTime: '',
executeTime: '',
completedTime: '',
planExecuteDuration: 0,
actualExecuteDuration: 0,
workspaceId: null,
expectedFileCount: 0,
uploadedFileCount: 0,
flightId: null,
reason: null,
externalTaskId: '0959e6bf-918f-4465-9708-d2da2cd3fcf3',
}),
"formData":{
type:Object,
default: ()=>({
"id": null,
"taskName": null,
"taskType": 0,
"taskAirLineName": null,
"taskDronePortName": null,
"taskDronePort": null,
"taskAirLine": null,
"returnAltitude": 20,
"lossOfControlAction": 1,
"continuationMode": 0,
"aiInspection": null,
"status": 0,
"periodicFormula": null,
"airLineId": null,
"createId": 0,
"createTime": "",
"waylinePrecisionType": 0,
"scheduledStartTime": "",
"scheduledEndTime": "",
"executeTime": "",
"completedTime": "",
"planExecuteDuration": 0,
"actualExecuteDuration": 0,
"workspaceId": null,
"expectedFileCount": 0,
"uploadedFileCount": 0,
"flightId": null,
"reason": null,
"externalTaskId": null
})
},
editMode: {
type: String,
@ -392,7 +392,7 @@
uploadedFileCount: 0,
flightId: null,
reason: null,
externalTaskId: '0959e6bf-918f-4465-9708-d2da2cd3fcf3',
externalTaskId: null,
});
// workspace
@ -541,44 +541,47 @@
submitForm.value = props.formData;
}
watch(
() => props.formData,
(newVal, oldVal) => {
if (newVal) {
submitForm.value = newVal;
} else {
submitForm.value = {
id: null,
taskName: null,
taskType: 0,
taskAirLineName: null,
taskDronePortName: null,
taskDronePort: null,
taskAirLine: null,
returnAltitude: 20,
lossOfControlAction: 1,
continuationMode: 0,
aiInspection: null,
status: 0,
periodicFormula: null,
airLineId: null,
createId: 0,
createTime: '',
waylinePrecisionType: 0,
scheduledStartTime: '',
scheduledEndTime: '',
executeTime: '',
completedTime: '',
planExecuteDuration: 0,
actualExecuteDuration: 0,
workspaceId: null,
expectedFileCount: 0,
uploadedFileCount: 0,
flightId: null,
reason: null,
externalTaskId: '0959e6bf-918f-4465-9708-d2da2cd3fcf3',
};
}
watch(
()=> props.formData,
(newVal,oldVal)=>{
if(newVal){
submitForm.value = newVal;
}else{
submitForm.value = {
"id": null,
"taskName": null,
"taskType": 0,
"taskAirLineName": null,
"taskDronePortName": null,
"taskDronePort": null,
"taskAirLine": null,
"returnAltitude": 20,
"lossOfControlAction": 1,
"continuationMode": 0,
"aiInspection": null,
"status": 0,
"periodicFormula": null,
"airLineId": null,
"createId": 0,
"createTime": "",
"waylinePrecisionType": 0,
"scheduledStartTime": "",
"scheduledEndTime": "",
"executeTime": "",
"completedTime": "",
"planExecuteDuration": 0,
"actualExecuteDuration": 0,
"workspaceId": null,
"expectedFileCount": 0,
"uploadedFileCount": 0,
"flightId": null,
"reason": null,
"externalTaskId": null
}
}
},
{
deep: true,

Loading…
Cancel
Save