Merge remote-tracking branch 'origin/master'

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/system/user/authRole.vue

@@ -15,7 +15,6 @@
             </el-col>
          </el-row>
       </el-form>
-
       <h4 class="form-header h4">角色信息</h4>
       <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="roleRef" @selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
          <el-table-column label="序号" width="55" type="index" align="center">

src/views/xjc-integratedmachine/components/collection_component.vue

@@ -1,51 +1,85 @@
 <template>
-    <el-button @click="collection" v-if="collectionList.length == 0">收藏</el-button>
-    <el-button @click="cancle_collection" v-if="collectionList.length >= 1">取消收藏</el-button>
+
+
+    <div class="item-img" v-if="collectionList.length == 0">
+      <img @click="collection" v-if="collectionList.length == 0" src="@/assets/images/environment/collage.png">
+      <p @click="collection" v-if="collectionList.length == 0">收藏</p>
+    </div>
+  <div class="item-img" v-if="collectionList.length >= 1">
+    <img @click="cancle_collection" v-if="collectionList.length >= 1" src="@/assets/images/environment/collaged.png">
+    <p @click="cancle_collection" v-if="collectionList.length >= 1">取消收藏</p>
+  </div>
+    <div class="item-img">
+      <img src="@/assets/images/environment/contrast.png">
+<!--      <img src="@/assets/images/environment/contrasted.png">-->
+      <p>对比</p>
+    </div>
 </template>
 
 <script setup>
-    import {addCollection, getCollection, removeCollection} from '@/api/xjc-integratedmachine/environment/university.js'
-
-    const props = defineProps({
-        collection: {
-            contentType: null,
-            contentId: null
-        }
-    })
-
-    const collectionList = ref([])
-
-    function collection() {
-        let data = {
-            contentType: props.collection.contentType,
-            contentId: props.collection.contentId
-        }
-        addCollection(data).then(resp => {
-            queryConnection()
-        })
-    }
-
-    function queryConnection() {
-        let data = {
-            contentType: props.collection.contentType,
-            contentId: props.collection.contentId
-        }
-        getCollection(data).then(resp => {
-            collectionList.value = resp.collection
-        })
-    }
-
-    function cancle_collection() {
-        let data = {
-            id: collectionList.value[0].id,
-        }
-        removeCollection(data).then(resp => {
-            queryConnection()
-        })
-    }
+import {addCollection, getCollection, removeCollection} from '@/api/xjc-integratedmachine/environment/university.js'
+
+const props = defineProps({
+  collection: {
+    contentType: null,
+    contentId: null
+  }
+})
+
+const collectionList = ref([])
+
+function collection() {
+  let data = {
+    contentType: props.collection.contentType,
+    contentId: props.collection.contentId
+  }
+  addCollection(data).then(resp => {
+    queryConnection()
+  })
+}
+
+function queryConnection() {
+  let data = {
+    contentType: props.collection.contentType,
+    contentId: props.collection.contentId
+  }
+  getCollection(data).then(resp => {
+    collectionList.value = resp.collection
+  })
+}
+
+function cancle_collection() {
+  let data = {
+    id: collectionList.value[0].id,
+  }
+  removeCollection(data).then(resp => {
+    queryConnection()
+  })
+}
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+p,div{
+  margin: 0;
+  padding: 0;
+}
+.item-img {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 400px;
+  border: 1px solid;
+  p {
+    font-weight: 400;
+    font-size: 20px;
+    color: #515F6A;
+  }
 
+  img {
+    width: 36px;
+    height: 36px;
+    border: 1px solid;
+  }
+}
 </style>

src/views/xjc-integratedmachine/components/head_component.vue

@@ -11,7 +11,8 @@
         <div class="right-user">
           <img  src="@/assets/images/wakeup/user.png" @click="backTo" alt="404">
         </div>
-        <el-button class="head-right-btn1" >使用说明</el-button>
+        <el-button class="head-right-btn1" v-if="headinfo.isHome">使用说明</el-button>
+        <el-button class="head-right-btn1" v-else @click="homeUrlTo">首页</el-button>
         <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
       </div>
 <!--      </div>-->
@@ -35,7 +36,14 @@
         router.go(-1);
       }
     }
