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

common/config.js

@@ -25,6 +25,6 @@ const config = {
 
 // 设置后台接口服务的基础地址
 // config.baseUrl = 'http://tc.cqsznc.com:7080/api';
-config.baseUrl = 'http://3deb348c.r28.cpolar.top';
+config.baseUrl = 'http://183.230.235.66:11010/api';
 
 export default config;

common/http.api.js

@@ -31,6 +31,11 @@ const install = (Vue, vm) => {
 		//会议列表
 		getMeetings:(params = {})=>vm.$u.get(config.adminPath+'/property/roomBooking/list',params),
 		
+		//监控列表
+		getMonitors:(params = {})=>vm.$u.get(config.adminPath+'/sis/deviceChannel/treeList',params),
+		
+		getPlay:(params = {})=>vm.$u.post(config.adminPath+'/sis/stream/realtime/add',params),
+		
 		// 基础服务：登录登出、身份信息、菜单授权、切换系统、字典数据等
 		lang: (params = {}) => vm.$u.get('/lang/'+params.lang),
 		index: (params = {}) => vm.$u.get(config.adminPath+'/mobile/index', params),

pages.json

@@ -430,6 +430,20 @@
 			{
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/sys/workbench/monitor/monitors",
+			"style" : 
+			{
+				"navigationBarTitleText" : "监控室"
+			}
+		},
+		{
+			"path" : "pages/sys/workbench/monitor/monitorplay",
+			"style" : 
+			{
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"tabBar": {

pages/sys/user/myRepair/myRepair.vue

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

pages/sys/workbench/monitor/TreeNode.vue

@@ -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>

pages/sys/workbench/monitor/monitorplay.vue

@@ -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>

pages/sys/workbench/monitor/monitors.vue

@@ -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>

pages/sys/workbench/order/order.vue

@@ -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 {
@@ -227,4 +329,41 @@
 		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>

pages/sys/workbench/order/orderDetail.vue

@@ -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>
 
 		<!-- 底部操作按钮 -->
@@ -52,12 +61,14 @@
 				currentStatus: 2, // 0: 待分配，1: 已接单，2: 处理中，3: 已完成
 				detail: {	
 				}
+				
 			};
 		},
 		onLoad(options) {
 		  if (options.item) {
 		    const item = JSON.parse(decodeURIComponent(options.item));
 			this.detail = item;
+			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对象了
 			// 进度映射
@@ -80,6 +91,13 @@
 			goBack() {
 				uni.navigateBack();
 			},
+			previewImage(urls, index) {
+				// 使用uView的图片预览组件
+				this.$u.previewImage({
+					urls: urls.filter(url => url.trim() !== ''),
+					current: index
+				});
+			},
 			transfer() {
 				uni.showToast({
 					title: '转派功能开发中',
@@ -92,7 +110,6 @@
 					icon: 'success'
 				});
 			},
-
 			downloadFile() {
 				uni.downloadFile({
 					url: this.detail.attachment,
@@ -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;

pages/sys/workbench/workbench.vue

@@ -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',