经编模块功能完善

src/pages/components/In02_device_info.vue

@@ -0,0 +1,195 @@
+<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>

src/pages/components/In02_device_peifang.vue

@@ -0,0 +1,1122 @@
+<template>
+    <div class="dataContent">
+        <div style="text-align: center;width: 100%;height: 52px;">
+                    <span :class="devDetailIndex==0?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==0?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,0)">告警</span>
+                    <span :class="devDetailIndex==1?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==1?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,1)">产能</span>
+                    <span :class="devDetailIndex==2?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==2?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,2)">产线及设备</span>
+                    <span :class="devDetailIndex==3?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==3?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,3)">配方</span>
+                    <span :class="devDetailIndex==4?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==4?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,4)">设备履历</span>
+        </div>
+        <div style="height:90%;width:100%">
+                    <div style="width: 100%" v-show="devDetailIndex==0">
+                        <div v-if="!currendDeviceIsAlarm" class="no_alarm">当前无告警</div>
+                        <div v-if="currendDeviceIsAlarm" class="has_alarm" v-html="currendDeviceAlarmMsg"></div>
+                        <div class="dev_alarm_echarts" ref="dev_alarm_echarts"></div>
+                    </div>
+                    <div style="padding: 15px;width: 100%" v-show="devDetailIndex==1">
+                        <div style="float: left;width: 25%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0" width="100%">
+                                <tbody>
+                                <tr style="background-color: #415683;height: 40px;text-align: center;">
+                                    <td colspan="4">班组生产状态</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="4"></td>
+                                </tr>
+                                <tr style="height: 47px">
+                                    <td rowspan="2" width="30%">当前产量</td>
+                                    <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
+                                    <td width="15%">A组</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Capacity_data_39" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_39||'-'  }}米
+                                    </td>
+                                </tr>
+                                <tr style="height: 48px">
+                                    <td>B组</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
+                                        attr="Capacity_data_44" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_44||'-' }}米
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="4"></td>
+                                </tr>
+                                <tr style="height: 47px">
+                                    <td rowspan="2" width="30%">开机时间</td>
+                                    <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
+                                    <td width="15%">A组</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Capacity_data_37" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_37||'-' }}H
+                                    </td>
+                                </tr>
+                                <tr style="height: 48px">
+                                    <td>B组</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
+                                        attr="Capacity_data_42" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_42||'-'}}H
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="4"></td>
+                                </tr>
+                                <tr style="height: 47px">
+                                    <td rowspan="2" width="30%">停机时间</td>
+                                    <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
+                                    <td width="15%">A组</td>
+                                    <td style="text-align: right;    padding-right: 10px;" width="45%" class="value"
+                                        attr="Capacity_data_38" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_38||'-'}}H
+                                    </td>
+                                </tr>
+                                <tr style="height: 48px">
+                                    <td>B组</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
+                                        attr="Capacity_data_43" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_43||'-'}}H
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="4"></td>
+                                </tr>
+                                <tr style="height: 47px">
+                                    <td rowspan="2" width="30%">停机率</td>
+                                    <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
+                                    <td width="15%">A组</td>
+                                    <td style="text-align: right;    padding-right: 10px;" width="45%" class="value"
+                                        attr="Capacity_data_40" unit="%">{{ openDeviceInfoData.data.data.Capacity_data_40||'-'}}%
+                                    </td>
+                                </tr>
+                                <tr style="height: 48px">
+                                    <td>B组</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
+                                        attr="Capacity_data_45" unit="%">{{ openDeviceInfoData.data.data.Capacity_data_45||'-'}}%
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 25%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0" width="100%">
+                            <tbody>
+                                <tr style="background-color: #415683;height: 40px;text-align: center;">
+                                    <td colspan="3">当前设备生产状态</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 95px">
+                                    <td>主轴运行转速</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
+                                        attr="Capacity_data_1" unit="转/分钟">{{ openDeviceInfoData.data.data.Capacity_data_1||'-' }}转/分钟
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 95px">
+                                    <td>已织造米数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
+                                        attr="Capacity_data_2" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_2||'-' }}米
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 95px">
+                                    <td>剩余落布时间</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
+                                        attr="Capacity_data_3" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_3||'-' }}H
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 95px">
+                                    <td>设定落布米数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
+                                        attr="Capacity_data_4" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_4||'-' }}米
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 44%;">
+                            <table cellspacing="0" cellpadding="0" width="100%">
+                            <tbody>
+                                <tr style="background-color: #415683;height: 40px;text-align: center;">
+                                    <td colspan="6">供电</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="6"></td>
+                                </tr>
+                                <tr style="height: 75px">
+                                    <td width="20%">AB相电压监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" class="value" attr="Capacity_data_24" unit="U">{{ openDeviceInfoData.data.data.Capacity_data_24||'-' }}U</td>
+                                    <td width="20%">C相电流监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
+                                        attr="Capacity_data_29" unit="V">{{ openDeviceInfoData.data.data.Capacity_data_29||'-' }}V
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="6"></td>
+                                </tr>
+                                <tr style="height: 75px">
+                                    <td width="20%">BC相电压监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" class="value" attr="Capacity_data_25" unit="U">{{ openDeviceInfoData.data.data.Capacity_data_25||'-' }}U</td>
+                                    <td width="20%">A相功率监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
+                                        attr="Capacity_data_30" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_30||'-' }}W
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="6"></td>
+                                </tr>
+                                <tr style="height: 75px">
+                                    <td width="20%">AC相电压监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" class="value" attr="Capacity_data_26" unit="U">{{ openDeviceInfoData.data.data.Capacity_data_26||'-' }}U</td>
+                                    <td width="20%">B相功率监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
+                                        attr="Capacity_data_31" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_31||'-' }}W
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="6"></td>
+                                </tr>
+                                <tr style="height: 75px">
+                                    <td width="20%">A相电流监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" class="value" attr="Capacity_data_27" unit="V">{{ openDeviceInfoData.data.data.Capacity_data_27||'-' }}V</td>
+                                    <td width="20%">C相功率监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
+                                        attr="Capacity_data_32" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_32||'-' }}W
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="6"></td>
+                                </tr>
+                                <tr style="height: 75px">
+                                    <td width="20%">B相电流监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" class="value" attr="Capacity_data_28" unit="V">{{ openDeviceInfoData.data.data.Capacity_data_28||'-' }}V</td>
+                                    <td width="20%">总功率监控</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
+                                        attr="Capacity_data_33" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_33||'-' }}W
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div style="padding: 15px;width: 100%" v-show="devDetailIndex==2">
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0">
+                            <tbody>
+                                <tr style="height: 60px">
+                                    <td>断纱检测开关</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Capacity_data_46" unit="">{{ (openDeviceInfoData.data.data.Capacity_data_46=='true'?'开':'关')||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>断纱检测延时</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Capacity_data_47" unit="s">{{ openDeviceInfoData.data.data.Capacity_data_47||'-' }}s
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>牵拉罗拉辊周长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_15" unit="mm">{{ openDeviceInfoData.data.data.System_data_15||'-' }}mm
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>卷曲罗拉辊周长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_16" unit="mm">{{ openDeviceInfoData.data.data.System_data_16||'-' }}mm
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>主电机额定转速</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_38" unit="">{{ openDeviceInfoData.data.data.System_data_38||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>主电机额定频率</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_39" unit="">{{ openDeviceInfoData.data.data.System_data_39||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>电机传动比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_40" unit="">{{ openDeviceInfoData.data.data.System_data_40||'-' }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0">
+                            <tbody>
+                                <tr style="height: 60px">
+                                    <td>GB1减速机减速比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_17" unit="">{{ openDeviceInfoData.data.data.System_data_17||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB2减速机减速比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_18" unit="">{{ openDeviceInfoData.data.data.System_data_18||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB3减速机减速比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_19" unit="">{{ openDeviceInfoData.data.data.System_data_19||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB4减速机减速比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_20" unit="">{{ openDeviceInfoData.data.data.System_data_20||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB5减速机减速比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_21" unit="">{{ openDeviceInfoData.data.data.System_data_21||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>牵拉减速机减速比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_22" unit="">{{ openDeviceInfoData.data.data.System_data_22||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>卷曲减速机减速比</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_23" unit="">{{ openDeviceInfoData.data.data.System_data_23||'-' }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0">
+                            <tbody>
+                                <tr style="height: 60px">
+                                    <td>GB1被动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_24" unit="">{{ openDeviceInfoData.data.data.System_data_24||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB2被动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_25" unit="">{{ openDeviceInfoData.data.data.System_data_25||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB3被动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_26" unit="">{{ openDeviceInfoData.data.data.System_data_26||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB4被动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_27" unit="">{{ openDeviceInfoData.data.data.System_data_27||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB5被动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_28" unit="">{{ openDeviceInfoData.data.data.System_data_28||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>牵拉被动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_29" unit="">{{ openDeviceInfoData.data.data.System_data_29||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>卷曲被动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_30" unit="">{{ openDeviceInfoData.data.data.System_data_30||'-' }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0">
+                            <tbody>
+                                <tr style="height: 60px">
+                                    <td>GB1主动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_31" unit="">{{ openDeviceInfoData.data.data.System_data_31||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB2主动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_32" unit="">{{ openDeviceInfoData.data.data.System_data_32||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB3主动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_33" unit="">{{ openDeviceInfoData.data.data.System_data_33||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB4主动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_34" unit="">{{ openDeviceInfoData.data.data.System_data_34||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>GB5主动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_35" unit="">{{ openDeviceInfoData.data.data.System_data_35||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>牵拉主动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_36" unit="">{{ openDeviceInfoData.data.data.System_data_36||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 60px">
+                                    <td>卷曲主动齿轮数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="System_data_37" unit="">{{ openDeviceInfoData.data.data.System_data_37||'-' }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div style="padding: 15px;width: 100%" v-show="devDetailIndex==3">
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0" width="100%">
+                            <tbody>
+                                <tr style="height: 45px">
+                                    <td>配方号</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_1" unit="">{{ openDeviceInfoData.data.data.Formula_data_1||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>机台号</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_2" unit="">{{ openDeviceInfoData.data.data.Formula_data_2||'-' }}
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>米克重</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_3" unit="g/米">{{ openDeviceInfoData.data.data.Formula_data_3||'-' }}g/米
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L1、L5纱线规格D</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_4" unit="D">{{ openDeviceInfoData.data.data.Formula_data_4||'-' }}D
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L2、L4纱线规格D</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_5" unit="D">{{ openDeviceInfoData.data.data.Formula_data_5||'-' }}D
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L3纱线规格D</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_6" unit="D">{{ openDeviceInfoData.data.data.Formula_data_6||'-' }}D
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L1、L5纱线规格F</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_7" unit="F">{{ openDeviceInfoData.data.data.Formula_data_7||'-' }}F
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L2、L4纱线规格F</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_8" unit="F">{{ openDeviceInfoData.data.data.Formula_data_8||'-' }}F
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L3纱线规格F</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
+                                        attr="Formula_data_9" unit="F">{{ openDeviceInfoData.data.data.Formula_data_9||'-' }}F
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0" width="100%">
+                            <tbody>
+                                <tr style="height: 45px">
+                                    <td>L1、L5盘头根数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_10" unit="根">{{ openDeviceInfoData.data.data.Formula_data_10||'-' }}根
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L2、L4盘头根数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_11" unit="根">{{ openDeviceInfoData.data.data.Formula_data_11||'-' }}根
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>L3盘头根数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_12" unit="根">{{ openDeviceInfoData.data.data.Formula_data_12||'-' }}根
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>卷曲幅宽</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_13" unit="m">{{ openDeviceInfoData.data.data.Formula_data_13||'-' }}m
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>下布长度</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_14" unit="m">{{ openDeviceInfoData.data.data.Formula_data_14||'-' }}m
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>毛高</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_15" unit="m">{{ openDeviceInfoData.data.data.Formula_data_15||'-' }}m
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>成片长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_16" unit="m">{{ openDeviceInfoData.data.data.Formula_data_16||'-' }}m
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>成品宽</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_17" unit="m">{{ openDeviceInfoData.data.data.Formula_data_17||'-' }}m
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>成品重</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_18" unit="kg">{{ openDeviceInfoData.data.data.Formula_data_18||'-' }}kg
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0" width="100%">
+                            <tbody>
+                                <tr style="height: 45px">
+                                    <td>GB1送经量</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_19" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_19||'-' }}mm/腊克
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB2送经量</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_20" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_20||'-' }}mm/腊克
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB3送经量</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_21" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_21||'-' }}mm/腊克
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB4送经量</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_22" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_22||'-' }}mm/腊克
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB5送经量</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_23" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_23||'-' }}mm/腊克
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>奉拉密度</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_24" unit="r/cm">{{ openDeviceInfoData.data.data.Formula_data_24||'-' }}r/cm
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>卷曲张力系数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_25" unit="%">{{ openDeviceInfoData.data.data.Formula_data_25||'-' }}%
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB1盘头最大圈数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_26" unit="r">{{ openDeviceInfoData.data.data.Formula_data_26 }}r
+                                    </td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB2盘头最大圈数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_27" unit="r">{{ openDeviceInfoData.data.data.Formula_data_27 }}r
+                                    </td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                        <div style="float: left;width: 23%;margin-right: 2%;">
+                            <table cellspacing="0" cellpadding="0" width="100%">
+                            <tbody>
+                                <tr style="height: 45px">
+                                    <td>GB3盘头最大圈数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_28" unit="r">{{ openDeviceInfoData.data.data.Formula_data_28 }}r</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB4盘头最大圈数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_29" unit="r">{{ openDeviceInfoData.data.data.Formula_data_29 }}r</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB5盘头最大圈数</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_30" unit="r">{{ openDeviceInfoData.data.data.Formula_data_30 }}r</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB1盘头最大外周长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_31" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_31 }}mm</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB2盘头最大外周长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_32" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_32 }}mm</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB3盘头最大外周长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_33" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_33 }}mm</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB4盘头最大外周长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_34" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_34 }}mm</td>
+                                </tr>
+                                <tr style="height: 1px;background-color: #5F6E8D;">
+                                    <td colspan="3"></td>
+                                </tr>
+                                <tr style="height: 45px">
+                                    <td>GB5盘头最大外周长</td>
+                                    <td style="color: #817e7e">|</td>
+                                    <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
+                                        attr="Formula_data_35" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_35 }}mm</td>
+                                </tr>
+                            </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div style="padding: 15px;width: 100%" v-show="devDetailIndex==4">
+                        <img src="../../assets/image/dev_log.png" style="width: 1300px;height: 459px;">
+                    </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { ref ,watch,onUnmounted,onMounted} from 'vue';
+    import api from "@/api/system"; 
+    import {useRouter} from 'vue-router';
+    import * as echarts from 'echarts';
+    export default {
+        props:{
+
+        },
+        setup(props,{emit}) {
+            const btnFrontBg = require('@/assets/image/nav_btn_front.png');
+            const route = useRouter(); // 获取当前路由对象
+            const devicename = ref(''); // 初始化 hash 值
+            const openDeviceInfoData = ref({'name':'',data:{data:{}}});
+            const devDetailIndex=ref(0);
+            let currendDeviceIsAlarm=ref(false); //当前双击设备是否有告警
+            let currendDeviceAlarmMsg = ref(''); //当前双击设备的告警内容描述
+            const dev_alarm_echarts = ref(null);
+            watch(
+                  () => route.hash,
+                  (newHash) => {
+                    devicename.value = newHash;
+                  }
+            );
+            function LoadDevDetail(name, typecode) {
+                if (typecode == null) typecode = "0";
+                devDetailIndex.value = typecode*1;
+                var data = openDeviceInfoData.value.data;
+                if (typecode == "0") {
+                    //告警周趋势
+                    var alarmWeekTmp = [];
+                    var times = [];
+                    var v_series = [];                
+                    for (var i = 0; i < data.alarms.length; i++) {
+                        var v = data.alarms[i]['value'];
+                        var tv = data.alarms[i]['time'].split("-")
+                        times.push(tv[1] + "-" + tv[2])
+                        if (v != null) alarmWeekTmp.push(v)
+                    }
+                    if (alarmWeekTmp.length == 0) {
+                        //t.html('未获取到告警趋势数据')
+                    } else {
+                        v_series.push({
+                            name: "",
+                            type: 'line',
+                            smooth: true,
+                            //symbol: 'none',
+                            data: alarmWeekTmp,
+                            itemStyle: {
+                                normal: {
+                                    color: '#F0F275', // 这里设置折线的颜色
+                                    lineStyle: {
+                                        color: '#F0F27560' // 这里同时设置线头的颜色
+                                    }
+                                }
+                            },
+                        });
+                        var opt = {
+                            title: {
+                                show: false, //不显示标题
+                                text: '',
+                                textStyle: {
+                                    color: "rgb(89, 151, 229)",
+                                    fontWeight: "bold"
+                                },
+                                top: "0px",
+                                left: "30px"
+                            },
+                            tooltip: {
+                                trigger: 'axis',
+                                formatter: function (params) {
+                                    let xv='';
+                                    let result = '';
+                                    params.forEach(function (item) {
+                                        xv=`${item.name}<br/>`;
+                                        result += ` ${item.marker}  ${item.value}（次）<br/>`;
+                                    });
+                                    return xv+result;
+                                }
+                            },
+                            legend: {
+                                show: false, //不显示图例
+                                inactiveColor: "#04417A",
+                                data: "",
+                                textStyle: {color: "#fff"},
+                                top: "0px"
+                            },
+                            grid: {
+                                left: '1%',
+                                right: '1%',
+                                bottom: '2%',
+                                top: '5%',
+                                containLabel: true
+                            },
+                            xAxis: {
+                                type: 'category',
+                                boundaryGap: false,
+                                axisLabel: {
+                                    rotate: 45,
+                                    color: "#fff"
+                                },
+                                data: times
+                            },
+                            yAxis: {
+                                type: 'value',
+                                nameTextStyle: {
+                                    color: "#fff"
+                                },
+                                axisLabel: {
+                                    color: "rgb(203,215,235)"
+                                },
+                                splitLine: {
+                                    lineStyle: {
+                                        color: "#7DA7CD",
+                                        type: "dashed",
+                                        width: 1
+                                    }
+                                }
+                            },
+                            series: v_series
+                        };
+                        setTimeout(() => {
+                            var echartsEle = echarts.init(dev_alarm_echarts.value);
+                            echartsEle.setOption(opt);
+                        },500);
+                    }
+                    //当前告警数据加载
+                    var t1 = [];
+                    for (var i = 0; i < AlarmData.value.length; i++) {
+                        if (AlarmData.value[i].code == name) {
+                            t1.push(AlarmType[AlarmData.value[i].type])
+                        }
+                    }
+                    if (t1.length == 0) {
+                        currendDeviceIsAlarm.value=false;
+                        currendDeviceAlarmMsg.value='';
+                        return
+                    }
+                    currendDeviceIsAlarm.value=true;                
+                    var a1 = [];
+                    for (var i = 0; i < t1.length; i++) {
+                        a1.push('<span class="alarm_span"><img src="image/alarm_icon.png" style="vertical-align: middle;"><b>' + t1[i] + '</b></span>')
+                    }
+                    currendDeviceAlarmMsg.value = a1.join('');
+                } else {
+                    //console.log(data.data)
+                }
+            }
+            onMounted(()=>{    
+                devicename.value=route.currentRoute.value.hash.slice(1);      
+                api.GetDeviceInfo(devicename.value ,{week:1}).then(res=> {
+                    if (res==null || res.code!=0) {
+                        //NoneDevice(name)
+                        return
+                    }
+                    if(res.data.data==null) res.data.data={};
+                    openDeviceInfoData.value={name:devicename.value,data:res.data};               
+                    //window.Device_Data = res.data
+                    setTimeout(() => {
+                        LoadDevDetail(devicename.value, "0");
+                    }, 100);
+                })
+            })
+            return{
+                btnFrontBg,
+                openDeviceInfoData,
+                devDetailIndex,
+                currendDeviceIsAlarm,
+                currendDeviceAlarmMsg,
+                LoadDevDetail,
+                dev_alarm_echarts,
+            }
+        }
+    }
+</script>
+<style>
+    .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%;
+        height: 476px;
+    }
+    .dataContent .btn{
+        width: 100px;
+        height: 40px;
+        border: 1px solid #008899;
+        line-height: 40px;
+        text-align: center;
+        display: inline-block;
+        float: left;
+        margin: 5px;
+        border-radius: 5px;
+        cursor: pointer;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .dataContent .btn:hover,.content .btn.active{
+        color: #ffffff;
+        border-color: #0cd7f0 !important;
+    }
+    .dataContent .no_alarm{
+        width: 95%;
+        height: 140px;
+        color: #ffffff;
+        font-size: 32px;
+        text-align: center;
+        line-height: 140px;
+    }
+    .dataContent .has_alarm{
+        width: 95%;
+        height: 140px;
+        display: none;
+        font-size: 24px;
+        text-align: center;
+        line-height: 140px;
+    }
+    .dataContent .has_alarm .alarm_span{
+        margin: 0 20px;
+        color: red;
+    }
+    .dataContent .dev_alarm_echarts{
+        width: 100%;
+        height: 290px;
+        text-align: center;
+        font-size: 24px;
+        color: #ffffff;
+    }
+    .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>

src/router/index.js

@@ -53,6 +53,20 @@ const routes = [
         }
     },
     {
+        path:"/in02-device-info",
+        component: () => import("@/pages/components/In02_device_info.vue"),
+        meta: {
+            name: "in02-device-info"
+        }
+    },
+    {
+        path:"/in02-device-peifang",
+        component: () => import("@/pages/components/In02_device_peifang.vue"),
+        meta: {
+            name: "in02-device-peifang"
+        }        
+    },
+    {
         path:"/imp-00",
         component: () => import("@/pages/imp/imp00.vue"),
         meta: {

src/styles/main.css

@@ -164,6 +164,19 @@
         width: 100%;
         border: 0;       
     }
+    .deviceInfoWin{
+        width: 1200px !important;
+        height: 380px !important;
+        left: 50%;
+        top:50%;
+        margin-top: -190px !important;
+        margin-left:-600px !important;
+    }
+    .deviceInfoWin .content,.deviceInfoWin iframe{
+        height: 380px !important;
+        width: 100%;
+        border: 0;       
+    }
     .impWin{
         width: 800px !important;
         height: 160px !important;
@@ -220,18 +233,18 @@
     #search{
         position: absolute;width: 320px;top: 12%;left: 50%;margin-left: -160px;
         z-index: 1;
-        background: rgba(41,85,137,0.7);
+        background: #013e51;
         border-radius: 2px 2px 2px 2px;
-        border: 1px solid #66AEF3;
+        border: 1px solid #808a8c;
     }
     #search input{
-        width: 315px;height: 38px;background: rgba(41,85,137,0.7);border-radius: 2px 2px 2px 2px;border: 1px solid #66AEF3;color: #ffffff;font-size: 14px;
+        width: 315px;height: 38px;background: #013e51;border-radius: 2px;border: 1px solid #808a8c;color: #26e6f9;font-size: 14px;
         letter-spacing: 3px;
     }
     #search_result{
         position: absolute;width: 310px;max-height: 256px;min-height: 32px; top: 17%;left: 50%;margin-left: -160px;opacity: 0.7;background-color: #132F5F;
         padding: 8px;color: #Ffffff;font-size: 14px;
-        background: rgba(19,47,95,0.8);
+        background: #013e51;
         box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
         border-radius: 2px 2px 2px 2px;
         z-index: 1;
@@ -586,34 +599,6 @@
     .newwin .value{
         color: #fff;
     }
-    .newwin .dataContent .no_alarm{
-        width: 95%;
-        height: 140px;
-        color: #ffffff;
-        font-size: 32px;
-        text-align: center;
-        line-height: 140px;
-    }
-    .newwin .dataContent .has_alarm{
-        width: 95%;
-        height: 140px;
-        display: none;
-        font-size: 24px;
-        text-align: center;
-        line-height: 140px;
-    }
-    .newwin .dataContent .has_alarm .alarm_span{
-        margin: 0 20px;
-        color: red;
-    }
-    .newwin .dataContent .dev_alarm_echarts{
-        width: 95%;
-        height: 300px;
-        line-height: 300px;
-        text-align: center;
-        font-size: 24px;
-        color: #ffffff;
-    }
     .showinfo td,.newwin td{
         border: 0px !important;
     }