[Fix 0000]联动配置页面样式修改

src/assets/images/home-container/configurable/hsq/arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.666" height="6.617" viewBox="0 0 18.666 6.617">
+  <path id="路径_58016" data-name="路径 58016" d="M402.711,323.868l-18.666-3.309v6.617l18.666-3.308Z" transform="translate(-384.045 -320.56)" fill="#2cb6ff"/>
+</svg>

src/views/vent/home/configurable/components/preset/RuleList.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="rule-list">
-    <div class="list-title">
-      预警规则配置
-    </div>
+    <div class="list-title"> 预警规则配置 </div>
     <div class="list-content">
       <div class="basic-list-content">
         <div class="content-title">
@@ -11,10 +9,9 @@
         <div class="table-content">
           <div class="content-item" v-for="(item, index) in tableData" :key="index">
             <div class="item-text">{{ item.ruleId }}</div>
-            <div class="item-text">{{ item.ruleName }}
-            </div>
+            <div class="item-text">{{ item.ruleName }} </div>
             <div class="item-text item-text1">{{ item.fctj }}</div>
-            <div class="item-text ">
+            <div class="item-text">
               <a-switch v-model:checked="item.status" size="small" />
             </div>
             <div class="item-text">
@@ -24,8 +21,8 @@
         </div>
       </div>
       <div class="basic-list-content">
-         <basicBorder :widthV="298" colorV="orange" title="【编辑规则】一级温度报警（Rule-001）">
-            <div class="temp-warn">
+        <basicBorder :widthV="298" colorV="orange" title="【编辑规则】一级温度报警（Rule-001）">
+          <div class="temp-warn">
             <div class="warn-item">
               <div class="item-label">规则名称 : </div>
               <a-input class="item-input" v-model:value="rulesData.ruleName" placeholder="请输入" size="small" />
@@ -46,16 +43,16 @@
               <div class="item-label">联动动作 : </div>
               <a-input class="item-input" v-model:value="rulesData.lddz" placeholder="请输入" size="small" />
             </div>
-             <div class="warn-item">
+            <div class="warn-item">
               <div class="item-label">通知对象 : </div>
               <a-input class="item-input" v-model:value="rulesData.person" placeholder="请输入" size="small" />
             </div>
-             <div class="btn-box">
-        <div class="baisc-btn">取消</div>
-        <div class="baisc-btn">
-          <div class="btn-item">保存</div>
-        </div>
-      </div>
+            <div class="btn-box">
+              <div class="baisc-btn">取消</div>
+              <div class="baisc-btn">
+                <div class="btn-item">保存</div>
+              </div>
+            </div>
           </div>
         </basicBorder>
       </div>
@@ -64,9 +61,9 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import basicBorder from '../BasicBorder.vue'
-import { rules } from '/@/utils/helper/validator.js'
+import { reactive, ref } from 'vue';
+import basicBorder from '../BasicBorder.vue';
+import { rules } from '/@/utils/helper/validator.js';
 
 let titleList = ref<any[]>([
   { label: '规则ID', value: '1' },
@@ -74,33 +71,34 @@ let titleList = ref<any[]>([
   { label: '触发条件', value: '3' },
   { label: '启用', value: '4' },
   { label: '操作', value: '5' },
-])
+]);
 let tableData = ref<any[]>([
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: false, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true, },
-])
-let rulesData=reactive({
-ruleName:'',
-grade:'',
-temp:'',
-time:'',
-lddz:'',
-person:'',
-})
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: false },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+  { ruleId: 'Rule-001', ruleName: '一级温度报警', fctj: '温度>=60℃', status: true },
+]);
+let rulesData = reactive({
+  ruleName: '',
+  grade: '',
+  temp: '',
+  time: '',
+  lddz: '',
+  person: '',
+});
 </script>
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
 @{theme-deepblue} {
-  .rule-list {}
+  .rule-list {
+  }
 }
 
 .rule-list {
@@ -116,12 +114,11 @@ person:'',
     width: 177px;
     height: 30px;
     line-height: 22px;
-    padding-left: 16px;
     color: #01fefc;
     font-weight: bolder;
     background: var(--image-box-bg) no-repeat;
-    background-size: 100% 100%;
-    margin-bottom: 5px;
+    background-size: 80% 100%;
+    margin-bottom: 10px;
   }
 
   .list-content {
@@ -154,11 +151,11 @@ person:'',
     justify-content: center;
     align-items: center;
     color: #01fefc;
-    &:nth-child(2){
-      flex:1.5
+    &:nth-child(2) {
+      flex: 1.5;
     }
-    &:nth-child(3){
-      flex:1.5
+    &:nth-child(3) {
+      flex: 1.5;
     }
   }
 
@@ -188,16 +185,16 @@ person:'',
     flex: 1;
     justify-content: center;
     align-items: center;
-    &:nth-child(2){
-        flex:1.5
+    &:nth-child(2) {
+      flex: 1.5;
     }
-     &:nth-child(3){
-        flex:1.5
+    &:nth-child(3) {
+      flex: 1.5;
     }
   }
 
   .item-text1 {
-     color: orange;
+    color: orange;
   }
   .text-look {
     padding: 0px 3px;
@@ -206,12 +203,12 @@ person:'',
     background-color: #2484bc;
     cursor: pointer;
   }
-  .temp-warn{
+  .temp-warn {
     position: relative;
     height: 100%;
   }
-   .warn-item {
-   display: flex;
+  .warn-item {
+    display: flex;
     align-items: center;
     height: 30px;
     background: linear-gradient(to right, #134c77, transparent);
@@ -223,7 +220,7 @@ person:'',
       margin-bottom: 0;
     }
   }
-   .item-label {
+  .item-label {
     width: 100px;
     text-align: right;
     margin-right: 5px;
@@ -233,8 +230,8 @@ person:'',
     border: 1px solid #2792c2;
     color: #fff;
   }
-   .btn-box {
-   width: 140px;
+  .btn-box {
+    width: 140px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -244,7 +241,7 @@ person:'',
   }
 
   .baisc-btn {
-   display: flex;
+    display: flex;
     justify-content: center;
     align-items: center;
     width: 65px;
@@ -263,7 +260,7 @@ person:'',
     height: 100%;
     background-color: rgba(32, 166, 169);
   }
-   ::-webkit-scrollbar{
+  ::-webkit-scrollbar {
     display: none;
   }
 }

src/views/vent/home/configurable/components/preset/linkLog.vue

@@ -79,12 +79,11 @@ let tableData = ref<any[]>([
   width: 177px;
   height: 30px;
   line-height: 22px;
-  padding-left: 16px;
   color: #01fefc;
   font-weight: bolder;
   background: var(--image-box-bg) no-repeat;
-  background-size: 100% 100%;
-  margin-bottom: 8px;
+  background-size: 80% 100%;
+  margin-bottom: 5px;
 }
 
 /* 搜索区域：内部横向排列 */

src/views/vent/home/configurable/components/preset/linkRuleEdit.vue

@@ -90,6 +90,7 @@
               <div class="step-dot">
                 <div class="dot" :class="{ active: step.status === 1 }"></div>
               </div>
+              <div class="steps-arrow"></div>
             </div>
           </div>
         </div>
@@ -180,8 +181,10 @@ onMounted(() => {
 
   .item-input {
     background: transparent !important;
-    border-color: #4a9eff;
+    background: linear-gradient(to right, #114469, #0b2542) !important;
     color: #fff;
+    border: 1px solid #2690c1 !important;
+    border-radius: 5px;
     &:hover,
     &:focus {
       background: transparent !important;
@@ -208,7 +211,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     height: 32px;
-    background: #134266;
+    background: linear-gradient(to right, #114469, #0b2542) !important;
     margin-bottom: 10px;
     padding: 0 10px;
     box-sizing: border-box;
@@ -278,11 +281,12 @@ onMounted(() => {
     width: 177px;
     height: 30px;
     line-height: 22px;
-    padding-left: 16px;
+    padding-left: 5px;
+    padding-bottom: 5px;
     color: #01fefc;
     font-weight: bolder;
     background: var(--image-box-bg) no-repeat;
-    background-size: 100% 100%;
+    background-size: 80% 100%;
     margin-bottom: 5px;
   }
 
@@ -404,6 +408,17 @@ onMounted(() => {
     content: '';
     position: absolute;
     left: 12%;
+    right: calc(50% - 12px);
+    top: 95%;
+    transform: translateY(-50%);
+    height: 2px;
+    background: #4a9eff;
+    z-index: 1;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: calc(50% + 12px);
     right: 12%;
     top: 95%;
     transform: translateY(-50%);
@@ -411,8 +426,20 @@ onMounted(() => {
     background: #4a9eff;
     z-index: 1;
   }
+  .steps-arrow {
+    position: absolute;
+    left: 5%;
+    top: 95%;
+    transform: translate(-50%, -50%);
+    width: 24px;
+    height: 24px;
+    background: url('@/assets/images/home-container/configurable/hsq/arrow.svg') center / contain no-repeat;
+    z-index: 2;
+  }
+  .step-item:first-child .steps-arrow {
+    display: none;
+  }
 }
-
 .step-item {
   display: flex;
   flex-direction: column;
@@ -427,6 +454,7 @@ onMounted(() => {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
+  margin-bottom: -6px;
 }
 
 .icon-alarm {
@@ -449,7 +477,7 @@ onMounted(() => {
   position: relative;
   width: 100%;
   max-width: 120px;
-  padding: 8px 12px;
+  padding: 2px;
   background-image: url('@/assets/images/home-container/configurable/hsq/3-6.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;

src/views/vent/home/configurable/components/preset/ruleNum.vue

@@ -63,19 +63,17 @@ import { ref } from 'vue';
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 15px;
+  padding: 10px;
   box-sizing: border-box;
-
   .list-title {
     width: 177px;
     height: 30px;
     line-height: 22px;
-    padding-left: 16px;
     color: #01fefc;
     font-weight: bolder;
     background: var(--image-box-bg) no-repeat;
-    background-size: 100% 100%;
-    margin-bottom: 20px;
+    background-size: 80% 100%;
+    margin-bottom: 10px;
   }
 
   /* 外层改为 Flex 两列布局 */

src/views/vent/home/configurable/components/preset/ruleTable.vue

@@ -68,11 +68,10 @@ let tableData = ref<any[]>([
   width: 177px;
   height: 30px;
   line-height: 22px;
-  padding-left: 16px;
   color: #01fefc;
   font-weight: bolder;
   background: var(--image-box-bg) no-repeat;
-  background-size: 100% 100%;
+  background-size: 80% 100%;
   margin-bottom: 5px;
 }
 .search-area {

src/views/vent/home/configurable/configurable.data.ts

@@ -940,7 +940,7 @@ export const testConfigLink: Config[] = [
   },
   {
     deviceType: '',
-    moduleName: '规则统计',
+    moduleName: '联动规则编辑器',
     pageType: 'gas_injection',
     moduleData: {
       header: {
@@ -965,7 +965,7 @@ export const testConfigLink: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'rule_num',
+            name: 'link_edit',
             basis: '100%',
           },
         ],
@@ -985,14 +985,14 @@ export const testConfigLink: Config[] = [
       to: '',
     },
     showStyle: {
-      size: 'width:420px;height:180px;',
+      size: 'width:1020px;height:calc(100% - 76px);',
       version: '普通版',
-      position: 'bottom:10px;bottom:10px;',
+      position: 'top:65px;left:440px;',
     },
   },
   {
     deviceType: '',
-    moduleName: '联动规则编辑器',
+    moduleName: '规则统计',
     pageType: 'gas_injection',
     moduleData: {
       header: {
@@ -1017,7 +1017,7 @@ export const testConfigLink: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'link_edit',
+            name: 'rule_num',
             basis: '100%',
           },
         ],
@@ -1037,11 +1037,12 @@ export const testConfigLink: Config[] = [
       to: '',
     },
     showStyle: {
-      size: 'width:1020px;height:calc(100% - 76px);',
+      size: 'width:420px;height:180px;',
       version: '普通版',
-      position: 'top:65px;left:440px;',
+      position: 'bottom:10px;bottom:10px;',
     },
   },
+
   {
     deviceType: '',
     moduleName: '联动日志',

src/views/vent/home/configurable/gasInjection.vue

@@ -63,7 +63,7 @@ function changeMenu(param) {
   width: 100%;
   height: 100%;
   color: #fff;
-  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+  /* background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center; */
 
   .top-bg {
     width: 100%;