aiforge/public/self/dataset_preview.js

var img=new Image();

var ip = getIp();



var token = getCookie("_csrf");

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// canvas.width = document.getElementById("myCanvas").offsetWidth;
// canvas.height = document.getElementById("myCanvas").offsetWidth/1280*720;

canvas.width = document.getElementById("win_canvas").offsetWidth;
canvas.height = document.getElementById("win_canvas").offsetHeight;




var color_dict = {"car":"#0099CC", "person":"#FF99CC","point":"#00cc00","pointselected":"red"};
var color_person = {"0":"#13c90c","1":"#fc0707","2":"#FF99CC","3":"#fceb07"};

var rects=[];
var masks=[];
var pointShapes =[];

var fileindex =0;
var lastindex=false;
var labeltastresult;

var pageSize = 12;
var tableData;
var tablePageData;
var dataset_id = $('#hide_uuidid').val();
var dbdatasetid = dataset_id;
var textContent;
var labelInfo;

page(0,pageSize);


function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
    if(arr=document.cookie.match(reg))
 
        return unescape(arr[2]);
    else
        return null;
}

function list(current,pageSize){
	$.ajax({
       type:"GET",
       url:ip + "/gitea-dateset-item-page",
       headers: {
          authorization:token,
       },
       dataType:"json",
       data:{
       	'datasetId':dbdatasetid,
       	'startPage':current,
        'pageSize':pageSize},
       async:false,
       success:function(json){
			tablePageData = json;
			tableData = json.data;
			labeltastresult = tableData;
			fileindex=0;
			if(lastindex){
				fileindex = pageSize - 1;
			}
			
        },
	    error:function(response) {
		   
		  
        }
   });
}



function getTextContent(uuid,filename){
	$.ajax({
       type:"GET",
       url:ip + "/getgiteatext",
       headers: {
          authorization:token,
       },
       dataType:"text",
       data:{
       	'uuid':uuid,
       	'filename':filename
		},
       async:false,
       success:function(json){
		   textContent = json;
			
        },
	    error:function(response) {
		   
        }
   });
}



/*
function previewDataSetFile(uuid,filename){
	console.log('uuid=' + uuid + " filename=" + filename);
	loadimg(uuid,filename);
}

function loadimg(uuid,filename){
	img.src  = ip + "/getgiteaimage?uuid=" + uuid + "&filename=" + filename;
	var fname = filename.substring(filename.lastIndexOf('/') + 1);
    $("#filename").text(fname);  
}
*/

function loadimg(){
	var length = labeltastresult[fileindex].pic_image_field.length;
	
	 if(labeltastresult[fileindex].pic_image_field.substring(length - 5) == ".json" 
     || labeltastresult[fileindex].pic_image_field.substring(length - 4) == ".xml"
     || labeltastresult[fileindex].pic_image_field.substring(length - 4) == ".txt"
     || labeltastresult[fileindex].pic_image_field.substring(length - 4) == ".csv"
     || labeltastresult[fileindex].pic_image_field.substring(length - 3) == ".md"
     || labeltastresult[fileindex].pic_image_field.substring(length - 3) == ".py"
     || labeltastresult[fileindex].pic_image_field.substring(length - 3) == ".sh"){
		
		//文本
		canvas.style.display="none";
		document.getElementById("textcontent").style.display="block";
    getTextContent(dataset_id,labeltastresult[fileindex].pic_image_field);
    $('#textcontent').height(canvas.height-40)
		$("#textcontent").text(textContent);
	}else{
    if(labeltastresult[fileindex].pic_image_field.substring(length - 5) == ".jpeg" 
    || labeltastresult[fileindex].pic_image_field.substring(length - 4) == ".jpg"
    || labeltastresult[fileindex].pic_image_field.substring(length - 4) == ".bmp"
    || labeltastresult[fileindex].pic_image_field.substring(length - 4) == ".gif"
    || labeltastresult[fileindex].pic_image_field.substring(length - 4) == ".png"){
        canvas.style.display="block";
        document.getElementById("textcontent").style.display="none";
        img.src  = ip + "/getgiteaimage?uuid=" + dataset_id + "&filename=" + labeltastresult[fileindex].pic_image_field;
    }else{
      canvas.style.display="none";
      document.getElementById("textcontent").style.display="block";
      $('#textcontent').height(canvas.height)
      $("#textcontent").text("暂不支持预览");

    }
	}
	
	
	var fname = tableData[fileindex].pic_image_field.substring(tableData[fileindex].pic_image_field.lastIndexOf('/') + 1);
  $("#filename").text(fname);  
}

img.onload = function(){

	
    canvas.width = document.getElementById("win_canvas").offsetWidth;
    canvas.height = document.getElementById("win_canvas").offsetHeight-40;
    //调整画布大小
    // if ((img.width/img.height)<(canvas.width/canvas.height)){
    //   canvas.width=canvas.height * img.width / img.height;
    // }
    // else{
    //   canvas.height=canvas.width * img.height / img.width;
    // }
	drawimage();
}

function isEmpty(str){
    if(typeof str == "undefined" || str == null || str == ""){
       return true;
    }
    return false;
}
 
function drawimage() {
	
	parse_labelinfo(labeltastresult[fileindex].label_info);
	
   // 清除画布，准备绘制
    context.clearRect(0, 0, canvas.width, canvas.heigth);
     // modal_context.cleararc 
     
    context.drawImage(img,0,0,img.width,img.height,0,0,canvas.width, canvas.height);
    
     for(var i=0; i<rects.length; i++) {
       var rect = rects[i];
       rectxywh = new Array(4);
       rectxywh_tmp = rect.getXYWH();
       rectxywh[0] = rectxywh_tmp[0] / canvas.width * canvas.width;
       rectxywh[1] = rectxywh_tmp[1] / canvas.height * canvas.height;
       rectxywh[2] = rectxywh_tmp[2] / canvas.width * canvas.width;
       rectxywh[3] = rectxywh_tmp[3] / canvas.height * canvas.height;
       // 绘制矩形

       context.lineWidth = 3;
       
       if(rect.type == "person"){
         context.strokeStyle = color_person[ i % 4];
       }else{
         context.strokeStyle=color_dict[rect.type];   
       }
       
       context.strokeRect(rectxywh[0],rectxywh[1],rectxywh[2],rectxywh[3]);
       context.font = "15px Georgia";
       context.fillStyle= context.strokeStyle;

       context.fillText(rect.type, rectxywh[0],rectxywh[1]-5);
       for(var j=0; j<4; j++){ 
         var p_tmp = rect.points[j];
         var p = new point(0,0);
         p.x = p_tmp.x/ canvas.width * canvas.width;;
         p.y = p_tmp.y / canvas.height * canvas.height;
         context.fillStyle = color_dict["point"];
         context.fillRect(p.x-2,p.y-2,4,4);
       }
     }
 
     
     for (var i=0; i<masks.length; i++){
       context.strokeStyle="purple"
       var mask =masks[i];
       context.lineWidth = 2;
       for (var j=1; j<mask.points.length; j++){
         
         context.beginPath();
         context.moveTo(mask.points[j-1].x, mask.points[j-1].y);
         context.lineTo(mask.points[j].x,mask.points[j].y);
         context.stroke();
         // modal_context.closePath();
       }
       context.moveTo(mask.points[mask.points.length-1].x,mask.points[mask.points.length-1].y);
       context.lineTo(mask.points[0].x,mask.points[0].y);
       context.stroke();
       context.closePath();
       
       for (var j=0; j<mask.points.length; j++){
         var p = mask.points[j]
         context.fillStyle = color_dict["point"];
         context.fillRect(p.x-2,p.y-2,4,4);
       }
     }
 }
 
 
function parse_labelinfo(labelinfo){
	rects.length = 0;
	masks.length = 0;
	pointShapes.length = 0;
	if(!isEmpty(labelinfo)){
		
		var label_arr = JSON.parse(labelinfo);
		
		
		for(var i=0;i<label_arr.length;i++){
		  if(!isEmpty(label_arr[i].mask)){
			  cls=label_arr[i].class_name;
			  var tmpMask = new maskar(getCanvasLocationX(label_arr[i].mask[0]),getCanvasLocationY(label_arr[i].mask[1]),cls);
			  
			  for(var j = 2; j < label_arr[i].mask.length; j+=2){
				  tmpMask.points.push(new point(getCanvasLocationX(label_arr[i].mask[j]),getCanvasLocationY(label_arr[i].mask[j+1])));
			  }
			  
			  if(!isEmpty(label_arr[i].id)){
			    tmpMask.id= label_arr[i].id;
		      }
		      if(!isEmpty(label_arr[i].blurred)){
			     tmpMask.blurred = label_arr[i].blurred;
		      }
		      if(!isEmpty(label_arr[i].goodIllumination)){
			      tmpMask.goodIllumination = label_arr[i].goodIllumination;
		      }
		      if(!isEmpty(label_arr[i].frontview)){
			     tmpMask.frontview = label_arr[i].frontview;
		      }
			  tmpMask.finish = true;
		      masks.push(tmpMask);
			  
		  }else if(!isEmpty(label_arr[i].box)){
			  x1 = getCanvasLocationX(label_arr[i].box[0]);
			  y1 = getCanvasLocationY(label_arr[i].box[1]);
		      x2 = getCanvasLocationX(label_arr[i].box[2]);
		      y2 = getCanvasLocationY(label_arr[i].box[3]);
		      cls=label_arr[i].class_name;
		      score = label_arr[i].score;
		      rect = new rectar(x1,y1,x2,y2,cls,score);
		      if(!isEmpty(label_arr[i].id)){
			    rect.id= label_arr[i].id;
		      }
		      if(!isEmpty(label_arr[i].blurred)){
			     rect.blurred = label_arr[i].blurred;
		      }
		      if(!isEmpty(label_arr[i].goodIllumination)){
			      rect.goodIllumination = label_arr[i].goodIllumination;
		      }
		      if(!isEmpty(label_arr[i].frontview)){
			     rect.frontview = label_arr[i].frontview;
		      }
		      rects.push(rect);
		 }else if(!isEmpty(label_arr[i].keypoints)){
		    cls=label_arr[i].class_name;
		    score = label_arr[i].score;
			var pointShapeObj = new pointShape(getCanvasLocationX(label_arr[i].keypoints[0]),getCanvasLocationY(label_arr[i].keypoints[1]),cls,score);
			pointShapes.push(pointShapeObj);
		 }
	    }
		
	}
}

function point(x,y){
    this.x = x;
    this.y = y;
    this.isSelected = false;
};

function pointShape(x,y,type,score=1.0){
	this.x = x;
    this.y = y;
    this.isSelected = false;
	this.type = type;
	this.score = score;
	this.id =""; //标识
	this.blurred=false;//模糊不清的; 记不清的; 难以区分的; 模棱两可的
	this.goodIllumination = false; //照明
	this.frontview = false;//正面图
}

function rectar(x1,y1,x2,y2, type, score=1.0){
    // this.x = x;
    // this.y = y;
    // this.width = width;
    // this.height = height;
    this.type = type;
    this.score = score;
    //0--1,
    //|  |
    //2--3
    this.points = [new point(x1,y1), new point(x1, y2),new point(x2, y1),new point(x2, y2)];
    this.getXYWH = function(){
      var x_min=Math.min(this.points[0].x,this.points[1].x,this.points[2].x,this.points[3].x);
      var x_max=Math.max(this.points[0].x,this.points[1].x,this.points[2].x,this.points[3].x);
      var y_min=Math.min(this.points[0].y,this.points[1].y,this.points[2].y,this.points[3].y);
      var y_max=Math.max(this.points[0].y,this.points[1].y,this.points[2].y,this.points[3].y);
      return [x_min,y_min,x_max-x_min,y_max-y_min];
    }
    this.getX1Y1X2Y2 = function(){
      var x_min=Math.min(this.points[0].x,this.points[1].x,this.points[2].x,this.points[3].x);
      var x_max=Math.max(this.points[0].x,this.points[1].x,this.points[2].x,this.points[3].x);
      var y_min=Math.min(this.points[0].y,this.points[1].y,this.points[2].y,this.points[3].y);
      var y_max=Math.max(this.points[0].y,this.points[1].y,this.points[2].y,this.points[3].y);
      return [x_min,y_min,x_max,y_max];
    }
    this.getdiapid = function(pid){//获取对角点
      var twooverlapped,fouroverlapped;
      for (var i=0;i<4;i++){
        if ((this.points[pid].x!=this.points[i].x)&&(this.points[pid].y!=this.points[i].y)){
          return i;
        }
        if ((this.points[pid].x!=this.points[i].x)||(this.points[pid].y!=this.points[i].y)){
           twooverlapped=i;
        }
        if (i!=pid) fouroverlapped=i;

      }
      if (twooverlapped)
        return twooverlapped;
      return fouroverlapped;
    }
    this.mouseonpoint = false;
    this.mouseonrect = false;
    this.isSelected = false;
	this.id =""; //标识
	this.blurred=false;//模糊不清的; 记不清的; 难以区分的; 模棱两可的
	this.goodIllumination = true; //照明
	this.frontview = true;//正面图
};



function maskar(x0,y0,type){
  this.type = type;
  this.points = [new point(x0,y0)];
  this.finish = false;
  this.mouseonpoint = false;
  this.mouseonmask = false;
  this.isSelected = false;
  this.getX1Y1 = function(){return [this.points[0].x,this.points[0].y]}
  this.getBound = function(){
    mlen = this.points.length;
    var minX = 999999999, minY = 999999999, maxX = -1, maxY = -1;
    for (var i = 0; i < mlen; i ++){
      if(minX > this.points[i].x){
        minX = this.points[i].x;
      }
      if(maxX < this.points[i].x){
        maxX = this.points[i].x;
      }
      if(minY > this.points[i].y){
        minY = this.points[i].y;
      }
      if(maxY < this.points[i].y){
        maxY = this.points[i].y;
      }
    }
    return [minX, minY, maxX, maxY];
  }
  
  this.id =""; //标识
  this.blurred=false;//模糊不清的; 记不清的; 难以区分的; 模棱两可的
  this.goodIllumination = true; //照明
  this.frontview = true;//正面图
}

function getCanvasLocationX(num){
	return Math.round(num * canvas.width/parseInt(img.width));
}

function getCanvasLocationY(num){
	return Math.round(num * canvas.height/parseInt(img.height));
}


function page(current,pageSize){
  list(current,pageSize);
  showfilelist();
  breadFiles();
  loadimg();
  setPage(tablePageData,pageSize);
}


getLabelInfo(dataset_id);
showlabelflist();


function nextPage(){
   var current = $('#displayPage1').text();
   
   page(current,pageSize);
}

function prePage(){
  var current =$('#displayPage1').text();
  
  if(current > 1){
    
    page(current - 2,pageSize);
  } 
}

function goPage(){
   var goNum = $('#goNum').val();

    var pageTotal = $("#totalNum").text();
    var pageNum = parseInt(pageTotal/pageSize);
    if(pageTotal%pageSize!=0){
        pageNum += 1;
    }else {
        pageNum = pageNum;
    }
    if (goNum<=0){
      alert("请输入大于0的数值");
    }
    else if(goNum<=pageNum){
        page(goNum - 1,pageSize);
    }
    else{
        alert("不能超出总页码！");
    }
}

$("#goNum").keydown(function (e) {
    if (e.keyCode == 13) {
        goPage();
    }
});

  
function setPage(pageData,pageSize){
  
  if (isEmpty(pageData)){
    return;
  }
  var startIndex = pageData.current * pageSize;
  if(pageData.total > 0){
	  startIndex = startIndex + 1;
  }	
  if(startIndex < 10){
	  $('#startIndex').text(" " + (startIndex));
  }else{
	  $('#startIndex').text(startIndex);
  }
  var endIndex = pageData.current * pageSize + pageData.data.length;
  if(endIndex < 10){
	   $('#endIndex').text(" " + (endIndex));
  }else{
	   $('#endIndex').text(endIndex);
  }
 
  $('#totalNum').text(pageData.total);
  $('#displayPage1').text(pageData.current + 1);

  

  if(pageData.current == 0){
    
    $('#prePage').removeAttr("href");
    $('#prePage').attr('style','color:#f5f5f6;');
  }
  else{
    $('#prePage').attr("href","javascript:prePage()");
    $('#prePage').attr('style','color:#000;');
  }

  if((pageData.current + 1) * pageSize >= pageData.total){
    
    $('#nextPage').removeAttr("href");
    $('#nextPage').attr('style','color:#f5f5f6;')
  }
  else{
    $('#nextPage').attr("href","javascript:nextPage()");
    $('#nextPage').attr('style','color:#000;');
  }

  var pageTotal = pageData.total;
  var pageNum = parseInt(pageTotal/pageSize);
  if(pageTotal%pageSize!=0){
      pageNum += 1;
  }else {
      pageNum = pageNum;
  }
  $("#totalPageNum").text(pageNum);
}

function clickfilelist(index){
  fileindex=index;
  loadimg();
  //drawimage();
  breadFiles()
  showfilelist();
}

function clickNext(){
	if(fileindex<tableData.length-1)  {
		next();
	}else{
		if((tablePageData.current + 1) * pageSize >= tablePageData.total){
			return;
		}
		nextPage();
  }
  
}


function next(){
  if(fileindex<tableData.length-1)  {fileindex=fileindex+1;}
  loadimg();
  //drawimage();
  breadFiles()
  showfilelist();
}

function clickLast(){
	if(fileindex == 0){
    lastindex=true;
		prePage();
    lastindex=false;

	}else{
		last();
	}
}

function last(){

  if(fileindex>0)  {fileindex=fileindex-1;} 
  loadimg();
  //drawimage();
  breadFiles();
  showfilelist();  
}


// function showfilelist(){
//     var htmlstr="";
//     for (var i=0;i<labeltastresult.length;i++){
//        var fname = labeltastresult[i].pic_image_field.substring(labeltastresult[i].pic_image_field.lastIndexOf('/') + 1);
//        var lablebg=" style=\"cursor:pointer\"";
//        if (i==fileindex){lablebg=" style=\"background:#eee;color:#5a5a5a;cursor:pointer;\"";}
//        htmlstr = htmlstr+"<tr onclick=\"clickfilelist("+i+");\""+ lablebg+"><td>"+ fname+ "</td></tr>";
//     };
//     document.getElementById("filelist").innerHTML=htmlstr;
// }


function showfilelist(){
  // var filename_title = $('a.section:first').text()
  // filename_title = filename_title.substring(0,filename_title.lastIndexOf('.'))
  var filename_index = labeltastresult[0].pic_image_field.indexOf("/",70);
  filename_title = labeltastresult[0].pic_image_field.substring(filename_index + 1);
  filename_title = filename_title.substring(0,filename_title.indexOf('/'))
  var htmlstr = '';
  // htmlstr += '<div class="ui list">';
  htmlstr += '<div class="item" style="padding:1.2em;border-bottom:0;display: table;width: 100%;">'
  htmlstr += '<i class="caret down icon"></i>'
  htmlstr += '<div class="content" style="background:#fff">'
  htmlstr += '<div class="header" style="color: rgba(0,0,0,.8);font-size: 12px;font-weight: 600;">'+filename_title+'</div>'
  htmlstr += '<div class="list" style="padding:1.2em">'
  
  for (var i=0;i<labeltastresult.length;i++){
    var fname = labeltastresult[i].pic_image_field.substring(labeltastresult[i].pic_image_field.lastIndexOf('/') + 1);
    //console.log(labeltastresult[i])
    if(labeltastresult[i].pic_image_field.length > 70){
        var tmpIndex = labeltastresult[i].pic_image_field.indexOf("/",70);
        //console.log(tmpIndex)
        if(tmpIndex != -1){
            fname = labeltastresult[i].pic_image_field.substring(tmpIndex + 1);
            fname = fname.substring(fname.indexOf('/')+1);
        }
    }
    
    htmlstr += '<div class="item" onclick=\"clickfilelist('+i+');\" style="border-bottom:0;padding-bottom:0.9em;cursor:pointer">'
    htmlstr += '<div class="content" style="background:#fff;padding:0;">'
    if(i==fileindex){
      htmlstr += '<div class="header" style="color: rgba(0,0,0,.8);font-size: 12px;font-weight: 100;color:#0366d6;overflow: hidden;text-overflow:ellipsis;">'+fname+'</div>'
    }
    else{
      htmlstr += '<div class="header" style="color: rgba(0,0,0,.8);font-size: 12px;font-weight: 100;overflow: hidden;text-overflow:ellipsis;">'+fname+'</div>'
    }
    htmlstr += '</div>'
    htmlstr += '</div>'
  };
  htmlstr += '</div>'
  htmlstr += '</div>'
  htmlstr += '</div>'
  document.getElementById("filelist").innerHTML=htmlstr;
}


