Compare commits
No commits in common. "main" and "baigl" have entirely different histories.
|
|
@ -64,10 +64,3 @@ export const addFileToPrepareThird = (data) => {
|
|||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const addFileToKj = (id) => {
|
||||
return request({
|
||||
url: '/smarttalk/file/addFileToKj/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="input-box flex">
|
||||
<el-input v-model="textarea" @keyup.enter="send" :disabled="loaded"/>
|
||||
<el-input v-model="textarea" :disabled="loaded"/>
|
||||
<div class="ipt-icon" @click="send">
|
||||
<i class="iconfont icon-fasong"></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-dialog v-model="isDialog" :show-close="false" width="900" destroy-on-close>
|
||||
<el-dialog v-model="isDialog" :show-close="false" width="900">
|
||||
<template #header>
|
||||
<div class="custom-header flex">
|
||||
<span>选择{{ title }}</span>
|
||||
|
|
@ -40,19 +40,17 @@ const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhsc
|
|||
const isDialog = defineModel()
|
||||
|
||||
const props = defineProps({
|
||||
modeType: {
|
||||
type: Number,
|
||||
model: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
||||
const title = computed(() => {
|
||||
if (props.modeType == 1) return '课标';
|
||||
if (props.modeType == 2) return '教材';
|
||||
if (props.modeType == 3) return '考试';
|
||||
if (props.model == 1) return '课标';
|
||||
if (props.model == 2) return '教材';
|
||||
if (props.model == 3) return '考试';
|
||||
})
|
||||
|
||||
|
||||
const radio = ref(1)
|
||||
const radioList = ref([
|
||||
{ label: '浏览研读', value: 1 },
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</template>
|
||||
</el-dropdown>
|
||||
<div>
|
||||
<el-button type="primary" link @click="wordDialog = true">
|
||||
<el-button type="primary" link @click="keywordDialog = true">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
|
|
@ -31,29 +31,52 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<keywordDialog v-model="wordDialog"/>
|
||||
<Dialog v-model="showDialog" :modeType="type" />
|
||||
<el-dialog v-model="keywordDialog" :show-close="false" width="600">
|
||||
<template #header>
|
||||
<div class="custom-header flex">
|
||||
<span>添加提示词</span>
|
||||
<i class="iconfont icon-guanbi" @click="isDialog = false"></i>
|
||||
</div>
|
||||
</template>
|
||||
<div class="dialog-content">
|
||||
<el-form :model="form" label-width="auto">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="提示词">
|
||||
<el-input v-model="form.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="keywordDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="keywordDialog = false">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<Dialog v-model="showDialog" :model="model" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { modelList } from '@/api/mode/index'
|
||||
import Dialog from './dialog.vue'
|
||||
import keywordDialog from './keyword-dialog.vue'
|
||||
|
||||
const wordDialog = ref(false)
|
||||
const keywordDialog = ref(false)
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
model: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
watch(() => props.type, (newValue) => {
|
||||
console.log(newValue, 'newValue2');
|
||||
}, { immediate: true });
|
||||
|
||||
const emit = defineEmits(['changeTemp', 'onRead'])
|
||||
|
||||
const showDialog = ref(false)
|
||||
|
|
@ -63,13 +86,14 @@ const aiRead = () => {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// 当前模板名称
|
||||
const curTemplate = reactive({ name: '', id: '' })
|
||||
// 模板列表
|
||||
const templateList = ref([])
|
||||
// 获取模板列表
|
||||
const getTemplateList = () => {
|
||||
modelList({ model: props.type, type: 1 }).then(res => {
|
||||
modelList({ model: 1, type: 1 }).then(res => {
|
||||
templateList.value = res.rows
|
||||
Object.assign(curTemplate, res.rows[0]);
|
||||
emit('changeTemp', res.rows[0].id)
|
||||
|
|
@ -93,6 +117,13 @@ const changeTemplate = (val) => {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
desc: '',
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getTemplateList()
|
||||
})
|
||||
|
|
@ -109,6 +140,8 @@ onMounted(() => {
|
|||
width: 50%;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.header-right {
|
||||
|
|
@ -124,4 +157,13 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
.custom-header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.icon-guanbi {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<template>
|
||||
<el-dialog v-model="mode" :show-close="false" width="600">
|
||||
<template #header>
|
||||
<div class="custom-header flex">
|
||||
<span>{{ isAdd ? '添加' : '编辑' }}提示词</span>
|
||||
<i class="iconfont icon-guanbi" @click="mode = false"></i>
|
||||
</div>
|
||||
</template>
|
||||
<div class="dialog-content">
|
||||
<el-form :model="form" label-width="auto">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="提示词">
|
||||
<el-input v-model="form.prompt" type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="mode = false">取消</el-button>
|
||||
<el-button type="primary" @click="mode = false">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue'
|
||||
const mode = defineModel()
|
||||
|
||||
const props = defineProps({
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
item: {
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
prompt: '',
|
||||
})
|
||||
|
||||
watch(() => props.isAdd, (newVal) => {
|
||||
if (!newVal) {
|
||||
console.log(props.item)
|
||||
form.name = props.item.name
|
||||
form.prompt = props.item.prompt
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.icon-guanbi {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,6 +16,7 @@ onMounted(async () =>{
|
|||
await nextTick()
|
||||
const { fileurl } = sessionStore.get('subject.curBook')
|
||||
pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
|
||||
console.log('pdfUrl.value', pdfUrl.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,24 +3,10 @@
|
|||
|
||||
<el-scrollbar height="100%">
|
||||
<div class="template-list">
|
||||
<el-row v-for="(item, index) in childTempList">
|
||||
<el-row v-for="(item,index) in childTempList">
|
||||
<el-col :span="24">
|
||||
<div class="template-item" v-loading="item.loading">
|
||||
<div class="item-header">
|
||||
<div>
|
||||
<span class="blue">#</span>{{ item.name }}
|
||||
</div>
|
||||
<el-popover placement="bottom-end" trigger="hover" popper-class="template-custom-popover" >
|
||||
<template #reference>
|
||||
<el-button link type="primary">
|
||||
<i class="iconfont icon-shenglvehao"></i></el-button>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-button type="primary" link @click="editKeyWord(item)">编辑</el-button>
|
||||
<el-button type="primary" link>移除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item-header"><span class="blue">#</span>{{ item.name }}</div>
|
||||
<div class="item-text">
|
||||
{{ item.prompt }}
|
||||
</div>
|
||||
|
|
@ -47,15 +33,13 @@
|
|||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-empty v-if="!childTempList.length" description="暂无模板数据" />
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<!--编辑结果-->
|
||||
<EditDialog v-model="isEdit" :item="editItem" @saveEdit="saveEdit" />
|
||||
<EditDialog v-model="isEdit" :item="editItem" @saveEdit="saveEdit"/>
|
||||
<!--AI 对话调整-->
|
||||
<AdjustDialog v-model="isAdjust" :item="editItem" @saveAdjust="saveAdjust" />
|
||||
<!--编辑提示词-->
|
||||
<keywordDialog v-model="isEditKeyWord" :isAdd="false" :item="keywordItem"/>
|
||||
<AdjustDialog v-model="isAdjust" :item="editItem" @saveAdjust="saveAdjust"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -63,7 +47,6 @@
|
|||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import EditDialog from './edit-dialog.vue'
|
||||
import AdjustDialog from './adjust-dialog.vue'
|
||||
import keywordDialog from './keyword-dialog.vue';
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { conversation, completion, modelList } from '@/api/mode/index'
|
||||
|
|
@ -72,12 +55,18 @@ import { conversation, completion, modelList } from '@/api/mode/index'
|
|||
const userStore = useUserStore()
|
||||
|
||||
const props = defineProps({
|
||||
curTemp: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
tempId: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modeType: {
|
||||
type: Number,
|
||||
model: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
|
@ -87,8 +76,9 @@ const tempLoading = ref(false)
|
|||
const childTempList = ref([])
|
||||
const getChildTemplate = () => {
|
||||
tempLoading.value = true
|
||||
modelList({ model: props.modeType, type: 2, parentId: props.tempId }).then(res => {
|
||||
modelList({ model: props.model, type: 2, parentId: props.tempId }).then(res => {
|
||||
childTempList.value = res.rows
|
||||
console.log('res.rows=====>', res.rows)
|
||||
|
||||
}).finally(() => {
|
||||
tempLoading.value = false
|
||||
|
|
@ -122,7 +112,7 @@ const getConversation = async () => {
|
|||
|
||||
const { user: { userId } } = userStore
|
||||
const result = await conversation({ user_id: String(userId) })
|
||||
console.log('result', result)
|
||||
console.log('result',result)
|
||||
params.conversation_id = result.data.data.id
|
||||
getCompletion()
|
||||
}
|
||||
|
|
@ -146,15 +136,15 @@ const getCompletion = async () => {
|
|||
|
||||
|
||||
// 重新研读
|
||||
const againResult = async (index, item) => {
|
||||
try {
|
||||
const againResult = async (index,item) =>{
|
||||
try{
|
||||
childTempList.value[index].loading = true
|
||||
params.messages[0].content = `根据${curNode.edustage}语文课标，提炼出${item.name}`
|
||||
const res = await completion(params)
|
||||
let answer = res.data.data.answer
|
||||
item.oldAnswer = answer
|
||||
item.answer = getResult(answer);
|
||||
} finally {
|
||||
}finally {
|
||||
childTempList.value[index].loading = false
|
||||
}
|
||||
}
|
||||
|
|
@ -172,44 +162,35 @@ let getResult = (text) => {
|
|||
// 编辑
|
||||
const curIndex = ref(-1)
|
||||
const editItem = reactive({})
|
||||
const onEdit = (index, item) => {
|
||||
const onEdit = (index,item) =>{
|
||||
curIndex.value = index
|
||||
Object.assign(editItem, item)
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = (data) => {
|
||||
const saveEdit = (data) =>{
|
||||
childTempList.value[curIndex.value].oldAnswer = data
|
||||
let answer = getResult(data);
|
||||
childTempList.value[curIndex.value].answer = answer
|
||||
}
|
||||
|
||||
const isAdjust = ref(false)
|
||||
const onAdjust = (index, item) => {
|
||||
const onAdjust = (index, item) =>{
|
||||
curIndex.value = index
|
||||
Object.assign(editItem, item)
|
||||
isAdjust.value = true
|
||||
}
|
||||
const saveAdjust = (item) => {
|
||||
const saveAdjust = (item) =>{
|
||||
childTempList.value[curIndex.value].oldAnswer = item
|
||||
let answer = getResult(item);
|
||||
childTempList.value[curIndex.value].answer = answer
|
||||
}
|
||||
|
||||
// 编辑提示词
|
||||
const keywordItem = reactive({})
|
||||
const isEditKeyWord = ref(false)
|
||||
const editKeyWord = (item) =>{
|
||||
isEditKeyWord.value = true
|
||||
Object.assign(keywordItem, item)
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
let data = sessionStore.get('subject.curNode')
|
||||
Object.assign(curNode, data);
|
||||
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
|
|
@ -275,7 +256,6 @@ defineExpose({
|
|||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
justify-content: space-between;
|
||||
|
||||
.blue {
|
||||
font-size: 22px;
|
||||
|
|
@ -317,25 +297,20 @@ defineExpose({
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.text-answer {
|
||||
.text-answer{
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.ai-btn {
|
||||
.ai-btn{
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.iconfont {
|
||||
.iconfont{
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
:deep(.el-button){
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-ai1 {
|
||||
.icon-ai1{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -414,22 +389,8 @@ defineExpose({
|
|||
|
||||
}
|
||||
}
|
||||
.icon-shenglvehao{
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
}
|
||||
:deep(.el-popover) {
|
||||
min-width: 50px;
|
||||
width: 50px !important;
|
||||
}
|
||||
|
||||
.pl-25 {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.template-custom-popover {
|
||||
width: 110px !important;
|
||||
min-width: 110px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="page-template flex">
|
||||
<!--头部-->
|
||||
<Header :type="type" @changeTemp="changeTemp" @onRead="onRead"/>
|
||||
<Header @changeTemp="changeTemp" @onRead="onRead"/>
|
||||
<el-row :gutter="20" class="tempalte-main">
|
||||
<el-col :span="12">
|
||||
<!--左侧pdf-->
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!--右侧模板研读-->
|
||||
<Result ref="resultRef" :modeType="type" :tempId="tempId"/>
|
||||
<Result ref="resultRef" :tempId="tempId"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
|
@ -22,14 +22,6 @@ import Header from './container/header.vue'
|
|||
import Pdf from './container/pdf.vue'
|
||||
import Result from './container/result.vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
const resultRef = ref()
|
||||
const tempId = ref('')
|
||||
const changeTemp = (id) =>{
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ const sideBottomMenu = [
|
|||
|
||||
const computedregistertype = computed(() => {
|
||||
const type =userStore.DeptInfo?.register?.type ??0
|
||||
console.log(userStore.DeptInfo?.register)
|
||||
if(type==0 || userStore.DeptInfo?.register?.auditStatus!=0 && userStore.DeptInfo?.register?.auditStatus!=1){
|
||||
return 1
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ watch(
|
|||
() => router.currentRoute.value,
|
||||
(newValue) => {
|
||||
let path = newValue.path
|
||||
console.log(newValue);
|
||||
|
||||
if (path.includes('/model') && path !== ('/model/index')) {
|
||||
isShowBack.value = true
|
||||
|
|
|
|||
|
|
@ -60,21 +60,7 @@ export const constantRoutes = [
|
|||
path: 'management',
|
||||
component: () => import('@/views/job-management/index.vue'),
|
||||
name: 'job-management',
|
||||
meta: { title: '作业管理' },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'details',
|
||||
// component: () => import('@/views/job-management/Details/index.vue'),
|
||||
// name: 'details',
|
||||
// meta: { title: '详情' }
|
||||
// },
|
||||
// {
|
||||
// path: 'right',
|
||||
// component: () => import('@/views/job-management/Right/index.vue'),
|
||||
// name: 'right',
|
||||
// meta: { title: '主页' }
|
||||
// },
|
||||
// ]
|
||||
meta: { title: '作业管理' }
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div class="container-pdf">
|
||||
<PDF :url="pdfUrl" :showCatalog="false" v-if="pdfUrl" />
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import PDF from '@/components/PdfJs/index.vue'
|
||||
import { sessionStore } from '@/utils/store'
|
||||
|
||||
|
||||
const pdfUrl = ref('')
|
||||
|
||||
onMounted(async () =>{
|
||||
await nextTick()
|
||||
const { fileurl } = sessionStore.get('subject.curBook')
|
||||
pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-pdf{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<div class="question-container">
|
||||
<div class="question-main">
|
||||
<div class="question-item">
|
||||
<div class="item-con">
|
||||
<div class="item-q flex">
|
||||
<div class="q-user">
|
||||
<i class="iconfont icon-touxiang"></i>
|
||||
</div>
|
||||
<div class="q-text">研读课程标准，提取出与本课相关的核心素养与课程目标</div>
|
||||
</div>
|
||||
<div class="item-a flex">
|
||||
<div class="a-user">
|
||||
语
|
||||
</div>
|
||||
<div class="a-text">
|
||||
<p> 语言的建构与运用：学生在丰富的语言实践中，通过主动的积累、梳理和整合，逐步掌握祖国语言文字特点及其规律，形成个体言语经验，发展在具体语言情境中正确有效地运用祖国语言文字进行交流沟通的能力。</p>
|
||||
<a class="" href="">来自《高中语文课程标准2020》，点击查看原文：第4页</a>
|
||||
<p>语言建构有两方面的内涵：第一是指出于表达思想的目的，按照语言内部系统来建构话语-用词汇组构句子，用句子组构段落和篇章。第二是指每个人在个人言语经验的基础上，逐步建构起自己的言语表达体系，包括每个人的言语心理词典、句典和表达习惯。</p>
|
||||
<a href="">来自《高中语文课程标准解读》，点击查看原文：第58页</a>
|
||||
<p>高中语文课程标准2003版本中没有核心素养相关表达。 </p>
|
||||
<a href="">来自《高中语文课程标准2003》 </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-icon flex">
|
||||
<div class="flex">
|
||||
<span>
|
||||
<i class="iconfont icon-fuzhi"></i>
|
||||
复制
|
||||
</span>
|
||||
<span>
|
||||
<i class="iconfont icon-bianji-gangbi"></i>
|
||||
写评价
|
||||
</span>
|
||||
<span>
|
||||
<i class="iconfont icon-rss-line"></i>
|
||||
添加到微教研
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<i class="iconfont icon-tianjia"></i>
|
||||
保存
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-input v-model="textarea" class="question-textarea" resize="none" :rows="2" type="textarea" placeholder="在这里输入发消息，输入@或/选择" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const textarea = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.question-container {
|
||||
padding: 10px 15px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.question-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item-con {
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
|
||||
.item-q {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.q-user {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
|
||||
.icon-touxiang {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.q-text {
|
||||
color: #409eff;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-a {
|
||||
color: #3D3D3D;
|
||||
font-size: 13px;
|
||||
|
||||
.a-user {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
}
|
||||
|
||||
.a-text {
|
||||
text-align: left;
|
||||
a{
|
||||
color: #409eff;
|
||||
text-decoration: underline;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-icon{
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #3D3D3D;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
span{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover{
|
||||
background: #F5F7FA
|
||||
}
|
||||
}
|
||||
.iconfont{
|
||||
margin-right: 3px;
|
||||
color: #3498fc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<div class="read-container">
|
||||
<el-scrollbar height="100%">
|
||||
<div class="template-list" v-loading="loading">
|
||||
<el-row v-for="item in 6">
|
||||
<el-col :span="24">
|
||||
<div class="template-item">
|
||||
<div class="item-header"><span class="blue">#</span>{{ item }}</div>
|
||||
<div class="item-text" >
|
||||
<div class="item-icon">
|
||||
<i class="iconfont icon-ai"></i>
|
||||
</div>
|
||||
<div class="item-answer" v-html="item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col :span="24">
|
||||
<div class="template-item template-item-result">
|
||||
<div class="result-item-header">
|
||||
<i class="iconfont icon-xiaoxi"></i>
|
||||
语言建构与运用是指学生在丰富的语言实践中，通过主动的积累、梳理和整合，逐步掌握祖国语言文字特点及其运用规律，形成个体言语经验......
|
||||
</div>
|
||||
<div class="result-icon-btn flex pl-25">
|
||||
<div class="flex">
|
||||
<span><i class="iconfont icon-fuzhi"></i>复制</span>
|
||||
<span><i class="iconfont icon-bianji-gangbi"></i>写想法</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><i class="iconfont icon-tianjia"></i>加入备课篮</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="other-msg pl-25">
|
||||
<div class="other-user flex">
|
||||
<i class="iconfont icon-touxiang"></i>
|
||||
重庆市酉阳县二中 - 李丽
|
||||
</div>
|
||||
<div class="other-text flex">北师大王宁老师说，语言建构有两方面的含义。一是指出于表达思想的目的，二是指在个人言语经验的基础上，逐步建构起自己的言语体系</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { conversation, completion } from '@/api/mode/index'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const props = defineProps({
|
||||
curTemp: {
|
||||
type: Array,
|
||||
default: () =>{
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
// 获取会话ID
|
||||
const params = reactive(
|
||||
{
|
||||
"conversation_id": "",
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": ""
|
||||
}
|
||||
],
|
||||
"quote": false,
|
||||
"stream": false
|
||||
}
|
||||
)
|
||||
const curNode = reactive({})
|
||||
const getConversation = async() =>{
|
||||
const { user: { userId } } = userStore
|
||||
const result = await conversation({ user_id: String(userId) })
|
||||
params.conversation_id = result.data.data.id
|
||||
|
||||
|
||||
getCompletion()
|
||||
}
|
||||
// 大模型对话
|
||||
const resultList = ref([])
|
||||
const getCompletion = async() =>{
|
||||
console.log('params=====>',params)
|
||||
|
||||
for (const item of props.curTemp) {
|
||||
try {
|
||||
loading.value = true
|
||||
params.messages[0].content = `根据${curNode.edustage}语文课标，提炼出${item.name}`
|
||||
const res = await completion(params)
|
||||
console.log('对话结果===》', res)
|
||||
let answer = res.data.data.answer
|
||||
answer = getResult(answer);
|
||||
resultList.value.push({
|
||||
title: item.name,
|
||||
answer
|
||||
})
|
||||
} finally{
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 分析获取课标对话结果
|
||||
let getResult = (text) => {
|
||||
text = text.replace(/^\n\n(.*?)\n\n$/s, '<div>$1</div>');
|
||||
text = text.replace(/^\n(.*?)\n$/s, '<p>$1</p>');
|
||||
text = text.replace(/\*\*(.*?)\*\*/g, "<div class='text-tit'>$1</div>");
|
||||
text = text.replace(/(\d+\..*?)\n/g, "<div class='text-num'>$1</div>\n");
|
||||
return text
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let data = sessionStore.get('subject.curNode')
|
||||
Object.assign(curNode, data);
|
||||
console.log(props.curTemp,'curTemp')
|
||||
// getConversation()
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.read-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
height: 100%;
|
||||
.el-dropdown-link {
|
||||
font-weight: bold;
|
||||
|
||||
.el-icon--right {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.read-header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.add-btn {
|
||||
font-size: 13px;
|
||||
|
||||
.icon-jiahao {
|
||||
margin-right: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.right-con{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
|
||||
.template-item {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
|
||||
.blue {
|
||||
font-size: 22px;
|
||||
color: #409eff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
color: #409eff;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
.item-icon{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #F6F6F6;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.item-answer{
|
||||
flex-direction: column;
|
||||
padding-top: 5px;
|
||||
:deep(.text-tit){
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
:deep(.text-num){
|
||||
padding-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-item-result {
|
||||
background: #DDEAFD !important;
|
||||
|
||||
.result-item-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #3D3D3D;
|
||||
|
||||
.icon-xiaoxi {
|
||||
color: #5881D5;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-icon-btn {
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
background: #cfe0fa
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 3px;
|
||||
color: #3498fc;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: #D8D8D8;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.other-msg {
|
||||
font-size: 13px;
|
||||
|
||||
.other-user {
|
||||
align-items: center;
|
||||
color: #BA4B0F;
|
||||
font-size: 12px;
|
||||
|
||||
.icon-touxiang {
|
||||
color: #BA4B0F;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.other-text {
|
||||
color: #191919;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pl-25 {
|
||||
padding-left: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<div class="read-container">
|
||||
<div class="read-header flex">
|
||||
<el-dropdown @command="changeTemplate">
|
||||
<span class="el-dropdown-link">
|
||||
{{ curTemplate.name }}
|
||||
<i class="iconfont icon-xiangxia" </i>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in templateList" :command="item" :key="item.id">{{ item.name
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button type="primary" @click="aiRead">一键研读</el-button>
|
||||
</div>
|
||||
<div class="template-list" v-loading="tempLoading">
|
||||
<el-row v-for="item in childTempList" :key="item.id">
|
||||
<el-col :span="24">
|
||||
<div class="template-item">
|
||||
<div class="item-header"><span class="blue">#</span>{{ item.name }}</div>
|
||||
<div class="item-text">{{ item.prompt }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-empty v-if="!childTempList.length" description="暂无模板数据" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { modelList} from '@/api/mode/index'
|
||||
|
||||
// 当前模板名称
|
||||
const curTemplate = reactive({ name: '', id: '' })
|
||||
// 模板列表
|
||||
const templateList = ref([])
|
||||
// 获取模板列表
|
||||
const getTemplateList = () => {
|
||||
modelList({ model: 1, type: 1 }).then(res => {
|
||||
templateList.value = res.rows
|
||||
Object.assign(curTemplate, res.rows[0]);
|
||||
getChildTemplate()
|
||||
})
|
||||
}
|
||||
// 模板切换
|
||||
const changeTemplate = (val) => {
|
||||
Object.assign(curTemplate, val);
|
||||
getChildTemplate()
|
||||
}
|
||||
|
||||
// 获取子模板
|
||||
const tempLoading = ref(false)
|
||||
const childTempList = ref([])
|
||||
const getChildTemplate = () => {
|
||||
tempLoading.value = true
|
||||
modelList({ model: 1, type: 2, parentId: curTemplate.id }).then(res => {
|
||||
childTempList.value = res.rows
|
||||
}).finally(() => {
|
||||
tempLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const emit = defineEmits(['changeMenu'])
|
||||
const aiRead = async () => {
|
||||
emit('changeMenu', childTempList.value)
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
getTemplateList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.read-container {
|
||||
padding: 15px;
|
||||
|
||||
.el-dropdown-link {
|
||||
font-weight: bold;
|
||||
|
||||
.el-icon--right {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.read-header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.template-list {
|
||||
margin-top: 15px;
|
||||
|
||||
.template-item {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #3D3D3D;
|
||||
|
||||
.blue {
|
||||
font-size: 22px;
|
||||
color: #409eff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text {
|
||||
display: flex;
|
||||
color: #409eff;
|
||||
font-size: 13px;
|
||||
padding-left: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,186 @@
|
|||
<template>
|
||||
<TemplateStudy :mode="mode"/>
|
||||
<TemplateStudy/>
|
||||
<!-- <div class="page-curriculum flex">
|
||||
<el-row>
|
||||
<el-col :span="12" class="flex">
|
||||
<div class="page-left">
|
||||
<template v-if="activeMenu == 1">
|
||||
<div class="page-title">课程标准研读</div>
|
||||
<el-radio-group v-model="radio" @change="changeRadio">
|
||||
<el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="list">
|
||||
<ul>
|
||||
<li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
|
||||
@click="clickItem(index)">
|
||||
<el-image class="img" :src="item.url" />
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="activeMenu != 1">
|
||||
<PdfTemplate/>
|
||||
</template>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="flex">
|
||||
<div class="page-right">
|
||||
<div class="right-header">
|
||||
<el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
|
||||
@click="onClickMenu(item)">{{ item.label
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<ReadTemplate v-if="activeMenu == 1" @changeMenu="changeMenu" />
|
||||
<QuestionAnswer v-if="activeMenu == 2" />
|
||||
<ReadResult v-if="activeMenu == 3" :curTemp="curTemp" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TemplateStudy from '@/components/template-study/index.vue'
|
||||
import ReadTemplate from './container/read-template.vue';
|
||||
import QuestionAnswer from './container/question-answer.vue'
|
||||
import ReadResult from './container/read-result.vue'
|
||||
import PdfTemplate from './container/pdf-template.vue'
|
||||
|
||||
const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F11044b08-04c1-41a0-a453-1fd20b58a614%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1732953359&t=7ab1d1b3a903db85b1149914407aea35'
|
||||
|
||||
/************************左侧************* */
|
||||
const radio = ref(1)
|
||||
const radioList = ref([
|
||||
{ label: '浏览研读', value: 1 },
|
||||
{ label: '跨学科研读', value: 2 },
|
||||
{ label: '跨学段研读', value: 3 },
|
||||
{ label: '课标修订研读', value: 4 },
|
||||
{ label: '自由研读', value: 5 },
|
||||
])
|
||||
const list = ref([
|
||||
{
|
||||
name: '高中语文课程标准',
|
||||
url
|
||||
}
|
||||
])
|
||||
const changeRadio = () => {
|
||||
list.value = []
|
||||
for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
|
||||
list.value.push({
|
||||
name: '高中语文课程标准',
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
const activeIndex = ref(-1)
|
||||
|
||||
const clickItem = (index) => {
|
||||
activeIndex.value = index
|
||||
}
|
||||
|
||||
|
||||
/************************右侧************* */
|
||||
|
||||
const contentMenu = [
|
||||
{ label: '研读模板', value: 1 },
|
||||
{ label: '问答模板', value: 2 },
|
||||
{ label: '研读结果', value: 3 }
|
||||
]
|
||||
const activeMenu = ref(1)
|
||||
const onClickMenu = (item) => {
|
||||
activeMenu.value = item.value
|
||||
}
|
||||
|
||||
const curTemp = ref([])
|
||||
const changeMenu = (data) =>{
|
||||
activeMenu.value = 3
|
||||
curTemp.value = data
|
||||
}
|
||||
|
||||
|
||||
const mode = ref(1)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-curriculum {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-row {
|
||||
width: 100%;
|
||||
|
||||
.page-left {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.img {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
border: solid #ccc 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #E0EAFF;
|
||||
}
|
||||
}
|
||||
|
||||
.li-active {
|
||||
background: #E0EAFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-right {
|
||||
width: 100%;
|
||||
background: #F6F6F6;
|
||||
border-left: solid #ececec 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.right-header {
|
||||
padding-left: 30px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-bottom: solid #ececec 1px;
|
||||
}
|
||||
|
||||
.right-con {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
2222
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<template>
|
||||
<div class="tabs-container">
|
||||
<div class="button-div">
|
||||
<el-button @click="goBack" type="primary" size="small">返回主页</el-button>
|
||||
<el-button type="default" size="small">推送</el-button>
|
||||
<el-button type="primary" size="small">保存</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="(item,index) in props.parameter.titleList">
|
||||
<el-tab-pane :label="item.label" :name="item.id">
|
||||
<el-row :gutter="10" class="tempalte-main">
|
||||
<el-col :span="16">
|
||||
<!-- 左侧组件 -->
|
||||
<transition name="fade">
|
||||
<component :is="currentComponent"/>
|
||||
</transition>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<!-- 右侧 -->
|
||||
<el-scrollbar class="right-box" :height="pageHeight">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="作业名称">
|
||||
<el-input></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="作业说明">
|
||||
<el-input type="textarea" :row="5"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref,defineProps ,defineEmits,nextTick , onMounted,shallowRef } from 'vue'
|
||||
import ClassroomPresentation from './classroomPresentation/index.vue'
|
||||
import selfSearchQuestions from './selfSearchQuestions/index.vue'
|
||||
const props = defineProps({
|
||||
parameter: Object
|
||||
});
|
||||
const emits = defineEmits(['goBack'])
|
||||
const currentComponent = shallowRef(null)
|
||||
|
||||
const activeName = ref(1)
|
||||
const pageHeight = ref(0)
|
||||
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
// 返回主页
|
||||
const goBack = () => {
|
||||
emits('goBack')
|
||||
}
|
||||
|
||||
// 对应的组件
|
||||
const rightComponets = (str) => {
|
||||
switch (str) {
|
||||
case 'classroomPresentation':
|
||||
return ClassroomPresentation
|
||||
case 'selfSearchQuestions':
|
||||
return selfSearchQuestions
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
// 监听主页传过来的值
|
||||
onMounted(() => {
|
||||
currentComponent.value = rightComponets(props.parameter.components)
|
||||
// 获取当前高度加上滚动条的高度
|
||||
nextTick(() => {
|
||||
pageHeight.value = window.innerHeight + window.scrollY - 156;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tabs-container{
|
||||
position: relative;
|
||||
}
|
||||
.button-div{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.right-box{
|
||||
background-color: #fff;
|
||||
padding:5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
11111
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="mb-4">
|
||||
<div>
|
||||
<el-button type="danger" disabled>批量删除</el-button>
|
||||
<el-button type="primary" disabled>批量推送</el-button>
|
||||
</div>
|
||||
<CustomSelect
|
||||
:options="options"
|
||||
placeholder="设计新作业"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import CustomSelect from '../components/customSelect.vue';
|
||||
const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mb-4{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
<div class="list-container">
|
||||
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
|
||||
<div class="item-content">
|
||||
<el-checkbox v-model="item.checked" @click.stop="clickCheckbox(item)"/>
|
||||
<el-checkbox v-model="item.checked"/>
|
||||
<div class="item-text">
|
||||
<div class="title-header">
|
||||
<div class="item-title" :title="item.title">{{ item.title }}</div>
|
||||
<div class="item-title">{{ item.title }}</div>
|
||||
<CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
|
||||
</div>
|
||||
<div class="item-description" :title="item.description">{{ item.description }}</div>
|
||||
|
|
@ -17,39 +17,21 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref,markRaw } from 'vue';
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
import CustomButton from '../components/button.vue'
|
||||
const emits = defineEmits(['checked']);
|
||||
|
||||
const items = ref([
|
||||
{ id:1,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
{ id:2,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'primary',text:'课堂练习' },
|
||||
{ id:3,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
{ id:4,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'danger',text:'常规作业' },
|
||||
{ id:5,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
{ id:6,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
|
||||
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'primary',text:'课堂练习' },
|
||||
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'danger',text:'常规作业' },
|
||||
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||
]);
|
||||
// 获取选中的checkbox的id
|
||||
const selectIds = ref([])
|
||||
|
||||
const handleClick = (item) => {
|
||||
console.log(item.title);
|
||||
console.log('Clicked on:', item.title);
|
||||
};
|
||||
// 选择多选框
|
||||
const clickCheckbox = (item,e) => {
|
||||
if(item.checked === true){
|
||||
if(selectIds.value.includes(item.id)){
|
||||
const index = selectIds.value.indexOf(item.id)
|
||||
selectIds.value.splice(index,1)
|
||||
}
|
||||
}else{
|
||||
selectIds.value.push(item.id)
|
||||
}
|
||||
emits('checked',selectIds.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -58,7 +40,7 @@
|
|||
width: 100%;
|
||||
max-width: 400px; /* 可以根据需要调整宽度 */
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
padding: 16px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -68,7 +50,7 @@
|
|||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -98,7 +80,6 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
.title-header{
|
||||
display: flex;
|
||||
|
|
@ -111,12 +92,6 @@
|
|||
font-weight: 500;
|
||||
color: #303133;
|
||||
text-align: left;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1; /* 设置最大行数 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
|
|
|
|||
|
|
@ -1,125 +1,51 @@
|
|||
<template>
|
||||
<div class="list-content">
|
||||
<div class="list-container">
|
||||
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
|
||||
<div class="item-content">
|
||||
<div class="item-text">
|
||||
<div class="title-header">
|
||||
<div class="item-title">{{ item.title }}</div>
|
||||
<div class="item-description">{{ item.description }}</div>
|
||||
</div>
|
||||
<el-icon class="item-icon"><component :is="item.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="item-description">{{ item.description }}</div>
|
||||
<div class="item-bottom">
|
||||
<CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, markRaw } from 'vue';
|
||||
import { shallowRef } from 'vue';
|
||||
import { Plus, ArrowDown, Document, User, Setting } from '@element-plus/icons-vue';
|
||||
import CustomButton from '../components/button.vue';
|
||||
const emits = defineEmits(['skipDetail']);
|
||||
|
||||
const items = ref([
|
||||
{ title: '自主搜题', description: '1111111', icon: markRaw(Document), type: 'default', text: '习题训练',components:'classroomPresentation',titleList:[
|
||||
{
|
||||
id:1,
|
||||
label:'自主搜题',
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
label:'校本题库',
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
label:'个人题库',
|
||||
},
|
||||
]},
|
||||
{ title: '校本题库', description: '222222', icon: markRaw(Document), type: 'default', text: '习题训练',components:'classroomPresentation',titleList:[
|
||||
{
|
||||
id:1,
|
||||
label:'自主搜题',
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
label:'校本题库',
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
label:'个人题库',
|
||||
},
|
||||
] },
|
||||
{ title: '个人题库', description: '333333', icon: markRaw(Document), type: 'default', text: '习题训练',components:'classroomPresentation',titleList:[
|
||||
{
|
||||
id:1,
|
||||
label:'自主搜题',
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
label:'校本题库',
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
label:'个人题库',
|
||||
},
|
||||
] },
|
||||
{ title: '智能推荐', description: '444444', icon: markRaw(Document), type: '', text: '',components:'classroomPresentation',titleList:[
|
||||
{
|
||||
id:1,
|
||||
label:'智能推荐',
|
||||
},
|
||||
] },
|
||||
{ title: '课堂展示', description: '555555', icon: markRaw(Document), type: 'primary', text: '课堂展示',components:'selfSearchQuestions',titleList:[
|
||||
{
|
||||
id:1,
|
||||
label:'课堂展示',
|
||||
},
|
||||
] },
|
||||
{ title: '常规作业', description: '555555', icon: markRaw(Document), type: 'danger', text: '常规作业',components:'selfSearchQuestions',titleList:[
|
||||
{
|
||||
id:1,
|
||||
label:'常规作业',
|
||||
},
|
||||
] },
|
||||
{ title: 'AI设计作业', description: '555555', icon: markRaw(Document), type: 'danger', text: '常规作业',components:'selfSearchQuestions',titleList:[
|
||||
{
|
||||
id:1,
|
||||
label:'AI设计作业',
|
||||
},
|
||||
] },
|
||||
const items = shallowRef([
|
||||
{ title: '自主搜题', description: '1111111', icon: Document },
|
||||
{ title: '校本题库', description: '222222', icon: User },
|
||||
{ title: '个人题库', description: '333333', icon: Setting },
|
||||
{ title: '智能推荐', description: '444444', icon: Plus },
|
||||
{ title: '课堂展示', description: '555555', icon: ArrowDown },
|
||||
{ title: '常规作业', description: '555555', icon: ArrowDown },
|
||||
{ title: 'AI设计作业', description: '555555', icon: ArrowDown },
|
||||
]);
|
||||
|
||||
const handleClick = (item) => {
|
||||
emits('skipDetail', item);
|
||||
console.log('Clicked on:', item.title);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-content{
|
||||
padding: 8px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.content-list {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 8px;
|
||||
width: calc(25% - 16px);
|
||||
padding: 16px;
|
||||
width: calc(33.333% - 32px); /* 3列布局，每列减去gap */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
|
@ -149,37 +75,10 @@ const handleClick = (item) => {
|
|||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
text-align: left;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 设置最大行数 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.title-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,8 +21,7 @@
|
|||
|
||||
<script setup>
|
||||
import { Plus, ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ref, defineEmits, defineProps } from 'vue';
|
||||
const emits = defineEmits(['select-click']);
|
||||
import { ref, computed, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
|
|
@ -46,8 +45,8 @@ const toggleDropup = () => {
|
|||
};
|
||||
|
||||
const selectOption = (option) => {
|
||||
selectedOption.value = option;
|
||||
isDropdownOpen.value = false;
|
||||
emits('select-click', option)
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,115 +1,31 @@
|
|||
<template>
|
||||
<div class="page-template flex">
|
||||
<!-- // 顶部 -->
|
||||
<div class="mb-4">
|
||||
<div>
|
||||
<el-button type="danger" :disabled="!isChceked">批量删除</el-button>
|
||||
<el-button type="primary" :disabled="!isChceked">批量推送</el-button>
|
||||
</div>
|
||||
<CustomSelect
|
||||
:options="options"
|
||||
placeholder="设计新作业"
|
||||
@select-click="selectClick"
|
||||
/>
|
||||
</div>
|
||||
<div :style="{height: viewportHeight - 72 + 'px'}" class="no-horizontal-scroll">
|
||||
<Header/>
|
||||
<el-row :gutter="20" class="tempalte-main">
|
||||
<el-col :span="6">
|
||||
<!-- 左侧列表 -->
|
||||
<Left @checked="checked"/>
|
||||
<!--左侧列表-->
|
||||
<Left/>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<!-- 右侧 -->
|
||||
<component :is="currentComponent" v-on="listeners" :parameter="parameter" />
|
||||
<!--右侧-->
|
||||
<Right/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, shallowRef, onMounted, nextTick, computed } from 'vue';
|
||||
import Right from './Right/index.vue';
|
||||
import Left from './Left/index.vue';
|
||||
import Detials from './Details/index.vue';
|
||||
import CustomSelect from './components/customSelect.vue';
|
||||
|
||||
const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
|
||||
|
||||
// 判断是否有选中的checkbox框
|
||||
const isChceked = ref(false);
|
||||
const viewportHeight = ref(0);
|
||||
const isSkip = ref(false);
|
||||
// 点击主页传的参数
|
||||
const parameter = ref({});
|
||||
// 选中的checkbox框
|
||||
const checked = (val) => {
|
||||
console.log(val);
|
||||
val.length > 0 ? isChceked.value = true : isChceked.value = false;
|
||||
}
|
||||
const currentComponent = shallowRef(Right);
|
||||
|
||||
// 选择的作业设计类型
|
||||
const selectClick = (val) => {
|
||||
console.log(val);
|
||||
}
|
||||
// 右侧点击路由跳转
|
||||
const skipDetail = (val) => {
|
||||
parameter.value = Object.assign({}, val);
|
||||
isSkip.value = true;
|
||||
currentComponent.value = Detials;
|
||||
}
|
||||
// 回到主页
|
||||
const goBack = () => {
|
||||
isSkip.value = false;
|
||||
currentComponent.value = Right;
|
||||
}
|
||||
|
||||
// 获取视口高度
|
||||
const getViewportHeight = () => {
|
||||
return Math.max(
|
||||
document.documentElement.clientHeight,
|
||||
window.innerHeight || 0
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
window.addEventListener('resize', () => {
|
||||
viewportHeight.value = getViewportHeight();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const listeners = computed(() => ({
|
||||
skipDetail,
|
||||
goBack
|
||||
}));
|
||||
import Header from './Header/index.vue'
|
||||
import Right from './Right/index.vue'
|
||||
import Left from './Left/index.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mb-4 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.page-template {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-x: hidden; // 防止横向滚动条
|
||||
|
||||
.tempalte-main {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.no-horizontal-scroll {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="mb-4">
|
||||
<el-button type="primary" @click="onchange('/model/curriculum')">课标研读</el-button>
|
||||
<el-button type="primary" @click="onchange('/model/management')">作业管理</el-button>
|
||||
<el-button type="success" @click="onchange('/model/teaching')">教材研读</el-button>
|
||||
<!-- <el-button type="success" @click="onchange('/model/teaching')">教材研读</el-button> -->
|
||||
<!-- <el-button type="info" @click="onchange('/model/examination')">考试分析</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -126,12 +126,6 @@
|
|||
<span>下载</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.fileSuffix === 'ppt' || item.fileSuffix === 'pptx'" class="item-popover-item">
|
||||
<el-button text @click="adToKj(item)">
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
<span>加入课件</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="item-popover-item">
|
||||
<el-button text @click="moveSmarttalkFun(item)">
|
||||
<el-icon>
|
||||
|
|
@ -159,7 +153,7 @@ import FileImage from '@/components/file-image/index.vue'
|
|||
import { asyncLocalFile } from '@/utils/talkFile'
|
||||
import { toTimeText } from '@/utils/date'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { deleteSmarttalk, updateSmarttalk, getPrepareById, addFileToKj } from '@/api/file'
|
||||
import { deleteSmarttalk, updateSmarttalk, getPrepareById } from '@/api/file'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import outLink from '@/utils/linkConfig'
|
||||
|
||||
|
|
@ -189,14 +183,6 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
adToKj(item) {
|
||||
addFileToKj(item.id).then(res=>{
|
||||
console.log(res)
|
||||
item.fileFlag = "课件"
|
||||
},error=>{
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
editTalk(item) {
|
||||
console.log(item,this.userInfo,'this.userInfo')
|
||||
ElMessageBox.prompt('请输入新的名称', '重命名', {
|
||||
|
|
|
|||
|
|
@ -538,7 +538,7 @@ export default {
|
|||
}
|
||||
},
|
||||
clickChoose(value) {
|
||||
this.checkFileList = value ? this.currentSCFileList : []
|
||||
this.checkFileList = value ? this.currentFileList : []
|
||||
},
|
||||
deleteTalk(item) {
|
||||
let index = this.currentFileList.indexOf(item)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,178 @@
|
|||
<template>
|
||||
<TemplateStudy :type="type"/>
|
||||
<div class="page-curriculum flex">
|
||||
<el-row>
|
||||
<el-col :span="12" class="flex">
|
||||
<div class="page-left">
|
||||
<template v-if="activeMenu == 1">
|
||||
<div class="page-title">教材研读</div>
|
||||
<el-radio-group v-model="radio" @change="changeRadio">
|
||||
<el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="list">
|
||||
<ul>
|
||||
<li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
|
||||
@click="clickItem(index)">
|
||||
<el-image class="img" :src="item.url" />
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="activeMenu != 1">
|
||||
<PdfTemplate/>
|
||||
</template>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="flex">
|
||||
<div class="page-right">
|
||||
<div class="right-header">
|
||||
<el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
|
||||
@click="onClickMenu(item)">{{ item.label
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<ReadTemplate v-if="activeMenu == 1" />
|
||||
<QuestionAnswer v-if="activeMenu == 2" />
|
||||
<ReadResult v-if="activeMenu == 3" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TemplateStudy from '@/components/template-study/index.vue'
|
||||
import ReadTemplate from './container/read-template.vue';
|
||||
import QuestionAnswer from './container/question-answer.vue'
|
||||
import ReadResult from './container/read-result.vue'
|
||||
import PdfTemplate from './container/pdf-template.vue'
|
||||
|
||||
const url = 'https://p5.itc.cn/images01/20220529/f30e3c4164dc4f7495ed196577a2a312.jpeg'
|
||||
|
||||
/************************左侧************* */
|
||||
const radio = ref(1)
|
||||
const radioList = ref([
|
||||
{ label: '浏览研读', value: 1 },
|
||||
{ label: '跨学科研读', value: 2 },
|
||||
{ label: '跨学段研读', value: 3 },
|
||||
{ label: '课标修订研读', value: 4 },
|
||||
{ label: '自由研读', value: 5 },
|
||||
])
|
||||
const list = ref([
|
||||
{
|
||||
name: '高中语文必修上',
|
||||
url
|
||||
}
|
||||
])
|
||||
const changeRadio = () => {
|
||||
list.value = []
|
||||
for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
|
||||
list.value.push({
|
||||
name: '高中语文必修上',
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
const activeIndex = ref(-1)
|
||||
|
||||
const clickItem = (index) => {
|
||||
activeIndex.value = index
|
||||
}
|
||||
|
||||
|
||||
/************************右侧************* */
|
||||
|
||||
const contentMenu = [
|
||||
{ label: '研读模板', value: 1 },
|
||||
{ label: '问答模板', value: 2 },
|
||||
{ label: '研读结果', value: 3 }
|
||||
]
|
||||
const activeMenu = ref(1)
|
||||
const onClickMenu = (item) => {
|
||||
activeMenu.value = item.value
|
||||
}
|
||||
|
||||
const type = ref(2)
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-curriculum {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-row {
|
||||
width: 100%;
|
||||
|
||||
.page-left {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.img {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
border: solid #ccc 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #E0EAFF;
|
||||
}
|
||||
}
|
||||
|
||||
.li-active {
|
||||
background: #E0EAFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-right {
|
||||
width: 100%;
|
||||
background: #F6F6F6;
|
||||
border-left: solid #ececec 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.right-header {
|
||||
padding-left: 30px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-bottom: solid #ececec 1px;
|
||||
}
|
||||
|
||||
.right-con {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue