feat 决策

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

@@ -1,8 +1,8 @@
 <template>
     <div id="outerDiv" class="development_stage">
         <head-component :headinfo=headinfo></head-component>
-        <div class="page-content">
-            <canvas width="1700" height="900" style="border: 1px solid blue; background-color: #000000;"
+        <div class="page-content page-background">
+            <canvas width="1920" height="980" style="background-color: #000000;"
                     id="can"></canvas>
         </div>
         <div style="position: absolute;top:150px;right: 150px">
@@ -28,8 +28,8 @@
     const backgroundImage = new Image();
     // backgroundImage.src = 'http://192.168.3.100/screenshot.png'; // 替换为你的背景图片路径
 
-    let CENTER_X = 850;
-    let CENTER_Y = 900;
+    let CENTER_X = 960;
+    let CENTER_Y = 980;
     let startMouse = {x: 0, y: 0};
     let moveMouse = {x: 0, y: 0};
 
@@ -418,6 +418,16 @@
 
     function arc(num) {
         context.lineWidth = 1;
+        context.setLineDash([]);
+        context.strokeStyle = '#ffffff'
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
+        context.stroke();
+    }
+
+    function arcDashed(num) {
+        context.lineWidth = 1;
+        context.setLineDash([]);
         context.strokeStyle = '#ffffff'
         context.beginPath();
         context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
@@ -431,6 +441,7 @@
             // ElMessage.error("只能顺时针画")
             return;
         }
+        context.setLineDash([]);
         context.lineWidth = 37;
         context.strokeStyle = color;
         context.beginPath();
@@ -462,7 +473,12 @@
         arc(radius);
         for (let i = 1; i < 24; i++) {
             radius = drawBackgroundOne(radius, i);
-            arc(radius);
+            // arc(radius);
+            if(i%4==0){
+                arc(radius);
+            }else{
+                arcDashed(radius)
+            }
         }
     }
 
@@ -530,9 +546,17 @@
         .page-content {
             display:flex;
             justify-content: center;
-            padding-top: 113px;
+            padding-top: 100px;
         }
 
+        .page-background{
+            /*padding-top: 100px;*/
+            /*margin-top: 60px;*/
+            /*height: 980px;*/
+            width: 100%;
+            /*background-color: #000000;*/
+            /*border: solid red 1px;*/
+        }
 
 
     .bg-color-style1 {