Vent-App/pages/gasreport/components/taskBoardAddress.vue

<template>
    <view class="taskBoardAddress">
        <u-navbar :bgStatusImage="backPic0" :bgImage="backPic" :title="gasTitle" :safeAreaInsetTop="true"
        leftIcon="arrow-left" @leftClick="handlerToggle"> </u-navbar>
        <u-list :height="708" v-if="isShow">
            <u-list-item v-for="(item, index) in indexList" :key="index">
                <u-cell icon="share" @click="getBoradAddress(item)">
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">{{ item.deviceName }}</text>
                        <!-- <u-tag text="查看" plain size="mini" type="warning">
                        </u-tag> -->
                    </view>
                    <view slot="value">
                        <u-icon :name="item.checkState == '0' ? 'plus' : 'checkmark'" size="16"></u-icon>
                    </view>
                </u-cell>
            </u-list-item>
        </u-list>
        <component :is="toComponent" :Ids="Ids" :checkNum="checkNum" :classType="classType" :isSensor="isSensor"
            :deviceID="deviceID" :deviceName="deviceName" :checkState="checkState" @getBackAddress="getBackAddress" ></component>
    </view>
</template>

<script>
import api from "@/api/api";
import gasImgIdentify from './gasImgIdentify.vue'

export default {
    name: 'taskBoardAddress',
    components: { gasImgIdentify },
    props: {
        taskId: {
            type: String,
            default: ''
        }
    },

    data() {
        return {
            Ids: '',
            checkNum: '',//巡检次数
            classType: '',
            isSensor: '',
            deviceID: '',
            deviceName: '',
            checkState:'',
            isShow: true,
            toComponent: '',
            indexList: [],
            gasTitle: '任务明细',//标题
            backPic0: "url(/static/topnavbar0.png)",
            backPic: "url(../../static/topnavbar.png)",
        }
    },
    computed: {},
    mounted() {
        this.taskDetailsLists()
    },
    methods: {
        //点击返回上一级
        handlerToggle(){
            this.$emit('getBackBoard')
        },
        getBoradAddress(item) {
            let that = this
            if (item.checkState == '0') {
                that.isShow = false
                that.Ids = item.id
                that.checkNum = item.checkNum
                that.classType = item.classType_dictText
                that.checkState=item.checkState
                that.isSensor = item.isSensor
                that.deviceID = item.deviceId
                that.deviceName = item.deviceName
                that.toComponent = 'gasImgIdentify'
            } else {
                that.isShow = false
                that.checkState=item.checkState
                that.checkNum = item.checkNum
                that.deviceID = item.deviceId
                that.classType = item.classType_dictText
                that.toComponent = 'gasImgIdentify'
            }

        },
        getBackAddress() {
            this.isShow = true
            this.toComponent = ''
            this.taskDetailsLists()
        },
       
        taskDetailsLists() {
            let that = this
            new Promise((resolve, reject) => {
                api
                    .taskDetailsList({ pageNo: 1, pageSize: 100, taskId: that.taskId })
                    .then((response) => {
                        if (response.data.code == 200) {
                            console.log(response, '地点列表---')
                            that.indexList = response.data.result.records || []
                        } else {
                            reject(response);
                        }
                    })
                    .catch((error) => {
                        console.log("catch===>response", response);
                        reject(error);
                    });
            });
        }
    }

};
</script>

<style lang="scss" scoped>
.taskBoardAddress {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;

}

::v-deep .u-slot-title {
    display: flex;
}
</style>