Skip to content

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

fix:页面优化存档

上级 00b6fab7
隐藏空白字符变更
内嵌 并排
正在显示 包含 715 行增加 和 158 行删除
pages.json
浏览文件 @ ce8587c0
......@@ -58,6 +58,13 @@
{
"path": "pages/listingManagement/index"
},
// 井道巡检列表
{
"path": "pages/shaftInspection/shaftInspectionList",
"style": {
"navigationBarTitleText": ""
}
},
// 井道巡检新页面
{
"path": "pages/shaftInspection/shaftInspectionNew",
......
pages/home/home.vue
浏览文件 @ ce8587c0
......@@ -57,7 +57,8 @@
},
{
image: '../../static/img/jd.png',
text: '井道巡检'
text: '井道巡检',
url:"/pages/shaftInspection/shaftInspectionList"
},
{
image: '../../static/img/sj.png',
......
pages/inspectionManagement/index.vue
浏览文件 @ ce8587c0
......@@ -9,8 +9,8 @@
</block>
<block slot="right" class="nav-right">
<view class="header-buttons">
<button class="button" @click="lookLog">机房巡检</button>
<button class="button" @click="lookLog">井道巡检</button>
<button class="button" @click="clickInspection(1)">机房巡检</button>
<button class="button" @click="clickInspection(2)">井道巡检</button>
</view>
</block>
</uni-nav-bar>
......@@ -105,6 +105,18 @@
back() {
uni.navigateBack();
},
clickInspection(type) {
if (type == 1) {
uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew",
});
} else {
uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew",
});
}
},
init() {
const all_data = this.all_data || [];
......@@ -307,7 +319,7 @@
.inspect-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: space-between;
}
}
}
......
pages/shaftInspection/shaftInspectionList.vue 0 → 100644
浏览文件 @ ce8587c0
<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>
<block slot="right" class="nav-right">
<view class="header-buttons">
<button class="button" @click="lookLog">查看样表</button>
</view>
</block>
</uni-nav-bar>
<!-- 第二个模块 -->
<view class="profile-section">
<view class="profile-box">
<view class="profile-left">
<view class="avatar">
<image src="@/static/img/add-img/home1.png" mode="aspectFit"></image>
</view>
<view class="info">
<view class="username">{{ userInfo.user }}啊啊啊</view>
<view class="number">巡检编号：<text class="value">111111</text></view>
</view>
</view>
<view class="profile-right">
<button class="record-button" @click="toListingManagement">
巡检人签字
</button>
</view>
</view>
</view>
<view class="content-box">
<!-- 左侧模块 -->
<view class="left-side">
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]"
@click="activeTab = index">
{{ tab }}
</view>
</view>
<!-- 右侧模块 -->
<view class="right-side">
<!-- 第一部分：按钮 -->
<view class="button-group">
<view class="button">已巡检{{ inspectedCount }}个井道</view>
<view class="button">请点击“需巡检井道”执行巡检</view>
</view>
<!-- 第二部分：卡片组 -->
<view class="card-group">
<view class="card-title">{{ tabs[activeTab] }}</view>
<view class="card-list">
<view v-for="(card, index) in cards" :key="index" class="card">
<view class="card-content">
<view class="status-line">
<image src="/static/status-icon.png" class="status-icon" />
<text class="status-text">巡检中</text>
</view>
<view class="info-line">
<text class="info-text">{{ card }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
tabs: ["所有井道", "A座", "B座", "C座", "D座", "E座", "F座"], // 选项卡内容
activeTab: 0, // 默认选中的选项卡
inspectedCount: 5, // 已巡检的井道数量
cards: ["A座-1楼", "A座-2楼", "A座-3楼", "A座-4楼", "A座-5楼", "A座-6楼", "A座-7楼", "A座-8楼"], // 卡片内容
inspectionCode: `JFXJ${moment().format("yyyyMMDDHHmmss")}${(Math.floor(Math.random() * 900) + 100)}`,
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
methods: {
// 返回
back() {
uni.navigateBack();
},
},
};
</script>
<style lang="less" scoped>
/* 导航栏样式 */
.uni-nav-bar-text {
height: 28.8px;
width: 28.8px;
background: #ffffff;
border: 0.32px solid rgba(224, 224, 224, 1);
border-radius: 14.4px;
border-radius: 50%;
color: #333;
text-align: center;
.iconfont {
font-size: 16px;
line-height: 28.8px;
}
}
.nav-right {
width: 192px;
}
.header-buttons {
display: flex;
align-items: center;
margin-left: auto; // 将按钮组推到最右侧
.button {
width: 89.6px;
height: 28.8px;
background: #ffffff;
border-radius: 14.4px;
margin-left: 12.8px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #000000;
line-height: 28.8px;
font-weight: 400;
}
}
.container {
background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
padding: 0 25.6px;
height: 100vh;
overflow: hidden;
.profile-section {
width: 100%;
margin-bottom: 12.8px;
.profile-box {
background-color: #fff;
border-radius: 9.6px;
padding: 12.8px 25.6px;
display: flex;
justify-content: space-between;
align-items: center;
.profile-left {
display: flex;
align-items: center;
.avatar {
position: relative;
width: 51.2px;
height: 51.2px;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.change-password {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
height: 17.6px;
font-family: PingFangSC-Regular;
font-size: 9.6px;
color: #ffffff;
line-height: 16px;
font-weight: 400;
}
}
.info {
.username {
font-size: 16px;
color: #000000;
line-height: 22.4px;
font-weight: 500;
margin-bottom: 7.2px;
}
.number {
font-size: 12.8px;
color: #4A4A4A;
line-height: 22.4px;
font-weight: 400;
.value {
color: #000000;
}
}
}
}
.profile-right {
display: flex;
.inspection-button {
width: 89.6px;
height: 28.8px;
background-image: linear-gradient(105deg, #68acfb 0%, #3774f6 100%);
border-radius: 14.4px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #ffffff;
line-height: 28.8px;
font-weight: 400;
margin-right: 12.8px;
}
.record-button {
width: 115.2px;
height: 28.8px;
background: #ffffff;
border: 0.8px solid rgba(55, 116, 246, 1);
border-radius: 14.4px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #3774f6;
line-height: 28.8px;
font-weight: 400;
}
}
}
}
/* 页面容器 */
.content-box {
width: 972.8px;
height: 478.4px;
border-radius: 9.6px;
background-color: #ffffff;
display: flex;
/* 左侧模块 */
.left-side {
width: 120px;
height: 100%;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 12.8px;
.tab-item {
width: 100%;
height: 38.4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11.2px;
color: #333333;
cursor: pointer;
&.active {
background-color: #ffffff;
}
}
}
/* 右侧模块 */
.right-side {
flex: 1;
padding: 12.8px 18.4px;
display: flex;
flex-direction: column;
.button-group {
display: flex;
margin-bottom: 12.8px;
.button {
height: 27.2px;
background-color: rgba(55, 116, 246, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 11.2px;
color: #3774f6;
border-radius: 3.2px;
&:first-child {
width: 97.6px;
}
&:last-child {
flex: 1;
margin-left: 9.6px;
}
}
}
.card-group {
flex: 1;
.card-title {
font-size: 12.8px;
font-weight: bold;
color: #333333;
margin-bottom: 12.8px;
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 12.8px;
.card {
width: 105.6px;
height: 51.2px;
background-color: #f9f9f9;
border-radius: 6.4px;
padding: 6.4px 10.312px;
box-sizing: border-box;
.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
.status-line {
display: flex;
align-items: center;
.status-icon {
width: 12.8px;
height: 12.8px;
margin-right: 7.112px;
}
.status-text {
font-size: 9.6px;
color: #666666;
}
}
.info-line {
font-size: 9.6px;
color: #333333;
.info-text{
margin-left: 18.4rpx;
}
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
pages/shaftInspection/shaftInspectionNew.vue
浏览文件 @ ce8587c0
......@@ -8,55 +8,79 @@
</view>
</block>
</uni-nav-bar>
<view class="profile-section">
<view class="profile-box">
<view class="profile-left">
<view class="avatar">
<image src="@/static/img/add-img/home1.png" mode="aspectFit"></image>
</view>
<view class="info">
<view class="username">井道巡检</view>
<view class="number">巡检编号：<text class="value">{{ location }}{{floor}}</text></view>
</view>
</view>
</view>
</view>
<!-- 模块1：巡检井道 -->
<view class="module">
<!-- <view class="module">
<view class="title-bar">
<view class="blue-line"></view>
<text class="title">巡检井道:</text>
<text class="title">巡检井道</text>
<text class="location">{{ location }}{{floor}}</text>
<button class="submit-btn" :class="{ active: isSubmitEnabled }" :disabled="!isSubmitEnabled" @click="submit">
完成当前机房全部巡检
</button>
</view>
</view>
</view> -->
<!-- 模块2：巡检说明 -->
<view class="module">
<!-- <view class="module">
<view class="title-bar">
<view class="blue-line"></view>
<text class="title">巡检说明</text>
</view>
<text class="description">{{ randomDescription }}</text>
</view>
</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 }]"
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]"
@click="switchTab(index)">
<image :src="tab.icon" class="tab-icon"></image>
<text class="tab-text">{{ tab.label }}</text>
<view v-if="activeTab === index" class="underline"></view>
</view>
</view>
<view class="tip">
<image class="tip-icon" src="@/static/img/add-img/home1.png" mode="aspectFit"></image>请点击“需巡检井道”执行巡检
</view>
<view class="tab-content">
<!-- 操作区域 -->
<view class="form-item">
<text class="form-label">{{ tabs[activeTab].label }}:</text>
<view class="form-item"><text class="form-label">巡检项</text>
<view class="label">
<text>{{ tabs[activeTab].label }}</text>
</view>
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>巡检结论:</text>
<text class="form-label"><text class="required">*</text>巡检结论</text>
<view class="switch-container">
<switch :checked="inspectionResult === 1" @change="onSwitchChange" class="switch" color="#007AFF" />
<text class="switch-text">{{ inspectionResult === 0 ? '正常' : '异常' }}</text>
<view :class="['status-btn', { active: inspectionResult === 0 }]" @click="setInspectionResult(0)">
正常
</view>
<view :class="['status-btn', { active: inspectionResult === 1 }]" @click="setInspectionResult(1)">
异常
</view>
</view>
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>情况摘要:</text>
<text class="form-label"><text class="required">*</text>情况摘要</text>
<input class="input-box" v-model="list[activeTab]&&list[activeTab].conclusion" placeholder="请输入情况摘要" />
</view>
<view class="form-item">
<text class="form-label">现场照片:</text>
<text class="form-label">现场照片</text>
<text class="photo-limit">（最多5张）</text>
<view class="photo-container">
<view v-for="(photo, index) in list[activeTab]&&list[activeTab].photos" :key="index" class="photo-item">
......@@ -72,11 +96,19 @@
</view>
<!-- 模块4：提交模块 -->
<view class="module submit-module">
<!-- <view class="module submit-module">
<button class="action-btn" @click="saveDraft">暂存</button>
<button class="action-btn complete-btn" @click="complete">
完成
</button>
</view> -->
<view class="module submit-module">
<button class="action-btn" @click="saveDraft">暂存</button>
<button v-if="isSubmitEnabled" class="action-btn" :class="{ active: isSubmitEnabled }" @click="submit">
完成巡检
</button>
<button v-else class="action-btn complete-btn" @click="closePopup">下一项
</button>
</view>
<!-- 使用 uni-popup 组件 完成弹窗 -->
<uni-popup ref="popup" type="center">
......@@ -127,15 +159,15 @@
randomDescription: "这是一段随机说明文字。", // 随机说明文字
tabs: [{
label: "门禁",
icon: "/static/icons/door.png"
icon: "../../static/img/add-img/home1.png"
},
{
label: "卫生",
icon: "/static/icons/clean.png"
icon: "../../static/img/add-img/home1.png"
},
{
label: "设备告警",
icon: "/static/icons/alert.png"
icon: "../../static/img/add-img/home1.png"
},
],
activeTab: 0, // 当前选中的 Tab
......@@ -426,9 +458,10 @@
if (this.isCurrentTabValid()) {
if (!this.firstSubmitTime) {
this.firstSubmitTime = Date.now();
this.$st
}
const params = this.getParams(); //数据获取
const all_data = this.$store.state.all_data; //获取全部数据
const all_data = ore.state.all_data; //获取全部数据
params.isSubmit = 1; //修改提交状态
let logContent = "";
if (this.uid) {
......@@ -502,6 +535,11 @@
switchTab(index) {
this.activeTab = index;
this.updateCurrentTabData();
}, // 设置巡检结论
setInspectionResult(value) {
this.inspectionResult = value;
this.list[this.activeTab].inspectionResult = value; // 更新当前 Tab 的数据
this.onSwitchChange(value); // 触发 Switch 值变化的逻辑
},
// Switch 值变化
onSwitchChange(e) {
......@@ -524,7 +562,6 @@
},
};
</script>
<style scoped lang="less">
/* 导航栏样式 */
.uni-nav-bar-text {
......@@ -533,7 +570,6 @@
background: #ffffff;
border: 0.4px solid rgba(224, 224, 224, 1);
border-radius: 18px;
border-radius: 50%;
color: #333;
text-align: center;
......@@ -547,46 +583,117 @@
padding: 24px;
}
.profile-section {
width: 100%;
margin-bottom: 12.8px;
.profile-box {
background-color: #fff;
border-radius: 9.6px;
padding: 12.8px 25.6px;
display: flex;
justify-content: space-between;
align-items: center;
.profile-left {
display: flex;
align-items: center;
.avatar {
position: relative;
width: 40.5px;
height: 40.5px;
border-radius: 50%;
overflow: hidden;
margin-right: 9px;
image {
width: 100%;
height: 100%;
}
.change-password {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
height: 17.6px;
font-family: PingFangSC-Regular;
font-size: 9.6px;
color: #ffffff;
line-height: 16px;
font-weight: 400;
}
}
.info {
.username {
font-size: 16px;
color: #000000;
line-height: 22.4px;
font-weight: 500;
margin-bottom: 7.2px;
}
.number {
font-size: 12.8px;
color: #4A4A4A;
line-height: 22.4px;
font-weight: 400;
.value {
color: #000000;
}
}
}
}
}
}
.module {
margin-bottom: 20px;
background: #FFFFFF;
border-radius: 12px;
padding: 16px 25px;
}
.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;
}
.blue-line {
width: 4px;
height: 16px;
background-color: #007AFF;
margin-right: 8px;
}
.location {
margin-left: 8px;
color: #666;
}
.title {
font-size: 16px;
font-weight: bold;
}
.submit-btn {
position: absolute;
right: 24px;
width: 20%;
background-color: #ccc;
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
}
.location {
margin-left: 8px;
color: #666;
}
.submit-btn.active {
background-color: #007AFF;
.submit-btn {
position: absolute;
right: 24px;
width: 20%;
background-color: #ccc;
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
&.active {
background-color: #007AFF;
}
}
}
.description {
......@@ -596,141 +703,199 @@
.tab-buttons {
display: flex;
gap: 12px;
margin-bottom: 10px;
}
.tab-button {
display: flex;
justify-content: flex-start;
/* 左对齐 */
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;
margin-bottom: 10px;
gap: 20px;
/* Tab 之间的间隔 */
/* 容器内边距 */
}
.tab-text {
text-align: center;
.tip {
width: 100%;
height: 34px;
background: rgba(55, 116, 246, 0.05);
border: 1px solid rgba(55, 116, 246, 0.3);
border-radius: 10px;
font-size: 14px;
color: #4A4A4A;
letter-spacing: 0;
line-height: 34px;
font-weight: 400;
padding: 0 12px;
.tip-icon {
width: 14px;
height: 14px;
margin-right: 8px;
}
}
.form-item {
.tab-item {
display: flex;
align-items: center;
margin-bottom: 16px;
}
align-items: flex-start;
position: relative;
padding: 8px 0;
/* 上下内边距 */
cursor: pointer;
white-space: nowrap;
/* 防止文字换行 */
.tab-icon {
width: 10.5px;
height: 10.5px;
margin-bottom: 4px;
margin-right: 3px;
}
.form-label {
font-size: 14px;
font-weight: bold;
margin-right: 8px;
}
.tab-text {
font-size: 14px;
color: #333;
}
&.active {
.tab-text {
color: #3774F6;
/* 选中时的文字颜色 */
}
.required {
color: red;
margin-right: 4px;
.underline {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
/* 横线宽度与内容一致 */
height: 2px;
background-color: #3774F6;
/* 选中时的横线颜色 */
}
}
}
.switch-container {
.form-item {
display: flex;
align-items: center;
}
.switch-text {
font-size: 14px;
margin-left: 8px;
color: #007AFF;
}
padding: 12px 0;
line-height: 36px;
border-bottom: 1px solid #F2F3F5;
;
.form-label {
font-size: 14px;
font-weight: bold;
margin-right: 32px;
width: 73px;
text-align: right;
.required {
color: red;
margin-right: 4px;
}
}
.switch {
transform: scale(0.8);
}
.switch-container {
display: flex;
gap: 12px;
/* 按钮之间的间隔 */
.status-btn {
flex: 1;
/* 按钮宽度平分 */
padding: 7px 24px;
font-size: 16px;
color: #000000;
background: #F2F2F2;
text-align: center;
font-weight: 400;
line-height: 22px;
border-radius: 18px;
&.active {
color: #FFFFFF;
background: #3774F6;
border: 0.4px solid rgba(224, 224, 224, 1);
}
}
}
.input-box {
flex: 1;
border: 1px solid #ddd;
border-radius: 4px;
padding: 6px;
font-size: 14px;
}
.input-box {
flex: 1;
border: 1px solid #ddd;
border-radius: 4px;
padding: 6px;
font-size: 14px;
}
.photo-limit {
font-size: 12px;
color: #666;
}
.photo-limit {
font-size: 12px;
color: #666;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
.photo-item {
position: relative;
margin-right: 8px;
margin-bottom: 8px;
}
.photo-item {
position: relative;
margin-right: 8px;
margin-bottom: 8px;
.photo {
width: 80px;
height: 80px;
border-radius: 4px;
}
.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;
}
.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;
.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;
}
.action-btn {
background-color: #007AFF;
color: #fff;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
text-align: center;
.complete-btn {
background-color: #007AFF;
&.complete-btn {
background-color: #007AFF;
}
}
}
// 弹窗内容样式
.popup-content {
background-color: white;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论