JavaProjectRepo/business-css/frontend/src/components/antvx6/materialmodel.vue

<script lang="ts">
export default {
  name: "物料信息",
};
</script>

<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { searchMaterialsPage, saveOrUpdate, materialsById} from "@/api/business/database/material";
import { getToken } from '@/utils/auth'
const emit = defineEmits([ 'closeMaterialModel']);

const props = defineProps({
  projectInfo: {
    required: false,
    type: Object,
    default: {}
  },
  
  deviceInfo:{
    required: false,
    type: Object,
    default: {}
  },
  materialInfo: {
    required: false,
    type: Object,
    default: {}
  },
  materialId: {
    required: false,
    type: String,
    default: ""
  },
  deviceTypetype: {
    required: false,
    type: String,
    default: ''
  },
})
const deviceName:any = ref("") // 设备名称


//新建物料数据-确认按钮/修改按钮
function confirmClick(formEl: any) {
  formEl.validate((valid: any) => {
    if (valid) {
      const params = {
        projectId: props.projectInfo.projectId,
        materialId: props.materialId,
        name: info.value.name,
        code: info.value.code,
        uConcentration: info.value.uConcentration,
        uo2Density: info.value.uo2Density,
        uEnrichment: info.value.uEnrichment,
        puConcentration: info.value.puConcentration,
        puo2Density: info.value.puo2Density,
        ePu238: info.value.ePu238,
        ePu239: info.value.ePu239,
        ePu240: info.value.ePu240,
        ePu241: info.value.ePu241,
        ePu242: info.value.ePu242,
        hno3Acidity: info.value.hno3Acidity,
        h2c2o4Concentration: info.value.h2c2o4Concentration,
        organicRatio: info.value.organicRatio,
        moistureContent: info.value.moistureContent,
        customAttrs: JSON.stringify(customAttrsData.value),
        iconBase64: info.value.iconBase64,
      }
      saveOrUpdate(params).then((res:any) => {
        if(res == true){
          emit('closeMaterialModel', params) 
        }
      });
    }
  });
}
onMounted(() => {
  deviceName.value = props.deviceInfo.name
  if(props.materialId != null){
    materialsById(props.materialId).then((res:any) => {
       
      if(res!= null && res != ""){
        editClick(res)
        info.value.iconBase64 = res.iconBase64;
      }
       
    });
  }else{
     editClick(props.materialInfo)
  }
  


});
const infoForm = ref();
const info: any = ref({
  code: "",
  type: null,
  size: {},
  name: "",
  description: "",
  uConcentration: "",
  uo2Density: "",
  uEnrichment: "",
  puConcentration: "",
  puo2Density: "",
  ePu238: "",
  ePu239: "",
  ePu240: "",
  ePu241: "",
  ePu242: "",
  hno3Acidity: "",
  h2c2o4Concentration: "",
  organicRatio: "",
  moistureContent: "",
  iconBase64: ""
});
const josnInfo: any = ref({}) // 设备信息
const validator1 = (rule: any, value: any, callback: any) => {
  if (!value || value === '') {
    callback();
    return;
  }
  if (!/^\d+(\.\d+)?$/.test(value)) {
    callback(new Error('请输入有效的数字或小数'));
  } else if (parseFloat(value) <= 0) {
    callback(new Error('数字必须大于 0'));
  } else {
    callback();
  }
}
const validator2 = (rule: any, value: any, callback: any) => {
  if (!value || value === '') {
    callback();
    return;
  }
  if (!/^\d+(\.\d+)?$/.test(value)) {
    callback(new Error('请输入有效的数字或小数'));
  } else if (parseFloat(value) <= 0) {
    callback(new Error('必须大于 0'));
  }else if (parseFloat(value) > 1) {
    callback(new Error('必须小于等于 1'));
  } else {
    callback();
  }
}
const validator3 = (rule: any, value: any, callback: any) => {
  if (!value || value === '') {
    callback();
    return;
  }
   let ePu238 = 0;
   let ePu239 = 0;
   let ePu240 = 0;
   let ePu241 = 0;
   let ePu242 = 0;
   if(info.value.ePu238 != null && info.value.ePu238 != ""){
    ePu238 = parseFloat(info.value.ePu238);
   }
   if(info.value.ePu239 != null && info.value.ePu239 != ""){
    ePu239 = parseFloat(info.value.ePu239);
   }    
   if(info.value.ePu240 != null && info.value.ePu240 != ""){
    ePu240 = parseFloat(info.value.ePu240);
   }    
   if(info.value.ePu241 != null && info.value.ePu241 != ""){
    ePu241 = parseFloat(info.value.ePu241);
   }    
   if(info.value.ePu242 != null && info.value.ePu242 != ""){
    ePu242 = parseFloat(info.value.ePu242);
   }    

  if (!/^\d+(\.\d+)?$/.test(value)) {
    callback(new Error('请输入有效的数字或小数'));
  } else if (parseFloat(value) <= 0) {
    callback(new Error('请输入小数'));
  }else if (ePu238 + ePu239 + ePu240 + ePu241 + ePu242 > 1.005 || ePu238 + ePu239 + ePu240 + ePu241 + ePu242 <0.995) {
    callback(new Error(' PU占比相加必须等于1'));
  } else {
    callback();
  }
}

