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

解决冲突

pull/1/head
ljlong_2630 1 year ago
parent
3fd8d793dc
commit
ebe22536cb
2 changed files with 364 additions and 209 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. 62
      src/assets/styles/self-defined.scss
  2. 511
      src/views/model/devicemodel/addmodel.vue

62
src/assets/styles/self-defined.scss
View File

@ -25,6 +25,10 @@
}
.marginbottom5{
margin-bottom: 5px;
}
.textaligncenter{
text-align:center;
}
@ -35,6 +39,10 @@
width: 50%;
display: inline-block;
}
.width75percentinlineblock{
width: 75%;
display: inline-block;
}
.textalignright{
text-align:right;
}
@ -76,4 +84,56 @@
box-sizing: border-box;
width: 0;
height: 0;
}
}
.divsonmarginleft0{
div{
margin-left:0 !important;
}
}
.marginbottom{
margin-bottom: 0 !important;
}
.inlineblock{
display: inline-block;
}
.marginright6percent{
margin-right: 10%;
}
.fixedbottomright{
position: fixed;
/* 设置图片相对于浏览器的位置
距离右边180px,底部20px,宽度50px
*/
right : 80px;
bottom: 2%;
}
.width50percent{
width:50%;
}
.overflowscroll{
overflow-y: scroll;
}
.sonheight500{
>div{
height:500px;
}
}
.height350{
height:350px;
}
.height300{
height:300px;
}
.height260{
height:260px;
}

511
src/views/model/devicemodel/addmodel.vue
View File

@ -1,110 +1,130 @@
<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="名称、编号、序号、备注等" class="step" />
<el-step title="参数类别配置" description="模型的参数类别" />
<el-step title="调控策略" description="模型的调控策略" />
<el-step title="模型信息" description="名称、编号、序号、备注等" />
<el-step title="参数类别配置" description="模型的参数类别" />
<el-step title="调控策略" description="模型的调控策略" />
</el-steps>
</div>
<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">
<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>
<el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" />
</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="是否是叶节点">
<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 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">
<div class="widthhalfinlineblock">
<div class="textalignright marginbottom5">
<el-button type="primary" style="display: inline-block !important"
@click="addParamModel">添加参数模版</el-button>
<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-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing">
<el-table-column fixed label="序号" width="80">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="ID" align="center" width="55" prop="id" />
<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">
<template #default="scope">
<span v-if="!scope.row.editing">{{ scope.row.editing }}</span>
<el-input v-else v-model="scope.row.plcAdr" @blur="saveData(scope)" />
</template>
</el-table-column>
<!-- <el-table-column label="是否可控" align="center" prop="control">
<template #default="scope">
<dict-tag :options="dc_class_type" :value="scope.row.control" />
</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" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="text" icon="View" @click="handleView(scope.row)">查看</el-button>
<el-button type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</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-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 label="ID" align="center" width="55" prop="id" />
<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">
@ -122,32 +142,32 @@
<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 {
@import "@/assets/styles/self-defined.scss";
.customCarousel {
div{
button {
display: none !important;
}
}
ul{
display: none !important;
}
}
ul {
display: none !important;
}
}
}
</style>
<script setup name="newdevicemodel">
import { listDevicemodel, addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
import { listDevicemodel,addDevicemodel, updateDevicemodel } 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 { onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance();
const { dc_class_type, dc_device_partion } = proxy.useDict('dc_available', 'dc_is_leaf', 'dc_class_type', 'dc_device_partion');
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);
@ -159,25 +179,23 @@ const prevStepButtonShow = ref(false);
const submitButtonShow = ref(true);
const paramModelList = ref([]);
const addParamModelShow = ref(false);
const nordeNumber = ref(1);
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_is_leaf: false,
dc_available: false,
// pid:tempPid,
sort:1,
},
dc_available: [
{ label: '可用', value: 'true', elTagType: 'default', elTagClass: null },
{ label: '不可用', value: 'false', elTagType: 'default', elTagClass: null }
],
dc_is_leaf: [
{ 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,
@ -200,11 +218,17 @@ const data = reactive({
pid: [
{ required: true, message: "上级不能为空", trigger: "change" }
],
plcAdr: [
{ required }
]
},
validations: {
inputValue: { required }
}
});
const { queryParams, form, rules, dc_available, dc_is_leaf } = toRefs(data);
const { queryParams, form, rules } = toRefs(data);
// 取消按钮
function cancel() {
open.value = false;
@ -237,142 +261,213 @@ function reset() {
/** 提交按钮 */
function submitForm() {
loading.value = false;
proxy.$refs["devicemodelRef"].validate(valid => {
if (valid) {
console.log("进入方法");
//模型按钮主表维护
if (form.value.id != null) {
updateDevicemodel(form.value).then(response => {
router.go(-1);
proxy.$modal.msgSuccess("修改成功");
});
} else {
addDevicemodel(form.value).then(response => {
router.go(-1);
proxy.$modal.msgSuccess("新增成功");
});
}
//模型参数表维护
//删除计算
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 => {
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;
return (item.modelTypeId == 1);
});
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("---------------");
proxy.$refs["devicemodelRef"].validate(valid => {
// if (valid) {
if (currentStep.value < 2) {
currentStep.value = currentStep.value + 1;
proxy.$refs.carousel.next();
onMounted(() => {
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;
prevStepButtonShow.value = true;
}
// }
});
}
function prevStep() {
currentStep.value = currentStep.value - 1;
proxy.$refs.carousel.prev();
submitButtonShow.value = false;
nextStepButtonShow.value = true;
prevStepButtonShow.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;
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 handleView() {
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 handleEdit() {
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 selectedSubmit() {
const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({
...row,
editing: false, // 添加 'editing' 属性并设置初始值为 false
}));
if (selectedModelList.value.length > 0) {
selectedModelList.value = {
...selectedModelList,
...newSelectedList,
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;
}
});
}
} else {
selectedModelList.value = newSelectedList;
return flag;
}
console.log(selectedModelList);
addParamModelShow.value = false;
}
function startEditing(scope) {
console.log(scope);
scope.row.editing = true; // 进入编辑模式
}
function selectRadio(row){
if (!updateModelIds.value.includes(row.id)) {
updateModelIds.value.push(row.id);
}
}
function saveData(scope) {
// 保存数据的逻辑...
scope.row.editing = false; // 保存完成后，切换回显示模式
}
function getOldModelParams(){
listModelparam(queryParams.value).then(response => {
function ifselectable(row, index) {
let flag = true;
console.log(selectedModelList.value);
if (selectedModelList.value != []) {
selectedModelList.value.forEach(element => {
if (element.id == row.id) {
flag = false;
}
// oldSelectedList.value = response.rows;
});
}
return flag;
}
getTreeselect();
getModelTypeList();
getTreeselect();
getModelTypeList();
getOldModelParams();
</script>

Write Preview
Loading…
Cancel
Save