Merge branch 'main' of http://27.128.240.72:3000/zhuhao/AIx_Smarttalk_WS into baigl
This commit is contained in:
commit
8bbd01e2b2
|
@ -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": "上海交大重庆人工智能研究院",
|
||||||
|
|
|
@ -1,3 +1,16 @@
|
||||||
|
<!--
|
||||||
|
依赖: vuedraggable、v-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>
|
||||||
<el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil">
|
<el-button class="add-btn" @click="clearPic">
|
||||||
画笔
|
清空
|
||||||
</el-button>
|
</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>
|
||||||
|
<!-- <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 {
|
||||||
|
|
|
@ -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{
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue