mirror of https://gitee.com/lmlz_0/dc-ui.git
lxg
1 year ago
11 changed files with 485 additions and 100 deletions
@ -1,9 +1,9 @@ |
|||
# 页面标题 |
|||
VITE_APP_TITLE = 闻荫管理系统 |
|||
VITE_APP_TITLE = 联美运营系统 |
|||
|
|||
# 开发环境配置 |
|||
VITE_APP_ENV = 'development' |
|||
|
|||
# 闻荫管理系统/开发环境 |
|||
# 联美运营系统/开发环境 |
|||
VITE_APP_BASE_API = 'http://localhost:9000' |
|||
VITE_APP_BASE_API_IMAGE = 'http://localhost:9000' |
|||
|
|||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
@ -0,0 +1,474 @@ |
|||
<template> |
|||
<div class="app-container" |
|||
v-loading="loading"> |
|||
<!-- 添加或修改设备模型信息对话框 --> |
|||
<div class="marginbottom50px"> |
|||
<el-steps :active="currentStep"> |
|||
<el-step title="模型信息" description="名称、编号、序号、备注等" /> |
|||
<el-step title="参数类别配置" description="模型的参数类别" /> |
|||
<el-step title="调控策略" description="模型的调控策略" /> |
|||
</el-steps> |
|||
</div> |
|||
<div class="overflowscroll"> |
|||
<el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px"> |
|||
<el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" > |
|||
<el-carousel-item :key="1" name="1" class="textaligncenter overflowscroll height300"> |
|||
<div class="widthhalfinlineblock"> |
|||
<el-form-item label="模型名称" prop="modelName"> |
|||
<el-input v-model="form.modelName" placeholder="请输入模型名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="模型编码" prop="modelCode"> |
|||
<el-input v-model="form.modelCode" placeholder="请输入模型编码" /> |
|||
</el-form-item> |
|||
<el-form-item label="排序" prop="sort"> |
|||
<el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序"/> |
|||
</el-form-item> |
|||
<el-form-item label="上级" prop="pid"> |
|||
<el-tree-select |
|||
v-model="form.pid" |
|||
:data="devicemodelOptions" |
|||
:props="{ value: 'id', label: 'modelName', children: 'children' }" |
|||
value-key="id" |
|||
placeholder="请选择上级" |
|||
check-strictly |
|||
:default-expand-all="true" |
|||
:default-checked-keys="defaultCheckedKeys" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="模型类别" key="selectmodelType" prop="modelTypeId"> |
|||
<el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable @change="modalTypeControllButton"> |
|||
<!-- <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" /> --> |
|||
<el-option v-for="dict in dc_model_type" :key="dict.value" :label="dict.label" :value="dict.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="是否可用" prop="vailable"> |
|||
<el-switch |
|||
v-model="form.dc_available" |
|||
class="ml-2i" |
|||
style="--el-switch-on-color: #13ce66" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="备注" prop="note"> |
|||
<el-input v-model="form.note" type="textarea" placeholder="请输入内容" /> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="width50percent textalignright"> |
|||
<el-form-item class="inlineblock marginright6percent divsonmarginleft0"> |
|||
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important" >上一步</el-button> |
|||
<el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button> |
|||
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button> |
|||
<el-button @click="cancel" style="display: inline-block !important">取 消</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
</el-carousel-item> |
|||
<el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll height300"> |
|||
<div class="width75percentinlineblock"> |
|||
<div class="textalignright marginbottom5"> |
|||
<el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button> |
|||
</div> |
|||
<el-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing"> |
|||
<el-table-column fixed label="序号" width="80" align="center" > |
|||
<template #default="scope"> |
|||
<span>{{ scope.$index+1 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="参数名称" align="center" prop="paramClassName" /> |
|||
<el-table-column label="参数编码" align="center" prop="paramClassCode" /> |
|||
<el-table-column label="PLC地址位" align="center" prop="plcAdr" vali> |
|||
<template #default="scope"> |
|||
<ValidationProvider :rules="plcAdr" v-slot=""> |
|||
<span v-if="!scope.row.editing">{{ scope.row.plcAdr}}</span> |
|||
<el-input v-else v-model="scope.row.plcAdr" @blur="saveData(scope.row)"/> |
|||
</ValidationProvider> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="是否可控" align="center" prop="controllab"> |
|||
<template #default="scope"> |
|||
<el-switch |
|||
v-model="scope.row.controllab" |
|||
@change="selectRadio(scope.row)" |
|||
class="ml-2i" |
|||
style="--el-switch-on-color: #13ce66" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="类别" align="center" prop="classType"> |
|||
<template #default="scope"> |
|||
<dict-tag :options="dc_class_type" :value="scope.row.classType" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="分区" align="center" prop="devicePartion"> |
|||
<template #default="scope"> |
|||
<dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="备注" align="center" prop="note" /> |
|||
<el-table-column label="操作" align="center" width="200px"> |
|||
<template #default="scope"> |
|||
<el-button style="display:inline-block !important" type="primary" @click="handleDelete(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="fixedbottomright width50percent textalignright"> |
|||
<el-form-item class="inlineblock marginright6percent divsonmarginleft0"> |
|||
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important">上一步</el-button> |
|||
<el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button> |
|||
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button> |
|||
<el-button @click="cancel" style="display: inline-block !important">取 消</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
|
|||
</el-form> |
|||
<el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type"> |
|||
<el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600"> |
|||
<el-table-column type="selection" width="55" :selectable="ifselectable"/> |
|||
<el-table-column label="参数名称" align="center" prop="paramClassName" /> |
|||
<el-table-column label="参数编码" align="center" prop="paramClassCode" /> |
|||
<el-table-column label="类别" align="center" prop="classType"> |
|||
<template #default="scope"> |
|||
<dict-tag :options="dc_class_type" :value="scope.row.classType" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="分区" align="center" prop="devicePartion"> |
|||
<template #default="scope"> |
|||
<dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="备注" align="center" prop="note" /> |
|||
</el-table> |
|||
<div class="textalignright margintop10"> |
|||
<el-button type="primary" @click="selectedSubmit">提交</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss"> |
|||
@import "@/assets/styles/self-defined.scss"; |
|||
.customCarousel { |
|||
div{ |
|||
button { |
|||
display: none !important; |
|||
} |
|||
} |
|||
ul{ |
|||
display: none !important; |
|||
} |
|||
} |
|||
</style> |
|||
<script setup name="newdevicemodel"> |
|||
import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel"; |
|||
import { listParamclass } from "@/api/model/paramclass"; |
|||
import { listModelType} from "@/api/model/modelType"; |
|||
import { required } from "@vee-validate/rules"; |
|||
import { listModelparam, addModelparam, updateModelparam, delModelparam} from "@/api/model/modelparam"; |
|||
import { onMounted, ref } from 'vue'; |
|||
const { proxy } = getCurrentInstance(); |
|||
const {dc_class_type, dc_device_partion, dc_model_type} = proxy.useDict('dc_class_type', 'dc_device_partion','dc_model_type'); |
|||
const router = useRouter(); |
|||
const devicemodelOptions = ref([]); |
|||
const open = ref(false); |
|||
const loading = ref(false); |
|||
const modeltypeList = ref([]); |
|||
const currentStep = ref(1); |
|||
const nextStepButtonShow = ref(false); |
|||
const prevStepButtonShow = ref(false); |
|||
const submitButtonShow = ref(true); |
|||
const paramModelList = ref([]); |
|||
const addParamModelShow = ref(false); |
|||
const selectedModelList = ref([]); |
|||
const oldSelectedList = ref([]); |
|||
const addModelSubmit = ref([]); |
|||
const updateModelSubmit = ref([]); |
|||
const operateModelIds = ref([]); |
|||
const updateModelIds = ref([]); |
|||
const deleteModelIds = ref([]); |
|||
console.log(router); |
|||
console.log(proxy); |
|||
const tempPid = router.currentRoute._value.query.pid; |
|||
const data = reactive({ |
|||
form: { |
|||
sort:1, |
|||
}, |
|||
dc_available: [ |
|||
{label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, |
|||
{label: '不可用', value: 'false', elTagType: 'default', elTagClass: null} |
|||
], |
|||
queryParams: { |
|||
modelName: null, |
|||
modelCode: null, |
|||
sort: null, |
|||
modelTypeId: null, |
|||
pid: null, |
|||
note: null |
|||
}, |
|||
rules: { |
|||
modelTypeId: [ |
|||
{ required: true, message: "模型类别不能为空", trigger: "change" } |
|||
], |
|||
modelName: [ |
|||
{ required: true, message: "模型名称不能为空", trigger: "change" } |
|||
], |
|||
modelCode: [ |
|||
{ required: true, message: "模型编码不能为空", trigger: "change" } |
|||
], |
|||
pid: [ |
|||
{ required: true, message: "上级不能为空", trigger: "change" } |
|||
], |
|||
plcAdr: [ |
|||
{ required } |
|||
] |
|||
}, |
|||
validations: { |
|||
inputValue: { required } |
|||
} |
|||
}); |
|||
|
|||
const { queryParams, form, rules } = toRefs(data); |
|||
|
|||
// 取消按钮 |
|||
function cancel() { |
|||
open.value = false; |
|||
reset(); |
|||
} |
|||
|
|||
// 表单重置 |
|||
function reset() { |
|||
form.value = { |
|||
tentantId: null, |
|||
version: null, |
|||
createBy: null, |
|||
createTime: null, |
|||
updateBy: null, |
|||
updateTime: null, |
|||
deptId: null, |
|||
userId: null, |
|||
deleteBy: null, |
|||
deleteTime: null, |
|||
id: null, |
|||
modelName: null, |
|||
modelCode: null, |
|||
sort: null, |
|||
modelTypeId: null, |
|||
pid: null, |
|||
note: null |
|||
}; |
|||
proxy.resetForm("devicemodelRef"); |
|||
} |
|||
|
|||
/** 提交按钮 */ |
|||
function submitForm() { |
|||
loading.value = false; |
|||
proxy.$refs["devicemodelRef"].validate(valid => { |
|||
if (valid) { |
|||
console.log("进入方法"); |
|||
//模型按钮主表维护 |
|||
if (form.value.id != null) { |
|||
updateDevicemodel(form.value).then(response => { |
|||
proxy.$modal.msgSuccess("修改成功"); |
|||
}); |
|||
} else { |
|||
addDevicemodel(form.value).then(response => { |
|||
}); |
|||
} |
|||
//模型参数表维护 |
|||
//删除计算 |
|||
let delFlag = true; |
|||
oldSelectedList.value.forEach((item)=>{ |
|||
selectedModelList.value.forEach(element=>{ |
|||
if(item.id == element.id){ |
|||
delFlag == false; |
|||
} |
|||
}) |
|||
if(delFlag){ |
|||
deleteModelIds.value.push(item.id); |
|||
} |
|||
}); |
|||
//修改计算 |
|||
operateModelIds.value.forEach(item=>{ |
|||
selectedModelList.value.forEach(element=>{ |
|||
if(item.id == element.id){ |
|||
updateModelSubmit.value.push(element); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
console.log("新增计算"); |
|||
//新增计算 |
|||
let addFlag = true; |
|||
selectedModelList.value.forEach(item=>{ |
|||
oldSelectedList.value.forEach(element=>{ |
|||
if(item.id == element.id){ |
|||
addFlag == false; |
|||
} |
|||
}) |
|||
if(addFlag){ |
|||
addModelSubmit.value.push(item); |
|||
} |
|||
}); |
|||
console.log("新增方法"); |
|||
console.log(addModelSubmit.value); |
|||
//新增 |
|||
addModelSubmit.value.forEach(item=>{ |
|||
delete item.id; |
|||
addModelparam(item).then(response => { |
|||
}); |
|||
}); |
|||
|
|||
//修改 |
|||
updateModelSubmit.value.forEach(item=>{ |
|||
updateModelparam(item).then(response => { |
|||
}); |
|||
}); |
|||
//删除 |
|||
deleteModelIds.value.forEach(item=>{ |
|||
delModelparam(item).then(response => { |
|||
}); |
|||
}); |
|||
router.go(-1); |
|||
} |
|||
}); |
|||
} |
|||
/** 查询设备模型类型列表 */ |
|||
function getModelTypeList() { |
|||
loading.value = true; |
|||
listModelType(queryParams.value).then(response => { |
|||
console.log(response); |
|||
modeltypeList.value = response.rows; |
|||
loading.value = false; |
|||
}); |
|||
} |
|||
function getTreeselect() { |
|||
listDevicemodel().then(response => { |
|||
devicemodelOptions.value = []; |
|||
const data = { id: 0, modelName: '顶级节点', children: [] }; |
|||
const parentData = response.data.filter(item => { |
|||
return (item.modelTypeId == 1); |
|||
}); |
|||
data.children = proxy.handleTree(parentData, "id", "pid"); |
|||
devicemodelOptions.value.push(data); |
|||
}); |
|||
} |
|||
onMounted(() => { |
|||
debugger |
|||
console.log("-------------"+tempPid); |
|||
// 在组件首次加载完成后执行的逻辑 |
|||
// 可以在这里给组件复制 |
|||
// form.value.pid=tempPid; |
|||
}); |
|||
function modalTypeControllButton(){ |
|||
if(form.value.modelTypeId == "2"){ |
|||
submitButtonShow.value = false; |
|||
nextStepButtonShow.value = true; |
|||
}else if(form.value.modelTypeId == "1"){ |
|||
submitButtonShow.value = true; |
|||
nextStepButtonShow.value = false; |
|||
} |
|||
} |
|||
function nextStep(){ |
|||
console.log("---------------"); |
|||
proxy.$refs["devicemodelRef"].validate(valid => { |
|||
// if (valid) { |
|||
selectedModelList.value = oldSelectedList.value; |
|||
if(currentStep.value<2){ |
|||
currentStep.value = currentStep.value + 1; |
|||
proxy.$refs.carousel.next(); |
|||
submitButtonShow.value = true; |
|||
nextStepButtonShow.value = false; |
|||
prevStepButtonShow.value = true; |
|||
} |
|||
// } |
|||
}); |
|||
} |
|||
function prevStep(){ |
|||
currentStep.value = currentStep.value - 1; |
|||
proxy.$refs.carousel.prev(); |
|||
submitButtonShow.value = false; |
|||
nextStepButtonShow.value = true; |
|||
prevStepButtonShow.value = false; |
|||
} |
|||
|
|||
/** 查询参数模型信息列表 */ |
|||
function addParamModel(){ |
|||
loading.value = true; |
|||
listParamclass(queryParams.value).then(response => { |
|||
console.log(response); |
|||
paramModelList.value = response.rows; |
|||
paramModelList.value.forEach(item=>{ |
|||
item.paramClassId = item.id; |
|||
item.modelId = form.value.modelCode; |
|||
item.controllab = false; |
|||
}); |
|||
console.log(paramModelList); |
|||
addParamModelShow.value = true; |
|||
loading.value = false; |
|||
}); |
|||
} |
|||
|
|||
function handleDelete(element){ |
|||
selectedModelList.value = selectedModelList.value.filter(item => item.id !== element.id); |
|||
} |
|||
|
|||
function selectedSubmit(){ |
|||
const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({ |
|||
...row, |
|||
editing: false, // 添加 'editing' 属性并设置初始值为 false |
|||
})); |
|||
if(selectedModelList.value.length>0){ |
|||
selectedModelList.value = [ |
|||
...selectedModelList.value, |
|||
...newSelectedList, |
|||
]; |
|||
}else{ |
|||
selectedModelList.value = newSelectedList; |
|||
} |
|||
addParamModelShow.value = false; |
|||
} |
|||
|
|||
function startEditing(row, column, cell, event) { |
|||
if (!updateModelIds.value.includes(row.id)) { |
|||
updateModelIds.value.push(row.id); |
|||
} |
|||
row.editing = true; // 进入编辑模式 |
|||
} |
|||
|
|||
function saveData(row) { |
|||
// 保存数据的逻辑... |
|||
row.editing = false; // 保存完成后，切换回显示模式 |
|||
} |
|||
|
|||
function ifselectable(row, index){ |
|||
let flag = true; |
|||
console.log(selectedModelList.value); |
|||
if(selectedModelList.value.length > 0){ |
|||
selectedModelList.value.forEach(element => { |
|||
if(element.id == row.id){ |
|||
flag = false; |
|||
} |
|||
}); |
|||
} |
|||
return flag; |
|||
} |
|||
|
|||
function selectRadio(row){ |
|||
if (!updateModelIds.value.includes(row.id)) { |
|||
updateModelIds.value.push(row.id); |
|||
} |
|||
} |
|||
|
|||
function getOldModelParams(){ |
|||
listModelparam(queryParams.value).then(response => { |
|||
|
|||
// oldSelectedList.value = response.rows; |
|||
}); |
|||
} |
|||
|
|||
getTreeselect(); |
|||
getModelTypeList(); |
|||
getOldModelParams(); |
|||
</script> |
|||
|
|||
|
|||
Loading…
Reference in new issue