|
|
|
@ -1,63 +1,149 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="app-container" |
|
|
|
v-loading="loading"> |
|
|
|
<!-- 添加或修改设备模型信息对话框 --> |
|
|
|
<template> |
|
|
|
<el-steps :space="200" :active="1" simple> |
|
|
|
<el-step title="Step 1" :icon="Edit" /> |
|
|
|
<el-step title="Step 2" :icon="UploadFilled" /> |
|
|
|
<el-step title="Step 3" :icon="Picture" /> |
|
|
|
</el-steps> |
|
|
|
|
|
|
|
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px"> |
|
|
|
<el-step title="Step 1" /> |
|
|
|
<el-step title="Step 2" /> |
|
|
|
<el-step title="Step 3" /> |
|
|
|
<div class="marginbottom50px"> |
|
|
|
<el-steps :active="currentStep"> |
|
|
|
<el-step title="模型信息" description="名称、编号、序号、备注等" /> |
|
|
|
<el-step title="参数类别配置" description="模型的参数类别" /> |
|
|
|
<el-step title="调控策略" description="模型的调控策略" /> |
|
|
|
</el-steps> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="80px"> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<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"> |
|
|
|
<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 v-model="form.sort" placeholder="请输入排序;排序" /> |
|
|
|
<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="上级id;上级id" prop="pid"> |
|
|
|
<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="请选择上级id;上级id" |
|
|
|
placeholder="请选择上级" |
|
|
|
check-strictly |
|
|
|
:default-expand-all="true" |
|
|
|
:default-checked-keys="defaultCheckedKeys" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="模型类别" prop="modelTypeId"> |
|
|
|
<el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable> |
|
|
|
<el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否是叶节点"> |
|
|
|
<el-switch |
|
|
|
v-model="form.dc_is_leaf" |
|
|
|
@change="switch_isLeaf" |
|
|
|
class="ml-2i" |
|
|
|
style="--el-switch-on-color: #13ce66" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否可用"> |
|
|
|
<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> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
|
|
|
</div> |
|
|
|
</el-carousel-item> |
|
|
|
<el-carousel-item :key="2" name="2" class="textaligncenter"> |
|
|
|
<div class="widthhalfinlineblock"> |
|
|
|
<div class="textalignright marginbottom5"> |
|
|
|
<el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button> |
|
|
|
</div> |
|
|
|
<el-table :data="tableData" style="width: 100%" max-height="250"> |
|
|
|
<el-table-column fixed label="序号" width="80"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
{{ scope.$index + 1 }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="Name" width="120" /> |
|
|
|
<el-table-column prop="state" label="State" width="120" /> |
|
|
|
<el-table-column prop="city" label="City" width="120" /> |
|
|
|
<el-table-column prop="address" label="Address" width="600" /> |
|
|
|
<el-table-column prop="zip" label="Zip" width="120" /> |
|
|
|
<el-table-column fixed="right" label="Operations" width="120"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button |
|
|
|
link |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
@click.prevent="deleteRow(scope.$index)" |
|
|
|
> |
|
|
|
Remove |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel> |
|
|
|
<div class="textaligncenter"> |
|
|
|
<el-form-item class="widthhalfinlineblock"> |
|
|
|
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" >上一步</el-button> |
|
|
|
<el-button type="primary" v-if="submitButtonShow" @click="submitForm" >提交</el-button> |
|
|
|
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" >下一步</el-button> |
|
|
|
<el-button @click="cancel">取 消</el-button> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</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 { addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel"; |
|
|
|
import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue' |
|
|
|
import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel"; |
|
|
|
import { listModelType} from "@/api/model/modelType"; |
|
|
|
import { onMounted, ref } from 'vue'; |
|
|
|
const { proxy } = getCurrentInstance(); |
|
|
|
const { dc_available, dc_is_leaf } = proxy.useDict('dc_available', 'dc_is_leaf'); |
|
|
|
const router = useRouter(); |
|
|
|
const devicemodelOptions = ref([]); |
|
|
|
const open = ref(false); |
|
|
|
const title = ref(""); |
|
|
|
|
|
|
|
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); |
|
|
|
console.log(router); |
|
|
|
console.log(proxy); |
|
|
|
const tempPid = router.currentRoute._value.query.pid; |
|
|
|
const data = reactive({ |
|
|
|
form: {}, |
|
|
|
form: { |
|
|
|
sort:1, |
|
|
|
dc_is_leaf:false, |
|
|
|
dc_available:false, |
|
|
|
// pid:tempPid, |
|
|
|
}, |
|
|
|
queryParams: { |
|
|
|
modelName: null, |
|
|
|
modelCode: null, |
|
|
|
@ -68,7 +154,16 @@ |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
modelTypeId: [ |
|
|
|
{ required: true, message: "模型类别Id不能为空", trigger: "change" } |
|
|
|
{ required: true, message: "模型类别不能为空", trigger: "change" } |
|
|
|
], |
|
|
|
modelName: [ |
|
|
|
{ required: true, message: "模型名称不能为空", trigger: "change" } |
|
|
|
], |
|
|
|
modelCode: [ |
|
|
|
{ required: true, message: "模型编码不能为空", trigger: "change" } |
|
|
|
], |
|
|
|
pid: [ |
|
|
|
{ required: true, message: "上级不能为空", trigger: "change" } |
|
|
|
], |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -111,19 +206,82 @@ |
|
|
|
if (valid) { |
|
|
|
if (form.value.id != null) { |
|
|
|
updateDevicemodel(form.value).then(response => { |
|
|
|
proxy.$modal.msgSuccess("修改成功"); |
|
|
|
open.value = false; |
|
|
|
router.go(-1); |
|
|
|
proxy.$modal.msgSuccess("修改成功"); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
addDevicemodel(form.value).then(response => { |
|
|
|
proxy.$modal.msgSuccess("新增成功"); |
|
|
|
open.value = false; |
|
|
|
router.go(-1); |
|
|
|
proxy.$modal.msgSuccess("新增成功"); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
/** 查询设备模型类型列表 */ |
|
|
|
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 => { |
|
|
|
// 根据需要进行关键字匹配，可以使用 includes()、indexOf() 等方法 |
|
|
|
return !item.isLeaf; |
|
|
|
}); |
|
|
|
data.children = proxy.handleTree(parentData, "id", "pid"); |
|
|
|
devicemodelOptions.value.push(data); |
|
|
|
}); |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
console.log("-------------"+tempPid); |
|
|
|
// 在组件首次加载完成后执行的逻辑 |
|
|
|
// 可以在这里给组件复制 |
|
|
|
// form.value.pid=tempPid; |
|
|
|
}); |
|
|
|
function switch_isLeaf(){ |
|
|
|
if(form.value.dc_is_leaf){ |
|
|
|
submitButtonShow.value = false; |
|
|
|
nextStepButtonShow.value = true; |
|
|
|
}else{ |
|
|
|
submitButtonShow.value = true; |
|
|
|
nextStepButtonShow.value = false; |
|
|
|
} |
|
|
|
} |
|
|
|
function nextStep(){ |
|
|
|
console.log("---------------"); |
|
|
|
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; |
|
|
|
addParamModelShow.value = true; |
|
|
|
loading.value = false; |
|
|
|
}); |
|
|
|
} |
|
|
|
getTreeselect(); |
|
|
|
getModelTypeList(); |
|
|
|
</script> |
|
|
|
|
|
|
|
|
