forestry-wx/src/plant/base/gap-base-info-detai/index.vue

<template>
    <view class="ksqulc">
        <z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" refresher-only @onRefresh="onRefresh" scroll-with-animation>
            <template #top>
                <ut-navbar title="基地详情" :fixed="false" border></ut-navbar>
                <view class="bg-fff mb-20">
                    <view class="pd-5"></view>
                    <ut-tabs v-model="activeTab" :tabs="tabs" mode="btw" @change="changeActiveTab"></ut-tabs>
                </view>
            </template>
            <view class="p-rtv">
                <!-- 基本信息 -->
                <view ref="baseRef" class="pd-24" id="base12345">
                    <view class="startline-title">基本信息</view>
                </view>
                <view class="pd-24 bg-#fff mb-10">
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地类型：</span>
                        <span class="c-#333">{{ selectDictLabel(pt_base_type, form?.baseInfo?.baseType) || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地名称：</span>
                        <span class="c-#333">{{ form?.baseInfo?.baseName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地编号：</span>
                        <span class="c-#333">{{ form?.baseInfo?.baseCode || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">建设时间：</span>
                        <span class="c-#333">{{ form?.baseInfo?.buildDate || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地组织方式：</span>
                        <span class="c-#333">{{ selectDictLabel(pt_org_type, form?.baseInfo?.orgType) || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地负责人：</span>
                        <span class="c-#333">{{ form?.baseInfo?.contactName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">联系电话：</span>
                        <span class="c-#333">{{ form?.baseInfo?.contactTel || '-' }}</span>
                    </view>
                    <template v-if="['1', '2'].includes(form?.baseInfo?.baseType)">
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">是否为GAP基地：</span>
                            <span class="c-#333">{{ selectDictLabel(yes_no, form?.baseInfo?.gapFlag) || '-' }}</span>
                        </view>
                        <view v-if="form?.baseInfo?.gapId" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">关联GAP信息：</view>
                            <view class="bg-#FBFDFB pd-24 p-rtv flex1 radius-10 gap-info-card">
                                <view class="f-s-32 f-w-500 c-#333">{{ form?.baseInfo?.gapInfo?.gapBaseName || '-' }}</view>
                                <view class="f-s-24 c-#ccc mb-10">{{ form?.baseInfo?.gapInfo?.ratedDate }}获评</view>
                                <view class="d-flex gap-10 flex-wrap">
                                    <view class="w-330 f-s-28">
                                        <span class="c-#666">申报品种：</span>
                                        <span class="c-#333 f-w-500">{{ form?.baseInfo?.gapInfo?.medicineName }}</span>
                                    </view>
                                    <view class="w-290 f-s-28">
                                        <span class="c-#666">基地面积：</span>
                                        <span class="c-#333 f-w-500">{{ form?.baseInfo?.gapInfo?.area }}{{ form?.baseInfo?.gapInfo?.areaUnit }}</span>
                                    </view>
                                    <view class="f-s-28">
                                        <span class="c-#666">基地地址:</span>
                                        <span class="c-#333 f-w-500">{{ form?.baseInfo?.gapInfo?.adcodeName }} {{ form?.baseInfo?.gapInfo?.address || '-' }}</span>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地所在地区：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.adcodeName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">详细地址：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.address || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <view class="f-s-30 c-#666 mb-10">基地范围：</view>
                        <view class="bg-#f7f7f7 d-flex ov-hd p-rtv">
                            <image @click="previewImage([form?.baseInfo?.gapInfo?.basePic])" class="w-full" v-if="form?.baseInfo?.gapInfo?.basePic" preview :src="form?.baseInfo?.gapInfo?.basePic" mode="'widthFix'"></image>
                            <view v-else class="w-full h-120 d-flex a-c j-c c-999">暂无基地范围</view>
                        </view>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地面积：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.area || '-' }}{{ form?.baseInfo?.gapInfo?.areaUnit || mapUnitByBaseType[form?.baseInfo?.baseType || '1'] }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地经纬度：</span>
                        <span class="c-#333">E{{ form?.baseInfo?.gapInfo?.lng || '-' }}, N{{ form?.baseInfo?.gapInfo?.lat || '-' }}</span>
                    </view>
                </view>
                <view class="h-1" id="plot12345"></view>
                <!-- 地块/圈舍/组培架信息 -->
                <view ref="plotRef" class="pd-24">
                    <view class="startline-title" v-if="form?.baseInfo?.baseType == '1'">地块信息</view>
                    <view class="startline-title" v-else-if="form?.baseInfo?.baseType == '2'">圈舍信息</view>
                    <view class="startline-title" v-else-if="form?.baseInfo?.baseType == '3'">组培架信息</view>
                </view>
                <view class="pd-24 bg-#fff mb-10">
                    <template v-if="Array.isArray(form?.landInfoList) && form.landInfoList.length">
                        <view v-for="(item, index) in form.landInfoList" :key="index" class="plot-item pd-24 mb-20">
                            <view class="d-flex mb-16">
                                <view class="f-s-32 f-w-5 c-#333 flex1 mr-10">{{ item?.landName || '-' }}</view>
                                <view v-if="item?.contactName" class="f-s-24 c-#333">负责人：{{ item?.contactName }}</view>
                            </view>
                            <template v-if="form?.baseInfo?.baseType == '3'">
                                <view class="d-flex flex-wrap gap-10">
                                    <view class="f-s-28 c-#666 w-310">
                                        <span>层数：</span>
                                        <span class="c-#333 f-w-5">{{ item?.layers || '-' }}</span>
                                    </view>
                                    <view class="f-s-28 c-#666 w-310">
                                        <span>每层容量：</span>
                                        <span class="c-#333 f-w-5">{{ item?.capacityAmount || '-' }}{{ item?.capacityUnit || '-' }}</span>
                                    </view>
                                    <view class="f-s-28 c-#666 w-310">
                                        <span>总容量：</span>
                                        <span class="c-#333 f-w-5">{{ (item?.capacityAmount || 0) * (item?.layers || 0) || '-' }}{{ item?.capacityUnit || '-' }}</span>
                                    </view>
                                    <view class="f-s-28 c-#666 w-310">
                                        <span v-if="item?.lightType" class="mr-10">{{ selectDictLabel(pt_light_type, item?.lightType) }}</span>
                                        <span v-if="item?.tempeStatus">{{ +item?.tempeStatus ? '有独立温控' : '无独立温控' }}</span>
                                    </view>
                                </view>
                            </template>
                            <template v-else>
                                <view class="f-s-28 c-#666">
                                    <span>面积：</span>
                                    <span class="c-#333 f-w-5">{{ item?.area || '-' }}{{ item?.areaUnit || '-' }}</span>
                                </view>
                            </template>
                        </view>
                    </template>
                    <view v-else class="c-999 f-s-28">暂无信息</view>
                </view>
                <!-- 选址依据及环境信息 -->
                <view  class="pd-24">
                    <view class="startline-title">选址依据及环境信息</view>
                </view>
                <view class="h-1" id="environment12345"></view>
                <!-- 基地类型 1：种植基地 -->
                <template v-if="form?.baseInfo?.baseType == '1'">
                    <view class="pd-24 bg-#fff mb-10">
                        <view class="f-s-32 c-#333 f-w-600">选址依据</view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">是否道地产区：</span>
                            <span class="c-#333">{{ selectDictLabel(yes_no, form?.environmentInfo?.daoStatus) || '-' }}</span>
                        </view>
                        <view v-if="form?.environmentInfo?.adaptFile?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">基地选址依据/标准：</view>
                            <ut-album :urls="form?.environmentInfo?.adaptFile"></ut-album>
                        </view>
                        <view v-if="form?.environmentInfo?.accordFile?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">适应性证明材料：</view>
                            <ut-album :urls="form?.environmentInfo?.accordFile"></ut-album>
                        </view>
                    </view>
                    <view class="pd-24 bg-#fff mb-10">
                        <view class="f-s-32 c-#333 f-w-600">环境信息</view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">土壤类型：</span>
                            <span class="c-#333">{{ selectDictLabel(pt_soil_type, form?.environmentInfo?.soilType) || '-' }}</span>
                        </view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">土壤质地：</span>
                            <span class="c-#333">{{ selectDictLabel(pt_soil_texture, form?.environmentInfo?.soilTexture) || '-' }}</span>
                        </view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">有机质含量：</span>
                            <span class="c-#333">{{ form?.environmentInfo?.organic || '-' }}</span>
                        </view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">土壤PH值：</span>
                            <span class="c-#333">{{ form?.environmentInfo?.soilPh || '-' }}</span>
                        </view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">水源类型：</span>
                            <span class="c-#333">{{ selectDictLabel(pt_water_type, form?.environmentInfo?.waterType) || '-' }}</span>
                        </view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">无霜期：</span><span class="c-#333">{{ form?.environmentInfo?.notFrost || '-' }}<text v-if="form?.environmentInfo?.notFrost">天</text></span>
                        </view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年降水量：</span><span class="c-#333">{{ form?.environmentInfo?.precipitation || '-' }}<text v-if="form?.environmentInfo?.precipitation">mm</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年平均气温：</span><span class="c-#333">{{ form?.environmentInfo?.avgTem || '-' }}<text v-if="form?.environmentInfo?.avgTem">℃</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年绝对最高气温：</span><span class="c-#333">{{ form?.environmentInfo?.maxTem || '-' }}<text v-if="form?.environmentInfo?.maxTem">℃</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年绝对最低气温：</span><span class="c-#333">{{ form?.environmentInfo?.minTem || '-' }}<text v-if="form?.environmentInfo?.minTem">℃</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年日照时数：</span><span class="c-#333">{{ form?.environmentInfo?.sunshineHours || '-' }}<text v-if="form?.environmentInfo?.sunshineHours">小时</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">海拔：</span><span class="c-#333">{{ form?.environmentInfo?.altitude || '-' }}<text v-if="form?.environmentInfo?.altitude">米</text></span></view
                        >
                        <view v-if="form?.environmentInfo?.report?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">水、土壤、大气等环评报告：</view>
                            <ut-album :urls="form?.environmentInfo?.report"></ut-album>
                        </view>
                        <view v-if="form?.environmentInfo?.basePic" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">基地图片：</view>
                            <ut-album :urls="form?.environmentInfo?.basePic"></ut-album>
                        </view>
                        <view v-if="form?.environmentInfo?.baseVoice?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">基地视频：</view>
                            <ut-album :urls="form?.environmentInfo?.baseVoice"></ut-album>
                        </view>
                    </view>
                </template>

                <!-- 基地类型 2：养殖基地 -->
                <template v-else-if="form?.baseInfo?.baseType == '2'">
                    <view class="pd-24 bg-#fff mb-10">
                        <view class="f-s-32 c-#333 f-w-600">选址依据</view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom">
                            <span class="c-#666">是否道地产区：</span>
                            <span class="c-#333">{{ selectDictLabel(yes_no, form?.environmentInfo?.daoStatus) || '-' }}</span>
                        </view>
                        <view v-if="form?.environmentInfo?.adaptFile?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">基地选址依据/标准：</view>
                            <ut-album :urls="form?.environmentInfo?.adaptFile"></ut-album>
                        </view>
                        <view v-if="form?.environmentInfo?.accordFile?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">适应性证明材料：</view>
                            <ut-album :urls="form?.environmentInfo?.accordFile"></ut-album>
                        </view>
                    </view>
                    <view class="pd-24 bg-#fff mb-10">
                        <view class="f-s-32 c-#333 f-w-600">环境信息</view>
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">水源类型：</span><span class="c-#333">{{ selectDictLabel(pt_water_type, form?.environmentInfo?.waterType) || '-' }}</span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">无霜期：</span><span class="c-#333">{{ form?.environmentInfo?.notFrost || '-' }}<text v-if="form?.environmentInfo?.notFrost">天</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年降水量：</span><span class="c-#333">{{ form?.environmentInfo?.precipitation || '-' }}<text v-if="form?.environmentInfo?.precipitation">mm</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年平均气温：</span><span class="c-#333">{{ form?.environmentInfo?.avgTem || '-' }}<text v-if="form?.environmentInfo?.avgTem">℃</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年绝对最高气温：</span><span class="c-#333">{{ form?.environmentInfo?.maxTem || '-' }}<text v-if="form?.environmentInfo?.maxTem">℃</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年绝对最低气温：</span><span class="c-#333">{{ form?.environmentInfo?.minTem || '-' }}<text v-if="form?.environmentInfo?.minTem">℃</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">年日照时数：</span><span class="c-#333">{{ form?.environmentInfo?.sunshineHours || '-' }}<text v-if="form?.environmentInfo?.sunshineHours">小时</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">海拔：</span><span class="c-#333">{{ form?.environmentInfo?.altitude || '-' }}<text v-if="form?.environmentInfo?.altitude">米</text></span></view
                        >
                        <view v-if="form?.environmentInfo?.report?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">水、大气等环评报告：</view>
                            <ut-album :urls="form?.environmentInfo?.report"></ut-album>
                        </view>
                        <view v-if="form?.environmentInfo?.basePic" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">基地图片：</view>
                            <ut-album :urls="form?.environmentInfo?.basePic"></ut-album>
                        </view>
                        <view v-if="form?.environmentInfo?.baseVoice?.length" class="f-s-30 pd2-16-0 info-border-bottom">
                            <view class="c-#666 mb-10">基地视频：</view>
                            <ut-album :urls="form?.environmentInfo?.baseVoice"></ut-album>
                        </view>
                    </view>
                </template>
                <!-- 基地类型 3：组培基地 -->
                <template v-else-if="form?.baseInfo?.baseType == '3'">
                    <view class="pd-24 bg-#fff mb-10">
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">温度：</span><span class="c-#333">{{ form?.environmentInfo?.avgTem || '-' }}<text v-if="form?.environmentInfo?.avgTem">℃</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">湿度：</span><span class="c-#333">{{ form?.environmentInfo?.humidity || '-' }}<text v-if="form?.environmentInfo?.humidity">%</text></span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">洁净度：</span><span class="c-#333">{{ form?.environmentInfo?.clean || '-' }}</span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">光照：</span><span class="c-#333">{{ form?.environmentInfo?.light || '-' }}</span></view
                        >
                        <view class="f-s-30 pd2-16-0 info-border-bottom"
                            ><span class="c-#666">光照周期：</span><span class="c-#333">{{ form?.environmentInfo?.lightCycle || '-' }}</span></view
                        >
                    </view>
                </template>
           
            </view>
            <template #bottom>
                <view class="pd-20 d-flex">
                    <template v-if="!+form.baseInfo?.tempFlag">
                        <up-button class="mr-20" color="#18BECA">去标记为三无一全基地{{ '>' }}</up-button>
                    </template>
                    <up-button @click="$u.route({ type: 'redirect', url: '/plant/base/base-edit/index', params: { id: did } })" type="primary">修改</up-button>
                </view>
            </template>
        </z-paging>
    </view>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { getUrlParams, recursiveDecodeURIComponent } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { yes_no, pt_org_type, pt_base_type, pt_water_type, pt_soil_type, pt_soil_texture, pt_light_type, pt_capacity_unit } = toRefs<any>(proxy?.useDict('yes_no', 'pt_org_type', 'pt_base_type', 'pt_water_type', 'pt_soil_type', 'pt_soil_texture', 'pt_light_type', 'pt_capacity_unit'));
const tabs = reactive([
    { label: '基本信息', value: 'base' },
    { label: '地块信息', value: 'plot' },
    { label: '选址依据及环境信息', value: 'environment' },
]);
const activeTab = ref('base');
const paging = ref<any>(null);
const mapUnitByBaseType: any = {
    '1': '亩',
    '2': '平方米',
    '3': '平方米',
};
const form = ref<any>({});

const changeActiveTab = (value: any) => {
    const v = typeof value === 'string' ? value : value?.value;
    const id = `${v}12345`;
    paging.value?.scrollIntoViewById(id, 30, true);
};
const did = ref('');
// 根据id获取基地详情
const getDetailById = async (id: string) => {
    const res = await useClientRequest.get(`/plt-api/app/base/getInfoAllById/${id}`);
    if (res && res.code === 200) {
        form.value = res.data || {};
    }
};
const onRefresh = () => {
    getDetailById(did.value);
    paging.value?.complete();
};
// 判断节点是否在可视区域内如果在则切换tab createIntersectionObserver

onLoad((options: any) => {
    did.value = options?.id || getUrlParams(recursiveDecodeURIComponent(options?.q))?.id || '';
    getDetailById(did.value);
});
</script>
<style lang="scss" scoped>
.z-paging-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

.btn-aree-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.plot-item {
    border: 1rpx solid rgba($u-primary, 0.4);
    border-radius: 10rpx;
}
.gap-info-card {
    border: 1rpx solid rgba($u-primary, 0.4);
}
.ksqulc {
    position: relative;
    height: 100vh;
}
</style>