feat 决策

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

@@ -5,12 +5,32 @@
             <canvas width="1920" height="980" style="background-color: #000000;"
                     id="can"></canvas>
         </div>
-        <div style="position: absolute;top:150px;right: 150px" v-show="!loading">
-            <el-button @click="changePaintState">{{paintStateFlagText}}</el-button>
-            <el-button @click="clear">清空</el-button>
-            <el-button @click="save(null)">保存</el-button>
-            <el-button @click="finishRepaint('new')">绘制完成</el-button>
-        </div>
+        <!--<div style="position: absolute;top:150px;right: 150px" v-show="!loading">-->
+        <!--<el-button @click="changePaintState">{{paintStateFlagText}}</el-button>-->
+        <!--<el-button @click="clear">清空</el-button>-->
+        <!--<el-button @click="save(null)">保存</el-button>-->
+        <!--<el-button @click="finishRepaint('new')">绘制完成</el-button>-->
+        <!--</div>-->
+
+        <div class="rainbow_xpc" @click="changePaintState"></div>
+        <div class="rainbow_xpc_bg" @click="changePaintState"></div>
+        <div class="rainbow_qk" @click="clear"></div>
+        <div class="rainbow_hzwc" @click="finishRepaint('new')"></div>
+        <div class="rainbow_yx"></div>
+        <div class="rainbow_bc" @click="save(null)"></div>
+
+        <div class="sf_zv"></div>
+        <div class="sf_zv_font">子女身份</div>
+        <div class="sf_xs"></div>
+        <div class="sf_xs_font">学生身份</div>
+        <div class="sf_xxz"></div>
+        <div class="sf_xxz_font">休闲者身份</div>
+        <div class="sf_gm"></div>
+        <div class="sf_gm_font">公民身份</div>
+        <div class="sf_gzz"></div>
+        <div class="sf_gzz_font">工作者身份</div>
+        <div class="sf_cjz"></div>
+        <div class="sf_cjz_font">持家身份</div>
     </div>
 
 </template>
@@ -75,9 +95,11 @@
     let startAngle73 = 0;
 
     let raduisColor = ["#000000",
-        "#ffc300", "#f72585", "#4cc9f0", "#a000ff", "#ffc9f6", "#9de617"
+        "#FFC300", "#F72585", "#4CC9F0", "#A000FF", "#FFC9F6", "#9DE617",
+        "#FFFFFF"
     ]
 
