添加工艺对比详情页面功能

src/pages/components/In03-ai_comp.vue

@@ -1,12 +1,49 @@
 <template>
     <div class="dataContent">
-        <div>{{ params }}</div>
+        <table class="titletable" cellspacing="0" cellpadding="0">
+            <thead>
+                <tr><td rowspan="2" style="border-left: 1px solid #7DA2CD;">设备类型</td><td rowspan="2">工艺参数</td><td colspan="2" style="border-bottom: 1px solid #7DA2CD">设定值</td></tr>
+                <tr><td>{{ paramObj[0].ai_prouct_no+'#产线 '+paramObj[0].compDate+" "+paramObj[0].compDateHour1+'时' }}</td><td>{{ paramObj[1].ai_prouct_no+'#产线 '+paramObj[1].compDate+" "+paramObj[1].compDateHour1+'时' }}</td></tr>
+            </thead>
+        </table>
+        <table class="datatable" cellspacing="0" cellpadding="0">
+            <tbody>
+                <tr><td rowspan="14" style="border-left: 1px solid #7DA2CD;">前整4节定型</td><td>1#循环上风设定转速rpm</td><td>{{ line1Data.r1 }}</td><td>{{ line2Data.r1 }}</td></tr>
+                <tr><td>1#循环下风设定转速rpm</td><td>{{ line1Data.r2 }}</td><td>{{ line2Data.r2 }}</td></tr>
+                <tr><td>2#循环上风设定转速rpm</td><td>{{ line1Data.r3 }}</td><td>{{ line2Data.r3 }}</td></tr>
+                <tr><td>2#循环下风设定转速rpm</td><td>{{ line1Data.r4 }}</td><td>{{ line2Data.r4 }}</td></tr>
+                <tr><td>3#循环上风设定转速rpm</td><td>{{ line1Data.r5 }}</td><td>{{ line2Data.r5 }}</td></tr>
+                <tr><td>3#循环下风设定转速rpm</td><td>{{ line1Data.r6 }}</td><td>{{ line2Data.r6 }}</td></tr>
+                <tr><td>4#循环上风设定转速rpm</td><td>{{ line1Data.r7 }}</td><td>{{ line2Data.r7 }}</td></tr>
+                <tr><td>4#循环下风设定转速rpm</td><td>{{ line1Data.r8 }}</td><td>{{ line2Data.r8 }}</td></tr>
+                <tr><td>1#排风设定转速rpm</td><td>{{ line1Data.r9 }}</td><td>{{ line2Data.r9 }}</td></tr>
+                <tr><td>1#烘箱设定温度℃</td><td>{{ line1Data.r10 }}</td><td>{{ line2Data.r10 }}</td></tr>
+                <tr><td>2#烘箱设定温度℃</td><td>{{ line1Data.r11 }}</td><td>{{ line2Data.r11 }}</td></tr>
+                <tr><td>3#烘箱设定温度℃</td><td>{{ line1Data.r12 }}</td><td>{{ line2Data.r12 }}</td></tr>
+                <tr><td>4#烘箱设定温度℃</td><td>{{ line1Data.r13 }}</td><td>{{ line2Data.r13 }}</td></tr>
+                <tr><td>设定车速m/min</td><td>{{ line1Data.r14 }}</td><td>{{ line2Data.r14 }}</td></tr>
+                <tr><td style="border-left: 1px solid #7DA2CD;">前整高梳</td><td>大锡林rpm</td><td>{{ line1Data.r15 }}</td><td>{{ line2Data.r15 }}</td></tr>
+                <tr><td rowspan="9" style="border-left: 1px solid #7DA2CD;">前整双棍烫光</td><td>联机系数比例</td><td>{{ line1Data.r16 }}</td><td>{{ line2Data.r16 }}</td></tr>
+                <tr><td>张力比例</td><td>{{ line1Data.r17 }}</td><td>{{ line2Data.r17 }}</td></tr>
+                <tr><td>出布比例</td><td>{{ line1Data.r18 }}</td><td>{{ line2Data.r18 }}</td></tr>
+                <tr><td>烫辊1温度(设定)℃</td><td>{{ line1Data.r19 }}</td><td>{{ line2Data.r19 }}</td></tr>
+                <tr><td>烫辊2温度(设定)℃</td><td>{{ line1Data.r20 }}</td><td>{{ line2Data.r20 }}</td></tr>
+                <tr><td>烫光轴承温度设定℃</td><td>{{ line1Data.r21 }}</td><td>{{ line2Data.r21 }}</td></tr>
+                <tr><td>前烫辊转速rpm</td><td>{{ line1Data.r22 }}</td><td>{{ line2Data.r22 }}</td></tr>
+                <tr><td>后烫辊转速rpm</td><td>{{ line1Data.r23 }}</td><td>{{ line2Data.r23 }}</td></tr>
+                <tr><td>吸风频率HZ</td><td>{{ line1Data.r24 }}</td><td>{{ line2Data.r24 }}</td></tr>
+                <tr><td rowspan="2" style="border-left: 1px solid #7DA2CD;">前整两棍刷毛</td><td>前刷辊转速rpm</td><td>{{ line1Data.r25 }}</td><td>{{ line2Data.r25 }}</td></tr>
+                <tr><td>后刷辊转速rpm</td><td>{{ line1Data.r26 }}</td><td>{{ line2Data.r26 }}</td></tr>
+            </tbody>
+        </table>
     </div>
 </template>
 <script>
     import { ref ,watch,onUnmounted,onMounted} from 'vue';
     import api from "@/api/system"; 
     import {useRouter} from 'vue-router';
