Merge branch 'main' into zouyf_dev

This commit is contained in:
“zouyf” 2024-12-09 13:46:32 +08:00
commit 728ce16c8b
17 changed files with 416 additions and 46 deletions

5
env.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
declare module '*.vue' {
import { ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}

View File

@ -81,5 +81,8 @@ const initLoad: Function = () => {
<style lang="scss">
#app {
height: 100%;
svg, canvas, img, audio, video, iframe {
display: unset;
}
}
</style>

View File

@ -125,6 +125,8 @@ import {
User,
Switch,
More,
Material,
AddPicture
} from '@icon-park/vue-next'
export interface Icons {
@ -255,6 +257,8 @@ export const icons: Icons = {
IconUser: User,
IconSwitch: Switch,
IconMore: More,
IconMaterial: Material,
IconAddPicture: AddPicture
}
export default {

View File

@ -0,0 +1,172 @@
<template>
<header class="flex material-header">
<span>选择素材</span>
<i class="iconfont icon-guanbi" @click="onClose"></i>
</header>
<div class="flex material-list" v-loading="loading">
<div class="flex material-item" v-for="item in list" :key="item.id" >
<div class="flex">
<el-image :src="fileUrl(item)" class="img" />
<el-text truncated>{{ item.fileShowName }}</el-text>
</div>
<el-button type="primary" @click="onInsert(item)">插入</el-button>
</div>
<el-empty description="暂无素材" v-if="!list.length" />
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { sessionStore } from '@/utils/store'
import { getSmarttalkPage } from '@/api/file'
import { getFileSuffix, urlToBase64 } from '@/utils/ruoyi.js'
const emit = defineEmits(['insertMaterial', 'close'])
const curNode = reactive({})
let params = {
textbookId: '',
levelFirstId: '',
levelSecondId: null,
fileSource: '个人',
fileRoot: '备课',
orderByColumn: 'uploadTime',
isAsc: 'desc',
pageSize: 500
}
const suffixAry = [ 'jpeg','jpg','png','gif','mp3','mp4','avi','mov']
const videoSuffix = ['mp3','mp4','avi','mov']
const list = ref([])
const loading = ref(false)
const init = () => {
loading.value = true
getSmarttalkPage(params).then(res => {
loading.value = false
if(res.rows && res.rows.length){
//
list.value = res.rows.filter( item => suffixAry.indexOf(getFileSuffix(item.fileShowName)) != -1)
}
})
}
const fileUrl = computed(() => (item) =>{
if(videoSuffix.indexOf(getFileSuffix(item.fileShowName)) != -1){
return item.coverPic
}
else{
return item.fileFullPath
}
})
//
const onInsert = async (item) =>{
if(videoSuffix.indexOf(getFileSuffix(item.fileShowName)) != -1){
emit('insertMaterial',{ type: 'video', data: item.fileFullPath })
}
else{
const base64 = await urlToBase64(item.fileFullPath)
emit('insertMaterial',{ type: 'img', data: base64 })
}
}
const GetUrlParameters = (parameters) => {
let resData = "";
let url = document.location.toString();
let arrUrl = url.split("?");
//
if (arrUrl.length > 1) {
//
let parametersArr = arrUrl[1].split("&");
//
for (let i = 0; i <= parametersArr.length; i++) {
if (parametersArr[i]) {
//
let parameterStr = parametersArr[i].split("=");
if (parameters == parameterStr[0]) {
resData = parameterStr[1];
break;
}
}
}
}
return resData;
}
const proxyToBase64 = (url)=> {
const dourl = GetUrlParameters(url)
console.log(dourl,'dourl')
return
axios({
url: "/api/logo.png",
method: "get",
responseType: "blob",
}).then((res) => {
const reader = new FileReader();
reader.readAsDataURL(res.data);
reader.onload = () => {
console.log(reader.result);
};
});
}
//
const onClose = () =>{
emit('close')
}
onMounted(() => {
let data = sessionStore.get('subject.curNode')
Object.assign(curNode, data);
params.textbookId = curNode.rootid
if (curNode.parentNode) {
params.levelFirstId = curNode.parentNode.id
params.levelSecondId = curNode.id
}
else {
params.levelFirstId = curNode.id
}
init()
})
</script>
<style lang="scss" scoped>
.material-header {
font-size: 17px;
font-weight: bold;
margin-bottom: 20px;
justify-content: space-between;
align-items: center;
.icon-guanbi{
font-size: 20px;
cursor: pointer;
}
}
.material-list{
flex-direction: column;
min-height: 150px;
max-height: 500px;
overflow-y: auto
}
.material-item {
align-items: center;
margin-bottom: 10px;
font-size: 14px;
justify-content: space-between;
.img{
width: 100px;
height: 100px;
margin-right: 20px;
}
}
</style>

View File

@ -82,6 +82,8 @@
<IconVideoTwo class="handler-item" v-tooltip="'插入音视频'" />
</Popover>
<IconPreviewOpen class="handler-item" v-tooltip="'插入试题'" @click="classWorkTaskVisible = true" />
<IconMaterial class="handler-item" v-tooltip="'插入素材'" @click="materiaVisible = true"/>
<IconAddPicture class="handler-item" v-tooltip="'文生图'" @click="imgVisible = true" />
</div>
<div class="right-handler">
@ -120,7 +122,18 @@
@update="data => { onhtml2canvas(data); classWorkTaskVisible = false }"
/>
</el-dialog>
<!--插入素材-->
<Modal
v-model:visible="materiaVisible"
:width="880">
<MaterialDialog @close="materiaVisible = false" @insertMaterial="insertMaterial"/>
</Modal>
<!--文生图-->
<Modal
v-model:visible="imgVisible"
:width="1300">
<TextCreateImg hasPPt @insertImg="(url: string) => { createImageElement(url); imgVisible = false }" />
</Modal>
</div>
</template>
@ -147,6 +160,8 @@ import Divider from '../../../components/Divider.vue'
import Popover from '../../../components/Popover.vue'
import PopoverMenuItem from '../../../components/PopoverMenuItem.vue'
import QuestToPPTist from '@/views/classTask/newClassTaskAssign/questToPPTist/index.vue'
import MaterialDialog from './MaterialDialog.vue'
import TextCreateImg from '@/components/ai-kolors/index.vue'
const mainStore = useMainStore()
const { creatingElement, creatingCustomShape, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
@ -198,6 +213,7 @@ const classWorkTaskVisible = ref(false)
const textTypeSelectVisible = ref(false)
const shapeMenuVisible = ref(false)
const moreVisible = ref(false)
const materiaVisible = ref(false)
//
const drawText = (vertical = false) => {
@ -244,6 +260,25 @@ const toggleSraechPanel = () => {
const toggleNotesPanel = () => {
mainStore.setNotesPanelState(!showNotesPanel.value)
}
//
interface MaterialParams {
type: string,
data: string
}
const insertMaterial = (item: MaterialParams) =>{
const { type, data } = item
if(type == 'video'){
createVideoElement(data)
}
else{
createImageElement(data)
}
materiaVisible.value = false
}
//
const imgVisible = ref(false)
</script>
<style lang="scss" scoped>

View File

@ -154,15 +154,13 @@ const topImgWrapperPositionStyle = computed(() => {
const topImgPositionStyle = computed(() => {
const bottomWidth = imgPosition.value.width
const bottomHeight = imgPosition.value.height
console.log("底层图片位置大小(遮罩区域图片)", imgPosition.value)
const { top, left, width, height } = topImgWrapperPosition.value
console.log("width", ((bottomWidth / width * 100) - (left * (100 / width))) + '%')
console.log("height", bottomHeight / height * 100 + '%')
return {
left: -left * (100 / width) + '%',
top: -top * (100 / height) + '%',
width: ((bottomWidth / width * 100) - (left * (100 / width))) + '%' ,
width: bottomWidth / width * 100 + '%' ,
height: bottomHeight / height * 100 + '%',
}
})
@ -540,6 +538,7 @@ const edgePoints = [
img {
position: absolute;
max-width: none !important;
}
}
}

View File

@ -183,6 +183,7 @@ const handleClip = (data: ImageClipedEmitData | null) => {
}
img {
position: absolute;
max-width: none !important; //
}
}
.color-mask {

View File

@ -144,8 +144,14 @@ import { convertTextToPicture, getQueue, getPromptId, getPicture, chattoprompt,
import CryptoJS from 'crypto-js'
import { useRoute } from 'vue-router'
export default {
props: {
hasPPt: {
type: Boolean,
default: false
}
},
data() {
return {
form: {
ratio: "512",
@ -384,7 +390,7 @@ export default {
urls.push(url0)
buttonState.push({
disabled: false,
text: "插入本课素材资源库",
text: this.hasPPt ? '插入' : "插入本课素材资源库",
})
}
this.skeletonNumber = 0
@ -476,6 +482,10 @@ export default {
//
async saveImage(resultIndex, index, url, resultItem) {
if(this.hasPPt){
this.$emit('insertImg', url)
return
}
this.buttonStates[resultIndex][index].disabled = true;
this.buttonStates[resultIndex][index].text = "正在保存...";
const numberIndex = url.indexOf('filename=');

View File

@ -35,7 +35,7 @@ const getFileTypeIcon = () => {
txt: 'icon-txt',
rar: 'icon-rar',
apt: 'icon-A',
aptist: 'icon-A',
aippt: 'icon-A',
}
if (iconObj[name]) {
return '#' + iconObj[name]

View File

@ -87,6 +87,12 @@ const headerMenus = [
icon: 'icon-gongzuotai',
path: '/desktop'
},
{
name: '教学实践',
id: 4,
icon: 'icon-jiaoxueshijian',
path: '/prepare'
},
{
name: '资源中心',
id: 3,

View File

@ -258,16 +258,45 @@ export const getFileName = (filename) => {
return filename.replace(/\.[^/.]+$/, "");
}
// 清除当前选中的教材 章节 相关信息
export const clearBookInfo = () =>{
//当前选中的教材
localStorage.removeItem('curBook')
// 当前选中的节点
localStorage.removeItem('curNode')
// 所有章节单元数据
localStorage.removeItem('unitList')
// 所有教材数据
localStorage.removeItem('subjectList')
// 展开的节点
localStorage.removeItem('defaultExpandedKeys')
/**
* 根据图片的url转换对应的base64值
* @param { String } url http://xxxx/xxx.png
* @returns base64取值
*/
export const urlToBase64 = (url) => {
return new Promise((resolve, reject) => {
if (!url) {
reject('请传入url内容')
}
if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) {
// 图片地址
let image = new Image()
// 设置跨域问题
image.setAttribute('crossOrigin', 'anonymous')
// 图片地址
image.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错;
image.onload = () => {
let canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = image.width
canvas.height = image.height
ctx.drawImage(image, 0, 0, image.width, image.height)
// 获取图片后缀
const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase()
// 转base64
const dataUrl = canvas.toDataURL(`image/${ext}`)
resolve(dataUrl || '')
canvas = null // 清除canvas元素
image = null // 清除img元素
}
} else {
// 非图片地址
reject('非(png/jpe?g/gif/svg等)图片地址');
}
})
}

View File

@ -10,7 +10,7 @@
<el-button type="primary" @click="onchange('/model/newClassTaskAssign')">作业管理</el-button>
<el-button type="success" @click="onchange('/model/teaching')">教材研读</el-button>
<el-button type="info" @click="onchange('/model/design')">教学框架设计</el-button>
<el-button type="success" @click="openPPTist">打开PPTist</el-button>
<!-- <el-button type="success" @click="openPPTist">打开PPTist</el-button>-->
<el-button type="info" @click="onchange('/model/examination')">考试分析</el-button>
<el-button type="primary" v-menus="dt.menus">测试</el-button>
<el-button type="success" @click="onchange('/model/aiKolors')">文生图片</el-button>
@ -230,7 +230,7 @@ const HTTP_SERVER_API = (type, params = {}) => {
ppttype: 'file',
title: enpt.coursetitle,
fileurl: '',
filetype: 'aptist',
filetype: 'aippt',
datacontent: '',
filekey: '',
filetag: '',
@ -287,7 +287,7 @@ const handleAll = async(type, row) =>{
break;
}
case 'open': { // -pptist
if (row.filetype != 'aptist') return msgUtils.msgWarning('暂不支持该类型文件操作!')
if (row.filetype != 'aippt') return msgUtils.msgWarning('暂不支持该类型文件操作!')
sessionStore.set('curr.resource', row) //
createWindow('open-win', {
url: '/pptist', //
@ -312,7 +312,7 @@ const handleAll = async(type, row) =>{
// icons type svg
const getIcon = (o, type) => {
let icon = typeof o == 'string' ? o : o?.filetype
if (['aptist'].includes(o?.filetype)) icon = 'pptx'
if (['aippt'].includes(o?.filetype)) icon = 'pptx'
if (!!type) { // icon
switch(type) {
case 'svg': // svg

View File

@ -158,7 +158,7 @@ const outlineCreatePPT = () => {
const checkProgress = () => {
getProgressV2(res.sid).then(response => {
percentage.value = Math.round(response?.donePages/response?.totalPages)*100;
percentage.value = Math.round(response?.donePages*100/response?.totalPages);
if (response.pptStatus === "done") {
emit('addSuccess',{...res,url:response.pptUrl})
ElMessage.success("生成成功");
@ -267,7 +267,6 @@ function webSocketSend(ws, data) {
function result1(resultData) {
let jsonData = JSON.parse(resultData);
console.log(jsonData)
outputText.value += jsonData.payload.choices.text[0].content;
const div = document.querySelector('.paragraphs');
if (div) {

View File

@ -262,7 +262,7 @@ const createClasscourse = async () => {
// getClasscourseList('update') //
ElMessage.success('创建课程-成功')
// -pptList
if (myClassActive.value.filetype == 'aptist') {
if (myClassActive.value.filetype == 'aippt') {
const msgEl = ElMessage.warning({message:'正在打开公屏,请稍后...',duration: 0})
setTimeout(() => {
msgEl.close()

View File

@ -341,7 +341,7 @@ export default {
cookieData: { ...configObj.data }
})
return
} else if(items.fileFlag === 'aptist') { // aptist PPT-List
} else if(items.fileFlag === 'aippt') { // aippt PPT-List
return this.$emit('change', 'click', items)
}
if (!items||!items.fileSuffix) return;

View File

@ -2,8 +2,20 @@
<div v-loading="isLoading" class="page-resource flex">
<ChooseTextbook @node-click="nodeClick" />
<div class="page-center-wrap">
<el-dropdown class="prepare-center-dropdown">
<el-button type="primary">
新建<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="createAptFile">新建文枢课件</el-dropdown-item>
<el-dropdown-item>AI一键生成</el-dropdown-item>
<el-dropdown-item>导入PPT</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-tabs v-model="activeAptTab" style="height: 100%;">
<el-tab-pane label="教学课件" name="教学课件" class="prepare-center-jxkj">
<el-tab-pane label="文枢课件" name="教学课件" class="prepare-center-jxkj">
<div class="prepare-center-header">
<div class="center-create-btn" style="background-color: rgb(64,158,255)" @click="createAptFile">
<div class="create-btn-title"><el-icon><Plus /></el-icon><label>APT</label></div>
@ -145,7 +157,7 @@
<!-- <button @click="test">test</button> -->
</template>
<script setup>
import { Check,Plus } from '@element-plus/icons-vue'
import {Check, Plus, Position} from '@element-plus/icons-vue'
import Reserv from '@/views/prepare/container/reserv.vue'
import { ArrowDown } from '@element-plus/icons-vue'
import PptDialog from '@/views/prepare/container/ppt-dialog.vue'
@ -253,11 +265,11 @@ export default {
},
currentKJFileList() {
// return this.currentFileList.filter((item) => item.fileFlag === 'apt' || item.fileFlag === '')
return this.currentFileList.filter((item) => ['apt','aptist','课件'].includes(item.fileFlag))
return this.currentFileList.filter((item) => ['apt','aippt','课件'].includes(item.fileFlag))
},
currentSCFileList() {
// return this.currentFileList.filter((item) => item.fileFlag !== 'apt' && item.fileFlag !== '')
return this.currentFileList.filter((item) => !['apt','aptist','课件'].includes(item.fileFlag))
return this.currentFileList.filter((item) => !['apt','aippt','课件'].includes(item.fileFlag))
}
},
@ -321,7 +333,7 @@ export default {
if(item.fileFlag === 'apt') {
this.$refs.calssRef.open(item.fileId, classObj)
}
if(item.fileFlag === 'aptist') {
if(item.fileFlag === 'aippt') {
this.$refs.calssRef.open(item.fileId, classObj)
}
},
@ -378,8 +390,8 @@ export default {
}, 1000)
break
}
case 'click': { // --aptist
if (row.fileFlag === 'aptist' && !!row.fileId) {
case 'click': { // --aippt
if (row.fileFlag === 'aippt' && !!row.fileId) {
const res = await getEntpcoursefile(row.fileId)
if (res && res.code === 200) {
sessionStore.set('curr.resource', res.data) //
@ -461,6 +473,93 @@ export default {
},500)
})
},
createAIPPT() {
listEntpcourse({
evalid: this.currentNode.id,
edituserid: this.userStore.userId,
pageSize: 500
}).then((response) => {
if (response.rows.length <= 0) return
let resCourse = response.rows[0]
//
let form = {
parentid: 0,
entpid: this.userStore.deptId,
entpcourseid: resCourse.id,
ppttype: 'file',
title: resCourse.coursetitle,
fileurl: '',
filetype: 'aippt',
datacontent: '',
filekey: '',
filetag: '',
fileidx: 0,
dflag: 0,
status: '',
edituserid: this.userStore.userId
}
addEntpcoursefileReturnId(form).then((slideid) => {
let pagearray = []
//
pagearray.push({
key: '公屏',
title: '公屏页',
slidedata: {
attrs: { width: 1333, height: 749.8125 },
className: 'Stage',
children: [
{
attrs: {},
className: 'Layer',
children: [
{
attrs: {
width: 1333,
height: 749.8125,
fill: 'white',
name: 'fixedbackground',
listening: true
},
className: 'Rect'
}
]
}
]
}
})
//
var form = {
parentid: slideid,
entpid: resCourse.entpid,
entpcourseid: resCourse.id,
ppttype: 'file',
title: '第一页',
fileurl: '',
filetype: 'slide',
datacontent: JSON.stringify(pagearray),
filekey: '',
filetag: '',
fileidx: 0,
dflag: 0,
status: '',
edituserid: this.userStore.userId
}
addEntpcoursefileReturnId(form).then((res) => {
creatAPT({
...this.uploadData,
fileId: slideid,
fileShowName: this.currentNode.itemtitle + '.apt'
}).then((res) => {
this.currentFileList.unshift(res.resData)
setTimeout(()=>{
this.$refs['kjItemRef'+res.resData.id][0].openFileWin(res.resData);
},500)
})
})
})
})
},
createAptFile() {
listEntpcourse({
evalid: this.currentNode.id,
@ -653,7 +752,7 @@ export default {
for (let i = 0; i < this.currentFileList.length; i++) {
let item = this.currentFileList[i]
if (item.fileFlag === 'apt') continue;
if (item.fileFlag === 'aptist') continue;
if (item.fileFlag === 'aippt') continue;
await asyncLocalFile(item)
}
this.asyncAllFileVisiable = false
@ -872,6 +971,13 @@ export default {
margin: 0 5px;
border-radius: 10px;
background-color: white;
position: relative;
.prepare-center-dropdown{
z-index: 9999;
position: absolute;
right: 10px;
top: 4px;
}
.prepare-center-jxkj{
height: 100%;
display: flex;

View File

@ -131,6 +131,7 @@ const params = reactive(
const addAiPPT = async(res) => {
let node = courseObj.node
pptDialog.value = false;
if (!node) return msgUtils.msgWarning('请选择章节?')
pgDialog.visible = true
pgDialog.pg.percentage = 0
@ -238,8 +239,8 @@ const HTTP_SERVER_API = (type, params = {}) => {
const node = courseObj.node || {}
const def = {
fileId: '', // id - Entpcoursefile id
fileFlag: 'aptist',
fileShowName: node.itemtitle + '.aptist',
fileFlag: 'aippt',
fileShowName: node.itemtitle + '.aippt',
textbookId: node.rootid,
levelFirstId: node.parentid||node.id,
levelSecondId: node.parentid && node.id,
@ -298,7 +299,7 @@ const getDefParams = (params) => {
ppttype: 'file',
title: enpt.coursetitle,
fileurl: '',
filetype: 'aptist',
filetype: 'aippt',
datacontent: '',
filekey: '',
filetag: '',