JavaProjectRepo/business-css/frontend/src/components/antvx6/changesettings.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 { searchDevicesPage } from "@/api/business/database/device";
import { topologyDevicesLsit } from '@/api/business/project';

const emit = defineEmits([ 'closeChangesettingsModel']);

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: ""
  },
  changesettingsData: {
    required: false,
    type: Array,
    default: []
  }
})
const deviceTypetype:any = ref("") 
const deviceName:any = ref(props.deviceInfo.name) // 变动设备信息 
const materialName:any = ref(props.materialInfo.name) // 变动物料信息 
const tableData:any = ref([])

function gettableData() {
if(deviceTypetype.value == ''){
  return
}
  topologyDevicesLsit({
    id: props.projectInfo.projectId
  }).then((res:any) => {
    if (res.code == 0) {
      deviceList.value = res.data;
    }
  })
}


onMounted(() => {
  deviceTypetype.value = props.deviceInfo.type
  if(props.changesettingsData != null && props.changesettingsData.length > 0){
  tableData.value = props.changesettingsData
  }else{
  getInit(props.materialInfo);
  }
  gettableData() 
  



});

function getInit(row:any){
  tableData.value = []
  if(row != null){
    tableData.value.push({
      key: "铀浓度（g/L）",
      name: "u_concentration",
      value:  row.uConcentration,
      
      unit: "g/L",
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "氧化铀密度（g/cm3）", 
      name: "uo2_density",
      value:  row.uo2Density,
      unit: "g/cm3",
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "铀富集度（%）", 
      name: "u_enrichment",
      value:  row.uEnrichment,
      unit: "%",
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "钚浓度（g/L）", 
      name: "pu_concentration",
      value:  row.puConcentration,
      unit: "g/L",
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "氧化钚密度（g/cm3）", 
      name: "puo2_density",
      value:  row.puo2Density,
      unit: "g/cm3",
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "钚同位素比例（PU-240占比）%", 
      name: "pu_isotope",
      value:  row.puIsotope,
      unit: "%",
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "硝酸酸度（mol/L）", 
      name: "hno3_acidity",
      value:  row.hno3Acidity,
      unit: "mol/L",
    },{
      key: "草酸浓度（mol/L）", 
      name: "h2c2o4_concentration",
      value:  row.h2c2o4Concentration,
      unit: "mol/L", 
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "有机相比例%", 
      name: "organic_ratio",
      value:  row.organicRatio,
      unit: "%",
      formula: '',
      correlation: '',
      delay: '',
    },{
      key: "含水率%", 
      name: "moisture_content",
      value:  row.moistureContent,
      unit: "%",   
      formula: '',
      correlation: '',
      delay: '',
    })
  let tempData = []
  if(row.customAttrs !=null && row.customAttrs != ""){
    tempData = JSON.parse(row.customAttrs)
  }
  for(let i = 0; i < tempData.length; i++){
    let attr = tempData[i]
    tableData.value.push({
      key: attr.key,
      value: attr.value,
      unit: attr.unit,
      formula: '',
      correlation: '',
      delay: '',
    })
  }
  }
}
function confirmClick(){ // 确认变动设置
  emit('closeChangesettingsModel',tableData.value)
}
const isDialogFormula:any = ref(false) // 变动公式设置弹窗
const deviceList:any = ref([]) // 变动设备列表
const isAcitve:any = ref(-1) // 变动设备索引
const tempFormulaInfo:any = ref({})
const formulaInfo:any = ref({})
const tableIndex:any = ref(-1) // 变动设备索引
function dialogFormulaOpen(row:any,index:any){
  isAcitve.value = -1
  tableIndex.value = index
  formulaInfo.value =  JSON.parse(JSON.stringify(row))
  tempFormulaInfo.value =  row
  isDialogFormula.value = true
}
function dialogMaterialClose(){ // 变动公式设置关闭
  isDialogFormula.value = false
}
function handleClick(item:any, index:any){
  formulaInfo.value.correlation =  JSON.parse(JSON.stringify(item.deviceName))
  isAcitve.value = index
}
function handleClose(){ // 变动公式设置关闭
  isDialogFormula.value = false
}
function confirmTableClick(){ // 确认变动公式设置
  tableData.value[tableIndex.value].formula = formulaInfo.value.formula
  tableData.value[tableIndex.value].correlation = formulaInfo.value.correlation
  tableData.value[tableIndex.value].delay = formulaInfo.value.delay
  isDialogFormula.value = false
}
</script>

<template>
  <div class="editdevice-box">
    <div>
      <div style="display: flex; align-items: center;">
        <div style="width: 80px;">
          变动设备
        </div>
          <el-input v-model="deviceName" style="width: 300px" placeholder="" :disabled="true"></el-input>
        <div style="width: 80px;">
          物料名称
        </div>
          <el-input v-model="materialName" style="width: 300px" placeholder="" :disabled="true"></el-input>
      </div>
    </div>
      
    <div style="display: flex;align-items: center;padding: 20px 0;">
      <div class="materialmodel-title-line"></div>
      <div>物料成分</div>
    </div>

    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="key" label="属性" width="280"></el-table-column>
        <el-table-column prop="value" label="值" width="150"></el-table-column>
        <el-table-column prop="formula" label="计算公式" min-width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template #default="scope">
            <span style="    font-family: '微软雅黑';
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #266FFF;
              text-align: left;
              cursor: pointer;" @click="dialogFormulaOpen(scope.row,scope.$index)">设置</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex; justify-content: flex-end;margin-top: 10px;">
      <el-button type="primary" @click="confirmClick">确定</el-button>
    </div>
      <el-dialog v-model="isDialogFormula" :close-on-click-modal="false" :modal="false" draggable 
        :before-close="dialogMaterialClose" title="变动公式设置"  append-to-body width="994px" 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 deviceList" :key="index" class="choiceMateria-left-item"
              :class="{'choiceMateria-item-active': index == isAcitve}"
              @click="handleClick(item, index)">
              {{ item.deviceName }}
            </div>
          </div>
        </div>
        <div style="padding-left: 45px;padding-top: 40px;    width: calc(100% - 290px);">
          <el-form :model="formulaInfo"  label-width="80px" 
          style="height: calc(100vh - 360px) ; overflow: auto;">
            <el-form-item label="变动设备"  style="width: 100%;" label-width="80px">
              <el-input v-model="deviceName" style="width: 100%" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="物料名称"  style="width: 100%;" label-width="80px">
              <el-input v-model="materialName" style="width: 100%" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="成分"  style="width: 100%;" label-width="80px">
              <el-input v-model="formulaInfo.key" style="width: 100%" :disabled="true"></el-input>
            </el-form-item>
            <div style="display: flex;align-items: center;padding: 20px 0;">
              <div class="materialmodel-title-line"></div>
              <div>变动公式</div>
            </div>
            <el-form-item label="值="  style="width: 100%;" label-width="80px">
              <el-input v-model="formulaInfo.formula" style="width: 100%"></el-input>
            </el-form-item>

            <div style="display: flex;align-items: center;padding: 20px 0;">
              <div class="materialmodel-title-line"></div>
              <div>延时设置</div>
            </div>
            <div style="display: flex;align-items: center;">
              <el-form-item label="关联设备" >
                <el-input v-model="formulaInfo.correlation" style="width: 100%" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="延时时间" >
                <el-input v-model="formulaInfo.delay" style="width: 100%" placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-form>
          <span class="dialog-footer"
            style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="confirmTableClick">确 定</el-button>
          </span>
        </div>

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

</template>

<style scoped>
.editdevice-box{
  width: 100%;
  height: calc(100vh - 200px);
}

.materialmodel-title-line{
  width: 4px;
  height: 12px;
  background-color: rgba(38, 111, 255, 1);
  margin-right: 4px;
}

.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>
.materialmodel-dialog-box.el-dialog .el-dialog__body{
  padding: 0 !important;
}
</style>