安全违章页面新增表单搭建 我的页面搭建 工作台搭建

package-lock.json

@@ -11990,9 +11990,9 @@
       }
     },
     "node_modules/uview-plus": {
-      "version": "3.3.62",
+      "version": "3.4.11",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/uview-plus/-/uview-plus-3.3.62.tgz",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/uview-plus/-/uview-plus-3.4.11.tgz",
-      "integrity": "sha512-RDSEiu4uuZf4Aq5S7McSsVPOHrlEsjIVcGT1U6vgnfD7HsZzPx71TaBY3kHHmawLeQ5oS4BSviBRRb+Y3gX0NA==",
+      "integrity": "sha512-lCi/w1NuLbv0g++ynySJQRfhYLBK3BkQ8lO7nz0YPrTOPjqdraI35Tmdpjerjc/VVIzz0IAOSi0scVEwtd4MaA==",
       "dependencies": {
         "clipboard": "^2.0.11",
         "dayjs": "^1.11.3"

src/App.vue

@@ -20,4 +20,8 @@ page {
     height: 100%;
     width: 100%;
 }
+
+::v-deep .u-form-item__body__right__message {
+    margin-left: 0 !important;
+}
 </style>

src/components/NavBarModal/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <!-- 导航栏 -->
+    <up-navbar :title="navBarTitle">
+        <template #left>
+            <view class="u-nav-slot" @tap="onHandleBack">
+                <up-icon name="arrow-left" size="20" color="#2979ff" />
+                返回
+            </view>
+        </template>
+
+        <template #right>
+            <text style="color: #2979ff">上传记录</text>
+        </template>
+    </up-navbar>
+</template>
+
+<script setup>
+const props = defineProps({
+    navBarTitle: {
+        type: String,
+        default: () => '个人中心',
+    },
+})
+
+// 返回按钮
+const onHandleBack = () => {
+    uni.navigateBack({
+        delta: 1,
+    })
+}
+</script>
+
+<style scoped>
+.u-nav-slot {
+    display: flex;
+    align-items: center;
+    color: #2979ff;
+}
+
+::v-deep .u-navbar__content__title {
+    font-weight: bold;
+}
+</style>

src/components/TitleTipModal/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <!-- 表单头部提示文字 -->
+    <view class="title-tip">
+        <view></view>
+        <view>{{ TitleTip }}</view>
+    </view>
+</template>
+
+<script setup>
+const props = defineProps({
+    TitleTip: {
+        type: String,
+        default: () => '',
+    },
+})
+
+// 返回按钮
+const onHandleBack = () => {
+    uni.navigateBack({
+        delta: 1,
+    })
+}
+</script>
+
+<style scoped lang="scss">
+.title-tip {
+    padding: 16rpx 0;
+    display: flex;
+    align-items: center;
+    color: #585757;
+    font-weight: bold;
+    font-size: 14px;
+    letter-spacing: 2rpx;
+    background-color: #fff;
+
+    & view:first-child {
+        margin: 0 20rpx;
+        width: 10rpx;
+        height: 32rpx;
+        background-color: #2979ff;
+        border-radius: 2rpx;
+    }
+}
+</style>

src/pages.json

@@ -16,17 +16,69 @@
                 "navigationBarTitleText": "项目全过程影像管理工具"
             }
         },
+        // tabBar 工作台页面
         {
             "path": "pages/workbenches/index",
             "style": {
                 "navigationBarTitleText": "工作台"
             }
         },
+        // tabBar 我的页面
         {
             "path": "pages/my/index",
             "style": {
                 "navigationBarTitleText": "我的"
             }
+        },
+        // 二级页面
+        {
+            "path": "pages/my/edit-password/index",
+            "style": {
+                "navigationBarTitleText": "修改密码"
+            }
+        },
+        // 业务 一级页面 ---- 安全违章
+        {
+            "path": "pages/safetyViolations/index",
+            "style": {
+                "navigationBarTitleText": "custom",
+                "navigationStyle": "custom"
+            }
+        },
+        // 业务 一级页面 ---- 质量检查
+        {
+            "path": "pages/qualityInspection/index",
+            "style": {
+                "navigationBarTitleText": "质量检查"
+            }
+        },
+        // 业务 一级页面 ---- 安全措施落实
+        {
+            "path": "pages/safetyMeasure/index",
+            "style": {
+                "navigationBarTitleText": "安全措施落实"
+            }
+        },
+        // 业务 一级页面 ---- 协调照片
+        {
+            "path": "pages/coordinatePhotos/index",
+            "style": {
+                "navigationBarTitleText": "协调照片"
+            }
+        },
+        // 业务 一级页面 ---- 重要事项
+        {
+            "path": "pages/importantMatters/index",
+            "style": {
+                "navigationBarTitleText": "重要事项"
+            }
+        },
+        // 业务 一级页面 ---- 综合查询
+        {
+            "path": "pages/comprehensiveQuery/index",
+            "style": {
+                "navigationBarTitleText": "综合查询"
+            }
         }
     ],
     "globalStyle": {

src/pages/comprehensiveQuery/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <!-- 综合查询一级页面 -->
+    <view class="qualityInspection"> </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.comprehensiveQuery {
+    height: 100%;
+    background-color: #f6f9ff;
+    overflow: hidden;
+}
+</style>

src/pages/coordinatePhotos/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <!-- 协调照片一级页面 -->
+    <view class="qualityInspection"> </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.coordinatePhotos {
+    height: 100%;
+    background-color: #f6f9ff;
+    overflow: hidden;
+}
+</style>

src/pages/importantMatters/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <!-- 重要事项一级页面 -->
+    <view class="qualityInspection"> </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.importantMatters {
+    height: 100%;
+    background-color: #f6f9ff;
+    overflow: hidden;
+}
+</style>

src/pages/login/index.vue

@@ -28,10 +28,19 @@
             <up-form-item prop="password">
                 <up-input
                     clearable
+                    :password="!showPassword"
                     prefixIcon="lock"
                     placeholder="填输入密码"
                     v-model="opinionModel.password"
-                />
+                >
+                    <template #suffix>
+                        <u-icon
+                            :name="!showPassword ? 'eye-fill' : 'eye'"
+                            @tap="showPassword = !showPassword"
+                            size="20"
+                        />
+                    </template>
+                </up-input>
             </up-form-item>
 
             <up-form-item>
@@ -44,10 +53,11 @@
 <script setup>
 import { ref } from 'vue'
 import { loginApi } from '@/services/login.js'
+const showPassword = ref(false)
 
 // 表单数据源
 const opinionModel = ref({
-    userName: '',
+    username: '',
     password: '',
 })
 
@@ -132,8 +142,4 @@ const onConfirm = () => {
         margin-top: 10rpx;
     }
 }
-
-::v-deep .u-form-item__body__right__message {
-    margin-left: 0 !important;
-}
 </style>

src/pages/my/edit-password/index.vue

