6155前端功能完成

App.vue

@@ -15,27 +15,52 @@
 
 <style lang="scss">
 	@import 'vk-uview-ui/index.scss';
-	uni-slider .uni-slider-handle-wrapper{
+
+	uni-slider .uni-slider-handle-wrapper {
 		border-radius: 20rpx;
-		
+
 	}
-	uni-slider .uni-slider-thumb{
+
+	uni-slider .uni-slider-thumb {
 		width: 66rpx !important;
-		height:80rpx !important;
+		height: 80rpx !important;
 		margin-top: -40rpx !important;
 		border-radius: 16rpx !important;
 		margin-left: -72rpx !important;
-		
+
 	}
-	uni-slider .uni-slider-handle-wrapper{
+
+	uni-slider .uni-slider-handle-wrapper {
 		height: 88rpx;
 		position: relative;
 	}
-	uni-slider .uni-slider-value{
+
+	uni-slider .uni-slider-value {
 		position: absolute;
-		color: rgba(255, 255, 255,0.8);
+		color: rgba(255, 255, 255, 0.8);
 		font-size: 32rpx;
-		right:2.5%;
+		right: 2.5%;
-		top:-60rpx
+		top: -60rpx
+	}
+
+	.custom-file-picker .file-picker__box-content {
+		background: rgba(26, 26, 26, 1);
+		border: none !important;
+		border-radius: 45rpx;
+		width: 180rpx;
+		height: 180rpx;
+	}
+
+	.uni-file-picker.custom-file-picker {
+		overflow: inherit !important;
+	}
+
+	.custom-file-picker .icon-add {
+		height: 5rpx !important;
+		width: 70rpx !important;
+	}
+
+	.custom-file-picker .file-picker__box-content {
+		// display: none
 	}
 </style>

api/common/operatingInstruct/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+import qs from 'qs'
+// 查询列表
+export function fileInfo(params) {
+  return request({
+    url: '/app/file/list',
+    method: 'GET',
+    data: params
+  })
+}
+
+
+// 删除
+export function fileDelete(ids) {
+  return request({
+    url: `/app/file/delete/${ids}`,
+    method: 'delete',
+	})
+}

api/common/operationVideo/index.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+// 视频列表
+export function listOperationVideos(params) {
+  return request({
+    url: '/app/operationVideo/listOperationVideos',
+    method: 'GET',
+    data: params
+  })
+}
+// 添加
+export function addOperationVideo(data) {
+  return request({
+    url: '/app/operationVideo/addOperationVideo',
+    method: 'post',
+    data
+  })
+}
+// 编辑
+export function editOperationVideo(data) {
+  return request({
+    url: '/app/operationVideo/editOperationVideo',
+    method: 'post',
+    data
+  })
+}
+// 删除视频列表
+export function deleteOperationVideo(ids) {
+  return request({
+    url: `/app/operationVideo/deleteOperationVideo/${ids}`,
+    method: 'delete',
+	})
+}

manifest.json

@@ -59,6 +59,7 @@
             },
             /* ios打包配置 */
             "ios" : {
+                "appid" : "uni.app.UNIA21EF43",
                 "privacyDescription" : {
                     "NSBluetoothPeripheralUsageDescription" : "需要蓝牙访问权限，用于设备通信",
                     "NSBluetoothAlwaysUsageDescription" : "需要蓝牙访问权限，用于设备通信"

pages.json

@@ -1,5 +1,6 @@
 {
 	"pages": [
+	
 		{
 			"path": "pages/common/login/index",
 			"style": {
@@ -8,14 +9,7 @@
 		},
 
 		
-		{
+	
-			"path" : "pages/6155/deviceDetail",
-			"style" : 
-			{
-				"navigationBarTitleText" : "HBY 6155"
-			}
-		},
-		
 		
 		{
 			"path": "pages/common/index/index",
@@ -72,25 +66,27 @@
 			}
 		},
 		{
-			"path": "pages/6170/operationVideo/index",
+			"path": "pages/common/operationVideo/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path": "pages/6170/addvideo/index",
+			"path": "pages/common/addvideo/index",
 			"style": {
-				"navigationBarTitleText": "添加"
+				"navigationStyle": "custom"
 			}
 		},
+		// 操作说明
 		{
-			"path": "pages/6170/editVideo/index",
+			"path": "pages/common/operatingInstruct/index",
 			"style": {
-				"navigationBarTitleText": "编辑视频"
+				"navigationStyle": "custom"
 			}
 		},
+		// 产品说明
 		{
-			"path": "pages/6170/operatingInstruct/index",
+			"path": "pages/common/productDes/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
@@ -109,7 +105,13 @@
 				"navigationBarTitleText" : "扫描到的设备"
 			}
 		},
-		
+		{
+			"path" : "pages/6155/deviceDetail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "HBY 6155"
+			}
+		},
 		{
 			"path" : "pages/6155/ImgCrop",
 			"style" : 
@@ -119,10 +121,7 @@
 				"fullscreen": true
 			}
 		}
-
+		],
-		
-
-	],
 	"tabBar": {
 		"color": "#fff",
 		"selectedColor": "#BBE600",

pages/6155/ImgCrop.vue

@@ -1,16 +1,11 @@
 <template>
 	<view>
-	
+		<canvas  id="splashCanvas" canvas-id="splashCanvas"  style="width: 160px; height: 80px; z-index: 9999;position: fixed; visibility: hidden;"></canvas>
-	<canvas canvas-id="splashCanvas"
+
-			style="width: 160px; height: 80px; z-index: 9999;position: fixed; visibility: visible;top: 0px;left:0px;"
+
-			
+			<qf-image-cropper :src="src" :showAngle="false" :width="1600" :height="800" fileType="jpg"
-			</canvas>
+				@crop="handleCrop" :gpu="true">
-			
+			</qf-image-cropper>
-				<qf-image-cropper :src="src" :showAngle="false"   :width="1600" :height="800" fileType="jpg"
-					@crop="handleCrop" :gpu="true">
-				</qf-image-cropper>
-			
-		
 	</view>
 </template>
 
@@ -22,64 +17,58 @@
 		},
 		data() {
 			return {
-				src:"",
+				src: "",
 				Statu: false
-			
+
 			}
 		},
-		onLoad:function(option){
+		onLoad: function(option) {
-			 const eventChannel = this.getOpenerEventChannel();
+			const eventChannel = this.getOpenerEventChannel();
-			 var these=this;
+			var these = this;
-			 eventChannel.on('checkImg', function(data) {
+			eventChannel.on('checkImg', function(data) {
-			    console.log("我收到你的消息了，消息内容是："+JSON.stringify(data));
+				console.log("我收到你的消息了，消息内容是：" + JSON.stringify(data));
-				these.src=data.data;
+				these.src = data.data;
-			  })
+			})
 		},
 		methods: {
 			handleCrop(e) {
-		var these=this;
+				var these = this;
 				this.Statu = true;
 				console.log("裁剪完成");
 				console.log(e.tempFilePath);
-				
-				
-						const ctx = uni.createCanvasContext('splashCanvas', these);
-						console.log("1111111");
-						// 绘制图片到canvas
-						ctx.drawImage(e.tempFilePath, 0, 0, 160, 80);
-						console.log("22222");
-						ctx.draw(false, () => {
-							// 获取canvas像素数据
-						console.log("444444");
-							setTimeout(() => {
-								uni.canvasGetImageData({
-									canvasId: 'splashCanvas',
-									x: 0,
-									y: 0,
-									width: 160,
-									height: 80,
-									success: (res) => {
-										// 处理像素数据并发送
-										console.log("res.data.length="+res.data.length);
-										// this.processAndSendImageData(res.data).then(
-										// 	resolve).catch(reject);
-										 const eventChannel = these.getOpenerEventChannel();
-										 eventChannel.emit('ImgCutOver',res.data);
-										 uni.navigateBack();
-									},
-									fail: (err) => {
-										reject(`获取canvas数据失败: ${err.errMsg}`);
-									}
-								});
-							}, 500); // 等待canvas绘制完成
-						});
-						
-					console.log("333333");
-			
 
-				
+				const ctx = uni.createCanvasContext('splashCanvas', this);
+				ctx.drawImage(
+					e.tempFilePath,
+					0,0,160,80
+				);
+				setTimeout(() => {
+					ctx.draw(false, ()=>{
+						console.log("abcdefg")
+						uni.canvasGetImageData({
+							canvasId: 'splashCanvas',
+							x: 0,
+							y: 0,
+							width: 160,
+							height: 80,
+							success: (res) => {
+								// 处理像素数据并发送
+								console.log("res.data.length="+res.data.length);
+								// this.processAndSendImageData(res.data).then(
+								// 	resolve).catch(reject);
+								 const eventChannel = these.getOpenerEventChannel();
+								 eventChannel.emit('ImgCutOver',res.data);
+								 uni.navigateBack();
+							},
+							fail: (err) => {
+								reject(`获取canvas数据失败: ${err.errMsg}`);
+							}
+						});
+					});
+				}, 500);
+
 			}
-			
+
 		}
 	}
 </script>

pages/6155/deviceDetail.vue

@@ -503,9 +503,9 @@ import { deviceReName } from '../../api/common';
 
 
 									//发送数据包
-									sendDataNew(f.deviceId, f.writeServiceId, f.wirteCharactId, buffer)
+									ble.sendDataNew(f.deviceId, f.writeServiceId, f.wirteCharactId, buffer)
 										.then(() => {
-
+											console.log("发送一个包完成了");
 											these.Status.Progress.curr = currentPacket;
 											currentPacket++;
 

pages/6170/deviceControl/index.vue

@@ -2,7 +2,7 @@
 	<view>
 		<!-- 使用自定义导航栏 -->
 		<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" rightIcon="/static/images/path.png"
-			 @right-click="uploadStartup"></custom-navbar>
+			@right-click="uploadStartup"></custom-navbar>
 		<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
 			<!-- 设备电量信息 -->
 			<view class="battery-section">
@@ -231,7 +231,8 @@
 				lightModeB: false,
 				lightModeC: false, //激光提示框
 				items: [],
-				isFormExpanded: true // 默认展开
+				isFormExpanded: true, // 默认展开
+				deviceID: ''
 			}
 		},
 		computed: {
@@ -314,17 +315,19 @@
 			// 操纵说明
 			operatingInst() {
 				uni.navigateTo({
-					url: '/pages/6170/operatingInstruct/index'
+					url: `/pages/common/operatingInstruct/index?id=${this.deviceID}`
 				})
 			},
 			// 产品参数
 			productparams() {
-
+				uni.navigateTo({
+					url: `/pages/common/productDes/index?id=${this.deviceID}`
+				})
 			},
 			// 操作视频
 			operatingVideo() {
 				uni.navigateTo({
-					url: '/pages/6170/operationVideo/index'
+					url: `/pages/common/operationVideo/index?id=${this.deviceID}`
 				})
 
 			},
@@ -338,6 +341,10 @@
 			handleDisagree() {
 				this.lightModeC = false
 			},
+		},
+		onLoad(options) {
+			console.log(options.id) // 输出: 123
+			this.deviceID = options.id
 		}
 
 	}
@@ -549,7 +556,8 @@
 		transform: translate(-17%, -100%);
 
 	}
