feat 决策

src/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue

@@ -13,6 +13,7 @@
     import {ref, onMounted, onBeforeUnmount} from 'vue'
     import * as echarts from 'echarts'
 
+    document.body.style.overflow = 'hidden';
     const props = defineProps({
         chartProps: {}
     })
@@ -163,16 +164,16 @@
 
     function init() {
         //
-        var cc =document.getElementById("cc");
-        console.log("cccccc","top:",top,"left:",left,"width:",width,"height:",height,"center_y:",center_y,"center_x",center_x)
-        cc.style.top = center_y+"px"
-        cc.style.left = center_x+"px"
+        var cc = document.getElementById("cc");
+        // console.log("cccccc", "top:", top, "left:", left, "width:", width, "height:", height, "center_y:", center_y, "center_x", center_x)
+        // cc.style.top = center_y + "px"
+        // cc.style.left = center_x + "px"
 
         let chartDiv = document.getElementById("ring-chart");
         console.log("开始注册touch事件：")
         chartDiv.addEventListener('touchstart', begin)
         chartDiv.addEventListener('touchmove', moving)
-        chartDiv.addEventListener('touchend', stopMoving)
+        // chartDiv.addEventListener('touchend', stopMoving)
     }
 
     function testMove(e) {
@@ -192,84 +193,97 @@
     //
     const beginCorner = ref(0)
 
-    function begin(event) {
+    // function begin(event) {
+    //
+    //     if (!isFinish.value) {
+    //         if (!event.targetTouches || event.targetTouches.length === 0) return;
+    //
+    //         // 获取触摸点坐标（相对于视口）
+    //         const touch = event.targetTouches[0];
+    //         const mouse_x = touch.clientX;
+    //         const mouse_y = touch.clientY;
+    //
+    //         // 获取图表容器的位置（相对于视口）
+    //         const chartRect = chart.value.getBoundingClientRect();
+    //         const center_x = chartRect.left + chartRect.width / 2;
+    //         const center_y = chartRect.top + chartRect.height / 2;
+    //
+    //         // 计算角度（调整为 ECharts 需要的坐标系）
+    //         let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y);
+    //         console.log("*********************",mouse_x, mouse_y, center_x, center_y)
+    //         // 将角度转换为 ECharts 的 startAngle 格式：
+    //         // - 0° 在右侧，顺时针方向
+    //         // - 调整为 180° 到 360° 的范围（根据你的半圆设计）
+    //         ang = (360 - ang) % 360;  // 反转方向（逆时针 → 顺时针）
+    //         ang = Math.max(180, Math.min(360, ang));  // 限制在半圆范围内
+    //
+    //         // 更新起始角度
+    //         beginCorner.value = 360 - ang;
+    //         option.value.series[0].startAngle = 180 + ang;
+    //         myChart.setOption(option.value);
+    //         isBegin.value = true;
+    //     }
+    //
+    // }
 
-        if (!isFinish.value) {
-            if (!event.targetTouches || event.targetTouches.length === 0) return;
-
-            // 获取触摸点坐标（相对于视口）
-            const touch = event.targetTouches[0];
-            const mouse_x = touch.clientX;
-            const mouse_y = touch.clientY;
-
-            // 获取图表容器的位置（相对于视口）
-            const chartRect = chart.value.getBoundingClientRect();
-            const center_x = chartRect.left + chartRect.width / 2;
-            const center_y = chartRect.top + chartRect.height / 2;
-
-            // 计算角度（调整为 ECharts 需要的坐标系）
-            let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y);
-
-            // 将角度转换为 ECharts 的 startAngle 格式：
-            // - 0° 在右侧，顺时针方向
-            // - 调整为 180° 到 360° 的范围（根据你的半圆设计）
-            ang = (360 - ang) % 360;  // 反转方向（逆时针 → 顺时针）
-            ang = Math.max(180, Math.min(360, ang));  // 限制在半圆范围内
-            console.log("*********************",ang)
-            // 更新起始角度
-            beginCorner.value = 360 - ang;
-            option.value.series[0].startAngle = 180 + ang;
-            myChart.setOption(option.value);
-            isBegin.value = true;
-        }
 
+    function begin(event) {
+        if (!event.targetTouches || event.targetTouches.length === 0) return;
+        //鼠标按下，取点
+        let mouse_x = event.targetTouches[0].pageX;
+        let mouse_y = event.targetTouches[0].pageY;
+        let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+        beginCorner.value = ang
+        option.value.series[0].startAngle = 180 - ang
+        myChart.setOption(option.value)
+        isBegin.value = true
     }
 
-
-    // function begin(event) {
-    //     //鼠标按下，取点
-    //     let mouse_x = event.targetTouches[0].pageX;
-    //     let mouse_y = event.targetTouches[0].pageY;
-    //     let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
-    //     beginCorner.value = ang
-    //     console.log("**********",180 - ang)
-    //     option.value.series[0].startAngle = 180 - ang
-    //     myChart.setOption(option.value)
-    //     isBegin.value = true
-    // }
-
     function stopMoving() {
         nextTick(() => {
             // isFinish.value = true
             // isBegin.value = false
         })
-
     }
+    function moving(event) {
+        let mouse_x = event.targetTouches[0].pageX;
+        let mouse_y = event.targetTouches[0].pageY;
+        let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+        console.log("ccccc",eang)
 
 
-    function moving(event) {
-        if (!isFinish.value && isBegin.value == true) {
-            let mouse_x = event.targetTouches[0].pageX;
-            let mouse_y = event.targetTouches[0].pageY;
-            let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
-
-            eang = (360 - eang) % 360;  // 反转方向（逆时针 → 顺时针）
-            eang = Math.max(180, Math.min(360, eang));  // 限制在半圆范围内
-            eang = 360 - eang
-            if (eang >= 0 && eang <= 180) {
-                if (eang >= 0 && eang <= 90) {
-                    option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9
-                    option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9
-                } else {
-                    option.value.series[0].data[0].value = (eang) * 5 / 9
-                    option.value.series[0].data[1].value = 100 - (eang) * 5 / 9
-                }
-                myChart.setOption(option.value)
-            }
-        }
 
+        if (eang >= 0 && eang <= 180) {
+            option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9
+            option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9
+        }
+        myChart.setOption(option.value)
     }
 
+
+    // function moving(event) {
+    //     if (!isFinish.value && isBegin.value == true) {
+    //         let mouse_x = event.targetTouches[0].pageX;
+    //         let mouse_y = event.targetTouches[0].pageY;
+    //         let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+    //
+    //         eang = (360 - eang) % 360;  // 反转方向（逆时针 → 顺时针）
+    //         eang = Math.max(180, Math.min(360, eang));  // 限制在半圆范围内
+    //         eang = 360 - eang
+    //         if (eang >= 0 && eang <= 180) {
+    //             if (eang >= 0 && eang <= 90) {
+    //                 option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9
+    //                 option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9
+    //             } else {
+    //                 option.value.series[0].data[0].value = (eang) * 5 / 9
+    //                 option.value.series[0].data[1].value = 100 - (eang) * 5 / 9
+    //             }
+    //             myChart.setOption(option.value)
+    //         }
+    //     }
+    //
+    // }
+
 </script>
 
 <style scoped>

src/views/xjc-integratedmachine/wakeup/rainbow/index.vue

@@ -32,8 +32,8 @@ function setHeadinfo(){
 }
 
 const chartPrpps1 = ref({
-  top : 0,
-  left : 94,
+  top : 219,
+  left : 190,
   width : 1700,
   height : 1700,
   borderColor : "#998877",