FE-V2-XCX/pages_manage/workbench/laboratory/meLaboratory.vue

<!-- 我的实验室 -->
<template>
    <view id="meLaboratory">
        <view class="top-picker-max-box">
            <view class="top-picker-box">
                <picker @change="facultyChange" :value="facultyIndex" :range="facultyArray">
                    <view class="picker-view">
                        <view>{{!facultyIndex?'学院':facultyArray[facultyIndex]}}</view>
                        <img class="picker-img" src="@/images/icon_06.png" alt="">
                    </view>
                </picker>
            </view>
            <view class="top-picker-box">
                <picker @change="subjectChange" :value="subjectIndex" :range="subjectArray">
                    <view class="picker-view">
                        <view>{{!subjectIndex?'分类':subjectArray[subjectIndex]}}</view>
                        <img class="picker-img" src="@/images/icon_06.png" alt="">
                    </view>
                </picker>
            </view>
            <view class="top-picker-box">
                <picker @change="levelChange" :value="levelIndex" :range="levelArray">
                    <view class="picker-view">
                        <view>{{!levelIndex?'分级':levelArray[levelIndex]}}</view>
                        <img class="picker-img" src="@/images/icon_06.png" alt="">
                    </view>
                </picker>
            </view>
        </view>
        <view class="for-max-box">
            <img class="null-img" v-if="!dataList[0]" src="@/images/null-data-1.png">
            <view class="for-box" v-for="(item,index) in dataList" :key="index" @click="laboratoryInfo(item)">
                <view class="title-box">
					<view :style="'border:1rpx solid '+item.fiedColor+';background:#fff;color:'+item.fiedColor+';'">{{item.levelName}}</view>
                    <view>{{item.name}}</view>
                    <img src="@/images/icon_04.png">
                </view>
                <view class="address-box"><span>{{item.typeName}}</span>{{item.deptName}}</view>
                <view class="address-box-two">
                    <img src="@/images/icon_14.png">
                    <view>{{item.subAddrrStr}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import $mqtt from '@/utils/mqtt.min.js';
    import { config } from '@/api/request/config.js'
    import { laboratoryList,subject_class,listDepartments,mangerControl,laboratoryInfo } from '@/api/index.js'
    export default {
        data() {
            return {
                dataList:[],
                subject_classData:[],
                //MQTT请求参数-传感器
                mtopic:"lab/function/data",
                msg:"",
                client:{},
                //院系选择器数据
                facultyList:[],
                facultyArray:[],
                facultyIndex:"",
                //学科选择器数据
                subjectList:[],
                subjectArray:[],
                subjectIndex:"",
                //级别选择器数据
                levelList:[
                    {dictLabel:"全部级别", dictValue:""},
                    {dictLabel:"一级", dictValue:"1"},
                    {dictLabel:"二级", dictValue:"2"},
                    {dictLabel:"三级", dictValue:"3"},
                    {dictLabel:"四级", dictValue:"4"},
                ],
                levelArray:['全部级别','一级','二级','三级','四级'],
                levelIndex:"",
            }
        },
        onLoad() {

        },
        onShow(){
            this.listDepartments();
            this.subject_class();
            //监听传感器信息
            getApp().watch(this.getMqttSensorData,'mqttSensorData')
        },
        methods: {
            //监听传感器信息
            getMqttSensorData(val){
                let self = this;
                // console.log('页面获取的-传感器信息',val)
                if(val.subId){
                    for(let i=0;i<self.dataList.length;i++){
                        if(self.dataList[i].id == val.subId){
                            self.$set(self.dataList[i],'sensorFunctionList',val.functionStatuses);
                        }
                    }
                }
            },
            async laboratoryInfo(item){
                const {data} = await laboratoryInfo(item.id);
                if(data.code == 200){
                    let obj = data.data[0];
                    obj.subClassVO = item.subClassVO;
                    obj.name = item.name;
                    obj.subTypeLable = item.subTypeLable;
                    obj.deptName = item.deptName;
                    obj.subAddrrStr = item.subAddrrStr;
					obj.sensorFunctionList = item.sensorFunctionList;
                    uni.navigateTo({
                        url: '/pages_manage/workbench/laboratory/laboratoryInfo?item='+encodeURIComponent(JSON.stringify(obj))+'&deptId='+item.deptId
                    });
                }
            },
            //滚动选择器
            facultyChange: function(e) {
                if(this.facultyArray[0]){
                    this.facultyIndex = parseInt(e.target.value);
                    this.laboratoryList();
                }
            },
            subjectChange: function(e) {
                if(this.subjectArray[0]){
                    this.subjectIndex = parseInt(e.target.value);
                    this.laboratoryList();
                }
            },
            levelChange: function(e) {
                if(this.levelArray[0]){
                    this.levelIndex = parseInt(e.target.value);
                    this.laboratoryList();
                }
            },
            //MQTT订阅-传感器
            subscriptionMQTT(){
                let self = this;
                const mqttOptions = {
                    keepalive: 30,
                    clean: false,//保留会话
                    connectTimeout: 5000, // 超时时间
                    reconnectPeriod:5000, // 重连间隔
                    clientId: 'lab/function/data',
                    username: config.username,
                    password: config.password,
                }
				
                const connectUrl = config.mqtt_url;
                this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
                this.client.on('connect', () => {
                    // 这是为了给自己发条消息，其它无作用
                    this.client.subscribe(this.mtopic, (err) => {
                        if (!err) {
                            console.log("订阅传感器成功",this.mtopic)
                        }
                    })
                });
                // 自动重连
                this.client.on('reconnect', (msg) => {
                    console.log('reconnect', msg)
                });
                // 错误
                this.client.on('error', () => {
                    console.log('error')
                });
                // 断开
                this.client.on('end', () => {
                    console.log('end')
                });
                // 掉线
                this.client.on('offline', (msg) => {
                    console.log('offline',msg)
                });
                // 收到消息
                this.client.on('message', (topic, message) => {
                    let data = JSON.parse(message)
                    console.log('topic',topic)
                    console.log('data',data)
                    if(topic == this.mtopic){
                        if(data.data.subId){
                            for(let i=0;i<self.dataList.length;i++){
                                if(self.dataList[i].id == data.data.subId){
                                    self.$set(self.dataList[i],'sensorFunctionList',data.data.functionStatuses);
                                }
                            }
                        }
                    }
                })
                // 全局监听是否有关闭mqtt的消息的事件
                uni.$on('closeMqtt',() => {
                    this.client.end(true); // 主动断开连接
                })
            },
            //取消订阅关闭MQTT连接
            offMQTT(){
                this.client.unsubscribe(this.mtopic, error => {
                    if (error) {
                        console.log('Unsubscribe error', error)
                    }
                })
                this.client.end();
                this.client = {};
            },
            //设备开关按钮
            hardwareButton(minItem,command){
                let self = this;
                let text = '';
                if(command == 'close'){
                    text = '关闭';
                }else if(command == 'open'){
                    text = '开启';
                }
                uni.showModal({
                    content: '确认要'+text+'吗?',
                    cancelColor:"#999",
                    confirmColor:"#0183FA",
                    success: function (res) {
                        if (res.confirm) {
                            self.mangerControl(minItem,command);
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            //设备开关
            async mangerControl(minItem,command){
                let obj = {
                    id:minItem.id,
                    command:command,
                };
                const {data} = await mangerControl(obj);
                if(data.code == 200){
                    if(command == 'open'){
                        minItem.type = 3;
                    }else if(command == 'close'){
                        minItem.type = 4;
                    }
                    uni.showToast({
                        title: '操作成功',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                }
            },
            //获取院系
            async listDepartments(){
                const {data} = await listDepartments();
                if(data.code == 200){
                    let list = [];
                    for(let i=0;i<data.data.length;i++){
                        list.push(data.data[i].deptName)
                    }
                    this.facultyArray = list;
                    list.unshift('全部院系');
                    this.facultyList = data.data;
                    this.facultyList.unshift({deptName:"全部院系", deptId:""})
                }
            },
            //获取学科字典
            async subject_class(){
                const {data} = await subject_class();
                if(data.code == 200){
                    this.subject_classData = data.data;
                    let list = [];
                    for(let i=0;i<data.data.length;i++){
                        list.push(data.data[i].dictLabel)
                    }
                    this.subjectArray = list;
                    list.unshift('全部分类');
                    this.subjectList = data.data;
                    this.subjectList.unshift({dictLabel:"全部分类", dictValue:""})
                    this.laboratoryList().then(res => {
                        // this.subscriptionMQTT()
                    });
                }
            },
            //获取实验室列表
            async laboratoryList(){
                let self = this;
                let obj = {
                    deptId:this.facultyIndex?this.facultyList[this.facultyIndex].deptId:'',
                    subDept:this.subjectIndex?this.subjectList[this.subjectIndex].dictValue:'',
                    level:this.levelIndex?this.levelList[this.levelIndex].dictValue:'',
                };
                const {data} = await laboratoryList(obj);
                if(data.code == 200){
                    for(let o=0;o<data.data.length;o++){
                        if(data.data[o].labHardwareVOList){
                            data.data[o].hardwareList = [];
                            for(let i=0;i<data.data[o].labHardwareVOList.length;i++){
                                if(data.data[o].labHardwareVOList[i].hardwareTypeEnum.code == 4 &&data.data[o].labHardwareVOList[i].hardwareNUM){
                                    if(data.data[o].hardwareNUM){
                                        data.data[o].hardwareNUM = data.data[o].hardwareNUM + ',' + data.data[o].labHardwareVOList[i].hardwareNUM
                                    }else{
                                        data.data[o].hardwareNUM = data.data[o].labHardwareVOList[i].hardwareNUM
                                    }
                                }else{
                                    let obj = {
                                        name:"",
                                        type:"",
                                    };
                                    obj.name = data.data[o].labHardwareVOList[i].hardwareTypeEnum.hardwareTypeName
                                    obj.type = data.data[o].labHardwareVOList[i].state.code;
                                    obj.id = data.data[o].labHardwareVOList[i].id;
                                    data.data[o].hardwareList.push(obj);
                                }
                            }
                        }
                    }
                    this.dataList = data.data;
                    return data.data;
                }
            },
        },
        onHide(){
            // this.offMQTT();
            // //删除传感器监听
            getApp().deleteSensorWatch();
            console.log("onHide",this.mtopic);
        },
        beforeDestroy(){
            // this.offMQTT();
            // //删除传感器监听
            getApp().deleteSensorWatch();
            console.log("beforeDestroy",this.mtopic);
        }
    }
</script>

<style lang="stylus" scoped>
    #meLaboratory{
        height:100%;
        display flex
        flex-direction column
        .top-picker-max-box{
            display:flex;
            padding:0 20rpx;
            background #fff
            border-bottom:1rpx solid #E0E0E0;
            .top-picker-box{
                line-height:80rpx;
                height:80rpx;
                .picker-view{
                    display flex
                    view{
                        display:block;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        font-size:28rpx;
                    }
                    .picker-img{
                        width:24rpx;
                        height:13rpx;
                        margin-top:36rpx;
                        margin-left:13rpx;
                    }
                }
            }
            .top-picker-box:nth-child(1){
                text-align left
                width:320rpx;
                .picker-view{
                    view{
                        max-width:260rpx;
                    }
                }
            }
            .top-picker-box:nth-child(2){
                text-align left
                width:215rpx;
                .picker-view{
                    view{
                        max-width:156rpx;
                    }
                }
            }
            .top-picker-box:nth-child(3){
                text-align right
                width:195rpx;
                .picker-view{
                    view{
                        flex:1;

                    }
                }
            }
        }
        .for-max-box{
            flex:1;
            overflow-y scroll
            .null-img{
                display block
                width:276rpx;
                height:321rpx;
                position absolute
                top:200rpx;
                left:274rpx;
            }
            .for-box{
                overflow hidden
                background #ffffff
                margin-bottom:20rpx;
                .title-box{
                    margin:20rpx 20rpx 0;
                    display flex
                    view:nth-child(1){
                        height:40rpx;
                        line-height:40rpx;
                        font-size:20rpx;
                        border-radius:10rpx;
                        padding:0 20rpx;
                        color:#fff;
                        margin-right:20rpx;
                    }
                    view:nth-child(2){
                        line-height:42rpx;
                        font-size:30rpx;
                        color:#333;
                        max-width:600rpx;
                        flex:1;
                    }
                    img{
                        width:12rpx;
                        height:20rpx;
                        margin-top:11rpx;
                    }
                    .colorA{
                        background:#aa2315;
                    }
                    .colorB{
                        background:#ff9b09;
                    }
                    .colorC{
                        background:#3ea3e9;
                    }
                    .colorD{
                        background:#3ea34c;
                    }

                }
                .address-box{
                    margin:20rpx 20rpx;
                    font-size:26rpx;
                    color:#999999;
                    span{
                        margin-right:60rpx;
                    }
                }
                .address-box-two{
                    display flex
                    margin:0 20rpx 20rpx 20rpx;
                    img{
                        width:28rpx;
                        height:30rpx;
                        margin-right:18rpx;
                    }
                    view{
                        line-height:30rpx;
                        font-size:24rpx;
                        color:#999999;
                    }
                }
                .text-box{
                    /*border-top:1rpx dashed #e0e0e0;*/
                    border-top:1rpx solid #E0E0E0;
                    padding:0 20rpx;
                    /*
                    overflow-x:scroll;
                    overflow-y:hidden;
                    white-space: nowrap;
                    */
                    .min-box{
                        display inline-block
                        /*padding:0 30rpx 0 10rpx;*/
                        width:355rpx;
                        .min-min-box{
                            display: flex
                            img{
                                width:30rpx;
                                height:27rpx;
                                margin-top:24rpx;
                                margin-right:10rpx;
                            }
                            view{
                                line-height:74rpx;
                                text-align center
                                font-size:28rpx;
                                color:#333;
                            }
                            .colorA{
                                color:#EE3A3A;
                            }
                        }
                    }
                }
                .sensor-max-box{
                    margin:0 20rpx;
                    border-top:1rpx solid #e0e0e0;
                    border-bottom:1rpx solid #e0e0e0;
                    display flex
                    .for-sensor-box{
                        flex:1;
                        display flex
                        font-size:28rpx;
                        line-height:94rpx;
                        view{
                            margin-left:20rpx;
                            font-size:25rpx;
                            line-height:94rpx;
                            color:#0183FA;
                        }
                    }
                }
                .button-max-box{
                    .button-box{
                        display flex
                        view:nth-child(1){
                            flex:1;
                            line-height:90rpx;
                            color:#333333;
                            margin-left:30rpx;
                            font-size:28rpx;
                        }
                        view:nth-child(2){
                            width:142rpx;
                            line-height:42rpx;
                            border:4rpx solid #0183FA;
                            border-radius:25rpx;
                            color: #0183FA;
                            font-size: 30rpx;
                            text-align center;
                            margin:20rpx 20rpx 20rpx 0;
                        }
                    }
                    .for-button-box{
                        display flex
                        view{
                            flex:1;
                            line-height:90rpx;
                            color:#333333;
                            margin-left:30rpx;
                            font-size:28rpx;
                        }
                        img{
                            height:50rpx;
                            width:100rpx;
                            margin:20rpx 20rpx 20rpx 0;
                        }
                        view:nth-child(2){
                            text-align right
                            color:#999;
                            margin-right:30rpx;
                        }
                    }
                }
            }
        }
    }
</style>