Преглед изворни кода

[Fix 0000]联动配置页面样式优化

bobo04052021@163.com пре 5 дана
родитељ
комит
68f587107b

BIN
src/assets/images/home-container/configurable/hsq/4-1bg.png


+ 1 - 1
src/views/vent/home/configurable/components/preset/RuleList.vue

@@ -107,7 +107,7 @@ let rulesData = reactive({
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 15px;
+  padding: 10px 15px;
   box-sizing: border-box;
 
   .list-title {

+ 21 - 17
src/views/vent/home/configurable/components/preset/linkRuleEdit.vue

@@ -35,19 +35,19 @@
           <div class="edit-right">
             <div class="right-title">条件逻辑说明</div>
             <div class="right-content">
-              <div class="right-item">IF 温度≥60℃</div>
-              <div class="right-item">AND 持续时间≥30s</div>
+              <div class="right-item">IF 温度≥{{ formData.wdyz || 60 }}℃</div>
+              <div class="right-item">AND 持续时间≥{{ formData.time || 30 }}s</div>
               <div class="right-item">AND 设备状态-在线</div>
               <div class="right-item">AND 时间在生效范围内</div>
               <div class="right-item">THEN 执行联动动作</div>
               <div class="right-item">【优先级:高】</div>
-              <div class="right-item">此规则触发后将组织低优先级</div>
+              <div class="right-item">此规则触发后将阻断低优先级</div>
             </div>
           </div>
         </div>
       </basicBorder>
     </div>
-    <div class="basic-box">
+    <div class="basic-box1">
       <basicBorder title="联动动作设置">
         <div class="basic-table">
           <div class="table-title">
@@ -77,7 +77,7 @@
         </div>
       </basicBorder>
     </div>
-    <div class="basic-box1">
+    <div class="basic-box2">
       <basicBorder title="联动执行流程图">
         <div class="workflow-container">
           <div class="steps-wrapper">
@@ -149,11 +149,19 @@ const fetchStepStatus = async () => {
 let formData = reactive({
   gzmc: '一级温度报警',
   bjjb: '一级(严重)',
-  wdyz: '60℃',
+  wdyz: '50',
   cfsb: '声光报警',
-  time: '≥30s',
+  time: '≥35',
   sjfw: '值班人员',
 });
+// const formData = ref({
+//   gzmc: '',
+//   bjjb: '',
+//   wdyz: '',
+//   cfsb: '',
+//   time: '',
+//   sjfw: '',
+// });
 onMounted(() => {
   fetchStepStatus();
 });
@@ -178,7 +186,6 @@ onMounted(() => {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-
   .item-input {
     background: transparent !important;
     background: linear-gradient(to right, #114469, #0b2542) !important;
@@ -191,12 +198,15 @@ onMounted(() => {
     }
     box-shadow: none !important;
   }
-
+  .basic-box1,
+  .basic-box2 {
+    margin-top: 10px;
+  }
   .edit-wrap {
     display: flex;
     width: 100%;
     height: 100%;
-    gap: 30px;
+    gap: 10px;
     box-sizing: border-box;
   }
   .edit-left {
@@ -204,7 +214,7 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin: 10px;
+    margin: 5px;
   }
 
   .edit-item {
@@ -299,12 +309,6 @@ onMounted(() => {
     text-align: right;
     margin-right: 5px;
   }
-  .basic-box,
-  .basic-box1 {
-    flex: 1;
-    width: 100%;
-  }
-
   .table-title {
     display: flex;
     align-items: center;

+ 1 - 2
src/views/vent/home/configurable/components/preset/ruleNum.vue

@@ -63,7 +63,7 @@ import { ref } from 'vue';
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 10px;
+  padding: 15px 15px;
   box-sizing: border-box;
   .list-title {
     width: 177px;
@@ -76,7 +76,6 @@ import { ref } from 'vue';
     margin-bottom: 10px;
   }
 
-  /* 外层改为 Flex 两列布局 */
   .list-content {
     display: flex;
     flex-wrap: wrap;

+ 2 - 2
src/views/vent/home/configurable/components/preset/ruleTable.vue

@@ -61,7 +61,7 @@ let tableData = ref<any[]>([
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 15px;
+  padding: 10px;
   box-sizing: border-box;
 }
 .list-title {
@@ -125,7 +125,7 @@ let tableData = ref<any[]>([
 }
 
 .history-content {
-  height: calc(100% - 40px);
+  height: 100%;
   overflow-y: auto;
 }
 

+ 8 - 9
src/views/vent/home/configurable/configurable.data.ts

@@ -992,7 +992,7 @@ export const testConfigLink: Config[] = [
   },
   {
     deviceType: '',
-    moduleName: '规则统计',
+    moduleName: '联动日志',
     pageType: 'gas_injection',
     moduleData: {
       header: {
@@ -1017,7 +1017,7 @@ export const testConfigLink: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'rule_num',
+            name: 'link_log',
             basis: '100%',
           },
         ],
@@ -1037,15 +1037,14 @@ export const testConfigLink: Config[] = [
       to: '',
     },
     showStyle: {
-      size: 'width:420px;height:180px;',
+      size: 'width:420px;height:calc(100% - 10px);',
       version: '普通版',
-      position: 'bottom:10px;bottom:10px;',
+      position: 'top:0px;right:10px;',
     },
   },
-
   {
     deviceType: '',
-    moduleName: '联动日志',
+    moduleName: '规则统计',
     pageType: 'gas_injection',
     moduleData: {
       header: {
@@ -1070,7 +1069,7 @@ export const testConfigLink: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'link_log',
+            name: 'rule_num',
             basis: '100%',
           },
         ],
@@ -1090,9 +1089,9 @@ export const testConfigLink: Config[] = [
       to: '',
     },
     showStyle: {
-      size: 'width:420px;height:calc(100% - 10px);',
+      size: 'width:420px;height:180px;',
       version: '普通版',
-      position: 'top:0px;right:10px;',
+      position: 'bottom:10px;bottom:10px;',
     },
   },
 ];

+ 2 - 1
src/views/vent/home/configurable/linkConfiguration.vue

@@ -64,6 +64,7 @@ onUnmounted(() => {
 .device-manger {
   --image-box1-bg: url('@/assets/images/home-container/configurable/hsq/2-4.png');
   --image-box1-bg1: url('@/assets/images/home-container/configurable/hsq/2-10.png');
+  --image-box1-bg2: url('@/assets/images/home-container/configurable/hsq/4-1bg.png');
   width: 100%;
   height: 100%;
   color: @white;
@@ -89,7 +90,7 @@ onUnmounted(() => {
     background-size: 100% 100%;
   }
   &:nth-child(4) {
-    background: var(--image-box1-bg) no-repeat;
+    background: var(--image-box1-bg2) no-repeat;
     background-size: 100% 100%;
   }
 }