feat 决策

src/api/xjc-integratedmachine/wakeup/rainbow.js

@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+
+// 查询彩虹图数据列表
+export function listRainbow(query) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询彩虹图数据详细
+export function getRainbow(id) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/' + id,
+    method: 'get'
+  })
+}
+
+// 新增彩虹图数据
+export function addRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改彩虹图数据
+export function updateRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除彩虹图数据
+export function delRainbow(id) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/' + id,
+    method: 'delete'
+  })
+}
+//
+export function newRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/newRainbow',
+    method: 'post',
+    data : data
+  })
+}
+export function saveRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/saveRainbow',
+    method: 'post',
+    data : data
+  })
+}
+export function finish(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/finish',
+    method: 'post',
+    data : data
+  })
+}

src/utils/request.js

@@ -1,71 +1,71 @@
 import axios from 'axios'
-import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
-import { getToken } from '@/utils/auth'
+import {ElNotification, ElMessageBox, ElMessage, ElLoading} from 'element-plus'
+import {getToken} from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from '@/utils/ruoyi'
+import {tansParams, blobValidate} from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
-import { saveAs } from 'file-saver'
+import {saveAs} from 'file-saver'
 import useUserStore from '@/store/modules/user'
 
 let downloadLoadingInstance
 // 是否显示重新登录
-export let isRelogin = { show: false }
+export let isRelogin = {show: false}
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
-  // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: import.meta.env.VITE_APP_BASE_API,
-  // 超时
-  timeout: 10000
+    // axios中请求配置有baseURL选项，表示请求URL公共部分
+    baseURL: import.meta.env.VITE_APP_BASE_API,
+    // 超时
+    timeout: 10000
 })
 
 // request拦截器
 service.interceptors.request.use(config => {
-  // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
-  // 是否需要防止数据重复提交
-  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-  if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params)
-    url = url.slice(0, -1)
-    config.params = {}
-    config.url = url
-  }
-  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-    const requestObj = {
-      url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-      time: new Date().getTime()
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false
+    // 是否需要防止数据重复提交
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+    if (getToken() && !isToken) {
+        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
     }
-    const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
-    const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
-    if (requestSize >= limitSize) {
-      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
-      return config
+    // get请求映射params参数
+    if (config.method === 'get' && config.params) {
+        let url = config.url + '?' + tansParams(config.params)
+        url = url.slice(0, -1)
+        config.params = {}
+        config.url = url
     }
-    const sessionObj = cache.session.getJSON('sessionObj')
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-      cache.session.setJSON('sessionObj', requestObj)
-    } else {
-      const s_url = sessionObj.url                // 请求地址
-      const s_data = sessionObj.data              // 请求数据
-      const s_time = sessionObj.time              // 请求时间
-      const interval = 1000                       // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交'
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
-      } else {
-        cache.session.setJSON('sessionObj', requestObj)
-      }
+    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+        const requestObj = {
+            url: config.url,
+            data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+            time: new Date().getTime()
+        }
+        const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
+        const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
+        if (requestSize >= limitSize) {
+            console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
+            return config
+        }
+        const sessionObj = cache.session.getJSON('sessionObj')
+        if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+            cache.session.setJSON('sessionObj', requestObj)
+        } else {
+            const s_url = sessionObj.url                // 请求地址
+            const s_data = sessionObj.data              // 请求数据
+            const s_time = sessionObj.time              // 请求时间
+            const interval = 1000                       // 间隔时间(ms)，小于此时间视为重复提交
+            if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+                const message = '数据正在处理，请勿重复提交'
+                console.warn(`[${s_url}]: ` + message)
+                return Promise.reject(new Error(message))
+            } else {
+                cache.session.setJSON('sessionObj', requestObj)
+            }
+        }
     }
-  }
-  return config
+    return config
 }, error => {
     console.log(error)
     Promise.reject(error)
@@ -73,80 +73,106 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-    // 未设置状态码则默认成功状态
-    const code = res.data.code || 200
-    // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
-    // 二进制数据则直接返回
-    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
-      return res.data
+        // 未设置状态码则默认成功状态
+        const code = res.data.code || 200
+        // 获取错误信息
+        const msg = errorCode[code] || res.data.msg || errorCode['default']
+        // 二进制数据则直接返回
+        if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+            return res.data
+        }
+        if (code === 401) {
+            if (!isRelogin.show) {
+                isRelogin.show = true
+                ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+                    confirmButtonText: '重新登录',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    isRelogin.show = false
+                    useUserStore().logOut().then(() => {
+                        location.href = '/index'
+                    })
+                }).catch(() => {
+                    isRelogin.show = false
+                })
+            }
+            return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+        } else if (code === 500) {
+            ElMessage({message: msg, type: 'error'})
+            return Promise.reject(new Error(msg))
+        } else if (code === 601) {
+            ElMessage({message: msg, type: 'warning'})
+            return Promise.reject(new Error(msg))
+        } else if (code !== 200) {
+            ElNotification.error({title: msg})
+            return Promise.reject('error')
+        } else {
+            return Promise.resolve(res.data)
+        }
+    },
+    error => {
+        console.log('err' + error)
+        let {message} = error
+        if (message == "Network Error") {
+            message = "后端接口连接异常"
+        } else if (message.includes("timeout")) {
+            message = "系统接口请求超时"
+        } else if (message.includes("Request failed with status code")) {
+            message = "系统接口" + message.substr(message.length - 3) + "异常"
+        }
+        ElMessage({message: message, type: 'error', duration: 5 * 1000})
+        return Promise.reject(error)
     }
-    if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true
-        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false
-          useUserStore().logOut().then(() => {
-            location.href = '/index'
-          })
-      }).catch(() => {
-        isRelogin.show = false
-      })
-    }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-    } else if (code === 500) {
-      ElMessage({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
-    } else if (code === 601) {
-      ElMessage({ message: msg, type: 'warning' })
-      return Promise.reject(new Error(msg))
-    } else if (code !== 200) {
-      ElNotification.error({ title: msg })
-      return Promise.reject('error')
-    } else {
-      return  Promise.resolve(res.data)
-    }
-  },
-  error => {
-    console.log('err' + error)
-    let { message } = error
-    if (message == "Network Error") {
-      message = "后端接口连接异常"
-    } else if (message.includes("timeout")) {
-      message = "系统接口请求超时"
-    } else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常"
-    }
-    ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
-    return Promise.reject(error)
-  }
 )
 
+
+// 文件上传方法
+export function uploadFile(url, data) {
+    return new Promise((resolve, reject) => {
+        service({
+            url: url,
+            method: 'post',
+            data: data,
+            headers: {
+                'Content-Type': 'multipart/form-data',
+                'Authorization': 'Bearer ' + getToken()
+            },
+        }).then(response => {
+            resolve(response.data)
+        }).catch(error => {
+            reject(error)
+        })
+    })
+}
+
 // 通用下载方法
 export function download(url, params, filename, config) {
-  downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
-  return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob',
-    ...config
-  }).then(async (data) => {
-    const isBlob = blobValidate(data)
-    if (isBlob) {
-      const blob = new Blob([data])
-      saveAs(blob, filename)
-    } else {
-      const resText = await data.text()
-      const rspObj = JSON.parse(resText)
-      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      ElMessage.error(errMsg)
-    }
-    downloadLoadingInstance.close()
-  }).catch((r) => {
-    console.error(r)
-    ElMessage.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close()
-  })
+    downloadLoadingInstance = ElLoading.service({text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)",})
+    return service.post(url, params, {
+        transformRequest: [(params) => {
+            return tansParams(params)
+        }],
+        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+        responseType: 'blob',
+        ...config
+    }).then(async (data) => {
+        const isBlob = blobValidate(data)
+        if (isBlob) {
+            const blob = new Blob([data])
+            saveAs(blob, filename)
+        } else {
+            const resText = await data.text()
+            const rspObj = JSON.parse(resText)
+            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+            ElMessage.error(errMsg)
+        }
+        downloadLoadingInstance.close()
+    }).catch((r) => {
+        console.error(r)
+        ElMessage.error('下载文件出现错误，请联系管理员！')
+        downloadLoadingInstance.close()
+    })
 }
 
 export default service

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

@@ -1,15 +1,15 @@
 <template>
-    <div id="outerDiv" class="development_stage">
+    <div id="outerDiv" class="development_stage" v-loading="loadingInfo.isLoading">
         <head-component :headinfo=headinfo></head-component>
         <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">
+        <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">保存</el-button>
-            <el-button @click="save">绘制完成</el-button>
+            <el-button @click="save(null)">保存</el-button>
+            <el-button @click="finishRepaint('new')">绘制完成</el-button>
         </div>
     </div>
 
@@ -17,7 +17,9 @@
 
 <script setup>
     import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+    import {newRainbow, saveRainbow, finish} from '@/api/xjc-integratedmachine/wakeup/rainbow.js'
 
+    const loading = ref(true)
     const headinfo = ref({})
 
     import {onMounted} from 'vue'
@@ -72,6 +74,61 @@
     let startAngle72 = 0;
     let startAngle73 = 0;
 
+    let raduisColor = ["#000000",
+        "#ffc300", "#f72585", "#4cc9f0", "#a000ff", "#ffc9f6", "#9de617"
+    ]
+    //手指宽度
+    let pointWidth = 40
+    //间隔宽度
+    let betweenWidth = 15
+    let radiusHalf = new Map(
+        [
+            ["startAngle11", [10, 50]],
+            ["startAngle12", [50, 90]],
+            ["startAngle13", [90, 130]],
+
+            ["startAngle21", [145, 185]],
+            ["startAngle22", [185, 225]],
+            ["startAngle23", [225, 265]],
+
+            ["startAngle31", [280, 320]],
+            ["startAngle32", [320, 360]],
+            ["startAngle33", [360, 400]],
+
+            ["startAngle41", [415, 455]],
+            ["startAngle42", [455, 495]],
+            ["startAngle43", [495, 535]],
+
+            ["startAngle51", [550, 590]],
+            ["startAngle52", [590, 630]],
+            ["startAngle53", [630, 670]],
+
+            ["startAngle61", [685, 725]],
+            ["startAngle62", [725, 765]],
+            ["startAngle63", [765, 805]]
+        ]
+    )
+
+    let radius_startAngle11 = radiusHalf.get("startAngle11")
+    let radius_startAngle12 = radiusHalf.get("startAngle12")
+    let radius_startAngle13 = radiusHalf.get("startAngle13")
+    let radius_startAngle21 = radiusHalf.get("startAngle21")
+    let radius_startAngle22 = radiusHalf.get("startAngle22")
+    let radius_startAngle23 = radiusHalf.get("startAngle23")
+    let radius_startAngle31 = radiusHalf.get("startAngle31")
+    let radius_startAngle32 = radiusHalf.get("startAngle32")
+    let radius_startAngle33 = radiusHalf.get("startAngle33")
+    let radius_startAngle41 = radiusHalf.get("startAngle41")
+    let radius_startAngle42 = radiusHalf.get("startAngle42")
+    let radius_startAngle43 = radiusHalf.get("startAngle43")
+    let radius_startAngle51 = radiusHalf.get("startAngle51")
+    let radius_startAngle52 = radiusHalf.get("startAngle52")
+    let radius_startAngle53 = radiusHalf.get("startAngle53")
+    let radius_startAngle61 = radiusHalf.get("startAngle61")
+    let radius_startAngle62 = radiusHalf.get("startAngle62")
+    let radius_startAngle63 = radiusHalf.get("startAngle63")
+
+
     // 所有轨道绘画限制
     let paintFlagList = [
         false, false, false,
@@ -99,82 +156,145 @@
                     return;
                 }
                 calcEndRadius();
+                //计算是否超出本轨道
+                let sum = Math.pow(moveMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - moveMouse.y, 2);
+                let key = form.value.picData[form.value.picData.length - 1].angle
+                let value = radiusHalf.get(key)
+                let min = Math.pow(value[0], 2)
+                let max = Math.pow(value[1], 2)
+                if (sum < min || sum > max) {
+                    recordEnd()
+                    return;
+                }
             })
         })
-        can.addEventListener('touchend', function () {
+        can.addEventListener('touchend', function (e) {
             can.onmousemove = null;
+            //获取结束点
+            recordEnd()
         })
     }
 
+    function recordEnd() {
+        let endAngle = calcEndRadius();
+        form.value.picData[form.value.picData.length - 1].endAngle = endAngle;
+    }
+
     /*计算起始点*/
     function calcStartRadius() {
+        let data = {startAngle: 0, angle: ''}
+        data.paintStateFlag = paintStateFlag
         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)) {
+        if (sum < Math.pow(radius_startAngle11[1], 2) && sum > Math.pow(radius_startAngle11[0], 2)) {
             startAngle11 = calcAngle();
+            data.startAngle = startAngle11
+            data.angle = 'startAngle11'
             calcPaintCircleFlag(0)
-        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
+        } else if (sum < Math.pow(radius_startAngle12[1], 2) && sum > Math.pow(radius_startAngle12[0], 2)) {
             startAngle12 = calcAngle();
+            data.startAngle = startAngle12
+            data.angle = 'startAngle12'
             calcPaintCircleFlag(1)
-        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
+        } else if (sum < Math.pow(radius_startAngle13[1], 2) && sum > Math.pow(radius_startAngle13[0], 2)) {
             startAngle13 = calcAngle();
+            data.startAngle = startAngle13
+            data.angle = 'startAngle13'
             calcPaintCircleFlag(2)
         }
         // 第二个职业
-        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
+        else if (sum < Math.pow(radius_startAngle21[1], 2) && sum > Math.pow(radius_startAngle21[0], 2)) {
             startAngle21 = calcAngle();
+            data.startAngle = startAngle21
+            data.angle = 'startAngle21'
             calcPaintCircleFlag(3)
-        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
+        } else if (sum < Math.pow(radius_startAngle22[1], 2) && sum > Math.pow(radius_startAngle22[0], 2)) {
             startAngle22 = calcAngle();
+            data.startAngle = startAngle22
+            data.angle = 'startAngle22'
             calcPaintCircleFlag(4)
-        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
+        } else if (sum < Math.pow(radius_startAngle23[1], 2) && sum > Math.pow(radius_startAngle23[0], 2)) {
             startAngle23 = calcAngle();
+            data.startAngle = startAngle23
+            data.angle = 'startAngle23'
             calcPaintCircleFlag(5)
         }
         // 第三个职业
-        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
+        else if (sum < Math.pow(radius_startAngle31[1], 2) && sum > Math.pow(radius_startAngle31[0], 2)) {
             startAngle31 = calcAngle();
+            data.startAngle = startAngle31
+            data.angle = 'startAngle31'
             calcPaintCircleFlag(6)
-        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
+        } else if (sum < Math.pow(radius_startAngle32[1], 2) && sum > Math.pow(radius_startAngle32[0], 2)) {
             startAngle32 = calcAngle();
+            data.startAngle = startAngle32
+            data.angle = 'startAngle32'
             calcPaintCircleFlag(7)
-        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
+        } else if (sum < Math.pow(radius_startAngle33[1], 2) && sum > Math.pow(radius_startAngle33[0], 2)) {
             startAngle33 = calcAngle();
+            data.startAngle = startAngle33
+            data.angle = 'startAngle33'
             calcPaintCircleFlag(8)
         }
         // 第四个职业
-        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
+        else if (sum < Math.pow(radius_startAngle41[1], 2) && sum > Math.pow(radius_startAngle41[0], 2)) {
             startAngle41 = calcAngle();
+            data.startAngle = startAngle41
+            data.angle = 'startAngle41'
             calcPaintCircleFlag(9)
-        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
+        } else if (sum < Math.pow(radius_startAngle42[1], 2) && sum > Math.pow(radius_startAngle42[0], 2)) {
             startAngle42 = calcAngle();
+            data.startAngle = startAngle42
+            data.angle = 'startAngle42'
             calcPaintCircleFlag(10)
-        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
+        } else if (sum < Math.pow(radius_startAngle43[1], 2) && sum > Math.pow(radius_startAngle43[0], 2)) {
             startAngle43 = calcAngle();
+            data.startAngle = startAngle43
+            data.angle = 'startAngle43'
             calcPaintCircleFlag(11)
         }
         // 第五个职业
-        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
+        else if (sum < Math.pow(radius_startAngle51[1], 2) && sum > Math.pow(radius_startAngle51[0], 2)) {
             startAngle51 = calcAngle();
+            data.startAngle = startAngle51
+            data.angle = 'startAngle51'
             calcPaintCircleFlag(12)
-        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
+        } else if (sum < Math.pow(radius_startAngle52[1], 2) && sum > Math.pow(radius_startAngle52[0], 2)) {
             startAngle52 = calcAngle();
+            data.startAngle = startAngle52
+            data.angle = 'startAngle52'
             calcPaintCircleFlag(13)
-        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
+        } else if (sum < Math.pow(radius_startAngle53[1], 2) && sum > Math.pow(radius_startAngle53[0], 2)) {
             startAngle53 = calcAngle();
+            data.startAngle = startAngle53
+            data.angle = 'startAngle53'
             calcPaintCircleFlag(14)
         }
         // 第六个职业
-        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
+        else if (sum < Math.pow(radius_startAngle61[1], 2) && sum > Math.pow(radius_startAngle61[0], 2)) {
             startAngle61 = calcAngle();
+            data.startAngle = startAngle61
+            data.angle = 'startAngle61'
             calcPaintCircleFlag(15)
-        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
+        } else if (sum < Math.pow(radius_startAngle62[1], 2) && sum > Math.pow(radius_startAngle62[0], 2)) {
             startAngle62 = calcAngle();
+            data.startAngle = startAngle62
+            data.angle = 'startAngle62'
             calcPaintCircleFlag(16)
-        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
+        } else if (sum < Math.pow(radius_startAngle63[1], 2) && sum > Math.pow(radius_startAngle63[0], 2)) {
             startAngle63 = calcAngle();
+            data.startAngle = startAngle63
+            data.angle = 'startAngle63'
             calcPaintCircleFlag(17)
         }
+        if (data.startAngle == 0) {
+            alert("起点角度记录不完整")
+        } else if (data.angle == '') {
+            alert("起点轨道记录不完整")
+        } else {
+            form.value.picData.push(data)
+        }
+
     }
 
     /**
@@ -189,7 +309,6 @@
             false, false, false,
             false, false, false]
         paintFlagList[index] = true
-        console.log(paintFlagList)
     }
 
     /*计算终点*/
