feat 决策

src/views/xjc-integratedmachine/common/ai/TouchColor.vue

@@ -208,4 +208,4 @@
         width: 500px;
         height: 400px;
     }
-</style>
+</style>

src/views/xjc-integratedmachine/common/ai/TouchColorCanvas2.vue

@@ -0,0 +1,512 @@
+<template>
+    <div style="display: flex;justify-content: center">
+        <div style="position: absolute;top:10px;right: 4px">
+            <el-button @click="changePaintState">{{paintStateFlagText}}</el-button>
+            <el-button @click="clear">清空</el-button>
+            <el-button @click="save">保存</el-button>
+        </div>
+        <div style="display: flex;justify-content: center">
+            <canvas width="1700" height="900" style="border: 1px solid blue; background-color: white;"
+                    id="can"></canvas>
+        </div>
+    </div>
+</template>
+<script setup>
+    import {onMounted} from 'vue'
+    import * as echarts from "echarts";
+    import html2canvas from 'html2canvas';
+    import { ElMessage} from 'element-plus'
+
+    const backgroundImage = new Image();
+    // backgroundImage.src = 'http://192.168.3.100/screenshot.png'; // 替换为你的背景图片路径
+
+    let CENTER_X = 850;
+    let CENTER_Y = 900;
+    let startMouse = {x: 0, y: 0};
+    let moveMouse = {x: 0, y: 0};
+
+    // 画笔橡皮擦状态，true画笔，false橡皮
+    let paintStateFlag = true;
+    let paintStateFlagText = ref('画笔');
+
+    // 第一个职业
+    let startAngle11 = 0;
+    let startAngle12 = 0;
+    let startAngle13 = 0;
+
+    // 第二个职业
+    let startAngle21 = 0;
+    let startAngle22 = 0;
+    let startAngle23 = 0;
+
+    // 第三个职业
+    let startAngle31 = 0;
+    let startAngle32 = 0;
+    let startAngle33 = 0;
+
+    // 第四个职业
+    let startAngle41 = 0;
+    let startAngle42 = 0;
+    let startAngle43 = 0;
+
+    // 第五个职业
+    let startAngle51 = 0;
+    let startAngle52 = 0;
+    let startAngle53 = 0;
+
+    // 第六个职业
+    let startAngle61 = 0;
+    let startAngle62 = 0;
+    let startAngle63 = 0;
+
+    // 第七个职业
+    let startAngle71 = 0;
+    let startAngle72 = 0;
+    let startAngle73 = 0;
+
+    // 所有轨道绘画限制
+    let paintFlagList = [
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false,
+        false, false, false]
+
+    let undoList = []; // 用于保存所有操作，用于撤销和重做
+    let redoList = []; // 用于保存所有撤销的操作，用于重做
+
+    function changes() {
+        can.addEventListener('touchstart', function (el) {
+            let rect = el.target.getBoundingClientRect();
+            startMouse.x = el.touches[0].pageX - rect.left;
+            startMouse.y = el.touches[0].pageY - rect.top;
+            calcStartRadius();
+            can.addEventListener('touchmove', function (e) {
+                moveMouse.x = startMouse.x;
+                moveMouse.y = startMouse.y;
+                startMouse.x = e.targetTouches[0].pageX - this.offsetLeft;
+                startMouse.y = e.targetTouches[0].pageY - this.offsetTop;
+                if (startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y) {
+                    return;
+                }
+                calcEndRadius();
+            })
+        })
+        can.addEventListener('touchend', function () {
+            can.onmousemove = null;
+        })
+    }
+
+    /*计算起始点*/
+    function calcStartRadius() {
+        let sum = Math.pow(startMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - startMouse.y, 2);
+        // 第一个职业
+        if (sum < Math.pow(50, 2) && sum > Math.pow(10, 2)) {
+            startAngle11 = calcAngle();
+            calcPaintCircleFlag(0)
+        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
+            startAngle12 = calcAngle();
+            calcPaintCircleFlag(1)
+        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
+            startAngle13 = calcAngle();
+            calcPaintCircleFlag(2)
+        }
+        // 第二个职业
+        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
+            startAngle21 = calcAngle();
+            calcPaintCircleFlag(3)
+        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
+            startAngle22 = calcAngle();
+            calcPaintCircleFlag(4)
+        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
+            startAngle23 = calcAngle();
+            calcPaintCircleFlag(5)
+        }
+        // 第三个职业
+        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
+            startAngle31 = calcAngle();
+            calcPaintCircleFlag(6)
+        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
+            startAngle32 = calcAngle();
+            calcPaintCircleFlag(7)
+        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
+            startAngle33 = calcAngle();
+            calcPaintCircleFlag(8)
+        }
+        // 第四个职业
+        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
+            startAngle41 = calcAngle();
+            calcPaintCircleFlag(9)
+        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
+            startAngle42 = calcAngle();
+            calcPaintCircleFlag(10)
+        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
+            startAngle43 = calcAngle();
+            calcPaintCircleFlag(11)
+        }
+        // 第五个职业
+        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
+            startAngle51 = calcAngle();
+            calcPaintCircleFlag(12)
+        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
+            startAngle52 = calcAngle();
+            calcPaintCircleFlag(13)
+        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
+            startAngle53 = calcAngle();
+            calcPaintCircleFlag(14)
+        }
+        // 第六个职业
+        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
+            startAngle61 = calcAngle();
+            calcPaintCircleFlag(15)
+        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
+            startAngle62 = calcAngle();
+            calcPaintCircleFlag(16)
+        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
+            startAngle63 = calcAngle();
+            calcPaintCircleFlag(17)
+        }
+    }
+
+    /**
+     * 只有起始点所在轨道可以绘制
+     **/
+    function calcPaintCircleFlag(index) {
+        paintFlagList = [
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false,
+            false, false, false]
+        paintFlagList[index] = true
+        console.log(paintFlagList)
+    }
+
+    /*计算终点*/
+    function calcEndRadius() {
+        let sum = Math.pow(moveMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - moveMouse.y, 2);
+        let ret = calcAngle();
+        // 第一个职业
+        if (sum < Math.pow(50, 2) && sum > Math.pow(10, 2)) {
+            if (paintFlagList[0]) {
+                if (paintStateFlag) {
+                    paint("green", 30, startAngle11, ret);
+                } else {
+                    paint("white", 30, startAngle11, ret);
+                    paint("white", 70, startAngle11, ret);
+                    paint("white", 110, startAngle11, ret);
+                }
+            }
+        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
+            if (paintFlagList[1]) {
+                if (paintStateFlag) {
+                    paint("green", 30, startAngle12, ret);
+                    paint("green", 70, startAngle12, ret);
+                } else {
+                    paint("white", 70, startAngle12, ret);
+                    paint("white", 110, startAngle12, ret);
+                }
+            }
+        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
+            if (paintFlagList[2]) {
+                if (paintStateFlag) {
+                    paint("green", 30, startAngle13, ret);
+                    paint("green", 70, startAngle13, ret);
+                    paint("green", 110, startAngle13, ret);
+                } else {
+                    paint("white", 110, startAngle13, ret);
+                }
+            }
+        }
+        // 第二个职业
+        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
+            if (paintFlagList[3]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 165, startAngle21, ret);
+                }else{
+                    paint("white", 165, startAngle21, ret);
+                    paint("white", 205, startAngle21, ret);
+                    paint("white", 245, startAngle21, ret);
+                }
+            }
+        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
+            if (paintFlagList[4]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 165, startAngle22, ret);
+                    paint("#ffd309", 205, startAngle22, ret);
+                }else{
+                    paint("white", 205, startAngle22, ret);
+                    paint("white", 245, startAngle22, ret);
+                }
+            }
+        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
+            if (paintFlagList[5]) {
+                if(paintStateFlag){
+                    paint("#ffd309", 165, startAngle23, ret);
+                    paint("#ffd309", 205, startAngle23, ret);
+                    paint("#ffd309", 245, startAngle23, ret);
+                }else{
+                    paint("white", 245, startAngle23, ret);
+                }
+            }
+        }
+        //第三个职业
+        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
+            if (paintFlagList[6]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 300, startAngle31, ret);
+                }else{
+                    paint("white", 300, startAngle31, ret);
+                    paint("white", 340, startAngle31, ret);
+                    paint("white", 380, startAngle31, ret);
+                }
+            }
+        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
+            if (paintFlagList[7]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 300, startAngle31, ret);
+                    paint("#ffd309", 340, startAngle31, ret);
+                }else{
+                    paint("white", 340, startAngle32, ret);
+                    paint("white", 380, startAngle32, ret);
+                }
+            }
+        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
+            if (paintFlagList[8]) {
+                if(paintStateFlag){
+                    paint("#ffd309", 300, startAngle33, ret);
+                    paint("#ffd309", 340, startAngle33, ret);
+                    paint("#ffd309", 380, startAngle33, ret);
+                }else{
+                    paint("white", 380, startAngle33, ret);
+                }
+            }
+        }
+        //第四个职业
+        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
+            if (paintFlagList[9]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 435, startAngle41, ret);
+                }else{
+                    paint("white", 435, startAngle41, ret);
+                    paint("white", 475, startAngle41, ret);
+                    paint("white", 515, startAngle41, ret);
+                }
+            }
+        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
+            if (paintFlagList[10]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 435, startAngle42, ret);
+                    paint("#ffd309", 475, startAngle42, ret);
+                }else{
+                    paint("white", 475, startAngle42, ret);
+                    paint("white", 515, startAngle42, ret);
+                }
+            }
+        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
+            if (paintFlagList[11]) {
+                if(paintStateFlag){
+                    paint("#ffd309", 435, startAngle43, ret);
+                    paint("#ffd309", 475, startAngle43, ret);
+                    paint("#ffd309", 515, startAngle43, ret);
+                }else{
+                    paint("white", 515, startAngle43, ret);
+                }
+            }
+        }
+
+        //第五个职业
+        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
+            if (paintFlagList[12]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 570, startAngle51, ret);
+                }else{
+                    paint("white", 570, startAngle51, ret);
+                    paint("white", 610, startAngle51, ret);
+                    paint("white", 650, startAngle51, ret);
+                }
+            }
+        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
+            if (paintFlagList[13]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 570, startAngle52, ret);
+                    paint("#ffd309", 610, startAngle52, ret);
+                }else{
+                    paint("white", 610, startAngle52, ret);
+                    paint("white", 650, startAngle52, ret);
+                }
+            }
+        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
+            if (paintFlagList[14]) {
+                if(paintStateFlag){
+                    paint("#ffd309", 570, startAngle53, ret);
+                    paint("#ffd309", 610, startAngle53, ret);
+                    paint("#ffd309", 650, startAngle53, ret);
+                }else{
+                    paint("white", 650, startAngle53, ret);
+                }
+            }
+        }
+
+        //第六个职业
+        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
+            if (paintFlagList[15]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 705, startAngle61, ret);
+                }else{
+                    paint("white", 705, startAngle61, ret);
+                    paint("white", 745, startAngle61, ret);
+                    paint("white", 785, startAngle61, ret);
+                }
+            }
+        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
+            if (paintFlagList[16]) {
+                if(paintStateFlag) {
+                    paint("#ffd309", 705, startAngle62, ret);
+                    paint("#ffd309", 745, startAngle62, ret);
+                }else{
+                    paint("white", 745, startAngle62, ret);
+                    paint("white", 785, startAngle62, ret);
+                }
+            }
+        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
+            if (paintFlagList[17]) {
+                if(paintStateFlag){
+                    paint("#ffd309", 705, startAngle63, ret);
+                    paint("#ffd309", 745, startAngle63, ret);
+                    paint("#ffd309", 785, startAngle63, ret);
+                }else{
+                    paint("white", 785, startAngle63, ret);
+                }
+            }
+        }
+
+    }
+
+    /*计算角度0-180度*/
+    function calcAngle() {
+        let number = Math.atan2(Math.abs(CENTER_Y - startMouse.y), CENTER_X - startMouse.x);
+        let ret = number * 180 / Math.PI; //弧度转角度，方便调试
+        if (ret > 360) {
+            ret -= 360;
+        }
+        if (ret < 0) {
+            ret += 450;
+        }
+        let num = ret * Math.PI / 180 + Math.PI;
+        console.log('角度：' + num);
+        return num;
+    }
+
+    let can = "";
+    let context = "";
+
+    function init() {
+        can = document.getElementById('can');
+        context = can.getContext('2d');
+        // backgroundImage.onload = function() {
+        //     context.drawImage(backgroundImage, 0, 0, can.width, can.height);
+        // };
+    }
+
+    function arc(num) {
+        context.lineWidth = 1;
+        context.strokeStyle = 'black'
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
+        context.stroke();
+    }
+
+
+    function paint(color, radius, startAngle, endAngle) {
+        // 结束角度不能小于起始角度
+        if (endAngle <= startAngle) {
+            ElMessage.error("只能顺时针画")
+            return;
+        }
+        context.lineWidth = 37;
+        context.strokeStyle = color;
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
+        context.stroke();
+    }
+
+    function changePaintState() {
+        if (paintStateFlag) {
+            paintStateFlag = false;
+            paintStateFlagText.value = '橡皮擦'
+        } else {
+            paintStateFlag = true;
+            paintStateFlagText.value = '画笔'
+        }
+    }
+
+    function eraserState() {
+        paintStateFlag = false;
+    }
+
+    function clear() {
+        context.clearRect(0, 0, can.width, can.height);
+        drawBackground();
+    }
+
+    function drawBackground() {
+        let radius = 10;
+        arc(radius);
+        for (let i = 1; i < 24; i++) {
+            radius = drawBackgroundOne(radius, i);
+            arc(radius);
+        }
+    }
+
+    function drawBackgroundOne(innerRadius, i) {
+        if (i % 4 == 0) {
+            return innerRadius + 15;
+        } else {
+            return innerRadius + 40;
+        }
+    }
+
+    function save() {
+        html2canvas(can).then(canvas => {
+            const link = document.createElement('a');
+            link.download = 'screenshot.png';
+            link.href = canvas.toDataURL();
+            link.click();
+            document.body.removeChild(link); // 清理创建的链接
+        });
+        // capturePage()
+    }
+
+    const content = ref(null);
+    const canvas = ref(null);
+
+    function capturePage() {
+        const ctx = canvas.value.getContext('2d');
+        const contentElement = content.value;
+        html2canvas(contentElement).then(canvas => {
+            // 将生成的 canvas 转换为图片并下载
+            const imgData = canvas.toDataURL('image/png');
+            const link = document.createElement('a');
+            link.download = 'page-screenshot.png';
+            link.href = imgData;
+            link.click();
+        });
+    }
+
+    onMounted(() => {
+        init();
+        changes();
+        console.log("mmmmm")
+        drawBackground();
+    });
+</script>
+
+<style scoped>
+    #chart3 {
+        width: 500px;
+        height: 400px;
+    }
+</style>

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

@@ -1,26 +1,28 @@
 <template>
-    <div style="display: flex;justify-content: center;">
-        <div style="position: absolute;top:10px;right: 4px">
-            <el-button @click="changePaintState">{{paintStateFlagText}}</el-button>
-            <el-button @click="clear">清空</el-button>
-            <el-button @click="save">保存</el-button>
-        </div>
-        <div style="display: flex;justify-content: center;">
-            <canvas width="1700" height="900" style="border: 1px solid blue; background: #000000;"
+    <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;"
                     id="can"></canvas>
         </div>
     </div>
+
 </template>
+
 <script setup>
+    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+
+    const headinfo = ref({})
+
     import {onMounted} from 'vue'
     import * as echarts from "echarts";
     import html2canvas from 'html2canvas';
-    import { ElMessage} from 'element-plus'
+    import {ElMessage} from 'element-plus'
 
     const backgroundImage = new Image();
     // backgroundImage.src = 'http://192.168.3.100/screenshot.png'; // 替换为你的背景图片路径
 
-    let CENTER_X = 850;
+    let CENTER_X = 910;
     let CENTER_Y = 900;
     let startMouse = {x: 0, y: 0};
     let moveMouse = {x: 0, y: 0};
@@ -223,9 +225,9 @@
         // 第二个职业
         else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
             if (paintFlagList[3]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#f72585", 165, startAngle21, ret);
-                }else{
+                } else {
                     paint("#000000", 165, startAngle21, ret);
                     paint("#000000", 205, startAngle21, ret);
                     paint("#000000", 245, startAngle21, ret);
@@ -233,21 +235,21 @@
             }
         } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
             if (paintFlagList[4]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#f72585", 165, startAngle22, ret);
                     paint("#f72585", 205, startAngle22, ret);
-                }else{
+                } else {
                     paint("#000000", 205, startAngle22, ret);
                     paint("#000000", 245, startAngle22, ret);
                 }
             }
         } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
             if (paintFlagList[5]) {
-                if(paintStateFlag){
+                if (paintStateFlag) {
                     paint("#f72585", 165, startAngle23, ret);
                     paint("#f72585", 205, startAngle23, ret);
                     paint("#f72585", 245, startAngle23, ret);
-                }else{
+                } else {
                     paint("#000000", 245, startAngle23, ret);
                 }
             }
@@ -255,9 +257,9 @@
         //第三个职业
         else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
             if (paintFlagList[6]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#4cc9f0", 300, startAngle31, ret);
-                }else{
+                } else {
                     paint("#000000", 300, startAngle31, ret);
                     paint("#000000", 340, startAngle31, ret);
                     paint("#000000", 380, startAngle31, ret);
@@ -265,21 +267,21 @@
             }
         } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
             if (paintFlagList[7]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#4cc9f0", 300, startAngle31, ret);
                     paint("#4cc9f0", 340, startAngle31, ret);
-                }else{
+                } else {
                     paint("#000000", 340, startAngle32, ret);
                     paint("#000000", 380, startAngle32, ret);
                 }
             }
         } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
             if (paintFlagList[8]) {
-                if(paintStateFlag){
+                if (paintStateFlag) {
                     paint("#4cc9f0", 300, startAngle33, ret);
                     paint("#4cc9f0", 340, startAngle33, ret);
                     paint("#4cc9f0", 380, startAngle33, ret);
-                }else{
+                } else {
                     paint("#000000", 380, startAngle33, ret);
                 }
             }
@@ -287,9 +289,9 @@
         //第四个职业
         else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
             if (paintFlagList[9]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#a000ff", 435, startAngle41, ret);
-                }else{
+                } else {
                     paint("#000000", 435, startAngle41, ret);
                     paint("#000000", 475, startAngle41, ret);
                     paint("#000000", 515, startAngle41, ret);
@@ -297,21 +299,21 @@
             }
         } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
             if (paintFlagList[10]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#a000ff", 435, startAngle42, ret);
                     paint("#a000ff", 475, startAngle42, ret);
-                }else{
+                } else {
                     paint("#000000", 475, startAngle42, ret);
                     paint("#000000", 515, startAngle42, ret);
                 }
             }
         } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
             if (paintFlagList[11]) {
-                if(paintStateFlag){
+                if (paintStateFlag) {
                     paint("#a000ff", 435, startAngle43, ret);
                     paint("#a000ff", 475, startAngle43, ret);
                     paint("#a000ff", 515, startAngle43, ret);
-                }else{
+                } else {
                     paint("#000000", 515, startAngle43, ret);
                 }
             }
@@ -320,9 +322,9 @@
         //第五个职业
         else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
             if (paintFlagList[12]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#ffc9f6", 570, startAngle51, ret);
-                }else{
+                } else {
                     paint("#000000", 570, startAngle51, ret);
                     paint("#000000", 610, startAngle51, ret);
                     paint("#000000", 650, startAngle51, ret);
@@ -330,21 +332,21 @@
             }
         } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
             if (paintFlagList[13]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#ffc9f6", 570, startAngle52, ret);
                     paint("#ffc9f6", 610, startAngle52, ret);
-                }else{
+                } else {
                     paint("#000000", 610, startAngle52, ret);
                     paint("#000000", 650, startAngle52, ret);
                 }
             }
         } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
             if (paintFlagList[14]) {
-                if(paintStateFlag){
+                if (paintStateFlag) {
                     paint("#ffc9f6", 570, startAngle53, ret);
                     paint("#ffc9f6", 610, startAngle53, ret);
                     paint("#ffc9f6", 650, startAngle53, ret);
-                }else{
+                } else {
                     paint("#000000", 650, startAngle53, ret);
                 }
             }
@@ -353,9 +355,9 @@
         //第六个职业
         else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
             if (paintFlagList[15]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#9de617", 705, startAngle61, ret);
-                }else{
+                } else {
                     paint("#000000", 705, startAngle61, ret);
                     paint("#000000", 745, startAngle61, ret);
                     paint("#000000", 785, startAngle61, ret);
@@ -363,21 +365,21 @@
             }
         } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
             if (paintFlagList[16]) {
-                if(paintStateFlag) {
+                if (paintStateFlag) {
                     paint("#9de617", 705, startAngle62, ret);
                     paint("#9de617", 745, startAngle62, ret);
-                }else{
+                } else {
                     paint("#000000", 745, startAngle62, ret);
                     paint("#000000", 785, startAngle62, ret);
                 }
             }
         } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
             if (paintFlagList[17]) {
-                if(paintStateFlag){
+                if (paintStateFlag) {
                     paint("#9de617", 705, startAngle63, ret);
                     paint("#9de617", 745, startAngle63, ret);
                     paint("#9de617", 785, startAngle63, ret);
-                }else{
+                } else {
                     paint("#000000", 785, startAngle63, ret);
                 }
             }
@@ -406,9 +408,6 @@
     function init() {
         can = document.getElementById('can');
         context = can.getContext('2d');
-        // backgroundImage.onload = function() {
-        //     context.drawImage(backgroundImage, 0, 0, can.width, can.height);
-        // };
     }
 
     function arc(num) {
@@ -423,7 +422,7 @@
     function paint(color, radius, startAngle, endAngle) {
         // 结束角度不能小于起始角度
         if (endAngle <= startAngle) {
-            ElMessage.error("只能顺时针画")
+            // ElMessage.error("只能顺时针画")
             return;
         }
         context.lineWidth = 37;
@@ -502,11 +501,35 @@
         console.log("mmmmm")
         drawBackground();
     });
+
+
 </script>
 
-<style scoped>
-    #chart3 {
-        width: 500px;
-        height: 400px;
+<style scoped lang="scss">
+    //body,html{
+    //  overflow: hidden;
+    //}
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    .development_stage {
+        background: url('@/assets/images/login/login-home-background.png') no-repeat;
+        background-size: 1920px 1080px;
+        z-index: 10;
+        width: 100%;
+        height: 1080px;
+    }
+        .page-content {
+            display:flex;
+            justify-content: center;
+            padding-top: 113px;
+        }
+
+
+
+    .bg-color-style1 {
+        background: #FFFFFF;
     }
 </style>