内容修改

whychdw

2021-07-02 41a845fe6f02c841a821afcd4d7fd22fc74edba1

内容修改

 src/components/ipInput.vue

New file
@@ -0,0 +1,123 @@
<template>
    <ul class="ipAdress">
        <li v-for="(item,index) in ipAdress" :key="'item'+index">
            <input type="text" @input="checkIpVal(item,index)" @keyup="turnIpPOS(item,index,$event)"
                   v-model="item.value" ref="ipInput" @blur="setDefaultVal(item)"/>
            <div></div>
        </li>
    </ul>
</template>

<script>
export default {
    name: "ipInput",
    data() {
        return {
            ipAdress: [
                {
                    value: ''
                },
                {
                    value: ''
                },
                {
                    value: ''
                },
                {
                    value: ''
                }
            ]
        }
    },
    methods: {
        checkIpVal(item, index) {
            let self = this;
            //确保每个值都处于0-255
            let val = item.value;
            //当输入的是空格时，值赋为空
            val = val.trim();
            val = parseInt(val, 10);
            if (isNaN(val)) {
                val = ''
            } else {
                val = val < 0 ? 0 : val;
                val = val > 255 ? 255 : val;
            }
            item.value = val;
        },
        turnIpPOS(item, index, event) {
            let self = this;
            let e = event || window.event;
            // console.log(index);
            //删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
            if (e.keyCode == 8) {
                let val = item.value;
                console.log(val);
                if (index == 0) { } else if(val==''){
                    self.$refs.ipInput[index - 1].focus();
                }
            }
            //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
            if (e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190 || e.keyCode == 110) {
                if (index == 3) { } else {
                    self.$refs.ipInput[index + 1].focus();
                }
            }
        },
        setDefaultVal(item) {
            //当input失去焦点，而ip没有赋值时，会自动赋值为0
            let self = this;
            let val = item.value;
            if (val == '') {
                item.value = '0';
            }
        },
    },
}
</script>

<style scoped>
.ipAdress {
    display: flex;
    align-items: center;
    border: 1px solid #0190FE;
    width: 148px;
    margin-right: 10px;
    padding: 0;
}

.ipAdress li {
    position: relative;
    height: 23px;
    margin: 0;
    list-style: none;
}

ul[class="ipAdress"] input[type="text"] {
    border: none;
    width: 100%;
    height: 23px;
    text-align: center;
    background: transparent;
}

.ipAdress li div {
    position: absolute;
    bottom: 2px;
    right: 0;
    border-radius: 50%;
    background: #0190FE;
    width: 2px;
    height: 2px;
}

/*只需要3个div*/
.ipAdress li:last-child div {
    display: none;
}

/*取消掉默认的input focus状态*/
.ipAdress input:focus {
    outline: none;
}
</style>

 src/pages/dataTest/diagrams/normal/index.vue

@@ -74,10 +74,12 @@
            }
        },
        dropVol(val) {
            diagram.setOption('dropVol', 'text', '导通压降:'+val+'V');
            let vol = (typeof val == 'number')?'导通压降:'+val+'V':val;
            diagram.setOption('dropVol', 'text', vol);
        },
        contactRes(val) {
            diagram.setOption('contactRes', 'text', '接触器阻抗:'+val+'mΩ');
            let res = (typeof val == 'number')?'接触器阻抗:'+val+'mΩ':val;
            diagram.setOption('contactRes', 'text', res);
        }
    },
    methods: {

 src/pages/dataTest/realTime.vue

@@ -1255,8 +1255,17 @@
                let groupIndex = this.batt.GroupIndexInFBSDevice;
                // 设备的温度
                this.diagram.temp = data.dev_temp;
                this.diagram.contactRes = (groupIndex != 0 ? data.dev_conresist1 : data.dev_conresist).toHold(2);
                this.diagram.dropVol = (groupIndex != 0 ? data.dev_condvoldp1 : data.dev_condvoldp).toHold(2);
                let contactRes = (groupIndex != 0 ? data.dev_conresist1 : data.dev_conresist).toHold(2);
                let dropVol = (groupIndex != 0 ? data.dev_condvoldp1 : data.dev_condvoldp).toHold(2);
                let alarms = data.dev_61850alarms.split(',');
                if(alarms.length) {
                    this.diagram.contactRes = alarms[0]=='true'?'k1异常':contactRes;
                    this.diagram.dropVol = alarms[3]=='true'?'D1异常': dropVol;
                }else {
                    this.diagram.contactRes = contactRes;
                    this.diagram.dropVol = dropVol;
                }

            },
            // BTS设备信息
            setEquipBTS(data) {

 src/pages/test/ipInput.vue

New file
@@ -0,0 +1,20 @@
<template>
    <flex-layout>
        <ip-input></ip-input>
    </flex-layout>
</template>

<script>
import IpInput from "@/components/ipInput";
export default {
    name: "ipInputPage",
    components: {IpInput},
    data() {

    },
}
</script>

<style scoped>

</style>

 src/pages/test/lineMarkPoint.vue

@@ -4,7 +4,6 @@
            <flex-box title="组端电压">
                <e-chart-wrapper ref="groupVol"></e-chart-wrapper>
            </flex-box>

        </div>
    </flex-layout>
</template>

 src/router/routes.js

@@ -461,6 +461,13 @@
                    title: '测试折线图模块极值点',
                },
                component: resolve => require(['../pages/test/lineMarkPoint.vue'], resolve),
            },
            {
                path: 'ipInput',
                meta: {
                    title: 'IP地址修改',
                },
                component: resolve => require(['../pages/test/ipInput.vue'], resolve),
            }
        ]
    },