@@ -0,0 +1,274 @@
+<template>
+    <!-- 修改密码页面 -->
+    <view class="edit-password">
+        <up-steps :current="currenSteps">
+            <up-steps-item title="验证手机"> </up-steps-item>
+            <up-steps-item title="设置密码"></up-steps-item>
+            <up-steps-item title="修改成功"></up-steps-item>
+        </up-steps>
+
+        <view class="edit-password-content">
+            <!-- 第一步表单 -->
+            <up-form
+                :model="editPasswordModel"
+                ref="editPasswordRef"
+                :rules="editPasswordRules"
+                class="opinion-form"
+                v-if="currenSteps === 0"
+            >
+                <up-form-item prop="username">
+                    <up-input
+                        clearable
+                        prefixIcon="account"
+                        placeholder="填输入手机号"
+                        v-model="editPasswordModel.username"
+                    />
+                </up-form-item>
+                <up-form-item prop="password">
+                    <up-input
+                        clearable
+                        prefixIcon="lock"
+                        :password="!showPassword_1"
+                        placeholder="填输入密码"
+                        v-model="editPasswordModel.password"
+                    >
+                        <template #suffix>
+                            <u-icon
+                                :name="!showPassword_1 ? 'eye-fill' : 'eye'"
+                                @tap="showPassword_1 = !showPassword_1"
+                                size="20"
+                            />
+                        </template>
+                    </up-input>
+                </up-form-item>
+
+                <up-form-item>
+                    <up-button type="primary" text="下一步" @tap="onHandleNext" />
+                </up-form-item>
+            </up-form>
+            <!-- 第二步表单 -->
+            <up-form
+                :model="editPasswordAgainModel"
+                ref="editPasswordAgainRef"
+                :rules="editPasswordAgainRules"
+                class="opinion-form"
+                v-if="currenSteps === 1"
+            >
+                <up-form-item prop="newPassword">
+                    <up-input
+                        clearable
+                        prefixIcon="lock"
+                        :password="!showPassword_2"
+                        placeholder="填输入8-20位新密码"
+                        v-model="editPasswordAgainModel.newPassword"
+                    >
+                        <template #suffix>
+                            <u-icon
+                                :name="!showPassword_2 ? 'eye-fill' : 'eye'"
+                                @tap="showPassword_2 = !showPassword_2"
+                                size="20"
+                            />
+                        </template>
+                    </up-input>
+                </up-form-item>
+                <up-form-item prop="newPasswordAgain">
+                    <up-input
+                        clearable
+                        prefixIcon="lock"
+                        :password="!showPassword_3"
+                        placeholder="填再次输入8-20位新密码"
+                        v-model="editPasswordAgainModel.newPasswordAgain"
+                    >
+                        <template #suffix>
+                            <u-icon
+                                :name="!showPassword_3 ? 'eye-fill' : 'eye'"
+                                @tap="showPassword_3 = !showPassword_3"
+                                size="20"
+                            />
+                        </template>
+                    </up-input>
+                </up-form-item>
+
+                <up-form-item>
+                    <up-button type="primary" text="确定" @tap="onHandleSubmit" />
+                </up-form-item>
+            </up-form>
+
+            <!-- 第三步页面 -->
+            <view class="edit-password-success" v-if="currenSteps === 2">
+                <up-icon name="checkmark-circle" size="56" color="#19be6b" bold></up-icon>
+                <view class="edit-result">修改成功</view>
+                <view class="count-down-container">
+                    <up-count-down
+                        :time="6000"
+                        format="ss"
+                        ref="countDownRef"
+                        :autoStart="false"
+                        @finish="onHandleFinish"
+                        style="margin-right: 6rpx"
+                    />
+                    秒后回到登录页面
+                </view>
+                <up-button
+                    type="primary"
+                    text="重新登录"
+                    class="logout-btn"
+                    @tap="onHandleLoginAgain"
+                />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { nextTick, ref } from 'vue'
+
+const showPassword_1 = ref(false) // 密码是否显示
+const showPassword_2 = ref(false) // 密码是否显示
+const showPassword_3 = ref(false) // 密码是否显示
+const currenSteps = ref(0) // 步骤索引
+const countDownRef = ref(null) // 倒计时组件
+const editPasswordRef = ref(null) // 密码表单
+const editPasswordAgainRef = ref(null) // 重复密码表单
+const editPasswordModel = ref({
+    username: '',
+    password: '',
+})
+const editPasswordAgainModel = ref({
+    newPassword: '',
+    newPasswordAgain: '',
+})
+
+const editPasswordRules = ref({
+    username: [
+        {
+            required: true,
+            trigger: ['blur', 'change'],
+            message: '请输入手机号',
+        },
+    ],
+    password: [
+        {
+            required: true,
+            trigger: ['blur', 'change'],
+            message: '请输入密码',
+        },
+    ],
+})
+const editPasswordAgainRules = ref({
+    newPassword: [
+        {
+            required: true,
+            trigger: ['blur', 'change'],
+            message: '请输入新密码',
+        },
+        {
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\d\s]).{8,20}$/,
+            // 正则检验前先将值转为字符串
+            transform(value) {
+                return String(value)
+            },
+            message: '密码需包含大小写字母、数字和特殊字符，长度为8到20个字符',
+        },
+    ],
+    newPasswordAgain: [
+        {
+            required: true,
+            trigger: ['blur', 'change'],
+            message: '请再次输入新密码',
+        },
+        {
+            validator: (rule, value, callback) => {
+                if (value !== editPasswordAgainModel.value.newPassword) {
+                    callback(new Error('两次输入的密码不一致'))
+                } else {
+                    callback()
+                }
+            },
+        },
+    ],
+})
+
+// 下一步
+const onHandleNext = () => {
+    editPasswordRef.value
+        .validate()
+        .then(async (valid) => {
+            if (valid) {
+                currenSteps.value++
+            }
+        })
+        .catch(() => {
+            // 处理验证错误
+        })
+}
+// 确定
+const onHandleSubmit = async () => {
+    editPasswordAgainRef.value
+        .validate()
+        .then(async (valid) => {
+            if (valid) {
+                currenSteps.value++
+                // 开启倒计时
+                nextTick(() => {
+                    if (countDownRef.value) {
+                        countDownRef.value.start()
+                    }
+                })
+            }
+        })
+        .catch(() => {
+            // 处理验证错误
+        })
+}
+
+// 倒计时结束
+const onHandleFinish = () => {
+    uni.redirectTo({ url: '/pages/login/index' })
+}
+
+// 重新登录
+const onHandleLoginAgain = () => {
+    if (countDownRef.value) {
+        countDownRef.value.reset()
+    }
+    uni.redirectTo({ url: '/pages/login/index' })
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-password {
+    height: 100%;
+    padding-top: 48rpx;
+    box-sizing: border-box;
+
+    .opinion-form {
+        width: 90%;
+        margin: 100rpx auto 0;
+    }
+}
+
+.edit-password-success {
+    padding-top: 58rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .edit-result {
+        padding: 18rpx 0 24rpx 0;
+    }
+
+    .count-down-container {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #999;
+        letter-spacing: 2rpx;
+    }
+
+    .logout-btn {
+        margin-top: 68rpx;
+        width: 45%;
+    }
+}
+</style>

src/pages/my/index.vue

@@ -18,13 +18,65 @@
             </view>
         </view>
 
-        <up-cell-group>
+        <!-- 操作列表区域 -->
-            <up-cell size="large" title="修改密码" isLink />
+        <view class="my-info-list">
-        </up-cell-group>
+            <up-cell-group>
+                <up-cell
+                    size="large"
+                    title="修改密码"
+                    isLink
+                    class="edit-password"
+                    @tap="onEditPassWord"
+                >
+                    <template #icon>
+                        <up-icon size="24" name="lock-open" color="#fa3534" />
+                    </template>
+                </up-cell>
+            </up-cell-group>
+
+            <up-button type="primary" text="退出账号" @tap="onLogOut" class="logout-btn" />
+        </view>
+
+        <!-- 退出提示弹框 -->
+        <up-modal
+            title="温馨提示"
+            :show="showModalLogout"
+            :showCancelButton="true"
+            content="是否确认退出当前账号？"
+            @confirm="onConfirmLogout"
+            @cancel="onCancelLogout"
+        />
     </view>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+
+const showModalLogout = ref(false)
+
+// 修改密码
+const onEditPassWord = () => {
+    uni.navigateTo({
+        url: '/pages/my/edit-password/index',
+    })
+}
+// 退出登录
+const onLogOut = () => {
+    showModalLogout.value = true
+}
+// 确认退出
+const onConfirmLogout = () => {
+    uni.removeStorageSync('token')
+    uni.removeStorageSync('userInfo')
+    uni.reLaunch({
+        url: '/pages/login/index',
+    })
+}
+// 取消退出
+const onCancelLogout = () => {
+    showModalLogout.value = false
+}
+</script>
 
 <style lang="scss" scoped>
 .my-container {
@@ -32,10 +84,10 @@
     background-color: #f0f2f5;
     .my-info {
         padding: 42rpx 0 42rpx 42rpx;
+        height: 10%;
         display: flex;
         align-items: center;
         background-color: #fff;
-
         .my-info-right {
             margin-left: 12rpx;
             font-size: 14px;
@@ -62,5 +114,23 @@
             }
         }
     }
+
+    .my-info-list {
+        height: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .edit-password {
+            margin-top: 24rpx;
+            background-color: #fff;
+        }
+
+        .logout-btn {
+            width: 95%;
+            margin: 0 auto;
+            margin-bottom: 120rpx;
+        }
+    }
 }
 </style>

