diff --git a/src/components/BreadCrumb.vue b/src/components/BreadCrumb.vue index 88c4af80..fc4e84d1 100644 --- a/src/components/BreadCrumb.vue +++ b/src/components/BreadCrumb.vue @@ -452,6 +452,84 @@ export default { name:'学习路径图' } ]; + } + if (n.indexOf("/project") !== -1 || n.indexOf("/ProjecT") !== -1) { + state.list = [ + { + name: "报表中心", + }, + { + name:'板块详细数据' + }, + { + name:'项目' + } + ]; + } + if (n.indexOf("/curriculum") !== -1 || n.indexOf("/CurriculuM") !== -1) { + state.list = [ + { + name: "报表中心", + }, + { + name:'板块详细数据' + }, + { + name:'课程' + } + ]; + } + if (n.indexOf("/caseess") !== -1 || n.indexOf("/CaseesS") !== -1) { + state.list = [ + { + name: "报表中心", + }, + { + name:'板块详细数据' + }, + { + name:'案例' + } + ]; + } + if (n.indexOf("/article") !== -1 || n.indexOf("/ArticlE") !== -1) { + state.list = [ + { + name: "报表中心", + }, + { + name:'板块详细数据' + }, + { + name:'文章' + } + ]; + } + if (n.indexOf("/questionsandanswers") !== -1 || n.indexOf("/QuestionsAndAnswers") !== -1) { + state.list = [ + { + name: "报表中心", + }, + { + name:'板块详细数据' + }, + { + name:'问答' + } + ]; + } + if (n.indexOf("/examination") !== -1 || n.indexOf("/ExaminatioN") !== -1) { + state.list = [ + { + name: "报表中心", + }, + { + name:'板块详细数据' + }, + { + name:'考试' + } + ]; } if (n.indexOf("/overvoew") !== -1 || n.indexOf("/OvervoeW") !== -1) { state.list = [ diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue index 7b2267ca..987d6f94 100644 --- a/src/components/NavLeft.vue +++ b/src/components/NavLeft.vue @@ -312,13 +312,67 @@ 学习路径图 + + + 项目 + + + + 课程 + + + + 案例 + + + + 文章 + + + + 问答 + + + + 考试 + - + 概览 - + + +
+ +
+
+ +
+
+ + +
+
+ + +
+
+
+
+
搜索
+
+
+
+
重置
+
+
+
+ +
+
+
+
导出
+
+
+ +
+ + +
+
+ +
+
+
+
+ + + diff --git a/src/views/report/Caseess.vue b/src/views/report/Caseess.vue new file mode 100644 index 00000000..bc403879 --- /dev/null +++ b/src/views/report/Caseess.vue @@ -0,0 +1,392 @@ + + + diff --git a/src/views/report/Curriculum.vue b/src/views/report/Curriculum.vue new file mode 100644 index 00000000..dc61ee53 --- /dev/null +++ b/src/views/report/Curriculum.vue @@ -0,0 +1,507 @@ + + + diff --git a/src/views/report/Examination.vue b/src/views/report/Examination.vue new file mode 100644 index 00000000..46409fd7 --- /dev/null +++ b/src/views/report/Examination.vue @@ -0,0 +1,476 @@ + + + \ No newline at end of file diff --git a/src/views/report/Learningpathmap.vue b/src/views/report/Learningpathmap.vue index d1a0aba1..5bb10d79 100644 --- a/src/views/report/Learningpathmap.vue +++ b/src/views/report/Learningpathmap.vue @@ -1,17 +1,207 @@ diff --git a/src/views/report/Operational.vue b/src/views/report/Operational.vue index 287fe748..fa6fe1fe 100644 --- a/src/views/report/Operational.vue +++ b/src/views/report/Operational.vue @@ -121,8 +121,92 @@
-
-
+
+
+
学习内容
+
+ + 导出学习内容 +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
课程数
+
+
+
+
项目数
+
+
+
+
学习路径图
+
+
+
+
+
+
学习内容
+
+ + 导出学习内容 +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
案例
+
+
+
+
文章
+
+
+
+
问答
+
+
+
@@ -134,6 +218,9 @@ export default { setup() { const surfaceRef = ref(null); const surface1Ref = ref(null); + const surface2Ref = ref(null); + const surface3Ref = ref(null); + // 折线图配置项 const option = ref({ tooltip: { trigger: "axis", @@ -183,6 +270,52 @@ export default { }, ], }); + // 柱状图1配置项 + const options = ref({ + tooltip: { + trigger: "axis", + }, + grid: { + top: "6%", + left: "0%", + right: "0%", + bottom: "2%", + containLabel: true, + }, + xAxis: { + type: "category", + data: [], + }, + yAxis: { + type: "value", + }, + series: [ + { + name: "课程数", + data: [], + type: "bar", + backgroundStyle: { + color: "#1487F9", + }, + }, + { + name: "项目数", + data: [], + type: "bar", + backgroundStyle: { + color: "#00CECB", + }, + }, + { + name: "学习路径图", + data: [], + type: "bar", + backgroundStyle: { + color: "#FFA71A", + }, + }, + ], + }); // 图表1 数据源 const echartOneData = ref([ { @@ -228,18 +361,7 @@ export default { long: 410, }, ]); - // const calMax = (arr) => { - // const max = Math.max.apply(null, arr); - // const maxint = Math.ceil(max / 5); - // const maxval = maxint * 5 + 50; - // return maxval; - // }; - // const calMin = (arr) => { - // const min = Math.min.apply(null, arr); - // const minint = Math.floor(min / 1); - // const minval = minint / 1; - // return minval; - // }; + // 处理图表数据的方法 const changeData = () => { const timeList = []; @@ -254,36 +376,32 @@ export default { }); // 处理x轴显示信息 option.value.xAxis.data = timeList; - // 处理左侧Y轴显示信息 - // const maxDataRight = calMax(personList); - // const minDataRight = calMin(personList); - // const maxDataLeft = calMax([...numList, longList]); - // const minDataLeft = calMin([...numList, longList]); - // option.value.yAxis[0].min = minDataLeft; - // option.value.yAxis[0].max = maxDataLeft; - // option.value.yAxis[0].splitNumber = 10; - // option.value.yAxis[0].interval = Math.floor( - // (maxDataLeft - minDataLeft) / 10 - // ); - // option.value.yAxis[1].min = minDataRight; - // option.value.yAxis[1].max = maxDataRight; - // option.value.yAxis[1].splitNumber = 10; - // option.value.yAxis[1].interval = Math.floor( - // (maxDataRight - minDataRight) / 10 - // ); // 右侧坐标轴数据 option.value.series[0].data = personList; //左侧坐标轴数据 option.value.series[1].data = numList; option.value.series[2].data = longList; + // 柱状图1 + options.value.xAxis.data = timeList; + options.value.series[0].data = personList; + options.value.series[1].data = numList; + options.value.series[2].data = longList; }; // 生成echarts的方法 const createEcharts = () => { changeData(); + // 图表1 const myChart = echarts.init(surfaceRef.value); option.value && myChart.setOption(option.value); + // 图表2 const myChart1 = echarts.init(surface1Ref.value); option.value && myChart1.setOption(option.value); + // 图表3左侧图表 + const myChart2 = echarts.init(surface2Ref.value); + options.value && myChart2.setOption(options.value); + // 图表3 右侧图表 + const myChart3 = echarts.init(surface3Ref.value); + options.value && myChart3.setOption(options.value); }; // 挂载完成 onMounted(() => { @@ -292,6 +410,8 @@ export default { return { surfaceRef, surface1Ref, + surface2Ref, + surface3Ref, echartOneData, }; }, @@ -301,9 +421,6 @@ export default { .operational { width: 100%; height: 100%; - // display: flex; - // flex-direction: column; - // box-sizing: border-box; overflow-x: hidden; overflow-y: auto; padding: 0 38px; @@ -428,24 +545,182 @@ export default { } .echartsThree { width: 100%; - height: 400px; + height: 500px; margin-top: 20px; margin-bottom: 30px; display: flex; .left { width: calc(50% - 5px); height: 100%; - background: red; border: 1px solid rgba(232, 236, 239, 1); border-radius: 4px; + padding: 15px; + .leftEacharts { + width: 100%; + height: 300px; + margin-top: 20px; + } + .title { + display: flex; + justify-content: space-between; + margin-top: 10px; + .leftTile { + font-size: 18px; + color: black; + font-weight: 600; + } + .rightTile { + padding: 0 15px; + background: white; + height: 32px; + line-height: 34px; + border-radius: 4px; + color: #387df7; + border: 1px solid #387df7; + cursor: pointer; + img { + margin-top: -3px; + margin-right: 5px; + } + } + .rightTile:hover { + background: rgba(64, 158, 255, 0.2); + } + } + .searchThree { + margin-top: 20px; + width: 100%; + height: 40px; + .leftSearch { + display: flex; + .leftItemSearch { + margin-right: 10px; + } + } + .timeItemSearch { + width: 400px; + } + } + .threeMsg { + display: flex; + margin-top: 15px; + width: 275px; + margin-left: calc(50% - 133px); + .threeMsgItem { + display: flex; + align-items: center; + margin-right: 10px; + .classNum { + width: 24px; + height: 14px; + background: #1487f9; + border-radius: 2px; + } + .projectNum { + width: 24px; + height: 14px; + background: #00cecb; + border-radius: 2px; + } + .study { + width: 24px; + height: 14px; + background: #ffa71a; + border-radius: 2px; + } + .MsgItemText { + margin-left: 5px; + font-weight: 600; + } + } + } } .right { margin-left: 10px; width: calc(50% - 5px); height: 100%; - background: chartreuse; border: 1px solid rgba(232, 236, 239, 1); border-radius: 4px; + padding: 15px; + .leftEacharts { + width: 100%; + height: 300px; + margin-top: 20px; + } + .title { + display: flex; + justify-content: space-between; + margin-top: 10px; + .leftTile { + font-size: 18px; + color: black; + font-weight: 600; + } + .rightTile { + padding: 0 15px; + background: white; + height: 32px; + line-height: 34px; + border-radius: 4px; + color: #387df7; + border: 1px solid #387df7; + cursor: pointer; + img { + margin-top: -3px; + margin-right: 5px; + } + } + .rightTile:hover { + background: rgba(64, 158, 255, 0.2); + } + } + .searchThree { + margin-top: 20px; + width: 100%; + height: 40px; + .leftSearch { + display: flex; + .leftItemSearch { + margin-right: 10px; + } + } + .timeItemSearch { + width: 400px; + } + } + .threeMsg { + display: flex; + margin-top: 15px; + width: 275px; + margin-left: calc(50% - 133px); + .threeMsgItem { + display: flex; + align-items: center; + margin-right: 10px; + .classNum { + width: 24px; + height: 14px; + background: #1487f9; + border-radius: 2px; + } + .projectNum { + width: 24px; + height: 14px; + background: #00cecb; + border-radius: 2px; + } + .study { + width: 24px; + height: 14px; + background: #ffa71a; + border-radius: 2px; + } + .MsgItemText { + margin-left: 5px; + font-weight: 600; + } + } + } } } } diff --git a/src/views/report/Project.vue b/src/views/report/Project.vue new file mode 100644 index 00000000..618ddcba --- /dev/null +++ b/src/views/report/Project.vue @@ -0,0 +1,466 @@ + + + diff --git a/src/views/report/Questionsandanswers.vue b/src/views/report/Questionsandanswers.vue new file mode 100644 index 00000000..1b482f9d --- /dev/null +++ b/src/views/report/Questionsandanswers.vue @@ -0,0 +1,392 @@ + + + \ No newline at end of file