// 失理输入框失去焦点事件
function handleBlur() {
  if(infoForm.value != null){
    infoForm.value.validateField(['ePu238', 'ePu239', 'ePu240', 'ePu241', 'ePu242']);
  } 
}

const validateNotEmpty = (rule: any, value: any, callback: any) => {
  if (value.length > 100) {
    callback(new Error('物料数据名称最多100个字符'));
  }else if (!value || value.trim() === '') {
    callback(new Error('不能为空或仅含空格'));
  } else {
    callback();
  }
};
//新建物料数据
const rules = ref({
  name: [
    { required: true, message: '请输入物料数据名称', trigger: 'blur' },
    { validator: validateNotEmpty, trigger: 'blur' }
  ],
  uConcentration: [
      {
      validator: validator1,
      trigger: 'blur'
    }
  ],
  uo2Density: [
    {
      validator: validator1,
      trigger: 'blur'
    }
  ],
  uEnrichment: [{
    validator: validator2,
    trigger: 'blur'
  }],
  puConcentration: [
    {
      validator: validator1,
      trigger: 'blur'
    }
  ],
  puo2Density: [
    {
      validator: validator1,
      trigger: 'blur'
    }
  ],
  ePu238: [
    {
      validator: validator3,
      trigger: 'blur'
    }
  ],
  ePu239: [
    {
      validator: validator3,
      trigger: 'blur'
    }
  ],
  ePu240: [
    {
      validator: validator3,
      trigger: 'blur'
    }
  ],
  ePu241: [
    {
      validator: validator3,
      trigger: 'blur'
    }
  ],
  ePu242: [
    {
      validator: validator3,
      trigger: 'blur'
    }
  ],




  hno3Acidity: [
    {
      validator: validator1,
      trigger: 'blur'
    }
  ],
  h2c2o4Concentration: [
    {
      validator: validator1,
      trigger: 'blur'
    }
  ],
  organicRatio: [
    {
      validator: validator2,
      trigger: 'blur'
    }
  ],
  moistureContent: [
    {
      validator: validator2,
      trigger: 'blur'
    }
  ],
});
const isEdit = ref(false) // 是否编辑设备
function editClick(row: any) {
  info.value = JSON.parse(JSON.stringify(row));

  if(row.size != null){
    josnInfo.value = JSON.parse(row.size);
  }
  isEdit.value = true;
}


// 处理数字输入的过滤
function handleNumberInput(field: string) {
  // 过滤输入，只允许数字和小数点
  info.value[field] = info.value[field].replace(/[^\d.]/g, '');
  // 确保只有一个小数点
  const parts = info.value[field].split('.');
  if (parts.length > 2) {
    info.value[field] = parts[0] + '.' + parts.slice(1).join('');
  }
}
const customAttrsData:any = ref([]) // 自定义属性数据
// 处理数字输入的过滤
function tableNumberInput(index:any, field: string) {
  // 过滤输入，只允许数字和小数点
  customAttrsData.value[index][field] = customAttrsData.value[index][field].replace(/[^\d.]/g, '');
  // 确保只有一个小数点
  const parts = customAttrsData.value[index][field].split('.');
  if (parts.length > 2) {
    customAttrsData.value[index][field] = parts[0] + '.' + parts.slice(1).join('');
  }
}

function removeAttr(index:any){
  customAttrsData.value.splice(index, 1);
}
function addAttr(){
  customAttrsData.value.push({
    name: null,
    value: null,
    unit: null,
  });
}
function handleClose(){
  emit('closeMaterialModel', false) 
}


const isDialogMaterial = ref(false) // 是否显示选择物料弹窗 
const isAcitve:any = ref(-1) // 选中物料索引
const selectedMaterial:any = ref({}) // 选中物料
const ingredientData:any = ref([]) // 自定义属性数据
function dialogMaterialOpen(){
  isAcitve.value = -1
  gettableData()
  isDialogMaterial.value = true
}
function dialogMaterialClose(){
  isDialogMaterial.value = false
}
const materialList:any = ref([]) // 物料列表

function gettableData() { // 获取物料列表
  let params = {
    pageNum: 1,
    pageSize: 99,
  };
  searchMaterialsPage(params).then((result:any) => {
    materialList.value = result.records;
  }).catch((err) => {
  });
}
const iconBase64:any = ref("") // 物料颜色
function handleClick(item:any, index:any){
  iconBase64.value = item.iconBase64
  ingredientData.value = []
  ingredientData.value.push({
    key: "铀浓度（g/L）",
    value:  item.uConcentration,
    unit: "",
  },{
    key: "氧化铀密度（g/cm3）",
    value:  item.uo2Density,
    unit: "",
  },{
    key: "铀富集度",
    value:  item.uEnrichment,
    unit: "",
  },{
    key: "钚浓度（g/L）",
    value:  item.puConcentration,
    unit: "",
  },{
    key: "氧化钚密度（g/cm3）",
    value:  item.puo2Density,
    unit: "",
  },{
    key: "PU-238占比",
    value:  item.ePu238,
    unit: "",
  },{
    key: "PU-239占比",
    value:  item.ePu239,
    unit: "",
  },{
    key: "PU-240占比",
    value:  item.ePu240,
    unit: "",
  },{
    key: "PU-241占比",
    value:  item.ePu241,
    unit: "",
  },{
    key: "PU-242占比",
    value:  item.ePu242,
    unit: "",
  },{
    key: "硝酸酸度（mol/L）",
    value:  item.hno3Acidity,
    unit: "",
  },{
    key: "草酸浓度（mol/L）",
    value:  item.h2c2o4Concentration,
    unit: "",
  },{
    key: "有机相比例",
    value:  item.organicRatio,
    unit: "",
  },{
    key: "含水率",
    value:  item.moistureContent,
    unit: "",
  })
  let tempData = []
  if(item.customAttrs !=null && item.customAttrs != ""){
    tempData = JSON.parse(item.customAttrs)
  }
  for(let i = 0; i < tempData.length; i++){
    let attr = tempData[i]
    ingredientData.value.push({
      key: attr.key,
      value: attr.value,
      unit: attr.unit,
    })
  }
  selectedMaterial.value = item
  isAcitve.value = index

}
function confirmMaterial(){
  info.value = {
    materialId: props.materialId,
    name: selectedMaterial.value.name,
    code: selectedMaterial.value.code,
    uConcentration: selectedMaterial.value.uConcentration,
    uo2Density: selectedMaterial.value.uo2Density,
    uEnrichment: selectedMaterial.value.uEnrichment,
    puConcentration: selectedMaterial.value.puConcentration,
    puo2Density: selectedMaterial.value.puo2Density,
    ePu238: selectedMaterial.value.ePu238,
    ePu239: selectedMaterial.value.ePu239,
    ePu240: selectedMaterial.value.ePu240,
    ePu241: selectedMaterial.value.ePu241,
    ePu242: selectedMaterial.value.ePu242,
    hno3Acidity: selectedMaterial.value.hno3Acidity,
    h2c2o4Concentration: selectedMaterial.value.h2c2o4Concentration,
    organicRatio: selectedMaterial.value.organicRatio,
    moistureContent: selectedMaterial.value.moistureContent,
    customAttrs: selectedMaterial.value.customAttrs,
    iconBase64: iconBase64.value,
  }
  customAttrsData.value = []
  if(selectedMaterial.value.customAttrs !=null && selectedMaterial.value.customAttrs != ""){
    customAttrsData.value = JSON.parse(selectedMaterial.value.customAttrs)
  }
  isDialogMaterial.value = false
}

function uploadIconBaseChange(file:any){
  var reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    info.value.iconBase64 =reader.result
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}
function delIconBase(){
  info.value.iconBase64 = " "
}

</script>

<template>
  <div class="materialmodel-box">
    <el-form ref="infoForm" :model="info" :rules="rules" label-width="220px" 
      style="height: calc(100vh - 200px) ; overflow: auto;">
      <div style="display: flex;align-items: center;">
        <el-form-item label="所属设备"label-width="80px" style="margin-right: 60px;">
          <el-input v-model="deviceName" style="width: 300px" placeholder="" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所属物料" prop="name" label-width="80px">
          <el-input v-model="info.name" style="width: 280px"  placeholder=""></el-input>
          <el-button type="primary" style="margin-left: 10px" @click="dialogMaterialOpen">选择物料</el-button>
        </el-form-item>
      </div>
    <div style="display: flex;align-items: center;padding: 20px 0;">
      <div class="materialmodel-title-line"></div>
      <div>物料成分</div>
    </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="铀浓度（g/L）" prop="uConcentration">
          <el-input v-model="info.uConcentration" style="width: 100%" placeholder="" @input="handleNumberInput('uConcentration')"></el-input>
        </el-form-item>
        <el-form-item label="氧化铀密度（g/cm3）" prop="uo2Density">
          <el-input v-model="info.uo2Density" style="width: 100%" placeholder="" @input="handleNumberInput('uo2Density')"></el-input>
        </el-form-item>
      </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="铀富集度" prop="uEnrichment">
          <el-input v-model="info.uEnrichment" style="width: 100%" placeholder="" @input="handleNumberInput('uEnrichment')"></el-input>
        </el-form-item>
        <el-form-item label="钚浓度（g/L）" prop="puConcentration">
          <el-input v-model="info.puConcentration" style="width: 100%" placeholder="" @input="handleNumberInput('puConcentration')"></el-input>
        </el-form-item>
      </div>
      <div class="materialmodel_dialog_display">
          <el-form-item label="氧化钚密度（g/cm3）" prop="puo2Density">
            <el-input v-model="info.puo2Density" style="width: 100%" placeholder="" @input="handleNumberInput('puo2Density')"></el-input>
          </el-form-item>
          <el-form-item label="PU-238占比" prop="ePu238">
            <el-input v-model="info.ePu238" style="width: 100%" placeholder="" @input="handleNumberInput('ePu238')" @blur="handleBlur"></el-input>
          </el-form-item>
        </div>

        <div class="materialmodel_dialog_display">
          <el-form-item label="PU-239占比" prop="ePu239">
            <el-input v-model="info.ePu239" style="width: 100%" placeholder="" @input="handleNumberInput('ePu239')" @blur="handleBlur"></el-input>
          </el-form-item>
          <el-form-item label="PU-240占比" prop="ePu240">
            <el-input v-model="info.ePu240" style="width: 100%" placeholder="" @input="handleNumberInput('ePu240')" @blur="handleBlur"></el-input>
          </el-form-item>
        </div>
        <div class="materialmodel_dialog_display">
          <el-form-item label="PU-241占比" prop="ePu241">
            <el-input v-model="info.ePu241" style="width: 100%" placeholder="" @input="handleNumberInput('ePu241')" @blur="handleBlur"></el-input>
          </el-form-item>
          <el-form-item label="PU-242占比" prop="ePu242">
            <el-input v-model="info.ePu242" style="width: 100%" placeholder="" @input="handleNumberInput('ePu242')" @blur="handleBlur"></el-input>
          </el-form-item>
        </div>

      <div class="materialmodel_dialog_display">
        <el-form-item label="硝酸酸度（mol/L）" prop="hno3Acidity">
          <el-input v-model="info.hno3Acidity" style="width: 100%" placeholder="" @input="handleNumberInput('hno3Acidity')"></el-input>
        </el-form-item>
        <el-form-item label="草酸浓度（mol/L）" prop="h2c2o4Concentration">
          <el-input v-model="info.h2c2o4Concentration" style="width: 100%" placeholder="" @input="handleNumberInput('h2c2o4Concentration')"></el-input>
        </el-form-item>
      </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="有机相比例" prop="organicRatio">
          <el-input v-model="info.organicRatio" style="width: 100%" placeholder="" @input="handleNumberInput('organicRatio')"></el-input>
        </el-form-item>
        <el-form-item label="含水率" prop="moistureContent">
          <el-input v-model="info.moistureContent" style="width: 100%" placeholder="" @input="handleNumberInput('moistureContent')"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="物料颜色">
         <el-color-picker-panel v-model="info.iconBase64" />
         <div style="width: 240px;height: 100px;margin-left: 20px;" :style="{backgroundColor: info.iconBase64}"></div>
      </el-form-item>

      <div class="custom_attrs_box">
        <div class="custom_attrs_header">
          <div class="custom_attrs_header1">成分名称</div>
          <div class="custom_attrs_header2">成分参数</div>
          <!-- <div class="custom_attrs_header3">单位</div> -->
          <div class="custom_attrs_header4">操作</div>
        </div>

        <div class="custom_attrs_header" v-for="(item, index) in customAttrsData" :key="index">
          <div class="custom_attrs_content1">
            <el-input v-model="item.key" style="width: 100%" placeholder=""></el-input>
          </div>
          <div class="custom_attrs_content2">
            <el-input v-model="item.value" style="width: 100%" placeholder="" 
              @input="tableNumberInput(index,'value')"></el-input>
          </div>
          <!-- <div class="custom_attrs_content3">
            <el-input v-model="item.unit" style="width: 100%" placeholder=""></el-input>
          </div> -->

          <div class="custom_attrs_content4" @click="removeAttr(index)">
            删除
          </div>
        </div>

      </div>
      <div class="addAttrBox" @click="addAttr">
        <svg t="1766543724217" style="margin-right: 5px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6518" width="16" height="16"><path d="M105 480a8 8 0 0 1 8-8h799a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H113a8 8 0 0 1-8-8v-64z" fill="#266FFF" p-id="6519"></path><path d="M480 920a8 8 0 0 1-8-8V112a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v800a8 8 0 0 1-8 8h-64z" fill="#266FFF" p-id="6520"></path></svg>
        添加一行
      </div>
      <span 
        style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;padding-top: 20px;">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
      </span>
    </el-form>
    <el-dialog v-model="isDialogMaterial" :close-on-click-modal="false" :modal="false" draggable 
      :before-close="dialogMaterialClose" title="选择物料"  append-to-body width="950px" class="materialmodel-dialog-box">
      <div style="display: flex;">
        <div class="choiceMateria-left">
          <div class="choiceMateria-left-title">物料列表</div>
          <div style="height: calc(100% - 70px);overflow: auto;margin-top: 10px;">
            <div v-for="(item, index) in materialList" :key="index" class="choiceMateria-left-item"
              :class="{'choiceMateria-item-active': index == isAcitve}"
              @click="handleClick(item, index)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div style="width: 100%;  height: calc(100vh - 100px); overflow: auto;">
          <div style="display: flex;justify-content: flex-end;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;">
            <el-button type="primary" @click="confirmMaterial">确 定</el-button>
          </div>
          <div class="custom_attrs_box" style="width: 650px;margin-left: 20px;margin-bottom: 10px;">
            <div class="custom_attrs_header">
              <div class="custom_attrs_header1" style="width: 60%;">成分名称</div>
              <div class="custom_attrs_header2" style="width: 40%;" >成分参数</div>
            </div>

            <div class="custom_attrs_header" v-for="(item, index) in ingredientData" :key="index">
              <div class="custom_attrs_content1" style="width: 60%;">
                <!-- <el-input v-model="item.key" style="width: 100%" placeholder=""></el-input> -->
                {{ item.key }}
              </div>
              <div class="custom_attrs_content2" style="width: 40%;">
                {{ item.value }}
              </div>
            </div>
            <div class="custom_attrs_header" style="height: 90px;" v-if="ingredientData.length>0">
            <div class="custom_attrs_content1" style="width: 60%;height: 90px;display: flex;align-items: center;justify-content: center;">颜色</div>
            <div class="custom_attrs_content2" style="width: 40%;height: 90px;display: flex;align-items: center;justify-content: center;" >
              <div style="width: 240px;height: 40px;" :style="{backgroundColor: iconBase64}"></div>
            </div>

            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<style scoped>
