twin2025-mod/src/pages/components/In02_device_info.vue

<template>
            <div class="content">
                <div>
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td colspan="10" class="cation">
                                <div class="title_left_line"></div><span>剩余时间</span><span  class="littleFont value" style="line-height: 22px;">(分)</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="littleFont">GB1</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB2</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB3</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB4</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB5</td>
                        </tr>
                        <tr>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_5||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_6||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_7||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_8||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_9||'-' }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td colspan="10" class="cation">
                                <div class="title_left_line"></div><span>盘头剩余周长</span><span  class="littleFont value" style="line-height: 22px;">(mm)</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="littleFont">GB1</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB2</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB3</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB4</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB5</td>
                        </tr>
                        <tr>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_10||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_11||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_12||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_13||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_14||'-' }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td colspan="10"  class="cation">
                                <div class="title_left_line"></div><span>盘头剩余圈数</span><span  class="littleFont value" style="line-height: 22px;">(圈)</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="littleFont">GB1</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB2</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB3</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB4</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB5</td>
                        </tr>
                        <tr >
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_15||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_16||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_17||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_18||'-' }}</td>
                            <td width="20%" class="value">{{ deviceInfo.Capacity_data_19||'-' }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td colspan="10" class="cation">
                                <div class="title_left_line"></div><span>盘头剩余比例</span><span class="littleFont value" style="line-height: 22px;">(%)</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="littleFont">GB1</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB2</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB3</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB4</td>
                            <td rowspan="2" class="td_splitLine"></td>
                            <td class="littleFont">GB5</td>
                        </tr>
                        <tr >
                            <td width="20%" class="value" :style="deviceInfo.Pan[0].color!=''?'color:'+deviceInfo.Pan[0].color:''">{{ deviceInfo.Pan[0].value }}</td>
                            <td width="20%" class="value" :style="deviceInfo.Pan[1].color!=''?'color:'+deviceInfo.Pan[1].color:''">{{ deviceInfo.Pan[1].value }}</td>
                            <td width="20%" class="value" :style="deviceInfo.Pan[2].color!=''?'color:'+deviceInfo.Pan[2].color:''">{{ deviceInfo.Pan[2].value }}</td>
                            <td width="20%" class="value" :style="deviceInfo.Pan[3].color!=''?'color:'+deviceInfo.Pan[3].color:''">{{ deviceInfo.Pan[3].value }}</td>
                            <td width="20%" class="value" :style="deviceInfo.Pan[4].color!=''?'color:'+deviceInfo.Pan[4].color:''">{{ deviceInfo.Pan[4].value }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
</template>
<script>
    import { ref ,watch,onUnmounted,onMounted} from 'vue';
    import api from "@/api/system"; 
    import {useRouter} from 'vue-router';
    export default {
        props:{

        },
        setup(props,{emit}) {
            const route = useRouter(); // 获取当前路由对象
            const devicename = ref(''); // 初始化 hash 值
            const deviceInfo = ref({'Pan':[{},{},{},{},{}]});
            watch(
                  () => route.hash,
                  (newHash) => {
                    devicename.value = newHash;
                  }
            );
            function getPantaoColor(v) {
                if (v == null || v == "-") return "";
                v = v * 1;
                if (v < 20) return "#" + DEV_ALAR_COLOR;
                else if (v < 50) return "#" + DEV_HINT_COLOR;
                return "";
            }
            onMounted(()=>{    
                devicename.value=route.currentRoute.value.hash.slice(1);      
                api.GetDeviceInfo(devicename.value).then((res)=>{
                    console.log(res)
                    if (res==null || res.code!=0) {
                        //NoneDevice(name)
                        return
                    }
                    var tmp = res.data.data;
                    tmp["Pan"] = [];
                    let paninfo = window.Pan==null ? null : window.Pan[devicename.value];
                    for (var i = 0; i < 5; i++) {
                        var v = paninfo != null && paninfo[i]!=null ? paninfo[i] : "-";
                        tmp["Pan"].push({"value":v,"color":getPantaoColor(v)})
                    }
                    deviceInfo.value = tmp;
                })
            })
            return{
                deviceInfo,
            }
        }
    }
</script>
<style>
    .content{
        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%;
    }
    .cation{
        font-size: 16px;padding: 5px 20px;text-align: left;display: flex;
    }
    .td_splitLine{
        border-right: 1px solid #137783;        
    }
    .title_left_line{
        background-image: url('../../assets/image/title_left_line.png');
        width: 6px;
        height: 18px;
        vertical-align: middle;
        margin-right: 10px;
        margin-top: 3px;
    }
    .littleFont{
        font-size: 12px;
        letter-spacing: 2px;
    }
    .value{
        color: #26e1f9;
    }
</style>