+    function homeUrlTo() {
+        router.push({
+          path: props.headinfo.homeUrl
+        })
+
 
+
+    }
     function exit() {
         proxy.$modal.confirm('您确认退出吗').then(function () {
             router.push({

src/views/xjc-integratedmachine/environment/index.vue

@@ -29,12 +29,13 @@ const headinfo = ref({})
 
 function setHeadinfo(){
   headinfo.value = {
-    title: '生涯唤醒学习系统',
+    title: '环境探索学习系统',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/xjc-integratedmachine/wakeup/index'
+    backUrl : '/xjc-integratedmachine/index',
+    isHome:true,
   }
 }
 

src/views/xjc-integratedmachine/environment/query_universitydb_conditions.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="wake-up-page">
+  <div class="query_universitydb_conditions">
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
       <div class="content-left">
         <div class="tab-box">
           <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
-               <img v-if="onePage" src="@/assets/images/environment/condition-search-h.png">
-               <img v-else src="@/assets/images/environment/condition-search.png">
+            <img v-if="onePage" src="@/assets/images/environment/condition-search-h.png">
+            <img v-else src="@/assets/images/environment/condition-search.png">
             条件查询
           </div>
           <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
@@ -18,10 +18,21 @@
       </div>
       <div class="content-right">
         <div class="one-page" v-show="onePage">
-          <div>
-            <img  src="@/assets/images/environment/search-card1.png">
-            <img  src="@/assets/images/environment/search-card2.png">
-            <img  src="@/assets/images/environment/search-card3.png">
+          <div class="top">
+            <img src="@/assets/images/environment/search-card1.png" @click="showAreaChooseHandler">
+            <img src="@/assets/images/environment/search-card2.png" @click="showEducationlevelHandler">
+            <img src="@/assets/images/environment/search-card3.png" @click="showCharacteristicHandler">
+          </div>
+          <div class="search-btn">
+            <p v-show="form.educationlevelName || form.areaname || form.characteristicName">
+              <span style="margin-right: 3px;margin-left: 3px">已选择条件:</span>
+              <span style="margin-right: 3px;margin-left: 3px">{{form.educationlevelName}}</span>
+              <span v-show="form.areaname">|</span>
+              <span style="margin-right: 3px;margin-left: 3px">{{form.areaname}}</span>
+              <span v-show="form.characteristicName">|</span>
+              <span style="margin-right: 3px;margin-left: 3px">{{form.characteristicName}}</span>
+            </p>
+            <img @click="search" style="z-index:10" src="@/assets/images/environment/search-btn.png">
           </div>
         </div>
         <div class="two-page" v-show="twoPage">
@@ -36,27 +47,60 @@
                 <span style="font-size: 38px;color: #444040;margin-left: 37px;">
                   X
                 </span>
-<!--                <el-icon class="el-input__icon"><calendar /></el-icon>-->
-<!--                <img  src="@/assets/images/environment/condition-search-h.png">-->
               </template>
             </el-input>
           </div>
-          <div class="result-box" >
-          <div class="two-page-result">
+          <div class="result-box">
+            <div class="two-page-result">
 
-              <div v-for="(item,index) in universityList" :class="[item.selected?'item-result-box-active':'item-result-box']"
+              <div v-for="(item,index) in universityList"
+                   :class="[item.selected?'item-result-box-active':'item-result-box']"
                    @click="toDetail(item)">
                 <div v-html="item.name"></div>
               </div>
             </div>
-
-<!--            <div class="item-result-box-active">-->
-<!--              程序员计算机程序员计算机程序员计算机程序员计算机-->
-<!--            </div>-->
           </div>
         </div>
       </div>
       <drag_component></drag_component>
+
+    </div>
+    <div>
+      <!--院校属地-->
+      <el-dialog v-model="showAreaChoose" width="1000px" append-to-body>
+        <div class="dialog-box">
+          <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">
+            <p>
+              {{ dict.label }}
+            </p>
+          </div>
+        </div>
+      </el-dialog>
+
+    </div>
+    <div>
+      <!--学历层次-->
+      <el-dialog v-model="showEducationlevel" width="1000px" append-to-body>
+        <div class="dialog-box dialog-box2">
+          <div v-for="dict in educationlevel" :key="dict.value" @click="chooseEducationlevel(dict)">
+            <p>
+              {{ dict.label }}
+            </p>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <div>
+      <!--特色-->
+      <el-dialog v-model="showCharacteristic" width="1000px" append-to-body>
+        <div class="dialog-box">
+          <div v-for="dict in characteristic" :key="dict.value" @click="chooseCharacteristic(dict)">
+            <p>
+              {{ dict.label }}
+            </p>
+          </div>
+        </div>
+      </el-dialog>
     </div>
   </div>
 
@@ -74,6 +118,7 @@ const router = useRouter()
 const onePage = ref(true)
 const twoPage = ref(false)
 const threePage = ref(false)
+
 const form = ref({
   areaid: null,
   areaname: null,
@@ -81,18 +126,20 @@ const form = ref({
   educationlevelName: null,
   characteristic: null,
   characteristicName: null,
-  name : null
+  name: null
 })
 const keyInput = ref(false);
 const headinfo = ref({})
-function setHeadinfo(){
+
+function setHeadinfo() {
   headinfo.value = {
-    title: '生涯唤醒学习系统',
+    title: '高校信息查询',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/xjc-integratedmachine/wakeup/index'
+    backUrl: '/xjc-integratedmachine/environment/index',
+    homeUrl: '/xjc-integratedmachine/environment/index'
   }
 }
 
@@ -119,26 +166,29 @@ function jumpTo(path) {
     query: {name: 123}
   })
 }
+
 onMounted(() => {
   setHeadinfo()
 })
 const universityList = ref([])
+
 // 定义一个函数，用于将关键词变为红色
 function highlightKeywords(text, keywords) {
   // 遍历关键词列表
   keywords.forEach(keyword => {
     // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
     // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
-    console.log("keywords",keywords)
+    console.log("keywords", keywords)
     let regex = new RegExp(keyword, 'g');
     text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
-    console.log("text",text)
+    console.log("text", text)
   });
   return text;
 }
+
 function byKeyword() {
   getUniversityByKeyword(form.value).then(resp => {
-    resp.list.map(item =>{
+    resp.list.map(item => {
       item.selected = false;
       let keyWord = form.value.name
       item.name = highlightKeywords(item.name, [keyWord]);
@@ -153,19 +203,72 @@ function byKeyword() {
 
 function toDetail(row) {
   router.push({
-    path : '/xjc-integratedmachine/environment/university_details_video',
-    query : {
-      id : row.id,
-      name : row.name,
+    path: '/xjc-integratedmachine/environment/university_details_video',
+    query: {
+      id: row.id,
+      name: row.name,
     }
   })
 }
 
+
+const tab = ref("tj")
+
+function changeTab(path) {
+  tab.value = path
+}
+
+
+const showAreaChoose = ref(false)
+const showEducationlevel = ref(false)
+const showCharacteristic = ref(false)
+
+const {proxy} = getCurrentInstance()
+const {gk_province, educationlevel, characteristic} = proxy.useDict('gk_province', 'educationlevel', 'characteristic')
+
+
+function showAreaChooseHandler() {
+  showAreaChoose.value = true
+}
+
+function chooseArea(item) {
+  form.value.areaid = item.value
+  form.value.areaname = item.label
+  showAreaChoose.value = false
+}
+
+function showEducationlevelHandler() {
+  showEducationlevel.value = true
+}
+
+function chooseEducationlevel(item) {
+  form.value.educationlevel = item.value
+  form.value.educationlevelName = item.label
+  showEducationlevel.value = false
+}
+
+function showCharacteristicHandler() {
+  showCharacteristic.value = true
+}
+
+function chooseCharacteristic(item) {
+  form.value.characteristic = item.value
+  form.value.characteristicName = item.label
+  showCharacteristic.value = false
+}
+
+function search() {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_list',
+    query: form.value
+  })
+}
+
 </script>
 
 
 <style scoped lang="scss">
-.wake-up-page {
+.query_universitydb_conditions {
   background: url('@/assets/images/login/login-home-background.png') no-repeat;
   background-size: 1920px 1080px;
   z-index: 10;
@@ -179,31 +282,36 @@ function toDetail(row) {
     bottom: 0;
     display: flex;
     justify-content: space-between;
+
     .content-left {
       width: 244px;
       height: 957px;
       background: rgba(255, 255, 255, 0.26);
+
       ::v-deep .el-menu-item .is-active {
         background: red !important;
       }
-      .item-box{
+
+      .item-box {
         width: 244px;
         height: 80px;
         color: #B3B3B3;
         display: flex;
         align-items: center;
-        margin-right:5px;
+        margin-right: 5px;
         font-weight: bold;
         font-size: 20px;
         background: #C8FFED;
-        img{
+
+        img {
           width: 28px;
           height: 28px;
-          margin-right:10px;
+          margin-right: 10px;
           margin-left: 40px;
         }
       }
-      .item-box-active{
+
+      .item-box-active {
         width: 244px;
         height: 80px;
         background: #1EC590;
@@ -212,86 +320,116 @@ function toDetail(row) {
         display: flex;
         color: #FFFFFF;
         line-height: 40px;
-        margin-right:5px;
+        margin-right: 5px;
         align-items: center;
-        img{
+
+        img {
           width: 28px;
           height: 28px;
-          margin-right:10px;
+          margin-right: 10px;
           margin-left: 40px;
         }
       }
     }
-    .content-right{
+
+    .content-right {
       width: 1615px;
       height: 926px;
       background: #FFFFFF;
       border-radius: 35px 35px 35px 35px;
       margin-top: 13px;
       margin-right: 24px;
-      .one-page{
-        div{
+
+      .one-page {
+        .top {
           display: flex;
           justify-content: space-around;
           align-items: center;
+          img {
+            width: 446px;
+            height: 239px;
+            margin-top: 271px;
+          }
         }
-        img{
-          width: 446px;
-          height: 239px;
+
+        .search-btn {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          justify-content: space-around;
           margin-top: 271px;
+          img {
+            width: 244px;
+            height: 100px;
+          }
+          p{
+
+          }
+          span{
+            margin-left: 3px;
+          }
         }
       }
-      .two-page{
+
+      .two-page {
         display: flex;
         flex-direction: column;
         align-items: center;
 
-        .two-page-search{
-            margin-top: 57px;
-            ::v-deep .el-input__inner{
-              width: 1300px;
-              height: 84px;
-              font-size: 24px;
-              margin-left: 34px;
-            }
-          ::v-deep .el-input__suffix{
+        .two-page-search {
+          margin-top: 57px;
+
+          ::v-deep .el-input__inner {
+            width: 1300px;
+            height: 84px;
+            font-size: 24px;
+            margin-left: 34px;
+          }
+
+          ::v-deep .el-input__suffix {
             font-size: 100px;
             width: 100px;
             height: 100px;
 
           }
-          ::v-deep .el-input__wrapper{
+
+          ::v-deep .el-input__wrapper {
             background: #F5F9FA;
             box-shadow: none;
           }
         }
-        .result-box{
-           width: 1484px;
-           height: 750px;
-           overflow: auto;
-          .two-page-result{
+
+        .result-box {
+          width: 1484px;
+          height: 750px;
+          overflow: auto;
+
+          .two-page-result {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
             align-items: center;
-            .item-result-box-active{
+
+            .item-result-box-active {
               min-width: 320px;
               height: 92px;
-              background: linear-gradient( 180deg, #B6FFEF 0%, #C5EEFF 100%);
+              background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
               box-shadow: inset 0px -2px 7px 0px #1E410E;
               border-radius: 5px 5px 5px 5px;
               border: 1px solid #A2F57F;
               font-weight: 400;
               font-size: 30px;
               color: #0DE6A1;
-              line-height:90px;
+              line-height: 90px;
               text-align: center;
               margin-left: 50px;
+              margin-right: 50px;
               margin-top: 32px;
               padding-left: 20px;
               padding-right: 20px;
             }
-            .item-result-box{
+
+            .item-result-box {
               min-width: 320px;
               height: 92px;
               background: #E0EEF4;
@@ -299,24 +437,26 @@ function toDetail(row) {
               font-weight: 400;
               font-size: 30px;
               color: #000000;
-              line-height:90px;
+              line-height: 90px;
               text-align: center;
               margin-left: 50px;
+              margin-right: 50px;
               margin-top: 32px;
               padding-left: 20px;
               padding-right: 20px;
             }
-            .item-result-box:hover{
+
+            .item-result-box:hover {
               min-width: 320px;
               height: 92px;
-              background: linear-gradient( 180deg, #B6FFEF 0%, #C5EEFF 100%);
+              background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
               box-shadow: inset 0px -2px 7px 0px #1E410E;
               border-radius: 5px 5px 5px 5px;
               border: 1px solid #A2F57F;
               font-weight: 400;
               font-size: 30px;
               color: #000000;
-              line-height:90px;
+              line-height: 90px;
               text-align: center;
               margin-left: 50px;
               margin-top: 32px;
@@ -330,7 +470,38 @@ function toDetail(row) {
 
     }
   }
+
 }
 
+.dialog-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  div {
+    //border: 1px solid;
+
+  }
+
+  p {
+    min-width: 120px;
+    padding-left: 10px;
+    padding-right:10px;
+    height: 60px;
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 1px solid;
+    font-weight: 400;
+    font-size: 30px;
+    color: #333333;
+    text-align: center;
+    line-height: 60px;
+    border-radius: 10px;
+  }
+}
+.dialog-box2{
+     display: flex;
+     justify-content: space-around;
+}
 </style>
 

src/views/xjc-integratedmachine/environment/university_details_video.vue

@@ -4,49 +4,261 @@
     <div class="page-content">
       <div class="page-img-box">
         <div class="top-content">
-          <!--           <img :src= "`${baseUrl}`+ item.picPath" />-->
-          <div style="width: 154px;height: 154px;border: 1px solid;margin-left: 48px"></div>
+          <img :src="`${baseUrl}`+ entity.logo"/>
+          <!--          <div style="width: 154px;height: 154px;border: 1px solid;margin-left: 48px"></div>-->
           <div class="top-content-right">
             <div class="right-top">
-              <p class="title">title</p>
+              <p class="title">{{ entity.name }}</p>
               <div class="right-top-icon">
-                <div class="item-img">
-                  <img src="@/assets/images/environment/collage.png">
-                  <p>收藏</p>
-                </div>
-                <div class="item-img">
-                  <img src="@/assets/images/environment/contrast.png">
-                  <p>对比</p>
-                </div>
-
+                <collectionComponent :collection="collection_data"></collectionComponent>
               </div>
             </div>
-
             <div class="school-level-box">
-              <p class="school-level">98</p>
-              <p class="school-level"></p>
-              <p class="school-level"></p>
-              <p class="school-level"></p>
+              <p class="school-level" style="background-color: #B3FC7C" v-show="entity.nef==='1'">985</p>
+              <p class="school-level" style="background-color: #BBF88D" v-show="entity.too==='1'">211</p>
+              <p class="school-level" style="background-color: #8CE349" v-show="entity.istopschool==='1'">一流大学</p>
+              <p class="school-level" style="background-color: #9DFF51" v-show="entity.istopsubject==='1'">一流学科</p>
+              <p class="school-level" style="background-color: #8ADFC4" v-show="entity.self==='1'">强</p>
+              <p class="school-level" style="background-color: #1EC590" v-show="entity.graduate==='1'">研</p>
+            </div>
+            <div class="text-box">
+              <p style="width: 200px">创建时间:{{ entity.ctime }}</p>
+              <p style="width: 200px">所在地区:{{ entity.areaname }}</p>
+              学历层次:
+              <dict-tag style="width: 200px" :options="educationlevel" :value="entity.educationlevel"/>
+              办学性质:
+              <dict-tag :options="property" :value="entity.property"/>
+              院校类型:
+              <dict-tag :options="school_category" :value="entity.school_category"/>
             </div>
             <div class="text-box">
-              <p>创建时间:{{entity.ctime}}</p>
-              <p>所在地区:{{entity.areaname}}</p>
-              <p>学历层次:{{entity.educationlevel}}</p>
-              <p>办学性质:{{entity.property}}</p>
-              <p>院校类型:{{entity.school_category}}</p>
-              <p>院校隶属:{{entity.subjection}}:</p>
-              <p>通讯地址:{{entity.address}}</p>
+              <p style="width: 200px">院校隶属:{{ entity.subjection }}:</p>
+              <p>通讯地址:{{ entity.address }}</p>
             </div>
           </div>
         </div>
         <div class="bottom-content">
-
+          <div class="tab-box">
+            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+              学校简介
+            </div>
+            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
+              院校设置
+            </div>
+            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+              学科专业
+            </div>
+            <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
+              奖励资助
+            </div>
+            <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
+              考分查询
+            </div>
+            <div :class="[sixPage?'item-box-active':'item-box']" @click="showPage(6)">
+              计划查询
+            </div>
+            <div :class="[senvenPage?'item-box-active':'item-box']" @click="showPage(7)">
+              招生章程
+            </div>
+            <div :class="[eightPage?'item-box-active':'item-box']" @click="showPage(8)">
+              学校视频
+            </div>
+          </div>
+          <div class="one-page" v-show="onePage">
+            <p class="title">学校简介</p>
+            <p class="info" v-html="entity.summary">
+            </p>
+          </div>
+          <div class="one-page" v-show="twoPage">
+            <p class="title">院系设置</p>
+            <p class="info" v-html="entity.collegeset">
+            </p>
+          </div>
+          <div class="one-page" v-show="threePage">
+            <p class="title">学科专业</p>
+            <p class="info" v-html="entity.specialtyintroduction">
+            </p>
+          </div>
+          <div class="one-page" v-show="fourPage">
+            <p class="title">奖励资助</p>
+            <p class="info" v-html="entity.incentivegrant">
+            </p>
+          </div>
+          <div class="one-page" v-show="fivePage">
+            <div class="select-div">
+              <p>招生地区:</p>
+              <p class="select-box" @click="showAreaChooseHandler">
+                <span v-if="form.areaname">{{ form.areaname }}</span>
+                <span v-else>请选择</span>
+              </p>
+              <p style="margin-left: 20px">考生类别：
+              </p>
+              <p class="select-box" @click="showCategoryHandler">
+                <span v-if="form.categoryName">{{ form.categoryName }}</span>
+                <span v-else>请选择</span>
+              </p>
+              <p class="select-box click-search" @click="getScore">点击查询</p>
+            </div>
+            <el-table :data="kf_tableData">
+              <el-table-column label="招生年份" align="center" key="years" prop="years" style="height: 95px"/>
+              <el-table-column label="录取批次" align="center" key="batchname" prop="batchname" style="height: 95px"/>
+              <el-table-column label="最低分" align="center" key="lowscore" prop="lowscore" style="height: 95px"/>
+              <el-table-column label="最低分位次" align="center" key="totalorder" prop="totalorder" style="height: 95px"
+                               ya/>
+            </el-table>
+          </div>
+          <div class="one-page" v-show="sixPage">
+            <div class="select-div">
+              <p>招生地区:</p>
+              <p class="select-box" @click="showAreaChooseHandler">
+                <span v-if="form.areaname">{{ form.areaname }}</span>
+                <span v-else>请选择</span></p>
+              <p style="margin-left: 20px">年份:</p>
+              <p class="select-box" @click="showGradeHandler">
+                <span v-if="form.grade">{{ form.grade }}</span>
+                <span v-else>请选择</span></p>
+              <p style="margin-left: 20px">考生类别:</p>
+              <p class="select-box" @click="showCategoryHandler">
+                <span v-if="form.categoryName">{{ form.categoryName }}</span>
+                <span v-else>请选择</span>
+              </p>
+              <p class="select-box click-search" @click="getPlan">点击查询</p>
+            </div>
+            <el-table :data="jh_tableData">
+              <el-table-column label="招生年份" align="center" key="years" prop="years"/>
+              <el-table-column label="专业名称" align="center" key="enrollname" prop="enrollname"/>
+              <el-table-column label="大学学制" align="center" key="studyyears" prop="studyyears"/>
+              <el-table-column label="批次" align="center" key="batch_name" prop="batch_name"/>
+              <el-table-column label="计划招生人数" align="center" key="plannum" prop="plannum"/>
+              <el-table-column label="学费" align="center" key="fee" prop="fee"/>
+            </el-table>
+          </div>
+          <div class="one-page" v-show="senvenPage">
+            <p class="title">学校简介</p>
+            <p class="info" v-html="entity.sturecruitmen">
+            </p>
+          </div>
+          <div class="one-page" v-show="eightPage">
+            <p class="title">学校视频</p>
+          </div>
         </div>
       </div>
       <drag_component></drag_component>
     </div>
   </div>
-
+  <el-dialog
+      v-model="sixPage"
+      destroy-on-close
+      title=""
+      width="90%"
+      height="910px"
+      style="width: 90%;height: 910px;"
+      center
+      align-center
+  >
+    <div class="one-page" style="width: 1658px" v-show="sixPage">
+      <div class="select-div">
+        <p>招生地区:</p>
+        <p class="select-box" @click="showAreaChooseHandler">
+          <span v-if="form.areaname">{{ form.areaname }}</span>
+          <span v-else>请选择</span></p>
+        <p style="margin-left: 20px">年份:</p>
+        <p class="select-box" @click="showGradeHandler">
+          <span v-if="form.grade">{{ form.grade }}</span>
+          <span v-else>请选择</span></p>
+        <p style="margin-left: 20px">考生类别:</p>
+        <p class="select-box" @click="showCategoryHandler">
+          <span v-if="form.categoryName">{{ form.categoryName }}</span>
+          <span v-else>请选择</span>
+        </p>
+        <p class="select-box click-search" @click="getPlan">点击查询</p>
+      </div>
+      <el-table :data="jh_tableData">
+        <el-table-column label="招生年份" align="center" key="years" prop="years"/>
+        <el-table-column label="专业名称" align="center" key="enrollname" prop="enrollname"/>
+        <el-table-column label="大学学制" align="center" key="studyyears" prop="studyyears"/>
+        <el-table-column label="批次" align="center" key="batch_name" prop="batch_name"/>
+        <el-table-column label="计划招生人数" align="center" key="plannum" prop="plannum"/>
+        <el-table-column label="学费" align="center" key="fee" prop="fee"/>
+      </el-table>
+    </div>
+  </el-dialog>
+  <el-dialog
+      v-model="fivePage"
+      destroy-on-close
+      title=""
+      width="90%"
+      height="910px"
+      style="width: 90%;height: 910px;"
+      center
+      align-center
+  >
+    <div class="one-page" style="width: 1658px" v-show="fivePage">
+      <div class="select-div">
+        <p>招生地区:</p>
+        <p class="select-box" @click="showAreaChooseHandler">
+          <span v-if="form.areaname">{{ form.areaname }}</span>
+          <span v-else>请选择</span>
+        </p>
+        <p style="margin-left: 20px">考生类别：
+        </p>
+        <p class="select-box" @click="showCategoryHandler">
+          <span v-if="form.categoryName">{{ form.categoryName }}</span>
+          <span v-else>请选择</span>
+        </p>
+        <p class="select-box click-search" @click="getScore">点击查询</p>
+      </div>
+      <el-table :data="kf_tableData">
+        <el-table-column label="招生年份" align="center" key="years" prop="years" style="height: 95px"/>
+        <el-table-column label="录取批次" align="center" key="batchname" prop="batchname" style="height: 95px"/>
+        <el-table-column label="最低分" align="center" key="lowscore" prop="lowscore" style="height: 95px"/>
+        <el-table-column label="最低分位次" align="center" key="totalorder" prop="totalorder" style="height: 95px"
+                         ya/>
+      </el-table>
+    </div>
+  </el-dialog>
+  <div>
+    <!--招生地区-->
+    <el-dialog v-model="showAreaChoose" width="600px" append-to-body>
+      <div class="dict-dialog">
+        <div class="dict-box" v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">{{
+            dict.label
+          }}
+        </div>
+      </div>
+    </el-dialog>
+    <!--考生类别-->
+    <el-dialog v-model="showCategoryChoose" width="600px" append-to-body>
+      <div class="dict-dialog">
+        <div class="dict-box" v-for="dict in category" :key="dict.value" @click="chooseCategory(dict)">{{
+            dict.label
+          }}
+        </div>
+      </div>
+    </el-dialog>
+    <!--年份-->
+    <el-dialog v-model="showGradeChoose" width="600px" append-to-body>
+      <div class="dict-dialog">
+        <div class="dict-box" v-for="item in grade" :key="item" @click="chooseGrade(item)">{{ item }}</div>
+      </div>
+    </el-dialog>
+    <el-dialog
+        v-model="eightPage"
+        @before-close="dialogBeforeClose"
+        destroy-on-close
+        title="学校视频"
+        width="1832px"
+        height="915px"
+        center
+        align-center
+    >
+      <div class="video-content" v-if="entity.path">
+        <video ref="videoPlayer" video preload="auto" autoplay muted controls width="1798" height="900">
+          <source :src="entity.path" type="video/mp4">
+        </video>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
@@ -63,7 +275,7 @@ import 'video.js/dist/video-js.css';
 
 import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
 import {ref} from "vue";
-
+import {getConfigKey} from "@/api/system/config.js";
 
 
 const showAreaChoose = ref(false)
@@ -75,17 +287,23 @@ const route = useRoute()
 
 const param = route.query
 const showIndex = ref(1)
+const baseUrl = ref()
 
 const collection_data = ref({
-  contentType : 1,
-  contentId :param.id
+  contentType: 1,
+  contentId: param.id
 })
-
 const grade = ref([])
 
 const {proxy} = getCurrentInstance()
 
-const {gk_province, category, educationlevel, property, school_category} = proxy.useDict('gk_province', 'category', 'educationlevel', 'property', 'school_category')
+const {
+  gk_province,
+  category,
+  educationlevel,
+  property,
+  school_category
+} = proxy.useDict('gk_province', 'category', 'educationlevel', 'property', 'school_category')
 
 const form = ref({
   area: null,
@@ -96,14 +314,24 @@ const form = ref({
 const entity = ref({})
 const collectionList = ref([])
 const headinfo = ref({})
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+const fourPage = ref(false)
+const fivePage = ref(false)
+const sixPage = ref(false)
+const senvenPage = ref(false)
+const eightPage = ref(false)
+
 function setHeadinfo(){
   headinfo.value = {
-    title: '生涯唤醒学习系统',
+    title: '高校信息查询',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/xjc-integratedmachine/wakeup/index'
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index'
   }
 }
 
@@ -181,6 +409,17 @@ function getScore() {
   })
 }
 
+function dialogBeforeClose() {
+  onePage.value = true;
+  twoPage.value = false;
+  threePage.value = false;
+  fourPage.value = false;
+  fivePage.value = false;
+  sixPage.value = false
+  senvenPage.value = false
+  eightPage.value = false;
+}
+
 const jh_tableData = ref([])
 
 function getPlan() {
@@ -204,6 +443,7 @@ function collection() {
     queryConnection()
   })
 }
+
 function queryConnection() {
   let data = {
     contentType: 1,
@@ -213,6 +453,7 @@ function queryConnection() {
     collectionList.value = resp.collection
   })
 }
+
 function cancle_collection() {
   let data = {
     id: collectionList.value[0].id,
@@ -224,40 +465,94 @@ function cancle_collection() {
 
 
 detail()
+const showPage = (val) => {
+  if (val === 1) {
+    onePage.value = true;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false
+    senvenPage.value = false
+    eightPage.value = false;
+  } else if (val === 2) {
+    onePage.value = false;
+    twoPage.value = true;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false
+    senvenPage.value = false
+    eightPage.value = false;
+  } else if (val === 3) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = true;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false
+    senvenPage.value = false
+    eightPage.value = false;
+  } else if (val === 4) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = true;
+    fivePage.value = false;
+    sixPage.value = false
+    senvenPage.value = false
+    eightPage.value = false;
+  } else if (val === 5) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = true;
+    sixPage.value = false
+    senvenPage.value = false
+    eightPage.value = false;
+  } else if (val === 6) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = true
+    senvenPage.value = false
+    eightPage.value = false;
+  } else if (val === 7) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false
+    senvenPage.value = true
+    eightPage.value = false;
+  } else if (val === 8) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false
+    senvenPage.value = false;
+    eightPage.value = true;
+  }
+  //清空数据
+  form.area = '';
+  form.areanam = '';
+  form.university = '';
+  form.categoryName = '';
+}
 
+onMounted(() => {
+  proxy.getConfigKey('sys_resource_root2').then(res => {
+    baseUrl.value = res.msg;
+  })
+  setHeadinfo()
+})
 </script>
-<!--<script setup>-->
-<!--import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'-->
-<!--import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";-->
-
-<!--const router = useRouter()-->
-
-<!--const headinfo = ref({})-->
-
-<!--function setHeadinfo() {-->
-<!--  headinfo.value = {-->
-<!--    title: '生涯唤醒学习系统',-->
-<!--    user: {-->
-<!--      avatar: '头像路径',-->
-<!--      nickName: '张三'-->
-<!--    },-->
-<!--    backUrl: '/xjc-integratedmachine/wakeup/index'-->
-<!--  }-->
-<!--}-->
-
-
-<!--function jumpTo(path) {-->
-<!--  router.push({-->
-<!--    path: path,-->
-<!--    query: {name: 123}-->
-<!--  })-->
-<!--}-->
-
-<!--onMounted(() => {-->
-<!--  setHeadinfo()-->
-<!--})-->
-<!--</script>-->
-
 
 <style scoped lang="scss">
 p, div {
@@ -289,7 +584,7 @@ p, div {
     border-radius: 35px 35px 35px 35px;
     display: flex;
     //justify-content: space-around;
-    //flex-direction: column;
+    flex-direction: column;
     //align-items: center;
 
     .top-content {
@@ -297,7 +592,7 @@ p, div {
       height: 282px;
       border: 1px solid;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       align-items: center;
 
       .top-content-right {
@@ -305,6 +600,7 @@ p, div {
         width: 1630px;
         height: 281px;
         border: 1px solid;
+        margin-left: 45px;
 
         .title {
           font-weight: bold;
@@ -334,11 +630,12 @@ p, div {
         }
 
         .text-box {
-          width: 100%;
+          width: 1124px;
           display: flex;
-          justify-content: space-around;
+          //justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
+          margin-top: 14px;
 
           p {
             margin-right: 20px;
@@ -351,12 +648,13 @@ p, div {
           align-items: center;
 
           .right-top-icon {
-            width: 100px;
+            width: 200px;
             height: 68px;
             border: 1px solid;
             display: flex;
             justify-content: space-between;
             margin-top: 24px;
+
             .item-img {
               display: flex;
               flex-direction: column;
@@ -368,6 +666,7 @@ p, div {
                 color: #515F6A;
 
               }
+
               img {
                 width: 36px;
                 height: 36px;
@@ -376,63 +675,179 @@ p, div {
             }
           }
         }
+
       }
     }
 
   }
 
-  .content-bottom {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
 
-    .draw {
-      width: 109px;
-      height: 170px;
-      margin-left: 100px;
+  .bottom-content {
+    margin-top: 25px;
+    //width:100px;
+    .tab-box {
+      display: flex;
+      padding-right: 279px;
 
       img {
-        width: 109px;
-        height: 170px;
+        width: 36px;
+        height: 36px;
+        margin-right: 12px;
       }
     }
 
-    .ai-rabit {
-      position: absolute;
-      right: 100px;
-      top: -50px;
+
+    .item-box {
+      text-align: center;
       display: flex;
+      justify-content: center;
       align-items: center;
+      width: 202px;
+      height: 65px;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #979797;
+    }
 
-      .ai-rabit-text {
-        width: 345px;
-        height: 89px;
-        background: #E8EEF7;
-        font-weight: 300;
-        margin-bottom: 20px;
-        font-size: 22px;
-        color: #000000;
-        padding: 16px;
-        border-radius: 24px 24px 24px 24px;
-      }
-
-      img {
-        width: 178px;
-        height: 270px;
-      }
+    .item-box-active {
+      text-align: center;
+      color: #000000;
+      background: #FFFFFF;
+      font-weight: bold;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 202px;
+      height: 65px;
+      background: #FFFFFF;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
     }
   }
 
+  .editor-content div,
+  .editor-content span,
+  .editor-content p,
+  .editor-content h1,
+  .editor-content h2,
+  .editor-content h3,
+  .editor-content h4,
+  .editor-content h5,
+  .editor-content h6 {
+    font-size: 26px !important;
+    line-height: 37px !important;
+  }
+
+  .editor-content div,
+  .editor-content span,
+  .editor-content p {
+    text-indent: 2em !important;
+    text-align: left !important;
+  }
 }
 
-.temp {
-  width: 20vw;
-  height: 10vh;
-  background: #85eff5;
-  border: solid 1px #a2fffc;
-  border-radius: 10px;
-  cursor: pointer;
+.one-page {
+  width: 1832px;
+  height: 547px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 35px 35px;
+  border: 1px solid #FFFFFF;
+  overflow: auto;
+  padding-left: 33px;
+  padding-right: 33px;
+  line-height: 32px;
+
+  .title {
+    height: 40px;
+    border-left: 8px #8CE349 solid;
+    margin-top: 33px;
+    margin-left: 33px;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+    padding-left: 11px;
+  }
+
+  .info {
+    text-indent: 2em;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+  }
+
+  .select-div {
+    width: 100%;
+    height: 100px;
+    font-weight: 400;
+    font-size: 30px;
+    color: #333333;
+    line-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 21px;
+
+    .select-box {
+      width: 300px;
+      height: 90px;
+      border: 1px solid #CCCCCC;
+      line-height: 90px;
+      text-align: center;
+      margin-left: 10px;
+    }
+
+    .click-search {
+      width: 170px;
+      height: 90px;
+      background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
+      border-radius: 5px;
+      font-weight: 400;
+      font-size: 24px;
+      color: #FFFFFF;
+      margin-left: 20px;
+    }
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+    height: 74px !important;
+    font-size: 24px;
+    color: #1E410E;
+  }
+
+  ::v-deep .el-table tr {
+    height: 74px !important;
+    font-size: 20px;
+  }
+
+  ::v-deep .el-dialog__title {
+    font-size: 34px !important;
+  }
+
+  ::v-deep .el-dialog {
+    margin-top: 0px !important;
+  }
+
+  ::v-deep .el-dialog__headerbtn .el-dialog__close {
+    font-size: 30px !important;
+  }
+
+}
+.dict-dialog{
+  max-width: 570px;
+  height: 800px;
+  overflow: auto;
+  .dict-box {
+    //border: 1px solid red;
+    //background: #1ab394;
+    font-size: 24px;
+    line-height: 34px;
+    color: #333333;
+  }
 }
 
 </style>

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,39 @@
     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,
@@ -99,82 +134,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)) {
             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)
+        }
+
     }
 
     /**
@@ -189,7 +287,6 @@
             false, false, false,
             false, false, false]
         paintFlagList[index] = true
-        console.log(paintFlagList)
     }
 
     /*计算终点*/
@@ -200,31 +297,31 @@
         if (sum < Math.pow(50, 2) && sum > Math.pow(10, 2)) {
             if (paintFlagList[0]) {
                 if (paintStateFlag) {
-                    paint("#ffc300", 30, startAngle11, ret);
+                    paint(raduisColor[1], 30, startAngle11, ret);
                 } else {
-                    paint("#000000", 30, startAngle11, ret);
-                    paint("#000000", 70, startAngle11, ret);
-                    paint("#000000", 110, startAngle11, ret);
+                    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("#ffc300", 30, startAngle12, ret);
-                    paint("#ffc300", 70, startAngle12, ret);
+                    paint(raduisColor[1], 30, startAngle12, ret);
+                    paint(raduisColor[1], 70, startAngle12, ret);
                 } else {
-                    paint("#000000", 70, startAngle12, ret);
-                    paint("#000000", 110, startAngle12, ret);
+                    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("#ffc300", 30, startAngle13, ret);
-                    paint("#ffc300", 70, startAngle13, ret);
-                    paint("#ffc300", 110, startAngle13, ret);
+                    paint(raduisColor[1], 30, startAngle13, ret);
+                    paint(raduisColor[1], 70, startAngle13, ret);
+                    paint(raduisColor[1], 110, startAngle13, ret);
                 } else {
-                    paint("#000000", 110, startAngle13, ret);
+                    paint(raduisColor[0], 110, startAngle13, ret);
                 }
             }
         }
@@ -232,31 +329,31 @@
         else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
             if (paintFlagList[3]) {
                 if (paintStateFlag) {
-                    paint("#f72585", 165, startAngle21, ret);
+                    paint(raduisColor[2], 165, startAngle21, ret);
                 } else {
-                    paint("#000000", 165, startAngle21, ret);
-                    paint("#000000", 205, startAngle21, ret);
-                    paint("#000000", 245, startAngle21, ret);
+                    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("#f72585", 165, startAngle22, ret);
-                    paint("#f72585", 205, startAngle22, ret);
+                    paint(raduisColor[2], 165, startAngle22, ret);
+                    paint(raduisColor[2], 205, startAngle22, ret);
                 } else {
-                    paint("#000000", 205, startAngle22, ret);
-                    paint("#000000", 245, startAngle22, ret);
+                    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("#f72585", 165, startAngle23, ret);
-                    paint("#f72585", 205, startAngle23, ret);
-                    paint("#f72585", 245, startAngle23, ret);
+                    paint(raduisColor[2], 165, startAngle23, ret);
+                    paint(raduisColor[2], 205, startAngle23, ret);
+                    paint(raduisColor[2], 245, startAngle23, ret);
                 } else {
-                    paint("#000000", 245, startAngle23, ret);
+                    paint(raduisColor[0], 245, startAngle23, ret);
                 }
             }
         }
@@ -264,31 +361,31 @@
         else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
             if (paintFlagList[6]) {
                 if (paintStateFlag) {
-                    paint("#4cc9f0", 300, startAngle31, ret);
+                    paint(raduisColor[3], 300, startAngle31, ret);
                 } else {
-                    paint("#000000", 300, startAngle31, ret);
-                    paint("#000000", 340, startAngle31, ret);
-                    paint("#000000", 380, startAngle31, ret);
+                    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("#4cc9f0", 300, startAngle31, ret);
-                    paint("#4cc9f0", 340, startAngle31, ret);
+                    paint(raduisColor[3], 300, startAngle31, ret);
+                    paint(raduisColor[3], 340, startAngle31, ret);
                 } else {
-                    paint("#000000", 340, startAngle32, ret);
-                    paint("#000000", 380, startAngle32, ret);
+                    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("#4cc9f0", 300, startAngle33, ret);
-                    paint("#4cc9f0", 340, startAngle33, ret);
-                    paint("#4cc9f0", 380, startAngle33, ret);
+                    paint(raduisColor[3], 300, startAngle33, ret);
+                    paint(raduisColor[3], 340, startAngle33, ret);
+                    paint(raduisColor[3], 380, startAngle33, ret);
                 } else {
-                    paint("#000000", 380, startAngle33, ret);
+                    paint(raduisColor[0], 380, startAngle33, ret);
                 }
             }
         }
@@ -296,31 +393,31 @@
         else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
             if (paintFlagList[9]) {
                 if (paintStateFlag) {
-                    paint("#a000ff", 435, startAngle41, ret);
+                    paint(raduisColor[4], 435, startAngle41, ret);
                 } else {
-                    paint("#000000", 435, startAngle41, ret);
-                    paint("#000000", 475, startAngle41, ret);
-                    paint("#000000", 515, startAngle41, ret);
+                    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("#a000ff", 435, startAngle42, ret);
-                    paint("#a000ff", 475, startAngle42, ret);
+                    paint(raduisColor[4], 435, startAngle42, ret);
+                    paint(raduisColor[4], 475, startAngle42, ret);
                 } else {
-                    paint("#000000", 475, startAngle42, ret);
-                    paint("#000000", 515, startAngle42, ret);
+                    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("#a000ff", 435, startAngle43, ret);
-                    paint("#a000ff", 475, startAngle43, ret);
-                    paint("#a000ff", 515, startAngle43, ret);
+                    paint(raduisColor[4], 435, startAngle43, ret);
+                    paint(raduisColor[4], 475, startAngle43, ret);
+                    paint(raduisColor[4], 515, startAngle43, ret);
                 } else {
-                    paint("#000000", 515, startAngle43, ret);
+                    paint(raduisColor[0], 515, startAngle43, ret);
                 }
             }
         }
@@ -329,31 +426,31 @@
         else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
             if (paintFlagList[12]) {
                 if (paintStateFlag) {
-                    paint("#ffc9f6", 570, startAngle51, ret);
+                    paint(raduisColor[5], 570, startAngle51, ret);
                 } else {
-                    paint("#000000", 570, startAngle51, ret);
-                    paint("#000000", 610, startAngle51, ret);
-                    paint("#000000", 650, startAngle51, ret);
+                    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("#ffc9f6", 570, startAngle52, ret);
-                    paint("#ffc9f6", 610, startAngle52, ret);
+                    paint(raduisColor[5], 570, startAngle52, ret);
+                    paint(raduisColor[5], 610, startAngle52, ret);
                 } else {
-                    paint("#000000", 610, startAngle52, ret);
-                    paint("#000000", 650, startAngle52, ret);
+                    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("#ffc9f6", 570, startAngle53, ret);
-                    paint("#ffc9f6", 610, startAngle53, ret);
-                    paint("#ffc9f6", 650, startAngle53, ret);
+                    paint(raduisColor[5], 570, startAngle53, ret);
+                    paint(raduisColor[5], 610, startAngle53, ret);
+                    paint(raduisColor[5], 650, startAngle53, ret);
                 } else {
-                    paint("#000000", 650, startAngle53, ret);
+                    paint(raduisColor[0], 650, startAngle53, ret);
                 }
             }
         }
@@ -362,35 +459,35 @@
         else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
             if (paintFlagList[15]) {
                 if (paintStateFlag) {
-                    paint("#9de617", 705, startAngle61, ret);
+                    paint(raduisColor[6], 705, startAngle61, ret);
                 } else {
-                    paint("#000000", 705, startAngle61, ret);
-                    paint("#000000", 745, startAngle61, ret);
-                    paint("#000000", 785, startAngle61, ret);
+                    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("#9de617", 705, startAngle62, ret);
-                    paint("#9de617", 745, startAngle62, ret);
+                    paint(raduisColor[6], 705, startAngle62, ret);
+                    paint(raduisColor[6], 745, startAngle62, ret);
                 } else {
-                    paint("#000000", 745, startAngle62, ret);
-                    paint("#000000", 785, startAngle62, ret);
+                    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("#9de617", 705, startAngle63, ret);
-                    paint("#9de617", 745, startAngle63, ret);
-                    paint("#9de617", 785, startAngle63, ret);
+                    paint(raduisColor[6], 705, startAngle63, ret);
+                    paint(raduisColor[6], 745, startAngle63, ret);
+                    paint(raduisColor[6], 785, startAngle63, ret);
                 } else {
-                    paint("#000000", 785, startAngle63, ret);
+                    paint(raduisColor[0], 785, startAngle63, ret);
                 }
             }
         }
-
+        return ret;
     }
 
     /*计算角度0-180度*/
@@ -404,7 +501,6 @@
             ret += 450;
         }
         let num = ret * Math.PI / 180 + Math.PI;
-        console.log('角度：' + num);
         return num;
     }
 
@@ -449,6 +545,11 @@
         context.stroke();
     }
 
+    function reset() {
+        paintStateFlag = true;
+        paintStateFlagText.value = '画笔'
+    }
+
     function changePaintState() {
         if (paintStateFlag) {
             paintStateFlag = false;
@@ -474,9 +575,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)
             }
         }
@@ -490,37 +591,153 @@
         }
     }
 
-    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
+        // 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();
-        console.log("mmmmm")
+        initRainbow({type: null});
         drawBackground();
     });
 
@@ -543,20 +760,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/, '')
         }