修改相册样式和接口联调

frontend/src/renderer/src/services/api.js

@@ -673,6 +673,11 @@ export const historyAPI = {
       return api.get(`/api/detection/data/detail/${id}`)
     },
 
+    //根据主键ID查询检测数据详情
+    getDetectionData(session_id) {
+      return api.get(`/api/detection/${session_id}/get_data`)
+    },
+
     
 }
 

frontend/src/renderer/src/views/Detection.vue

@@ -803,7 +803,7 @@
     </div>
     <div class="pop-up-mask" v-if="isPhotoAlbum">
       <PhotoAlbum @closePhotoAlbum="closePhotoAlbum"
-       :selectedPatient="selectedPatient" v-if="isPhotoAlbum"/>
+       :selectedPatient="patientInfo" v-if="isPhotoAlbum"/>
     </div>
     
     <PatientProfile v-if="historyDialogVisible" 

frontend/src/renderer/src/views/PhotoAlbum.vue

@@ -1,15 +1,16 @@
 <template>
-  <div>
+  <div class="PhotoAlbum-bg">
     <div class="PhotoAlbum-box">
       <div class="PhotoAlbum-header">
-        <div>图片相册</div>
+        <div>相册</div>
         <img src="@/assets/header/closepage.png" alt="" style="cursor: pointer;width: 13px;height: 14px;" 
         @click="handleCancel">
       </div>
       <div class="PhotoAlbum-imgul">
         <el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" style="  display: flex;
             flex-wrap:wrap ;
-            align-content: flex-start;">
+            align-content: flex-start;
+            justify-content: start;">
           <div v-for="(item, index) in useImgList" :key="index"
             class="PhotoAlbum-imgbox">
             <div class="PhotoAlbum-imgactive" @click="clickImg(item,index)">
@@ -25,16 +26,29 @@
           </div>
         </el-checkbox-group>
       </div>
-      <div style="display: flex;justify-content: flex-end;padding-right: 70px;padding-top: 20px;">
+      <div style="display: flex;justify-content: flex-end;padding-right: 58px;padding-top: 20px;">
-        <div class="delButton">
+        <div  
+          :class="checkboxGroup.length  == 0? 'delButton':'delButton-selectedbutotn'" @click="delImgClick">
           <div>删除</div>
         </div>
       </div>
       
     </div>
-    {{ isImageDetails }}
+    <ImageDetails v-if="isImageDetails" :ImageDetailsList="imageList" :selectIndex="selectIndex"
-  <ImageDetails v-if="isImageDetails" :ImageDetailsList="imageList" :selectIndex="selectIndex"
       @closeImageDetails="closeImageDetails"/>
+      <div class="pop-up-mask" v-if="isTip">
+      <div class="pop-up-tip-container">
+        <div class="pop-up-tip-header">
+            <div>提示</div>
+            <img src="@/assets/header/closepage.png" alt="" style="cursor: pointer;" @click="tipCancel">
+        </div>
+        <div class="pop-up-tip-text">确定删除勾选的检测数据吗？</div>
+        <div class="tipconfirmbutton-box">
+          <div class="pop-up-tip-cancelbutton" @click="tipCancel">取消</div> 
+          <el-button type="primary" class="tipconfirmbutton" @click="tipConfirm">确定</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 
 </template>
@@ -45,22 +59,20 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { historyAPI,getBackendUrl } from '@/services/api.js'
 import ImageDetails from '@/views/ImageDetails.vue'
 const emit = defineEmits([ 'closePhotoAlbum']);
+const props = defineProps({
+  selectedPatient: {
+    required: false,
+    type: Object,
+    default: null
+  },
+})
 const BACKEND_URL = getBackendUrl()
+const isTip =ref(false)
 const checkboxGroup = ref([]) // 图片列表选中的数据
 const useImgList = ref([]) // 图片列表数据
-for(let i=0; i<10; i++){
-  useImgList.value.push({
-    id:i
-  })
-}
 const selectIndex = ref(0) // 图片列表选中的索引
 const isImageDetails = ref(false) // 图片详情弹窗
 const imageList = ref([]) // 图片详情数据
-for(let i=0; i<10; i++){
-  imageList.value.push({
-    id:i
-  })
-}
 function closeImageDetails(){ // 关闭图片对比页面
   isImageDetails.value = false
 }
