<template> <Layout :have-tab-bar="false" icon=""> <span slot="title" class="topBarTitle">我的项目</span> <view class="container"> <view class="containerBody"> <view class="search"> <view class="text">数据</view> </view> <view class="history_item"> <view style="padding:10px"> <view style="color: #82D4FF;margin-bottom: 38rpx;display: flex;justify-content: space-between"> 项目基本信息 <view style="width: 25px;height: 25px;"> <uni-icons @click="editData" type="compose" size="20" color="#fff"></uni-icons> </view> </view> <view style="display: flex"> <view> <view class="info"> <view class="label">项目名称</view> <view>{{name}}</view> </view> <view class="info"> <view class="label">项目地址</view> <view>{{projAddr}}</view> </view> </view> </view> <view style="color: #82D4FF;margin-bottom: 38rpx">项目基本情况</view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view style="width: 118px"> 盾构机直径m </view> <view class="project-item-input"> <input disabled :value="diameter" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item"> <view class="project-item-num" style="white-space: nowrap"> 掘进速度cm/min </view> <view class="project-item-input"> <input disabled :value="speed" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item"> <view class="project-item-num"> 送泥比重g/cm³ </view> <view class="project-item-input"> <input disabled :value="propor" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view class="project-item-num"> 每小时送泥流量 <view class="unit">g/cm³</view> </view> <view class="project-item-input"> <input disabled :value="timesend" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item" style="margin-top: 42rpx"> <view class="project-item-num"> 管片宽度m </view> <view class="project-item-input"> <input disabled :value="width" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="project-item" style="margin-top: 42rpx"> <view class="project-item-num"> 日掘进环数 </view> <view class="project-item-input"> <input disabled :value="dayTunnelleCylindernumber" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view style="display: flex;color: #fff;padding-right:18rpx;padding-top: 18rpx;"> <view class="project"> <view style="display: flex"> <view class="project-item"> <view class="project-item-num"> 每小时排泥流量 <view>cm/min</view> </view> <view class="project-item-input"> <input disabled :value="hourSpoildisposal" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view class="situation" style="height: 400px;"> <view class="every"> <view>各地层基本情况</view>    </view> <view class="item" v-for="(item, index) in stratumList" :key="index"> <view style="color: #fff;margin-left: 10px;display: flex;">地层编号: <input disabled :value="item.num" style="background-color: #303E63;margin-left: 10px;border-radius: 5px" />  </view> <view style="color: #fff;margin-left: 10px;margin-top:10px;display: flex;">地层名称: <input disabled :value="item.name" style="background-color: #303E63;margin-left: 10px;border-radius: 5px" />  </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view>地层特性</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :value="item.features1" :localdata="characterOne" :disabled="disabled" style="width: 100%;"></uni-data-select> </uni-section> </view> <view v-if="value === 0" style="margin-left: 10px"> <uni-section> <uni-data-select :value="item.features2" :localdata="characterTwo" :disabled="disabled" style="width: 100%;"></uni-data-select> </uni-section> </view> </view> </view> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view> 地层比重g/cm³ </view> <view class="stratum-input"> <input disabled :value="item.proportion" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="situation_item" style="height: 35px;"> <view class="stratum"> <view>地层含水%</view> <view class="stratum-input"> <input disabled :value="item.water" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="situation_item"> <view style="padding: 7px"> <view>颗分区间</view> <view class="interval"> <view style="display: flex"> <view class="interval-item"> <view class="interval-item-num"> >10 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size1" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 10-2 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size2" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 2-0.5 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size3" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 0.5-0.25 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size4" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="interval"> <view style="display: flex"> <view class="interval-item"> <view class="interval-item-num"> 0.25-0.075 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size5" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num" style="white-space: nowrap"> 0.075-0.005 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size6" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="interval-item"> <view class="interval-item-num"> 小于0.005 </view> <view class="interval-item-input"> <input disabled :value="item.particleSize.size7" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> </view> </view> </view> <view class="clay"> <view style="color: #82D4FF;margin-left: 18rpx;padding-top: 18rpx">泥水设备百分比设定</view> <view style="color:#fff;margin-left: 28rpx;margin-top: 18rpx">黏土</view> <view class="clay_item"> <view class="stratum"> <view class="title">滚动筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="rollRange" :disabled="disabled" :value="gdsObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view>                  <view style="margin-left: 10px"> <uni-number-box disabled :step="0.001" :value="gdsObject.value" @change="changeValue" /> </view> <view class="checkbox" style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum"> <view class="title">振动筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="vibrationRange" :disabled="disabled" :value="zdsObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="zdsObject.value" @change="changeValue" /> </view> <view class="checkbox" style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum" style="white-space: nowrap"> <view class="title">一级旋流器</view> <view class="stratum-select-one"> <view> <uni-section> <uni-data-select :localdata="oneRange" :disabled="disabled" :value="xlq1Object.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="xlq1Object.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum" style="white-space: nowrap"> <view class="title">二级旋流器</view> <view class="stratum-select-two"> <view> <uni-section> <uni-data-select :localdata="twoRange" :disabled="disabled" :value="xlq2Object.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="xlq2Object.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item"> <view class="stratum"> <view class="title">脱水筛</view> <view class="stratum-select"> <view> <uni-section> <uni-data-select :localdata="dehydrationRange" :disabled="disabled" :value="tssObject.label" style="width: 100%;"></uni-data-select> </uni-section> </view> <view style="margin-left: 18rpx"> <uni-number-box disabled :step="0.001" :value="tssObject.value" @change="changeValue" /> </view> <view style="margin-left: 10rpx;white-space: nowrap"> <uni-data-checkbox disabled multiple :localdata="hobby"></uni-data-checkbox> </view> </view> </view> </view> <view class="clay_item" style="height: 198rpx;"> <view class="sieve"> <view class="title">滚动筛</view> <view class="sieve-select"> <view>滚动筛喷淋水容量:</view> <view> <uni-number-box disabled :step="0.001" :value="gdsDzsplsrl" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 198rpx;"> <view class="sieve"> <view class="title">脱水筛</view> <view class="sieve-select"> <view>筛上物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="ttsSswmd" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 258rpx;"> <view class="sieve"> <view class="title">预筛</view> <view class="sieve-select" style="margin-bottom: 18rpx"> <view>筛上物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="ysSswmd" @change="changeValue" /> </view> </view> <view class="sieve-select"> <view>振动筛喷淋水容量:</view> <view> <uni-number-box disabled :step="0.001" :value="ysZdsplsrl" @change="changeValue" /> </view> </view> </view> </view> <view class="clay_item" style="height: 258rpx;"> <view class="sieve"> <view class="title">旋流器</view> <view class="sieve-select" style="margin-bottom: 18rpx"> <view>一级底流物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="xlq1Dlwmd" @change="changeValue" /> </view> </view> <view class="sieve-select"> <view>二级底流物密度:</view> <view> <uni-number-box disabled :step="0.001" :value="xlq2Dlwm" @change="changeValue" /> </view> </view> </view> </view> </view> </view> </view> <view style="color: #fff;margin:38rpx 0 38rpx 18rpx;">输出</view> <view class="history_item"> <view style="padding:18rpx"> <view class="mudRes"> <view style="color: #82D4FF;margin-left: 18rpx;padding-top: 18rpx">计算处理百分比</view> <view class="mudRes_item" v-for="(item,index) in 5" :key="index"> <view class="title">黏土</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 滚动筛% </view> <view class="content-item-input"> <input disabled :value="rollingScreen" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 振动筛% </view> <view class="content-item-input"> <input disabled :value="vibratingScreen" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 一级旋流器% </view> <view class="content-item-input"> <input disabled :value="xlq1" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 二级旋流器% </view> <view class="content-item-input"> <input disabled :value="xlq2" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="mudRes_item" v-for="(item,index) in 2" :key="index"> <view class="title">滚动筛筛下物</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 流量m³/R </view> <view class="content-item-input"> <input disabled :value="flow" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 比重g/m³ </view> <view class="content-item-input"> <input disabled :value="weight" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 固相T/R </view> <view class="content-item-input"> <input disabled :value="solid" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 液相m³/R </view> <view class="content-item-input"> <input disabled :value="liquid" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> <view class="title" style="color: #82D4FF">泥浆池数据</view> <view class="mudRes_item"> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 调整池m³ </view> <view class="content-item-input"> <input disabled :value="adjustmentPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 废浆池m³ </view> <view class="content-item-input"> <input disabled :value="wasteMudPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 清水池m³ </view> <view class="content-item-input"> <input disabled :value="cleanWaterPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view style="display: flex"> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 新浆池m³ </view> <view class="content-item-input"> <input disabled :value="newMudPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 工业水池m³ </view> <view class="content-item-input"> <input disabled :value="industrialWaterPool" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 198rpx"> 集土坑m³ </view> <view class="content-item-input"> <input disabled :value="soilCollectionPit" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> <view class="title" style="color: #82D4FF">干化配置数据</view> <view class="mudRes_item"> <view v-for="(item,index) in 5" :key="index"> <view class="title">黏土</view> <view class="content"> <view style="display: flex"> <view class="content_item"> <view class="content-item-title"> 弃土量m³/R </view> <view class="content-item-input"> <input disabled :value="qituliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 弃浆量m³/R </view> <view class="content-item-input"> <input disabled :value="qijiangliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title"> 需水量m³/R </view> <view class="content-item-input"> <input disabled :value="xushuiliang" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> <view style="display: flex"> <view class="content_item"> <view class="content-item-title" style="width: 210rpx"> 干化配置推荐 </view> <view class="content-item-input"> <input disabled :value="ganhuaConfiguration" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> <view class="content_item"> <view class="content-item-title" style="width: 210rpx"> 弃浆配置推荐 </view> <view class="content-item-input"> <input disabled :value="qijiangConfiguration" style="width: 100%; height: 100%; background: transparent; border: none; outline: none; color: inherit; text-align: inherit;" /> </view> </view> </view> </view> </view> </view> </view> </view> </view> </view> </view> </Layout> </template> <script setup> import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' import Layout from '@/layout/index.vue' import { error } from 'uview-plus'; import { myDetailLogin } from '../../apis/myDetail'; const detail = async () => { error.value = ''; loading.value = true; } const rollRange = [{ value: 0, text: "10mm" }, { value: 1, text: "7mm" }, { value: 2, text: "5mm" }, ] const vibrationRange = [{ value: 0, text: "6mm" }, { value: 1, text: "3mm" }, { value: 2, text: "1.5mm" }, ] const oneRange = [{ value: 0, text: "500" }, { value: 1, text: "375" }, { value: 2, text: "350" }, { value: 3, text: "250" }, ] const twoRange = [{ value: 0, text: "150" }, { value: 1, text: "125" }, { value: 2, text: "100" }, ] const dehydrationRange = [{ value: 0, text: "0.6mm" }, { value: 1, text: "0.35mm" }, ] const characterOne = [{ value: 0, text: "黏土" }, { value: 1, text: "粉土" }, { value: 2, text: "砂" }, { value: 3, text: "圆砾" }, { value: 4, text: "卵石" }, { value: 5, text: "岩层" }, { value: 6, text: "淤泥" }, ] const characterTwo = [{ value: 0, text: "流塑" }, { value: 1, text: "软塑" }, { value: 2, text: "可塑" }, { value: 3, text: "硬塑" }, ] const hobby = [{ text: '已选中项', value: 0 }] const stratumList = ref([{ particleSize: { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '70', size7: '30' } }]); const switchTab = (tab) => { activeTab.value = tab } const open = () => { uni.navigateTo({ url: '/pages/index/index' }) } //添加地层 const addStratum = () => { //添加一个新的地层对象到数组 stratumList.value.push({}); // 滚动到底部 nextTick(() => { const container = uni.createSelectorQuery().select('.situation'); container.boundingClientRect(data => { uni.pageScrollTo({ scrollTop: data.height, duration: 300 }); }).exec(); }); } //编辑数据 const editData = () => { //跳转到计算页 uni.navigateTo({ url: '/pages/calculate/index' }); } watch(value, (newVal) => { if (newVal === 0) { // 黏土 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '70', // 0.075-0.005 size7: '30' // <0.005 }; } } if (newVal === 1) { // 粉土 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '45', size6: '45', size7: '10' }; } } if (newVal === 2) { // 砂 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '5', size4: '25', size5: '25', size6: '40', size7: '5' }; } } if (newVal === 3) { // 圆砾 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '40', size2: '15', size3: '10', size4: '10', size5: '5', size6: '15', size7: '5' }; } } if (newVal === 4 || newVal === 5) { //卵石岩层 const currentStratum = stratumList.value[stratumList.value.length - 1]; if (currentStratum) { currentStratum.particleSize = { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '0', size7: '0' }; } } }); onMounted(() => { }) // 组件卸载时执行 onUnmounted(() => { }) </script> 这一段代码的目的是，在用户点击某个项目的时候，通过变量id，进入到此界面，此界面为数据详情，会通过匹配id，把其他所有的数据，渲染到其对应的位置上，id是一个变量 import { request } from '@/utils' export function myDetailLogin(id){ return request({ url: `/api/projbase/getById/${id}` , method:'GET' }) }这里是接口代码

时间: 2025-06-22 19:32:19 浏览: 10

<think>我们有一个Vue3的单文件组件（SFC），它用于展示一个项目的详细信息。这个组件在挂载时应该根据传入的id从后端获取项目详情数据，并将数据渲染到页面上。同时，我们有一个API函数`myDetailLogin`用于发送GET请求获取项目详情。步骤：1.在`<scriptsetup>`中，我们需要引入`myDetailLogin`函数。2.使用`ref`或`reactive`来定义响应式变量，用于存储从接口获取的数据。3.使用`onMounted`生命周期钩子，在组件挂载时调用API获取数据。4.在模板中，将获取到的数据绑定到对应的位置。注意：该组件是详情页，通过路由参数获取项目id。假设我们使用uni-app，可以通过`uni.getCurrentInstance().router.params`或`onLoad`钩子获取路由参数。但是，在`<scriptsetup>`中，我们可以使用`onLoad`钩子（如果页面是uni-app页面）来获取参数，但这里没有使用`onLoad`，所以我们可以使用`uni.getCurrentInstance()`来获取当前路由的参数，或者通过父组件传递的props获取id。然而，在提供的代码中，并没有看到id是如何传递进来的。因此，我们需要假设这个页面是通过路由跳转过来的，并且路由上带有id参数。在uni-app中，我们可以这样获取路由参数：由于我们使用的是`<scriptsetup>`，所以可以使用`constroute=useRoute();`来获取路由对象，但uni-app官方并没有提供类似VueRouter的`useRoute`函数。因此，我们可以在`onMounted`或者`onLoad`中获取参数。但是，在代码中并没有使用`onLoad`，而是使用了`onMounted`。注意：在uni-app中，页面的生命周期包括`onLoad`、`onShow`等，而`onMounted`是组件的生命周期，在页面中也可以使用，但获取路由参数通常在`onLoad`中。因此，我们需要修改代码，使用`onLoad`来获取参数并请求数据。修改方案：1.引入`onLoad`和`onUnmounted`（如果需要的话）从`@dcloudio/uni-app`（或者直接使用uni-app全局的，但在setup中需要引入）。2.在`onLoad`中获取参数，并调用API。但是，查看代码，我们并没有使用`onLoad`，而是使用了`onMounted`。在uni-app中，页面也可以使用`onMounted`，但获取路由参数建议在`onLoad`中。然而，在提供的模板中，并没有使用页面生命周期，所以我们这里假设这个组件是一个页面组件。在uni-app的页面中，我们可以直接使用`onLoad`生命周期。由于代码中已经使用了`onMounted`，我们可以将获取参数的逻辑放在`onMounted`中，但是注意，在uni-app中，页面组件的`onMounted`是在`onLoad`之后执行的，所以也可以获取到路由参数。获取路由参数的方法：```javascriptconstroute=uni.getCurrentPages()[uni.getCurrentPages().length-1].$page.options;//或者constid=route.query.id;//假设路由为：/pages/detail?id=xxx```但是，更推荐的方式是使用`onLoad`钩子，因为它能确保在页面加载时获取参数。因此，我们修改如下：在`<scriptsetup>`中，添加`onLoad`钩子：import{onLoad}from'@dcloudio/uni-app'然后，在`onLoad`中获取id，并调用API。但是，由于我们使用的是`<scriptsetup>`，所以可以直接使用`uni-app`提供的生命周期钩子。具体步骤：1.引入`onLoad`。2.在`onLoad`中获取参数id。3.调用`myDetailLogin(id)`获取项目详情。4.将返回的数据赋值给响应式变量。5.在模板中绑定数据。另外，注意到模板中使用了大量的响应式变量，我们需要根据接口返回的数据结构来定义这些变量。由于接口返回的数据结构未知，这里假设接口返回的数据与模板中使用的变量名一致。但是，从模板中可以看到，有很多变量，比如：`name`,`projAddr`,`diameter`等。我们可以在`<scriptsetup>`中定义一个对象（如`projectDetail`）来存储整个项目详情，然后在模板中通过`projectDetail.name`等方式使用。或者，为了保持代码的清晰，我们可以使用展开运算符将返回的数据直接解构到组件的状态中。但考虑到模板中变量较多，且分散在多个地方，建议使用一个对象来存储。然而，观察模板，发现有些变量是嵌套在对象中的，比如地层列表`stratumList`，还有一些是直接使用的。因此，我们需要根据接口返回的数据结构进行调整。假设接口返回的数据结构如下（仅示例）：```json{"id":1,"name":"项目名称","projAddr":"项目地址","diameter":"盾构机直径","speed":"掘进速度",...,"stratumList":[{"num":"地层编号","name":"地层名称","features1":0,//对应黏土等"features2":0,//对应流塑等"proportion":"地层比重","water":"含水率","particleSize":{"size1":"10","size2":"20",...}}],//其他字段...}```因此，我们可以这样操作：步骤：1.定义响应式变量`projectDetail`，初始值为空对象。2.在`onLoad`中获取id，然后请求接口，将返回的数据赋值给`projectDetail`。3.在模板中，将原来直接使用的变量改为`projectDetail`中的属性，比如`projectDetail.name`。但是，模板中有些地方使用了多个变量，修改起来可能比较麻烦。另一种方式是使用`reactive`定义多个变量，然后从接口数据中分别赋值。但这样需要写很多赋值语句。考虑到代码的简洁性，我们可以使用`reactive`创建一个大的状态对象，然后在模板中使用状态对象的属性。但是，观察模板，发现很多地方使用了`v-model`绑定，并且有些地方是嵌套在对象中的（如`stratumList`）。因此，我们最好让接口返回的数据结构直接匹配我们的模板。由于我们无法控制后端返回的数据结构，所以需要在前端进行转换。但为了简化，假设后端返回的数据结构与前端需要的结构一致。因此，我们使用一个`projectDetail`对象来存储所有数据。另外，模板中`stratumList`是一个数组，我们使用`v-for`循环，所以需要确保`stratumList`是响应式的数组。但是，在模板中，我们使用`stratumList.value`？注意，在`<scriptsetup>`中，如果使用`ref`，则需要`.value`；如果使用`reactive`，则不需要。这里，我们使用`reactive`来定义整个项目详情，但`reactive`在解构时会失去响应性，所以如果我们需要在模板中直接使用属性（而不是`projectDetail.name`），可以使用`toRefs`。然而，模板中已经使用了大量的变量（如`name`、`projAddr`等），如果改为`projectDetail.name`，修改量很大。因此，我们可以这样做：使用`reactive`创建状态对象，然后使用`toRefs`将其转换为响应式引用，然后在模板中直接使用变量名。但是，`toRefs`会将对象的每个属性转换为ref，这样在模板中就可以直接使用。但注意，`stratumList`是一个数组，它也会被转换成ref，在模板中需要`stratumList.value`，这样反而更麻烦。因此，我们可以这样：使用`ref`来定义每个变量，然后在获取数据后分别赋值。但这样代码量很大。另一种方式：我们使用`reactive`定义状态对象，然后在模板中通过状态对象访问属性。修改模板，将`name`改为`projectDetail.name`，以此类推。考虑到模板代码很长，修改起来容易出错，我们可以保持原模板中的变量名不变，然后通过赋值将接口数据分别赋给这些变量。具体步骤：1.在`<scriptsetup>`中，将模板中使用的所有变量都定义为`ref`。2.在获取接口数据后，将返回的数据分别赋值给这些变量。但是，变量非常多，这样定义和赋值会很繁琐。权衡之后，我建议使用一个`reactive`对象`projectDetail`来存储所有数据，然后在模板中修改为`projectDetail.xxx`的形式。但是，由于时间关系，且代码量很大，我在这里采用另一种方式：使用计算属性来返回每个变量，这样我们就可以在模板中继续使用变量名。然而，这样会创建大量的计算属性，也不推荐。因此，我们采用直接修改模板的方式，将变量名替换为`projectDetail.xxx`。同时，地层列表`stratumList`我们仍然使用`stratumList`变量，因为它是一个数组，我们可以将其从`projectDetail`中提取出来，用`ref`单独定义。具体：定义：constprojectDetail=reactive({name:'',projAddr:'',diameter:'',//...其他字段stratumList:[]//地层列表});然后，在获取数据后，将整个返回的数据对象赋值给`projectDetail`（注意，如果返回的数据中有嵌套对象，可能会覆盖掉原来的响应式，所以我们可以使用`Object.assign`来合并，或者直接赋值）。但是，由于`projectDetail`是`reactive`对象，直接赋值会破坏响应式。所以我们可以：Object.assign(projectDetail,apiResponse.data);这样，`projectDetail`的属性会被更新，并保持响应式。然后，在模板中，将`name`替换为`projectDetail.name`，`projAddr`替换为`projectDetail.projAddr`，以此类推。对于`stratumList`，我们在模板中仍然使用`stratumList`，但注意，它现在是`projectDetail.stratumList`。我们可以使用计算属性来简化：conststratumList=computed(()=>projectDetail.stratumList);或者，在模板中直接使用`projectDetail.stratumList`。由于模板中`stratumList`使用了`v-for`，我们可以修改为`v-for="(item,index)inprojectDetail.stratumList"`。这样修改后，我们只需要在`<scriptsetup>`中定义一个`projectDetail`对象，然后在接口返回后赋值即可。但是，修改模板的工作量较大，我们需要逐一替换。考虑到时间，我们只给出关键代码，模板的修改需要根据实际情况进行。另外，对于地层特性选择框的`value`绑定，我们使用的是`:value="item.features1"`，这里`item`是`projectDetail.stratumList`中的元素，所以不需要修改。下面，我们开始编写代码：步骤：1.引入`onLoad`和`reactive`。2.定义`projectDetail`对象，包含所有需要的字段，初始值可以设为空或默认值。3.在`onLoad`中获取id，调用API，然后使用`Object.assign`更新`projectDetail`。4.在模板中，将原来直接使用的变量改为`projectDetail`中的对应属性。但是，模板中还有一些变量，比如`gdsObject`、`zdsObject`等，这些也需要从接口获取吗？如果是，那么也需要包含在`projectDetail`中。由于接口返回的数据结构未知，我们假设这些数据都在返回的数据中。另外，在模板中，还有一些变量没有在`<scriptsetup>`中定义，比如`disabled`，它可能是控制表单是否禁用的，这个我们可以在本地定义，不需要从接口获取。现在，我们修改代码：注意：由于原始模板很长，我只在关键部分进行修改。在`<scriptsetup>`中：</think>根据您的需求，这是一个项目详情页的实现方案，需要根据传入的 `id` 获取项目数据并渲染到界面上。以下是完整的解决方案： ### 解决方案 1. **获取路由参数**：在 `onLoad` 生命周期中获取路由传递的 `id` 2. **API 请求**：使用 `myDetailLogin` 接口根据 `id` 获取项目详情数据 3. **数据绑定**：将接口返回的数据绑定到模板的各个字段 4. **数据处理**：对接口返回的数据进行格式化处理，适配模板要求 ### 完整代码实现 ```vue <script setup> import { ref, onMounted, onLoad } from 'vue' import Layout from '@/layout/index.vue' import { myDetailLogin } from '../../apis/myDetail'; // 定义响应式变量 const projectDetail = ref({ name: '', projAddr: '', diameter: '', speed: '', propor: '', timesend: '', width: '', dayTunnelleCylindernumber: '', hourSpoildisposal: '', stratumList: [], gdsObject: { label: '', value: 0 }, zdsObject: { label: '', value: 0 }, xlq1Object: { label: '', value: 0 }, xlq2Object: { label: '', value: 0 }, tssObject: { label: '', value: 0 }, gdsDzsplsrl: 0, ttsSswmd: 0, ysSswmd: 0, ysZdsplsrl: 0, xlq1Dlwmd: 0, xlq2Dlwm: 0, // 输出数据 rollingScreen: '', vibratingScreen: '', xlq1: '', xlq2: '', flow: '', weight: '', solid: '', liquid: '', adjustmentPool: '', wasteMudPool: '', cleanWaterPool: '', newMudPool: '', industrialWaterPool: '', soilCollectionPit: '', qituliang: '', qijiangliang: '', xushuiliang: '', ganhuaConfiguration: '', qijiangConfiguration: '' }) // 定义筛选范围选项 const rollRange = ref([...]) // 保持原有的选项数据 const vibrationRange = ref([...]) const oneRange = ref([...]) const twoRange = ref([...]) const dehydrationRange = ref([...]) const characterOne = ref([...]) const characterTwo = ref([...]) const hobby = ref([...]) // 编辑数据 const editData = () => { uni.navigateTo({ url: `/pages/calculate/index?id=${id.value}` }); } // 获取路由参数 const id = ref('') onLoad((options) => { id.value = options.id fetchProjectDetail() }) // 获取项目详情 const fetchProjectDetail = async () => { try { const res = await myDetailLogin(id.value) // 处理地层数据 const processedStratumList = res.data.stratumList.map(stratum => { return { ...stratum, // 确保颗粒尺寸数据存在 particleSize: stratum.particleSize || { size1: '0', size2: '0', size3: '0', size4: '0', size5: '0', size6: '0', size7: '0' } } }) // 更新项目详情 projectDetail.value = { ...res.data, stratumList: processedStratumList, // 处理设备选项匹配 gdsObject: findOptionLabel(rollRange.value, res.data.gds), zdsObject: findOptionLabel(vibrationRange.value, res.data.zds), xlq1Object: findOptionLabel(oneRange.value, res.data.xlq1), xlq2Object: findOptionLabel(twoRange.value, res.data.xlq2), tssObject: findOptionLabel(dehydrationRange.value, res.data.tss), } } catch (error) { console.error('获取项目详情失败:', error) uni.showToast({ title: '加载数据失败', icon: 'error' }) } } // 辅助函数：根据值找到对应的选项标签 const findOptionLabel = (options, value) => { const found = options.find(opt => opt.value === value) return found ? { label: found.text, value } : { label: '', value: 0 } } </script> <template>  <view class="info"> <view class="label">项目名称</view> <view>{{ projectDetail.name }}</view> </view> <view class="project-item-input"> <input disabled :value="projectDetail.diameter" /> </view>  <view class="item" v-for="(item, index) in projectDetail.stratumList" :key="index"> <view>地层编号: <input disabled :value="item.num" /> </view>  </view>  <uni-data-select :value="projectDetail.gdsObject.label" /> <uni-number-box :value="projectDetail.gdsObject.value" />  <view class="content-item-input"> <input disabled :value="projectDetail.rollingScreen" /> </view> </template> ``` ### 代码解释 1. **数据管理**： - 使用 `projectDetail` ref 对象集中管理所有项目数据 - 在组件加载时 (`onLoad`) 获取路由参数 `id` - 调用 `fetchProjectDetail` 方法获取项目详情 2. **API 请求**： - 使用 `myDetailLogin(id.value)` 获取项目数据 - 对返回数据进行处理，特别是地层数据中的 `particleSize` 结构 3. **选项匹配**： - `findOptionLabel` 函数将设备选项值转换为可显示的标签文本 - 例如将 `gds` 的值匹配到 `rollRange` 中的文本描述 4. **模板绑定**： - 所有模板字段绑定到 `projectDetail` 的对应属性 - 使用 `v-for` 循环渲染地层列表 - 设备选项使用 `uni-data-select` 显示匹配的标签 5. **编辑功能**： - `editData` 方法跳转到编辑页并传递当前项目 `id` ### 注意事项 1. **API 响应结构**： - 确保后端返回的数据结构包含模板所需的所有字段 - 特别是地层列表中的 `particleSize` 需要包含所有颗粒尺寸字段 2. **选项配置**： - 保持筛选范围选项 (`rollRange` 等) 与后端保存的值一致 - 选项的 `value` 应该与后端存储的设备设置值匹配 3. **数据类型**： - 数值类型字段确保使用正确的数据类型 - 使用 `uni-number-box` 的字段需要数值类型而非字符串 4. **路由参数**： - 确保跳转到此页面时传递了正确的 `id` 参数 - 例如：`uni.navigateTo({ url: '/pages/detail?id=123' })` ### 相关问题

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

大家在看

STM32 的DMAMUX使用说明.pdf

半导体Semi ALD Tungsten W and TiN for Advanced Contact Application

STP-RSTP-MSTP配置实验指导书 ISSUE 1.3

基于FPGA的AD9910控制设计

Catia二次开发1

最新推荐

MATLAB矩阵和数组运算.ppt

网络幼教资源的查找与利用课件ppt.ppt

大学数学实验MATLAB简介.ppt

通信工程施工成本控制.ppt

嘉兴银行计算机辅助审计系统项目启动会.ppt

Evc Sql CE 程序开发实践与样例代码分享

【浪潮FS6700交换机配置实战】：生产环境快速部署策略与技巧

YOLO11训练批次参考

数据库考试复习必备五套习题精讲

【浪潮FS6700交换机故障诊断与排除】：掌握这些方法，让你的网络稳定如初