by2025/SmartParks_uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

订单管理修改 订单详情修改 监控室列表和播放功能

Browse Source
This commit is contained in:
liyuanchao
2025-08-10 18:56:52 +08:00
parent f3b45139e4
commit cffe8b855b
12 changed files with 518 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pages/sys/user/myRepair/myRepair.vue
View File

@@ -79,7 +79,6 @@
}
},
onLoad() {
// uni.$on('refreshData', this.getOrders);
this.getOrders()
},
onShow() {

89
pages/sys/workbench/monitor/TreeNode.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<view>
<view v-if="node.children && node.children.length" class="tree-title" @click="toggle">
<text>{{ expanded ? '▼' : '▶' }} {{ node.title }}</text>
</view>
<view v-else class="list-card" @click="goToPlay(node)">
<view class="item-row">
<image src="/static/ic_monitor.webp" class="item-img" />
<view class="item-c">
<text>设备编号：{{ node.code }}</text>
<text>设备描述：{{ node.label }}</text>
</view>
</view>
</view>
<view v-show="expanded" class="children-box">
<TreeNode v-for="child in node.children" :key="child.code || child.id" :node="child" />
</view>
</view>
</template>
<script>
export default {
name: "TreeNode",
props: {
node: {
type: Object,
required: true
}
},
data() {
return {
expanded: false
};
},
methods: {
toggle() {
this.expanded = !this.expanded;
},
goToPlay(item) {
const detailItemStr = encodeURIComponent(JSON.stringify(item.data));
uni.navigateTo({
url: `/pages/sys/workbench/monitor/monitorplay?detailItem=${detailItemStr}`
});
}
},
components: {
TreeNode: () => import("./TreeNode.vue") // 递归组件自己导入自己
}
};
</script>
<style scoped>
.tree-title {
padding: 20rpx 30rpx;
background: #eaeaea;
border-radius: 8rpx;
margin: 10rpx 20rpx;
font-weight: bold;
user-select: none;
}
.children-box {
padding-left: 30rpx;
}
.list-card {
background: #fff;
border-radius: 12rpx;
margin: 25rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
padding: 30rpx;
}
.item-row {
display: flex;
flex-direction: row;
align-items: center;
}
.item-c {
display: flex;
height: 80rpx;
flex-direction: column;
justify-content: space-between;
}
.item-img {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
}
</style>

129
pages/sys/workbench/monitor/monitorplay.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<view class="monitor-page">
<!-- 视频播放区域 -->
<video
v-if="videoSrc"
id="monitorVideo"
class="monitor-video"
:src="playUrl"
autoplay
controls
show-center-play-btn
object-fit="contain"
@error="onVideoError"
></video>
<!-- 加载动画 -->
<u-loading-page
:loading="loading"
loading-text="视频加载中..."
></u-loading-page>
</view>
</template>
<script>
export default {
data() {
return {
detailItem:null,
videoSrc: '', // 原始视频地址
playUrl: '', // 实际播放地址
isPlaying: true,
loading: true
}
},
onLoad(options) {
// 接收传递的detailItem参数
if (options.detailItem) {
try {
this.detailItem = JSON.parse(decodeURIComponent(options.detailItem));
this.getPlay()
} catch (e) {
console.error('解析detailItem参数失败', e);
}
}
},
methods: {
async getPlay() {
let params = {
"videoIp": this.detailItem.deviceIp,
"factoryNo":this.detailItem.factoryNo,
"account":this.detailItem.deviceAccount,
"pwd":this.detailItem.devicePwd,
"channelId":this.detailItem.channelNo
}
let res = await this.$u.api.getPlay(params);
if (res.code == 200) {
this.videoSrc = res.data.hls
this.initPlayer()
}
},
async initPlayer() {
// #ifdef H5
if (this.videoSrc.endsWith('.m3u8')) {
const video = document.getElementById('monitorVideo')
const Hls = (await import('hls.js')).default
if (Hls.isSupported()) {
const hls = new Hls()
hls.loadSource(this.videoSrc)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
})
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = this.videoSrc
this.loading = false
}
} else {
this.playUrl = this.videoSrc
this.loading = false
}
// #endif
// #ifdef APP-PLUS
this.playUrl = this.videoSrc
this.loading = false
// #endif
},
togglePlay() {
const video = document.getElementById('monitorVideo')
if (!video) return
if (this.isPlaying) {
video.pause()
} else {
video.play()
}
this.isPlaying = !this.isPlaying
},
goFullScreen() {
const video = document.getElementById('monitorVideo')
if (video.requestFullscreen) {
video.requestFullscreen()
}
},
onVideoError(e) {
console.error('视频播放错误', e)
uni.showToast({ title: '视频加载失败', icon: 'none' })
this.loading = false
}
}
}
</script>
<style scoped>
.monitor-page {
display: flex;
flex-direction: column;
align-items: center;
background: #000;
height: 100vh;
position: relative;
}
.monitor-video {
width: 100%;
height: 70vh;
background: #000;
}
</style>

