lianmei
/
dc-ui
mirror of https://gitee.com/lmlz_0/dc-ui.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

8-14

pull/1/head
lxg 1 year ago
parent
dc90ae493b
commit
753646818e
2 changed files with 242 additions and 248 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 486
      src/views/model/devicemodel/editModel.vue
  2. 4
      src/views/model/devicemodel/index.vue

486
src/views/model/devicemodel/editModel.vue
View File

@ -1,130 +1,123 @@
<template>
<div class="app-container"
v-loading="loading">
<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-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-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-input v-model="form.modelName" placeholder="请输入模型名称" />
</el-form-item>
<el-form-item label="模型编码" prop="modelCode">
<el-input v-model="form.modelCode" placeholder="请输入模型编码" />
<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-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-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-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-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-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 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-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-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 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">
@ -142,32 +135,34 @@
<div class="textalignright margintop10">
<el-button type="primary" @click="selectedSubmit">提交</el-button>
</div>
</el-dialog>
</el-dialog>
</div>
</div>
</template>
<style lang="scss">
@import "@/assets/styles/self-defined.scss";
.customCarousel {
div{
button {
display: none !important;
}
}
ul{
@import "@/assets/styles/self-defined.scss";
.customCarousel {
div {
button {
display: none !important;
}
}
}
ul {
display: none !important;
}
}
</style>
<script setup name="editdevicemodel">
import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
import { listDevicemodel, addDevicemodel, updateDevicemodel, getDevicemodel} from "@/api/model/devicemodel";
import { listParamclass } from "@/api/model/paramclass";
import { listModelType} from "@/api/model/modelType";
import { listModelType } from "@/api/model/modelType";
import { required } from "@vee-validate/rules";
import { listModelparam, addModelparam, updateModelparam, delModelparam} from "@/api/model/modelparam";
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 { 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);
@ -191,11 +186,11 @@ console.log(proxy);
const modelId = router.currentRoute._value.query.pid;
const data = reactive({
form: {
sort:1,
sort: 1,
},
dc_available: [
{label: '可用', value: 'true', elTagType: 'default', elTagClass: null},
{label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
{ label: '可用', value: 'true', elTagType: 'default', elTagClass: null },
{ label: '不可用', value: 'false', elTagType: 'default', elTagClass: null }
],
queryParams: {
modelName: null,
@ -228,7 +223,7 @@ const data = reactive({
});
const { queryParams, form, rules } = toRefs(data);
// 取消按钮
function cancel() {
open.value = false;
@ -277,72 +272,74 @@ function submitForm() {
//模型参数表维护
//删除计算
let delFlag = true;
oldSelectedList.value.forEach((item)=>{
selectedModelList.value.forEach(element=>{
if(item.id == element.id){
delFlag == false;
}
oldSelectedList.value.forEach((item) => {
selectedModelList.value.forEach(element => {
if (item.id == element.id) {
delFlag == false;
}
})
if(delFlag){
if (delFlag) {
deleteModelIds.value.push(item.id);
}
});
//修改计算
operateModelIds.value.forEach(item=>{
selectedModelList.value.forEach(element=>{
if(item.id == element.id){
updateModelSubmit.value.push(element);
}
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;
}
selectedModelList.value.forEach(item => {
oldSelectedList.value.forEach(element => {
if (item.id == element.id) {
addFlag == false;
}
})
if(addFlag){
if (addFlag) {
addModelSubmit.value.push(item);
}
});
console.log("新增方法");
console.log(addModelSubmit.value);
//新增
addModelSubmit.value.forEach(item=>{
addModelSubmit.value.forEach(item => {
delete item.id;
addModelparam(item).then(response => {
});
});
//修改
updateModelSubmit.value.forEach(item=>{
updateModelparam(item).then(response => {
updateModelSubmit.value.forEach(item => {
updateModelparam(item).then(response => {
});
});
//删除
deleteModelIds.value.forEach(item=>{
delModelparam(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 => {
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 => {
@ -352,123 +349,124 @@ function submitForm() {
devicemodelOptions.value.push(data);
});
}
onMounted(() => {
console.log("-------------"+modelId);
// 在组件首次加载完成后执行的逻辑
// 可以在这里给组件复制
// form.value.pid=tempPid;
});
function modalTypeControllButton(){
if(form.value.modelTypeId == "2"){
submitButtonShow.value = false;
nextStepButtonShow.value = true;
}else if(form.value.modelTypeId == "1"){
onMounted(() => {
console.log("-------------" + modelId);
// 在组件首次加载完成后执行的逻辑
// 可以在这里给组件复制
// 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 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 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 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 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 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 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 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 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 selectRadio(row) {
if (!updateModelIds.value.includes(row.id)) {
updateModelIds.value.push(row.id);
}
}
function getOldModelParams(){
listModelparam(queryParams.value).then(response => {
function getOldModelParams() {
listModelparam(queryParams.value).then(response => {
// oldSelectedList.value = response.rows;
});
}
getTreeselect();
getModelTypeList();
getOldModelParams();
// oldSelectedList.value = response.rows;
});
}
getTreeselect();
getModelTypeList();
getOldModelParams();
</script>

4
src/views/model/devicemodel/index.vue
View File

@ -254,10 +254,6 @@ function getTreeselect() {
devicemodelOptions.value.push(data);
});
}
<<<<<<< HEAD
=======
>>>>>>> 4581b8b996797432f97cb021b35b194e99980dd9
// 取消按钮
function cancel() {
open.value = false;

Write Preview
Loading…
Cancel
Save