sys5923812@126.com 1 semana atrás
pai
commit
c048f482f0

+ 25 - 18
src/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue

@@ -1,8 +1,7 @@
 <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="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>
 
         <!--<div id="ring-chart" ref="chart" class="ring-chart"-->
         <!--@mousedown="begin" @mousemove="moving" @mouseup="stopMoving"-->
@@ -38,13 +37,13 @@
     const initChart = () => {
         if (!chart.value) return
 
-        myChart = echarts.init(chart.value,null,{width:width,height:height})
+        myChart = echarts.init(chart.value, null, {width: width, height: height})
 
         option.value = {
 
             series: [{
                 type: 'pie',
-                radius: [radiusMax,radiusMin],
+                radius: [radiusMax, radiusMin],
                 startAngle: 180,
                 endAngle: 360,
                 avoidLabelOverlap: false,
@@ -163,12 +162,19 @@
     const center_y = top + height / 2
 
     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"
+
         let chartDiv = document.getElementById("ring-chart");
         console.log("开始注册touch事件:")
         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;
@@ -187,7 +193,8 @@
     const beginCorner = ref(0)
 
     function begin(event) {
-        if(!isFinish.value){
+
+        if (!isFinish.value) {
             if (!event.targetTouches || event.targetTouches.length === 0) return;
 
             // 获取触摸点坐标(相对于视口)
@@ -208,6 +215,7 @@
             // - 调整为 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;
@@ -231,12 +239,11 @@
     // }
 
     function stopMoving() {
-        nextTick(()=>{
-            isFinish.value = true
-            isBegin.value = false
+        nextTick(() => {
+            // isFinish.value = true
+            // isBegin.value = false
         })
 
-
     }
 
 
@@ -250,12 +257,12 @@
             eang = Math.max(180, Math.min(360, eang));  // 限制在半圆范围内
             eang = 360 - eang
             if (eang >= 0 && eang <= 180) {
-                if(eang >=0 && eang <=90){
+                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
+                } 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)
             }
@@ -268,7 +275,7 @@
 <style scoped>
     .chart-container {
         position: relative;
-        width: 1832px;
+        width: 1700px;
         height: 910px;
         display: flex;
         flex-direction: column;
@@ -277,11 +284,11 @@
     }
 
     .ring-chart {
-        width: 1704px;
+        width: 1700px;
         height: 910px;
         cursor: pointer;
-         border: 1px solid white;
-         margin-top: 219px;
+        border: 1px solid white;
+        margin-top: 219px;
     }
 
     .instructions {

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

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