Bonus-AI-LargeScreen/src/views/updateFace/midPic.vue

<template>
  <div class="html-container">
    <div class="top">
      <div class="main-top">
        <div class="main-top-bg">
          <img src="../../assets/images/faceBackMain.png" alt="error" class="faceBackMain">
        </div>
      </div>
      <div class="main-bottom">
        <div class="main-bottom-left">
          <div class="main-bottom-left-bg">
            <img src="../../assets/images/faceleft.png" @click='update' alt="error" class="faceBackMain">
          </div>
          <span>人脸库上传</span>
        </div>
        <div class="main-bottom-right">
          <div class="main-bottom-right-bg">
            <input
              type="file"
              accept="image/jpeg"
              style="display: none"
              ref="fileInput"
              @change="handleFileChange"
            />
            <img src="../../assets/images/faceright.png" @click='selectFile' alt="error" class="faceBackMain">
          </div>
          <span>人脸图像上传</span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="bottom-left-title">
          <div class="title">
            <span>人脸图片</span>
          </div>
        </div>
        <div class="bottom-left-content">
          <img
            v-if="imageUrl"
            :src="imageUrl"
            class="avatar"
            @click="selectFile"
            alt="Avatar"
          />
          <i
            v-else
            class="el-icon-plus avatar-uploader-icon"
            @click="selectFile"
          ></i>
        </div>
      </div>
      <div class="bottom-right">
        <div class="bottom-right-title">
          <div class="title">
            <span>识别结果</span>
          </div>
        </div>
        <div class="bottom-right-content">
          <img
            v-if="faceUrl"
            :src="'http://192.168.0.56:18093/'+faceUrl"
            class="avatar"
            alt="Avatar"
          />
          <i
            v-else
            class="el-icon-plus avatar-uploader-icon"
          ></i>
          <div class="content">
            <span v-if="name">姓名:{{ name }}</span>
            <span v-if="sex">性别:{{ sex }}</span>
          </div>
        </div>
      </div>
    </div>
    <addFace v-model="showModal" title="添加人脸" width="500px" @visible-change="handleVisibleChange">
      <p>这是弹窗的内容。</p>
    </addFace>
    -->
  </div>
</template>

<script>
import addFace from "@/views/updateFace/addFace.vue";
import {recognition} from '@/api/updateFace/updateFace'
import faceListShowPic from "@/views/updateFace/faceListShowPic.vue";
export default {
  components: {
    addFace
  },
  data() {
    return {
      showModal: false,
      imageUrl: "",
      faceUrl: '',
      name: '',
      sex: '',
    }
  },
  watch: {
    showModal(val) {
      console.log(val)
      if (!val) {
        faceListShowPic.methods.getList();
      }
    }
  },
  methods: {
    recognition(file) {
      let formData = new FormData();
      formData.append('file', file);
      recognition(formData).then(res => {
        if (res.code == 200) {
          let data = res.data;
          this.faceUrl = data.faceAddress;
          this.name = data.name;
          this.sex = data.sex;
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    update() {
      this.showModal = true
    },
    handleVisibleChange(newVal) {
      console.log(newVal);
      this.showModal = newVal;
    },
    selectFile() {
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageUrl = URL.createObjectURL(file);
        this.recognition(file)
      }
    }
  }
}
</script>

<style lang="scss">

@keyframes moveandflash {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-1rem) scale(1.05);
    opacity: 0.8;
  }
}

.top {
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .main-top {
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;

    .main-top-bg {
      width: 40%;
      height: 100%;
      background-image: url('../../assets/images/faceBackCircle.png');
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      /* align-items: center;*/


      img {
        margin-top: 10%;
        width: 50%;
        height: 60%;
        animation: moveandflash 2s infinite linear;
        transition: transform 0.3s ease-in-out;
      }
    }
  }

  .main-bottom {
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;

    .main-bottom-left {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      span {
        font-weight: 900;
        color: white;
      }

      .main-bottom-left-bg {
        width: 50%;
        height: 80%;
        background-image: url('../../assets/images/faceBackCircle.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: center;

        img {
          margin-top: 15%;
          width: 30%;
          height: 50%;
          animation: moveandflash 2s infinite linear;
          transition: transform 0.3s ease-in-out;
        }

      }
    }

    .main-bottom-right {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      span {
        font-weight: 900;
        color: white;
        margin-top: 1%;
      }

      .main-bottom-right-bg {
        width: 50%;
        height: 80%;
        background-image: url('../../assets/images/faceBackCircle.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: center;


        img {
          margin-top: 15%;
          width: 30%;
          height: 50%;
          animation: moveandflash 2s infinite linear;
          transition: transform 0.3s ease-in-out;
        }
      }
    }
  }
}

.bottom {
  width: 100%;
  height: 30%;
  padding: 1%;
  display: flex;

  .bottom-left {
    width: 50%;
    height: 100%;
    padding: 1%;
    display: flex;
    flex-direction: row;

    .bottom-left-title {
      width: 20%;
      height: 100%;

      .title {
        width: 100%;
        height: 50%;
        background-image: url('../../assets/images/faceLeftThree.png');
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        span {
          align-items: center;
          font-weight: 900;
          font-size: 14px;
          color: white;
        }
      }
    }

    .bottom-left-content {
      width: 40%;
      height: 100%;
      background-image: url('../../assets/images/faceThreeBorder.png');
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 70%;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed #8c939d;
      }

      .avatar-uploader-icon:hover {
        color: #0C70FA;
        border: 1px dashed #0C70FA;
      }

      img {
        width: 70%;
        height: 70%;
      }
    }
  }

  .bottom-right {
    width: 50%;
    height: 100%;
    padding: 1%;
    display: flex;
    flex-direction: row;

    .bottom-right-title {
      width: 20%;
      height: 100%;

      .title {
        width: 100%;
        height: 50%;
        background-image: url('../../assets/images/faceRightThree.png');
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        span {
          align-items: center;
          font-weight: 900;
          font-size: 14px;
          color: white;
        }
      }
    }

    .bottom-right-content {
      width: 80%;
      height: 100%;
      background-image: url('../../assets/images/faceThreeBorder.png');
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      flex-direction: row;

      .content {
        display: flex;
        width: 50%;
        height: 70%;
        margin-left: 5%;
        flex-direction: column;
        align-items: flex-start;

        span {
          color: white;
          margin-top: 5%;
        }
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 35%;
        margin-left: 13%;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed #8c939d;
      }

      img {
        margin-left: 13%;
        width: 35%;
        height: 70%;
      }
    }
  }
}
</style>