Commit 5e599d6e authored by 纪泽龙's avatar 纪泽龙

Merge branch 'jzl'

parents 6561b1d1 525c5db6
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-23 11:02:24 * @Date: 2022-09-23 11:02:24
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-28 09:57:47 * @LastEditTime: 2023-01-29 14:53:07
* @FilePath: /danger-manage-web/src/api/educationPlanExam/trainingProgram.js * @FilePath: /danger-manage-web/src/api/educationPlanExam/trainingProgram.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -186,3 +186,10 @@ export function bachAddTopic(data) { ...@@ -186,3 +186,10 @@ export function bachAddTopic(data) {
}) })
} }
export function bachAddTopicGuest(data) {
return request({
url: '/contractTrainTopic/bachAddTopic',
method: 'post',
data: data
})
}
...@@ -276,7 +276,6 @@ export default { ...@@ -276,7 +276,6 @@ export default {
// 新增选项 // 新增选项
add(addValue) { add(addValue) {
this.form.questions.push({ value: addValue }); this.form.questions.push({ value: addValue });
console.log();
}, },
save(num = 2) { save(num = 2) {
return new Promise((resove) => { return new Promise((resove) => {
......
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-12-27 09:30:19
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2023-01-29 14:52:33
* @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/ChangeQuestion.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="table-wrapper">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="所属单位" prop="deptId" ref="treeItem">
<Treeselect
class="tree"
v-model="queryParams.deptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择归属部门"
style="width: 200px"
/>
</el-form-item>
<el-form-item label="题库名称" prop="bankName">
<el-input
v-model="queryParams.bankName"
placeholder="考试时间"
clearable
size="small"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="search"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetClick"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list" height="435" ref="multipleTable">
<!-- <el-table-column type="selection"></el-table-column> -->
<el-table-column label="" align="center" prop="profession">
<template v-slot="{ row }">
<!-- <div> -->
<el-checkbox
:disabled="row.numberQuestions == 0"
v-model="row.checked"
></el-checkbox>
<!-- </div> -->
</template>
</el-table-column>
<el-table-column label="题库名称" align="center" prop="bankName">
</el-table-column>
<el-table-column label="所属单位" align="center" prop="courseType">
<template v-slot="scope">
<div>
{{ selectList(deptOptions, scope.row.deptId) || "-" }}
</div>
</template>
</el-table-column>
<el-table-column
label="包含题目数量"
align="center"
prop="numberQuestions"
:formatter="formatter"
>
</el-table-column>
<el-table-column label="选取题目数量" align="center" prop="profession">
<template v-slot="{ row }">
<div>
<!-- <el-input
:disabled="!row.checked|| row.numberQuestions==0 "
v-model="row.changeNum"
size="mini"
style="width: 100px"
></el-input> -->
<el-input-number
v-model="row.changeNum"
:disabled="!row.checked || row.numberQuestions == 0"
size="mini"
:min="1"
:max="+row.numberQuestions ? +row.numberQuestions : 1000000"
label="描述文字"
></el-input-number>
</div>
</template>
</el-table-column>
</el-table>
<!-- <div> -->
<el-pagination
:layout="'prev, pager, next'"
v-show="total > 0"
:total="total"
:current-page="queryParams.pageNum"
:page-sizes="[queryParams.pageSize]"
@current-change="currentChangeClick"
/>
</div>
</template>
<script>
import { listBank, delBank } from "@/api/educationPlanExam/questionBank";
import { bachAddTopicGuest } from "@/api/educationPlanExam/lessonsProgram.js";
// 部门列表
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "",
components: {
Treeselect,
},
props: {
courseId: {
type: Number,
},
},
data() {
return {
queryParams: {
deptId: null,
courseName: "",
pageNum: 1,
pageSize: 10,
},
list: [
{
checked: false,
},
],
total: 20,
loading: false,
// 题库id
deptId: null,
// 归属部门列表
deptOptions: [],
};
},
created() {
this.getList();
this.getTreeselect();
},
methods: {
getTreeselect() {
treeselect().then((response) => {
this.deptOptions = response.data;
// console.log("123", this.deptOptions);
// console.log(this.selectList(this.deptOptions, 175));
});
},
// 递归查值的方法
selectList(list, id) {
for (let i = 0; i < list.length; i++) {
let item = list[i];
if (item.id == id) {
return item.label;
} else {
if (Array.isArray(item.children)) {
let a = this.selectList(item.children, id);
if (a) {
return a;
}
}
}
}
},
getList() {
this.loading = true;
listBank(this.queryParams)
.then((res) => {
console.log(res);
this.list = res.rows.map((item, index) => {
return {
bankNum:
index +
1 +
(this.queryParams.pageNum - 1) * this.queryParams.pageSize,
checked: false,
changeNum: 0,
...item,
};
});
this.total = res.total;
})
.finally(() => {
this.loading = false;
});
},
saveAndNext() {
const topicInfos = this.list
.filter((item) => item.checked)
.map((item) => {
return {
bankId: item.bankId,
quan: item.changeNum,
};
});
console.log(this.courseId, topicInfos);
const data = { courseId: this.courseId, topicInfos };
console.log(data);
bachAddTopicGuest(data).then((res) => {
console.log(res);
if (res.code == 200) {
// this.$parent.$parent.componentsNumChange(2);
this.$parent.$parent.getContractTopicList(this.courseId);
this.$parent.$parent.dialogVisible2=false;
}
});
},
resetClick() {},
search() {
this.getList();
},
currentChangeClick() {},
formatter(row, column, cellValue, index) {
// console.log(row, column, cellValue, index);
if (!cellValue) return "-";
else return cellValue;
},
},
};
</script>
<style lang="scss" scoped>
.table-wrapper {
padding-top: 22px;
width: 100%;
height: 550px;
overflow: hidden;
// padding-bottom: 10px;
margin-bottom: 20px;
}
</style>
<template> <template>
<div class="form-wrapper"> <div class="form-wrapper">
<div style="width: 100%;height:100%;"> <div style="width: 100%; height: 100%">
<el-form :model="contractTrainForm" :rules="rules" ref="contractTrainForm" label-width="100px" class="demo-ruleForm"> <el-form
<el-form-item label="培训名称" prop="courseName"> :model="contractTrainForm"
<el-input v-model="contractTrainForm.courseName"></el-input> :rules="rules"
</el-form-item> ref="contractTrainForm"
<el-form-item label="培训内容" prop="courseConent"> label-width="100px"
<el-input type="textarea" v-model="contractTrainForm.courseConent" rows="5"></el-input> class="demo-ruleForm"
</el-form-item> >
<div class="flex"> <el-form-item label="培训名称" prop="courseName">
<el-form-item label="视频上传" v-if="!readOnly" prop="video"> <el-input v-model="contractTrainForm.courseName"></el-input>
<FileUpload </el-form-item>
listType="picture" <el-form-item label="培训内容" prop="courseConent">
@resFun="getFileInfoVideo" <el-input
@remove="listRemoveVideo" type="textarea"
:fileArr="fileListVideo" v-model="contractTrainForm.courseConent"
:fileSize="500" rows="5"
:fileType="['mp4']" ></el-input>
/> </el-form-item>
<el-input v-show="false" disabled v-model="contractTrainForm.video"></el-input> <div class="flex">
</el-form-item> <el-form-item label="视频上传" v-if="!readOnly" prop="video">
<el-form-item label="附件上传" v-if="!readOnly" prop="enclosure"> <FileUpload
<FileUpload listType="picture"
listType="picture" @resFun="getFileInfoVideo"
@resFun="getFileInfoFile" @remove="listRemoveVideo"
@remove="listRemoveFile" :fileArr="fileListVideo"
:fileArr="fileListFile" :fileSize="500"
/> :fileType="['mp4']"
<el-input v-show="false" disabled v-model="contractTrainForm.enclosure"></el-input> />
</el-form-item> <el-input
</div> v-show="false"
</el-form> disabled
v-model="contractTrainForm.video"
></el-input>
</el-form-item>
<el-form-item label="附件上传" v-if="!readOnly" prop="enclosure">
<FileUpload
listType="picture"
@resFun="getFileInfoFile"
@remove="listRemoveFile"
:fileArr="fileListFile"
/>
<el-input
v-show="false"
disabled
v-model="contractTrainForm.enclosure"
></el-input>
</el-form-item>
</div> </div>
<visitorQuestion ref="visitorQuestion"></visitorQuestion> </el-form>
</div> </div>
<visitorQuestion ref="visitorQuestion"></visitorQuestion>
</div>
</template> </template>
<script> <script>
import FileUpload from "@/components/FileUpload"; import FileUpload from "@/components/FileUpload";
import uploadfile from "@/assets/uploadfile.png"; import uploadfile from "@/assets/uploadfile.png";
import visitorQuestion from "@/views/educationPlanExam/visitorProgram/visitorQuestion"; import visitorQuestion from "@/views/educationPlanExam/visitorProgram/visitorQuestion";
import {listCourse} from "@/api/contractTrain/contractTrain"; import { listCourse } from "@/api/contractTrain/contractTrain";
export default { export default {
data() { data() {
return { return {
contractTrainForm: { contractTrainForm: {
courseName: '', courseName: "",
courseConent: '', courseConent: "",
video: "", video: "",
enclosure: "", enclosure: "",
}, },
fileListVideo: [], fileListVideo: [],
fileListFile: [], fileListFile: [],
readOnly: false, readOnly: false,
rules: { rules: {
name: [ name: [{ required: true, message: "请输入培训名称", trigger: "blur" }],
{ required: true, message: '请输入培训名称', trigger: 'blur' } region: [
], { required: true, message: "请输入培训内容", trigger: "change" },
region: [ ],
{ required: true, message: '请输入培训内容', trigger: 'change' } video: [{ required: true, trigger: "blue", message: "视频不能为空" }],
], enclosure: [
video: [ { required: true, trigger: "blur", message: "附件不能为空" },
{ required: true, trigger: "blue", message: "视频不能为空" } ],
], },
enclosure: [ };
{ required: true, trigger: "blur", message: "附件不能为空" }, },
], components: {
FileUpload,
visitorQuestion,
},
created() {
this.getContractTrainList();
},
methods: {
getContractTrainList() {
listCourse().then((res) => {
this.contractTrainForm = res.rows[0];
console.log("this.contractTrainForm", this.contractTrainForm);
if (this.contractTrainForm.video) {
this.fileListVideo = [
{
name: this.contractTrainForm.courseName + "视频",
url: uploadfile,
},
];
}
if (this.contractTrainForm.enclosure) {
this.fileListFile = [
{
name: this.contractTrainForm.courseName + "附件",
url: uploadfile,
},
];
}
// this.$refs.visitorQuestion.rightNum =
// this.contractTrainForm.qualifiedNum;
this.$refs.visitorQuestion.bottomFrom = {
judgmentScore: this.contractTrainForm.judgmentScore || 0,
multipleChoiceScore: this.contractTrainForm.multipleChoiceScore || 0,
qualifiedNum: this.contractTrainForm.qualifiedNum || 0,
singleChoiceScore: this.contractTrainForm.singleChoiceScore || 0,
};
this.$refs.visitorQuestion.getContractTopicList(
this.contractTrainForm.contractorCourseId
);
});
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
getFileInfoVideo(res) {
this.contractTrainForm.video = res.url;
this.fileListVideo = [
{
name: res.fileName,
url: uploadfile,
}, },
}; ];
}, },
components: { listRemoveVideo(e) {
FileUpload, this.fileListVideo = [];
visitorQuestion, this.contractTrainForm.video = "";
// this.form.videoName = null;
}, },
created() { getFileInfoFile(res) {
this.getContractTrainList(); this.contractTrainForm.enclosure = res.url;
this.fileListFile = [
{
name: res.fileName,
url: uploadfile,
},
];
}, },
methods: { listRemoveFile(e) {
getContractTrainList(){ this.fileListFild = [];
listCourse().then(res =>{ this.contractTrainForm.enclosure = "";
this.contractTrainForm = res.rows[0]; // this.form.fileName = null;
if(this.contractTrainForm.video){ },
this.fileListVideo = [ },
{ };
name: this.contractTrainForm.courseName + "视频",
url: uploadfile,
},
];
}
if(this.contractTrainForm.enclosure){
this.fileListFile = [
{
name: this.contractTrainForm.courseName + "附件",
url: uploadfile,
},
];
}
this.$refs.visitorQuestion.rightNum = this.contractTrainForm.qualifiedNum;
this.$refs.visitorQuestion.getContractTopicList(this.contractTrainForm.contractorCourseId)
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
getFileInfoVideo(res) {
this.contractTrainForm.video = res.url;
this.fileListVideo = [
{
name: res.fileName,
url: uploadfile,
},
];
},
listRemoveVideo(e) {
this.fileListVideo = [];
this.contractTrainForm.video = "";
// this.form.videoName = null;
},
getFileInfoFile(res) {
this.contractTrainForm.enclosure = res.url;
this.fileListFile = [
{
name: res.fileName,
url: uploadfile,
},
];
},
listRemoveFile(e) {
this.fileListFild = [];
this.contractTrainForm.enclosure = "";
// this.form.fileName = null;
},
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.form-wrapper { .form-wrapper {
...@@ -148,7 +174,7 @@ ...@@ -148,7 +174,7 @@
height: 100%; height: 100%;
margin-bottom: 20px; margin-bottom: 20px;
} }
.flex{ .flex {
width: 100%; width: 100%;
justify-content: space-around; justify-content: space-around;
padding: 20px 30px; padding: 20px 30px;
......
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2023-01-17 13:47:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2023-01-28 17:58:47
* @FilePath: /danger-manage-web/src/views/system/qRCode/index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template> <template>
<img :src="src" style=" position: relative; <img :src="src" style="position: relative; left: 37%; top: 10%; width: 27%" />
left: 37%;
top: 10%;
width: 27%;">
</template> </template>
<script> <script>
const src = require('../qRCode/img/qrcode_1673250700723.png') const src = require("../qRCode/img/qrcode_1673250700723.png");
export default{ export default {
computed:{ computed: {
src(){ src() {
return src return src;
} },
} },
} };
</script> </script>
...@@ -13,11 +13,12 @@ ...@@ -13,11 +13,12 @@
<div ref="myBody" class="body" v-loading="loading"> <div ref="myBody" class="body" v-loading="loading">
<div class="text"> <div class="text">
<div class="float">炼铁车间炉前工安全生产规范课程</div> <div class="float">炼铁车间炉前工安全生产规范课程</div>
</div> </div>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div :key="goodJobShow"> <div :key="goodJobShow">
<template v-if="!goodJobShow"> <template v-if="!goodJobShow">
<transition name="fade" mode="out-in"> <!-- <transition name="fade" mode="out-in">
<div class="question-wrapper" v-if="visible" :key="nowQuestion"> <div class="question-wrapper" v-if="visible" :key="nowQuestion">
<div v-for="(item, index) in list" :key="item.id"> <div v-for="(item, index) in list" :key="item.id">
<Question <Question
...@@ -30,6 +31,33 @@ ...@@ -30,6 +31,33 @@
/> />
</div> </div>
</div> </div>
</transition> -->
<transition name="fade" mode="out-in">
<div class="question-wrapper" v-if="visible" :key="nowQuestion">
<div v-for="(item, index) in list" :key="item.id">
<template v-if="item.topicType == 1 || item.topicType === 3">
<Question
v-if="index === nowQuestion"
:questionObj="item"
:index="index"
:nowQuestion="nowQuestion"
:selectLetter="selectLetter"
@changeLetter="changeLetter"
/>
</template>
<template v-else>
<QuestionChoice
v-if="index === nowQuestion"
:questionObj="item"
:index="index"
:nowQuestion="nowQuestion"
:selectLetter="selectLetter"
@changeLetter="changeLetter"
/>
</template>
</div>
</div>
</transition> </transition>
<div class="select flex"> <div class="select flex">
...@@ -77,7 +105,7 @@ ...@@ -77,7 +105,7 @@
<script> <script>
import Question from "./Question"; import Question from "./Question";
import GoodJob from "./GoodJob.vue"; import GoodJob from "./GoodJobOld.vue";
import { import {
userQuestionList, userQuestionList,
setAnswer, setAnswer,
...@@ -148,7 +176,9 @@ export default { ...@@ -148,7 +176,9 @@ export default {
// this.answerClear(); // this.answerClear();
// this.$emit("update:visible", false); // this.$emit("update:visible", false);
this.saveBody(); this.saveBody();
const answers = this.answerArr.map((item) => item.answer).join(","); // const answers = this.answerArr.map((item) => item.answer).join(",");
const json = JSON.stringify(this.answerArr.map((item) => item.answer));
const answers = json.slice(1, json.length - 1);
this.loading = true; this.loading = true;
setAnswer({ setAnswer({
userCourseId: this.userCourseId, userCourseId: this.userCourseId,
...@@ -158,13 +188,12 @@ export default { ...@@ -158,13 +188,12 @@ export default {
if (res.code == 200) { if (res.code == 200) {
this.goodJobData = res.data; this.goodJobData = res.data;
this.goodJobShow = true; this.goodJobShow = true;
} }
}) })
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
// 是否作对 // 是否作对
this.$emit('jj',this.goodJobData) this.$emit("jj", this.goodJobData);
}); });
}, },
dialogCancel() { dialogCancel() {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-21 17:20:49 * @Date: 2022-09-21 17:20:49
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-09-28 11:56:49 * @LastEditTime: 2023-01-12 17:00:34
* @FilePath: /danger-manage-web/src/views/myLessons/components/GoodJob.vue * @FilePath: /danger-manage-web/src/views/myLessons/components/GoodJob.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
...@@ -13,17 +13,16 @@ ...@@ -13,17 +13,16 @@
<template v-if="goodJobData.answer >= goodJobData.qualifiedNum"> <template v-if="goodJobData.answer >= goodJobData.qualifiedNum">
<div class="icon"><i class="iconfont icon-smiling" /></div> <div class="icon"><i class="iconfont icon-smiling" /></div>
<div> <div>
恭喜你,做对{{ goodJobData.answer }}道题得分{{ <!-- 恭喜你,做对{{ goodJobData.answer }}道题 -->
Math.floor((goodJobData.answer / goodJobData.topicNum) * 100) 恭喜你,得分{{ goodJobData.answer }},成绩合格!
}},成绩合格!
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="icon"><i class="iconfont icon-nanguo" /></div> <div class="icon"><i class="iconfont icon-nanguo" /></div>
<div> <div>
继续努力,做对{{ goodJobData.answer }}道题得分{{ 继续努力,
Math.floor((goodJobData.answer / goodJobData.topicNum) * 100) <!-- 做对{{ goodJobData.answer }}道题 -->
}},成绩不合格! 得分{{ goodJobData.answer }},成绩不合格!
</div> </div>
</template> </template>
</div> </div>
...@@ -49,16 +48,16 @@ export default { ...@@ -49,16 +48,16 @@ export default {
.goodjob-wrapper { .goodjob-wrapper {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 86%; width: 100%;
height: 100%; height: 100%;
border-bottom: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb;
.text { .text {
width: 94%; width: 100%;
height: 174px; height: 136px;
color: #1d84ff; color: #1d84ff;
background: #f9f9f9 100%; background: #f9f9f9 100%;
border-radius: 15px; border-radius: 15px;
line-height: 40px; line-height: 136px;
font-size: 28px; font-size: 28px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-21 17:20:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-09-28 11:56:49
* @FilePath: /danger-manage-web/src/views/myLessons/components/GoodJob.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="goodjob-wrapper flex">
<div class="text flex">
<div class="text flex">
<template v-if="goodJobData.answer >= goodJobData.qualifiedNum">
<div class="icon"><i class="iconfont icon-smiling" /></div>
<div>
恭喜你,做对{{ goodJobData.answer }}道题得分{{
Math.floor((goodJobData.answer / goodJobData.topicNum) * 100)
}},成绩合格!
</div>
</template>
<template v-else>
<div class="icon"><i class="iconfont icon-nanguo" /></div>
<div>
继续努力,做对{{ goodJobData.answer }}道题得分{{
Math.floor((goodJobData.answer / goodJobData.topicNum) * 100)
}},成绩不合格!
</div>
</template>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {
goodJobData: {
type: Object,
},
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.goodjob-wrapper {
justify-content: center;
align-items: center;
width: 86%;
height: 100%;
border-bottom: 1px solid #bbbbbb;
.text {
width: 94%;
height: 174px;
color: #1d84ff;
background: #f9f9f9 100%;
border-radius: 15px;
line-height: 40px;
font-size: 28px;
justify-content: center;
align-items: center;
.icon {
margin-right: 10px;
.iconfont {
color: #e2852a;
font-size: 40px !important;
}
}
}
}
</style>
...@@ -2,12 +2,13 @@ ...@@ -2,12 +2,13 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-21 11:00:14 * @Date: 2022-09-21 11:00:14
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-09-28 11:15:27 * @LastEditTime: 2023-01-29 09:29:14
* @FilePath: /danger-manage-web/src/views/myLessons/components/Question.vue * @FilePath: /danger-manage-web/src/views/myLessons/components/Question.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
<template> <template>
<div class="question flex"> <div class="question flex">
<div class="tips">{{ tipsArr[questionObj.topicType] }}</div>
<div <div
class="top" class="top"
:class="{ flex: alignItemsCenter }" :class="{ flex: alignItemsCenter }"
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
<div <div
class="item flex" class="item flex"
v-for="(item, index) in questionObj.question" v-for="(item, index) in questionObj.question"
:key="item+'aas'+index" :key="item + 'aas' + index"
> >
<div class="letter"> <div class="letter">
{{ letters[index] }} {{ letters[index] }}
...@@ -38,10 +39,10 @@ ...@@ -38,10 +39,10 @@
<div class="change-wrapper flex"> <div class="change-wrapper flex">
<div <div
class="change" class="change"
:class="{ active: letterActive+'' === index+'' }" :class="{ active: letterActive.indexOf(index) >= 0 }"
@click="changeLetter(index)" @click="changeLetter(index)"
v-for="(item, index) in questionObj.question" v-for="(item, index) in questionObj.question"
:key="item+'a'+index" :key="item + 'a' + index"
> >
{{ letters[index] }} {{ letters[index] }}
</div> </div>
...@@ -105,8 +106,8 @@ export default { ...@@ -105,8 +106,8 @@ export default {
}, },
// 从外面传进来的选项,选择过的才有,没选择过的没有 // 从外面传进来的选项,选择过的才有,没选择过的没有
selectLetter: { selectLetter: {
type: [String, Number], type: [String, Number, Array],
default:999, default: [],
}, },
}, },
data() { data() {
...@@ -115,6 +116,11 @@ export default { ...@@ -115,6 +116,11 @@ export default {
// 如果传进来了,就是这个值,如果没有就是null,因为动画需要那个key的问题,会清空原始的盒子,所以要传一下值 // 如果传进来了,就是这个值,如果没有就是null,因为动画需要那个key的问题,会清空原始的盒子,所以要传一下值
letterActive: this.selectLetter, letterActive: this.selectLetter,
letters, letters,
tipsArr: {
1: "单选题",
2: "多选题",
3: "判断题",
},
}; };
}, },
mounted() { mounted() {
...@@ -143,8 +149,10 @@ export default { ...@@ -143,8 +149,10 @@ export default {
} }
}, },
changeLetter(index) { changeLetter(index) {
this.letterActive = index; // this.letterActive = index;
this.$emit("changeLetter", index); // this.$emit("changeLetter", index);
this.letterActive = [index];
this.$emit("changeLetter", this.letterActive);
// this.$emit("changeLetter", this.letters[index]); // this.$emit("changeLetter", this.letters[index]);
}, },
}, },
...@@ -161,6 +169,22 @@ export default { ...@@ -161,6 +169,22 @@ export default {
border-bottom: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb;
// background: red; // background: red;
flex-direction: column; flex-direction: column;
position: relative;
.tips {
width: 80px;
height: 24px;
background: #1d84ff;
font-size: 14px;
color: #fff;
position: absolute;
// top: -45px;
// left: 0px;
top: -25px;
left: 70px;
text-align: center;
line-height: 24px;
}
.top { .top {
background: #f9f9f9; background: #f9f9f9;
height: 54px; height: 54px;
...@@ -207,6 +231,7 @@ export default { ...@@ -207,6 +231,7 @@ export default {
} }
} }
} }
.bottom { .bottom {
max-height: 70px; max-height: 70px;
// background: black; // background: black;
...@@ -217,6 +242,7 @@ export default { ...@@ -217,6 +242,7 @@ export default {
width: 756px; width: 756px;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 auto; margin: 0 auto;
overflow: hidden;
.change { .change {
width: 90px; width: 90px;
height: 30px; height: 30px;
......
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-21 11:00:14
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2023-01-29 09:34:10
* @FilePath: /danger-manage-web/src/views/myLessons/components/Question.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="question flex">
<div class="tips">{{ tipsArr[questionObj.topicType]}}</div>
<div
class="top"
:class="{ flex: alignItemsCenter }"
:style="{ alignItems: alignItemsCenter ? 'center' : '' }"
ref="top"
>
<div class="text" ref="text">
{{ questionObj.text }}
</div>
<div class="num">{{ nowQuestion + 1 }}</div>
</div>
<div class="middle">
<div
class="item flex"
v-for="(item, index) in questionObj.question"
:key="item + 'aas' + index"
>
<div class="letter">
{{ letters[index] }}
</div>
<div class="">
{{ item }}
</div>
</div>
</div>
<div class="bottom flex">
<div class="change-wrapper flex">
<div
class="change"
:class="{ active: letterActive.indexOf(index) >= 0 }"
@click="changeLetter(index)"
v-for="(item, index) in questionObj.question"
:key="item + 'a' + index"
>
{{ letters[index] }}
</div>
</div>
</div>
</div>
</template>
<script>
const letters = [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
];
export default {
name: "question",
props: {
questionObj: {
type: Object,
default: () => {
return {
text: "asdfasdf",
question: [
"沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师沙发斯蒂芬大师",
"沙发斯蒂芬大师",
"沙发斯蒂芬大师",
"沙发斯蒂芬大师",
"沙发斯蒂芬大师",
],
};
},
},
nowQuestion: {
type: Number,
},
index: {
type: Number,
},
// 从外面传进来的选项,选择过的才有,没选择过的没有
selectLetter: {
type: [String, Number, Array],
default: () => {
return [];
},
},
},
data() {
return {
alignItemsCenter: false,
// 如果传进来了,就是这个值,如果没有就是null,因为动画需要那个key的问题,会清空原始的盒子,所以要传一下值
letterActive: this.selectLetter,
letters,
tipsArr: {
1: "单选题",
2: "多选题",
3: "判断题",
},
};
},
mounted() {
// console.log('123')
// 每次都会更新,所以不需要watch 直接在这里面写 因为动画需要那个key的问题,会清空原始的盒子,所以要传一下值
this.textCenter();
},
watch: {
// 监听一下当前题目,调整一下位置
// nowQuestion(value) {
// console.log('nowQuestion变化',value)
// this.$nextTick(() => {
// this.textCenter();
// });
// },
},
methods: {
textCenter() {
let h1 = this.$refs.text?.offsetHeight;
let h2 = this.$refs.top?.offsetHeight;
// 如果text大于或者等于top,就出不居中,如果不小于top,就上下居中
if (h2 <= h1) {
this.alignItemsCenter = false;
} else {
this.alignItemsCenter = true;
}
},
changeLetter(index) {
// this.letterActive = index;
const ind = this.letterActive.indexOf(index);
console.log(this.letterActive);
if (ind < 0) {
this.letterActive.push(index);
} else {
this.letterActive.splice(ind, 1);
}
this.$emit("changeLetter", this.letterActive);
// this.$emit("changeLetter", this.letters[index]);
},
},
};
</script>
<style lang="scss" scoped>
.question {
// position: absolute;
// top: 0px;
// display: inline-block;
width: 100%;
height: 370px;
padding-bottom: 10px;
border-bottom: 1px solid #bbbbbb;
// background: red;
flex-direction: column;
position: relative;
.tips {
width: 80px;
height: 24px;
background: #1d84ff;
font-size: 14px;
color: #fff;
position: absolute;
// top: -45px;
// left: 0px;
top: -25px;
left: 70px;
text-align: center;
line-height: 24px;
}
.top {
background: #f9f9f9;
height: 54px;
padding: 0px 10px 0px 43px;
overflow-wrap: anywhere;
// align-items: center;
overflow-y: auto;
position: relative;
.text {
font-size: 14px;
text-indent: 2em;
}
.num {
position: absolute;
left: 0;
width: 48px;
height: 48px;
top: 4px;
background: #1d84ff;
border-radius: 50%;
text-align: center;
line-height: 48px;
font-size: 18px;
color: #ffffff;
}
}
.middle {
flex: 1;
// background: blue;
overflow-y: auto;
padding-left: 43px;
padding-right: 10px;
margin-bottom: 15px;
.item {
padding-top: 38px;
width: 100%;
overflow-wrap: anywhere;
font-size: 14px;
color: #101010;
.letter {
padding: 2px;
margin-right: 10px;
box-sizing: border-box;
}
}
}
.bottom {
max-height: 70px;
// background: black;
padding-left: 43px;
padding-right: 10px;
overflow-y: auto;
.change-wrapper {
width: 756px;
flex-wrap: wrap;
margin: 0 auto;
.change {
width: 90px;
height: 30px;
background: #e8f4ff;
color: #101010;
border: 1px solid #a3d3ff;
line-height: 30px;
text-align: center;
margin: 0 9px 5px;
border-radius: 4px;
cursor: pointer;
&.active {
background: #1d84ff;
color: #ffffff;
border: 1px solid #a3d3ff;
}
&:hover {
background: rgba(29, 132, 255, 0.5);
color: #ffffff;
}
}
}
}
}
</style>
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
methods: { methods: {
getPlanList() { getPlanList() {
//跳转页面的传值 //跳转页面的传值
console.log(JSON.parse(this.$route.query.params).beyondUnit) // console.log(JSON.parse(this.$route.query.params).beyondUnit)
ITContractorTrainCourse().then((res) => { ITContractorTrainCourse().then((res) => {
this.data=res.data; this.data=res.data;
this.changeVideo(this.data.video); this.changeVideo(this.data.video);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment