refactor(cbd): 优化图表组件并修复样式问题

- 将echarts替换为u-charts以提升性能
- 修复pestDiscern组件中显示错误的数据
- 调整多个组件的样式和布局
- 优化photoImage组件的props类型定义
- 移除autoSetting组件中不必要的样式属性

pages/cb/shuifeizsFirst/autoSetting.vue

@@ -654,8 +654,6 @@ export default {
     .round-group-detail {
       margin-left: 24rpx;
       border-radius: 16rpx;
-      height: 600rpx;
-      overflow-y: auto;
       .group-detail-item {
         margin-bottom: 32rpx;
         padding: 24rpx;

pages/cb/zhamenFirst/autoSetting.vue

@@ -465,8 +465,6 @@ export default {
     .round-group-detail {
       margin-left: 24rpx;
       border-radius: 16rpx;
-      height: 600rpx;
-      overflow-y: auto;
       .group-detail-item {
         margin-bottom: 32rpx;
         padding: 24rpx;

pages/cbd/components/deviceData.vue

@@ -1082,6 +1082,7 @@ export default {
               font-weight: 400;
               color: #042118;
               text-align: center;
+              margin-right: 10rpx;
             }
           }
         }

pages/cbd/components/pestDiscern.vue

@@ -14,7 +14,7 @@
           <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">
-          {{ total }}
+          {{ item.count }}
         </view>
       </view>
     </view>
@@ -42,6 +42,7 @@ export default {
           this.pests.push({
             color: this.colors[index],
             name: key,
+            count: val[key] || 0,
             percent: (val[key] / this.total) * 100
           })
         }

pages/cbd/components/pestEchart.vue

@@ -33,14 +33,23 @@
 
       <!-- 图表区域 -->
       <view class="chart-container">
-        <div id="pestChart" class="chart-canvas"></div>
+        <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>
       </view>
     </view>
   </view>
 </template>
 
 <script>
-import * as echarts from 'echarts';
+import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
 
 let chartInstance = null;
 
@@ -68,6 +77,25 @@ export default {
       default: () => []
     },
   },
+  data() {
+    return {
+      tabs: [],
+      currentPest:'',
+      activeTab: 0,
+      dayData:[],
+      // 三个关键时期数据
+      periodData: {
+        firstDate: '-',
+        peakDate: '-',
+        lastDate: '-'
+      },
+      chartData: {},
+      // canvas 尺寸配置
+      cWidth: 650,
+      cHeight: 400,
+      pixelRatio: 1,
+    };
+  },
   watch:{
     pest_order:{
       handler(val){
@@ -105,22 +133,10 @@ export default {
       deep: true
     },
   },
-  data() {
-    return {
-      tabs: [],
-      currentPest:'',
-      activeTab: 0,
-      dayData:[],
-      // 三个关键时期数据
-      periodData: {
-        firstDate: '-',
-        peakDate: '-',
-        lastDate: '-'
-      },
-      chartData: {},
-      // 每个标签对应的数据
-      tabData: []
-    };
+  mounted() {
+    this.cWidth = uni.upx2px(650);
+    this.cHeight = uni.upx2px(400);
+    this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
   },
   methods: {
     async getPestNameDetail(name){
@@ -165,116 +181,85 @@ export default {
       });
     },
     drawChart() {
-      // 销毁已有的图表实例
-      if (chartInstance) {
-        chartInstance.dispose();
-        chartInstance = null;
-      }
-
-      // 初始化图表
-      const chartDom = document.getElementById('pestChart');
-      if (!chartDom) return;
-
-      // 确保 pest 数据是数字类型
       const dayData = this.day || [];
       this.dayData = dayData;
       const pestData = (this.pest || []).map(item => Number(item) || 0);
 
-      chartInstance = echarts.init(chartDom);
-      const option = {
-        backgroundColor: '#FFFFFF',
-        tooltip: {
-          trigger: 'axis'
-        },
+      const ctx = uni.createCanvasContext('pestChart', this);
+      chartInstance = new uCharts({
+        context: ctx,
+        type: 'line',
+        fontSize: 11,
         legend: {
           show: false
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          top: '3%',
-          containLabel: true
-        },
+        background: '#FFFFFF',
+        pixelRatio: this.pixelRatio,
+        animation: true,
+        dataLabel: false,
+        categories: dayData,
+        series: [{
+          name: '虫量',
+          data: pestData
+        }],
+        color: ['#0085FF'],
         xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: dayData,
-          axisLine: {
-            lineStyle: {
-              color: '#CCCCCC'
-            }
-          },
-          axisLabel: {
-            fontSize: 11,
-            color: '#999999'
-          },
-          splitLine: {
-            show: false
-          }
+          disableGrid: false,
+          boundaryGap: 'justify',
+          axisLine: true,
+          lineColor: '#CCCCCC',
+          fontColor: '#999999'
         },
         yAxis: {
-          type: 'value',
           min: 0,
-          minInterval: 1,
           splitNumber: 4,
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#CCCCCC'
-            }
-          },
-          axisLabel: {
-            fontSize: 11,
-            color: '#999999',
-            formatter: (value) => Math.floor(value)
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#E5E5E5',
-              type: 'dashed'
-            }
-          }
+          axisLine: true,
+          lineColor: '#CCCCCC',
+          fontColor: '#999999',
+          gridType: 'dash',
+          gridColor: '#E5E5E5'
         },
-        series: [
-          {
-            name: '虫量',
-            type: 'line',
-            smooth: true,
-            data: pestData,
-            lineStyle: {
-              color: '#0085FF',
-              width: 2
-            },
-            itemStyle: {
-              color: '#0085FF',
-              borderColor: '#0085FF',
-              borderWidth: 2
-            },
-            symbol: 'circle',
-            symbolSize: 6,
+        width: this.cWidth * this.pixelRatio,
+        height: this.cHeight * this.pixelRatio,
+        extra: {
+          line: {
+            type: 'curve',
+            width: 2,
+            activeType: 'hollow'
+          },
+          tooltip: {
+            showBox: true,
+            bgOpacity: 0.7
           }
-        ]
-      };
-      
-      chartInstance.setOption(option, true);
-      
-      // 监听窗口大小变化，调整图表大小
-      window.addEventListener('resize', () => {
-        chartInstance.resize();
+        }
       });
     },
+    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.periodData = this.tabData[index].periodData;
-      // this.chartData = this.tabData[index].chartData;
-      // 重新绘制图表
       this.$nextTick(() => {
         this.drawChart();
       });
@@ -295,7 +280,6 @@ export default {
   white-space: nowrap;
   overflow-y: hidden;
   box-sizing: border-box;
-  // 去掉滚动条
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
@@ -369,8 +353,8 @@ export default {
   overflow: hidden;
 }
 
-.chart-canvas {
+.charts {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>

pages/cbd/components/photoImage.vue

@@ -44,12 +44,12 @@ export default {
       type: Array,
       default: () => []
     },
-    id:{
-      type: String,
-      default: ''
+    deviceInfo:{
+      type: Object,
+      default: () => ({})
     },
     currentYear:{
-      type: String || Number,
+      type: String | Number,
       default: ''
     },
   },
@@ -85,7 +85,7 @@ export default {
     },
     handleClick(item) {
       uni.navigateTo({
-        url: '/pages/cbd/devicePhoto?device_id=' + item?.device_id + '&img_id=' + item?.ids + '&id=' + this.id + '&currentYear=' + this.currentYear
+        url: '/pages/cbd/devicePhoto?device_id=' + item?.device_id + '&img_id=' + item?.ids + '&id=' + this.deviceInfo.id + '&currentYear=' + this.currentYear
       })
     }
   },

pages/cbd/detail.vue

@@ -73,7 +73,7 @@
           :pestList="pestList"
           @changeTab="changeTab"
           :currentYear="currentYear"
-          :id="deviceInfo.id"
+          :deviceInfo="deviceInfo"
         />
       </view>
       <view v-if="activeTab === 'deviceData'">
@@ -238,6 +238,7 @@ export default {
       });
     },
     initAction(){
+      this.pest_order = {}
       if(this.activeTab === 'pestAnalysis'){
         this.getPestAnalysis();
       }else if(this.activeTab === 'viewImage'){
@@ -433,7 +434,7 @@ export default {
       align-items: center;
       padding-left: 32rpx;
       .select-year{
-        width: 128rpx;
+        width: 110rpx;
         text-align: center;
         height: 64rpx;
         border-radius: 32rpx;
@@ -464,11 +465,10 @@ export default {
       background: #F1F4F8;
       padding: 0 32rpx;
       color: #656565;
-      margin: 16rpx 32rpx;
+      margin: 16rpx;
       position: relative;
       .tabs-timer-item{
-        width: 40%;
-        text-align: center;
+        width: 42%;
         color: #656565;
         text-align: center;
         font-family: "Source Han Sans CN VF";

pages/cbd/devicePhoto.vue

@@ -165,6 +165,7 @@ export default {
   },
   async onLoad(options) {
     const {id,img_id,currentYear} = options
+    console.log(options,'optionsoptions')
     this.device_id = id
     this.imgOld_id = img_id
     this.currentYear = currentYear