-	.uni-file-picker__container{
+
+	.uni-file-picker__container {
 		width: 200rpx !important;
 		border: 1px solid rgb(58, 58, 58);
 	}

pages/common/addvideo/index.vue

@@ -1,50 +1,60 @@
 <template>
-	<view class="device-page">
+	<view>
-		<!-- 表单内容 -->
+		<custom-navbar :title="navTitle" :showBack="true" backgroundColor="#202020" color="#FFFFFF"></custom-navbar>
-		<view class="form-content">
+		<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
-			<!-- 名称输入框 -->
+			<!-- 表单内容 -->
-			<view class="input-group">
+			<view class="form-content">
-				<text class="label">名称</text>
+				<!-- 名称输入框 -->
-				<input class="input" type="text" placeholder="请输入名称" v-model="name" />
+				<view class="input-group">
+					<text class="label">名称</text>
+					<input class="input" type="text" placeholder="请输入名称" v-model="name" />
+				</view>
+
+				<!-- 视频链接输入框 -->
+				<view class="input-group">
+					<text class="label">视频链接</text>
+					<input class="input" type="text" placeholder="请输入视频链接" v-model="videoLink" />
+				</view>
 			</view>
 
-			<!-- 视频链接输入框 -->
+			<!-- 保存按钮 -->
-			<view class="input-group">
+			<button class="save-button" @click="saveData">保 存</button>
-				<text class="label">视频链接</text>
-				<input class="input" type="text" placeholder="请输入视频链接" v-model="videoLink" />
-			</view>
-		</view>
 
-		<!-- 保存按钮 -->
+			<!--===================== 保存成功提示框================== -->
-		<button class="save-button" @click="saveData">保 存</button>
+			<view class="agreement-mask" v-if="showModal">
-
+				<!-- 上传画面弹窗 -->
-		<!--===================== 保存成功提示框================== -->
+				<view class="agreement-popupC">
-		<view class="agreement-mask" v-if="showModal">
+					<view class="popup-content">
-			<!-- 上传画面弹窗 -->
+						<image src="/static/images/path2.png" mode="" class="path2"></image>
-			<view class="agreement-popupC">
+						<view class="popup-Title">
-				<view class="popup-content">
+							<view>保存成功！</view>
-					<image src="/static/images/path2.png" mode="" class="path2"></image>
+						</view>
-					<view class="popup-Title">
+					</view>
-						<view>保存成功！</view>
+					<!-- 按钮组 -->
+					<view class="popup-buttons">
+						<button class="btn agreeBtn" @click="handleBtn">确定</button>
 					</view>
 				</view>
-				<!-- 按钮组 -->
-				<view class="popup-buttons">
-					<button class="btn agreeBtn" @click="handleBtn">确定</button>
-				</view>
 			</view>
+
 		</view>
-
 	</view>
-
 </template>
 <script>
+	import {
+		addOperationVideo,
+		editOperationVideo
+	} from '@/api/common/operationVideo/index.js'
 	export default {
 		data() {
 			return {
+				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
+				navTitle: '添加',
 				name: '',
 				videoLink: '',
-				showModal: false
+				showModal: false,
+				deviceID: "",
+				id: ''
 			};
 		},
 		methods: {
@@ -59,20 +69,63 @@
 					})
 					return false
 				}
-				if (this.videoLink == '') {     
+				if (this.videoLink == '') {
 					uni.showToast({
 						icon: 'none',
 						title: '视频链接不为空'
 					})
 					return false
 				}
-				this.showModal = true
+				let data = {
-				uni.navigateBack()
+					videoName: this.name,
+					videoUrl: this.videoLink,
+					deviceId: this.deviceID,
+					id: this.id
+				}
+				// 添加编辑
+				const apiMethod = this.editData ? editOperationVideo : addOperationVideo;
+				console.log('apiMethod:', apiMethod);
+				apiMethod(data).then(res => {
+					if (res.code == 200) {
+						this.showModal = true;
+						setTimeout(() => {
+							uni.navigateBack();
+						}, 1500);
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					uni.showToast({
+						title: '网络请求失败',
+						icon: 'none'
+					});
+				});
+
 			},
 			// 确定提示框
 			handleBtn() {
 				this.showModal = false
 			}
+		},
+		onLoad(options) {
+			if (options.item) {
+				// 解析传递过来的item对象
+				this.editData = JSON.parse(decodeURIComponent(options.item));
+				// 回显数据
+				this.name = this.editData.videoName || '';
+				this.videoLink = this.editData.videoUrl || '';
+				this.deviceID = this.editData.deviceId || '';
+				this.id = this.editData.id
+				// 修改导航标题
+				this.navTitle = '编辑';
+			} else if (options.id) {
+				this.deviceID = options.id;
+				this.navTitle = '添加';
+				this.editData = null; // 明确设置为 null
+			}
 		}
 	};
 </script>

pages/common/index/index.vue

@@ -376,7 +376,7 @@
 						});
 						return;
 					}
-
+ 
 					if (item.typeName == '6155') {
 						uni.navigateTo({
 							url: "/pages/6155/deviceDetail",

pages/common/login/index.vue

@@ -23,7 +23,6 @@
 							class="agreeT">《隐私政策》</a></text>
 				</view>
 			</view>
-
 			<!-- 登录按钮 -->
 			<button class="login-btn" @click="handleLogin">
 				登录
@@ -114,7 +113,6 @@
 			},
 			// 登录
 			async handleLogin() {
-				console.log('33333');
 				if (this.phone == '') {
 					uni.showToast({
 						title: '手机号不能为空',
@@ -146,7 +144,6 @@
 						smsCode: this.code,
 						tenantId: '894078' //租户ID
 					})
-					console.log(res, 'res44444');
 					if (res.code == 200) {
 						uni.hideLoading()
 						uni.setStorageSync('token', res.data.access_token) // 缓存token

pages/common/operatingInstruct/index.vue

@@ -0,0 +1,404 @@
+<template>
+	<!-- 使用自定义导航栏 -->
+	<view>
+		<custom-navbar title="操作说明" :showBack="true" backgroundColor="#202020" color="#FFFFFF"
+			:right-text="isDeleteMode ? '完成' : '删除'" right-color="rgba(255, 255, 255, 0.87)"
+			@right-click="toggleDeleteMode">
+		</custom-navbar>
+
+		<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
+			<view class="example-body">
+				<!-- 图片列表 -->
+				<view class="image-list">
+					<view class="image-item" v-for="(image, index) in instructionImages" :key="index"
+						@click="handleImageClick(index,image)">
+						<image :src="image.fileUrl" mode="aspectFit" class="instruction-image"
+							:class="{ 'image-selected': isDeleteMode && selectedImages.includes(index) }"></image>
+
+						<!-- 多选模式下的选中标记 -->
+						<view class="checkmark" v-if="isDeleteMode && selectedImages.includes(index)">
+							<image src="/static/images/delete-icon.png" mode="aspectFill"></image>
+						</view>
+					</view>
+
+					<!-- 上传按钮（非删除模式显示） -->
+					<view class="upload-btn" v-if="!isDeleteMode">
+						<uni-file-picker ref="filePicker" v-model="fileList" @select="selectFile" limit="9"
+							class="custom-file-picker"></uni-file-picker>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部删除按钮（多选模式显示） -->
+		<view class="delete-footer" v-if="isDeleteMode && selectedImages.length > 0">
+			<button @click="deleteSelectedImages">删除({{selectedImages.length}})</button>
+		</view>
+		<!-- 删除弹框 -->
+		<view class="agreement-mask" v-if="deleteShow">
+			<view class="agreement-popupC">
+				<view class="popup-content">
+					<image src="/static/images/dell.png" mode="" class="svg"></image>
+					<uni-icon class="trash"></uni-icon>
+					<view>
+						<view class="popup-Title">确定删除所选设备！</view>
+					</view>
+				</view>
+				<!-- 按钮组 -->
+				<view class="popup-buttons">
+					<button class="btn agreeBtn" @click="handleBtn">确定</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		baseURL,
+		getToken,
+		clientid
+	} from '@/utils/request'
+	import {
+		fileInfo,
+		fileDelete
+	} from '@/api/common/operatingInstruct/index.js'
+
+	export default {
+		data() {
+			return {
+				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
+				fileList: [],
+				deviceID: "",
+				instructionImages: [],
+				isDeleteMode: false, // 是否删除模式
+				selectedImages: [], // 选中的图片索引
+				deleteShow: false,
+				ImageData: [],
+				filePicker: ''
+			}
+		},
+		methods: {
+			// 选择文件
+			selectFile(e) {
+				console.log('选择文件：', e)
+				// const file = e.tempFiles[0].file
+				const files = e.tempFiles.map(item => item.file)
+				console.log('files', files);
+				this.uploadFile(files)
+			},
+			// 上传图片
+			uploadFile(files) {
+				this.$refs.filePicker.clearFiles() // 通过ref操作uni-file-picker组件
+				uni.showLoading({
+					title: '上传中...'
+				})
+				files.forEach(file => {
+					uni.uploadFile({
+						url: baseURL + '/app/file/upload',
+						filePath: file.path || file.url,
+						name: 'files',
+						formData: {
+							deviceId: this.deviceID,
+							fileType: '1'  //文件类型(1:操作说明，2:产品参数)
+						},
+						header: {
+							'Authorization': 'Bearer ' + getToken(),
+							'clientid': clientid(),
+						},
+						complete: (res) => {
+							console.log(res, 'resss');
+							try {
+								const responseData = JSON.parse(res.data); 
+								if (responseData.code === 200) {
+									uni.showToast({
+										title: responseData.msg,
+										icon: 'success'
+									});
+									this.$refs.filePicker.clearFiles(); // 清空已选文件
+									this.callOtherApi();
+								} else {
+									uni.showToast({
+										title: responseData.msg,
+										icon: 'none'
+									});
+								}
+							} catch (e) {
+								uni.showToast({
+									title: '上传失败',
+									icon: 'none'
+								});
+							} finally {
+								uni.hideLoading();
+							}
+						}
+					})
+				})
+			},
+
+			// 获取图片列表
+			callOtherApi() {
+				let data = {
+					deviceId: this.deviceID,
+					fileType: '1'  //文件类型(1:操作说明，2:产品参数)
+				}
+				fileInfo(data).then((res) => {
+					if (res.code == 200) {
+						this.instructionImages = res.data
+					}
+				})
+			},
+
+			// 切换删除模式
+			toggleDeleteMode() {
+				this.isDeleteMode = !this.isDeleteMode
+				if (!this.isDeleteMode) {
+					this.selectedImages = []
+				}
+			},
+			// 图片点击处理
+			handleImageClick(index, item) {
+				if (this.isDeleteMode) {
+					// 删除模式下处理多选
+					const selectedIndex = this.selectedImages.indexOf(index)
+					if (selectedIndex > -1) {
+						this.selectedImages.splice(selectedIndex, 1)
+						this.ImageData.splice(selectedIndex, 1) // 保持同步删除
+					} else {
+						this.selectedImages.push(
+							index
+
+						)
+						this.ImageData.push(item) // 保持同步添加
+					}
+				} else {
+					// 正常模式下预览图片
+					uni.previewImage({
+						current: this.instructionImages[index].fileUrl,
+						urls: this.instructionImages.map(item => item.fileUrl)
+					})
+				}
+			},
+
+			// 删除选中的图片
+			deleteSelectedImages() {
+				if (this.selectedImages.length === 0) return
+				this.deleteShow = true
+			},
+			async handleBtn() {
+				try {
+					uni.showLoading({
+						title: '删除中...',
+						mask: true
+					})
+					// 构造删除请求数据
+					const ids = this.ImageData.map(item => item.id).join(',')
+					// 调用删除接口
+					const res = await fileDelete(ids)
+					if (res.code === 200) {
+						uni.showToast({
+							title: '删除成功',
+							icon: 'success'
+						})
+						// 从后往前删除，避免索引变化
+						this.selectedImages
+							.sort((a, b) => b.index - a.index)
+							.forEach(item => {
+								this.instructionImages.splice(item.index, 1)
+							})
+						this.callOtherApi()
+						// 重置状态
+						this.selectedImages = []
+						this.isDeleteMode = false
+						this.deleteShow = false
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+						this.deleteShow = false
+					}
+				} catch (error) {} finally {
+					uni.hideLoading()
+				}
+			}
+		},
+		onLoad(options) {
+			this.deviceID = options.id
+			this.callOtherApi()
+		}
+	}
+</script>
+
+<style scoped>
+	.device-page {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		background-color: rgb(18, 18, 18);
+		padding: 30rpx;
+	}
+
+	.example-body {
+		margin-top: 20rpx;
+	}
+
+	/* 图片列表 */
+	.image-list {
+		display: flex;
+		flex-wrap: wrap;
+		margin: -10rpx;
+	}
+
+	/* 图片项 */
+	.image-item {
+		width: 33.33%;
+		padding: 10rpx;
+		position: relative;
+	}
+
+	/* 图片样式 */
+	.instruction-image {
+		width: 180rpx;
+		height: 180rpx;
+		border-radius: 10rpx;
+		background-color: #2a2a2a;
+	}
+
+	/* 选中效果 */
+	.image-selected {
+		opacity: 0.7;
+	}
+
+	/* 选中标记 */
+	.checkmark {
+		position: absolute;
+		bottom: 20rpx;
+		right: 40rpx;
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.checkmark image {
+		width: 24rpx;
+		height: 24rpx;
+	}
+
+	/* 上传按钮 */
+	.upload-btn {
+		width: 33.33%;
+		padding: 10rpx;
+	}
+
+	/* 底部删除按钮 */
+	.delete-footer {
+		position: fixed;
+		bottom: 20rpx;
+		left: 0;
+		right: 0;
+		height: 100rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+	}
+
+	.delete-footer button {
+		width: 90%;
+		height: 88rpx;
+		line-height: 88rpx;
+		background: rgba(187, 230, 0, 1);
+		background: rgba(187, 230, 0, 1);
+		border-radius: 90px;
+	}
+
+	/* 遮罩层 */
+	.agreement-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 9999;
+	}
+
+	/* 弹窗主体 */
+	.agreement-popup {
+		width: 100%;
+		height: 50%;
+		background-color: rgb(42, 42, 42);
+		border-radius: 60rpx 60rpx 0rpx 0rpx;
+		padding: 40rpx;
+		box-sizing: border-box;
+		position: absolute;
+		bottom: 0rpx;
+	}
+
+	.popup-Title {
+		color: rgba(255, 255, 255, 0.86);
+		text-align: center;
+		padding: 30rpx 0rpx;
+	}
+
+	.popup-buttons {
+		display: flex;
+		text-align: center;
+	}
+
+	.agreement-popupC {
+		width: 60%;
+		background-color: rgb(42, 42, 42);
+		border-radius: 40rpx;
+		padding: 30rpx;
+		text-align: center;
+		border: 1px solid rgba(255, 200, 78, 0.3);
+	}
+
+	.popup-flex {
+		display: flex;
+		white-space: nowrap;
+		color: rgba(255, 255, 255, 0.87);
+		height: 50rpx;
+		padding: 30rpx;
+	}
+
+	.popup-input {
+		border: 1px solid rgba(255, 255, 255, 0.4);
+		border-radius: 12rpx;
+		margin-left: 15rpx;
+		padding: 10rpx 0rpx;
+		font-size: 28rpx;
+	}
+
+	.svg {
+		width: 58rpx;
+		height: 62rpx;
+	}
+
+	/* 通用按钮样式 */
+	.btn {
+		height: 60rpx;
+		line-height: 60rpx;
+		border-radius: 40rpx;
+		font-size: 24rpx;
+		margin: 10rpx auto;
+		text-align: center;
+
+	}
+
+	/* 同意按钮 */
+	.agreeBtn {
+		background: #FFC84E;
+		color: #232323;
+		border: none;
+		width: 170rpx !important;
+	}
+</style>

pages/common/operationVideo/index.vue

@@ -1,21 +1,20 @@
 <template>
 	<view>
 		<!-- 使用自定义导航栏 -->
-		<custom-navbar :title="navTitle" :showBack="true" backgroundColor="#202020" color="#FFFFFF" right-text="编辑"
+		<custom-navbar title="操作视频" :showBack="true" backgroundColor="#202020" color="#FFFFFF"></custom-navbar>
-			right-color="rgba(255, 255, 255, 0.87)" @right-click="handleEdit"></custom-navbar>
 		<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
 			<scroll-view scroll-y>
-				<uni-swipe-action >
+				<uni-swipe-action>
 					<block v-for="(item, index) in videoList" :key="index">
 						<uni-swipe-action-item :right-options="item.showConfirm ? confirmOptions : deleteOptions"
-							@click="handleSwipeClick($event, index)" class="content">
+							@click="handleSwipeClick($event, index,item)" class="content">
-							<view class="image-box" @click="openVideoUrl(item.url)">
+							<view class="image-box" @click="openVideoUrl(item.videoUrl)">
 								<view class="deviceIMG">
 									<image src="/static/images/video.png" mode="" class="video"></image>
 								</view>
 								<view class="">
-									<view class="file-title">{{item.title}}</view>
+									<view class="file-title">{{item.videoName}}</view>
-									<view class="file-baidu">{{item.url}}</view>
+									<view class="file-baidu">{{item.videoUrl}}</view>
 								</view>
 							</view>
 							<image src="/static/images/cires.png" class="circle"></image>
@@ -31,42 +30,17 @@
 </template>
 
 <script>
+	import {
+		listOperationVideos,
+		deleteOperationVideo
+	} from '@/api/common/operationVideo/index.js'
 	export default {
 		data() {
 			return {
-				navTitle: '操作视频',
+
 				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
-				videoList: [{
+				videoList: [],
-						id: 1,
+				deviceID: '',
-						title: '使用教程1',
-						url: 'https://www.bilibili.com/variety/?spm_id_from=333.1007.0.0',
-						showConfirm: false
-					},
-					{
-						id: 2,
-						title: '使用教程2',
-						url: 'www.baidu.com',
-						showConfirm: false
-					},
-					{
-						id: 3,
-						title: '使用教程3',
-						url: 'www.baidu.com',
-						showConfirm: false
-					},
-					{
-						id: 4,
-						title: '使用教程4',
-						url: 'www.baidu.com',
-						showConfirm: false
-					},
-					{
-						id: 5,
-						title: '使用教程5',
-						url: 'www.baidu.com',
-						showConfirm: false
-					}
-				],
 				deleteOptions: [{
 						text: '编辑',
 						style: {
@@ -96,38 +70,49 @@
 			}
 		},
 		methods: {
-			// 导航栏编辑按钮
-			handleEdit() {
-				uni.showToast({
-					title: '点击了导航栏编辑',
-					icon: 'none'
-				});
-			},
-
 			// 添加视频
 			addvideo() {
 				uni.navigateTo({
-					url: '/pages/6170/addvideo/index'
+					url: `/pages/common/addvideo/index??id=${this.deviceID}`
 				})
 			},
 
 			// 处理滑动按钮点击
-			handleSwipeClick(e, index) {
+			handleSwipeClick(e, index, item) {
+				console.log(item, 'eeeee');
 				const {
 					content
 				} = e;
 				// 如果是确认删除操作
 				if (content.text === '确认删除') {
-					this.videoList.splice(index, 1);
+					let ids = item.id
-					uni.showToast({
+					let data ={
-						title: '删除成功',
+						ids:item.id
-						icon: 'success'
+					}
-					});
+					deleteOperationVideo(ids).then((res) => {
-					return;
+						if (res.code == 200) {
+							uni.showToast({
+								title: res.msg,
+								icon: 'success'
+							});
+							this.getData()
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'success'
+							});
+						}
+
+					})
+
+					// return;
 				}
 				// 编辑操作
 				if (content.text === '编辑') {
-					this.editVideo(this.videoList[index].id);
+					console.log('编辑');
+					uni.navigateTo({
+						url: `/pages/common/addvideo/index?item=${encodeURIComponent(JSON.stringify(item))}`
+					});
 				}
 				// 删除操作
 				else if (content.text === '删除') {
@@ -142,12 +127,6 @@
 				}
 			},
 
-			// 编辑视频
-			editVideo(id) {
-				uni.navigateTo({
-					url: `/pages/6170/editVideo/index?id=${id}`
-				});
-			},
 			// 打开视频URL
 			openVideoUrl(url) {
 				console.log(url, 'url333');
@@ -166,6 +145,29 @@
 					});
 				}
 			},
+			getData() {
+				let data = {
+					deviceId: this.deviceID
+				}
+				listOperationVideos(data).then((res) => {
+					console.log(res, 'resss');
+					if (res.code == 200) {
+						this.videoList = res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				})
+			}
+		},
+		onShow() {
+			this.getData()
+		},
+		onLoad(options) {
+			this.deviceID = options.id
+
 		}
 	}
 </script>

pages/common/productDes/index.vue

@@ -0,0 +1,404 @@
+<template>
+	<!-- 使用自定义导航栏 -->
+	<view>
+		<custom-navbar title="产品说明" :showBack="true" backgroundColor="#202020" color="#FFFFFF"
+			:right-text="isDeleteMode ? '完成' : '删除'" right-color="rgba(255, 255, 255, 0.87)"
+			@right-click="toggleDeleteMode">
+		</custom-navbar>
+
+		<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
+			<view class="example-body">
+				<!-- 图片列表 -->
+				<view class="image-list">
+					<view class="image-item" v-for="(image, index) in instructionImages" :key="index"
+						@click="handleImageClick(index,image)">
+						<image :src="image.fileUrl" mode="aspectFit" class="instruction-image"
+							:class="{ 'image-selected': isDeleteMode && selectedImages.includes(index) }"></image>
+
+						<!-- 多选模式下的选中标记 -->
+						<view class="checkmark" v-if="isDeleteMode && selectedImages.includes(index)">
+							<image src="/static/images/delete-icon.png" mode="aspectFill"></image>
+						</view>
+					</view>
+
+					<!-- 上传按钮（非删除模式显示） -->
+					<view class="upload-btn" v-if="!isDeleteMode">
+						<uni-file-picker ref="filePicker" v-model="fileList" @select="selectFile" limit="9"
+							class="custom-file-picker"></uni-file-picker>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部删除按钮（多选模式显示） -->
+		<view class="delete-footer" v-if="isDeleteMode && selectedImages.length > 0">
+			<button @click="deleteSelectedImages">删除({{selectedImages.length}})</button>
+		</view>
+		<!-- 删除弹框 -->
+		<view class="agreement-mask" v-if="deleteShow">
+			<view class="agreement-popupC">
+				<view class="popup-content">
+					<image src="/static/images/dell.png" mode="" class="svg"></image>
+					<uni-icon class="trash"></uni-icon>
+					<view>
+						<view class="popup-Title">确定删除所选设备！</view>
+					</view>
+				</view>
+				<!-- 按钮组 -->
+				<view class="popup-buttons">
+					<button class="btn agreeBtn" @click="handleBtn">确定</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		baseURL,
+		getToken,
+		clientid
+	} from '@/utils/request'
+	import {
+		fileInfo,
+		fileDelete
+	} from '@/api/common/operatingInstruct/index.js'
+
+	export default {
+		data() {
+			return {
+				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
+				fileList: [],
+				deviceID: "",
+				instructionImages: [],
+				isDeleteMode: false, // 是否删除模式
+				selectedImages: [], // 选中的图片索引
+				deleteShow: false,
+				ImageData: [],
+				filePicker: ''
+			}
+		},
+		methods: {
+			// 选择文件
+			selectFile(e) {
+				console.log('选择文件：', e)
+				// const file = e.tempFiles[0].file
+				const files = e.tempFiles.map(item => item.file)
+				console.log('files', files);
+				this.uploadFile(files)
+			},
+			// 上传图片
+			uploadFile(files) {
+				this.$refs.filePicker.clearFiles() // 通过ref操作uni-file-picker组件
+				uni.showLoading({
+					title: '上传中...'
+				})
+				files.forEach(file => {
+					uni.uploadFile({
+						url: baseURL + '/app/file/upload',
+						filePath: file.path || file.url,
+						name: 'files',
+						formData: {
+							deviceId: this.deviceID,
+							fileType: '2' //文件类型(1:操作说明，2:产品参数)
+						},
+						header: {
+							'Authorization': 'Bearer ' + getToken(),
+							'clientid': clientid(),
+						},
+						complete: (res) => {
+							console.log(res, 'resss');
+							try {
+								const responseData = JSON.parse(res.data); 
+								if (responseData.code === 200) {
+									uni.showToast({
+										title: responseData.msg,
+										icon: 'success'
+									});
+									this.$refs.filePicker.clearFiles(); // 清空已选文件
+									this.callOtherApi();
+								} else {
+									uni.showToast({
+										title: responseData.msg,
+										icon: 'none'
+									});
+								}
+							} catch (e) {
+								uni.showToast({
+									title: '上传失败',
+									icon: 'none'
+								});
+							} finally {
+								uni.hideLoading();
+							}
+						}
+					})
+				})
+			},
+
+			// 获取图片列表
+			callOtherApi() {
+				let data = {
+					deviceId: this.deviceID,
+					fileType: '2' //文件类型(1:操作说明，2:产品参数)
+				}
+				fileInfo(data).then((res) => {
+					if (res.code == 200) {
+						this.instructionImages = res.data
+					}
+				})
+			},
+
+			// 切换删除模式
+			toggleDeleteMode() {
+				this.isDeleteMode = !this.isDeleteMode
+				if (!this.isDeleteMode) {
+					this.selectedImages = []
+				}
+			},
+			// 图片点击处理
+			handleImageClick(index, item) {
+				if (this.isDeleteMode) {
+					// 删除模式下处理多选
+					const selectedIndex = this.selectedImages.indexOf(index)
+					if (selectedIndex > -1) {
+						this.selectedImages.splice(selectedIndex, 1)
+						this.ImageData.splice(selectedIndex, 1) // 保持同步删除
+					} else {
+						this.selectedImages.push(
+							index
+
+						)
+						this.ImageData.push(item) // 保持同步添加
+					}
+				} else {
+					// 正常模式下预览图片
+					uni.previewImage({
+						current: this.instructionImages[index].fileUrl,
+						urls: this.instructionImages.map(item => item.fileUrl)
+					})
+				}
+			},
+
+			// 删除选中的图片
+			deleteSelectedImages() {
+				if (this.selectedImages.length === 0) return
+				this.deleteShow = true
+			},
+			async handleBtn() {
+				try {
+					uni.showLoading({
+						title: '删除中...',
+						mask: true
+					})
+					// 构造删除请求数据
+					const ids = this.ImageData.map(item => item.id).join(',')
+					// 调用删除接口
+					const res = await fileDelete(ids)
+					if (res.code === 200) {
+						uni.showToast({
+							title: '删除成功',
+							icon: 'success'
+						})
+						// 从后往前删除，避免索引变化
+						this.selectedImages
+							.sort((a, b) => b.index - a.index)
+							.forEach(item => {
+								this.instructionImages.splice(item.index, 1)
+							})
+						this.callOtherApi()
+						// 重置状态
+						this.selectedImages = []
+						this.isDeleteMode = false
+						this.deleteShow = false
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+						this.deleteShow = false
+					}
+				} catch (error) {} finally {
+					uni.hideLoading()
+				}
+			}
+		},
+		onLoad(options) {
+			this.deviceID = options.id
+			this.callOtherApi()
+		}
+	}
+</script>
+
+<style scoped>
+	.device-page {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		background-color: rgb(18, 18, 18);
+		padding: 30rpx;
+	}
+
+	.example-body {
+		margin-top: 20rpx;
+	}
+
+	/* 图片列表 */
+	.image-list {
+		display: flex;
+		flex-wrap: wrap;
+		margin: -10rpx;
+	}
+
+	/* 图片项 */
+	.image-item {
+		width: 33.33%;
+		padding: 10rpx;
+		position: relative;
+	}
+
+	/* 图片样式 */
+	.instruction-image {
+		width: 180rpx;
+		height: 180rpx;
+		border-radius: 10rpx;
+		background-color: #2a2a2a;
+	}
+
+	/* 选中效果 */
+	.image-selected {
+		opacity: 0.7;
+	}
+
+	/* 选中标记 */
+	.checkmark {
+		position: absolute;
+		bottom: 20rpx;
+		right: 40rpx;
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.checkmark image {
+		width: 24rpx;
+		height: 24rpx;
+	}
+
+	/* 上传按钮 */
+	.upload-btn {
+		width: 33.33%;
+		padding: 10rpx;
+	}
+
+	/* 底部删除按钮 */
+	.delete-footer {
+		position: fixed;
+		bottom: 20rpx;
+		left: 0;
+		right: 0;
+		height: 100rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+	}
+
+	.delete-footer button {
+		width: 90%;
+		height: 88rpx;
+		line-height: 88rpx;
+		background: rgba(187, 230, 0, 1);
+		background: rgba(187, 230, 0, 1);
+		border-radius: 90px;
+	}
+
+	/* 遮罩层 */
+	.agreement-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 9999;
+	}
+
+	/* 弹窗主体 */
+	.agreement-popup {
+		width: 100%;
+		height: 50%;
+		background-color: rgb(42, 42, 42);
+		border-radius: 60rpx 60rpx 0rpx 0rpx;
+		padding: 40rpx;
+		box-sizing: border-box;
+		position: absolute;
+		bottom: 0rpx;
+	}
+
+	.popup-Title {
+		color: rgba(255, 255, 255, 0.86);
+		text-align: center;
+		padding: 30rpx 0rpx;
+	}
+
+	.popup-buttons {
+		display: flex;
+		text-align: center;
+	}
+
+	.agreement-popupC {
+		width: 60%;
+		background-color: rgb(42, 42, 42);
+		border-radius: 40rpx;
+		padding: 30rpx;
+		text-align: center;
+		border: 1px solid rgba(255, 200, 78, 0.3);
+	}
+
+	.popup-flex {
+		display: flex;
+		white-space: nowrap;
+		color: rgba(255, 255, 255, 0.87);
+		height: 50rpx;
+		padding: 30rpx;
+	}
+
+	.popup-input {
+		border: 1px solid rgba(255, 255, 255, 0.4);
+		border-radius: 12rpx;
+		margin-left: 15rpx;
+		padding: 10rpx 0rpx;
+		font-size: 28rpx;
+	}
+
+	.svg {
+		width: 58rpx;
+		height: 62rpx;
+	}
+
+	/* 通用按钮样式 */
+	.btn {
+		height: 60rpx;
+		line-height: 60rpx;
+		border-radius: 40rpx;
+		font-size: 24rpx;
+		margin: 10rpx auto;
+		text-align: center;
+
+	}
+
+	/* 同意按钮 */
+	.agreeBtn {
+		background: #FFC84E;
+		color: #232323;
+		border: none;
+		width: 170rpx !important;
+	}
+</style>