From 9fc7f3aab5d265a5d08b0913b32faaa53162a8ef Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Mon, 19 Jan 2026 21:26:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=EF=BC=8C=E6=9B=B2=E7=BA=BF=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/other/chartFullscreen.vue | 105 +++++++++++++++++++++
 src/components/other/dataQuery.vue       | 114 +++++++++++++++++++++++
 src/components/other/index.vue           |   5 +-
 3 files changed, 221 insertions(+), 3 deletions(-)

diff --git a/src/components/other/chartFullscreen.vue b/src/components/other/chartFullscreen.vue
index cf03ef6..533cd3a 100644
--- a/src/components/other/chartFullscreen.vue
+++ b/src/components/other/chartFullscreen.vue
@@ -40,6 +40,9 @@
         type="2d"
         id="fullscreen-chart"
         :style="canvasStyle"
+        @touchend="touchEnd"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
       ></canvas>
     </view>
   </view>
@@ -132,6 +135,8 @@ onUnmounted(() => {
 const chartWidth = ref(0);
 const chartHeight = ref(0);
 const chartPixelRatio = ref(1);
+const chartTop = ref(0);
+const chartLeft = ref(0);
 
 // 初始化图表
 function initChart() {
@@ -294,6 +299,17 @@ function drawChart() {
   Taro.nextTick(() => {
     const env = Taro.getEnv();
     
+    // 获取 canvas 位置
+    const query = Taro.createSelectorQuery();
+    query.select('#fullscreen-chart').boundingClientRect();
+    query.selectViewport().scrollOffset();
+    query.exec((res) => {
+      if (res.length > 0 && res[0]) {
+        chartTop.value = res[0].top || 0;
+        chartLeft.value = res[0].left || 0;
+      }
+    });
+    
     if (env === Taro.ENV_TYPE.WEB) {
       // H5 环境
       setTimeout(() => {
@@ -336,6 +352,30 @@ function drawChart() {
             tofix: 2,
           },
           extra: {
+            tooltip: {
+              showBox: true,
+              showArrow: true,
+              showCategory: true,
+              borderWidth: 0,
+              borderRadius: 0,
+              borderColor: '#000000',
+              borderOpacity: 0.7,
+              bgColor: '#000000',
+              bgOpacity: 0.7,
+              gridType: 'solid',
+              dashLength: 4,
+              gridColor: '#CCCCCC',
+              boxPadding: 3,
+              fontSize: 13,
+              lineHeight: 20,
+              fontColor: '#FFFFFF',
+              legendShow: true,
+              legendShape: 'auto',
+              splitLine: true,
+              labelBgColor: '#FFFFFF',
+              labelBgOpacity: 0.7,
+              labelFontColor: '#666666',
+            },
             line: { type: 'curve', width: 2, activeType: 'hollow' },
           },
         });
@@ -389,6 +429,30 @@ function drawChart() {
               tofix: 2,
             },
             extra: {
+              tooltip: {
+                showBox: true,
+                showArrow: true,
+                showCategory: true,
+                borderWidth: 0,
+                borderRadius: 0,
+                borderColor: '#000000',
+                borderOpacity: 0.7,
+                bgColor: '#000000',
+                bgOpacity: 0.7,
+                gridType: 'solid',
+                dashLength: 4,
+                gridColor: '#CCCCCC',
+                boxPadding: 3,
+                fontSize: 13,
+                lineHeight: 20,
+                fontColor: '#FFFFFF',
+                legendShow: true,
+                legendShape: 'auto',
+                splitLine: true,
+                labelBgColor: '#FFFFFF',
+                labelBgOpacity: 0.7,
+                labelFontColor: '#666666',
+              },
               line: { type: 'curve', width: 2, activeType: 'hollow' },
             },
           });
@@ -396,6 +460,47 @@ function drawChart() {
     }
   });
 }
+
+// 触摸结束事件
+function touchEnd(e: any) {
+  if (!chartInstance) return;
+  
+  const x = e.mpEvent.changedTouches[0].clientX;
+  const y = e.mpEvent.changedTouches[0].clientY;
+  const tmpe = { x: x - chartLeft.value, y: y - chartTop.value };
+  e.changedTouches = [tmpe];
+  
+  if (e.touches.length == 0) {
+    chartInstance.touchLegend(e);
+    chartInstance.showToolTip(e, {
+      formatter: (item: any) => {
+        return item.name + ':' + item.data;
+      },
+    });
+  }
+}
+
+// 触摸开始事件
+function touchStart(e: any) {
+  if (!chartInstance) return;
+  
+  const x = e.mpEvent.changedTouches[0].clientX;
+  const y = e.mpEvent.changedTouches[0].clientY;
+  const tmpe = { x: x - chartLeft.value, y: y - chartTop.value };
+  e.changedTouches = [tmpe];
+  chartInstance.scrollStart(e);
+}
+
+// 触摸移动事件
+function touchMove(e: any) {
+  if (!chartInstance) return;
+  
+  const x = e.mpEvent.changedTouches[0].clientX;
+  const y = e.mpEvent.changedTouches[0].clientY;
+  const tmpe = { x: x - chartLeft.value, y: y - chartTop.value };
+  e.changedTouches = [tmpe];
+  chartInstance.scroll(e);
+}
 </script>
 
 <style lang="scss">
diff --git a/src/components/other/dataQuery.vue b/src/components/other/dataQuery.vue
index 3cc043a..20e2e31 100644
--- a/src/components/other/dataQuery.vue
+++ b/src/components/other/dataQuery.vue
@@ -45,6 +45,9 @@
         type="2d"
         id="data-query-chart"
         :style="canvasStyle"
+        @touchend="touchEnd"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
       ></canvas>
       <view v-if="!loading && (!chartData || chartData.length === 0)" class="empty-data">
         <text>暂无数据</text>
@@ -186,6 +189,8 @@ onUnmounted(() => {
 const chartWidth = ref(0);
 const chartHeight = ref(0);
 const chartPixelRatio = ref(1);
+const chartTop = ref(0);
+const chartLeft = ref(0);
 
 // 初始化图表
 function initChart() {
@@ -438,9 +443,43 @@ function drawChart() {
             tofix: 2,
           },
           extra: {
+            tooltip: {
+              showBox: true,
+              showArrow: true,
+              showCategory: true,
+              borderWidth: 0,
+              borderRadius: 0,
+              borderColor: '#000000',
+              borderOpacity: 0.7,
+              bgColor: '#000000',
+              bgOpacity: 0.7,
+              gridType: 'solid',
+              dashLength: 4,
+              gridColor: '#CCCCCC',
+              boxPadding: 3,
+              fontSize: 13,
+              lineHeight: 20,
+              fontColor: '#FFFFFF',
+              legendShow: true,
+              legendShape: 'auto',
+              splitLine: true,
+              labelBgColor: '#FFFFFF',
+              labelBgOpacity: 0.7,
+              labelFontColor: '#666666',
+            },
             line: { type: 'curve', width: 2, activeType: 'hollow' },
           },
         });
+        
+        // 获取 canvas 位置
+        const query = Taro.createSelectorQuery();
+        query.select('#data-query-chart').boundingClientRect();
+        query.exec((res) => {
+          if (res.length > 0 && res[0]) {
+            chartTop.value = res[0].top || 0;
+            chartLeft.value = res[0].left || 0;
+          }
+        });
       }, 300);
     } else {
       // 小程序环境
@@ -491,13 +530,88 @@ function drawChart() {
               tofix: 2,
             },
             extra: {
+              tooltip: {
+                showBox: true,
+                showArrow: true,
+                showCategory: true,
+                borderWidth: 0,
+                borderRadius: 0,
+                borderColor: '#000000',
+                borderOpacity: 0.7,
+                bgColor: '#000000',
+                bgOpacity: 0.7,
+                gridType: 'solid',
+                dashLength: 4,
+                gridColor: '#CCCCCC',
+                boxPadding: 3,
+                fontSize: 13,
+                lineHeight: 20,
+                fontColor: '#FFFFFF',
+                legendShow: true,
+                legendShape: 'auto',
+                splitLine: true,
+                labelBgColor: '#FFFFFF',
+                labelBgOpacity: 0.7,
+                labelFontColor: '#666666',
+              },
               line: { type: 'curve', width: 2, activeType: 'hollow' },
             },
           });
