433 lines
13 KiB
Vue
433 lines
13 KiB
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';
|
||
import ChangeDialogsettings from './changeDialogsettings.vue';
|
||
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
|
||
tableData.value[tableIndex.value].formulaData = formulaInfo.value.formulaData
|
||
tableData.value[tableIndex.value].deviceMaterialData = formulaInfo.value.deviceMaterialData
|
||
tableData.value[tableIndex.value].delayList = formulaInfo.value.delayList
|
||
|
||
isDialogFormula.value = false
|
||
}
|
||
const formula:any = ref('')
|
||
const formulaData:any = ref([])
|
||
const delayList:any = ref([])
|
||
const isChangeDialogsettings:any = ref(false) // 变动公式设置弹窗
|
||
|
||
function openChangeDialogsettings(){ // 打开变动公式值设置弹窗
|
||
formula.value = ''
|
||
formulaData.value = []
|
||
delayList.value = []
|
||
if(formulaInfo.value.formula !=null && formulaInfo.value.formula != ""){
|
||
formula.value = formulaInfo.value.formula
|
||
}
|
||
if(formulaInfo.value.formulaData !=null && formulaInfo.value.formulaData.length > 0){
|
||
formulaData.value = formulaInfo.value.formulaData
|
||
}
|
||
if(formulaInfo.value.delayList !=null && formulaInfo.value.delayList.length > 0){
|
||
delayList.value = formulaInfo.value.delayList
|
||
}
|
||
|
||
// formulaInfo.value.formula = e.formula
|
||
// formulaInfo.value.formulaData = e.formulaData
|
||
// formulaInfo.value.deviceMaterialData = e.deviceMaterialData
|
||
// formulaInfo.value.delayList = e.delayList
|
||
isChangeDialogsettings.value = true
|
||
}
|
||
|
||
function dialogChangeDialogsettings(){ // 变动公式值设置弹窗
|
||
isChangeDialogsettings.value = false
|
||
}
|
||
function closeChangeDialogsettings(e:any){ // 变动公式值设置关闭
|
||
formulaInfo.value.formula = e.formula
|
||
formulaInfo.value.formulaData = e.formulaData
|
||
formulaInfo.value.deviceMaterialData = e.deviceMaterialData
|
||
formulaInfo.value.delayList = e.delayList
|
||
isChangeDialogsettings.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">
|
||
<div class="valuebox-input">
|
||
{{ formulaInfo.formula }}
|
||
</div>
|
||
<el-button type="primary" @click="openChangeDialogsettings">设置</el-button>
|
||
<!-- <el-input v-model="formulaInfo.formula" 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>
|
||
<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>
|
||
|
||
<el-dialog v-model="isChangeDialogsettings" :close-on-click-modal="false" :modal="false" draggable
|
||
:before-close="dialogChangeDialogsettings" title="变动公式值设置" append-to-body width="1280px" class="materialmodel-dialog-box">
|
||
<ChangeDialogsettings v-if="isChangeDialogsettings" :projectInfo="projectInfo"
|
||
:formula = "formula" :formulaData= "formulaData" :delayList="delayList"
|
||
@closeChangeDialogsettings="closeChangeDialogsettings" />
|
||
</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;
|
||
}
|
||
.valuebox-input{
|
||
width:calc(100% - 70px) ;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin-right: 10px;
|
||
background: #f5f7fa;
|
||
/* border: 1px solid rgba(240, 240, 240, 1); */
|
||
background-color: #ffffff;
|
||
box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|