@@ -78,8 +90,92 @@ function getTime(time){ // 时间格式转换
 const handleCancel = () => {
   emit('closePhotoAlbum');
 }
+const delType =ref('video')
+function delImgClick(e){ // 临时方法
+  if(checkboxGroup.value.length < 1){
+    return
+  }
+  delType.value = e
+  isTip.value = true
+}
+
+function tipCancel(){
+  isTip.value = false
+}
+async function tipConfirm(){ 
+  let imgIds = []
+  let videoIds = []
+  checkboxGroup.value.forEach(element => {
+    useImgList.value.forEach(elements => {
+      if(element == elements.id){
+        if(elements.type == 'data'){
+          imgIds.push(elements.id)
+        }
+        if(elements.type == 'videos'){
+          videoIds.push(elements.id)
+        }
+        
+      }
+    });
+  });
+  if(imgIds.length>0){
+    await detectionDelById(imgIds.join(','))
+  }
+  if(videoIds.length>0){
+    await VideoDelById(videoIds.join(','))
+  } 
     
 
+  isTip.value = false
+}
+
+const detectionDelById = async (ids)=>{
+  try {
+    const res = await historyAPI.detectionDelById(ids)
+    if (res && res.success) {
+      getDetectionData()
+    }
+  } catch {}
+}
+
+const VideoDelById = async (ids)=>{
+  try {
+    const res = await historyAPI.VideoDelById(ids)
+    if (res && res.success) {
+      getDetectionData()
+      ElMessage.success('删除成功！')
+    }
+  } catch {}
+}
+
+function getDetectionData(){
+  useImgList.value = []
+  historyAPI.getDetectionData(props.selectedPatient.sessionId).then((response)=>{
+    if(response.success){
+      if(response.data !=null){
+        response.data.forEach(element => {
+          useImgList.value.push({
+            ...element
+          })
+        });
+        imageList.value = response.data
+      }
+      if(response.videos !=null){
+        response.videos.forEach(element => {
+          useImgList.value.push({
+            ...element
+          })
+        });
+      }
+    }
+  }).catch(()=>{
+
+  })
+}
+
+onMounted(() => {
+  getDetectionData()
+})
 </script>
 
 <style>
@@ -117,7 +213,7 @@ const handleCancel = () => {
   height: calc(100% - 160px);
   /* background: red; */
   margin-top: 20px;
-  padding:0px 57px;
+  padding:0px 52px;
   display: flex;
   flex-wrap:wrap ;
   align-content: flex-start;
@@ -127,7 +223,10 @@ const handleCancel = () => {
 .PhotoAlbum-imgbox{
   width: 274px;
   height: 185px;
+  margin:0px 5px ;
   margin-bottom: 5px;
+  cursor: pointer;
+ 
 }
 .PhotoAlbum-imgactive{
   width: 100%;
@@ -138,7 +237,9 @@ const handleCancel = () => {
   border: 2px solid transparent;
   border-radius: 4px;
 }
-
+.PhotoAlbum-imgactive:hover{
+  border: 2px solid #0b94d5;
+}
 .PhotoAlbum-imgtextbox{
   width: 100%;
   height: 30px;
@@ -146,10 +247,10 @@ const handleCancel = () => {
   justify-content: space-between;
   align-items: center;
 }
-.delButton{
+.PhotoAlbum-bg .delButton{
   width: 80px;
   height: 40px;
-  background-color: rgba(89, 113, 148, 1);
+  background-color: rgba(55, 65, 81, 1) ;
   font-family: 'Noto Sans SC', sans-serif;
   font-weight: 400;
   font-style: normal;
@@ -159,5 +260,152 @@ const handleCancel = () => {
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: not-allowed;
 }
+.PhotoAlbum-bg  .delButton-selectedbutotn{
+  background-color: #0b94d5 ;
+  color: rgba(255, 255, 255,1) ;
+  border: 0 ;
+  cursor: pointer;
+  width: 80px;
+  height: 40px;
+  font-family: 'Noto Sans SC', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.PhotoAlbum-bg .delButton-selectedbutotn:hover{
+  background-color: #14aaff;
+}
+
+
+.PhotoAlbum-bg .pop-up-mask{
+  position: fixed;
+  z-index: 199;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.PhotoAlbum-bg .pop-up-tip-container {
+  width: 400px;
+  height:220px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(53, 67, 90, 1) 0%, rgba(53, 67, 90, 1) 0%, rgba(62, 79, 105, 1) 99%, rgba(62, 79, 105, 1) 100%);
+}
+.PhotoAlbum-bg .pop-up-camera-container{
+  width: 608px;
+  height:495px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  background: linear-gradient(135deg, rgb(53, 67, 90) 0%, rgb(53, 67, 90) 0%, rgb(62, 79, 105) 99%, rgb(62, 79, 105) 100%);
+  border-radius: 10px;
+  box-shadow: rgb(17, 24, 33) 0px 0px 10px;
+}
+.PhotoAlbum-bg .pop-up-camera-header{
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 40px;
+  font-family: 'Noto Sans SC';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
+  text-align: left;
+  border-radius:10px 10px 0 0;
+}
+
+
+.PhotoAlbum-bg .pop-up-tip-header{
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 30px;
+  font-family: 'Noto Sans SC';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
+  text-align: left;
+}
+.PhotoAlbum-bg .tipconfirmbutton-box{
+  width:100%;
+  display:flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 30px;
+  padding-top: 10px;
+}
+.PhotoAlbum-bg .tipconfirmbutton{
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: rgb(255, 255, 255);
+  background:#0b94d5;
+  border:1px solid #0b94d5;
+  width: 80px;
+  height: 40px;
+}
+.PhotoAlbum-bg .tipconfirmbutton:hover{
+  background:#14aaff;
+  border:1px solid #14aaff;
+}
+.PhotoAlbum-bg .pop-up-tip-text{
+  width:100%;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: #FFFFFF;
+  text-align: left;
+  height: 80px;
+  box-sizing: border-box;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top:20px ;
+  /* padding:20px 10px 30px; */
+}
+
+.PhotoAlbum-bg .pop-up-tip-cancelbutton{
+  width: 80px;
+  height: 40px;
+  background-color: #597194;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.PhotoAlbum-bg .pop-up-tip-cancelbutton:hover{
+  background-color: #14aaff;
+  color: #fff;
+}
+
 </style>