45
pages/sys/workbench/monitor/monitors.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<view class="list-box">
<TreeNode v-for="(node, idx) in monitors" :key="node.code || node.id || idx" :node="node" />
</view>
</template>
<script>
import TreeNode from "./TreeNode.vue";
export default {
components: {
TreeNode
},
data() {
return {
monitors: []
};
},
onLoad() {
this.getMonitors();
},
methods: {
async getMonitors() {
try {
const res = await this.$u.api.getMonitors();
if (res.code === 200) {
this.monitors = res.data || [];
} else {
this.monitors = [];
}
} catch (error) {
console.error("获取监控失败", error);
this.monitors = [];
}
}
}
};
</script>
<style>
.list-box {
background: #f7f7f7;
padding-top: 25rpx;
}
</style>

171
pages/sys/workbench/order/order.vue
View File

@@ -1,5 +1,17 @@
<template>
<view class="order-container">
<view class="filter">
<view class="filter-btn" @click="togglePopup">工单类型
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
</view>
<view class="filter-btn">工单状态
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
</view>
<view class="filter-btn">处理人
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
</view>
</view>
<!-- tab栏 -->
<view class="order-tabs">
<view v-for="(tab, idx) in tabs" :key="idx" :class="['order-tab', {active: idx === activeTab}]"
@@ -9,12 +21,13 @@
</view>
</view>
<!-- 列表区 -->
<view class="order-list">
<scroll-view scroll-y class="order-list" @scroll="handleScroll">
<view v-for="(item, idx) in list" :key="idx" class="order-card" @click="goDetail(item)">
<view class="order-row">
<view class="order-no">工单号：{{ item.orderNo }}</view>
<view class="order-status" :class="getStatusColor(item.status)">
{{ getStatusLabel(item.status) }}</view>
{{ getStatusLabel(item.status) }}
</view>
</view>
<image class="order-line-image" src="/static/ic_my_repair_03.png" />
<view class="order-info">工单名称：{{ item.orderName }}</view>
@@ -23,7 +36,29 @@
<view class="order-info">有 效 期：{{ item.createTime }}-{{item.planCompleTime}}</view>
<view v-if="item.statusText === '已结束'" class="order-eval-btn eval-btn-right">服务评价</view>
</view>
</view>
</scroll-view>
<!-- 悬浮新增按钮 -->
<image v-if="false" src="/static/ic_my_repair_02.png"
:class="['order-add-btn-fixed', { 'hide': isAddBtnHidden }]" @click="addOrder" />
<!-- 工单类型弹窗 -->
<u-popup v-model="showPopup" mode="bottom">
<view class="popup-content">
<view class="popup-header">
<text @click="closePopup">取消</text>
<text>选择工单类型</text>
<text @click="confirmSelection">确定</text>
</view>
<view class="popup-body">
<u-cell-group>
<u-cell title="全部" @click="selectType('全部')"></u-cell>
<u-cell title="报修" @click="selectType('报修')"></u-cell>
<u-cell title="投诉" @click="selectType('投诉')"></u-cell>
</u-cell-group>
</view>
</view>
</u-popup>
</view>
</template>
@@ -32,15 +67,18 @@
export default {
data() {
return {
tabs: ['待办', '全部', '发起 '],
tabs: ['待办', '全部'],
activeTab: 1,
tabData: [
[],
[],
[]
], // 每个tab的数据
tabLoaded: [false, false, false], // 每个tab是否已加载
tabLoaded: [false, false], // 每个tab是否已加载
loading: false,
lastScrollTop: 0,
isAddBtnHidden: false,
showPopup: false,
selectedType: ''
}
},
computed: {
@@ -55,6 +93,26 @@
goBack() {
uni.navigateBack();
},
addOrder() {
uni.navigateTo({
url: '/pages/sys/workbench/order/addOrder'
});
},
handleScroll(e) {
const scrollTop = e.detail.scrollTop;
// 为了避免过于频繁的触发，可以设置一个阈值
if (Math.abs(scrollTop - this.lastScrollTop) < 20) {
return;
}
if (scrollTop > this.lastScrollTop && scrollTop > 50) {
// 向下滚动，隐藏按钮
this.isAddBtnHidden = true;
} else {
// 向上滚动，显示按钮
this.isAddBtnHidden = false;
}
this.lastScrollTop = scrollTop;
},
async changeTab(idx) {
this.activeTab = idx;
if (!this.tabLoaded[idx]) {
@@ -66,8 +124,7 @@
// 模拟接口请求，不同tab返回不同mock数据
let params = {}
if (idx === 0) {
params = {
}
params = {}
}
let data = [];
@@ -108,6 +165,22 @@
uni.navigateTo({
url: '/pages/sys/workbench/order/orderDetail?item=' + itemStr
});
},
togglePopup() {
this.showPopup = !this.showPopup;
},
selectType(type) {
this.selectedType = type;
},
closePopup() {
this.showPopup = false;
},
confirmSelection() {
if (this.selectedType) {
// 处理确认逻辑，例如更新筛选条件
console.log('Selected type:', this.selectedType);
}
this.showPopup = false;
}
}
}
@@ -121,6 +194,33 @@
flex-direction: column;
}
.filter {
display: flex;
flex-direction: row;
background: #fff;
padding-left: 36rpx;
padding-top: 15rpx;
padding-bottom: 15rpx;
}
.filter-btn {
padding: 15rpx 22rpx 15rpx 22rpx;
background: #F7F7F7;
border-radius: 25rpx;
height: 58rpx;
color: #9A9A9A;
font-size: 28rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 24rpx;
}
.filter-img {
width: 18rpx;
height: 10rpx;
margin-left: 8rpx;
}
.order-tabs {
display: flex;
@@ -166,8 +266,10 @@
/* 占据所有剩余空间 */
overflow-y: auto;
/* 内容超出时，开启垂直滚动 */
padding-bottom: 200rpx;
padding-bottom: 30rpx;
/* 为底部按钮留出空间 */
height: calc(100vh - 80rpx - 32rpx);
/* 减去tab栏高度和margin-top */
}
.order-card {
@@ -190,41 +292,78 @@
margin-left: 19rpx;
margin-right: 50rpx;
}
.order-no {
font-size: 24rpx;
color: #0B0B0B;
font-weight: 500;
}
.order-status {
font-size: 24rpx;
font-weight: 500;
}
.order-line-image {
margin: left 29rpx;
margin-right: 39rpx;
height: 2rpx;
margin-bottom: 29rpx;
}
.order-status.orange {
color: #F3AB44;
}
.order-status.doing {
color: #00C9AA;
}
.order-status.done {
color: #8A8A8A;
}
.order-info {
font-size: 24rpx;
color: #888;
margin-bottom: 30rpx;
margin-left: 47rpx;
}
.order-add-btn-fixed {
position: fixed;
right: 40rpx;
bottom: 80rpx;
width: 100rpx;
height: 100rpx;
z-index: 100;
transition: transform 0.3s ease;
transform: translateX(0);
}
.order-add-btn-fixed.hide {
transform: translateX(200%);
}
.popup-content {
background-color: #fff;
width: 100%;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
border-bottom: 1px solid #f0f0f0;
}
.popup-header text {
color: #2186FF;
font-size: 30rpx;
}
.popup-body {
padding: 20rpx;
}
</style>