+    import { ElMessage } from 'element-plus';
+    import 'element-plus/dist/index.css'; // 确保导入样式文件
     export default {
         props:{
 
@@ -14,17 +51,68 @@
         setup(props,{emit}) {
             const route = useRouter(); // 获取当前路由对象
             const params = ref(''); // 初始化 hash 值
+            const paramObj=ref([{},{}]);
+            const line1Data = ref({});
+            const line2Data = ref({});
+            function getData(){
+                var obj = JSON.parse(params.value);
+                paramObj.value = obj;
+                var v={
+                    line1:obj[0].ai_prouct_no*1,
+                    line2:obj[1].ai_prouct_no*1,
+                    time1:obj[0].compDate+" "+obj[0].compDateHour1+":00:00",
+                    time2:obj[1].compDate+" "+obj[1].compDateHour1+":00:00",
+                };
+                api.GetYrGyComper(v).then((res)=>{
+                    if(res.code!=200 || res.data==null){
+                        ElMessage({
+                            message:'获取数据失败！',
+                            type:'error',
+                            customClass: 'custom-message'
+                        });
+                        return;
+                    }
+                    line1Data.value=res.data[0].para;
+                    line2Data.value=res.data[1].para;                    
+                })
+            }
             onMounted(()=>{    
                 params.value=route.currentRoute.value.hash.slice(1);
+                getData();
             })
             return{
-                params,
+                paramObj,
+                line1Data,
+                line2Data,
             }
         }
     }
 </script>
 <style>
+    @import '../../styles/main.css';
+    .titletable{
+        width: 100%;color: #fff;font-size: 14px;text-align: center;
+    }
+    .titletable td{
+        border-right: 1px solid #7DA2CD;
+        width: 25%;
+    }
+    .titletable thead>tr {
+        height: 32px !important;
+    }
+    .datatable{
+        width: 100%;color: #fff;font-size: 12px;text-align: center;
+    }
+    .datatable td{
+        border-right: 1px solid #7DA2CD;
+        border-bottom: 1px solid #016a7c;
+        font-size: 12px !important;
+        width: 25%;
+    }
+    .datatable tbody>tr {
+        height: 24px !important;
+    }
     .dataContent{
-        color: rgb(255, 255, 255);background-color: rgba(2, 62, 81, 0.5);font-size: 16px;margin: 20px;padding: 10px;border: 1px solid #007586;width: 95%;
+        color: rgb(255, 255, 255);background-color: rgba(2, 62, 81, 0.5);font-size: 16px;margin: 20px;padding: 10px;border: 1px solid #007586;width: 92%;
     }
 </style>

src/pages/components/In03.vue

@@ -462,7 +462,7 @@ export default {
                         markerLClickObj = compMarkerts[event.markerId];
                         if(markerLClickObj!=null){
                             var params = JSON.stringify(compProctList.value);
-                            emit('OpenIframeWin',{class:'newwin in03Win',src:'/in03-ai-comp#'+params,title:'AI工艺对比分析'});
+                            emit('OpenIframeWin',{class:'newwin in03AiCompWin',src:'/in03-ai-comp#'+params,title:'AI工艺配置详情'});
                         }
                         return;
                     }

src/styles/main.css

@@ -201,6 +201,19 @@
         width: 100%;
         border: 0;       
     }
+    .in03AiCompWin{
+        width: 800px !important;
+        height: 800px !important;
+        left: 50%;
+        top:50%;
+        margin-top: -400px !important;
+        margin-left:-400px !important;
+    }
+    .in03AiCompWin .content,.in03AiCompWin iframe{
+        height: 800px !important;
+        width: 100%;
+        border: 0;       
+    }
     .deviceInfoWin{
         width: 1200px !important;
         height: 380px !important;