|
|
@@ -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>
|
byq