@@ -1,11 +1,11 @@
<template>
<div class="ui container">
<div class="tuomin-title">
<h2>数据脱敏模型体验 </h2>
<p>利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目 <a href="">tengxiao / tuomin</a></p>
<h2>{{$t('dataDesensitizationModelExperience')}} </h2>
<p>{{$t('dataDesensitizationModelDesc')}} <a href="">tengxiao / tuomin</a></p>
</div>
<el-row :gutter="12" style="margin-top: 33px;">
<el-col :span="12">
<el-col :xs="24" : span="12">
<div class="tuomin-content-image">
<div class="tuomin-icon">
<i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
@@ -22,58 +22,71 @@
:style="{display:(ImageUrl ? 'none':'block')}"
:auto-upload="false"
>
<div class="el-upload__text">拖动图片到这里 <span style="color: rgba(136, 136, 136, 0.87);">或</span> 点击上传 </div>
<div class="el-upload__text">{{$t('dragThePictureHere')}}<span style="color: rgba(136, 136, 136, 0.87);">{{$t('or')}}</span>{{$t('clickUpload')}} </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>
<label class="radio-label">{{$t('desensitizationObject')}} ：</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 :label="2">{{$t('all')}} </el-radio>
<el-radio :label="1">{{$t('onlyFace')}} </el-radio>
<el-radio :label="0">{{$t('onlyLicensePlate')}} </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>
<el-button @click="cancelUpload">{{$t('cancel')}} </el-button>
<el-button @click="startTranform" type="primary">{{$t('startDesensitization')}} </el-button>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="tuomin-content-image">
<el-col :xs="24" : span="12">
<div class="tuomin-content-image" v-loading="tranformImageLoading" >
<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 style="height: 358px;">
<el-image
style="height: 100%;width: 100%;"
:src="resultImgSrc"
:preview-src-list="[resultImgSrc]">
<div slot="error" class="image-slot">
<i style="font-size: 0;" class="el-icon-picture-outline"></i>
</div>
</el-image>
</div>
</div>
</el-col>
</el-row>
<div style="margin: 39px 0 21px 0;">
<span>{{$t('example')}}：</span>
</div>
<div class="table-container">
<div>
<el-table border style="width:100%">
<el-table-column :label="$t('user.invitedFriends')" header-align="center">
<el-table border :data="tableData1" style="width:100%">
<el-table-column :label="$t('originPicture')" 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>
<img :src="scope.row.imgSrc1" alt="">
<span style="margin-left: 10px">{{ scope.row.imgSrc1}}</span>
</template>
</el-table-column>
<el-table-column prop="statusStr" :label="$t('status')" align="center" header- align="center">
<el-table-column :label="$t('desensitizationPicture')" align="center">
<template slot-scope="scope">
<span :style="{ color: scope.row.statusColor }">{{ scope.row.statusStr }}</span>
<img :src="scope.row.imgSrc2" alt="">
<span style="margin-left: 10px">{{ scope.row.imgSrc1}}</span>
</template>
</el-table-column>
<el-table-column prop="regTime" :label="$t('user.registrationTime ')" align="center" header-align="center">
<el-table-column prop="mode" :label="$t('desensitizationObject ')" align="center" header-align="center">
</el-table-column>
</el-table>
@@ -84,45 +97,25 @@
</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:''
file:'',
resultImgSrc:'',
tranformImageLoading:false,
tableData1:[{
imgSrc1:'/img/jian.svg',
imgSrc2:'/img/jian.svg',
mode:'仅车牌'
}]
};
},
components: {},
methods: {
handleLicensePreview(file) {
console.log(file)
this.ImageUrl = URL.createObjectURL(file.raw);
@@ -136,6 +129,7 @@
let fd = new FormData();
fd.append('file', this.file.raw);
console.log(fd.get("file"))
this.tranformImageLoading = true
axios({
method:'POST',
url: '/extension/tuomin/upload',
@@ -145,9 +139,12 @@
data:fd
}).then(res => {
console.log(res)
const objectURL = URL.createObjectURL(res.data);
this.resultImgSrc = objectURL;
this.tranformImageLoading = false
}).catch(err => {
console.log(err);
this.tranformImageLoading = false
this.$message({
type: 'error',
message: this.$t('submittedFailed')
@@ -159,8 +156,6 @@
console.log("----------")
},
},
mounted() {
@@ -171,7 +166,6 @@
</script>
<style scoped lang="less">
.tuomin-title{
margin-top: 34px;
h2 {
@@ -235,105 +229,6 @@
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;
@@ -353,17 +248,16 @@
}
}
.op-btn {
cursor: pointer;
font-size: 12px;
color: rgb(25, 103, 252);
margin: 0 5px;
}
}
.center {
display: flex;
justify-content: center;
}
@media screen and (max-width:768px){
body{
background-color: black
}
}
</style>
zhoupzh
3 years ago