@@ -197,200 +316,206 @@
         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)) {
+        let radius_1 = radius_startAngle11[0] + (radius_startAngle11[1] - radius_startAngle11[0]) / 2
+        let radius_2 = radius_startAngle11[0] + (radius_startAngle11[1] - radius_startAngle11[0]) / 2
+        let radius_3 = radius_startAngle11[0] + (radius_startAngle11[1] - radius_startAngle11[0]) / 2
+        let radius_4 = radius_startAngle11[0] + (radius_startAngle11[1] - radius_startAngle11[0]) / 2
+        let radius_5 = radius_startAngle11[0] + (radius_startAngle11[1] - radius_startAngle11[0]) / 2
+        let radius_6 = radius_startAngle11[0] + (radius_startAngle11[1] - radius_startAngle11[0]) / 2
+        if (sum < Math.pow(radius_startAngle11[1], 2) && sum > Math.pow(radius_startAngle11[0], 2)) {
             if (paintFlagList[0]) {
                 if (paintStateFlag) {
-                    paint("#ffc300", 30, startAngle11, ret);
+                    paint(raduisColor[1], radius_1, startAngle11, ret);
                 } else {
-                    paint("#000000", 30, startAngle11, ret);
-                    paint("#000000", 70, startAngle11, ret);
-                    paint("#000000", 110, startAngle11, ret);
+                    paint(raduisColor[0], radius_1, startAngle11, ret);
+                    paint(raduisColor[0], radius_1 + pointWidth, startAngle11, ret);
+                    paint(raduisColor[0], radius_1 + 2 * pointWidth, startAngle11, ret);
                 }
             }
-        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
+        } else if (sum < Math.pow(radius_startAngle12[1], 2) && sum > Math.pow(radius_startAngle12[0], 2)) {
             if (paintFlagList[1]) {
                 if (paintStateFlag) {
-                    paint("#ffc300", 30, startAngle12, ret);
-                    paint("#ffc300", 70, startAngle12, ret);
+                    paint(raduisColor[1], radius_1, startAngle12, ret);
+                    paint(raduisColor[1], radius_1 + pointWidth, startAngle12, ret);
                 } else {
-                    paint("#000000", 70, startAngle12, ret);
-                    paint("#000000", 110, startAngle12, ret);
+                    paint(raduisColor[0], radius_1 + pointWidth, startAngle12, ret);
+                    paint(raduisColor[0], radius_1 + 2 * pointWidth, startAngle12, ret);
                 }
             }
-        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
+        } else if (sum < Math.pow(radius_startAngle13[1], 2) && sum > Math.pow(radius_startAngle13[0], 2)) {
             if (paintFlagList[2]) {
                 if (paintStateFlag) {
-                    paint("#ffc300", 30, startAngle13, ret);
-                    paint("#ffc300", 70, startAngle13, ret);
-                    paint("#ffc300", 110, startAngle13, ret);
+                    paint(raduisColor[1], radius_1, startAngle13, ret);
+                    paint(raduisColor[1], radius_1 + pointWidth, startAngle13, ret);
+                    paint(raduisColor[1], radius_1 + 2 * pointWidth, startAngle13, ret);
                 } else {
-                    paint("#000000", 110, startAngle13, ret);
+                    paint(raduisColor[0], radius_1 + 2 * pointWidth, startAngle13, ret);
                 }
             }
         }
         // 第二个职业
-        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
+        else if (sum < Math.pow(radius_startAngle21[1], 2) && sum > Math.pow(radius_startAngle21[0], 2)) {
             if (paintFlagList[3]) {
                 if (paintStateFlag) {
-                    paint("#f72585", 165, startAngle21, ret);
+                    paint(raduisColor[2], radius_2, startAngle21, ret);
                 } else {
-                    paint("#000000", 165, startAngle21, ret);
-                    paint("#000000", 205, startAngle21, ret);
-                    paint("#000000", 245, startAngle21, ret);
+                    paint(raduisColor[0], radius_2, startAngle21, ret);
+                    paint(raduisColor[0], radius_2 + pointWidth, startAngle21, ret);
+                    paint(raduisColor[0], radius_2 + 2 * pointWidth, startAngle21, ret);
                 }
             }
-        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
+        } else if (sum < Math.pow(radius_startAngle22[1], 2) && sum > Math.pow(radius_startAngle22[0], 2)) {
             if (paintFlagList[4]) {
                 if (paintStateFlag) {
-                    paint("#f72585", 165, startAngle22, ret);
-                    paint("#f72585", 205, startAngle22, ret);
+                    paint(raduisColor[2], radius_2, startAngle22, ret);
+                    paint(raduisColor[2], radius_2 + pointWidth, startAngle22, ret);
                 } else {
-                    paint("#000000", 205, startAngle22, ret);
-                    paint("#000000", 245, startAngle22, ret);
+                    paint(raduisColor[0], radius_2 + pointWidth, startAngle22, ret);
+                    paint(raduisColor[0], radius_2 + 2 * pointWidth, startAngle22, ret);
                 }
             }
-        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
+        } else if (sum < Math.pow(radius_startAngle23[1], 2) && sum > Math.pow(radius_startAngle23[0], 2)) {
             if (paintFlagList[5]) {
                 if (paintStateFlag) {
-                    paint("#f72585", 165, startAngle23, ret);
-                    paint("#f72585", 205, startAngle23, ret);
-                    paint("#f72585", 245, startAngle23, ret);
+                    paint(raduisColor[2], radius_2, startAngle23, ret);
+                    paint(raduisColor[2], radius_2 + pointWidth, startAngle23, ret);
+                    paint(raduisColor[2], radius_2 + 2 * pointWidth, startAngle23, ret);
                 } else {
-                    paint("#000000", 245, startAngle23, ret);
+                    paint(raduisColor[0], radius_2 + 2 * pointWidth, startAngle23, ret);
                 }
             }
         }
         //第三个职业
-        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
+        else if (sum < Math.pow(radius_startAngle31[1], 2) && sum > Math.pow(radius_startAngle31[0], 2)) {
             if (paintFlagList[6]) {
                 if (paintStateFlag) {
-                    paint("#4cc9f0", 300, startAngle31, ret);
+                    paint(raduisColor[3], radius_3, startAngle31, ret);
                 } else {
-                    paint("#000000", 300, startAngle31, ret);
-                    paint("#000000", 340, startAngle31, ret);
-                    paint("#000000", 380, startAngle31, ret);
+                    paint(raduisColor[0], radius_3, startAngle31, ret);
+                    paint(raduisColor[0], radius_3+pointWidth, startAngle31, ret);
+                    paint(raduisColor[0], radius_3+2*pointWidth, startAngle31, ret);
                 }
             }
-        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
+        } else if (sum < Math.pow(radius_startAngle32[1], 2) && sum > Math.pow(radius_startAngle32[0], 2)) {
             if (paintFlagList[7]) {
                 if (paintStateFlag) {
-                    paint("#4cc9f0", 300, startAngle31, ret);
-                    paint("#4cc9f0", 340, startAngle31, ret);
+                    paint(raduisColor[3], radius_3, startAngle31, ret);
+                    paint(raduisColor[3], radius_3+pointWidth, startAngle31, ret);
                 } else {
-                    paint("#000000", 340, startAngle32, ret);
-                    paint("#000000", 380, startAngle32, ret);
+                    paint(raduisColor[0], radius_3+pointWidth, startAngle32, ret);
+                    paint(raduisColor[0], radius_3+2*pointWidth, startAngle32, ret);
                 }
             }
-        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
+        } else if (sum < Math.pow(radius_startAngle33[1], 2) && sum > Math.pow(radius_startAngle33[0], 2)) {
             if (paintFlagList[8]) {
                 if (paintStateFlag) {
-                    paint("#4cc9f0", 300, startAngle33, ret);
-                    paint("#4cc9f0", 340, startAngle33, ret);
-                    paint("#4cc9f0", 380, startAngle33, ret);
+                    paint(raduisColor[3], radius_3, startAngle33, ret);
+                    paint(raduisColor[3], radius_3+pointWidth, startAngle33, ret);
+                    paint(raduisColor[3], radius_3+2*pointWidth, startAngle33, ret);
                 } else {
-                    paint("#000000", 380, startAngle33, ret);
+                    paint(raduisColor[0], radius_3+2*pointWidth, startAngle33, ret);
                 }
             }
         }
         //第四个职业
-        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
+        else if (sum < Math.pow(radius_startAngle41[1], 2) && sum > Math.pow(radius_startAngle41[0], 2)) {
             if (paintFlagList[9]) {
                 if (paintStateFlag) {
-                    paint("#a000ff", 435, startAngle41, ret);
+                    paint(raduisColor[4], radius_4, startAngle41, ret);
                 } else {
-                    paint("#000000", 435, startAngle41, ret);
-                    paint("#000000", 475, startAngle41, ret);
-                    paint("#000000", 515, startAngle41, ret);
+                    paint(raduisColor[0], radius_4, startAngle41, ret);
+                    paint(raduisColor[0], radius_4+pointWidth, startAngle41, ret);
+                    paint(raduisColor[0], 515, startAngle41, ret);
                 }
             }
-        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
+        } else if (sum < Math.pow(radius_startAngle42[1], 2) && sum > Math.pow(radius_startAngle42[0], 2)) {
             if (paintFlagList[10]) {
                 if (paintStateFlag) {
-                    paint("#a000ff", 435, startAngle42, ret);
-                    paint("#a000ff", 475, startAngle42, ret);
+                    paint(raduisColor[4], radius_4, startAngle42, ret);
+                    paint(raduisColor[4], radius_4+pointWidth, startAngle42, ret);
                 } else {
-                    paint("#000000", 475, startAngle42, ret);
-                    paint("#000000", 515, startAngle42, ret);
+                    paint(raduisColor[0], radius_4+pointWidth, startAngle42, ret);
+                    paint(raduisColor[0], radius_4+2*pointWidth, startAngle42, ret);
                 }
             }
-        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
+        } else if (sum < Math.pow(radius_startAngle43[1], 2) && sum > Math.pow(radius_startAngle43[0], 2)) {
             if (paintFlagList[11]) {
                 if (paintStateFlag) {
-                    paint("#a000ff", 435, startAngle43, ret);
-                    paint("#a000ff", 475, startAngle43, ret);
-                    paint("#a000ff", 515, startAngle43, ret);
+                    paint(raduisColor[4], radius_4, startAngle43, ret);
+                    paint(raduisColor[4], radius_4+pointWidth, startAngle43, ret);
+                    paint(raduisColor[4], radius_4+2*pointWidth, startAngle43, ret);
                 } else {
-                    paint("#000000", 515, startAngle43, ret);
+                    paint(raduisColor[0], radius_4+2*pointWidth, startAngle43, ret);
                 }
             }
         }
 
         //第五个职业
-        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
+        else if (sum < Math.pow(radius_startAngle51[1], 2) && sum > Math.pow(radius_startAngle51[0], 2)) {
             if (paintFlagList[12]) {
                 if (paintStateFlag) {
-                    paint("#ffc9f6", 570, startAngle51, ret);
+                    paint(raduisColor[5], radius_5, startAngle51, ret);
                 } else {
-                    paint("#000000", 570, startAngle51, ret);
-                    paint("#000000", 610, startAngle51, ret);
-                    paint("#000000", 650, startAngle51, ret);
+                    paint(raduisColor[0], radius_5, startAngle51, ret);
+                    paint(raduisColor[0], 610, startAngle51, ret);
+                    paint(raduisColor[0], 650, startAngle51, ret);
                 }
             }
-        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
+        } else if (sum < Math.pow(radius_startAngle52[1], 2) && sum > Math.pow(radius_startAngle52[0], 2)) {
             if (paintFlagList[13]) {
                 if (paintStateFlag) {
-                    paint("#ffc9f6", 570, startAngle52, ret);
-                    paint("#ffc9f6", 610, startAngle52, ret);
+                    paint(raduisColor[5], radius_5, startAngle52, ret);
+                    paint(raduisColor[5], radius_5+pointWidth, startAngle52, ret);
                 } else {
-                    paint("#000000", 610, startAngle52, ret);
-                    paint("#000000", 650, startAngle52, ret);
+                    paint(raduisColor[0], radius_5+pointWidth, startAngle52, ret);
+                    paint(raduisColor[0], radius_5+2*pointWidth, startAngle52, ret);
                 }
             }
-        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
+        } else if (sum < Math.pow(radius_startAngle53[1], 2) && sum > Math.pow(radius_startAngle53[0], 2)) {
             if (paintFlagList[14]) {
                 if (paintStateFlag) {
-                    paint("#ffc9f6", 570, startAngle53, ret);
-                    paint("#ffc9f6", 610, startAngle53, ret);
-                    paint("#ffc9f6", 650, startAngle53, ret);
+                    paint(raduisColor[5], radius_5, startAngle53, ret);
+                    paint(raduisColor[5], radius_5+pointWidth, startAngle53, ret);
+                    paint(raduisColor[5], radius_5+2*pointWidth, startAngle53, ret);
                 } else {
-                    paint("#000000", 650, startAngle53, ret);
+                    paint(raduisColor[0], radius_5+2*pointWidth, startAngle53, ret);
                 }
             }
         }
 
         //第六个职业
-        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
+        else if (sum < Math.pow(radius_startAngle61[1], 2) && sum > Math.pow(radius_startAngle61[0], 2)) {
             if (paintFlagList[15]) {
                 if (paintStateFlag) {
-                    paint("#9de617", 705, startAngle61, ret);
+                    paint(raduisColor[6], radius_6, startAngle61, ret);
                 } else {
-                    paint("#000000", 705, startAngle61, ret);
-                    paint("#000000", 745, startAngle61, ret);
-                    paint("#000000", 785, startAngle61, ret);
+                    paint(raduisColor[0], radius_6, startAngle61, ret);
+                    paint(raduisColor[0], radius_6+pointWidth, startAngle61, ret);
+                    paint(raduisColor[0], 785, startAngle61, ret);
                 }
             }
-        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
+        } else if (sum < Math.pow(radius_startAngle62[1], 2) && sum > Math.pow(radius_startAngle62[0], 2)) {
             if (paintFlagList[16]) {
                 if (paintStateFlag) {
-                    paint("#9de617", 705, startAngle62, ret);
-                    paint("#9de617", 745, startAngle62, ret);
+                    paint(raduisColor[6], radius_6, startAngle62, ret);
+                    paint(raduisColor[6], radius_6+pointWidth, startAngle62, ret);
                 } else {
-                    paint("#000000", 745, startAngle62, ret);
-                    paint("#000000", 785, startAngle62, ret);
+                    paint(raduisColor[0], radius_6+pointWidth, startAngle62, ret);
+                    paint(raduisColor[0], radius_6+2*pointWidth, startAngle62, ret);
                 }
             }
-        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
+        } else if (sum < Math.pow(radius_startAngle63[1], 2) && sum > Math.pow(radius_startAngle63[0], 2)) {
             if (paintFlagList[17]) {
                 if (paintStateFlag) {
-                    paint("#9de617", 705, startAngle63, ret);
-                    paint("#9de617", 745, startAngle63, ret);
-                    paint("#9de617", 785, startAngle63, ret);
+                    paint(raduisColor[6], radius_6, startAngle63, ret);
+                    paint(raduisColor[6], radius_6+pointWidth, startAngle63, ret);
+                    paint(raduisColor[6], radius_6+2*pointWidth, startAngle63, ret);
                 } else {
-                    paint("#000000", 785, startAngle63, ret);
+                    paint(raduisColor[0], radius_6+2*pointWidth, startAngle63, ret);
                 }
             }
         }
-
+        return ret;
     }
 
     /*计算角度0-180度*/
