[feat] 彩虹图

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

@@ -6,10 +6,6 @@
         <p>{{exampleInfo.shortIntroduce}}</p>
         <p>{{exampleInfo.name}}：{{exampleInfo.type}}</p>
         <div class="left-main">
-<!--          <div class="img-box">-->
-<!--&lt;!&ndash;            <img src="@/assets/images/wakeup/float-box.png" />&ndash;&gt;-->
-<!--&lt;!&ndash;            <img :src= "`${baseUrl}`+ exampleInfo.picPath" />&ndash;&gt;-->
-<!--          </div>-->
           <div class="text-box" v-html="exampleInfo.introduce">
           </div>
         </div>
@@ -18,26 +14,13 @@
       <div class="content-right">
           <div v-for="(item,index) in exampleData" class="item-box" :class="{ 'active-button': isActive }" @click="showInfo(item,index)">
             <img :src= "`${baseUrl}`+ item.picPath" />
-          {{exampleId===item.id}}---
+          {{exampleId===item.id}}
             {{item.id}}
             <div>{{item.name}}</div>
             <p >{{item.type}}</p>
             <p >{{item.shortIntroduce}}</p>
           </div>
       </div>
-      <!--      <div class="content-box">-->
-<!--      </div>-->
-      <!--      <div class="content-bottom">-->
-      <!--        <div class="draw draggable-ball" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">-->
-      <!--          <img src="@/assets/images/wakeup/float-box.png" />-->
-      <!--        </div>-->
-      <!--        <div class="ai-rabit">-->
-      <!--          <div class="ai-rabit-text">-->
-      <!--            你好，同学欢迎进入生涯学习系统-->
-      <!--          </div>-->
-      <!--          <img  src="@/assets/images/wakeup/ai-rabit.png" />-->
-      <!--        </div>-->
-      <!--      </div>-->
     </div>
 
     <el-dialog

src/views/xjc-integratedmachine/wakeup/career_maturity/evaluation.vue

@@ -19,12 +19,15 @@
             综合来看，你对生涯发展有一定认知，但心理准备不足，缺乏系统规划，面对生涯选择时容易迷茫，易受周围同学或家长影响，尚未形成稳定的生涯发展思路。
           </p>
           <div class="table-box">
-
+            <div class="main">
+              <div ref="chartContainer" class="chart-container"></div>
+            </div>
           </div>
         </div>
         <div class="two-page" v-show="twoPage">112</div>
         <div class="three-page" v-show="threePage">11112</div>
       </div>
+
     </div>
     <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
     <span>
@@ -45,11 +48,13 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {Calendar} from '@element-plus/icons-vue'
-import {onMounted, reactive} from "vue";
+import {ref,onMounted} from "vue";
 import {maturityReport} from "@/api/xjc-integratedmachine/wakeup/index.js";
+import * as echarts from 'echarts';
 
 const headinfo = ref({})
 const describeInfo = ref('')
