0525bugFixed

This commit is contained in:
shijing 2022-05-25 16:40:48 +08:00
parent 274503442f
commit be095ce94f
1 changed files with 263 additions and 250 deletions

View File

@ -133,7 +133,7 @@
<el-row v-show="hasPicture">
<el-form-item label="图表">
<div>
<img id="canvasImg" :src="img" style="width:500px;height: 300px;position: absolute;top: -1000px;">
<img id="canvasImg" :src="img" alt="tupian">
<div style="position: relative;display: flex;flex-direction: column;
border: 1px solid #DCDFE6;">
<canvas id="canvas" width="500" height="300">
@ -159,7 +159,7 @@
<el-radio v-model="is_testok" :label="testokFalse">检查不合格</el-radio>
</el-form-item>
<div class="dialog-footer" style="text-align: right" v-show="!isDisabled">
<el-button @click="recordCancel"> </el-button>
<el-button @click="recordCancel"> </el-button>
<el-button type="primary" @click="submitfield('1')">保存</el-button>
<el-button type="warning" @click="submitfield('2')">提交</el-button>
</div>
@ -169,65 +169,67 @@
</template>
<script>
import { upFile } from "@/api/file";
import {upFile} from "@/api/file";
let preDrawAry = [];
export default {
name: "index",
props: {
results:{
type:Array,
results: {
type: Array,
default: () => {
return []
}} ,
}
},
formID: {
type:Number,
default:0
type: Number,
default: 0
},
wproduct: {
type:Number,
default:0
type: Number,
default: 0
},
recordId: {
type:Number,
default:null
type: Number,
default: null
},
hasPicture:{
type:Boolean,
default:false
hasPicture: {
type: Boolean,
default: false
},
isDisabled:{
type:Boolean,
default:false
isDisabled: {
type: Boolean,
default: false
}
},
mounted() {
let that = this;
that.checkForm = {};
this.form = this.formID;
let formData=this.results;
that.wproductId=this.wproduct;
let formData = this.results;
that.wproductId = this.wproduct;
formData.forEach(item => {
let obj = new Object();
obj = item;
if(item.field_type === 'draw'){
if (item.field_type === 'draw') {
obj.is_testok = true;
}else{
} else {
obj.is_testok = null;
}
that.formData.push(obj)
});
that.formData=[...formData];
for(let i=0;i<this.results.length;i++){
that.formData = [...formData];
for (let i = 0; i < this.results.length; i++) {
let key = this.results[i].field_key;
//checkForm接收表单数据的对象
let valu = this.results[i].field_value;
if(valu!==null&&valu!==''&&valu!==undefined){
that.checkForm[key]=valu;
that.$set(that.checkForm,key,valu);
if (valu !== null && valu !== '' && valu !== undefined) {
that.checkForm[key] = valu;
that.$set(that.checkForm, key, valu);
that.is_save = true;
}else{
that.checkForm[key]='';
that.$set(that.checkForm,key,null)
} else {
that.checkForm[key] = '';
that.$set(that.checkForm, key, null)
}
}
let listJudge = this.formData.filter(item => {
@ -238,173 +240,173 @@
obj = item;
that.judgeList.push(obj)
});
let imag= this.formData.filter(item => {
let imag = this.formData.filter(item => {
return item.field_type === 'draw';
});
if(imag.length>0){
if (imag.length > 0) {
that.img = new Image();
that.img.crossOrigin = 'anonymous';
let value = imag[0].field_value?imag[0].field_value:imag[0].draw_template;
that.img = value;
setTimeout(function(){
let value = imag[0].field_value!==null ? imag[0].field_value : imag[0].draw_template;
that.img =process.env.VUE_APP_BASE_API.replace('/api','')+ value;
setTimeout(function () {
that.canvasInit();
},500);
}, 1000);
}
},
data(){
return{
field:[],
checkForm:{},
testrecord:{
form:this.formID,
record_data:[],
is_testok:true,
wproduct:null,
data() {
return {
field: [],
checkForm: {},
testrecord: {
form: this.formID,
record_data: [],
is_testok: true,
wproduct: null,
},
canvas:null,
wproductId:null,
ctx:null,
myCanvas_rect:null,
Txt:null,
word:null,
img:null,
widths:0,
heights:0,
lineW:3,
colorF:"#e42343",
imgUrl:'',
imgData:'',
canvasImg:'',
formData:[],//表单数组
judgeList:[],//判定数组
is_testok:true,
testokTrue:true,
is_save:false,
require:false,
testokFalse:false,
index:'1',
canvas: null,
wproductId: null,
ctx: null,
myCanvas_rect: null,
Txt: null,
word: null,
img: null,
widths: 0,
heights: 0,
lineW: 3,
colorF: "#e42343",
imgUrl: '',
imgData: '',
canvasImg: '',
formData: [],//表单数组
judgeList: [],//判定数组
is_testok: true,
testokTrue: true,
is_save: false,
require: false,
testokFalse: false,
index: '1',
}
},
methods:{
filterBlock(rule,index,field_key){
methods: {
filterBlock(rule, index, field_key) {
let that = this;
if(rule!==''&&rule!==null&&rule!==undefined){
if (rule !== '' && rule !== null && rule !== undefined) {
let reg = /\{(.+?)\}/g;
if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
if (rule.indexOf('||') > -1 || rule.indexOf('&&') > -1) {
let tam = '', arr = [];
if(rule.indexOf('||')>-1){
if (rule.indexOf('||') > -1) {
arr = rule.split('||');
}else{
} else {
arr = rule.split('&&');
}
for (let i = 0;i<arr.length;i++){
for (let i = 0; i < arr.length; i++) {
//获取判断依据
let a = '';
a = arr[i].replace(/`/g,'');
a = '`'+ a+'`';
let tem =a.match(reg)[0];
a = arr[i].replace(/`/g, '');
a = '`' + a + '`';
let tem = a.match(reg)[0];
let ky = tem.replace(/\{|\}/g, '');//qipao
if(that.checkForm[ky]){
if (that.checkForm[ky]) {
//替换变量
a = a.replace(ky, 'yyy');
let yyy = "'"+that.checkForm[ky]+"'";
if(eval(eval( a))){
let yyy = "'" + that.checkForm[ky] + "'";
if (eval(eval(a))) {
tam += 'true';
}else{
} else {
tam += 'false';
}
}else{
} else {
tam += 'false';
}
}
let rea = true;
if(rule.indexOf('||')>-1){
if( tam.indexOf('true')>-1){
if (rule.indexOf('||') > -1) {
if (tam.indexOf('true') > -1) {
rea = true;
}else{
} else {
rea = false;
}
}else{
if( tam.indexOf('false')>-1){
} else {
if (tam.indexOf('false') > -1) {
rea = false;
}else{
} else {
rea = true;
}
}
if(rea){
if (rea) {
that.formData[index].is_hidden = false;
}else{
} else {
that.formData[index].is_hidden = true;
that.checkForm[field_key] = null;
}
return rea;
}else{
let temp =rule.match(reg)[0];
} else {
let temp = rule.match(reg)[0];
let key = temp.replace(/\{|\}/g, '');//qipao
let a = rule.replace(key, 'yy');
let a = rule.replace(key, 'yy');
a = a.replace(key, 'yy');
let yy = "'"+that.checkForm[key]+"'";
if(eval(eval(a))){
let yy = "'" + that.checkForm[key] + "'";
if (eval(eval(a))) {
that.formData[index].is_hidden = false;
}else{
} else {
that.formData[index].is_hidden = true;
that.checkForm[field_key] = null;
}
return eval(eval(a));
}
}else{
} else {
that.formData[index].is_hidden = false;
return true;
}
},
keyChange(index,key){
keyChange(index, key) {
let that = this;
let reg = /\{(.+?)\}/g;
that.$forceUpdate();
that.$nextTick(()=>{
if(that.formData[index].need_judge===true){
let arr = [],str = '';
let item = that.formData[index].rule_expression.replace(/`/g,'');
if(item.indexOf('||')>-1){
that.$nextTick(() => {
if (that.formData[index].need_judge === true) {
let arr = [], str = '';
let item = that.formData[index].rule_expression.replace(/`/g, '');
if (item.indexOf('||') > -1) {
arr = item.split('||');
}else if(item.indexOf('&&')>-1){
} else if (item.indexOf('&&') > -1) {
arr = item.split('&&');
}else{
} else {
arr.push(item);
}
//对每个条件进行判定如果符合
for (let i = 0;i<arr.length;i++){
for (let i = 0; i < arr.length; i++) {
//获取判断依据
let a = '`'+ arr[i]+'`';
let tem =a.match(reg)[0];
let a = '`' + arr[i] + '`';
let tem = a.match(reg)[0];
let ky = tem.replace(/\{|\}/g, '');//qipao
//有值时进行判断
if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
//替换变量
a = a.replace(ky, 'yyy');
let yyy = "'"+that.checkForm[ky]+"'";
if(eval(eval( a))){
let yyy = "'" + that.checkForm[ky] + "'";
if (eval(eval(a))) {
str += 'true';
}else{
} else {
str += 'false';
}
}
}
if(item.indexOf('&&')>-1){
if(str.indexOf('false')>-1){
if (item.indexOf('&&') > -1) {
if (str.indexOf('false') > -1) {
that.formData[index].is_testok = true;
that.$set(that.formData[index],'is_testok',true)
}else{
that.$set(that.formData[index], 'is_testok', true)
} else {
that.formData[index].is_testok = false;
that.$set(that.formData[index],'is_testok',false)
that.$set(that.formData[index], 'is_testok', false)
}
}else{
if(str.indexOf('true')>-1){
} else {
if (str.indexOf('true') > -1) {
that.formData[index].is_testok = false;
that.$set(that.formData[index],'is_testok',false)
}else{
that.$set(that.formData[index], 'is_testok', false)
} else {
that.formData[index].is_testok = true;
that.$set(that.formData[index],'is_testok',true)
that.$set(that.formData[index], 'is_testok', true)
}
}
that.$forceUpdate();
@ -418,7 +420,7 @@
},
/* 图片保存 */
//初始化canvas
canvasInit(){
canvasInit() {
let that = this;
preDrawAry = [];
that.canvas = document.getElementById('canvas');
@ -428,55 +430,55 @@
that.word = document.getElementById('word');
that.widths = that.myCanvas_rect.width;
that.heights = that.myCanvas_rect.height;
setTimeout(function(){
setTimeout(function () {
that.draw();
},500);
}, 500);
},
//画布添加背景模板图
draw(){
draw() {
debugger;
this.ctx = document.getElementById('canvas').getContext('2d');
let canvasImg = document.getElementById("canvasImg");
canvasImg.setAttribute("crossOrigin",'anonymous');
// canvasImg.style.width = '500px';
// canvasImg.style.height = '300px';
this.ctx.drawImage(canvasImg,0,0,500,300);
// canvasImg.setAttribute("crossOrigin", 'anonymous');
this.ctx.drawImage(canvasImg, 0, 0, 500, 300);
},
// 叉号
error1(){
error1() {
let canvas1 = document.getElementById('canvas');
let ctx1 = canvas1.getContext('2d');
this.Txt.style.display="none";
document.getElementById('word').style.display="none";
this.Txt.style.display = "none";
document.getElementById('word').style.display = "none";
ctx1.closePath();
canvas1.onmousedown=function () {
this.imgData= ctx1.getImageData(0,0,canvas1.width,canvas1.height);
canvas1.onmousedown = function () {
this.imgData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
preDrawAry.push(this.imgData);
ctx1.beginPath();
ctx1.strokeStyle = "#e42343";
ctx1.lineWidth = "3";
ctx1.lineJoin="round";
ctx1.lineJoin = "round";
};
//鼠标按下的位置
canvas1.onmouseup=function (ev) {
canvas1.onmouseup = function (ev) {
let oldX = ev.offsetX;
let oldY = ev.offsetY;
ctx1.moveTo(oldX,oldY);
ctx1.lineTo(ev.offsetX+10,ev.offsetY+10);
ctx1.moveTo(ev.offsetX+10,ev.offsetY);
ctx1.lineTo(ev.offsetX,ev.offsetY+10);
ctx1.moveTo(oldX, oldY);
ctx1.lineTo(ev.offsetX + 10, ev.offsetY + 10);
ctx1.moveTo(ev.offsetX + 10, ev.offsetY);
ctx1.lineTo(ev.offsetX, ev.offsetY + 10);
ctx1.stroke();
};
this.ctx.closePath();
},
// 文字先写字
text(){
text() {
let canvas2 = document.getElementById('canvas');
let ctx2 = canvas2.getContext('2d');
let Txt2 = document.getElementById('txt');
Txt2.style.display="block";
document.getElementById('word').style.display="none";
ctx2.font="16px Microsoft Yahei";
canvas2.onmousedown=function (ev) {
this.imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
Txt2.style.display = "block";
document.getElementById('word').style.display = "none";
ctx2.font = "16px Microsoft Yahei";
canvas2.onmousedown = function (ev) {
this.imgData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
preDrawAry.push(this.imgData);
var v = Txt2.value;
// console.log(v);
@ -484,63 +486,63 @@
var oldX = ev.offsetX;
var oldY = ev.offsetY;
// console.log(oldX,oldY);
ctx2.moveTo(oldX,oldY);
canvas2.onmouseup=function () {
ctx2.fillStyle=this.colorF;
ctx2.fillText(v,oldX,oldY);
canvas2.TextAutoLine(v,canvas2,oldX,oldY,20);
ctx2.moveTo(oldX, oldY);
canvas2.onmouseup = function () {
ctx2.fillStyle = this.colorF;
ctx2.fillText(v, oldX, oldY);
canvas2.TextAutoLine(v, canvas2, oldX, oldY, 20);
// Txt.value = "";
Txt2.style.display="none";
Txt2.style.display = "none";
}
}
}
},
// 文字
word1(){
word1() {
let canvas3 = document.getElementById('canvas');
let ctx3 = canvas3.getContext('2d');
let Txt3 = document.getElementById('txt');
let word3 = document.getElementById('word');
Txt3.style.display="none";
ctx3.font="16px Microsoft Yahei";
canvas3.onmousedown=function () {
Txt3.style.display = "none";
ctx3.font = "16px Microsoft Yahei";
canvas3.onmousedown = function () {
ctx3.closePath();
}
canvas3.onmouseup=function (ev) {
var inputV= document.getElementById('inputV').value;
if(inputV == 1){
canvas3.onmouseup = function (ev) {
var inputV = document.getElementById('inputV').value;
if (inputV == 1) {
document.getElementById('word').focus();
// console.log(ev.offsetX,ev.offsetY);
var oldX = ev.offsetX;
var oldY = ev.offsetY;
word3.style.display="block";
word3.style.left=oldX+'px';
word3.style.top =oldY+'px';
word3.style.display = "block";
word3.style.left = oldX + 'px';
word3.style.top = oldY + 'px';
word3.onblur=function () {
word3.onblur = function () {
let v = word3.value;
if(v != '' && v != ' '){
this.imgData=ctx3.getImageData(0,0,canvas3.width,canvas3.height);
let img = ctx3.getImageData(0,0,canvas3.width,canvas3.height);
if (v != '' && v != ' ') {
this.imgData = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
let img = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
preDrawAry.push(img);
ctx3.moveTo(oldX,oldY);
ctx3.fillStyle="#e42343";
ctx3.moveTo(oldX, oldY);
ctx3.fillStyle = "#e42343";
let lineWidth = 0;
let canvasWidth = canvas3.width;
let lastSubStrIndex= 0;
for(let i=0;i<v.length;i++){
lineWidth+=ctx3.measureText(v[i]).width;
if(lineWidth>canvasWidth-oldX){
ctx3.fillText(v.substring(lastSubStrIndex,i),oldX,(oldY+10));
oldY+=20;
lineWidth=0;
lastSubStrIndex=i;
let lastSubStrIndex = 0;
for (let i = 0; i < v.length; i++) {
lineWidth += ctx3.measureText(v[i]).width;
if (lineWidth > canvasWidth - oldX) {
ctx3.fillText(v.substring(lastSubStrIndex, i), oldX, (oldY + 10));
oldY += 20;
lineWidth = 0;
lastSubStrIndex = i;
}
if(i==v.length-1){
ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
if (i == v.length - 1) {
ctx3.fillText(v.substring(lastSubStrIndex, i + 1), oldX, (oldY + 10));
}
}
inputV ="2";
inputV = "2";
word3.value = "";
}
}
@ -548,42 +550,42 @@
}
},
// 文字过长超出换行toDataURL()
canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
let ctx = canvas.getContext("2d");
let lineWidth = 0;
let canvasWidth = canvas.width;
let lastSubStrIndex= 0;
for(let i=0;i<str.length;i++){
lineWidth+=ctx.measureText(str[i]).width;
if(lineWidth>canvasWidth-initX){
ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
initY+=lineHeight;
lineWidth=0;
lastSubStrIndex=i;
let lastSubStrIndex = 0;
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth - initX) {
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
initY += lineHeight;
lineWidth = 0;
lastSubStrIndex = i;
}
if(i==str.length-1){
ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
}
}
},
// 撤销
back(){
this.word.style.display="none";
this.Txt.style.display="none";
if(preDrawAry.length>0) {
back() {
this.word.style.display = "none";
this.Txt.style.display = "none";
if (preDrawAry.length > 0) {
var popData = preDrawAry.pop();
this.ctx.putImageData(popData, 0, 0);
}
},
// 回退一次
put(){
this.ctx.putImageData(this.imgData,0,0);
put() {
this.ctx.putImageData(this.imgData, 0, 0);
},
//保存
saveTu(){
saveTu() {
let that = this;
this.word.style.display="none";
this.Txt.style.display="none";
this.word.style.display = "none";
this.Txt.style.display = "none";
let canvas = document.getElementById('canvas');
let image = new Image();
image = canvas.toDataURL('image/png');
@ -592,7 +594,7 @@
let formData = new FormData();
formData.append('file', file);
upFile(formData).then((res) => {
that.imgUrl=res.data.path;
that.imgUrl = res.data.path;
})
},
//base64ToFile
@ -600,69 +602,69 @@
let arr = baseUrl.split(',');
// let type = arr[0].match(/:(.*?);/)[1]; // 解锁图片类型
let bytes = atob(arr[1]); // 解码base64
let n = bytes .length;
let n = bytes.length;
let bufferArray = new Uint8Array(n);
while (n--) {
bufferArray[n] = bytes.charCodeAt(n);
}
// let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
return new File([bufferArray ],'draw.jpg');
return new File([bufferArray], 'draw.jpg');
},
/* 图片保存 */
//最终表格判定
judgeForm(){
let that = this ,
judgeForm() {
let that = this,
reg = /\{(.+?)\}/g,
judgeList = this.judgeList;
for(let i=0;i<judgeList.length;i++){
let arr = [],str = '';
let item = judgeList[i].rule_expression.replace(/`/g,'');
if(item.indexOf('||')>-1){
for (let i = 0; i < judgeList.length; i++) {
let arr = [], str = '';
let item = judgeList[i].rule_expression.replace(/`/g, '');
if (item.indexOf('||') > -1) {
arr = item.split('||');
}else if(item.indexOf('&&')>-1){
} else if (item.indexOf('&&') > -1) {
arr = item.split('&&');
}else{
} else {
arr.push(item);
}
//对每个条件进行判定如果符合
for (let i = 0;i<arr.length;i++){
for (let i = 0; i < arr.length; i++) {
//获取判断依据
let a = '`'+ arr[i]+'`';
let tem =a.match(reg)[0];
let a = '`' + arr[i] + '`';
let tem = a.match(reg)[0];
let ky = tem.replace(/\{|\}/g, '');//qipao
//有值时进行判断
if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
//替换变量
a = a.replace(ky, 'yyy');
let yyy = "'"+that.checkForm[ky]+"'";
if(eval(eval( a))){
let yyy = "'" + that.checkForm[ky] + "'";
if (eval(eval(a))) {
str += 'true';
}else{
} else {
str += 'false';
}
}
}
if(item.indexOf('&&')>-1){
if(str.indexOf('false')>-1){
if (item.indexOf('&&') > -1) {
if (str.indexOf('false') > -1) {
that.judgeList[i].is_testok = true;
}else{
} else {
that.judgeList[i].is_testok = false;
}
}else{
if(str.indexOf('true')>-1){
} else {
if (str.indexOf('true') > -1) {
that.judgeList[i].is_testok = false;
}else{
} else {
that.judgeList[i].is_testok = true;
}
}
}
let real = that.judgeList.filter(item=>{
return item.is_testok===false;
let real = that.judgeList.filter(item => {
return item.is_testok === false;
});
if(real.length>0){
if (real.length > 0) {
that.is_testok = false;
// alert("检验不合格!")
}else{
} else {
that.is_testok = true;
// alert("检验合格!")
}
@ -671,12 +673,12 @@
submitfield(isSubmit) {
let that = this;
that.index = isSubmit;
let drawArr = that.formData.filter(item=>{
return item.field_type==='draw';
let drawArr = that.formData.filter(item => {
return item.field_type === 'draw';
});
if(drawArr.length>0){
that.word.style.display="none";
that.Txt.style.display="none";
if (drawArr.length > 0) {
that.word.style.display = "none";
that.Txt.style.display = "none";
let canvas = document.getElementById('canvas');
let image = new Image();
image = canvas.toDataURL('image/png');
@ -685,27 +687,27 @@
let formData = new FormData();
formData.append('file', file);
upFile(formData).then((res) => {
if(res){
if (res) {
let key = drawArr[0].field_key;
that.imgUrl=res.data.path;
that.imgUrl = res.data.path;
that.checkForm[key] = res.data.path;
that.fieldData();
}
});
}else{
} else {
that.fieldData();
}
},
fieldData(){
fieldData() {
let that = this;
that.field = []; //检查项目
that.formData.forEach((item) => {
let field_value;
if(item.field_type==='int'){
if (item.field_type === 'int') {
field_value = parseInt(that.checkForm[item.field_key])
}else if(item.field_type==='float'){
} else if (item.field_type === 'float') {
field_value = parseFloat(that.checkForm[item.field_key])
}else{
} else {
field_value = that.checkForm[item.field_key];
}
that.field.push({
@ -718,14 +720,14 @@
that.testrecord.record_data = that.field;//检查项列表
that.testrecord.is_testok = that.is_testok;//检查表检查结果
that.testrecord.id = that.recordId;//记录id
if(that.index==='2'){//提交
this.$emit('recordSubmit',that.testrecord);
}else {//保存
this.$emit('recordSave',that.testrecord);
if (that.index === '2') {//提交
this.$emit('recordSubmit', that.testrecord);
} else {//保存
this.$emit('recordSave', that.testrecord);
}
},
recordCancel(){
this.$emit('recordCancel','')
recordCancel() {
this.$emit('recordCancel', '')
},
}
}
@ -733,7 +735,7 @@
<style scoped>
canvas {
width:500px!important;
width: 500px !important;
/*border: 1px solid #000000;*/
cursor: crosshair;
margin: auto;
@ -757,6 +759,7 @@
margin-right: 10px;
margin-bottom: 10px;
}
.hide {
display: none;
}
@ -795,23 +798,33 @@
#res {
display: inline-block;
}
.helpText{
.helpText {
position: absolute;
top: 40px;
left: 100px;
}
.adoptTip{
.adoptTip {
position: absolute;
top: 38px;
right: 0;
font-size: 12px;
color: #46ce7a;
}
.failTip{
.failTip {
position: absolute;
top: 38px;
right: 0;
font-size: 12px;
color: #ff0000;
}
#canvasImg{
width:500px;
height: 300px;
position: absolute;
left: 50%;
transform: translateX(-50%)
}
</style>