@@ -404,7 +529,6 @@
             ret += 450;
         }
         let num = ret * Math.PI / 180 + Math.PI;
-        console.log('角度：' + num);
         return num;
     }
 
@@ -449,6 +573,11 @@
         context.stroke();
     }
 
+    function reset() {
+        paintStateFlag = true;
+        paintStateFlagText.value = '画笔'
+    }
+
     function changePaintState() {
         if (paintStateFlag) {
             paintStateFlag = false;
@@ -474,9 +603,9 @@
         for (let i = 1; i < 24; i++) {
             radius = drawBackgroundOne(radius, i);
             // arc(radius);
-            if(i%4==0){
+            if (i % 4 == 0) {
                 arc(radius);
-            }else{
+            } else {
                 arcDashed(radius)
             }
         }
@@ -484,43 +613,141 @@
 
     function drawBackgroundOne(innerRadius, i) {
         if (i % 4 == 0) {
-            return innerRadius + 15;
+            return innerRadius + betweenWidth;
         } else {
-            return innerRadius + 40;
+            return innerRadius + pointWidth;
         }
     }
 
-    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()
-    }
+    // 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();
-        });
+    import {uploadFile} from '@/utils/request.js'
+
+    async function capturePage(type) {
+        const element = document.getElementById('can');
+        await html2canvas(element, {
+            allowTaint: true,
+            useCORS: true,
+            scale: 1, // 缩放比例，可以设置为更高分辨率
+            logging: true, // 启用日志
+            backgroundColor: '#ffffff' // 背景颜色
+        }).then(canvas => {
+            canvas.toBlob(async blob => {
+                const formData = new FormData();
+                formData.append('file', blob, 'screenshot.png');
+                await uploadFile('/file/upload', formData).then(resp => {
+                    form.value.picUrl = resp.url
+                    saveAllData(type)
+                })
+            })
+        })
+    }
+
+    const form = ref({})
+
+    function initRainbow(rFrom) {
+        loading.value = true
+        newRainbow(rFrom).then(resp => {
+            form.value.id = resp.id
+            if (resp.picData != null && resp.picData != '') {
+                form.value.picData = JSON.parse(resp.picData);
+            } else {
+                form.value.picData = []
+            }
+            loading.value = false
+            backShow(form.value.picData)
+        })
+    }
+
+    function backShow(picData) {
+        if (picData.length == 0) {
+            //清空
+        } else {
+            //根据数据重绘
+            picData.forEach(function (item, index) {
+                repaint(item)
+            })
+        }
+    }
+
+    function repaint(item) {
+        let paintStateFlag = item.paintStateFlag
+        //第几职业
+        let angleNum = item.angle.substr(10, 1)
+        let color = raduisColor[parseInt(angleNum)]
+        //第几轨道
+        let angleCount = item.angle.substr(11, 1)
+
+        let startAngle = item.startAngle;
+        let endAngle = item.endAngle;
+
+
+        let radius = radiusHalf.get(item.angle);
+        let min = radius[0];
+        let max = radius[1];
+        let middle = min + (max - min) / 2
+        if (paintStateFlag == true) {
+            for (let i = 0; i < angleCount; i++) {
+                paint(color, middle - (i * pointWidth), startAngle, endAngle);
+            }
+        } else {
+            for (let i = 0; i <= (3 - angleCount); i++) {
+                paint(raduisColor[0], middle + i * pointWidth, startAngle, endAngle);
+            }
+        }
+    }
+
+    function saveAllData(type) {
+        if (form.value.picData.length > 0) {
+            form.value.picDataArray = form.value.picData
+            form.value.picData = null
+            saveRainbow(form.value).then(resp => {
+                loadingInfo.value.isLoading = false
+                initRainbow({
+                    type: type
+                });
+            })
+        } else {
+            loadingInfo.value.isLoading = false
+        }
+    }
+
+    const loadingInfo = ref({
+        isLoading: false,
+        text: ' '
+    })
+
+    function save(type) {
+        loadingInfo.value.isLoading = true
+        loadingInfo.value.text = "正在保存图片"
+        //截屏
+        capturePage(type)
+        reset()
+    }
+
+    function finishRepaint(type) {
+        nextTick(() => {
+            save(type)
+        })
+        clear()
     }
 
     onMounted(() => {
         init();
         changes();
-        console.log("mmmmm")
+        initRainbow({type: null});
         drawBackground();
     });
 
@@ -543,20 +770,21 @@
         width: 100%;
         height: 1080px;
     }
-        .page-content {
-            display:flex;
-            justify-content: center;
-            padding-top: 100px;
-        }
 
-        .page-background{
-            /*padding-top: 100px;*/
-            /*margin-top: 60px;*/
-            /*height: 980px;*/
-            width: 100%;
-            /*background-color: #000000;*/
-            /*border: solid red 1px;*/
-        }
+    .page-content {
+        display: flex;
+        justify-content: center;
+        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 {

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

@@ -0,0 +1,783 @@
+<template>
+    <div id="outerDiv" class="development_stage" v-loading="loadingInfo.isLoading">
+        <head-component :headinfo=headinfo></head-component>
+        <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" 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>
+
+</template>
+
+<script setup>
+    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+    import {newRainbow, saveRainbow, finish} from '@/api/xjc-integratedmachine/wakeup/rainbow.js'
+
+    const loading = ref(true)
+    const headinfo = ref({})
+
+    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 = 960;
+    let CENTER_Y = 980;
+    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 raduisColor = ["#000000",
+        "#ffc300", "#f72585", "#4cc9f0", "#a000ff", "#ffc9f6", "#9de617"
+    ]
+
+    let radiusHalf = new Map(
+        [
+            ["startAngle11", [10, 50]],
+            ["startAngle12", [50, 90]],
+            ["startAngle13", [90, 130]],
+
+            ["startAngle21", [145, 185]],
+            ["startAngle22", [185, 225]],
+            ["startAngle23", [225, 265]],
+
+            ["startAngle31", [280, 320]],
+            ["startAngle32", [320, 360]],
+            ["startAngle33", [360, 400]],
+
+            ["startAngle41", [415, 455]],
+            ["startAngle42", [455, 495]],
+            ["startAngle43", [495, 535]],
+
+            ["startAngle51", [550, 590]],
+            ["startAngle52", [590, 630]],
+            ["startAngle53", [630, 670]],
+
+            ["startAngle61", [685, 725]],
+            ["startAngle62", [725, 765]],
+            ["startAngle63", [765, 805]]
+        ]
+    )
+
+
+    // 所有轨道绘画限制
+    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();
+                //计算是否超出本轨道
+                let sum = Math.pow(moveMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - moveMouse.y, 2);
+                let key = form.value.picData[form.value.picData.length - 1].angle
+                let value = radiusHalf.get(key)
+                let min = Math.pow(value[0], 2)
+                let max = Math.pow(value[1], 2)
+                if (sum < min || sum > max) {
+                    recordEnd()
+                    return;
+                }
+            })
+        })
+        can.addEventListener('touchend', function (e) {
+            can.onmousemove = null;
+            //获取结束点
+            recordEnd()
+        })
+    }
+
+    function recordEnd() {
+        let endAngle = calcEndRadius();
+        form.value.picData[form.value.picData.length - 1].endAngle = endAngle;
+    }
+
+    /*计算起始点*/
+    function calcStartRadius() {
+        let data = {startAngle: 0, angle: ''}
+        data.paintStateFlag = paintStateFlag
+        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();
+            data.startAngle = startAngle11
+            data.angle = 'startAngle11'
+            calcPaintCircleFlag(0)
+        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
+            startAngle12 = calcAngle();
+            data.startAngle = startAngle12
+            data.angle = 'startAngle12'
+            calcPaintCircleFlag(1)
+        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
+            startAngle13 = calcAngle();
+            data.startAngle = startAngle13
+            data.angle = 'startAngle13'
+            calcPaintCircleFlag(2)
+        }
+        // 第二个职业
+        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
+            startAngle21 = calcAngle();
+            data.startAngle = startAngle21
+            data.angle = 'startAngle21'
+            calcPaintCircleFlag(3)
+        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
+            startAngle22 = calcAngle();
+            data.startAngle = startAngle22
+            data.angle = 'startAngle22'
+            calcPaintCircleFlag(4)
+        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
+            startAngle23 = calcAngle();
+            data.startAngle = startAngle23
+            data.angle = 'startAngle23'
+            calcPaintCircleFlag(5)
+        }
+        // 第三个职业
+        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
+            startAngle31 = calcAngle();
+            data.startAngle = startAngle31
+            data.angle = 'startAngle31'
+            calcPaintCircleFlag(6)
+        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
+            startAngle32 = calcAngle();
+            data.startAngle = startAngle32
+            data.angle = 'startAngle32'
+            calcPaintCircleFlag(7)
+        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
+            startAngle33 = calcAngle();
+            data.startAngle = startAngle33
+            data.angle = 'startAngle33'
+            calcPaintCircleFlag(8)
+        }
+        // 第四个职业
+        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
+            startAngle41 = calcAngle();
+            data.startAngle = startAngle41
+            data.angle = 'startAngle41'
+            calcPaintCircleFlag(9)
+        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
+            startAngle42 = calcAngle();
+            data.startAngle = startAngle42
+            data.angle = 'startAngle42'
+            calcPaintCircleFlag(10)
+        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
+            startAngle43 = calcAngle();
+            data.startAngle = startAngle43
+            data.angle = 'startAngle43'
+            calcPaintCircleFlag(11)
+        }
+        // 第五个职业
+        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
+            startAngle51 = calcAngle();
+            data.startAngle = startAngle51
+            data.angle = 'startAngle51'
+            calcPaintCircleFlag(12)
+        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
+            startAngle52 = calcAngle();
+            data.startAngle = startAngle52
+            data.angle = 'startAngle52'
+            calcPaintCircleFlag(13)
+        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
+            startAngle53 = calcAngle();
+            data.startAngle = startAngle53
+            data.angle = 'startAngle53'
+            calcPaintCircleFlag(14)
+        }
+        // 第六个职业
+        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
+            startAngle61 = calcAngle();
+            data.startAngle = startAngle61
+            data.angle = 'startAngle61'
+            calcPaintCircleFlag(15)
+        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
+            startAngle62 = calcAngle();
+            data.startAngle = startAngle62
+            data.angle = 'startAngle62'
+            calcPaintCircleFlag(16)
+        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
+            startAngle63 = calcAngle();
+            data.startAngle = startAngle63
+            data.angle = 'startAngle63'
+            calcPaintCircleFlag(17)
+        }
+        if(data.startAngle == 0){
+            alert("起点角度记录不完整")
+        }else if(data.angle == ''){
+            alert("起点轨道记录不完整")
+        }else{
+            form.value.picData.push(data)
+        }
+
+    }
+
+    /**
+     * 只有起始点所在轨道可以绘制
+     **/
+    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
+    }
+
+    /*计算终点*/
+    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(raduisColor[1], 30, startAngle11, ret);
+                } else {
+                    paint(raduisColor[0], 30, startAngle11, ret);
+                    paint(raduisColor[0], 70, startAngle11, ret);
+                    paint(raduisColor[0], 110, startAngle11, ret);
+                }
+            }
+        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
+            if (paintFlagList[1]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[1], 30, startAngle12, ret);
+                    paint(raduisColor[1], 70, startAngle12, ret);
+                } else {
+                    paint(raduisColor[0], 70, startAngle12, ret);
+                    paint(raduisColor[0], 110, startAngle12, ret);
+                }
+            }
+        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
+            if (paintFlagList[2]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[1], 30, startAngle13, ret);
+                    paint(raduisColor[1], 70, startAngle13, ret);
+                    paint(raduisColor[1], 110, startAngle13, ret);
+                } else {
+                    paint(raduisColor[0], 110, startAngle13, ret);
+                }
+            }
+        }
+        // 第二个职业
+        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
+            if (paintFlagList[3]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[2], 165, startAngle21, ret);
+                } else {
+                    paint(raduisColor[0], 165, startAngle21, ret);
+                    paint(raduisColor[0], 205, startAngle21, ret);
+                    paint(raduisColor[0], 245, startAngle21, ret);
+                }
+            }
+        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
+            if (paintFlagList[4]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[2], 165, startAngle22, ret);
+                    paint(raduisColor[2], 205, startAngle22, ret);
+                } else {
+                    paint(raduisColor[0], 205, startAngle22, ret);
+                    paint(raduisColor[0], 245, startAngle22, ret);
+                }
+            }
+        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
+            if (paintFlagList[5]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[2], 165, startAngle23, ret);
+                    paint(raduisColor[2], 205, startAngle23, ret);
+                    paint(raduisColor[2], 245, startAngle23, ret);
+                } else {
+                    paint(raduisColor[0], 245, startAngle23, ret);
+                }
+            }
+        }
+        //第三个职业
+        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
+            if (paintFlagList[6]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[3], 300, startAngle31, ret);
+                } else {
+                    paint(raduisColor[0], 300, startAngle31, ret);
+                    paint(raduisColor[0], 340, startAngle31, ret);
+                    paint(raduisColor[0], 380, startAngle31, ret);
+                }
+            }
+        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
+            if (paintFlagList[7]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[3], 300, startAngle31, ret);
+                    paint(raduisColor[3], 340, startAngle31, ret);
+                } else {
+                    paint(raduisColor[0], 340, startAngle32, ret);
+                    paint(raduisColor[0], 380, startAngle32, ret);
+                }
+            }
+        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
+            if (paintFlagList[8]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[3], 300, startAngle33, ret);
+                    paint(raduisColor[3], 340, startAngle33, ret);
+                    paint(raduisColor[3], 380, startAngle33, ret);
+                } else {
+                    paint(raduisColor[0], 380, startAngle33, ret);
+                }
+            }
+        }
+        //第四个职业
+        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
+            if (paintFlagList[9]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[4], 435, startAngle41, ret);
+                } else {
+                    paint(raduisColor[0], 435, startAngle41, ret);
+                    paint(raduisColor[0], 475, startAngle41, ret);
+                    paint(raduisColor[0], 515, startAngle41, ret);
+                }
+            }
+        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
+            if (paintFlagList[10]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[4], 435, startAngle42, ret);
+                    paint(raduisColor[4], 475, startAngle42, ret);
+                } else {
+                    paint(raduisColor[0], 475, startAngle42, ret);
+                    paint(raduisColor[0], 515, startAngle42, ret);
+                }
+            }
+        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
+            if (paintFlagList[11]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[4], 435, startAngle43, ret);
+                    paint(raduisColor[4], 475, startAngle43, ret);
+                    paint(raduisColor[4], 515, startAngle43, ret);
+                } else {
+                    paint(raduisColor[0], 515, startAngle43, ret);
+                }
+            }
+        }
+
+        //第五个职业
+        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
+            if (paintFlagList[12]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[5], 570, startAngle51, ret);
+                } else {
+                    paint(raduisColor[0], 570, startAngle51, ret);
+                    paint(raduisColor[0], 610, startAngle51, ret);
+                    paint(raduisColor[0], 650, startAngle51, ret);
+                }
+            }
+        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
+            if (paintFlagList[13]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[5], 570, startAngle52, ret);
+                    paint(raduisColor[5], 610, startAngle52, ret);
+                } else {
+                    paint(raduisColor[0], 610, startAngle52, ret);
+                    paint(raduisColor[0], 650, startAngle52, ret);
+                }
+            }
+        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
+            if (paintFlagList[14]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[5], 570, startAngle53, ret);
+                    paint(raduisColor[5], 610, startAngle53, ret);
+                    paint(raduisColor[5], 650, startAngle53, ret);
+                } else {
+                    paint(raduisColor[0], 650, startAngle53, ret);
+                }
+            }
+        }
+
+        //第六个职业
+        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
+            if (paintFlagList[15]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[6], 705, startAngle61, ret);
+                } else {
+                    paint(raduisColor[0], 705, startAngle61, ret);
+                    paint(raduisColor[0], 745, startAngle61, ret);
+                    paint(raduisColor[0], 785, startAngle61, ret);
+                }
+            }
+        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
+            if (paintFlagList[16]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[6], 705, startAngle62, ret);
+                    paint(raduisColor[6], 745, startAngle62, ret);
+                } else {
+                    paint(raduisColor[0], 745, startAngle62, ret);
+                    paint(raduisColor[0], 785, startAngle62, ret);
+                }
+            }
+        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
+            if (paintFlagList[17]) {
+                if (paintStateFlag) {
+                    paint(raduisColor[6], 705, startAngle63, ret);
+                    paint(raduisColor[6], 745, startAngle63, ret);
+                    paint(raduisColor[6], 785, startAngle63, ret);
+                } else {
+                    paint(raduisColor[0], 785, startAngle63, ret);
+                }
+            }
+        }
+        return 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;
+        return num;
+    }
+
+    let can = "";
+    let context = "";
+
+    function init() {
+        can = document.getElementById('can');
+        context = can.getContext('2d');
+    }
+
+    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);
+        context.stroke();
+    }
+
+
+    function paint(color, radius, startAngle, endAngle) {
+        // 结束角度不能小于起始角度
+        if (endAngle <= startAngle) {
+            // ElMessage.error("只能顺时针画")
+            return;
+        }
+        context.setLineDash([]);
+        context.lineWidth = 37;
+        context.strokeStyle = color;
+        context.beginPath();
+        context.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
+        context.stroke();
+    }
+
+    function reset() {
+        paintStateFlag = true;
+        paintStateFlagText.value = '画笔'
+    }
+
+    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);
+            if (i % 4 == 0) {
+                arc(radius);
+            } else {
+                arcDashed(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);
+
+    import {uploadFile} from '@/utils/request.js'
+
+    async function capturePage(type) {
+        const element = document.getElementById('can');
+        await html2canvas(element, {
+            allowTaint: true,
+            useCORS: true,
+            scale: 1, // 缩放比例，可以设置为更高分辨率
+            logging: true, // 启用日志
+            backgroundColor: '#ffffff' // 背景颜色
+        }).then(canvas => {
+            canvas.toBlob(async blob => {
+                const formData = new FormData();
+                formData.append('file', blob, 'screenshot.png');
+                await uploadFile('/file/upload', formData).then(resp => {
+                    form.value.picUrl = resp.url
+                    saveAllData(type)
+                })
+            })
+        })
+    }
+
+    const form = ref({})
+
+    function initRainbow(rFrom) {
+        loading.value = true
+        newRainbow(rFrom).then(resp => {
+            form.value.id = resp.id
+            if (resp.picData != null && resp.picData != '') {
+                form.value.picData = JSON.parse(resp.picData);
+            } else {
+                form.value.picData = []
+            }
+            loading.value = false
+            backShow(form.value.picData)
+        })
+    }
+
+    function backShow(picData) {
+        if (picData.length == 0) {
+            //清空
+
+        } else {
+            //根据数据重绘
+            picData.forEach(function (item, index) {
+                repaint(item)
+            })
+        }
+    }
+
+    function repaint(item) {
+        let  paintStateFlag = item.paintStateFlag
+        //第几职业
+        let angleNum = item.angle.substr(10, 1)
+        let color = raduisColor[parseInt(angleNum)]
+        //第几轨道
+        let angleCount = item.angle.substr(11, 1)
+
+        let startAngle = item.startAngle;
+        let endAngle = item.endAngle;
+
+
+        let radius = radiusHalf.get(item.angle);
+        let min = radius[0];
+        let max = radius[1];
+        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){
+                paint(color, middle, startAngle, endAngle);
+            }else if(angleCount == 2){
+                paint(color, middle, startAngle, endAngle);
+                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);
+            }
+        }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, startAngle, endAngle);
+                paint(raduisColor[0], middle+40, startAngle, endAngle);
+            }else if(angleCount == 3){
+                paint(raduisColor[0], middle, startAngle, endAngle);
+            }
+        }
+
+
+
+
+    }
+
+    function saveAllData(type) {
+        if (form.value.picData.length > 0) {
+            form.value.picDataArray = form.value.picData
+            form.value.picData = null
+            saveRainbow(form.value).then(resp => {
+                loadingInfo.value.isLoading = false
+                initRainbow({
+                    type: type
+                });
+            })
+        } else {
+            loadingInfo.value.isLoading = false
+        }
+    }
+
+    const loadingInfo = ref({
+        isLoading: false,
+        text: ' '
+    })
+
+    function save(type) {
+        loadingInfo.value.isLoading = true
+        loadingInfo.value.text = "正在保存图片"
+        //截屏
+        capturePage(type)
+        reset()
+    }
+
+    function finishRepaint(type) {
+        save(type)
+    }
+
+    onMounted(() => {
+        init();
+        changes();
+        initRainbow({type: null});
+        drawBackground();
+    });
+
+
+</script>
+
+<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: 100px;
+    }
+
+    .page-background {
+        /*padding-top: 100px;*/
+        /*margin-top: 60px;*/
+        /*height: 980px;*/
+        width: 100%;
+        /*background-color: #000000;*/
+        /*border: solid red 1px;*/
+    }
+
+
+    .bg-color-style1 {
+        background: #FFFFFF;
+    }
+</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.100:8080',//临时11
+          target: 'http://localhost:8080',
+          // target: 'http://192.168.3.100:8080',//临时11
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }