feat 决策

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

@@ -1,9 +1,8 @@
 <template>
     <div class="chart-container">
-     <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"></div>
+        <!--      //圆心-->
+        <!--        <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>-->
 
 
         <!--<div id="ring-chart" ref="chart" class="ring-chart"-->
@@ -193,7 +192,11 @@
 
 
     //
+
     const beginCorner = ref(0)
+    const beginPoint = ref({})
+    const endCorner = ref(0)
+    const endPoint = ref({})
 
     // function begin(event) {
     //
@@ -229,35 +232,76 @@
     // }
 
     function begin(event) {
+        console.log("=====", props.chartProps.status)
         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
+        if (props.chartProps.status == 'edit' && isFinish.value == true) {
+            //
+            console.log(mouse_x,"11111",mouse_x)
+            //
+            //计算一下离谁比较近
+            let d_begin = Math.pow((beginPoint.value.x - mouse_x),2)+ Math.pow((beginPoint.value.y - mouse_y),2)
+            let d_end = Math.pow((endPoint.value.x - mouse_x),2)+ Math.pow((endPoint.value.y - mouse_y),2)
+            if(d_begin <= d_end){
+                let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+                option.value.series[0].startAngle = 180 - ang
+                beginCorner.value = ang
+                beginPoint.value ={
+                    x : mouse_x,
+                    y : mouse_y
+                }
+                //
+            }else{
+                let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+                option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9 + beginCorner.value / 30
+                option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9 - beginCorner.value / 30
+                endCorner.value = eang
+                endPoint.value ={
+                    x : mouse_x,
+                    y : mouse_y
+                }
+            }
+        } else if (props.chartProps.status == 'new') {
+            let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+            beginCorner.value = ang
+            beginPoint.value = {
+                x: mouse_x,
+                y: mouse_y
+            }
+            console.log("ssss",beginPoint.value.x,beginPoint.value.y)
+            option.value.series[0].startAngle = 180 - ang
+            isBegin.value = true
+        }
         myChart.setOption(option.value)
-        isBegin.value = true
     }
+
     function stopMoving() {
         nextTick(() => {
             isFinish.value = true
             isBegin.value = false
             myChart.setOption(option.value)
         })
-        window.setTimeout(finish,1000)
+        window.setTimeout(finish, 1000)
     }
+
     function finish() {
-        alert("绘制完成!")
+        //alert("绘制完成!")
     }
+
     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)
         if (eang >= 0 && eang <= 180) {
-            option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9+ beginCorner.value/30
-            option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9 - beginCorner.value/30
+            option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9 + beginCorner.value / 30
+            option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9 - beginCorner.value / 30
+        }
+        endCorner.value = eang
+        endPoint.value = {
+            x: mouse_x,
+            y: mouse_y
         }
         myChart.setOption(option.value)
     }

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

@@ -8,10 +8,12 @@
                 </div>
             </div>
             <div id="eraser"
+                 @click="edit"
                  style="position: absolute;top:10px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: #FFFFFF;border-radius: 50%">
                 橡皮
             </div>
             <div id="save"
+                 @click="save"
                  style="position: absolute;top:80px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: green;border-radius: 50%">
                 保存
             </div>
@@ -40,6 +42,8 @@
         }
     }
 
+
+
     const chartPrpps1 = ref({
         top: 160,
         left: 90,
@@ -50,7 +54,8 @@
         bncolor: "#ffffff",
         radiusMax: '100%',
         radiusMin: '96%',
-        isFinish: false
+        isFinish: false,
+        status : 'new'
     })
 
     const position = reactive({x: 10, y: 10});
@@ -91,6 +96,13 @@
     onMounted(() => {
         setHeadinfo()
     })
+    //编辑和保存
+    function save() {
+        status.value = 'save'
+    }
+    function edit() {
+        chartPrpps1.value.status = 'edit'
+    }
 
 </script>