div改成dialog

src/pages/bpb/index.vue

@@ -74,11 +74,11 @@
                 <tbody>
                 <tr>
                   <td rowspan="2">{{ item.name }}<br>{{ item.bomSpec }}</td>
-                  <td>需求：{{ item.need / 1000 }} T</td>
+                  <td>需求：{{ (item.need / 1000).toFixed(2) }} T</td>
                 </tr>
                 <tr>
                   <td :style="{opacity:item.opacity,transition: 'opacity 0.5s'}">
-                    库存：{{ item.storage == null ? '？' : item.storage / 1000 + ' T' }}
+                    库存：{{ item.storage == null ? '？' : (item.storage / 1000).toFixed(2) + ' T' }}
                   </td>
                 </tr>
                 </tbody>
@@ -86,7 +86,7 @@
               <img src="../../assets/image/bpb/v320.png" class="link_point"
                    :style="{top:'90%',left:'90%',zIndex:item.zindex}">
               <div class="cl" :style="{top:'102%',left:'119%',zIndex:item.zindex}"><b
-                  class="">{{ item.plc == null ? '?' : item.plc / 1000 + 'T' }}</b></div>
+                  class="">{{ item.plc == null ? '?' : (item.plc / 1000).toFixed(2) + 'T' }}</b></div>
             </div>
           </template>
         </div>
@@ -164,8 +164,8 @@
               </tr>
               <!--
               <tr><td>
-                  <div v-if="!item.isalarm">产能充足,超额 {{(item.neednum/1000).toFixed(1)}} T</div>
-                  <div v-else>产能不足,差额 {{(item.neednum/1000).toFixed(1)}}T</div>
+                  <div v-if="!item.isalarm">产能充足,超额 {{(item.neednum/1000).toFixed(2)}} T</div>
+                  <div v-else>产能不足,差额 {{(item.neednum/1000).toFixed(2)}}T</div>
               </td></tr>
               -->
               <tr>
@@ -201,107 +201,136 @@
       <el-button @click="closeOrderWin">关闭</el-button>
     </div>
   </div>
-  <div class="abs bom_all" ref="bom_list_all" v-if="allBomListShow">
-    <div class="bom_triangle2"></div>
-    <div class="bom_triangle"></div>
-    <el-table :data="bpb_mt_item_data" style="height: 360px;">
-      <el-table-column label="物料编码" align="center" prop="id"/>
-      <el-table-column label="规格型号" align="center" prop="bomSpec"/>
-      <el-table-column label="物料名称" align="center" prop="name" width="240px"/>
-      <el-table-column label="需求(T)" align="center" prop="need">
-        <template #default="scope">
-          <span>{{ (scope.row.need / 1000).toFixed(1) }} T</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="产能(T)" align="center" prop="plc">
-        <template #default="scope">
-          <span>{{ (scope.row.plc / 1000).toFixed(1) }} T</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div style="line-height: 40px;text-align: center;">
-      <el-button @click="closeAllBomList">关闭</el-button>
+  <el-dialog
+    v-model="allBomListShow"
+    title="物料清单"
+    width="800px"
+    :modal="true"
+    append-to-body
+    class="bom-list-dialog"
+    :top="'15vh'"
+    style="background: rgb(0 85 102 / 92%); border: 1px solid #008899; border-radius: 5px; height: 70vh;"
+    :lock-scroll="false"
+  >
+    <template #header>
+      <div style="color: white; font-size: 16px; font-weight: bold;">物料清单</div>
+    </template>
+    <div class="bom_all_dialog">
+      <el-table :data="bpb_mt_item_data" style="height: 360px;">
+        <el-table-column label="物料编码" align="center" prop="id"/>
+        <el-table-column label="规格型号" align="center" prop="bomSpec"/>
+        <el-table-column label="物料名称" align="center" prop="name" width="240px"/>
+        <el-table-column label="需求(T)" align="center" prop="need">
+          <template #default="scope">
+            <span>{{ (scope.row.need / 1000).toFixed(2) }} T</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="产能(T)" align="center" prop="plc">
+          <template #default="scope">
+            <span>{{ (scope.row.plc / 1000).toFixed(2) }} T</span>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-  </div>
-  <div class="abs bom_all" ref="result_list_all"
-       :style="{'left':'auto !important','height':result_table_height+100+'px'}" v-if="allOrderResultShow">
-    <div class="bom_triangle2"></div>
-    <div class="bom_triangle"></div>
-    <el-tabs v-model="result_tab_index">
-      <el-tab-pane label="预测结果" name="t1">
-        <el-table :data="order_result_data" :style="{'height': result_table_height+'px'}">
-          <el-table-column label="物料编号" align="center" prop="id"/>
-          <el-table-column label="物料名称" align="center" prop="name" width="240px"/>
-          <el-table-column label="物料规格" align="center" prop="bomSpec" width="120px"/>
-          <el-table-column label="预测结果" align="center" prop="neednum">
-            <template #default="scope">
-              <span :style="{'color':scope.row.isalarm?'red':''}"
-                    v-html="(scope.row.isalarm?'产能不足<br>差额 ':'产能充足<br>超额 ') + (scope.row.neednum/1000) +'T'"></span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-tab-pane>
-      <el-tab-pane label="机台工艺调整推荐" name="t2">
-        <el-table :data="order_result_alldata" :style="{'height': result_table_height+'px'}"
-                  :cell-style="getTable2CellStyle" :span-method="mergeCells">
-          <el-table-column label="机台号" align="center" prop="device" fixed="left" width="120px"/>
+    <template #footer>
+      <div style="line-height: 40px;text-align: center;">
+        <el-button @click="closeAllBomList">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <el-dialog
+    v-model="allOrderResultShow"
+    title="预测结果"
+    width="800px"
+    :modal="true"
+    append-to-body
+    class="result-list-dialog"
+    :top="'15vh'"
+    style="background: rgb(0 85 102 / 92%); border: 1px solid #008899; border-radius: 5px; height: 70vh;"
+    :lock-scroll="false"
+  >
+    <template #header>
+      <div style="color: white; font-size: 16px; font-weight: bold;">预测结果</div>
+    </template>
+    <div class="result_all_dialog">
+      <el-tabs v-model="result_tab_index">
+        <el-tab-pane label="预测结果" name="t1">
+          <el-table :data="order_result_data" style="height: 360px;">
+            <el-table-column label="物料编号" align="center" prop="id"/>
+            <el-table-column label="物料名称" align="center" prop="name" width="240px"/>
+            <el-table-column label="物料规格" align="center" prop="bomSpec" width="120px"/>
+            <el-table-column label="预测结果" align="center" prop="neednum">
+              <template #default="scope">
+                <span :style="{'color':scope.row.isalarm?'red':''}"
+                      v-html="(scope.row.isalarm?'产能不足<br>差额 ':'产能充足<br>超额 ') + (scope.row.neednum/1000).toFixed(2) +'T'"></span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="机台工艺调整推荐" name="t2">
+          <el-table :data="order_result_alldata" style="height: 360px;"
+                    :cell-style="getTable2CellStyle" :span-method="mergeCells">
+            <el-table-column label="机台号" align="center" prop="formula_data_2" fixed="left" width="75px"/>
 