+const evaluationList =  ref([])
 let pageLoading = ref(false)
 
 function setHeadinfo() {
@@ -68,65 +73,27 @@ const onePage = ref(true)
 const twoPage = ref(false)
 const threePage = ref(false)
 
-const position = reactive({x: 10, y: 10});
-let isDragging = false;
-let originX, originY;
-
-const startDrag = (e) => {
-  console.log("e", e)
-  isDragging = true;
-  originX = e.clientX - position.x;
-  originY = e.clientY - position.y;
-  console.log("originX", originX, originY, "originY")
-  document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', stopDrag);
-};
-
-const onMouseMove = (e) => {
-  if (isDragging) {
-    position.x = e.clientX - originX;
-    position.y = e.clientY - originY;
-    console.log("position.x", position.x, "position.y", position.y)
-  }
-};
-
-const stopDrag = () => {
-  isDragging = false;
-  document.removeEventListener('mousemove', onMouseMove);
-  document.removeEventListener('mouseup', stopDrag);
-};
 const describe = (val) => {
   describeInfo.value = val;
   centerDialogVisible.value = true;
 };
-const showPage = (val) => {
-  if (val === 1) {
-    onePage.value = true;
-    twoPage.value = false;
-    threePage.value = false;
-  } else if (val === 2) {
-    onePage.value = false;
-    twoPage.value = true;
-    threePage.value = false;
-  } else if (val === 3) {
-    onePage.value = false;
-    twoPage.value = false;
-    threePage.value = true;
-  }
-}
 //请求页面数据
 function getMaturityReport() {
-  pageLoading = true;
+  // pageLoading = true;
   let id = "60f384a7-4970-44cb-a9da-0ce00519eee9"
   maturityReport({id :id }).then(res => {
-    // console
-    if(res.exampleList.length > 0){
-      exampleInfo.value = res.exampleList[0];
-    }
-    exampleData.value = res.exampleList;
+
+    //
     pageLoading = false;
+    // if(res.data.eval.length > 0){
+    evaluationList.value = res.data.eval;
+    console.log("evaluationList.value",evaluationList.value)
+    // }
+    // exampleData.value = res.data.exampleList;
+
   }).catch((err)=>{
     console.log("error")
+    alert("111111111")
     pageLoading = false;
   })
 }
@@ -135,6 +102,45 @@ onMounted(() => {
   getMaturityReport()
 })
 
+// 定义一个ref来引用图表的容器
+const chartContainer = ref(null);
+let chartInstance = null;
+
+// 图表配置和数据
+const chartOptions = {
+  title: {
+    text: 'ECharts 横向柱状图示例',
+  },
+  tooltip: {},
+  xAxis: {
+    type: 'value', // 修改为数值轴，用于显示柱状图的高度
+  },
+  yAxis: {
+    type: 'category', // 修改为类目轴，用于显示柱状图的类别
+    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子','11','23','34','34'],
+  },
+  series: [
+    {
+      name: '销量',
+      type: 'bar', // 仍然使用柱状图，但方向会由ECharts根据xAxis和yAxis的配置自动调整
+      data: [5, 20, 36, 10, 10, 20,23,33,33,44],
+    },
+  ],
+};
+
+// 初始化图表
+const initChart = () => {
+  if (chartContainer.value) {
+    chartInstance = echarts.init(chartContainer.value);
+    chartInstance.setOption(chartOptions);
+  }
+};
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  initChart();
+});
+
 </script>
 
 <style scoped lang="scss">
@@ -219,9 +225,10 @@ p {
       .table-box{
         width: 1525px;
         height: 720px;
-        background: #C0E7FF;
-        opacity: 0.2;
+        background:rgba(192, 231, 255, 0.20);
+        //opacity: 0.2;
         margin-top: 26px;
+        z-index:10;
       }
 
     }
@@ -320,5 +327,9 @@ p {
     color: #266EFF;
   }
 }
-
+.chart-container {
+  width: 1040px;
+  height: 620px; /* 可以根据需要调整高度 */
+  border: 1px solid;
+}
 </style>

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

@@ -1,6 +1,9 @@
 <template>
     <div id="outerDiv" class="development_stage">
-        <canvas id="myCanvas" width="400" height="400" style="background: #00ff00;z-index: 9999"></canvas>
+      <div style="z-index:9999;">
+        <canvas id="myCanvas" width="1920" height="1080" style="background: #00ff00;z-index: 9999"></canvas>
+      </div>
+
         <head-component :headinfo=headinfo></head-component>
         <div id="cc"
              style="position: absolute;width: 5px;height: 5px;background: #ff0000;margin: 0 auto;z-index: 99999"></div>
@@ -539,9 +542,9 @@
         const ctx = canvas.getContext("2d");
 
         // 圆心和半径
-        const centerX = 200;
-        const centerY = 200;
-        const radius = 100;
+        const centerX = 916;
+        const centerY = 1023;
+        const radius = 855;
 
         // 绘制红色边框的圆
         ctx.beginPath();
@@ -587,7 +590,7 @@
         .page-box {
             width: 1832px;
             height: 910px;
-            background: black;
+            background: none;
             border-radius: 35px 35px 35px 35px;
             //margin: 13px auto 0;
             /*padding-top: 25px;*/

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/, '')
         }