Vent-App/pages/gasreport/gasreport.vue

<template>
    <view class="gas-report" name="gasreport">
        <u-navbar
      :bgStatusImage="backPic0"
      :bgImage="backPic" :title="gasTitle" :safeAreaInsetTop="true" leftIcon="list" @leftClick="handlerToggle"> </u-navbar>
        <view class="gas-content">
            <component :is="loadComponent" :firstAddress="firstAddress" :secondAddress="secondAddress"
                :firstTj="firstTj" :secondTj="secondTj"></component>
        </view>
        <!-- 导航弹出层 -->
        <view class="popup-modal">
            <popupModal :showModel="showModel" @handlerClick="handlerClick"></popupModal>
        </view>
    </view>
</template>

<script>
import api from "@/api/api";
import popupModal from './components/popupModal.vue'
import gasFill from './components/gasFill.vue'
import gasTask from './components/gasTask.vue'
import gasRecordCard from './components/gasRecordCard.vue'
import gasImgIdentify from './components/gasImgIdentify.vue'
export default {
    name: 'gasreport',
    components: {
        popupModal,
        gasFill,
        gasTask,
        gasRecordCard,
        gasImgIdentify
    },
    data() {
        return {
            backPic0: "url(/static/topnavbar0.png)",
            backPic: "url(../../static/topnavbar.png)",
            gasTitle: '瓦斯日报',//标题
            showModel: false,//是否打开弹出层
            // loadComponent: 'gasFill',//默认加载组件
            loadComponent: 'gasImgIdentify',//默认加载组件
            taskTj: {},
            firstAddress: '',//一次线路
            secondAddress: '',//二次线路
            firstTj: [],//一次统计
            secondTj: [],//二次统计
        };
    },
    computed: {

    },
    mounted() {
        this.queryNowGasInfoByUser()
    },
    methods: {

        //切换导航
        handlerToggle() {
            this.showModel = !this.showModel
        },
        //导航栏点击
        handlerClick(data) {
            let that = this
            switch (data) {
                case '瓦斯巡检记录卡管理':
                    that.loadComponent = 'gasRecordCard'
                    that.gasTitle = '瓦斯巡检记录卡管理'
                    that.showModel = false
                    break;
                case '图片识别':
                    that.loadComponent = 'gasImgIdentify'
                    that.gasTitle = '图片识别'
                    that.showModel = false
                    break;
                case '早班':
                    that.loadComponent = 'gasTask'
                    that.gasTitle = '早班巡检任务'
                    that.firstAddress = that.taskTj.addressEarly1
                    that.secondAddress = that.taskTj.addressEarly2
                    that.firstTj = that.taskTj.arrayEarly1
                    that.secondTj = that.taskTj.arrayEarly2
                    that.showModel = false
                    break;
                case '中班':
                    that.loadComponent = 'gasTask'
                    that.gasTitle = '中班巡检任务'
                    that.firstAddress = that.taskTj.addressNoon1
                    that.secondAddress = that.taskTj.addressNoon2
                    that.firstTj = that.taskTj.arrayNoon1
                    that.secondTj = that.taskTj.arrayNoon2
                    that.showModel = false
                    break;
                case '夜班':
                    that.loadComponent = 'gasTask'
                    that.gasTitle = '夜班巡检任务'
                    that.firstAddress = that.taskTj.addressNight1
                    that.secondAddress = that.taskTj.addressNight2
                    that.firstTj = that.taskTj.arrayNight1
                    that.secondTj = that.taskTj.arrayNight2
                    that.showModel = false
                    break;
                case '瓦斯巡检填报':
                    that.loadComponent = 'gasFill'
                    that.gasTitle = '瓦斯巡检填报'
                    that.showModel = false
                    break;
            }
        },
        //获取card列表
        queryNowGasInfoByUser() {
            let that = this
            new Promise((resolve, reject) => {
                api
                    .queryNowGasInfoByUser({})
                    .then((response) => {
                        if (response.data.code == 200) {
                            that.taskTj=response.data.result
                        } else {
                            reject(response);
                        }
                    })
                    .catch((error) => {
                        console.log("catch===>response", response);
                        reject(error);
                    });
            });
        },

    },

};
</script>

<style lang="scss" scoped>
.gas-report {
    position: relative;
    box-sizing: border-box;

    .gas-content {
        height: 708px;
        margin-top: 85px;
        overflow-y: auto;

        .popup-modal {
            position: absolute;
            top: 45px;
            left: 0;
            height: 748px;
            width: 240px;
        }


    }
}
</style>