| | |
| | | <!-- 自定义导航栏 --> |
| | | <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 |
| | |
| | | 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"> |
| | |
| | | <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> |
| | |
| | | |
| | | <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 |
| | |
| | | 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) |
| | | |
| | |
| | | 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() |
| | |
| | | <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%; |
| | |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | 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; |
| | |
| | | align-items: center; |
| | | :deep(.u-button) { |
| | | width: 276rpx !important; |
| | | height: 100rpx !important; |
| | | height: 76rpx !important; |
| | | &:last-child { |
| | | margin-left: 30rpx; |
| | | } |