function breadFiles(){

  // for (var i=0;i<labeltastresult.length;i++){
  //   var fname_full_path=""
  //   if(labeltastresult[i].pic_image_field.length > 70){
  //     var tmp_index = labeltastresult[i].pic_image_field.indexOf("/",70);
      // if(tmp_index != -1){
      //   fname_full_path = labeltastresult[i].pic_image_field.substring(tmp_index + 1);
      // }
  //     var fname_path = fname_full_path.split('/')
  //     html_breadFile += '<div class="section">'+fname_full_path+'.zip'+'</div>'
  //     for(var i=1;i<fname_path.length;i++){
  //       html_breadFile += '<div class="divider" style="opacity:0.8"> / </div>'
  //       html_breadFile += '<div class="section">'+fname_path[i]+'</div>'

  //     }
  //   }
  //   else{

      

  //   }
  // } 
    var fname_full_path=""
    var filename_title = $('a.section:first').text() 
    filename_title = filename_title.substring(0,filename_title.lastIndexOf('.'))
    var tmp_index = tableData[fileindex].pic_image_field.indexOf("/",70);
    if(tmp_index != -1){
      fname_full_path = tableData[fileindex].pic_image_field.substring(tmp_index + 1);
    }
    var fname_path = fname_full_path.split('/')
    //console.log(fname_path)
    // var filename_text = tableData[fileindex].pic_image_field.substring(tableData[fileindex].pic_image_field.lastIndexOf('/')+1)
    var html_breadFile = ''
    // var source_name = filename_title+'.zip'
    // html_breadFile += '<div class="section">'+source_name+'</div>'
    // html_breadFile += '<div class="divider" style="opacity:0.8"> / </div>'
    html_breadFile += '<div class="section">'+filename_title+'</div>'
    html_breadFile += '<div class="divider" style="opacity:0.8"> / </div>'
    for (var i=0;i<fname_path.length;i++){
      html_breadFile += '<div class="section">'+fname_path[i]+'</div>'
      html_breadFile += '<div class="divider" style="opacity:0.8"> / </div>'
    }
    
    document.getElementById("breadFile").innerHTML=html_breadFile

}

function showlabelflist(){
  if(!isEmpty(labelInfo)){
    var resLabelInfo = JSON.parse(labelInfo)
    var textInfo = resLabelInfo["type"]
    var html_labelFile = ''
    for (var i=0;i<textInfo.length;i++){

      html_labelFile += `<span style="display:block;width:70%;margin:0.6em 15%;padding-left:1.5em;padding-top:0.4em;padding-bottom:0.4em;font-size:12px;" class="labelInfo">${textInfo[i]}</span>`
      

    }
    document.getElementById("labellist").innerHTML=html_labelFile
    setColor()
  }
  else{
    return
  }

}
function setColor(){
  colorinfo1 = ['rgba(0, 199, 255, 0.4)','rgba(114, 46, 209, 0.4)','rgba(188, 100, 164, 0.4)','rgba(153, 204, 0, 0.4)','rgba(51, 204, 153, 0.4)','rgba(255, 204, 51, 0.4)',
  'rgba(71, 255, 71, 0.4)','rgba(255, 154, 71, 0.4)','rgba(71, 126, 255, 0.4)','rgba(71, 255, 255, 0.4)','rgba(255, 247, 71, 0.4)','rgba(196, 127, 255, 0.4)','rgba(233, 84, 100, 0.4)',
  'rgba(255, 71, 204, 0.4)',' rgba(43, 199, 160, 0.4)']
  colorinfo2 = ['#00C7FF','#722ED1','#BC64A4','#99CC00','#33CC99','#FFCC33','#47FF47','#FF9A47','#477EFF','#47FFFF','#FFF747','#C47FFF','#E95464','#FF47CC','#2BC7A0']
  var el_span = document.querySelectorAll("span.labelInfo")
  for (var i=0;i<el_span.length;i++){
    // var colorinfo = ~~(Math.random()*(1<<24))
    // var colorinfo1 = '#'+(colorinfo).toString(16)
    // var colorinfo2 = '#'+(colorinfo+100).toString(16)
    
    el_span[i].style.backgroundColor = colorinfo1[i]
    el_span[i].style.borderLeft = '5px solid'+ colorinfo2[i]
  }

}
function getLabelInfo(uuid){
  $.ajax({
      type:"GET",
      url:ip + "/getlabelinfo",
      headers: {
        authorization:token,
      },
      dataType:"text",
      data:{
        'uuid':uuid
      },
      async:false,
      success:function(json){
        labelInfo = json;
      },
      error:function(response) {
      
      }
  });

}