lsappBms/lss_vue_wx/src/views/assets/assetsDetailFrame.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="资产详情">
            <router-link to="/assets" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="detail_body">
            <div class="detailBox userInfo">
                <div class="frame_title">
                    <span>{{detail.name}}</span>
                    <span>
                        <mt-button v-if="detail.doorStatus==0" size="small" type="primary" v-on:click.native.stop="openDoor(1)">开门</mt-button>
                        <span v-else style="color:red">已开门</span>
                    </span>
                </div>
                <div class="frame_number">{{detail.modelNumber}}</div>
                <div class="frame_label">
                    <span><span>机架ID：</span>{{detail.rackIp}}</span>
                    <span><span>温度：</span>{{detail.temp}}</span>
                    <span><span>湿度：</span>{{detail.hum}}</span>
                </div>
            </div>
            <div class="detailBox">
                <div class="assDel assDel_Head">
                    机柜设备列表
                    <!-- <img v-if="power.indexOf('update_assets')>-1" v-on:click="addNo()" src="../../assets/image/add.png"> -->
                </div>
                <div class="assDel_List">
                    <div class="one_assDel isFrame" v-for="item in delList">
                        <mt-cell-swipe title="" :right="[
                            { content: '下架', style: { background: 'red', color: '#fff' }, handler: () => handle(item.id) },
                        ]">
                            <div>
                                <div class="new_title">
                                    <span>{{item.deviceName}}</span>
                                    <span>{{item.modelNo}}</span>
                                    <span>{{item.currentState==0?'禁止':'运行'}}</span>
                                </div>
                                <div class="new_label">
                                    <span><span>标签ID：</span>{{item.labelId}}</span>
                                    <span><span>模块ID：</span>{{item.modelId}}</span>
                                    <span><span>U位号：</span>{{item.ubitNum}}</span>
                                </div>
                            </div>
                        </mt-cell-swipe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
                id: this.$route.params.id,
                power: sessionStorage.getItem("power"),
                detail: "",
                delList: [],
			}
		},
		methods: {
            getDetail() {
                this.$indicator.open();
                this.http.post(this.port.assets.detail, {
                    'id': this.id
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.detail = res.data;
                        this.delList = res.data.goodsNosVO;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            // 添加资产编号
            addNo() {
                MessageBox({
                    $type:'prompt',
                    title:'',
                    message:'添加资产数量',
                    closeOnClickModal:false,
                    showCancelButton:true,
                    inputValidator:function(v){
                        if (v === null) {
                        　　 return true;
                        }
                        var str = /^[0-9]*[1-9][0-9]*$/;
                        if(str.test(v) && v != "") {
                            return true
                        } else {
                            return false
                        }
                    },
                    inputErrorMessage:'请输入资产编号数量',
                    showInput:true
                }).then(({ value, action }) => {
                    if(value == null) {
                        this.$toast({
                            message: '创建失败',
                            duration: 2000
                        });
                        return false;
                    } else {
                        this.$indicator.open();
                        this.http.post(this.port.assets.addNo, {
                            'goodsId': this.id,
                            'count': value
                        } , 
                        res => {
                            this.$indicator.close();
                            if (res.code == "ok") {
                                this.$toast({
                                    message: '创建成功',
                                    duration: 2000
                                });
                                this.getDetail();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                }).catch(() => {
                });
            },            

            // 删除资产编号
            deleteNos(id) {
                MessageBox.confirm('', { 
                    message: '是否删除该资产？', 
                        title: '', 
                        confirmButtonText: '确定', 
                        cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.assets.delNo, {
                            'id': id
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "删除成功",
                                    duration: 2000
                                });
                                for(var i in this.delList) {
                                    if(this.delList[i].id == id) {
                                        this.delList.splice(i, 1);
                                    }
                                }
                                var list = this.delList,
                                    useList = [],
                                    serList = [],
                                    scrList = [],
                                    unuList = [];
                                for(var i in list) {
                                    if(list[i].state == 0) {
                                        unuList.push(list[i])
                                    } else if(list[i].state == 1) {
                                        useList.push(list[i])
                                        serList.push(list[i])
                                    } else if(list[i].state == 3) {
                                        scrList.push(list[i])
                                    }
                                }
                                this.useList = useList;
                                this.serList = serList;
                                this.scrList = scrList;
                                this.unuList = unuList;
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            // 跳转
            jumpBack() {
                this.$router.push("/assets");
            },

            // 开门
            openDoor() {
                MessageBox.confirm('', { 
                    message: '是否打开机柜？', 
                    title: '', 
                    confirmButtonText: '确定', 
                    cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.assets.openDoor, {
                            'goodsId': this.id,
                            'doorStatus': 1
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "开门成功",
                                    duration: 2000
                                });
                                this.getDetail();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            // 下架设备
            handle(id) {
                MessageBox.confirm('', { 
                    message: '是否下架该设备？', 
                    title: '', 
                    confirmButtonText: '确定', 
                    cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.assets.upMold, {
                            'id': id
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "下架成功",
                                    duration: 2000
                                });
                                this.getDetail();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            }
        },
        created() {
            this.getDetail();
        },
		mounted() {
            
		}
	}

</script>

<style scoped>
    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
    }

    .detail {
        background: #EFEFEF;
    }

    .detailBox {
        background: #fff;
        margin-bottom: 0.11rem;
    }

    .userInfo {
        padding: 0 0.1rem 0.12rem;
    }

    .frame_title > span {
        padding: 0.12rem 0 0 0;
        display: inline-block;
        vertical-align: bottom;
    }

    .frame_title > span:nth-child(1) {
        display: inline-block;
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333;
        font-size: 0.15rem;
    }

    .frame_title > span:nth-child(2) {
        float: right;
        color: #2680EB;
        padding: 0.1rem 0 0 0;
    }

    .frame_number {
        padding: 0.05rem 0;
        color: #999;
    }

    .frame_label {
        padding: 0 0 0.05rem 0;
    }

    .frame_label > span {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #888;
    }

    .frame_label > span:nth-child(1) {
        width: 40%;
        float: left;
    }

    .frame_label > span:nth-child(2) {
        width: 30%;
        float: left;
        text-align: right;
    }

    .frame_label > span:nth-child(3) {
        width: 30%;
        text-align: right;
    }
    
    .frame_label > span > span {
        color: #555;
        font-size: 0.13rem;
    }

    .frame_detail {
        text-align: right;
        padding: 0 0.01rem 0.05rem;
        color: #2680EB;
        font-size: 0.13rem;
    }

    .assDel {
        padding: 0.12rem 0.1rem;
    }

    .assDel_List {
        padding-top: 0; 
    }

    .assDel_Status span {
        display: inline-block;
        text-align: center;
        width: 24%;
        color: #aaa;
        font-size: 0.15rem;
    }

    .assDel_Status span.active {
        color: #26a2ff;
    }

    .assDel_Head img {
        float: right;
        width: 0.2rem;
        height: 0.2rem;
    }

    .one_assDel {
        /* padding: 0 0.1rem; */
        margin: 0 0 0.15rem 0;
    }

    .mint-cell-wrapper {
        padding: 0;
    }

    .one_assDel_head {
        width: 100%;
    }

    .one_assDel_body {
        width: 100%;
    }

    .one_assDel_head > span {
        display:inline-block;
        vertical-align: middle;
        color: #666;
        line-height: 0.4rem;
    }

    .one_assDel_head > span:nth-child(1){
        width: 85%;
        font-size: 0.15rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .one_assDel_head > span:nth-child(2){
        float: right;
    }

    .one_assDel_body span {
        /* display:inline-block; */
        color: #aaa;
        vertical-align: middle;
    }

    .one_assDel_body img {
        float: right;
        width: 0.25rem;
        height: 0.25rem;
        vertical-align: middle;
    }

    
    .new_title {
        width: 100%;
    }

    .new_label {
        width: 100%;
    }

    .new_title > span {
        padding: 0.12rem 0;
        display: inline-block;
        vertical-align: bottom;
    }

    .new_title > span:nth-child(1) {
        max-width: 40%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333;
        font-size: 0.15rem;
    }

    .new_title > span:nth-child(2) {
        max-width: 40%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .new_title > span:nth-child(3) {
        float: right;
        color: #2680EB;
    }

    .new_label > span {
        display: inline-block;
        padding: 0 0 0.05rem 0;
        width: 49%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .new_label > span > span {
        color: #555;
        font-size: 0.13rem;
    }

</style>
<style>
    .detail_head .mint-header-title {
        font-weight: 600;
        font-size: 0.15rem;
    }

    .detail_head .mint-button-text {
        color: #26a2ff;
    }

    .detailBox .mint-cell {
        padding: 0 0 0 0.02rem;
    }

    .one_assDel .mint-cell-value {
        display: block;
        width: 100%;
    }

    .one_assDel .mint-cell:last-child {
        background-image: none;
    }

    .one_assDel .mint-cell-wrapper {
        background-image: none;
    }

    .one_assDel .mint-cell-swipe-button {
        line-height: 0.55rem;
    }

    .one_assDel .noName .mint-cell-swipe-button {
        line-height: 48px;
    }

    .isFrame .mint-cell-swipe-button {
        line-height: 0.83rem;
    }
</style>