update more

HiTeachCC/ClientApp/src/components/PdfPreview.vue

@@ -5,15 +5,16 @@
         <div class="q-pa-md">
             <q-carousel animated v-model="slide" ref="carousel" thumbnails infinite :class="isOpen?'drawer' : ''">
                 <q-carousel-slide v-for="(item,index) in imgArr" :img-src="item" :name="index+1">
-                    <!--<q-carousel-slide v-for="(item,index) in imgArr" v-if="index >=1" :name="index" style="display:none" :img-src="item">-->
-                    <!--<p v-if="boardImg['page'+(slide)+'']">{{boardImg['page'+(slide)+'']['num']}}</p>
-                    <p v-if="boardImg['page'+(slide)+'']">{{boardImg['page'+(slide)+'']['src']}}</p>
-                    <img v-if="boardImg" :src="boardImg['page'+(slide-1)+'']['src']" alt="">
-                    <img v-if="boardImg" :src="boardImg['page1']" alt="">
-                    <p v-if="boardImg">{{boardImg['page'+(index+1)+'']}}</p>
-                    <img v-if="boardImg['page'+(slide)+'']" :src="boardImg['page'+(slide)+'']['src']" alt="">-->
+                        <!--<q-carousel-slide v-for="(item,index) in imgArr" v-if="index >=1" :name="index" style="display:none" :img-src="item">-->
+                        <!--<p v-if="boardImg['page'+(slide)+'']">{{boardImg['page'+(slide)+'']['num']}}</p>
+        <p v-if="boardImg['page'+(slide)+'']">{{boardImg['page'+(slide)+'']['src']}}</p>
+        <img v-if="boardImg" :src="boardImg['page'+(slide-1)+'']['src']" alt="">
+        <img v-if="boardImg" :src="boardImg['page1']" alt="">
+        <p v-if="boardImg">{{boardImg['page'+(index+1)+'']}}</p>
+        <img v-if="boardImg['page'+(slide)+'']" :src="boardImg['page'+(slide)+'']['src']" alt="">-->
                 </q-carousel-slide>
             </q-carousel>
+
         </div>
     </div>
 </template>
@@ -64,7 +65,9 @@
                 whiteBG: require('../assets/img/white.jpg'),
                 visible:true,
                 showSimulatedReturnData: false,
-                fileType:'',
+                fileType: '',
+                //loading
+                visibleinfo: true,
             }
         },
         methods: {
@@ -175,9 +178,10 @@
                     this.allPages = this.$store.state.totalpage
                 }
                 this.fileType=localStorage.getItem('fileType')
-                console.log(this.$store.state.imgArr)
+                //console.log(this.$store.state.imgArr)
                 this.imgArr = this.$store.state.imgArr
-                console.log(this.imgArr)
+                //console.log(this.imgArr)
+                this.showTextLoading();
             },
             //Pdfshow() {
             //    this.$q.loading.show({
@@ -215,6 +219,15 @@
                 this.$parent.$parent.modalUpload=true
                 console.log(this.$parent.$parent,'this指向')
             },
+            //loading  
+            showTextLoading() {
+                this.visible = true
+                //this.showSimulatedReturnData = false
+                setTimeout(() => {
+                    this.visible = false
+                    //this.showSimulatedReturnData = true
+                }, 9000)
+            }
         },
         created() {
             //this.pdf(1)

HiTeachCC/ClientApp/src/plugin/PublicRenderer.js

@@ -75,6 +75,7 @@ function drawRect(stage, layer, item, tr, jointUrl) {
                 layer.draw();
             };
             //var imagesrc = images
+            imageObj.crossOrigin = 'Anonymous';
             imageObj.src = joinUrl + item.style.fill.blipFill.url
             //imageObj.width = item.fill.blipFill.tile.sx
             //imageObj.height = item.fill.blipFill.tile.xy
@@ -259,6 +260,7 @@ function drawPath(stage, layer, item, tr, joinUrl) {
                     group.zIndex(item.index)
                     layer.draw();
                 };
+                imageObj.crossOrigin = 'Anonymous';
                 imageObj.src = joinUrl + item.style.fill.blipFill.url;
             }
 
