|
@@ -1,10 +1,21 @@
|
|
|
<template>
|
|
|
- <scroll-view class="container">
|
|
|
- <!-- Banner -->
|
|
|
- <view class="banner">
|
|
|
- <text class="banner-title">关键工序</text>
|
|
|
+ <view class="record-card flex-row">
|
|
|
+ <!-- <uni-tag class="tag-circle" v-for="(tag,index) in 6" :key="index" :text="tag+''" size="medium" type="primary" circle
|
|
|
+ @click="tabsClick(tag)"></uni-tag> -->
|
|
|
+ <view class="tag-circle" v-for="(tag,index) in maxcount" :key="index" @click="tabsClick(tag)">
|
|
|
+ <text class="circle" :class="{
|
|
|
+ 'bg-green': tag<=2,
|
|
|
+ 'bg-yellow': tag%3 === 0,
|
|
|
+ 'bg-red': tag%2 === 0,
|
|
|
+ 'bg-black': tag>=4
|
|
|
+ }">{{tag}}</text>
|
|
|
</view>
|
|
|
- <view class="card-list" style="flex-direction: row;">
|
|
|
+ </view>
|
|
|
+ <!-- #ifdef APP -->
|
|
|
+ <scroll-view style="flex:1">
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <!-- <view class="card-list" style="flex-direction: row;">
|
|
|
<uni-tag
|
|
|
v-for="(tag,index) in 6" :key="index"
|
|
|
:text="tag +''"
|
|
@@ -14,46 +25,33 @@
|
|
|
@click="tabsClick(tag)"
|
|
|
style="width:40rpx;margin: 0 10rpx;"
|
|
|
></uni-tag>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
|
|
|
<!-- 检查报告卡片列表 -->
|
|
|
<view v-if="processList.length" class="card-list">
|
|
|
- <view class="card card-view" v-for="item in processList" :key="item.id" v-show="current == item.id">
|
|
|
- <view class="divider"></view>
|
|
|
+ <view class="card card-view" v-for="item in processList" :key="item.id" v-show="current == item.id">
|
|
|
<view class="info-row">
|
|
|
<text class="label info-text">序号</text>
|
|
|
<view class="value info-text">
|
|
|
<uni-number-box v-model="item.id" disabled></uni-number-box>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="label info-text">产品码</text>
|
|
|
<view class="value info-text">
|
|
|
- <input
|
|
|
- v-model="item.productcode"
|
|
|
- class="surround"
|
|
|
- disabled
|
|
|
- ></input>
|
|
|
+ <input v-model="item.productcode" class="surround" disabled></input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="label info-text">检测项目</text>
|
|
|
<view class="value info-text">
|
|
|
- <input
|
|
|
- v-model="item.invname"
|
|
|
- class="surround"
|
|
|
- disabled
|
|
|
- ></input>
|
|
|
+ <input v-model="item.invname" class="surround" disabled></input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="label info-text">分类</text>
|
|
|
<view class="value info-text">
|
|
|
- <input
|
|
|
- v-model="item.model"
|
|
|
- class="surround"
|
|
|
- disabled
|
|
|
- ></input>
|
|
|
+ <input v-model="item.model" class="surround" disabled></input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
@@ -68,28 +66,25 @@
|
|
|
<uni-number-box v-model="item.lowerlimit" :min="0" disabled></uni-number-box>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="divider"></view>
|
|
|
<view class="info-row">
|
|
|
<text class="label info-text">实测值小</text>
|
|
|
<view class="value info-text">
|
|
|
- <uni-number-box v-model="item.minactval" :min="0" ></uni-number-box>
|
|
|
+ <uni-number-box v-model="item.minactval" :min="0"></uni-number-box>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="label info-text">实测值大</text>
|
|
|
<view class="value info-text">
|
|
|
- <uni-number-box v-model="item.maxactval" :min="0" ></uni-number-box>
|
|
|
- </view>
|
|
|
+ <uni-number-box v-model="item.maxactval" :min="0"></uni-number-box>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
- <text class="label info-text">结论</text>
|
|
|
+ <text class="label info-text">结论</text>
|
|
|
<view class="value info-text">
|
|
|
- <input
|
|
|
- v-model="item.conclusion"
|
|
|
- class="surround"
|
|
|
- ></input>
|
|
|
- </view>
|
|
|
+ <input v-model="item.conclusion" class="surround"></input>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -99,65 +94,77 @@
|
|
|
<image src="/static/image/empty.png" class="empty-img" />
|
|
|
<text class="empty-text">暂无检查检验记录</text>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="info-row btn-panel">
|
|
|
+ <button class="btn btn-first" @click="tabsClick(current-1)" v-if="current > 1">
|
|
|
+ 前一项
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-second" @click="tabsClick(current+1)" v-if="current < maxcount">
|
|
|
+ 下一项
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- #ifdef APP -->
|
|
|
</scroll-view>
|
|
|
+ <!-- #endif -->
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
ref
|
|
|
} from 'vue'
|
|
|
-
|
|
|
+
|
|
|
type Process = {
|
|
|
- id: number,
|
|
|
- productcode: string,
|
|
|
- invname: string,
|
|
|
- model: string,
|
|
|
- upperlimit: number,
|
|
|
- lowerlimit: number,
|
|
|
- minactval: number,
|
|
|
- maxactval: number,
|
|
|
- conclusion: string,
|
|
|
- applyDate: string,
|
|
|
- reportDate: string
|
|
|
- }
|
|
|
-
|
|
|
+ id : number,
|
|
|
+ productcode : string,
|
|
|
+ invname : string,
|
|
|
+ model : string,
|
|
|
+ upperlimit : number,
|
|
|
+ lowerlimit : number,
|
|
|
+ minactval : number,
|
|
|
+ maxactval : number,
|
|
|
+ conclusion : string,
|
|
|
+ applyDate : string,
|
|
|
+ reportDate : string
|
|
|
+ }
|
|
|
+ //检查项目最大数量
|
|
|
+ var maxcount = 5
|
|
|
var current = ref(1)
|
|
|
- var processList = ref<Process[]>([])
|
|
|
-
|
|
|
+ var processList = ref<Process[]>([])
|
|
|
+
|
|
|
const initProcessList = [{
|
|
|
- id: 1,
|
|
|
- productcode:"YH0001",
|
|
|
- invname: '对称度',
|
|
|
- model: '重要尺寸',
|
|
|
- upperlimit:0.5,
|
|
|
- lowerlimit:0,
|
|
|
- minactval:0,
|
|
|
- maxactval:0,
|
|
|
- conclusion:'',
|
|
|
- applyDate: '2025-08-20 09:15',
|
|
|
- reportDate: '2025-08-20 17:30'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- productcode:"YH0001",
|
|
|
- invname: '对称度',
|
|
|
- model: '重要尺寸',
|
|
|
- upperlimit:0.5,
|
|
|
- lowerlimit:0,
|
|
|
- minactval:0,
|
|
|
- maxactval:0,
|
|
|
- conclusion:'',
|
|
|
- applyDate: '2025-08-28 10:00',
|
|
|
- reportDate: '2025-08-28 13:40'
|
|
|
- }
|
|
|
+ id: 1,
|
|
|
+ productcode: "YH0001",
|
|
|
+ invname: '对称度',
|
|
|
+ model: '重要尺寸',
|
|
|
+ upperlimit: 0.5,
|
|
|
+ lowerlimit: 0,
|
|
|
+ minactval: 0,
|
|
|
+ maxactval: 0,
|
|
|
+ conclusion: '',
|
|
|
+ applyDate: '2025-08-20 09:15',
|
|
|
+ reportDate: '2025-08-20 17:30'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ productcode: "YH0001",
|
|
|
+ invname: '对称度',
|
|
|
+ model: '重要尺寸',
|
|
|
+ upperlimit: 0.5,
|
|
|
+ lowerlimit: 0,
|
|
|
+ minactval: 0,
|
|
|
+ maxactval: 0,
|
|
|
+ conclusion: '',
|
|
|
+ applyDate: '2025-08-28 10:00',
|
|
|
+ reportDate: '2025-08-28 13:40'
|
|
|
+ }
|
|
|
] as Process[];
|
|
|
-
|
|
|
- processList.value = initProcessList.filter(item=>item.id == current.value);
|
|
|
- const tabsClick = (obj: number) =>{
|
|
|
+
|
|
|
+ processList.value = initProcessList.filter(item => item.id == current.value);
|
|
|
+ const tabsClick = (obj : number) => {
|
|
|
current.value = obj
|
|
|
- processList.value = initProcessList.filter(item=>item.id == current.value)
|
|
|
+ processList.value = initProcessList.filter(item => item.id == current.value)
|
|
|
}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@@ -165,11 +172,11 @@
|
|
|
padding: 40rpx;
|
|
|
background-color: #f5f7fa;
|
|
|
height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .banner {
|
|
|
- background: linear-gradient(135deg, #6dd5ed, #2193b0);
|
|
|
+ .banner {
|
|
|
+ background: linear-gradient(135deg, #6dd5ed, #2193b0);
|
|
|
border-radius: 24rpx;
|
|
|
padding: 40rpx 30rpx;
|
|
|
margin-bottom: 40rpx;
|
|
@@ -182,9 +189,9 @@
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-
|
|
|
- .box{
|
|
|
- width: 40rpx;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 40rpx;
|
|
|
background-color: #909193;
|
|
|
border-radius: 15rpx;
|
|
|
}
|
|
@@ -193,10 +200,11 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.card-list .card-view {
|
|
|
margin-bottom: 30rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.card {
|
|
|
background-color: white;
|
|
|
border-radius: 20rpx;
|
|
@@ -231,16 +239,17 @@
|
|
|
align-items: center;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
+
|
|
|
.info-row .info-text {
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.label {
|
|
|
font-weight: bold;
|
|
|
color: #102a43;
|
|
|
min-width: 150rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.value {
|
|
|
flex: 1;
|
|
|
/* #ifdef APP-NVUE */
|
|
@@ -263,10 +272,11 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.card-info .card-info-view {
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.btn-group {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
@@ -285,11 +295,12 @@
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
- /* #ifndef APP-ANDROID */
|
|
|
+ /* #ifndef APP-ANDROID */
|
|
|
.main-btn:active {
|
|
|
opacity: 0.9;
|
|
|
transform: scale(0.98);
|
|
|
}
|
|
|
+
|
|
|
/* #endif */
|
|
|
|
|
|
.empty-card {
|
|
@@ -312,8 +323,83 @@
|
|
|
font-size: 30rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
+
|
|
|
.surround {
|
|
|
border: 1px solid silver;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
+
|
|
|
+ .record-card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex-row {
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-circle {
|
|
|
+ width: 50rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle {
|
|
|
+ height: 50rpx;
|
|
|
+ width: 50rpx;
|
|
|
+ background-color: #004a99;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-green {
|
|
|
+ background-color: seagreen;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-yellow {
|
|
|
+ background-color: yellow;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-black {
|
|
|
+ background-color: #102a43;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-red {
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-panel {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ background-color: #00aaff;
|
|
|
+ color: #fff;
|
|
|
+ border: 0 none;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-first {
|
|
|
+ left: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-second {
|
|
|
+ right: 15rpx;
|
|
|
+ }
|
|
|
</style>
|