smart-app/pages/qualityInspection_fj/qualityInfo.vue

<template>
    <scroll-view scroll-y class="nav hc-quality-info-view" style="height: 100vh;">
        <cu-custom bgColor="bg-blue1" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">记录详情</block>
            <block slot="right">
                <view class="custom-picker-view" v-if="info.status == 2">
                    <picker @change="bindRecheckChange" :value="recheckIndex" :range="recheckData">
                        <view class="uni-input">复核</view>
                    </picker>
                </view>
            </block>
        </cu-custom>
        <view class="page-bg-bar"/>
        <view class="hc-content-zindex quality-info">
            <view class="cu-bar solid-bottom">
                <view class="action">
                    <text class="cuIcon-titles text-blue"/> 基础信息
                </view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 检查日期：</view>
                <view class="content">{{info.startDate}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 工程名称：</view>
                <view class="content">{{info.unitName}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 左/右幅（洞)：</view>
                <view class="content" v-if="info.aroundPicture == 1">左</view>
                <view class="content" v-if="info.aroundPicture == 2">右</view>
                <view class="content" v-if="info.aroundPicture == 3">全部</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 分部工程类别：</view>
                <view class="content">{{info.segmentName}}</view>
            </view>

            <template v-if="info.engineeringType == 2">
                <view class="hc-info-list-item">
                    <view class="title">◆ 分项工程名称：</view>
                    <view class="content">{{info.subitemName}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 缺陷所处位置：</view>
                    <view class="content">{{info.startStopStake}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 构件编号：</view>
                    <view class="content">{{info.build_number}}</view>
                </view>
            </template>

            <template v-if="info.engineeringType == 1">
                <view class="hc-info-list-item">
                    <view class="title">◆ 分项工程桩号：</view>
                    <view class="content">{{info.subitemStake}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 缺陷起点桩号：</view>
                    <view class="content">{{info.startStopStake}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 横坐标：</view>
                    <view class="content">{{info.abscissa_1}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 缺陷止点桩号：</view>
                    <view class="content">{{info.stop_stake}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 横坐标：</view>
                    <view class="content">{{info.abscissa_2}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 长(m)：</view>
                    <view class="content">{{info.data_length}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 宽(m)：</view>
                    <view class="content">{{info.data_width}}</view>
                </view>
                <view class="hc-info-list-item">
                    <view class="title">◆ 面积：</view>
                    <view class="content">{{info.data_area}}</view>
                </view>
            </template>

            <view class="hc-info-list-item">
                <view class="title">◆ 病害类型：</view>
                <view class="content">{{getDiseaseType()}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 照片编号：</view>
                <view class="content">{{info.photoNo}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 是否限制性缺陷：</view>
                <view class="content" v-if="info.defectType==1">限制性缺陷</view>
                <view class="content" v-if="info.defectType==2">非限制性缺陷</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 严重程度：</view>
                <view class="content" v-if="info.severity==1">严重</view>
                <view class="content" v-if="info.severity==2">轻微</view>
                <view class="content" v-if="info.severity==0">一般</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 病害描述：</view>
                <view class="content">{{info.hiddenDanger}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 施工方检查人：</view>
                <view class="content">{{info.checkName}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 监理方检查人：</view>
                <view class="content">{{info.superCheckName}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 整改人：</view>
                <view class="content">{{info.userName}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 工程部位：</view>
                <view class="content">{{info.relation}}</view>
            </view>
            <view class="hc-info-list-item">
                <view class="title">◆ 备注：</view>
                <view class="content">{{info.remark}}</view>
            </view>

            <view class="cu-bar solid-bottom margin-tb">
                <view class="action">
                    <text class="cuIcon-titles text-blue"/> 照片
                </view>
            </view>

            <view class="hc-form-img-box">
                <swiper v-if="info.images.length > 0" class="screen-swiper square-dot" indicator-dots circular :autoplay="false">
                    <swiper-item v-for="(item, index) in info.images" :key="index" @click="previewPicture(index)">
                        <image :src="item" mode="aspectFill"/>
                    </swiper-item>
                </swiper>
                <view v-else>暂无数据</view>
            </view>

            <view class="cu-bar solid-bottom margin-tb">
                <view class="action">
                    <text class="cuIcon-titles text-blue"/> 附件
                </view>
            </view>
            <view class="hc-file-list-box" v-if="info.fileList.length > 0">
                <view class="file-item" v-for="(item, index) in info.fileList" :key="index" @click="previewFile(item)">{{item.name}}</view>
            </view>
            <view class="hc-file-list-box" v-else>暂无数据</view>
        </view>
    </scroll-view>
</template>

<script>
export default {
    data() {
        return {
            dataId: '',
            info: {
                images: [],
                fileList: []
            },
            recheckIndex: 0,
            recheckData: ['确认已整改', '未整改'],
            typeData: [
                {value: 1, text: '隧道工程'},
                {value: 2, text: '桥梁工程'}
            ],
            diseaseTypeData: [
                {value: 1, text: '蜂窝麻面', data: '面积小于该面总面积0.5%，深度小于10mm'},
                {value: 2, text: '错台', data: '加宽带端头错台'},
                {value: 3, text: '洞门端墙、挡土墙表面裂缝', data: '洞门挡土墙存在裂缝，裂缝宽度大于0.2mm'},
                {value: 4, text: '裂缝', data: '砼表面裂缝，环向/纵向'},
                {value: 5, text: '渗漏水', data: '洞内存在渗漏点'},
            ],
            diseaseTypeData1: [
                {value: 1, text: '蜂窝麻面', data: '面积为    m2,蜂窝总面积为所在面面积的      %。'},
                {value: 2, text: '裂缝', data: '裂缝长度L=    m,最大宽度δ=    mm，裂缝方向为         向。'},
                {value: 3, text: '模板接缝高差', data: '模板接缝处高差为    mm。'},
                {value: 4, text: '漏浆', data: '混凝土表面有    处漏浆现象。'},
                {value: 5, text: '空洞', data: '面积为    m2，深度为    mm。'},
                {value: 6, text: '钢筋外露', data: '面积为    m2。'},
                {value: 7, text: '建筑垃圾', data: '有    处未清除处理。'},
                {value: 8, text: '预埋件', data: '有    处未清除处理。'},
                {value: 9, text: '预制构件安装', data: '不平整度为    mm。'},
                {value: 10, text: '梁段间接缝', data: '高差为   mm。'},
                {value: 11, text: '梁段间色泽', data: ' 处存在差异。'},
                {value: 12, text: '梁段间错台', data: '长度为    m，高差为     mm。'},
                {value: 13, text: '主体钢结构外露涂装', data: '破损面积为     m2。'},
                {value: 14, text: '钢缆防蚀层', data: '破损面积为     m2。'},
                {value: 15, text: '湿接缝渗漏水', data: '长度为     m。'},
                {value: 16, text: '疏松', data: '面积为   m2，占所在面面积的    %，深度为   mm。'},
                {value: 17, text: '夹渣', data: '面积为   mm2。'},
                {value: 18, text: '掉皮、起砂', data: '面积为   mm2，占所在面面积的   %。'},
                {value: 19, text: '锥坡沉陷', data: '长度为   m，深度为   mm。'},
                {value: 20, text: '护坡沉陷', data: '长度为   m，深度为   mm。'},
                {value: 21, text: '内外轮廓线', data: '处不顺滑清晰。'},
                {value: 22, text: '栏杆、护栏', data: '处不牢固，   处不直顺。'},
                {value: 23, text: '沥青混凝土表面', data: '不平整密实，面积为   m2。'},
                {value: 24, text: '沥青混凝土泛油', data: '面积为    m2，占受检面面积的    %。'},
                {value: 25, text: '沥青混凝土松散', data: '面积为    m2，占受检面面积的    %。'},
                {value: 26, text: '沥青混凝土裂缝', data: '长度为    m，占受检面面积的    %。'},
                {value: 27, text: '沥青混凝土离析', data: '面积为    m2，占受检面面积的    %。'},
                {value: 28, text: '伸缩缝堵塞', data: '有   处堵塞。'},
                {value: 29, text: '伸缩缝变形', data: '有   处，长度为   m。'},
                {value: 30, text: '伸缩缝开裂', data: '有   处，长度为   m。'},
                {value: 31, text: '桥头跳车', data: '桥面与伸缩缝高差为    mm。'},
                {value: 32, text: '桥面排水不良', data: '有   处，面积为   m2。'},
                {value: 33, text: '支座安装偏歪', data: '横桥向左侧距梁中心     mm，横桥向右侧距梁中心   mm。'},
                {value: 34, text: '支座不均匀受力', data: '侧存在不均匀受力。'},
                {value: 35, text: '支座脱空', data: '面积为  /  ，高度为    mm。'},
                {value: 36, text: '支座非正常变形', data: '存在   处非正常变形。'},
                {value: 37, text: '支座未按图纸布置', data: '存在   处支座未按图纸布置'},
            ],
        }
    },
    onLoad(options) {
        // 状态，1 整改中 2 复核中 3已办结  4已撤回(取消整改)  5已被拒  6复核完成 7记录留痕
        this.dataId = options.id ?? ''
        this.getDataInfo()
    },
    methods: {
        getDataInfo() {
            this.http.request("/app/qualityModifyInfo/edit",{
                id: this.dataId,
            }).then((json)=>{
                if(json.result == 1){
                    this.setDataInfo(json)
                }
            })
        },
        setDataInfo({data, otherParam}) {
            const files = otherParam ?? []
            const dataInfo = data ?? {}
            let imgs = [], fileList = [], photoNo = '';
            for (let i = 0; i < files.length; i++) {
                const item = files[i]
                //照片
                if (item.type !== 0) {
                    imgs.push(item.url)
                    photoNo = photoNo? photoNo + ',' + item.photoNo : item.photoNo
                }
                //附件
                if (item.type === 0) {
                    fileList.push(item)
                }
            }
            //处理数据
            dataInfo.photoNo = photoNo
            dataInfo.images = imgs
            dataInfo.fileList = fileList
            this.info = dataInfo
        },
        //获取病害类型
        getDiseaseType() {
            const {engineeringType, diseaseType} = this.info
            let typeData = [], index = diseaseType ? diseaseType - 1 : 0;
            if (engineeringType === 1) {
                typeData = this.diseaseTypeData
            } else if (engineeringType === 2) {
                typeData = this.diseaseTypeData1
            }
            //获取数据
            if (typeData.length > 0) {
                return typeData[index].text
            } else {
                return ''
            }
        },
        //照片预览
        previewPicture(index) {
            const { images } = this.info
            uni.previewImage({
                current: index,
                urls: images
            });
        },
        //预览文件
        previewFile({name, url}) {
            const urls = encodeURIComponent(url)
            const word = ['doc', 'docx', 'pdf', 'xls', 'xlsx']
            const img = ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp']
            const suffix = this.getFileSuffix(name)
            if(word.indexOf(suffix) !== -1) {
                if(suffix === 'pdf') {
                    uni.navigateTo({
                        url: "/pages/view/preview/preview?previews=" + urls
                    })
                } else {
                    this.openDocFile(urls, suffix)
                }
            } else if(img.indexOf(suffix) !== -1) {
                uni.previewImage({
                    current: 1,
                    urls: [urls]
                });
            } else {
                uni.showToast({
                    title: `当前${suffix}文件格式暂不支持预览`,
                    duration: 1500,
                    icon: 'none'
                });
            }
        },
        //系统级预览文件
        openDocFile(url, fileType) {
            uni.showLoading({title: '加载中...', mask: true})
            uni.downloadFile({
                url: url,
                success: function (res) {
                    uni.openDocument({
                        filePath: res.tempFilePath,
                        fileType: fileType,
                        showMenu: true,
                    })
                },
                complete: function () {
                    uni.hideLoading()
                }
            });
        },
        //获取后缀名
        getFileSuffix(name) {
            if (name) {
                return name?.substring(name?.lastIndexOf(".") + 1)
            } else {
                return ''
            }
        },
        //更改状态
        bindRecheckChange(e) {
            const { id } = this.info
            const index = e.detail.value
            // 状态，整改状态  1 整改中 2 复核中 3已办结  4已撤回(取消整改)  5已被拒  6复核完成 7记录留痕
            this.http.request("/app/qualityModifyInfo/updateStatus",{
                id: id,
                opCode: [3, 5][index]
            }).then((json)=>{
                if(json.result == 1){
                    uni.showToast({
                        title: '操作成功',
                        mask: true
                    });
                    this.getDataInfo()
                } else {
                    uni.showToast({
                        title: `操作失败：${json.msg}`,
                        duration: 1500,
                        icon: 'none'
                    });
                }
            })
        }
    }
}
</script>

<style lang="scss">
.hc-quality-info-view {
    background: white;
    .custom-picker-view {
        position: relative;
    }
    .page-bg-bar {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 340rpx;
        border-radius: 0 0 160rpx 160rpx;
        background-color: rgba(47, 165, 255, 1);
        z-index: 1;
    }
    .hc-content-zindex.quality-info {
        position: relative;
        padding: 4rpx;
        z-index: 2;
        background: white;
        border-radius: 10rpx;
        margin: 19rpx 45rpx 45rpx;
        .cu-bar {
            height: 64rpx;
            .action {
                font-size: 30rpx;
                [class*="cuIcon-"] {
                    font-size: 30rpx;
                }
            }
        }
        .hc-info-list-item {
            position: relative;
            padding: 20rpx;
            min-height: 66rpx;
            overflow: hidden;
            &::after {
                position: absolute;
                content: '';
                background: #f9f9f9;
                height: 2rpx;
                left: 22rpx;
                bottom: 0;
                right: 22rpx;
            }
            .title {
                position: absolute;
                width: 255rpx;
                color: #818181;
            }
            .content {
                position: relative;
                padding-left: 255rpx;
                text-align: right;
                white-space: break-spaces;
                hyphens: auto;
                word-wrap: break-word;
            }
        }
        .hc-form-img-box {
            position: relative;
            margin-bottom: 20rpx;
            padding: 0 14rpx;
        }
        .hc-file-list-box {
            position: relative;
            margin-bottom: 80rpx;
            padding: 0 24rpx;
            .file-item {
                position: relative;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #f9f9f9;
                font-size: 26rpx;
            }
        }
    }
}
</style>