aiforge/web_src/vuepages/pages/model/tuomin/index.vue

<template>
    <div class="ui container">
      <div class="tuomin-title">
        <h2>数据脱敏模型体验</h2>
        <p>利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目 &nbsp;<a href="">tengxiao / tuomin</a></p>
      </div>
      <el-row :gutter="12" style="margin-top: 33px;">
        <el-col :span="12">
          <div class="tuomin-content-image">
              <div class="tuomin-icon">
                <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
                <span style="font-size: 12px;">img</span>
              </div>
              <div style="height:230px;width: 96%;margin: 0 auto;">
                <el-upload 
                  action="#" 
                  accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
                  :show-file-list="false" 
                  :on-change="handleLicensePreview"
                  :before-upload="beforeLicenseUpload"
                  list-type="picture-card"
                  :style="{display:(ImageUrl ? 'none':'block')}"
                  :auto-upload="false"
                  >
                    <div class="el-upload__text">拖动图片到这里 <span style="color: rgba(136, 136, 136, 0.87);">或</span>  点击上传</div>
                </el-upload>

                <img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt="">
              </div>
              <div>
                  <div class="tuomin-radio-model">
                    <label class="radio-label">脱敏对象：</label>
                    <div>
                      <el-radio-group v-model="radio">
                        <el-radio :label="2">全部</el-radio>
                        <el-radio :label="1">仅人脸</el-radio>
                        <el-radio :label="0">仅车牌</el-radio>
                      </el-radio-group>
                    </div>
                    
                  </div>
                  <div class="tuomin-button-model">
                    <el-button @click="cancelUpload">取消</el-button>
                    <el-button @click="startTranform" type="primary">开始处理</el-button>
                  </div>
              </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="tuomin-content-image">
            <div class="tuomin-icon">
              <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
              <span style="font-size: 12px;">output</span>
            </div>
            
          </div>
        </el-col>
      </el-row>
      
      
      <div class="table-container">
        <div>
          <el-table border  style="width:100%">
            <el-table-column  :label="$t('user.invitedFriends')"  header-align="center">
              <template slot-scope="scope">
                <div style="display:flex;align-items:center;padding-left:20px;">
                  <img :src="scope.row.avatarSrc" alt="" style="height:45px;width:45px;margin-right:10px;" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="statusStr" :label="$t('status')" align="center" header-align="center">
              <template slot-scope="scope">
                <span :style="{ color: scope.row.statusColor }">{{ scope.row.statusStr }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="regTime" :label="$t('user.registrationTime')" align="center" header-align="center">
            </el-table-column>

          </el-table>
        </div>
        
      </div>
    </div>
  </template>
  
  <script>
  import Clipboard from 'clipboard';
  import QRCode from 'qrcodejs2';
  import { formatDate } from 'element-ui/lib/utils/date-util';
  import { imageTranform } from '~/apis/modules/tuomin';
  import axios from 'axios';
  
  export default {
    data() {
      return {
        bannerImg: '',
        bannerTitle: '',
        pageLink: '',
        pageLinkDesc: '',
        invitationLink: window.origin + '/user/sign_up?sharedUser=',
        invitationCode: '',
        pageOpeniDesc: '',
  
        loading: false,
        tableData: [],
        pageInfo: {
          curpage: 1,
          pageSize: 10,
          pageSizes: [10],
          total: 0,
        },

        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        form:{},

        ImageUrl:'',
        radio:2,
        file:''
      };
    },
    components: {},
    methods: {
      
      handleLicensePreview(file) {
        console.log(file)
        this.ImageUrl = URL.createObjectURL(file.raw);
        this.file = file
      },
      cancelUpload(){
        this.ImageUrl = ''
        this.file=''
      },
      startTranform(){
        let fd = new FormData();
        fd.append('file', this.file.raw);
        console.log(fd.get("file"))
        axios({
          method:'POST',
          url: '/extension/tuomin/upload',
          headers: {'Accept': 'image/png'},
          responseType: 'blob',
          params: { mode: this.radio },
          data:fd
        }).then(res => {
          console.log(res)
          
        }).catch(err => {
          console.log(err);
          this.$message({
            type: 'error',
            message: this.$t('submittedFailed')
          });
        })

      },
      beforeLicenseUpload(){
        console.log("----------")
      },
      
      
     
    },
    mounted() {

    },
    beforeDestroy() {
    },
  };
  </script>
  
  <style scoped lang="less">
  
  .tuomin-title{
    margin-top: 34px;
    h2 {
      display: flex;
      justify-content: center;
    }
    p{
      display: flex;
      justify-content: center;
      color: rgba(136, 136, 136, 0.87);
    }
  }
  .tuomin-content-image{
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    min-height: 358px;
    position: relative;
    .tuomin-icon {
      display: flex;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 66px;
      height: 22px;
      justify-content: center;
      color: rgba(136, 136, 136, 0.87);
      border-radius: 5px 0px 10px 0px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .el-upload__text{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .preview-image{
      height: 100%;
      width: 100%;
    }
    .tuomin-radio-model{
      display: flex;
      margin: 25px 12px 0 12px;
      .radio-label{
        font-weight: 600;
        margin-right: 4px;
        color: rgba(16, 16, 16, 1);
      }
    }
    .tuomin-button-model{
      text-align: right;
      margin: 22px 12px 0 12px;

    }
  }
  /deep/ .el-upload--picture-card{
    width: 100%;
    background: #ffff;
    border: none;
    border-bottom: 1px dashed #888;
    border-radius: 0;
    min-height: 230px;
  }
  .title {
    margin-top: 15px;
    margin-bottom: 15px;
  
    .title-1 {
      font-weight: 500;
      font-size: 20px;
      color: rgba(16, 16, 16, 1);
      margin-bottom: 10px;
    }
  
    .title-2 {
      font-weight: 400;
      font-size: 14px;
      color: rgba(136, 136, 136, 1);
    }
  }
  
  .content-1 {
    margin-bottom: 32px;
  
    .img-c {
      height: 80px;
      position: relative;
  
      .img {
        width: 100%;
        height: 100%;
      }
  
      .txt {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        line-height: 80px;
        padding-left: 25px;
        font-weight: 500;
        font-size: 24px;
        color: rgb(255, 255, 255);
      }
    }
  
    .descr {
      font-weight: 300;
      font-size: 16px;
      color: rgb(16, 16, 16);
      padding: 25px;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0px 0px 4px 4px;
    }
  }
  
  .content-2 {
    display: flex;
    background-color: rgb(228, 242, 255);
    border-color: rgb(228, 242, 255);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 25px;
    margin-bottom: 32px;
  
    .txt-c {
      flex: 1;
      font-weight: 300;
      font-size: 16px;
      color: rgb(16, 16, 16);
  
      span {
        line-height: 24px;
      }
  
      div {
        margin-bottom: 6px;
      }
  
      .txt-3 {
        margin-bottom: 15px;
      }
    }
  
    .__copy_link_btn__ {
      font-size: 14px;
      padding: 11px 15px;
      background: rgb(21, 114, 255);
      border-radius: 0;
    }
  
    .qr-code {
      width: 150px;
      display: flex;
      flex-direction: column;
      align-items: end;
    }
  }
  
  .table-container {
    margin-bottom: 16px;
  
    /deep/ .el-table__header {
      th {
        background: rgb(245, 245, 246);
        font-size: 14px;
        color: rgb(36, 36, 36);
        font-weight: 400;
      }
    }
  
    /deep/ .el-table__body {
      td {
        font-size: 14px;
      }
    }
  
    .op-btn {
      cursor: pointer;
      font-size: 12px;
      color: rgb(25, 103, 252);
      margin: 0 5px;
    }
  }
  
  .center {
    display: flex;
    justify-content: center;
  }
  </style>