+
     let radiusHalf = new Map(
         [
             ["startAngle11", [10, 50]],
@@ -119,6 +141,7 @@
     let undoList = []; // 用于保存所有操作，用于撤销和重做
     let redoList = []; // 用于保存所有撤销的操作，用于重做
 
+
     function changes() {
         can.addEventListener('touchstart', function (el) {
             let rect = el.target.getBoundingClientRect();
@@ -265,11 +288,11 @@
             data.angle = 'startAngle63'
             calcPaintCircleFlag(17)
         }
-        if(data.startAngle == 0){
+        if (data.startAngle == 0) {
             alert("起点角度记录不完整")
-        }else if(data.angle == ''){
+        } else if (data.angle == '') {
             alert("起点轨道记录不完整")
-        }else{
+        } else {
             form.value.picData.push(data)
         }
 
@@ -510,21 +533,68 @@
     function init() {
         can = document.getElementById('can');
         context = can.getContext('2d');
+        //
+    }
+
+    function drawBack() {
+        let r = 820
+        context.lineWidth = 3;
+        context.strokeStyle = raduisColor[7]
+        context.setLineDash([]);
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, r, Math.PI, 2 * Math.PI, false);
+        context.stroke();
+        //画刻度
+        for (let angleDeg = 0; angleDeg <= 180;) {
+            const angleRad = angleDeg * Math.PI / 180;
+
+            // 直接计算坐标变化
+            const deltaX = -r * Math.cos(angleRad);  // x方向变化
+            const deltaY = r * Math.sin(angleRad);   // y方向变化（对边长度）
+
+            const x = CENTER_X + deltaX;
+            const y = CENTER_Y - deltaY;
+            let color;
+
+            if ((Math.round(angleDeg / 1.8)) % 5 == 0) {
+                color = "#3C7EFF";
+                arc360(x, y, 3, color, 8)
+            } else {
+                color = "#ACC8FF"
+                arc360(x, y, 1, color, 5)
+            }
+
+            angleDeg = Number((angleDeg + 1.8).toFixed(1))
+
+            // console.log(`角度: ${angleDeg}°, 对边长度: ${Math.abs(deltaY).toFixed(2)}`);
+        }
+
+
     }
 
-    function arc(num) {
+    function arc360(x, y, num, color, borderWidth) {
+        context.lineWidth = borderWidth;
+        context.strokeStyle = color
+        context.setLineDash([]);
+        context.beginPath();
+        // console.log(x,y,num)
+        context.arc(x, y, num, 0, 2 * Math.PI, true);
+        context.stroke();
+    }
+
+    function arc(num, color) {
         context.lineWidth = 1;
         context.setLineDash([]);
-        context.strokeStyle = '#ffffff'
+        context.strokeStyle = color
         context.beginPath();
         context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
         context.stroke();
     }
 
-    function arcDashed(num) {
+    function arcDashed(num, color) {
         context.lineWidth = 1;
-        context.setLineDash([]);
-        context.strokeStyle = '#ffffff'
+        context.setLineDash([8, 4]);
+        context.strokeStyle = color
         context.beginPath();
         context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
         context.stroke();
@@ -571,14 +641,14 @@
 
     function drawBackground() {
         let radius = 10;
-        arc(radius);
-        for (let i = 1; i < 24; i++) {
+        arc(radius,raduisColor[1]);
+        for (let i = 1; i <= 24; i++) {
             radius = drawBackgroundOne(radius, i);
-            // arc(radius);
             if (i % 4 == 0) {
-                arc(radius);
+                let color = raduisColor[1 + Math.trunc(i / 4)];
+                arc(radius, color);
             } else {
-                arcDashed(radius)
+                arcDashed(radius, "#333333")
             }
         }
     }
@@ -656,7 +726,7 @@
     }
 
     function repaint(item) {
-        let  paintStateFlag = item.paintStateFlag
+        let paintStateFlag = item.paintStateFlag
         //第几职业
         let angleNum = item.angle.substr(10, 1)
         let color = raduisColor[parseInt(angleNum)]
@@ -673,33 +743,31 @@
         let middle = min + (max - min) / 2
         // console.log(item.angle,"=======",radius,"mmmmm",middle)
         // console.log("count:",angleCount,"middle:",middle)
-        if(paintStateFlag == true){
-            if(angleCount == 1){
+        if (paintStateFlag == true) {
+            if (angleCount == 1) {
                 paint(color, middle, startAngle, endAngle);
-            }else if(angleCount == 2){
+            } else if (angleCount == 2) {
                 paint(color, middle, startAngle, endAngle);
-                paint(color, middle-40, startAngle, endAngle);
-            }else if(angleCount == 3){
+                paint(color, middle - 40, startAngle, endAngle);
+            } else if (angleCount == 3) {
                 paint(color, middle, startAngle, endAngle);
-                paint(color, middle-40, startAngle, endAngle);
-                paint(color, middle-80, startAngle, endAngle);
+                paint(color, middle - 40, startAngle, endAngle);
+                paint(color, middle - 80, startAngle, endAngle);
             }
-        }else{
-            if(angleCount == 1){
+        } else {
+            if (angleCount == 1) {
                 paint(raduisColor[0], middle, startAngle, endAngle);
-                paint(raduisColor[0], middle+40, startAngle, endAngle);
-                paint(raduisColor[0], middle+80, startAngle, endAngle);
-            }else if(angleCount == 2){
+                paint(raduisColor[0], middle + 40, startAngle, endAngle);
+                paint(raduisColor[0], middle + 80, startAngle, endAngle);
+            } else if (angleCount == 2) {
                 paint(raduisColor[0], middle, startAngle, endAngle);
-                paint(raduisColor[0], middle+40, startAngle, endAngle);
-            }else if(angleCount == 3){
+                paint(raduisColor[0], middle + 40, startAngle, endAngle);
+            } else if (angleCount == 3) {
                 paint(raduisColor[0], middle, startAngle, endAngle);
             }
         }
 
 
-
-
     }
 
     function saveAllData(type) {
@@ -739,6 +807,7 @@
         changes();
         initRainbow({type: null});
         drawBackground();
+        drawBack()
     });
 
 
@@ -754,7 +823,6 @@
     }
 
     .development_stage {
-        background: url('@/assets/images/login/login-home-background.png') no-repeat;
         background-size: 1920px 1080px;
         z-index: 10;
         width: 100%;
@@ -780,4 +848,236 @@
     .bg-color-style1 {
         background: #FFFFFF;
     }
+
+    #can {
+        background: url('@/assets/images/wakeup/rainbow/bg.png') no-repeat;
+        background-position: center 30px;
+    }
+
+    .rainbow_xpc {
+        position: absolute;
+        width: 162.44px;
+        height: 50px;
+        top: 175.48px;
+        left: 1727.64px;
+        z-index: 999999;
+        background: url('@/assets/images/wakeup/rainbow/rainbow_xpc.png') no-repeat;
+    }
+
+    .rainbow_xpc_bg {
+        position: absolute;
+        width: 173.06px;
+        height: 45px;
+        top: 191.81px;
+        left: 1718.5px;
+        background: url('@/assets/images/wakeup/rainbow/rainbow_xpc_bg.png') no-repeat;
+    }
+
+    .rainbow_qk {
+        position: absolute;
+        width: 167.16px;
+        height: 54px;
+        top: 261.27px;
+        left: 1716.53px;
+        z-index: 999999;
+        background: url('@/assets/images/wakeup/rainbow/rainbow_qk.png') no-repeat;
+    }
+
+    .rainbow_hzwc {
+        position: absolute;
+        width: 167.16px;
+        height: 54px;
+        top: 345.27px;
+        left: 1716.53px;
+        z-index: 999999;
+        background: url('@/assets/images/wakeup/rainbow/rainbow_hzwc.png') no-repeat;
+    }
+
+    .rainbow_yx {
+        position: absolute;
+        width: 167.16px;
+        height: 54px;
+        top: 429.27px;
+        left: 1716.53px;
+        z-index: 999999;
+        background: url('@/assets/images/wakeup/rainbow/rainbow_yx.png') no-repeat;
+    }
+
+    .rainbow_bc {
+        position: absolute;
+        width: 157.33px;
+        height: 54px;
+        top: 515.27px;
+        left: 1722.43px;
+        z-index: 999999;
+        background: url('@/assets/images/wakeup/rainbow/rainbow_bc.png') no-repeat;
+    }
+
+    .sf_zv {
+        position: absolute;
+        left: 326.15px;
+        top: 147px;
+        width: 53.15px;
+        height: 25.28px;
+
+        background: #FFC300;
+        border-radius: 10px 10px 10px 10px;
+    }
+
+    .sf_zv_font {
+        position: absolute;
+        left: 397.02px;
+        top: 147px;
+        width: 95.75px;
+        height: 17px;
+
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .sf_xs {
+        position: absolute;
+        left: 532.67px;
+        top: 147px;
+        width: 53.15px;
+        height: 25.28px;
+
+        background: #F72585;
+        border-radius: 10px 10px 10px 10px;
+    }
+
+    .sf_xs_font {
+        position: absolute;
+        left: 603.53px;
+        top: 147.28px;
+        width: 95.75px;
+        height: 17px;
+
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .sf_xxz {
+        position: absolute;
+        left: 739.18px;
+        top: 147px;
+        width: 53.15px;
+        height: 25.28px;
+
+        background: #4CC9F0;
+        border-radius: 10px 10px 10px 10px;
+    }
+
+    .sf_xxz_font {
+        position: absolute;
+        left: 810.05px;
+        top: 147.55px;
+        width: 120.69px;
+        height: 17px;
+
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .sf_gm {
+        position: absolute;
+        left: 970.63px;
+        top: 147.27px;
+        width: 53.15px;
+        height: 25.28px;
+
+        background: #A000FF;
+        border-radius: 10px 10px 10px 10px;
+    }
+
+    .sf_gm_font {
+        position: absolute;
+        left: 1041.5px;
+        top: 147.55px;
+        width: 95.75px;
+        height: 17px;
+
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .sf_gzz {
+        position: absolute;
+        left: 1177.15px;
+        top: 147.27px;
+        width: 53.15px;
+        height: 25.28px;
+
+        background: #FFC9F6;
+        border-radius: 10px 10px 10px 10px;
+    }
+
+    .sf_gzz_font {
+        position: absolute;
+        left: 1248.01px;
+        top: 147.55px;
+        width: 120.69px;
+        height: 17px;
+
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .sf_cjz {
+        position: absolute;
+        left: 1408.6px;
+        top: 147.27px;
+        width: 53.15px;
+        height: 25.28px;
+
+        background: #9DE617;
+        border-radius: 10px 10px 10px 10px;
+    }
+
+    .sf_cjz_font {
+        position: absolute;
+        left: 1479.46px;
+        top: 147.55px;
+        width: 120.69px;
+        height: 17px;
+
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 20px;
+        color: #FFFFFF;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
 </style>

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.169:8080',//临时11
+          target: 'http://localhost:8080',
+          // target: 'http://192.168.3.169:8080',//临时11
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }