Skip to content

C
computedRoomPad
提交 9d540224 authored 作者: caodi\cd's avatar caodi\cd
浏览文件
操作

lfix:井道巡检交互

上级 e9f8a69c
显示空白字符变更
内嵌 并排
正在显示 包含 532 行增加 和 0 行删除
pages.json
浏览文件 @ 9d540224
......@@ -34,17 +34,26 @@
}
},
// 机房巡检
{
"path": "pages/inspectionContent/inspectionContent",
"style": {
"navigationBarTitleText": ""
}
},
// 井道巡检
{
"path": "pages/shaftInspection/shaftInspection",
"style": {
"navigationBarTitleText": ""
}
},
// 井道巡检新页面
{
"path": "pages/shaftInspection/shaftInspectionNew",
"style": {
"navigationBarTitleText": ""
}
}
],
"globalStyle": {
......
pages/shaftInspection/shaftInspection.vue
浏览文件 @ 9d540224
......@@ -82,6 +82,7 @@
保存草稿
</view>
<view class="btn-class" @tap="submit"> 提交 </view>
<view class="btn-class" @tap="toNew"> 跳转新页面 </view>
</view>
</view>
</view>
......@@ -176,6 +177,12 @@ export default {
},
methods: {
// 跳转新页面35.5
toNew() {
uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew",
});
},
init() {
return new Promise((resolve, reject) => {
this.tabList = pad_2_1_inspection_position.rows.map((item, index) => {
......
pages/shaftInspection/shaftInspectionNew.vue 0 → 100644
浏览文件 @ 9d540224
<template>
<view class="container">
<uni-nav-bar :fixed="true" background-color="rgba(214, 240, 255, 0.0)" status-bar rightWidth="300">
<block slot="left">
<view class="uni-nav-bar-text" @click="back">
<text class="iconfont icon-Arrow-Left"></text>
</view>
</block>
</uni-nav-bar>
<!-- 模块1：巡检井道 -->
<view class="module">
<view class="title-bar">
<view class="blue-line"></view>
<text class="title">巡检井道:</text>
<text class="location">{{ location }}</text>
<button class="submit-btn" :class="{ active: isSubmitEnabled }" :disabled="!isSubmitEnabled">
提交
</button>
</view>
</view>
<!-- 模块2：巡检说明 -->
<view class="module">
<view class="title-bar">
<view class="blue-line"></view>
<text class="title">巡检说明</text>
</view>
<text class="description">{{ randomDescription }}</text>
</view>
<!-- 模块3：Tab 操作区域 -->
<view class="module">
<view class="tab-buttons">
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-button', { active: activeTab === index }]"
@click="switchTab(index)">
<image :src="tab.icon" class="tab-icon"></image>
<text class="tab-text">{{ tab.label }}</text>
</view>
</view>
<view class="tab-content">
<!-- 操作区域 -->
<view class="form-item">
<text class="form-label">{{ tabs[activeTab].label }}:</text>
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>巡检结论:</text>
<view class="switch-container">
<switch :checked="sliderValue === 1" @change="onSwitchChange" class="switch" color="#007AFF" />
<text class="switch-text">{{ sliderValue === 0 ? '正常' : '异常' }}</text>
</view>
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>情况摘要:</text>
<input v-model="tabData[activeTab].summary" placeholder="请输入情况摘要" class="input-box" />
</view>
<view class="form-item">
<text class="form-label">现场照片:</text>
<text class="photo-limit">（最多5张）</text>
<view class="photo-container">
<view v-for="(photo, index) in tabData[activeTab].photos" :key="index" class="photo-item">
<image :src="photo" class="photo"></image>
<text class="delete-photo" @click="deletePhoto(index)">×</text>
</view>
</view>
<button @click="takePhoto" class="photo-btn">
拍照
</button>
</view>
</view>
</view>
<!-- 模块4：提交模块 -->
<view class="module submit-module">
<button class="action-btn" @click="saveDraft">暂存</button>
<button class="action-btn complete-btn" @click="submit">
完成
</button>
</view>
<!-- 使用 uni-popup 组件 完成弹窗 -->
<uni-popup ref="popup" type="center">
<view class="popup-content">
<!-- 关闭按钮 -->
<view class="close-icon" @click="closePopup">×</view>
<!-- 成功图标 -->
<view class="icon-success">✔️</view>
<!-- 保存成功的文字 -->
<view class="success-text">保存成功</view>
<!-- 下一项按钮 -->
<view class="next-button" @click="closePopup">下一项</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
pad_2_1_inspection_position,
pad_2_1_floor
} from "@/utils/dict.js"; //巡检位置，A座到F座 楼层2楼4楼到26楼
export default {
data() {
return {
location: "A座2楼", // 从上一个页面带过来的位置
isSubmitEnabled: false, // 提交按钮是否可点击
randomDescription: "这是一段随机说明文字。", // 随机说明文字
tabs: [{
label: "门禁",
icon: "/static/icons/door.png"
},
{
label: "卫生",
icon: "/static/icons/clean.png"
},
{
label: "设备告警",
icon: "/static/icons/alert.png"
},
],
activeTab: 0, // 当前选中的 Tab
sliderValue: 0, // Switch 值（0: 正常, 1: 异常）
summary: "", // 情况摘要
photos: [], // 现场照片
tabData: [{
sliderValue: 0,
summary: "",
photos: []
}, // 门禁
{
sliderValue: 0,
summary: "",
photos: []
}, // 卫生
{
sliderValue: 0,
summary: "",
photos: []
}, // 设备告警
],
historyData: null, // 历史数据
firstSubmitTime: null, // 首次提交时间
};
},
watch: {
// 监听当前 Tab 数据变化，更新提交按钮状态
isCurrentTabValid(newVal) {
this.isSubmitEnabled = newVal;
},
},
onLoad() {
this.loadHistoryData();
},
methods: {
// 返回
back() {
uni.navigateBack();
},
// 打开弹窗
openPopup() {
this.$refs.popup.open();
},
// 关闭弹窗
closePopup() {
this.switchTab((this.activeTab + 1) % this.tabs.length);
this.$refs.popup.close();
},
// 加载历史数据
loadHistoryData() {
const history = uni.getStorageSync("inspectionHistory");
if (history && Date.now() - history.firstSubmitTime < 168 * 60 * 60 * 1000) {
this.historyData = history;
this.location = history.location;
this.randomDescription = history.randomDescription;
this.tabData = history.tabData;
this.activeTab = 0; // 默认切换到第一个 Tab
this.updateCurrentTabData();
}
},
// 更新当前 Tab 数据
updateCurrentTabData() {
const currentTabData = this.tabData[this.activeTab];
this.sliderValue = currentTabData.sliderValue;
this.summary = currentTabData.summary;
this.photos = currentTabData.photos;
},
// 切换 Tab
switchTab(index) {
this.activeTab = index;
this.updateCurrentTabData();
},
// Switch 值变化
onSwitchChange(e) {
this.sliderValue = e.detail.value ? 1 : 0;
this.tabData[this.activeTab].sliderValue = this.sliderValue;
},
// 拍照
takePhoto() {
uni.chooseImage({
count: 1,
success: (res) => {
if (this.photos.length < 5) {
this.photos.push(res.tempFilePaths[0]);
this.tabData[this.activeTab].photos = this.photos;
} else {
uni.showToast({
title: "最多只能上传5张照片",
icon: "none",
});
}
},
});
},
// 删除照片
deletePhoto(index) {
this.photos.splice(index, 1);
this.tabData[this.activeTab].photos = this.photos;
},
// 暂存
saveDraft() {
uni.showToast({
title: "暂存成功",
icon: "success",
});
},
// 检查当前 Tab 的必填项是否填写完整
isCurrentTabValid() {
const currentTabData = this.tabData[this.activeTab];
console.log("currentTabData", currentTabData)
return (
currentTabData.sliderValue !== null && // 巡检结论必填
currentTabData.summary.trim() !== "" // 情况摘要必填
// 现场照片为非必填项，不做校验
);
},
// 完成
submit() {
if (this.isCurrentTabValid()) {
if (!this.firstSubmitTime) {
this.firstSubmitTime = Date.now();
}
const historyData = {
location: this.location,
randomDescription: this.randomDescription,
tabData: this.tabData,
firstSubmitTime: this.firstSubmitTime,
};
uni.setStorageSync("inspectionHistory", historyData);
this.openPopup()
} else {
uni.showToast({
title: "请填写完整必填项",
icon: "none",
});
}
},
},
};
</script>
<style scoped lang="less">
/* 导航栏样式 */
.uni-nav-bar-text {
height: 36px;
width: 36px;
background: #ffffff;
border: 0.4px solid rgba(224, 224, 224, 1);
border-radius: 18px;
border-radius: 50%;
color: #333;
text-align: center;
.iconfont {
font-size: 20px;
line-height: 36px;
}
}
.container {
padding: 24px;
}
.module {
margin-bottom: 20px;
}
.title-bar {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.blue-line {
width: 4px;
height: 16px;
background-color: #007AFF;
margin-right: 8px;
}
.title {
font-size: 16px;
font-weight: bold;
}
.location {
margin-left: 8px;
color: #666;
}
.submit-btn {
position: absolute;
right: 24px;
width: 20%;
background-color: #ccc;
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
}
.submit-btn.active {
background-color: #007AFF;
}
.description {
font-size: 14px;
color: #666;
}
.tab-buttons {
display: flex;
gap: 12px;
margin-bottom: 10px;
}
.tab-button {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 20px;
}
.tab-button.active {
border-color: #007AFF;
background-color: #f0f8ff;
}
.tab-icon {
width: 16px;
height: 16px;
margin-right: 4px;
}
.tab-text {
text-align: center;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.form-label {
font-size: 14px;
font-weight: bold;
margin-right: 8px;
}
.required {
color: red;
margin-right: 4px;
}
.switch-container {
display: flex;
align-items: center;
}
.switch-text {
font-size: 14px;
margin-left: 8px;
color: #007AFF;
}
.switch {
transform: scale(0.8);
}
.input-box {
flex: 1;
border: 1px solid #ddd;
border-radius: 4px;
padding: 6px;
font-size: 14px;
}
.photo-limit {
font-size: 12px;
color: #666;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
}
.photo-item {
position: relative;
margin-right: 8px;
margin-bottom: 8px;
}
.photo {
width: 80px;
height: 80px;
border-radius: 4px;
}
.delete-photo {
position: absolute;
top: -8px;
right: -8px;
background-color: #ff4d4f;
color: #fff;
width: 16px;
height: 16px;
border-radius: 50%;
text-align: center;
line-height: 16px;
font-size: 12px;
}
.photo-btn {
background-color: #007AFF;
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
width: 80px;
text-align: center;
}
.submit-module {
display: flex;
justify-content: center;
gap: 20px;
}
.action-btn {
background-color: #007AFF;
color: #fff;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
text-align: center;
}
.complete-btn {
background-color: #007AFF;
}
// 弹窗内容样式
.popup-content {
background-color: white;
padding: 40px;
border-radius: 10px;
text-align: center;
position: relative;
width: 300px;
// 关闭按钮样式
.close-icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
// 成功图标样式
.icon-success {
font-size: 40px;
color: green;
margin-bottom: 20px;
}
// 成功文字样式
.success-text {
font-size: 18px;
margin-bottom: 20px;
}
// 下一项按钮样式
.next-button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
// 按钮 hover 效果
&:hover {
opacity: 0.9;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论