-          <el-table-column label="库存(T)" align="center" prop="kcl" fixed="left" width="75px">
-            <template #default="scope">
-              <span>{{ scope.row.kcl.toFixed(1) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="需求(T)" align="center" prop="xql" fixed="left" width="75px">
-            <template #default="scope">
-              <span>{{ scope.row.xql.toFixed(1) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="预测(T)" align="center" prop="ycl" fixed="left" width="75px">
-            <template #default="scope">
-              <span>{{ scope.row.yclSum !== undefined ? scope.row.yclSum.toFixed(1) : scope.row.ycl.toFixed(1) }}</span>
-            </template>
-          </el-table-column>
+            <el-table-column label="库存(T)" align="center" prop="kcl" fixed="left" width="75px">
+              <template #default="scope">
+                <span>{{ scope.row.kcl.toFixed(2) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="需求(T)" align="center" prop="xql" fixed="left" width="75px">
+              <template #default="scope">
+                <span>{{ scope.row.xql.toFixed(2) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="预测(T)" align="center" prop="ycl" fixed="left" width="75px">
+              <template #default="scope">
+                <span>{{ scope.row.yclSum !== undefined ? scope.row.yclSum.toFixed(2) : scope.row.ycl.toFixed(2) }}</span>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="超额(T)" align="center" prop="sy" fixed="left" width="75px">
-            <template #default="scope">
-              <span>{{ scope.row.sy !== undefined ? scope.row.sy.toFixed(1) : (scope.row.kcl - scope.row.xql + scope.row.ycl).toFixed(1) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="纱线规格D" align="center">
-            <el-table-column label="L1、L5" align="center" prop="formula_data_4"></el-table-column>
-            <el-table-column label="L2、L4" align="center" prop="formula_data_5"></el-table-column>
-            <el-table-column label="L3" align="center" prop="formula_data_6" width="60px"></el-table-column>
-          </el-table-column>
-          <el-table-column label="成品" align="center">
-            <el-table-column label="重" align="center" prop="formula_data_18" width="60px"/>
-            <el-table-column label="长" align="center" prop="formula_data_16" width="60px"/>
-            <el-table-column label="宽" align="center" prop="formula_data_17" width="60px"/>
-          </el-table-column>
-          <el-table-column label="平方米克重" align="center" prop="gramMass"></el-table-column>
-          <el-table-column label="米克重" align="center" prop="formula_data_3"></el-table-column>
-          <el-table-column label="毛高" align="center" prop="formula_data_15" width="60px"></el-table-column>
-          <el-table-column label="配方号" align="center" prop="formula_data_1"></el-table-column>
-          <el-table-column label="卷曲幅宽" align="center" prop="formula_data_13"></el-table-column>
-          <el-table-column label="下布长度" align="center" prop="formula_data_14"></el-table-column>
-          <el-table-column label="牵拉密度" align="center" prop="formula_data_24"></el-table-column>
-          <el-table-column label="卷曲张力系数" align="center" prop="formula_data_25"></el-table-column>
-          <el-table-column label="纱线规格F" align="center">
-            <el-table-column label="L1、L5" align="center" prop="formula_data_7"></el-table-column>
-            <el-table-column label="L2、L4" align="center" prop="formula_data_8"></el-table-column>
-            <el-table-column label="L3" align="center" prop="formula_data_9" width="60px"></el-table-column>
-          </el-table-column>
-          <el-table-column label="盘头根数" align="center">
-            <el-table-column label="L1、L5" align="center" prop="formula_data_10"></el-table-column>
-            <el-table-column label="L2、L4" align="center" prop="formula_data_11"></el-table-column>
-            <el-table-column label="L3" align="center" prop="formula_data_12" width="60px"></el-table-column>
-          </el-table-column>
-        </el-table>
-      </el-tab-pane>
-    </el-tabs>
-    <div style="line-height: 40px;text-align: center;">
-      <el-button @click="closeAllResultList">关闭</el-button>
+            <el-table-column label="超额(T)" align="center" prop="sy" fixed="left" width="75px">
+              <template #default="scope">
+                <span>{{ scope.row.sy !== undefined ? scope.row.sy.toFixed(2) : (scope.row.kcl - scope.row.xql + scope.row.ycl).toFixed(2) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="纱线规格D" align="center">
+              <el-table-column label="L1、L5" align="center" prop="formula_data_4"></el-table-column>
+              <el-table-column label="L2、L4" align="center" prop="formula_data_5"></el-table-column>
+              <el-table-column label="L3" align="center" prop="formula_data_6" width="60px"></el-table-column>
+            </el-table-column>
+            <el-table-column label="成品" align="center">
+              <el-table-column label="重" align="center" prop="formula_data_18" width="60px"/>
+              <el-table-column label="长" align="center" prop="formula_data_16" width="60px"/>
+              <el-table-column label="宽" align="center" prop="formula_data_17" width="60px"/>
+            </el-table-column>
+            <el-table-column label="平方米克重" align="center" prop="gramMass"></el-table-column>
+            <el-table-column label="米克重" align="center" prop="formula_data_3"></el-table-column>
+            <el-table-column label="毛高" align="center" prop="formula_data_15" width="60px"></el-table-column>
+            <el-table-column label="配方号" align="center" prop="formula_data_1"></el-table-column>
+            <el-table-column label="卷曲幅宽" align="center" prop="formula_data_13"></el-table-column>
+            <el-table-column label="下布长度" align="center" prop="formula_data_14"></el-table-column>
+            <el-table-column label="牵拉密度" align="center" prop="formula_data_24"></el-table-column>
+            <el-table-column label="卷曲张力系数" align="center" prop="formula_data_25"></el-table-column>
+            <el-table-column label="纱线规格F" align="center">
+              <el-table-column label="L1、L5" align="center" prop="formula_data_7"></el-table-column>
+              <el-table-column label="L2、L4" align="center" prop="formula_data_8"></el-table-column>
+              <el-table-column label="L3" align="center" prop="formula_data_9" width="60px"></el-table-column>
+            </el-table-column>
+            <el-table-column label="盘头根数" align="center">
+              <el-table-column label="L1、L5" align="center" prop="formula_data_10"></el-table-column>
+              <el-table-column label="L2、L4" align="center" prop="formula_data_11"></el-table-column>
+              <el-table-column label="L3" align="center" prop="formula_data_12" width="60px"></el-table-column>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
     </div>
-  </div>
+    <template #footer>
+      <div style="line-height: 40px;text-align: center;">
+        <el-button @click="closeAllResultList">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 <style>
 @import '../../styles/bpb.css';
@@ -347,8 +376,6 @@ export default {
     let bpb_mt_item_data = ref([]);
     let bpb_mt_item_data_Top6 = ref([]);
     const order_list_all = ref(null);
-    const bom_list_all = ref(null);
-    const result_list_all = ref(null);
     const bpb_orderlist_title = ref(null);
     const bpb_order_resultlist_title = ref(null);
     const orderItemList = ref(null);
@@ -390,7 +417,7 @@ export default {
         if (!row.bomCode) {
           return [1, 1];
         }
-        
+
         // 查找具有相同bomCode的第一行
         let firstRowIndex = -1;
         for (let i = 0; i <= rowIndex; i++) {
@@ -399,7 +426,7 @@ export default {
             break;
           }
         }
-        
+
         // 如果当前行就是第一行，则计算需要合并的行数
         if (firstRowIndex === rowIndex) {
           let rowspan = 1;
@@ -435,7 +462,7 @@ export default {
           // 先按bomCode分组，同时保留所有机台号
           const processedData = [];
           const bomCodeMap = new Map();
-          
+
           // 遍历所有数据
           response.list.forEach(item => {
             if (item.bomCode) {
@@ -456,13 +483,13 @@ export default {
                 // 已经存在这个bomCode，更新累加值
                 const group = bomCodeMap.get(item.bomCode);
                 group.yclSum += item.ycl;
-                
+
                 // 更新所有已存在的同bomCode项的yclSum和sy值
                 group.items.forEach(existingItem => {
                   existingItem.yclSum = group.yclSum;
                   existingItem.sy = existingItem.kcl - existingItem.xql + group.yclSum;
                 });
-                
+
                 // 添加新项
                 const newItem = {
                   ...item,
@@ -482,7 +509,7 @@ export default {
               });
             }
           });
-          
+
           order_result_alldata.value = processedData;
         } else {
           order_result_alldata.value = [];
@@ -813,10 +840,6 @@ export default {
       allBomListShow.value = true
       allOrderListShow.value = false;
       allOrderResultShow.value = false;
-      setTimeout(() => {
-        bom_list_all.value.style.top = '86px';
-        bom_list_all.value.style.left = '191px';
-      }, 20);
     }
 
     function showAllResultList() {
@@ -829,10 +852,6 @@ export default {
       } else {
         result_table_height.value = 360;
       }
-      setTimeout(() => {
-        result_list_all.value.style.top = '246px';
-        result_list_all.value.style.right = '220px';
-      }, 20);
     }
 
     function closeAllBomList() {
@@ -955,8 +974,6 @@ export default {
       selectedOrder,
       queryStorage,
       order_list_all,
-      result_list_all,
-      bom_list_all,
       bpb_orderlist_title,
       bpb_order_resultlist_title,
       orderItemList,