feat 决策

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

@@ -1,14 +1,11 @@
 <template>
     <div class="chart-container">
-        <div id="ring-chart" ref="chart" class="ring-chart"
-        ></div>
+        <div id="ring-chart" ref="chart" class="ring-chart"></div>
 
-        <div id="testDiv" style="width: 200px;height: 200px;background: #00ff00;z-index: 99999999">
 
-        </div>
 
         <!--<div id="ring-chart" ref="chart" class="ring-chart"-->
-             <!--@mousedown="begin" @mousemove="moving" @mouseup="stopMoving"-->
+        <!--@mousedown="begin" @mousemove="moving" @mouseup="stopMoving"-->
         <!--&gt;</div>-->
     </div>
 </template>
@@ -21,6 +18,8 @@
         chartProps: {}
     })
 
+    const isFinish = ref(props.chartProps.isFinish)
+
 
     const chart = ref(null)
     let myChart = null
@@ -46,10 +45,11 @@
                 type: 'pie',
                 radius: ['80%', '85%'],
                 startAngle: 180,
+                endAngle: 360,
                 avoidLabelOverlap: false,
                 itemStyle: {
                     borderRadius: 10,
-                    borderColor: '#ff0000',
+                    borderColor: '#ffff00',
                     borderWidth: 2
                 },
                 label: {
@@ -161,17 +161,13 @@
     function init() {
         let chartDiv = document.getElementById("ring-chart");
         console.log("开始注册touch事件：")
-        chartDiv.addEventListener('touchstart',begin)
-        chartDiv.addEventListener('touchmove',moving)
-        chartDiv.addEventListener('touchend',stopMoving)
-        //
-        let testDiv = document.getElementById("testDiv");
-        testDiv.addEventListener('touchmove',testMove)
+        chartDiv.addEventListener('touchstart', begin)
+        chartDiv.addEventListener('touchmove', moving)
+        chartDiv.addEventListener('touchend', stopMoving)
     }
     function testMove(e) {
         let x = e.targetTouches[0].pageX;
         let y = e.targetTouches[0].pageY;
-        console.log(x,"===",y)
     }
 
     //取点和圆心的角度
@@ -187,41 +183,82 @@
     const beginCorner = ref(0)
 
     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
-        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));  // 限制在半圆范围内
+            // 更新起始角度
+            beginCorner.value = 360 - 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() {
-        isBegin.value = false
+        nextTick(()=>{
+            isFinish.value = true
+            isBegin.value = false
+        })
+
+        alert("绘制完成")
     }
 
+
     function moving(event) {
-        if (isBegin.value == true) {
+        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) {
-                option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 18
-                option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 18
+                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)
             }
         }
 
     }
 
-    // onMounted(()=>{
-    //     nextTick(()=>{
-    //         init()
-    //     })
-    //
-    // })
-
 </script>
 
 <style scoped>

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

@@ -20,6 +20,7 @@
         bncolor : "#ffffff",
         radiusMax : '85%',
         radiusMin : '80%',
+        isFinish : false
     })
     const chartPrpps2 = ref({
         left : 50,

vite.config.js

@@ -46,8 +46,8 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          // target: 'http://localhost:8080',
-          target: 'http://192.168.3.100:8080',
+          target: 'http://localhost:8080',
+          // target: 'http://192.168.3.100:8080',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }