巡检模块页面

2025-09-20 16:45:33 +08:00 · 2025-09-20 16:45:33 +08:00 · a4c0c42c29
commit a4c0c42c29
parent 58e8e9681b
5 changed files with 458 additions and 0 deletions
--- a/packages/workOrderDashboard/addRoutingInspection/index.css
+++ b/packages/workOrderDashboard/addRoutingInspection/index.css
@ -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;
+}
--- a/packages/workOrderDashboard/addRoutingInspection/index.vue
+++ b/packages/workOrderDashboard/addRoutingInspection/index.vue
@ -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>
--- a/packages/workOrderDashboard/guide/index.vue
+++ b/packages/workOrderDashboard/guide/index.vue
@ -19,6 +19,11 @@
                    <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>
                </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>
        </view>
@ -96,6 +101,22 @@ export default {
            uni.navigateTo({
                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
+            });
        }
    }
 }
--- a/packages/workOrderDashboard/routingInspection/index.css
+++ b/packages/workOrderDashboard/routingInspection/index.css
@ -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;
+}
--- a/packages/workOrderDashboard/routingInspection/index.vue
+++ b/packages/workOrderDashboard/routingInspection/index.vue
@ -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>