Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/views/xjc-integratedmachine/common/ai/TouchColorCanvas.vue

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

@@ -0,0 +1,183 @@
+<template>
+    <div>
+        <div style="position: absolute;top:10px;right: 4px">
+            <el-button @click="undo">撤销</el-button>
+            <el-button @click="redo">重做</el-button>
+            <el-button @click="clear">清空</el-button>
+        </div>
+        <div style="height: 1700px; height:900px;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";
+
+    let CENTER_X = 850;
+    let CENTER_Y = 900;
+    let startMouse = { x: 0, y: 0 };
+    let moveMouse = { x: 0, y: 0 };
+
+    // 第一个职业
+    let startAngle11 = 0;
+    let startAngle12 = 0;
+    let startAngle13 = 0;
+
+    // 第二个职业
+    let startAngle21 = 0;
+    let startAngle22 = 0;
+    let startAngle23 = 0;
+
+    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(100,2) && sum > Math.pow(50,2)){
+            startAngle11 = calcAngle();
+        }else if(sum < Math.pow(150,2) && sum > Math.pow(100,2)){
+            startAngle12 = calcAngle();
+        }else if(sum < Math.pow(200,2) && sum > Math.pow(150,2)){
+            startAngle13 = calcAngle();
+        }
+        // 第二个职业
+        else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
+            startAngle21 = calcAngle();
+        }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
+            startAngle22 = calcAngle();
+        }else if(sum < Math.pow(400,2) && sum > Math.pow(350,2)){
+            startAngle23 = calcAngle();
+        }
+    }
+
+    /*计算终点*/
+    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(100,2) && sum > Math.pow(50,2)){
+            paint("green", 75, startAngle11 ,ret);
+        }else if(sum < Math.pow(150,2) && sum > Math.pow(100,2)){
+            paint("green", 125, startAngle12 ,ret);
+        }else if(sum < Math.pow(200,2) && sum > Math.pow(150,2)){
+            paint("green", 175, startAngle13 ,ret);
+        }
+        // 第二个职业
+        else if(sum < Math.pow(300,2) && sum > Math.pow(250,2)){
+            paint("#ffd309", 275, startAngle21 ,ret);
+        }else if(sum < Math.pow(350,2) && sum > Math.pow(300,2)){
+            paint("#ffd309", 325, startAngle22 ,ret);
+        }else if(sum < Math.pow(400,2) && sum > Math.pow(350,2)){
+            paint("#ffd309", 375, startAngle23 ,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');
+    }
+
+    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){
+        context.lineWidth = 50;
+        context.strokeStyle = color;
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
+        context.stroke();
+    }
+
+    function undo(){
+
+    }
+
+    function redo(){
+
+    }
+
+    function clear(){
+        context.clearRect(0, 0, can.width, can.height);
+        drawBackground();
+    }
+
+    function drawBackground(){
+        arc(50);
+        arc(100);
+        arc(150);
+        arc(200);
+
+        arc(250);
+        arc(300);
+        arc(350);
+        arc(400);
+
+        arc(450);
+        arc(500);
+        arc(550);
+        arc(600);
+
+        arc(700);
+    }
+
+    onMounted(() => {
+        init();
+        changes();
+        drawBackground();
+    });
+</script>
+
+<style scoped>
+    #chart3 {
+        width: 500px;
+        height: 400px;
+    }
+</style>