.materialmodel-box{
  width: 100%;
  height: calc(100vh - 200px);
}
.materialmodel-title-box{
  display: flex;
  align-items: center;
}
.materialmodel-title-line{
  width: 4px;
  height: 12px;
  background-color: rgba(38, 111, 255, 1);
  margin-right: 4px;
}
.materialmodel-title-text{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
}
.materialmodel_dialog_display{
  display: flex;
  justify-content: space-between;
}
.materialmodel_dialog_display .el-form-item--default{
  width: 48%;
}


.choiceMateria-left{
  width: 240px;
  height: calc(100vh - 200px);
  border-right: 1px solid rgba(240, 240, 240, 1);
  box-sizing: border-box;
}
.choiceMateria-left-title{
  width: 240px;
  height: 44px;
  line-height: 44px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #1B1B1B;
  padding-left: 16px;
  border-bottom: 1px solid rgba(240, 240, 240, 1);
}
.choiceMateria-left-item{
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
}
.choiceMateria-left-item:hover{
  background-color: #f5f8ff;
}
.choiceMateria-item-active{
    background-color: #f5f8ff;
    color: #266fff;
}
</style>

<style>
.custom_attrs_box{
  width: 100%;
  border: 1px solid #f0f1f2;
  border-bottom: 0px solid #f0f1f2;
  overflow: auto;
}
.custom_attrs_header{
  display: flex;
}
.custom_attrs_header1{
  width: 45%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_header2{
  width: 45%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_header3{
  width: 20%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_header4{
  width: 10%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f1f2;
}

.custom_attrs_content1{
  width: 45%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content2{
  width: 45%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content3{
  width: 20%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content4{
  width: 10%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #266FFF;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content1 .el-input__wrapper{
  box-shadow: 0 0 0 transparent;
}
.custom_attrs_content1 .el-input__wrapper.is-focus{
  box-shadow:inset 0 0 0 1px #266FFF !important;
}
.custom_attrs_content2 .el-input__wrapper{
  box-shadow: 0 0 0 transparent;
}
.custom_attrs_content2 .el-input__wrapper.is-focus{
  box-shadow:inset 0 0 0 1px #266FFF !important;
}
.custom_attrs_content3 .el-input__wrapper{
  box-shadow: 0 0 0 transparent;
}
.custom_attrs_content3 .el-input__wrapper.is-focus{
  box-shadow:inset 0 0 0 1px #266FFF !important;
}

.materialmodel-dialog-box.el-dialog .el-dialog__body{
  padding: 0 !important;
}
.materialmodel-iconBase64 img{
  max-width: 200px;
  max-height: 80px;
}

</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 100px;
  height: 100px;
}
.newavatar-uploader-icon{
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  text-align: center;
}
.newavatar-uploader-text{
  width: 100%;text-align: center;line-height: 20px;
  font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #949494;
}
</style>