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="666" :scrollTop="topH" v-if="isShow">
            <u-list-item v-for="(item, index) in indexList" :key="index">
                <u-cell icon="share" >
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">{{ `${item.deviceName} (${item.checkNum == '1' ? '第一次' :
                            item.checkNum == '2' ? '第二次' : ''})` }}</text>
                        <!-- <u-tag text="查看" plain size="mini" type="warning">
                        </u-tag> -->
                    </view>
                    <view slot="value" style="display: flex;align-items: center;">
                        <u-icon :name="item.checkState == '0' ? 'plus' : 'checkmark'" size="16" @click="getBoradAddress(item, index)"></u-icon>
                        <u-icon style="margin-left:10px" name="photo" size="16" @click="getView(item)"></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 {
            imgList: [],
            topH: 0,
            activeIndex: 0,
            Ids: '',
            checkNum: '',//巡检次数
            classType: '',
            isSensor: '',
            deviceID: '',
            deviceName: '',
            checkState: '',
            isShow: true,
            toComponent: '',
            indexList: [],
            gasTitle: '任务明细',//标题
            backPic0: "url(/static/topnavbar0.png)",
            backPic: "url(../../static/topnavbar.png)",
        }
    },
    computed: {
        searchTime: function () {
            return uni.getStorageSync('searchTime')
        }
    },
    mounted() {
        this.taskDetailsLists()
    },
    methods: {
        //点击返回上一级
        handlerToggle() {
            this.$emit('getBackBoard')
        },
        //暂存图片预览
        getView(item) {
            this.imgList = []
            this.imgList.push(uni.getStorageSync(item.deviceId))
            // 预览图片
            uni.previewImage({
                urls: this.imgList,
                current: 0
            });
        },

        getBoradAddress(item, index) {
            let that = this
            that.activeIndex = index
            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.topH = 39 * this.activeIndex
            this.taskDetailsLists()
        },

        taskDetailsLists() {
            let that = this
            new Promise((resolve, reject) => {
                api
                    .taskDetailsList({ pageNo: 1, pageSize: 100, taskId: that.taskId, taskTime: that.searchTime })
                    .then((response) => {
                        if (response.data.code == 200) {
                            console.log(response, '地点列表---')
                            that.indexList = response.data.result.records || []
                            // that.indexList = [
                            //     { deviceName: '测试地址1' },
                            //     { deviceName: '测试地址2' },
                            //     { deviceName: '测试地址3' },
                            //     { deviceName: '测试地址4' },
                            //     { deviceName: '测试地址5' },
                            //     { deviceName: '测试地址6' },
                            //     { deviceName: '测试地址7' },
                            //     { deviceName: '测试地址8' },
                            //     { deviceName: '测试地址9' },
                            //     { deviceName: '测试地址10' },
                            //     { deviceName: '测试地址11' },
                            //     { deviceName: '测试地址12' },
                            //     { deviceName: '测试地址13' },
                            //     { deviceName: '测试地址14' },
                            //     { deviceName: '测试地址15' },
                            //     { deviceName: '测试地址16' },
                            //     { deviceName: '测试地址17' },
                            //     { deviceName: '测试地址18' },
                            //     { deviceName: '测试地址19' },
                            //     { deviceName: '测试地址20' },
                            //     { deviceName: '测试地址21' },
                            //     { deviceName: '测试地址22' },
                            //     { deviceName: '测试地址23' },
                            //     { deviceName: '测试地址24' },
                            //     { deviceName: '测试地址25' },
                            //     { deviceName: '测试地址26' },
                            //     { deviceName: '测试地址27' },
                            //     { deviceName: '测试地址28' },
                            //     { deviceName: '测试地址29' },
                            //     { deviceName: '测试地址30' },
                            // ]
                        } 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>