BodyBalanceEvaluation/frontend/src/renderer/src/views/SelectData.vue

<template>
  <div class="pop-up-mask">
    <div class="selectdata-box">
      <div class="selectdata-header">
        <div>选择数据</div>
        <img src="@/assets/header/closepage.png" alt="" style="cursor: pointer;" @click="cancel(false)">
      </div>
      <div class="selectdata-imgbgbox">
        <el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" >
          <div v-for="(item, index) in useImgList" :key="index"
            class="selectdata-imgbox" >
            <div class="selectdata-imgactive" @click.stop="selectImg(item,index)">
              <!-- <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;"> -->
              <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;">
            </div>
            <div class="selectdata-imgtextbox" @click.stop="selectCheckbox(item)">
              <el-checkbox  
                :value="item.id" size="large" style="display:flex; align-items: center; justify-content: space-between">
                <div>{{ item.id }}</div>
                <span>{{ item.timestamp }}</span>
              </el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div style="display: flex;justify-content: flex-end; margin-top: 35px;">
        <div class="selectdata-cancelbutton" @click="cancel(false)">取消</div>
        <div class="selectdata-confirmbutton" @click="cancel(true)">确定</div>
      </div>
    </div>
    <ImageDetails v-if="isImageDetails" :ImageDetailsList="useImgList" :selectIndex="selectIndex"
    @closeImageDetails="closeImageDetails"/>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import ImageDetails from '@/views/ImageDetails.vue'
import { historyAPI,getBackendUrl } from '@/services/api.js'

const emit = defineEmits([ 'closeSelectData' ]);
const props = defineProps({
  imageList: {
    required: false,
    type: Object,
    default: null
  },
})
const BACKEND_URL = getBackendUrl()
const useImgList = ref([])
const selectInfo = ref({})
const ImageDetailsList = ref([]) // 图片详情列表
const isImageDetails = ref(false) // 是否显示图片详情
const selectIndex = ref(0) // 图片详情选中的索引
// 生命周期
onMounted(() => {
  useImgList.value = props.imageList
})
function cancel(is) {
  if(is == true && selectInfo.value.id !=null){
    emit("closeSelectData",true,selectInfo.value)
  }else{
    emit("closeSelectData",false,{})
  }
  
}
const checkboxGroup = ref([]) // 图片列表选中的数据
function selectedChange(val,row){ 
  console.log(val,row)
}
function selectImg(row,index){ 
  selectIndex.value = index
  isImageDetails.value =true
  
}
function selectCheckbox(row){
  setTimeout(() => {
    checkboxGroup.value = [row.id]
    selectInfo.value = row
  }, 50)
}


onUnmounted(() => {
  
})

function closeImageDetails(e){
  isImageDetails.value = false
}
</script>

<style scoped>
.pop-up-mask{
  position: fixed;
  z-index: 199;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}
.selectdata-box{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  border-radius: 10px;
  width: 1280px;
  height: 824px;
  background: #38475f;
  box-shadow: 0px 0px 16px rgba(17, 24, 33, 1);
  padding: 0px 30px 20px;
}
.selectdata-header{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: 'Noto Sans SC';
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #FFFFFF;
  text-align: left;
}
.selectdata-box .el-checkbox-group{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
.selectdata-imgbgbox{
  width: calc(100%);
  height: 645px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
}

.selectdata-imgbox{
  width: 270px; 
  height: 180px;
  margin: 15px;
}
.selectdata-imgactive{
  width: 100%;
  height: calc(100% - 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 4px;
}

.selectdata-imgactive:hover{
  border: 2px solid #0b94d5;
}
.selectdata-imgtextbox{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.selectdata-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;
}
.selectdata-cancelbutton:hover{
  background-color: #14aaff;
  color: #fff;
}
.selectdata-confirmbutton{
  width: 80px;
  height: 40px;
  background-color: #0b94d5;
  border-radius: 4px;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.selectdata-confirmbutton:hover{
  background-color: #14aaff;
}

</style>