refactor: 移除 rem 适配改用固定像素布局

src/main.js

@@ -24,34 +24,6 @@ Vue.component('virtual-scroller', VirtualScroller);
 import dataV from '@jiaminghi/data-view'
 
 import { all, create } from 'mathjs'; // 引入mathjs工具并初始化
-
-// REM 适配大屏 - 基于设计稿 1920px
-(function() {
-  function setRem() {
-    const baseSize = 192; // 基础值，设计稿宽度 / 10
-    const scale = document.documentElement.clientWidth / 1920;
-    // 限制最大缩放比例为 2 倍
-    const rem = baseSize * Math.min(scale, 2);
-    document.documentElement.style.fontSize = rem + 'px';
-    // 同时设置 data 属性，方便 CSS 中使用
-    document.documentElement.setAttribute('data-scale', Math.min(scale, 2).toFixed(4));
-  }
-
-  // 初始化
-  setRem();
-
-  // 防抖处理
-  let timer = null;
-  window.addEventListener('resize', function() {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(setRem, 100);
-  });
-
-  // 确保 DOM 加载完成后执行
-  if (document.readyState !== 'complete') {
-    window.addEventListener('load', setRem);
-  }
-})();
 // 注册全局自定义指令
 Vue.directive('click-once', clickOnce);
 Vue.directive('no-chinese', noChinese);

src/views/home/index.vue

@@ -6,7 +6,6 @@
     fullscreenClass="box-container"
     :exit-on-click-wrapper="false"
   >
-    <!-- 中间内容区域 - 可左右滚动，头部跟随 -->
     <div class="box-content">
       <div class="scroll-wrapper">
         <!-- 头部区域 - 跟随滚动 -->
@@ -29,7 +28,7 @@
               </el-select>
             </div>
             <div class="header-center">
-              <div class="title">生产管控</div>
+              <div class="title" style="margin-bottom: 20px;">生产管控</div>
             </div>
             <div class="time">
               <div class="time-display">
@@ -245,9 +244,9 @@
     },
     watch: {
       isFullscreen: {
-        // handler() {
-        //   this.handleResize();
-        // },
+        handler() {
+          this.handleResize();
+        },
         immediate: true
       }
     },
@@ -270,7 +269,7 @@
     mounted() {
       this.updateTimer = setInterval(this.updateTime, 1000);
 
-      // window.addEventListener('resize', this.handleResize);
+      window.addEventListener('resize', this.handleResize);
       // 初始化时同步头部宽度
       // this.$nextTick(() => {
       //   this.syncHeaderWidth();
@@ -278,7 +277,7 @@
     },
     beforeDestroy() {
       clearInterval(this.updateTimer);
-      // window.removeEventListener('resize', this.handleResize);
+      window.removeEventListener('resize', this.handleResize);
       Object.values(this.charts).forEach((chart) => chart && chart.dispose());
     },
     methods: {
@@ -479,38 +478,38 @@
         const day = now.getDate().toString().padStart(2, '0');
         this.date = `${year}-${month}-${day}`;
       },
-      // syncHeaderWidth() {
-      //   this.$nextTick(() => {
-      //     const threeColumnLayout =
-      //       document.querySelector('.two-column-layout');
-      //     const headerSection = document.querySelector('.header-section');
-      //     if (threeColumnLayout && headerSection) {
-      //       const layoutWidth = threeColumnLayout.scrollWidth;
-      //       headerSection.style.width = layoutWidth + 'px';
-      //     }
-      //   });
-      // },
-      // handleResize() {
-      //   this.$nextTick(() => {
-      //     // 同步头部宽度
-      //     this.syncHeaderWidth();
-
-      //     const { clientWidth, clientHeight } = document.documentElement;
-      //     const containers = document.getElementsByClassName('box-container');
-      //     Array.from(containers).forEach((item) => {
-      //       if (this.isFullscreen) {
-      //         item.style.height = clientHeight + 'px';
-      //         item.style.width = clientWidth + 'px';
-      //       } else {
-      //         item.style.height = clientHeight - 100 + 'px';
-      //         item.style.width = clientWidth - 240 + 'px';
-      //       }
-      //     });
-      //     Object.values(this.charts).forEach(
-      //       (chart) => chart && chart.resize()
-      //     );
-      //   });
-      // },
+      syncHeaderWidth() {
+        this.$nextTick(() => {
+          const threeColumnLayout =
+            document.querySelector('.two-column-layout');
+          const headerSection = document.querySelector('.header-section');
+          if (threeColumnLayout && headerSection) {
+            const layoutWidth = threeColumnLayout.scrollWidth;
+            headerSection.style.width = layoutWidth + 'px';
+          }
+        });
+      },
+      handleResize() {
+        this.$nextTick(() => {
+          // 同步头部宽度
+          // this.syncHeaderWidth();
+
+          // const { clientWidth, clientHeight } = document.documentElement;
+          // const containers = document.getElementsByClassName('box-container');
+          // Array.from(containers).forEach((item) => {
+          //   if (this.isFullscreen) {
+          //     item.style.height = clientHeight + 'px';
+          //     item.style.width = clientWidth + 'px';
+          //   } else {
+          //     item.style.height = clientHeight - 100 + 'px';
+          //     item.style.width = clientWidth - 240 + 'px';
+          //   }
+          // });
+          Object.values(this.charts).forEach(
+            (chart) => chart && chart.resize()
+          );
+        });
+      },
 
       initWaterChart(res) {
         if (!this.$refs.waterChart) return;
@@ -834,28 +833,29 @@
     height: 100%;
 
     .box-header-scroll {
-      height: 0.417rem;
+      height: 80px;
       background: url('~@/assets/pcs/header.png') no-repeat center top;
       background-size: 100% 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 0.104rem;
+      padding: 0 20px;
       position: relative;
       z-index: 10;
 
       .logo {
-        padding-top: 0.052rem;
+        // width: 200px;
+        padding-top: 10px;
         position: absolute;
-        left: 0.417rem;
+        left: 80px;
 
         ::v-deep .custom-select {
           .el-input__inner {
             background: #0d2960;
             border: 1px solid #1a4a8a;
             color: #fff;
-            height: 0.188rem;
-            line-height: 0.188rem;
+            height: 36px;
+            line-height: 36px;
 
             &::placeholder {
               color: #8ba3c7;
@@ -873,22 +873,21 @@
       .title {
         flex: 1;
         text-align: center;
-        font-size: 0.16rem;
-        margin-bottom: 0.14rem;
+        font-size: 28px;
         font-weight: bold;
         color: #fff;
-        text-shadow: 0 0 0.052rem rgba(59, 130, 246, 0.5);
-        letter-spacing: 0.021rem;
+        text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
+        letter-spacing: 4px;
       }
 
       .time {
         position: absolute;
-        right: 0.156rem;
-        width: 1.458rem;
+        right: 30px;
+        width: 280px;
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        gap: 0.078rem;
+        gap: 15px;
 
         .time-display {
           display: flex;
@@ -896,12 +895,12 @@
           align-items: flex-end;
 
           .date-text {
-            font-size: 0.073rem;
+            font-size: 14px;
             color: #8ba3c7;
           }
 
           .time-text {
-            font-size: 0.104rem;
+            font-size: 20px;
             font-weight: bold;
             color: #fff;
           }
@@ -909,7 +908,7 @@
 
         .fullscreen-toggle {
           cursor: pointer;
-          font-size: 0.104rem;
+          font-size: 20px;
           color: #8ba3c7;
           transition: color 0.3s;
 
@@ -936,9 +935,11 @@
       overflow: auto;
       font-family: 'Microsoft YaHei', sans-serif;
       flex: 1;
+      // overflow-x: auto;
+      // overflow-y: hidden;
 
       &::-webkit-scrollbar {
-        height: 0.031rem;
+        height: 6px;
       }
 
       &::-webkit-scrollbar-track {
@@ -947,17 +948,21 @@
 
       &::-webkit-scrollbar-thumb {
         background: linear-gradient(180deg, #1a4a8a, #0d2a5a);
-        border-radius: 0.016rem;
+        border-radius: 3px;
       }
 
       .scroll-wrapper {
+        // display: flex;
         display: inline-block;
         height: 100%;
+        // flex-direction: column;
+        // gap: 20px;
+        // padding: 0 20px 20px 20px;
         width: 100%;
         .header-section {
           width: auto;
           flex-shrink: 0;
-          padding-top: 0.052rem;
+          padding-top: 10px;
           min-width: 100%;
         }
 
@@ -965,10 +970,10 @@
           display: flex;
           justify-content: space-between;
           flex: 1;
-          min-height: 4.427rem;
-          height: calc(100% - 0.677rem);
+          // min-height: 850px;
+          height: calc(100% - 130px);
           min-width: 100%;
-          margin-top: 0.104rem;
+          margin-top: 20px;
           font-size: 0;
           background: url('~@/assets/pcs/back.png') no-repeat center top;
           background-size: 100% 100%;
@@ -979,14 +984,14 @@
       .right-section {
         display: inline-flex;
         flex-direction: column;
-        gap: 0.078rem;
+        gap: 15px;
         overflow: hidden;
         height: 100%;
-        font-size: 0.073rem;
+        font-size: 14px;
         white-space: normal;
         min-width: 45%;
         flex: 1;
-        margin-right: 0.104rem;
+        margin-right: 20px;
 
         &:last-child {
           margin-right: 0;
@@ -994,16 +999,27 @@
       }
 
       .panel {
-        padding: 0.078rem;
+        // background: linear-gradient(
+        //   135deg,
+        //   rgba(16, 42, 88, 0.9) 0%,
+        //   rgba(10, 28, 65, 0.85) 100%
+        // );
+        // border: 1px solid rgba(42, 90, 170, 0.4);
+        // border-radius: 8px;
+        padding: 15px;
         min-height: 0;
+        // box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
+        //   0 4px 20px rgba(0, 0, 0, 0.3);
 
         .panel-title {
-          font-size: 0.146rem;
+          font-size: 24px;
+          // font-weight: bold;
+          // font-style: italic;
           font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
           color: #fff;
-          margin-bottom: 0.078rem;
-          height: 0.219rem;
-          padding-left: 0.208rem;
+          margin-bottom: 15px;
+          height: 42px;
+          padding-left: 40px;
           position: relative;
           display: flex;
           align-items: center;
@@ -1013,40 +1029,40 @@
           &.energy-title {
             display: flex;
             justify-content: space-between;
-            padding-right: 0.078rem;
+            padding-right: 15px;
 
             .title-left {
               display: flex;
               align-items: center;
-              gap: 0.042rem;
+              gap: 8px;
             }
           }
           .panel-icon {
             position: absolute;
-            left: 0.078rem;
-            width: 0.104rem;
-            height: 0.13rem;
+            left: 15px;
+            width: 20px;
+            height: 25px;
             background: url('~@/assets/pcs/titleIcon.png') no-repeat center top;
             background-size: 100% 100%;
           }
         }
         .energy-tabs {
           position: absolute;
-          top: 0.339rem;
-          right: 0.208rem;
+          top: 65px;
+          right: 40px;
           z-index: 999;
           display: flex;
           gap: 0;
           background: rgba(13, 41, 96, 0.5);
-          border-radius: 0.021rem;
-          padding: 0.01rem;
+          border-radius: 4px;
+          padding: 2px;
 
           .tab-item {
-            padding: 0.021rem 0.063rem;
-            font-size: 0.063rem;
+            padding: 4px 12px;
+            font-size: 12px;
             color: #8ba3c7;
             cursor: pointer;
-            border-radius: 0.016rem;
+            border-radius: 3px;
             transition: all 0.3s;
 
             &:hover {
@@ -1062,7 +1078,7 @@
       }
 
       .data-panel {
-        min-height: 1.146rem;
+        min-height: 220px;
         flex-shrink: 0;
         display: flex;
         flex-direction: column;
@@ -1074,7 +1090,9 @@
 
         .data-grid {
           display: flex;
-          gap: 0.063rem;
+
+          gap: 12px;
+          // padding: 10px 0;
           align-items: center;
           justify-content: space-between;
           flex-wrap: wrap;
@@ -1082,40 +1100,65 @@
           height: 100%;
 
           .data-item {
+            // background: linear-gradient(
+            //   135deg,
+            //   rgba(20, 50, 105, 0.9) 0%,
+            //   rgba(14, 38, 82, 0.85) 100%
+            // );
+            // border: 1px solid rgba(45, 95, 180, 0.5);
             .img {
-              width: 0.182rem;
-              height: 0.182rem;
+              width: 35px;
+              height: 35px;
               background: url('~@/assets/pcs/icon.png') no-repeat center top;
               background-size: 100% 100%;
             }
-            border-radius: 0.031rem;
+            border-radius: 6px;
             display: flex;
             .data-item_value {
               display: flex;
               flex-direction: column;
+              // align-items: center;
             }
+            // flex-direction: column;
             align-items: center;
-            padding-left: 0.078rem;
-            gap: 0.042rem;
+            // justify-content: center;
+            padding-left: 15px;
+            gap: 8px;
             position: relative;
             overflow: hidden;
             width: 21%;
-            height: 0.313rem;
+            height: 60px;
             background: url('~@/assets/pcs/leftItem.png') no-repeat center top;
             background-size: 100% 100%;
 
+            // &::before {
+            //   content: '';
+            //   position: absolute;
+            //   top: 0;
+            //   left: 0;
+            //   right: 0;
+            //   height: 2px;
+            //   background: linear-gradient(
+            //     90deg,
+            //     transparent,
+            //     #00d4ff,
+            //     transparent
+            //   );
+            //   box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
+            // }
+
             .data-label {
-              font-size: 0.063rem;
+              font-size: 12px;
               color: #8ba3c7;
               text-align: center;
               line-height: 1.3;
             }
 
             .data-value {
-              font-size: 0.094rem;
+              font-size: 18px;
               font-weight: bold;
               color: #b6ceff;
-              text-shadow: 0 0 0.052rem rgba(0, 212, 255, 0.5);
+              text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
             }
           }
         }
@@ -1123,7 +1166,7 @@
 
       .chart-panel {
         flex: 1;
-        min-height: 1.302rem;
+        min-height: 250px;
         display: flex;
         flex-direction: column;
 
@@ -1133,9 +1176,96 @@
           min-height: 0;
         }
       }
+      .param-card3 {
+        right: 10px;
+      }
+      .param-card2 {
+        left: 30%;
+      }
+      .param-card {
+        width: 23%;
+        top: 50px;
+
+        position: absolute;
+        background: rgba(39, 88, 233, 0.1);
+        border: 1px solid #3373d4;
+        border-radius: 8px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: linear-gradient(90deg, transparent, #00d4ff, transparent);
+          box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+        }
+
+        .param-title {
+          font-size: 14px;
+          font-weight: bold;
+          color: #fff;
+          padding-bottom: 12px;
+          padding-top: 12px;
+          text-align: center;
+          text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+          border-bottom: 1px solid rgba(0, 212, 255, 0.5);
+          background: rgba(39, 88, 233, 0.1);
+        }
+
+        .param-list {
+          padding: 15px;
+
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+
+          .param-item {
+            display: flex;
+            justify-content: space-between;
+            font-size: 12px;
+            padding: 4px 0;
+            // border-bottom: 1px dashed rgba(138, 163, 199, 0.2);
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            .param-name {
+              color: #8ba3c7;
+            }
+
+            .param-value {
+              color: #fff;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+
+      .pipeline-container {
+        flex: 1;
+        min-height: 0;
+        position: absolute;
+        bottom: 15px;
+        left: 0;
+        height: 60%;
+        width: 100%;
+        // background: linear-gradient(
+        //   135deg,
+        //   rgba(14, 40, 85, 0.6) 0%,
+        //   rgba(10, 28, 60, 0.5) 100%
+        // );
+        // border: 1px solid rgba(45, 95, 180, 0.3);
+        // border-radius: 8px;
+        background: url('~@/assets/pcs/home.png') no-repeat center top;
+        background-size: 100% 100%;
+        // max-height: 680px;
+      }
 
       .alert-panel {
-        min-height: 1.146rem;
+        min-height: 220px;
         flex-shrink: 0;
         display: flex;
         flex-direction: column;
@@ -1150,8 +1280,10 @@
           min-height: 0;
           display: flex;
           align-items: center;
-          height: calc(100% - 0.182rem);
+          height: calc(100% - 35px);
+          // gap: 20px;
 
+          // 左侧数据卡片区域
           .alert-cards {
             width: 50%;
             height: 100%;
@@ -1162,43 +1294,70 @@
 
             .alert-card-item {
               width: 42%;
+              // background: linear-gradient(
+              //   135deg,
+              //   rgba(20, 50, 105, 0.9) 0%,
+              //   rgba(14, 38, 82, 0.85) 100%
+              // );
+              // border: 1px solid rgba(45, 95, 180, 0.5);
               .img {
-                width: 0.182rem;
-                height: 0.182rem;
+                width: 35px;
+                height: 35px;
                 background: url('~@/assets/pcs/icon.png') no-repeat center top;
                 background-size: 100% 100%;
-                margin-right: 0.078rem;
+                margin-right: 15px;
               }
-              border-radius: 0.031rem;
+              border-radius: 6px;
               display: flex;
               .data-item_value {
                 display: flex;
                 flex-direction: column;
+                // align-items: center;
               }
+              // flex-direction: column;
               align-items: center;
-              padding-left: 0.078rem;
+              // justify-content: center;
+              padding-left: 15px;
+              // gap: 8px;
               position: relative;
               overflow: hidden;
               height: 30%;
               background: url('~@/assets/pcs/leftItem.png') no-repeat center top;
               background-size: 100% 100%;
 
+              // &::before {
+              //   content: '';
+              //   position: absolute;
+              //   top: 0;
+              //   left: 0;
+              //   right: 0;
+              //   height: 2px;
+              //   background: linear-gradient(
+              //     90deg,
+              //     transparent,
+              //     #00d4ff,
+              //     transparent
+              //   );
+              //   box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
+              // }
+
               .data-label {
-                font-size: 0.063rem;
+                font-size: 12px;
                 color: #8ba3c7;
                 text-align: center;
                 line-height: 1.3;
               }
 
               .data-value {
-                font-size: 0.094rem;
+                font-size: 18px;
                 font-weight: bold;
                 color: #b6ceff;
-                text-shadow: 0 0 0.052rem rgba(0, 212, 255, 0.5);
+                text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
               }
             }
           }
 
+          // 右侧环形图区域
           .alert-pie-chart {
             width: 50%;
             height: 100%;
@@ -1210,7 +1369,7 @@
             .alert-pie {
               width: 100%;
               height: 100%;
-              min-height: 0.938rem;
+              min-height: 180px;
             }
           }
         }
@@ -1221,7 +1380,7 @@
         min-height: 0;
         display: flex;
         flex-direction: column;
-        min-height: 1.302rem;
+        min-height: 250px;
 
         .alert-table {
           flex: 1;
@@ -1230,15 +1389,15 @@
 
           .table-header {
             display: grid;
-            grid-template-columns: 0.26rem 0.469rem 0.521rem 0.365rem 1fr 0.677rem 0.365rem;
-            gap: 0.031rem;
-            padding: 0.052rem 0.031rem;
+            grid-template-columns: 50px 90px 100px 70px 1fr 130px 70px;
+            gap: 6px;
+            padding: 10px 6px;
             background: linear-gradient(
               90deg,
               rgba(16, 45, 95, 0.9) 0%,
               rgba(12, 35, 75, 0.85) 100%
             );
-            font-size: 0.063rem;
+            font-size: 12px;
             color: #00d4ff;
             text-align: center;
             font-weight: 500;

src/views/recordComponents/bindSubstanceList.vue

@@ -167,9 +167,12 @@
       },
       getPhysicalModel(id) {
         getPhysicalModel(id).then((res) => {
-          this.physicalList = res.properties;
-          if (this.cachingData[id]) {
-            this.$refs.table.setSelectedRows(this.cachingData[id].list);
+          this.physicalList = [];
+          if (res.code == 0) {
+            this.physicalList = res.data.properties;
+            if (this.cachingData[id]) {
+              this.$refs.table.setSelectedRows(this.cachingData[id].list);
+            }
           }
         });
       },

src/views/recordComponents/programRulesDialog.vue

@@ -139,7 +139,7 @@
               multiple
               filterable
               @change="executeIdListChange"
-              key="executeIdList"
+      
             >
               <el-option
                 v-for="item in executorList"
@@ -301,6 +301,7 @@
               icon="el-icon-plus"
               class="ele-btn-icon"
               @click="bindSubstanceListOpen"
+              v-if="addForm.associatedObject == 2"
             >
               添加物联参数
             </el-button>
@@ -1246,8 +1247,8 @@
         this.currentIndex = index;
         this.$refs.bindSubstanceRef.open(
           this.addForm.deviceId,
-          this.addForm.deviceCode,
-          this.addForm.deviceName
+          this.addForm.deviceName,
+          this.addForm.deviceCode
         );
       },
       bindSubstanceListOpen() {
@@ -1314,7 +1315,6 @@
       selectChooseModalProduct(row) {
         this.currentRow = row;
         this.$refs.toolModalTowRef.open([], '选择物品');
-        alert(1);
       },
       chooseModalProduct(current) {
         this.currentRow.productName = current.name;
@@ -1404,10 +1404,7 @@
           this.$set(row, 'activeIndex', index);
         }
       },
-      handleAdd(row) {
-        this.currentRow = row;
-        this.$refs.toolModalRef.open(row.toolCodes);
-      },
+
       chooseModal(data) {
         console.log('data', data);
         this.currentRow.tools = data.map((i) => {
@@ -1417,10 +1414,7 @@
           };
         });
       },
-      // 清空工具
-      clearTool(row) {
-        row.tools = [];
-      },
+
       deleteRow(time, row) {
         const index = this.addForm.detailList.findIndex(
           (item) => item.id === row.id

vue.config.js

@@ -93,22 +93,6 @@ module.exports = {
           outputStyle: 'expanded',
           importer: transformElementScss()
         }
-      },
-      postcss: {
-        postcssOptions: {
-          plugins: [
-            require('postcss-pxtorem')({
-              rootValue: 192, // 设计稿宽度 / 10，如设计稿宽度为 1920px，则 rootValue 为 192
-              unitPrecision: 5, // 转换后的小数精度
-              propList: ['*'], // 需要转换的属性，* 表示全部
-              selectorBlackList: ['.el-', '.dv-', '.data-'], // 不需要转换的选择器（排除第三方组件）
-              replace: true, // 是否替换
-              mediaQuery: false, // 是否转换媒体查询中的像素值
-              minPixelValue: 2, // 小于或等于 2px 不转换
-              exclude: /(^@\/views\/home\/|node_modules)/i // 只转换 views/home 目录（大屏页面）
-            })
-          ]
-        }
       }
     }
   }