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

<template>
	<div id="allocation">
        <div class="head">
            <div class="searchbox">
                <img src="../../assets/image/search.png" class="searchbox_img">
                <input type="text" v-model="keyWord" class="searchbox_text" />
                <button v-on:click="searchKeyword()" class="searchbox_button">搜索</button>
            </div>
            <div class="btn_body">
                <img v-on:click.stop="showList()" class="btn_img" src="../../assets/image/add.png">
                <div class="btn_list" v-show="popupVisible">
                    <div v-if="power.indexOf('registered_assets') > -1" v-on:click="register()"><img src="../../assets/image/register.png">登记资产</div>
                    <div v-if="tagId != -2 && tagId != -3" v-on:click="exportExcel()"><img src="../../assets/image/export.png">导出报表</div>
                </div>
            </div>
            <div class="searchkey">
                <div class="searchkey_word">
                    <a v-for="(item,index) in labels" :id="'tag' + item.id" v-bind:class="{'active':item.id==tagId}" v-on:click="chooseTag(item.id,1)">{{item.name}}</a>
                </div>
                <div class="searchkey_btn">
                    <img v-on:click="showFilter()" src="../../assets/image/pull_down.png">
                </div>
            </div>
        </div>
        <section class="_sorting-address">
            <ul class="address_first">
                <li v-for="(item,index) in labels" :id="'btn'+item.id" v-bind:class="{'active':item.id==tagId}" v-on:click="chooseTag(item.id,0)">{{item.name}}</li>
            </ul>
        </section>
        <div class="body">
            <!-- <div class="noList" v-if="list.length==0">
                <img src="../../assets/image/noList.png">
            </div> v-else  -->
            <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :class="tagId==-2||tagId==-3?'isFrame':''">
                <li v-if="tagId != -2 && tagId != -3" v-for="item in list" v-on:click="jumpTo(item.id)">
                    <div class="item_img">
                        <img v-if="item.pic != null" v-lazy="item.pic">
                        <img v-else src="../../assets/image/noPic.png">
                    </div>
                    <div class="text item_name">{{item.name}}</div>
                    <div class="text item_int">{{item.modelNumber}}</div>
                    <div class="text item_num">{{item.goodsNos.length}}{{item.unit}}</div>
                </li>
                <li v-if="tagId == -2" v-for="item in list" class="one_frame" v-on:click="jumpToFrame(item.id)">
                    <div class="frame_title">
                        <span>{{item.name}}</span>
                        <span>
                            <mt-button v-if="item.doorStatus==0" size="small" type="primary" v-on:click.native.stop="openDoor(item.id)">开门</mt-button>
                            <span v-else style="color:red">已开门</span>
                        </span>
                    </div>
                    <div class="frame_number">{{item.modelNumber}}</div>
                    <div class="frame_label">
                        <span><span>机架ID：</span>{{item.rackId}}</span>
                        <span><span>温度：</span>{{item.temp}}</span>
                        <span><span>湿度：</span>{{item.hum}}</span>
                    </div>
                    <div class="frame_detail"> 查看详情 > </div>
                </li>
                <li v-if="tagId == -3" v-for="item in list" class="one_device">
                    <mt-cell-swipe :id="'dev' + item.id" v-if="item.goodsNos[0].goodsId == null" title="" 
                        :right="[{ content: '上架', style: { background: '#2680EB', color: '#fff' }, handler: () => chooseDevice(item.id) }]">
                        <div style="width: 100%;">
                            <div class="new_title">
                                <span>{{item.name}}</span>
                                <span>{{item.modelNumber}}</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>
                                <!-- <span><span>机架ID：</span>{{item.rackId}}</span> -->
                            </div>
                        </div>
                    </mt-cell-swipe>
                    <mt-cell-swipe :id="'dev' + item.id" v-else title=""
                        :right="[{ content: '下架', style: { background: 'red', color: '#fff' }, handler: () => handle(item.id) }]">
                        <div style="width: 100%;">
                            <div class="new_title">
                                <span>{{item.name}}</span>
                                <span>{{item.modelNumber}}</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>
                                <span><span>机架ID：</span>{{item.rackId}}</span>
                            </div>
                        </div>
                    </mt-cell-swipe>
                </li>
                
                <div class="order" v-if="haveMore">
                    <span class="line"></span>
                    <span class="txt">没有更多了</span>
                    <span class="line"></span>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
    import util from '../../common/js/util'
    import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
                keyWord: "",
                power: sessionStorage.getItem("power"),
                list: [],
                labels: [],
                pageNum: 1,
                pages: 1,
                tagId: sessionStorage.assetsTab==null?-1:sessionStorage.assetsTab,
                popupVisible: false,
                loading: false,
                haveMore: false,
			}
        },
		methods: {
            // 资产列表
            getList() {
                this.list = [];
                this.$indicator.open();
                var tagId = this.tagId==-1?"":this.tagId;
                if(tagId == -2) {
                    tagId = -1
                } else if(tagId == -3) {
                    tagId = -2
                }
                this.http.post(this.port.assets.list, {
                    'keyName': this.keyWord,
                    'tagId': tagId,
                    'pageNum': 1
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.list = res.data.list;
                        this.pages = res.data.pages==0?1:res.data.pages;
                        document.querySelector("#tag"+this.tagId).scrollIntoView(true);
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMore() {
                if(this.pageNum == this.pages) {
                    this.haveMore = true;
                } else if(this.pageNum < this.pages) {
                    this.$indicator.open();
                    var tagId = this.tagId==-1?"":this.tagId;
                    if(tagId == -2) {
                        tagId = -1
                    } else if(tagId == -3) {
                        tagId = -2
                    }
                    this.http.post(this.port.assets.list, {
                        'keyName': this.keyWord,
                        'tagId': tagId,
                        'pageNum': ++this.pageNum 
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.pages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.list.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            // 标签列表
			getLabels() {
                this.http.post(this.port.label.list, {} , 
                res => {
                    if (res.code == "ok") {
                        this.getList();
                        var array = [{"id":-1 , "name": "全部"},{"id":-2,"name":"机架"},{"id":-3,"name":"机架设备"}];
                        for(var i in res.data) {
                            array.push(res.data[i]);
                        }
                        this.labels = array;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            // 关键词搜索
            searchKeyword() {
                this.getList();
            },

            // 右上角按钮
            showList() {
                this.popupVisible = !this.popupVisible;
            },

            // 标签筛选
            showFilter() {
                $("._sorting-medical").removeClass("fixed-top");
                if($("._sorting-address").hasClass("fixed-top")){
                    $(".searchkey_btn img").removeClass("rotate")
                    $(".searchkey_btn img").addClass("rotate1")
                    $(this).removeClass("current");
                    $("._sorting-address").removeClass("fixed-top");
                    $('._navbar').attr('style','position: fixed;top:0;');
                }else{
                    $(".searchkey_btn img").removeClass("rotate1")
                    $(".searchkey_btn img").addClass("rotate")
                    $("._sorting-address").addClass("fixed-top");
                    $(this).addClass("current");
                    $("._current-medical").removeClass("current");
                    $('._navbar').attr('style','position: fixed;top:0;');
                }
            },

            // 标签选择
            chooseTag(id,type) {
                $("#"+id).addClass("active").siblings("a").removeClass("active");
                $("#btn"+id).addClass("active").siblings().removeClass("active");
                // location.href = "#" + id;
                document.querySelector("#tag"+id).scrollIntoView(true);
                sessionStorage.assetsTab = id;
                $("._sorting-medical").removeClass("fixed-top");
                $(".searchkey_btn img").removeClass("rotate")
                $(".searchkey_btn img").addClass("rotate1")
                $(this).removeClass("current");
                $("._sorting-address").removeClass("fixed-top");
                $('._navbar').attr('style','position: fixed;top:0;');
                this.pages = 1;
                this.tagId = id;
                this.getList();
            },

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

            // 上架
            chooseDevice(id) {
                var _this = this;
                this.http.post(this.port.assets.rackList, {
                    'tagId': -1
                } , 
                res => {
                    if (res.code == "ok") {
                        var list = res.data;
                        var data = [];
                        for(var i in list) {
                            data.push({
                                'id': list[i].id,
                                'name': list[i].name
                            })
                        }
                        var pickerDiv = document.getElementById("dev"+id);
                        var pickerView = new PickerView({
                            bindElem: pickerDiv, 
                            data: data, 
                            title: "机架列表", 
                            leftText: "取消", 
                            rightText: "确定", 
                            rightFn: function(selectArr) {
                                _this.setDevice(id,selectArr[0].id,selectArr[0].name);
                            }
                        });
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            setDevice(id,goodsId,name) {
                MessageBox.confirm('', { 
                    message: '是否上架至 "'+ name +'" 设备？', 
                    title: '', 
                    confirmButtonText: '确定', 
                    cancelButtonText: '取消' 
                 }).then(action => { 
                    if (action == 'confirm') {     //确认的回调
                        this.http.post(this.port.assets.upMold, {
                            'id': id,
                            'goodsId': goodsId
                        } , 
                        res => {
                            if (res.code == "ok") {
                                this.$toast({
                                    message: "上架成功",
                                    duration: 2000
                                });
                                this.getList();
                            } 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.getList();
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                 }).catch(err => { 
                 });
            },

            // 路由跳转
            jumpTo(id) {
                this.$router.push("/detail/" + id);
            },

            jumpToFrame(id) {
                this.$router.push("/detailFrame/" + id);
            },
            
            register() {
                this.$router.push("/assetsRegister");
            },

            // 导出
            exportExcel() {
                this.$indicator.open();
                this.http.downloadFile(this.port.assets.listExcel, {
                    'keyName': this.keyWord,
                    'tagId': this.tagId==-1?"":this.tagId,
                } , 
                res => {
                    this.$indicator.close();
                    let url = window.URL.createObjectURL(new Blob([res]))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', '资产报表.xls')
                    document.body.appendChild(link)
                    link.click()
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            globalClick(callback) {
                var _this = this;
                document.getElementById('allocation').onclick = function () {
                    _this.popupVisible = false;
                }
            }
        },
        created() {
            this.getLabels();
        },
		mounted() {
            this.globalClick();
		}
	}

</script>

<style scoped>
    /* 头部搜索框、筛选栏 START */
    .head {
        position: fixed;
        width: 100%;
        box-sizing:border-box;
        padding: 0.07rem 0.15rem 0 0.15rem;
        background: #ffffff;
        border-bottom: 1px solid #dfdfdf;
        z-index: 105;
    }

    .searchbox {
        display: inline-block;
        /* width: 75%; */
        width: 88%;
        position: relative;
        vertical-align: middle;
    }

    .searchbox img.searchbox_img {
        width:0.18rem;
        height: 0.18rem;
        position: absolute;
        left: 0.04rem;
        top: 0.05rem;
    }

    .searchbox input.searchbox_text {
        font-size: 0.16rem;
        height: 0.28rem;
        border-style:none;
        border: 1px solid #2680EB;
        border-radius: 50px;
        box-sizing:border-box;
        width: 100%;
        padding: 0 0.45rem 0 0.33rem;
    }

    input.searchbox_text:focus{
        outline: none;
    }

    .searchbox button.searchbox_button {
        border: 0;
        background-color: transparent;
        outline: none;
        height: 0.28rem;
        font-size: 0.13rem;
        background: #2680EB;
        color: #fff;
        border-radius: 50px;
        padding: 0 0.12rem;
        position: absolute;
        right: -0.01rem;
        top: 0;
    }
    
    .btn_body {
        display: inline-block;
        float: right;
        position: relative;
        margin-top: 0.03rem;
    }

    .btn_img {
        float: right;
        width: 0.25rem;
        vertical-align: middle;
    }
    
    .btn_list {
        position: absolute;
        right: 0;
        top: 0.37rem;
        border:#aaa;
        background: #fcfcfc;
        box-shadow: 5px 5px 10px #ccc;
        z-index: 105;
    }

    .btn_list:before {
        display: inline-block;
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 10px;
        border-bottom-color: #fcfcfc;
        content: "";
        position: absolute;
        top: -20px;
        right: 0.06rem;
    }

    .btn_list > div {
        width: 0.8rem;
        font-size: 0.13rem;
        padding: 0.1rem 0.15rem;
        border-bottom: 1px solid #efefef;
        text-align: center;
    }

    .btn_list > div img {
        width: 0.14rem;
        height: 0.14rem;
        vertical-align: middle;
        margin-right: 0.05rem;
    }

    .btn_list > div span {
        height: 0.15rem;
        line-height: 0.15rem;
        vertical-align: middle;
    }

    .searchkey {
        height: 0.35rem;
        line-height: 0.35rem;
        margin-top: 0.08rem;
    }

    .searchkey .searchkey_word {
        width: 93%;
        display: inline-block;
        overflow-x: auto;
        white-space: nowrap;
        vertical-align: middle;
    }

    .searchkey .searchkey_word::-webkit-scrollbar {
        display:none
    }

    .searchkey .searchkey_word a {
        font-size: 0.13rem;
        padding: 0 0.05rem;
        color: #333;
        text-decoration:none;
    }

    .searchkey .searchkey_word a.active {
        color: #2680EB;
    }

    .searchkey .searchkey_btn {
        display: inline-block;
        width: 7%;
        height: 100%;
        float: right;
    }

    .searchkey .searchkey_btn img {
        width: 0.25rem;
        /* height: 0.3rem; */
        vertical-align: middle;
    }

    .address_first .current{
        background:#eee;
        color: #6f83ff;
        border-left: 2px solid #6f83ff;
    }
    
    ._sorting-address {
        position:fixed;
        top: -50%;
        width: 100%;
        height: 50%;
        z-index: 1;
        -webkit-transition-duration: 0.4s;
        background: #fff;
    }

    ._sorting-address>ul {
        margin: 0;
        padding: 0;
        overflow: auto;
        height: 100%;
        width: 100%;
        -webkit-transition-duration: 0.4s;
        box-sizing:border-box;
        padding: 0.08rem 0.1rem;
    }

    ._sorting-address>ul>li {
        display: inline-block;
        height: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: #ccc;
        margin: 0.02rem 0.03rem 0.08rem;
        border: 1px solid #ccc;
        border-radius: 50px;
        width: 0.76rem;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    ._sorting-address>ul>li.active {
        border: 1px solid #2680EB;
        color: #2680EB;
    }

    ._sorting-address>ul.address_first {
        background: #fff;
        position: absolute;
        z-index: 1;
        border: 1px solid #ddd;
        box-shadow: 5px 5px 10px #ddd;
    }

    .fixed-top{
        top: 0.77rem;
    }

    .fixed-top::after{
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        background:rgba(0,0,0,0.2);
    }

    .rotate {
        transform-origin: center center;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .rotate1 {
        transform-origin: center center;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }
    /* 头部搜索框、筛选栏 END */

    /* 列表页 START */
    .body {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        padding: 0.81rem 0 0 0;
        /* height: calc(100% - 0.4rem); */
        height: calc(100% - 0.8rem);
        overflow-y: auto;
        background: #EFEFEF;
    }

    .body > ul {
        padding: 0 0.12rem;
        margin-top: 0;
    }
    
    .body > ul li {
        display: inline-block;
        width: 1.5rem;
        padding: 0.08rem 0.05rem;
        background: #fff;
        margin: 0.06rem 0.04rem;
        border-radius: 10px; 
    }

    .body > ul li .item_img img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .body > ul li .text {
        height: 0.23rem;
        line-height: 0.23rem;
        margin: 0.02rem  0 0 0;
    }

    .body > ul li .item_int {
        color: #B5B5B5;
        font-size: 0.12rem;
    }

    .body > ul li .item_num {
        color: #448DE4;
        font-weight: 600;
    }

    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }

    .order {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
    }

    .order .line {
        display: inline-block;
        width: 1.2rem;
        border-top: 1px solid #ccc ;
        vertical-align: middle;
    }

    .order .txt {
        color: #ccc;
        font-size: 0.13rem;
        vertical-align: middle;
    }

    .body > ul.isFrame {
        padding: 0;
    }

    .body > ul.isFrame > li {
        border-radius: 0;
        margin: 0;
        width: 100%;
        padding: 0;
        display: block;
        margin-bottom: 0.08rem;
    }

    .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;
    }

    .body > ul.isFrame > li.one_frame {
        padding: 0 0.08rem;
        box-sizing:border-box;
    }

    .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;
    }
    /* 列表页 END */
</style>
<style>
    .isFrame .mint-cell-swipe-button {
        line-height: 0.87rem;
    }

    .frame_title > span:nth-child(2) .mint-button--small {
        height: 0.25rem;
    }

    .one_device .mint-cell-title {
        display: none;
    }

    .one_device .mint-cell-value {
        width: 100%;
    }
</style>