src/pages/qualityInspection/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <!-- 质量检查一级页面 -->
+    <view class="qualityInspection"> </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.safetyViolations {
+    height: 100%;
+    background-color: #f6f9ff;
+    overflow: hidden;
+}
+</style>

src/pages/safetyMeasure/index.vue

@@ -0,0 +1,16 @@
+<template>
+    <!-- 安全措施一级页面 -->
+    <view class="safetyMeasure"> </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.safetyViolations {
+    height: 100%;
+    background-color: #f6f9ff;
+    overflow: hidden;
+}
+</style>

src/pages/safetyViolations/componetns/addAndEditForm.vue

@@ -0,0 +1,509 @@
+<template>
+    <!-- 新增 修改 详情表单-->
+    <up-form
+        labelWidth="70"
+        labelAlign="right"
+        labelPosition="left"
+        ref="addAndEditModelRef"
+        :model="addAndEditModel"
+        :rules="addAndEditModelRules"
+        style="background-color: #fff; padding: 0 30rpx 20rpx"
+    >
+        <TitleTipModal :TitleTip="`项目信息`" />
+        <up-form-item prop="projectName" label="项目名称" required>
+            <up-input
+                readonly
+                border="none"
+                placeholder="点击选择项目"
+                v-model="addAndEditModel.projectName"
+            >
+                <template #suffix>
+                    <up-icon name="arrow-right" @tap="onSelectProject" />
+                </template>
+            </up-input>
+        </up-form-item>
+        <up-form-item prop="major" label="专业">
+            <up-input
+                border="none"
+                readonly
+                placeholder="点击选择专业"
+                v-model="addAndEditModel.major"
+            >
+                <template #suffix>
+                    <up-icon name="arrow-right" @tap="onSelectMajor" />
+                </template>
+            </up-input>
+        </up-form-item>
+        <up-form-item prop="procedure" label="工序">
+            <up-input
+                border="none"
+                readonly
+                placeholder="点击选择工序"
+                v-model="addAndEditModel.procedure"
+            >
+                <template #suffix>
+                    <up-icon name="arrow-right" @tap="onSelectProcedure" />
+                </template>
+            </up-input>
+        </up-form-item>
+
+        <TitleTipModal :TitleTip="`违章信息`" />
+        <up-form-item prop="examiner" label="检查人">
+            <up-input placeholder="请输入" border="none" />
+        </up-form-item>
+        <up-form-item prop="inspectTime" label="检查日期">
+            <up-input
+                readonly
+                border="none"
+                inputAlign="right"
+                placeholder="点击选择检查日期"
+                v-model="addAndEditModel.inspectTime"
+            >
+                <template #suffix>
+                    <up-icon name="arrow-right" @tap="onSelectDate(1)" />
+                </template>
+            </up-input>
+        </up-form-item>
+        <up-form-item prop="correctionTerm" label="整改期限" required>
+            <up-input
+                readonly
+                border="none"
+                placeholder="点击选择整改期限"
+                inputAlign="right"
+                v-model="addAndEditModel.correctionTerm"
+            >
+                <template #suffix>
+                    <up-icon name="arrow-right" @tap="onSelectDate(2)" />
+                </template>
+            </up-input>
+        </up-form-item>
+        <up-form-item prop="vrLocation" label="违章地点" required>
+            <up-input placeholder="请输入" border="none" v-model="addAndEditModel.vrLocation" />
+        </up-form-item>
+        <up-form-item prop="vrDescribe" label="违章描述" required>
+            <up-textarea
+                placeholder="请输入"
+                autoHeight
+                border="none"
+                v-model="addAndEditModel.vrDescribe"
+            />
+        </up-form-item>
+        <up-form-item prop="vrImgList" label="违章照片(最多9张)" required>
+            <up-upload
+                name="1"
+                multiple
+                :maxCount="9"
+                :fileList="addAndEditModel.vrImgList"
+                @afterRead="onAfterReadVrImgList"
+                @delete="onDeletePicVrImgList"
+            />
+        </up-form-item>
+        <TitleTipModal :TitleTip="`整改信息`" />
+        <up-form-item prop="correctionPerson" label="整改人" required>
+            <up-input
+                placeholder="请输入"
+                border="none"
+                v-model="addAndEditModel.correctionPerson"
+            />
+        </up-form-item>
+        <up-form-item prop="correctionTime" label="整改日期">
+            <up-input
+                readonly
+                border="none"
+                inputAlign="right"
+                placeholder="点击选择整改日期"
+                v-model="addAndEditModel.correctionTime"
+            >
+                <template #suffix>
+                    <up-icon name="arrow-right" @tap="onSelectDate(3)" />
+                </template>
+            </up-input>
+        </up-form-item>
+        <up-form-item prop="correctionDescribe" label="整改说明" required>
+            <up-textarea
+                autoHeight
+                border="none"
+                placeholder="请输入"
+                v-model="addAndEditModel.correctionDescribe"
+            />
+        </up-form-item>
+        <up-form-item prop="examiner" label="整改照片(最多9张)">
+            <up-upload
+                name="1"
+                multiple
+                :maxCount="9"
+                :fileList="addAndEditModel.correctionImgList"
+                @afterRead="onAfterReadCorrectionImgList"
+                @delete="onDeleteCorrectionImgList"
+            />
+        </up-form-item>
+
+        <up-button type="primary" text="提交" @tap="onSubmitForm" style="width: 100%" />
+    </up-form>
+
+    <!-- 项目选择弹框 -->
+    <up-popup :show="projectShow" mode="center" @close="onCloseProjectPopup">
+        <view class="project-popup">
+            <text>选择工程</text>
+            <view style="width: 100%; margin: 18rpx 0">
+                <up-input
+                    clearable
+                    placeholder="输入工程名称搜索"
+                    v-model.trim="onSearchProjectName"
+                    suffixIconStyle="color: #909399"
+                >
+                    <template #suffix>
+                        <up-icon name="search" size="24" @tap="onSearchInProjectPopup" />
+                    </template>
+                </up-input>
+            </view>
+
+            <!-- 工程列表 -->
+            <view class="project-list">
+                <up-list @scrolltolower="onScrollTolower" style="width: 100%">
+                    <up-list-item v-for="item in 20" :key="item">
+                        <up-cell :title="`xxxxxxxxx工程-${item}`" @tap="onSelectProjectItem(item)">
+                            <template #icon>
+                                <text style="margin-right: 10rpx">
+                                    {{ item }}
+                                </text>
+                            </template>
+                        </up-cell>
+                    </up-list-item>
+                </up-list>
+            </view>
+        </view>
+    </up-popup>
+
+    <!-- 专业选择器 -->
+    <up-picker
+        keyName="label"
+        :show="majorShow"
+        :columns="majorList"
+        @confirm="onConfirmMajor"
+        @cancel="majorShow = !majorShow"
+    />
+    <!-- 工序选择器 -->
+    <up-picker
+        keyName="label"
+        :show="procedureShow"
+        :columns="procedureList"
+        @confirm="onConfirmProcedure"
+        @cancel="procedureShow = !procedureShow"
+    />
+    <!-- 年月日选择器 -->
+    <up-datetime-picker
+        mode="date"
+        :show="dateShow"
+        v-model="dateValue"
+        :formatter="formatter"
+        @confirm="onConfirmDate"
+        @cancel="dateShow = !dateShow"
+    />
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import TitleTipModal from '@/components/TitleTipModal/index'
+const addAndEditModelRef = ref(null)
+
+const projectShow = ref(false) // 项目选择弹框
+const majorShow = ref(false) // 专业选择器
+const procedureShow = ref(false) // 工序选择器
+const dateShow = ref(false) // 年月日选择器
+const onSearchProjectName = ref('') // 项目搜索条件
+const dateValue = ref(Date.now()) // 年月日选择器数据源
+const dateType = ref(1)
+const props = defineProps({
+    // 表单类型 1. 新增 2. 修改 3. 详情
+    formType: {
+        type: Number,
+        default: () => 1,
+    },
+})
+
+// 表单数据源
+const addAndEditModel = reactive({
+    projectName: '',
+    procedure: '',
+    major: '',
+    examiner: '',
+    inspectTime: '',
+    correctionTerm: '',
+    vrLocation: '',
+    vrDescribe: '',
+    vrImgList: [],
+    correctionPerson: '',
+    correctionDescribe: '',
+    correctionTime: '',
+    correctionImgList: [],
+})
+
+// 校验规则
+const addAndEditModelRules = ref({
+    projectName: [
+        {
+            type: 'string',
+            required: true,
+            message: '请选择项目名称',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    correctionTerm: [
+        {
+            type: 'string',
+            required: true,
+            message: '请选择整改期限',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    vrLocation: [
+        {
+            type: 'string',
+            required: true,
+            message: '请填写违章地点',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    vrDescribe: [
+        {
+            type: 'string',
+            required: true,
+            message: '请填写违章描述',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    vrImgList: [
+        {
+            type: 'string',
+            required: true,
+            message: '请上传违章照片',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    correctionPerson: [
+        {
+            type: 'string',
+            required: true,
+            message: '请填写整改人',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    correctionDescribe: [
+        {
+            type: 'string',
+            required: true,
+            message: '请填写整改说明',
+            trigger: ['blur', 'change'],
+        },
+    ],
+})
+// 项目数据源
+const projectList = ref([])
+// 专业数据源
+const majorList = reactive([
+    [
+        {
+            label: '专业1',
+            value: 2021,
+        },
+        {
+            label: '专业2',
+            value: 2022,
+        },
+        {
+            label: '专业3',
+            value: 2023,
+        },
+        {
+            label: '专业4',
+            value: 2024,
+        },
+    ],
+])
+// 工序数据源
+const procedureList = reactive([
+    [
+        {
+            label: '工序1',
+            id: 2021,
+        },
+        {
+            label: '工序2',
+            id: 2022,
+        },
+        {
+            label: '工序3',
+            id: 2023,
+        },
+        {
+            label: '工序4',
+            id: 2024,
+        },
+    ],
+])
+
+// 日期格式化
+const formatter = (type, value) => {
+    if (type === 'year') {
+        return `${value}年`
+    }
+    if (type === 'month') {
+        return `${value}月`
+    }
+    if (type === 'day') {
+        return `${value}日`
+    }
+    return value
+}
+
+// 选择项目
+const onSelectProject = () => {
+    console.log('---选择')
+
+    projectShow.value = true
+}
+// 搜索
+const onSearchInProjectPopup = () => {
+    console.log('---搜索', onSearchProjectName.value)
+}
+
+// 滚动触底事件
+const onScrollTolower = () => {
+    console.log('---滚动触底')
+}
+
+// 选择项目
+const onSelectProjectItem = (item) => {
+    addAndEditModel.projectName = 'xxxxxx工程' + item
+    projectShow.value = false
+}
+
+// 关闭项目选择弹框
+const onCloseProjectPopup = () => {
+    onSearchProjectName.value = ''
+    projectShow.value = false
+}
+
+// 选择专业
+const onSelectMajor = () => {
+    majorShow.value = true
+}
+
+// 专业确定
+const onConfirmMajor = (item) => {
+    console.log('---确定', item.value[0].label)
+    addAndEditModel.major = item.value[0].label
+    majorShow.value = false
+}
+// 选择工序
+const onSelectProcedure = () => {
+    procedureShow.value = true
+}
+
+// 工序确定
+const onConfirmProcedure = (item) => {
+    addAndEditModel.procedure = item.value[0].label
+    procedureShow.value = false
+}
+
+// 打开日期选择器
+const onSelectDate = (type) => {
+    // type 为类型 1. 检查日期 2. 整改期限 3. 整改日期
+    dateType.value = type
+    dateShow.value = true
+}
+
+// 日期确定
+const onConfirmDate = (item) => {
+    const formatDateValue = formatDate(dateValue.value)
+    if (dateType.value === 1) {
+        addAndEditModel.inspectTime = formatDateValue
+    }
+    if (dateType.value === 2) {
+        addAndEditModel.correctionTerm = formatDateValue
+    }
+    if (dateType.value === 3) {
+        addAndEditModel.correctionTime = formatDateValue
+    }
+    dateShow.value = false
+    console.log('---日期确定', formatDateValue)
+}
+
+const formatDate = (timestamp) => {
+    const date = new Date(timestamp)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+}
+
+// 违章照片上传
+const onAfterReadVrImgList = (event) => {
+    let lists = [].concat(event.file)
+    lists.map((item) => {
+        addAndEditModel.vrImgList.push({
+            ...item,
+        })
+    })
+}
+// 违章照片删除
+const onDeletePicVrImgList = (event) => {
+    addAndEditModel.vrImgList.splice(event.index, 1)
+}
+
+// 整改照片上传
+const onAfterReadCorrectionImgList = (event) => {
+    let lists = [].concat(event.file)
+    lists.map((item) => {
+        addAndEditModel.correctionImgList.push({
+            ...item,
+        })
+    })
+}
+// 违章照片删除
+const onDeleteCorrectionImgList = (event) => {
+    addAndEditModel.correctionImgList.splice(event.index, 1)
+}
+
+// 提交
+const onSubmitForm = () => {
+    console.log('---提交')
+    addAndEditModelRef.value.validate().then((valid) => {
+        if (valid) {
+            console.log('校验通过')
+        }
+    })
+}
+</script>
+
+<style scoped lang="scss">
+.u-nav-slot {
+    display: flex;
+    align-items: center;
+    color: #2979ff;
+}
+
+::v-deep .u-navbar__content__title {
+    font-weight: bold;
+}
+
+::v-deep .u-form-item__body__right {
+    padding: 0 60rpx;
+}
+
+.project-popup {
+    width: 90vw;
+    height: 80vh;
+    padding: 20rpx 12rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+
+    .project-list {
+        width: 100%;
+        overflow: hidden;
+    }
+}
+</style>

src/pages/safetyViolations/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <!-- 安全违章一级页面 -->
+    <view class="safetyViolations">
+        <NavBarModal :navBarTitle="`安全违章`" />
+
+        <view class="container">
+            <AddAndEditForm />
+        </view>
+    </view>
+</template>
+
+<script setup>
+import NavBarModal from '@/components/NavBarModal/index'
+import AddAndEditForm from './componetns/addAndEditForm.vue'
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.safetyViolations {
+    height: 100%;
+    padding-top: 54px;
+    box-sizing: border-box;
+    .container {
+        background-color: #f6f9ff;
+        overflow-y: auto;
+    }
+}
+</style>

src/pages/workbenches/components/icon-card.vue

@@ -0,0 +1,62 @@
+<template>
+    <!-- 卡片 -->
+    <view class="icon-card">
+        <view class="title">{{ cardTitle }}</view>
+        <up-grid :border="false" col="4">
+            <up-grid-item
+                v-for="(icon, index) in props.iconList"
+                :key="index"
+                @tap="onHandleJumpPage(icon.jumpPath)"
+            >
+                <up-image width="56" height="56" shape="circle" :src="icon.iconUrl" />
+                <text class="grid-text">{{ icon.title }}</text>
+            </up-grid-item>
+        </up-grid>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+    iconList: {
+        type: Array,
+        default: () => [],
+    },
+    cardTitle: {
+        type: String,
+        default: () => '',
+    },
+})
+
+// 创建对子组件的引用
+const uToastRef = ref(null)
+
+// 定义方法
+const onHandleJumpPage = (path) => {
+    //  跳转对应的页面
+    uni.navigateTo({
+        url: path,
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-card {
+    width: 90%;
+    background-color: #fff;
+    margin: 30rpx auto;
+    border-radius: 6rpx;
+
+    .title {
+        padding: 24rpx 32rpx;
+        color: #353232;
+    }
+
+    .grid-text {
+        font-size: 13px;
+        padding: 12rpx 0;
+        color: #575353;
+    }
+}
+</style>

src/pages/workbenches/index.vue

@@ -1,18 +1,60 @@
 <template>
-    <view class="workbenches-container"> </view>
+    <!-- 工作台页面 -->
+    <view class="workbenches-container">
+        <iconCard :iconList="iconList_1" :cardTitle="`照片上传`" />
+        <iconCard :iconList="iconList_2" :cardTitle="`照片查询`" />
+    </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import iconCard from './components/icon-card.vue'
+import icon_1 from '../../static/image/home_1.png'
+import icon_2 from '../../static/image/home_2.png'
+import icon_3 from '../../static/image/home_3.png'
+import icon_4 from '../../static/image/home_4.png'
+import icon_5 from '../../static/image/home_5.png'
+import icon_6 from '../../static/image/home_6.png'
+const iconList_1 = ref([
+    {
+        jumpPath: '/pages/safetyViolations/index',
+        title: '安全违章',
+        iconUrl: icon_1,
+    },
+    {
+        jumpPath: '/pages/qualityInspection/index',
+        title: '质量检查',
+        iconUrl: icon_2,
+    },
+    {
+        jumpPath: '/pages/safetyMeasure/index',
+        title: '安全措施落实',
+        iconUrl: icon_3,
+    },
+    {
+        jumpPath: '/pages/coordinatePhotos/index',
+        title: '协调照片',
+        iconUrl: icon_4,
+    },
+    {
+        jumpPath: '/pages/importantMatters/index',
+        title: '重要事项',
+        iconUrl: icon_5,
+    },
+])
+const iconList_2 = ref([
+    {
+        jumpPath: '/pages/comprehensiveQuery/index',
+        title: '综合查询',
+        iconUrl: icon_6,
+    },
+])
 </script>
 
 <style lang="scss" scoped>
-.content {
+.workbenches-container {
-    height: 100vh;
+    height: 100%;
-    display: flex;
+    background-color: #f6f9ff;
-    flex-direction: column;
+    overflow: hidden;
-    align-items: center;
-    background-color: #f5f5f5;
-    overflow-y: auto;
 }
 </style>