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

<template>
    <view class="dateReport">
        <!-- {{ height }} -->

        <view class="pd20">
            <uni-segmented-control
                :current="curSub"
                class="subsection"
                active-color="#376cf3"
                :values="subsectionList"
                @clickItem="sectionChange"
            />
        </view>
        <view class="filterCriteria">
            <!-- 筛选条件 -->
            <Cn-filterCriteria @select="select" :singleChoice="true" :showDatetime="curSub == 0"> </Cn-filterCriteria>
        </view>

        <!-- 卡片 -->
        <scroll-view
            scroll-y="true"
            @refresherrefresh="refresherrefresh"
            :refresher-triggered="triggered"
            refresher-enabled="true"
            class="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">
                        <!-- 动态图标：根据类型切换 -->
                        <!-- <uni-icons
                            custom-prefix="iconfont"
                            type="icon-kouanjiancedian"
                            size="40"
                            color="#E6A23C"
                        ></uni-icons> -->
                         <Cn-icon-transient :name="`报告`" />
                        <view class="badge1" v-if="item.isRead == 0"> </view>
                    </view>
                    <view class="event-info">
                        <view class="event-title">
                            <text class="event-id">{{ item.lineName }}</text>
                            <!-- <view class="event-tags"
                                >{{ selectValue.report == 0 ? item.startTime : item.startTime + '至' + item.endTime }}
                            </view> -->
                        </view>
                        <view class="event-desc">
                            <text
                                >统计时间：{{
                                    curSub == 0 ? item.startTime : item.startTime + ' 至 ' + item.endTime
                                }}</text
                            >
                        </view>
                    </view>
                    <view class="event-action" v-if="curSub == 0 ? monthFlag : item.endTime != thisMonth01">
                        <view class="iconText" @click="download(item)"
                            ><uni-icons type="arrow-down" color="#fff" size="16"></uni-icons>
                        </view>
                    </view>
                </view>
                <!-- 详情区域 -->
                <view class="event-detail textBox" @touchmove.stop>
                    <text v-if="curSub == 0 ? monthFlag : item.endTime != thisMonth01">{{
                        item.overLimitDesc == '' ? '该监测点暂无指标越限' : item.overLimitDesc
                    }}</text>
                    <text v-else>数据未生成，暂不支持下载</text>
                </view>
                <!-- <view class="downloadReport" @click="download">
                    <uni-icons type="download" size="16" color="#376cf3"></uni-icons>下载报告
                </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: 20%"></Cn-empty>
        </scroll-view>
    </view>
</template>
<script>
import list from '@/common/js/list'
import { downloadHarmonicReport } from '@/common/api/report.js'

export default {
    components: {},
    props: {
        indexList: {
            type: Array,
            default: () => [],
        },
        total: {
            type: Number,
            default: 0,
        },
        navHeight: {
            type: Number,
            default: 0,
        },
    },
    mixins: [list],
    data() {
        return {
            status: 'noMore',
            curSub: 0,
            subsectionList: ['周报', '月报'],
            thisSelectValue: {},
            triggered: true,
            height: 0,
            thisMonth01: '',
            monthFlag: true,
        }
    },
    created() {},
    mounted() {
        this.thisMonth01 = this.$util.getToday().slice(0, -3) + '-01'
        this.monthFlag = this.$util.getToday() != this.$util.getToday().slice(0, -3) + '-01'

        // this.setHeight()
    },
    methods: {
        setHeight() {
            uni.createSelectorQuery()
                .select('.filterCriteria')
                .boundingClientRect((rect) => {
                    //
                    // #ifdef H5
                    this.height = rect?.height + 140 || 0
                    // #endif
                    // #ifdef APP-PLUS
                    this.height = rect?.height + 70 || 0
                    // #endif
                })
                .exec()
        },
        sectionChange(index) {
            this.curSub = index.currentIndex
            this.init()
        },
        init() {
            if (this.selectValue.lineId == '') return

            this.store = this.DataSource('/cs-report-boot/csAppReport/reportList')
            // this.store.params.pageSize = 10000
            this.store.params.timeType = this.curSub //this.selectValue.report
            this.store.params.engineerId = this.selectValue.engineeringId
            this.store.params.projectId = this.selectValue.projectId
            this.store.params.devId = this.selectValue.deviceId
            this.store.params.lineId = this.selectValue.lineId
            if (this.curSub == 0) {
                this.store.params.time = this.selectValue.date
            } else {
                this.store.params.time = this.selectValue.range + '-01'
            }
            // this.store.params.startTime = this.selectValue.range[0]
            // this.store.params.endTime = this.selectValue.range[1]
            this.store.loadedCallback = () => {}
            this.store.reload()
        },

        select(value) {
            this.selectValue = value
            setTimeout(() => {
                this.setHeight()
            }, 200)
            this.init()
        },
        // 下载
        download(item) {
            uni.showLoading({
                title: '下载中,请稍等...',
                mask: true,
            })
            downloadHarmonicReport({
                devId: this.selectValue.deviceId,
                endTime: item.endTime,
                engineerId: this.selectValue.engineeringId,
                lineId: this.selectValue.lineId,
                list: [],
                projectId: this.selectValue.projectId,
                startTime: item.startTime,
                time: '',
                timeType: this.selectValue.report,
            })
                .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,
                    })
                })
        },
        // 下拉
        refresherrefresh() {
            this.triggered = true
            uni.startPullDownRefresh()
            setTimeout(() => {
                this.triggered = false
            }, 500)
        },
    },

    computed: {},

    watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.event-title {
    justify-content: space-between;
}
.event-tags {
    display: flex;
    font-size: 27rpx !important ;
    line-height: 50rpx;
}

.event-detail {
    font-size: 25rpx !important;
    // display: grid;
    // grid-template-columns: 1fr 1fr;
}
.downloadReport {
    width: 100%;
    background: #376cf320;
    height: 60rpx;
    line-height: 60rpx;
    color: #376cf3;
    font-weight: 600;
    border-radius: 15rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
}
.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;
    }
}
/deep/ .uni-scroll-view-refresher {
    display: none;
}
.iconText {
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background-color: $uni-theme-color;
    text-align: center;
    line-height: 40rpx;
}
.segmented-control {
    flex: 1;
    margin-right: 24rpx;
    height: 60rpx;
}
/* 列表容器 */
.event-list {
    /* 头部：图标 + 信息 + 操作 */
    .event-header {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
    }

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

    .event-tags {
        font-size: 24rpx;
    }
}
.textBox {
    // @touchmove.stop
    max-height: 110rpx;
    overflow-y: auto;
}
</style>