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

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;
}