仪表换新搭建

wuye-manager-uniapp/pageSubPack/instrument/addreplacement.vue

@@ -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>

wuye-manager-uniapp/pageSubPack/instrument/checkouthouse.vue

@@ -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>

wuye-manager-uniapp/pageSubPack/instrument/replacement_record.vue

@@ -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>

wuye-manager-uniapp/pages.json

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