feat 决策

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

@@ -1,55 +1,58 @@
 <template>
     <div id="outerDiv" class="development_stage">
+        <canvas id="myCanvas" width="400" height="400" style="background: #00ff00;z-index: 9999"></canvas>
         <head-component :headinfo=headinfo></head-component>
-        <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000;margin: 0 auto;z-index: 9999999"></div>
+        <div id="cc"
+             style="position: absolute;width: 5px;height: 5px;background: #ff0000;margin: 0 auto;z-index: 99999"></div>
+
+
         <div class="page-content">
             <div style="display: flex;justify-content: center;width: 1890px;height: 912px;margin-top: 13px">
                 <div class="page-box">
 
 
-
                     <!--<div style="width: 1px;height: 1700px;border: 1px solid red;position: absolute;left:916px;top: 0px"></div>-->
                     <!--<div style="width: 850px;height: 1px;border: 1px solid green;position: absolute;left: 66px;top: 400px"></div>-->
                     <!--<div style="width: 1700px;height: 1px;border: 1px solid white;position: absolute;left: 70px;top: 906px"></div>-->
                     <FollowRingChart ref="followRingChart1" id="ring-chart1" class="ring-chart1"
                                      :chartProps="chartPrpps1"/>
                     <!--<FollowRingChart ref="followRingChar2" id="ring-chart2" class="ring-chart2"-->
-                                     <!--:chartProps="chartPrpps2"-->
-                                     <!--style="z-index: 99999999"/>-->
+                    <!--:chartProps="chartPrpps2"-->
+                    <!--style="z-index: 99999999"/>-->
                     <!--<FollowRingChart ref="followRingChart3" id="ring-chart3" class="ring-chart3"-->
-                                     <!--:chartProps="chartPrpps3"/>-->
+                    <!--:chartProps="chartPrpps3"/>-->
                     <!--<FollowRingChart ref="followRingChart4" id="ring-chart4" class="ring-chart4"-->
-                                     <!--:chartProps="chartPrpps4"/>-->
+                    <!--:chartProps="chartPrpps4"/>-->
                     <!--<FollowRingChart ref="followRingChart5" id="ring-chart5" class="ring-chart5"-->
-                                     <!--:chartProps="chartPrpps5"/>-->
+                    <!--:chartProps="chartPrpps5"/>-->
                     <!--<FollowRingChart ref="followRingChart6" id="ring-chart6" class="ring-chart6"-->
-                                     <!--:chartProps="chartPrpps6"/>-->
+                    <!--:chartProps="chartPrpps6"/>-->
                     <!--<FollowRingChart ref="followRingChart7" id="ring-chart7" class="ring-chart7"-->
-                                     <!--:chartProps="chartPrpps7"/>-->
+                    <!--:chartProps="chartPrpps7"/>-->
                     <!--<FollowRingChart ref="followRingChart8" id="ring-chart8" class="ring-chart8"-->
-                                     <!--:chartProps="chartPrpps8"/>-->
+                    <!--:chartProps="chartPrpps8"/>-->
                     <!--<FollowRingChart ref="followRingChart9" id="ring-chart9" class="ring-chart9"-->
-                                     <!--:chartProps="chartPrpps9"/>-->
+                    <!--:chartProps="chartPrpps9"/>-->
                     <!--<FollowRingChart ref="followRingChart10" id="ring-chart10" class="ring-chart10"-->
-                                     <!--:chartProps="chartPrpps10"/>-->
+                    <!--:chartProps="chartPrpps10"/>-->
                     <!--<FollowRingChart ref="followRingChart11" id="ring-chart11" class="ring-chart11"-->
-                                     <!--:chartProps="chartPrpps11"/>-->
+                    <!--:chartProps="chartPrpps11"/>-->
                     <!--<FollowRingChart ref="followRingChart12" id="ring-chart12" class="ring-chart12"-->
-                                     <!--:chartProps="chartPrpps12"/>-->
+                    <!--:chartProps="chartPrpps12"/>-->
 
                     <!--<FollowRingChart ref="followRingChart13" id="ring-chart13" class="ring-chart13"-->
-                                     <!--:chartProps="chartPrpps13"/>-->
+                    <!--:chartProps="chartPrpps13"/>-->
                     <!--<FollowRingChart ref="followRingChart14" id="ring-chart14" class="ring-chart14"-->
-                                     <!--:chartProps="chartPrpps14"/>-->
+                    <!--:chartProps="chartPrpps14"/>-->
                     <!--<FollowRingChart ref="followRingChart15" id="ring-chart15" class="ring-chart15"-->
-                                     <!--:chartProps="chartPrpps15"/>-->
+                    <!--:chartProps="chartPrpps15"/>-->
                     <!--<FollowRingChart ref="followRingChart16" id="ring-chart16" class="ring-chart16"-->
-                                     <!--:chartProps="chartPrpps16"/>-->
+                    <!--:chartProps="chartPrpps16"/>-->
 
                     <!--<FollowRingChart ref="followRingChart17" id="ring-chart17" class="ring-chart17"-->
-                                     <!--:chartProps="chartPrpps17"/>-->
+                    <!--:chartProps="chartPrpps17"/>-->
                     <!--<FollowRingChart ref="followRingChart18" id="ring-chart18" class="ring-chart18"-->
-                                     <!--:chartProps="chartPrpps18"/>-->
+                    <!--:chartProps="chartPrpps18"/>-->
                 </div>
             </div>
 
@@ -123,7 +126,7 @@
     function init() {
         centerPoint.value.x = out_width.value / 2
         centerPoint.value.y = out_height.value
-        console.log("圆心x:",centerPoint.value.x,"圆心y:",centerPoint.value.y)
+        console.log("圆心x:", centerPoint.value.x, "圆心y:", centerPoint.value.y)
         let cc = document.getElementById("cc")
         // cc.style.left = centerPoint.value.x + "px"
         // cc.style.top = centerPoint.value.y + "px"
@@ -132,17 +135,17 @@
 
         chartDivs.value = [
             document.getElementById("ring-chart1"),
-            document.getElementById("ring-chart2"),
-            document.getElementById("ring-chart3"),
-            document.getElementById("ring-chart4"),
-            document.getElementById("ring-chart5"),
-            document.getElementById("ring-chart6"),
-            document.getElementById("ring-chart7"),
-            document.getElementById("ring-chart8"),
-            document.getElementById("ring-chart9"),
-            document.getElementById("ring-chart10"),
-            document.getElementById("ring-chart11"),
-            document.getElementById("ring-chart12"),
+            // document.getElementById("ring-chart2"),
+            // document.getElementById("ring-chart3"),
+            // document.getElementById("ring-chart4"),
+            // document.getElementById("ring-chart5"),
+            // document.getElementById("ring-chart6"),
+            // document.getElementById("ring-chart7"),
+            // document.getElementById("ring-chart8"),
+            // document.getElementById("ring-chart9"),
+            // document.getElementById("ring-chart10"),
+            // document.getElementById("ring-chart11"),
+            // document.getElementById("ring-chart12"),
         ]
 
         let outerDiv = document.getElementById("outerDiv")
@@ -156,13 +159,13 @@
     function getDistance(event) {
         let mouse_x = event.targetTouches[0].pageX;
         let mouse_y = event.targetTouches[0].pageY;
-        console.log("touchX:",mouse_x,"touchY:",mouse_y)
+        console.log("touchX:", mouse_x, "touchY:", mouse_y)
         let distance = Math.sqrt((Math.pow((centerPoint.value.x - mouse_x), 2) + Math.pow((centerPoint.value.y - mouse_y), 2)))
-        console.log("total :",out_total," r1 :",raduis_half[0]," r2:",raduis_half[1])
-        console.log("半径1:",out_total - raduis_half[0],"半径2：",out_total - raduis_half[1])
+        console.log("total :", out_total, " r1 :", raduis_half[0], " r2:", raduis_half[1])
+        console.log("半径1:", out_total - raduis_half[0], "半径2：", out_total - raduis_half[1])
 
-        console.log("dis:",distance)
-        if(distance<= out_total - raduis_half[0] && distance > out_total - raduis_half[1]){
+        console.log("dis:", distance)
+        if (distance <= out_total - raduis_half[0] && distance > out_total - raduis_half[1]) {
             console.log("t1")
         }
 
@@ -189,13 +192,14 @@
         setHeadinfo()
         init()
         settingChooseChart(1)
+        initCanvas()
     })
 
     function settingChooseChart(index) {
-        chartDivs.value.forEach(function (item, index) {
-            item.style.zIndex = 1
-        })
-        chartDivs.value[index].style.zIndex = 99999
+        // chartDivs.value.forEach(function (item, index) {
+        //     item.style.zIndex = 1
+        // })
+        // chartDivs.value[index].style.zIndex = 99999
     }
 
 
@@ -529,6 +533,29 @@
         }
     }
 
+    //
+    function initCanvas() {
+        const canvas = document.getElementById("myCanvas");
+        const ctx = canvas.getContext("2d");
+
+        // 圆心和半径
+        const centerX = 200;
+        const centerY = 200;
+        const radius = 100;
+
+        // 绘制红色边框的圆
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        ctx.strokeStyle = "red";
+        ctx.lineWidth = 5;
+        ctx.stroke();
+
+        // 填充半透明黄色
+        ctx.fillStyle = "rgba(255, 255, 0, 0.5)";
+        ctx.fill();
+    }
+
+
 </script>
 
 <style scoped lang="scss">