feat 决策

package.json

@@ -26,6 +26,7 @@
     "fabric": "^6.7.0",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
+    "html2canvas": "^1.4.1",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",

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

@@ -10,6 +10,7 @@
         </div>
     </div>
 </template>
+
 <script setup>
     import {onMounted} from 'vue'
     import * as echarts from "echarts";
@@ -248,6 +249,11 @@
         changes();
         drawBackground();
     });
+
+    function save() {
+
+    }
+
 </script>
 
 <style scoped>
@@ -255,4 +261,4 @@
         width: 500px;
         height: 400px;
     }
-</style>
+</style>

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

@@ -1,23 +1,28 @@
 <template>
-    <div>
+    <div ref="content">
+        <el-button @click="save">保存</el-button>
+
         <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 style="height: 1700px; height:900px;display: flex;justify-content: center;">
+            <canvas  ref="canvas" width="1700" height="900" style="border: 1px solid blue; background-color: white;"
+                    id="can"></canvas>
         </div>
     </div>
 </template>
+
 <script setup>
+    import html2canvas from 'html2canvas';
     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 startMouse = {x: 0, y: 0};
+    let moveMouse = {x: 0, y: 0};
 
     // 第一个职业
     let startAngle11 = 0;
@@ -43,7 +48,7 @@
                 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){
+                if (startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y) {
                     return;
                 }
                 calcEndRadius();
@@ -55,51 +60,51 @@
     }
 
     /*计算起始点*/
-    function calcStartRadius(){
-        let sum = Math.pow(startMouse.x-CENTER_X, 2)+ Math.pow(CENTER_Y-startMouse.y, 2);
+    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)){
+        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)){
+        } 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)){
+        } 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)){
+        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)){
+        } 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)){
+        } 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);
+    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);
+        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);
+        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);
+    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;
@@ -107,28 +112,39 @@
         if (ret < 0) {
             ret += 450;
         }
-        let num = ret * Math.PI/180 +Math.PI;
+        let num = ret * Math.PI / 180 + Math.PI;
         // console.log('角度：'+num);
         return num;
     }
 
     let can = "";
     let context = "";
-    function init(){
+
+    const backgroundImage = new Image();
+    backgroundImage.src = 'http://192.168.3.100/page-screenshot.png'; // 替换为你的背景图片路径
+
+    function init() {
         can = document.getElementById('can');
         context = can.getContext('2d');
+        console.log("111")
+        backgroundImage.onload = function() {
+            context.drawImage(backgroundImage, 0, 0, can.width, can.height);
+        };
     }
 
-    function arc(num){
+
+
+
+    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.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
         context.stroke();
     }
 
 
-    function paint(color, radius, startAngle, endAngle){
+    function paint(color, radius, startAngle, endAngle) {
         context.lineWidth = 50;
         context.strokeStyle = color;
         context.beginPath();
@@ -136,20 +152,20 @@
         context.stroke();
     }
 
-    function undo(){
+    function undo() {
 
     }
 
-    function redo(){
+    function redo() {
 
     }
 
-    function clear(){
+    function clear() {
         context.clearRect(0, 0, can.width, can.height);
         drawBackground();
     }
 
-    function drawBackground(){
+    function drawBackground() {
         arc(50);
         arc(100);
         arc(150);
@@ -173,6 +189,26 @@
         changes();
         drawBackground();
     });
+
+    function save() {
+        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();
+        });
+    }
 </script>
 
 <style scoped>
@@ -180,4 +216,12 @@
         width: 500px;
         height: 400px;
     }
-</style>
+
+    .content {
+        /* 样式设置 */
+        width: 500px; /* 根据需要调整 */
+        height: auto; /* 根据内容自动调整 */
+        padding: 20px;
+        border: 1px solid #ccc;
+    }
+</style>

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

@@ -525,6 +525,8 @@
     //编辑和保存
     function save() {
         status.value = 'save'
+        //保存
+
     }
 
     function edit() {