Compare commits

..

5 Commits

5 changed files with 74 additions and 31 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "aix-win-ws", "name": "aix-win-ws",
"version": "2.5.6", "version": "2.5.7",
"description": "", "description": "",
"main": "./out/main/index.js", "main": "./out/main/index.js",
"author": "上海交大重庆人工智能研究院", "author": "上海交大重庆人工智能研究院",

View File

@ -1,3 +1,16 @@
<!--
依赖 vuedraggablev-viewer
属性: showToolbar // false
工具栏 添加图片默认6个测试图片不输入框添加则添加默认输入图片链接展示图片链接的图片
清空图片清空图片
事件: clear 清空时触发
outIndex 超出九个图片时触发
方法 addPic //
参数 src 图片链接
clearPic //
参数
使用方法 加载组件后通过ref调用addPic方法添加图片即可
-->
<template> <template>
<div style="position: relative;height: 100%;width: 100%;"> <div style="position: relative;height: 100%;width: 100%;">
<draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid"> <draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
@ -9,16 +22,21 @@
</div> </div>
</template> </template>
</draggable> </draggable>
<el-input style="position:fixed;bottom: 20px;right: 180px;width: 1000px" v-model="inputValue" type="text" /> <div v-if="showToolbar" class="grid-pic-toolbar">
<el-button class="add-btn" @click="addPic"> <el-input style="width: 500px" v-model="inputValue" type="text" />
添加 <el-button class="add-btn" @click="pushPic">
</el-button> 添加
<el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil"> </el-button>
画笔 <el-button class="add-btn" @click="clearPic">
</el-button> 清空
<div class="modal-mode"> </el-button>
<canvas id="canvas_pic_001" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></canvas>
</div> </div>
<!-- <el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil">
画笔
</el-button>-->
<!-- <div class="modal-mode">
<canvas id="canvas_pic_001" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></canvas>
</div>-->
</div> </div>
</template> </template>
@ -26,10 +44,18 @@
import {ref, computed, onMounted} from 'vue' import {ref, computed, onMounted} from 'vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import ViewerItem from "./viewer-item.vue"; import ViewerItem from "./viewer-item.vue";
import Fabric from 'fabric'; // import Fabric from 'fabric';
const gridPicList = ref([]) const gridPicList = ref([])
const inputValue = ref('') const inputValue = ref('')
const isShow = ref(false) const isShow = ref(false)
const emits = defineEmits(['clear','outIndex']);
const props = defineProps({
showToolbar: {
type: Boolean,
default: true
}
})
// //
const getWH = (item,index)=>{ const getWH = (item,index)=>{
return { return {
@ -118,13 +144,19 @@
} }
}) })
const pushPic = () => {
let src = inputValue.value||picList[gridPicList.value.length]
addPic(src)
}
// //
const addPic = () => { const addPic = (src) => {
if (gridPicList.value.length >= 9) { if (gridPicList.value.length >= 9) {
console.log("超出九个图片")
emits('outIndex')
return return
} }
let src = inputValue.value||picList[gridPicList.value.length]
if (!src) { if (!src) {
console.log("图片链接不能为空")
return; return;
} }
gridPicList.value.push({ gridPicList.value.push({
@ -133,6 +165,11 @@
}) })
inputValue.value = '' inputValue.value = ''
} }
//
const clearPic = () => {
gridPicList.value = []
emits('clear')
}
// //
const startPencil = () => { const startPencil = () => {
isShow.value = !isShow.value isShow.value = !isShow.value
@ -148,7 +185,7 @@
b = b.length === 1? '0' + b : b; b = b.length === 1? '0' + b : b;
return `#${r}${g}${b}`; return `#${r}${g}${b}`;
} }
// /* //初始化画
const initPend = () => { const initPend = () => {
let canvas = new Fabric.fabric.Canvas('canvas_pic_001',{ let canvas = new Fabric.fabric.Canvas('canvas_pic_001',{
interactive: false, interactive: false,
@ -162,10 +199,11 @@
canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas) canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
canvas.freeDrawingBrush.width = 1// canvas.freeDrawingBrush.width = 1//
canvas.freeDrawingBrush.color = "red"// canvas.freeDrawingBrush.color = "red"//
} }*/
onMounted(() => { /*onMounted(() => {
initPend() initPend()
}) })*/
defineExpose({addPic,clearPic})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.modal-mode{ .modal-mode{
@ -204,10 +242,13 @@
} }
} }
} }
.add-btn{ .grid-pic-toolbar{
position: fixed; position: fixed;
right: 20px; right: 20px;
bottom: 20px; bottom: 20px;
display: flex;
.add-btn{
}
} }
@keyframes fadeIn { @keyframes fadeIn {
from { from {

View File

@ -12,7 +12,7 @@
<script setup> <script setup>
import {ref, watch, nextTick, onMounted} from "vue"; import {ref, watch, nextTick, onMounted} from "vue";
import { component as Viewer } from 'v-viewer' import { component as Viewer } from 'v-viewer'
import Fabric from 'fabric'; // import Fabric from 'fabric';
import 'viewerjs/dist/viewer.css' import 'viewerjs/dist/viewer.css'
const props = defineProps({ const props = defineProps({
images: { images: {
@ -36,16 +36,13 @@ const inited = (viewer) => {
} }
// //
const zoomed = (e) => { const zoomed = (e) => {
setImgStyle() // setImgStyle()
// console.log('zoomed', e)
} }
// //
const moved = (e) => { const moved = (e) => {
setImgStyle() // setImgStyle()
// console.log('moved',e)
} }
const move = (e) => { const move = (e) => {
// console.log('move', e)
} }
const appendCanvasToShow = () => { const appendCanvasToShow = () => {
initImgStyle() initImgStyle()
@ -92,7 +89,7 @@ const optins = ref({
"tooltip": true, "tooltip": true,
"zoomable": true, "zoomable": true,
"rotatable": true, "rotatable": true,
"movable": false, "movable": true,
"scalable": true, "scalable": true,
"transition": true, "transition": true,
"fullscreen": true, "fullscreen": true,
@ -100,9 +97,9 @@ const optins = ref({
}) })
const initViewers = () => { const initViewers = () => {
refs.value['viewerRef'+props.index]?.rebuildViewer() refs.value['viewerRef'+props.index]?.rebuildViewer()
setTimeout(()=>{ /*setTimeout(()=>{
initImgStyle() initImgStyle()
},300) },300)*/
} }
// //
const initPend = () => { const initPend = () => {
@ -133,11 +130,11 @@ watch(props.images, (newValue, oldValue) => {
}); });
*/ */
onMounted(()=>{ /*onMounted(()=>{
setTimeout(()=>{ setTimeout(()=>{
appendCanvasToShow() appendCanvasToShow()
}, 300) }, 300)
}) })*/
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.viewer-item-wrap{ .viewer-item-wrap{

View File

@ -98,10 +98,13 @@ import progressDialog from '@/views/teachingDesign/container/progress-dialog.vue
import msgUtils from "@/plugins/modal"; import msgUtils from "@/plugins/modal";
import * as commUtils from "@/utils/comm"; import * as commUtils from "@/utils/comm";
import * as Api_server from "@/api/apiService"; // import * as Api_server from "@/api/apiService"; //
import useClassTaskStore from '@/store/modules/classTask'
const router = useRouter() const router = useRouter()
const userStore = useUserStore().user // const userStore = useUserStore().user //
const currentNode = ref({}) const currentNode = ref({})
const refs = ref([]); const refs = ref([]);
const classTaskStore = useClassTaskStore();
const collectRef = (key) => { const collectRef = (key) => {
return (el) => { return (el) => {
@ -513,7 +516,9 @@ const changeClass = async (type, row, other) => {
} }
// //
onMounted(() => { onMounted(async () => {
//
await classTaskStore.initJYInfo(userStore);
}) })
</script> </script>

View File

@ -10,7 +10,7 @@
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item @click="createAIPPT">新建文枢课件</el-dropdown-item> <el-dropdown-item @click="createAIPPT">新建文枢课件</el-dropdown-item>
<el-dropdown-item @click="aiTOPPT">AI一键生成</el-dropdown-item> <el-dropdown-item @click="aiTOPPT">AI一键生成</el-dropdown-item>
<!-- <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>--> <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>
<el-dropdown-item @click="openFilePicker">导入PPT</el-dropdown-item> <el-dropdown-item @click="openFilePicker">导入PPT</el-dropdown-item>
<input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation"> <input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation">
</el-dropdown-menu> </el-dropdown-menu>