125
pages/sys/workbench/order/orderDetail.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container">
<view class="page-container">
<view class="top-line"/>
<!-- 工单状态进度 -->
<view class="repair-detail-progress-box">
@@ -26,12 +26,21 @@
<view class="detail-value"><text class="detail-key">处理地点：</text>{{ detail.location }}</view>
<view class="detail-value"><text class="detail-key">创建时间：</text>{{ detail.createTime }}</view>
<view class="detail-value"><text class="detail-key">发起单位/人：</text>{{ detail.initiatorPeople }}</view>
<view class="detail-value"><text class="detail-key">计划完成时间：</text>{{ detail.planCompleTime }}</view>
<view class="detail-value">
<text>附件：</text>
<text class="link" @click="downloadFile">下载</text>
</view>
<view class="detail-value remark"><text>备注：</text>{{ detail.remark }}</view>
<view class="detail-value"><text class="detail-key">工单图片：</text></view>
<view class="image-list" v-if="detail.orderImgUrl">
<u-image
v-for="(imgUrl, index) in detail.orderImgUrl.split(',')"
:key="index"
:src="imgUrl"
width="200rpx"
height="200rpx"
border-radius="10rpx"
@click="previewImage(detail.orderImgUrl.split(','), index)"
style="margin-right: 20rpx; margin-bottom: 20rpx;"
></u-image>
</view>
</view>
<!-- 底部操作按钮 -->
@@ -45,41 +54,50 @@
<script>
export default {
data() {
return {
detailStep: 0,
detailStatus: '',
return {
detailStep: 0,
detailStatus: '',
progressSteps: ['创建工单','已接单', '处理中', '已结束'],
currentStatus: 2, // 0: 待分配，1: 已接单，2: 处理中，3: 已完成
detail: {
}
}
};
},
onLoad(options) {
if (options.item) {
const item = JSON.parse(decodeURIComponent(options.item));
},
onLoad(options) {
if (options.item) {
const item = JSON.parse(decodeURIComponent(options.item));
this.detail = item;
console.log("t1",this.detail)
// 现在可以使用item对象了
// 进度映射
if (item.status == 0) {
this.detailStep = 0;
this.detailStatus = '创建工单';
} else if (item.status == 4) {
this.detailStep = 3;
this.detailStatus = '已结束';
} else if(item.status == 3){
this.detailStep = 2;
this.detailStatus = '处理中';
}else {
this.detailStep = 1;
this.detailStatus = '已接单';
}
}
this.detail.orderImgUrl = "https://picsum.photos/80/80?random=3,https://picsum.photos/80/80?random=3,https://picsum.photos/80/80?random=3";
console.log("t1",this.detail)
// 现在可以使用item对象了
// 进度映射
if (item.status == 0) {
this.detailStep = 0;
this.detailStatus = '创建工单';
} else if (item.status == 4) {
this.detailStep = 3;
this.detailStatus = '已结束';
} else if(item.status == 3){
this.detailStep = 2;
this.detailStatus = '处理中';
}else {
this.detailStep = 1;
this.detailStatus = '已接单';
}
}
},
methods: {
goBack() {
uni.navigateBack();
},
previewImage(urls, index) {
// 使用uView的图片预览组件
this.$u.previewImage({
urls: urls.filter(url => url.trim() !== ''),
current: index
});
},
transfer() {
uni.showToast({
title: '转派功能开发中',
@@ -91,8 +109,7 @@
title: '操作成功',
icon: 'success'
});
},
},
downloadFile() {
uni.downloadFile({
url: this.detail.attachment,
@@ -113,10 +130,10 @@
.page-container {
background: #fff;
}
.top-line{
width: 100vw;
height: 3rpx;
background: #ECECEC;
.top-line{
width: 100vw;
height: 3rpx;
background: #ECECEC;
}
.repair-detail-progress-box {
height: 107rpx;
@@ -193,17 +210,17 @@
.detail-list {
font-size: 28rpx;
line-height: 2em;
line-height: 2em;
margin-left: 40rpx;
}
.detail-key{
color: #595858;
}
.detail-value {
margin-bottom: 30rpx;
color: ##2F2F2F;
}
.detail-value {
margin-bottom: 30rpx;
color: ##2F2F2F;
}
.remark {
@@ -215,6 +232,20 @@
text-decoration: underline;
}
.image-list {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
}
.image-item {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.btn-group {
display: flex;
justify-content: space-around;
@@ -222,13 +253,13 @@
}
.btn {
width: 276rpx;
width: 276rpx;
height: 88rpx;
padding: 20rpx;
font-size: 30rpx;
border-radius: 50rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
}

3
pages/sys/workbench/workbench.vue
View File

@@ -72,7 +72,8 @@
},
{
icon: 'https://picsum.photos/80/80?random=3',
text: '邀约'
text: '监控',
url:'/pages/sys/workbench/monitor/monitors'
},
{
icon: 'https://picsum.photos/80/80?random=3',