| | |
| | | <!-- 工单详情 --> |
| | | <template> |
| | | <div class="workDetailContainer"> |
| | | <!-- 自定义导航栏 --> |
| | | <u-navbar |
| | | title="工单详情" |
| | | :is-back="true" |
| | | back-text="" |
| | | :back-icon-size="40" |
| | | @left-click="onBackClick" |
| | | > |
| | | <template #right> |
| | | <div class="share-btn" @click="onShareClick">分享</div> |
| | | </template> |
| | | </u-navbar> |
| | | <div class="detailTop"> |
| | | <div class="image-container"> |
| | | <u-swiper |
| | |
| | | <div class="workOrderContainer"> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">工单编号</div> |
| | | <div>{{workDetailData.event_num}}</div> |
| | | <div>{{ workDetailData.event_num }}</div> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">工单处置人</div> |
| | | <div>{{workDetailData.event_num?.slice(0, 2) === 'AI' ? 'AI 小飞':workDetailData.creator}} |
| | | </div> |
| | | <div>{{ workDetailData.event_num?.slice(0, 2) === 'AI' ? 'AI 小飞' : workDetailData.creator }}</div> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">处置部门</div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | <!-- 操作按钮 --> |
| | | <div class="actionButton"> |
| | | <div class="btngroups" > |
| | | <div class="btngroups"> |
| | | <up-button type="primary" color="#AEAEAE" text="退回"></up-button> |
| | | <up-button type="primary" color="#1D6FE9" text="确认"></up-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script setup> |
| | | // import { getShowImg, getSmallImg } from '@/utils/util' |
| | | import {getList,flowEvent} from '/src/api/work/index.js' |
| | | import { ref, computed } from 'vue' |
| | | import { getList, flowEvent } 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 eventNum = ref('') |
| | | // 工单内容 |
| | | const workDetailData = ref({}) |
| | | onLoad(async (options) => { |
| | | eventNum.value = options.eventNum; |
| | | await getDataList(eventNum.value); |
| | | |
| | | }); |
| | | const getDataList = async (val) => { |
| | | 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" |
| | | },) |
| | | onLoad(async options => { |
| | | eventNum.value = options.eventNum |
| | | // await getDataList(eventNum.value) |
| | | }) |
| | | const getDataList = async val => { |
| | | const params = { |
| | | current: 1, |
| | | size: 9999, |
| | | source: 1, |
| | | event_name: val |
| | | event_name: val, |
| | | } |
| | | const res = await getList(params); |
| | | const response = res.data.data.records; |
| | | workDetailData.value = response[0]; |
| | | const res = await getList(params) |
| | | const response = res.data.data.records |
| | | workDetailData.value = response[0] |
| | | |
| | | console.log('详情',response); |
| | | console.log('详情', response) |
| | | } |
| | | // 图片预览 |
| | | |
| | | const previewImage = (index) => { |
| | | if (getImageList.value.length === 0) return; |
| | | const currentIndex = typeof index === 'number' ? index : 0; |
| | | const previewImage = index => { |
| | | if (getImageList.value.length === 0) return |
| | | const currentIndex = typeof index === 'number' ? index : 0 |
| | | uni.previewImage({ |
| | | urls: getImageList.value, |
| | | current: currentIndex |
| | | }); |
| | | }; |
| | | const getImageList =computed(()=>{ |
| | | current: currentIndex, |
| | | }) |
| | | } |
| | | const getImageList = computed(() => { |
| | | const imageArr = [] |
| | | const detail = workDetailData.value |
| | | if (detail.photo_url) { |
| | |
| | | imageArr.push(smallUrl) |
| | | } |
| | | if (detail.update_photo_url) { |
| | | const smallUrl =detail.update_photo_url |
| | | const smallUrl = detail.update_photo_url |
| | | imageArr.push(smallUrl) |
| | | } |
| | | return imageArr |
| | |
| | | url: `/subPackages/workDetail/mapWork/index?eventNum=${item.event_num}`, |
| | | }) |
| | | } |
| | | |
| | | // 分享按钮点击事件 |
| | | const onShareClick = () => { |
| | | // 检查当前平台是否支持分享功能 |
| | | const platform = uni.getSystemInfoSync().platform |
| | | |
| | | // H5平台不支持uni.share API |
| | | if (platform === 'web') { |
| | | uni.showToast({ |
| | | title: 'H5平台暂不支持分享功能', |
| | | icon: 'none' |
| | | }) |
| | | return |
| | | } |
| | | |
| | | uni.showActionSheet({ |
| | | itemList: ['分享给微信好友', '分享到朋友圈'], |
| | | success: res => { |
| | | // 检查uni.share是否存在 |
| | | if (typeof uni.share !== 'function') { |
| | | uni.showToast({ |
| | | title: '当前环境不支持分享功能', |
| | | icon: 'none' |
| | | }) |
| | | return |
| | | } |
| | | |
| | | try { |
| | | switch (res.tapIndex) { |
| | | case 0: |
| | | // 分享给微信好友 |
| | | uni.share({ |
| | | provider: 'weixin', |
| | | scene: 'WXSceneSession', |
| | | type: 0, |
| | | title: '工单详情', |
| | | summary: workDetailData.value.event_name, |
| | | href: 'https://example.com/workDetail?eventNum=' + workDetailData.value.event_num, |
| | | imageUrl: workDetailData.value.photo_url, |
| | | success: () => { |
| | | uni.showToast({ title: '分享成功', icon: 'success' }) |
| | | }, |
| | | fail: (err) => { |
| | | console.log('分享失败', err.errMsg) |
| | | uni.showToast({ |
| | | title: err.errMsg, |
| | | icon: 'none' |
| | | }) |
| | | } |
| | | }) |
| | | break |
| | | case 1: |
| | | // 分享到朋友圈 |
| | | uni.share({ |
| | | provider: 'weixin', |
| | | scene: 'WXSceneTimeline', |
| | | type: 0, |
| | | title: workDetailData.value.event_name, |
| | | summary: '查看工单详情', |
| | | href: 'https://example.com/workDetail?eventNum=' + workDetailData.value.event_num, |
| | | imageUrl: workDetailData.value.photo_url, |
| | | success: () => { |
| | | uni.showToast({ title: '分享成功', icon: 'success' }) |
| | | }, |
| | | fail: (err) => { |
| | | console.log('分享失败', err) |
| | | uni.showToast({ |
| | | title: '分享失败,请检查配置', |
| | | icon: 'none' |
| | | }) |
| | | } |
| | | }) |
| | | break |
| | | } |
| | | } catch (error) { |
| | | console.error('分享出错:', error) |
| | | uni.showToast({ |
| | | title: '分享功能异常', |
| | | icon: 'none' |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 返回按钮点击事件 |
| | | const onBackClick = () => { |
| | | uni.navigateBack() |
| | | } |
| | | |
| | | // 监听导航栏右侧按钮点击事件(兼容原来的配置) |
| | | const onNavigationBarButtonTap = e => { |
| | | if (e.index === 0) { |
| | | onShareClick() |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .workDetailContainer { |
| | | // 添加导航栏高度的padding-top,避免内容被遮挡 |
| | | padding-top: 44px; |
| | | // 分享按钮样式 |
| | | .share-btn { |
| | | color: #1D6FE9; |
| | | font-size: 14px; |
| | | padding: 0 10px; |
| | | line-height: 44px; |
| | | } |
| | | .detailTop { |
| | | .image-container { |
| | | position: relative; |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 10; |
| | | |
| | | } |
| | | .u-swiper-indicator__wrapper__dot--active{ |
| | | .u-swiper-indicator__wrapper__dot--active { |
| | | width: 5px !important; |
| | | } |
| | | } |
| | |
| | | height: 60rpx; |
| | | line-height: 60rpx; |
| | | background: rgba(7, 7, 7, 0.4); |
| | | |
| | | } |
| | | |
| | | .titleText { |
| | |
| | | align-items: center; |
| | | color: #fff; |
| | | |
| | | .itemName, .itemTime { |
| | | .itemName, |
| | | .itemTime { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #FFFFFF; |
| | | color: #ffffff; |
| | | } |
| | | .itemName { |
| | | padding-left: 20rpx; |
| | | } |
| | | .itemTime{ |
| | | .itemTime { |
| | | padding-right: 20rpx; |
| | | } |
| | | } |
| | |
| | | font-size: 30rpx; |
| | | color: #222324; |
| | | white-space: nowrap; |
| | | |
| | | } |
| | | .rowAddress { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #1D6FE9; |
| | | color: #1d6fe9; |
| | | //white-space: nowrap; |
| | | ///* 禁止换行 */ |
| | | //overflow: hidden; |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | :deep(.u-button){ |
| | | :deep(.u-button) { |
| | | width: 276rpx !important; |
| | | height: 100rpx !important; |
| | | &:last-child { |
| | | margin-left: 30rpx; |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |