巡检模块页面
This commit is contained in:
赵毅
parent
58e8e9681b
commit
a4c0c42c29
145
packages/workOrderDashboard/addRoutingInspection/index.css
Normal file
145
packages/workOrderDashboard/addRoutingInspection/index.css
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
.container {
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-container {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-container {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
max-height: 400rpx;
|
||||||
|
width: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item {
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item.selected {
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-section {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-container {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-icon-container{
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
border: 5rpx solid #333;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-icon {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photos-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-item {
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
margin: 20rpx 20rpx 0 0;
|
||||||
|
position: relative;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: -10rpx;
|
||||||
|
right: -10rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background-color: rgba(255, 0, 0, 0.8);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
164
packages/workOrderDashboard/addRoutingInspection/index.vue
Normal file
164
packages/workOrderDashboard/addRoutingInspection/index.vue
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 点位选择下拉菜单 -->
|
||||||
|
<view class="select-container">
|
||||||
|
<label class="select-label">选择点位</label>
|
||||||
|
<input type="text" class="search-input" v-model="searchKeyword" @focus="showOptions = true"
|
||||||
|
placeholder="请选择点位" readonly />
|
||||||
|
|
||||||
|
<!-- 下拉选项 -->
|
||||||
|
<view class="options-container" v-if="showOptions">
|
||||||
|
<view v-for="option in filteredOptions" :key="option.id || option.name" class="option-item"
|
||||||
|
:class="{ 'selected': selectedPoint === (option.id || option.name) }"
|
||||||
|
@click="selectPointHandler(option)">
|
||||||
|
{{ option.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 拍照功能和图片预览 -->
|
||||||
|
<view class="camera-section">
|
||||||
|
<!-- 拍照按钮，当图片数量达到12张时隐藏 -->
|
||||||
|
<view class="camera-container" v-if="images.length < 12">
|
||||||
|
<view class="camera-icon-container">
|
||||||
|
<image class="camera-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/zhaoxiangji.png" mode="aspectFit" @click="takePhoto">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
<view class="camera-text">点击拍照上传</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 照片列表 -->
|
||||||
|
<view class="photos-container">
|
||||||
|
<view v-for="(image, index) in images" :key="index" class="photo-item">
|
||||||
|
<image class="photo-preview" :src="image" mode="aspectFit"></image>
|
||||||
|
<!-- 删除图标 -->
|
||||||
|
<view class="delete-icon" @click="deleteImage(index)">×</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部提交按钮 -->
|
||||||
|
<view class="footer">
|
||||||
|
<button class="submit-button" @click="submitForm">确认提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchKeyword: '',
|
||||||
|
showOptions: false,
|
||||||
|
selectedPoint: '',
|
||||||
|
selectedPointInfo: null, // 存储完整的点位信息
|
||||||
|
pointsList: [],
|
||||||
|
images: [] // 存储多张图片路径
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredOptions() {
|
||||||
|
if (!this.searchKeyword) {
|
||||||
|
return this.pointsList
|
||||||
|
}
|
||||||
|
return this.pointsList.filter(option =>
|
||||||
|
option.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.item) {
|
||||||
|
try {
|
||||||
|
const item = JSON.parse(options.item)
|
||||||
|
// 根据实际数据结构调整
|
||||||
|
if (item.points && Array.isArray(item.points)) {
|
||||||
|
this.pointsList = item.points
|
||||||
|
} else if (Array.isArray(item)) {
|
||||||
|
this.pointsList = item
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('解析数据失败', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectPointHandler(option) {
|
||||||
|
this.selectedPoint = option.id || option.name
|
||||||
|
this.selectedPointInfo = option // 保存完整的点位信息
|
||||||
|
this.searchKeyword = option.name
|
||||||
|
this.showOptions = false
|
||||||
|
},
|
||||||
|
takePhoto() {
|
||||||
|
// 调起手机拍照功能，不允许从相册选择
|
||||||
|
const that = this
|
||||||
|
// 计算还可以拍摄的图片数量
|
||||||
|
const remainingCount = 12 - that.images.length
|
||||||
|
|
||||||
|
uni.chooseImage({
|
||||||
|
count: remainingCount > 0 ? remainingCount : 1, // 最多选择的图片数量
|
||||||
|
sizeType: ['original', 'compressed'],
|
||||||
|
sourceType: ['camera'], // 只允许拍照
|
||||||
|
success: function (res) {
|
||||||
|
const tempFilePaths = res.tempFilePaths
|
||||||
|
// 将新拍摄的图片添加到列表中
|
||||||
|
that.images = [...that.images, ...tempFilePaths]
|
||||||
|
console.log('拍照成功，当前图片数量：', that.images.length)
|
||||||
|
},
|
||||||
|
fail: function (err) {
|
||||||
|
console.error('拍照失败', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '拍照失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deleteImage(index) {
|
||||||
|
// 删除指定索引的图片
|
||||||
|
this.images.splice(index, 1)
|
||||||
|
},
|
||||||
|
submitForm() {
|
||||||
|
// 验证是否选择了点位
|
||||||
|
if (!this.selectedPoint) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择点位',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证是否上传了图片
|
||||||
|
if (this.images.length === 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请至少上传一张照片',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 准备提交数据
|
||||||
|
const submitData = {
|
||||||
|
point: this.selectedPointInfo, // 完整的点位信息
|
||||||
|
photos: this.images.map(imagePath => ({
|
||||||
|
url: imagePath, // 图片路径
|
||||||
|
// 如果需要，可以添加额外的信息，如base64编码等
|
||||||
|
// base64: this.getBase64FromPath(imagePath) // 示例：获取base64编码
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输出提交的数据
|
||||||
|
console.log('提交数据：', submitData)
|
||||||
|
|
||||||
|
// 这里可以添加实际的提交逻辑，调用后端接口
|
||||||
|
uni.showToast({
|
||||||
|
title: '提交成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
@ -19,6 +19,11 @@
|
|||||||
<image class="work-order-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrder.png" mode="aspectFill" />
|
<image class="work-order-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrder.png" mode="aspectFill" />
|
||||||
<text class="work-order-text">工单台</text>
|
<text class="work-order-text">工单台</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="work-order-card" v-if="index == 1"
|
||||||
|
@click="navigateToRoutingInspection">
|
||||||
|
<image class="work-order-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/polling.png" mode="aspectFill" />
|
||||||
|
<text class="work-order-text">巡更巡检</text>
|
||||||
|
</view>
|
||||||
<view class="work-order-card" v-else></view>
|
<view class="work-order-card" v-else></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -96,6 +101,22 @@ export default {
|
|||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/packages/workOrderDashboard/index/index?communityId=' + changeCommData.id
|
url: '/packages/workOrderDashboard/index/index?communityId=' + changeCommData.id
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 跳转到巡更巡检
|
||||||
|
navigateToRoutingInspection() {
|
||||||
|
const changeCommData = uni.getStorageSync('changeWorkOrderData');
|
||||||
|
if (!changeCommData) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先选择小区',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/packages/workOrderDashboard/routingInspection/index?communityId=' + changeCommData.id
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
54
packages/workOrderDashboard/routingInspection/index.css
Normal file
54
packages/workOrderDashboard/routingInspection/index.css
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 98%;
|
||||||
|
margin: 7rpx 0;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #333;
|
||||||
|
padding: 10rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #333;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Btn {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #169bd5;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 200rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty image {
|
||||||
|
width: 366rpx;
|
||||||
|
height: 226rpx;
|
||||||
|
margin-bottom: 27rpx;
|
||||||
|
}
|
||||||
74
packages/workOrderDashboard/routingInspection/index.vue
Normal file
74
packages/workOrderDashboard/routingInspection/index.vue
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view v-if="list.length > 0">
|
||||||
|
<view v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="item">
|
||||||
|
<view class="item-top">
|
||||||
|
<view>任务编号：{{ item.task_no }}</view>
|
||||||
|
<view> 任务类型：{{ item.task_type }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-content">
|
||||||
|
<view class="item-content-left">
|
||||||
|
<view>任务名称：{{ item.task_name }}</view>
|
||||||
|
<view>路线编号：{{ item.task_name }}</view>
|
||||||
|
<view>路线名称：{{ item.task_name }}</view>
|
||||||
|
<view>任务开始时间：{{ item.task_name }}</view>
|
||||||
|
<view>任务结束时间：{{ item.task_name }}</view>
|
||||||
|
<view>巡检人：{{ item.task_name }}</view>
|
||||||
|
<view>任务描述：{{ item.task_name }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-content-right">
|
||||||
|
<button class="Btn" @click="goInspection(item)">去巡检</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
<view class="empty">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
暂无数据
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
request,
|
||||||
|
picUrl,
|
||||||
|
uniqueByField,
|
||||||
|
menuButtonInfo,
|
||||||
|
NavgateTo,
|
||||||
|
} from "../../../utils";
|
||||||
|
|
||||||
|
import { apiArr } from "../../../api/community";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.communityId = JSON.parse(options.communityId);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getList() {
|
||||||
|
const res = await request(apiArr.routingInspectionList, "POST", {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
community_id: this.communityId,
|
||||||
|
});
|
||||||
|
this.list = res.rows;
|
||||||
|
},
|
||||||
|
goInspection(item) {
|
||||||
|
NavgateTo('/packages/workOrderDashboard/addRoutingInspection/index?item=' + JSON.stringify(item),)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user