Merge branch 'main' into lyc-dev
This commit is contained in:
commit
327e7d78ad
|
|
@ -6,11 +6,11 @@ directories:
|
|||
win:
|
||||
executableName: 文枢课堂
|
||||
icon: resources/logo2.ico
|
||||
target:
|
||||
- target: nsis
|
||||
arch:
|
||||
- x64
|
||||
- ia32
|
||||
# target:
|
||||
# - target: nsis
|
||||
# arch:
|
||||
# - x64
|
||||
# - ia32
|
||||
files:
|
||||
- '!**/.vscode/*'
|
||||
- '!src/*'
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ directories:
|
|||
win:
|
||||
executableName: 永川中小学AI教学系统
|
||||
icon: resources/yc-logo.png
|
||||
target:
|
||||
- target: nsis
|
||||
arch:
|
||||
- x64
|
||||
- ia32
|
||||
# target:
|
||||
# - target: nsis
|
||||
# arch:
|
||||
# - x64
|
||||
# - ia32
|
||||
files:
|
||||
- '!**/.vscode/*'
|
||||
- '!src/*'
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ directories:
|
|||
win:
|
||||
executableName: 实训教学
|
||||
icon: resources/yc-logo.png
|
||||
target:
|
||||
- target: nsis
|
||||
arch:
|
||||
- x64
|
||||
- ia32
|
||||
# target:
|
||||
# - target: nsis
|
||||
# arch:
|
||||
# - x64
|
||||
# - ia32
|
||||
files:
|
||||
- '!**/.vscode/*'
|
||||
- '!src/*'
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ directories:
|
|||
win:
|
||||
executableName: 育人酉数平台
|
||||
icon: resources/yy-logo.png
|
||||
target:
|
||||
- target: nsis
|
||||
arch:
|
||||
- x64
|
||||
- ia32
|
||||
# target:
|
||||
# - target: nsis
|
||||
# arch:
|
||||
# - x64
|
||||
# - ia32
|
||||
files:
|
||||
- '!**/.vscode/*'
|
||||
- '!src/*'
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ asarUnpack:
|
|||
win:
|
||||
executableName: AIx
|
||||
icon: resources/logo2.ico
|
||||
target:
|
||||
- target: nsis
|
||||
arch:
|
||||
- x64
|
||||
- ia32
|
||||
# target:
|
||||
# - target: nsis
|
||||
# arch:
|
||||
# - x64
|
||||
# - ia32
|
||||
nsis:
|
||||
oneClick: false
|
||||
allowToChangeInstallationDirectory: true
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "aix-win-ws",
|
||||
"version": "2.5.16",
|
||||
"version": "2.5.17",
|
||||
"description": "",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "上海交大重庆人工智能研究院",
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
"@vue-office/excel": "^1.7.11",
|
||||
"@vue-office/pdf": "^2.0.2",
|
||||
"@vueuse/core": "^10.11.0",
|
||||
"aix-plugins-aitools": "^1.1.5",
|
||||
"aix-plugins-aitools": "^1.1.10",
|
||||
"animate.css": "^4.1.1",
|
||||
"circular-json": "^0.5.9",
|
||||
"clipboard": "^2.0.11",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 79 KiB |
|
|
@ -80,6 +80,7 @@ provide(injectKeySlideScale, scale)
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide-item {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ export default (isLoader?: boolean = true) => {
|
|||
const touchInfo = ref<{ x: number; y: number; } | null>(null)
|
||||
|
||||
const touchStartListener = (e: TouchEvent) => {
|
||||
e.preventDefault() // 阻止默认事件
|
||||
// e.preventDefault() // 阻止默认事件
|
||||
touchInfo.value = {
|
||||
// x: e.changedTouches[0].pageX,
|
||||
// y: e.changedTouches[0].pageY,
|
||||
|
|
@ -208,6 +208,7 @@ export default (isLoader?: boolean = true) => {
|
|||
}
|
||||
const touchEndListener = (e: TouchEvent) => {
|
||||
if (!touchInfo.value) return
|
||||
// window.scrollTo(0, 0) // 滚动到顶部
|
||||
const offsetX = Math.abs(touchInfo.value.x - e.changedTouches[0].clientX)
|
||||
const offsetY = e.changedTouches[0].clientY - touchInfo.value.y
|
||||
if ( Math.abs(offsetY) > offsetX && Math.abs(offsetY) > 50 ) {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 21 KiB |
|
|
@ -23,7 +23,7 @@
|
|||
</li>
|
||||
<li v-if="computedregistertype!=4" :class="computedregistertype==1 || computedregistertype==2 ? '':'pointer-events'" @click="onUserTo('/joinSchool')">加入学校</li>
|
||||
<li @click="onUserTo('/profile')">个人中心</li>
|
||||
<li v-if="isStadium() !== true" @click="onUserTo('/schoolManagement')">学校管理</li>
|
||||
<li v-if="isStadium() !== true && checkRole(['admin','headmaster'])" @click="onUserTo('/schoolManagement')">学校管理</li>
|
||||
<li v-if="isStadium() !== true" @click="onUserTo('/class')">班级中心</li>
|
||||
<li @click="logout">退出登录</li>
|
||||
</ul>
|
||||
|
|
@ -65,7 +65,7 @@ import pkc from "../../../../../package.json"
|
|||
import defaultUserImg from '@/assets/images/img-avatar.png'
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import {toLinkLeftWeb} from "@/utils/tool"
|
||||
|
||||
import { checkRole } from '@/utils/permission'
|
||||
|
||||
const { ipcRenderer } = window.electron || {}
|
||||
const dev_api = ref(import.meta.env.VITE_APP_BASE_API)
|
||||
|
|
@ -86,6 +86,7 @@ const defaultImg = ['/img/avatar-default.jpg','/images/img-avatar.png','/src/ass
|
|||
|
||||
//是否是基地人员
|
||||
const isStadium = () => {
|
||||
console.log('isStadium',userStore.roles )
|
||||
let user = userStore.user
|
||||
let roles = user.roles
|
||||
return roles.some(item => item.roleKey === 'stadium')
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import log from 'electron-log/renderer' // 渲染进程日志-文件记录
|
|||
import customComponent from '@/components/common' // 自定义组件
|
||||
import plugins from './plugins' // plugins插件
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import aiAudio from 'aix-plugins-aitools' // 文字转语音插件
|
||||
import aiTools from 'aix-plugins-aitools' // 文字转语音插件
|
||||
import '../../../node_modules/aix-plugins-aitools/aitools.css'
|
||||
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ app.use(router)
|
|||
.use(plugins)
|
||||
.use(Icon)
|
||||
.use(Directive)
|
||||
.use(aiAudio)
|
||||
.use(aiTools)
|
||||
.use(VMdEditor)
|
||||
.mount('#app')
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import useUserStore from '@/store/modules/user'
|
||||
|
||||
/**
|
||||
* 字符权限校验
|
||||
* @param {Array} value 校验值
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function checkPermi(value) {
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const permissions = useUserStore().permissions
|
||||
const permissionDatas = value
|
||||
const all_permission = "*:*:*";
|
||||
|
||||
const hasPermission = permissions.some(permission => {
|
||||
return all_permission === permission || permissionDatas.includes(permission)
|
||||
})
|
||||
|
||||
if (!hasPermission) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
} else {
|
||||
console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 角色权限校验
|
||||
* @param {Array} value 校验值
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function checkRole(value) {
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const roles = useUserStore().roles
|
||||
const permissionRoles = value
|
||||
const super_admin = "admin";
|
||||
|
||||
const hasRole = roles.some(role => {
|
||||
return super_admin === role || permissionRoles.includes(role)
|
||||
})
|
||||
|
||||
if (!hasRole) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
} else {
|
||||
console.error(`need roles! Like checkRole="['admin','editor']"`)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
|
@ -222,9 +222,11 @@ export const createWindow = async (type, data) => {
|
|||
if (import.meta.env.VITE_SHOW_DEV_TOOLS === 'true') win.webContents.openDevTools() // 打开调试工具
|
||||
let events = {} // 事件处理函数对象
|
||||
Object.keys(data)
|
||||
.filter(k => typeof data[k] === 'function')
|
||||
.filter(k => typeof data[k] === 'function' && k!=='success')
|
||||
.forEach(k => events[k] = data[k])
|
||||
eventHandles(type, win, events) // 事件监听处理
|
||||
// 创建成功后触发回调
|
||||
data.success && data.success(win)
|
||||
return win
|
||||
}
|
||||
default:
|
||||
|
|
@ -306,9 +308,9 @@ const eventHandles = (type, win, events) => {
|
|||
// 监听主窗口-关闭事件
|
||||
mainWin.once('close', () => {winPdf=null;win.destroy();})
|
||||
win.on('closed', () => {
|
||||
if(!!onClosed) onClosed() // 自定义关闭事件
|
||||
if(!!closed) closed() // 自定义关闭事件
|
||||
if(!!close) close() // 自定义关闭事件
|
||||
if(!!onClosed) onClosed(win) // 自定义关闭事件
|
||||
if(!!closed) closed(win) // 自定义关闭事件
|
||||
if(!!close) close(win) // 自定义关闭事件
|
||||
win = null
|
||||
wins_tool = null
|
||||
winChild=null
|
||||
|
|
|
|||
|
|
@ -51,7 +51,8 @@ onMounted(() => {
|
|||
})
|
||||
|
||||
defineExpose({
|
||||
updateLabel
|
||||
updateLabel,
|
||||
onSelectOption
|
||||
})
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div style="display: flex;">
|
||||
<div style="margin-left: 15px">
|
||||
<el-cascader v-model="bindSubject" :options="subjectList" @change="handleChange" />
|
||||
</div>
|
||||
<!-- <div style="margin-left: 15px">
|
||||
<el-dropdown @command="handleUserEduStage">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button class="custom-button" type="default" round >{{ useClassTaskStore().experimentObj.edustage }}
|
||||
|
|
@ -9,7 +12,6 @@
|
|||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <el-dropdown-item command="幼儿园">幼儿园</el-dropdown-item> -->
|
||||
<el-dropdown-item command="小学">小学</el-dropdown-item>
|
||||
<el-dropdown-item command="初中">初中</el-dropdown-item>
|
||||
<el-dropdown-item command="高中">高中</el-dropdown-item>
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -47,17 +49,119 @@ import useClassTaskStore from '@/store/modules/classTask'
|
|||
const userStore = useUserStore().user
|
||||
|
||||
// 定义要发送的emit事件
|
||||
// let emit = defineEmits(['experlist'])
|
||||
let emit = defineEmits(['experlist'])
|
||||
// const expObj = ref({
|
||||
// edustage: useClassTaskStore().experimentObj.edustage,
|
||||
// edusubject: useClassTaskStore().experimentObj.edusubject,
|
||||
// })
|
||||
const subjectList = ref([])
|
||||
|
||||
//const subjectList = ref([])
|
||||
const chooseGrade= ref({})
|
||||
const expList = ref([]) // 当前年级的所有课程
|
||||
const checkList = ref([])// 当前年级对应学科的课程，
|
||||
const isLoaded = ref(false);
|
||||
|
||||
|
||||
const bindSubject = ref([useClassTaskStore().experimentObj.edustage, useClassTaskStore().experimentObj.edusubject]); // 默认为小学数学
|
||||
const subjectList = [
|
||||
{
|
||||
value: '小学',
|
||||
label: '小学',
|
||||
children: [
|
||||
{
|
||||
value: '数学',
|
||||
label: '数学',
|
||||
|
||||
},
|
||||
{
|
||||
value: '物理',
|
||||
label: '物理',
|
||||
|
||||
},
|
||||
{
|
||||
value: '化学',
|
||||
label: '化学',
|
||||
|
||||
},
|
||||
{
|
||||
value: '生物',
|
||||
label: '生物',
|
||||
|
||||
},
|
||||
{
|
||||
value: '科学',
|
||||
label: '科学',
|
||||
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '初中',
|
||||
label: '初中',
|
||||
children: [
|
||||
{
|
||||
value: '数学',
|
||||
label: '数学',
|
||||
|
||||
},
|
||||
{
|
||||
value: '物理',
|
||||
label: '物理',
|
||||
|
||||
},
|
||||
{
|
||||
value: '化学',
|
||||
label: '化学',
|
||||
|
||||
},
|
||||
{
|
||||
value: '生物',
|
||||
label: '生物',
|
||||
|
||||
},
|
||||
{
|
||||
value: '科学',
|
||||
label: '科学',
|
||||
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: '高中',
|
||||
label: '高中',
|
||||
children: [
|
||||
{
|
||||
value: '数学',
|
||||
label: '数学',
|
||||
|
||||
},
|
||||
{
|
||||
value: '物理',
|
||||
label: '物理',
|
||||
|
||||
},
|
||||
{
|
||||
value: '化学',
|
||||
label: '化学',
|
||||
|
||||
},
|
||||
{
|
||||
value: '生物',
|
||||
label: '生物',
|
||||
|
||||
},
|
||||
{
|
||||
value: '科学',
|
||||
label: '科学',
|
||||
|
||||
}]
|
||||
}
|
||||
]
|
||||
const handleChange = (val) => {
|
||||
useClassTaskStore().experimentObj.edustage = val[0];
|
||||
useClassTaskStore().experimentObj.edusubject = val[1];
|
||||
handleUserEduStage(useClassTaskStore().experimentObj.edustage);
|
||||
}
|
||||
|
||||
|
||||
// 获取基础的学科
|
||||
const getSubject = () => {
|
||||
//没有学科则不进行下面的步骤
|
||||
|
|
@ -67,19 +171,20 @@ const getSubject = () => {
|
|||
// subjectList.value = res.rows.filter(item => arr.includes(String(item.id))).map(items => items)
|
||||
// console.log(subjectList,'subjectList');
|
||||
// })
|
||||
|
||||
//这里获取死数据 学科list
|
||||
const edustageList = ['小学','初中','高中'];
|
||||
const subList = ['数学','物理','化学','生物','科学'];
|
||||
edustageList.forEach((item) => {
|
||||
subList.forEach((subItems) => {
|
||||
subjectList.value.push({
|
||||
edustage: item,
|
||||
edusubject: subItems,
|
||||
itemtitle: subItems
|
||||
})
|
||||
})
|
||||
})
|
||||
console.log(subjectList,'subjectList');
|
||||
// const edustageList = ['小学','初中','高中'];
|
||||
// const subList = ['数学','物理','化学','生物','科学'];
|
||||
// edustageList.forEach((item) => {
|
||||
// subList.forEach((subItems) => {
|
||||
// subjectList.value.push({
|
||||
// edustage: item,
|
||||
// edusubject: subItems,
|
||||
// itemtitle: subItems
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// console.log(subjectList,'subjectList');
|
||||
|
||||
// 默认读取一个学科
|
||||
const edusubject = useClassTaskStore().experimentObj.edusubject;
|
||||
|
|
@ -90,6 +195,8 @@ const getSubject = () => {
|
|||
isLoaded.value = true;
|
||||
//console.log('初始化执行完毕----');
|
||||
}
|
||||
|
||||
|
||||
// 展示有 实验科目的学科
|
||||
const isExpList = (edusubject) => {
|
||||
let list = [];
|
||||
|
|
@ -101,7 +208,7 @@ const isExpList = (edusubject) => {
|
|||
list = expList.value.filter(item => item.subject === 'physics')
|
||||
break;
|
||||
case '化学':
|
||||
checkList.value = expList.value.filter(item => item.subject === 'chemistry')
|
||||
list = expList.value.filter(item => item.subject === 'chemistry')
|
||||
break;
|
||||
case '生物':
|
||||
list = expList.value.filter(item => item.subject === 'biology')
|
||||
|
|
@ -112,19 +219,19 @@ const isExpList = (edusubject) => {
|
|||
}
|
||||
return list.length > 0
|
||||
}
|
||||
|
||||
// 选择学段
|
||||
const handleUserEduStage = (item) => {
|
||||
// userStore.edustage = item
|
||||
useClassTaskStore().experimentObj.edustage = item;
|
||||
|
||||
//清空操作
|
||||
expList.value = []
|
||||
if(item === '小学'){
|
||||
chooseGrade.value = jsonData.data.primary
|
||||
expList.value = chooseGrade.value
|
||||
const newSubjectList = subjectList.value.filter(item => item.edustage === '小学');
|
||||
for(let i in newSubjectList){
|
||||
const name = newSubjectList[i].itemtitle
|
||||
const newSubjectList = subjectList.filter(item => item.value === '小学');
|
||||
for(let i of newSubjectList[0].children){
|
||||
const name = i.value
|
||||
if(isExpList(name) && useClassTaskStore().experimentObj.edusubject===name){
|
||||
//useClassTaskStore().experimentObj.edusubject = name;
|
||||
// 更改学科默认与学科下的实验科目
|
||||
|
|
@ -135,9 +242,9 @@ const handleUserEduStage = (item) => {
|
|||
}else if(item === '初中'){
|
||||
chooseGrade.value = jsonData.data.junior
|
||||
expList.value = chooseGrade.value
|
||||
const newSubjectList = subjectList.value.filter(item => item.edustage === '初中');
|
||||
for(let i in newSubjectList){
|
||||
const name = newSubjectList[i].itemtitle
|
||||
const newSubjectList = subjectList.filter(item => item.value === '初中');
|
||||
for(let i of newSubjectList[0].children){
|
||||
const name = i.value
|
||||
if(isExpList(name) && useClassTaskStore().experimentObj.edusubject===name){
|
||||
//useClassTaskStore().experimentObj.edusubject = name;
|
||||
// 更改学科默认与学科下的实验科目
|
||||
|
|
@ -148,9 +255,9 @@ const handleUserEduStage = (item) => {
|
|||
}else if(item === '高中'){
|
||||
chooseGrade.value = jsonData.data.senior
|
||||
expList.value = chooseGrade.value
|
||||
const newSubjectList = subjectList.value.filter(item => item.edustage === '高中');
|
||||
for(let i in newSubjectList){
|
||||
const name = newSubjectList[i].itemtitle
|
||||
const newSubjectList = subjectList.filter(item => item.value === '高中');
|
||||
for(let i of newSubjectList[0].children){
|
||||
const name = i.value
|
||||
if(isExpList(name) && useClassTaskStore().experimentObj.edusubject===name){
|
||||
//useClassTaskStore().experimentObj.edusubject = name;
|
||||
// 更改学科默认与学科下的实验科目
|
||||
|
|
@ -161,7 +268,7 @@ const handleUserEduStage = (item) => {
|
|||
}
|
||||
}
|
||||
// 选择学科
|
||||
const handleUserEduSubject = (item) => {
|
||||
const handleUserEduSubject = (item, isEmit=true) => {
|
||||
// userStore.edusubject = item;
|
||||
useClassTaskStore().experimentObj.edusubject = item;
|
||||
console.log(item,'选择的学科-------')
|
||||
|
|
@ -185,7 +292,9 @@ const handleUserEduSubject = (item) => {
|
|||
}
|
||||
console.log(checkList.value,'checkList')
|
||||
useClassTaskStore().experimentObj.experimentList = checkList.value;
|
||||
// emit('experlist',checkList.value)
|
||||
if (isEmit) {
|
||||
emit('experlist',checkList.value)
|
||||
}
|
||||
}
|
||||
|
||||
const updateCheckList = async () => {
|
||||
|
|
@ -205,7 +314,8 @@ const updateCheckList = async () => {
|
|||
}
|
||||
expList.value = chooseGrade.value
|
||||
const edusubject = useClassTaskStore().experimentObj.edusubject;
|
||||
handleUserEduSubject(edusubject);
|
||||
bindSubject.value = [edustage, edusubject];
|
||||
handleUserEduSubject(edusubject, false);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="activeExp-header">
|
||||
<div class="infomation" v-if="isStadium() !== true" >
|
||||
<!-- <selectClass v-if="!isSubject" @experlist="getExperimentList" /> -->
|
||||
<selectClass ref="selectClassRef"/>
|
||||
<selectClass ref="selectClassRef" @experlist="initExperimentFirst"/>
|
||||
</div>
|
||||
<div>
|
||||
<selectExperiment ref="selectExperimentRef" @selectItem="getExperimentListItem" />
|
||||
|
|
@ -69,20 +69,28 @@ onMounted(() => {
|
|||
// // mainDiv 为需控制高度自适应盒子，通过 ref="mainDiv" 绑定
|
||||
// }
|
||||
|
||||
// 选择的学科 获取实验课程信息
|
||||
// const getExperimentList = (val) => {
|
||||
// console.log(val,'选择的学科，获取实验课程list信息')
|
||||
// // experimentList.value = val;
|
||||
// }
|
||||
// 根据选择的学科 自动选中实验课程的第一个
|
||||
/**
|
||||
* warn: 这部分后续需优化(handleUserEduSubject存在多次调用):
|
||||
* 目前会因为初始化时而watch到props的fileurl变化而额外总共执行2次. 而初始化时直接选择任务时, 会额外总共执行3次
|
||||
*/
|
||||
const initExperimentFirst = (val) => {
|
||||
// 默认选中第一个实验
|
||||
if (val[0].label && val[0].label !='') {
|
||||
selectExperimentRef.value.onSelectOption(val[0].label);
|
||||
}
|
||||
}
|
||||
|
||||
// 选择的实验课
|
||||
const getExperimentListItem = (val) => {
|
||||
console.log(val,'选择的实验课程信息')
|
||||
activeExp.value = val;
|
||||
emit('clickExpObj', val)
|
||||
}
|
||||
|
||||
// 监听实验课程信息
|
||||
watch(() => props.expObj.fileurl, (newVal, oldVal) => {
|
||||
console.log(props.expObj,'科学实验科目')
|
||||
console.log(props.expObj,'监听-科学实验科目')
|
||||
activeExp.value = props.expObj;
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,267 +1,91 @@
|
|||
<template>
|
||||
<div class="page-mindmap flex flex-col h-full">
|
||||
<div class="mindmap-header flex items-center justify-between pl-5">
|
||||
<div class="flex w-1/2 items-center justify-between">
|
||||
<div>
|
||||
<b>AI思维导图</b> <span class="ml-5">《{{ curNode.itemtitle }}》</span>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="isEdit">
|
||||
<el-button class="mr-3" @click="isEdit = false">取消</el-button>
|
||||
<el-button type="success" class="mr-3" @click="isEdit = false">保存</el-button>
|
||||
</template>
|
||||
<!-- <el-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>-->
|
||||
<!-- <el-select v-model="curMode" class="mr-3 w-30">
|
||||
<el-option
|
||||
v-for="item in modeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
<aiMindMap
|
||||
@exportImg="exportImg"
|
||||
@createMindMap="createMindMap"
|
||||
@reloadMindMap="reloadMindMap"
|
||||
ref="mindMapRef"
|
||||
/>
|
||||
</el-select>-->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
导出清晰度：<el-input-number v-model="scale" :min="1" :max="10" />数字越大越清晰，但图片大小会越大
|
||||
<el-button @click="outputImg" type="primary">导出图片</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mindmap-main flex flex-1" style="overflow: auto;">
|
||||
<div class="w-1/3 h-full p-3 main-left flex flex-col" v-loading="loadingAnswer" style="overflow: auto;">
|
||||
<div class="flex flex-1" style="overflow: auto;">
|
||||
<v-md-editor v-model="resMarkdown" :mode="isEdit ? 'edit' : 'preview'" />
|
||||
</div>
|
||||
<div class="main-left-ipt">
|
||||
<el-input
|
||||
v-model="textVal"
|
||||
style="max-width: 600px"
|
||||
placeholder="请输入信息对内容进一步调整"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-icon size="20" style="cursor: pointer;" @click="sendMessage"><Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- <el-input style="float: left;" v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" /><el-button>发送</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-2/3 h-full main-right">
|
||||
<mindmap v-if="rootData" :timetravel="true" :drag="true" :zoom="true" :edit="true"
|
||||
:center-btn="true" :fit-btn="true" :ctm="true" :add-node-btn="true"
|
||||
v-model="rootData"></mindmap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { Position } from "@element-plus/icons-vue"
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import { modelList, completion, modelChat } from '@/api/mode/index.js'
|
||||
import { createChart, sendChart } from '@/api/ai/index'
|
||||
import { Transformer } from 'markmap-lib'
|
||||
import mindmap from 'vue3-mindmap'
|
||||
import html2canvas from 'html2canvas'
|
||||
import 'vue3-mindmap/dist/style.css'
|
||||
import {exportImg64File} from "@/utils/talkFile";
|
||||
import axios from 'axios'
|
||||
import {onMounted, ref} from "vue";
|
||||
// import aiMindMap from './mindMapAITools.vue'
|
||||
import {sessionStore} from "@/utils/store";
|
||||
import {editTempResult, modelList, tempResult, tempSave} from "@/api/mode";
|
||||
import {exportImg64File} from "@/utils/talkFile";
|
||||
import useUserStore from '@/store/modules/user'
|
||||
const { user } = useUserStore()
|
||||
|
||||
const transformer = new Transformer()
|
||||
|
||||
// 当前节点
|
||||
const curNode = reactive({})
|
||||
|
||||
const textVal = ref(``)
|
||||
|
||||
const loadingAnswer = ref(false)
|
||||
|
||||
const scale = ref(5)
|
||||
|
||||
// const textVal = computed(() => {
|
||||
// return `生成${curNode.itemtitle}的教学思维导图，按照markdown的格式编写，只返回markdown的部分`
|
||||
// })
|
||||
|
||||
const curMode = ref(2)
|
||||
const modeOptions = ref([
|
||||
{
|
||||
label: '教学大模型',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '知识库模型',
|
||||
value: 2,
|
||||
}
|
||||
])
|
||||
|
||||
const isEdit = ref(false)
|
||||
|
||||
// AI 对话
|
||||
const resMarkdown = ref(``)
|
||||
const params = reactive({
|
||||
prompt: '',
|
||||
dataset_id: '',
|
||||
template: ''
|
||||
})
|
||||
const messages = ref([
|
||||
{
|
||||
role: 'user',
|
||||
content: ''
|
||||
}
|
||||
])
|
||||
const aiConversation = async () => {
|
||||
console.log(prompt.value)
|
||||
// return
|
||||
// params.prompt = prompt.value.replace(/{模板名称}/g, '')
|
||||
// 暂时用死数据
|
||||
// let str = '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
|
||||
// messages.value[0].content = str
|
||||
params.prompt = prompt.value
|
||||
// 教学大模型
|
||||
loadingAnswer.value = true
|
||||
if (curMode.value == 1) {
|
||||
const res = await sendChart({
|
||||
content: params.prompt,
|
||||
conversationId: conversation_id.value,
|
||||
stream: false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
// 知识库模型
|
||||
else {
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": params.prompt
|
||||
}
|
||||
]
|
||||
}
|
||||
const res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
console.log(res)
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async () => {
|
||||
loadingAnswer.value = true
|
||||
rootData.value = null
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role":"assiatant",
|
||||
"content": resMarkdown.value
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": `${textVal.value}，按照markdown的格式编写，只返回markdown的部分`
|
||||
}
|
||||
]
|
||||
}
|
||||
let res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
|
||||
const text2mindmap =(data)=> {
|
||||
return axios({
|
||||
url: "https://ai.ysaix.com:7865/chat",
|
||||
method: "post",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "*/*",
|
||||
},
|
||||
data:data
|
||||
});
|
||||
}
|
||||
|
||||
// 查询prompt 替换
|
||||
const prompt = ref('')
|
||||
const getPrompt = async () => {
|
||||
const { rows } = await modelList({ model: 5 })
|
||||
let str = rows.find((item) => item.name.indexOf('思维导图') != -1).prompt
|
||||
const showMap = ref(false)
|
||||
const prompt = ref('')
|
||||
const url = ref("https://ai.ysaix.com:7865/chat")
|
||||
|
||||
let curNode = sessionStore.get('subject.curNode')
|
||||
const title = ref(curNode.itemtitle)
|
||||
let curModel = ref({})
|
||||
const getPrompt = async () => {
|
||||
let str = curModel.value.prompt
|
||||
str = str.replace('{学段}', curNode.edustage)
|
||||
str = str.replace('{学科}', curNode.edusubject)
|
||||
let bookV = curNode.roottitle + '版'
|
||||
str = str.replace('{教材版本}', bookV)
|
||||
str = str.replace('{课程名称}', `《${curNode.itemtitle}》`)
|
||||
prompt.value = str
|
||||
}
|
||||
|
||||
// 千帆创建对话
|
||||
const conversation_id = ref('')
|
||||
const getChartId = async () => {
|
||||
const res = await createChart()
|
||||
conversation_id.value = res.data.conversation_id
|
||||
// ai 对话
|
||||
aiConversation()
|
||||
}
|
||||
|
||||
const rootData = ref(null)
|
||||
|
||||
const degure = (item) => {
|
||||
item.name = item.content.replace(/<[^>]*>/g, '');;
|
||||
if (item.children && item.children.length) {
|
||||
item.children.forEach(item2 => {
|
||||
degure(item2)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const outputImg = () => {
|
||||
let svg = window.document.getElementById('Mindmap_svg-wrapper_fgvb6')
|
||||
// let das = svg.querySelectorAll('.Mindmap_root_fgvb6')[0]
|
||||
html2canvas(svg,{
|
||||
scale: scale.value
|
||||
}).then((canvas) => {
|
||||
const dataUrl = canvas.toDataURL()
|
||||
exportImg64File(dataUrl, `${curNode.itemtitle}思维导图`)
|
||||
const exportImg = (data) => {
|
||||
exportImg64File(data, `${curNode.itemtitle}思维导图`)
|
||||
}
|
||||
|
||||
const createMindMap = async (data) => {
|
||||
if (tempData.value) {
|
||||
tempData.value.content = data
|
||||
await editTempResult(tempData.value)
|
||||
}else {
|
||||
const item = {
|
||||
mainModelId: 5,
|
||||
modelId: curModel.value.id,
|
||||
content: data,
|
||||
ex1: curNode.id
|
||||
}
|
||||
await tempSave(item)
|
||||
await getTempData()
|
||||
}
|
||||
}
|
||||
|
||||
const reloadMindMap = async (data) => {
|
||||
tempData.value.content = data
|
||||
await editTempResult(tempData.value)
|
||||
}
|
||||
|
||||
const getTempData = async () => {
|
||||
const { rows } = await tempResult({
|
||||
mainModelId: 5,
|
||||
modelId: curModel.value.id,
|
||||
ex1: curNode.id,
|
||||
createUser: user.userId
|
||||
})
|
||||
// mm.value.fit()
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
let data = sessionStore.get('subject.curNode')
|
||||
Object.assign(curNode, data)
|
||||
tempData.value = rows?rows[0]:null
|
||||
}
|
||||
|
||||
// 获取提示词
|
||||
getPrompt()
|
||||
// 获取百度千帆会话ID
|
||||
getChartId()
|
||||
|
||||
})
|
||||
// 监听 initValue 的变化
|
||||
watch(() => resMarkdown.value, () => {
|
||||
const { root } = transformer.transform(resMarkdown.value)
|
||||
degure(root)
|
||||
rootData.value = [root]
|
||||
console.log(rootData.value)
|
||||
})
|
||||
const reloadData = ref('')
|
||||
const tempData = ref(null)
|
||||
const mindMapRef = ref(null)
|
||||
onMounted(async () => {
|
||||
const { rows } = await modelList({ model: 5 })
|
||||
curModel.value = rows.find((item) => item.name.indexOf('思维导图') != -1)
|
||||
await getTempData()
|
||||
reloadData.value = tempData.value?tempData.value.content:'';
|
||||
await getPrompt()
|
||||
mindMapRef.value.initData({
|
||||
reloadData: reloadData.value,
|
||||
title: title.value,
|
||||
prompt: prompt.value,
|
||||
url: url.value
|
||||
})
|
||||
// showMap.value = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mindmap-header {
|
||||
background: #fff;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.main-left {
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
.main-left-ipt {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.main-right{
|
||||
border: 1px solid #ccc;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<div class="page-mindmap flex flex-col h-full">
|
||||
<div class="mindmap-header flex items-center justify-between pl-5">
|
||||
<div class="flex w-1/2 items-center justify-between">
|
||||
<div>
|
||||
<b>AI思维导图</b> <span class="ml-5">《{{ curNode.itemtitle }}》</span>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="isEdit">
|
||||
<el-button class="mr-3" @click="isEdit = false">取消</el-button>
|
||||
<el-button type="success" class="mr-3" @click="isEdit = false">保存</el-button>
|
||||
</template>
|
||||
<!-- <el-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>-->
|
||||
<!-- <el-select v-model="curMode" class="mr-3 w-30">
|
||||
<el-option
|
||||
v-for="item in modeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>-->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
导出清晰度：<el-input-number v-model="scale" :min="1" :max="10" />数字越大越清晰，但图片大小会越大
|
||||
<el-button @click="outputImg" type="primary">导出图片</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mindmap-main flex flex-1" style="overflow: auto;">
|
||||
<div class="w-1/3 h-full p-3 main-left flex flex-col" v-loading="loadingAnswer" style="overflow: auto;">
|
||||
<div class="flex flex-1" style="overflow: auto;">
|
||||
<v-md-editor v-model="resMarkdown" :mode="isEdit ? 'edit' : 'preview'" />
|
||||
</div>
|
||||
<div class="main-left-ipt">
|
||||
<el-input
|
||||
v-model="textVal"
|
||||
style="max-width: 600px"
|
||||
placeholder="请输入信息对内容进一步调整"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-icon size="20" style="cursor: pointer;" @click="sendMessage"><Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- <el-input style="float: left;" v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" /><el-button>发送</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-2/3 h-full main-right">
|
||||
<mindmap v-if="rootData" :timetravel="true" :drag="true" :zoom="true" :edit="true"
|
||||
:center-btn="true" :fit-btn="true" :ctm="true" :add-node-btn="true"
|
||||
v-model="rootData"></mindmap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { Position } from "@element-plus/icons-vue"
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import { modelList, completion, modelChat } from '@/api/mode/index.js'
|
||||
import { createChart, sendChart } from '@/api/ai/index'
|
||||
import { Transformer } from 'markmap-lib'
|
||||
import mindmap from 'vue3-mindmap'
|
||||
import html2canvas from 'html2canvas'
|
||||
import 'vue3-mindmap/dist/style.css'
|
||||
import {exportImg64File} from "@/utils/talkFile";
|
||||
import axios from 'axios'
|
||||
|
||||
const transformer = new Transformer()
|
||||
|
||||
// 当前节点
|
||||
const curNode = reactive({})
|
||||
|
||||
const textVal = ref(``)
|
||||
|
||||
const loadingAnswer = ref(false)
|
||||
|
||||
const scale = ref(5)
|
||||
|
||||
// const textVal = computed(() => {
|
||||
// return `生成${curNode.itemtitle}的教学思维导图，按照markdown的格式编写，只返回markdown的部分`
|
||||
// })
|
||||
|
||||
const curMode = ref(2)
|
||||
const modeOptions = ref([
|
||||
{
|
||||
label: '教学大模型',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '知识库模型',
|
||||
value: 2,
|
||||
}
|
||||
])
|
||||
|
||||
const isEdit = ref(false)
|
||||
|
||||
// AI 对话
|
||||
const resMarkdown = ref(``)
|
||||
const params = reactive({
|
||||
prompt: '',
|
||||
dataset_id: '',
|
||||
template: ''
|
||||
})
|
||||
const messages = ref([
|
||||
{
|
||||
role: 'user',
|
||||
content: ''
|
||||
}
|
||||
])
|
||||
const aiConversation = async () => {
|
||||
console.log(prompt.value)
|
||||
// return
|
||||
// params.prompt = prompt.value.replace(/{模板名称}/g, '')
|
||||
// 暂时用死数据
|
||||
// let str = '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
|
||||
// messages.value[0].content = str
|
||||
params.prompt = prompt.value
|
||||
// 教学大模型
|
||||
loadingAnswer.value = true
|
||||
if (curMode.value == 1) {
|
||||
const res = await sendChart({
|
||||
content: params.prompt,
|
||||
conversationId: conversation_id.value,
|
||||
stream: false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
// 知识库模型
|
||||
else {
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": params.prompt
|
||||
}
|
||||
]
|
||||
}
|
||||
const res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
console.log(res)
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async () => {
|
||||
loadingAnswer.value = true
|
||||
rootData.value = null
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role":"assiatant",
|
||||
"content": resMarkdown.value
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": `${textVal.value}，${prompt.value}`
|
||||
}
|
||||
]
|
||||
}
|
||||
let res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
|
||||
const text2mindmap =(data)=> {
|
||||
return axios({
|
||||
url: "https://ai.ysaix.com:7865/chat",
|
||||
method: "post",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "*/*",
|
||||
},
|
||||
data:data
|
||||
});
|
||||
}
|
||||
|
||||
// 查询prompt 替换
|
||||
const prompt = ref('')
|
||||
const getPrompt = async () => {
|
||||
const { rows } = await modelList({ model: 5 })
|
||||
let str = rows.find((item) => item.name.indexOf('思维导图') != -1).prompt
|
||||
|
||||
str = str.replace('{学段}', curNode.edustage)
|
||||
str = str.replace('{学科}', curNode.edusubject)
|
||||
let bookV = curNode.roottitle + '版'
|
||||
str = str.replace('{教材版本}', bookV)
|
||||
str = str.replace('{课程名称}', `《${curNode.itemtitle}》`)
|
||||
prompt.value = str
|
||||
}
|
||||
|
||||
// 千帆创建对话
|
||||
const conversation_id = ref('')
|
||||
const getChartId = async () => {
|
||||
const res = await createChart()
|
||||
conversation_id.value = res.data.conversation_id
|
||||
// ai 对话
|
||||
aiConversation()
|
||||
}
|
||||
|
||||
const rootData = ref(null)
|
||||
|
||||
const degure = (item) => {
|
||||
item.name = item.content.replace(/<[^>]*>/g, '');;
|
||||
if (item.children && item.children.length) {
|
||||
item.children.forEach(item2 => {
|
||||
degure(item2)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const outputImg = () => {
|
||||
let svg = window.document.getElementById('Mindmap_svg-wrapper_fgvb6')
|
||||
// let das = svg.querySelectorAll('.Mindmap_root_fgvb6')[0]
|
||||
html2canvas(svg,{
|
||||
scale: scale.value
|
||||
}).then((canvas) => {
|
||||
const dataUrl = canvas.toDataURL()
|
||||
exportImg64File(dataUrl, `${curNode.itemtitle}思维导图`)
|
||||
})
|
||||
// mm.value.fit()
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
let data = sessionStore.get('subject.curNode')
|
||||
Object.assign(curNode, data)
|
||||
|
||||
// 获取提示词
|
||||
getPrompt()
|
||||
// 获取百度千帆会话ID
|
||||
getChartId()
|
||||
|
||||
})
|
||||
// 监听 initValue 的变化
|
||||
watch(() => resMarkdown.value, () => {
|
||||
const { root } = transformer.transform(resMarkdown.value)
|
||||
degure(root)
|
||||
rootData.value = [root]
|
||||
console.log(rootData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mindmap-header {
|
||||
background: #fff;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.main-left {
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
.main-left-ipt {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.main-right{
|
||||
border: 1px solid #ccc;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<!--
|
||||
initData参数：
|
||||
{
|
||||
prompt: 思维导图prompt数据,
|
||||
title: 标题
|
||||
url: 请求地址
|
||||
reloadData: 初始化数据，如果为空则默认去获取
|
||||
}
|
||||
|
||||
回调函数
|
||||
emits: {
|
||||
exportImg: 导出图片按钮回调
|
||||
createMindMap: 创建思维导图回调,初始化生成
|
||||
reloadMindMap: 重新加载思维导图回调，对话重新生成
|
||||
}
|
||||
-->
|
||||
<template>
|
||||
<div class="page-mindmap flex flex-col h-full">
|
||||
<div class="mindmap-header flex items-center justify-between pl-5">
|
||||
<div class="flex w-1/2 items-center justify-between">
|
||||
<div>
|
||||
<b>AI思维导图</b> <span class="ml-5">《{{ props.title }}》</span>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="isEdit">
|
||||
<el-button class="mr-3" @click="isEdit = false">取消</el-button>
|
||||
<el-button type="success" class="mr-3" @click="isEdit = false">保存</el-button>
|
||||
</template>
|
||||
<!-- <el-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
导出清晰度：<el-input-number v-model="scale" :min="1" :max="10" />数字越大越清晰，但图片大小会越大
|
||||
<el-button @click="outputImg" type="primary">导出图片</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mindmap-main flex flex-1" style="overflow: auto;">
|
||||
<div class="w-1/3 h-full p-3 main-left flex flex-col" v-loading="loadingAnswer" style="overflow: auto;">
|
||||
<div class="flex flex-1" style="overflow: auto;">
|
||||
<v-md-editor v-model="resMarkdown" :mode="isEdit ? 'edit' : 'preview'" />
|
||||
</div>
|
||||
<div class="main-left-ipt">
|
||||
<el-input
|
||||
v-model="textVal"
|
||||
style="max-width: 600px"
|
||||
placeholder="请输入信息对内容进一步调整"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-icon size="20" style="cursor: pointer;" @click="reConversation"><Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- <el-input style="float: left;" v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" /><el-button>发送</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-2/3 h-full main-right">
|
||||
<mindmap v-if="rootData" :timetravel="true" :drag="true" :zoom="true" :edit="true"
|
||||
:center-btn="true" :fit-btn="true" :ctm="true" :add-node-btn="true"
|
||||
v-model="rootData"></mindmap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'aiMindMap'
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch, defineExpose } from 'vue'
|
||||
import { Position } from "@element-plus/icons-vue"
|
||||
import { Transformer } from 'markmap-lib'
|
||||
import mindmap from 'vue3-mindmap'
|
||||
import html2canvas from 'html2canvas'
|
||||
import 'vue3-mindmap/dist/style.css'
|
||||
import axios from 'axios'
|
||||
|
||||
const transformer = new Transformer()
|
||||
const emits = defineEmits(['exportImg', 'createMindMap', 'reloadMindMap'])
|
||||
const props = reactive({
|
||||
prompt: '',
|
||||
url: '',
|
||||
title: '',
|
||||
reloadData: ''
|
||||
})
|
||||
|
||||
const textVal = ref(``)
|
||||
|
||||
const loadingAnswer = ref(false)
|
||||
|
||||
const scale = ref(5)
|
||||
|
||||
const modeOptions = ref([
|
||||
{
|
||||
label: '教学大模型',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '知识库模型',
|
||||
value: 2,
|
||||
}
|
||||
])
|
||||
|
||||
const isEdit = ref(false)
|
||||
|
||||
// AI 对话
|
||||
const resMarkdown = ref(``)
|
||||
const params = reactive({
|
||||
prompt: '',
|
||||
dataset_id: '',
|
||||
template: ''
|
||||
})
|
||||
|
||||
const messages = ref([
|
||||
{
|
||||
role: 'user',
|
||||
content: ''
|
||||
}
|
||||
])
|
||||
|
||||
const aiConversation = async () => {
|
||||
params.prompt = props.prompt
|
||||
loadingAnswer.value = true
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": params.prompt
|
||||
}
|
||||
]
|
||||
}
|
||||
const res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
emits('createMindMap', resMarkdown.value, res)
|
||||
}
|
||||
|
||||
const reConversation = async () => {
|
||||
loadingAnswer.value = true
|
||||
rootData.value = null
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role":"assiatant",
|
||||
"content": resMarkdown.value
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": `${textVal.value}，${props.prompt}`
|
||||
}
|
||||
]
|
||||
}
|
||||
let res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
emits('reloadMindMap', resMarkdown.value, res)
|
||||
}
|
||||
|
||||
const text2mindmap =(data)=> {
|
||||
return axios({
|
||||
url: props.url,
|
||||
method: "post",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "*/*",
|
||||
},
|
||||
data:data
|
||||
});
|
||||
}
|
||||
|
||||
const rootData = ref(null)
|
||||
|
||||
const degure = (item) => {
|
||||
item.name = item.content.replace(/<[^>]*>/g, '');;
|
||||
if (item.children && item.children.length) {
|
||||
item.children.forEach(item2 => {
|
||||
degure(item2)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const outputImg = () => {
|
||||
let svg = window.document.getElementById('Mindmap_svg-wrapper_fgvb6')
|
||||
html2canvas(svg,{
|
||||
scale: scale.value
|
||||
}).then((canvas) => {
|
||||
const dataUrl = canvas.toDataURL()
|
||||
emits('exportImg', dataUrl)
|
||||
})
|
||||
}
|
||||
|
||||
const initData = (datas) => {
|
||||
Object.assign(props, datas)
|
||||
// 获取提示词
|
||||
if (props.reloadData) {
|
||||
resMarkdown.value = props.reloadData
|
||||
}else {
|
||||
aiConversation()
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
initData,
|
||||
outputImg,
|
||||
aiConversation,
|
||||
reConversation
|
||||
})
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// initData()
|
||||
})
|
||||
|
||||
// 监听 initValue 的变化
|
||||
watch(() => resMarkdown.value, () => {
|
||||
const { root } = transformer.transform(resMarkdown.value)
|
||||
degure(root)
|
||||
rootData.value = [root]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mindmap-header {
|
||||
background: #fff;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.main-left {
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
.main-left-ipt {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.main-right{
|
||||
border: 1px solid #ccc;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -288,14 +288,17 @@ const createAIPPT = () => {
|
|||
})
|
||||
})
|
||||
}
|
||||
|
||||
const isPgDialogClose = ref(false) // 弹窗-进度条-是否关闭
|
||||
const pgDialog = ref({ // 弹窗-进度条
|
||||
visible: false,
|
||||
title: 'PPT解析中...',
|
||||
width: 300,
|
||||
showClose: false,
|
||||
showClose: true,
|
||||
draggable: true,
|
||||
beforeClose: done => {}, // 阻止-弹窗事件
|
||||
beforeClose: done => { // 弹窗关闭前回调
|
||||
isPgDialogClose.value = true
|
||||
done()
|
||||
},
|
||||
pg: { // 进度条-参数
|
||||
percentage: 0, // 百分比
|
||||
color: [
|
||||
|
|
@ -316,20 +319,26 @@ const openFilePicker = () =>{
|
|||
|
||||
const handleFileChange = ()=> {
|
||||
const file = event.target.files[0];
|
||||
fileInput.value.value = ''
|
||||
if (file) {
|
||||
console.log(file);
|
||||
createAIPPTByFile(file)
|
||||
}
|
||||
}
|
||||
// ppt文件转PPT线上数据
|
||||
const createAIPPTByFile = async (file)=> {
|
||||
isPgDialogClose.value = false // 默认没有关闭
|
||||
pgDialog.value.visible = true
|
||||
pgDialog.value.pg.percentage = 0
|
||||
const closePgDialog = () => {
|
||||
pgDialog.value.pg.percentage = 0
|
||||
pgDialog.value.visible = false
|
||||
}
|
||||
pptMedia = {} // 清空媒体数据
|
||||
const resPptJson = await PPTXFileToJson(file).catch(() => {
|
||||
ElMessageBox.alert('PPT文件转换失败！请点击素材右侧...下载文件后打开另存为PPTX文件格式再进行导入！')
|
||||
pgDialog.value.visible = false
|
||||
})
|
||||
if(isPgDialogClose.value) return closePgDialog() // 弹窗关闭了,终止进行
|
||||
const { def, slides, ...content } = resPptJson
|
||||
// 生成缩略图
|
||||
const thumbnails = await slidesToImg(slides, content.width)
|
||||
|
|
@ -337,13 +346,13 @@ const createAIPPTByFile = async (file)=> {
|
|||
let completed = 0
|
||||
const total = slides.length
|
||||
for( let o of slides ) {
|
||||
if(isPgDialogClose.value) return closePgDialog() // 弹窗关闭了,终止进行
|
||||
completed++
|
||||
await toRousrceUrl(o)
|
||||
// 设置进度条
|
||||
pgDialog.value.pg.percentage = Math.floor(completed / total * 100)
|
||||
}
|
||||
pgDialog.value.pg.percentage = 0
|
||||
pgDialog.value.visible = false
|
||||
closePgDialog() // 关闭进度条弹窗
|
||||
listEntpcourse({
|
||||
evalid: currentNode.value.id,
|
||||
edituserid: userStore.userId,
|
||||
|
|
@ -429,17 +438,23 @@ const toRousrceUrl = async (o) => {
|
|||
if (!!o.src) { // 如果有src就转换
|
||||
const isBase64 = /^data:image\/(\w+);base64,/.test(o.src)
|
||||
const isBlobUrl = /^blob:/.test(o.src)
|
||||
let onLineUrl = '' // 线上地址
|
||||
if (!!o.zipPath) onLineUrl = pptMedia[o.zipPath] || '' // 是否已上传过
|
||||
let onLineUrl = '', typeExt = '' // 线上地址|文件后缀
|
||||
if (!!o.zipPath) {
|
||||
onLineUrl = pptMedia[o.zipPath] || '' // 是否已上传过
|
||||
typeExt = o.zipPath.split('.').pop()
|
||||
}
|
||||
if (onLineUrl) o.src = onLineUrl // 已存在线上地址直接赋值
|
||||
else { // 不存在重新上传
|
||||
if (isBase64) { // 相同资源处理
|
||||
const url = await getOnlineFileUrl(o.src)
|
||||
if(!typeExt) typeExt = 'png'
|
||||
const url = await getOnlineFileUrl(o.src, typeExt)
|
||||
url &&(o.src = url)
|
||||
url && o.zipPath && (pptMedia[o.zipPath] = url) // 缓存
|
||||
} else if (isBlobUrl) { // 视频和音频
|
||||
if(!typeExt) typeExt = o.type=='video'?'mp4':'mp3'
|
||||
const res = await fetch(o.src)
|
||||
const blob = await res.blob()
|
||||
const url = await getOnlineFileUrl(blob, o.type=='video'?'mp4':'mp3')
|
||||
const url = await getOnlineFileUrl(blob, typeExt)
|
||||
URL.revokeObjectURL(o.src) // 释放内存
|
||||
url &&(o.src = url)
|
||||
url && o.zipPath && (pptMedia[o.zipPath] = url) // 缓存
|
||||
|
|
@ -564,13 +579,38 @@ const changeClass = async (type, row, other) => {
|
|||
switch(type) {
|
||||
case 'click': { // 点击-打开课件-aippt
|
||||
if (row.fileFlag === 'aippt' && !!row.fileId) {
|
||||
const id = Number(row.fileId)
|
||||
const openFileIds = sessionStore.get('curr.openFileIds')||[] // 已打开课件列表id
|
||||
const isHasOpen = openFileIds.includes(id) // 是否已打开
|
||||
if (isHasOpen) return ElMessage.warning('该课件已打开！')
|
||||
const res = await getEntpcoursefile(row.fileId)
|
||||
if (res && res.code === 200) {
|
||||
openFileIds.push(id) // 课堂资源缓存-允许打开多个
|
||||
sessionStore.set('curr.openFileIds', openFileIds) // 更新窗口课件列表id
|
||||
sessionStore.set('curr.resource', res.data) // 缓存当前资源信息
|
||||
sessionStore.set('curr.smarttalk', row) // 缓存当前文件smarttalk
|
||||
createWindow('open-win', {
|
||||
url: '/pptist', // 窗口关闭时，清除缓存
|
||||
close: () => {
|
||||
success: (win) => { // 窗口打开成功
|
||||
const map = sessionStore.get('curr.winMap') || {}
|
||||
map[win.id] = id // 将当前窗口id和课件id进行关联
|
||||
sessionStore.set('curr.winMap', map)
|
||||
},
|
||||
close: (win) => {
|
||||
const openFileIds = sessionStore.get('curr.openFileIds')||[] // 已打开课件列表id
|
||||
const map = sessionStore.get('curr.winMap') || {}
|
||||
const resourceId = map[win.id] // 当前窗口关联的课件id
|
||||
if (resourceId){
|
||||
const ind = openFileIds.findIndex(id => id == resourceId) // 是否存在打开的课件
|
||||
if (ind >= 0) { // 存在打开的课件
|
||||
openFileIds.splice(ind, 1) // 删除关联课件
|
||||
if (openFileIds.length) sessionStore.set('curr.openFileIds', openFileIds) // 更新窗口课件列表
|
||||
else sessionStore.delete('curr.openFileIds') // 清除缓存
|
||||
delete map[win.id] // 删除 当前窗口课件关联
|
||||
if(Object.keys(map).length) sessionStore.set('curr.winMap', map) // 更新窗口课件关联
|
||||
else sessionStore.delete('curr.winMap') // 清除缓存
|
||||
}
|
||||
}
|
||||
sessionStore.delete('curr.resource') // 清除缓存
|
||||
sessionStore.delete('curr.smarttalk') // 清除缓存
|
||||
getSmarttalkPage({
|
||||
|
|
|
|||
|
|
@ -274,13 +274,17 @@ export default {
|
|||
treelogRef:null,
|
||||
// 获取当前章节对应的课程信息 Entpcourse
|
||||
entp: null,
|
||||
isPgDialogClose: false, // 关闭进度条弹窗
|
||||
pgDialog: { // 弹窗-进度条
|
||||
visible: false,
|
||||
title: 'PPT解析中...',
|
||||
width: 300,
|
||||
showClose: false,
|
||||
showClose: true,
|
||||
draggable: true,
|
||||
beforeClose: done => {}, // 阻止-弹窗事件
|
||||
beforeClose: done => { // 弹窗关闭前回调
|
||||
this.isPgDialogClose = true
|
||||
done()
|
||||
},
|
||||
pg: { // 进度条-参数
|
||||
percentage: 0, // 百分比
|
||||
color: [
|
||||
|
|
@ -453,6 +457,9 @@ export default {
|
|||
}
|
||||
case 'click': { // 点击-打开课件-aippt
|
||||
if (row.fileFlag === 'aippt' && !!row.fileId) {
|
||||
const openFileIds = sessionStore.get('curr.openFileIds')||[] // 已打开课件列表id
|
||||
const isHasOpen = openFileIds.includes(Number(row.fileId)) // 是否已打开
|
||||
if (isHasOpen) return ElMessage.warning('该课件已打开！')
|
||||
sessionStore.delete('curr.classcourse') // 清除上课相关信息
|
||||
const res = await getEntpcoursefile(row.fileId)
|
||||
if (res && res.code === 200) {
|
||||
|
|
@ -496,12 +503,37 @@ export default {
|
|||
* @param {object} currData 当前数据 type: edit/class 备课信息 | 课堂信息
|
||||
*/
|
||||
openPublicScreen(type, resource, currData) {
|
||||
const openFileIds = sessionStore.get('curr.openFileIds')||[]
|
||||
const isNoOpen = !openFileIds.includes(Number(resource.id)) // 是否不存在
|
||||
if (isNoOpen) {
|
||||
openFileIds.push(resource.id) // 课堂资源缓存-允许打开多个
|
||||
sessionStore.set('curr.openFileIds', openFileIds) // 更新窗口课件列表id
|
||||
}
|
||||
sessionStore.set('curr.resource', resource) // 缓存当前资源信息
|
||||
if (type=='edit') sessionStore.set('curr.smarttalk', currData) // 缓存当前文件smarttalk
|
||||
else sessionStore.set('curr.classcourse', currData) // 缓存当前当前上课
|
||||
createWindow('open-win', {
|
||||
url: '/pptist', // 窗口关闭时，清除缓存
|
||||
close: () => {
|
||||
success: (win) => { // 窗口打开成功
|
||||
const map = sessionStore.get('curr.winMap') || {}
|
||||
map[win.id] = resource.id // 将当前窗口id和课件id进行关联
|
||||
sessionStore.set('curr.winMap', map)
|
||||
},
|
||||
close: (win) => {
|
||||
const openFileIds = sessionStore.get('curr.openFileIds')||[] // 课件列表
|
||||
const map = sessionStore.get('curr.winMap') || {}
|
||||
const resourceId = map[win.id] // 当前窗口关联的课件id
|
||||
if (resourceId){
|
||||
const ind = openFileIds.findIndex(id => id == resourceId) // 是否存在打开的课件
|
||||
if (ind >= 0) { // 存在打开的课件
|
||||
openFileIds.splice(ind, 1) // 删除关联课件
|
||||
if (openFileIds.length) sessionStore.set('curr.openFileIds', openFileIds) // 更新窗口课件列表
|
||||
else sessionStore.delete('curr.openFileIds') // 清除缓存
|
||||
delete map[win.id] // 删除 当前窗口课件关联
|
||||
if(Object.keys(map).length) sessionStore.set('curr.winMap', map) // 更新窗口课件关联
|
||||
else sessionStore.delete('curr.winMap') // 清除缓存
|
||||
}
|
||||
}
|
||||
sessionStore.delete('curr.resource') // 清除缓存
|
||||
if (type=='edit') {
|
||||
sessionStore.delete('curr.smarttalk') // 清除缓存
|
||||
|
|
@ -584,6 +616,7 @@ export default {
|
|||
},
|
||||
handleFileChange(){
|
||||
const file = event.target.files[0];
|
||||
this.$refs.fileInput.value = ''
|
||||
if (file) {
|
||||
console.log(file);
|
||||
console.log('文件名:', file.name);
|
||||
|
|
@ -620,17 +653,23 @@ export default {
|
|||
if (!!o.src) { // 如果有src就转换
|
||||
const isBase64 = /^data:image\/(\w+);base64,/.test(o.src)
|
||||
const isBlobUrl = /^blob:/.test(o.src)
|
||||
let onLineUrl = '' // 线上地址
|
||||
if (!!o.zipPath) onLineUrl = this.pptMedia[o.zipPath] || '' // 是否已上传过
|
||||
let onLineUrl = '', typeExt = '' // 线上地址|文件后缀
|
||||
if (!!o.zipPath) {
|
||||
onLineUrl = this.pptMedia[o.zipPath] || '' // 是否已上传过
|
||||
typeExt = o.zipPath.split('.').pop()
|
||||
}
|
||||
if (onLineUrl) o.src = onLineUrl // 已存在线上地址直接赋值
|
||||
else { // 不存在重新上传
|
||||
if (isBase64) { // 相同资源处理
|
||||
const url = await this.getOnlineFileUrl(o.src)
|
||||
if(!typeExt) typeExt = 'png'
|
||||
const url = await this.getOnlineFileUrl(o.src, typeExt)
|
||||
url &&(o.src = url)
|
||||
url && o.zipPath && (this.pptMedia[o.zipPath] = url) // 缓存
|
||||
} else if (isBlobUrl) { // 视频和音频
|
||||
if(!typeExt) typeExt = o.type=='video'?'mp4':'mp3'
|
||||
const res = await fetch(o.src)
|
||||
const blob = await res.blob()
|
||||
const url = await this.getOnlineFileUrl(blob, o.type=='video'?'mp4':'mp3')
|
||||
const url = await this.getOnlineFileUrl(blob, typeExt)
|
||||
URL.revokeObjectURL(o.src) // 释放内存
|
||||
url &&(o.src = url)
|
||||
url && o.zipPath && (this.pptMedia[o.zipPath] = url) // 缓存
|
||||
|
|
@ -659,14 +698,20 @@ export default {
|
|||
}
|
||||
},
|
||||
async createAIPPTByFile(file,fileShowName) {
|
||||
this.isPgDialogClose = false // 默认不关闭
|
||||
this.pgDialog.visible = true
|
||||
this.pgDialog.pg.percentage = 0
|
||||
const closePgDialog = () => {
|
||||
this.pgDialog.pg.percentage = 0
|
||||
this.pgDialog.visible = false
|
||||
}
|
||||
this.pptMedia = {} // 清空媒体数据
|
||||
const resPptJson = await PPTXFileToJson(file).catch(() => {
|
||||
ElMessageBox.alert('PPT文件转换失败！请点击素材右侧...下载文件后打开另存为PPTX文件格式再进行导入！')
|
||||
this.pgDialog.visible = false
|
||||
})
|
||||
if (!resPptJson) return
|
||||
if(this.isPgDialogClose) return closePgDialog() // 弹窗关闭了,终止进行
|
||||
const { def, slides, ...content } = resPptJson
|
||||
// 生成缩略图
|
||||
const thumbnails = await slidesToImg(slides, content.width)
|
||||
|
|
@ -674,13 +719,13 @@ export default {
|
|||
let completed = 0
|
||||
const total = slides.length
|
||||
for( let o of slides ) {
|
||||
if(this.isPgDialogClose) return closePgDialog() // 弹窗关闭了,终止进行
|
||||
completed++
|
||||
await this.toRousrceUrl(o)
|
||||
// 设置进度条
|
||||
this.pgDialog.pg.percentage = Math.floor(completed / total * 100)
|
||||
}
|
||||
this.pgDialog.pg.percentage = 0
|
||||
this.pgDialog.visible = false
|
||||
closePgDialog() // 关闭进度条弹窗
|
||||
listEntpcourse({
|
||||
evalid: this.currentNode.id,
|
||||
edituserid: this.userStore.userId,
|
||||
|
|
|
|||
Loading…
Reference in New Issue