Browse Source

lixg 8-8 css修改

pull/1/head
lxg 1 year ago
parent
commit
3fd8d793dc
  1. 34
      src/assets/styles/self-defined.scss
  2. 705
      src/views/model/devicemodel/addmodel.vue

34
src/assets/styles/self-defined.scss

@ -21,7 +21,8 @@
} }
.marginbottom50px{ .marginbottom50px{
margin-bottom: 50px; margin: 0px 80px 50px;
} }
.textaligncenter{ .textaligncenter{
@ -45,3 +46,34 @@
.margintop10{ .margintop10{
margin-top:10px; margin-top:10px;
} }
.el-step__icon {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
font-size: 24px;
box-sizing: border-box;
background: var(--el-bg-color);
transition: .15s ease-out;
}
.el-step.is-horizontal .el-step__line {
height: 2px;
top: 20px;
left: 0;
right: 0;
}
.el-step__line-inner{
display: block;
border-width: 2px !important;
border-style: solid;
border-color: inherit;
transition: .15s ease-out;
box-sizing: border-box;
width: 0;
height: 0;
}

705
src/views/model/devicemodel/addmodel.vue

@ -1,391 +1,378 @@
<template> <template>
<div class="app-container" <div class="app-container" v-loading="loading">
v-loading="loading"> <!-- 添加或修改设备模型信息对话框 -->
<!-- 添加或修改设备模型信息对话框 --> <div class="marginbottom50px">
<div class="marginbottom50px"> <el-steps :active="currentStep">
<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>
</el-steps> </div>
</div> <div>
<div> <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px">
<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 ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" > <el-carousel-item :key="1" name="1" class="textaligncenter">
<el-carousel-item :key="1" name="1" class="textaligncenter"> <div class="widthhalfinlineblock">
<div class="widthhalfinlineblock"> <el-form-item label="模型名称" prop="modelName">
<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> <el-form-item label="模型编码" prop="modelCode">
<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> <el-form-item label="排序" prop="sort">
<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> <el-form-item label="上级" prop="pid">
<el-form-item label="上级" prop="pid"> <el-tree-select v-model="form.pid" :data="devicemodelOptions"
<el-tree-select :props="{ value: 'id', label: 'modelName', children: 'children' }" value-key="id" placeholder="请选择上级"
v-model="form.pid" check-strictly :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" />
:data="devicemodelOptions" </el-form-item>
:props="{ value: 'id', label: 'modelName', children: 'children' }" <el-form-item label="模型类别" key="selectmodelType" prop="modelTypeId">
value-key="id" <el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable>
placeholder="请选择上级" <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" />
check-strictly </el-select>
:default-expand-all="true" </el-form-item>
:default-checked-keys="defaultCheckedKeys" <el-form-item label="是否是叶节点">
/> <el-switch v-model="form.dc_is_leaf" @change="switch_isLeaf" class="ml-2i"
</el-form-item> style="--el-switch-on-color: #13ce66" />
<el-form-item label="模型类别" key="selectmodelType" prop="modelTypeId"> </el-form-item>
<el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable> <el-form-item label="是否可用">
<el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" /> <el-switch v-model="form.dc_available" class="ml-2i" style="--el-switch-on-color: #13ce66" />
</el-select> </el-form-item>
</el-form-item> <el-form-item label="备注" prop="note">
<el-form-item label="是否是叶节点"> <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
<el-switch </el-form-item>
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>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item :key="2" name="2" class="textaligncenter"> <el-carousel-item :key="2" name="2" class="textaligncenter">
<div class="widthhalfinlineblock"> <div class="widthhalfinlineblock">
<div class="textalignright marginbottom5"> <div class="textalignright marginbottom5">
<el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button> <el-button type="primary" style="display: inline-block !important"
</div> @click="addParamModel">添加参数模版</el-button>
<el-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing"> </div>
<el-table-column fixed label="序号" width="80"> <el-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing">
<template #default="scope" > <el-table-column fixed label="序号" width="80">
<span>{{ scope.$index+1 }}</span> <template #default="scope">
</template> <span>{{ scope.$index + 1 }}</span>
</el-table-column> </template>
<el-table-column label="ID" align="center" width="55" prop="id" /> </el-table-column>
<el-table-column label="参数名称" align="center" prop="paramClassName" /> <el-table-column label="ID" align="center" width="55" prop="id" />
<el-table-column label="参数编码" align="center" prop="paramClassCode" /> <el-table-column label="参数名称" align="center" prop="paramClassName" />
<el-table-column label="PLC地址位" align="center" prop="plcAdr"> <el-table-column label="参数编码" align="center" prop="paramClassCode" />
<template #default="scope"> <el-table-column label="PLC地址位" align="center" prop="plcAdr">
<span v-if="!scope.row.editing">{{ scope.row.editing}}</span> <template #default="scope">
<el-input v-else v-model="scope.row.plcAdr" @blur="saveData(scope)"/> <span v-if="!scope.row.editing">{{ scope.row.editing }}</span>
</template> <el-input v-else v-model="scope.row.plcAdr" @blur="saveData(scope)" />
</el-table-column> </template>
<!-- <el-table-column label="是否可控" align="center" prop="control"> </el-table-column>
<!-- <el-table-column label="是否可控" align="center" prop="control">
<template #default="scope"> <template #default="scope">
<dict-tag :options="dc_class_type" :value="scope.row.control" /> <dict-tag :options="dc_class_type" :value="scope.row.control" />
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column label="类别" align="center" prop="classType"> <el-table-column label="类别" align="center" prop="classType">
<template #default="scope"> <template #default="scope">
<dict-tag :options="dc_class_type" :value="scope.row.classType" /> <dict-tag :options="dc_class_type" :value="scope.row.classType" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="分区" align="center" prop="devicePartion"> <el-table-column label="分区" align="center" prop="devicePartion">
<template #default="scope"> <template #default="scope">
<dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" /> <dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" align="center" prop="note" /> <el-table-column label="备注" align="center" prop="note" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-button type="text" icon="View" @click="handleView(scope.row)">查看</el-button> <el-button type="text" icon="View" @click="handleView(scope.row)">查看</el-button>
<el-button type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button> <el-button type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="textaligncenter"> <div class="textaligncenter">
<el-form-item class="widthhalfinlineblock"> <el-form-item class="widthhalfinlineblock">
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" >上一步</el-button> <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="submitButtonShow" @click="submitForm">提交</el-button>
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" >下一步</el-button> <el-button type="primary" v-if="nextStepButtonShow" @click="nextStep">下一步</el-button>
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>
</el-form-item> </el-form-item>
</div> </div>
</el-form> </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
<el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600"> :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type">
<el-table-column type="selection" width="55" :selectable="ifselectable"/> <el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600">
<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="ID" align="center" width="55" prop="id" />
<el-table-column label="参数编码" align="center" prop="paramClassCode" /> <el-table-column label="参数名称" align="center" prop="paramClassName" />
<el-table-column label="类别" align="center" prop="classType"> <el-table-column label="参数编码" align="center" prop="paramClassCode" />
<template #default="scope"> <el-table-column label="类别" align="center" prop="classType">
<dict-tag :options="dc_class_type" :value="scope.row.classType" /> <template #default="scope">
</template> <dict-tag :options="dc_class_type" :value="scope.row.classType" />
</el-table-column> </template>
<el-table-column label="分区" align="center" prop="devicePartion"> </el-table-column>
<template #default="scope"> <el-table-column label="分区" align="center" prop="devicePartion">
<dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" /> <template #default="scope">
</template> <dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
</el-table-column> </template>
<el-table-column label="备注" align="center" prop="note" /> </el-table-column>
</el-table> <el-table-column label="备注" align="center" prop="note" />
<div class="textalignright margintop10"> </el-table>
<el-button type="primary" @click="selectedSubmit">提交</el-button> <div class="textalignright margintop10">
</div> <el-button type="primary" @click="selectedSubmit">提交</el-button>
</el-dialog> </div>
</div> </el-dialog>
</div> </div>
</template> </div>
<style lang="scss"> </template>
@import "@/assets/styles/self-defined.scss"; <style lang="scss">
.customCarousel { @import "@/assets/styles/self-defined.scss";
div{
button { .customCarousel {
display: none !important; div {
} button {
} display: none !important;
ul{
display: none !important;
}
} }
</style> }
<script setup name="newdevicemodel">
import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel"; ul {
import { listParamclass } from "@/api/model/paramclass"; display: none !important;
import { listModelType} from "@/api/model/modelType"; }
import { onMounted, ref } from 'vue'; }
const { proxy } = getCurrentInstance(); </style>
const {dc_class_type, dc_device_partion} = proxy.useDict('dc_available', 'dc_is_leaf', 'dc_class_type', 'dc_device_partion'); <script setup name="newdevicemodel">
const router = useRouter(); import { listDevicemodel, addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
const devicemodelOptions = ref([]); import { listParamclass } from "@/api/model/paramclass";
const open = ref(false); import { listModelType } from "@/api/model/modelType";
const loading = ref(false); import { onMounted, ref } from 'vue';
const modeltypeList = ref([]); const { proxy } = getCurrentInstance();
const currentStep = ref(1); const { dc_class_type, dc_device_partion } = proxy.useDict('dc_available', 'dc_is_leaf', 'dc_class_type', 'dc_device_partion');
const nextStepButtonShow = ref(false); const router = useRouter();
const prevStepButtonShow = ref(false); const devicemodelOptions = ref([]);
const submitButtonShow = ref(true); const open = ref(false);
const paramModelList = ref([]); const loading = ref(false);
const addParamModelShow = ref(false); const modeltypeList = ref([]);
const nordeNumber = ref(1); const currentStep = ref(1);
const selectedModelList = ref([]); const nextStepButtonShow = ref(false);
console.log(router); const prevStepButtonShow = ref(false);
console.log(proxy); const submitButtonShow = ref(true);
const tempPid = router.currentRoute._value.query.pid; const paramModelList = ref([]);
const data = reactive({ const addParamModelShow = ref(false);
form: { const nordeNumber = ref(1);
sort:1, const selectedModelList = ref([]);
dc_is_leaf:false, console.log(router);
dc_available:false, console.log(proxy);
// pid:tempPid, const tempPid = router.currentRoute._value.query.pid;
}, const data = reactive({
dc_available: [ form: {
{label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, sort: 1,
{label: '不可用', value: 'false', elTagType: 'default', elTagClass: null} dc_is_leaf: false,
dc_available: false,
// pid:tempPid,
},
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 }
],
queryParams: {
modelName: null,
modelCode: null,
sort: null,
modelTypeId: null,
pid: null,
note: null
},
rules: {
modelTypeId: [
{ required: true, message: "模型类别不能为空", trigger: "change" }
], ],
dc_is_leaf: [ modelName: [
{label: '是', value: 'true', elTagType: 'default', elTagClass: null}, { required: true, message: "模型名称不能为空", trigger: "change" }
{label: '否', value: 'false', elTagType: 'default', elTagClass: null}
], ],
queryParams: { modelCode: [
modelName: null, { required: true, message: "模型编码不能为空", trigger: "change" }
modelCode: null, ],
sort: null, pid: [
modelTypeId: null, { required: true, message: "上级不能为空", trigger: "change" }
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" }
],
}
});
const { queryParams, form, rules, dc_available, dc_is_leaf } = toRefs(data); const { queryParams, form, rules, dc_available, dc_is_leaf } = toRefs(data);
// //
function cancel() { function cancel() {
open.value = false; open.value = false;
reset(); reset();
} }
// //
function reset() { function reset() {
form.value = { form.value = {
tentantId: null, tentantId: null,
version: null, version: null,
createBy: null, createBy: null,
createTime: null, createTime: null,
updateBy: null, updateBy: null,
updateTime: null, updateTime: null,
deptId: null, deptId: null,
userId: null, userId: null,
deleteBy: null, deleteBy: null,
deleteTime: null, deleteTime: null,
id: null, id: null,
modelName: null, modelName: null,
modelCode: null, modelCode: null,
sort: null, sort: null,
modelTypeId: null, modelTypeId: null,
pid: null, pid: null,
note: null note: null
}; };
proxy.resetForm("devicemodelRef"); proxy.resetForm("devicemodelRef");
} }
/** 提交按钮 */ /** 提交按钮 */
function submitForm() { function submitForm() {
proxy.$refs["devicemodelRef"].validate(valid => { proxy.$refs["devicemodelRef"].validate(valid => {
if (valid) { if (valid) {
if (form.value.id != null) { if (form.value.id != null) {
updateDevicemodel(form.value).then(response => { updateDevicemodel(form.value).then(response => {
router.go(-1); router.go(-1);
proxy.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess("修改成功");
}); });
} else { } else {
addDevicemodel(form.value).then(response => { addDevicemodel(form.value).then(response => {
router.go(-1); router.go(-1);
proxy.$modal.msgSuccess("新增成功"); 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: [] }; function getModelTypeList() {
const parentData = response.data.filter(item => { loading.value = true;
// 使 includes()indexOf() listModelType(queryParams.value).then(response => {
return !item.isLeaf; console.log(response);
}); modeltypeList.value = response.rows;
data.children = proxy.handleTree(parentData, "id", "pid"); loading.value = false;
devicemodelOptions.value.push(data); });
}
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;
} }
onMounted(() => { }
console.log("-------------"+tempPid); function nextStep() {
// console.log("---------------");
// proxy.$refs["devicemodelRef"].validate(valid => {
// form.value.pid=tempPid; // if (valid) {
}); if (currentStep.value < 2) {
function switch_isLeaf(){ currentStep.value = currentStep.value + 1;
if(form.value.dc_is_leaf){ proxy.$refs.carousel.next();
submitButtonShow.value = false; submitButtonShow.value = true;
nextStepButtonShow.value = true; nextStepButtonShow.value = false;
}else{ prevStepButtonShow.value = true;
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();
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 prevStep() {
currentStep.value = currentStep.value - 1;
proxy.$refs.carousel.prev();
submitButtonShow.value = false;
nextStepButtonShow.value = true;
prevStepButtonShow.value = false;
}
function handleView(){ /** 查询参数模型信息列表 */
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 handleView() {
function handleEdit(){ }
} function handleEdit() {
function selectedSubmit(){ }
const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({
...row,
editing: false, // 'editing' false
}));
if(selectedModelList.value.length>0){
selectedModelList.value = {
...selectedModelList,
...newSelectedList,
}
}else{
selectedModelList.value = newSelectedList;
}
console.log(selectedModelList); function selectedSubmit() {
addParamModelShow.value = false; const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({
...row,
editing: false, // 'editing' false
}));
if (selectedModelList.value.length > 0) {
selectedModelList.value = {
...selectedModelList,
...newSelectedList,
} }
} else {
selectedModelList.value = newSelectedList;
}
function startEditing(scope) { console.log(selectedModelList);
console.log(scope); addParamModelShow.value = false;
scope.row.editing = true; // }
}
function saveData(scope) { function startEditing(scope) {
// ... console.log(scope);
scope.row.editing = false; // scope.row.editing = true; //
} }
function ifselectable(row, index){ function saveData(scope) {
let flag = true; // ...
console.log(selectedModelList.value); scope.row.editing = false; //
if(selectedModelList.value != []){ }
selectedModelList.value.forEach(element => {
if(element.id == row.id){
flag = false;
}
});
}
return flag;
}
getTreeselect(); function ifselectable(row, index) {
getModelTypeList(); let flag = true;
</script> console.log(selectedModelList.value);
if (selectedModelList.value != []) {
selectedModelList.value.forEach(element => {
if (element.id == row.id) {
flag = false;
}
});
}
return flag;
}
getTreeselect();
getModelTypeList();
</script>
Loading…
Cancel
Save