lixg 8-8 css修改

src/assets/styles/self-defined.scss

@@ -21,7 +21,8 @@
 }
 
 .marginbottom50px{
-    margin-bottom: 50px;
+    margin: 0px 80px 50px;
+    
 }
 
 .textaligncenter{
@@ -45,3 +46,34 @@
 .margintop10{
     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;
+  }

src/views/model/devicemodel/addmodel.vue

@@ -1,17 +1,16 @@
 <template>
-    <div class="app-container" 
+  <div class="app-container" v-loading="loading">
-      v-loading="loading">
     <!-- 添加或修改设备模型信息对话框 -->
     <div class="marginbottom50px">
       <el-steps :active="currentStep">
-            <el-step title="模型信息" description="名称、编号、序号、备注等" />
+        <el-step title="模型信息" description="名称、编号、序号、备注等" class="step" />
         <el-step title="参数类别配置" description="模型的参数类别" />
         <el-step title="调控策略" description="模型的调控策略" />
       </el-steps>
     </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 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">
@@ -21,19 +20,12 @@
                 <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
+                <el-tree-select v-model="form.pid" :data="devicemodelOptions"
-                    v-model="form.pid"
+                  :props="{ value: 'id', label: 'modelName', children: 'children' }" value-key="id" placeholder="请选择上级"
-                    :data="devicemodelOptions"
+                  check-strictly :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" />
-                    :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>
@@ -41,19 +33,11 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="是否是叶节点">
-                  <el-switch
+                <el-switch v-model="form.dc_is_leaf" @change="switch_isLeaf" class="ml-2i"
-                    v-model="form.dc_is_leaf"
+                  style="--el-switch-on-color: #13ce66" />
-                    @change="switch_isLeaf"
-                    class="ml-2i"
-                    style="--el-switch-on-color: #13ce66"
-                  />
               </el-form-item>
               <el-form-item label="是否可用">
-                  <el-switch
+                <el-switch v-model="form.dc_available" class="ml-2i" style="--el-switch-on-color: #13ce66" />
-                    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="请输入内容" />
@@ -63,12 +47,13 @@
           <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-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">
-                      <template #default="scope" >
+                  <template #default="scope">
-                        <span>{{ scope.$index+1 }}</span>
+                    <span>{{ scope.$index + 1 }}</span>
                   </template>
                 </el-table-column>
                 <el-table-column label="ID" align="center" width="55" prop="id" />
@@ -76,8 +61,8 @@
                 <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>
+                    <span v-if="!scope.row.editing">{{ scope.row.editing }}</span>
-                        <el-input v-else v-model="scope.row.plcAdr"  @blur="saveData(scope)"/>
+                    <el-input v-else v-model="scope.row.plcAdr" @blur="saveData(scope)" />
                   </template>
                 </el-table-column>
                 <!-- <el-table-column label="是否可控" align="center" prop="control">
@@ -108,16 +93,17 @@
         </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="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-form-item>
         </div>
       </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="ID" align="center" width="55" prop="id" />
           <el-table-column label="参数名称" align="center" prop="paramClassName" />
           <el-table-column label="参数编码" align="center" prop="paramClassCode" />
@@ -139,57 +125,59 @@
       </el-dialog>
     </div>
   </div>
-  </template>
+</template>
-  <style lang="scss">
+<style lang="scss">
-    @import "@/assets/styles/self-defined.scss";
+@import "@/assets/styles/self-defined.scss";
-    .customCarousel {
+
-      div{
+.customCarousel {
+  div {
     button {
       display: none !important;
     }
   }
-      ul{
+
+  ul {
     display: none !important;
   }
-    } 
+}
-  </style>
+</style>
-  <script setup name="newdevicemodel">
+<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 { listParamclass } from "@/api/model/paramclass";
-  import { listModelType} from "@/api/model/modelType";
+import { listModelType } from "@/api/model/modelType";
-  import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
-  const { proxy } = getCurrentInstance();
+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 } = proxy.useDict('dc_available', 'dc_is_leaf', 'dc_class_type', 'dc_device_partion');
-  const router = useRouter();
+const router = useRouter();
-  const devicemodelOptions = ref([]);
+const devicemodelOptions = ref([]);
-  const open = ref(false);
+const open = ref(false);
-  const loading = ref(false);
+const loading = ref(false);
-  const modeltypeList = ref([]);
+const modeltypeList = ref([]);
-  const currentStep = ref(1);
+const currentStep = ref(1);
-  const nextStepButtonShow = ref(false);
+const nextStepButtonShow = ref(false);
-  const prevStepButtonShow = ref(false);
+const prevStepButtonShow = ref(false);
-  const submitButtonShow = ref(true);
+const submitButtonShow = ref(true);
-  const paramModelList = ref([]);
+const paramModelList = ref([]);
-  const addParamModelShow = ref(false);
+const addParamModelShow = ref(false);
-  const nordeNumber = ref(1);
+const nordeNumber = ref(1);
-  const selectedModelList = ref([]);
+const selectedModelList = ref([]);
-  console.log(router);
+console.log(router);
-  console.log(proxy);
+console.log(proxy);
-  const tempPid = router.currentRoute._value.query.pid;
+const tempPid = router.currentRoute._value.query.pid;
-  const data = reactive({
+const data = reactive({
   form: {
-      sort:1,
+    sort: 1,
-      dc_is_leaf:false,
+    dc_is_leaf: false,
-      dc_available:false,
+    dc_available: false,
     // pid:tempPid,
   },
   dc_available: [
-        {label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, 
+    { label: '可用', value: 'true', elTagType: 'default', elTagClass: null },
-        {label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
+    { label: '不可用', value: 'false', elTagType: 'default', elTagClass: null }
   ],
   dc_is_leaf: [
-        {label: '是', value: 'true', elTagType: 'default', elTagClass: null}, 
+    { label: '是', value: 'true', elTagType: 'default', elTagClass: null },
-        {label: '否', value: 'false', elTagType: 'default', elTagClass: null}
+    { label: '否', value: 'false', elTagType: 'default', elTagClass: null }
   ],
   queryParams: {
     modelName: null,
@@ -213,18 +201,18 @@
       { 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;
   reset();
-  }
+}
 
-  // 表单重置
+// 表单重置
-  function reset() {
+function reset() {
   form.value = {
     tentantId: null,
     version: null,
@@ -245,10 +233,10 @@
     note: null
   };
   proxy.resetForm("devicemodelRef");
-  }
+}
 
-  /** 提交按钮 */
+/** 提交按钮 */
-  function submitForm() {
+function submitForm() {
   proxy.$refs["devicemodelRef"].validate(valid => {
     if (valid) {
       if (form.value.id != null) {
@@ -264,17 +252,17 @@
       }
     }
   });
-  }
+}
-  /** 查询设备模型类型列表 */
+/** 查询设备模型类型列表 */
-    function getModelTypeList() {
+function getModelTypeList() {
   loading.value = true;
   listModelType(queryParams.value).then(response => {
     console.log(response);
     modeltypeList.value = response.rows;
     loading.value = false;
   });
-    }
+}
-    function getTreeselect() {
+function getTreeselect() {
   listDevicemodel().then(response => {
     devicemodelOptions.value = [];
     const data = { id: 0, modelName: '顶级节点', children: [] };
@@ -285,27 +273,27 @@
     data.children = proxy.handleTree(parentData, "id", "pid");
     devicemodelOptions.value.push(data);
   });
-  }
+}
-    onMounted(() => {
+onMounted(() => {
-        console.log("-------------"+tempPid);
+  console.log("-------------" + tempPid);
   // 在组件首次加载完成后执行的逻辑
   // 可以在这里给组件复制
   // form.value.pid=tempPid;
-    });
+});
-    function switch_isLeaf(){
+function switch_isLeaf() {
-      if(form.value.dc_is_leaf){
+  if (form.value.dc_is_leaf) {
     submitButtonShow.value = false;
     nextStepButtonShow.value = true;
-      }else{
+  } else {
     submitButtonShow.value = true;
     nextStepButtonShow.value = false;
   }
-    }
+}
-    function nextStep(){
+function nextStep() {
   console.log("---------------");
   proxy.$refs["devicemodelRef"].validate(valid => {
     // if (valid) {
-          if(currentStep.value<2){
+    if (currentStep.value < 2) {
       currentStep.value = currentStep.value + 1;
       proxy.$refs.carousel.next();
       submitButtonShow.value = true;
@@ -314,17 +302,17 @@
     }
     // }
   });
-    }
+}
-    function prevStep(){
+function prevStep() {
   currentStep.value = currentStep.value - 1;
   proxy.$refs.carousel.prev();
   submitButtonShow.value = false;
   nextStepButtonShow.value = true;
   prevStepButtonShow.value = false;
-    }
+}
 
-    /** 查询参数模型信息列表 */
+/** 查询参数模型信息列表 */
-    function addParamModel(){
+function addParamModel() {
   loading.value = true;
   listParamclass(queryParams.value).then(response => {
     console.log(response);
@@ -333,59 +321,58 @@
     addParamModelShow.value = true;
     loading.value = false;
   });
-    }
+}
 
-    function handleView(){
+function handleView() {
 
-    }
+}
 
-    function handleEdit(){
+function handleEdit() {
 
-    }
+}
 
-    function selectedSubmit(){
+function selectedSubmit() {
   const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({
     ...row,
     editing: false, // 添加 'editing' 属性并设置初始值为 false
   }));
-      if(selectedModelList.value.length>0){
+  if (selectedModelList.value.length > 0) {
     selectedModelList.value = {
       ...selectedModelList,
       ...newSelectedList,
     }
-      }else{
+  } else {
     selectedModelList.value = newSelectedList;
   }
 
   console.log(selectedModelList);
   addParamModelShow.value = false;
-    }
+}
 
-    function startEditing(scope) {
+function startEditing(scope) {
   console.log(scope);
   scope.row.editing = true; // 进入编辑模式
-    }
+}
 
-    function saveData(scope) {
+function saveData(scope) {
   // 保存数据的逻辑...
   scope.row.editing = false; // 保存完成后，切换回显示模式
-    }
+}
 
-    function ifselectable(row, index){
+function ifselectable(row, index) {
   let flag = true;
   console.log(selectedModelList.value);
-      if(selectedModelList.value != []){
+  if (selectedModelList.value != []) {
     selectedModelList.value.forEach(element => {
-          if(element.id == row.id){
+      if (element.id == row.id) {
         flag = false;
       }
     });
   }
   return flag;
-    }
+}
-
-    getTreeselect();
-    getModelTypeList();
-  </script>
 
+getTreeselect();
+getModelTypeList();
+</script>