You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
581 lines
19 KiB
581 lines
19 KiB
export const AnalysisCss = (ele:any) =>{
|
|
let styleObject:any = {}
|
|
if(ele['marginTop']){
|
|
if(ele['marginTop'] != "auto"){
|
|
styleObject['margin-top'] = ele['marginTop']+"px";
|
|
}else{
|
|
styleObject['margin-top'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginLeft']){
|
|
if(ele['marginLeft'] != "auto"){
|
|
styleObject['margin-left'] = ele['marginLeft']+"px";
|
|
}else{
|
|
styleObject['margin-left'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginRight']){
|
|
if(ele['marginRight'] != "auto"){
|
|
styleObject['margin-right'] = ele['marginRight']+"px";
|
|
}else{
|
|
styleObject['margin-right'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginBot']){
|
|
if(ele['marginBot'] != "auto"){
|
|
styleObject['margin-bottom'] = ele['marginBot']+"px";
|
|
}else{
|
|
styleObject['margin-bottom'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingTop']){
|
|
if(ele['paddingTop'] != "auto"){
|
|
styleObject['padding-top'] = ele['paddingTop']+"px";
|
|
}else{
|
|
styleObject['padding-top'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingLeft']){
|
|
if(ele['paddingLeft'] != "auto"){
|
|
styleObject['padding-left'] = ele['paddingLeft']+"px";
|
|
}else{
|
|
styleObject['padding-left'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingRight']){
|
|
if(ele['paddingRight'] != "auto"){
|
|
styleObject['padding-right'] = ele['paddingRight']+"px";
|
|
}else{
|
|
styleObject['padding-right'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingBot']){
|
|
if(ele['paddingBot'] != "auto"){
|
|
styleObject['padding-bottom'] = ele['paddingBot']+"px";
|
|
}else{
|
|
styleObject['padding-bottom'] = "0px";
|
|
}
|
|
}
|
|
if(ele['divbox']){
|
|
if(ele['divbox'] == "gap"){
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'gap'));
|
|
}else{
|
|
// styleObject['border-radius'] = yuanJiaoAnalysis(ele,'gap');
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all'));
|
|
}
|
|
}else{
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all'));
|
|
}
|
|
|
|
let borderLink = ""
|
|
|
|
if(ele["boxWidth"]){
|
|
borderLink+=ele["boxWidth"]+"px "
|
|
}
|
|
if(ele["contourProfile"]) {
|
|
borderLink+=" " +ele["contourProfile"] + " "
|
|
}
|
|
if(ele["lineColorVal"]) {
|
|
borderLink+=" " +ele["lineColorVal"] + " "
|
|
}
|
|
if(ele["border"] && borderLink != ""){
|
|
switch(ele["border"]){
|
|
case 1:
|
|
styleObject['border']=borderLink
|
|
break;
|
|
case 2:
|
|
styleObject['border-top']=borderLink
|
|
break;
|
|
case 3:
|
|
styleObject['border-left']=borderLink
|
|
break;
|
|
case 4:
|
|
styleObject['border-right']=borderLink
|
|
break;
|
|
case 5:
|
|
styleObject['border-bottom']=borderLink
|
|
break;
|
|
default:
|
|
styleObject['border']= "0px"
|
|
}
|
|
}
|
|
|
|
if(ele["transparency"] || ele["transparency"] == 0) {
|
|
styleObject['opacity'] = ele['transparency']/100;
|
|
}
|
|
|
|
if(ele["backgroundColor"]) {
|
|
styleObject['background-color'] = ele['backgroundColor']
|
|
}
|
|
|
|
if(ele['width']){
|
|
if(ele['width'] != ""){
|
|
styleObject['width'] = ele['width'].toString()+"px";
|
|
}
|
|
}
|
|
if(ele['widthMax'] && ele['widthMax'] != ""){
|
|
styleObject['max-width'] = ele['widthMax'].toString()+"px";
|
|
}
|
|
if(ele['widthMin'] && ele['widthMin'] != ""){
|
|
styleObject['min-width'] = ele['widthMin'].toString()+"px";
|
|
}
|
|
if(ele['height'] && ele['height'] != ""){
|
|
styleObject['height'] = ele['height'].toString()+"px";
|
|
}
|
|
if(ele['heightMax'] && ele['heightMax'] != ""){
|
|
styleObject['max-height'] = ele['heightMax'].toString()+"px";
|
|
}
|
|
if(ele['heightMin'] && ele['heightMin'] != ""){
|
|
styleObject['min-height'] = ele['heightMin'].toString()+"px";
|
|
}
|
|
if(ele['objectFit'] && ele['objectFit'] != ""){
|
|
switch(ele['objectFit']){
|
|
case "fill":
|
|
styleObject['object-fit'] = "fill";
|
|
break;
|
|
case "contain":
|
|
styleObject['object-fit'] = "contain";
|
|
break;
|
|
case "vover":
|
|
styleObject['object-fit'] = "cover";
|
|
break;
|
|
case "none":
|
|
styleObject['object-fit'] = "none";
|
|
break;
|
|
case "scaleDown":
|
|
styleObject['object-fit'] = "scale-down";
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
}
|
|
if(ele['textAlign'] && ele['textAlign'] != ""){
|
|
styleObject['text-align'] = ele['textAlign'];
|
|
}
|
|
if(ele['fontStyle'] && ele['fontStyle'] != ""){
|
|
styleObject['font-style'] = ele['fontStyle'];
|
|
}
|
|
if(ele['textecoration'] && ele['textecoration'] != ""){
|
|
styleObject['text-decoration'] = ele['textecoration'];
|
|
}
|
|
if(ele['fontSize'] && ele['fontSize'] != ""){
|
|
styleObject['font-size'] = ele['fontSize'].toString()+"px";
|
|
}
|
|
if(ele['fontFamily'] && ele['fontFamily'] != ""){
|
|
styleObject['font-family'] = ele['fontFamily'];
|
|
}
|
|
if(ele['fontHight'] && ele['fontHight'] != ""){
|
|
styleObject['line-height'] = ele['fontHight'].toString()+"px";
|
|
}
|
|
if(ele['fontWeight'] && ele['fontWeight'] != ""){
|
|
styleObject['font-weight'] = ele['fontWeight'];
|
|
}
|
|
if(ele['fontColor'] && ele['fontColor'] != ""){
|
|
styleObject['color'] = ele['fontColor'];
|
|
}
|
|
console.log("分析css==>",styleObject);
|
|
return styleObject
|
|
}
|
|
|
|
const yuanJiaoAnalysis = (ele:any,types:string) => {
|
|
if(types == "gap"){
|
|
let borRad:any = {}
|
|
for(let k in ele){
|
|
if(k == 'radiusLeftTop'){
|
|
if(ele[k] != ""){
|
|
borRad['border-top-left-radius'] = ele[k]+"px";
|
|
}else{
|
|
borRad['border-top-left-radius'] = "0px";
|
|
}
|
|
}
|
|
if(k == 'radiusrightTop'){
|
|
if(ele[k] != ""){
|
|
borRad['border-top-right-radius'] = ele[k]+"px";
|
|
}else{
|
|
borRad['border-top-right-radius'] = "0px";
|
|
}
|
|
}
|
|
if(k == 'radiusLeftBot'){
|
|
if(ele[k] != ""){
|
|
borRad['border-bottom-left-radius'] = ele[k]+"px";
|
|
}else{
|
|
borRad['border-bottom-left-radius'] = "0px";
|
|
}
|
|
}
|
|
if(k == 'radiusrightBot'){
|
|
if(ele[k] != ""){
|
|
borRad['border-bottom-right-radius'] = ele[k]+"px";
|
|
}else{
|
|
borRad['border-bottom-right-radius'] = "0px";
|
|
}
|
|
}
|
|
}
|
|
// console.log("borRad",borRad)
|
|
return borRad;
|
|
}else{
|
|
let borRad:any = {}
|
|
for(let k in ele){
|
|
if(k == 'borderRadius'){
|
|
if(ele[k] != ""){
|
|
borRad['border-radius'] = ele[k]+"px";
|
|
}else{
|
|
borRad['border-radius'] = "0px";
|
|
}
|
|
}
|
|
}
|
|
return borRad;
|
|
}
|
|
}
|
|
|
|
export const AnalysisInputCss = (ele:any,sty:number) =>{
|
|
let styleObject:any = {}
|
|
if(sty == 1 || sty == 2){
|
|
if(ele['marginTop']){
|
|
if(ele['marginTop'] != "auto"){
|
|
styleObject['margin-top'] = ele['marginTop']+"px";
|
|
}else{
|
|
styleObject['margin-top'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginLeft']){
|
|
if(ele['marginLeft'] != "auto"){
|
|
styleObject['margin-left'] = ele['marginLeft']+"px";
|
|
}else{
|
|
styleObject['margin-left'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginRight']){
|
|
if(ele['marginRight'] != "auto"){
|
|
styleObject['margin-right'] = ele['marginRight']+"px";
|
|
}else{
|
|
styleObject['margin-right'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginBot']){
|
|
if(ele['marginBot'] != "auto"){
|
|
styleObject['margin-bottom'] = ele['marginBot']+"px";
|
|
}else{
|
|
styleObject['margin-bottom'] = "0px";
|
|
}
|
|
}
|
|
if(ele['divbox']){
|
|
if(ele['divbox'] == "gap"){
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'gap'));
|
|
}else{
|
|
// styleObject['border-radius'] = yuanJiaoAnalysis(ele,'gap');
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all'));
|
|
}
|
|
}else{
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all'));
|
|
}
|
|
|
|
let borderLink = ""
|
|
|
|
if(ele["boxWidth"]){
|
|
borderLink+=ele["boxWidth"]+"px "
|
|
}
|
|
if(ele["contourProfile"]) {
|
|
borderLink+=" " +ele["contourProfile"] + " "
|
|
}
|
|
if(ele["lineColorVal"]) {
|
|
borderLink+=" " +ele["lineColorVal"] + " "
|
|
}
|
|
if(ele["border"] && borderLink != ""){
|
|
switch(ele["border"]){
|
|
case 1:
|
|
styleObject['border']=borderLink
|
|
break;
|
|
case 2:
|
|
styleObject['border-top']=borderLink
|
|
break;
|
|
case 3:
|
|
styleObject['border-left']=borderLink
|
|
break;
|
|
case 4:
|
|
styleObject['border-right']=borderLink
|
|
break;
|
|
case 5:
|
|
styleObject['border-bottom']=borderLink
|
|
break;
|
|
default:
|
|
styleObject['border']= "0px"
|
|
}
|
|
}
|
|
if(ele['width']){
|
|
if(ele['width'] != ""){
|
|
styleObject['width'] = ele['width'].toString()+"px";
|
|
}
|
|
}
|
|
if(ele['widthMax'] && ele['widthMax'] != ""){
|
|
styleObject['max-width'] = ele['widthMax'].toString()+"px";
|
|
}
|
|
if(ele['widthMin'] && ele['widthMin'] != ""){
|
|
styleObject['min-width'] = ele['widthMin'].toString()+"px";
|
|
}
|
|
if(ele['height'] && ele['height'] != ""){
|
|
styleObject['height'] = ele['height'].toString()+"px";
|
|
}
|
|
if(ele['heightMax'] && ele['heightMax'] != ""){
|
|
styleObject['max-height'] = ele['heightMax'].toString()+"px";
|
|
}
|
|
if(ele['heightMin'] && ele['heightMin'] != ""){
|
|
styleObject['min-height'] = ele['heightMin'].toString()+"px";
|
|
}
|
|
if(ele['objectFit'] && ele['objectFit'] != ""){
|
|
switch(ele['objectFit']){
|
|
case "fill":
|
|
styleObject['object-fit'] = "fill";
|
|
break;
|
|
case "contain":
|
|
styleObject['object-fit'] = "contain";
|
|
break;
|
|
case "vover":
|
|
styleObject['object-fit'] = "cover";
|
|
break;
|
|
case "none":
|
|
styleObject['object-fit'] = "none";
|
|
break;
|
|
case "scaleDown":
|
|
styleObject['object-fit'] = "scale-down";
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
}
|
|
}
|
|
if(sty == 1 || sty == 3){
|
|
if(ele['paddingTop']){
|
|
if(ele['paddingTop'] != "auto"){
|
|
styleObject['padding-top'] = ele['paddingTop']+"px";
|
|
}else{
|
|
styleObject['padding-top'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingLeft']){
|
|
if(ele['paddingLeft'] != "auto"){
|
|
styleObject['padding-left'] = ele['paddingLeft']+"px";
|
|
}else{
|
|
styleObject['padding-left'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingRight']){
|
|
if(ele['paddingRight'] != "auto"){
|
|
styleObject['padding-right'] = ele['paddingRight']+"px";
|
|
}else{
|
|
styleObject['padding-right'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingBot']){
|
|
if(ele['paddingBot'] != "auto"){
|
|
styleObject['padding-bottom'] = ele['paddingBot']+"px";
|
|
}else{
|
|
styleObject['padding-bottom'] = "0px";
|
|
}
|
|
}
|
|
if(ele['textAlign'] && ele['textAlign'] != ""){
|
|
styleObject['text-align'] = ele['textAlign'];
|
|
}
|
|
if(ele['fontStyle'] && ele['fontStyle'] != ""){
|
|
styleObject['font-style'] = ele['fontStyle'];
|
|
}
|
|
if(ele['textecoration'] && ele['textecoration'] != ""){
|
|
styleObject['text-decoration'] = ele['textecoration'];
|
|
}
|
|
if(ele['fontSize'] && ele['fontSize'] != ""){
|
|
styleObject['font-size'] = ele['fontSize'].toString()+"px";
|
|
}
|
|
if(ele['fontFamily'] && ele['fontFamily'] != ""){
|
|
styleObject['font-family'] = ele['fontFamily'];
|
|
}
|
|
if(ele['fontHight'] && ele['fontHight'] != ""){
|
|
styleObject['line-height'] = ele['fontHight'].toString()+"px";
|
|
}
|
|
if(ele['fontWeight'] && ele['fontWeight'] != ""){
|
|
styleObject['font-weight'] = ele['fontWeight'];
|
|
}
|
|
if(ele['fontColor'] && ele['fontColor'] != ""){
|
|
styleObject['color'] = ele['fontColor'];
|
|
}
|
|
}
|
|
if(sty == 1 || sty == 4){
|
|
if(ele['marginTop']){
|
|
if(ele['marginTop'] != "auto"){
|
|
styleObject['margin-top'] = ele['marginTop']+"px";
|
|
}else{
|
|
styleObject['margin-top'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginLeft']){
|
|
if(ele['marginLeft'] != "auto"){
|
|
styleObject['margin-left'] = ele['marginLeft']+"px";
|
|
}else{
|
|
styleObject['margin-left'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginRight']){
|
|
if(ele['marginRight'] != "auto"){
|
|
styleObject['margin-right'] = ele['marginRight']+"px";
|
|
}else{
|
|
styleObject['margin-right'] = "0px";
|
|
}
|
|
}
|
|
if(ele['marginBot']){
|
|
if(ele['marginBot'] != "auto"){
|
|
styleObject['margin-bottom'] = ele['marginBot']+"px";
|
|
}else{
|
|
styleObject['margin-bottom'] = "0px";
|
|
}
|
|
}
|
|
if(ele['divbox']){
|
|
if(ele['divbox'] == "gap"){
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'gap'));
|
|
}else{
|
|
// styleObject['border-radius'] = yuanJiaoAnalysis(ele,'gap');
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all'));
|
|
}
|
|
}else{
|
|
Object.assign(styleObject, yuanJiaoAnalysis(ele,'all'));
|
|
}
|
|
|
|
let borderLink = ""
|
|
|
|
if(ele["boxWidth"]){
|
|
borderLink+=ele["boxWidth"]+"px "
|
|
}
|
|
if(ele["contourProfile"]) {
|
|
borderLink+=" " +ele["contourProfile"] + " "
|
|
}
|
|
if(ele["lineColorVal"]) {
|
|
borderLink+=" " +ele["lineColorVal"] + " "
|
|
}
|
|
if(ele["border"] && borderLink != ""){
|
|
switch(ele["border"]){
|
|
case 1:
|
|
styleObject['border']=borderLink
|
|
break;
|
|
case 2:
|
|
styleObject['border-top']=borderLink
|
|
break;
|
|
case 3:
|
|
styleObject['border-left']=borderLink
|
|
break;
|
|
case 4:
|
|
styleObject['border-right']=borderLink
|
|
break;
|
|
case 5:
|
|
styleObject['border-bottom']=borderLink
|
|
break;
|
|
default:
|
|
styleObject['border']= "0px"
|
|
}
|
|
}
|
|
if(ele['width']){
|
|
if(ele['width'] != ""){
|
|
styleObject['width'] = ele['width'].toString()+"px";
|
|
}
|
|
}
|
|
if(ele['widthMax'] && ele['widthMax'] != ""){
|
|
styleObject['max-width'] = ele['widthMax'].toString()+"px";
|
|
}
|
|
if(ele['widthMin'] && ele['widthMin'] != ""){
|
|
styleObject['min-width'] = ele['widthMin'].toString()+"px";
|
|
}
|
|
if(ele['height'] && ele['height'] != ""){
|
|
styleObject['height'] = ele['height'].toString()+"px";
|
|
}
|
|
if(ele['heightMax'] && ele['heightMax'] != ""){
|
|
styleObject['max-height'] = ele['heightMax'].toString()+"px";
|
|
}
|
|
if(ele['heightMin'] && ele['heightMin'] != ""){
|
|
styleObject['min-height'] = ele['heightMin'].toString()+"px";
|
|
}
|
|
if(ele['objectFit'] && ele['objectFit'] != ""){
|
|
switch(ele['objectFit']){
|
|
case "fill":
|
|
styleObject['object-fit'] = "fill";
|
|
break;
|
|
case "contain":
|
|
styleObject['object-fit'] = "contain";
|
|
break;
|
|
case "vover":
|
|
styleObject['object-fit'] = "cover";
|
|
break;
|
|
case "none":
|
|
styleObject['object-fit'] = "none";
|
|
break;
|
|
case "scaleDown":
|
|
styleObject['object-fit'] = "scale-down";
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
}
|
|
if(ele['textAlign'] && ele['textAlign'] != ""){
|
|
styleObject['text-align'] = ele['textAlign'];
|
|
}
|
|
}
|
|
if(sty == 1 || sty == 5){
|
|
if(ele['paddingTop']){
|
|
if(ele['paddingTop'] != "auto"){
|
|
styleObject['padding-top'] = ele['paddingTop']+"px";
|
|
}else{
|
|
styleObject['padding-top'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingLeft']){
|
|
if(ele['paddingLeft'] != "auto"){
|
|
styleObject['padding-left'] = ele['paddingLeft']+"px";
|
|
}else{
|
|
styleObject['padding-left'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingRight']){
|
|
if(ele['paddingRight'] != "auto"){
|
|
styleObject['padding-right'] = ele['paddingRight']+"px";
|
|
}else{
|
|
styleObject['padding-right'] = "0px";
|
|
}
|
|
}
|
|
if(ele['paddingBot']){
|
|
if(ele['paddingBot'] != "auto"){
|
|
styleObject['padding-bottom'] = ele['paddingBot']+"px";
|
|
}else{
|
|
styleObject['padding-bottom'] = "0px";
|
|
}
|
|
}
|
|
if(ele['fontStyle'] && ele['fontStyle'] != ""){
|
|
styleObject['font-style'] = ele['fontStyle'];
|
|
}
|
|
if(ele['textecoration'] && ele['textecoration'] != ""){
|
|
styleObject['text-decoration'] = ele['textecoration'];
|
|
}
|
|
if(ele['fontSize'] && ele['fontSize'] != ""){
|
|
styleObject['font-size'] = ele['fontSize'].toString()+"px";
|
|
}
|
|
if(ele['fontFamily'] && ele['fontFamily'] != ""){
|
|
styleObject['font-family'] = ele['fontFamily'];
|
|
}
|
|
if(ele['fontHight'] && ele['fontHight'] != ""){
|
|
styleObject['line-height'] = ele['fontHight'].toString()+"px";
|
|
}
|
|
if(ele['fontWeight'] && ele['fontWeight'] != ""){
|
|
styleObject['font-weight'] = ele['fontWeight'];
|
|
}
|
|
if(ele['fontColor'] && ele['fontColor'] != ""){
|
|
styleObject['color'] = ele['fontColor'];
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if(ele["backgroundColor"]) {
|
|
styleObject['background-color'] = ele['backgroundColor']
|
|
}
|
|
if(ele["transparency"] || ele["transparency"] == 0) {
|
|
styleObject['opacity'] = ele['transparency']/100;
|
|
}
|
|
return styleObject;
|
|
}
|
|
|