Skip to content

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

fix：上架管理

上级 290d8a23
显示空白字符变更
内嵌 并排
正在显示 包含 531 行增加 和 5 行删除
manifest.json
浏览文件 @ 5d72f178
{
"name" : "杭州内网机房巡检",
"appid" : "__UNI__F50068B",
"appid" : "__UNI__D0FAFE1",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
......
pages.json
浏览文件 @ 5d72f178
......@@ -54,6 +54,10 @@
{
"path": "pages/inspectionManagement/index"
},
// 设备上架管理
{
"path": "pages/listingManagement/index"
},
// 井道巡检新页面
{
"path": "pages/shaftInspection/shaftInspectionNew",
......
pages/home/home.vue
浏览文件 @ 5d72f178
......@@ -24,7 +24,7 @@
</view>
<view class="profile-right">
<button class="inspection-button" @click="toInspectionManagement">巡检管理</button>
<button class="record-button">上架记录</button>
<button class="record-button" @click="toListingManagement">设备上架管理</button>
</view>
</view>
</view>
......@@ -90,11 +90,15 @@
},
// 巡检管理
toInspectionManagement() {
console.log(1111)
uni.navigateTo({
url: "/pages/inspectionManagement/index",
});
},
toListingManagement() {
uni.navigateTo({
url: "/pages/listingManagement/index",
});
},
// 井道巡检
toShaftInspection() {
uni.navigateTo({
......@@ -259,7 +263,7 @@
}
.record-button {
width: 112px;
width: 144px;
height: 36px;
background: #FFFFFF;
border: 1px solid rgba(55, 116, 246, 1);
......
pages/listingManagement/index.vue 0 → 100644
浏览文件 @ 5d72f178
<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="header">
<view class="title">
<view class="blue-line"></view>
<text>设备上架管理</text>
</view>
<view class="buttons">
<button class="btn" @click="syncData">数据同步</button>
<button class="btn" @click="takePhoto">设备上架拍照</button>
</view>
</view>
<!-- 第二个模块：选中条数显示 -->
<view class="selected-count">
选中：{{ selectedCount }}条
</view>
<!-- 第三个模块：照片显示模块 -->
<view class="photo-list">
<view v-for="(group, date) in photoGroups" :key="date" class="photo-group">
<view class="group-header">
<text>{{ date }}</text>
<button class="select-all" @click="toggleSelectAll(date)">全选</button>
</view>
<view class="card-list">
<view v-for="photo in group" :key="photo.id" class="card" @click="previewPhoto(photo)">
<image :src="photo.url" mode="widthFix" class="photo"></image>
<view class="check-icon" @click.stop="toggleSelect(photo)">
<text v-if="photo.selected">✔</text>
</view>
<view class="delete-icon" @click.stop="deletePhoto(photo)">×</view>
<view class="photo-info">
<text>编号：{{ photo.id }}</text>
<text>时间：{{ photo.time }}</text>
<text>状态：{{ photo.synced ? '已同步' : '待同步' }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
photos: [], // 所有照片
selectedPhotos: [], // 选中的照片
syncedPhotos: [] // 已同步的照片
};
},
computed: {
// 按日期分组照片
photoGroups() {
const groups = {};
this.photos.forEach(photo => {
const date = photo.time.split(' ')[0];
if (!groups[date]) {
groups[date] = [];
}
groups[date].push(photo);
});
return groups;
},
// 选中的照片数量
selectedCount() {
return this.selectedPhotos.length;
}
},
methods: {
back() {
uni.navigateBack();
},
// 拍照
takePhoto() {
uni.chooseImage({
count: 1,
success: (res) => {
console.log(111, res)
const tempFilePaths = res.tempFilePaths;
const newPhoto = {
id: this.getFileName(tempFilePaths[0]),
url: tempFilePaths[0],
time: moment(new Date()).format("yyyy-MM-DD HH:mm"),
selected: false,
synced: false
};
this.photos.unshift(newPhoto);
}
});
},
// 从路径中提取文件名（去掉路径和扩展名）
getFileName(filePath) {
// 获取路径中的文件名部分（包括扩展名）
const fileNameWithExt = filePath.split('/').pop();
// 去掉扩展名
const fileName = fileNameWithExt.split('.').shift();
return fileName;
},
// 切换选中状态
toggleSelect(photo) {
photo.selected = !photo.selected;
if (photo.selected) {
this.selectedPhotos.push(photo);
} else {
this.selectedPhotos = this.selectedPhotos.filter(p => p.id !== photo.id);
}
},
// 全选/取消全选
toggleSelectAll(date) {
const group = this.photoGroups[date];
const allSelected = group.every(photo => photo.selected);
group.forEach(photo => {
photo.selected = !allSelected;
if (photo.selected) {
this.selectedPhotos.push(photo);
} else {
this.selectedPhotos = this.selectedPhotos.filter(p => p.id !== photo.id);
}
});
},
// 删除照片
deletePhoto(photo) {
this.photos = this.photos.filter(p => p.id !== photo.id);
this.selectedPhotos = this.selectedPhotos.filter(p => p.id !== photo.id);
},
// 预览照片
previewPhoto(photo) {
uni.previewImage({
urls: this.photos.map(p => p.url),
current: photo.url
});
},
// 数据同步
syncData() {
const syncedData = this.selectedPhotos.map(photo => ({
id: photo.id,
time: photo.time,
status: photo.synced ? '已同步' : '待同步'
}));
// 存储到本地
uni.setStorageSync('syncedPhotos', syncedData);
// 更新同步状态
this.selectedPhotos.forEach(photo => {
photo.synced = true;
});
this.selectedPhotos = [];
}
},
mounted() {
// 从本地存储加载已同步的照片
const syncedPhotos = uni.getStorageSync('syncedPhotos') || [];
this.syncedPhotos = syncedPhotos;
// 更新照片的同步状态
this.photos.forEach(photo => {
if (this.syncedPhotos.some(p => p.id === photo.id)) {
photo.synced = true;
}
});
}
};
</script>
<style lang="less" scoped>
/* 导航栏样式--- */
.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;
}
}
.nav-right {
width: 240px;
}
.header-buttons {
display: flex;
align-items: center;
margin-left: auto; // 将按钮组推到最右侧
.button {
width: 112px;
height: 36px;
background: #FFFFFF;
border-radius: 18px;
margin-left: 16px;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #000000;
line-height: 36px;
font-weight: 400;
}
}
/* 导航栏样式--- */
.container {
background-image: linear-gradient(115deg, #E8F0FB 0%, #E1EBFA 100%);
padding: 0 32px;
height: 100vh;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
.title {
display: flex;
align-items: center;
.blue-line {
width: 4px;
height: 20px;
background-color: blue;
margin-right: 8px;
}
}
.buttons {
display: flex;
.btn {
width: 112px;
height: 36px;
border-radius: 18px;
margin-left: 8px;
}
}
}
.selected-count {
background-color: #f0f0f0;
padding: 8px;
border-radius: 8px;
margin-bottom: 16px;
}
.photo-list {
.photo-group {
margin-bottom: 16px;
.group-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.select-all {
font-size: 14px;
color: blue;
}
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
.card {
width: calc(20% - 13px);
position: relative;
.photo {
width: 100%;
height: auto;
border-radius: 8px;
}
.check-icon {
position: absolute;
top: 8px;
right: 8px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.delete-icon {
position: absolute;
bottom: 8px;
left: 8px;
background-color: rgba(255, 0, 0, 0.8);
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.photo-info {
margin-top: 8px;
text-align: center;
text {
display: blo980782ck;
font-size: 12px;
}
}
}
}
}
}
</style>
\ No newline at end of file
pages/shaftInspection/shaftInspectionNewlist.vue 0 → 100644
浏览文件 @ 5d72f178
<template>
<view>
<!-- 遍历每排 -->
<view v-for="(row, rowIndex) in rows" :key="rowIndex" class="row">
<!-- 遍历每排的卡片 -->
<view v-for="(item, index) in row" :key="item.id" class="card">
<!-- 机房卡片 -->
<view
:class="['card-content', item.status === '待巡检' ? 'pending' : 'checked']"
@click="toggleStatus(rowIndex, index)"
>
<!-- 状态模块 -->
<view class="status-module">
<image :src="getStatusIcon(item.status)" class="status-icon"></image>
<text class="status-text">{{ item.status }}</text>
</view>
<!-- 机房名称 -->
<text class="room-name">{{ item.name }}</text>
</view>
<!-- 右侧箭头（非最后一列） -->
<view
v-if="index < row.length - 1 && rowIndex % 2 === 0"
:class="['arrow-right', item.status === '待巡检' ? 'gray' : 'blue']"
>
→
</view>
<!-- 左侧箭头（非第一列，偶数排） -->
<view
v-if="index > 0 && rowIndex % 2 !== 0"
:class="['arrow-left', item.status === '待巡检' ? 'gray' : 'blue']"
>
←
</view>
</view>
<!-- 下方箭头（非最后一排） -->
<view
v-if="rowIndex < rows.length - 1"
:class="['arrow-down', row[row.length - 1].status === '待巡检' ? 'gray' : 'blue']"
>
{{ rowIndex % 2 === 0 ? '↓' : '↑' }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 原始数据
rooms: [
{ id: 1, name: '机房1', status: '待巡检' },
{ id: 2, name: '机房2', status: '正常' },
{ id: 3, name: '机房3', status: '异常' },
{ id: 4, name: '机房4', status: '待巡检' },
{ id: 5, name: '机房5', status: '正常' },
{ id: 6, name: '机房6', status: '异常' },
{ id: 7, name: '机房7', status: '待巡检' },
{ id: 8, name: '机房8', status: '正常' },
{ id: 9, name: '机房9', status: '异常' },
{ id: 10, name: '机房10', status: '待巡检' },
// ... 其他机房
],
rows: [], // 分组后的数据
};
},
onLoad() {
this.groupRooms();
},
methods: {
// 将数据按每排 5 个分组，并按照 S 型排列
groupRooms() {
const rows = [];
for (let i = 0; i < this.rooms.length; i += 5) {
const row = this.rooms.slice(i, i + 5);
// 偶数排反转，实现 S 型
if (rows.length % 2 !== 0) {
row.reverse();
}
rows.push(row);
}
this.rows = rows;
},
// 获取状态图标
getStatusIcon(status) {
const icons = {
待巡检: '/static/pending.png',
正常: '/static/normal.png',
异常: '/static/abnormal.png',
};
return icons[status];
},
// 点击卡片切换状态
toggleStatus(rowIndex, index) {
const room = this.rows[rowIndex][index];
const statusList = ['待巡检', '正常', '异常'];
const currentIndex = statusList.indexOf(room.status);
room.status = statusList[(currentIndex + 1) % statusList.length];
},
},
};
</script>
<style>
.row {
display: flex;
align-items: center;
margin-bottom: 20px;
position: relative;
}
.card {
display: flex;
align-items: center;
}
.card-content {
width: 100px;
height: 120px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 10px;
}
.card-content.pending {
background-color: #f0f0f0; /* 灰色背景 */
}
.card-content.checked {
background-color: #ffffff; /* 白色背景 */
}
.status-module {
display: flex;
flex-direction: column;
align-items: center;
}
.status-icon {
width: 24px;
height: 24px;
margin-bottom: 5px;
}
.status-text {
font-size: 12px;
color: #333;
}
.room-name {
font-size: 14px;
margin-top: 10px;
}
.arrow-right,
.arrow-left,
.arrow-down {
font-size: 20px;
}
.arrow-right.gray,
.arrow-left.gray,
.arrow-down.gray {
color: #999; /* 灰色箭头 */
}
.arrow-right.blue,
.arrow-left.blue,
.arrow-down.blue {
color: #1e90ff; /* 淡蓝色箭头 */
}
.arrow-down {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
</style>
\ No newline at end of file
store/index.js
浏览文件 @ 5d72f178
......@@ -5,11 +5,12 @@ const store = new Vuex.Store({
state: {
// oper_record: [], // 保存操作记录数据--日志数据 --弃用
all_data: [], // 保存页面数据 -- 所有的巡检数据,list列表
deviceData: [], //设备上架
all_user_data: [], //所有用户信息 -- list列表,
log_list: [], // 保存操作记录数据--日志数据
now_user: { }, //保存当前登录用户
now_user: {}, //保存当前登录用户
darf_data: {}, // 保存草稿内容
temp_data: {}, // 当前编辑或者查看的数据,
......@@ -71,6 +72,13 @@ const store = new Vuex.Store({
// 保存 日志文件
state.log_list = payload;
},
SET_DEVICEDATA(state, payload) { //保存上次上报时间
state.deviceData = payload
},
DEL_DEVICEDATA(state, index) {
//删除数据
state.deviceData.splice(index, 1);
},
},
});
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论