<th class="text-nowrap" data-field="deduction4" data-halign="center" data-align="left" data-visible="true">扣末/t</th>对deduction4限制三位小数

时间: 2024-09-08 17:03:34 浏览: 135
在HTML表格中,`<th>` 标签通常用于定义表格的头部单元格。在您提供的代码片段中,`<th>` 标签有一个类名为 `text-nowrap`,并且有多个 `data-*` 属性,这些通常用于存储额外的数据信息,而不是直接影响表格的显示样式。 要限制 `deduction4` 这个字段保留三位小数,您通常需要使用CSS样式和可能的JavaScript脚本来实现这一点。CSS可以控制显示,而JavaScript可以处理数据的格式化。以下是一个示例,展示了如何使用CSS和JavaScript来限制一个数字输入框保留三位小数: HTML部分: ```html <input type="text" id="deduction4" data-field="deduction4" /> ``` CSS部分(限制显示宽度,虽然这并不会限制小数点后的位数): ```css #deduction4 { width: 100px; /* 限制输入框的显示宽度 */ } ``` JavaScript部分(使用`toFixed`方法限制小数点后的位数): ```javascript document.getElementById('deduction4').addEventListener('change', function() { this.value = parseFloat(this.value).toFixed(3); // 保留三位小数 }); ``` 如果您需要在服务器端进行验证,比如在提交表单之前,您应该使用服务器端语言(如PHP、Python、Java等)来确保用户输入的数据符合要求。
阅读全文

相关推荐

<template> <view> <view class="container"> <image class="bg-img" src="/https/wenku.csdn.net/static/back.jpg"></image> <view class="content"></view> </view> <view class="main-box"> <view class="horizontal-group"> <view class="son-box"> <image src="/https/wenku.csdn.net/static/b2.jpg" mode="aspectFill"></image> </view> <view class="info-panel"> <view class="result-title">检测结果</view> <view class="result-item"> <view class="label">目标数目:</view> <view class="value">4</view> </view> <view class="result-title" >目标选择</view> <view class="result-item"> <view class="label">类型:</view> <view class="value"></view> </view> <view class="result-item"> <view class="label">置信度:</view> <view class="value">93.1%</view> </view> <view class="confidence" :style="{color:getConfidenceColor(data,confidence)}"> </view> </view> </view> <view class="bottom-box"> <view class="dress-title">地址信息</view> <uni-table border stripe emptyText="暂无更多数据" > <uni-tr> <uni-th align="center">序号</uni-th> <uni-th align="center">时间</uni-th> <uni-th align="center">地址</uni-th> <uni-th align="center">详细</uni-th> </uni-tr> <uni-tr> <uni-td>1</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>内蒙古工业大学金川校区</uni-td> </uni-tr> <uni-tr> <uni-td>2</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>内蒙古工业大学</uni-td> </uni-tr> <uni-tr> <uni-td>3</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>呼和浩特站</uni-td> </uni-tr> </uni-table> </view> </view> </view> </template> <script> export default { data() { return { } }, methods: { getConfidenceColor(val){ if(val>90)return'#52c41a'; if(v

<template> <Layout :have-tab-bar="false" icon=""> 我的项目 <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' }) }这里是接口代码

e.target.innerHTML值为<svg viewBox="0 0 80 80" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 80px; height: 80px;"></svg>Target FilterTarget Filter<button title="Draw Target" type="button" class="ant-btn" style="margin-right: 20px;"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"></svg></button><button title="Clear" type="button" class="ant-btn"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"><g data-name="590779 946"></g></svg></button><button title="Draw Target" type="button" class="ant-btn" style="margin-right: 20px;"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"></svg></button><button title="Clear" type="button" class="ant-btn"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"><g data-name="590779 946"></g></svg></button>Min SizeMin Size<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="256" aria-valuemax="8191" step="1" status="normal" pxunit="14" icon="[object Object]" textalign="left" langlocale="[object Object]" class="ant-input-number-input" disabled="" value="256" aria-valuenow="256">*<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="256" aria-valuemax="8191" step="1" status="normal" pxunit="14" icon="[object Object]" controlwidth="0,13,1" langlocale="[object Object]" class="ant-input-number-input" disabled="" value="256" aria-valuenow="256">Detection AreaDetection Area<button title="Detection Area" type="button" class="ant-btn" style="margin-right: 20px;"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"></svg></button><button title="Clear" type="button" class="ant-btn"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"><g data-name="590779 946"></g></svg></button><button title="Detection Area" type="button" class="ant-btn" style="margin-right: 20px;"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"></svg></button><button title="Clear" type="button" class="ant-btn"><svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="width: 20px; height: 20px;"><g data-name="590779 946"></g></svg></button>RecognitionExposure<svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg>Face Recognition ThresholdFace Recognition Threshold<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="100" step="1" class="ant-input-number-input" value="85" aria-valuenow="85"> (0-100)<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="100" step="1" class="ant-input-number-input" value="85" aria-valuenow="85"> (0-100)Max Face Recognition Angle DeviationMax Face Recognition Angle Deviation<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="90" step="1" class="ant-input-number-input" value="30" aria-valuenow="30"> (0-90)<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="90" step="1" class="ant-input-number-input" value="30" aria-valuenow="30"> (0-90)Anti-spoofing LevelAnti-spoofing Level<label class="ant-radio-wrapper"><input type="radio" class="ant-radio-input" value="0" checked="">CloseClose</label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><input type="radio" class="ant-radio-input" value="63">GeneralGeneral</label><label class="ant-radio-wrapper"><input type="radio" class="ant-radio-input" value="127">HighHigh</label><label class="ant-radio-wrapper"><input type="radio" class="ant-radio-input" value="255">Ultra HighUltra High</label>Valid Face Interval (sec)Valid Face Interval (sec)<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="60" step="1" status="normal" pxunit="14" icon="[object Object]" textalign="left" langlocale="[object Object]" class="ant-input-number-input" value="3" aria-valuenow="3">(1-60)Invalid Face Interval (sec)Invalid Face Interval (sec)<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="60" step="1" status="normal" pxunit="14" icon="[object Object]" textalign="left" langlocale="[object Object]" class="ant-input-number-input" value="10" aria-valuenow="10">(0-60)Recognition DistanceRecognition Distance<input autocomplete="off" type="search" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_1_list" aria-autocomplete="list" aria-controls="rc_select_1_list" aria-activedescendant="rc_select_1_list_0" readonly="" unselectable="on" value="" id="rc_select_1" style="opacity: 0;">1.5 meters<svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg>Mask modeMask mode<input autocomplete="off" type="search" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_2_list" aria-autocomplete="list" aria-controls="rc_select_2_list" aria-activedescendant="rc_select_2_list_0" readonly="" unselectable="on" value="" id="rc_select_2" style="opacity: 0;">No Authorization without Wearing Face Mask<svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg>Face Mask ThresholdFace Mask Threshold<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" step="1" class="ant-input-number-input" value="75"> (0-100)<svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"></svg><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" step="1" class="ant-input-number-input" value="75"> (0-100)Snapshot ModeSnapshot Mode<button value="false" pxunit="14" checkstatus="normal" icon="[object Object]" langlocale="[object Object]" type="button" role="switch" aria-checked="false" class="ant-switch"></button>Face Snapshot EnhancementFace Snapshot Enhancement<button value="false" pxunit="14" checkstatus="normal" icon="[object Object]" langlocale="[object Object]" type="button" role="switch" aria-checked="false" class="ant-switch"></button>BeautifierBeautifier<button value="false" pxunit="14" checkstatus="normal" icon="[object Object]" langlocale="[object Object]" type="button" role="switch" aria-checked="false" class="ant-switch"></button>Enable Helmet DetectionEnable Helmet Detection<button value="false" pxunit="14" checkstatus="normal" icon="[object Object]" langlocale="[object Object]" type="button" role="switch" aria-checked="false" class="ant-switch"></button>Multi-face RecognitionMulti-face Recognition<button value="false" pxunit="14" checkstatus="normal" icon="[object Object]" langlocale="[object Object]" type="button" role="switch" aria-checked="false" class="ant-switch"></button>Night ModeNight Mode<button value="true" pxunit="14" checkstatus="normal" icon="[object Object]" langlocale="[object Object]" type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"></button>Smart Screen Light UpSmart Screen Light Up<button value="true" pxunit="14" checkstatus="normal" icon="[object Object]" langlocale="[object Object]" type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"></button><button type="button" class="ant-btn ant-btn-primary right">Apply</button><button type="button" class="ant-btn left">Refresh</button><button type="button" class="ant-btn right">Default</button>,为什么e.target.innerHTML.test(/div/)会报错,Uncaught TypeError: e.target.innerHTML.test is not a function

<template> <view class="template-login"> <view class="login"> <view class="login__bg login__bg--top"> <image class="bg" src="/https/wenku.csdn.net/static/login_top2.jpg" mode="widthFix"></image> </view> <view class="login__wrapper"> <view class="tn-margin-left tn-margin-right tn-text-bold tn-text-center tn-color-indigo" style="font-size: 100rpx;"> 安博源 </view><view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"> <block v-if="currentModeIndex === 0"> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-phone"></view> </view> <view class="login__info__item__input__content"> <input v-model="phoneNumber" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" /> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-safe"></view> </view> <view class="login__info__item__input__content login__info__item__input__content--verify-code"> <input v-model="verifyCode" placeholder-class="input-placeholder" placeholder="请输入验证码" /> </view> <view class="login__info__item__input__right-verify-code" @tap.stop="getCode"> <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button> </view> </view> </block> <block v-if="currentModeIndex === 1"> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-phone"></view> </view> <view class="login__info__item__input__content"> <input v-model="phoneNumber" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" /> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-safe"></view> </view> <view class="login__info__item__input__content login__info__item__input__content--verify-code"> <input v-model="verifyCode" placeholder-class="input-placeholder" placeholder="请输入验证码" /> </view> <view class="login__info__item__input__right-verify-code" @tap.stop="getCode"> <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-lock"></view> </view> <view class="login__info__item__input__content"> <input v-model="password" :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" /> </view> <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword"> <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view> </view> </view> </block>

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>入库模块</title> <style> body { background-color: #f8f9fa; font-family: Arial, sans-serif; } .container { max-width: 1000px; min-height: 600px; /* 可根据需求调整这个值来改变整体框的最小高度 */ } .header { margin: 20px 0; color: #343a40; font-weight: bold; } .form-group { margin-bottom: 1.5rem; /* 增加表单组之间的间距 */ } .list-group-item { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: space-between; align-items: center; width: 100%; padding: 5px 10px; border: 1px solid #dee2e6; border-radius: 5px; box-sizing: border-box; } .list-group-item span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card { border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 20px; background-color: #ffffff; } .btn-primary { background-color: #007bff; border: none; width: 200px; /* 设置按钮宽度为 50 像素 */ } .btn-primary:hover { background-color: #0056b3; } footer { margin-top: 20px; padding: 10px 0; background-color: #343a40; color: white; border-radius: 0 0 15px 15px; } /* 为查询按钮添加左外边距 */ .btn-query { margin-left: 100px; } /* 新增的按钮容器样式 */ .button-container { text-align: center; } /* 新增的样式,设置入库编号文本框的尺寸 */ .small-input { width: 150px; /* 你可以根据需要调整宽度 */ } /* 新增样式,使入库编号输入框在同一行显示 */ .id-inputs { display: flex; flex-wrap: wrap; align-items: center; } .id-inputs label { margin-right: 5px; } .id-row { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } </style> </head> <body> 金铜线入库模块 <form method="POST"> <label for="item">整半卷类型</label> <select class="form-control" id="category" name="category" required> <option value="" disabled selected>请选择入库类型</option> <option value="整卷">整卷</option> <option value="半卷">半卷</option> {% if category %} <option value="{{ category }}" selected>{{ category }}</option> {% endif %} </select> <label for="item">入库型号</label> <select class="form-control" id="type" name="item" required> <option value="" disabled selected>请选择物品编号</option> <option value="70694">70694 - AU</option> <option value="70704">70704 - AU</option> <option value="70774">70774 - AU</option> <option value="70794">70794 - CU</option> <option value="70804">70708 - CU</option> <option value="70784">7058779 - CU</option> </select> <label for="batchNumber">入库批号</label> <input type="text" class="form-control" id="batchNumber" name="batchNumber" required> <label for="ID1">编号#1</label> <input type="text" class="form-control small-input" id="ID1" name="ID1"> <label for="ID2">编号#2</label> <input type="text" class="form-control small-input" id="ID2" name="ID2"> <label for="ID3">编号#3</label> <input type="text" class="form-control small-input" id="ID3" name="ID3"> <label for="ID4">编号#4</label> <input type="text" class="form-control small-input" id="ID4" name="ID4"> <label for="ID5">编号#5</label> <input type="text" class="form-control small-input" id="ID5" name="ID5"> <label for="ID6">编号#6</label> <input type="text" class="form-control small-input" id="ID6" name="ID6"> <label for="ID7">编号#7</label> <input type="text" class="form-control small-input" id="ID7" name="ID7"> <label for="ID8">编号#8</label> <input type="text" class="form-control small-input" id="ID8" name="ID8"> <label for="ID9">编号#9</label> <input type="text" class="form-control small-input" id="ID9" name="ID9"> <label for="ID10">编号#10</label> <input type="text" class="form-control small-input" id="ID10" name="ID10"> <label for="ID11">编号#11</label> <input type="text" class="form-control small-input" id="ID11" name="ID11"> <label for="ID12">编号#12</label> <input type="text" class="form-control small-input" id="ID12" name="ID12"> <label for="quantity">入库数量</label> <input type="number" class="form-control" id="quantity" name="quantity" value="1" required> <label for="date">入库日期</label> <input type="datetime-local" class="form-control" id="date" name="date" required value="{{ date }}"> <label for="shift">入库班次</label> <select class="form-control" id="shift" name="shift" required> <option value="" disabled selected>请选择班次</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> {% if shift %} <option value="{{ shift }}" selected>{{ shift }}</option> {% endif %} </select> <label for="barge">员工工号</label> <input type="text" class="form-control small-input" id="barge" name="barge" required value="{{ username }}"> <button type="submit" class="btn btn-primary">入库</button> <button type="button" class="btn btn-primary btn-query" id="queryButton">查询</button> </form> 当前库存 入库类型 在库型号 在库数量 {% for data in inventory_data %} {{ data.category }} {{ data.item }} {{ data.quantity }} {% endfor %} 返回首页
本系统用于管理金铜线的入库、出库和库存报告 任何问题,请联系YanNiZong(cell:13910052243)
<script> function submitForm(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 const data = { category: document.getElementById('category').value, type: document.getElementById('type').value, batchNumber: document.getElementById('batchNumber').value, ID1: document.getElementById('ID1').value, ID2: document.getElementById('ID2').value, ID3: document.getElementById('ID3').value, ID4: document.getElementById('ID4').value, ID5: document.getElementById('ID5').value, ID6: document.getElementById('ID6').value, ID7: document.getElementById('ID7').value, ID8: document.getElementById('ID8').value, ID9: document.getElementById('ID9').value, ID10: document.getElementById('ID10').value, ID11: document.getElementById('ID11').value, ID12: document.getElementById('ID12').value, quantity: document.getElementById('quantity').value, date: document.getElementById('date').value, shift: document.getElementById('shift').value, barge: document.getElementById('barge').value }; console.log(data) fetch('/into_storage', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.json()) .then(result => { alert(result.message); // 简单提示结果 if (result.status === 'success') { // 重置表单(可选) document.getElementById('batchNumber').value = ''; for(let i=1; i<=12; i++) { document.getElementById(ID${i}).value = ''; } } }) .catch(error => alert('网络错误: ' + error)); } // 绑定表单提交事件 document.querySelector('form').addEventListener('submit', submitForm); </script> </body> </html> 帮忙优化一下修改,要求绑定入库按钮id来触发传输数据到后端flask框架,使用fetch交互,其它按钮先不用管

<template> <view class=“template-login”> <view class=“login”> <block v-if="currentModeIndex === 0"> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-phone"></view> </view> <view class="login__info__item__input__content"> <input v-model="phoneNumber" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" /> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-safe"></view> </view> <view class="login__info__item__input__content login__info__item__input__content--verify-code"> <input v-model="verifyCode" placeholder-class="input-placeholder" placeholder="请输入验证码" /> </view> <view class="login__info__item__input__right-verify-code" @tap.stop="getCode"> <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button> </view> </view> </block> <block v-if="currentModeIndex === 1"> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-phone"></view> </view> <view class="login__info__item__input__content"> <input v-model="phoneNumber" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" /> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-safe"></view> </view> <view class="login__info__item__input__content login__info__item__input__content--verify-code"> <input v-model="verifyCode" placeholder-class="input-placeholder" placeholder="请输入验证码" /> </view> <view class="login__info__item__input__right-verify-code" @tap.stop="getCode"> <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-lock"></view> </view> <view class="login__info__item__input__content"> <input v-model="password" :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" /> </view> <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword"> <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view> </view> </view> </block>

uniapp 怎么设置锚点 多个元素设置锚点,当滚动到某个锚点时,标记该锚点<u-row align="top" gutter="0" style="width: 100%;"> <u-col span="3"> <scroll-view scroll-y="true" class="sh_aside"> <view class="aside-item flex-fsfs" v-for="(item,i) in categories" :key="i" @tap="selectCategory(item)"> <text :class="['nomal-line',item.code==cateVal? 'active-line':'']"></text> <text :class="['nomal-desc',item.code==cateVal? 'active-desc':'']">{{item.name}}</text> </view> <view class="empty" style="padding-top: 20vh;" v-if="categories.length == 0"> 暂无分类 </view> </scroll-view> </u-col> <u-col span="9" > <view class="sh_main"> <view class="drop-box"> <u-dropdown> <u-dropdown-item active-color="#3296FA" inactive-color="#666666" height="500" :options="nutrients" v-model="nutVal" :title="crtNutrient.label" @change="dropdownChange"></u-dropdown-item> </u-dropdown> </view> <scroll-view scroll-y="true" class="sh_artcle" :scroll-into-view="crtView" > <view class="part" v-for="item,index in ingredientList" :key="index" :id="item.customId"> <view class="part-title"> {{item.name}} </view> <view class="flex-fsc part-list" v-for="sc,i in item.list" :key="i"> <image src="/https/wenku.csdn.net/static/images/manbing/recipes_sc_mrbj.png" mode="aspectFill" style="width: 83rpx;height: 83rpx;"></image> <view class=""> <view class=""> {{sc.name}} </view> <view class="part-text"> 营养元素 </view> </view> </view> <view class="empty" v-if="item.list.length == 0"> 暂无数据 </view> </view> <view class="empty" style="padding-top: 20vh;" v-if="ingredientList.length == 0"> 暂无数据 </view> </scroll-view> </view> </u-col> </u-row>

大家在看

recommend-type

复盛压缩机选型软件.rar )

此款为官方专用,简单的压缩机可以选择。SRL型的没有,暂时不能使用请谨慎选择
recommend-type

多模态生理数据预测状态-飞行员

对应文章https://blog.csdn.net/devshilei/article/details/135049559中的图片以及logo
recommend-type

cubase 5 机架 好用方便的机架文件,内含效果器插件

cubase 5 机架 好用方便的机架文件,内含效果器插件
recommend-type

ISO 6469-3-2021 电动道路车辆 - 安全规范 - 第 3 部分:电气安全.docx

国际标准,txt格式 本文件规定了电力推进系统电压 B 级电路和电动道路车辆导电连接辅助电力系统的电气安全要求。 它规定了保护人员免受电击和热事故的电气安全要求。 它没有为制造、维护和维修人员提供全面的安全信息。 注 1: 碰撞后的电气安全要求在 ISO 6469-4 中有描述。 注 2:ISO 17409 描述了电动道路车辆与外部电源的导电连接的电气安全要求。 注 3: 外部磁场无线功率传输的特殊电气安全要求 在 ISO 19363 中描述了电力供应和电动车辆。 注 4 摩托车和轻便摩托车的电气安全要求在 ISO 13063 系列中有描述。 2 引用标准 以下文件在文中的引用方式是,其部分或全部内容构成本文件的要求。对于注明日期的参考文献,只有引用的版本适用。对于未注明日期的引用,引用文件的最新版本 (包括任何修订) 适用。 ISO 17409: 电动道路车辆。导电动力传输。安全要求 ISO 20653,道路车辆 - 保护程度 (IP 代码)- 电气设备防异物、水和接触的保护 IEC 60664 (所有部件) 低压系统内设备的绝缘配合 IEC 60990:2016,接触电流和保护导体
recommend-type

中国检查徽章背景的检察机关PPT模板

这是一套中国检查徽章背景的,检察机关PPT模板。第一PPT模板网提供精美军警类幻灯片模板免费下载; 关键词:蓝天白云、华表、彩带、中国检查徽章PPT背景图片,中国检查院工作汇报PPT模板,蓝色绿色搭配扁平化幻灯片图表,.PPTX格式;

最新推荐

recommend-type

§1.1-MATLAB操作界面.ppt

§1.1-MATLAB操作界面.ppt
recommend-type

英语-信息化教学设计.doc

英语-信息化教学设计.doc
recommend-type

全面解析SOAP库包功能与应用

从给定的文件信息中,我们可以提取到的核心知识点主要集中在“SOAP”这一项技术上,由于提供的信息量有限,这里将尽可能详细地解释SOAP相关的知识。 首先,SOAP代表简单对象访问协议(Simple Object Access Protocol),是一种基于XML的消息传递协议。它主要用于在网络上不同应用程序之间的通信。SOAP定义了如何通过HTTP和XML格式来构造消息,并规定了消息的格式应遵循XML模式。这种消息格式使得两个不同平台或不同编程语言的应用程序之间能够进行松耦合的服务交互。 在分布式计算环境中,SOAP作为一种中间件技术,可以被看作是应用程序之间的一种远程过程调用(RPC)机制。它通常与Web服务结合使用,Web服务是使用特定标准实现的软件系统,它公开了可以通过网络(通常是互联网)访问的API。当客户端与服务端通过SOAP进行通信时,客户端可以调用服务端上特定的方法,而不需要关心该服务是如何实现的,或者是运行在什么类型的服务器上。 SOAP协议的特点主要包括: 1. **平台无关性**:SOAP基于XML,XML是一种跨平台的标准化数据格式,因此SOAP能够跨越不同的操作系统和编程语言平台进行通信。 2. **HTTP协议绑定**:虽然SOAP协议本身独立于传输协议,但是它通常与HTTP协议绑定,这使得SOAP能够利用HTTP的普及性和无需额外配置的优势。 3. **消息模型**:SOAP消息是交换信息的载体,遵循严格的结构,包含三个主要部分:信封(Envelope)、标题(Header)和正文(Body)。信封是消息的外壳,定义了消息的开始和结束;标题可以包含各种可选属性,如安全性信息;正文则是实际的消息内容。 4. **错误处理**:SOAP提供了详细的错误处理机制,可以通过错误码和错误信息来描述消息处理过程中的错误情况。 5. **安全性和事务支持**:SOAP协议可以集成各种安全性标准,如WS-Security,以确保消息传输过程中的安全性和完整性。同时,SOAP消息可以包含事务信息,以便于服务端处理事务性的业务逻辑。 在描述中提到的“所有库包”,这可能意味着包含了SOAP协议的实现、相关工具集或库等。由于信息不足,这里的“库包”具体指的是什么并不清楚,但可以理解为与SOAP相关的软件开发工具包(SDK)或框架,它们使得开发者可以更加方便地创建SOAP消息,处理SOAP请求和响应,以及实现Web服务。 至于“压缩包子文件的文件名称列表”中只有一个单词“soap”,这可能表明实际文件内容仅有一个与SOAP相关的文件,或者是一个压缩包文件的名称为“soap”。由于缺乏更详尽的文件列表,无法进一步分析其可能的内容。 综上所述,SOAP作为一种实现Web服务的技术标准,通过HTTP和XML实现系统间的通信。它支持跨平台、跨语言的服务调用,并具备强大的安全性和错误处理机制。在具体应用中,开发者可能需要用到与之相关的库包或工具集来开发和部署Web服务。
recommend-type

编程语言选择指南:为不同项目量身定制的编程语言策略

# 摘要 选择合适的编程语言对于软件项目的成功至关重要。本文首先探讨了编程语言选择的重要性,并对不同分类和特点的编程语言进行了详尽分析,重点介绍了静态与动态类型、解释型与编译型、面向对象与函数式编程语言的区别和应用场景。接着,文章根据项目需求详细讨论了如何选择适合的编程语言,包括功能需求、性能考量、开发效率和团队技能等关键因素。通过实践案例分析,本文进一步探讨了不同
recommend-type

手写vue2的插件vue-router

<think>我们正在手写一个简化版的vue-router插件,用于Vue2。主要步骤:1.定义一个类VueRouter,包含路由映射、当前路由状态等。2.实现install方法,用于Vue.use()安装插件,在install方法中:-混入beforeCreate生命周期钩子,在组件创建时初始化router。-全局注册router-view和router-link组件。3.实现路由映射:将路由配置转换为路径与组件的映射表。4.监听hashchange事件(或者使用history模式,这里以hash模式为例)来响应路由变化。5.实现router-view组件,根据当前路由渲染对应组件。6.实现
recommend-type

《软件工程:实践者的方法》第6版课件解析

根据提供的文件信息,我们可以推断出以下知识点: 1. 课程名称:“SOFTWARE ENGINEERING A practitioner's approach 6e”,表明这是关于软件工程的课程教材,第6版,针对实践者的教学方法。 2. 版本信息:由于标题中明确指出是第6版(6e),我们知道这是一系列教科书或课件的最新版本,这意味着内容已经根据最新的软件工程理论和实践进行了更新和改进。 3. 课程类型:课程是针对“practitioner”,即实践者的,这表明教材旨在教授学生如何将理论知识应用于实际工作中,注重解决实际问题和案例学习,可能包含大量的项目管理、需求分析、系统设计和测试等方面的内容。 4. 适用范围:文件描述中提到了“仅供校园内使用”,说明这个教材是专为教育机构内部学习而设计的,可能含有某些版权保护的内容,不允许未经授权的外部使用。 5. 标签:“SOFTWARE ENGINEERING A practitioner's approach 6e 软件工程”提供了关于这门课程的直接标签信息。标签不仅重复了课程名称,还强化了这是关于软件工程的知识。软件工程作为一门学科,涉及软件开发的整个生命周期,从需求收集、设计、编码、测试到维护和退役,因此课程内容可能涵盖了这些方面。 6. 文件命名:压缩包文件名“SftEng”是“SOFTWARE ENGINEERING”的缩写,表明该压缩包包含的是软件工程相关的教材或资料。 7. 关键知识点:根据标题和描述,我们可以推测课件中可能包含的知识点有: - 软件工程基础理论:包括软件工程的定义、目标、原则和软件开发生命周期的模型。 - 需求分析:学习如何获取、分析、记录和管理软件需求。 - 系统设计:涉及软件架构设计、数据库设计、界面设计等,以及如何将需求转化为设计文档。 - 实现与编码:包括编程语言的选择、代码编写规范、版本控制等。 - 测试:软件测试的原则、方法和测试用例的设计。 - 项目管理:时间管理、团队协作、风险管理、成本估算等与软件项目成功相关的管理活动。 - 质量保证:软件质量模型、质量度量和质量控制措施。 - 维护和演化:软件部署后如何进行持续维护、升级和系统退役。 - 软件工程的新兴领域:包括敏捷开发方法、DevOps、用户体验设计等现代软件开发趋势。 8. 版权和使用限制:由于是专供校园内使用的教材,课件可能包含版权声明和使用限制,要求用户在没有授权的情况下不得对外传播和用于商业用途。 综上所述,这门课程的课件是为校园内的学生和教职员工设计的,关于软件工程的全面教育材料,覆盖了理论知识和实践技巧,并且在版权方面有所限制。由于是最新版的教材,它很可能包含了最新的软件工程技术和方法论。
recommend-type

QUARTUS II 13.0全攻略:新手到专家的10个必备技能

# 摘要 本文旨在详细介绍QUARTUS II 13.0软件的使用,包括其安装、FPGA基础、项目设置、设计流程、高级功能应用
recommend-type

IllegalArgumentException.class

<think>首先,用户的问题是:“我想查找与Java中IllegalArgumentException类相关的信息请问Java IllegalArgumentExceptionclass usageand examples”。这翻译成英文是:“Iwant tofind informationrelated tothe IllegalArgumentExceptionclass inJava.Please provideusage andexamples ofJavaIllegalArgumentException class.” 根据系统级指令:-所有行内数学表达式必须使用$...$格式,
recommend-type

高效进程监控工具的探索与应用

根据提供的文件信息,我们可以推断出一系列与“监控进程东东”相关的知识点。这些信息暗示了该工具可能是一个用来监控操作系统中运行的进程的应用程序。以下是对这些知识点的详细说明: ### 标题知识点: 1. **监控进程的意义**:在IT行业中,监控进程是指持续跟踪系统中运行的进程状态和行为。进程监控对于系统管理员和开发人员来说至关重要,它可以帮助他们理解系统在特定时刻的行为,以及在出现问题时快速定位问题所在。 2. **“超级好用”的含义**:这通常意味着该监控工具具有用户友好的界面、高效的性能、详细的进程信息展示以及可能具备自动化问题检测与报告的功能。超级好用还可能意味着它易于安装、配置和使用,即使是对于非技术用户。 ### 描述知识点: 1. **重复强调“超级好用”**:这种表述强调该工具的易用性和高效性,暗示它可能采用了直观的用户界面设计,以及优化过的性能,能够减少系统负载,同时提供快速且精准的进程信息。 2. **监控进程工具的常见功能**:通常包括实时进程列表显示、进程资源使用情况监控(CPU、内存、磁盘I/O、网络活动等)、进程启动和结束的跟踪、进程关联性分析(例如父子关系)、以及可能的进程安全监控。 ### 标签知识点: 1. **“监控”标签**:这个标签明确指出了工具的主要用途,即监控。在IT领域,监控是指使用特定的软件或硬件工具来持续检测和记录系统、网络或应用的性能和可用性。 ### 压缩包子文件的文件名称列表知识点: 1. **procexp.chm**:这很可能是一个帮助文件(CHM是Microsoft Compiled HTML Help文件的扩展名),提供了监控进程工具的详细用户指南、使用说明、常见问题解答和功能介绍。CHM文件是将HTML页面、索引和其他资源编译成单一文件的格式,方便用户查阅。 2. **procexp.exe**:这指的是实际的监控进程应用程序的可执行文件。EXE文件是Windows操作系统下的可执行程序文件,用户通过双击它可以启动应用程序。该程序可能包含了用于监控进程的核心功能,比如列出所有运行中的进程,显示它们的详细信息,进行性能分析等。 3. **Eula.txt**:这是一个文本文件,通常包含了最终用户许可协议(End-User License Agreement,EULA)。EULA是供应商和用户之间的法律协议,规定了软件的合法使用条件,包括用户能做什么和不能做什么,以及版权和担保声明。 ### 综合知识点: - **监控进程工具选择标准**:一个优质的监控进程工具应当包括实时更新、多层次的系统信息(如进程树、模块、句柄等)、过滤和搜索功能、安全性高以及对用户行为影响小等特点。 - **监控进程工具在不同场景下的应用**:例如,在开发过程中,开发者可以使用进程监控工具来分析应用程序运行状况,进行性能调优;在安全领域,安全专家可以利用这些工具来发现可疑进程,防止恶意软件的运行。 - **监控进程工具的未来发展**:随着技术的不断进步,监控进程工具也在不断演化,可能会集成更多的智能分析技术,如机器学习算法来预测系统问题,或者提供云平台支持,使得跨区域的进程监控成为可能。 总体来说,上述文件信息所暗示的“超级好用的监控进程东东”可能是一个集多种功能于一身的进程监控工具,它能够帮助用户有效地管理和维护计算机系统,保障其稳定性和安全性。通过提供的文件列表,我们可以得知该工具附带详细的帮助文档,以及用户可能需要的许可协议,这体现了其对用户友好性和专业性的重视。
recommend-type

【Catalyst 9800无线控制器实战手册】:从故障排查到网络优化的必备技能

# 1. Catalyst 9800无线控制器概述 Catalyst 9800无线控制器是思科公司推出的针对企业级无线网络的管理设备,它负责管理和优化无线网络环境。作为一款无线局域网控制器,9800系列在设计上集成了先进的网络功