吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
uniapps/work-app/src/subPackages/workDetail/index.vue
@@ -4,33 +4,10 @@
      <!-- 自定义导航栏 -->
      <u-navbar title="工单详情" :is-back="true" back-text="" :back-icon-size="40" @left-click="onBackClick">
         <template #right>
            <div class="share-btn" @click="onShareClick">分享</div>
        <div v-if="isH5" class="tapShare-icon"><img src="/static/images/work/share.svg"  @click="onShareClick"/></div>
            <div v-else class="share-btn" @click="onShareClick"></div>
         </template>
      </u-navbar>
      <!-- 分享弹出层 -->
      <div v-if="showShareModal" class="share-modal-overlay" @click="onShareModalClose">
         <div class="share-modal-content" @click.stop>
            <div class="share-modal-header">
               <div class="share-modal-title">分享到</div>
               <div class="share-modal-close" @click="onShareModalClose">×</div>
            </div>
            <div class="share-modal-body">
               <div class="share-item" @click="shareToWechat">
                  <div class="share-icon wechat"></div>
                  <div class="share-name">微信好友</div>
               </div>
               <div class="share-item" @click="shareToMoments">
                  <div class="share-icon moments"></div>
                  <div class="share-name">朋友圈</div>
               </div>
               <div class="share-item" @click="copyLink">
                  <div class="share-icon link"></div>
                  <div class="share-name">复制链接</div>
               </div>
            </div>
         </div>
      </div>
      <div class="detailTop">
         <div class="image-container">
            <u-swiper
@@ -45,15 +22,8 @@
               height="410rpx"
               @click="previewImage"
            ></u-swiper>
            <!--            <div class="detailTitle">-->
            <!--               <div class="titleText">-->
            <!--                  <div class="itemName">{{workDetailData.event_name}}</div>-->
            <!--                  <div class="itemTime">{{formatDate(workDetailData.create_time)}}</div>-->
            <!--               </div>-->
            <!--            </div>-->
         </div>
      </div>
    <!-- 工单内容 -->
    <div class="worderContainer">
      <div class="workOrderContent">
@@ -61,45 +31,71 @@
        <div class="workOrderContainer">
          <div class="orderRow">
            <div class="rowTitle">工单编号</div>
            <div>{{ workDetailData.event_num }}</div>
            <div>{{ workDetailData.eventNum }}</div>
          </div>
          <div class="orderRow">
            <div class="rowTitle">工单处置人</div>
            <div>{{ workDetailData.event_num?.slice(0, 2) === 'AI' ? 'AI 小飞' : workDetailData.creator }}</div>
            <div>{{ workDetailData.disposeUserName }}</div>
          </div>
          <div class="orderRow">
            <div class="rowTitle">处置部门</div>
            <div>{{ workDetailData.dept_name }}</div>
            <div>{{ workDetailData.disposeDeptName }}</div>
          </div>
          <div class="orderRow">
            <div class="rowTitle">拍摄时间</div>
            <div>{{ workDetailData.create_time }}</div>
            <div>{{ workDetailData.shootTime }}</div>
          </div>
          <div class="orderRow">
            <div class="rowTitle">分发人员</div>
            <div>{{ workDetailData.remark }}</div>
            <div>{{ workDetailData.distributeUserName }}</div>
          </div>
          <div class="orderRow">
            <div class="rowTitle">分发部门</div>
            <div>{{ workDetailData.remark }}</div>
            <div>{{ workDetailData.distributeDeptName }}</div>
          </div>
          <div class="orderRow">
            <div class="rowTitle">分发时间</div>
            <div>{{ workDetailData.create_time }}</div>
            <div>{{ workDetailData.distributeTime }}</div>
          </div>
          <div class="orderRow">
            <div class="rowTitle">工单位置</div>
            <div class="rowAddress" @click="jumpMap(workDetailData)">{{ workDetailData.address }}</div>
            <div class="rowAddress" @click="jumpMap(workDetailData)">{{ workDetailData.eventLocation }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="actionButton">
      <div class="btngroups">
        <up-button type="primary" color="#AEAEAE" text="退回"></up-button>
        <up-button type="primary" color="#1D6FE9" text="确认"></up-button>
    <div class="actionButton" >
      <div class="btngroups" v-if="workDetailData.eventStatus !== 3">
        <up-button type="primary"  color="#AEAEAE" text="退回" @click="rejectTicket"></up-button>
        <up-button type="primary" color="#1D6FE9" text="确认" @click="confirmTheTicket"></up-button>
      </div>
      <div class="btngroups" v-if="workDetailData.eventStatus === 3">
        <up-button type="primary" color="#1D6FE9" text="已确认" @click="confirmedHandle"></up-button>
      </div>
    </div>
    <!-- 分享弹出层 -->
    <div v-if="showShareModal" class="share-modal-overlay" @click="onShareModalClose">
      <div class="share-modal-content" @click.stop>
        <div class="share-modal-header">
          <div class="share-modal-title">分享到</div>
          <div class="share-modal-close" @click="onShareModalClose">×</div>
        </div>
        <div class="share-modal-body">
          <div class="share-item" @click="shareToWechat">
            <div class="share-icon wechat"></div>
            <div class="share-name">微信好友</div>
          </div>
          <div class="share-item" @click="shareToMoments">
            <div class="share-icon moments"></div>
            <div class="share-name">朋友圈</div>
          </div>
          <div class="share-item" @click="copyLink">
            <div class="share-icon link"></div>
            <div class="share-name">复制链接</div>
          </div>
        </div>
      </div>
    </div>
  </div>
@@ -107,67 +103,43 @@
<script setup>
// import { getShowImg, getSmallImg } from '@/utils/util'
import { ref, computed } from 'vue'
import { getList, flowEvent } from '/src/api/work/index.js'
import {getGddetailedData,backGdApi} from '/src/api/work/index.js'
import dayjs from 'dayjs'
const formatDate = dateString => {
  return dayjs(dateString).format('MM/DD HH:mm')
}
const eventNum = ref('')
// 工单内容
const workDetailData = ref({
  "id": 8474,
  "wayline_job_id": "51835088-cd94-42f8-b2ec-a9069ced4e7b",
  "event_name": "测试",
  "device_sn": "7CTDM5E00B3H61",
  "status": 3,
  "photo_url": "https://wrj.shuixiongit.com/minio/cloud-bucket/upload/20260113/f090f03fdc52499473ab9cbfcdc0876d.jpeg",
  "file_path": "upload/20260113/f090f03fdc52499473ab9cbfcdc0876d.jpeg",
  "longitude": "115.85649472222222",
  "latitude": "28.624301527777778",
  "create_time": "2026-01-13 16:51:57",
  "media_type": "PHOTO_TYPE",
  "event_num": "BHJC20260113002",
  "ai_types": "道路裂缝",
  "ai_type_key_list": [
    "DLLFSB"
  ],
  "work_order_type_dict_key": "ZHZLL",
  "work_order_type": "交通运输与交管​",
  "create_user": "曾超杰",
  "update_user": "管理员",
  "dept_name": "中图智飞(江西省)",
  "create_user_id": "2009140684346388482",
  "user_id": "1991745495648227330",
  "handle_user_id": "1123598821738675201",
  "address": "江西省南昌市西湖区朝农街道抚生南路1806号南昌台湾健康产业城",
  "update_photo_url": "https://wrj.shuixiongit.com/minio/cloud-bucket/upload/20260113/f090f03fdc52499473ab9cbfcdc0876d.jpeg",
  "content": "测试",
  "work_type": "3",
  "job_name": "定向拍照2",
  "is_review": 0,
  "job_create_time": "2026-01-13 16:51:57"
},)
const workDetailData = ref({})
// 环境判断
const isH5 = ref(false)
onLoad(async options => {
  eventNum.value = options.eventNum
  // await getDataList(eventNum.value)
  eventNum.value = options.id
  await getDataList(options.id)
  checkEnvironment()
})
const getDataList = async val => {
  const params = {
    current: 1,
    size: 9999,
    source: 1,
    event_name: val,
    id: val,
  }
  const res = await getList(params)
  const response = res.data.data.records
  workDetailData.value = response[0]
  const res = await getGddetailedData(params)
  const response = res.data.data
  workDetailData.value = response
}
// 检查运行环境
const checkEnvironment = () => {
  const systemInfo = uni.getSystemInfoSync()
  // #ifdef APP-PLUS
  isH5.value = false
  // #endif
  console.log('详情', response)
  // #ifdef H5
  isH5.value = true
  // #endif
  console.log('当前环境:', isH5.value ? 'H5' : 'App')
}
// 图片预览
const previewImage = index => {
  if (getImageList.value.length === 0) return
  const currentIndex = typeof index === 'number' ? index : 0
@@ -179,23 +151,56 @@
const getImageList = computed(() => {
  const imageArr = []
  const detail = workDetailData.value
  if (detail.photo_url) {
    const smallUrl = detail.photo_url
  if (detail.eventImageUrl) {
    const smallUrl = detail.eventImageUrl
    imageArr.push(smallUrl)
  }
  if (detail.update_photo_url) {
    const smallUrl = detail.update_photo_url
    imageArr.push(smallUrl)
  }
  // if (detail.update_photo_url) {
  //   const smallUrl = detail.update_photo_url
  //   imageArr.push(smallUrl)
  // }
  return imageArr
})
// 跳转地图
const jumpMap = item => {
  const contactStr = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/subPackages/workDetail/mapWork/index?eventNum=${item.event_num}`,
    url: `/subPackages/workDetail/mapWork/index?eventNum=${contactStr}`,
  })
}
// 退回
const rejectTicket = () => {
  const id = workDetailData.value.id
  backGdApi({eventId : id,eventStatus:'0'}).then(res => {
    uni.showToast({
      title: '退回成功',
      icon: 'success',
      duration: 1500
    })
    setTimeout(() => {
      uni.navigateBack()
    })
  })
}
// 确认工单
const confirmTheTicket = () => {
  const id = workDetailData.value.id
  backGdApi({eventId : id,eventStatus:'1'}).then(res => {
    uni.showToast({
      title: '确认成功',
      icon: 'success',
      duration: 1500
    })
    setTimeout(() => {
      uni.navigateBack()
    })
  })
}
// 已确认
const confirmedHandle = () => {
  uni.navigateBack()
}
// 分享模态框状态
const showShareModal = ref(false)
@@ -272,7 +277,7 @@
         title: workDetailData.value.event_name || '工单详情',
         summary: '查看工单详情',
         href: 'https://example.com/workDetail?eventNum=' + workDetailData.value.event_num,
         imageUrl: workDetailData.value.photo_url,
         imageUrl: workDetailData.value.eventImageUrl,
         success: () => {
            uni.showToast({ title: '分享成功', icon: 'success' })
            onShareModalClose()
@@ -318,15 +323,36 @@
<style lang="scss" scoped>
.workDetailContainer {
  // 添加导航栏高度的padding-top,避免内容被遮挡
  padding-top: 44px;
  // 分享按钮样式
  padding-top: 88rpx;
  :deep(){
  .u-navbar__content{
    background: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_app_assets/images/user/bg.png")  no-repeat !important;
    background-size: 100%!important;
    height: 88rpx !important;
  }
}  // 分享按钮样式
  .share-btn {
    color: #1D6FE9;
    font-size: 14px;
    padding: 0 10px;
    line-height: 44px;
    // #ifdef APP-PLUS
    width: 40rpx;
    height: 40rpx;
    background-image: url('/static/images/work/share.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    // #endif
  }
  .tapShare-icon {
    width: 40rpx;
    height: 40rpx;
    img {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .detailTop {
  // #ifdef APP-PLUS
  padding-top: 60rpx;
  // #endif
    .image-container {
      position: relative;
      width: 100%;
@@ -355,37 +381,7 @@
          width: 5px !important;
        }
      }
      .detailTitle {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        background: rgba(7, 7, 7, 0.4);
      }
      .titleText {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        .itemName,
        .itemTime {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }
        .itemName {
          padding-left: 20rpx;
        }
        .itemTime {
          padding-right: 20rpx;
        }
      }
    }
  }
@@ -427,11 +423,9 @@
          font-weight: 400;
          font-size: 28rpx;
          color: #1d6fe9;
          //white-space: nowrap;
          ///* 禁止换行 */
          //overflow: hidden;
          //text-overflow: ellipsis;
          // max-width: 74%;
          text-decoration: underline;
          text-align: right;
          padding-top: 1px;
          padding-left: 5px;
          padding-right: 2px;
@@ -455,7 +449,7 @@
      align-items: center;
      :deep(.u-button) {
        width: 276rpx !important;
        height: 100rpx !important;
        height: 76rpx !important;
        &:last-child {
          margin-left: 30rpx;
        }