初始化项目
This commit is contained in:
276
attractor-ui/pages/devices/detail/detail.vue
Normal file
276
attractor-ui/pages/devices/detail/detail.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="device-detail-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<button class="back-btn" @click="goBack">← 返回</button>
|
||||
<text class="nav-title">设备详情</text>
|
||||
<button class="save-btn" @click="saveDevice">保存</button>
|
||||
</view>
|
||||
|
||||
<!-- 基础信息编辑区 -->
|
||||
<view class="base-info">
|
||||
<text class="section-title">基础信息</text>
|
||||
|
||||
<!-- 设备图片编辑 -->
|
||||
<view class="info-item">
|
||||
<text class="label">设备图片：</text>
|
||||
<view class="img-upload">
|
||||
<image class="device-img" :src="currentDevice.image" mode="aspectFill"></image>
|
||||
<button class="change-img-btn" @click="chooseImage">更换图片</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设备名称编辑 -->
|
||||
<view class="info-item">
|
||||
<text class="label">设备名称：</text>
|
||||
<input
|
||||
class="input"
|
||||
v-model="currentDevice.name"
|
||||
placeholder="请输入设备名称"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- SN码（不可编辑） -->
|
||||
<view class="info-item">
|
||||
<text class="label">SN码：</text>
|
||||
<text class="sn-text">{{ currentDevice.sn }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 设备类型（不可编辑） -->
|
||||
<view class="info-item">
|
||||
<text class="label">设备类型：</text>
|
||||
<text class="type-text">
|
||||
{{ deviceTabs.find(item => item.type === currentDevice.type).name || '未知类型' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 使用者/团队管理区 -->
|
||||
<view class="manager-info">
|
||||
<text class="section-title">归属管理</text>
|
||||
|
||||
<!-- 使用者选择 -->
|
||||
<view class="info-item">
|
||||
<text class="label">使用者：</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="userList"
|
||||
@change="selectUser"
|
||||
>
|
||||
<view class="picker">
|
||||
{{ currentDevice.user || '请选择使用者' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 所属团队选择 -->
|
||||
<view class="info-item">
|
||||
<text class="label">所属团队：</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="teamList"
|
||||
@change="selectTeam"
|
||||
>
|
||||
<view class="picker">
|
||||
{{ currentDevice.team || '请选择所属团队' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDevice: {}, // 当前编辑的设备信息
|
||||
deviceTabs: [
|
||||
{ name: '全部设备', type: '' },
|
||||
{ name: '智能硬件', type: 'hardware' },
|
||||
{ name: '传感器', type: 'sensor' },
|
||||
{ name: '控制器', type: 'controller' }
|
||||
],
|
||||
// 模拟使用者列表
|
||||
userList: ['张三', '李四', '王五', '赵六'],
|
||||
// 模拟团队列表
|
||||
teamList: ['研发部', '测试部', '运维部', '市场部']
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 获取设备ID并从列表中匹配设备信息
|
||||
const deviceId = Number(options.id);
|
||||
// 从全局/本地存储获取设备列表（实际项目建议用vuex/本地存储）
|
||||
const deviceList = getApp().globalData.deviceList || [];
|
||||
this.currentDevice = JSON.parse(JSON.stringify(deviceList.find(item => item.id === deviceId)));
|
||||
// 若未找到设备，返回上一页
|
||||
if (!this.currentDevice) {
|
||||
uni.showToast({ title: '设备不存在', icon: 'none' });
|
||||
setTimeout(() => this.goBack(), 1500);
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 初始化全局设备列表（方便跨页面共享）
|
||||
if (!getApp().globalData.deviceList) {
|
||||
getApp().globalData.deviceList = [
|
||||
{
|
||||
id: 1,
|
||||
name: '温湿度传感器',
|
||||
sn: 'SN20260210001',
|
||||
type: 'sensor',
|
||||
image: '/static/device/sensor.png',
|
||||
user: '张三',
|
||||
team: '研发部'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '智能控制器',
|
||||
sn: 'SN20260210002',
|
||||
type: 'controller',
|
||||
image: '/static/device/controller.png',
|
||||
user: '李四',
|
||||
team: '测试部'
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
// 选择设备图片（uniapp上传图片API）
|
||||
async chooseImage() {
|
||||
try {
|
||||
const res = await uni.chooseImage({
|
||||
count: 1, // 仅选1张
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'] // 相册/相机
|
||||
});
|
||||
// 模拟上传图片（实际项目需上传到服务器，替换为返回的图片URL）
|
||||
this.currentDevice.image = res.tempFilePaths[0];
|
||||
} catch (err) {
|
||||
console.error('选择图片失败：', err);
|
||||
uni.showToast({ title: '选择图片失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
// 选择使用者
|
||||
selectUser(e) {
|
||||
this.currentDevice.user = this.userList[e.detail.value];
|
||||
},
|
||||
// 选择所属团队
|
||||
selectTeam(e) {
|
||||
this.currentDevice.team = this.teamList[e.detail.value];
|
||||
},
|
||||
// 保存设备信息
|
||||
saveDevice() {
|
||||
// 更新全局设备列表
|
||||
const deviceList = getApp().globalData.deviceList;
|
||||
const index = deviceList.findIndex(item => item.id === this.currentDevice.id);
|
||||
if (index > -1) {
|
||||
deviceList[index] = this.currentDevice;
|
||||
getApp().globalData.deviceList = deviceList;
|
||||
}
|
||||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||||
setTimeout(() => this.goBack(), 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面整体样式 */
|
||||
.device-detail-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.back-btn, .save-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.back-btn {
|
||||
color: #666;
|
||||
}
|
||||
.save-btn {
|
||||
color: #409eff;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 信息区块 */
|
||||
.base-info, .manager-info {
|
||||
background-color: #fff;
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 信息项 */
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.label {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.input, .picker, .sn-text, .type-text {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.input {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sn-text, .type-text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 图片上传区 */
|
||||
.img-upload {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.device-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.change-img-btn {
|
||||
background-color: #e5e5e5;
|
||||
color: #666;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user