优化

MrShi

2025-09-24 0e555ff7887e46c5bdd9d8ca237f7ed1e1634c0f

 h5/pages/staff/snapshot.vue

@@ -1,24 +1,37 @@
<template>

   <view class="main_app">

      <view class="main_wrap">

         <!--  -->
         <view class="line">
            <view class="label">
               <text>*</text>
               <text>责任部门</text>
            </view>
            <view class="value" @click="isShowCompany = true">
               <text class="mr6"
                  :style="{ color: param.companyName ? '#000000' : '#999999' }">{{ param.companyName ? param.companyName : "请选择" }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         <!--  -->

         <view class="line">

            <view class="label">

               <text>*</text>

               <text>责任部门</text>

            </view>

            <view class="value" @click="isShowCompany = true">

               <text class="mr6"

                  :style="{ color: param.companyName ? '#000000' : '#999999' }">{{ param.companyName ? param.companyName : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

			
         <view class="line">

            <view class="label">

               <text>*</text>

               <text>检查类型</text>

            </view>

            <view class="value" @click="isShow = true">

               <text class="mr6"

                  :style="{ color: param.checkTypeName ? '#000000' : '#999999' }">{{ param.checkTypeName ? param.checkTypeName : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

			
         <view class="line">

            <view class="label">

               <text>*</text>

               <text>隐患区域</text>

            </view>

            <view class="value" @click="isShowArea = true">

            <view class="value" @click="openArea">

               <text class="mr6"

                  :style="{ color: param.areaName ? '#000000' : '#999999' }">{{ param.areaName ? param.areaName : "请选择" }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

@@ -56,8 +69,14 @@
               </view>

               <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in submitFileList" :key="i">

                  <u-icon class="close" size="20" name="close-circle-fill" color="red" @click="fileDel(i)"></u-icon>

                  <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image><video v-if="item.type == 1"

                     :src="item.fileurlFull"></video>

                  <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>

                  <!--                   <video v-if="item.type == 1"

                     :src="item.fileurlFull" :controls="false" :show-center-play-btn="false"></video> -->

                  <view v-if="item.type == 1" class="video_wrap">

                     <video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"

                        class="video" :enable-progress-gesture="false" muted />

                     <image src="@/static/play.png" class="play" mode=""></image>

                  </view>

               </view>

            </view>

         </view>

@@ -68,7 +87,7 @@
               <text>情况说明</text>

            </view>

            <view class="value">

               <textarea placeholder="请详细描述现场情况，不少于10个字" minlength="10" v-model="param.content"

               <textarea placeholder="请详细描述现场情况" v-model="param.content"

                  placeholder-style="color: #999999;" />

            </view>

         </view>

@@ -86,7 +105,7 @@
               <text></text>

               <text>联系电话</text>

            </view>

            <view class="value"><input type="text" disabled placeholder="请输入联系电话" v-model="param.memberPhone"

            <view class="value"><input type="tel" disabled placeholder="请输入联系电话" v-model="param.memberPhone"

                  placeholder-style="color: #999999;" /></view>

         </view>

         <view class="line">

@@ -105,16 +124,19 @@
            <view class="footer_btn" @click="onSubmit">提交</view>

         </view>

      </view>

      <!--  -->
      <u-picker keyName="name" :show="isShowCompany" closeOnClickOverlay :columns="deptList" @confirm="seletedCompany"
      <!--  -->

      <u-picker keyName="name" :show="isShowCompany" closeOnClickOverlay :columns="deptList" @confirm="seletedCompany"

         @close="isShowCompany = false" @cancel="isShowCompany = false"></u-picker>

      <!-- 区域 -->

      <u-picker keyName="name" :show="isShowArea" closeOnClickOverlay :columns="areaOptions" @confirm="seletedArea"

         @close="isShowArea = false" @cancel="isShowArea = false"></u-picker>

      <u-picker keyName="name" :show="isShowType" closeOnClickOverlay :columns="areaType" @confirm="seletedType"

         @close="isShowType = false" @cancel="isShowType = false"></u-picker>

      <!-- 检查类型 -->

      <u-picker keyName="name" :show="isShow" closeOnClickOverlay :columns="checkTypeList" @confirm="seletedTypeVal"

         @close="isShow = false" @cancel="isShow = false"></u-picker>

      <!--  -->

      <u-datetime-picker :show="isShowTime" :minDate="new Date().getTime()" mode="datetime" closeOnClickOverlay

      <u-datetime-picker :show="isShowTime" :formatter="formatter" :minDate="new Date().getTime()" mode="datetime" closeOnClickOverlay

         @cancel="isShowTime = false" @close="isShowTime = false" @confirm="seletedDate"></u-datetime-picker>

      <!--  -->

      <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>

@@ -130,7 +152,7 @@
   import {

      uploadUrl,

      DangerCreate,

      DangerConfigType,
      DangerConfigType,

      deptListPost

   } from '@/api'

   import dayjs from 'dayjs'

@@ -140,15 +162,17 @@
            param: {},

            submitFileList: [],



            isShowCompany: false,
            isShow: false,

            isShowCompany: false,

            isShowArea: false,

            isShowType: false,

            isShowTime: false,

            showUpload: false,



            deptList: [],
            deptList: [],

            areaOptions: [],

            areaType: [],

            checkTypeList: [],

         }

      },

      onLoad(option) {

@@ -166,15 +190,33 @@
            this.$set(this.param, 'checkorName', option.name)

         })

      },

      methods: {

      methods: {
         formatter(type, value) {
            if (type === 'year') {
               return `${value}年`
            }
            if (type === 'month') {
               return `${value}月`
            }
            if (type === 'day') {
               return `${value}日`
            }
            if (type === 'hour') {
               return `${value}时`
            }
            if (type === 'minute') {
               return `${value}分`
            }
            return value
         },

         onSubmit() {

            const {

               param,

               submitFileList

            } = this
            if (!param.companyName) return uni.showToast({
               title: '请选择责任部门',
               icon: 'none'
            } = this

            if (!param.companyName) return uni.showToast({

               title: '请选择责任部门',

               icon: 'none'

            })

            if (!param.areaName) return uni.showToast({

               title: '请选择隐患区域',

@@ -192,10 +234,10 @@
               title: '请输入情况说明',

               icon: 'none'

            })

            if (param.content.length < 10) return uni.showToast({

               title: '情况说明不得小于10个字',

               icon: 'none'

            })

            // if (param.content.length < 10) return uni.showToast({

            //    title: '情况说明不得小于10个字',

            //    icon: 'none'

            // })



            DangerCreate({

               ...param,

@@ -205,20 +247,27 @@
                  this.$jump('/pages/staff/snapshotResult')

               }

            })

         },
         seletedCompany(e) {
            const item = e.value[0]
            this.$set(this.param, 'companyId', item.id)
            this.$set(this.param, 'companyName', item.name)
            this.$set(this.param, 'areaId', '')
         },

         seletedCompany(e) {

            const item = e.value[0]

            this.$set(this.param, 'companyId', item.id)

            this.$set(this.param, 'companyName', item.name)

            this.$set(this.param, 'areaId', '')

            this.$set(this.param, 'areaName', '')
            DangerConfigType({
               type: '0',
               companyId: item.id
            }).then(res => {
               this.areaOptions = [res.data]
            })
            this.isShowCompany = false
            this.$set(this.param, 'checkUserId', '')
            this.$set(this.param, 'applyCheckUserId', '')
            this.$set(this.param, 'checkorName', '')

            DangerConfigType({

               type: '0',

               companyId: item.id

            }).then(res => {

               this.areaOptions = [res.data]

            })

            this.isShowCompany = false

         },
         openArea() {
            if(!this.param.companyId) return this.showToast('请先选择责任部门')
            this.isShowArea = true
         },

         seletedArea(e) {

            const item = e.value[0]

@@ -243,6 +292,13 @@
            console.log(item)

            this.isShowType = false

         },

         seletedTypeVal(e) {

            const item = e.value[0]

            this.$set(this.param, 'checkTypeId', item.id)

            this.$set(this.param, 'checkTypeName', item.name)

            console.log(item)

            this.isShow = false

         },

         seletedSafety(e) {



         },

@@ -250,9 +306,18 @@
            this.$set(this.param, 'submitTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))

            this.isShowTime = false

         },

         initConfig() {
            deptListPost({}).then(res => {
               this.deptList = [res.data]
         initConfig() {

            deptListPost({

               queryHiddenDanger: 1

            }).then(res => {

               this.deptList = [res.data]

            })

            DangerConfigType({

               type: '2'

            }).then(res => {

               this.checkTypeList = [res.data]

               this.$set(this.param, 'checkTypeId', res.data[0].id)

               this.$set(this.param, 'checkTypeName', res.data[0].name)

            })

            DangerConfigType({

               type: '1'

@@ -281,7 +346,7 @@
            this.showUpload = false

            let token = uni.getStorageSync('token') || ''

            uni.chooseImage({

               count: 4,

               count: 9,

               success: (chooseImageRes) => {

                  uni.showLoading({

                     title: '上传中',

@@ -376,7 +441,6 @@


<style lang="scss">

   .main_wrap {

      padding-bottom: 200rpx;



      .line {

         display: flex;

@@ -423,12 +487,14 @@
            display: flex;

            flex-wrap: wrap;

         }



         textarea{
            width: 100%;
         }

         .adduser_list_item_ipt1_upload {

            margin-top: 24rpx;

            width: 120rpx;

            height: 120rpx;

            margin-right: 24rpx;

            width: 156rpx;

            height: 156rpx;

            margin-right: 20rpx;

            border: 2rpx solid #e5e5e5;

            background: #f7f7f7;

            color: #666666;

@@ -439,11 +505,32 @@
            justify-content: center;

            position: relative;



            &:nth-of-type(4n) {

               margin-right: 0;

            }



            .close {

               position: absolute;

               right: -20rpx;

               top: -20rpx;

               z-index: 9999;

            }



            .video_wrap {

               position: relative;

               border: 1px solid;

               width: 156rpx;

               height: 156rpx;

               border-radius: 4rpx;



               .play {

                  width: 60rpx !important;

                  height: 60rpx !important;

                  position: absolute;

                  top: 50%;

                  left: 50%;

                  transform: translate(-50%, -50%);

               }

            }



            image {

@@ -453,7 +540,7 @@


            video {

               width: 100%;

               max-height: 120rpx;

               max-height: 156rpx;

            }

         }

      }

@@ -472,11 +559,12 @@
   .footer {

      width: 100%;

      padding: 0 30rpx;

      margin-top: 80rpx;

      padding-bottom: env(safe-area-inset-bottom);

      box-sizing: border-box;

      position: fixed;

      left: 0;

      bottom: 68rpx;

      // position: fixed;

      // left: 0;

      // bottom: 68rpx;



      .footer_btn {

         width: 100%;