仪表换新搭建

This commit is contained in:
Zy
2026-04-29 18:31:34 +08:00
parent 5e6dfafe5b
commit 72b72bf8a4
6 changed files with 398 additions and 14 deletions

View File

@@ -0,0 +1,74 @@
<template>
<view class="page_container addreplacement_box">
<uni-forms border :modelValue="formData" label-position="left">
<uni-forms-item label="仪表类型">
<uni-data-checkbox v-model="formData.type" :localdata="items"></uni-data-checkbox>
</uni-forms-item>
<uni-forms-item label="设备编号">
<uni-easyinput
:input-border="false"
v-model="formData.deviceCode"
placeholder="请输入设备号"
>
<template #right>
<uni-icons type="scan" color="#737373"></uni-icons>
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="房屋号">
<uni-easyinput
:inputBorder="false"
@tap="handleClick"
disabled
placeholderStyle="color: #999999"
placeholder="请选择安装房屋"
>
<template #right>
<uni-icons type="forward" color="#737373"></uni-icons>
</template>
</uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const formData = ref({
type: 1,
deviceCode: '',
houseId: ''
})
const items = [
{
text: '水表',
value: 1
},
{
text: '电表',
value: 2
}
]
function handleClick() {
console.log('click')
}
</script>
<style lang="scss" scoped>
.addreplacement_box {
background: #ffffff;
&:deep(.uni-forms-item) {
display: flex;
align-items: center;
height: 90rpx;
line-height: 90rpx;
padding: 0;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
&:deep(.uni-easyinput__content) {
background: none !important;
}
}
</style>

View File

@@ -0,0 +1,161 @@
<template>
<view class="page_container checkouthouse_box">
<view class="search_box">
<view
@click="handleClick"
class="search_view flex-center"
v-if="!queryParmas.value.trim() && Searching"
>
<uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
<text>请输入关键字进行搜索</text>
</view>
<uni-easyinput
@blur="handleInput"
@change="handleSearch"
:focus="true"
ref="inputRef"
v-model="queryParmas.value"
v-else
/>
</view>
<view class="search_list">
<scroll-view
style="height: 100%"
lower-threshold="160"
scroll-y="true"
@scrolltolower="scrolltolower"
>
<radio-group @change="radioChange">
<label v-for="(item, index) in searchlist" :key="index">
<view
class="search_item flex flex-between"
:class="{
active: checkoutHouseid === item.id
}"
>
<view class="flex items-center flex-1">
<!-- checkout -->
<radio color="#4d5dfa" :value="item.id" />
<!-- housename -->
<text class="address">{{ item.address }}</text>
</view>
<!-- username -->
<view class="username">{{ item.username }}</view>
</view>
</label>
</radio-group>
</scroll-view>
</view>
</view>
<!-- 滚动 高度如何计算? -->
</template>
<script setup lang="ts">
import { ref } from 'vue'
const Searching = ref(true)
const queryParmas = ref({
value: '',
pageNum: 1,
pageSize: 12
})
/** 点击时切换到input,并聚焦 */
function handleClick() {
Searching.value = false
}
/** 判断 失去焦点时 切换回 view */
function handleInput() {
if (queryParmas.value.value.trim()) {
Searching.value = true
}
}
function handleSearch() {
console.log('search')
}
const checkoutHouseid = ref(null)
/** 选择房屋,返回id*/
function radioChange(res) {
checkoutHouseid.value = Number(res.detail.value)
}
//
const searchlist = ref()
function getlist() {
const allnum = queryParmas.value.pageNum * queryParmas.value.pageSize
searchlist.value = Array.from({ length: allnum }).map((_, index) => {
return {
address: 'A栋3单元301',
username: '里番',
id: index + 1
}
})
}
getlist()
function scrolltolower() {
queryParmas.value.pageNum += 1
getlist()
}
</script>
<style scoped lang="scss">
.checkouthouse_box {
background: #f9f9f9;
height: 100%;
overflow: hidden;
box-sizing: border-box;
.search_box {
height: 80rpx;
.search_view {
height: 80rpx;
line-height: 80rpx;
background: #f3f3f3;
border-radius: 8rpx 8rpx 8rpx 8rpx;
font-weight: 400;
font-size: 32rpx;
color: rgba(0, 0, 0, 0.26);
line-height: 48rpx;
text-align: center;
}
}
.search_list {
height: calc(100% - 140rpx);
background-color: #4d5dfa;
margin-top: 20rpx;
.search_item {
height: 116rpx;
margin-bottom: 20rpx;
background-color: #ffffff;
box-sizing: border-box;
padding: 40rpx;
padding-right: 0;
&:deep(radio) {
transform: scale(0.68);
}
.address {
margin-left: 20rpx;
font-weight: 550;
font-size: 32rpx;
color: #222222;
line-height: 40rpx;
}
.username {
font-weight: 550;
font-size: 32rpx;
color: #222222;
line-height: 40rpx;
width: 180rpx;
text-align: left;
}
&.active {
background: #f5faff;
border: 1rpx solid #4d5dfa;
}
}
}
}
</style>

View File

@@ -0,0 +1,132 @@
<template>
<view class="page_container replacement_record_box">
<view class="nav flex items-center">
<view class="line"></view>
<text class="title">仪表换新记录</text>
</view>
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
<view class="instrument_body">
<view
class="instrument_items flex items-center flex-between"
v-for="(item, index) in infolist"
:key="index"
>
<view class="flex items-center">
<image src="/static/imgs/home.png" class="icon" mode=""></image>
<view class="instrument_info">
<view class="instrument_title">
<text>{{ item.title }}</text>
</view>
<view class="instrument_time">
<text>换新时间时间:{{ item.time }}</text>
</view>
</view>
</view>
<view class="instrument_type">
<text v-if="item.type === 2">电表</text>
<text v-else>水表</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import TabsComponents from '@/components/tabs/tabs.vue'
const tabslist = [
{
name: '全部',
value: 0
},
{
name: '水表',
value: 1
},
{
name: '电表',
value: 2
}
]
function handleChangeTabs(val: number) {
console.log('选择了:', val)
}
// ---------------------------------------------------------------------
const infolist = ref([
{
title: 'M2栋3单元1801室(M2-3-1801)',
time: '2023-08-01 10:05:46',
type: 1 //1水表 2电表
},
{
title: 'M2栋3单元1801室(M2-3-1801)',
time: '2023-08-01 10:05:46',
type: 2 //1水表 2电表
},
{
title: 'M2栋3单元1801室(M2-3-1801)',
time: '2023-08-01 10:05:46',
type: 1 //1水表 2电表
},
{
title: 'M2栋3单元1801室(M2-3-1801)',
time: '2023-08-01 10:05:46',
type: 2 //1水表 2电表
}
])
</script>
<style scoped lang="scss">
.replacement_record_box {
background: #f9f9f9;
.nav {
margin-bottom: 40rpx;
font-weight: 550;
font-size: 32rpx;
color: #333333;
line-height: 40rpx;
.line {
width: 6rpx;
height: 28rpx;
background: #4d5dfa;
margin-right: 10rpx;
}
}
.instrument_body {
margin-top: 20rpx;
.instrument_items {
background: #ffffff;
padding: 40rpx 20rpx;
margin-bottom: 20rpx;
.icon {
width: 40rpx;
height: 32rpx;
}
.instrument_info {
margin-left: 22rpx;
.instrument_title {
font-weight: 550;
font-size: 32rpx;
color: #222222;
line-height: 40rpx;
}
.instrument_time {
margin-top: 5rpx;
font-weight: 400;
font-size: 24rpx;
color: #666666;
line-height: 30rpx;
}
}
.instrument_type {
font-weight: 400;
font-size: 24rpx;
color: #4d5dfa;
line-height: 30rpx;
}
}
}
}
</style>

View File

@@ -58,8 +58,6 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
} }
] ]
}, },
{ {
@@ -82,7 +80,6 @@
"navigationBarTitleText": "公告详情" "navigationBarTitleText": "公告详情"
} }
} }
] ]
}, },
{ {
@@ -104,13 +101,35 @@
"style": { "style": {
"navigationBarTitleText": "巡检记录" "navigationBarTitleText": "巡检记录"
} }
}, },
{ {
"path": "inspection_main", "path": "inspection_main",
"style": { "style": {
"navigationBarTitleText": "巡检详情" "navigationBarTitleText": "巡检详情"
} }
} }
]
},
{
"root": "pageSubPack/instrument",
"pages": [{
"path": "replacement_record",
"style": {
"navigationBarTitleText": "仪表换新记录"
}
},
{
"path": "addreplacement",
"style": {
"navigationBarTitleText": "新增仪表换新"
}
},
{
"path": "checkouthouse",
"style": {
"navigationBarTitleText": "选择房屋"
}
}
] ]
}, },
{ {
@@ -146,14 +165,12 @@
"path": "change-phone", "path": "change-phone",
"style": { "style": {
"navigationBarTitleText": "更改手机号码" "navigationBarTitleText": "更改手机号码"
} }
}, },
{ {
"path": "change -password", "path": "change -password",
"style": { "style": {
"navigationBarTitleText": "修改密码" "navigationBarTitleText": "修改密码"
} }
} }
] ]
@@ -167,8 +184,8 @@
}, },
"condition": { "condition": {
"list": [{ "list": [{
"name": "巡检记录", "name": "选择房屋",
"path": "pageSubPack/inspection/inspection_record" "path": "pageSubPack/instrument/checkouthouse"
}] }]
}, },
"tabBar": { "tabBar": {

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB