feat: 新增bzy2和shuHai1模块的设备相关组件及页面

新增内容：
1. 新增nav-top-bar导航栏组件，实现固定顶部布局
2. 新增设备控制、虫害识别、虫害档案、图片展示等组件
3. 新增bzy2和shuHai1模块的设备详情、控制、图片查看等页面
4. 新增悬浮按钮、SSE连接、markdown渲染等工具组件
5. 调整原设备详情页布局，使用新导航栏优化显示
6. 修复movable-view拖动问题，显式设置高度
7. 更新版本号至1.15.29

components/nav-top-bar/nav-top-bar.vue

@@ -0,0 +1,63 @@
+<template>
+	<view>
+		<!-- 固定在顶部：状态栏占位 + 页面自己的头部内容（插槽），滚动时内容从其下方穿过 -->
+		<view class="nav-top-bar" :style="{ background: background }">
+			<uni-status-bar />
+			<view class="nav-top-bar__content">
+				<slot />
+			</view>
+		</view>
+		<!-- 占位：高度自动等于固定栏总高（状态栏 + 插槽内容），保证滚动前布局不变 -->
+		<view class="nav-top-bar__placeholder" :style="{ height: placeholderHeight + 'px' }"></view>
+	</view>
+</template>
+
+<script>
+	import uniStatusBar from '../uni-status-bar/uni-status-bar.vue';
+
+	export default {
+		name: 'nav-top-bar',
+		components: {
+			uniStatusBar
+		},
+		props: {
+			// 固定栏背景（需不透明才能盖住滚上去的内容），可传颜色或渐变
+			background: {
+				type: String,
+				default: '#FFFFFF'
+			}
+		},
+		data() {
+			return {
+				placeholderHeight: 0
+			};
+		},
+		mounted() {
+			this.$nextTick(this.measure);
+		},
+		methods: {
+			// 插槽内容高度变化后（如异步数据渲染出头部）可调用 this.$refs.xxx.measure()
+			measure() {
+				uni.createSelectorQuery().in(this).select('.nav-top-bar').boundingClientRect(rect => {
+					if (rect && rect.height) {
+						this.placeholderHeight = rect.height;
+					}
+				}).exec();
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.nav-top-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
+	}
+
+	.nav-top-bar__content {
+		width: 100%;
+	}
+</style>

manifest.json

@@ -2,8 +2,8 @@
     "name" : "云飞智控",
     "appid" : "__UNI__DBA6730",
     "description" : "",
-    "versionName" : "1.15.28",
-    "versionCode" : 11528,
+    "versionName" : "1.15.29",
+    "versionCode" : 11529,
     "transformPx" : false,
     "sassImplementationName" : "node-sass",
     /* 5+App特有相关 */

pages.json

@@ -261,6 +261,30 @@
       }
     },
     {
+      "path": "pages/bzy2/detail",
+      "style": {
+        "navigationBarTitleText": "设备详情",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/bzy2/devicePhoto",
+      "style": {
+        "navigationBarTitleText": "查看图片",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/bzy2/deviceControl",
+      "style": {
+        "navigationBarTitleText": "设备控制",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/my/index/index",
       "style": {
         "navigationBarTitleText": "个人中心",
@@ -471,6 +495,30 @@
       }
     },
     {
+      "path": "pages/shuHai1/detail",
+      "style": {
+        "navigationBarTitleText": "设备详情",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/shuHai1/deviceControl",
+      "style": {
+        "navigationBarTitleText": "设备控制",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/shuHai1/devicePhoto",
+      "style": {
+        "navigationBarTitleText": "查看图片",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/sy/detail",
       "style": {
         "navigationBarTitleText": "设备详情",

pages/bzy/components/deviceData.vue

@@ -198,9 +198,9 @@
             <text class="sim-value"><text style="color: #0bbc58">{{ deviceInfoStatic.used || ''}}</text>/{{ deviceInfoStatic.total || '' }}</text>
           </view>
           <view class="sim-item">
-            <text class="sim-value">
+            <view class="sim-value">
               <u-line-progress active-color="#0bbc58" :percent="deviceInfoStatic.used / deviceInfoStatic.total * 100" :show-percent="false"></u-line-progress>
-            </text>
+            </view>
           </view>
         </view>
         <view class="sim-container" v-if="activeTab === 1">

pages/bzy/detail.vue

@@ -1,6 +1,8 @@
 <template>
-  <view class="device-detail" v-show="!loading">
-    <view class="device-detail__header">
+  <view class="device-detail">
+    <!-- 固定头部：滚动时内容不再钻到系统状态栏下面 -->
+    <nav-top-bar background="linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%)">
+      <view class="device-detail__header">
       <u-icon
         size="36"
         class="arrow-left"
@@ -8,7 +10,8 @@
         @click="handleBack"
       ></u-icon>
       {{ deviceInfo.name }}
-    </view>
+      </view>
+    </nav-top-bar>
     <view class="operation" @click.stop="isShowOperation = !isShowOperation">操作</view>
     <view class="operation-container" v-if="isShowOperation" @click="closeOperationHandler">
       <view class="operation-background"></view>
@@ -70,7 +73,7 @@
           </view>
         </view>
       </view>
-      <view v-if="activeTab === 'viewImage'">
+      <view v-show="activeTab === 'viewImage'">
         <photoImage
           :images="imageList"
           :pestList="pestList"
@@ -80,7 +83,7 @@
           :deviceInfo="deviceInfo"
         />
       </view>
-      <view v-if="activeTab === 'deviceData'">
+      <view v-show="activeTab === 'deviceData'">
         <DeviceData
           :deviceStatic="deviceStatic"
           :deviceInfo="deviceInfo"
@@ -99,6 +102,7 @@
   </view>
 </template>
 <script>
+import NavTopBar from '@/components/nav-top-bar/nav-top-bar.vue';
 import DeviceCard from './components/DeviceCard.vue';
 import PestDiscern from './components/pestDiscern.vue';
 import PestEchart from './components/pestEchart.vue';
@@ -108,6 +112,7 @@ import DeviceData from './components/deviceData.vue';
 
 export default {
   components: {
+    NavTopBar,
     DeviceCard,
     PestDiscern,  
     PestEchart,
@@ -117,8 +122,8 @@ export default {
   },
   data(){
     return {
-      loading: false,
-      isShowTab: false,
+      isShowTab:false,
+      showPicker: false,
       disableShow: false,
       isShowOperation: false,
       photoIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/photoIcon.png',
@@ -387,7 +392,6 @@ export default {
       this.pestList = data
     },
     async getPolylineData(){
-      this.loading = true;
       const res = await this.$myRequest({
         url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
         method: 'POST',
@@ -395,10 +399,9 @@ export default {
           device_type_id: this.deviceInfo.type_id,
           d_id: this.deviceInfo.d_id,
           start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,// 转成毫秒
-          end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,
+          end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,// 转成毫秒
         },
       });
-      this.loading = false;
       const data = res || [];
       this.polylineList = data
     },
@@ -536,7 +539,8 @@ export default {
   display: flex;
   width: 100%;
   height: calc(100vh - 112rpx);
-  padding-top: 112rpx;
+  // 状态栏高度由 nav-top-bar 的占位撑起，这里只留头部与内容的间距
+  padding-top: 24rpx;
   flex-direction: column;
   align-items: center;
   overflow-y: scroll;

pages/bzy/deviceControl.vue

@@ -61,10 +61,10 @@
           <view class="end-time" @click="showPickerHandler(index,'end_time')">{{item.end_time_label || '结束时间'}}
           </view><u-icon name="clock" color="#4E5969" size="26" style="padding-right: 20rpx"></u-icon>
         </view>
-        <view class="device-detail-viewImage" v-if="device_model == 51">
+        <view class="device-detail-viewImage">
           <text class="device-detail-label">高温保护阀值(℃) {{ sliderField === 'tph' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tph }}</text>
         </view>
-        <view class="slider-container" v-if="device_model == 51">
+        <view class="slider-container">
           <view class="slider-min-value">50</view>
           <view
             class="custom-progress"
@@ -137,10 +137,10 @@
           </view>
           <view class="slider-max-value">40</view>
         </view>
-        <view class="device-detail-viewImage" v-if="device_model == 51">
+        <view class="device-detail-viewImage">
           <text class="device-detail-label">低温保护阀值(℃) {{ sliderField === 'tpl' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tpl }}</text>
         </view>
-        <view class="slider-container" v-if="device_model == 51">
+        <view class="slider-container">
           <view class="slider-min-value">-30</view>
           <view
             class="custom-progress"

pages/bzy/devicePhoto.vue

@@ -622,6 +622,8 @@ export default {
 
     .movable-view {
       width: 100%;
+      // 显式高度：movable-view 依赖宽高计算各方向拖动边界，高度缺失会导致放大后无法上下拖动
+      height: 100%;
     }
 
     .image-container {

pages/bzy2/components/DeviceCard.vue

@@ -0,0 +1,133 @@
+<template>
+  <view class="device-card__body">
+    <view class="device-card">
+      <view :class=" dataSource.status == 1 ?'online-status':'offline-status'">{{ dataSource.status === 1 ? '在线' : '离线' }}</view>
+      <view class="device-card__title">设备ID</view>
+      <view class="device-card__content">
+        <text class="device-id-text">{{ dataSource.id  }}</text>
+        <image class="copy-icon" :src="copy" @click="copyDeviceId"/>
+      </view>
+    </view>
+    <view class="device-card">
+      <view class="device-card__title">上报时间</view>
+      <view class="device-card__content">{{ dataSource.uptime | timeFormat()}}</view>
+    </view>
+    <view class="device-card">
+      <view class="device-card__title">设备位置</view>
+      <view class="device-card__content address">{{ dataSource.address || '-' }}</view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    dataSource: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      copy:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/copy.png',
+      title: ''
+    }
+  },
+  methods: {
+    copyDeviceId() {
+      uni.setClipboardData({
+        data: this.dataSource.id,
+        success: () => {
+          uni.showToast({
+            title: '复制成功',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.device-card__body {
+  display: flex;
+  padding: 16px 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #EFF 0%, #FFF 23.56%);
+  margin-top: 34rpx;
+  position: relative;
+  .device-card {
+    display: flex;
+    gap: 16px;
+    .device-card__title {
+      width: 120rpx;
+      color: #4E5969;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      text-align: right;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .online-status {
+      width: 136rpx;
+      height: 56rpx;
+      line-height: 56rpx;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      right: 0;
+      background: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/online1.png') no-repeat center center;
+      background-size: 100% 100%;
+      color: #0bbc58;
+      font-family: "Source Han Sans CN VF";
+      font-size: 28rpx;
+    }
+    .offline-status{
+      width: 136rpx;
+      height: 56rpx;
+      line-height: 56rpx;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      right: 0;
+      background: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/offline.png') no-repeat center center;
+      background-size: 100% 100%;
+      color: #ff3546;
+      font-family: "Source Han Sans CN VF";
+      font-size: 28rpx;
+    }
+    .device-card__content {
+      color: #4E5969;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+      .device-id-text {
+        flex: 1;
+      }
+      .copy-icon {
+        font-family: 'iconfont';
+        font-size: 32rpx;
+        color: #86909C;
+        cursor: pointer;
+        width: 28rpx;
+        height: 28rpx;
+        &:active {
+          opacity: 0.6;
+        }
+      }
+    }
+    .address {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

pages/bzy2/components/DeviceControl.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="device-control-container">
+    <view class="device-status">
+      <view class="status-item">
+        <text class="status-label">环境温度</text>
+        <text class="status-value">{{ deviceStatus.temp }}°C</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境湿度</text>
+        <text class="status-value">{{ deviceStatus.humidity }}%</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境光照</text>
+        <text class="status-value">{{ deviceStatus.light }}Lux</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境湿度</text>
+        <text class="status-value">{{ deviceStatus.moisture }}%</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境湿度</text>
+        <text class="status-value">{{ deviceStatus.pest }}%</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      deviceStatus: {
+        temp: 25,
+        humidity: 50,
+        light: 800,
+        moisture: 300,
+        pest: 10
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.device-control-container {
+  padding: 24rpx;
+  background-color: #F7F8FA;
+  border-radius: 12rpx;
+}
+</style>

pages/bzy2/components/floating-button.vue

@@ -0,0 +1,221 @@
+<template>
+	<view
+		class="floating-container"
+		:style="{ top: position.y + 'px', left: position.x + 'px' }"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+		@touchend="onTouchEnd"
+		@click="onClick"
+	>
+		<view class="floating-icon" :class="{ expanded: isExpanded }">
+			<view class="icon-content">
+				<slot name="icon">
+					<text class="default-icon">+</text>
+				</slot>
+			</view>
+			<view v-if="isExpanded" class="expanded-content">
+				<slot name="expanded">
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'FloatingButton',
+	props: {
+		// 初始位置距离右边的距离
+		right: {
+			type: Number,
+			default: 20
+		},
+		// 初始位置距离底部的距离
+		bottom: {
+			type: Number,
+			default: 100
+		},
+		// 按钮大小
+		size: {
+			type: Number,
+			default: 50
+		},
+		// 是否可拖拽
+		draggable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			position: {
+				x: 0,
+				y: 0
+			},
+			isDragging: false,
+			isExpanded: false,
+			startX: 0,
+			startY: 0,
+			lastX: 0,
+			lastY: 0,
+			clickStartTime: 0,
+			hasMoved: false
+		};
+	},
+	mounted() {
+		this.initPosition();
+	},
+	methods: {
+		// 初始化位置
+		initPosition() {
+			const systemInfo = uni.getSystemInfoSync();
+			const screenWidth = systemInfo.windowWidth;
+			const screenHeight = systemInfo.windowHeight;
+
+			this.position = {
+				x: screenWidth - this.right - this.size,
+				y: screenHeight - this.bottom - this.size
+			};
+		},
+
+		// 触摸开始
+		onTouchStart(e) {
+			if (!this.draggable) return;
+
+			const touch = e.touches[0];
+			this.startX = touch.clientX;
+			this.startY = touch.clientY;
+			this.lastX = this.position.x;
+			this.lastY = this.position.y;
+			this.isDragging = true;
+			this.hasMoved = false;
+			this.clickStartTime = Date.now();
+		},
+
+		// 触摸移动
+		onTouchMove(e) {
+			if (!this.draggable || !this.isDragging) return;
+
+			e.preventDefault();
+
+			const touch = e.touches[0];
+			const deltaX = touch.clientX - this.startX;
+			const deltaY = touch.clientY - this.startY;
+
+			// 如果移动超过5像素，认为是拖拽操作
+			if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+				this.hasMoved = true;
+			}
+
+			const systemInfo = uni.getSystemInfoSync();
+			const screenWidth = systemInfo.windowWidth;
+			const screenHeight = systemInfo.windowHeight;
+
+			// 计算新位置，限制在屏幕范围内
+			let newX = this.lastX + deltaX;
+			let newY = this.lastY + deltaY;
+
+			// 边界限制
+			newX = Math.max(0, Math.min(newX, screenWidth - this.size));
+			newY = Math.max(0, Math.min(newY, screenHeight - this.size));
+
+			this.position = {
+				x: newX,
+				y: newY
+			};
+		},
+
+		// 触摸结束
+		onTouchEnd(e) {
+			if (!this.draggable) return;
+
+			this.isDragging = false;
+
+			// 自动吸附到屏幕边缘
+			this.snapToEdge();
+		},
+
+		// 吸附到屏幕左右边缘
+		snapToEdge() {
+			const systemInfo = uni.getSystemInfoSync();
+			const screenWidth = systemInfo.windowWidth;
+
+			// 判断当前在左半屏还是右半屏
+			const centerX = this.position.x + this.size / 2;
+
+			if (centerX < screenWidth / 2) {
+				// 吸附到左边
+				this.position.x = 10;
+			} else {
+				// 吸附到右边
+				this.position.x = screenWidth - this.size - 10;
+			}
+		},
+
+		// 点击事件
+		onClick(e) {
+			// 如果发生了拖拽移动，不触发点击事件
+			const clickDuration = Date.now() - this.clickStartTime;
+
+			if (this.hasMoved || clickDuration > 300) {
+				return;
+			}
+
+			// 切换展开/收起状态
+			this.isExpanded = !this.isExpanded;
+
+			// 触发父组件事件
+			this.$emit(this.isExpanded ? 'expand' : 'collapse', {
+				expanded: this.isExpanded
+			});
+		},
+
+		// 手动展开
+		expand() {
+			this.isExpanded = true;
+		},
+
+		// 手动收起
+		collapse() {
+			this.isExpanded = false;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.floating-container {
+	position: fixed;
+	z-index: 9999;
+	width: 50px;
+	height: 50px;
+}
+.expanded-content{
+	position: absolute;
+}
+.floating-icon {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s ease;
+}
+
+.icon-content {
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s ease;
+}
+
+.default-icon {
+	font-size: 24px;
+	color: #ffffff;
+	font-weight: bold;
+}
+
+</style>

pages/bzy2/components/pestArchive.vue

@@ -0,0 +1,216 @@
+<template>
+  <view class="pest-archive" v-if="pest_info.name">
+    <view class="pest-archive__header">
+      <view class="pest-archive__title">虫害档案</view>
+    </view>
+
+      <view
+        class="pest-card"
+        @tap="handleCardClick()"
+      >
+        <view class="pest-card__image">
+          <image :src="pest_info.img_urls" mode="aspectFill" class="pest-img"></image>
+        </view>
+        <view class="pest-card__info">
+          <view class="pest-card__top">
+            <view class="pest-card__name">
+              名称
+            </view>
+            <view class="pest-card__status">
+              {{ pest_info.name || '未知' }}
+            </view>
+          </view>
+          <view class="pest-card__top">
+            <view class="pest-card__name">
+              害虫信息
+            </view>
+            <view class="pest-card__status" style="height:200rpx;overflow: auto;">
+              {{ pest_info.prevention || '未知' }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <u-popup v-model="showDetail" mode="bottom" border-radius="32">
+        <view class="pest-card__detail">
+          <view class="pest-card__image">
+            <image :src="pest_info.img_urls" mode="aspectFill" class="pest-img"></image>
+          </view>
+          <view>
+            {{ pest_info.name || '未知' }}
+          </view>
+          <view>
+            {{ pest_info.prevention || '未知' }}
+          </view>
+        </view>
+      </u-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    scrollHeight: {
+      type: String,
+      default: '500rpx'
+    },
+    pest_info: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showDetail: false,
+    }
+  },
+  methods: {
+    showPestDetail(){
+      this.showDetail = true;
+    },
+    handleCardClick() {
+      this.showPestDetail()
+      this.$emit('click', this.pest_info)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pest-archive {
+  width: 100%;
+  padding: 32rpx;
+  margin-top: 24rpx;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 16rpx;
+}
+
+.pest-archive__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.pest-archive__title {
+  font-size: 32rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+  font-weight: 500;
+}
+
+.pest-archive__add {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00D26A 0%, #00B55A 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 210, 106, 0.3);
+
+  .add-icon {
+    font-size: 40rpx;
+    color: #fff;
+    line-height: 1;
+    font-weight: 300;
+  }
+}
+
+.pest-card__detail{
+  height: 70vh;
+  padding: 40rpx;
+}
+.pest-archive__list {
+  width: 100%;
+}
+
+.pest-card {
+  display: flex;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  background: #F7F8F9;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.pest-card__image {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+  margin-right: 20rpx;
+  background: #e0e0e0;
+
+  .pest-img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.pest-card__info {
+  padding: 4rpx 0;
+}
+
+.pest-card__top {
+  display: flex;
+}
+
+.pest-card__name {
+  font-size: 26rpx;
+  color: #999999;
+  font-family: "Source Han Sans CN VF";
+  font-weight: 400;
+  width: 110rpx;
+}
+
+.pest-card__status {
+  width: 270rpx;
+  color: #303133;
+  font-size: 26srpx;
+  font-weight: 500;
+
+  &.status--handled {
+    background: rgba(0, 210, 106, 0.15);
+    color: #00B55A;
+  }
+
+  &.status--handling {
+    background: rgba(255, 149, 0, 0.15);
+    color: #FF9500;
+  }
+
+  &.status--pending {
+    background: rgba(255, 53, 70, 0.15);
+    color: #FF3546;
+  }
+}
+
+.pest-card__time {
+  font-size: 24rpx;
+  color: #86909C;
+  margin-top: 8rpx;
+}
+
+.pest-card__desc {
+  font-size: 26rpx;
+  color: #4E5969;
+  margin-top: 12rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.5;
+}
+</style>

pages/bzy2/components/pestDiscern.vue

@@ -0,0 +1,120 @@
+<template>
+  <view class="pest-discern" v-if="pests.length">
+    <view class="pest-discern__header">
+      <view class="pest-discern__title">
+        虫害识别
+      </view>
+    </view>
+    <view class="pest-discern__content">
+      <view class="pest-discern__item" v-for="(item,index) in pests" :key="index">
+        <view class="pest-discern__item-title">
+          {{ item.name }}
+        </view>
+        <view class="pest-discern__item-content">
+          <u-line-progress :active-color="item.color" :percent="item.percent" :show-percent="false" height="8"></u-line-progress>
+        </view>
+        <view class="pest-discern__item-count">
+          {{ item.count }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    pest_order: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch:{
+    pest_order:{
+      handler(val){
+        this.pests = [];
+        let index = 0;
+        for(let key in val){
+          index++;
+          this.pests.push({
+            color: this.colors[index],
+            name: key,
+            count: val[key],
+            percent: (val[key] / this.total) * 100
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      colors:[
+        '#FF5951',
+        '#66EDED',
+        '#E67B3E',
+        '#6DE28B',
+        '#FFC97A',
+        '#E7EB4B',
+        '#1561F3',
+        '#FA73F5',
+        '#159AFF',
+        '#FA73F5'
+      ],
+      pests: []
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pest-discern {
+  width: 100%;
+  padding: 32rpx;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 16rpx;
+}
+.pest-discern__header {
+  padding: 0rpx 0rpx 20rpx 0rpx;
+  font-size: 32rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+  font-weight: 700;
+}
+.pest-discern__title {
+  font-size: 28rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+  font-weight: 500;
+}
+.pest-discern__item {
+  display: flex;
+  width: 100%;
+  margin-bottom: 20rpx;
+  align-items: center;
+  .pest-discern__item-title{
+    width: 120rpx;
+    font-size: 28rpx;
+    color: #042118;
+    font-family: 'Source Han Sans CN VF';
+    font-weight: 400;
+    // 超出隐藏
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pest-discern__item-content{
+    flex: 1;
+    margin: 0 20rpx;
+  }
+  .pest-discern__item-count{
+    width: 80rpx;
+    font-size: 28rpx;
+    color: #042118;
+    text-align: right;
+  }
+}
+</style>

pages/bzy2/components/pestEchart.vue

@@ -0,0 +1,416 @@
+<template>
+  <view class="pest-echart" v-show="tabs.length">
+    <view class="pest-echart__header">
+      <view class="tab-list">
+        <view
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: activeTab === index }"
+          @click="switchTab(index)"
+        >
+          {{ tab.name }}
+        </view>
+      </view>
+    </view>
+
+    <view class="pest-echart__content" v-show="dayData.length">
+      <!-- 三个关键时期 -->
+      <view class="period-section">
+        <view class="period-item">
+          <view class="period-label">始见期</view>
+          <view class="period-value">{{ periodData.firstDate }}</view>
+        </view>
+        <view class="period-item">
+          <view class="period-label">高峰期</view>
+          <view class="period-value">{{ periodData.peakDate }}</view>
+        </view>
+        <view class="period-item">
+          <view class="period-label">终见期</view>
+          <view class="period-value">{{ periodData.lastDate }}</view>
+        </view>
+      </view>
+
+      <!-- 图表区域 -->
+      <view class="chart-container">
+        <!-- <canvas
+          canvas-id="pestChart"
+          id="pestChart"
+          class="charts"
+          :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
+          @touchstart="touchChart($event)"
+          @touchmove="moveChart($event)"
+          @touchend="touchEndChart($event)"
+          disable-scroll=true
+        ></canvas> -->
+        <qiun-data-charts type="line" :chartData="chartData" :opts="opts" :canvas2d="true" :inScrollView="true" :ontouch="true" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
+
+let chartInstance = null;
+
+export default {
+  name: 'PestEchart',
+  props:{
+    pest_order:{
+      type: Object,
+      default: () => ({})
+    },
+    endDate: {
+      type: String,
+      default: ''
+    },
+    d_id: {
+      type: String | Number,
+      default: ''
+    },
+    day:{
+      type: Array,
+      default: () => []
+    },
+    pest:{
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      tabs: [],
+      currentPest:'',
+      activeTab: 0,
+      dayData:[],
+      // 三个关键时期数据
+      periodData: {
+        firstDate: '-',
+        peakDate: '-',
+        lastDate: '-'
+      },
+      chartData: {},
+      // canvas 尺寸配置
+      cWidth: 650,
+      cHeight: 400,
+      pixelRatio: 1,
+      opts: {
+        type: 'line',
+        xAxis: {
+          disableGrid: true,
+          itemCount: 3,
+          scrollShow: true
+        },
+        yAxis: {
+          disableGrid: false,
+          gridType: 'dash',
+          gridColor: '#E5E5E5',
+          splitNumber: 5,
+          min: 0,
+          minInterval: 1,
+          axisLine: true,
+          data: [{
+            min: 0,
+            toFixed: 0
+          }]
+        },
+        extra: {
+          line: {
+            type: 'curve'
+          },
+          tooltip: {
+            format: {
+              name: '',
+              value: (val) => Math.round(val)
+            }
+          }
+        },
+        legend: {
+        },
+        enableScroll: true
+      },
+    };
+  },
+  watch:{
+    pest_order:{
+      handler(val){
+        this.tabs = [];
+        for(let key in val){
+          this.tabs.push({
+            name: key,
+          })
+        }
+        const name = this.tabs[0]?.name;
+        this.currentPest = name;
+        if(this.currentPest){
+          this.getPestNameDetail(name);
+          this.setChartData();
+        }
+      },
+      deep: true
+    },
+    d_id:{
+      handler(val){
+        val && this.setChartData();
+      },
+      deep: true
+    },
+    endDate:{
+      handler(val){
+        val && this.setChartData();
+      },
+      deep: true
+    },
+    day:{
+      handler(){
+        this.initChart();
+      },
+      deep: true,
+      immediate: true
+    },
+  },
+  mounted() {
+    this.cWidth = uni.upx2px(650);
+    this.cHeight = uni.upx2px(400);
+    this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
+  },
+  methods: {
+    async getPestNameDetail(name){
+      try{
+        const res = await this.$myRequest({
+          url: '/api/pest_name_detail',
+          method: 'POST',
+          data: {
+            name
+          },
+        });
+        this.deviceInfo = res
+        this.$emit('getInfo',res)
+      }catch(err){
+        this.$emit('getInfo',{})
+      }
+    },
+    async setChartData(){
+      if(!this.currentPest){
+        return;
+      }
+      if(!this.d_id || !this.endDate){
+        return;
+      }
+     const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.cbd_analysis.pest_predict_time',
+        method: 'POST',
+        data: {
+          model:'B',
+          d_id: this.d_id,
+          year: this.endDate.split('-')[0],
+          pest: this.currentPest,
+        },
+      });
+      this.periodData = {
+        firstDate: res[0][0],
+        peakDate: res[1][0],
+        lastDate: res[2][0],
+      }
+    },
+    initChart() {
+      this.$nextTick(() => {
+        this.updateChartsData(0);
+      });
+    },
+    drawChart(index) {
+      const dayData = this.day || [];
+      this.dayData = dayData;
+      const pestData = this.pest[index];
+      const ctx = uni.createCanvasContext('pestChart', this);
+      chartInstance = new uCharts({
+        context: ctx,
+        type: 'line',
+        fontSize: 11,
+        legend: {
+          show: false
+        },
+        background: '#FFFFFF',
+        pixelRatio: this.pixelRatio,
+        animation: true,
+        dataLabel: false,
+        categories: dayData,
+        series: [{
+          name: '',
+          data: pestData
+        }],
+        color: ['#0085FF'],
+        xAxis: {
+          disableGrid: false,
+          boundaryGap: 'justify',
+          axisLine: true,
+          lineColor: '#CCCCCC',
+          fontColor: '#999999'
+        },
+        yAxis: {
+          min: 0,
+          minInterval: 1,
+          splitNumber: 4,
+          axisLine: true,
+          lineColor: '#CCCCCC',
+          fontColor: '#999999',
+          gridType: 'dash',
+          gridColor: '#E5E5E5'
+        },
+        width: this.cWidth * this.pixelRatio,
+        height: this.cHeight * this.pixelRatio,
+        extra: {
+          line: {
+            type: 'curve',
+            width: 2,
+            activeType: 'hollow'
+          },
+          tooltip: {
+            showBox: true,
+            bgOpacity: 0.7
+          }
+        }
+      });
+    },
+    touchChart(e) {
+      if (chartInstance) {
+        chartInstance.scrollStart(e);
+      }
+    },
+    moveChart(e) {
+      if (chartInstance) {
+        chartInstance.scroll(e);
+      }
+    },
+    touchEndChart(e) {
+      if (chartInstance) {
+        chartInstance.scrollEnd(e);
+        chartInstance.showToolTip(e, {
+          format: function(item, category) {
+            return category + ' ' + item.name + ':' + item.data
+          }
+        });
+      }
+    },
+    switchTab(index) {
+      this.activeTab = index;
+      const name = this.tabs[index]?.name;
+      this.currentPest = name
+      this.getPestNameDetail(name);
+      this.setChartData();
+      this.$nextTick(() => {
+        this.updateChartsData(index);
+      });
+    },
+    updateChartsData(index){
+      const dayData = this.day || [];
+      this.dayData = dayData;
+      const pestData = this.pest[index];
+      const lineData = {
+        categories: dayData,
+        series: [
+          {
+            name: '',
+            data: pestData
+          }
+        ]
+      };
+      
+      this.chartData = lineData;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pest-echart {
+  margin-top: 24rpx;
+  &__header{
+    margin-bottom: 24rpx;
+  }
+}
+
+.tab-list {
+  width: 100%;
+  overflow-x: scroll;
+  white-space: nowrap;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.tab-item {
+  margin-right: 16rpx;
+  font-size: 28rpx;
+  font-family: 'Source Han Sans CN VF', sans-serif;
+  font-weight: 500;
+  color: #999999;
+  display: inline-block;
+  box-sizing: border-box;
+  background: #ffffff;
+  font-family: "Source Han Sans CN VF";
+  font-size: 28rpx;
+  padding: 10rpx 32rpx;
+  border-radius: 8rpx;
+  &:last-child {
+    margin-right: 0;
+  }
+  &.active {
+    color: #0bbc58;
+    font-weight: 700;
+  }
+  &:first-child.active {
+    color: #0bbc58;
+  }
+}
+
+.pest-echart__content {
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 0 32rpx 32rpx;
+}
+
+.period-section {
+  display: flex;
+  justify-content: space-between;
+  padding: 24rpx;
+  background: #ffffff;
+  border-radius: 12rpx;
+}
+
+.period-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.period-label {
+  font-size: 28rpx;
+  color: #303133;
+  font-family: 'Source Han Sans CN VF', sans-serif;
+  font-weight: 700;
+  margin-bottom: 8rpx;
+}
+
+.period-value {
+  font-size: 24rpx;
+  color: #999999;
+  font-family: 'Source Han Sans CN VF', sans-serif;
+  font-weight: 400;
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 400rpx;
+  border-radius: 12rpx;
+}
+
+.charts {
+  width: 100%;
+  height: 100%;
+}
+</style>

pages/bzy2/components/photoImage.vue

@@ -0,0 +1,245 @@
+<template>
+  <view class="photo-image">
+    <view
+      class="photo-image__tabs"
+      v-if="disableShow"
+    >
+      <view
+        class="photo-image__tab"
+        v-for="(pest, index) in pestList"
+        :key="index"
+        :class="{ active: activeIndexList.includes(index) }"
+        @click="changeTab(index)"
+      >
+        <text class="tab-text">{{ pest.pest_name }}({{ pest.pest_num }})</text>
+      </view>
+    </view>
+    <view class="photo-image__content" v-if="images.length">
+      <view class="photo-image__grid">
+        <view class="photo-image__item" v-for="(item, index) in images" :key="index" @click="handleClick(item)">
+          <view class="photo-image__item-img-container">
+            <image
+              class="photo-image__item-img"
+              :src="item.addr"
+              mode="aspectFill"
+            />
+          </view>
+          <view class="photo-image__item-time">
+            {{ formatItemTime(item) }}
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-else>
+      <u-empty text="暂无图片"></u-empty>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props:{
+    disableShow:{
+      type: Boolean,
+      default: true
+    },
+    pestList:{
+      type: Array,
+      default: () => []
+    },
+    images:{
+      type: Array,
+      default: () => []
+    },
+    deviceInfo:{
+      type: Object,
+      default: () => ({})
+    },
+    currentYear:{
+      type: String | Number,
+      default: ''
+    },
+    // 孢子仪2.1（device_code=1）：点击图片带整组图片跳 bzy2/devicePhoto
+    sporeTwo:{
+      type: Boolean,
+      default: false
+    },
+    // 当前选中的文件夹id
+    folderId:{
+      type: [String, Number],
+      default: ''
+    },
+  },
+  data() {
+    return {
+      activeIndexList:[],
+      activePest:[],
+      activeTab: 0,
+      tabs: ['全部', '稻飞虱', '水龟虫', '蝼蛄', '系统','全部', '稻飞虱', '水龟虫', '蝼蛄', '系统'],
+    };
+  },
+  methods: {
+    changeTab(index) {
+      if(this.activeIndexList.includes(index)){
+        this.activePest = this.activePest.filter(item => item !== this.pestList[index])
+        this.activeIndexList = this.activeIndexList.filter(item => item !== index)
+      }else{
+        this.activeIndexList.push(index)
+        this.activePest.push(this.pestList[index])
+      }
+      this.$emit('changeTab', this.activePest)
+    },
+    // 格式化时间
+    formatDate(dateString) {
+      const date = new Date(dateString*1000);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    // 优先取文件名里的拍摄时间（20260905110150z0x0_sharp_1.jpg），孢子仪2.1所有图的addtime都是文件夹时间
+    formatItemTime(item) {
+      const match = String(item.addr || '').match(/(\d{14})/);
+      if (match) {
+        const s = match[1];
+        return `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)} ${s.slice(8, 10)}:${s.slice(10, 12)}:${s.slice(12, 14)}`;
+      }
+      return this.formatDate(item.addtime);
+    },
+    handleClick(item) {
+      if (this.sporeTwo) {
+        // 孢子仪2.1：整组图片放 storage 带过去，详情页本地渲染
+        uni.setStorageSync('bzy_two_folder_imgs', JSON.stringify(this.images || []));
+        uni.navigateTo({
+          url: '/pages/bzy2/devicePhoto?spore_two=1&img_id=' + item?.id + '&addtime=' + item?.addtime + '&fold_id=' + this.folderId + '&id=' + this.deviceInfo.id
+        });
+        return;
+      }
+      uni.navigateTo({
+        url: '/pages/bzy/devicePhoto?device_id=' + item?.device_id + '&addtime=' + item?.addtime + '&img_id=' + item?.id + '&id=' + this.deviceInfo.id + '&currentYear=' + this.currentYear
+      })
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.photo-image {
+  width: 100%;
+  box-sizing: border-box;
+
+  &__header {
+    margin-bottom: 32rpx;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__tabs {
+    box-sizing: border-box;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    // 去掉滚动条
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .photo-image__content{
+    padding: 30rpx;
+    background: #ffffff;
+    border-radius: 16rpx;
+    .photo-image__grid{
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20rpx;
+    }
+  }
+  &__tab {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 16rpx;
+    background: #ffffff;
+    color: #999999;
+    font-family: "Source Han Sans CN VF";
+    font-size: 28rpx;
+    padding: 10rpx 32rpx;
+    border-radius: 8rpx;
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .tab-text {
+      margin-right: 8rpx;
+    }
+
+    .tab-check {
+      color: #4CAF50;
+      font-weight: bold;
+    }
+
+    &.active {
+      color: #0bbc58;
+    }
+
+    .tab-underline {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 4rpx;
+      background: #4CAF50;
+      border-radius: 2rpx;
+    }
+  }
+  &__item {
+    position: relative;
+    width: 100%;
+    padding: 0rpx;
+    box-sizing: border-box;
+    display: inline-block;
+    overflow: hidden;
+    border:2rpx solid #e4e7ed;
+    border-radius: 16rpx;
+    &-img-container {
+      width: 100%;
+      padding-bottom: 100%;
+      position: relative;
+      border-radius: 16rpx;
+      overflow: hidden;
+      background-color: #f5f5f5;
+    }
+
+    &-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &-time {
+      position: absolute;
+      bottom: 0rpx;
+      width: 100%;
+      text-align: center;
+      padding: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-top: 12rpx;
+      font-size: 22rpx;
+      color: #fff;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
+</style>

pages/bzy2/components/photoImage2.vue

@@ -0,0 +1,306 @@
+<template>
+  <view class="photo-image">
+    <view class="photo-tabs">
+      <view class="photo-tab-item" :class="{ active: activeTab === 0 }" @click="changeTabActive(0)">全部</view>
+      <view class="photo-tab-item" :class="{ active: activeTab === 1 }" @click="changeTabActive(1, ding_one_device_id)">{{ ding_one_device_id }}</view>
+      <view class="photo-tab-item" :class="{ active: activeTab === 2 }" @click="changeTabActive(2, ding_two_device_id)">{{ ding_two_device_id }}</view>
+      <view class="photo-tab-item" :class="{ active: activeTab === 3 }" @click="changeTabActive(3, ding_three_device_id)">{{ ding_three_device_id }}</view>
+    </view>
+    <view
+      class="photo-image__tabs"
+      v-if="disableShow"
+    >
+      <view
+        class="photo-image__tab"
+        v-for="(pest, index) in pestList"
+        :key="index"
+        :class="{ active: activeIndexList.includes(index) }"
+        @click="changeTab(index)"
+      >
+        <text class="tab-text">{{ pest.pest_name }}({{ pest.pest_num }})</text>
+      </view>
+    </view>
+    <view class="photo-image__content" v-if="images.length">
+      <view class="photo-image__grid">
+        <view class="photo-image__item" v-for="(item, index) in images" :key="index" @click="handleClick(item)">
+          <view class="photo-image__item-img-container">
+            <image
+              class="photo-image__item-img"
+              :src="getSrc(item)"
+            />
+            <view class="photo-image__item-icon-container">
+              <image
+                v-if="item.has_mark == 1 || item.has_identify == 1"
+                class="photo-image__item-icon"
+                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/ai.png"
+              />
+              <image
+                v-if="item.has_photo == 1"
+                class="photo-image__item-icon-video"
+                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/video.png"
+              />
+              <image
+                v-if="item.has_video == 1"
+                class="photo-image__item-icon-img"
+                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/img.png"
+              />
+            </view>
+          </view>
+          <view class="photo-image__item-title">
+            {{ item.event_id }}
+          </view>
+          <view class="photo-image__item-time">
+            {{ formatDate(item.addtime) }}
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-else>
+      <u-empty text="暂无图片"></u-empty>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props:{
+    disableShow:{
+      type: Boolean,
+      default: true
+    },
+    pestList:{
+      type: Array,
+      default: () => []
+    },
+    images:{
+      type: Array,
+      default: () => []
+    },
+    deviceInfo:{
+      type: Object,
+      default: () => ({})
+    },
+    currentYear:{
+      type: String | Number,
+      default: ''
+    },
+    ding_one_device_id:{
+      type: String,
+      default: ''
+    },
+    ding_three_device_id:{
+      type: String,
+      default: ''
+    },
+    ding_two_device_id:{
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      activeIndexList:[],
+      activePest:[],
+      activeTab: 0,
+      tabs: ['全部', '稻飞虱', '水龟虫', '蝼蛄', '系统','全部', '稻飞虱', '水龟虫', '蝼蛄', '系统'],
+    };
+  },
+  methods: {
+    getSrc(item){
+      return item.photo_list[0]?.addr;
+    },
+    changeTab(index) {
+      if(this.activeIndexList.includes(index)){
+        this.activePest = this.activePest.filter(item => item !== this.pestList[index])
+        this.activeIndexList = this.activeIndexList.filter(item => item !== index)
+      }else{
+        this.activeIndexList.push(index)
+        this.activePest.push(this.pestList[index])
+      }
+      this.$emit('changeTab', this.activePest)
+    },
+    changeTabActive(index, event_id) {
+      this.activeTab = index
+      this.$emit('changeTab', event_id)
+    },
+    // 格式化时间
+    formatDate(dateString) {
+      const date = new Date(dateString*1000);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    handleClick(item) {
+      uni.navigateTo({
+        url: '/pages/shuHai/devicePhoto?device_id=' + item?.device_id + '&addtime=' + item?.addtime + '&id=' + this.deviceInfo.id + '&currentYear=' + this.currentYear + '&event_id=' + item?.event_id
+      })
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.photo-image {
+  width: 100%;
+  box-sizing: border-box;
+  .photo-tabs{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+    border-radius: 16rpx;
+    background: #ffffff;
+    padding: 20rpx;
+    .photo-tab-item{
+      flex:1;
+      font-size: 28rpx;
+      color: #999999;
+      font-family: "Source Han Sans CN VF";
+      font-weight: 400;
+      padding: 0 5px;
+    }
+    .photo-tab-item.active{
+      border-radius: 4px;
+      background: #0BBC58;
+      color: #ffffff;
+      line-height: 46rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  &__header {
+    margin-bottom: 32rpx;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__tabs {
+    box-sizing: border-box;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    // 去掉滚动条
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .photo-image__content{
+    margin-top: 24rpx;
+    .photo-image__grid{
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20rpx;
+    }
+  }
+  &__tab {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 16rpx;
+    background: #ffffff;
+    color: #999999;
+    font-family: "Source Han Sans CN VF";
+    font-size: 28rpx;
+    padding: 10rpx 32rpx;
+    border-radius: 8rpx;
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .tab-text {
+      margin-right: 8rpx;
+    }
+
+    .tab-check {
+      color: #4CAF50;
+      font-weight: bold;
+    }
+
+    &.active {
+      color: #0BBC58;
+    }
+
+    .tab-underline {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 4rpx;
+      background: #4CAF50;
+      border-radius: 2rpx;
+    }
+  }
+  &__item {
+    border-radius: 16rpx;
+    padding: 20rpx;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    display: inline-block;
+    overflow: hidden;
+    background: #ffffff;
+    &-img-container {
+      width: 100%;
+      padding-bottom: 60%;
+      position: relative;
+      border-radius: 16rpx;
+      overflow: hidden;
+      background-color: #f5f5f5;
+    }
+    .photo-image__item-icon-container{
+      position: absolute;
+      display: flex;
+      gap: 4rpx;
+      top: 8rpx;
+      left: 8rpx;
+      width: 100%;
+      height: 100%;
+    }
+    &-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    &-icon {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    &-icon-video {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    &-icon-img {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    &-title {
+      font-size: 28rpx;
+      color: #333333;
+      font-family: "Source Han Sans CN VF";
+      font-weight: 500;
+      margin-top: 12rpx;
+    }
+    &-time {
+      width: 100%;
+      padding: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-top: 12rpx;
+      font-size: 22rpx;
+      color: #666666;
+    }
+  }
+}
+</style>

pages/bzy2/deviceControl.vue

@@ -0,0 +1,833 @@
+<template>
+  <view class="device-detail">
+    <view class="device-detail__header">
+      <u-icon
+        size="36"
+        class="arrow-left"
+        name="arrow-left"
+        @click="handleBack"
+      ></u-icon>
+      {{ title }}
+    </view>
+    <view class="device-detail__body">
+      <view class="tabs">
+        <view class="tab-container">
+          <view class="tab-item" v-if="myuser_type" :class="activeTab === 'pestAnalysis'?'active':''" @click="handleTabClick('pestAnalysis')">
+            管理员
+          </view>
+          <view class="tab-item" :class="activeTab === 'viewImage'?'active':''" @click="handleTabClick('viewImage')">
+            设置
+          </view>
+        </view>
+      </view>
+      <view class="device-detail-content" v-if="activeTab === 'pestAnalysis'">
+        <view class="device-detail-item">
+          <text class="device-detail-label">联网模块</text>
+          <view class="device-detail-btn-container">
+            <view class="device-detail-btn" @click="setDeviceContorl('dtu_update')">升级</view>
+            <view class="device-detail-btn" @click="setDeviceContorl('dtu_reboot')">重启</view>
+            <!-- <view class="device-detail-btn" @click="showMqttConfig">MQTT配置</view> -->
+            <view class="device-detail-btn" @click="setDeviceContorl('yfwlw')">平台切换</view>
+          </view>
+        </view>
+        <view class="device-detail-item">
+          <text class="device-detail-label">板子设置</text>
+          <view class="device-detail-btn-container">
+            <!-- <view class="device-detail-btn">查看原始IMEI</view> -->
+            <view class="device-detail-btn" @click="showMqttConfig('imei')">更改IMEI</view>
+          </view>
+        </view>
+        <view class="device-detail-item">
+          <text class="device-detail-label">强制操作</text>
+          <view class="device-detail-btn-container">
+            <view class="device-detail-btn force-btn" @click="setDeviceContorl('update')">升级</view>
+            <view class="device-detail-btn force-btn" @click="setDeviceContorl('reboot')">重启</view>
+            <view class="device-detail-btn force-btn" @click="setDeviceContorl('takephoto')">立即拍照</view>
+            <view class="device-detail-btn force-btn" @click="setDeviceContorl('autotakephoto')">对焦拍照</view>
+            <view class="device-detail-btn force-btn" @click="setDeviceContorl('turn')">转仓</view>
+          </view>
+        </view>
+      </view>
+      <view class="device-detail-content" style="padding-bottom: 50rpx" v-if="activeTab === 'viewImage'">
+        <view class="device-detail-viewImage">
+          <u-icon name="clock" color="#0bbc58" size="46"></u-icon>
+          <text class="device-detail-label" style="margin-left: 10rpx">
+            采集开始和关闭时间
+          </text>
+          <view class="clear-btn" @click="clearTime">清空</view>
+        </view>
+        <view class="time-container" v-for="(item,index) in coll_time" :key="index">
+          <view class="start-time" @click="showPickerHandler(index,'start_time')">{{item.start_time_label || '开始时间'}}</view>-
+          <view class="end-time" @click="showPickerHandler(index,'end_time')">{{item.end_time_label || '结束时间'}}
+          </view><u-icon name="clock" color="#4E5969" size="26" style="padding-right: 20rpx"></u-icon>
+        </view>
+        <view class="device-detail-viewImage">
+          <text class="device-detail-label">高温保护阀值(℃) {{ sliderField === 'tph' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tph }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">50</view>
+          <view
+            class="custom-progress"
+            @touchstart.stop="onSliderTouchStart($event, 'tph', 50, 70, 1)"
+            @touchmove.stop.prevent="onSliderTouchMove($event, 50, 70, 1)"
+            @touchend.stop="onSliderTouchEnd"
+            @tap.stop="onSliderTap($event, 'tph', 50, 70, 1)"
+          >
+            <view class="progress-track">
+              <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'tph' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tph, 50, 70) + '%' }"></view>
+              <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'tph' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tph, 50, 70) + '%' }"></view>
+            </view>
+          </view>
+          <view class="slider-max-value">70</view>
+        </view>
+        <view class="device-detail-viewImage" v-if="device_model == 0">
+          <text class="device-detail-label">载玻片滴液时间(h) {{ sliderField === 'drop_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.drop_time }}</text>
+        </view>
+        <view class="slider-container" v-if="device_model == 0">
+          <view class="slider-min-value">1</view>
+          <view
+            class="custom-progress"
+            @touchstart.stop="onSliderTouchStart($event, 'drop_time', 1, 30, 1)"
+            @touchmove.stop.prevent="onSliderTouchMove($event, 1, 30, 1)"
+            @touchend.stop="onSliderTouchEnd"
+            @tap.stop="onSliderTap($event, 'drop_time', 1, 30, 1)"
+          >
+            <view class="progress-track">
+              <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'drop_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.drop_time, 1, 30) + '%' }"></view>
+              <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'drop_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.drop_time, 1, 30) + '%' }"></view>
+            </view>
+          </view>
+          <view class="slider-max-value">30</view>
+        </view>
+        <view class="device-detail-viewImage" v-if="device_model == 0">
+          <text class="device-detail-label">孢子培养时间(h) {{ sliderField === 'cul_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.cul_time }}</text>
+        </view>
+        <view class="slider-container" v-if="device_model == 0">
+          <view class="slider-min-value">1</view>
+          <view
+            class="custom-progress"
+            @touchstart.stop="onSliderTouchStart($event, 'cul_time', 1, 24, 1)"
+            @touchmove.stop.prevent="onSliderTouchMove($event, 1, 24, 1)"
+            @touchend.stop="onSliderTouchEnd"
+            @tap.stop="onSliderTap($event, 'cul_time', 1, 24, 1)"
+          >
+            <view class="progress-track">
+              <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'cul_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.cul_time, 1, 24) + '%' }"></view>
+              <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'cul_time' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.cul_time, 1, 24) + '%' }"></view>
+            </view>
+          </view>
+          <view class="slider-max-value">24</view>
+        </view>
+        <view class="device-detail-viewImage" v-if="device_model == 0">
+          <text class="device-detail-label">保温仓设定温度(℃) {{ sliderField === 'set_temp' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.set_temp }}</text>
+        </view>
+        <view class="slider-container" v-if="device_model == 0">
+          <view class="slider-min-value">10</view>
+          <view
+            class="custom-progress"
+            @touchstart.stop="onSliderTouchStart($event, 'set_temp', 10, 40, 1)"
+            @touchmove.stop.prevent="onSliderTouchMove($event, 10, 40, 1)"
+            @touchend.stop="onSliderTouchEnd"
+            @tap.stop="onSliderTap($event, 'set_temp', 10, 40, 1)"
+          >
+            <view class="progress-track">
+              <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'set_temp' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.set_temp, 10, 40) + '%' }"></view>
+              <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'set_temp' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.set_temp, 10, 40) + '%' }"></view>
+            </view>
+          </view>
+          <view class="slider-max-value">40</view>
+        </view>
+        <view class="device-detail-viewImage">
+          <text class="device-detail-label">低温保护阀值(℃) {{ sliderField === 'tpl' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tpl }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">-30</view>
+          <view
+            class="custom-progress"
+            @touchstart.stop="onSliderTouchStart($event, 'tpl', -30, 20, 1)"
+            @touchmove.stop.prevent="onSliderTouchMove($event, -30, 20, 1)"
+            @touchend.stop="onSliderTouchEnd"
+            @tap.stop="onSliderTap($event, 'tpl', -30, 20, 1)"
+          >
+            <view class="progress-track">
+              <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'tpl' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tpl, -30, 20) + '%' }"></view>
+              <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'tpl' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.tpl, -30, 20) + '%' }"></view>
+            </view>
+          </view>
+          <view class="slider-max-value">20</view>
+        </view>
+        <!-- 滤网更换周期：仅孢子仪2.1（device_code=1）支持 -->
+        <view class="device-detail-viewImage" v-if="device_code == 1">
+          <text class="device-detail-label">滤网更换周期(天) {{ sliderField === 'freq_filter' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.freq_filter }}</text>
+        </view>
+        <view class="slider-container" v-if="device_code == 1">
+          <view class="slider-min-value">1</view>
+          <view
+            class="custom-progress"
+            @touchstart.stop="onSliderTouchStart($event, 'freq_filter', 1, 30, 1)"
+            @touchmove.stop.prevent="onSliderTouchMove($event, 1, 30, 1)"
+            @touchend.stop="onSliderTouchEnd"
+            @tap.stop="onSliderTap($event, 'freq_filter', 1, 30, 1)"
+          >
+            <view class="progress-track">
+              <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'freq_filter' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.freq_filter, 1, 30) + '%' }"></view>
+              <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'freq_filter' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.freq_filter, 1, 30) + '%' }"></view>
+            </view>
+          </view>
+          <view class="slider-max-value">30</view>
+        </view>
+        <view class="device-detail-viewImage">
+          <text class="device-detail-label">数据上传间隔(min) {{ sliderField === 'datt' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.datt }}</text>
+        </view>
+        <view class="slider-container">
+          <view class="slider-min-value">10</view>
+          <view
+            class="custom-progress"
+            @touchstart.stop="onSliderTouchStart($event, 'datt', 10, 60, 10)"
+            @touchmove.stop.prevent="onSliderTouchMove($event, 10, 60, 10)"
+            @touchend.stop="onSliderTouchEnd"
+            @tap.stop="onSliderTap($event, 'datt', 10, 60, 10)"
+          >
+            <view class="progress-track">
+              <view class="progress-fill" :style="{ width: getProgressWidth(sliderField === 'datt' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.datt, 10, 60) + '%' }"></view>
+              <view class="progress-thumb" :style="{ left: getProgressWidth(sliderField === 'datt' && sliderDragValue !== null ? sliderDragValue : equipContrlForm.datt, 10, 60) + '%' }"></view>
+            </view>
+          </view>
+          <view class="slider-max-value">60</view>
+        </view>
+      </view>
+    </view>
+    <view class="device-detail-btn-footer" v-if="activeTab === 'viewImage'">
+      <view class="device-detail-btn" @click="saveSettings">保存</view>
+    </view>
+    <u-popup v-model="show" mode="bottom">
+      <view class="device-detail-content" style="height: 50vh">
+        <view class="device-detail-item">
+          <text class="device-detail-label">请输入imei</text>
+          <u-input v-model="equipContrlForm.imei" placeholder="请输入imei"></u-input>
+        </view>
+      </view>
+      <view class="device-detail-btn-footer">
+        <view class="device-detail-btn" @click="setDeviceContorl('imei')">保存</view>
+      </view>
+		</u-popup>
+		<u-select v-model="showPicker" :list="timeList" @confirm="confirmPicker"></u-select>
+  </view>
+</template>
+<script>
+
+export default {
+  data(){
+    return {
+      showPicker: false,
+      value: 10,
+      timeList: [],
+      imageList: [],
+      coll_time:[{
+        start_time: '',
+        start_time_label: '',
+        end_time: '',
+        end_time_label: '',
+      },{
+        start_time: '',
+        start_time_label: '',
+        end_time: '',
+        end_time_label: '',
+      },{
+        start_time: '',
+        start_time_label: '',
+        end_time: '',
+        end_time_label: '',
+      }],
+      equipContrlForm: {},
+      time: '',
+      activeTab: 'pestAnalysis',
+      myuser_type: false,
+      title: '设置控制',
+      deviceType: '',
+      location: '',
+      d_id: '',
+      show: false,
+      checked: false,
+      currentIndex: -1,
+      currentType: '',
+      sliderDragValue: null,
+      sliderRect: null,
+      sliderField: '',
+      sliderMin: 0,
+      sliderMax: 100,
+      device_model: '',
+      device_code: '',
+      sliderStep: 1
+    }
+  },
+  onLoad(options){
+    this.d_id = options.d_id;
+    this.device_model = options.device_model;
+    this.device_code = options.device_code || '';
+    this.getControlDeviceConfigInfo();
+    this.timeList = [];
+    for(let i = 0;i<24;i++){
+      this.timeList.push({
+        value:i,
+        label:i < 10 ? '0' + i + ':00' : i + ':00'
+      })
+    }
+    uni.getStorage({
+      key:"myuser_type",
+      success:(res)=>{
+        if(Number(res.data) == 1){
+          this.myuser_type = true
+          this.activeTab = 'pestAnalysis'
+        }else{
+          this.activeTab = 'viewImage'
+          this.$nextTick(() => {
+            this.cacheSliderRect()
+          })
+        }
+      }
+    })
+  },
+  methods: {
+    getProgressWidth(value, min, max) {
+      if (max === min) return 0
+      return ((value - min) / (max - min)) * 100
+    },
+    cacheSliderRect() {
+      const query = uni.createSelectorQuery().in(this)
+      query.select('.custom-progress').boundingClientRect(rect => {
+        if (rect) {
+          this.sliderRect = rect
+        }
+      }).exec()
+    },
+    onSliderTouchStart(e, field, min, max, step) {
+      this.sliderField = field
+      this.sliderMin = min
+      this.sliderMax = max
+      this.sliderStep = step || 1
+      this._lastUpdateTime = 0
+      this._touchX = e.touches[0].clientX
+      if (!this.sliderRect) {
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.custom-progress').boundingClientRect(rect => {
+          this.sliderRect = rect
+          this._applyDragValue(e.touches[0].clientX)
+        }).exec()
+      } else {
+        this._applyDragValue(e.touches[0].clientX)
+      }
+    },
+    onSliderTouchMove(e, min, max, step) {
+      if (!this.sliderField || !this.sliderRect) return
+      this._touchX = e.touches[0].clientX
+      const now = Date.now()
+      if (now - this._lastUpdateTime < 33) return
+      this._lastUpdateTime = now
+      this._applyDragValue(e.touches[0].clientX)
+    },
+    onSliderTouchEnd(e) {
+      const clientX = (e.changedTouches && e.changedTouches[0])
+        ? e.changedTouches[0].clientX
+        : this._touchX
+      if (this.sliderField && this.sliderRect && clientX != null) {
+        const ratio = Math.max(0, Math.min(1,
+          (clientX - this.sliderRect.left) / this.sliderRect.width))
+        const value = this._snapToStep(Math.round(this.sliderMin + ratio * (this.sliderMax - this.sliderMin)))
+        this.$set(this.equipContrlForm, this.sliderField, value)
+      }
+      this.sliderField = ''
+      this.sliderDragValue = null
+      this._lastUpdateTime = 0
+      this._touchX = 0
+    },
+    onSliderTap(e, field, min, max, step) {
+      const snap = step || 1
+      const apply = (rect) => {
+        const ratio = Math.max(0, Math.min(1, e.detail.x / rect.width))
+        const raw = Math.round(min + ratio * (max - min))
+        const snapped = Math.round((raw - min) / snap) * snap + min
+        this.$set(this.equipContrlForm, field, Math.max(min, Math.min(max, snapped)))
+      }
+      if (!this.sliderRect) {
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.custom-progress').boundingClientRect(rect => {
+          this.sliderRect = rect
+          apply(rect)
+        }).exec()
+      } else {
+        apply(this.sliderRect)
+      }
+    },
+    _applyDragValue(clientX) {
+      const ratio = Math.max(0, Math.min(1,
+        (clientX - this.sliderRect.left) / this.sliderRect.width))
+      const raw = Math.round(this.sliderMin + ratio * (this.sliderMax - this.sliderMin))
+      this.sliderDragValue = this._snapToStep(raw)
+    },
+    _snapToStep(value) {
+      const step = this.sliderStep || 1
+      const snapped = Math.round((value - this.sliderMin) / step) * step + this.sliderMin
+      return Math.max(this.sliderMin, Math.min(this.sliderMax, snapped))
+    },
+    clearTime(){
+      this.coll_time.forEach(item => {
+        item.start_time = '';
+        item.start_time_label = '';
+        item.end_time = '';
+        item.end_time_label = '';
+      })
+    },
+    confirmPicker(e){
+      const value = e[0].value;
+      const label = e[0].label;
+      if(this.currentType == 'end_time'){
+        if(this.coll_time[this.currentIndex]['start_time'] > value){
+          uni.showToast({
+            title: '结束时间不能早于开始时间',
+            icon: 'none',
+          })
+          return
+        }
+      }
+      if(this.currentType == 'start_time' && this.currentIndex > 0){
+        if(this.coll_time[this.currentIndex-1]['end_time'] > value){
+          uni.showToast({
+            title: '开始时间不能早于前面采集时间的结束时间',
+            icon: 'none',
+          })
+          return
+        }
+      }
+      if(this.currentType == 'start_time' && this.coll_time[this.currentIndex]['end_time'] !== ''){
+        if(value > this.coll_time[this.currentIndex]['end_time']){
+          uni.showToast({
+            title: '开始时间不能晚于结束时间',
+            icon: 'none',
+          })
+          return
+        }
+      }
+      this.coll_time[this.currentIndex][this.currentType] = value;
+      this.coll_time[this.currentIndex][this.currentType + '_label'] = label;
+    },
+    showPickerHandler(index,type){
+      if(type == 'end_time'){
+        if(this.coll_time[index]['start_time'] === ''){
+          uni.showToast({
+            title: '请先选择开始时间',
+            icon: 'none',
+          })
+          return
+        }
+      }
+      if(index != 0){
+        if(this.coll_time[index-1]['start_time_label'] === '' || this.coll_time[index-1]['end_time_label'] === ''){
+          uni.showToast({
+            title: '请先选择前面采集时间的开始和结束时间',
+            icon: 'none',
+          })
+          return
+        }
+      }
+      this.showPicker = true;
+      this.currentIndex = index
+      this.currentType = type
+    },
+    closePicker(){
+      this.showPicker = false;
+      this.currentType = ''
+      this.currentIndex = -1
+    },
+    handleBack() {
+      uni.navigateBack({
+        delta: 1
+      });
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab;
+      if (tab === 'viewImage') {
+        this.$nextTick(() => {
+          this.cacheSliderRect()
+        })
+      }
+    },
+    showMqttConfig(){
+      this.show = true;
+    },
+    closeMqttConfig(){
+      this.show = false;
+    },
+    async setDeviceContorl(type){
+      const data = {
+        device_type_id: 7,
+        d_id: this.d_id,
+        cmd: type,
+      }
+      if(type === 'imei'){
+        data.imei = this.equipContrlForm.imei
+      }else{
+        delete data.imei
+      }
+      this.$myRequest({
+        url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
+        method: 'POST',
+        data
+      }).then(res => {
+        this.closeMqttConfig()
+        if (res) {
+          uni.showToast({
+            title: '设备控制修改成功！',
+            icon: 'success',
+          });
+        } else {
+          uni.showToast({
+            title: '设备控制修改失败',
+            icon: 'error',
+          });
+        }
+      });
+    },
+    saveSettings(){
+      let newForm = Object.assign({}, this.equipContrlForm) // 深拷贝
+      // newForm.st = newForm.st + ''
+      // newForm.et = newForm.et + ''
+      // newForm.st && newForm.st.slice(0, 2).charAt(0) != '0'
+      //   ? newForm.st.slice(0, 2)
+      //   : newForm.st.slice(1, 2)
+      // newForm.et =
+      //   newForm.et && newForm.et.slice(0, 2).charAt(0) != '0'
+      //     ? newForm.et.slice(0, 2)
+      //     : newForm.et.slice(1, 2)
+
+      for (let k in newForm) {
+        if (typeof newForm[k] === 'number') {
+          newForm[k] = newForm[k] + ''
+        }
+      }
+      // newForm.st = newForm.st.replace(':00', '')
+      console.log(this.coll_time,'coll_timecoll_timecoll_time')
+      const coll_time = [];
+      for(let i = 0;i< this.coll_time.length;i++){
+        const coll_item = this.coll_time[i];
+        if(String(coll_item.start_time) && String(coll_item.end_time)){
+          coll_time.push(String(coll_item.start_time) + '-' + String(coll_item.end_time))
+        }
+      }
+      newForm.coll_time = coll_time
+      newForm.admin = Number(newForm.admin);
+      newForm.drop_time = Number(newForm.drop_time);
+      newForm.cul_time = Number(newForm.cul_time);
+      newForm.set_temp = Number(newForm.set_temp);
+      newForm.datt = Number(newForm.datt);
+      newForm.cold_sw = Number(newForm.cold_sw);
+      newForm.on_off = Number(newForm.on_off);
+      newForm.tpl = Number(newForm.tpl);
+      newForm.tph = Number(newForm.tph);
+      newForm.freq_filter = Number(newForm.freq_filter);
+      if(this.device_model == 0){
+        delete newForm.tpl
+        delete newForm.tph
+      }
+      // 滤网更换周期仅孢子仪2.1（device_code=1）支持
+      if(this.device_code == 1){
+        newForm.freq_filter = Number(newForm.freq_filter);
+      }else{
+        delete newForm.freq_filter
+      }
+      this.$myRequest({
+        url: '/api/api_gateway?method=forecast.send_control.device_control',
+        method: 'POST',
+        data: {
+          device_type_id: 7,
+          d_id: this.d_id,
+          config: JSON.stringify(newForm)
+        }
+      }).then(res => {
+        if (res) {
+          // 设备控制修改成功
+          uni.showToast({
+            title: '设备控制修改成功！',
+            icon: 'success',
+          });
+        } else {
+          uni.showToast({
+            title: '设备控制修改失败',
+            icon: 'error',
+          });
+        }
+      })
+    },
+    async getControlDeviceConfigInfo(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.send_control.device_control_info',
+        method: 'POST',
+        data: {
+          d_id: this.d_id,
+          cmd:'paramconf'
+        },
+      });
+      this.equipContrlForm = res
+      // 2.1 设备的滤网更换周期缺省按 1 天显示
+      if(this.device_code == 1){
+        this.equipContrlForm.freq_filter = parseInt(this.equipContrlForm.freq_filter || 1);
+      }
+      const coll_time = res?.coll_time || [];
+      for(let i = 0;i< coll_time.length;i++){
+        const coll_item = coll_time[i];
+        const start_time = coll_item.split('-')[0];
+        const end_time = coll_item.split('-')[1];
+        this.coll_time[i]['start_time'] = start_time;
+        this.coll_time[i]['end_time'] = end_time;
+        this.coll_time[i]['start_time_label'] = start_time >= 10 ? start_time + ':00' : '0' + start_time + ':00';
+        this.coll_time[i]['end_time_label'] = end_time >= 10 ? end_time + ':00' : '0' + end_time + ':00';
+      }
+      console.log(this.coll_time,'coll_timecoll_timecoll_time')
+      this.equipContrlForm.tph = Number(this.equipContrlForm.tph || 50)
+      this.equipContrlForm.tpl = Number(this.equipContrlForm.tpl || 0)
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.device-detail {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 112rpx);
+  padding-top: 112rpx;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
+  .device-detail__header {
+    width: 100%;
+    font-size: 28rpx;
+    color: #999;
+    color: #042118;
+    font-family: 'Source Han Sans CN VF';
+    font-weight: 700;
+    position: relative;
+    text-align: center;
+    .arrow-left {
+      position: absolute;
+      left: 32rpx;
+      margin-right: 12rpx;
+    }
+  }
+  .time-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #999999;
+    border-radius: 8rpx;
+    background:#F6F8FC;
+    gap: 12rpx;
+    .start-time{
+      width: 250rpx;
+      height: 50rpx;
+      line-height: 50rpx;
+      text-align: left;
+      font-size: 24rpx;
+      color: #999999;
+      font-family: 'Source Han Sans CN VF';
+      border-radius: 16rpx;
+      padding: 0 24rpx;
+    }
+    .end-time{
+      width: 200rpx;
+      height: 50rpx;
+      line-height: 50rpx;
+      text-align: left;
+      font-size: 24rpx;
+      color: #999999;
+      font-family: 'Source Han Sans CN VF';
+      border-radius: 16rpx;
+      padding: 0 24rpx;
+    }
+  }
+  .device-detail__body {
+    width: calc(100% - 64rpx);
+    margin: 0 auto;
+    border-radius: 16rpx;
+    overflow-x: hidden;
+    overflow-y: auto;
+    // 隐藏滚动条
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .tabs {
+    margin: 24rpx 0;
+    border-radius: 16rpx;
+    padding: 16rpx 0;
+    padding-top: 0;
+    .tab-container{
+      display: flex;
+      width: 100%;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      font-size: 28rpx;
+      color: #042118;
+      font-family: 'Source Han Sans CN VF';
+    }
+    .tab-item {
+      margin-right: 40rpx;
+      color:#999999;
+    }
+    .active{
+      position: relative;
+      color: #0bbc58;
+      text-align: center;
+      font-family: "Source Han Sans CN VF";
+      font-size: 28rpx;
+      font-weight: 700;
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 10rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        height: 36rpx;
+        border-bottom: 6rpx solid #0bbc58;
+      }
+    }
+  }
+  .slider-container{
+    position: relative;
+    margin-bottom: 20rpx;
+    .slider-min-value{
+      position: absolute;
+      left: 0;
+      top: -50rpx;
+    }
+    .slider{
+      width: 600rpx;
+    }
+    .slider-max-value{
+      position: absolute;
+      right: 0;
+      top: -50rpx;
+    }
+  }
+  .custom-progress{
+    width: 600rpx;
+    padding: 0;
+    .progress-track{
+      position: relative;
+      height: 12rpx;
+      background-color: #ebedf0;
+      border-radius: 6rpx;
+    }
+    .progress-fill{
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background-color: #0BBC58;
+      border-radius: 6rpx;
+    }
+    .progress-thumb{
+      position: absolute;
+      top: 50%;
+      width: 28rpx;
+      height: 28rpx;
+      margin-left: -14rpx;
+      margin-top: -14rpx;
+      border-radius: 50%;
+      background-color: #fff;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+    }
+  }
+  .device-detail-content{
+    display: flex;
+    padding: 24rpx 32rpx;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20rpx;
+    border-radius: 16rpx;
+    background: #FFF;
+    .device-detail-item{
+      .device-detail-label{
+        color: #303133;
+        font-family: "Source Han Sans CN VF";
+        font-size: 28rpx;
+        font-weight: 400;
+      }
+      .device-detail-btn-container{
+        display: flex;
+        gap: 24rpx;
+        margin-top: 12rpx;
+      }
+      .device-detail-btn{
+        display: flex;
+        padding: 10rpx 16rpx;
+        justify-content: center;
+        align-items: center;
+        gap: 16rpx;
+        border-radius: 16rpx;
+        background: #0bbc58;
+        color: #ffffff;
+        font-family: "Source Han Sans CN VF";
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+      .force-btn{
+        background: #FB4E52;
+      }
+    }
+    .device-detail-viewImage{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      padding-bottom: 20rpx;
+      position: relative;
+      .clear-btn{
+        position: absolute;
+        right: 0rpx;
+        border: 1rpx solid #0bbc58;
+        border-radius: 8rpx;
+        padding: 4rpx 12rpx;
+        font-size: 24rpx;
+        color: #0bbc58;
+        font-family: 'Source Han Sans CN VF';
+        font-weight: 400;
+      }
+    }
+  }
+  .device-detail-btn-footer{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 112rpx;
+    line-height: 112rpx;
+    text-align: center;
+    font-size: 28rpx;
+    font-weight: 700;
+    color: #042118;
+    font-family: 'Source Han Sans CN VF';
+    background: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .device-detail-btn{
+      display: flex;
+      height: 80rpx;
+      width: 90%;
+      margin: 0 auto;
+      padding: 0rpx 20rpx;
+      justify-content: center;
+      align-items: center;
+      gap: 8rpx;
+      border-radius: 16rpx;
+      background:#0bbc58;
+      color: #ffffff;
+      text-align: center;
+      font-family: "Source Han Sans CN VF";
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+    }
+  }
+}
+</style>

pages/equipList2/index.vue

@@ -863,10 +863,14 @@ import { wgs84togcj02, bd09togcj02 } from '../../util/coordtransform_utils.js';
 						// uni.navigateTo({
 						// 	url: '../bzy/detail?info=' + JSON.stringify(item),
 						// });
-						if(item.pur_id !== 307){
+						if(item.pur_id == 39 || item.pur_id == 300){
 							uni.navigateTo({
 								url: '../bzy/detail?info=' + JSON.stringify(item),
 							});
+						}else if(item.pur_id == 307){
+							uni.navigateTo({
+								url: '../bzy2/detail?info=' + JSON.stringify(item) + '&device_code=' + (item.device_code || ''),
+							});
 						}else{
 							uni.navigateTo({
 								url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
@@ -1042,13 +1046,20 @@ import { wgs84togcj02, bd09togcj02 } from '../../util/coordtransform_utils.js';
 							url: '../cb/xylps/detail?detail=' + JSON.stringify(item),
 						});
 						break;
-					// case 31:
-					// 	item.addtime = item.uptime;
-					// 	item.type = item.type_id;
-					// 	uni.navigateTo({
-					// 		url: '../shuHai/detail?info=' + JSON.stringify(item),
-					// 	});
-					// 	break;
+					case 51:
+						item.addtime = item.uptime;
+						item.type = item.type_id;
+						uni.navigateTo({
+							url: '../shuHai/detail?info=' + JSON.stringify(item),
+						});
+						break;
+					case 31:
+						item.addtime = item.uptime;
+						item.type = item.type_id;
+						uni.navigateTo({
+							url: '../shuHai1/detail?info=' + JSON.stringify(item),
+						});
+						break;
 					case 40:
 						item.addtime = item.uptime;
 						uni.navigateTo({

pages/shuHai/components/deviceData.vue

@@ -24,38 +24,20 @@
       <view class="main-data-panel">
         <view class="data-column-left">
           <view class="data-item">
-            <text class="data-value">{{ deviceStatic.vol }}</text>
-            <text class="data-label">电量</text>
+            <text class="data-value">{{ deviceStatus.Battery1 }}</text>
+            <text class="data-label">电池电压(V)</text>
           </view>
           <view class="data-item">
-            <text class="data-value">{{ deviceStatic.gs == 1? '落虫' : '排水' }}</text>
-            <text class="data-label">通道状态</text>
+            <text class="data-value">{{ deviceStatus.D_Temperature }}</text>
+            <text class="data-label">环境温度(°C)</text>
           </view>
           <view class="data-item">
-            <text class="data-value">{{ deviceStatic.upds == 1? '打开' : '关闭' }}</text>
-            <text class="data-label">上仓门</text>
+            <text class="data-value">{{ deviceStatus.D_Humidity }}</text>
+            <text class="data-label">环境湿度(%)</text>
           </view>
           <view class="data-item">
-            <text class="data-value">{{ deviceStatic.tph || '' }}℃</text>
-            <text class="data-label">高温限值</text>
-          </view>
-        </view>
-        <view class="data-column-left">
-          <view class="data-item">
-            <text class="data-value">{{ deviceStatic.tmod == '1' ? '时控' : '光控' }}</text>
-            <text class="data-label">定时模式</text>
-          </view>
-          <view class="data-item">
-            <text class="data-value">{{ deviceStatic.hs == '1' ? '加热' : '正常' }}</text>
-            <text class="data-label">加热状态</text>
-          </view>
-          <view class="data-item">
-            <text class="data-value">{{ deviceStatic.dpds == '1' ? '打开' : '关闭' }}</text>
-            <text class="data-label">下仓门</text>
-          </view>
-          <view class="data-item">
-            <text class="data-value">{{ deviceStatic.dver }}</text>
-            <text class="data-label">设备版本</text>
+            <text class="data-value">{{ deviceStatus.addtimeText }}</text>
+            <text class="data-label">上报时间</text>
           </view>
         </view>
         <view class="data-column-right">
@@ -119,16 +101,12 @@
             <view class="scrollable-header">
               <text class="header-cell">环境温度(°C)</text>
               <text class="header-cell">环境湿度(%)</text>
-              <text class="header-cell">加热仓温度(°C)</text>
-              <text class="header-cell">雨控状态</text>
-              <text class="header-cell">温控状态</text>
-              <text class="header-cell">光控状态</text>
-              <text class="header-cell">灯管状态</text>
-              <text class="header-cell">信号强度</text>
-              <text class="header-cell">电流(mA)</text>
-              <text class="header-cell">电压(V)</text>
-              <text class="header-cell">经度</text>
-              <text class="header-cell">纬度</text>
+              <text class="header-cell cell-wide">设备PID</text>
+              <text class="header-cell cell-wide">设备IP</text>
+              <text class="header-cell">电池电压(V)</text>
+              <text class="header-cell">内存</text>
+              <text class="header-cell">低电预警电压(V)</text>
+              <text class="header-cell">关机保护电压(V)</text>
             </view>
             <view class="scrollable-body">
               <view
@@ -136,30 +114,14 @@
                 :key="index"
                 class="scrollable-row"
               >
-                <view class="body-cell">{{ item.at }}</view>
-                <view class="body-cell">{{ item.ah }}</view>
-                <view class="body-cell">{{ item.hrt }}</view>
-                <view class="body-cell">
-                  <view class="status-icon" :class="item.rps == 0 ? 'success-icon' : 'status-icon'"></view>
-                  {{ getRpsDict(item) }}
-                </view>
-                <view class="body-cell">
-                  <view class="status-icon" :class="item.tps == 0 ? 'success-icon' : 'status-icon'"></view>
-                  {{ getTpsDict(item) }}
-                </view>
-                <view class="body-cell">
-                  <view class="status-icon" :class="item.lps == 0 ? 'success-icon' : 'status-icon'"></view>
-                  {{ getLpsDict(item) }}
-                </view>
-                <view class="body-cell">
-                  <view class="status-icon" :class="item.ws == 0 ? 'warning-icon' : item.lamp == 0 ? 'success-icon':item.lamp == 1 ? 'error-icon':'status-icon'"></view>
-                  {{ getStateDict(item) }}
-                </view>
-                <view class="body-cell">{{ item.csq }}</view>
-                <view class="body-cell">{{ item.current }}</view>
-                <view class="body-cell">{{ item.vbat }}</view>
-                <view class="body-cell">{{ item.lng }}</view>
-                <view class="body-cell">{{ item.lat }}</view>
+                <view class="body-cell">{{ item.D_Temperature }}</view>
+                <view class="body-cell">{{ item.D_Humidity }}</view>
+                <view class="body-cell cell-wide">{{ item.PID }}</view>
+                <view class="body-cell cell-wide">{{ item.IP }}</view>
+                <view class="body-cell">{{ item.Battery1 }}</view>
+                <view class="body-cell">{{ item.Memory }}</view>
+                <view class="body-cell">{{ item.Low_PWR_Val }}</view>
+                <view class="body-cell">{{ item.Loff_PWR_Val }}</view>
               </view>
             </view>
           </view>
@@ -203,9 +165,9 @@
             <text class="sim-value"><text style="color: #0BBC58">{{ deviceInfoStatic.used || ''}}</text>/{{ deviceInfoStatic.total || '' }}</text>
           </view>
           <view class="sim-item">
-            <text class="sim-value">
+            <view class="sim-value">
               <u-line-progress active-color="#0BBC58" :percent="deviceInfoStatic.used / deviceInfoStatic.total * 100" :show-percent="false"></u-line-progress>
-            </text>
+            </view>
           </view>
         </view>
         <view class="sim-container" v-if="activeTab === 1">
@@ -262,10 +224,6 @@ export default {
       type:Object,
       default:()=>({}),
     },
-    deviceStatic:{
-      type:Object,
-      default:()=>({}),
-    },
     polylineList:{
       type:Array,
       default:()=>[],
@@ -297,9 +255,8 @@ export default {
       editBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/editBorder.png',
       settingBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/settingBorder.png',
       simBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/simBorder.png',
-      devImage:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cbd.png',
       photoBorder:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/photoBorder.png',
-      devImage:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cbd.png',
+      devImage:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/bzy2.png',
       baseDevice:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image',
       devImg:'',
       activeTab: 0,
@@ -310,9 +267,8 @@ export default {
       show1:true,
       equipStateDict:{},
       chartTabs: [
-        { name: '温度', id: 'new_tem' },
-        { name: '湿度', id: 'new_hum' },
-        { name: '加热仓温度', id: 'others' },
+        { name: '温度', id: 'temperature' },
+        { name: '湿度', id: 'humidity' },
       ],
       opts: {
         type: 'line',
@@ -365,17 +321,25 @@ export default {
       return Math.ceil(this.totalPage / this.page_size) || 1
     },
     formatDevImg() {
-      if(this.devImg == 'lowcbd'){
-        return 'https://s3.hnyfwlw.com/webstaticimg/bigdata_pc/menu/cbd.png';
-      }
       return `https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/${this.devImg}.png`;
     },
+    // 设备状态面板：取最新一条上报（历史数据接口按时间倒序返回）
+    deviceStatus() {
+      const latest = this.historyData[0] || {};
+      return {
+        Battery1: latest.Battery1 || '--',
+        D_Temperature: latest.D_Temperature || '--',
+        D_Humidity: latest.D_Humidity || '--',
+        addtimeText: latest.addtime ? this.formatTime(latest.addtime) : '--'
+      };
+    },
   },
   watch:{
     polylineList:{
       handler(newVal, oldVal){
-        this.xData = newVal.map(item => this.formatDate(new Date(item.addtime)));
-        this.yData = newVal.map(item => Number(item.new_tem) || 0);
+        this.xData = newVal.map(item => this.formatDate(item.addtime));
+        // 按当前 tab 对应字段取值（temperature / humidity），null 按 0 处理
+        this.yData = newVal.map(item => Number(item[this.chartTabs[this.activeChartTab].id]) || 0);
         if(this.xData.length){
           this.initChart();
         }
@@ -385,41 +349,20 @@ export default {
     },
     deviceInfo:{
       handler(newVal, oldVal){
-        console.log(newVal,'newvalnewvalnewval')
-        if (newVal.device_model == '11'){
-          this.devImg = 'cbd4.1'
-          this.isShowPhoto = true
-        } else if(newVal.device_model == '12'){
-          this.devImg = 'cbd1'
-          this.isShowPhoto = false
-        } else if(newVal.device_model == '13'){
-          this.devImg = 'cbd5'
-          this.isShowPhoto = true
-        } else if(newVal.device_model == '14'){
-          this.devImg = 'cbd6'
-          this.isShowPhoto = true
-        } else if(newVal.device_model == '15'){
-          this.devImg = 'gkcbd1'
-          this.isShowPhoto = false
-        } else if(newVal.device_model == '16'){
-          this.devImg = 'lowcbd'
-          this.isShowPhoto = true
-        } else{
-          this.devImg = 'cbd'
-          this.isShowPhoto = true
-        }
+        this.devImg = 'shuHai'
+        this.isShowPhoto = true
       },
       deep:true,
       immediate:true,
     },
     deviceHistoryList:{
       handler(newVal, oldVal){
-        this.historyData = []
-        if(newVal.length > 0){
-          newVal.forEach(item=>{
-            this.historyData.push(item.d_h_t)
-          })
-        }
+        // 行结构 { device, data, network, signal, addtime }，展平后模板直接取字段
+        this.historyData = (newVal || []).map(item => ({
+          addtime: item.addtime,
+          ...(item.data || {}),
+          ...(item.device || {})
+        }));
       },
       deep:true,
       immediate:true,
@@ -542,7 +485,7 @@ export default {
     },
     openSettings(){
       uni.navigateTo({
-        url: '/pages/shuHai/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id,
+        url: '/pages/shuHai/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id + '&name=' + encodeURIComponent(this.deviceInfo.name || ''),
       });
     },
     initChart() {
@@ -679,17 +622,10 @@ export default {
     },
     switchChartTab(index) {
       this.activeChartTab = index;
-      // 根据不同标签切换数据
-      if (this.chartTabs[index].id === 'new_tem') {
-        this.yData = this.polylineList.map(item => Number(item.new_tem) || 0);
-      } else if (this.chartTabs[index].id === 'new_hum') {
-        this.yData = this.polylineList.map(item => Number(item.new_hum) || 0);
-      } else if (this.chartTabs[index].id === 'others') {
-        this.yData = this.polylineList.map(item => Number(item.others) || 0);
-      }
+      // 按 tab 对应字段切换数据（temperature / humidity）
+      this.yData = this.polylineList.map(item => Number(item[this.chartTabs[index].id]) || 0);
       this.$nextTick(() => {
-        // this.drawChart();
-		    this.updateChartsData();
+        this.updateChartsData();
       });
     },
     updateChartsData(){
@@ -1204,6 +1140,11 @@ export default {
             white-space: nowrap;
             margin-right: 10rpx;
           }
+
+          // 与表体同宽，保证列对齐
+          .header-cell.cell-wide {
+            min-width: 240rpx;
+          }
         }
 
         .scrollable-body {
@@ -1222,9 +1163,15 @@ export default {
               color: #042118;
               text-align: center;
               margin-right: 10rpx;
-              display: flex;
-              align-items: center;
-              justify-content: center;
+              // 超长内容省略，避免溢出叠到相邻列
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            // PID / IP 内容较长，整列加宽
+            .body-cell.cell-wide {
+              min-width: 240rpx;
             }
           }
         }

pages/shuHai/components/photoImage.vue

@@ -1,14 +1,15 @@
 <template>
   <view class="photo-image">
-    <view class="photo-tabs">
+    <!-- 当前日期范围无数据时隐藏设备切换标签，避免空数据下仍显示一排标签 -->
+    <view class="photo-tabs" v-if="images.length">
       <view class="photo-tab-item" :class="{ active: activeTab === 0 }" @click="changeTabActive(0)">全部</view>
-      <view class="photo-tab-item" :class="{ active: activeTab === 1 }" @click="changeTabActive(1)">相机1</view>
-      <view class="photo-tab-item" :class="{ active: activeTab === 2 }" @click="changeTabActive(2)">相机2</view>
-      <view class="photo-tab-item" :class="{ active: activeTab === 3 }" @click="changeTabActive(3)">相机3</view>
+      <view class="photo-tab-item" :class="{ active: activeTab === 1 }" @click="changeTabActive(1, ding_one_device_id)">{{ ding_one_device_id }}</view>
+      <view class="photo-tab-item" :class="{ active: activeTab === 2 }" @click="changeTabActive(2, ding_two_device_id)">{{ ding_two_device_id }}</view>
+      <view class="photo-tab-item" :class="{ active: activeTab === 3 }" @click="changeTabActive(3, ding_three_device_id)">{{ ding_three_device_id }}</view>
     </view>
     <view
       class="photo-image__tabs"
-      v-if="disableShow"
+      v-if="disableShow && images.length"
     >
       <view
         class="photo-image__tab"
@@ -47,7 +48,7 @@
             </view>
           </view>
           <view class="photo-image__item-title">
-            相机1
+            {{ item.event_id }}
           </view>
           <view class="photo-image__item-time">
             {{ formatDate(item.addtime) }}
@@ -84,6 +85,18 @@ export default {
       type: String | Number,
       default: ''
     },
+    ding_one_device_id:{
+      type: String,
+      default: ''
+    },
+    ding_three_device_id:{
+      type: String,
+      default: ''
+    },
+    ding_two_device_id:{
+      type: String,
+      default: ''
+    },
   },
   data() {
     return {
@@ -107,9 +120,9 @@ export default {
       }
       this.$emit('changeTab', this.activePest)
     },
-    changeTabActive(index) {
+    changeTabActive(index, event_id) {
       this.activeTab = index
-      this.$emit('changeTab', this.activePest)
+      this.$emit('changeTab', event_id)
     },
     // 格式化时间
     formatDate(dateString) {
@@ -123,7 +136,6 @@ export default {
       return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
     },
     handleClick(item) {
-      console.log(item,'itemimtiemtiemtiemi')
       uni.navigateTo({
         url: '/pages/shuHai/devicePhoto?device_id=' + item?.device_id + '&addtime=' + item?.addtime + '&id=' + this.deviceInfo.id + '&currentYear=' + this.currentYear + '&event_id=' + item?.event_id
       })
@@ -150,6 +162,7 @@ export default {
       color: #999999;
       font-family: "Source Han Sans CN VF";
       font-weight: 400;
+      padding: 0 5px;
     }
     .photo-tab-item.active{
       border-radius: 4px;

pages/shuHai/components/rodentAnalysis.vue

@@ -1,9 +1,54 @@
 <template>
   <view class="rodent-analysis">
-    <!-- 活动节律分析 -->
+    <!-- 发生趋势分析 -->
     <view class="analysis-card">
       <view class="analysis-card__header">
-        <view class="analysis-card__title">活动节律分析</view>
+        <view class="analysis-card__title">发生趋势分析</view>
+        <!-- <view class="range-tabs">
+          <view
+            class="range-tab"
+            :class="{ active: trendRange === 'week' }"
+            @click="switchTrendRange('week')"
+          >周</view>
+          <view
+            class="range-tab"
+            :class="{ active: trendRange === 'month' }"
+            @click="switchTrendRange('month')"
+          >月</view>
+          <view
+            class="range-tab"
+            :class="{ active: trendRange === 'year' }"
+            @click="switchTrendRange('year')"
+          >年</view>
+        </view> -->
+      </view>
+      <view class="trend-legend">
+        <view class="trend-legend__item" v-for="item in trendLegend" :key="item.name">
+          <view class="trend-legend__line" :style="{ background: item.color }">
+            <view class="trend-legend__dot" :style="{ borderColor: item.color }"></view>
+          </view>
+          <text class="trend-legend__text">{{ item.name }}</text>
+        </view>
+      </view>
+      <view class="trend-axis-label">鼠害数量：只</view>
+      <view class="chart-wrap chart-wrap--trend" v-if="!trendEmpty">
+        <qiun-data-charts
+          type="line"
+          :chartData="trendChart"
+          :opts="trendOpts"
+          :reshow="active"
+          :canvas2d="true"
+          :inScrollView="true"
+          :ontouch="true"
+        />
+      </view>
+      <view v-else class="chart-empty">暂无数据</view>
+    </view>
+
+    <!-- 鼠害活动时段分析 -->
+    <view class="analysis-card">
+      <view class="analysis-card__header">
+        <view class="analysis-card__title">鼠害活动时段分析</view>
         <view class="analysis-card__extra">
           <text class="peak-label">活跃高峰</text>
           <text class="peak-value">{{ peakRange }}</text>
@@ -13,7 +58,7 @@
         <view class="chart-legend__dot chart-legend__dot--bar"></view>
         <text class="chart-legend__text">鼠害数量</text>
       </view>
-      <view class="chart-wrap chart-wrap--rhythm">
+      <view class="chart-wrap chart-wrap--rhythm" v-if="!rhythmEmpty">
         <qiun-data-charts
           type="column"
           :chartData="rhythmChart"
@@ -24,14 +69,15 @@
           :ontouch="true"
         />
       </view>
+      <view v-else class="chart-empty">暂无数据</view>
     </view>
 
-    <!-- 群落结构分析 -->
+    <!-- 鼠害占比 -->
     <view class="analysis-card">
       <view class="analysis-card__header">
-        <view class="analysis-card__title">群落结构分析</view>
+        <view class="analysis-card__title">鼠害占比</view>
       </view>
-      <view class="community-content">
+      <view class="community-content" v-if="!communityEmpty">
         <view class="chart-wrap chart-wrap--ring">
           <qiun-data-charts
             type="ring"
@@ -41,6 +87,8 @@
             :canvas2d="true"
             :inScrollView="true"
             :ontouch="true"
+            :tooltip-show="false"
+            @getIndex="onRingIndex"
           />
         </view>
         <view class="community-total">
@@ -52,8 +100,10 @@
         <view class="community-list">
           <view
             class="community-item"
+            :class="{ active: communitySelected === index }"
             v-for="(item, index) in communityList"
             :key="index"
+            @click="onCommunityClick(index)"
           >
             <view class="community-item__dot" :style="{ background: item.color }"></view>
             <view class="community-item__name">{{ item.name }}</view>
@@ -62,13 +112,14 @@
           </view>
         </view>
       </view>
+      <view v-else class="chart-empty">暂无数据</view>
     </view>
 
     <!-- 鼠情发生量与气象关系 -->
     <view class="analysis-card">
       <view class="analysis-card__header">
         <view class="analysis-card__title">鼠情发生量与气象关系</view>
-        <view class="range-tabs">
+        <!-- <view class="range-tabs">
           <view
             class="range-tab"
             :class="{ active: weatherRange === 'week' }"
@@ -84,9 +135,9 @@
             :class="{ active: weatherRange === 'year' }"
             @click="switchRange('year')"
           >年</view>
-        </view>
+        </view> -->
       </view>
-      <view class="chart-wrap chart-wrap--weather">
+      <view class="chart-wrap chart-wrap--weather" v-if="!weatherEmpty">
         <qiun-data-charts
           type="mix"
           :chartData="weatherChart"
@@ -97,44 +148,20 @@
           :ontouch="true"
         />
       </view>
+      <view v-else class="chart-empty">暂无数据</view>
     </view>
   </view>
 </template>
 
 <script>
-// 鼠情发生量与气象关系 mock 数据
-const WEATHER_MOCK = {
-  month: {
-    categories: ['8-1','8-16','8-20','8-29','9-1','9-28','10-1','10-28','11-1','11-28','12-9'],
-    pest: [12, 18, 25, 15, 32, 28, 40, 35, 22, 45, 38],
-    temp: [28, 30, 26, 22, 25, 18, 15, 20, 24, 12, 8],
-    humidity: [45, 42, 48, 40, 38, 44, 46, 42, 37, 48, 43]
-  },
-  week: {
-    categories: ['8-12','8-13','8-14','8-15','8-16','8-17','8-18'],
-    pest: [8, 15, 22, 12, 28, 35, 20],
-    temp: [26, 28, 30, 29, 27, 25, 26],
-    humidity: [40, 36, 32, 45, 48, 46, 42]
-  },
-  year: {
-    categories: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-    pest: [35, 28, 22, 18, 15, 20, 32, 45, 48, 42, 38, 30],
-    temp: [5, 8, 14, 20, 26, 30, 32, 31, 26, 20, 12, 6],
-    humidity: [30, 34, 40, 44, 48, 46, 48, 46, 42, 40, 36, 32]
-  }
-};
-
-function buildWeatherChart(range) {
-  const mock = WEATHER_MOCK[range];
-  return {
-    categories: mock.categories,
-    series: [
-      { name: '鼠害总数', type: 'area', style: 'curve', index: 0, data: mock.pest },
-      { name: '温度', type: 'line', style: 'curve', index: 1, data: mock.temp },
-      { name: '湿度', type: 'line', style: 'curve', index: 1, data: mock.humidity }
-    ]
-  };
-}
+// 发生趋势分析 / 鼠情发生量与气象关系 共用接口（按天统计）
+const ANALYSIS_URL = '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_photo_day_analysis';
+// 鼠害活动时段分析 / 鼠害占比 共用接口（按时段统计）
+const PERIOD_URL = '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_photo_period_analysis';
+// 周/月/年 对应的统计天数
+const RANGE_DAYS = { week: 7, month: 30, year: 365 };
+// 趋势图配色：系列为 target_detail 里的各物种，数量不定，循环取色
+const TREND_PALETTE = ['#FF5252', '#0BBC58', '#3D5AFE', '#FFC107', '#9C27B0', '#00BCD4', '#FF7043', '#8BC34A', '#7986CB', '#F06292'];
 
 export default {
   name: 'RodentAnalysis',
@@ -143,13 +170,70 @@ export default {
     active: {
       type: Boolean,
       default: true
+    },
+    // 设备 id：发生趋势 / 气象关系由页面日期选择驱动
+    deviceId: {
+      type: [String, Number],
+      default: ''
+    },
+    // 查询范围（秒级时间戳），由页面日期选择驱动
+    start: {
+      type: [String, Number],
+      default: 0
+    },
+    end: {
+      type: [String, Number],
+      default: 0
     }
   },
   data() {
     return {
-      // 活动节律（mock）
-      peakRange: '22:00',
+      // 发生趋势
+      trendChart: null,
+      // 无数据空态：为 true 时不渲染对应图表（空 series 会让 qiun-data-charts 一直转 loading）
+      trendEmpty: false,
+      trendOpts: {
+        // 颜色顺序与 series 一一对应
+        color: ['#FF5252', '#0BBC58', '#3D5AFE'],
+        dataLabel: false,
+        // 不绘制折线上的数据点圆点
+        dataPointShape: false,
+        // 图例用卡片内自定义样式（见 template 的 trend-legend）
+        legend: { show: false },
+        xAxis: {
+          disableGrid: true,
+          fontSize: 9,
+          fontColor: '#656565',
+          // 'justify' 点落在刻度线上（线条铺满左右）；'center' 点位于两刻度中间
+          boundaryGap: 'justify',
+          labelCount: 6
+        },
+        yAxis: {
+          disableGrid: false,
+          gridType: 'dash',
+          gridColor: '#EEEEEE',
+          data: [{
+            min: 0,
+            max: 50,
+            splitNumber: 5,
+            fontSize: 10,
+            fontColor: '#656565',
+            tofix: 0
+          }]
+        },
+        extra: {
+          line: {
+            type: 'curve',
+            width: 2,
+            activeType: 'none'
+          }
+        }
+      },
+
+      // 活动节律
+      peakRange: '--',
       rhythmChart: null,
+      rhythmEmpty: false,
       rhythmOpts: {
         color: ['#FFC107'],
         dataLabel: false,
@@ -190,27 +274,29 @@ export default {
         }
       },
 
-      // 群落结构（mock）
-      communityList: [
-        { name: '褐家鼠', count: 91, percent: 25, color: '#E53935' },
-        { name: '黄胸鼠', count: 91, percent: 25, color: '#FFC107' },
-        { name: '小家鼠', count: 91, percent: 25, color: '#2196F3' },
-        { name: '黑线姬鼠', count: 91, percent: 25, color: '#9E9E9E' }
-      ],
+      // 群落结构
+      communityList: [],
+      // 当前选中的占比列表项索引（-1 为未选中）
+      communitySelected: -1,
       communityChart: null,
+      communityEmpty: false,
       communityOpts: {
         color: ['#E53935', '#FFC107', '#2196F3', '#9E9E9E'],
+        // 点击联动会触发整图重绘（canvas 无局部更新），关掉动画避免每次点击重放入场动画
+        animation: false,
         legend: { show: false },
         // 环形图：中心显示当前占比最高的物种
         dataLabel: false,
+        // uCharts 以 opts.tooltip.index 命中扇区高亮（-1 为不高亮），点击列表时更新
+        tooltip: { index: -1 },
         title: {
-          name: '25%',
+          name: '0%',
           fontSize: 16,
           color: '#E53935',
           offsetY: -6
         },
         subtitle: {
-          name: '褐家鼠',
+          name: '--',
           fontSize: 10,
           color: '#333333',
           offsetY: 8
@@ -229,15 +315,15 @@ export default {
         }
       },
 
-      // 总量（mock）
-      totalCount: 126,
+      // 总量
+      totalCount: 0,
       weekOverWeek: '+12.8%',
       alarmThreshold: 100,
       barMax: 130,
 
-      // 鼠情与气象（mock）
-      weatherRange: 'month',
+      // 鼠情与气象
       weatherChart: null,
+      weatherEmpty: false,
       weatherOpts: {
         color: ['#FF5252', '#FFC107', '#2196F3'],
         dataLabel: false,
@@ -268,8 +354,10 @@ export default {
               titleOffsetY: -6,
               position: 'left',
               min: 0,
+              max: 10,
               splitNumber: 5,
-              tofix: 0
+              // util.toFixed 会把 tofix:0 当 falsy 回退成 2 位小数，改用 formatter 保证整数刻度
+              formatter: val => Math.round(val) + ''
             },
             {
               title: '湿度:%',
@@ -280,7 +368,7 @@ export default {
               position: 'right',
               min: 0,
               splitNumber: 5,
-              tofix: 0
+              formatter: val => Math.round(val) + ''
             }
           ]
         },
@@ -297,6 +385,15 @@ export default {
     };
   },
   computed: {
+    // 设备或日期范围任一变化即触发重拉
+    fetchKey() {
+      return [this.deviceId, this.start, this.end].join('|');
+    },
+    // 趋势图图例：跟随接口返回的物种系列
+    trendLegend() {
+      if (!this.trendChart) return [];
+      return this.trendChart.series.map(s => ({ name: s.name, color: s.color }));
+    },
     // 进度条填充：总量/量程
     fillPercent() {
       return Math.min((this.totalCount / this.barMax) * 100, 100);
@@ -312,32 +409,221 @@ export default {
       this.initChartData();
     }, 300);
   },
+  watch: {
+    // 设备或日期范围变化时重新拉取
+    fetchKey() {
+      this.initChartData();
+    }
+  },
   methods: {
     initChartData() {
+      this.fetchAnalysis('trend');
+      this.fetchAnalysis('weather');
+      this.fetchPeriod();
+    },
+    switchRange(range) {
+      if (this.weatherRange === range) return;
+      this.weatherRange = range;
+      this.fetchAnalysis(range, 'weather');
+    },
+    switchTrendRange(range) {
+      if (this.trendRange === range) return;
+      this.trendRange = range;
+      this.fetchAnalysis(range, 'trend');
+    },
+    // 拉取按天分析数据，chartKey 区分构建趋势图还是气象图
+    async fetchAnalysis(chartKey) {
+      if (!this.deviceId || !this.start || !this.end) return;
+      try {
+        const res = await this.$myRequest({
+          url: ANALYSIS_URL,
+          method: 'POST',
+          data: {
+            device_id: this.deviceId,
+            start_time: this.start,
+            end_time: this.end
+          }
+        });
+        const dayList = (res && res.day_list) || [];
+        if (chartKey === 'trend') {
+          // 无数据时清空旧图，显示空态（不再保留上一次的数据）
+          this.trendEmpty = !dayList.length;
+          this.trendChart = dayList.length ? this.buildTrendChart(dayList) : null;
+        } else {
+          this.weatherEmpty = !dayList.length;
+          this.weatherChart = dayList.length ? this.buildWeatherChart(dayList) : null;
+        }
+      } catch (e) {
+        // $myRequest 已统一 toast 错误信息
+      }
+    },
+    // 周/月/年 对应的起止时间戳（秒）
+    getRangeTime(range) {
+      const end = Math.floor(Date.now() / 1000);
+      const start = end - (RANGE_DAYS[range] || 30) * 24 * 60 * 60;
+      return { start, end };
+    },
+    // 发生趋势：x 轴为日期，系列为 target_detail 里的各物种
+    buildTrendChart(dayList) {
+      const categories = [];
+      const detailRows = [];
+      dayList.forEach(day => {
+        categories.push((day.date || '').slice(5));
+        detailRows.push(day.target_detail || {});
+      });
+      // 汇总所有出现过的物种（按首次出现顺序）
+      const names = [];
+      detailRows.forEach(row => {
+        Object.keys(row).forEach(name => {
+          if (names.indexOf(name) === -1) names.push(name);
+        });
+      });
+      const series = names.map((name, index) => ({
+        name: name,
+        color: TREND_PALETTE[index % TREND_PALETTE.length],
+        data: detailRows.map(row => row[name] || 0)
+      }));
+      // Y 轴上限随数据量调整，向上取整到 10 的倍数
+      let maxVal = 0;
+      series.forEach(s => {
+        s.data.forEach(v => {
+          if (v > maxVal) maxVal = v;
+        });
+      });
+      this.trendOpts.yAxis.data[0].max = Math.max(10, Math.ceil(maxVal / 10) * 10);
+      // 单天数据画不出折线，改为显示数据点；boundaryGap 切为 'center' 让点位/刻度居中，多天时 'justify' 贴边铺满
+      this.trendOpts.dataPointShape = dayList.length === 1;
+      this.trendOpts.xAxis.boundaryGap = dayList.length === 1 ? 'center' : 'justify';
+      return { categories, series };
+    },
+    // 气象关系：鼠害总数 + 温度 + 湿度
+    buildWeatherChart(dayList) {
+      // mix 图单点数据画不出折线，addPoint 让其显示为数据点
+      const single = dayList.length === 1;
+      // 左轴上限向上取整到 5 的倍数，保证 5 等分后刻度为整数
+      let maxTotal = 0;
+      dayList.forEach(day => {
+        if ((day.total || 0) > maxTotal) maxTotal = day.total || 0;
+      });
+      this.weatherOpts.yAxis.data[0].max = Math.max(10, Math.ceil(maxTotal / 5) * 5);
+      return {
+        categories: dayList.map(day => (day.date || '').slice(5)),
+        series: [
+          // area 系列图例默认画三角形，指定 legendShape 为 line（15x4 的扁长方形），与温度/湿度的图例同高
+          { name: '鼠害总数', type: 'area', style: 'curve', index: 0, addPoint: single, legendShape: 'line', data: dayList.map(day => day.total || 0) },
+          { name: '温度', type: 'line', style: 'curve', index: 1, addPoint: single, data: dayList.map(day => day.temperature || 0) },
+          { name: '湿度', type: 'line', style: 'curve', index: 1, addPoint: single, data: dayList.map(day => day.humidity || 0) }
+        ]
+      };
+    },
+    // 拉取时段分析数据（活动时段 + 鼠害占比共用）
+    async fetchPeriod() {
+      if (!this.deviceId || !this.start || !this.end) return;
+      try {
+        const res = await this.$myRequest({
+          url: PERIOD_URL,
+          method: 'POST',
+          data: {
+            device_id: this.deviceId,
+            start_time: this.start,
+            end_time: this.end
+          }
+        });
+        if (!res) return;
+        this.buildRhythmChart(res.period_list || []);
+        this.buildCommunity(res.total || 0, res.target_detail || {});
+      } catch (e) {
+        // $myRequest 已统一 toast 错误信息
+      }
+    },
+    // 活动时段：meter 柱状图，系列[0]为背景轨道，系列[1]为各时段数量
+    buildRhythmChart(periodList) {
+      if (!periodList.length) {
+        // 无数据时清空旧图，显示空态（不再保留上一次的数据）
+        this.rhythmEmpty = true;
+        this.rhythmChart = null;
+        return;
+      }
+      this.rhythmEmpty = false;
+      const categories = [];
+      const totals = [];
+      let maxTotal = 0;
+      let peakIndex = -1;
+      periodList.forEach((item, index) => {
+        categories.push(this.formatHour(item.hour));
+        const total = item.total || 0;
+        totals.push(total);
+        if (total > maxTotal) {
+          maxTotal = total;
+          peakIndex = index;
+        }
+      });
+      // 活跃高峰：数量最多的时段
+      this.peakRange = peakIndex > -1 ? (periodList[peakIndex].period || this.formatHour(periodList[peakIndex].hour)) : '--';
+      // 量程随数据调整，背景轨道与量程等高
+      const rangeMax = Math.max(10, Math.ceil(maxTotal / 10) * 10);
+      this.rhythmOpts.yAxis.data[0].max = rangeMax;
       this.rhythmChart = {
-        categories: ['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00','24:00'],
+        categories,
         series: [
-          // 背景轨道：满量程高度（meter 模式下系列[0]用 meterFillColor 填充）
-          { name: '背景', color: '#D6DBED', data: Array(13).fill(100) },
-          { name: '鼠害数量', color: '#FFC107', data: [42, 58, 66, 48, 22, 12, 8, 15, 28, 45, 95, 88, 52] }
+          { name: '背景', color: '#D6DBED', data: periodList.map(() => rangeMax) },
+          { name: '鼠害数量', color: '#FFC107', data: totals }
         ]
       };
+    },
+    // 0 → '00:00'
+    formatHour(hour) {
+      const h = hour || 0;
+      return (h < 10 ? '0' + h : '' + h) + ':00';
+    },
+    // 鼠害占比：环形图 + 列表，物种来自 target_detail
+    buildCommunity(total, detail) {
+      const names = Object.keys(detail);
+      // 无数据时显示空态（不再保留上一次的数据）
+      this.communityEmpty = !names.length || !total;
+      const list = names.map((name, index) => {
+        const count = detail[name] || 0;
+        return {
+          name: name,
+          count: count,
+          percent: total ? Math.round((count / total) * 100) : 0,
+          color: TREND_PALETTE[index % TREND_PALETTE.length]
+        };
+      });
+      this.communityList = list;
+      this.communitySelected = -1;
+      this.totalCount = total;
+      this.communityOpts.tooltip = { index: -1 };
       this.communityChart = {
         series: [{
-          data: [
-            { name: '褐家鼠', value: 91 },
-            { name: '黄胸鼠', value: 91 },
-            { name: '小家鼠', value: 91 },
-            { name: '黑线姬鼠', value: 91 }
-          ]
+          // 每项带上与列表圆点一致的 color，保证环形扇区与下方列表颜色一一对应
+          data: list.map(item => ({ name: item.name, value: item.count, color: item.color }))
         }]
       };
-      this.weatherChart = buildWeatherChart(this.weatherRange);
+      // 环形中心显示占比最高的物种
+      if (list.length) {
+        const top = list.reduce((a, b) => (b.count > a.count ? b : a), list[0]);
+        this.communityOpts.title.name = (total ? Math.round((top.count / total) * 100) : 0) + '%';
+        this.communityOpts.subtitle.name = top.name;
+      }
     },
-    switchRange(range) {
-      if (this.weatherRange === range) return;
-      this.weatherRange = range;
-      this.weatherChart = buildWeatherChart(range);
+    // 点击占比列表：环形图高亮对应扇区，中心数据联动；再次点击取消选中
+    onCommunityClick(index) {
+      const item = this.communityList[index];
+      if (!item) return;
+      const next = this.communitySelected === index ? -1 : index;
+      this.communitySelected = next;
+      const target = next > -1
+        ? item
+        : this.communityList.reduce((a, b) => (b.count > a.count ? b : a), this.communityList[0]);
+      this.communityOpts.title.name = target.percent + '%';
+      this.communityOpts.subtitle.name = target.name;
+      this.communityOpts.tooltip = { index: next };
+    },
+    // 点击环形图扇区：中心数据联动，复用列表点击逻辑
+    onRingIndex(e) {
+      if (!e || typeof e.currentIndex !== 'number' || e.currentIndex < 0) return;
+      this.onCommunityClick(e.currentIndex);
     }
   }
 };
@@ -420,6 +706,65 @@ export default {
 .chart-wrap--weather {
   height: 420rpx;
 }
+// 发生趋势分析：自定义图例（曲线图例：短线 + 空心圆点）
+.trend-legend {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20rpx 24rpx;
+  background: #F5F6FA;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+}
+.trend-legend__item {
+  display: flex;
+  align-items: center;
+  width: 33.33%;
+  box-sizing: border-box;
+  padding: 8rpx 0;
+}
+.trend-legend__line {
+  position: relative;
+  width: 40rpx;
+  height: 4rpx;
+  margin-right: 12rpx;
+  flex-shrink: 0;
+}
+.trend-legend__dot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: #fff;
+  border: 4rpx solid #fff;
+  box-sizing: border-box;
+}
+.trend-legend__text {
+  font-size: 26rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+}
+.trend-axis-label {
+  font-size: 22rpx;
+  color: #B3B9C2;
+  font-family: 'Source Han Sans CN VF';
+  margin-bottom: 4rpx;
+}
+.chart-wrap--trend {
+  height: 420rpx;
+}
+// 图表无数据空态
+.chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240rpx;
+  font-size: 26rpx;
+  color: #999999;
+  font-family: 'Source Han Sans CN VF';
+}
 // 群落结构：上下布局，环形图在上，图例列表在下
 .community-content {
   display: flex;
@@ -452,8 +797,12 @@ export default {
 .community-item {
   display: flex;
   align-items: center;
-  padding: 12rpx 0;
+  padding: 12rpx 12rpx;
+  border-radius: 8rpx;
   font-family: 'Source Han Sans CN VF';
+  &.active {
+    background: #F5F6FA;
+  }
   .community-item__dot {
     width: 16rpx;
     height: 16rpx;

pages/shuHai/detail.vue

@@ -25,10 +25,10 @@
           <image :src="settingIcon" class="operation-icon"></image>
           设置
         </view>
-        <view class="operation-item" @click="handleSimClick">
+        <!-- <view class="operation-item" @click="handleSimClick">
           <image :src="simIcon" class="operation-icon"></image>
           SIM卡
-        </view>
+        </view> -->
         <view class="operation-item" @click="modification">
           <image :src="editIcon" class="operation-icon"></image>
           修改
@@ -50,9 +50,9 @@
           <view class="tab-item" :class="activeTab === 'pestAnalysis'?'active':''" @click="handleTabClick('pestAnalysis')">
             鼠情分析
           </view>
-          <view class="tab-item" :class="activeTab === 'aiAnalysis'?'active':''" @click="handleTabClick('aiAnalysis')">
+          <!-- <view class="tab-item" :class="activeTab === 'aiAnalysis'?'active':''" @click="handleTabClick('aiAnalysis')">
             设备预警
-          </view>
+          </view> -->
           <view class="tab-item" :class="activeTab === 'deviceData'?'active':''" @click="handleTabClick('deviceData')">
             设备数据
           </view>
@@ -89,10 +89,10 @@
           :day="day"
           :pest="pest"
         />
-        <RodentAnalysis :active="activeTab === 'pestAnalysis'" />
-        <PestArchive
+        <RodentAnalysis :active="activeTab === 'pestAnalysis'" :device-id="deviceInfo.id" :start="analysisStart" :end="analysisEnd" />
+        <!-- <PestArchive
           :pest_info="pestInfo"
-        />
+        /> -->
         <!-- <view v-if="!pests.length">
           <u-empty text="暂无数据"></u-empty>
         </view> -->
@@ -104,6 +104,9 @@
             :images="imageList"
             :pestList="pestList"
             :disableShow="disableShow"
+            :ding_one_device_id="ding_one_device_id"
+            :ding_three_device_id="ding_three_device_id"
+            :ding_two_device_id="ding_two_device_id"
             @changeTab="changeTab"
             :currentYear="currentYear"
             :deviceInfo="deviceInfo"
@@ -117,7 +120,6 @@
       </view>
       <view v-if="activeTab === 'deviceData'">
         <DeviceData
-          :deviceStatic="deviceStatic"
           :deviceInfo="deviceInfo"
           :polylineList="polylineList"
           :deviceHistoryList="deviceHistoryList"
@@ -194,16 +196,21 @@ export default {
       is_pest:'',
       page_size:24,
       pestList:[],
-      pest_names:'',
       pests:[],
       polylineList:[],
       isShowPhoto:false,
       deviceHistoryList:[],
-      deviceStatic:{}
+      ding_one_device_id:'',
+      ding_three_device_id:'',
+      ding_two_device_id:''
     }
   },
   onLoad(options){
     this.deviceInfo = JSON.parse(options.info);
+    const { ding_one_device_id, ding_three_device_id, ding_two_device_id } = this.deviceInfo;
+    this.ding_one_device_id = ding_one_device_id;
+    this.ding_three_device_id = ding_three_device_id;
+    this.ding_two_device_id = ding_two_device_id;
     this.getPestAnalysis();
     this.isShow();
     const currentYear = new Date().getFullYear();
@@ -216,6 +223,15 @@ export default {
       this.selectorRange.push(item);
     }
   },
+  computed: {
+    // 鼠情分析查询范围（秒级时间戳）
+    analysisStart() {
+      return this.startDate ? new Date(this.startDate + ' 00:00:00').getTime() / 1000 : 0;
+    },
+    analysisEnd() {
+      return this.endDate ? new Date(this.endDate + ' 23:59:59').getTime() / 1000 : 0;
+    }
+  },
   methods: {
     formatePestMessage(data) {
       if (data.length === 0) {
@@ -278,7 +294,7 @@ export default {
     },
     handleSettingClick(){
       uni.navigateTo({
-        url: '/pages/shuHai/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id,
+        url: '/pages/shuHai/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id + '&name=' + encodeURIComponent(this.deviceInfo.name || ''),
       });
     },
     closeOperationHandler(){
@@ -324,9 +340,8 @@ export default {
       this.page = e+=1;
       this.getDeviceHistoryData();
     },
-    changeTab(pestList){
-      let pest_names = pestList.map(item => item.pest_name);
-      this.pest_names = pest_names.join(',');
+    changeTab(camera_id){
+      this.camera_id = camera_id;
       this.initImageList();
     },
     confirmHandler(e){
@@ -348,6 +363,10 @@ export default {
         this.maxDate = this.formatDate(new Date(this.currentYear, 11, 31));
         this.minDate = this.formatDate(new Date(this.currentYear, 0, 1));
       }
+      // 切换年份后重置分页并清空旧的事件列表
+      this.page = 1;
+      this.imageList = [];
+      this.imgTotal = 0;
       this.initAction();
       this.showPicker = false;
     },
@@ -365,6 +384,9 @@ export default {
       this.startDate = e.startDate;
       this.endDate = e.endDate;
       this.page = 1;
+      // 切换日期后先清空旧的事件列表，避免接口异常或返回空时残留上一时间段的数据
+      this.imageList = [];
+      this.imgTotal = 0;
       this.initAction();
     },
     showCalendar(){
@@ -385,7 +407,6 @@ export default {
         this.initPest();
         this.initImageList();
       }else if(this.activeTab === 'deviceData'){
-        this.getDeviceData();
         this.getPolylineData();
         this.getDeviceHistoryData();
       }
@@ -397,16 +418,6 @@ export default {
       this.activeTab = tab;
       this.initAction();
     },
-    async getDeviceData(){
-      const res = await this.$myRequest({
-        url: '/api/api_gateway?method=forecast.worm_lamp.device_status_data',
-        method: 'POST',
-        data: {
-          device_id: this.deviceInfo.id,
-        },
-      });
-      this.deviceStatic = res;
-    },
     async initImageList(isLoadMore){
       if(isLoadMore){
         this.page++;
@@ -453,12 +464,11 @@ export default {
     },
     async getPolylineData(){
       const res = await this.$myRequest({
-        url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_polyline_data',
         method: 'POST',
         data: {
-          device_type_id: this.deviceInfo.type_id,
-          d_id: this.deviceInfo.d_id,
-          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,// 转成毫秒
+          device_id: this.deviceInfo.id,
+          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,// 秒级时间戳
           end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,
         },
       });
@@ -467,19 +477,23 @@ export default {
     },
     async getDeviceHistoryData(){
       const res = await this.$myRequest({
-        url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_device_data',
         method: 'POST',
         data: {
-          device_type_id: this.deviceInfo.type_id,
           device_id: this.deviceInfo.id,
-          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,
+          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,// 秒级时间戳
           end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,
           page: this.page,
           page_size: this.page_size,
         },
       });
-      const data = res?.data || [];
-      this.totalPage = res.counts;
+      const data = res || [];
+      // 接口未返回总条数，按返回条数估算：不足一页视为最后一页
+      if (data.length < this.page_size) {
+        this.totalPage = (this.page - 1) * this.page_size + data.length;
+      } else {
+        this.totalPage = Math.max(this.totalPage, (this.page + 1) * this.page_size);
+      }
       this.deviceHistoryList = data
     },
     async getPestAnalysis(){
@@ -681,7 +695,8 @@ export default {
     .tabs-timer-container{
       display: flex;
       align-items: center;
-      width: calc(100% - 256rpx);
+      justify-content: center;
+      width: calc(100% - 206rpx);
       height: 64rpx;
       line-height: 64rpx;
       text-align: center;
@@ -694,8 +709,10 @@ export default {
       color: #656565;
       margin: 16rpx;
       position: relative;
+      white-space: nowrap;
       .tabs-timer-item{
-        width: 42%;
+        width: auto;
+        flex-shrink: 0;
         color: #656565;
         text-align: center;
         font-family: "Source Han Sans CN VF";
@@ -704,6 +721,7 @@ export default {
       }
       .calendar-icon{
         margin-left: 24rpx;
+        flex-shrink: 0;
       }
     }
     .tab-item {

pages/shuHai/deviceControl.vue

@@ -25,7 +25,7 @@
           <view class="device-detail-viewImage">
             <text class="device-detail-label">设备名称:</text>
             <view class="device-detail-value" >
-              <u-input v-model="deviceName" disabled type="text" placeholder="设备名称" input-align="right" :custom-style="{'font-size':'24rpx'}"/>
+              <u-input v-model="deviceName" type="text" maxlength="15" placeholder="设备名称" input-align="right" :custom-style="{'font-size':'24rpx'}"/>
             </view>
           </view>
           <view class="device-detail-viewImage">
@@ -60,7 +60,7 @@
       <view class="device-detail-content" style="padding-bottom: 50rpx" v-if="activeTab === 'viewImage'">
         <view v-for="(item, index) in deviceList" :key="index" style="width:100%">
           <view class="device-detail-name" @click="toggleChildItem(index)">
-            <text>{{ item.label }}</text>
+            <text>{{ item.deviceId || item.label }}</text>
             <u-icon name="arrow-down" size="24" :class="actionChildItem == index ? 'rotate':''"></u-icon>
           </view>
           <view v-show="actionChildItem == index" class="device-detail-child-settings-container">
@@ -105,21 +105,21 @@
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">连拍:</text>
                 <view class="device-detail-value">
-                  <u-input v-model="item.photoSettings.burstPhoto" type="number" :maxlength="4" placeholder="连拍(1-1000)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'burstPhoto')"/>
+                  <u-input v-model="item.photoSettings.burstPhoto" type="number" :maxlength="4" placeholder="连拍(1-9)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'burstPhoto', 9)"/>
                   <text class="unit-text">次</text>
                 </view>
               </view>
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">视频长度:</text>
                 <view class="device-detail-value">
-                  <u-input v-model="item.photoSettings.videoLength" type="number" :maxlength="4" placeholder="视频长度(1-1000)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'videoLength')"/>
+                  <u-input v-model="item.photoSettings.videoLength" type="number" :maxlength="4" placeholder="视频长度(1-300)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'videoLength', 300)"/>
                   <text class="unit-text">秒</text>
                 </view>
               </view>
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">拍摄限制:</text>
                 <view class="device-detail-value">
-                  <u-input v-model="item.photoSettings.photoInterval" type="number" :maxlength="4" placeholder="拍摄限制(1-1000)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'photoInterval')" />
+                  <u-input v-model="item.photoSettings.photoInterval" type="number" :maxlength="4" placeholder="拍摄限制(0-255)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'photoInterval', 255, 0)" />
                   <text class="unit-text">次</text>
                 </view>
               </view>
@@ -127,15 +127,15 @@
             <view class="device-detail-child-settings" v-if="item.activeTab === 'schedule'">
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">定时拍照:</text>
-                <text class="device-detail-value">
-                  <u-switch v-model="item.timeSettings.timePhoto" active-value="1" inactive-value="0" size="36" />
-                </text>
+                <view class="device-detail-value">
+                  <u-switch v-model="item.timeSettings.timePhoto" size="36" />
+                </view>
               </view>
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">循环拍摄间隔:</text>
-                <view class="device-detail-value">
-                  <u-input v-model="item.timeSettings.photoTime" type="number" :maxlength="4" placeholder="循环拍摄间隔(1-1000)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.timeSettings, 'photoTime')" />
-                  <text class="unit-text">秒</text>
+                <view class="device-detail-value" @click="openIntervalPicker(item)">
+                  <text class="week-text">{{ item.timeSettings.photoTime || '00:01' }}</text>
+                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                 </view>
               </view>
               <view class="device-detail-viewImage">
@@ -173,42 +173,42 @@
             <view class="device-detail-child-settings" v-if="item.activeTab === 'warning'">
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">PIR开关:</text>
-                <text class="device-detail-value">
-                  <u-switch v-model="item.warning.pirOpenOrClose" active-value="1" inactive-value="0" size="36" />
-                </text>
+                <view class="device-detail-value">
+                  <u-switch v-model="item.warning.pirOpenOrClose" size="36" />
+                </view>
               </view>
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">PIR灵敏度:</text>
                 <view class="device-detail-value" @click="setDeviceItemContorl(item, 'pirSensitivity')">
-                  <text class="week-text">{{ item.warning.pirSensitivity == 0 ? '低' : '高' }}</text>
+                  <text class="week-text">{{ formatPirSensitivity(item.warning.pirSensitivity) }}</text>
                   <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                 </view>
               </view>
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">触发时间间隔:</text>
-                <view class="device-detail-value">
-                  <u-input v-model="item.warning.triggerTimeInterval" type="number" :maxlength="4" placeholder="触发时间间隔(1-1000)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.warning, 'triggerTimeInterval')" />
-                  <text class="unit-text">秒</text>
+                <view class="device-detail-value" @click="setDeviceItemContorl(item, 'pirInterval')">
+                  <text class="week-text">{{ item.warning.triggerTimeInterval || '00:00' }}</text>
+                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                 </view>
               </view>
             </view>
             <view class="device-detail-child-settings" v-if="item.activeTab === 'other'">
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">信息戳记:</text>
-                <text class="device-detail-value">
-                  <u-switch v-model="item.other.informationStamp" active-value="1" inactive-value="0" size="36" />
-                </text>
+                <view class="device-detail-value">
+                  <u-switch v-model="item.other.informationStamp" size="36" />
+                </view>
               </view>
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">自动覆盖:</text>
-                <text class="device-detail-value">
-                  <u-switch v-model="item.other.autoOverWrite" active-value="1" inactive-value="0" size="36" />
-                </text>
+                <view class="device-detail-value">
+                  <u-switch v-model="item.other.autoOverWrite" size="36" />
+                </view>
               </view>
               <view class="device-detail-viewImage">
                 <text class="device-detail-label">相机名称:</text>
                 <view class="device-detail-value">
-                  <u-input v-model="item.other.photoName" :maxlength="20" placeholder="相机名称(最多20字)" input-align="right" :custom-style="{'font-size':'24rpx'}" />
+                  <u-input v-model="item.other.photoName" :maxlength="15" placeholder="相机名称(最多15字)" input-align="right" :custom-style="{'font-size':'24rpx'}" />
                 </view>
               </view>
             </view>
@@ -220,9 +220,10 @@
       <view class="device-detail-btn" @click="saveSettings">保存</view>
     </view>
 		<u-select v-model="showContorl" :list="list" @confirm="confirmDeviceItemContorl"></u-select>
-		<u-select v-model="showImageTypeContorl" :list="imageList" @confirm="confirmDeviceItemContorl"></u-select>
-		<u-select v-model="showVideoTypeContorl" :list="videoList" @confirm="confirmDeviceItemContorl"></u-select>
+		<u-select v-model="showImageTypeContorl" :list="currentSizeList" @confirm="confirmDeviceItemContorl"></u-select>
+		<u-select v-model="showVideoTypeContorl" :list="currentSizeList" @confirm="confirmDeviceItemContorl"></u-select>
 		<u-select v-model="showPirTypeContorl" :list="pirList" @confirm="confirmDeviceItemContorl"></u-select>
+		<u-select v-model="showPirIntervalContorl" :list="pirIntervalList" @confirm="confirmDeviceItemContorl"></u-select>
     <u-picker
       v-model="showDateTime"
       mode="time"
@@ -245,7 +246,7 @@
         <view class="week-picker__btn" @click="confirmWeekPicker">确定</view>
       </view>
     </u-popup>
-    <u-select v-model="showCameraSelect" :list="cameraList" @confirm="confirmCameraSelect"></u-select>
+    <u-select v-model="showCameraSelect" :list="cameraSelectList" @confirm="confirmCameraSelect"></u-select>
   </view>
 </template>
 <script>
@@ -265,36 +266,23 @@ export default {
         minute: true,
         second: false
       },
+      // 拍照模式可选项（value 与协议 CAM_Mode 对应）
       list: [
         {
-          label: '自动',
-          value: 'takephoto'
-        },
-        {
-          label: '手动',
-          value: 'manual'
-        }
-      ],
-      imageList: [
-        {
-          label: '1280',
-          value: '1280'
+          label: '拍照',
+          value: '0'
         },
         {
-          label: '720',
-          value: '720'
-        }
-      ],
-      videoList: [
-        {
-          label: '1280',
-          value: '1280'
+          label: '录像',
+          value: '1'
         },
         {
-          label: '720',
-          value: '720'
+          label: '拍照+录像',
+          value: '2'
         }
       ],
+      // 图片/视频大小可选项：点击时由当前相机的 options 动态生成
+      currentSizeList: [],
       actionChildItem: 0,
       equipContrlForm: {},
       time: '',
@@ -303,127 +291,50 @@ export default {
       myuser_type: false,
       deviceType: '',
       location: '',
-      deviceList: [{
-        label: '相机1',
-        content:'',
-        show:false,
-        activeTab: 'settings',
-        photoSettings:{
-          photoModel: '1',
-          imageSize: '0',
-          videoSize: '0',
-          burstPhoto: 1,
-          videoLength: 60,
-          photoInterval: 1,
-        },
-        timeSettings:{
-          timePhoto: '1',
-          photoTime: 60,
-          time1: ['08:00','09:00'],
-          time2: ['11:00','12:00'],
-          time3: ['15:00','16:00'],
-          weekLoop:['周一','周二','周三'],
-        },
-        warning:{
-          pirOpenOrClose:'1',
-          pirSensitivity:'0',
-          triggerTimeInterval:30,
-        },
-        other:{
-          informationStamp:'1',
-          autoOverWrite:'1',
-          photoName:'相机1',
-        }
-      },{
-        label: '相机2',
-        content:'',
-        show:false,
-        activeTab: 'settings',
-        photoSettings:{
-          photoModel: '1',
-          imageSize: '0',
-          videoSize: '0',
-          burstPhoto: 1,
-          videoLength: 60,
-          photoInterval: 1,
-        },
-        timeSettings:{
-          timePhoto: '1',
-          photoTime: 60,
-          time1: ['08:00','09:00'],
-          time2: ['11:00','12:00'],
-          time3: ['15:00','16:00'],
-          weekLoop:['周一','周二','周三'],
-        },
-        warning:{
-          pirOpenOrClose:'1',
-          pirSensitivity:'0',
-          triggerTimeInterval:30,
-        },
-        other:{
-          informationStamp:'1',
-          autoOverWrite:'1',
-          photoName:'相机1',
-        }
-      },{
-        label: '相机3',
-        content:'',
-        show:false,
-        activeTab: 'settings',
-        photoSettings:{
-          photoModel: '1',
-          imageSize: '0',
-          videoSize: '0',
-          burstPhoto: 1,
-          videoLength: 60,
-          photoInterval: 1,
-        },
-        timeSettings:{
-          timePhoto: '1',
-          photoTime: 60,
-          time1: ['08:00','09:00'],
-          time2: ['11:00','12:00'],
-          time3: ['15:00','16:00'],
-          weekLoop:['周一','周二','周三'],
-        },
-        warning:{
-          pirOpenOrClose:'1',
-          pirSensitivity:'0',
-          triggerTimeInterval:30,
-        },
-        other:{
-          informationStamp:'1',
-          autoOverWrite:'1',
-          photoName:'相机1',
-        }
-      }],
+      deviceList: [],
       d_id: '',
+      // 双摄主设备 id（相机配置接口入参）
+      device_id: '',
       show: false,
       checked: false,
       showContorl: false,
       showPirTypeContorl: false,
+      showPirIntervalContorl: false,
+      // 触发时间间隔可选项：小时 00~60、分钟 00~50 步长 10（与 PC 端一致）
+      pirIntervalList: (() => {
+        const list = []
+        for (let hour = 0; hour <= 60; hour++) {
+          for (let minute = 0; minute <= 50; minute += 10) {
+            const hh = ('0' + hour).slice(-2)
+            const mm = ('0' + minute).slice(-2)
+            list.push({ label: hh + ':' + mm, value: hh + ':' + mm })
+          }
+        }
+        return list
+      })(),
       pirList: [
         {
           label: '自动',
-          value: 'auto'
+          value: '0'
         },
         {
-          label: '高',
-          value: 'high'
+          label: '低',
+          value: '1'
         },
         {
           label: '中',
-          value: 'middle'
+          value: '2'
         },
         {
-          label: '低',
-          value: 'low'
+          label: '高',
+          value: '3'
         }
       ],
       showDateTime: false,
       currentTimeItem: null,
       currentTimeField: '',
       currentTimeIndex: 0,
+      currentIntervalItem: null,
       currentDefaultTime: '08:00',
       showImageTypeContorl: false,
       showVideoTypeContorl: false,
@@ -440,45 +351,21 @@ export default {
       camera3ID: '',
       showCameraSelect: false,
       currentCameraField: '',
-      cameraList: [
-        {
-          label: 'CAM-0001',
-          value: 'CAM-0001'
-        },
-        {
-          label: 'CAM-0002',
-          value: 'CAM-0002'
-        },
-        {
-          label: 'CAM-0003',
-          value: 'CAM-0003'
-        },
-        {
-          label: 'CAM-0004',
-          value: 'CAM-0004'
-        },
-        {
-          label: 'CAM-0005',
-          value: 'CAM-0005'
-        },
-        {
-          label: 'CAM-0006',
-          value: 'CAM-0006'
-        },
-        {
-          label: 'CAM-0007',
-          value: 'CAM-0007'
-        },
-        {
-          label: 'CAM-0008',
-          value: 'CAM-0008'
-        }
-      ]
+      // 相机选择弹层的可选项（打开时按互斥规则过滤）
+      cameraSelectList: [],
+      // 主设备下的相机列表（接口获取，作为相机选择弹层可选项）
+      cameraList: []
     }
   },
   onLoad(options){
     this.d_id = options.d_id
-    this.getControlDeviceConfigInfo()
+    this.device_id = options.deviceId || ''
+    // 管理员 tab 回显
+    this.deviceID = this.device_id
+    this.deviceName = options.name ? decodeURIComponent(options.name) : ''
+    this.getCameraConfig()
+    this.getCameraDeviceList()
+    // this.getControlDeviceConfigInfo()
     uni.getStorage({
       key:"myuser_type",
       success:(res)=>{
@@ -500,14 +387,20 @@ export default {
           this.showContorl = true
           break;
         case 'imageSize':
+          // 可选项来自当前相机配置返回的 options
+          this.currentSizeList = (item.photoSettings.imageSizeOptions || []).map(label => ({ label: label, value: label }))
           this.showImageTypeContorl = true
           break;
         case 'videoSize':
+          this.currentSizeList = (item.photoSettings.videoSizeOptions || []).map(label => ({ label: label, value: label }))
           this.showVideoTypeContorl = true
           break;
         case 'pirSensitivity':
           this.showPirTypeContorl = true
           break;
+        case 'pirInterval':
+          this.showPirIntervalContorl = true
+          break;
       }
     },
     confirmDeviceItemContorl(e){
@@ -515,24 +408,28 @@ export default {
         takephoto: ['photoSettings', 'photoModel'],
         imageSize: ['photoSettings', 'imageSize'],
         videoSize: ['photoSettings', 'videoSize'],
-        pirSensitivity: ['warning', 'pirSensitivity']
+        pirSensitivity: ['warning', 'pirSensitivity'],
+        pirInterval: ['warning', 'triggerTimeInterval']
       }
       const target = fieldMap[this.currentFieldType]
       if (this.currentItem && target) {
-        this.$set(this.currentItem[target[0]], target[1], e[0].label)
+        // 统一写入 value（协议编码或选项串），显示由 formatXxx 转文案
+        this.$set(this.currentItem[target[0]], target[1], e[0].value)
       }
     },
-    // photoModel编码转文案（与后台约定：0=自动，1=手动），已是文案的直接返回
+    // 拍照模式编码转文案（与PC端一致：0=拍照，1=录像，2=拍照+录像）
     formatPhotoModel(value){
-      if (value === '0') return '自动'
-      if (value === '1') return '手动'
-      return value || '自动'
+      const map = { '0': '拍照', '1': '录像', '2': '拍照+录像' }
+      return map[value] || value || '--'
     },
-    // 图片/视频大小：兼容mock编码(0=1280,1=720)与选择后存入的文案
+    // 图片/视频大小：直接显示选项串（如 4M/2560*1440）
     formatImageSize(value){
-      if (value == 0 || value === '1280') return '1280'
-      if (value == 1 || value === '720') return '720'
-      return value || '1280'
+      return value === '' || value === null || value === undefined ? '--' : value
+    },
+    // PIR灵敏度编码转文案（0=自动，1=低，2=中，3=高）
+    formatPirSensitivity(value){
+      const map = { '0': '自动', '1': '低', '2': '中', '3': '高' }
+      return map[value] || value || '--'
     },
     handleTabChildClick(item, tab){
       item.activeTab = tab;
@@ -541,21 +438,26 @@ export default {
     toggleChildItem(index){
       this.actionChildItem = this.actionChildItem == index ? -1 : index
     },
-    // 失焦时校验：只保留正整数，范围1-1000（空/非法/小于1置为1，大于1000置为1000）
+    // 失焦时校验：只保留数字并按上下限截断（min 缺省为 1，传 0 表示允许 0，如拍摄限制的不限）
     // 小程序上@input回传参数拿不到输入值，且边输入边改值会引发输入框错乱，所以统一在失焦时校正
-    handlePositiveIntBlur(item, field){
+    handlePositiveIntBlur(item, field, max, min){
+      max = max || 1000
+      min = min === undefined ? 1 : min
       let value = (item[field] === null || item[field] === undefined ? '' : item[field] + '').replace(/\D/g, '')
-      value = value.replace(/^0+/, '')
-      if (value === '' || Number(value) < 1) {
-        value = '1'
-      }
-      if (Number(value) > 1000) {
-        value = '1000'
+      if (value === '') {
+        value = String(min)
+      } else {
+        value = String(Math.min(Math.max(Number(value), min), max))
       }
       this.$set(item, field, value)
     },
     openCameraIdPicker(field) {
       this.currentCameraField = field
+      // 互斥：过滤掉已被其他相机项选中的选项
+      const fields = ['camera1ID', 'camera2ID', 'camera3ID']
+      this.cameraSelectList = this.cameraList.filter(c =>
+        fields.every(f => f === field || this[f] !== c.value)
+      )
       this.showCameraSelect = true
     },
     confirmCameraSelect(e) {
@@ -569,7 +471,14 @@ export default {
       }
       this[this.currentCameraField] = value
     },
+    // 循环拍摄间隔：时:分选择器（协议 Timer_Interval，00:00~23:59）
+    openIntervalPicker(item) {
+      this.currentIntervalItem = item
+      this.currentDefaultTime = item.timeSettings.photoTime || '00:01'
+      this.showDateTime = true
+    },
     openTimePicker(item, field, index) {
+      this.currentIntervalItem = null
       this.currentTimeItem = item
       this.currentTimeField = field
       this.currentTimeIndex = index
@@ -578,11 +487,18 @@ export default {
       this.showDateTime = true
     },
     confirmTimePicker(e) {
+      const pad = (n) => ('0' + Number(n)).slice(-2)
+      const value = pad(e.hour) + ':' + pad(e.minute)
+      // 循环拍摄间隔：直接写入 HH:MM
+      if (this.currentIntervalItem) {
+        this.currentIntervalItem.timeSettings.photoTime = value
+        this.currentIntervalItem = null
+        return
+      }
       const item = this.currentTimeItem
       const field = this.currentTimeField
       const index = this.currentTimeIndex
       if (!item || !field) return
-      const value = e.hour + ':' + e.minute
       // 用修改后的临时数据做校验，通过才写入（time1~time3为[开始,结束]数组）
       const slots = ['time1', 'time2', 'time3'].map((key, i) => {
         const source = item.timeSettings[key] || []
@@ -590,24 +506,24 @@ export default {
         if (key === field) range[index] = value
         return { name: '时间段' + (i + 1), start: range[0], end: range[1] }
       })
-      for (let i = 0; i < slots.length; i++) {
-        if (slots[i].start && slots[i].end && slots[i].start >= slots[i].end) {
-          uni.showToast({ title: slots[i].name + '的开始时间需小于结束时间', icon: 'none' })
+      // 开始==结束视为未配置（如默认回显的 00:00-00:00），不参与校验
+      const configured = slots.filter(s => s.start && s.end && s.start !== s.end)
+      for (let i = 0; i < configured.length; i++) {
+        if (configured[i].start >= configured[i].end) {
+          uni.showToast({ title: configured[i].name + '的开始时间需小于结束时间', icon: 'none' })
           return
         }
       }
-      for (let i = 0; i < slots.length - 1; i++) {
-        const a = slots[i]
-        const b = slots[i + 1]
-        if (a.start && a.end && b.start && b.end) {
-          if (a.start === b.start && a.end === b.end) {
-            uni.showToast({ title: a.name + '与' + b.name + '不能重复', icon: 'none' })
-            return
-          }
-          if (a.end > b.start) {
-            uni.showToast({ title: a.name + '需早于' + b.name, icon: 'none' })
-            return
-          }
+      for (let i = 0; i < configured.length - 1; i++) {
+        const a = configured[i]
+        const b = configured[i + 1]
+        if (a.start === b.start && a.end === b.end) {
+          uni.showToast({ title: a.name + '与' + b.name + '不能重复', icon: 'none' })
+          return
+        }
+        if (a.end > b.start) {
+          uni.showToast({ title: a.name + '需早于' + b.name, icon: 'none' })
+          return
         }
       }
       if (!item.timeSettings[field] || item.timeSettings[field].length !== 2) {
@@ -729,45 +645,98 @@ export default {
       });
     },
     saveSettings(){
-      let newForm = Object.assign({}, this.equipContrlForm) // 深拷贝
-      newForm.st = newForm.st + ''
-      newForm.et = newForm.et + ''
-      newForm.st && newForm.st.slice(0, 2).charAt(0) != '0'
-        ? newForm.st.slice(0, 2)
-        : newForm.st.slice(1, 2)
-      newForm.et =
-        newForm.et && newForm.et.slice(0, 2).charAt(0) != '0'
-          ? newForm.et.slice(0, 2)
-          : newForm.et.slice(1, 2)
-
-      for (let k in newForm) {
-        if (typeof newForm[k] === 'number') {
-          newForm[k] = newForm[k] + ''
-        }
+      // 管理员 tab：保存设备名称与相机绑定；设置 tab：下发相机配置
+      if (this.activeTab === 'pestAnalysis') {
+        this.saveAdminInfo()
+        return
       }
-      newForm.st = newForm.st.replace(':00', '')
-      this.$myRequest({
-        url: '/api/api_gateway?method=forecast.send_control.device_control',
+      this.saveCameraConfig()
+    },
+    // 设置 tab：整包下发相机配置（未改动字段原样透传）
+    async saveCameraConfig(){
+      const device_config_data = this.deviceList.map(item => {
+        // 以回显时的原始配置为底，写回用户改动
+        const cfg = JSON.parse(JSON.stringify(item.rawConfig || {}));
+        const p = item.photoSettings;
+        const t = item.timeSettings;
+        const w = item.warning;
+        const o = item.other;
+        cfg.CAM_Mode = Number(p.photoModel);
+        if (p.imageSize && p.imageSizeOptions.length) {
+          cfg.CAM_ImageSize = { options: p.imageSizeOptions, Selected: Math.max(0, p.imageSizeOptions.indexOf(p.imageSize)) };
+        }
+        if (p.videoSize && p.videoSizeOptions.length) {
+          cfg.CAM_VideoSize = { options: p.videoSizeOptions, Selected: Math.max(0, p.videoSizeOptions.indexOf(p.videoSize)) };
+        }
+        cfg.CAM_Shooting = String(p.burstPhoto);
+        cfg.CAM_VideoLength = Number(p.videoLength);
+        cfg.CAM_MaxShooting = Number(p.photoInterval);
+        cfg.PIR_Enable = w.pirOpenOrClose ? 1 : 0;
+        cfg.PIR_Sensitivity = Number(w.pirSensitivity);
+        cfg.PIR_Interval = w.triggerTimeInterval;
+        cfg.Timer_Enable = t.timePhoto ? 1 : 0;
+        cfg.Timer_Interval = t.photoTime;
+        cfg.Timer_1Start = t.time1[0] || '00:00';
+        cfg.Timer_1End = t.time1[1] || '00:00';
+        cfg.Timer_2Start = t.time2[0] || '00:00';
+        cfg.Timer_2End = t.time2[1] || '00:00';
+        cfg.Timer_3Start = t.time3[0] || '00:00';
+        cfg.Timer_3End = t.time3[1] || '00:00';
+        cfg.Timer_Repeats = this.weeksToRepeats(t.weekLoop);
+        cfg.Other_Stamp = o.informationStamp ? 1 : 0;
+        cfg.Other_Cycle = o.autoOverWrite ? 1 : 0;
+        cfg.Other_DevName = o.photoName;
+        return { device_id: item.deviceId, device_config: cfg };
+      });
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_update_config',
         method: 'POST',
         data: {
-          device_type_id: 3,
-          d_id: this.d_id,
-          config: JSON.stringify(newForm)
+          device_id: this.device_id,
+          device_config_data: JSON.stringify(device_config_data)
         }
-      }).then(res => {
-        if (res) {
-          // 设备控制修改成功
-          uni.showToast({
-            title: '设备控制修改成功！',
-            icon: 'success',
-          });
-        } else {
-          uni.showToast({
-            title: '设备控制修改失败',
-            icon: 'error',
-          });
+      });
+      if (res) {
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success',
+        });
+      } else {
+        uni.showToast({
+          title: '保存失败',
+          icon: 'none',
+        });
+      }
+    },
+    // ['周日','周一'...] → 按周日~周六位序的 7 位串
+    weeksToRepeats(weeks) {
+      const weekOrder = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+      return weekOrder.map(name => ((weeks || []).indexOf(name) > -1 ? '1' : '0')).join('');
+    },
+    // 管理员 tab：保存设备名称与相机1/2/3绑定
+    async saveAdminInfo(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_device_info_update',
+        method: 'POST',
+        data: {
+          device_id: this.device_id,
+          device_name: this.deviceName,
+          ding_one_device_id: this.camera1ID,
+          ding_two_device_id: this.camera2ID,
+          ding_three_device_id: this.camera3ID
         }
-      })
+      });
+      if (res) {
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success',
+        });
+      } else {
+        uni.showToast({
+          title: '保存失败',
+          icon: 'none',
+        });
+      }
     },
     async getControlDeviceConfigInfo(){
       const res = await this.$myRequest({
@@ -780,6 +749,98 @@ export default {
       });
       this.equipContrlForm = res
     },
+    // 拉取相机配置并回显：按 camera_config 动态生成相机列表（返回几台显示几台）
+    async getCameraConfig(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_config',
+        method: 'POST',
+        data: {
+          device_id: this.device_id
+        },
+      });
+      const configList = (res && res.camera_config) || [];
+      if (!configList.length) return;
+      // 相机编号回显（管理员 tab 的相机选择）
+      this.camera1ID = (configList[0] && configList[0].device_id) || ''
+      this.camera2ID = (configList[1] && configList[1].device_id) || ''
+      this.camera3ID = (configList[2] && configList[2].device_id) || ''
+      this.deviceList = configList.map((camera, index) => {
+        const cfg = (camera && camera.device_config) || {};
+        return {
+          label: '相机' + (index + 1),
+          content: '',
+          show: false,
+          activeTab: 'settings',
+          deviceId: (camera && camera.device_id) || '',
+          // 保存时以原始配置为底回传，未改动字段透传
+          rawConfig: cfg,
+          // 拍摄设置
+          photoSettings: {
+            photoModel: cfg.CAM_Mode !== undefined ? String(cfg.CAM_Mode) : '',
+            imageSize: this.sizeOf(cfg.CAM_ImageSize),
+            videoSize: this.sizeOf(cfg.CAM_VideoSize),
+            burstPhoto: cfg.CAM_Shooting !== undefined ? cfg.CAM_Shooting : '',
+            videoLength: cfg.CAM_VideoLength !== undefined ? cfg.CAM_VideoLength : '',
+            photoInterval: cfg.CAM_MaxShooting !== undefined ? cfg.CAM_MaxShooting : '',
+            // 大小可选项，供下拉选择用
+            imageSizeOptions: (cfg.CAM_ImageSize && cfg.CAM_ImageSize.options) || [],
+            videoSizeOptions: (cfg.CAM_VideoSize && cfg.CAM_VideoSize.options) || []
+          },
+          // 定时设置
+          timeSettings: {
+            // 开关绑布尔值：u-switch 外观只认 value 的布尔真假，字符串 "0" 会被当成开
+            timePhoto: cfg.Timer_Enable !== undefined ? Number(cfg.Timer_Enable) === 1 : false,
+            photoTime: cfg.Timer_Interval !== undefined ? cfg.Timer_Interval : '',
+            time1: [cfg.Timer_1Start || '', cfg.Timer_1End || ''],
+            time2: [cfg.Timer_2Start || '', cfg.Timer_2End || ''],
+            time3: [cfg.Timer_3Start || '', cfg.Timer_3End || ''],
+            weekLoop: this.repeatsToWeeks(cfg.Timer_Repeats)
+          },
+          // 触发报警设置
+          warning: {
+            pirOpenOrClose: cfg.PIR_Enable !== undefined ? Number(cfg.PIR_Enable) === 1 : false,
+            pirSensitivity: cfg.PIR_Sensitivity !== undefined ? String(cfg.PIR_Sensitivity) : '',
+            triggerTimeInterval: cfg.PIR_Interval !== undefined ? cfg.PIR_Interval : ''
+          },
+          // 其他设置
+          other: {
+            informationStamp: cfg.Other_Stamp !== undefined ? Number(cfg.Other_Stamp) === 1 : false,
+            autoOverWrite: cfg.Other_Cycle !== undefined ? Number(cfg.Other_Cycle) === 1 : false,
+            photoName: cfg.Other_DevName !== undefined ? cfg.Other_DevName : ''
+          }
+        };
+      });
+    },
+    // {options, Selected} → 选中的选项文案
+    sizeOf(obj) {
+      return ((obj && obj.options) || [])[(obj && obj.Selected)] || ''
+    },
+    // 拉取主设备下的相机列表，作为相机1/2/3选择弹层的可选项
+    async getCameraDeviceList(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.get_shuhai_two_camera_device_list',
+        method: 'POST',
+        data: {
+          device_id: this.device_id
+        },
+      });
+      const devices = (res && res.device) || [];
+      this.cameraList = devices
+        .map(d => d.camera_id)
+        .filter(Boolean)
+        .map(id => ({ label: id, value: id }));
+    },
+    // '1111111'（位序：周日~周六）→ 按周一~周日顺序的文案数组
+    repeatsToWeeks(repeats) {
+      const weekOrder = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+      if (typeof repeats !== 'string' || repeats.length !== 7) return []
+      const selected = []
+      weekOrder.forEach((name, i) => {
+        if (repeats.charAt(i) === '1') selected.push(name)
+      })
+      // 按页面上周一~周日的展示顺序重排
+      return this.weekList.filter(day => selected.indexOf(day) > -1)
+    },
   }
 }
 </script>

pages/shuHai/devicePhoto.vue

@@ -13,22 +13,20 @@
 
     <!-- 日期选择器 -->
      <view class="date-container">
-        <!-- <view class="select-year">
-          <view class="select-year-item" @click="showPicker = true">
-            {{ currentYear }}
-            <u-icon name="arrow-down" size="18" class="arrow-down"></u-icon>
-          </view>
-        </view> -->
         <view class="date-picker" @click="show = true">
           <view class="date-input">
             <text class="date-label">{{ time_begin || '-' }}</text>
           </view>
-          <!-- <view class="date-separator">-</view>
-          <view class="date-input">
-            <text class="date-label">{{ time_end || '-' }}</text>
-          </view> -->
           <u-icon name="calendar" class="calendar"></u-icon>
         </view>
+        <view class="tags-swiper">
+          <view :class="{'tag-icon-active-left': is_jpg == 1}" class="tag-icon-active">
+            <image :src="is_jpg == 1 ? imageActiveIcon : imageIcon" class="tag-icon"  @click="changeVideo(1)"/>
+          </view>
+          <view :class="{'tag-icon-active-right': is_jpg == 0}" class="tag-icon-active">
+            <image :src="is_jpg == 0 ? videoActiveIcon : videoIcon" class="tag-icon"  @click="changeVideo(2)"/>
+          </view>
+        </view>
     </view>
     <view class="fileList-preview">
       <view  class="fileList-scroll">
@@ -47,11 +45,16 @@
     <view class="main-photo" v-if="currentImg.addr">
       <movable-area class="movable-area" :style="{ height: containerHeight }">
         <movable-view
+          :key="currentImg.addr"
           class="movable-view"
           direction="all"
           scale="true"
           scale-min="1"
           scale-max="5"
+          :scale-value="movableScale"
+          :x="movableX"
+          :y="movableY"
+          @tap="onViewerTap"
         >
           <view class="image-container">
             <!-- 原图 -->
@@ -72,10 +75,7 @@
               controls
             />
 
-            <view class="tags-swiper">
-              <image :src="is_jpg == 1 ? imageActiveIcon : imageIcon" class="tag-icon" @click="changeVideo(1)"/>
-              <image :src="is_jpg == 0 ? videoActiveIcon : videoIcon" class="tag-icon" @click="changeVideo(2)"/>
-            </view>
+            
             <!-- 虫子标记层 -->
             <view class="bug-markers" v-if="bugMarkers.length > 0">
               <view
@@ -229,14 +229,20 @@ export default {
       is_jpg:1,
       imgOld_id:'',
       containerHeight: '300px',
+      // 主图缩放/位移受控值：双击复位 & 切图重置用（movable-view 缩放拖动后易视图卡住拖不回）
+      movableX: 0,
+      movableY: 0,
+      movableScale: 1,
+      lastTapTime: 0,
       pestDict: {}, // 虫子字典 {id: name}
       pestColorMap: {}, // 害虫颜色映射 {pestName: color}
     };
   },
   async onLoad(options) {
-    const {id,img_id,currentYear,addtime} = options
+    const {id,img_id,event_id,currentYear,addtime} = options
     this.device_id = id
     this.imgOld_id = img_id
+    this.event_id = event_id || ''
     this.currentYear = currentYear
     this.addtime = this.formatTime(Number(addtime)*1000);
     this.time_begin = this.addtime;
@@ -255,6 +261,14 @@ export default {
     }
     this.pestList = [];
     await this.getEventList();
+    // 定位到跳转时携带的 event_id，找不到就默认第一个
+    const fileIndex = this.fileList.findIndex(file => file.event_id == this.event_id);
+    this.fileIndex = fileIndex > -1 ? fileIndex : 0;
+    const curFile = this.fileList[this.fileIndex];
+    if (curFile) {
+      this.event_id = curFile.event_id;
+      this.camera_id = curFile.device_id;
+    }
     await this.getPestDict();
     await this.getPestLevelMap();
     await this.getPestList();
@@ -294,17 +308,41 @@ export default {
         this.defaultDate = this.minDate;
       }
       this.showPicker = false;
-      this.pestList = [];
+      // 切换年份后先清空上一组数据，再按新年份重新拉取
+      this.fileList = [];
       this.thumbnails = [];
+      this.pestList = [];
+      this.currentImg = {};
+      this.event_id = '';
+      this.camera_id = '';
+      await this.getEventList();
+      this.fileIndex = 0;
+      const curFile = this.fileList[0];
+      if (curFile) {
+        this.event_id = curFile.event_id;
+        this.camera_id = curFile.device_id;
+      }
       await this.getPestList();
     },
     async handleChange(e){
-      console.log(e,'e')
       this.time_begin = e.result;
       this.time_end = e.result;
+      // 切换日期后先清空上一组数据（事件列表/缩略图/识别结果），再按新日期重新拉取
+      this.fileList = [];
+      this.thumbnails = [];
       this.pestList = [];
-      await this.getPestList()
       this.currentImg = {};
+      this.event_id = '';
+      this.camera_id = '';
+      await this.getEventList();
+      // 默认选中新日期下的第一个事件
+      this.fileIndex = 0;
+      const curFile = this.fileList[0];
+      if (curFile) {
+        this.event_id = curFile.event_id;
+        this.camera_id = curFile.device_id;
+      }
+      await this.getPestList();
     },
     getPestColor(pestName) {
       // 如果该害虫已有颜色，直接返回
@@ -355,7 +393,6 @@ export default {
       const resList = res?.data || [];
       this.fileList = resList;
       this.fileTotle = res?.total || 0;
-      console.log(resList,'resresresres')
     },
     async getPestList() {
       const res = await this.$myRequest({
@@ -374,8 +411,14 @@ export default {
       });
       this.thumbnails = res?.data || [];
       this.currentImg = {};
+      if (!this.thumbnails.length) {
+        // 无数据时不再请求详情
+        this.img_id = '';
+        return;
+      }
       //如果和旧的id相同，就用旧的id不然就用第一个
-      this.img_id = this.thumbnails[0]?.id
+      const oldImg = this.thumbnails.find(item => item.id == this.imgOld_id);
+      this.img_id = oldImg?.id || this.thumbnails[0]?.id || ''
       this.getDevicePhotoDetails();
     },
     formatTime(dateString) {
@@ -408,7 +451,6 @@ export default {
         });
         this.pestDict = res || {};
       } catch (error) {
-        console.error('获取虫子字典失败:', error);
         this.pestDict = {};
       }
     },
@@ -464,11 +506,9 @@ export default {
       // for(let key of pestArr){
       //   pestList.push(key)
       // }
-      console.log(this.currentImg,'currentImgimgigmi')
       if (this.currentImg.is_mark != 0) {
         this.processBugMarkers();
         for(let i = 0;i< this.currentImg.mark.length;i++){
-          console.log(this.currentImg.mark[i],'markmarkmarkmark')
           const key = this.currentImg.mark[i].text
           if(pestArr.has(key)){
             pestArr.get(key).pest_num++
@@ -486,7 +526,6 @@ export default {
           })
         }
       }
-      console.log(pestList,'pestListpestList')
       this.pestList = pestList
     },
     onImageLoad(e) {
@@ -500,7 +539,6 @@ export default {
       const displayHeight = (containerWidth / this.imageWidth) * this.imageHeight;
 
       this.containerHeight = displayHeight + 'px';
-      console.log('图片尺寸:', this.imageWidth, this.imageHeight, '容器高度:', this.containerHeight);
 
       // 图片加载完成后处理bugMarkers
       this.processBugMarkers();
@@ -509,14 +547,12 @@ export default {
     processBugMarkers() {
       if (this.currentImg.is_mark === 0) {
         if (!this.currentImg.label) {
-          console.log('没有label参数');
           this.bugMarkers = [];
           return;
         }
 
         // 如果没有图片尺寸，先设置默认值
         if (!this.imageWidth || !this.imageHeight) {
-          console.log('没有图片尺寸，使用默认值');
           this.imageWidth = 1000;
           this.imageHeight = 1000;
         }
@@ -534,12 +570,9 @@ export default {
           // 处理label参数，将单引号替换为双引号
           let labelStr = this.currentImg.label;
           labelStr = labelStr.replace(/'/g, '"');
-          console.log(labelStr,'labelStrlabelStr')
           const label = JSON.parse(labelStr);
           const markers = [];
 
-          console.log('原图宽度:', this.imageWidth, '缩放比例:', scaleRatio);
-
           label.forEach(item => {
             for (let key in item) {
               const [x1, y1, x2, y2] = item[key];
@@ -565,7 +598,6 @@ export default {
           });
           this.bugMarkers = markers;
         } catch (error) {
-          console.error('处理label参数失败:', error);
           this.bugMarkers = [];
         }
       } else {
@@ -631,8 +663,23 @@ export default {
       uni.navigateBack();
     },
     selectThumbnail(item) {
+      this.resetViewer();
       this.img_id = item.id;
       this.getDevicePhotoDetails();
+    },
+    // 双击主图复位缩放与位置：movable-view 缩放拖动后可能视图卡住、拖不回来
+    onViewerTap() {
+      const now = Date.now();
+      if (now - this.lastTapTime < 300) {
+        this.resetViewer();
+      }
+      this.lastTapTime = now;
+    },
+    resetViewer() {
+      this.movableScale = 1;
+      // 交替设一个极小值，保证属性变化能触发 movable-view 复位
+      this.movableX = this.movableX === 0 ? 0.01 : 0;
+      this.movableY = this.movableY === 0 ? 0.01 : 0;
     }
   }
 };
@@ -735,6 +782,7 @@ export default {
   }
   /* 日期选择器 */
   .date-picker {
+    flex:2;
     display: flex;
     align-items: center;
     padding: 20rpx 24rpx;
@@ -776,6 +824,38 @@ export default {
     }
   }
 
+  .tags-swiper{
+    flex:1;
+    background-color: #FFFFFF;
+    border-radius: 48rpx;
+    padding: 0rpx 0rpx;
+    margin-left: 20rpx;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index:10000;
+    .tag-icon{
+      flex:1;
+      width: 40rpx;
+      height: 40rpx;
+    }
+    .tag-icon-active{
+      flex:1;
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .tag-icon-active-left{
+      border-radius: 36rpx 0rpx 0rpx 36rpx;
+      background-color: #0BBC58;
+    }
+    .tag-icon-active-right{
+      border-radius: 0rpx 36rpx 36rpx 0rpx;
+      background-color: #0BBC58;
+    }
+  }
   /* 主图片区域 */
   .main-photo {
     position: relative;
@@ -791,26 +871,14 @@ export default {
 
     .movable-view {
       width: 100%;
+      // 显式高度：movable-view 依赖宽高计算各方向拖动边界，高度缺失会导致放大后无法上下拖动
+      height: 100%;
     }
 
     .image-container {
       position: relative;
       width: 100%;
     }
-    .tags-swiper{
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index:10000;
-      top:10rpx;
-      right: 20rpx;
-      .tag-icon{
-        width: 60rpx;
-        height: 60rpx;
-        margin-left: 10rpx;
-      }
-    }
     .main-photo-image {
       width: 100%;
       display: block;

pages/shuHai1/components/DeviceCard.vue

@@ -0,0 +1,133 @@
+<template>
+  <view class="device-card__body">
+    <view class="device-card">
+      <view :class=" dataSource.status == 1 ?'online-status':'offline-status'">{{ dataSource.status === 1 ? '在线' : '离线' }}</view>
+      <view class="device-card__title">设备ID</view>
+      <view class="device-card__content">
+        <text class="device-id-text">{{ dataSource.id  }}</text>
+        <img class="copy-icon" :src="copy" @click="copyDeviceId"/>
+      </view>
+    </view>
+    <view class="device-card">
+      <view class="device-card__title">上报时间</view>
+      <view class="device-card__content">{{ dataSource.uptime | timeFormat()}}</view>
+    </view>
+    <view class="device-card">
+      <view class="device-card__title">设备位置</view>
+      <view class="device-card__content address">{{ dataSource.address || '-' }}</view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    dataSource: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      copy:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/copy.png',
+      title: ''
+    }
+  },
+  methods: {
+    copyDeviceId() {
+      uni.setClipboardData({
+        data: this.dataSource.id,
+        success: () => {
+          uni.showToast({
+            title: '复制成功',
+            icon: 'success'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.device-card__body {
+  display: flex;
+  padding: 16px 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #EFF 0%, #FFF 23.56%);
+  margin-top: 34rpx;
+  position: relative;
+  .device-card {
+    display: flex;
+    gap: 16px;
+    .device-card__title {
+      width: 120rpx;
+      color: #4E5969;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      text-align: right;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .online-status {
+      width: 136rpx;
+      height: 56rpx;
+      line-height: 56rpx;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      right: 0;
+      background: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/online1.png') no-repeat center center;
+      background-size: 100% 100%;
+      color: #0bbc58;
+      font-family: "Source Han Sans CN VF";
+      font-size: 28rpx;
+    }
+    .offline-status{
+      width: 136rpx;
+      height: 56rpx;
+      line-height: 56rpx;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      right: 0;
+      background: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/offline.png') no-repeat center center;
+      background-size: 100% 100%;
+      color: #ff3546;
+      font-family: "Source Han Sans CN VF";
+      font-size: 28rpx;
+    }
+    .device-card__content {
+      color: #4E5969;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+      .device-id-text {
+        flex: 1;
+      }
+      .copy-icon {
+        font-family: 'iconfont';
+        font-size: 32rpx;
+        color: #86909C;
+        cursor: pointer;
+        width: 28rpx;
+        height: 28rpx;
+        &:active {
+          opacity: 0.6;
+        }
+      }
+    }
+    .address {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

pages/shuHai1/components/DeviceControl.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="device-control-container">
+    <view class="device-status">
+      <view class="status-item">
+        <text class="status-label">环境温度</text>
+        <text class="status-value">{{ deviceStatus.temp }}°C</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境湿度</text>
+        <text class="status-value">{{ deviceStatus.humidity }}%</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境光照</text>
+        <text class="status-value">{{ deviceStatus.light }}Lux</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境湿度</text>
+        <text class="status-value">{{ deviceStatus.moisture }}%</text>
+      </view>
+      <view class="status-item">
+        <text class="status-label">环境湿度</text>
+        <text class="status-value">{{ deviceStatus.pest }}%</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      deviceStatus: {
+        temp: 25,
+        humidity: 50,
+        light: 800,
+        moisture: 300,
+        pest: 10
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.device-control-container {
+  padding: 24rpx;
+  background-color: #F7F8FA;
+  border-radius: 12rpx;
+}
+</style>

pages/shuHai1/components/aiChat.vue

@@ -0,0 +1,359 @@
+<template>
+  <view class="deepseek-chat-container">
+    <scroll-view class="chat-messages" scroll-y :scroll-into-view="scrollIntoView" v-show="pestMessage">
+      <view class="message-content">
+        <view class="message-input" style="padding:0">{{ pestMessage }}</view>
+        <view v-if="isloading" class="loading-hint">AI 正在分析中…</view>
+        <rich-text class="message-text markdown-output" :nodes="outputHtml"></rich-text>
+        <view class="message-input footer">内容由大模型生成，仅供参考，相关风险需自行承担。</view>
+      </view>
+      <view id="chatBottomAnchor"></view>
+    </scroll-view>
+    <view v-if="!pestMessage" style="height:100%">
+      
+    </view>
+  </view>
+</template>
+
+<script>
+import { createSSEConnection } from './sse.js';
+import { renderMarkdown } from './markdownRenderer.js';
+
+export default {
+  name: 'DeepSeekChat',
+  props: {
+    pestMessage: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      text: '',
+      sseConnection: null,
+      result: '',
+      thinking: false,
+      activeNames: ['1'],
+      thinkHtml: '',
+      isloading: true,
+      mdParser: null,
+      mdRawText: '',   // 累积的原始 markdown 文本
+      outputHtml: '',  // renderMarkdown 渲染后的 HTML，交给 rich-text 展示
+      scrollIntoView: '', // scroll-view 滚动到底部锚点用
+    };
+  },
+  watch: {
+    text: {
+      handler() {
+        this.$nextTick(() => {
+          this.scrollToBottom();
+        });
+      },
+      deep: true
+    },
+    pestMessage(newVal) {
+      if (newVal) {
+        this.connectSSE(newVal);
+      } else {
+        this.isloading = false;
+      }
+    }
+  },
+  methods: {
+    initParser() {
+      this.mdRawText = '';
+      this.outputHtml = '';
+    },
+    connectSSE(message) {
+      this.initParser();
+      this.text = '';
+      this.thinkHtml = '';
+      let thinkContent = '';
+      let isCollecting = false;
+      const sseUrl = `https://ai.nyzhwlw.com/analysis?message=${message}`;
+      this.sseConnection = createSSEConnection(sseUrl);
+      this.sseConnection.onMessage((data) => {
+        this.isloading = false;
+        if (data === 'yfkj@2025' || data === '[DONE]') {
+          return;
+        }
+        // 处理 <think>...</think> 思考块：模板里不展示思考内容，
+        // 且原代码用到的 mdParser 未初始化（为 null）会抛错，导致 isCollecting 一直为 true、
+        // 后续正文也再不会渲染。这里整体丢弃思考块，只保留 </think> 之后可能跟着的正文。
+        if (isCollecting || data.indexOf('<think>') > -1) {
+          if (data.indexOf('<think>') > -1) {
+            isCollecting = true;
+            this.thinking = true;
+          }
+          thinkContent += data;
+          const endIdx = thinkContent.indexOf('</think>');
+          if (endIdx === -1) {
+            return; // 仍在思考块内，等待结束标记
+          }
+          // 思考块结束，取出其后的正文继续走正常渲染
+          data = thinkContent.slice(endIdx + '</think>'.length);
+          thinkContent = '';
+          isCollecting = false;
+          this.thinking = false;
+          if (!data) {
+            return;
+          }
+        }
+        // 累积正文并渲染为 markdown，用 rich-text 展示
+        this.mdRawText += data;
+        this.outputHtml = renderMarkdown(this.mdRawText);
+        this.scrollToBottom();
+      });
+
+      this.sseConnection.onError((error) => {
+        console.error('SSE Error:', error);
+        this.disconnectSSE();
+      });
+    },
+    collapseHtml() {
+      let result = '';
+      return result;
+    },
+    async renderHtml(result) {
+      this.text = result;
+      // 触发浏览器重绘
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    },
+    disconnectSSE() {
+      if (this.sseConnection) {
+        this.sseConnection.close();
+        this.sseConnection = null;
+        this.isloading = false;
+      }
+    },
+    formatTime(date) {
+      return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    },
+    scrollToBottom() {
+      // 小程序没有 DOM，不能用 $refs.scrollTop；改用 scroll-view 的 scroll-into-view 滚到底部锚点
+      this.scrollIntoView = '';
+      this.$nextTick(() => {
+        this.scrollIntoView = 'chatBottomAnchor';
+      });
+    }
+  },
+  mounted() {
+    this.scrollToBottom();
+    if (this.pestMessage) {
+      this.connectSSE(this.pestMessage);
+    } else {
+      this.isloading = false;
+    }
+  },
+  beforeDestroy() {
+    // 组件卸载时断开连接（uni-app 默认 Vue2，用 beforeDestroy）
+    this.disconnectSSE();
+  }
+};
+</script>
+
+<style scoped lang="less">
+.el-collapse {
+  background: #f6f6f6;
+  color: #a4aab2;
+  border-radius: 8rpx;
+}
+::v-deep .el-collapse-item__header {
+  padding: 0 16rpx;
+  height: 72rpx;
+  background: #f6f6f6 !important;
+  border-radius: 8rpx;
+}
+::v-deep .el-collapse-item__wrap {
+  background: #f6f6f6 !important;
+  color: #a4aab2 !important;
+  border-radius: 8rpx;
+}
+::v-deep .el-collapse-item__content {
+  color: #a4aab2 !important;
+  border-radius: 8rpx;
+}
+.deep-thinking {
+  padding: 0 52rpx;
+  border-radius: 8rpx;
+}
+.deepseek-chat-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 640rpx);
+  // max-width: 1086px;
+  margin: 0 auto;
+  border-radius: 8rpx;
+  // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  font-family: 'Segoe UI', Arial, sans-serif;
+  // background-color: #f9f9f9;
+}
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  height: 100%;
+  // background-color: #ffffff;
+}
+
+.message {
+  display: flex;
+  margin-bottom: 24rpx;
+}
+
+.message-content {
+  max-width: 100%;
+}
+.loading-hint {
+  padding: 16rpx;
+  color: #999;
+  font-size: 26rpx;
+}
+
+.message-text {
+  padding: 16rpx;
+  border-radius: 18rpx;
+  line-height: 1.4;
+  word-wrap: break-word;
+  padding-bottom: 60rpx;
+}
+
+.message.bot .message-text {
+  background-color: #fff;
+  border-top-left-radius: 8rpx;
+  color: #5c5c5c;
+}
+
+.message.user .message-text {
+  color: white;
+  border-top-right-radius: 8rpx;
+}
+
+.message-time {
+  font-size: 22rpx;
+  color: #777;
+  margin-top: 8rpx;
+  text-align: right;
+}
+
+.message.user .message-time {
+  text-align: left;
+}
+
+.typing-indicator {
+  display: flex;
+  padding: 12rpx 30rpx;
+  background-color: #f6f6f6;
+  border-radius: 18rpx;
+  border-top-left-radius: 8rpx;
+}
+
+.typing-indicator span {
+  width: 16rpx;
+  height: 16rpx;
+  margin: 0 2rpx;
+  background-color: #999;
+  border-radius: 50%;
+  display: inline-block;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.typing-indicator span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+/* Markdown样式 - 使用深度选择器 */
+::v-deep .markdown-output {
+  /* 标题样式 */
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 32rpx;
+    margin-bottom: 16rpx;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+  h1 { font-size: 2em; }
+  h2 { font-size: 1.5em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.85em; }
+
+  /* 列表样式 */
+  ul, ol {
+    padding-left: 2em;
+    margin: 16rpx 0;
+    list-style-type: disc;
+  }
+  ol {
+    list-style-type: decimal;
+  }
+  li {
+    margin: 8rpx 0;
+    line-height: 1.5;
+  }
+
+  /* 粗体斜体 */
+  strong {
+    font-weight: 600;
+  }
+  em {
+    font-style: italic;
+  }
+
+  /* 代码块 */
+  pre {
+    background-color: #f6f8fa;
+    padding: 32rex;
+    border-radius: 12rpx;
+    overflow-x: auto;
+    margin: 16rpx 0;
+  }
+  code {
+    background-color: #f6f8fa;
+    padding: 4rpx 8rpx;
+    border-radius: 6rpx;
+    font-family: monospace;
+  }
+
+  /* 段落 */
+  p {
+    margin: 16rpx 0;
+    line-height: 1.5;
+  }
+}
+
+.message-input {
+  padding: 20rpx 30rpx;
+  border-radius: 8rpx;
+  background-color: #f6f6f6;
+
+  &.footer {
+    position: fixed;
+    bottom: 20rpx;
+    left: 0;
+    right: 0rpx;
+    margin-top: 40rpx;
+    font-size: 24rpx;
+    color: #999;
+    text-align: center;
+  }
+}
+</style>

pages/shuHai1/components/downImage.vue

@@ -0,0 +1,129 @@
+<template>
+  <view class="down-image">
+    <view class="down-image__content" v-if="images.length">
+      <view class="down-image__grid">
+        <view class="down-image__item" v-for="(item, index) in images" :key="item.id || index" @click="handleClick(index)">
+          <view class="down-image__item-img-container">
+            <image
+              class="down-image__item-img"
+              :src="item.img"
+              mode="aspectFill"
+              lazy-load
+            />
+          </view>
+          <view class="down-image__item-title">
+            {{ formatDate(item.uptime) }}
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-else>
+      <u-empty text="暂无图片"></u-empty>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props:{
+    images:{
+      type: Array,
+      default: () => []
+    },
+    deviceInfo:{
+      type: Object,
+      default: () => ({})
+    },
+  },
+  methods: {
+    // 点击跳转查看图片页，与监测图像(前后左右)一致
+    handleClick(index) {
+      const item = this.images[index] || {};
+      // 只带当前点击的这张图片，URL放不下长链接，走storage
+      const imgs = [{
+        addr: item.img,
+        mark: this.parseMark(item.mark),
+        addtime: item.uptime,
+      }];
+      uni.setStorageSync('shuhai_group_imgs', JSON.stringify(imgs));
+      uni.navigateTo({
+        url: '/pages/shuHai1/devicePhoto?addtime=' + (item.uptime || 0) + '&id=' + (this.deviceInfo.id || '') + '&group_id=' + (item.id || '') + '&photo_type=' + encodeURIComponent('下')
+      })
+    },
+    // mark可能是JSON字符串
+    parseMark(mark) {
+      if (Array.isArray(mark)) {
+        return mark;
+      }
+      try {
+        const arr = JSON.parse(mark || '[]');
+        return Array.isArray(arr) ? arr : [];
+      } catch (error) {
+        return [];
+      }
+    },
+    // 格式化时间
+    formatDate(dateString) {
+      if(!dateString){
+        return '';
+      }
+      const date = new Date(dateString*1000);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.down-image {
+  width: 100%;
+  box-sizing: border-box;
+
+  .down-image__content{
+    margin-top: 24rpx;
+    .down-image__grid{
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20rpx;
+    }
+  }
+  &__item {
+    border-radius: 16rpx;
+    padding: 20rpx;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    display: inline-block;
+    overflow: hidden;
+    background: #ffffff;
+    &-img-container {
+      width: 100%;
+      padding-bottom: 60%;
+      position: relative;
+      border-radius: 16rpx;
+      overflow: hidden;
+      background-color: #f5f5f5;
+    }
+    &-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    &-title {
+      font-size: 28rpx;
+      color: #333333;
+      font-family: "Source Han Sans CN VF";
+      font-weight: 500;
+      margin-top: 12rpx;
+    }
+  }
+}
+</style>

pages/shuHai1/components/floating-button.vue

@@ -0,0 +1,219 @@
+<template>
+	<view
+		class="floating-container"
+		:style="{ top: position.y + 'px', left: position.x + 'px' }"
+		@touchstart="onTouchStart"
+		@click="onClick"
+	>
+		<view class="floating-icon" :class="{ expanded: isExpanded }">
+			<view class="icon-content">
+				<slot name="icon">
+					<text class="default-icon">+</text>
+				</slot>
+			</view>
+			<view v-if="isExpanded" class="expanded-content">
+				<slot name="expanded">
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'FloatingButton',
+	props: {
+		// 初始位置距离右边的距离
+		right: {
+			type: Number,
+			default: 20
+		},
+		// 初始位置距离底部的距离
+		bottom: {
+			type: Number,
+			default: 100
+		},
+		// 按钮大小
+		size: {
+			type: Number,
+			default: 50
+		},
+		// 是否可拖拽
+		draggable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			position: {
+				x: 0,
+				y: 0
+			},
+			isDragging: false,
+			isExpanded: false,
+			startX: 0,
+			startY: 0,
+			lastX: 0,
+			lastY: 0,
+			clickStartTime: 0,
+			hasMoved: false
+		};
+	},
+	mounted() {
+		this.initPosition();
+	},
+	methods: {
+		// 初始化位置
+		initPosition() {
+			const systemInfo = uni.getSystemInfoSync();
+			const screenWidth = systemInfo.windowWidth;
+			const screenHeight = systemInfo.windowHeight;
+
+			this.position = {
+				x: screenWidth - this.right - this.size,
+				y: screenHeight - this.bottom - this.size
+			};
+		},
+
+		// 触摸开始
+		onTouchStart(e) {
+			if (!this.draggable) return;
+
+			const touch = e.touches[0];
+			this.startX = touch.clientX;
+			this.startY = touch.clientY;
+			this.lastX = this.position.x;
+			this.lastY = this.position.y;
+			this.isDragging = true;
+			this.hasMoved = false;
+			this.clickStartTime = Date.now();
+		},
+
+		// 触摸移动
+		onTouchMove(e) {
+			if (!this.draggable || !this.isDragging) return;
+
+			e.preventDefault();
+
+			const touch = e.touches[0];
+			const deltaX = touch.clientX - this.startX;
+			const deltaY = touch.clientY - this.startY;
+
+			// 如果移动超过5像素，认为是拖拽操作
+			if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+				this.hasMoved = true;
+			}
+
+			const systemInfo = uni.getSystemInfoSync();
+			const screenWidth = systemInfo.windowWidth;
+			const screenHeight = systemInfo.windowHeight;
+
+			// 计算新位置，限制在屏幕范围内
+			let newX = this.lastX + deltaX;
+			let newY = this.lastY + deltaY;
+
+			// 边界限制
+			newX = Math.max(0, Math.min(newX, screenWidth - this.size));
+			newY = Math.max(0, Math.min(newY, screenHeight - this.size));
+
+			this.position = {
+				x: newX,
+				y: newY
+			};
+		},
+
+		// 触摸结束
+		onTouchEnd(e) {
+			if (!this.draggable) return;
+
+			this.isDragging = false;
+
+			// 自动吸附到屏幕边缘
+			this.snapToEdge();
+		},
+
+		// 吸附到屏幕左右边缘
+		snapToEdge() {
+			const systemInfo = uni.getSystemInfoSync();
+			const screenWidth = systemInfo.windowWidth;
+
+			// 判断当前在左半屏还是右半屏
+			const centerX = this.position.x + this.size / 2;
+
+			if (centerX < screenWidth / 2) {
+				// 吸附到左边
+				this.position.x = 10;
+			} else {
+				// 吸附到右边
+				this.position.x = screenWidth - this.size - 10;
+			}
+		},
+
+		// 点击事件
+		onClick(e) {
+			// 如果发生了拖拽移动，不触发点击事件
+			const clickDuration = Date.now() - this.clickStartTime;
+
+			if (this.hasMoved || clickDuration > 300) {
+				return;
+			}
+
+			// 切换展开/收起状态
+			this.isExpanded = !this.isExpanded;
+
+			// 触发父组件事件
+			this.$emit(this.isExpanded ? 'expand' : 'collapse', {
+				expanded: this.isExpanded
+			});
+		},
+
+		// 手动展开
+		expand() {
+			this.isExpanded = true;
+		},
+
+		// 手动收起
+		collapse() {
+			this.isExpanded = false;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.floating-container {
+	position: fixed;
+	z-index: 9999;
+	width: 50px;
+	height: 50px;
+}
+.expanded-content{
+	position: absolute;
+}
+.floating-icon {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s ease;
+}
+
+.icon-content {
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s ease;
+}
+
+.default-icon {
+	font-size: 24px;
+	color: #ffffff;
+	font-weight: bold;
+}
+
+</style>

pages/shuHai1/components/markdownRenderer.js

@@ -0,0 +1,112 @@
+// markdownRenderer.js
+export function renderMarkdown(raw) {
+  // 过滤结束标记
+  let text = raw.replace(/\[DONE\]/g, '')
+
+  // ── 预处理：在块级标识前插入换行（处理 AI 不换行直接切换块的情况）──
+  // 在 ## 标题前插入换行（前面不是换行时）
+  text = text.replace(/([^\n])(#{1,6} )/g, '$1\n$2')
+  // 在无序列表项前插入换行
+  text = text.replace(/([^\n])([ \t]*[-*+] )/g, '$1\n$2')
+  // 在有序列表项前插入换行
+  text = text.replace(/([^\n])([ \t]*\d+\. )/g, '$1\n$2')
+  // 在引用块前插入换行
+  text = text.replace(/([^\n])(> )/g, '$1\n$2')
+
+  // ── 按段落分割处理（双换行为段落分隔）──
+  // 先把单换行统一，再按块处理
+  const lines = text.split('\n')
+  const blocks = []
+  let i = 0
+
+  while (i < lines.length) {
+    const line = lines[i]
+
+    // 空行跳过
+    if (line.trim() === '') {
+      i++
+      continue
+    }
+
+    // 代码块
+    if (line.startsWith('```')) {
+      const lang = line.slice(3).trim()
+      const codeLines = []
+      i++
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        codeLines.push(lines[i])
+        i++
+      }
+      i++ // 跳过结束 ```
+      const escaped = codeLines.join('\n')
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      blocks.push(`<pre><code${lang ? ` class="language-${lang}"` : ''}>${escaped}</code></pre>`)
+      continue
+    }
+
+    // 标题
+    const headingMatch = line.match(/^(#{1,6}) (.+)/)
+    if (headingMatch) {
+      const level = headingMatch[1].length
+      blocks.push(`<h${level}>${applyInline(headingMatch[2])}</h${level}>`)
+      i++
+      continue
+    }
+
+    // 分割线
+    if (/^[-*_]{3,}\s*$/.test(line)) {
+      blocks.push('<hr>')
+      i++
+      continue
+    }
+
+    // 引用块
+    if (line.startsWith('> ') || line === '>') {
+      const content = line.slice(line.startsWith('> ') ? 2 : 1)
+      blocks.push(`<blockquote>${applyInline(content)}</blockquote>`)
+      i++
+      continue
+    }
+
+    // 无序列表：收集连续的列表项
+    if (/^[ \t]*[-*+] /.test(line)) {
+      const items = []
+      while (i < lines.length && /^[ \t]*[-*+] /.test(lines[i])) {
+        const m = lines[i].match(/^[ \t]*[-*+] (.+)/)
+        if (m) items.push(`<li>${applyInline(m[1])}</li>`)
+        i++
+      }
+      blocks.push(`<ul>${items.join('')}</ul>`)
+      continue
+    }
+
+    // 有序列表：收集连续的列表项
+    if (/^[ \t]*\d+\. /.test(line)) {
+      const items = []
+      while (i < lines.length && /^[ \t]*\d+\. /.test(lines[i])) {
+        const m = lines[i].match(/^[ \t]*\d+\. (.+)/)
+        if (m) items.push(`<li>${applyInline(m[1])}</li>`)
+        i++
+      }
+      blocks.push(`<ol>${items.join('')}</ol>`)
+      continue
+    }
+
+    // 普通段落
+    blocks.push(`<p>${applyInline(line)}</p>`)
+    i++
+  }
+
+  return blocks.join('\n')
+}
+
+// 行内样式处理
+function applyInline(text) {
+  return text
+    .replace(/\*\*\*([^*\n]+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+    .replace(/\*\*([^*\n]+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([^*\n]+?)\*/g, '<em>$1</em>')
+    .replace(/~~([^~\n]+?)~~/g, '<del>$1</del>')
+    .replace(/`([^`\n]+)`/g, '<code>$1</code>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
+}

pages/shuHai1/components/pestArchive.vue

@@ -0,0 +1,213 @@
+<template>
+  <view class="pest-archive">
+    <view class="pest-archive__header">
+      <view class="pest-archive__title">虫害档案</view>
+    </view>
+      <view
+        class="pest-card"
+        @tap="handleCardClick()"
+      >
+        <view class="pest-card__image">
+          <image :src="pest_info.img_urls" mode="aspectFill" class="pest-img"></image>
+        </view>
+        <view class="pest-card__info">
+          <view class="pest-card__top">
+            <view class="pest-card__name">
+              名称
+            </view>
+            <view class="pest-card__status">
+              {{ pest_info.name || '未知' }}
+            </view>
+          </view>
+          <view class="pest-card__top">
+            <view class="pest-card__name">
+              害虫信息
+            </view>
+            <view class="pest-card__status" style="height:160rpx;overflow: auto;">
+              {{ pest_info.prevention || '未知' }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <u-popup v-model="showDetail" mode="bottom" border-radius="32">
+        <view class="pest-card__detail">
+          <view class="pest-card__image">
+            <image :src="pest_info.img_urls" mode="aspectFill" class="pest-img"></image>
+          </view>
+          <view>
+            {{ pest_info.name || '未知' }}
+          </view>
+          <view>
+            {{ pest_info.prevention || '未知' }}
+          </view>
+        </view>
+      </u-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    scrollHeight: {
+      type: String,
+      default: '500rpx'
+    },
+    pest_info: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showDetail: false,
+    }
+  },
+  methods: {
+    showPestDetail(){
+      this.showDetail = true;
+    },
+    handleCardClick() {
+      this.showPestDetail()
+      this.$emit('click', this.pest_info)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pest-archive {
+  width: 100%;
+  padding: 32rpx;
+  margin-top: 24rpx;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 16rpx;
+}
+
+.pest-archive__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.pest-archive__title {
+  font-size: 32rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+  font-weight: 500;
+}
+
+.pest-archive__add {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00D26A 0%, #00B55A 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 210, 106, 0.3);
+
+  .add-icon {
+    font-size: 40rpx;
+    color: #fff;
+    line-height: 1;
+    font-weight: 300;
+  }
+}
+.pest-card__detail{
+  height: 70vh;
+  padding: 40rpx;
+}
+.pest-archive__list {
+  width: 100%;
+}
+.pest-card {
+  display: flex;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  background: #F7F8F9;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.pest-card__image {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+  margin-right: 20rpx;
+  background: #e0e0e0;
+
+  .pest-img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.pest-card__info {
+  padding: 4rpx 0;
+}
+
+.pest-card__top {
+  display: flex;
+}
+
+.pest-card__name {
+  font-size: 26rpx;
+  color: #999999;
+  font-family: "Source Han Sans CN VF";
+  font-weight: 400;
+  width: 110rpx;
+}
+
+.pest-card__status {
+  width: 270rpx;
+  color: #303133;
+  font-size: 26srpx;
+  font-weight: 500;
+
+  &.status--handled {
+    background: rgba(0, 210, 106, 0.15);
+    color: #00B55A;
+  }
+
+  &.status--handling {
+    background: rgba(255, 149, 0, 0.15);
+    color: #FF9500;
+  }
+
+  &.status--pending {
+    background: rgba(255, 53, 70, 0.15);
+    color: #FF3546;
+  }
+}
+
+.pest-card__time {
+  font-size: 24rpx;
+  color: #86909C;
+  margin-top: 8rpx;
+}
+
+.pest-card__desc {
+  font-size: 26rpx;
+  color: #4E5969;
+  margin-top: 12rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.5;
+}
+</style>

pages/shuHai1/components/pestDiscern.vue

@@ -0,0 +1,121 @@
+<template>
+  <view class="pest-discern" v-if="pests.length">
+    <view class="pest-discern__header">
+      <view class="pest-discern__title">
+        虫害识别
+      </view>
+    </view>
+    <view class="pest-discern__content">
+      <view class="pest-discern__item" v-for="(item,index) in pests" :key="index">
+        <view class="pest-discern__item-title">
+          {{ item.name }}
+        </view>
+        <view class="pest-discern__item-content">
+          <u-line-progress :active-color="item.color" :percent="item.percent" :show-percent="false" height="8"></u-line-progress>
+        </view>
+        <view class="pest-discern__item-count">
+          {{ item.count }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    pest_order: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch:{
+    pest_order:{
+      handler(val){
+        this.pests = [];
+        let index = 0;
+        for(let key in val){
+          index++;
+          this.pests.push({
+            color: this.colors[index],
+            name: key,
+            count: val[key] || 0,
+            percent: (val[key] / this.total) * 100
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      colors:[
+        '#FF5951',
+        '#66EDED',
+        '#E67B3E',
+        '#6DE28B',
+        '#FFC97A',
+        '#E7EB4B',
+        '#1561F3',
+        '#FA73F5',
+        '#159AFF',
+        '#FA73F5'
+      ],
+      pests: []
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pest-discern {
+  width: 100%;
+  padding: 32rpx;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 26rpx;
+}
+.pest-discern__header {
+  padding: 0rpx 0rpx 20rpx 0rpx;
+  font-size: 32rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+  font-weight: 700;
+}
+.pest-discern__title {
+  font-size: 28rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+  font-weight: 500;
+}
+.pest-discern__item {
+  display: flex;
+  width: 100%;
+  margin-bottom: 20rpx;
+  align-items: center;
+  .pest-discern__item-title{
+    width: 120rpx;
+    font-size: 28rpx;
+    color: #042118;
+    font-family: 'Source Han Sans CN VF';
+    font-weight: 400;
+    // 超出隐藏
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pest-discern__item-content{
+    flex: 1;
+    margin: 0 20rpx;
+  }
+  .pest-discern__item-count{
+    width: 80rpx;
+    font-size: 28rpx;
+    color: #042118;
+    text-align: right;
+  }
+}
+</style>

pages/shuHai1/components/pestEchart.vue

@@ -0,0 +1,433 @@
+<template>
+  <view class="pest-echart" v-show="tabs.length">
+    <view class="pest-echart__header">
+      <view class="tab-list">
+        <view
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: activeTab === index }"
+          @click="switchTab(index)"
+        >
+          {{ tab.name }}
+        </view>
+      </view>
+    </view>
+
+    <view class="pest-echart__content" v-show="dayData.length">
+      <!-- 三个关键时期 -->
+      <view class="period-section">
+        <view class="period-item">
+          <view class="period-label">始见期</view>
+          <view class="period-value">{{ periodData.firstDate }}</view>
+        </view>
+        <view class="period-item">
+          <view class="period-label">高峰期</view>
+          <view class="period-value">{{ periodData.peakDate }}</view>
+        </view>
+        <view class="period-item">
+          <view class="period-label">终见期</view>
+          <view class="period-value">{{ periodData.lastDate }}</view>
+        </view>
+      </view>
+
+      <!-- 图表区域 -->
+      <view class="chart-container">
+        <!-- <canvas
+          canvas-id="pestChart"
+          id="pestChart"
+          class="charts"
+          :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
+          @touchstart="touchChart($event)"
+          @touchmove="moveChart($event)"
+          @touchend="touchEndChart($event)"
+          disable-scroll=true
+        ></canvas> -->
+        <qiun-data-charts type="line" :chartData="chartData" :opts="opts" :canvas2d="true" :inScrollView="true" :ontouch="true" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
+
+let chartInstance = null;
+
+export default {
+  name: 'PestEchart',
+  props:{
+    pest_order:{
+      type: Object,
+      default: () => ({})
+    },
+    endDate: {
+      type: String,
+      default: ''
+    },
+    d_id: {
+      type: String | Number,
+      default: ''
+    },
+    day:{
+      type: Array,
+      default: () => []
+    },
+    pest:{
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      tabs: [],
+      currentPest:'',
+      activeTab: 0,
+      dayData:[],
+      // 三个关键时期数据
+      periodData: {
+        firstDate: '-',
+        peakDate: '-',
+        lastDate: '-'
+      },
+      chartData: {},
+      // canvas 尺寸配置
+      cWidth: 650,
+      cHeight: 400,
+      pixelRatio: 1,
+      opts: {
+        type: 'line',
+        xAxis: {
+          disableGrid: true,
+          itemCount: 3,
+          scrollShow: true
+        },
+        yAxis: {
+          disableGrid: true,
+          gridType: 'dash',
+          splitNumber: 5,
+          min: 0,
+          format: (val) => {
+            return Math.round(val)
+          }
+        },
+        extra: {
+          line: {
+            type: 'curve'
+          },
+          tooltip: {
+            format: {
+              name: '',
+              value: (val) => Math.round(val)
+            }
+          }
+        },
+        legend: {
+        },
+        enableScroll: true
+      },
+    };
+  },
+  watch:{
+    pest_order:{
+      handler(val){
+        this.tabs = [];
+        for(let key in val){
+          this.tabs.push({
+            name: key,
+          })
+        }
+        const name = this.tabs[0]?.name;
+        this.currentPest = name;
+        if(this.currentPest){
+          this.getPestNameDetail(name);
+          this.setChartData();
+        }
+      },
+      deep: true
+    },
+    d_id:{
+      handler(val){
+        val && this.setChartData();
+      },
+      deep: true
+    },
+    endDate:{
+      handler(val){
+        val && this.setChartData();
+      },
+      deep: true
+    },
+    day:{
+      handler(){
+        this.initChart();
+      },
+      deep: true,
+      immediate: true
+    },
+  },
+  mounted() {
+    this.cWidth = uni.upx2px(650);
+    this.cHeight = uni.upx2px(400);
+    this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
+  },
+  methods: {
+    async getPestNameDetail(name){
+      try{
+        const res = await this.$myRequest({
+          url: '/api/pest_name_detail',
+          method: 'POST',
+          data: {
+            name
+          },
+        });
+        this.deviceInfo = res
+        this.$emit('getInfo',res)
+      }catch(err){
+        this.$emit('getInfo',{})
+      }
+    },
+    async setChartData(){
+      if(!this.currentPest){
+        return;
+      }
+      if(!this.d_id || !this.endDate){
+        return;
+      }
+     const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.cbd_analysis.pest_predict_time',
+        method: 'POST',
+        data: {
+          model:'B',
+          d_id: this.d_id,
+          year: this.endDate.split('-')[0],
+          pest: this.currentPest,
+        },
+      });
+      this.periodData = {
+        firstDate: res[0][0],
+        peakDate: res[1][0],
+        lastDate: res[2][0],
+      }
+    },
+    initChart() {
+      this.$nextTick(() => {
+        this.updateChartsData(0);
+      });
+    },
+    drawChart(index) {
+      const dayData = this.day || [];
+      this.dayData = dayData;
+      const pestData = this.pest[index];
+      const ctx = uni.createCanvasContext('pestChart', this);
+      chartInstance = new uCharts({
+        context: ctx,
+        type: 'line',
+        fontSize: 11,
+        legend: {
+          show: false
+        },
+        background: '#FFFFFF',
+        pixelRatio: this.pixelRatio,
+        animation: true,
+        dataLabel: false,
+        categories: dayData,
+        series: [{
+          name: '',
+          data: pestData
+        }],
+        color: ['#0085FF'],
+        xAxis: {
+          disableGrid: false,
+          boundaryGap: 'justify',
+          axisLine: true,
+          lineColor: '#CCCCCC',
+          fontColor: '#999999'
+        },
+        yAxis: {
+          min: 0,
+          minInterval: 1,
+          splitNumber: 4,
+          axisLine: true,
+          lineColor: '#CCCCCC',
+          fontColor: '#999999',
+          gridType: 'dash',
+          gridColor: '#E5E5E5'
+        },
+        width: this.cWidth * this.pixelRatio,
+        height: this.cHeight * this.pixelRatio,
+        extra: {
+          line: {
+            type: 'curve',
+            width: 2,
+            activeType: 'hollow'
+          },
+          tooltip: {
+            showBox: true,
+            bgOpacity: 0.7
+          }
+        }
+      });
+    },
+    touchChart(e) {
+      if (chartInstance) {
+        chartInstance.scrollStart(e);
+      }
+    },
+    moveChart(e) {
+      if (chartInstance) {
+        chartInstance.scroll(e);
+      }
+    },
+    touchEndChart(e) {
+      if (chartInstance) {
+        chartInstance.scrollEnd(e);
+        chartInstance.showToolTip(e, {
+          format: function(item, category) {
+            return category + ' ' + item.name + ':' + item.data
+          }
+        });
+      }
+    },
+    switchTab(index) {
+      this.activeTab = index;
+      const name = this.tabs[index]?.name;
+      this.currentPest = name
+      this.getPestNameDetail(name);
+      this.setChartData();
+      this.$nextTick(() => {
+        this.updateChartsData(index);
+      });
+    },
+    updateChartsData(index){
+      const dayData = this.day || [];
+      this.dayData = dayData;
+      const pestData = this.pest[index];
+      this.updateYAxisSplitNumber(pestData);
+      const lineData = {
+        categories: dayData,
+        series: [
+          {
+            name: '',
+            data: pestData
+          }
+        ]
+      };
+
+      this.chartData = lineData;
+    },
+    // 根据数据范围动态计算 y 轴分段数，保证每段刻度间距 >= 1，
+    // 避免数据较小时刻度被取整后出现重复（如 0,0,0,1,1,1）
+    updateYAxisSplitNumber(pestData){
+      const numList = (pestData || [])
+        .map(v => Number(v))
+        .filter(v => !isNaN(v));
+      let dataMin = numList.length ? Math.min(...numList) : 0;
+      let dataMax = numList.length ? Math.max(...numList) : 0;
+      // 与 u-charts 内部逻辑一致：数据全部相同时 min 归 0（全为 0 时 max 取 10）
+      if (dataMin === dataMax) {
+        if (dataMax === 0) {
+          dataMax = 10;
+        }
+        dataMin = 0;
+      }
+      const span = dataMax - dataMin;
+      // 数据范围 >= 5 时固定 5 段（每段间距自然 >= 1）；否则按范围取分段数，使每段正好为 1
+      const splitNumber = span >= 5 ? 5 : Math.max(1, Math.floor(span));
+      this.opts.yAxis = { ...this.opts.yAxis, splitNumber };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pest-echart {
+  margin-top: 24rpx;
+  &__header{
+    margin-bottom: 24rpx;
+  }
+}
+
+.tab-list {
+  width: 100%;
+  overflow-x: scroll;
+  white-space: nowrap;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.tab-item {
+  margin-right: 16rpx;
+  font-size: 28rpx;
+  font-family: 'Source Han Sans CN VF', sans-serif;
+  font-weight: 500;
+  color: #999999;
+  display: inline-block;
+  box-sizing: border-box;
+  background: #ffffff;
+  font-family: "Source Han Sans CN VF";
+  font-size: 28rpx;
+  padding: 10rpx 32rpx;
+  border-radius: 8rpx;
+  &:last-child {
+    margin-right: 0;
+  }
+  &.active {
+    color: #0BBC58;
+    font-weight: 700;
+  }
+  &:first-child.active {
+    color: #0BBC58;
+  }
+}
+
+.pest-echart__content {
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  padding: 0 32rpx 32rpx;
+}
+
+.period-section {
+  display: flex;
+  justify-content: space-between;
+  padding: 24rpx;
+  background: #ffffff;
+  border-radius: 12rpx;
+}
+
+.period-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.period-label {
+  font-size: 28rpx;
+  color: #303133;
+  font-family: 'Source Han Sans CN VF', sans-serif;
+  font-weight: 700;
+  margin-bottom: 8rpx;
+}
+
+.period-value {
+  font-size: 24rpx;
+  color: #999999;
+  font-family: 'Source Han Sans CN VF', sans-serif;
+  font-weight: 400;
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 400rpx;
+  border-radius: 12rpx;
+}
+
+.charts {
+  width: 100%;
+  height: 100%;
+}
+</style>

pages/shuHai1/components/photoImage.vue

@@ -0,0 +1,269 @@
+<template>
+  <view class="photo-image">
+    <view
+      class="photo-image__tabs"
+      v-if="disableShow"
+    >
+      <view
+        class="photo-image__tab"
+        v-for="(pest, index) in pestList"
+        :key="index"
+        :class="{ active: activeIndexList.includes(index) }"
+        @click="changeTab(index)"
+      >
+        <text class="tab-text">{{ pest.pest_name }}({{ pest.pest_num }})</text>
+      </view>
+    </view>
+    <view class="photo-image__content" v-if="images.length">
+      <view class="photo-image__grid">
+        <view class="photo-image__item" v-for="(item, index) in images" :key="index" @click="handleClick(item)">
+          <view class="photo-image__item-img-container">
+            <image
+              class="photo-image__item-img"
+              :src="getSrc(item)"
+            />
+            <!-- <view class="photo-image__item-icon-container">
+              <image
+                v-if="hasMark(item)"
+                class="photo-image__item-icon"
+                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/ai.png"
+              />
+              <image
+                v-if="item.has_photo == 1"
+                class="photo-image__item-icon-video"
+                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/video.png"
+              />
+              <image
+                v-if="item.has_video == 1"
+                class="photo-image__item-icon-img"
+                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/img.png"
+              />
+            </view> -->
+          </view>
+          <view class="photo-image__item-title">
+            {{ formatDate(item.addtime) }}
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-else>
+      <u-empty text="暂无图片"></u-empty>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props:{
+    disableShow:{
+      type: Boolean,
+      default: true
+    },
+    pestList:{
+      type: Array,
+      default: () => []
+    },
+    images:{
+      type: Array,
+      default: () => []
+    },
+    deviceInfo:{
+      type: Object,
+      default: () => ({})
+    },
+    currentYear:{
+      type: String | Number,
+      default: ''
+    },
+    ding_one_device_id:{
+      type: String,
+      default: ''
+    },
+    ding_three_device_id:{
+      type: String,
+      default: ''
+    },
+    ding_two_device_id:{
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      activeIndexList:[],
+      activePest:[],
+      activeTab: 0,
+      tabs: ['全部', '稻飞虱', '水龟虫', '蝼蛄', '系统','全部', '稻飞虱', '水龟虫', '蝼蛄', '系统'],
+    };
+  },
+  methods: {
+    // 取第一张有地址的图片作为封面
+    getSrc(item){
+      const first = (item.imgs || []).find(img => img && img.addr);
+      return first?.addr;
+    },
+    // 是否有识别标记
+    hasMark(item){
+      return (item.imgs || []).some(img => img && img.mark && img.mark.length);
+    },
+    changeTab(index) {
+      if(this.activeIndexList.includes(index)){
+        this.activePest = this.activePest.filter(item => item !== this.pestList[index])
+        this.activeIndexList = this.activeIndexList.filter(item => item !== index)
+      }else{
+        this.activeIndexList.push(index)
+        this.activePest.push(this.pestList[index])
+      }
+      this.$emit('changeTab', this.activePest)
+    },
+    changeTabActive(index, event_id) {
+      this.activeTab = index
+      this.$emit('changeTab', event_id)
+    },
+    // 格式化时间
+    formatDate(dateString) {
+      const date = new Date(dateString*1000);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    handleClick(item) {
+      // 把该分组的所有图片带过去，URL放不下长链接，走storage
+      uni.setStorageSync('shuhai_group_imgs', JSON.stringify(item?.imgs || []));
+      uni.navigateTo({
+        url: '/pages/shuHai1/devicePhoto?addtime=' + item?.addtime + '&id=' + this.deviceInfo.id + '&group_id=' + item?.group_id
+      })
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.photo-image {
+  width: 100%;
+  box-sizing: border-box;
+  &__header {
+    margin-bottom: 32rpx;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__tabs {
+    box-sizing: border-box;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    // 去掉滚动条
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .photo-image__content{
+    margin-top: 24rpx;
+    .photo-image__grid{
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20rpx;
+    }
+  }
+  &__tab {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 16rpx;
+    background: #ffffff;
+    color: #999999;
+    font-family: "Source Han Sans CN VF";
+    font-size: 28rpx;
+    padding: 10rpx 32rpx;
+    border-radius: 8rpx;
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .tab-text {
+      margin-right: 8rpx;
+    }
+
+    .tab-check {
+      color: #4CAF50;
+      font-weight: bold;
+    }
+
+    &.active {
+      color: #0BBC58;
+    }
+
+    .tab-underline {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 4rpx;
+      background: #4CAF50;
+      border-radius: 2rpx;
+    }
+  }
+  &__item {
+    border-radius: 16rpx;
+    padding: 20rpx;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    display: inline-block;
+    overflow: hidden;
+    background: #ffffff;
+    &-img-container {
+      width: 100%;
+      padding-bottom: 60%;
+      position: relative;
+      border-radius: 16rpx;
+      overflow: hidden;
+      background-color: #f5f5f5;
+    }
+    .photo-image__item-icon-container{
+      position: absolute;
+      display: flex;
+      gap: 4rpx;
+      top: 8rpx;
+      left: 8rpx;
+      width: 100%;
+      height: 100%;
+    }
+    &-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    &-icon {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    &-icon-video {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    &-icon-img {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    &-title {
+      font-size: 28rpx;
+      color: #333333;
+      font-family: "Source Han Sans CN VF";
+      font-weight: 500;
+      margin-top: 12rpx;
+    }
+  }
+}
+</style>

pages/shuHai1/components/rodentAnalysis.vue

@@ -0,0 +1,634 @@
+<template>
+  <view class="rodent-analysis">
+    <!-- 发生趋势分析 -->
+    <view class="analysis-card">
+      <view class="analysis-card__header">
+        <view class="analysis-card__title">发生趋势分析</view>
+        <!-- <view class="range-tabs">
+          <view
+            class="range-tab"
+            :class="{ active: trendRange === 'week' }"
+            @click="switchTrendRange('week')"
+          >周</view>
+          <view
+            class="range-tab"
+            :class="{ active: trendRange === 'month' }"
+            @click="switchTrendRange('month')"
+          >月</view>
+          <view
+            class="range-tab"
+            :class="{ active: trendRange === 'year' }"
+            @click="switchTrendRange('year')"
+          >年</view>
+        </view> -->
+      </view>
+      <view class="trend-legend" v-if="trendLegendList.length">
+        <view class="trend-legend__item" v-for="item in trendLegendList" :key="item.name">
+          <view class="trend-legend__line" :style="{ background: item.color }">
+            <view class="trend-legend__dot" :style="{ borderColor: item.color }"></view>
+          </view>
+          <text class="trend-legend__text">{{ item.name }}</text>
+        </view>
+      </view>
+      <view class="trend-axis-label">鼠害数量：只</view>
+      <view class="chart-wrap chart-wrap--trend" v-if="!trendEmpty">
+        <qiun-data-charts
+          type="line"
+          :chartData="trendChart"
+          :opts="trendOpts"
+          :reshow="active"
+          :canvas2d="true"
+          :inScrollView="true"
+          :ontouch="true"
+        />
+      </view>
+      <view v-else class="chart-empty">暂无数据</view>
+    </view>
+
+    <!-- 鼠害占比 -->
+    <view class="analysis-card">
+      <view class="analysis-card__header">
+        <view class="analysis-card__title">鼠害占比</view>
+      </view>
+      <view class="community-content">
+        <view class="chart-wrap chart-wrap--ring" v-if="communityList.length">
+          <qiun-data-charts
+            type="ring"
+            :chartData="communityChart"
+            :opts="communityOpts"
+            :reshow="active"
+            :canvas2d="true"
+            :inScrollView="true"
+            :ontouch="true"
+            :tooltip-show="false"
+            @getIndex="onRingIndex"
+          />
+        </view>
+        <view v-else class="chart-empty">暂无数据</view>
+        <view class="community-total">
+          <text>总鼠害数量</text>
+          <text class="total-value">{{ totalCount }}
+            <text class="unit">只</text>
+          </text>
+        </view>
+        <view class="community-list">
+          <view
+            class="community-item"
+            :class="{ active: communitySelected === index }"
+            v-for="(item, index) in communityList"
+            :key="index"
+            @click="onCommunityClick(index)"
+          >
+            <view class="community-item__dot" :style="{ background: item.color }"></view>
+            <view class="community-item__name">{{ item.name }}</view>
+            <view class="community-item__count">{{ item.count }}只</view>
+            <view class="community-item__percent">{{ item.percent }}%</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 鼠情分析：categories/series → 发生趋势，total → 鼠害占比
+const ANALYSIS_URL = '/api/api_gateway?method=forecast.shuhai.shuhai_analysis';
+// 趋势图配色：系列为 target_detail 里的各物种，数量不定，循环取色
+const TREND_PALETTE = ['#FF5252', '#0BBC58', '#3D5AFE', '#FFC107', '#9C27B0', '#00BCD4', '#FF7043', '#8BC34A', '#7986CB', '#F06292'];
+
+export default {
+  name: 'RodentAnalysis',
+  props: {
+    // 当前 tab 是否激活（tab 用 v-show 切换时，隐藏状态下 canvas 容器测量为 0，需激活后重绘）
+    active: {
+      type: Boolean,
+      default: true
+    },
+    // 设备 id：鼠情分析接口入参
+    deviceId: {
+      type: [String, Number],
+      default: ''
+    },
+    // 查询范围（秒级时间戳），由页面日期选择驱动
+    start: {
+      type: [String, Number],
+      default: 0
+    },
+    end: {
+      type: [String, Number],
+      default: 0
+    }
+  },
+  data() {
+    return {
+      // 发生趋势
+      trendChart: null,
+      // 无数据空态：为 true 时不渲染折线图（空 series 会让 qiun-data-charts 一直转 loading）
+      trendEmpty: false,
+      // 趋势图图例自存一份数据，不读 trendChart.series，保证与分配的颜色一致
+      trendLegendList: [],
+      // 物种名 → 颜色：同名物种固定同色，日期范围/系列顺序变化时两图颜色不跳变
+      nameColorMap: {},
+      trendOpts: {
+        // 颜色顺序与 series 一一对应
+        color: ['#FF5252', '#0BBC58', '#3D5AFE'],
+        dataLabel: false,
+        // 不绘制折线上的数据点圆点
+        dataPointShape: false,
+        // 图例用卡片内自定义样式（见 template 的 trend-legend）
+        legend: { show: false },
+        xAxis: {
+          disableGrid: true,
+          fontSize: 9,
+          fontColor: '#656565',
+          // 'justify' 点落在刻度线上（线条铺满左右）；'center' 点位于两刻度中间
+          boundaryGap: 'justify',
+          labelCount: 6
+        },
+        yAxis: {
+          disableGrid: false,
+          gridType: 'dash',
+          gridColor: '#EEEEEE',
+          data: [{
+            min: 0,
+            max: 50,
+            splitNumber: 5,
+            fontSize: 10,
+            fontColor: '#656565',
+            tofix: 0
+          }]
+        },
+        extra: {
+          line: {
+            type: 'curve',
+            width: 2,
+            activeType: 'none'
+          }
+        }
+      },
+
+      // 群落结构
+      communityList: [],
+      // 当前选中的占比列表项索引（-1 为未选中）
+      communitySelected: -1,
+      communityChart: null,
+      communityOpts: {
+        color: ['#E53935', '#FFC107', '#2196F3', '#9E9E9E'],
+        // 点击联动会触发整图重绘（canvas 无局部更新），关掉动画避免每次点击重放入场动画
+        animation: false,
+        legend: { show: false },
+        // 环形图：中心显示当前占比最高的物种
+        dataLabel: false,
+        // uCharts 以 opts.tooltip.index 命中扇区高亮（-1 为不高亮），点击列表时更新
+        tooltip: { index: -1 },
+        title: {
+          name: '0%',
+          fontSize: 16,
+          color: '#E53935',
+          offsetY: -6
+        },
+        subtitle: {
+          name: '--',
+          fontSize: 10,
+          color: '#333333',
+          offsetY: 8
+        },
+        extra: {
+          ring: {
+            // 环粗细约为半径的三分之一
+            ringWidth: 16,
+            offsetAngle: 0,
+            // 去掉分段之间的白色分隔线（qiun-data-charts 的 ring 默认 border: true）
+            border: false,
+            // 关闭点击分段时外扩+半透明的高亮效果（默认 activeRadius: 10 / activeOpacity: 0.5）
+            activeRadius: 5,
+            activeOpacity: 1
+          }
+        }
+      },
+
+      // 总量
+      totalCount: 0,
+    };
+  },
+  computed: {
+    // 依赖项拼接，任一变化即重新拉取
+    fetchKey() {
+      return [this.deviceId, this.start, this.end].join('_');
+    }
+  },
+  mounted() {
+    // 延迟拉取：等页面布局稳定后再初始化 canvas，避免容器尺寸测量为 0
+    setTimeout(() => {
+      this.fetchAnalysis();
+    }, 300);
+  },
+  watch: {
+    // 设备或日期范围变化时重新拉取
+    fetchKey() {
+      this.fetchAnalysis();
+    }
+  },
+  methods: {
+    // 拉取鼠情分析数据：categories/series → 发生趋势，total → 鼠害占比
+    async fetchAnalysis() {
+      if (!this.deviceId || !this.start || !this.end) return;
+      try {
+        const res = await this.$myRequest({
+          url: ANALYSIS_URL,
+          method: 'POST',
+          data: {
+            device_id: this.deviceId,
+            start: this.start,
+            end: this.end
+          }
+        });
+        if (!res) return;
+        this.buildTrendChart(res.categories || [], res.series || []);
+        this.buildCommunity(res.total || []);
+      } catch (e) {
+        // $myRequest 已统一 toast 错误信息
+      }
+    },
+    // 发生趋势：x 轴为日期（MM-DD），系列为接口返回的各物种
+    buildTrendChart(categories, seriesList) {
+      const cats = categories.map(date => (date || '').slice(5));
+      // 无数据走空态，避免折线图一直loading
+      this.trendEmpty = !cats.length || !seriesList.length;
+      // 同名物种固定同色；新物种从色板里挑本次未用过的颜色，避免同一张图两个系列撞色
+      const usedColors = [];
+      const series = seriesList.map((item) => {
+        let color = this.nameColorMap[item.name];
+        if (!color) {
+          color = TREND_PALETTE.find(c => !usedColors.includes(c)) || TREND_PALETTE[usedColors.length % TREND_PALETTE.length];
+          this.nameColorMap[item.name] = color;
+        }
+        usedColors.push(color);
+        return {
+          name: item.name,
+          color,
+          data: (item.data || []).map(v => v || 0)
+        };
+      });
+      this.trendLegendList = series.map(s => ({ name: s.name, color: s.color }));
+      this.trendChart = { categories: cats, series };
+      // 引擎色板与系列一一对应，保证线条渲染颜色与图例/占比图一致
+      this.trendOpts.color = series.map(s => s.color);
+      if (this.trendEmpty) return;
+      // Y 轴上限随数据量调整，向上取整到 10 的倍数
+      let maxVal = 0;
+      series.forEach(s => {
+        s.data.forEach(v => {
+          if (v > maxVal) maxVal = v;
+        });
+      });
+      this.trendOpts.yAxis.data[0].max = Math.max(10, Math.ceil(maxVal / 10) * 10);
+      // 单天数据画不出折线，改为显示数据点；boundaryGap 切为 'center' 让点位/刻度居中，多天时 'justify' 贴边铺满
+      this.trendOpts.dataPointShape = cats.length === 1;
+      this.trendOpts.xAxis.boundaryGap = cats.length === 1 ? 'center' : 'justify';
+    },
+    // 鼠害占比：环形图 + 列表，物种来自 total；颜色跟随趋势图同名系列，两图保持一致
+    buildCommunity(totalList) {
+      const colorByName = {};
+      ((this.trendChart && this.trendChart.series) || []).forEach(s => {
+        colorByName[s.name] = s.color;
+      });
+      const list = totalList.map((item, index) => ({
+        name: item.name,
+        count: item.value || 0,
+        color: colorByName[item.name] || TREND_PALETTE[index % TREND_PALETTE.length]
+      }));
+      const total = list.reduce((sum, item) => sum + item.count, 0);
+      list.forEach(item => {
+        item.percent = total ? Math.round((item.count / total) * 100) : 0;
+      });
+      this.communityList = list;
+      this.communitySelected = -1;
+      this.totalCount = total;
+      // 环形图扇区颜色与列表圆点保持一致
+      this.communityOpts.color = list.map(item => item.color);
+      this.communityOpts.tooltip = { index: -1 };
+      this.communityChart = {
+        series: [{
+          data: list.map(item => ({ name: item.name, value: item.count }))
+        }]
+      };
+      // 环形中心显示占比最高的物种；无数据时清掉上次查询残留的中心文字
+      if (list.length) {
+        const top = list.reduce((a, b) => (b.count > a.count ? b : a), list[0]);
+        this.communityOpts.title.name = top.percent + '%';
+        this.communityOpts.subtitle.name = top.name;
+      } else {
+        this.communityOpts.title.name = '0%';
+        this.communityOpts.subtitle.name = '--';
+      }
+    },
+    // 点击占比列表：环形图高亮对应扇区，中心数据联动；再次点击取消选中
+    onCommunityClick(index) {
+      const item = this.communityList[index];
+      if (!item) return;
+      const next = this.communitySelected === index ? -1 : index;
+      this.communitySelected = next;
+      const target = next > -1
+        ? item
+        : this.communityList.reduce((a, b) => (b.count > a.count ? b : a), this.communityList[0]);
+      this.communityOpts.title.name = target.percent + '%';
+      this.communityOpts.subtitle.name = target.name;
+      this.communityOpts.tooltip = { index: next };
+    },
+    // 点击环形图扇区：中心数据联动，复用列表点击逻辑
+    onRingIndex(e) {
+      if (!e || typeof e.currentIndex !== 'number' || e.currentIndex < 0) return;
+      this.onCommunityClick(e.currentIndex);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.rodent-analysis {
+  width: 100%;
+}
+.analysis-card {
+  width: 100%;
+  padding: 32rpx;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 24rpx;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.analysis-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+.analysis-card__title {
+  position: relative;
+  font-size: 32rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+  font-weight: 700;
+}
+.analysis-card__extra {
+  display: flex;
+  align-items: center;
+  .peak-label {
+    font-size: 24rpx;
+    color: #656565;
+    font-family: 'Source Han Sans CN VF';
+    margin-right: 8rpx;
+  }
+  .peak-value {
+    font-size: 24rpx;
+    color: #E53935;
+    font-family: 'Source Han Sans CN VF';
+    font-weight: 700;
+  }
+}
+.chart-legend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom:-20rpx;
+  .chart-legend__dot--bar {
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 4rpx;
+    background: #FFC107;
+    margin-right: 8rpx;
+  }
+  .chart-legend__text {
+    font-size: 20rpx;
+    color: #656565;
+    font-family: 'Source Han Sans CN VF';
+  }
+}
+.chart-wrap {
+  position: relative;
+  width: 100%;
+}
+.chart-wrap--rhythm {
+  height: 400rpx;
+}
+.chart-wrap--ring {
+  width: 360rpx;
+  height: 320rpx;
+  flex-shrink: 0;
+}
+.chart-wrap--weather {
+  height: 420rpx;
+}
+// 发生趋势分析：自定义图例（曲线图例：短线 + 空心圆点）
+.trend-legend {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20rpx 24rpx;
+  background: #F5F6FA;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+}
+.trend-legend__item {
+  display: flex;
+  align-items: center;
+  width: 33.33%;
+  box-sizing: border-box;
+  padding: 8rpx 0;
+}
+.trend-legend__line {
+  position: relative;
+  width: 40rpx;
+  height: 4rpx;
+  margin-right: 12rpx;
+  flex-shrink: 0;
+}
+.trend-legend__dot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: #fff;
+  border: 4rpx solid #fff;
+  box-sizing: border-box;
+}
+.trend-legend__text {
+  font-size: 26rpx;
+  color: #042118;
+  font-family: 'Source Han Sans CN VF';
+}
+.trend-axis-label {
+  font-size: 22rpx;
+  color: #B3B9C2;
+  font-family: 'Source Han Sans CN VF';
+  margin-bottom: 4rpx;
+}
+.chart-wrap--trend {
+  height: 420rpx;
+}
+// 图表无数据空态
+.chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240rpx;
+  font-size: 26rpx;
+  color: #999999;
+  font-family: 'Source Han Sans CN VF';
+}
+// 群落结构：上下布局，环形图在上，图例列表在下
+.community-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.community-total{
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'Source Han Sans CN VF';
+  .total-value {
+    font-size: 32rpx;
+    color: #042118;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .unit {
+    font-size: 28rpx;
+    font-weight: 400;
+    color:#999999;
+    margin-left: 8rpx;
+  }
+}
+.community-list {
+  width: 90%;
+  margin-top: 16rpx;
+}
+.community-item {
+  display: flex;
+  align-items: center;
+  padding: 12rpx 12rpx;
+  border-radius: 8rpx;
+  font-family: 'Source Han Sans CN VF';
+  &.active {
+    background: #F5F6FA;
+  }
+  .community-item__dot {
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 4rpx;
+    margin-right: 12rpx;
+    flex-shrink: 0;
+  }
+  .community-item__name {
+    flex: 1;
+    font-size: 26rpx;
+    color: #042118;
+  }
+  .community-item__count {
+    font-size: 26rpx;
+    color: #042118;
+    margin-right: 16rpx;
+  }
+  .community-item__percent {
+    font-size: 26rpx;
+    color: #656565;
+    width: 72rpx;
+    text-align: right;
+  }
+}
+// 总量害虫数量
+.total-main {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 24rpx;
+  font-family: 'Source Han Sans CN VF';
+  .total-value {
+    font-size: 56rpx;
+    color: #042118;
+    font-weight: 700;
+    line-height: 1;
+    .total-unit {
+      font-size: 28rpx;
+      font-weight: 500;
+      margin-left: 8rpx;
+    }
+  }
+  .total-compare {
+    font-size: 24rpx;
+    color: #656565;
+    margin-left: 24rpx;
+    padding-bottom: 4rpx;
+    .total-compare__value {
+      color: #E53935;
+      font-weight: 700;
+    }
+  }
+}
+.total-bar {
+  .total-bar__track {
+    position: relative;
+    height: 16rpx;
+    border-radius: 8rpx;
+    background: #F1F4F8;
+    overflow: visible;
+  }
+  .total-bar__fill {
+    height: 100%;
+    border-radius: 8rpx;
+    background: #0BBC58;
+  }
+  .total-bar__marker {
+    position: absolute;
+    top: -6rpx;
+    width: 4rpx;
+    height: 28rpx;
+    border-radius: 2rpx;
+    background: #E53935;
+    transform: translateX(-50%);
+  }
+  .total-bar__scale {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8rpx;
+    font-size: 22rpx;
+    color: #999999;
+    font-family: 'Source Han Sans CN VF';
+  }
+}
+// 周/月/年切换
+.range-tabs {
+  display: flex;
+  align-items: center;
+  .range-tab {
+    width: 64rpx;
+    height: 48rpx;
+    line-height: 44rpx;
+    text-align: center;
+    font-size: 24rpx;
+    color: #042118;
+    font-family: 'Source Han Sans CN VF';
+    background: #fff;
+    border: 2rpx solid #E4E7ED;
+    box-sizing: border-box;
+    &:first-child {
+      border-radius: 8rpx 0 0 8rpx;
+    }
+    &:last-child {
+      border-radius: 0 8rpx 8rpx 0;
+    }
+    &.active {
+      background: #0BBC58;
+      border-color: #0BBC58;
+      color: #fff;
+      font-weight: 700;
+    }
+  }
+}
+</style>

pages/shuHai1/components/sse.js

@@ -0,0 +1,149 @@
+// sse.js —— 跨端 SSE 连接
+// H5 / 浏览器：直接用原生 EventSource
+// 小程序（无 EventSource）：用 uni.request 的 enableChunked 接收分块，手动解析 SSE 协议
+
+// ---- UTF-8 解码器：支持跨分片的多字节字符（中文、emoji），避免截断乱码 ----
+function createUtf8Decoder() {
+  let pending = [];
+  return function decode(bytes) {
+    const all = pending.length ? pending.concat(Array.from(bytes)) : Array.from(bytes);
+    let out = '';
+    let i = 0;
+    const len = all.length;
+    while (i < len) {
+      const c = all[i];
+      if (c < 0x80) {
+        out += String.fromCharCode(c);
+        i++;
+      } else if (c >> 5 === 0x06) {
+        // 2 字节
+        if (i + 1 < len) {
+          out += String.fromCharCode(((c & 0x1f) << 6) | (all[i + 1] & 0x3f));
+          i += 2;
+        } else { pending = all.slice(i); return out; }
+      } else if (c >> 4 === 0x0e) {
+        // 3 字节
+        if (i + 2 < len) {
+          out += String.fromCharCode(((c & 0x0f) << 12) | ((all[i + 1] & 0x3f) << 6) | (all[i + 2] & 0x3f));
+          i += 3;
+        } else { pending = all.slice(i); return out; }
+      } else if (c >> 3 === 0x1e) {
+        // 4 字节（代理对）
+        if (i + 3 < len) {
+          let cp = ((c & 0x07) << 18) | ((all[i + 1] & 0x3f) << 12) | ((all[i + 2] & 0x3f) << 6) | (all[i + 3] & 0x3f);
+          cp -= 0x10000;
+          out += String.fromCharCode(0xd800 + (cp >> 10)) + String.fromCharCode(0xdc00 + (cp & 0x3ff));
+          i += 4;
+        } else { pending = all.slice(i); return out; }
+      } else {
+        i++; // 非法字节，跳过
+      }
+    }
+    pending = [];
+    return out;
+  };
+}
+
+// ---- SSE 协议解析：以空行(\n\n)分隔事件，提取 data: 字段 ----
+function createSseParser(onData) {
+  let buffer = '';
+  return function feed(text) {
+    buffer += text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    let idx;
+    while ((idx = buffer.indexOf('\n\n')) !== -1) {
+      const raw = buffer.slice(0, idx);
+      buffer = buffer.slice(idx + 2);
+      const lines = raw.split('\n');
+      let dataStr = '';
+      for (const line of lines) {
+        if (line.indexOf('data:') === 0) {
+          dataStr += line.slice(5).replace(/^ /, '');
+        }
+      }
+      if (dataStr !== '') {
+        onData(dataStr);
+      }
+    }
+  };
+}
+
+// H5：原生 EventSource
+function connectWithEventSource(url, handlers) {
+  const eventSource = new EventSource(url);
+  eventSource.addEventListener('message', (e) => {
+    try {
+      handlers.onMessage(e.data.replace(/\\n/g, '\n'));
+    } catch (err) {
+      console.error('Error parsing SSE data:', err);
+    }
+  });
+  eventSource.addEventListener('error', (e) => {
+    handlers.onError(e);
+  });
+  return {
+    close() {
+      try { eventSource.close(); } catch (e) {}
+    }
+  };
+}
+
+// 小程序：uni.request 分块流式接收
+function connectWithUniRequest(url, handlers) {
+  const decoder = createUtf8Decoder();
+  const feed = createSseParser((dataStr) => {
+    try {
+      handlers.onMessage(dataStr.replace(/\\n/g, '\n'));
+    } catch (err) {
+      console.error('Error parsing SSE data:', err);
+    }
+  });
+  let requestTask = null;
+  let closed = false;
+
+  requestTask = uni.request({
+    url,
+    method: 'GET',
+    enableChunked: true,
+    responseType: 'text',
+    success: () => {},
+    fail: (err) => {
+      if (!closed) handlers.onError(err);
+    }
+  });
+
+  if (requestTask && typeof requestTask.onChunkReceived === 'function') {
+    requestTask.onChunkReceived((res) => {
+      const bytes = new Uint8Array(res.data);
+      const text = decoder(bytes);
+      if (text) feed(text);
+    });
+  } else {
+    handlers.onError(new Error('当前环境不支持流式接收(enableChunked / onChunkReceived)'));
+  }
+
+  return {
+    close() {
+      closed = true;
+      try { requestTask && requestTask.abort && requestTask.abort(); } catch (e) {}
+    }
+  };
+}
+
+export function createSSEConnection(url, options = {}) {
+  const handlers = { onMessage: () => {}, onError: () => {} };
+  const conn = (typeof EventSource !== 'undefined')
+    ? connectWithEventSource(url, handlers)
+    : connectWithUniRequest(url, handlers);
+
+  return {
+    onMessage(callback) {
+      handlers.onMessage = callback || (() => {});
+    },
+    onError(callback) {
+      handlers.onError = callback || (() => {});
+    },
+    close() {
+      conn.close();
+    }
+  };
+}

pages/shuHai1/detail.vue

@@ -0,0 +1,823 @@
+<template>
+  <view class="device-detail">
+    <view class="device-detail__header">
+      <u-icon
+        size="36"
+        class="arrow-left"
+        name="arrow-left"
+        @click="handleBack"
+      ></u-icon>
+      {{ deviceInfo.name }}
+    </view>
+    <view class="operation" @click.stop="isShowOperation = !isShowOperation">操作</view>
+    <view class="operation-container" v-if="isShowOperation" @click="closeOperationHandler">
+      <view class="operation-background"></view>
+      <view class="operation-content">
+        <!-- <view class="operation-item" v-if="isShowPhoto" @click="handlePhotoClick">
+          <image :src="photoIcon" class="operation-icon"></image>
+          拍照
+        </view> -->
+        <view class="operation-item" @click="handleServiceClick">
+          <image :src="serviceIcon" class="operation-icon"></image>
+          维修
+        </view>
+        <!-- <view class="operation-item" @click="handleSettingClick">
+          <image :src="settingIcon" class="operation-icon"></image>
+          设置
+        </view> -->
+        <!-- <view class="operation-item" @click="handleSimClick">
+          <image :src="simIcon" class="operation-icon"></image>
+          SIM卡
+        </view> -->
+        <view class="operation-item" @click="modification">
+          <image :src="editIcon" class="operation-icon"></image>
+          修改
+        </view>
+      </view>
+    </view>
+    <view class="device-detail__body">
+      <DeviceCard
+        :dataSource="deviceInfo"
+        :collectTime="time"
+        :title="deviceInfo.name"
+        :deviceType="deviceType"
+      />
+      <view class="tabs">
+        <view class="tab-container" v-if="isShowTab">
+          <view class="tab-item" :class="activeTab === 'viewImage'?'active':''" @click="handleTabClick('viewImage')">
+            图像数据
+          </view>
+          <view class="tab-item" :class="activeTab === 'pestAnalysis'?'active':''" @click="handleTabClick('pestAnalysis')">
+            鼠情分析
+          </view>
+          <!-- <view class="tab-item" :class="activeTab === 'aiAnalysis'?'active':''" @click="handleTabClick('aiAnalysis')">
+            设备预警
+          </view> -->
+          <!-- <view class="tab-item" :class="activeTab === 'deviceData'?'active':''" @click="handleTabClick('deviceData')">
+            设备数据
+          </view> -->
+        </view>
+        <view class="select-timer-container">
+          <view class="select-year">
+            <view class="select-year-item" @click="showPicker = true">
+              {{ currentYear }}
+              <u-icon name="arrow-down" size="18" class="arrow-down"></u-icon>
+            </view>
+          </view>
+          <view class="tabs-timer-container" @click="showCalendar">
+            <block v-if="isRangeDate">
+              <view class="tabs-timer-item">
+                {{startDate}}
+              </view>
+              至
+              <view class="tabs-timer-item">
+                {{endDate}}
+              </view>
+            </block>
+            <block v-else>
+              <view class="tabs-timer-item">
+                {{imageDate}}
+              </view>
+            </block>
+            <u-icon name="calendar" size="36" class="calendar-icon"></u-icon>
+          </view>
+        </view>
+      </view>
+      <view v-show="activeTab === 'pestAnalysis'" class="tab-content">
+        <PestDiscern
+          :total="total"
+          :pest_order="pest_order"
+        />
+        <RodentAnalysis :active="activeTab === 'pestAnalysis'" :device-id="deviceInfo.id" :start="analysisStart" :end="analysisEnd" />
+        <!-- <PestArchive
+          :pest_info="pestInfo"
+        /> -->
+        <!-- <view v-if="!pests.length">
+          <u-empty text="暂无数据"></u-empty>
+        </view> -->
+      </view>
+      <view class="tabs" v-if="activeTab === 'viewImage'">
+        <view class="tab-container">
+          <view class="tab-item" :class="imageTab === 'viewImage'?'active':''" @click="handleImageTabClick('viewImage')">
+            监测图像(前后左右)
+          </view>
+          <view class="tab-item" :class="imageTab === 'downImage'?'active':''" @click="handleImageTabClick('downImage')">
+            监测图像(下)
+          </view>
+        </view>
+        <view v-show="imageTab === 'viewImage'">
+          <!-- 实现下拉加载 -->
+           <scroll-view class="scroll-view" scroll-y style="height: 60vh;" @scrolltolower="handleReachBottom">
+            <photoImage
+              :images="imageList"
+              :pestList="pestList"
+              :disableShow="disableShow"
+              :ding_one_device_id="ding_one_device_id"
+              :ding_three_device_id="ding_three_device_id"
+              :ding_two_device_id="ding_two_device_id"
+              @changeTab="changeTab"
+              :currentYear="currentYear"
+              :deviceInfo="deviceInfo"
+            />
+          </scroll-view>
+        </view>
+        <view v-show="imageTab === 'downImage'">
+          <scroll-view class="scroll-view" scroll-y style="height: 60vh;">
+            <downImage :images="downImageList" :deviceInfo="deviceInfo" />
+          </scroll-view>
+        </view>
+      </view>
+      <view v-if="activeTab === 'aiAnalysis'">
+        <AiChat
+          :pestMessage="pestMessage"
+        />
+      </view>
+      <view v-if="activeTab === 'deviceData'">
+        <DeviceData
+          :deviceInfo="deviceInfo"
+          :polylineList="polylineList"
+          :deviceHistoryList="deviceHistoryList"
+          :totalPage="totalPage"
+          :currentPage="page"
+          :page_size="page_size"
+          @prevPage="prevPage"
+          @nextPage="nextPage"
+        />
+      </view>
+    </view>
+    <u-calendar v-model="show" :mode="calendarMode" range-color="#999" btn-type="success" active-bg-color="#0BBC58" range-bg-color="rgba(11,188,88,0.13)" @change="handleChange" :max-date="maxDate" :min-date="minDate"></u-calendar>
+    <u-picker v-model="showPicker" mode="selector" :range="selectorRange" range-key="id" :default-selector="[0]" @confirm="confirmHandler"></u-picker>
+  </view>
+</template>
+<script>
+import DeviceCard from './components/DeviceCard.vue';
+import PestDiscern from './components/pestDiscern.vue';
+import PestArchive from './components/pestArchive.vue';
+import photoImage from './components/photoImage.vue';
+import downImage from './components/downImage.vue';
+import DeviceData from './components/deviceData.vue';
+import AiChat from './components/aiChat.vue';
+import RodentAnalysis from './components/rodentAnalysis.vue';
+
+export default {
+  components: {
+    DeviceCard,
+    PestDiscern,
+    AiChat,
+    PestArchive,
+    photoImage,
+    downImage,
+    DeviceData,
+    RodentAnalysis,
+  },
+  data(){
+    return {
+      isShowTab:false,
+      showPicker: false,
+      disableShow: false,
+      isShowOperation: false,
+      photoIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/photoIcon.png',
+      editIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/editIcon.png',
+      serviceIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/serviceIcon.png',
+      simIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/simIcon.png',
+      settingIcon:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newImg/home/settingIcon.png',
+      totalPage:0,
+      currentYear: new Date().getFullYear(),
+      selectorRange: [],
+      maxDate: this.formatDate(new Date()),
+      minDate: this.formatDate(new Date(new Date().getFullYear(), 0, 1)),
+      show: false,
+      showSim: false,
+      // 鼠情分析/设备数据用的时间区间：结束为今天，开始为7天前 格式2026-01-01
+      startDate: this.formatDate(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)),
+      endDate: this.formatDate(new Date()),
+      // 图像数据用单日，默认今天（onLoad会按time_folder接口更新为最近有数据的日期）
+      imageDate: this.formatDate(new Date()),
+      imageList: [],
+      downImageList: [],
+      pest_order:{},
+      pestMessage:'',
+      deviceInfo: {},
+      time: '',
+      activeTab: 'pestAnalysis',
+      // 图像数据内的子切换：viewImage-前后左右 downImage-下
+      imageTab: 'viewImage',
+      deviceType: '',
+      camera_id: '',
+      location: '',
+      total: 0,
+      imgTotal: 0,
+      page:1,
+      is_pest:'',
+      page_size:24,
+      pestList:[],
+      pests:[],
+      polylineList:[],
+      isShowPhoto:false,
+      deviceHistoryList:[],
+      ding_one_device_id:'',
+      ding_three_device_id:'',
+      ding_two_device_id:''
+    }
+  },
+  computed: {
+    // 鼠情分析/设备数据用区间选择，图像数据用单日选择
+    isRangeDate() {
+      return this.activeTab === 'pestAnalysis' || this.activeTab === 'deviceData';
+    },
+    calendarMode() {
+      return this.isRangeDate ? 'range' : 'date';
+    },
+    // 鼠情分析查询范围（秒级时间戳）
+    analysisStart() {
+      return this.startDate ? new Date(this.startDate + ' 00:00:00').getTime() / 1000 : 0;
+    },
+    analysisEnd() {
+      return this.endDate ? new Date(this.endDate + ' 23:59:59').getTime() / 1000 : 0;
+    }
+  },
+  async onLoad(options){
+    this.deviceInfo = JSON.parse(options.info);
+    const { ding_one_device_id, ding_three_device_id, ding_two_device_id } = this.deviceInfo;
+    this.ding_one_device_id = ding_one_device_id;
+    this.ding_three_device_id = ding_three_device_id;
+    this.ding_two_device_id = ding_two_device_id;
+    // 先取有数据的日期，默认选中最近的一天，再加载各模块数据
+    await this.initDateFolder();
+    this.getPestAnalysis();
+    this.isShow();
+    const currentYear = new Date().getFullYear();
+    this.selectorRange = [];
+    for(let i = 0;i<50;i++){
+      const item = {
+        label: currentYear - i,
+        id: currentYear - i
+      }
+      this.selectorRange.push(item);
+    }
+  },
+  methods: {
+    formatePestMessage(data) {
+      if (data.length === 0) {
+        this.pestMessage = '';
+        return;
+      }
+      this.pestMessage = `当前设备位置为${this.deviceInfo.address}，在${this.startDate}至${this.endDate} 监测到的害虫如下：`;
+      data.map((item, index) => {
+        if(index === data.length - 1){
+          this.pestMessage += `${item.name}：${item.value}头.`;
+        } else {
+          this.pestMessage += `${item.name}：${item.value}头,`;
+        }
+      });
+    },
+    handleReachBottom(){
+      if (this.activeTab === 'viewImage') {
+        if(this.imageList.length >= this.imgTotal){
+          return
+        }
+        this.initImageList(true);
+      }
+    },
+    handleSimClick(){
+      // this.showSim = true;
+      //`/pages/deviceDetails/weatherStation/${type}?deviceInfo=${encodeURIComponent(JSON.stringify(this.deviceInfo))}`
+      uni.navigateTo({
+        url:
+          '/pages/deviceDetails/weatherStation/simDetail?deviceInfo=' +
+          encodeURIComponent(JSON.stringify(this.deviceInfo))
+      }); 
+    },
+		modification() {
+      uni.navigateTo({
+        url:
+          '/pages/equipList2/seabox/modification?data=' +
+          JSON.stringify(this.deviceInfo) +
+          '&id=' +
+          this.deviceInfo.type,
+      }); 
+    },
+    async handlePhotoClick(){
+       const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
+        method: 'POST',
+        data: {
+          device_type_id: this.deviceInfo.type,
+          d_id: this.deviceInfo.d_id,
+          cmd: 'takephoto',
+        },
+      });
+      if(res){
+        this.$u.toast('拍照成功')
+      }
+    },
+    handleServiceClick(){
+      uni.navigateTo({
+        url: '/pages/afterSale/addafter?d_id=' + this.deviceInfo.d_id +'&device_id='+this.deviceInfo.id + '&device_type=' + this.deviceInfo.type,
+      })
+    },
+    handleSettingClick(){
+      uni.navigateTo({
+        url: '/pages/shuHai1/deviceControl?deviceId=' + this.deviceInfo.id + '&d_id=' + this.deviceInfo.d_id + '&name=' + encodeURIComponent(this.deviceInfo.name || ''),
+      });
+    },
+    closeOperationHandler(){
+      this.isShowOperation = false;
+    },
+    isShow(){
+      // disable == 0 或者 device_model == 15 表示不可以查看
+      if(!this.deviceInfo.d_id){
+        return false;
+      }
+      let showStatus = true;
+      if(this.deviceInfo.device_model == 15 || this.deviceInfo.device_model == 12){
+        showStatus = false;
+      }
+      if(showStatus){
+        this.activeTab = 'pestAnalysis';
+      }else{
+        this.activeTab = 'deviceData';
+      }
+      this.initAction();
+      this.isShowTab = showStatus;
+      if(this.deviceInfo.disable == 0){
+        this.disableShow = false;
+        if(showStatus){
+          this.activeTab = 'viewImage';
+          this.handleTabClick('viewImage');
+        }
+      }else{
+        this.disableShow = true;
+      }
+    },
+    prevPage(e){
+      if(e == 1){
+        return
+      }
+      this.page = e-=1;
+      this.getDeviceHistoryData();
+    },
+    nextPage(e){
+      if(e * this.page_size >= this.totalPage){
+        return
+      }
+      this.page = e+=1;
+      this.getDeviceHistoryData();
+    },
+    changeTab(camera_id){
+      this.camera_id = camera_id;
+      this.initImageList();
+    },
+    confirmHandler(e){
+      this.currentYear = this.selectorRange[e].id;
+      if(this.calendarMode === 'range'){
+        // 区间选择：结束日期保持月日仅切换年份，开始日期为结束日期前7天
+        const timeDate = this.currentYear + '-' + this.endDate.split('-')[1] + '-' + this.endDate.split('-')[2];
+        this.endDate = this.formatDate(new Date(timeDate));
+        this.startDate = this.formatDate(new Date(new Date(this.endDate).getTime() - 7 * 24 * 60 * 60 * 1000));
+      }else{
+        // 单日选择：保持月日不变，仅切换年份
+        const timeDate = this.currentYear + '-' + this.imageDate.split('-')[1] + '-' + this.imageDate.split('-')[2];
+        this.imageDate = this.formatDate(new Date(timeDate));
+      }
+      if(this.currentYear == new Date().getFullYear()){
+        this.maxDate = this.formatDate(new Date());
+        this.minDate = this.formatDate(new Date(new Date().getFullYear(), 0, 1));
+      }else{
+        this.maxDate = this.formatDate(new Date(this.currentYear, 11, 31));
+        this.minDate = this.formatDate(new Date(this.currentYear, 0, 1));
+      }
+      this.initAction();
+      this.showPicker = false;
+    },
+    // 格式化日期为YYYY-MM-DD格式，月份和日期小于10时前面加0
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+    handleChange(e){
+      if(this.calendarMode === 'range'){
+        this.startDate = e.startDate;
+        this.endDate = e.endDate;
+      }else{
+        this.imageDate = e.result;
+      }
+      this.page = 1;
+      this.initAction();
+    },
+    showCalendar(){
+      this.show = true;
+    },
+    handleBack() {
+      uni.navigateBack({
+        delta: 1
+      });
+    },
+    initAction(){
+      // this.pest_order = 
+      if(this.activeTab === 'pestAnalysis'){
+        this.getPestAnalysis();
+      }else if(this.activeTab === 'aiAnalysis'){
+        this.getAiAnalysis();
+      }else if(this.activeTab === 'viewImage'){
+        if(this.imageTab === 'viewImage'){
+          this.initPest();
+          this.initImageList();
+        }else{
+          this.initDownImageList();
+        }
+      }else if(this.activeTab === 'deviceData'){
+        this.getPolylineData();
+        this.getDeviceHistoryData();
+      }
+    },
+    getAiAnalysis(){
+
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab;
+      this.initAction();
+    },
+    // 图像数据内的子切换，不影响上方 图像数据/鼠情分析 的选中状态
+    handleImageTabClick(tab) {
+      if(this.imageTab === tab){
+        return
+      }
+      this.imageTab = tab;
+      this.initAction();
+    },
+    async initImageList(isLoadMore){
+      if(isLoadMore){
+        this.page++;
+      }
+      uni.showLoading({
+        title: '加载中',
+      })
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_group_imgs',
+        method: 'POST',
+        data: {
+          device_id: this.deviceInfo.id,
+          start: new Date(this.imageDate + ' 00:00:00').getTime()/1000,// 秒级时间戳
+          end: new Date(this.imageDate + ' 23:59:59').getTime()/1000,// 秒级时间戳
+          page: this.page,
+          page_number: this.page_size,
+        },
+      });
+      const data = res?.data || [];
+      uni.hideLoading();
+      this.imgTotal = res?.total || 0;
+      if (isLoadMore) {
+        this.imageList = [...this.imageList, ...data];
+      } else {
+        this.imageList = data;
+      }
+    },
+    async initDownImageList(){
+      uni.showLoading({
+        title: '加载中',
+      })
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_down_imgs',
+        method: 'POST',
+        data: {
+          device_id: this.deviceInfo.id,
+          start: new Date(this.imageDate + ' 00:00:00').getTime()/1000,// 秒级时间戳
+          end: new Date(this.imageDate + ' 23:59:59').getTime()/1000,// 秒级时间戳
+        },
+      });
+      uni.hideLoading();
+      this.downImageList = res?.data || [];
+    },
+    // 获取有数据的日期，默认选中最近的一天
+    async initDateFolder(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_time_folder',
+        method: 'POST',
+        data: {
+          device_id: this.deviceInfo.id,
+        },
+      });
+      // 返回结构：[{ "2026": { "01": [3] } }, { "2025": { "12": [13], ... } }]
+      const folders = res?.data || [];
+      const dates = [];
+      folders.forEach(yearItem => {
+        for(const year in yearItem){
+          const months = yearItem[year] || {};
+          for(const month in months){
+            (months[month] || []).forEach(day => {
+              dates.push(`${year}-${month}-${String(day).padStart(2, '0')}`);
+            });
+          }
+        }
+      });
+      if(!dates.length){
+        return;
+      }
+      // YYYY-MM-DD 格式可直接按字符串比较
+      dates.sort((a, b) => b.localeCompare(a));
+      const today = this.formatDate(new Date());
+      // 日历最大可选今天，数据日期超过今天时取今天
+      this.imageDate = dates[0] > today ? today : dates[0];
+    },
+    async initPest(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.new_cbd.pest_type_list',
+        method: 'POST',
+        data:{
+          page:1,
+          page_size:999999,
+          device_id: this.deviceInfo.id,
+          identify_model: 'B',
+          time_begin: this.formatDate(new Date(this.imageDate)) + ' 00:00:00',// 格式化开始时间YYYY-MM-DD HH:MM:SS
+          time_end: this.formatDate(new Date(this.imageDate)) + ' 23:59:59',// 格式化结束时间YYYY-MM-DD HH:MM:SS
+        },
+      });
+      const data = res?.data || [];
+      this.pestList = data
+    },
+    async getPolylineData(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_polyline_data',
+        method: 'POST',
+        data: {
+          device_id: this.deviceInfo.id,
+          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,// 秒级时间戳
+          end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,
+        },
+      });
+      const data = res || [];
+      this.polylineList = data
+    },
+    async getDeviceHistoryData(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_device_data',
+        method: 'POST',
+        data: {
+          device_id: this.deviceInfo.id,
+          start_time: new Date(this.startDate + ' 00:00:00').getTime()/1000,// 秒级时间戳
+          end_time: new Date(this.endDate + ' 23:59:59').getTime()/1000,
+          page: this.page,
+          page_size: this.page_size,
+        },
+      });
+      const data = res || [];
+      // 接口未返回总条数，按返回条数估算：不足一页视为最后一页
+      if (data.length < this.page_size) {
+        this.totalPage = (this.page - 1) * this.page_size + data.length;
+      } else {
+        this.totalPage = Math.max(this.totalPage, (this.page + 1) * this.page_size);
+      }
+      this.deviceHistoryList = data
+    },
+    async getPestAnalysis(){
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=forecast.shuhai.shuhai_analysis',
+        method: 'POST',
+        data: {
+        device_id: this.deviceInfo.id,
+        start: this.analysisStart,// 秒级时间戳
+        end: this.analysisEnd,// 秒级时间戳
+        },
+      });
+      // total:[{name,value}] → pest_order:{name:value}，供识别统计/物种图表tabs使用
+      const totalList = res?.total || [];
+      const pest_order = {};
+      totalList.forEach(item => {
+        pest_order[item.name] = item.value || 0;
+      });
+      const total = totalList.reduce((sum, item) => sum + (item.value || 0), 0);
+      this.pests = [];
+      for(let key in pest_order){
+        this.pests.push({
+          name: key,
+          percent: total ? (pest_order[key] / total) * 100 : 0
+        })
+      }
+      this.pest_order = pest_order;
+      this.formatePestMessage([...totalList].reverse());
+      this.total = total;
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep .u-calendar__action{
+  display:flex;
+  justify-content: space-between;
+}
+::v-deep .u-hover-class{
+  .u-calendar__content__item__inner{
+    color:#aaa !important;
+  }
+}
+.operation-container{
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+}
+.operation{
+  position: fixed;
+  top: 260rpx;
+  right: 0;
+  z-index: 999;
+  width:48rpx;
+  height: 100rpx;
+  line-height: 50rpx;
+  border-radius: 8px 0 0 8px;
+  border-top: 4rpx solid #FFF;
+  border-bottom: 4rpx solid #FFF;
+  border-left: 4rpx solid #FFF;
+  background: #dddfe6a3;
+  color: #515153;
+  text-align: center;
+  font-family: "Source Han Sans CN VF";
+  font-size: 24rpx;
+  font-weight: 500;
+  writing-mode: vertical-rl;
+}
+.operation-background{
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 998;
+  background: #00000040;
+}
+.operation-content{
+  position: fixed;
+  top: 240rpx;
+  right: 80rpx;
+  height: 126rpx;
+  display: flex;
+  padding: 16rpx 32rpx;
+  align-items: center;
+  gap: 64rpx;
+  z-index: 999;
+  border-radius: 32rpx;
+  border: 2rpx solid #FFF;
+  background: #FFF;
+  backdrop-filter: blur(8rpx);
+  .operation-item{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+    text-align: center;
+    font-family: "Source Han Sans CN VF";
+    font-size: 24rpx;
+    font-weight: 400;
+  }
+  .operation-icon{
+    width: 58rpx;
+    height: 58rpx;
+  }
+}
+.device-detail {
+  display: flex;
+  width: 100%;
+  min-height: calc(100vh - 112rpx);
+  padding-top: 112rpx;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
+  .device-detail__header {
+    width: 100%;
+    font-size: 28rpx;
+    color: #999;
+    color: #042118;
+    font-family: 'Source Han Sans CN VF';
+    font-weight: 700;
+    position: relative;
+    text-align: center;
+    .arrow-left {
+      position: absolute;
+      left: 32rpx;
+      margin-right: 12rpx;
+    }
+  }
+  .device-detail__body {
+    width: calc(100% - 64rpx);
+    margin: 0 auto;
+    border-radius: 16rpx;
+    overflow-x: hidden;
+    overflow-y: auto;
+    // 隐藏滚动条
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .tab-content{
+    width: 100%;
+    padding-bottom: 32rpx;
+  }
+  .tabs {
+    background: #ffffff;
+    margin: 24rpx 0;
+    border-radius: 16rpx;
+    padding: 16rpx 0;
+    padding-top: 0;
+    .tab-container{
+      display: flex;
+      width: 100%;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      font-size: 28rpx;
+      font-weight: 700;
+      color: #042118;
+      font-family: 'Source Han Sans CN VF';
+    }
+    .select-timer-container{
+      display:flex;
+      align-items: center;
+      padding-left: 32rpx;
+      .select-year{
+        width: 110rpx;
+        text-align: center;
+        height: 64rpx;
+        border-radius: 32rpx;
+        font-family: 'Source Han Sans CN VF';
+        line-height: 64rpx;
+        background: #F1F4F8;
+        padding: 0 32rpx;
+        .select-year-item{
+          color: #656565;
+          font-size: 24rpx;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+        }
+      }
+    }
+    .tabs-timer-container{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: calc(100% - 206rpx);
+      height: 64rpx;
+      line-height: 64rpx;
+      text-align: center;
+      font-size: 24rpx;
+      font-weight: 500;
+      font-family: 'Source Han Sans CN VF';
+      border-radius: 32rpx;
+      background: #F1F4F8;
+      padding: 0 32rpx;
+      color: #656565;
+      margin: 16rpx;
+      position: relative;
+      white-space: nowrap;
+      .tabs-timer-item{
+        width: auto;
+        flex-shrink: 0;
+        color: #656565;
+        text-align: center;
+        font-family: "Source Han Sans CN VF";
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+      .calendar-icon{
+        margin-left: 24rpx;
+        flex-shrink: 0;
+      }
+    }
+    .tab-item {
+      flex: 1;
+      color: #999999;
+      text-align: center;
+      font-family: "Source Han Sans CN VF";
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+    .active{
+      position: relative;
+      color: #303133;
+      text-align: center;
+      font-family: "Source Han Sans CN VF";
+      font-size: 28rpx;
+      font-weight: 700;
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+        width: 36rpx;
+        height: 36rpx;
+        border: 6rpx solid #0BBC58;
+        border-radius: 50%;
+        border-color: transparent;
+        border-bottom-color: #0BBC58;
+      }
+    }
+  }
+}
+</style>

pages/shuHai1/devicePhoto.vue

@@ -0,0 +1,523 @@
+<template>
+  <view class="device-photo-page">
+    <!-- 顶部导航栏 -->
+    <view class="device-detail__header">
+      <u-icon
+        size="36"
+        class="arrow-left"
+        name="arrow-left"
+        @click="handleBack"
+      ></u-icon>
+      查看图片
+    </view>
+
+    <!-- 主图片区域 -->
+    <view class="main-photo" v-if="currentImg.addr">
+      <movable-area class="movable-area" :style="{ height: containerHeight }">
+        <movable-view
+          :key="currentIndex"
+          class="movable-view"
+          direction="all"
+          scale="true"
+          scale-min="1"
+          scale-max="5"
+          :scale-value="movableScale"
+          :x="movableX"
+          :y="movableY"
+          @tap="onViewerTap"
+        >
+          <view class="image-container">
+            <image
+              :src="currentImg.addr"
+              class="main-photo-image"
+              mode="widthFix"
+              @load="onImageLoad"
+            />
+            <!-- 识别标记层 -->
+            <view class="bug-markers" v-if="bugMarkers.length">
+              <view
+                v-for="(marker, index) in bugMarkers"
+                :key="index"
+                class="bug-marker"
+                :style="{
+                  left: marker.x + '%',
+                  top: marker.y + '%',
+                  width: marker.width + '%',
+                  height: marker.height + '%',
+                  borderColor: marker.color
+                }"
+              >
+                <view class="bug-label" :style="{ color: marker.color }">
+                  {{ marker.id }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </movable-view>
+      </movable-area>
+      <!-- 图片来源角标：监测图像(下)显示"下"，前后左右显示type(1/2/3/4) -->
+      <view class="photo-type-badge" v-if="badgeText">{{ badgeText }}</view>
+      <view class="photo-timestamp">{{ formatDate(currentImg.addtime || addtime) }}</view>
+    </view>
+    <view class="main-photo-empty" v-else>
+      <u-empty text="暂无图片"></u-empty>
+    </view>
+
+    <!-- 缩略图预览：当前分组的所有图片 -->
+    <view class="thumbnail-preview" v-if="thumbnails.length">
+      <view class="thumbnail-scroll">
+        <view
+          class="thumbnail-item"
+          v-for="(item, index) in thumbnails"
+          :key="index"
+          :class="{ active: currentIndex == index }"
+          @click="selectThumbnail(index)"
+        >
+          <image :src="item.addr" class="thumbnail-image" mode="aspectFill" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 识别结果 -->
+    <view class="recognition-result">
+      <view class="result-title">当前图片识别结果</view>
+      <view class="result-table" v-if="pestList.length">
+        <view class="result-header">
+          <text class="header-name">鼠类名称</text>
+          <text class="header-count">数 量</text>
+        </view>
+        <view class="result-row" v-for="(pest, index) in pestList" :key="index">
+          <view class="pest-info">
+            <view class="pest-color" :style="{ backgroundColor: pest.color }"></view>
+            <view class="pest-text">
+              <view class="pest-name">{{ pest.pest_name }}</view>
+              <view class="pest-attrs" v-if="pest.attrs">{{ pest.attrs }}</view>
+            </view>
+          </view>
+          <text class="pest-count">{{ pest.pest_num }}</text>
+        </view>
+      </view>
+      <u-empty v-else text="暂无数据"></u-empty>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '查看图片',
+      addtime: '',
+      group_id: '',
+      // 图片来源角标：从监测图像(下)进入时为"下"，从前后左右进入时为空(用图片自身type)
+      photoType: '',
+      // 该分组的所有图片
+      thumbnails: [],
+      currentIndex: 0,
+      bugMarkers: [],
+      imageWidth: 0,
+      imageHeight: 0,
+      containerHeight: '300px',
+      // 主图缩放/位移受控值：双击复位 & 切图重置用（movable-view 缩放拖动后易视图卡住拖不回）
+      movableX: 0,
+      movableY: 0,
+      movableScale: 1,
+      lastTapTime: 0,
+      pestList: [],
+      colors: [
+        '#FF5951',
+        '#66EDED',
+        '#E67B3E',
+        '#6DE28B',
+        '#FFC97A',
+        '#E7EB4B',
+        '#1561F3',
+        '#FA73F5',
+        '#159AFF',
+        '#FA73F5'
+      ],
+      pestColorMap: {}, // 害虫颜色映射 {pestName: color}
+    };
+  },
+  computed: {
+    currentImg() {
+      return this.thumbnails[this.currentIndex] || {};
+    },
+    // 角标内容：优先用页面带过来的"下"，否则用当前图片的type(1/2/3/4)
+    badgeText() {
+      return this.photoType || this.currentImg.type || '';
+    },
+  },
+  onLoad(options) {
+    const { addtime, group_id } = options;
+    this.addtime = Number(addtime) || 0;
+    this.group_id = group_id || '';
+    this.photoType = options.photo_type ? decodeURIComponent(options.photo_type) : '';
+    // 取出列表页带过来的该分组全部图片
+    try {
+      const imgs = JSON.parse(uni.getStorageSync('shuhai_group_imgs') || '[]');
+      this.thumbnails = (imgs || []).filter(img => img && img.addr);
+    } catch (error) {
+      this.thumbnails = [];
+    }
+    uni.removeStorageSync('shuhai_group_imgs');
+    // 初始定位到点击的那张（监测图像(下)列表会带index）
+    const index = Number(options.index) || 0;
+    this.currentIndex = Math.min(Math.max(index, 0), Math.max(this.thumbnails.length - 1, 0));
+    this.processBugMarkers();
+    this.buildPestList();
+  },
+  methods: {
+    selectThumbnail(index) {
+      if (index === this.currentIndex) {
+        return;
+      }
+      this.currentIndex = index;
+      this.resetViewer();
+      this.processBugMarkers();
+      this.buildPestList();
+    },
+    // 双击主图复位缩放与位置：movable-view 缩放拖动后可能视图卡住、拖不回来
+    onViewerTap() {
+      const now = Date.now();
+      if (now - this.lastTapTime < 300) {
+        this.resetViewer();
+      }
+      this.lastTapTime = now;
+    },
+    resetViewer() {
+      this.movableScale = 1;
+      // 交替设一个极小值，保证属性变化能触发 movable-view 复位
+      this.movableX = this.movableX === 0 ? 0.01 : 0;
+      this.movableY = this.movableY === 0 ? 0.01 : 0;
+    },
+    // 根据当前图片的mark生成识别结果列表
+    buildPestList() {
+      const marks = this.currentImg.mark || [];
+      const pestArr = new Map();
+      marks.forEach(item => {
+        const name = item.text || '未知';
+        if (!pestArr.has(name)) {
+          pestArr.set(name, {
+            pest_name: name,
+            pest_num: 0,
+            attrs: this.getAttrs(item),
+          });
+        }
+        pestArr.get(name).pest_num++;
+      });
+      this.pestList = [...pestArr.values()].map(item => ({
+        ...item,
+        color: this.getPestColor(item.pest_name),
+      }));
+    },
+    // 拼接害虫属性信息（尾长/体长/重量，接口有字段才展示）
+    getAttrs(mark) {
+      const parts = [];
+      if (mark.tail_length) parts.push('尾长:' + mark.tail_length);
+      if (mark.body_length) parts.push('体长:' + mark.body_length);
+      if (mark.weight) parts.push('重量:' + mark.weight);
+      return parts.join('  ');
+    },
+    getPestColor(pestName) {
+      // 如果该害虫已有颜色，直接返回
+      if (this.pestColorMap[pestName]) {
+        return this.pestColorMap[pestName];
+      }
+      // 为新害虫分配颜色
+      const usedColors = Object.values(this.pestColorMap);
+      let color;
+      for (const c of this.colors) {
+        if (!usedColors.includes(c)) {
+          color = c;
+          break;
+        }
+      }
+      // 如果所有颜色都用完了，使用哈希值确定颜色
+      if (!color) {
+        const hash = pestName.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+        color = this.colors[hash % this.colors.length];
+      }
+      this.pestColorMap[pestName] = color;
+      return color;
+    },
+    onImageLoad(e) {
+      this.imageWidth = e.detail.width;
+      this.imageHeight = e.detail.height;
+
+      // 计算容器显示高度（根据屏幕宽度和图片宽高比）
+      const systemInfo = uni.getSystemInfoSync();
+      const screenWidth = systemInfo.windowWidth;
+      const containerWidth = screenWidth - 24; // 减去左右margin (24rpx ≈ 12px)
+      const displayHeight = (containerWidth / this.imageWidth) * this.imageHeight;
+      this.containerHeight = displayHeight + 'px';
+
+      // 图片加载完成后处理bugMarkers
+      this.processBugMarkers();
+    },
+    // 根据mark的坐标信息生成标记框
+    processBugMarkers() {
+      const marks = this.currentImg.mark || [];
+      if (!marks.length) {
+        this.bugMarkers = [];
+        return;
+      }
+      // 图片未加载完成时先给默认值
+      if (!this.imageWidth || !this.imageHeight) {
+        this.imageWidth = 1000;
+        this.imageHeight = 1000;
+      }
+      const scaleRatio = 2.4;
+      const markers = [];
+      marks.forEach(item => {
+        if (item.startX === undefined) {
+          return;
+        }
+        const { startX, startY, text } = item;
+        // 使用缩放比例计算标记位置和尺寸（负宽高表示从右下角画的框，做翻转）
+        const x = item.width > 0 ? (startX * scaleRatio / this.imageWidth) * 105 : ((startX + item.width) * scaleRatio / this.imageWidth) * 105;
+        const y = item.height > 0 ? (startY * scaleRatio / this.imageHeight) * 105 : ((startY + item.height) * scaleRatio / this.imageHeight) * 105;
+        const width = (item.width > 0 ? item.width : -item.width) * scaleRatio / this.imageWidth * 100;
+        const height = (item.height > 0 ? item.height : -item.height) * scaleRatio / this.imageHeight * 100;
+        markers.push({
+          id: text,
+          x,
+          y,
+          width,
+          height,
+          color: this.getPestColor(text)
+        });
+      });
+      this.bugMarkers = markers;
+    },
+    // 格式化时间
+    formatDate(dateString) {
+      const date = new Date(dateString * 1000);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    handleBack() {
+      uni.navigateBack({
+        delta: 1
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.device-photo-page {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  width: 100%;
+  padding-top: 112rpx;
+  padding-bottom: 32rpx;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
+  .device-detail__header {
+    width: 100%;
+    font-size: 28rpx;
+    color: #042118;
+    font-family: 'Source Han Sans CN VF';
+    font-weight: 700;
+    position: relative;
+    text-align: center;
+    .arrow-left {
+      position: absolute;
+      left: 32rpx;
+      margin-right: 12rpx;
+    }
+  }
+
+  /* 主图片区域 */
+  .main-photo {
+    position: relative;
+    margin: 24rpx;
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    padding: 0;
+    overflow: hidden;
+    .movable-area {
+      width: 100%;
+      overflow: hidden;
+    }
+    .movable-view {
+      width: 100%;
+      // 显式高度：movable-view 依赖宽高计算各方向拖动边界，高度缺失会导致放大后无法上下拖动
+      height: 100%;
+    }
+    .image-container {
+      position: relative;
+      width: 100%;
+    }
+    .main-photo-image {
+      width: 100%;
+      display: block;
+    }
+    /* 识别标记层 */
+    .bug-markers {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    /* 识别标记 */
+    .bug-marker {
+      position: absolute;
+      border: 2rpx solid;
+      border-radius: 4rpx;
+      pointer-events: auto;
+    }
+    /* 识别标记标签 */
+    .bug-label {
+      position: absolute;
+      top: -30rpx;
+      left: 0;
+      padding: 4rpx 8rpx;
+      border-radius: 4rpx;
+      font-size: 20rpx;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+    .photo-timestamp {
+      position: absolute;
+      bottom: 0rpx;
+      left: 0rpx;
+      width: 100%;
+      box-sizing: border-box;
+      background-color: rgba(0, 0, 0, 0.6);
+      color: #FFFFFF;
+      padding: 12rpx 16rpx;
+      font-size: 26rpx;
+    }
+    /* 图片来源角标 */
+    .photo-type-badge {
+      position: absolute;
+      top: 16rpx;
+      right: 16rpx;
+      z-index: 10;
+      background-color: rgba(0, 0, 0, 0.6);
+      color: #FFFFFF;
+      padding: 6rpx 16rpx;
+      border-radius: 8rpx;
+      font-size: 26rpx;
+    }
+  }
+  .main-photo-empty {
+    margin: 24rpx;
+    padding: 120rpx 0;
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+  }
+
+  /* 缩略图预览 */
+  .thumbnail-preview {
+    margin: 0 24rpx 24rpx;
+    .thumbnail-scroll {
+      gap: 16rpx;
+      padding-bottom: 16rpx;
+      box-sizing: border-box;
+      white-space: nowrap;
+      overflow-x: auto;
+      overflow-y: hidden;
+      width: 100%;
+      // 隐藏滚动条
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      .thumbnail-item {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 8rpx;
+        overflow: hidden;
+        border: 4rpx solid transparent;
+        display: inline-block;
+        box-sizing: border-box;
+        margin-right: 16rpx;
+        &.active {
+          border-color: #0BBC58;
+        }
+        .thumbnail-image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  /* 识别结果 */
+  .recognition-result {
+    margin: 0 24rpx 24rpx;
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    padding: 24rpx;
+
+    .result-title {
+      font-size: 28rpx;
+      font-weight: 700;
+      color: #042118;
+      margin-bottom: 24rpx;
+    }
+
+    .result-table {
+      border: 1px solid #E4E7ED;
+      border-radius: 12rpx;
+      overflow: hidden;
+
+      .result-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #F6F8FC;
+        padding: 18rpx 24rpx;
+        font-size: 26rpx;
+        font-weight: 700;
+        color: #042118;
+      }
+
+      .result-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 18rpx 24rpx;
+        border-top: 1px solid #EFF2F7;
+
+        .pest-info {
+          display: flex;
+          align-items: center;
+          .pest-color {
+            width: 16rpx;
+            height: 16rpx;
+            border-radius: 50%;
+            margin-right: 12rpx;
+            flex-shrink: 0;
+          }
+          .pest-text {
+            .pest-name {
+              font-size: 26rpx;
+              color: #042118;
+            }
+            .pest-attrs {
+              font-size: 22rpx;
+              color: #999999;
+              margin-top: 6rpx;
+            }
+          }
+        }
+
+        .pest-count {
+          font-size: 28rpx;
+          font-weight: 500;
+          color: #042118;
+        }
+      }
+    }
+  }
+}
+</style>