|
|
@@ -20,18 +20,119 @@
|
|
|
<div class="ma-main">
|
|
|
<baseMessage />
|
|
|
|
|
|
- <currencyAnalysis />
|
|
|
+ <currencyAnalysis
|
|
|
+ @updateMessage="updateMessage"
|
|
|
+ :dialogVisible="dialogVisible"
|
|
|
+ />
|
|
|
|
|
|
- <scienceAnalysis />
|
|
|
+ <scienceAnalysis
|
|
|
+ @updateMessage="updateMessage"
|
|
|
+ :dialogVisible="dialogVisible"
|
|
|
+ />
|
|
|
|
|
|
- <extendAnalysis />
|
|
|
+ <extendAnalysis
|
|
|
+ @updateMessage="updateMessage"
|
|
|
+ :dialogVisible="dialogVisible"
|
|
|
+ />
|
|
|
<!-- <div style="height: 10000px;"></div> -->
|
|
|
</div>
|
|
|
+ <el-dialog :visible.sync="dialogVisible" width="60%">
|
|
|
+ <!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
|
|
|
+ <div class="a-d-top">
|
|
|
+ <div class="a-d-topTit"><div style="width: 136px">添加模块</div></div>
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="input2"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-t-right">
|
|
|
+ <span @click.stop="dialogVisible=false">×</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; height: 100%">
|
|
|
+ <div class="a-d-t-left">
|
|
|
+ <div class="itemTit">我的模块</div>
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ tagIndex == index
|
|
|
+ ? 'background: rgba(226, 238, 255, 1);color: rgba(54, 129, 252, 1)'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ class="a-d-t-l-item"
|
|
|
+ v-for="(item, index) in dialogTagList"
|
|
|
+ :key="item.id"
|
|
|
+ @click.stop="tagIndex = index"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-box">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 推荐
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="a-d-b-item"
|
|
|
+ v-for="(item, index) in dialogTagDataList[tagIndex]"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="a-d-b-i-top">
|
|
|
+ <img
|
|
|
+ style="height: 22px; width: 22px"
|
|
|
+ :src="
|
|
|
+ require('../../../../assets/icon/classroomObservation/digImg.png')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div class="a-d-b-i-t-title">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-b-i-bottom">{{ item.brief }}</div>
|
|
|
+ <div class="a-d-b-i-bottomPer" style="display: block">
|
|
|
+ 3982人已使用
|
|
|
+ </div>
|
|
|
+ <div class="a-d-b-i-bottomBtn" style="display: none">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-around;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="a-d-b-i-t-btn">详情</div>
|
|
|
+ <div class="a-d-b-i-t-btn1">添加</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import baseMessage from "./baseMessage.vue"; //基本信息
|
|
|
+import analysisItem from "./analysisItem";
|
|
|
+
|
|
|
import currencyAnalysis from "./currencyAnalysis.vue"; //通用课堂分析
|
|
|
import scienceAnalysis from "./scienceAnalysis.vue"; //科学课堂分析
|
|
|
import extendAnalysis from "./extendAnalysis.vue"; //扩展分析
|
|
|
@@ -41,13 +142,153 @@ export default {
|
|
|
currencyAnalysis,
|
|
|
scienceAnalysis,
|
|
|
extendAnalysis,
|
|
|
+ analysisItem,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showBrief: true, //是否显示模块简介
|
|
|
+ dialogVisible: false,
|
|
|
+ tagIndex: 0,
|
|
|
+ dialogTagList: [
|
|
|
+ { id: 1, name: "通用课堂分析" },
|
|
|
+ { id: 2, name: "学科课堂分析" },
|
|
|
+ { id: 3, name: "扩展分析" },
|
|
|
+ ],
|
|
|
+ dialogTagDataList: [
|
|
|
+ [
|
|
|
+ { title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
|
|
|
+ { title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
|
|
|
+ {
|
|
|
+ title: "布鲁姆问题分类",
|
|
|
+ brief: "分析问题所属认知层次，引导学生深入思考",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "麦卡锡问题分类",
|
|
|
+ brief: "使用4MAT模式，引导学生从多角度探讨问题",
|
|
|
+ },
|
|
|
+ { title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
|
|
|
+ { title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
|
|
|
+ {
|
|
|
+ title: "师生互动分析",
|
|
|
+ brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
|
|
|
+ },
|
|
|
+ { title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
|
|
|
+ { title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
|
|
|
+ { title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
|
|
|
+ {
|
|
|
+ title: "Kirkpatrick四级评估模型",
|
|
|
+ brief: "从反应、学习、行为和结果分析教学效果",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Biggs构造性对齐理论",
|
|
|
+ brief: "评估教学目标、教学活动和评估方法之间是否对齐",
|
|
|
+ },
|
|
|
+ { title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
|
|
|
+ {
|
|
|
+ title: "Lemov教学技巧",
|
|
|
+ brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Atkinson动机理论",
|
|
|
+ brief: "分析课堂设置的挑战与学生动机表现",
|
|
|
+ },
|
|
|
+ { title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
|
|
|
+ { title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
|
|
|
+ {
|
|
|
+ title: "布鲁姆问题分类",
|
|
|
+ brief: "分析问题所属认知层次，引导学生深入思考",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "麦卡锡问题分类",
|
|
|
+ brief: "使用4MAT模式，引导学生从多角度探讨问题",
|
|
|
+ },
|
|
|
+ { title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
|
|
|
+ { title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
|
|
|
+ {
|
|
|
+ title: "师生互动分析",
|
|
|
+ brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
|
|
|
+ },
|
|
|
+ { title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
|
|
|
+ { title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
|
|
|
+ { title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
|
|
|
+ {
|
|
|
+ title: "Kirkpatrick四级评估模型",
|
|
|
+ brief: "从反应、学习、行为和结果分析教学效果",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Biggs构造性对齐理论",
|
|
|
+ brief: "评估教学目标、教学活动和评估方法之间是否对齐",
|
|
|
+ },
|
|
|
+ { title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
|
|
|
+ {
|
|
|
+ title: "Lemov教学技巧",
|
|
|
+ brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Atkinson动机理论",
|
|
|
+ brief: "分析课堂设置的挑战与学生动机表现",
|
|
|
+ },
|
|
|
+ { title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { title: "OMO智慧课堂分析", brief: "多维度分析课堂整体情况" },
|
|
|
+ { title: "教学阶段九事件分析", brief: "使用加涅九事件分析教学环节" },
|
|
|
+ {
|
|
|
+ title: "布鲁姆问题分类",
|
|
|
+ brief: "分析问题所属认知层次，引导学生深入思考",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "麦卡锡问题分类",
|
|
|
+ brief: "使用4MAT模式，引导学生从多角度探讨问题",
|
|
|
+ },
|
|
|
+ { title: "学生回答情况", brief: "使用IRE模型分析学生回答情况" },
|
|
|
+ { title: "课堂时间分配", brief: "使用S-T分析法分析师生时间占比" },
|
|
|
+ {
|
|
|
+ title: "师生互动分析",
|
|
|
+ brief: "使用S-T分析法分析课堂每一分钟师生交互情况",
|
|
|
+ },
|
|
|
+ { title: "教学模式分析", brief: "使用S-T分析法分析教学模式类型" },
|
|
|
+ { title: "SOLO分类法", brief: "使用SOLO分类法评估学生认知层次" },
|
|
|
+ { title: "Gibbs的反思循环", brief: "分析教学过程的六个阶段" },
|
|
|
+ {
|
|
|
+ title: "Kirkpatrick四级评估模型",
|
|
|
+ brief: "从反应、学习、行为和结果分析教学效果",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Biggs构造性对齐理论",
|
|
|
+ brief: "评估教学目标、教学活动和评估方法之间是否对齐",
|
|
|
+ },
|
|
|
+ { title: "Marzano的教学策略模型", brief: "分析课堂采取的教学策略" },
|
|
|
+ {
|
|
|
+ title: "Lemov教学技巧",
|
|
|
+ brief: "分析教师的教学技巧，如设定高期望、频繁检查理解等",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Atkinson动机理论",
|
|
|
+ brief: "分析课堂设置的挑战与学生动机表现",
|
|
|
+ },
|
|
|
+ { title: "Dweck成长型心智", brief: "分析教师与学生的心智风格" },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ analysisList: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ updateMessage(val) {
|
|
|
+ // console.log(val);
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.tagIndex = val;
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm("确认关闭？")
|
|
|
+ .then((_) => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch((_) => {});
|
|
|
+ },
|
|
|
// 切换显示模板简介
|
|
|
changeShowBrief(newValue) {
|
|
|
this.showBrief = newValue;
|
|
|
@@ -110,4 +351,247 @@ export default {
|
|
|
height: calc(100vh - 127px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
+
|
|
|
+.a-d-top {
|
|
|
+ /* background: #adadad; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ user-select: none;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+}
|
|
|
+.a-d-top >>> .el-input__inner {
|
|
|
+ width: 320px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+.a-d-top >>> .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+.a-d-topTit {
|
|
|
+ width: 171px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ line-height: 22px;
|
|
|
+ justify-content: center;
|
|
|
+ /* text-align: left; */
|
|
|
+}
|
|
|
+.a-d-t-left {
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-l-item {
|
|
|
+ /* width: auto;
|
|
|
+ height: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #d4d9da;
|
|
|
+ margin-right: 3px;
|
|
|
+ cursor: pointer; */
|
|
|
+ cursor: pointer;
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-l-item:hover {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-right {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: black !important;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-right > span {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ border-radius: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ /* align-items: center; */
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+ /* background-color: #adadad; */
|
|
|
+ cursor: pointer;
|
|
|
+ /* background-color: #e6e6e6; */
|
|
|
+ color: #adadad;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ overflow: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-item {
|
|
|
+ width: 22%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /* position: relative; */
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomPer {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.a-d-b-i-top {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 50%; */
|
|
|
+ height: 20px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+}
|
|
|
+.a-d-b-i-top > img {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+/* .a-d-b-i-top>div{ */
|
|
|
+/* width: auto;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px; */
|
|
|
+/* } */
|
|
|
+
|
|
|
+.a-d-b-i-t-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ display: block;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 35px;
|
|
|
+ /* display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden; */
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-i-bottom {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ /* max-height: 186px; */
|
|
|
+ font-size: 14px;
|
|
|
+ -webkit-line-clamp: 5;
|
|
|
+ line-height: 20px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-i-t-btn {
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 25px;
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ color: rgba(54, 129, 252, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+}
|
|
|
+.a-d-b-i-t-btn1 {
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 25px;
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: rgba(54, 129, 252, 1);
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.messageArea >>> .el-dialog {
|
|
|
+ min-width: 1200px;
|
|
|
+
|
|
|
+ height: 700px;
|
|
|
+ box-shadow: 0px 0 8px 0px #555555;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #fff;
|
|
|
+ top: 0px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.messageArea >>> .el-dialog__body {
|
|
|
+ height: 100%;
|
|
|
+ min-width: 1200px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+}
|
|
|
+.messageArea >>> .el-dialog__header {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.itemTit {
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 5px 8px 5px 8px;
|
|
|
+ gap: 8px;
|
|
|
+ opacity: 0px;
|
|
|
+ margin: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+}
|
|
|
</style>
|
SanHQin