app-govern/pages/index/comp/transient.vue

<template>
    <view class="dateReport">
        <view class="pd20">
            <uni-segmented-control :current="curSub" class="subsection" active-color="#376cf3" :values="subsectionList"
                @clickItem="sectionChange" />
        </view>

        <!-- 申请报告 -->
        <view v-show="curSub == 0">
            <!-- apply -->
            <Apply ref="applyRef" :navHeight="navHeight" />
        </view>

        <!-- 申请记录 -->
        <view v-if="curSub == 1">
            <view class="filterCriteria">
                <!-- 筛选条件 -->
                <Cn-filterCriteria @select="select" :showQianTree="false"> </Cn-filterCriteria>
            </view>
            <scroll-view scroll-y="true" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
                :refresher-triggered="triggered" refresher-enabled="true" class="record event-list mt20"
                :style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }">
                <uni-card class="event-item" :class="item.type" v-for="(item, index) in store.data" :key="index">
                    <!-- 头部：图标 + 信息 + 操作 -->
                    <view class="event-header">
                        <view class="event-icon">
                            <!-- :style="{ backgroundColor: item.isComplete == 1 ? '#10b98120' : '#FF000020' }" -->
                            <!-- 动态图标：根据类型切换 -->
                            <!-- <uni-icons
                                custom-prefix="iconfont"
                                type="icon-baogaoguanli"
                                size="40"
                                :color="item.isComplete == 1 ? '#10b981' : '#FF0000'"
                            ></uni-icons> -->
                            <Cn-icon-transient :name="`报告`" />
                        </view>
                        <view class="event-info">
                            <view class="event-title">
                                <text class="event-id">{{ item.lineName }}</text>
                            </view>
                            <view class="event-desc">
                                <text>工程名称：{{ item.engineeringName }}</text>
                                <text>项目名称：{{ item.projectName }}</text>
                                <text>设备名称：{{ item.deviceName }}</text>
                                <!-- <text>申请时间：{{ item.time }}</text>
                                <text>事件数：{{ item.eventNums }}</text> -->
                            </view>
                        </view>
                        <view class="event-action">
                            <view class="iconText boxClick" v-if="item.isComplete == 1" @click="download(item)">
                                <uni-icons type="arrow-down" color="#fff" size="16"></uni-icons>
                            </view>
                            <view class="nav-menu nav-menu-btn boxClick"
                                v-else-if="userInfo.authorities === 'operation_manager'" @click="generate(item)">生成报告
                            </view>
                        </view>
                    </view>
                    <!-- 详情区域 -->
                    <view class="event-detail">
                        <!-- <view class="device-body"> -->
                        <view class="device-body-item">
                            <text>申请人：</text>
                            <text>{{ item.applyUser }}</text>
                        </view>
                        <view class="device-body-item">
                            <text>报告状态：</text>
                            <text :style="{ color: item.isComplete == 1 ? '#10b981' : '#FF0000' }">{{
                                item.isComplete == 1 ? '已完成' : '未完成'
                                }}</text>
                        </view>
                        <view class="device-body-item">
                            <text>申请时间：</text>
                            <text>{{ item.time }}</text>
                        </view>
                        <view class="device-body-item">
                            <text>暂降事件：</text>
                            <text>{{ item.eventNums }}次</text>
                        </view>


                        <!-- <view class="device-body-item">
                            <text>申请时间：</text>
                            <text>{{ item.time }}</text>
                        </view> -->
                    </view>

                    <!-- </view> -->
                </uni-card>
                <uni-load-more v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
                    :status="store.status"></uni-load-more>
                <Cn-empty v-else style="top: 30%"></Cn-empty>
            </scroll-view>
        </view>
    </view>
</template>
<script>
import Apply from './apply.vue'
import list from '@/common/js/list'
import { createEventReport, downloadEventReport } from '@/common/api/report.js'
export default {
    components: { Apply },
    props: {
        indexList: {
            type: Array,
            default: () => [],
        },
        total: {
            type: Number,
            default: 0,
        },
        // status: {
        //     type: String,
        //     default: 'more',
        // },
        navHeight: {
            type: Number,
            default: 0,
        },
    },
    mixins: [list],
    data() {
        return {
            value: ['0'],
            content: 123,
            curSub: 0,
            subsectionList: ['申请报告', '申请记录'],
            form: {
                type: 0,
                lindId: '',
            },
            triggered: true,
            userInfo: {},
            height: 0,
            selectValue: {},
        }
    },
    created() { },
    mounted() {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
    },
    computed: {},
    methods: {
        setHeight() {
            uni.createSelectorQuery()
                .select('.filterCriteria')
                .boundingClientRect((rect) => {
                    //
                    // #ifdef H5
                    this.height = rect?.height + 180 || 0
                    // #endif
                    // #ifdef APP-PLUS
                    this.height = rect?.height + 110 || 0
                    // #endif
                })
                .exec()
        },
        init() {
            this.store = this.DataSource('/cs-report-boot/csAppReport/getApplicationReport')
            this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
            this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
            this.store.loadedCallback = () => {
                this.setHeight()
            }
            this.store.reload()
        },
        async select(val) {
            this.selectValue = val
            await this.init()
        },

        sectionChange(index) {
            this.curSub = index.currentIndex
        },
        // 生成报告
        generate(item) {
            uni.showLoading({
                title: '生成中,请稍等...',
                mask: true,
            })
            createEventReport({
                id: item.eventId,
            }).then((res) => {
                uni.showToast({
                    icon: 'success',
                    mask: true,
                    title: '生成事件报告成功!',
                    duration: 1000,
                })
                this.store.reload()
            })
        },
        // 下载报告
        download(item) {
            uni.showLoading({
                title: '下载中,请稍等...',
                mask: true,
            })
            downloadEventReport({
                id: item.eventId,
            })
                .then((res) => {
                    // 下载文件资源到本地
                    uni.downloadFile({
                        url: res.data, // 后端返回的线上文件路径
                        success: function (res) {
                            if (res.statusCode === 200) {
                                // 文件到本地
                                uni.saveFile({
                                    tempFilePath: res.tempFilePath, //临时路径
                                    success: function (data) {
                                        var savedFilePath = data.savedFilePath
                                        // 在app端执行
                                        // #ifdef APP-PLUS
                                        let osname = plus.os.name
                                        // 如果是安卓的话弹出提示

                                        uni.showToast({
                                            icon: 'success',
                                            mask: true,
                                            title: '下载成功!',
                                            duration: 1000,
                                        })

                                        // #endif
                                        //ios手机直接打开文件，手动存储文件到手机，Android手机从根目录创建文件夹，保存文件并改名
                                        setTimeout(() => {
                                            //打开文档查看
                                            uni.openDocument({
                                                filePath: data.savedFilePath,
                                                success: function (ress) {
                                                    console.log('成功打开文件')
                                                },
                                                fail() {
                                                    console.log('打开文件失败')
                                                },
                                            })
                                        }, 500)
                                    },
                                })
                                console.log('下载成功')
                            } else {
                                uni.showToast({
                                    icon: 'none',
                                    mask: true,
                                    title: '下载失败!',
                                    duration: 1000,
                                })
                            }
                        },
                        fail: function (res) { },
                    })
                })
                .catch((err) => {
                    uni.showToast({
                        icon: 'none',
                        mask: true,
                        title: err.message,
                        duration: 1000,
                    })
                })
        },
        // 刷新
        reload() {
            switch (this.curSub) {
                case 0:
                    this.$refs.applyRef.store.reload()
                    break
                case 1:
                    this.store && this.store.reload()
                    break
            }
        },
        // 下拉
        refresherrefresh() {
            this.triggered = true
            uni.startPullDownRefresh()
            setTimeout(() => {
                this.triggered = false
            }, 500)
        },
        // 上拉
        scrolltolower() {
            if (this.store.status != 'noMore') {
                this.store.next && this.store.next()
            }
        },
    },
    watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';

.event-detail {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
}

// /deep/ .record {
//     .uni-card__content {
//         padding: 55rpx 20rpx 20rpx !important;
//     }
// }
.filterCriteria {
    .nav {
        background-color: #fff;
    }

    .choose1 {
        background-color: #fff;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;

        /deep/ .uni-checkbox-input {
            width: 30rpx;
            height: 30rpx;
        }

        font-size: 26rpx;
    }
}

// .device-body {
//     padding: 10rpx 20rpx 20rpx;

.device-body-item {
    display: flex;
    // justify-content: space-between;
    font-size: 28rpx;
    color: #666666;
    line-height: 1.5;

    
}

// }
.iconText {
    display: flex;
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background-color: $uni-theme-color;
    justify-content: center;
    align-items: center;
}

.nav-menu {
    height: 40rpx;
    padding: 6rpx 20rpx;
    font-size: 24rpx;
    border-radius: 8rpx;
    line-height: 40rpx;
    background: #ebeaec;
    color: #666;

    &-active {
        background: #dfe5f7;
        color: $uni-theme-color;
    }

    &-btn {
        background: $uni-theme-color;
        color: #fff;
    }
}

.event-list {

    /* 图标区域（按类型区分背景色） */
    .event-icon {
        background-color: #376cf320;
    }
}

.segmented-control {
    flex: 1;
    margin-right: 24rpx;
    height: 60rpx;
}

/deep/ .uni-scroll-view-refresher {
    display: none;
}
</style>