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>
        <view>
            <u-button v-if="showBtn" icon="eye" type="primary" size="small" loadingText="识别中"
                style="width: 100%; margin: 0" @click="getYjsb">一键识别</u-button>
        </view>
        <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 v-if="item.zcShow" style="margin-left:10px" name="photo" size="16"></u-icon>
                    </view>
                </u-cell>
            </u-list-item>
        </u-list>
        <!-- 一键识别List -->
        <view v-if="sbShow">
            <Recognition :recognitionData="recognitionData" @getRepport="getRepport"></Recognition>
        </view>
        <component :is="toComponent" :Ids="Ids" :checkNum="checkNum" :classType="classType" :isSensor="isSensor"
            :deviceID="deviceID" :deviceName="deviceName" :saveImg="saveImg" :checkState="checkState" :sbData="sbData"
            :urlData="urlData" @getBackAddress="getBackAddress" @clearImg="clearImg">
        </component>
    </view>
</template>

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

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

    data() {
        return {
            saveImg: '',
            // 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)",
            sbShow: false,
            sbData: [],
            urlData: '',
            showBtn: true,
        }
    },
    computed: {
        searchTime: function () {
            return uni.getStorageSync('searchTime')
        },
        //一键识别列表
        recognitionData: function () {
            let list = []
            this.indexList.forEach(el => {
                if (uni.getStorageSync(el.deviceId)) {
                    el.img = uni.getStorageSync(el.deviceId)
                    el.status = ''
                    list.push(el)
                }
            })
            return list
        }

    },
    mounted() {
        this.taskDetailsLists()
    },
    methods: {
        //点击返回上一级
        handlerToggle() {
            this.$emit('getBackBoard')
        },
        //暂存图片预览
        // getView(item) {
        //     let imgList = []
        //     imgList.push(uni.getStorageSync(item.deviceId))
        //     // 预览图片
        //     uni.previewImage({
        //         urls: imgList,
        //         current: 0
        //     });
        // },
        //清除暂存图片
        clearImg(data) {
            if (data) {
                this.saveImg = ''
            }
        },

        //一键识别
        getYjsb() {
            let that = this
            that.isShow = false
            that.sbShow = true
            that.showBtn = false
            if (that.recognitionData.length != 0) {
                uni.showLoading({
                    title: '批量识别中...',
                    mask: true
                });
            }
        },
        //批量识别后跳转到填报页面
        getRepport(param) {
            let that = this
            that.sbShow = false
            that.showBtn = false
            console.log(param, 'param------')
            that.Ids = param.id
            that.checkNum = param.checkNum
            that.classType = param.classType_dictText
            that.checkState = param.checkState
            that.isSensor = param.isSensor
            that.deviceID = param.deviceId
            that.deviceName = param.deviceName
            that.sbData = param.sbList
            that.urlData = param.img
            that.toComponent = 'gasImgIdentify'
        },
        getBoradAddress(item, index) {
            let that = this
            that.activeIndex = index
            that.isShow = false
            that.showBtn = false
            if (item.checkState == '0') {
                that.Ids = item.id
                that.isSensor = item.isSensor
            }
            that.checkNum = item.checkNum
            that.classType = item.classType_dictText
            that.checkState = item.checkState
            that.deviceID = item.deviceId
            that.deviceName = item.deviceName
            that.saveImg = uni.getStorageSync(item.deviceId)
            that.toComponent = 'gasImgIdentify'
        },
        getBackAddress() {
            this.isShow = true
            this.showBtn = true
            this.sbShow = false
            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 || []
                            if (that.indexList.length != 0) {
                                that.indexList.forEach(el => {
                                    if (uni.getStorageSync(el.deviceId)) {
                                        el.zcShow = true
                                    } else {
                                        el.zcShow = false
                                    }
                                })
                            }
                        } 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;
    padding: 0px 10px;
    box-sizing: border-box;

}


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