+          
+          // 获取 canvas 位置
+          const query = Taro.createSelectorQuery();
+          query.select('#data-query-chart').boundingClientRect();
+          query.exec((res) => {
+            if (res.length > 0 && res[0]) {
+              chartTop.value = res[0].top || 0;
+              chartLeft.value = res[0].left || 0;
+            }
+          });
         });
     }
   });
 }
+
+// 触摸结束事件 - 显示提示框
+function touchEnd(e: any) {
+  if (!chartInstance) return;
+  
+  const x = e.mpEvent.changedTouches[0].clientX;
+  const y = e.mpEvent.changedTouches[0].clientY;
+  const tmpe = { x: x - chartLeft.value, y: y - chartTop.value };
+  e.changedTouches = [tmpe];
+  
+  if (e.touches.length == 0) {
+    chartInstance.touchLegend(e);
+    chartInstance.showToolTip(e, {
+      formatter: (item: any) => {
+        return item.name + ':' + item.data;
+      },
+    });
+  }
+}
+
+// 触摸开始事件
+function touchStart(e: any) {
+  if (!chartInstance) return;
+  
+  const x = e.mpEvent.changedTouches[0].clientX;
+  const y = e.mpEvent.changedTouches[0].clientY;
+  const tmpe = { x: x - chartLeft.value, y: y - chartTop.value };
+  e.changedTouches = [tmpe];
+  chartInstance.scrollStart(e);
+}
+
+// 触摸移动事件
+function touchMove(e: any) {
+  if (!chartInstance) return;
+  
+  const x = e.mpEvent.changedTouches[0].clientX;
+  const y = e.mpEvent.changedTouches[0].clientY;
+  const tmpe = { x: x - chartLeft.value, y: y - chartTop.value };
+  e.changedTouches = [tmpe];
+  chartInstance.scroll(e);
+}
 </script>
 
 <style lang="scss">
diff --git a/src/components/other/index.vue b/src/components/other/index.vue
index 7fe0cdd..3929151 100644
--- a/src/components/other/index.vue
+++ b/src/components/other/index.vue
@@ -74,12 +74,11 @@
                 </nut-tag>
                 <!-- <nut-tag class="tagErr font_28" v-else> 未开启联动控制 </nut-tag> -->
               </view>
-              <view
+              <!-- <view
                 class="font_28 c_1589E9"
                 :style="{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', margin: '0 15px' }"
                 @click="setParams(item.id, item.deviceName, item.deviceType)"
-                >参数设置</view
-              >
+                >参数设置</view> -->
             </view>
             <nut-config-provider :theme-vars="themeVars">
               <view class="m_t_20 view_f">