@@ -287,18 +289,12 @@ function drawImage(stage, layer, item, tr, imgUrl) {
         };
         var group = new Konva.Group(imageAttrs);
         var imageUrl = item.image.url
+        
         var totalimages = imgUrl
         var imagesURLinfo = imgUrl + item.image.url
         var rotateNum = '0'
         if (item.style.position.flipH === 1) { rotateNum = '180' } else if (item.style.position.flipV === 1) { rotateNum = '90' } else if (item.style.position.rot === 0.0) { rotateNum = item.style.position.rot }
         console.log(imageUrl, '小地址')
-        //console.log(totalimages[imageUrl].path,'大地址')
-        //console.log(totaljson.stores[imageUrl])
-        //for (let key in totalimages) {
-        //    if (imageUrl === key) {
-        //        imagesURLinfo = imgUrl + item.image.url
-        //    }
-        //}
         console.log(imagesURLinfo, '图片的地址1111')
         Konva.Image.fromURL(imagesURLinfo, function (darthNode) {
             darthNode.setAttrs({
@@ -313,6 +309,7 @@ function drawImage(stage, layer, item, tr, imgUrl) {
                     drawImage.destroy();
                 }
             });
+            //darthNode.setAttribute('crossOrigin', 'anonymous');
             group.add(darthNode)
             layer.add(group);
             group.zIndex(item.index+1)
@@ -627,9 +624,10 @@ function drawTable(stage, layer, group, item) {
             var imageObj = new Image();
             imageObj.src = img;
             document.getElementById(tableid).remove()
+            imageObj.setAttribute('crossOrigin', 'anonymous');
             imageObj.onload = function () {
                 var tableInfo = new Konva.Image({
-                    x: item.style.position.x,
+                    x: item.style.position.x * scalingY,
                     y: item.style.position.y * scalingY,
                     image: imageObj,
                     width: imageObj.width,
@@ -660,14 +658,15 @@ function drawEchart(stage, layer, group, item) {
         console.log('进入echarts的渲染方法')
         console.log(item, '传送进来的内容')
         var createdEchat = document.createElement('div')
-        createdEchat.id = item.id
+        createdEchat.id = item.uid
         createdEchat.style.width = item.style.position.cx + 'px'
         createdEchat.style.height = item.style.position.cy + 'px'
         createdEchat.style.position = 'relative'
-        createdEchat.style.top = 9999 + 'px'
+        createdEchat.style.top = 999 + 'px'
         var addEchatdiv = document.getElementById("container").appendChild(createdEchat);
-        var Echatid = item.id
-        console.log(Echatid, '元素ID')
+        var Echatid = item.uid
+        var htmldom = document.getElementById(Echatid)
+        console.log(htmldom, '获取html结构')
         var titlename = []
         var LineseriesData = []
         var BarseriesData = []
@@ -924,22 +923,16 @@ function drawEchart(stage, layer, group, item) {
             var imageObj = new Image();
             imageObj.src = echartsinfo;
             document.getElementById(Echatid).remove()
+            imageObj.setAttribute('crossOrigin', 'anonymous');
             imageObj.onload = function () {
                 var EchartsInfo = new Konva.Image({
-                    x: item.style.position.x,
+                    x: item.style.position.x * scalingY,
                     y: item.style.position.y * scalingY,
                     image: imageObj,
-                    width: imageObj.width,
-                    height: imageObj.height,
+                    width: imageObj.width * scalingY,
+                    height: imageObj.height * scalingY,
                     draggable: true,
                 });
-                EchartsInfo.on('dblclick', (e) => {
-                    console.log('触发了dblclick!')
-                    console.log(this, 'this指针内容')
-                    //that.EditContent = paragraphall.paragraph[0].texts[0].content
-                    //that.NowOption = exercise.option
-                    //this.editorinfo = new Editors(this.$refs.editorElem)
-                })
                 // add the shape to the layer
                 //group.add(tableInfo);
                 layer.add(EchartsInfo);
@@ -948,65 +941,13 @@ function drawEchart(stage, layer, group, item) {
                 //group.batchDraw();
             };
         });
-        r(200)
+        r(htmldom)
     })
 }
-/*新的绘制多边形图形*/
-const drawPolygon = (stage, layer, item) => {
-    console.log('调用到了方法')
-    //var svgDiv = document.createElement('div')
-    var createdDiv = document.createElement('div')
-    document.getElementById('container').appendChild(createdDiv)
-    createdDiv.id = item.id
-    createdDiv.style.width = item.style.position.cx + 'px';
-    createdDiv.style.height = item.style.position.cy + 'px';
-    createdDiv.style.display = 'block'
-    createdDiv.style.position = 'absolute'
-    createdDiv.style.top = 9999 + 'px'
-    var divId = item.id
-    const svgDom = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svgDom.setAttribute('width', item.style.position.cx + 'px');
-    svgDom.setAttribute('height', item.style.position.cy + 'px');
-    //svgDom.setAttribute('style','position:absolute')
-    svgDom.setAttribute('id', item.id + 'info')
-    const polygonDom = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-    polygonDom.setAttribute('points', item.svg.points);
-    polygonDom.setAttribute('style', 'fill:' + item.style.border.color.solidFill + ';strock:#ccc;stroke-width:1;');
-    createdDiv.appendChild(svgDom)
-    svgDom.appendChild(polygonDom)
-    html2canvas(document.getElementById(divId), {
-        backgroundColor: null,
-    }).then((canvas) => {
-        console.log(divId, '进来的ID')
-        //document.getElementById(divId).innerHTML = "";
-        var imageObj = new Image();
-        var img = canvas.toDataURL();
-        imageObj.src = img;
-        console.log(img, '生成的图片')
-        document.getElementById(divId).remove()
-        imageObj.onload = function () {
-            var svgimagInfo = new Konva.Image({
-                x: item.style.position.x,
-                y: item.style.position.y * scalingY,
-                image: imageObj,
-                width: imageObj.width,
-                height: imageObj.height,
-                draggable: true,
-            });
-            console.log(item.style.position.x, item.style.position.y, divId, '本次渲染的位置')
-            // add the shape to the layer
-            //group.add(tableInfo);
-            layer.add(svgimagInfo);
-            //group.zIndex(paragraphall.index+1)
-            layer.batchDraw();
-        };
-    });
-    if (item.paragraph && item.paragraph[0].texts.length) drawTextInfo(stage, layer, item, group, item.paragraph[0].style.position)
-}
 /**
  * 导出 
  **/
 
 export {
-    drawRect, drawArc, drawEllipse, drawPath, drawImage, drawLine, drawTextInfo, drawTable, drawEchart, drawPolygon
+    drawRect, drawArc, drawEllipse, drawPath, drawImage, drawLine, drawTextInfo, drawTable, drawEchart
 }

HiTeachCC/ClientApp/src/views/Board.vue

@@ -50,10 +50,6 @@
                                 <font-awesome-icon icon="plus-square" style="font-size: 40px;" v-if="!modal_loading" />
                                 <p> {{openNewWord}}</p>
                             </Button>
-                            <Button :loading="modal_loading" @click="testpptx">
-                                <font-awesome-icon icon="plus-square" style="font-size: 15px;" v-if="!modal_loading" />
-                                <p>HTEX JSON渲染测试</p>
-                            </Button>
                         </div>
                     </div>
                 </Modal>
@@ -71,17 +67,19 @@
                         </svg>
                     </div>
                     <div id="nextPagebox" v-show="nextpageShow"></div>
-                    <!--题目内容-->
-                    <div class="exercise-container" v-if="topics">
-                        <p v-html="topics.question"
-                           class="item-question"
-                           id="itemQuestion"
-                           @click="onStemClick(topics.question)"></p>
-                        <div v-for="(item,index) in topics.option" :key="index" class="item-option" draggable="true">
-                            <span class="item-order">{{ item.code }} :</span>
-                            <span class="item-text">{{ item.value }}</span>
+                    <!--iframe-->
+                    <iframe id="iframeEchart"  :srcdoc="iframeValue" ></iframe>
+                        <!--题目内容-->
+                        <div class="exercise-container" v-if="topics">
+                            <p v-html="topics.question"
+                               class="item-question"
+                               id="itemQuestion"
+                               @click="onStemClick(topics.question)"></p>
+                            <div v-for="(item,index) in topics.option" :key="index" class="item-option" draggable="true">
+                                <span class="item-order">{{ item.code }} :</span>
+                                <span class="item-text">{{ item.value }}</span>
+                            </div>
                         </div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -194,7 +192,7 @@
     import BasePick from '../components/Tools/BasePick.vue'
     import PDFJS from 'pdfjs-dist';
     import RenderContent from '../assets/test/test.json'
-    import { drawRect, drawArc, drawEllipse, drawImage, drawPath, drawLine, drawTable, drawEchart, drawPolygon } from "../plugin/PublicRenderer.js"
+    import { drawRect, drawArc, drawEllipse, drawImage, drawPath, drawLine, drawTable, drawEchart } from "../plugin/PublicRenderer.js"
     import E from "wangeditor"
     import Upblob from '../plugin/blobTool.js'
     import jwt_decode from "jwt-decode";
@@ -326,7 +324,9 @@
                 nextpage: '',
                 nextpageShow: false,
                 //截图新的背景图片
-                newBackgroundima:'',
+                newBackgroundima: '',
+                //iframe值
+                iframeValue:[],
             }
         },
         methods: {
@@ -697,105 +697,6 @@
                     let layer = that.layer
                     stage.add(layer)
                     this.rendererinof(slide)
-                    // that.saveArr=[];
-                    //if (slide != 'undefined') {
-                    //    // let stageInfo =JSON.parse(localStorage.getItem('stageInfo'))
-                    //    let stageInfo = that.saveArr
-                    //    let reShape = stageInfo[slide + '']
-                    //    // 回显线条
-                    //    if (reShape) {
-                    //        for (let i = 0; i < reShape.children.length; i++) {
-                    //            let type = reShape.children[i].className
-                    //            let attr = reShape.children[i].attrs
-                    //            if (type == 'Image') {
-                    //                let boardBg = new Konva.Image(attr)
-                    //                layer.add(boardBg)
-                    //                layer.batchDraw()
-                    //            } else if (type == 'Line') {
-                    //                let lastLine = new Konva.Line(attr)
-                    //                layer.add(lastLine)
-                    //                layer.batchDraw()
-                    //            } else if (type == 'Text') {
-                    //                let text = new Konva.Text(attr)
-                    //                layer.add(text)
-                    //                layer.batchDraw()
-                    //            } else {
-                    //                let rect
-                    //                if (type == 'Circle') {
-                    //                    rect = new Konva.Circle(attr)
-                    //                    layer.add(rect)
-                    //                } else if (type == 'Ellipse') {
-                    //                    rect = new Konva.Ellipse(attr)
-                    //                    layer.add(rect)
-                    //                } else if (type == 'Star') {
-                    //                    rect = new Konva.Star(attr)
-                    //                    layer.add(rect)
-                    //                } else if (type == 'Rect') {
-                    //                    rect = new Konva.Rect(attr)
-                    //                    layer.add(rect)
-                    //                } else if (type == 'RegularPolygon') {
-                    //                    rect = new Konva.RegularPolygon(attr)
-                    //                    layer.add(rect)
-                    //                }
-                    //                layer.batchDraw()
-                    //            }
-                    //        }
-                    //    } else {
-                    //        //  在画板上生成当前页背景图
-                    //        let imageObj = new Image()
-                    //        imageObj.src = this.$store.state.imgArrOld[slide]
-                    //        let widthx = ''
-                    //        let heighty = ''
-                    //        let locationX = ''
-                    //        let locationY = ''
-                    //        console.log(imageObj.width, '图片宽')
-                    //        imageObj.height = imageObj.height
-                    //        console.log(imageObj.height, '图片高')
-                    //        if (imageObj.width === 0) {
-                    //            imageObj.width = 800
-                    //            imageObj.height = 600
-                    //            locationX = 240
-                    //            locationY = 0
-                    //        }
-                    //        if (imageObj.width < 700) {
-                    //            imageObj.width = 800
-                    //            locationX = 480
-                    //            locationY = 0
-                    //        }
-                    //        if (imageObj.width > 700) {
-                    //            imageObj.width = 1400
-                    //            locationX = 200
-                    //            locationY = 0
-                    //        }
-                    //        if (imageObj.width > 1100) {
-                    //            imageObj.width = 1500
-                    //            locationX = 180
-                    //            locationY = 0
-                    //        } else if (imageObj.width > 1800) {
-                    //            imageObj.width = 1800
-                    //            locationX = 90
-                    //            locationY = 0
-                    //        }
-                    //        if (imageObj.height < 400) {
-                    //            imageObj.height = 580
-                    //        }
-                    //        if (imageObj.height > 600) {
-                    //            imageObj.height = 980
-                    //        } else if (imageObj.height > 950) {
-                    //            imageObj.height = 980
-                    //        }
-                    //        let boardBg = new Konva.Image({
-                    //            x: locationX,
-                    //            y: locationY,
-                    //            image: imageObj,
-                    //            name: 'boardBg'
-                    //        })
-                    //        console.log(imageObj.width, '图片呈现宽')
-                    //        console.log(imageObj.height, '图片呈现高')
-                    //        layer.add(boardBg)
-                    //        layer.batchDraw()
-                    //    }
-                    //}
                     // 定义绘制所需的一些属性
                     let isPaint = false// 画笔是否生效
                     let mode = that.$store.state.mode// 绘制模式
@@ -832,6 +733,7 @@
                             document.body.classList.remove('cursor-fdj')
                             // if (stage.find('Transformer').length == 0) {
                             // if (true) {
+                            //编辑文字 绘画文字
                             let textNode = new Konva.Text({
                                 text: '',
                                 x: that.getRelativePointerPosition(stage).x,
@@ -898,7 +800,7 @@
                                 textarea.style.left = areaPosition.x + 'px'
                                 textarea.style.width = textNode.width() - textNode.padding() * 2 + 'px'
                                 textarea.style.height =
-                                    textNode.height() - textNode.padding() * 2 + 5 + 'px'
+                                textNode.height() - textNode.padding() * 2 + 5 + 'px'
                                 textarea.style.fontSize = textNode.fontSize() + 'px'
                                 textarea.style.border = 'none'
                                 textarea.style.padding = '0px'
@@ -2729,15 +2631,13 @@
                                             layer.add(backgroup);
                                             backgroup.zIndex(0)
                                             layer.batchDraw();
-                                            //var snippingPage = JSON.parse(localStorage.getItem('slide'))
-                                            //var dataURL = stage.toDataURL();
-                                            //that.$store.state.imgArr[snippingPage - 1] = dataURL
                                         }
                                         promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename));
                                           //处理超过尺寸背景图END
                                     }
                                 } else {
                                     console.log('进入在范围内背景图')
+                                    imageObj.setAttribute('crossOrigin', 'anonymous');
                                     var bgImage = new Konva.Image({
                                     fillPatternImage: imageObj,
                                     height: res.height,
@@ -2749,7 +2649,7 @@
                                 layer.batchDraw();
                                 promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename));
                                 }
-                            };
+                            }
                             imageObj.crossOrigin = 'Anonymous';
                             imageObj.src = imgSrcinfo
                         } else if (res.fill.type === 4) {
@@ -2766,6 +2666,7 @@
                                 console.log(trx, '图片打印tr')
                                 promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename));
                             };
+                            imageObj.crossOrigin = 'Anonymous';
                             imageObj.src = res.fill.pattFill.base64
                         } else if (res.fill.type === 1) {
                             console.log('进入到纯色背景')
@@ -2939,6 +2840,8 @@
                                 }
                                 else if (i.charts && i.charts !== null) {
                                     let renderEchart = await drawEchart(stage, layer, tr, i)
+                                    console.log(renderEchart, 'echarts图表的返回')
+                                    that.iframeValue.push(renderEchart)
                                 } else if (i.type === "Table") {
                                     let renderTable = await drawTable(stage, layer, tr, i)
                                 } else if (i.shapeType === "Diagram") {

HiTeachCC/HiTeachCC.csproj

@@ -9,7 +9,7 @@
     <UserSecretsId>441d14a3-3e41-4e86-bea0-266e37c2c016</UserSecretsId>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="HTEXLib" Version="2.2.4" />
+    <PackageReference Include="HTEXLib" Version="2.3.6" />
     <PackageReference Include="Microsoft.AspNet.WebApi.Client" Version="5.2.7" />
     <PackageReference Include="TEAMModelOS.SDK" Version="3.0.1217" />
     <PackageReference Include="VueCliMiddleware" Version="3.1.2" />

HiTeachCC/JwtRsaFile/LangConfigV3.json

@@ -0,0 +1,79 @@
+{
+  "Options": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  "Start": "{",
+  "End": "}",
+  "LangConfig": [
+    {
+      "Lang": "简体",
+      "Alias": "简体中文",
+      "Item": {
+        "Type": {
+          "compose": "综合题",
+          "single": "单选题",
+          "multiple": "多选题",
+          "judge": "判断题",
+          "complete": "填空题",
+          "subjective": "问答题",
+          "connector": "连线题",
+          "correct": "改错题"
+        },
+        "Answer": "答案",
+        "Analysis": "解析",
+        "Score": "配分",
+        "Point": "知识点",
+        "Filed": "知识|理解|应用|分析|综合|评鉴",
+        "Judge": "对|错",
+        "Ended": "结束",
+        "Level": "难度"
+      }
+    },
+    {
+      "Lang": "繁體",
+      "Alias": "繁體中文",
+      "Item": {
+        "Type": {
+          "compose": "綜合題",
+          "single": "選擇題",
+          "multiple": "複選題",
+          "judge": "是非題",
+          "complete": "填充題",
+          "subjective": "問答題",
+          "connector": "連線題",
+          "correct": "改錯題"
+        },
+        "Answer": "答案",
+        "Analysis": "解析",
+        "Score": "配分",
+        "Point": "知識點",
+        "Filed": "知識|理解|應用|分析|綜合|評鑒",
+        "Judge": "對|錯",
+        "Ended": "結束",
+        "Level": "難度"
+      }
+    },
+    {
+      "Lang": "EN",
+      "Alias": "English",
+      "Item": {
+        "Type": {
+          "compose": "QuestionGroup",
+          "single": "MultipleChoice",
+          "multiple": "MultipleAnswers",
+          "judge": "TrueFalse",
+          "complete": "Blank",
+          "subjective": "Essay",
+          "connector": "Connector",
+          "correct": "Correct"
+        },
+        "Answer": "Answer",
+        "Analysis": "Explain",
+        "Score": "Score",
+        "Point": "Point",
+        "Filed": "Knowledge|Understand|Using|Analyse|Synthesize|Discern",
+        "Judge": "True|False",
+        "Ended": "Ended",
+        "Level": "Level"
+      }
+    }
+  ]
+}

HiTeachCC/Startup.cs

@@ -20,9 +20,11 @@ namespace HiTeachCC
 {
     public class Startup
     {
+        private IWebHostEnvironment _env { get; set; }
         readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
         public Startup(IConfiguration configuration, IWebHostEnvironment env)
         {
+            _env = env;
             Configuration = configuration;
             BaseConfigModel.SetBaseConfig(Configuration, env.ContentRootPath, env.WebRootPath);
         }
@@ -55,9 +57,10 @@ namespace HiTeachCC
            // services.AddMemoryCache();
             services.AddControllers().AddJsonOptions(options => { options.JsonSerializerOptions.IgnoreNullValues = false; });
             //HttpContextAccessor，并用来访问HttpContext。(提供組件或非控制器服務存取HttpContext)
-           // services.AddHttpContextAccessor();
-           // services.Configure<Option>(options => Configuration.GetSection("Option").Bind(options));
-            services.AddHtexTranslator();
+            // services.AddHttpContextAccessor();
+            // services.Configure<Option>(options => Configuration.GetSection("Option").Bind(options));
+            string path = $"{ _env.ContentRootPath}/JwtRsaFile";
+            services.AddHtexTranslator(path);
             services.AddHttpClient();
         }