twin2025-mod/src/pages/components/In03-ai_comp.vue

<template>
    <div class="dataContent">
        <!--
        <table class="titletable" cellspacing="0" cellpadding="0">
            <thead>
                <tr><td rowspan="2" style="border-left: 1px solid #7DA2CD;width: 15%;">设备类型</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].compDateHour1+"时 到 "+paramObj[0].compDateHour2+'时' }}</td><td>{{ paramObj[1].ai_prouct_no+'#产线 '+paramObj[1].compDateHour1+"时 到 "+paramObj[1].compDateHour2+'时' }}</td></tr>
            </thead>
        </table>
        <table class="datatable" cellspacing="0" cellpadding="0">
            <tbody>
                <tr><td rowspan="14" style="border-left: 1px solid #7DA2CD;width: 15%;">前整4节定型</td><td>1#循环上风设定转速rpm</td><td>{{ line1Data.r1 }}</td><td :class="diff.r1!=0?'diff':''">{{ line2Data.r1 }}{{ diff.r1!=0 ? (diff.r1>0?" ↑(":" ↓(")+diff.r1+")" :'' }}</td></tr>
                <tr><td>1#循环下风设定转速rpm</td><td>{{ line1Data.r2 }}</td><td  :class="diff.r2!=0?'diff':''">{{ line2Data.r2 }}{{ diff.r2!=0 ? (diff.r2>0?" ↑(":" ↓(")+diff.r2+")" :'' }}</td></tr>
                <tr><td>2#循环上风设定转速rpm</td><td>{{ line1Data.r3 }}</td><td :class="diff.r3!=0?'diff':''">{{ line2Data.r3 }}{{ diff.r3!=0 ? (diff.r3>0?" ↑(":" ↓(")+diff.r3+")" :'' }}</td></tr>
                <tr><td>2#循环下风设定转速rpm</td><td>{{ line1Data.r4 }}</td><td :class="diff.r4!=0?'diff':''">{{ line2Data.r4 }}{{ diff.r4!=0 ? (diff.r4>0?" ↑(":" ↓(")+diff.r4+")" :'' }}</td></tr>
                <tr><td>3#循环上风设定转速rpm</td><td>{{ line1Data.r5 }}</td><td :class="diff.r5!=0?'diff':''">{{ line2Data.r5 }}{{ diff.r5!=0 ? (diff.r5>0?" ↑(":" ↓(")+diff.r5+")" :'' }}</td></tr>
                <tr><td>3#循环下风设定转速rpm</td><td>{{ line1Data.r6 }}</td><td :class="diff.r6!=0?'diff':''">{{ line2Data.r6 }}{{ diff.r6!=0 ? (diff.r6>0?" ↑(":" ↓(")+diff.r6+")" :'' }}</td></tr>
                <tr><td>4#循环上风设定转速rpm</td><td>{{ line1Data.r7 }}</td><td :class="diff.r7!=0?'diff':''">{{ line2Data.r7 }}{{ diff.r7!=0 ? (diff.r7>0?" ↑(":" ↓(")+diff.r7+")" :'' }}</td></tr>
                <tr><td>4#循环下风设定转速rpm</td><td>{{ line1Data.r8 }}</td><td :class="diff.r8!=0?'diff':''">{{ line2Data.r8 }}{{ diff.r8!=0 ? (diff.r8>0?" ↑(":" ↓(")+diff.r8+")" :'' }}</td></tr>
                <tr><td>1#排风设定转速rpm</td><td>{{ line1Data.r9 }}</td><td :class="diff.r9!=0?'diff':''">{{ line2Data.r9 }}{{ diff.r9!=0 ? (diff.r9>0?" ↑(":" ↓(")+diff.r9+")" :'' }}</td></tr>
                <tr><td>1#烘箱设定温度℃</td><td>{{ line1Data.r10 }}</td><td :class="diff.r10!=0?'diff':''">{{ line2Data.r10 }}{{ diff.r10!=0 ? (diff.r10>0?" ↑(":" ↓(")+diff.r10+")" :'' }}</td></tr>
                <tr><td>2#烘箱设定温度℃</td><td>{{ line1Data.r11 }}</td><td :class="diff.r11!=0?'diff':''">{{ line2Data.r11 }}{{ diff.r11!=0 ? (diff.r11>0?" ↑(":" ↓(")+diff.r11+")" :'' }}</td></tr>
                <tr><td>3#烘箱设定温度℃</td><td>{{ line1Data.r12 }}</td><td :class="diff.r12!=0?'diff':''">{{ line2Data.r12 }}{{ diff.r12!=0 ? (diff.r12>0?" ↑(":" ↓(")+diff.r12+")" :'' }}</td></tr>
                <tr><td>4#烘箱设定温度℃</td><td>{{ line1Data.r13 }}</td><td :class="diff.r13!=0?'diff':''">{{ line2Data.r13 }}{{ diff.r13!=0 ? (diff.r13>0?" ↑(":" ↓(")+diff.r13+")" :'' }}</td></tr>
                <tr><td>设定车速m/min</td><td>{{ line1Data.r14 }}</td><td :class="diff.r14!=0?'diff':''">{{ line2Data.r14 }}{{ diff.r14!=0 ? (diff.r14>0?" ↑(":" ↓(")+diff.r14+")" :'' }}</td></tr>
                <tr><td style="border-left: 1px solid #7DA2CD;width: 15%;">前整高梳</td><td>大锡林rpm</td><td>{{ line1Data.r15 }}</td><td :class="diff.r15!=0?'diff':''">{{ line2Data.r15 }}{{ diff.r15!=0 ? (diff.r15>0?" ↑(":" ↓(")+diff.r15+")" :'' }}</td></tr>
                <tr><td rowspan="9" style="border-left: 1px solid #7DA2CD;width: 15%;">前整双棍烫光</td><td>联机系数比例</td><td>{{ line1Data.r16 }}</td><td :class="diff.r16!=0?'diff':''">{{ line2Data.r16 }}{{ diff.r16!=0 ? (diff.r16>0?" ↑(":" ↓(")+diff.r16+")" :'' }}</td></tr>
                <tr><td>张力比例</td><td>{{ line1Data.r17 }}</td><td :class="diff.r17!=0?'diff':''">{{ line2Data.r17 }}{{ diff.r17!=0 ? (diff.r17>0?" ↑(":" ↓(")+diff.r17+")" :'' }}</td></tr>
                <tr><td>出布比例</td><td>{{ line1Data.r18 }}</td><td :class="diff.r18!=0?'diff':''">{{ line2Data.r18 }}{{ diff.r18!=0 ? (diff.r18>0?" ↑(":" ↓(")+diff.r18+")" :'' }}</td></tr>
                <tr><td>烫辊1温度(设定)℃</td><td>{{ line1Data.r19 }}</td><td :class="diff.r19!=0?'diff':''">{{ line2Data.r19 }}{{ diff.r19!=0 ? (diff.r19>0?" ↑(":" ↓(")+diff.r19+")" :'' }}</td></tr>
                <tr><td>烫辊2温度(设定)℃</td><td>{{ line1Data.r20 }}</td><td :class="diff.r20!=0?'diff':''">{{ line2Data.r20 }}{{ diff.r20!=0 ? (diff.r20>0?" ↑(":" ↓(")+diff.r20+")" :'' }}</td></tr>
                <tr><td>烫光轴承温度设定℃</td><td>{{ line1Data.r21 }}</td><td :class="diff.r21!=0?'diff':''">{{ line2Data.r21 }}{{ diff.r21!=0 ? (diff.r21>0?" ↑(":" ↓(")+diff.r21+")" :'' }}</td></tr>
                <tr><td>前烫辊转速rpm</td><td>{{ line1Data.r22 }}</td><td :class="diff.r22!=0?'diff':''">{{ line2Data.r22 }}{{ diff.r22!=0 ? (diff.r22>0?" ↑(":" ↓(")+diff.r22+")" :'' }}</td></tr>
                <tr><td>后烫辊转速rpm</td><td>{{ line1Data.r23 }}</td><td :class="diff.r23!=0?'diff':''">{{ line2Data.r23 }}{{ diff.r23!=0 ? (diff.r23>0?" ↑(":" ↓(")+diff.r23+")" :'' }}</td></tr>
                <tr><td>吸风频率HZ</td><td>{{ line1Data.r24 }}</td><td :class="diff.r24!=0?'diff':''">{{ line2Data.r24 }}{{ diff.r24!=0 ? (diff.r24>0?" ↑(":" ↓(")+diff.r24+")" :'' }}</td></tr>
                <tr><td rowspan="2" style="border-left: 1px solid #7DA2CD;width: 15%;">前整两棍刷毛</td><td>前刷辊转速rpm</td><td>{{ line1Data.r25 }}</td><td :class="diff.r25!=0?'diff':''">{{ line2Data.r25 }}{{ diff.r25!=0 ? (diff.r25>0?" ↑(":" ↓(")+diff.r25+")" :'' }}</td></tr>
                <tr><td>后刷辊转速rpm</td><td>{{ line1Data.r26 }}</td><td :class="diff.r26!=0?'diff':''">{{ line2Data.r26 }}{{ diff.r26!=0 ? (diff.r26>0?" ↑(":" ↓(")+diff.r26+")" :'' }}</td></tr>
            </tbody>
        </table>
        -->
        <table class="titletable" cellspacing="0" cellpadding="0">
            <thead>
                <tr><td rowspan="2" style="border-left: 1px solid #7DA2CD;width: 15%;">产线段</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].compDateHour1+"时 到 "+paramObj[0].compDateHour2+'时' }}</td><td>{{ paramObj[1].ai_prouct_no+'#产线 '+paramObj[1].compDateHour1+"时 到 "+paramObj[1].compDateHour2+'时' }}</td></tr>
            </thead>
        </table>
        <table class="datatable" cellspacing="0" cellpadding="0">
            <tbody>
                <tr><td rowspan="3" style="border-left: 1px solid #7DA2CD;width: 15%;">全部</td><td>总产值(米)</td><td>{{ line1Data.length }}</td><td >{{ line2Data.length }}</td></tr>
                <tr><td>耗电(kWh)</td><td>{{ line1Data.elect||'' }}</td><td >{{ line2Data.elect||'' }}</td></tr>
                <tr><td>导热油(GJ)</td><td>{{ line1Data.oil||'' }}</td><td >{{ line2Data.oil||'' }}</td></tr>
                <tr><td rowspan="6" style="border-left: 1px solid #7DA2CD;width: 15%;">前整</td><td>定型次数(次)</td><td>{{ line1Data.qz.dx||'' }}</td><td>{{ line2Data.qz.dx||'' }}</td></tr>
                <tr><td>高梳次数(次)</td><td>{{ line1Data.qz.gs||'' }}</td><td >{{ line2Data.qz.gs||'' }}</td></tr>
                <tr><td>双棍烫光次数(次)</td><td>{{ line1Data.qz.tg||'' }}</td><td >{{ line2Data.qz.tg||'' }}</td></tr>
                <tr><td>双棍刷毛次数(次)</td><td>{{ line1Data.qz.sm||'' }}</td><td >{{ line2Data.qz.sm||'' }}</td></tr>
                <tr><td>电(kWh)</td><td>{{ line1Data.qz.elect||'' }}</td><td >{{ line2Data.qz.elect||'' }}</td></tr>
                <tr><td>导热油(GJ)</td><td>{{ line1Data.qz.oil||'' }}</td><td >{{ line2Data.qz.oil||'' }}</td></tr>
                <tr style="background-color: transparent;"><td style="border-left: 1px solid #7DA2CD;width: 15%;">印染</td><td>印花次数(次)</td><td>{{ line1Data.yh||'' }}</td><td >{{ line2Data.r15 }}</td></tr>
                <tr style="background-color: #016a7c;"><td rowspan="8" style="border-left: 1px solid #7DA2CD;width: 15%;">后整</td><td>定型次数(次)</td><td>{{ line1Data.hz.dx||'' }}</td><td >{{ line2Data.hz.dx||'' }}</td></tr>
                <tr><td>高梳次数(次)</td><td>{{ line1Data.hz.gs||'' }}</td><td >{{ line2Data.hz.gs||'' }}</td></tr>
                <tr><td>刷毛次数(次)</td><td>{{ line1Data.hz.sm||'' }}</td><td >{{ line2Data.hz.sm||'' }}</td></tr>
                <tr><td>起毛次数(次)</td><td>{{ line1Data.hz.qm||'' }}</td><td >{{ line2Data.hz.qm||'' }}</td></tr>
                <tr><td>双棍烫光(次)</td><td>{{ line1Data.hz.tg||'' }}</td><td >{{ line2Data.hz.tg||'' }}</td></tr>
                <tr><td>烫剪(次)</td><td>{{ line1Data.hz.tj||'' }}</td><td >{{ line2Data.hz.tj||'' }}</td></tr>
                <tr><td>电(kWh)</td><td>{{ line1Data.hz.elect||'' }}</td><td >{{ line2Data.hz.elect||'' }}</td></tr>
                <tr><td>导热油(GJ)</td><td>{{ line1Data.hz.oil||'' }}</td><td >{{ line2Data.hz.oil||'' }}</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:{

        },
        setup(props,{emit}) {
            const route = useRouter(); // 获取当前路由对象
            const params = ref(''); // 初始化 hash 值
            const paramObj=ref([{},{}]);
            const line1Data = ref({qz:{},hz:{}});
            const line2Data = ref({qz:{},hz:{}});
            const diff=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,
                    s1:obj[0].compDateHour1,
                    e1:obj[0].compDateHour2,
                    s2:obj[1].compDateHour1,
                    e2:obj[1].compDateHour2
                };
                if(v.s1.indexOf("00:00")==-1) v.s1=v.s1+":00:00"
                if(v.s2.indexOf("00:00")==-1) v.s2=v.s2+":00:00"
                if(v.e1=="") v.e1 = v.s1;
                if(v.e2=="") v.e2 = v.s2;
                if(v.e1.indexOf("00:00")==-1) v.e1=v.e1+":00:00"
                if(v.e2.indexOf("00:00")==-1) v.e2=v.e2+":00:00"
                paramObj.value[0].compDateHour1 = paramObj.value[0].compDateHour1.substring(5).replace(":00:00","");
                paramObj.value[0].compDateHour2 = paramObj.value[0].compDateHour2.substring(5).replace(":00:00","");
                paramObj.value[1].compDateHour1 = paramObj.value[1].compDateHour1.substring(5).replace(":00:00","");
                paramObj.value[1].compDateHour2 = paramObj.value[1].compDateHour2.substring(5).replace(":00:00","");
                fetch(process.env.VUE_APP_API+'/api/yr/compare', {
                  method: 'POST', // 指定请求方法为POST
                  headers: {
                    'Content-Type': 'application/json', // 设置请求头为JSON格式
                  },
                  body: JSON.stringify(v) // 将数据转换为JSON字符串作为请求体
                })
                .then(response => response.json()) // 解析JSON格式的响应数据
                .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;
                    line1Data.value['qz'] = line1Data.value['qz']||{};
                    line1Data.value['hz'] = line1Data.value['hz']||{};
                    var tmp={};
                    for(var key in line2Data.value){
                        tmp[key] = line2Data.value[key]-line1Data.value[key];
                    }
                    diff.value = tmp
                    console.log(diff.value)
                }).catch((error) => {
                  console.error('请求失败:', error);
                });
            }
            onMounted(()=>{    
                params.value=route.currentRoute.value.hash.slice(1);
                getData();
            })
            return{
                paramObj,
                line1Data,
                line2Data,
                diff,
            }
        }
    }
</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: 92%;
    }
    .diff{
        background-color: #c11a19 !important;
    }
    .diff .icon{
        font-size: 14px;
    }
</style>