smart-app/pages/qualityInspection_fj/qualityInspection.vue

<template>
    <scroll-view scroll-y class="nav hc-qualityInspection-view" @scrolltolower="getList" style="height: 100vh;">
        <cu-custom bgColor="bg-blue1" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">质量巡检</block>
        </cu-custom>
        <view class="page-bg-bar"/>
        <view class="cu-bar hc-search-bar">
            <view class="action">
                <uni-data-select class="action-data-select" :clear="false" v-model="searchForm.engineeringType" :localdata="typeData"/>
            </view>
            <view class="action">
                <uni-datetime-picker class="action-date-picker" v-model="pickerRange" type="daterange" @change="searchDateChange"/>
            </view>
            <view class="action">
                <button class="cu-btn bg-white" @click="searchClick">搜索</button>
            </view>
        </view>
        <!--列表-->
        <view class="hc-content-zindex">
            <template v-for="item in taskList">
                <view class="hc-data-card" @click="itemInfoTap(item)">
                    <view class="title-box">
                        <view class="title">工程名称</view>
                        <view class="date">{{item.createTime}}</view>
                    </view>
                    <view class="name-bar">{{item.unitName}}</view>
                    <view class="content-box">
                        <view class="title">分部工程类别：</view>
                        <view class="name">{{item.segmentName}}</view>
                        <view class="right-icons">
                            <uni-icons type="right" size="22" color="#858585"/>
                        </view>
                        <view class="tag-text">
                            <view class="text-bar">
                                <text class="type">病害类型：</text>
                                <text class="text">{{getDiseaseType(item)}}</text>
                            </view>
                            <view class="text-bar">
                                <text class="type">严重程度：</text>
                                <text class="text" v-if="item.severity == 1">严重</text>
                                <text class="text" v-else-if="item.severity == 2">轻微</text>
                                <text class="text" v-else>一般</text>
                            </view>
                        </view>
                    </view>
                    <view class="action">
                        <button class="cu-btn bg-blue1" @click.stop="revocationTap(item)" v-if="item.status==1">撤回</button>
                        <button class="cu-btn bg-grey" v-if="item.status==4">已撤</button>
                    </view>
                </view>
            </template>
        </view>
        <!--底部按钮-->
        <view style="height: 174rpx;"/>
        <view class="fixed-bottom" style="z-index: 9;">
            <button type="primary" @click="newRecordTap">新增记录</button>
        </view>
    </scroll-view>
</template>

<script>
export default {
    data() {
        return {
            title: "质量巡检",
            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: '存在   处支座未按图纸布置'},
            ],
            searchForm: {
                engineeringType: 1,
                startDate: '',
                endDate: '',
                diseaseType: '',
                severity: '',
                defectType: '',
                type: '',
                status: '',
                cs:1,
                pageSize:15,
            },
            page: 0,
            totalPage: 999,
            userid: null,
            project: null,
            taskList: [],
            pickerRange: [],
        }
    },
    onLoad() {
        const {id} = uni.getStorageSync("userInfo")
        this.project = uni.getStorageSync(`porject_${id}`);
        this.userid = id;
    },
    onShow() {
        this.searchClick();
    },
    methods: {
        searchDateChange(val) {
            if (val.length > 1) {
                this.searchForm.startDate = val[0];
                this.searchForm.endDate = val[1];
            } else {
                this.searchForm.startDate = '';
                this.searchForm.endDate = '';
            }
        },
        resetPage(){
            this.page = 0;
            this.totalPage = 999;
            this.taskList = [];
        },
        searchClick() {
            this.resetPage();
            this.getList();
        },
        getList() {
            if(this.page >= this.totalPage){
                return;
            }
            this.page++;
            let form = this.searchForm
            this.http.request("/app/qualityModifyInfo/page",{
                ...form,
                page: this.page,
                projectId:this.project.id,
                contractId:this.project.contractId,
            }).then((json)=>{
                if(json.result == 1){
                    this.taskList = this.taskList.concat(json.datas);
                    this.totalPage = json.totalPage;
                }
            })
        },
        //获取病害类型
        getDiseaseType({diseaseType}) {
            const {engineeringType} = this.searchForm
            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 ''
            }
        },
        //查看详情
        itemInfoTap({id}) {
            uni.navigateTo({
                url: '/pages/qualityInspection_fj/qualityInfo?id=' + id
            })
        },
        //撤回
        revocationTap({id}) {
            this.http.request("/app/qualityModifyInfo/updateStatus",{
                id: id,
                opCode: 4
            }).then((json)=>{
                if(json.result == 1){
                    uni.showToast({
                        title: '操作成功',
                        mask: true
                    });
                    this.searchClick()
                } else {
                    uni.showToast({
                        title: `操作失败：${json.msg}`,
                        duration: 1500,
                        icon: 'none'
                    });
                }
            })
        },
        //新增记录
        newRecordTap() {
            uni.navigateTo({
                url: '/pages/qualityInspection_fj/addInspection'
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background-color: #EFEFEF;
}
.hc-qualityInspection-view {
    .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-search-bar {
        position: sticky;
        top: 0;
        border: 2rpx solid rgba(255, 255, 255, .20);
        border-left: 0;
        border-right: 0;
        z-index: 222;
        .action {
            .action-data-select {
                width: 182rpx;
                flex: 182rpx;
            }
            .cu-btn {
                height: 54rpx;
                padding: 0 22rpx;
                font-size: 24rpx;
                border-radius: 6rpx;
            }
        }
    }
    .hc-content-zindex {
        position: relative;
        padding: 26rpx;
        z-index: 2;
    }
    .hc-data-card {
        .title-box {
            position: relative;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title {
                font-weight: bold;
            }
        }
        .name-bar {
            padding: 0 10px 10px;
            position: relative;
            border-bottom: 1px solid #eee;
        }
        .content-box {
            position: relative;
            padding: 10px;
            .title {
                color: #858585;
            }
            .name {
                position: relative;
                padding: 12px 24px 12px 0;
            }
            .right-icons {
                position: absolute;
                right: 10px;
                bottom: 48%;
            }
            .tag-text {
                position: relative;
                display: flex;
                align-items: center;
                font-size: 14px;
                margin-top: 16px;
                .text-bar .type {
                    color: #858585;
                }
                .text-bar + .text-bar {
                    margin-left: 14px;
                }
            }
        }
        .action {
            position: absolute;
            right: 5px;
            bottom: 5px;
            .cu-btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                font-size: 14px;
            }
        }
    }

    .fixed-bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        padding: 34rpx 34rpx calc(var(--window-bottom) + 38rpx);
        box-shadow: 0 -12rpx 10rpx -12rpx rgba(215, 224, 253, 100);
    }
}
</style>