<template>
  <div class="board">
    <!--<BoardHead></BoardHead>-->

    <div class="top-right-info">
      <p class="class-num" @click="clickQRcode()" v-if="classNum"><svg-icon icon-class="qrcode" class="q-icon" style="margin-top:-6px;font-weight: bold;margin-left:2px" />{{ classNum }}</p>
      <div class="pdfnum">
        <div class="pdftext"><svg-icon class="doc-type" :class="{ 'stroke-icon': filetypeImage != 'default-doc' }" :icon-class="filetypeImage" />{{ slidenum }}/{{ totalpage }}</div>
      </div>

      <div class="teachinfo">
        <img class="teachimg" :src="teachImg" />
        <p class="teachname">{{ teachname }}</p>
      </div>
      <div class="total-studentnum" @click="isShowStudentList = true"><svg-icon icon-class="students" class="students-icon" />{{ students.length }}</div>
      <div class="percentage-studentanswer" @click="popuphd()" v-show="students != ''">
        <q-circular-progress show-value font-size="8px" :value="StudentPercentage" size="45px" :thickness="0.22" color="teal" track-color="grey-3" class="q-ma-md"> {{ StudentPercentage }}% </q-circular-progress>
      </div>
    </div>
    <Card :styleObj="styleObj" :componentIndex="componentIndex" v-if="isShowCard"></Card>
    <div class="board-main">
      <ToolBox @handleToolPick="handleToolPick" @HiisShow="Hibtn" ref="hd"></ToolBox>
      <!-- <div class="percentage-studentanswer-under" @click="popuphd()" v-show="students != ''">
        <q-circular-progress show-value font-size="8px" :value="StudentPercentage" size="45px" :thickness="0.22" color="teal" track-color="grey-3" class="q-ma-md"> {{ StudentPercentage }}% </q-circular-progress>
      </div> -->
      <div style="position:fixed;z-index: 1;">
        <br />
        <Modal v-model="modalUpload" width="500" :mask-closable="false" style="margin-bottom:100px;bottom:unset !important">
          <div slot="footer">
            <div class="upload-box">
              <Upload action="" :on-success="handleUploadSuc" class="fl" :style="'display: ' + pdfRow" :on-error="handleUploadError" :accept="Accept" :format="Format" :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError" :before-upload="uploading">
                <Button class="fl" @click="uploadPDF">
                  <i class="far fa-file-pdf" style="font-size: 40px;margin-bottom: 5px;"></i><br />
                  上傳文件
                </Button>
              </Upload>

              <!--<input type="file" id="fileExport" @change="" ref="inputer" class="f1">-->
              <!--<Button @click="uploadPPT" class="gray">
                            <i class="far fa-file-powerpoint" style="font-size: 40px;margin-bottom: 5px;"></i><br>
                            载入PPT
                        </Button>-->
              <Button :loading="modal_loading" @click="openNew">
                <font-awesome-icon icon="plus-square" style="font-size: 40px;" v-if="!modal_loading" />
                <p>開啟新畫板</p>
              </Button>
            </div>

            <p class="screen-title" :style="{ color: isfullnow ? 'blue' : 'gray' }" @click="screenbtn('success')"><svg-icon icon-class="full-screen" class="fullscreen-icon" />全屏幕</p>
          </div>
        </Modal>
      </div>
      <div class="board-right">
        <div class="boardArea">
          <!--pdf生成的png和轮播-->
          <Pdf @LoadingPdf="PdfshowLoading" @LoadingPdfPage="LoadingPage" ref="Pdf" style="z-index:99"></Pdf>
          <!--konva容器-->
          <div id="lastPagebox" v-show="lastpageShow"></div>
          <div id="container" v-on:click="add()"></div>
          <div id="nextPagebox" v-show="nextpageShow"></div>
          <div id="readyRenderBox" v-show="readyBox"></div>
          <!--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 class="drag-wrap picker-drag" v-drag v-if="toolIndexList.indexOf(1) > -1">
      <div class="tool-icon-close" @click="handleCloseTool(1)"><svg-icon icon-class="Close" class="close-icon" /></div>
      <TurnTable />
    </div>
    <!--定时器-->
    <div class="drag-wrap timer-drag" v-drag v-if="toolIndexList.indexOf(2) > -1" @mousedown="stickDown($event)" @touchmove="stickDown($event)">
      <BaseTimer></BaseTimer>
      <Icon type="md-close" class="tool-icon-close" @click="handleCloseTool(2)" />
      <Icon type="md-resize" class="tool-icon-resize" @mousedown="stickDown($event)" @touchmove="stickDown($event)" />
    </div>
    <!--界面是否全屏-->
    <!--div class="q-pa-md q-gutter-sm" style="display:none"-->
    <!--q-dialog v-model="inception">
                <q-card>
                    <q-card-section>
                        <div class="screen-title">页面开启全屏化？</div>
                        <div class="sueecess_btn"><img :src="ScreenSuccess" @click="screenbtn('success')" /></div>
                        <div class="error_btn"><img :src="ScreenError" @click="screenbtn('error')" /></div>
                    </q-card-section>
                    <!--<q-card-actions align="right" class="text-primary">
                    <q-btn flat label="确定" v-close-popup />
                </q-card-actions>-->
    <!--/q-card>
            </q-dialog-->
    <!--<q-dialog v-model="secondDialog" persistent transition-show="scale" transition-hide="scale">
            <q-card class="bg-teal text-white" style="width: 300px">
                <q-card-section>
                    <div class="text-h6">Persistent</div>
                </q-card-section>

                <q-card-section>
                    Click/Tap on the backdrop.
                </q-card-section>

                <q-card-actions align="right" class="bg-white text-teal">
                    <q-btn flat label="OK" v-close-popup />
                </q-card-actions>
            </q-card>
        </q-dialog>-->
    <!--/div-->

    <!--Hi界面-->
    <div class="q-pa-md row items-start q-gutter-md" v-if="Hishow">
      <q-card class="hi-card">
        <div class="section">
          <Upload action="" :on-success="handleUploadSuc" :accept="Accept" :format="Format" :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError" :before-upload="uploading" class="hicard-btn" @click="uploadPDF">
            <!--<div class="open-other">-->
            <svg-icon icon-class="open-file" class="hicard-icon" />
            <p>開啟文件</p>
            <!--q-btn color="primary" label="开启其他文件并重启互动" size="15px" /-->
            <!--</div>-->
          </Upload>
          <div class="hicard-btn" @click="eliminatepage">
            <svg-icon icon-class="new-file" class="hicard-icon" />
            <p>新建畫板</p>
            <!-- <q-btn color="secondary" label="清除页面重启互动" size="15px" /> -->
          </div>

          <div class="hicard-btn" @click="quitbtns">
            <svg-icon icon-class="log_out" class="hicard-icon" />
            <p>離開教室</p>
            <!-- <q-btn label="退出教室" size="15px" style="background: #FF0080;color: white" /> -->
          </div>
          <div class="closebtn" @click="closeHi"><img src="@/statics/iconsvg/interaction/Close.svg" class="q-icon" /></div>
        </div>
      </q-card>
    </div>
    <!--PDF加载过度动画-->
    <div class="q-pa-md row items-start q-gutter-md" v-show="topicedit">
      <q-card class="hi-card">
        <q-card-section>
          <div id="editor">
            <div ref="editor" style="text-align:left"></div>
            <p>{{ EditContent }}</p>
          </div>
          <div class="closebtn" @click="closeHi('topic')"><img src="@/statics/iconsvg/interaction/Close.svg" class="q-icon" /></div>
          <div class="cancelbtn" @click="closeHi('topic')"><img src="@/assets/img/topic-cancel.png" class="q-icon" /></div>
          <div class="okbtn" @click="topicalter()"><img src="@/assets/img/topic-ok.png" class="q-icon" /></div>
        </q-card-section>
      </q-card>
    </div>
    <!--作品收集-->
    <div class="q-pa-md row items-start q-gutter-md workCollect" v-if="workStatus">
      <div class="workheader">
        <div class="workname">名称：作品收集1</div>
        <div class="workbtn-group">
          <div class="workbtn" @click="worksData = []">清除</div>
          <div class="workbtn" @click="stopwork">{{ workinfo.text }}</div>
        </div>
      </div>
      <div class="workArea">
        <div class="workDetails" v-show="worksData.length != 0" v-for="(item, index) in worksData" :key="index">
          <div class="workImg"><img :src="item.url" /></div>
          <div class="seatNum">
            <div>
              <span
                >座号：
                <div class="num">{{ item.seat }}</div></span
              >
            </div>
          </div>
          <div class="workImgname">
            <p><span>姓名：</span>{{ item.name }}</p>
          </div>
        </div>
        <div class="noData" v-show="worksData.length == 0">
          <p>暂无数据</p>
        </div>
      </div>
      <div class="workclose" @click="workStatus = false"><img src="@/statics/iconsvg/interaction/Close.svg" class="q-icon" /></div>
    </div>
    <!--作品收集end-->
    <!--學生名單彈窗-->
    <div class="student-List" v-show="isShowStudentList == true">
      <h5>目前加入教室的學生名單</h5>
      <div class="student-group">
        <div v-for="item in students" :key="item.id" class="student-card">
          <div class="student-leftimg">
            <div class="student-idnumber">{{ item.sort }}</div>
            <div class="student-portrait"><img :src="item.headImg" /></div>
          </div>
          <div class="student-rightname">{{ item.studentName }}</div>
        </div>
      </div>
      <div class="noData" v-show="students.length == 0">
        <p>暂无数据</p>
      </div>
      <div class="close-btn" @click="isShowStudentList = false"><svg-icon icon-class="Close" class="close-icon" /></div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
import screenfull from 'screenfull'
import Pdf from '@/views/pdf.vue'
import html2canvas from 'html2canvas'
import BoardHead from '@/components/Common/BoardHead.vue'
import BoardLeft from '@/components/Common/BoardLeft.vue'
import ToolBox from '@/components/ToolBox.vue'
import Card from '../components/Card.vue'
import Pop from '../components/ColorPop/ColorPicker.vue'
import shapes from '../components/ColorPop/Shapes.vue'
import BaseTimer from '../components/Tools/BaseTimer.vue'
import BasePick from '../components/Tools/BasePick.vue'
import TurnTable from '../components/Tools/TurnTable'
import PDFJS from 'pdfjs-dist'
import RenderContent from '../assets/test/test.json'
import { drawRect, drawArc, drawEllipse, drawImage, drawPath, drawLine, drawTable, drawEchart, drawMath } from '../plugin/PublicRenderer.js'
import E from 'wangeditor'
import Upblob from '../plugin/blobTool.js'
import jwt_decode from 'jwt-decode'
// import E from "@/plugin/wangEditor.js"
import moreoage from '../assets/99page/htex.json'
import { signalRInfo, sendMessage, onConnected, ImData } from '../plugin/signalr.js'
import { locale } from 'core-js'
const width = window.innerWidth
const height = window.innerHeight
let vm = {}
const signalR = require('@microsoft/signalr')
export default {
  components: {
    Pdf,
    BoardHead,
    BoardLeft,
    ToolBox,
    Card,
    Pop,
    shapes,
    BaseTimer,
    BasePick,
    TurnTable
  },
  data() {
    return {
      carousel: this.$store.state.carousel,
      modalUpload: true,
      modalUploadType: true,
      modal_loading: false,
      openNewWord: '开启新画板',
      whiteBG: require('../assets/img/white.jpg'),
      addBlank: false,
      deletePage: false,
      uploadPptText: false,
      showPPT: true,
      pdfRow: 'inline-block',
      isOpen: true,
      students: this.$store.state.students, // 学生名单
      slide: 1,
      saveArr: [],
      dataURL: '',
      canvasImg: require('../assets/img/QRcode.jpg'),
      classNum: localStorage.getItem('classNum'),
      icon: true,
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      alert: false,
      tx: false,
      value1: 0,
      componentIndex: 0,
      list: [],
      isShowCard: true,
      configKonva: {
        width: width,
        height: height
      },
      styleObj: {
        isShow: false,
        width: '0px',
        height: '0px',
        maxWidth: '0px',
        marginLeft: '0px',
        marginTop: '0px',
        backgroundColor: 'unset',
        boxShadow: 'unset'
      },
      filetypeImage: 'default-doc',
      stage: null,
      layer: null,
      info: '',
      client: null,
      mqmsg: '这是一条测试信息',
      directMethod: '',
      boardImg: {},
      toolIndexList: [],
      loginBack: {
        ticket: '',
        name: '',
        teamModelId: ''
      },
      //pdf模式  上传还是白板
      whiteboard: '',
      /*回应者ID*/
      responderId: '',
      /*是否全屏*/
      isFullscreen: '',
      isfullnow: false,
      inception: true,
      secondDialog: false,
      ScreenSuccess: require('../assets/img/screenfull-Dsuccess.png'),
      ScreenError: require('../assets/img/screenfull-Derror.png'),
      /*文字模式*/
      irstext: this.$store.state.irsBack,
      /*学生完成度value值*/
      answernum: 0,
      StudentPercentage: 0,
      /*PDF页数相关值*/
      slidenum: 1,
      totalpage: this.$store.state.totalpage,
      /*PDF相关*/
      allPages: null,
      startNew: 1,
      /*HI界面呈现*/
      Hishow: false,
      /*文件类型过滤*/
      Accept: '.pdf,.pptx,.htex',
      Format: ['pdf', 'pptx', 'htex'],
      loadingpage: '0',
      pdfloadingpage: '',
      /*XY坐标*/
      oldonex: '',
      oldoney: '',
      newPoints: [],
      //题目
      topics: null,
      topicedit: false,
      editorinfo: null,
      //判断是否题目值
      TypeVerdict: '',
      //当时编辑内容
      EditContent: '',
      //答案选项下标
      OptionNum: '',
      Editorinfo: '',
      layersinfo: '',
      //关于blob上传
      blobinit: '',
      uploadedList: [],
      blobPath: '',
      //快捷画布
      //FastLayer: '',
      //预加载
      lastpage: '',
      lastpageShow: false,
      nextpage: '',
      nextpageShow: false,
      //截图新的背景图片
      newBackgroundima: '',
      //iframe值
      iframeValue: [],
      //预备补全缩略图
      readyBox: false,
      //原始page总数
      beginPage: 0,
      //文字模式
      isText: false,
      //IM相关连接数据
      imConnect: {
        access_token: '',
        channel_api: '',
        channel_num: '',
        channel_rest_api: '',
        channel_url: ''
      },
      IMcounter: 0,
      //座位号
      seatNum: 0,
      //加入学生单个信息
      studentAlone: {},
      nowpageRender: {
        //当前页的题目类型以及ID各种资讯
        nowpageType: '', //当前页的题目类型
        nowpageIds: ''
      },
      //IRS互动状态
      irshint: true,
      irsModel: 'normal',
      //解析出来原始的高的值
      primevalHeight: 0,
      primevalWidth: 0,
      primevalScale: 0,
      primevalInit: {
        width: 0,
        height: 0,
        scale: 0,
        x: 0
      },
      //作品收集状态
      workStatus: false,
      worksData: [
        //{ id: 1, seatnum: 1, name: '高校校', imgUrl: require('../assets/img/head2.jpg') },
      ],
      teachImg: JSON.parse(localStorage.getItem('user')).picture,
      teachname: JSON.parse(localStorage.getItem('user')).name,
      //作品收集开关
      workSwitch: false,
      workNum: 1,
      workInsidedata: [],

      //停止收集的icon和文字
      workinfo: { icon: 'stop', text: '停止收集' },
      isShowStudentList: false
    }
  },
  methods: {
    //验证基础数据或重整页面
    init() {
      console.log(JSON.parse(localStorage.getItem('user')), 'llll')
      console.log(this, 'this的内容')
      if (localStorage.getItem('idToken') === null || localStorage.getItem('loginBack') === null) {
        this.$q.loading.show({
          message: '请登陆！',
          sanitize: true
        })
        this.timer = setTimeout(() => {
          this.$router.push('/')
        }, 4000)
      }
      let usertoken = localStorage.getItem('TWtoken')
      let userdeviceIds = localStorage.getItem('deviceId')
      let usermqtts = localStorage.getItem('mqtts')
      let userloginBacks = localStorage.getItem('loginBack')
      let userclassnums = localStorage.getItem('classNum')
      if (userdeviceIds !== '' && usertoken !== '' && usermqtts !== '' && userloginBacks !== '' && userclassnums !== '') {
        this.$store.state.userLogin.userdeviceid = userdeviceIds
        this.$store.state.userLogin.token = usertoken
        this.$store.state.userLogin.usermqtt = usermqtts
        this.$store.state.userLogin.userloginBack = userloginBacks
        this.$store.state.userLogin.userClassNum = userclassnums
      }
      let Fullscreen = localStorage.getItem('Fullscreen')
      if (Fullscreen === 1) {
        this.isFullscreen = false
      } else if (Fullscreen === 0) {
        this.isFullscreen = true
      }
      if (localStorage.getItem('msgBody')) {
        window.localStorage.removeItem('msgBody')
      }
      this.StudentPercentage = 0
      //删除不必要的数据储存
      localStorage.removeItem('fileType')
      localStorage.removeItem('slide')
    },
    studentList() {
      this.$store.state.students.forEach(item => {
        console.log(item.studentName)
      })
    },
    handleUploadSuc(response, file, i) {
      //this.beginPdfshowLoading()
      this.$store.state.uploadUrl = response.result.data.model.blobUrl
      localStorage.setItem('slide', 1)
      this.pdfloadingpage = response.result.data.page
      this.saveArr = []
      this.slidenum = 1
      this.$store.state.carouselSlide = 1
      this.$store.state.oldSlide = 0
      this.modalUpload = false
      this.modalUploadType = false
      this.Hishow = false
      let pdfname = response.result.data.model.fileName
      localStorage.setItem('classname', pdfname)
      this.$Message.success('上传成功！')
      this.$store.state.mode = 'pencil-alt'
      console.log(this.Hishow, '查看目前的状态值')
    },
    uploading(file) {
      console.log(file)
      this.modalUpload = false
      this.modalUploadType = false
      //blob信息
      var blobinfo = JSON.parse(localStorage.getItem('blobConnect'))
      console.log(blobinfo, '连接信息')
      //var jwtUser = jwt_decode(idToken)
      //localStorage.setItem('blob', JSON.stringify(jwtUser))
      this.blobinit = new Upblob(blobinfo.url, 'hiteachcc/' + blobinfo.id, blobinfo.sas)
      this.beginPdfshowLoading(0)
      //var blobinfo = JSON.parse(localStorage.getItem('blob'))
      console.log(blobinfo)
      let fileBolb = {
        url: blobinfo.url,
        name: file.name,
        size: file.size,
        loadedBytes: 0,
        progress: 0,
        status: 0
      }
      this.uploadedList.push(fileBolb)
      let _this = this
      let index = this.uploadedList.length - 1
      this.blobinit
        .upload(file, 'temp', {
          onProgress: function(e) {
            console.log(e)
          }
        })
        .then(res => {
          console.log(res, '上传成功后的返回')
          if (file.type === 'application/pdf') {
            this.$store.state.uploadUrl = res.url
            localStorage.setItem('slide', 1)
            this.saveArr = []
            this.slidenum = 1
            this.filetypeImage = 'add_pdf'
            this.$store.state.carouselSlide = 1
            this.$store.state.oldSlide = 1
            this.$store.state.mode = 'pencil-alt'
            localStorage.setItem('fileType', 'pdf')
            setTimeout(() => {
              this.Hishow = false
            }, 2000)
          } else {
            this.blobPath = res.blob
            this.$store.state.oldSlide = 1
            this.fileAnalysisinfo(res)
            localStorage.setItem('fileType', 'ppt')
            this.filetypeImage = 'add_ppt'
            this.beginPdfshowLoading(1)
            //this.modalUpload = true
            //this.$q.loading.hide()
            //this.$Message.info('PPT正在努力开发中，尽请期待')
          }
        })
      return false
    },
    //获取解析
    fileAnalysisinfo(e) {
      var uploadFile = e
      var userid = localStorage.getItem('user')
      this.$api
        .FileAnalysis({
          id: userid.sub,
          file: uploadFile.url
        })
        .then(res => {
          console.log(res, '解析后的返回')
          this.$store.state.fileAnalysis = res
          this.$q.loading.hide()
          this.timer = void 0
          var joint = res.index.indexOf('index.json')
          console.log(joint, '位置')
          this.$store.state.jointUrl = res.index.substring(0, joint)
          console.log(this.$store.state.jointUrl, '截取过后的内容')
          localStorage.setItem('slide', 1)
          this.initCanvas(0, 'container', 'init')
        })
    },
    handleUploadError() {
      this.beginPdfshowLoading()
      this.$Message.error('上传失败！请查看PDF页数是否超过100页 是否符合标准')
      this.modalUpload = true
      this.modalUploadType = true
    },
    HihandleUploadError() {
      this.beginPdfshowLoading()
      this.$Message.error('上传失败！请查看PDF页数是否超过100页 是否符合标准')
    },
    upload() {
      this.modalUpload = false
      this.modalUploadType = true
    },
    uploadPDF() {
      this.showPPT = false
    },
    uploadPPT() {
      this.$Message.warning('载入PPT文件正在研发中，敬请期待...')
    },
    openNew() {
      this.modal_loading = true
      this.openNewWord = '正在制作画板...'
      setTimeout(() => {
        this.modal_loading = false
        this.modalUpload = false
        this.openNewWord = '开启新画板'
        this.$store.state.uploadUrl = this.$store.state.newboardUrl
        this.$store.state.mode = 'pencil-alt'
        this.whiteboard = '1'
        localStorage.setItem('classname', 'HiTeach CC')
        localStorage.setItem('fileType', 'pdf')
        this.$Message.success('制作画板制作成功')
      }, 1500)
    },
    handleFormatError(file) {
      this.$Notice.config({
        top: 500,
        duration: 3
      })
      this.$Notice.warning({
        title: '上传格式有误',
        desc: '您上传的文件 ' + file.name + ' 格式不正确, 请上传PDF格式！'
      })
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '上传文件大小限制',
        desc: '您上传的文件  ' + file.name + '大小超过5M, 请上传不超过5M的文件！'
      })
    },
    resize(newRect) {
      this.width = newRect.width
      this.height = newRect.height
      this.top = newRect.top
      this.left = newRect.left
    },
    /*渲染部分（重写）*/
    rendererinof(slide) {
      console.log(slide, '调用了渲染方法')
      if (slide != 'undefined') {
        // let stageInfo =JSON.parse(localStorage.getItem('stageInfo'))
        let stageInfo = this.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)
              this.layer.add(boardBg)
              this.layer.batchDraw()
            } else if (type == 'Line') {
              let lastLine = new Konva.Line(attr)
              this.layer.add(lastLine)
              this.layer.batchDraw()
            } else if (type == 'Text') {
              let text = new Konva.Text(attr)
              this.layer.add(text)
              this.layer.batchDraw()
            } else {
              let rect
              if (type == 'Circle') {
                rect = new Konva.Circle(attr)
                this.layer.add(rect)
              } else if (type == 'Ellipse') {
                rect = new Konva.Ellipse(attr)
                this.layer.add(rect)
              } else if (type == 'Star') {
                rect = new Konva.Star(attr)
                this.layer.add(rect)
              } else if (type == 'Rect') {
                rect = new Konva.Rect(attr)
                this.layer.add(rect)
              } else if (type == 'RegularPolygon') {
                rect = new Konva.RegularPolygon(attr)
                this.layer.add(rect)
              }
              this.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, '图片高')
          let ratio = (window.innerHeight / imageObj.height).toFixed(2)
          imageObj.height = imageObj.height * ratio
          imageObj.width = imageObj.width * ratio
          console.log(ratio, '比例')
          var stageX = (window.innerWidth - imageObj.width) / 2 && imageObj.width !== '' ? (window.innerWidth - imageObj.width) / 2 : 0
          let boardBg = new Konva.Image({
            x: stageX,
            y: locationY ? parseInt(locationY) : 0,
            image: imageObj,
            name: 'boardBg'
          })
          console.log(imageObj.width, '图片呈现宽')
          console.log(imageObj.height, '图片呈现高')
          this.layer.add(boardBg)
          this.layer.batchDraw()
        }
      }
    },
    //加载每页学生互动数据
    prestraindata() {
      let that = this
      let pagepercentage = JSON.parse(localStorage.getItem('msgBody'))
      let studentnum = that.$store.state.students
      let nowpage = that.$store.state.carouselSlide
      if (pagepercentage) {
        console.log(pagepercentage, '进入到当页有数据')
        for (var i = 0; i < pagepercentage.length; i++) {
          if (nowpage === pagepercentage[i].page) {
            that.$store.state.answerstatus = pagepercentage[i].answerstatus
            that.$store.state.answervalue = pagepercentage[i].correctanswer
            that.$store.state.answerpattern = pagepercentage[i].pattern
            that.$store.state.zoom = pagepercentage[i].screenzoom
            that.$store.state.IRSswitch = pagepercentage[i].IRSbtn
            that.$store.state.AnswerSelect = pagepercentage[i].letterselect
            that.$store.state.AnswerNumselect = pagepercentage[i].numberselect
            that.$store.state.worksArr = pagepercentage[i].workData
            this.worksData = pagepercentage[i].workData
            this.irshint = pagepercentage[i].irshintStatus
            this.irsModel = pagepercentage[i].irsmodel
            if (pagepercentage[i].totalirs.length < studentnum.length) {
              for (var e = 0; e < studentnum.length; e++) {
                let arr1 = pagepercentage[i].totalirs
                let arr3 = arr1.filter(item => item.id === studentnum[e].id)
                if (arr3.length) studentnum[e] = arr3[0]
                this.$store.state.students = studentnum
              }
            } else if (pagepercentage[i].totalirs.length === studentnum.length) {
              that.$store.state.students = pagepercentage[i].totalirs
            }
          }
        }
      } else {
        this.StudentPercentage = 0
        this.irsModel = 'normal'
      }
    },
    pen(slide) {
      console.log('进入PEN')
      return new Promise((r, j) => {
        let that = this
        this.prestraindata() //翻页加载当页的互动数据
        this.answerSelect()
        this.studentPercentages()
        that.stage = new Konva.Stage({
          container: 'container',
          width: window.innerWidth,
          height: window.innerHeight
          // draggable: true
        })
        // 初始化画板
        let stage = that.stage
        that.$store.state.stage = that.stage
        that.layer = new Konva.Layer()
        let layer = that.layer
        that.$store.state.layer = layer
        stage.add(layer)
        this.rendererinof(slide)
        // 定义绘制所需的一些属性
        let isPaint = false // 画笔是否生效
        let mode = that.$store.state.mode // 绘制模式
        let opacity = 1 // 镭射笔透明度
        let lineId = '' // 线条id
        let lastLine // 线条
        let rect // 各种图形的容器
        let shapeType // 绘制图形的类型 circle、rect...
        let start = []
        let end = [] // 记录绘制图形的起始点坐标、结束点坐标
        // 点击画布 获取到e.pos、mode等绘制信息
        stage.on('mousedown.1 touchstart.1', function(e) {
          console.log('进入11111111111')
          console.log(stage)
          let target = e.target
          let anim = new Konva.Animation(function(frame) {
            // 镭射笔
            let scale = Math.sin((frame.time * 2 * Math.PI) / 3000) + 0.001
            stage.findOne('#magic').opacity(scale)
          }, layer)
          let penType
          if (mode == 'pencil-alt') {
            penType = that.$store.state.penType ? that.$store.state.penType : 'pencil-alt'
          }
          let strokeColor = that.$store.state.strokeColor
          let strokeWidth = that.$store.state.strokeWidth //形状边框粗度
          let magicColor = that.$store.state.magicColor
          shapeType = that.$store.state.shapeType
          let shapeColor = that.$store.state.shapeColor
          let shapeBorderColor = that.$store.state.shapeBorderColor
          let textSize = that.$store.state.textSize
          let textColor = that.$store.state.textColor
          let pos = stage.getPointerPosition()
          // if(mode == 'shape'){
          if (mode == 'text') {
            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,
              y: that.getRelativePointerPosition(stage).y,
              fontSize: textSize,
              fill: textColor,
              draggable: true,
              width: 300,
              height: 120,
              name: 'text'
            })
            layer.add(textNode)
            mode = 'check'
            that.$store.state.mode = 'check'
            let tr = new Konva.Transformer({
              node: textNode,
              enabledAnchors: ['middle-left', 'middle-right'],
              anchorStroke: '#00a6ff',
              anchorFill: '#fff',
              anchorSize: 12,
              anchorCornerRadius: 5,
              anchorStrokeWidth: 2,
              borderStroke: '#6ac9fc',
              borderStrokeWidth: 2,
              borderDash: [3, 3],
              padding: 10,
              boundBoxFunc: function(oldBox, newBox) {
                newBox.width = Math.max(50, newBox.width)
                newBox.height = Math.max(50, newBox.height)
                return newBox
              }
            })
            textNode.on('transform', function() {
              // reset scale, so only with is changing by transformer
              textNode.setAttrs({
                width: Math.max(textNode.width() * textNode.scaleX(), 20),
                height: Math.max(textNode.height() * textNode.scaleY(), 20),
                scaleX: 1,
                scaleY: 1
              })
            })
            layer.add(tr)
            layer.draw()
            textNode.on('click', () => {
              textNode.hide()
              tr.show()
              layer.draw()
              let textPosition = textNode.absolutePosition()
              let stageBox = stage.container().getBoundingClientRect()
              let areaPosition = {
                x: stageBox.left + textPosition.x,
                y: stageBox.top + textPosition.y
              }
              let textarea = document.createElement('textarea')
              document.body.appendChild(textarea)
              textarea.value = textNode.text()
              textarea.style.position = 'absolute'
              textarea.style.top = areaPosition.y + 'px'
              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'
              textarea.style.margin = '0px'
              textarea.style.overflow = 'hidden'
              textarea.style.background = 'none'
              textarea.style.outline = 'none'
              textarea.style.resize = 'none'
              textarea.style.lineHeight = textNode.lineHeight()
              textarea.style.fontFamily = textNode.fontFamily()
              textarea.style.transformOrigin = 'left top'
              textarea.style.textAlign = textNode.align()
              textarea.style.color = textNode.fill()
              let rotation = textNode.rotation()
              let transform = ''
              if (rotation) {
                transform += 'rotateZ(' + rotation + 'deg)'
              }
              let px = 0
              let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
              if (isFirefox) {
                px += 2 + Math.round(textNode.fontSize() / 20)
              }
              transform += 'translateY(-' + px + 'px)'
              textarea.style.transform = transform
              textarea.style.height = 'auto'
              textarea.style.height = textarea.scrollHeight + 3 + 'px'
              textarea.focus()
              function removeTextarea() {
                textarea.parentNode.removeChild(textarea)
                window.removeEventListener('click', handleOutsideClick)
                textNode.show()
                tr.hide()
                tr.forceUpdate()
                layer.draw()
              }
              function setTextareaWidth(newWidth) {
                if (!newWidth) {
                  // set width for placeholder
                  newWidth = textNode.placeholder.length * textNode.fontSize()
                }
                // some extra fixes on different browsers
                let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
                let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
                if (isSafari || isFirefox) {
                  newWidth = Math.ceil(newWidth)
                }
                let isEdge = document.documentMode || /Edge/.test(navigator.userAgent)
                if (isEdge) {
                  newWidth += 1
                }
                textarea.style.width = newWidth + 'px'
              }
              textarea.addEventListener('keydown', function(e) {
                // hide on enter
                // but don't hide on shift + enter
                if (e.keyCode === 13 && !e.shiftKey) {
                  textNode.text(textarea.value)
                  removeTextarea()
                }
                // on esc do not set value back to node
                if (e.keyCode === 27) {
                  removeTextarea()
                }
              })
              textarea.addEventListener('keydown', function(e) {
                console.log(e)
                let scale = textNode.getAbsoluteScale().x
                setTextareaWidth(textNode.width() * scale)
                textarea.style.height = 'auto'
                textarea.style.height = textarea.scrollHeight + textNode.fontSize() * 2 + 'px'
              })
              function handleOutsideClick(e) {
                if (e.target !== textarea) {
                  textNode.text(textarea.value)
                  removeTextarea()
                }
              }
              setTimeout(() => {
                window.addEventListener('click', handleOutsideClick)
              })
            })
          }
          if (mode == 'check') {
            // 选择工具
            document.body.classList.remove('cursor-fdj')
            var checkvalue = that.$store.state.checkvalue
            if (checkvalue === 'checkbtn') {
              console.log('进入基础选择')
              if (target == stage) {
                console.log('进入stage的层面')
                // stage.find('Transformer').destroy()
                stage.find('Transformer').forEach(function(ele, i) {
                  if (ele.attrs.name == 'default') {
                    ele.destroy()
                  }
                })
                layer.draw()
              } else {
                console.log(target.attrs.name, '拖动元素的名称')
                target.draggable(true) //介于是否拖动
                if (target.attrs.name == 'text') {
                  return
                }
                target.on('click tap', function(e) {
                  // stage.find('Transformer').destroy()
                  stage.find('Transformer').forEach(function(ele, i) {
                    if (ele.attrs.name == 'default') {
                      ele.destroy()
                    }
                  })
                  if (target.attrs.name !== 'boardBg') {
                    let tr = new Konva.Transformer({
                      anchorStroke: '#00a6ff',
                      anchorFill: '#fff',
                      anchorSize: 12,
                      anchorCornerRadius: 5,
                      anchorStrokeWidth: 2,
                      borderStroke: '#6ac9fc',
                      borderStrokeWidth: 2,
                      borderDash: [3, 3],
                      padding: 10,
                      name: 'default'
                    })
                    layer.add(tr)
                    tr.attachTo(this)
                    layer.draw()
                  } else {
                    target.draggable(false)
                  }
                  //tr.on('mouseenter', function () {
                  //    stage.container().style.cursor = 'help';
                  //});
                  //tr.on('mouseleave', function () {
                  //    stage.container().style.cursor = 'default';
                  //});
                })
              }
            } else if (checkvalue == 'hand') {
              //拖动效果
              mode = 'hand'
            }
          }
          if (mode == 'hand') {
            console.log('触发了！')
            stage.draggable(true)
            console.log(stage, '查看内容')
            document.body.style.cursor = 'grab'
          } else {
            stage.draggable(false)
            document.body.style.cursor = 'default'
          }
          if (penType == 'pencil-alt' || penType == 'highlighter' || penType == 'magic') {
            if (penType == 'pencil-alt') {
              strokeColor = strokeColor
              strokeWidth = strokeWidth * 2
              opacity = 1
              lineId = ''
              // anim.stop();
            } else if (penType == 'highlighter') {
              strokeColor = strokeColor
              strokeWidth = strokeWidth * 5
              opacity = 0.5
              lineId = ''
              // anim.stop();
            } else if (penType == 'magic') {
              if (stage.findOne('#magic')) {
                stage.findOne('#magic').destroy()
              }
              strokeColor = strokeColor
              strokeWidth = strokeWidth * 5
              opacity = 0.5
              lineId = 'magic'
              anim.start()
            }
            isPaint = true
            lastLine = new Konva.Line({
              stroke: strokeColor,
              strokeWidth: strokeWidth,
              lineCap: 'round',
              lineJoin: 'round',
              opacity: opacity,
              globalCompositeOperation: 'source-over',
              points: [that.getRelativePointerPosition(stage).x, that.getRelativePointerPosition(stage).y],
              id: lineId,
              name: 'brush',
              closed: false,
              shadowBlur: 1,
              shadowColor: strokeColor,
              tension: 0.5
            })
            layer.add(lastLine)
          } else if (mode == 'shape') {
            // 画各种图形
            document.body.classList.remove('cursor-fdj')
            isPaint = true
            if (shapeType == 'line' || shapeType == 'long-arrow-alt-right') {
              // 直线
              rect = new Konva.Line({
                fill: shapeBorderColor,
                stroke: shapeBorderColor,
                strokeWidth: 5,
                closed: true,
                globalCompositeOperation: 'source-over',
                points: [that.getRelativePointerPosition(stage).x, that.getRelativePointerPosition(stage).y],
                name: 'line',
                lineCap: 'round',
                lineJoin: 'round'
              })
              layer.add(rect)
            } else {
              if (shapeType == 'square') {
                // 矩形
                rect = new Konva.Rect({
                  x: that.getRelativePointerPosition(stage).x - 10,
                  y: that.getRelativePointerPosition(stage).y - 10,
                  width: 10,
                  height: 10,
                  fill: shapeColor,
                  stroke: shapeBorderColor,
                  strokeWidth: 4,
                  name: 'rect'
                })
              } else if (shapeType == 'circle') {
                // 正圆
                rect = new Konva.Circle({
                  x: that.getRelativePointerPosition(stage).x - 5,
                  y: that.getRelativePointerPosition(stage).y - 5,
                  // radius: 50,
                  radius: 5,
                  fill: shapeColor,
                  stroke: shapeBorderColor,
                  strokeWidth: 4,
                  name: 'circle'
                })
              } else if (shapeType == 'ellipse') {
                // 椭圆
                rect = new Konva.Ellipse({
                  x: that.getRelativePointerPosition(stage).x - 5,
                  y: that.getRelativePointerPosition(stage).y - 5,
                  // radius: 50,
                  radiusX: 5,
                  radiusY: 5,
                  fill: shapeColor,
                  stroke: shapeBorderColor,
                  strokeWidth: 4,
                  name: 'ellipse'
                })
              } else if (shapeType == 'campground') {
                // 三角形
                rect = new Konva.RegularPolygon({
                  x: that.getRelativePointerPosition(stage).x - 10,
                  y: that.getRelativePointerPosition(stage).y - 5,
                  sides: 3,
                  radius: 10,
                  fill: shapeColor,
                  stroke: shapeBorderColor,
                  strokeWidth: 4,
                  name: 'campground'
                })
              } else if (shapeType == 'star') {
                // 五角星
                rect = new Konva.Star({
                  x: that.getRelativePointerPosition(stage).x - 7,
                  y: that.getRelativePointerPosition(stage).y - 7,
                  numPoints: 5,
                  innerRadius: 4,
                  outerRadius: 8,
                  fill: shapeColor,
                  stroke: shapeBorderColor,
                  strokeWidth: 4,
                  name: 'star'
                })
              }
              console.log(rect)
              console.log(shapeType)
              //layer.add(rect)//点击会生成一个印章图形
              console.log(layer)
              layer.draw()
            }
          } else if (mode == 'eraser') {
            console.log('点击了删除元素')
            var trs = new Konva.Transformer({})
            layer.add(trs)
            console.log(trs)
            //trs.nodes();
            var selectionRectangle = new Konva.Rect({
              fill: 'rgba(180,180,180,0.5)'
            })
            console.log(selectionRectangle)
            layer.add(selectionRectangle)
            var x1, y1, x2, y2
            console.log(x1, y1, x2, y2)
            stage.on('mousedown.2 touchstart.2', e => {
              // do nothing if we mousedown on eny shape
              if (e.currentTarget !== stage) {
                return
              }
              x1 = that.getRelativePointerPosition(stage).x
              y1 = that.getRelativePointerPosition(stage).y
              x2 = that.getRelativePointerPosition(stage).x
              y2 = that.getRelativePointerPosition(stage).y

              console.log(x1, x2, y1, y2)
              selectionRectangle.visible(true)
              selectionRectangle.width(0)
              selectionRectangle.height(0)
              layer.draw()
            })
            stage.on('mousemove.2 touchmove.2', () => {
              // no nothing if we didn't start selection
              if (!selectionRectangle.visible()) {
                return
              }
              x2 = that.getRelativePointerPosition(stage).x
              y2 = that.getRelativePointerPosition(stage).y
              selectionRectangle.setAttrs({
                x: Math.min(x1, x2),
                y: Math.min(y1, y2),
                width: Math.abs(x2 - x1),
                height: Math.abs(y2 - y1)
              })
              layer.batchDraw()
              //console.log(selectionRectangle)
            })
            stage.on('mouseup.2 touchend.2', () => {
              // no nothing if we didn't start selection
              if (!selectionRectangle.visible()) {
                return
              }
              // update visibility in timeout, so we can check it in click event
              setTimeout(() => {
                selectionRectangle.visible(false)
                layer.batchDraw()
              })
              var shapes = stage.getChildren()[0].children.toArray()

              var box = selectionRectangle.getClientRect()

              var selected = shapes.filter(shape => (!shape.attrs.name || shape.attrs.name !== 'boardBg') && Konva.Util.haveIntersection(box, shape.getClientRect()))
              stage.eventListeners.mousedown = stage.eventListeners.mousedown.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.mousemove = stage.eventListeners.mousemove.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.mouseup = stage.eventListeners.mouseup.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.touchend = stage.eventListeners.touchend.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.touchmove = stage.eventListeners.touchmove.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.touchstart = stage.eventListeners.touchstart.filter(i => (i.name = '2')).splice(0, 1)
              //console.log(selected, '内容')
              //console.log(stage.eventListeners,'点击过后的')
              selected.forEach(i => {
                console.log(i)
                i.destroy()
              })
              //trs.nodes(selected);
              //layer.batchDraw();
            })
            document.body.classList.remove('cursor-fdj')
            if (e.target != stage && e.target.attrs.name != 'boardBg') {
              // stage.find('Transformer').destroy()
              stage.find('Transformer').forEach(function(ele, i) {
                if (ele.attrs.name == 'default') {
                  ele.destroy()
                }
              })
              e.target.destroy()
              layer.draw()
            }
          }
        })
        // 离开画布 关闭线条生效，重置画笔开始结束数组
        stage.on('mouseup.1 touchend.1', function() {
          isPaint = false
          ;(start = []), (end = [])
        })
        // 介于点击和离开之间，在画布上面移动，获取移动的e.pos信息，将信息赋值给正在绘制的图形
        stage.on('mousemove.1 touchmove.1', function(e) {
          if (mode == 'check') {
            document.body.classList.remove('cursor-fdj')
            if (e.target == stage || e.target.attrs.name == 'boardBg') {
              document.body.style.cursor = 'default'
            } else {
              document.body.style.cursor = 'move'
              // mode='check'
            }
          }
          // 直线的
          if (!isPaint) {
            return
          }
          let canvasproportion = that.$store.state.zoom
          const pos = stage.getPointerPosition()
          // get absolute scale x
          var scaleX = stage.getAbsoluteScale().x
          let onex = that.getRelativePointerPosition(stage).x
          let oney = that.getRelativePointerPosition(stage).y
          let newPoints = []
          if (mode == 'pencil-alt' || mode == 'highlighter' || mode == 'magic') {
            //console.log(onex, oney, 'XY的坐标')
            if (this.oldonex == '' && this.oldoney == '') {
              this.oldonex = onex
              this.oldoney = oney
              this.newPoints = lastLine.points().concat([onex, oney])
            } else {
              if (this.oldonex != onex || this.oldoney != oney) {
                this.oldonex = onex
                this.oldoney = oney
                this.newPoints = lastLine.points().concat([onex, oney])
              }
            }
            //let newPoints = lastLine.points().concat([onex, oney])
            document.body.classList.remove('cursor-fdj')
            lastLine.points(this.newPoints)
            layer.batchDraw()
          } else {
            document.body.classList.remove('cursor-fdj')
            if (!rect) {
              return
            }
            let name = rect.name()
            if (name == 'line') {
              let newPoints
              if (shapeType == 'line') {
                if (rect.points().length > 4) {
                  newPoints = rect
                    .points()
                    .slice(0, 2)
                    .concat([pos.x, pos.y])
                } else {
                  newPoints = rect.points().concat([pos.x, pos.y])
                }
              } else if (shapeType == 'long-arrow-alt-right') {
                if (rect.points().length > 4) {
                  newPoints = rect
                    .points()
                    .slice(0, 2)
                    .concat([pos.x, pos.y])
                  let start = rect.points().slice(0, 2)
                  let end = rect.points().slice(-2)
                  let theta = 30
                  let headlen = 30 // 边长
                  let angle = (Math.atan2(start[1] - end[1], start[0] - end[0]) * 180) / Math.PI
                  let angle1 = ((angle + theta) * Math.PI) / 180
                  let angle2 = ((angle - theta) * Math.PI) / 180
                  let topX = headlen * Math.cos(angle1)
                  let topY = headlen * Math.sin(angle1)
                  let botX = headlen * Math.cos(angle2)
                  let botY = headlen * Math.sin(angle2)
                  newPoints = newPoints.concat([pos.x, pos.y, pos.x + topX, pos.y + topY, pos.x + botX, pos.y + botY, pos.x, pos.y])
                } else {
                  newPoints = rect.points().concat([pos.x, pos.y])
                }
              }
              rect.points(newPoints)
            } else if (name == 'rect') {
              // 矩形
              if (start.length < 1) {
                start = [pos.x + 10, pos.y + 10]
              }
              let newPoints = end.concat([pos.x + 10, pos.y + 10]).slice(-2)

              rect.width(newPoints[0] - start[0] + 10)
              rect.height(newPoints[1] - start[1] + 10)
            } else if (name === 'circle') {
              // 正圆
              if (start.length < 1) {
                start = [pos.x + 5, pos.y + 5]
              }
              let newPoints = end.concat([pos.x + 5, pos.y + 5]).slice(-2)
              let radiusX = newPoints[0] - start[0] + 5
              let radiusY = newPoints[1] - start[1] + 5
              if (radiusX < 10 || radiusY < 10) {
                return
              }
              rect.radius(newPoints[0] - start[0] + 5)
              // rect.radiusY(newPoints[1] - start[1] + 5);
            } else if (name === 'ellipse') {
              // 椭圆
              if (start.length < 1) {
                start = [pos.x + 5, pos.y + 5]
              }
              let newPoints = end.concat([pos.x + 5, pos.y + 5]).slice(-2)
              let radiusX = newPoints[0] - start[0] + 5
              let radiusY = newPoints[1] - start[1] + 5
              if (radiusX < 10 || radiusY < 10) {
                return
              }
              rect.radiusX(newPoints[0] - start[0] + 5)
              rect.radiusY(newPoints[1] - start[1] + 5)
            } else if (name == 'campground') {
              // 三角形&多边形
              if (start.length < 1) {
                start = [pos.x - 10, pos.y - 5]
              }
              let newPoints = end.concat([pos.x, pos.y]).slice(-2)
              let radiusX = newPoints[0] - start[0] + 5
              rect.radius(newPoints[0] - start[0])
            } else if (name == 'star') {
              // 五角星
              if (start.length < 1) {
                start = [pos.x - 4, pos.y - 4]
              }
              let newPoints = end.concat([pos.x, pos.y]).slice(-2)
              rect.innerRadius(newPoints[0] - start[0])
              rect.outerRadius((newPoints[0] - start[0]) * 2)
            }
            layer.add(rect)
            layer.batchDraw()
            // var c =layer.clone();
            // localStorage.setItem('stageInfo',JSON.stringify(c));
          }
        })
        // 工具切换（点击侧边栏按钮）
        let tools = document.getElementById('tool2').getElementsByTagName('li')
        console.log(tools)
        for (let i = 0; i < tools.length; i++) {
          tools[i].addEventListener('click', function() {
            let val = this.getAttribute('value')
            if (!val) {
              return
            }
            that.$store.state.mode = val
            if (val == 'check') {
              console.log('进入了check')
              document.body.classList.remove('cursor-fdj')
              var valuename = that.$store.state.checkvalue
              if (valuename === 'checkbtn') {
                for (let i = 0; i < layer.children.length; i++) {
                  if (layer.children[i].attrs.name === 'boardBg') {
                    layer.children[i].draggable(false)
                  } else {
                    layer.children[i].draggable(true)
                  }
                }
              } else if (valuename === 'stretchbox') {
                console.log('进入初始进入拉框选择')
                console.log(stage.eventListeners, '开始的')
              }
            } else {
              for (let i = 0; i < layer.children.length; i++) {
                layer.children[i].draggable(false)
              }
            }
            if (val == 'undo') {
              document.body.classList.remove('cursor-fdj')
              if (layer.children.length > 1) {
                layer.children.pop()
                layer.draw()
              }
            }
            // if(val == 'shape'){
            //   document.body.style.cursor = 'crosshair';
            // }
            if (val == 'eraser') {
              console.log('点击了删除按钮')
              console.log(stage)
              console.log(that.$store.state.eraser, 'Vuex的值')
              stage.eventListeners.mousedown = stage.eventListeners.mousedown.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.mousemove = stage.eventListeners.mousemove.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.mouseup = stage.eventListeners.mouseup.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.touchend = stage.eventListeners.touchend.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.touchmove = stage.eventListeners.touchmove.filter(i => (i.name = '2')).splice(0, 1)
              stage.eventListeners.touchstart = stage.eventListeners.touchstart.filter(i => (i.name = '2')).splice(0, 1)
              //console.log(stage.eventListeners)
              document.body.classList.remove('cursor-fdj')
              if (val == that.$store.state.eraser) {
                mode = 'eraser'
              } else {
                console.log(val, '执行下面这部分了')
                if (that.whiteboard === '1') {
                  layer.children.length = 0
                } else {
                  layer.children.length = 1
                }
                layer.draw()
                //that.clearAll()
              }
            } else {
              mode = val
              that.$store.state.eraser = 'eraser'
              //that.$store.state.checkvalue='checkbtn'
              document.body.style.cursor = 'default'
              //stage.find('Transformer').destroy()
              stage.find('Transformer').forEach(function(ele, i) {
                console.log(ele, i, '查看执行的内容')
                if (ele.attrs.name == 'default') {
                  ele.destroy()
                }
              })
              layer.draw()
            }
            if (val == 'zooms') {
              console.log('点击了缩放工具！')
              document.body.classList.add('cursor-fdj')
              //console.log(that.$store.state.mode)
              //console.log(document.body.style)
              //let zoomType = that.$store.state.zoomType
              //if (zoomType == 'hand') {
              //    mode = that.$store.state.zoomType
              //}
            }
          })
        }
        // 键盘删除
        window.onkeydown = function(e) {
          if (e.keyCode == '46') {
            if (stage.find('Transformer')[0]._node.attrs.name != 'boardBg') {
              // 键盘不删除背景图
              stage.find('Transformer')[0]._node.destroy()
              // stage.find('Transformer').destroy()
              stage.find('Transformer').forEach(function(ele, i) {
                if (ele.attrs.name == 'default') {
                  ele.destroy()
                }
              })
              layer.draw()
            }
          }
          if (e.keyCode == '38') {
            // 上 之后需要判断是否处于文字编辑状态
            that.carousel.previous()
          }
          if (e.keyCode == '40') {
            // 下
            that.carousel.next()
          }
          if (isPaint == true) {
            if (mode == 'shape') {
              if (e.keyCode == '187') {
                if (rect.name() == 'star') {
                  rect.numPoints(rect.numPoints() + 1)
                } else {
                  rect.sides(rect.sides() + 1)
                }
                layer.batchDraw()
              } else if (e.keyCode == '189') {
                if (rect.name() == 'star') {
                  if (rect.numPoints() > 3) {
                    rect.numPoints(rect.numPoints() - 1)
                  }
                } else {
                  if (rect.sides() > 3) {
                    rect.sides(rect.sides() - 1)
                  }
                }
                layer.batchDraw()
              }
            }
          }
        }
        console.log(this.irsModel, this.$store.state.students, '查看当前页的状态和学生')
        let nowIrsmodel = this.irsModel
        let isAnswer = this.$store.state.students.filter(item => {
          return item.option != ''
        })
        if (nowIrsmodel != 'normal' && isAnswer.length == 0) {
          console.log('当前页有IRS活动')
          var times = new Date().getTime()
          var msgInitiative = {
            action: 'State.Get',
            clientType: 'HiTeachCC',
            sender: localStorage.getItem('user').sub,
            timestamp: times,
            waitReturn: false,
            payload: ''
          }
          this.singnalRMessage(msgInitiative, '8888', '', nowIrsmodel)
        }

        r(200)
      })
    },
    //每10秒广播一次state状态
    broadcastState() {
      if (this.stage != null) {
        console.log('调用到了广播方法')
        var times = new Date().getTime()
        var msgInitiative = {
          action: 'State.Get',
          clientType: 'HiTeachCC',
          sender: JSON.parse(localStorage.getItem('user')).sub,
          timestamp: times,
          waitReturn: false,
          payload: ''
        }
        let irsstatsName = ''
        if (this.irsModel == 'normal') {
          irsstatsName = ''
        } else if (this.irsModel == 'irsImmediately') {
          irsstatsName = 'irsImmediately'
        } else if (this.irsModel == 'irsText') {
          irsstatsName = 'irsText'
        } else if (this.irsModel == 'irsGather') {
          irsstatsName = 'irsGather'
        }
        this.singnalRMessage(msgInitiative, '8888', '', irsstatsName)
      }
    },
    deleteSelectPage() {
      this.deletePage = true
      console.log(this.$store.state.carouselSlide, this.$store.state.deletePageNum)
      console.log('刪除1page')
      if (this.$store.state.imgArr.length > 1) {
        this.$store.state.imgArr.splice(this.$store.state.deletePageNum - 1, 1)
        this.$store.state.imgArrOld.splice(this.$store.state.deletePageNum - 1, 1)
        //console.log(this.$store.state.imgArrOld)
        this.$store.state.imgArr.idArr.splice(this.$store.state.deletePageNum - 1, 1)
        this.stage.destroyChildren()
        this.saveArr.splice(this.$store.state.deletePageNum - 1, 1)
        localStorage.setItem('stageInfo', JSON.stringify(this.saveArr))
        if (this.$store.state.deletePageNum != 1) this.$store.state.carouselSlide = this.$store.state.carouselSlide - 1 > 0 ? this.$store.state.carouselSlide - 1 : 1
        else {
          this.$store.state.carouselSlide = this.$store.state.carouselSlide > 0 ? this.$store.state.carouselSlide : 1
          this.saveStage()
        }
      } else if (this.$store.state.deletePageNum == 1 && this.$store.state.imgArr.length == 1) {
        console.log(this.stage)
        this.stage.destroyChildren()
        this.stage.clear()
        this.saveArr.splice(0, 1)
        localStorage.setItem('stageInfo', JSON.stringify(this.saveArr))
        this.$store.state.oldSlide = 1
        this.$store.state.carouselSlide = 1
        this.$store.state.imgArrOld.splice(0, 1, this.whiteBG)
        this.$store.state.imgArr.splice(0, 1, this.whiteBG)
        console.log(this.$store.state.imgArr)
        // this.addNewPage()
        this.saveStage()
      }
      this.$store.state.totalpage = this.$store.state.imgArr.length
    },
    addNewPage(e) {
      this.addBlank = true
      console.log(typeof this.$store.state.oldSlide, '类型')
      this.$store.state.imgArr.splice(this.$store.state.oldSlide, 0, this.whiteBG)
      this.$store.state.imgArrOld.splice(this.$store.state.oldSlide, 0, this.whiteBG)
      this.$store.state.carouselSlide = typeof this.$store.state.oldSlide == 'string' ? Number(this.$store.state.oldSlide) + 1 : this.$store.state.oldSlide + 1
      this.$store.state.oldSlide = this.$store.state.oldSlide + 1
      let newtotalpage = this.$store.state.totalpage
      this.$store.state.totalpage = newtotalpage + 1
      console.log(this.$store.state.totalpage, '查看总页数')
    },
    saveStage(index) {
      // 切换轮播时保存舞台
      console.log('调用到舞台轮换')
      console.log(this.$store.state.carousel, '切换舞台时的内容')
      document.body.classList.remove('cursor-fdj')
      let that = this
      //翻页关闭作品收集开关
      that.$store.state.workswitch = false
      that.workSwitch = false
      that.workinfo.icon = 'stop'
      that.workinfo.text = '停止收集'
      //处理翻页默认选中画笔
      that.$store.state.eraser = 'eraser'
      let slide = that.$store.state.oldSlide
      let addnewpage = this.$store.state.addNew
      let slideNext = Number(that.$store.state.carouselSlide)
      this.slidenum = slideNext
      let fileType = localStorage.getItem('fileType')
      if (slideNext > this.$store.state.totalpage) {
        slideNext = 1
        this.$store.state.carouselSlide = 1
      }
      console.log(this.irsModel, '换页的值')
      //var fileStatusinfos = localStorage.getItem('fileType')
      console.log(slide, slideNext, '查看当前页')
      /* this.switchoverpdf(slide)*/
      //that.stage.find('Transformer').destroy();//删除编辑
      //that.stage.find('Transformer').forEach(function (ele, i) {
      //    if (ele.attrs.name == 'default') {
      //        ele.destroy()
      //    }
      //})
      if (this.addBlank) {
        this.slidenum = Number(this.slidenum)
        let addnewpages = that.$store.state.oldSlide - 1
        var minusNum = addnewpages === 0 ? 1 : 2
        var stageImg = that.stage.toDataURL()
        that.$store.state.imgArr[slide - minusNum] = stageImg
        var layerInfo = that.layer.clone()
        that.saveArr[slide - minusNum + ''] = layerInfo
        this.switchoverpdf(addnewpages)
        this.opennewpage()
        that.saveArr.splice(slide - minusNum, 0, layerInfo)
        localStorage.setItem('stageInfo', JSON.stringify(that.saveArr)) //更新缓存数据
        that.layer.children.length = 0
        this.$store.state.totalpage = Number(this.totalpage) + 1
        this.totalpage = Number(this.totalpage) + 1
        //缩略图内容更改
        let litimgArr = that.$store.state.imgArr
        var imgpage = this.slidenum - 1
        if (fileType === 'pdf') {
          for (var l = 0; l < litimgArr.length; l++) {
            if (imgpage < litimgArr[l]) {
              litimgArr = litimgArr[l + 1]
            } else if (imgpage === litimgArr[l]) {
              litimgArr = litimgArr[l + 1]
            }
          }
        } else if (fileType === 'ppt') {
          let pptitemData = this.$store.state.AfterParsing.slides
          let nowPgaes = localStorage.getItem('slide')
          var Datainfo = {
            type: 'normal',
            url: '',
            scoring: '',
            thumbnail: ''
          }
          pptitemData.splice(nowPgaes, 0, Datainfo)
          this.$store.state.AfterParsing.slides = pptitemData

          //新增一页的pageID PPT(待完善)
          console.log(this.$store.state.AfterParsing)
        }
        //关于新加一页 数据修改
        let originalData = JSON.parse(localStorage.getItem('msgBody'))
        for (var i = 0; i < originalData.length; i++) {
          if (this.slidenum < originalData[i].page) {
            originalData[i].page = originalData[i].page + 1
          } else if (this.slidenum === originalData[i].page) {
            originalData[i].page = originalData[i].page + 1
          }
        }
        if (localStorage.getItem('fileType') == 'pdf') {
          //新增一页处理pageID
          that.$store.state.imgArr.idArr.forEach(item => {
            if (imgpage < item.page || imgpage == item.page) {
              item.page = item.page + 1
            }
          })

          let parameter = {
            pageid: this.genID(),
            pagetype: 'Quiz',
            page: imgpage
          }
          that.$store.state.imgArr.idArr.push(parameter)
          localStorage.setItem('msgBody', JSON.stringify(originalData))
          let newIrsback = this.$store.state.irsBack
          for (var c = 0; c < newIrsback.length; c++) {
            if (this.slidenum < newIrsback[c].page) {
              newIrsback[c].page = newIrsback[c].page + 1
            } else if (this.slidenum === newIrsback[c].page) {
              newIrsback[c].page = newIrsback[c].page + 1
            }
          }
          this.$store.state.irsBack = newIrsback
        }
        this.$store.state.mode = 'pencil-alt'
        this.addBlank = false
      } else if (this.deletePage) {
      } else {
        this.switchoverpdf(slide)
        this.opennewpage()
      }
      this.irsModel = 'normal'

      if (this.deletePage == false) {
        if (fileType === 'pdf') {
          let stageImg = that.stage.toDataURL() // 画布截图
          that.$store.state.imgArr[slide - 1] = stageImg
          let layerInfo = that.layer.clone() // 画布内容提取
          that.saveArr[slide - 1 + ''] = layerInfo
          console.log(that.saveArr, '页面的提取')
          localStorage.setItem('stageInfo', JSON.stringify(that.saveArr))
          that.stage.clear()
          console.log(slideNext, '页数页数页数')
          let imanumpage = Number(slideNext) - 1
          console.log(imanumpage, '传进pen的页数')
          this.pen(imanumpage) // 重新准备画布并传入当前使用的背景图
          //this.rendererinof(imanumpage)   //新的渲染页面
        } else if (fileType === 'ppt') {
          if (this.beginPage === this.$store.state.totalpage) {
            console.log('舞台切换1')
            if (this.slidenum > this.$store.state.totalpage) {
              this.slidenum = 1
              this.$store.state.oldSlide = 1
              localStorage.setItem('slide', 1)
              that.initCanvas(0, 'container', 'container')
            } else {
              that.initCanvas(slideNext, 'container', 'container')
            }
          } else {
            console.log('舞台切换2')
            that.initCanvas(slideNext, 'container', 'additional')
            that.beginPage = that.beginPage + 1
          }
        }
        //this.studentPercentages()
        //this.prestrain()
        //this.prestrain(page,nextPagebox)
        var times = new Date().getTime()
        var msgInitiative = {
          action: 'State.Get',
          clientType: 'HiTeachCC',
          sender: localStorage.getItem('user').sub,
          timestamp: times,
          waitReturn: false,
          payload: ''
        }
        console.log(this.irsModel, '现在的值')
        this.singnalRMessage(msgInitiative, '8888', '', '')
      } else {
        //刪除頁面之情況
        if (fileType === 'pdf') {
          let imanumpage = Number(this.$store.state.carouselSlide) - 1
          console.log(imanumpage, '传进pen的页数')
          this.pen(imanumpage) // 重新准备画布并传入当前使用的背景图
          //this.rendererinof(imanumpage)   //新的渲染页面
        } else if (fileType === 'ppt') {
          if (this.beginPage === this.$store.state.totalpage) {
            console.log('舞台切换1')
            if (this.slidenum > this.$store.state.totalpage) {
              this.slidenum = 1
              this.$store.state.oldSlide = 1
              localStorage.setItem('slide', 1)
              this.initCanvas(0, 'container', 'container')
            } else {
              this.initCanvas(this.$store.state.carouselSlide - 1 > 0 ? this.$store.state.carouselSlide - 1 : 1, 'container', 'container')
            }
          } else {
            console.log('舞台切换2')
            this.initCanvas(this.$store.state.carouselSlide - 1 > 0 ? this.$store.state.carouselSlide - 1 : 1, 'container', 'additional')
            this.beginPage = this.beginPage - 1 > 0 ? this.beginPage - 1 : 1
          }
        }
        this.deletePage = false
      }
    },
    zoomFuc() {
      // 缩放 回到1:1
      let stage = this.stage
      let zoom = this.$store.state.zoom
      console.log(zoom, '缩放工具')
      let nowScales = localStorage.getItem('scalings')
      stage.scale({ x: zoom, y: zoom })
      let xandy = stage.absolutePosition()
      console.log(xandy, '位置')
      stage.absolutePosition({
        x: (-stage.width() / 2) * (zoom - 1),
        y: (-stage.height() / 2) * (zoom - 1)
      })
      stage.position({
        x: (-stage.width() / 2) * (zoom - 1),
        y: (-stage.height() / 2) * (zoom - 1)
      })
      if (localStorage.getItem('fileType') == 'ppt' && zoom == 1) {
        //处理PDF相关缩放
        stage.x(this.primevalInit.x)
        console.log(this.stage.size())
        var scaleNumber = this.primevalInit.scale == localStorage.getItem('scalings') ? 1 : localStorage.getItem('scalings')
        this.stage.scaleX(scaleNumber)
        this.stage.scaleY(scaleNumber)
        this.stage.draw()
      }
      let s = stage.getTransform()
      stage.batchDraw()
    },
    question() {
      // if(this.$store.state.submit=='1'){
      let question = this.$store.state.question
      let complexText = new Konva.Text({
        x: 20,
        y: 60,
        text: '问：' + question.text + '\nA：' + question.textselectA + '\nB：' + question.textselectB + '\nC：' + question.textselectC + '\nD：' + question.textselectD,
        fontSize: 24,
        fontFamily: 'Calibri',
        lineHeight: '2',
        fill: '#3993f1',
        width: 300,
        padding: 20,
        align: 'left',
        draggable: true
      })
      this.layer.add(complexText)
      this.layer.draw()
      // }
    },
    showLoading() {
      const spinner = typeof QSpinnerGears !== 'undefined' ? QSpinnerGears : Quasar.components.QSpinnerGears
      Loading.show({
        spinner,
        spinnerColor: 'orange',
        messageColor: 'orange',
        backgroundColor: 'black',
        message: '正在制作中...'
      })
      this.timer = setTimeout(() => {
        Loading.hide()
        this.timer = void 0
      }, 2000)
    },
    //MQTTconnect() {
    //    let that = this
    //    let mqttInfo = JSON.parse(localStorage.getItem('mqtts'))
    //    // 连接选项
    //    let options = {
    //        connectTimeout: 4000, // 超时时间
    //        clientId: mqttInfo.mqtt.connectInfo.clientID,
    //        username: mqttInfo.mqtt.connectInfo.username,
    //        password: mqttInfo.mqtt.connectInfo.password,
    //        timeout: 3,
    //        useSSL: true,
    //        cleanSession: true,
    //        keepAliveInterval: 60,
    //        reconnect: true,
    //        mqttVersion: 4,
    //        mqttVersionExplicit: true
    //    }
    //    let url = 'wss://coreiothubcn.azure-devices.cn/$iothub/websocket?iothub-no-client-cert=true'
    //    let client = this.$mqtt.connect(url, options)
    //    that.client = client
    //    client.on('connect', function () {
    //        console.log('连接服务器成功111')
    //        // 订阅主题，替换productKey和deviceName
    //        that.info = '连接服务器成功'
    //        client.subscribe('$iothub/methods/POST/directMethod/#', function (err) {
    //            if (!err) {
    //                console.log('主题订阅成功2222')
    //                that.$Message.success('通讯连接成功！')
    //            } else {
    //                console.log('主题订阅失败')
    //                that.$Message.success('通讯连接失败，请重试！')
    //            }
    //        })
    //        client.on('message', function (topic, message) {

    //            // message is Buffer
    //            console.log('收到消息 主题：' + topic + '  消息：' + message.toString() + '内容是：' + message)
    //            // localStorage.setItem('irsBack',message);
    //            if (topic.indexOf('$iothub/methods/POST/directMethod/') != -1) {
    //                // TODO
    //                console.log('主题符合')
    //            } else {
    //                return
    //            }
    //            // 收到特定主题要回复一个空消息
    //            let pubTopic = '$iothub/methods/res/200/?$rid=' + topic.split('=')[1]
    //            client.publish(pubTopic, '', {}, (error) => {
    //                if (!error) {
    //                    console.log('回复成功')
    //                }
    //            })
    //        })
    //    })
    //    client.on('error', (error) => {
    //        console.log('连接失败:', error)
    //    })
    //    client.on('message', (topic, msg) => {
    //        console.log(msg.toString())
    //        // let newMessage= JSON.parse(msg);
    //        let res = JSON.parse(msg)
    //        console.log(res, '打印内容')
    //        if (res.TypeId === 0) { // 学生加入教室
    //            this.students = this.$store.state.students
    //            let oneStudent = {
    //                sort: this.$store.state.students.length + 1,
    //                id: res.Payload.StudentId.id,
    //                accountid: res.Payload.StudentId.accountid,
    //                studentName: res.Sender,
    //                sendTime: res.Timestamp,
    //                headImg: res.Payload.avatarUrl,
    //                option: '',
    //                done: true,
    //                score: 0,
    //                rank: '',
    //                class: 'studyboxone',
    //                showcardclass: 'brand',
    //                answerclass: 'studyboxone',
    //                answerbrand: 'brand',
    //                statement: '',//发言,
    //                status: 'online'
    //            }
    //            this.responderId = res.Payload.StudentId.id
    //            console.log(oneStudent, '学生情况')
    //            if (oneStudent.headImg === undefined) {
    //                oneStudent.headImg = 'https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png'
    //            }
    //            for (let i = 0; i < this.students.length; i++) { // 判断重复加入
    //                if (this.students[i].accountid == res.Payload.StudentId.accountid) {
    //                    console.log('重复了')
    //                    this.mqmsg = this.students[i].sort
    //                    this.students[i].id = res.Payload.StudentId.id
    //                    this.directMethod = this.students[i].id
    //                    this.students[i].status = 'online'
    //                    this.sendMsg('BackSeatnum')
    //                    return
    //                }
    //            }
    //            this.students.push(oneStudent)
    //            this.$store.state.students = this.students
    //            this.mqmsg = this.$store.state.students.length
    //            this.directMethod = res.Payload.StudentId.id
    //            this.answer()
    //            this.answerSelect();
    //            this.sendMsg('BackSeatnum')
    //            this.studentPercentages()
    //        } else if (res.TypeId === 1) { // 即问即答
    //            /*学生的deviceid*/
    //            let StudentDeviceId = res.Payload.Answer.id;
    //            /*学生的答案*/
    //            let StudentValue = res.Payload.Answer.value;
    //            /*查询答案发送者的学生*/
    //            let StudentData = this.$store.state.students;
    //            console.log(StudentData, '现在vuex里面的学生！！！！！！！！！')
    //            /*获取当前IRS开关值*/
    //            let Switch = this.$store.state.IRSswitch;
    //            /*处理未答和已答数据状态*/
    //            if (Switch === true) {
    //                for (var i = 0; i < StudentData.length; i++) {
    //                    if (StudentDeviceId === StudentData[i].id) {
    //                        StudentData[i].option = StudentValue;
    //                        StudentData[i].class = 'studybox';
    //                        StudentData[i].showcardclass = 'brand-answer';
    //                    }
    //                }
    //                this.$store.state.students = StudentData;
    //                this.$store.state.dynamicanswerstatus = '1';
    //                //判定当前的答题模式
    //                this.answerpatterns()
    //                this.answer();
    //                this.answerSelect();
    //                this.studentPercentages();
    //            } else {
    //            }
    //            console.log(this.$store.state.students, '修改答题状态后学生')
    //        } else if (res.TypeId == 2) { // 抢权

    //        } else if (res.TypeId == 3) { // 文字云
    //            console.log('现在进入文字云')
    //            let timestamp = res.Timestamp * 1000
    //            let pagenum = this.$store.state.carouselSlide
    //            let time = this.$moment(timestamp).format('YYYY-MM-DD HH:mm');
    //            let TextProcessing = {
    //                id: res.Payload.TextContent.id,
    //                studentName: res.Sender,
    //                sendTime: time,
    //                value: res.Payload.TextContent.value,
    //                page: pagenum
    //            }
    //            this.irstext = this.irstext.concat(TextProcessing)
    //            this.$store.state.irsBack = this.irstext
    //            //把发言归属到学生名下
    //            let studensdata = this.$store.state.students;
    //            let statementname = TextProcessing
    //            let i = '';
    //            for (i = 0; i < studensdata.length; i++) {
    //                if (statementname.studentName === studensdata[i].studentName) {
    //                    studensdata[i].statement = TextProcessing.value
    //                }
    //            }
    //            this.$store.state.students = studensdata
    //        } else if (res.TypeId == 4 || res.TypeId == 5) { // 手动离开教室
    //            let DataStudentr = this.$store.state.students
    //            for (let i = 0; i < DataStudentr.length; i++) {
    //                if (DataStudentr[i].id == res.id) {
    //                    //this.students.splice(i, 1)
    //                    DataStudentr[i].status = 'offline'
    //                }
    //            }
    //            this.$store.state.students = DataStudentr
    //        }
    //    })
    //},
    /*IM相关连接*/
    signalRConnect() {
      console.log('调用执行了IM连接资讯')
      let TMDid = jwt_decode(localStorage.getItem('idToken'))
      let userid = TMDid.sub
      let chanpid = 'HiTeachCC'
      let Pin = '8888'
      let accessToken = localStorage.getItem('accessToken')
      console.log(userid, '用户TMDID')
      this.$api
        .createapi({
          client_name: chanpid,
          user_id: userid,
          pin: Pin,
          local_ip: '',
          channel: '',
          school_code: ''
        })
        .then(res => {
          console.log(res, '申请教室成功')
          localStorage.setItem('classNum', res.channel_num)
          this.classNum = res.channel_num
          this.$api
            .joinclass({
              client_name: 'HiTeachCC',
              user_id: userid,
              pin: Pin,
              channel: this.classNum
            })
            .then(res => {
              this.imConnect = res
              console.log(res, '加入教室成功')
              this.$Message.success('通讯连接已建立')
              this.imConnectinfo(this, res.access_token, res.channel_url)
            })
            .catch(res => {
              console.log(res, '失败原因')
              this.$Message.error('加入教室失败，请尝试重连！')
            })
        })
        .catch(res => {
          console.log(res)
          this.$Message.error('通讯连接失败，请尝试重连！')
        })
    },
    /*IM连接*/
    imConnectinfo(that, acToken, urls) {
      /* signalRInfo(url, acToken);*/
      this.ConnectSignalR(that, urls, acToken)
      //this.$Message.success('通讯连接成功！')
    },
    /*开始连接IM*/
    ConnectSignalR(that, url, token) {
      console.log(url, '连接地址')
      console.log(token)
      console.log(that)
      const options = {
        accessTokenFactory: () => token
      }
      const connection = new signalR.HubConnectionBuilder()
        .withUrl(url, options)
        .configureLogging(signalR.LogLevel.Information)
        .build()
      connection.on('onMessage', onMessage)
      connection.on('onConnected', onConnected)
      connection.on('onDisconnected', onDisconnected)
      //connection.on('connectionSlow', onConnectionSlow);
      connection.onclose(() => {
        console.log('close connection')
        connection
          .start()
          .then(() => console.log('re-connection!'))
          .catch(setTimeout(() => connection.start(), 5000))
      })
      console.log('connecting...')
      connection
        .start()
        .then(() => console.log('connected!'))
        .catch(console.log('Start connect fail!!'))
      function onConnected(message) {
        //data.myConnectionId = message.ConnectionId;
        message.id = this.IMcounter++ // vue transitions need an id
        //  data.messages.unshift(message);
      }
      function onMessage(message) {
        console.log(message, '收到消息!!!!')
        /* console.log(message.To[0],'111111111111')*/
        message.id = that.IMcounter++ // vue transitions need an id
        message.Timestamp = Math.floor(Date.now())
        var uncertainties = message.Text ? message.Text : message.text
        var stateinfo = JSON.parse(uncertainties)
        console.log(stateinfo, '99999999999')
        console.log(JSON.stringify(message), '外部')
        console.log(JSON.stringify(stateinfo), '内部')
        var userSub = JSON.parse(localStorage.getItem('user')).sub
        console.log(userSub, 'use的ID')

        //避免无线循环发送接收消息
        if (stateinfo && stateinfo.sender != userSub) {
          //因为频道10秒广播一次state，所以这里要屏蔽掉自己的发的广播
          console.log('收到消息后调用发送消息方法了！！')
          that.singnalRMessage(stateinfo, '8888', message.ConnectionId)
        }
      }
      function onDisconnected(message) {
        message.id = this.IMcounter++ // vue transitions need an id
      }
    },
    /*signalR发送消息*/
    singnalRMessage(message, pincode, connectionId, statusname) {
      console.log(message, pincode, statusname, '调用到发送消息方法')
      console.log(this.$store.state.IRSswitch, '当前开关的状态')
      if (this.$store.state.IRSswitch == false) {
        return
      } //IRS开关关闭状态直接return 出去不执行下面操作
      var messages = message
      let user = JSON.parse(localStorage.getItem('user'))
      let sender = user.sub
      let receive = []
      var activityRecordNumberS = '198384384636751872'
      if (messages.sender !== user.sub) {
        receive.push(messages.sender)
      }
      console.log(receive, '查看接收者')
      let channelapi = this.imConnect.channel_api + '/messages'
      let classnum = localStorage.getItem('classNum')
      let time = Math.floor(Date.now())
      //学生加入教室一系列操作
      var messageText = {}
      if (messages.action === 'Announce.Ask') {
        //加入教室返回相应课程相关信息
        messageText = {
          payload: {
            announceURL: '',
            announce: {
              classState: 'InProcess',
              hostConnID: '',
              className: 'HiTeachCC',
              memberCount: 0,
              verifyMode: 'Dynamic',
              pincode: pincode,
              channel: classnum,
              memberList: [],
              groupList: [],
              apI_Version: 0,
              allowVisitor: true,
              schoolId: 'HiTeachCC',
              schoolName: '动态云端课程',
              totalOptions: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
            },
            resourcePushHistory: [],
            messagePushHistory: []
          },
          action: 'Announce.Push',
          clientType: 'CC',
          sender: 'HiTeachCC-' + sender,
          timestamp: time,
          waitReturn: false
        }
      } else if (messages.action === 'MemberBinding') {
        //绑定request(座位号及相关学生个人信息)
        this.seatNum = Number(this.seatNum) + 1
        let blobUrl = JSON.parse(localStorage.getItem('blobConnect'))
        console.log(blobUrl, 'BLOB相关信息')
        let urlUser = blobUrl.url + '/' + blobUrl.name + '/' + blobUrl.id
        messageText = {
          payload: {
            activityRecordNumber: activityRecordNumberS,
            id: messages.sender,
            seatID: this.seatNum,
            name: messages.payload.memberName,
            className: 'HiTeachCC',
            schoolId: 'HiTeachCC',
            schoolName: '动态云端课程',
            hostBlobUrl: urlUser,
            clientBlobUrl: urlUser,
            blobSAS: blobUrl.sas,
            errorCode: 0,
            resourcePushHistory: [],
            messagePushHistory: []
          },
          action: 'BindingResult',
          clientType: 'CC',
          sender: 'HiTeachCC-' + sender,
          timestamp: time,
          waitReturn: false
        }
        //确认学生加入和把学生加入到 学生列表
        this.studentAlone = {
          id: messages.sender,
          accountid: messages.payload.memberID,
          studentName: messages.payload.memberName,
          sendTime: time,
          headImg: ''
        }
        this.students = this.$store.state.students
        let oneStudent = {
          sort: this.seatNum,
          id: this.studentAlone.id,
          accountid: this.studentAlone.accountid,
          studentName: this.studentAlone.studentName,
          sendTime: this.studentAlone.sendTime,
          headImg: this.studentAlone.headImg,
          option: '',
          done: true,
          score: 0,
          rank: '',
          class: 'studyboxone',
          showcardclass: 'brand',
          answerclass: 'studyboxone',
          answerbrand: 'brand',
          statement: '', //发言,
          status: 'online'
        }
        if (oneStudent.headImg === undefined || oneStudent.headImg === '') {
          oneStudent.headImg = 'https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png'
        }

        let filterStudy = this.students.filter(item => {
          return item.accountid == this.studentAlone.accountid
        })
        console.log(filterStudy, 'filter的返回值')
        if (filterStudy.length == 0) {
          this.students.push(oneStudent)
        } else {
          messageText = {
            payload: {
              activityRecordNumber: activityRecordNumberS,
              id: filterStudy[0].id,
              seatID: filterStudy[0].sort,
              name: filterStudy[0].studentName,
              className: 'HiTeachCC',
              schoolId: 'HiTeachCC',
              schoolName: '动态云端课程',
              hostBlobUrl: urlUser,
              clientBlobUrl: urlUser,
              blobSAS: blobUrl.sas,
              errorCode: 0,
              resourcePushHistory: [],
              messagePushHistory: []
            },
            action: 'BindingResult',
            clientType: 'CC',
            sender: 'HiTeachCC-' + sender,
            timestamp: time,
            waitReturn: false
          }
        }

        console.log(this.students, '学生情况')
        this.$store.state.students = this.students
      } else if (messages.action === 'State.Get') {
        if (localStorage.getItem('fileType') == 'pdf') {
          let pagenums = localStorage.getItem('slide') ? localStorage.getItem('slide') - 1 : 0
          var ids = this.$store.state.imgArr.idArr[pagenums].pageid
          var types = this.$store.state.imgArr.idArr[pagenums].pagetype
          this.nowpageRender.nowpageIds = ids
          this.nowpageRender.nowpageType = types
          console.log(this.nowpageRender.nowpageIds, ids, this.$store.state.imgArr.idArr, 'ID对照')
        }
        //准备学生端向教师getstatus数据内容
        var times = new Date().getTime()
        var randomId = this.genID()
        var payloadContent = {}
        if (this.irsModel == 'normal' && connectionId != '') {
          statusname = ''
        } else if (this.irsModel == 'irsImmediately' && connectionId != '') {
          statusname = 'irsImmediately'
        } else if (this.irsModel == 'irsText' && connectionId != '') {
          statusname = 'irsText'
        } else if (this.irsModel == 'irsGather' && connectionId != '') {
          statusname = 'irsGather'
        }

        if (statusname == '' || statusname == undefined) {
          if (this.irsModel != 'normal') {
            return
          }
          payloadContent = {
            activityRecordNumber: '198384384636751872',
            collateJobHistory: [],
            collateType: 'None',
            examFileURL: '',
            mode: 'Normal',
            pageID: this.nowpageRender.nowpageIds,
            pagePushHistory: [],
            resourcePushHistory: [],
            messagePushHistory: []
          }
          this.irsModel = 'normal'
        } else if (statusname === 'irsImmediately') {
          //IRS即问即答（主动发起）
          payloadContent = {
            activityRecordNumber: '198384384636751872',
            collateJobHistory: [],
            collateType: 'None',
            mode: 'Quiz',
            pageID: this.nowpageRender.nowpageIds,
            content: {
              id: randomId,
              exercise: {
                answer: [],
                blankCount: 0,
                children: [],
                createTime: 0,
                creator: '',
                explain: '',
                type: 'Single',
                knowledges: [],
                objective: false,
                order: 0,
                opts: 4,
                field: 1,
                level: 3,
                periodId: '',
                gradeIds: [],
                repair: [],
                subjectId: '',
                scope: null,
                score: 10
              },
              render: 0,
              item: [
                {
                  question: '_popquiz_',
                  option: [
                    { code: 'A', timeStamp: 0 },
                    { code: 'B', timeStamp: 0 },
                    { code: 'C', timeStamp: 0 },
                    { code: 'D', timeStamp: 0 },
                    { code: 'E', timeStamp: 0 },
                    { code: 'F', timeStamp: 0 }
                  ]
                }
              ],
              blob: null,
              lite: false,
              repair: [],
              contentQuestionCategory: 'Knowledge',
              concept: '',
              keyword: '',
              questionAnsweredState: 'Unanswered',
              questionDurationTime: '00:00:00',
              questionIndex: 0,
              questionLocationType: 'Local',
              questionRenderType: 'Htex',
              questionSpendTime: '00:00:00',
              shaCode: '',
              totalAnsweredMemberCount: 0
            },
            pagePushHistory: [],
            examFileURL: '',
            resourcePushHistory: [],
            messagePushHistory: []
          }
          this.irsModel = 'irsImmediately'
        } else if (statusname === 'irsText') {
          //IRS文字（主动发起）
          payloadContent = {
            activityRecordNumber: '198384384636751872',
            collateJobHistory: [],
            collateType: 'None',
            content: {
              concept: '',
              contentQuestionCategory: 'Knowledge',
              exercise: {
                answer: [],
                blankCount: 1,
                children: [],
                createTime: 0,
                creator: '',
                explain: '',
                field: 1,
                gradeIds: [],
                knowledges: [],
                level: 3,
                objective: false,
                opts: 4,
                order: 0,
                periodId: '',
                repair: [],
                score: 10,
                subjectId: '',
                type: 'Complete'
              },
              id: randomId,
              item: [{ option: [], question: '' }],
              keyword: '',
              questionAnsweredState: 'Unanswered',
              questionDurationTime: '00:00:00',
              questionIndex: 0,
              questionLocationType: 'Local',
              questionRenderType: 'Htex',
              questionSpendTime: '00:00:00',
              shaCode: '',
              totalAnsweredMemberCount: 0
            },
            examFileURL: '',
            mode: 'Quiz',
            pageID: this.nowpageRender.nowpageIds,
            pagePushHistory: [],
            resourcePushHistory: [],
            messagePushHistory: []
          }
          this.irsModel = 'irsText'
        } else if (statusname === 'irsGather') {
          console.log('进入到作品收集')
          let pagenum = this.workNum
          let collateData = {
            pageID: this.nowpageRender.nowpageIds,
            jobName: '作品收集' + pagenum,
            timestamp: times,
            jobIndex: 0,
            collateType: 'Image',
            mode: 'Collate_Start',
            pageMeta: ''
          }
          this.workInsidedata.push(collateData)

          //作品收集(主动)
          payloadContent = {
            activityRecordNumber: activityRecordNumberS,
            examFileURL: '',
            mode: 'Collate_Start',
            pageID: this.nowpageRender.nowpageIds,
            pagePushHistory: [],
            resourcePushHistory: [],
            messagePushHistory: [],
            collateType: 'Image',
            collateJobHistory: this.workInsidedata
          }
          console.log(payloadContent, '作品收集')
          this.irsModel = 'irsGather'
          this.workNum = this.workNum + 1
        }
        messageText = {
          action: 'State',
          clientType: 'HiTeachCC',
          sender: sender,
          timestamp: times,
          waitReturn: false,
          payload: payloadContent
        }
        this.workSwitch = true
        this.$store.state.workswitch = true
        console.log(messageText, '即将发送的内容')
      } else if (messages.action === 'IRS.Answer') {
        console.log(this.$store.state.students, '当前的学生信息')
        //声明Ack相关信息
        var messageText = ''
        var studenDatas = this.$store.state.students
        for (let i = 0; i < studenDatas.length; i++) {
          if (studenDatas[i].id === messages.sender) {
            if (messages.payload.type === 'Single') {
              studenDatas[i].option = messages.payload.answer[0]
              studenDatas[i].class = 'studybox'
              studenDatas[i].showcardclass = 'brand-answer'
            } else if (messages.payload.type === 'Complete') {
              studenDatas[i].statement = messages.payload.answer[0]
              studenDatas[i].class = 'studybox'
              studenDatas[i].showcardclass = 'brand-answer'
              messageText = {
                payload: {
                  ack_Action: 'IRS.Answer',
                  ack_Timestamp: time,
                  error: '',
                  resourcePushHistory: [],
                  messagePushHistory: []
                },
                action: 'Ack',
                clientType: 'HL',
                sender: 'HiTeachCC-' + sender,
                timestamp: time,
                waitReturn: false
              }
            }
          }
        }
        this.$store.state.students = studenDatas
        this.answer()
        this.answerSelect()
        this.studentPercentages()
      } else if (messages.action === 'Page.Push') {
        messageText = {
          action: 'Ack',
          clientType: 'HL',
          sender: 'HiTeachCC-' + sender,
          timestamp: time,
          waitReturn: false,
          payload: {
            ack_Action: 'Page.Push',
            ack_Timestamp: time,
            error: ''
          }
        }
        console.log(this.$store.state.AfterParsing)
        let sendId = messages.sender
        let pageNum = localStorage.getItem('slide') - 1
        let pageKey = localStorage.getItem('fileType') == 'pdf' ? this.$store.state.imgArr.idArr[pageNum].pageid : this.$store.state.AfterParsing.slides[pageNum].pageid
        let blobUrl = JSON.parse(localStorage.getItem('blobConnect'))
        let worksImgurl = blobUrl.url + '/' + blobUrl.name + '/' + blobUrl.id + '/records/' + activityRecordNumberS + messages.payload.snapshotList[0].source
        let name = this.$store.state.students.filter(item => {
          return item.id == sendId
        })
        let inquireData = this.worksData.findIndex(index => index.id == sendId && index.url == worksImgurl)
        if (inquireData == -1 && pageKey == messages.payload.pageID && this.workSwitch == true) {
          this.worksData.push({
            id: name[0].id,
            seat: name[0].sort,
            name: name[0].studentName,
            url: worksImgurl
          })
        }
        this.$store.state.worksArr = this.worksData
        console.log(this.worksData, name, '最后的数据内容')
      }
      if (JSON.stringify(messageText) != '{}') {
        console.log(messageText, '发送的消息')
        console.log(
          JSON.stringify({
            connectionId: connectionId,
            sender: sender,
            isPrivate: true,
            groupname: null,
            to: receive,
            Text: JSON.stringify(messageText)
          })
        )
        this.$api
          .tomessage(channelapi, {
            connectionId: connectionId,
            sender: sender,
            isPrivate: true,
            groupname: null,
            to: receive,
            Text: JSON.stringify(messageText)
          })
          .then(res => {
            console.log(res, '消息发送成功')
          })
          .catch(res => {
            console.log(res, '消息发送失败')
          })
      }
    },
    /*停止作品收集*/
    stopwork() {
      let works = this.workSwitch
      if (works == true) {
        this.workSwitch = false
        this.$store.state.workswitch = false
        this.workinfo.icon = 'add_a_photo'
        this.workinfo.text = '继续收集'
      } else {
        this.workSwitch = true
        this.$store.state.workswitch = true
        this.workinfo.icon = 'stop'
        this.workinfo.text = '停止收集'
      }
    },
    /*白板缩放后 重新获取新的坐标未知*/
    getRelativePointerPosition(node) {
      // 函数将返回相对于传递的节点的指针位置
      var transform = node.getAbsoluteTransform().copy()
      // 为了检测相对位置，需要进行逆变换
      transform.invert()
      // 获取指针(如鼠标或触摸)位置
      var pos = node.getStage().getPointerPosition()
      // now we find relative point
      return transform.point(pos)
    },
    /*设定答案后 判定答案模式*/
    answerpatterns() {
      let pattern = this.$store.state.answerpattern
      let studentDatas = this.$store.state.students
      if (pattern === 'letter') {
        for (var i = 0; i < studentDatas.length; i++) {
          if (studentDatas[i].option === '1' || studentDatas[i].option === 'A') {
            studentDatas[i].option = 'A'
          } else if (studentDatas[i].option === '2' || studentDatas[i].option === 'B') {
            studentDatas[i].option = 'B'
          } else if (studentDatas[i].option === '3' || studentDatas[i].option === 'C') {
            studentDatas[i].option = 'C'
          } else if (studentDatas[i].option === '4' || studentDatas[i].option === 'D') {
            studentDatas[i].option = 'D'
          } else if (studentDatas[i].option === '5' || studentDatas[i].option === 'E') {
            studentDatas[i].option = 'E'
          } else if (studentDatas[i].option === '6' || studentDatas[i].option === 'F') {
            studentDatas[i].option = 'F'
          } else if (studentDatas[i].option === '7' || studentDatas[i].option === 'G') {
            studentDatas[i].option = 'G'
          } else if (studentDatas[i].option === '8' || studentDatas[i].option === 'H') {
            studentDatas[i].option = 'H'
          } else if (studentDatas[i].option === '9' || studentDatas[i].option === 'I') {
            studentDatas[i].option = 'I'
          } else if (studentDatas[i].option === '0' || studentDatas[i].option === 'J') {
            studentDatas[i].option = 'J'
          }
        }
      } else if (pattern === 'number') {
        for (var i = 0; i < studentDatas.length; i++) {
          if (studentDatas[i].option === '1' || studentDatas[i].option === 'A') {
            studentDatas[i].option = '1'
          } else if (studentDatas[i].option === '2' || studentDatas[i].option === 'B') {
            studentDatas[i].option = '2'
          } else if (studentDatas[i].option === '3' || studentDatas[i].option === 'C') {
            studentDatas[i].option = '3'
          } else if (studentDatas[i].option === '4' || studentDatas[i].option === 'D') {
            studentDatas[i].option = '4'
          } else if (studentDatas[i].option === '5' || studentDatas[i].option === 'E') {
            studentDatas[i].option = '5'
          } else if (studentDatas[i].option === '6' || studentDatas[i].option === 'F') {
            studentDatas[i].option = '6'
          } else if (studentDatas[i].option === '7' || studentDatas[i].option === 'G') {
            studentDatas[i].option = '7'
          } else if (studentDatas[i].option === '8' || studentDatas[i].option === 'H') {
            studentDatas[i].option = '8'
          } else if (studentDatas[i].option === '9' || studentDatas[i].option === 'I') {
            studentDatas[i].option = '9'
          } else if (studentDatas[i].option === '0' || studentDatas[i].option === 'J') {
            studentDatas[i].option = '0'
          }
        }
      }
      this.$store.state.students = studentDatas
    },
    /*修改答题、未答题人数*/
    answer() {
      this.answerpatterns()
      let studentnum = this.$store.state.students
      let answerstatus = this.$store.state.answerstatus
      var Answerdata = []
      var Noanswerdata = []
      let Rightanswerdata = []
      let Erroranswerdata = []
      if (answerstatus === 1) {
        let rightanswers = this.$store.state.answervalue
        let i = ''
        for (i = 0; i < studentnum.length; i++) {
          if (studentnum[i].option === '' || studentnum[i].statement !== '') {
            studentnum[i].answerclass = 'studyboxone'
            studentnum[i].answerbrand = 'brand'
            Noanswerdata.push(studentnum[i])
          } else if (studentnum[i].option == rightanswers[0]) {
            studentnum[i].answerclass = 'answercorrect'
            studentnum[i].answerbrand = 'banrd-success'
            studentnum[i].score = 1
            let LocalStudent = JSON.parse(localStorage.getItem('msgBody'))
            let NowPage = this.$store.state.carouselSlide
            if (LocalStudent) {
              for (var f = 0; f < LocalStudent.length; f++) {
                if (NowPage === LocalStudent[f].page) {
                  if (LocalStudent[f].status === 'underway') {
                    studentnum[i].score = 1
                  }
                } else {
                  studentnum[i].score = 1
                }
              }
            } else {
              studentnum[i].score = 1
            }
            //studentnum[i].score +=10
            Rightanswerdata.push(studentnum[i])
          } else if (studentnum[i].option !== rightanswers[0]) {
            studentnum[i].answerclass = 'answer-error'
            studentnum[i].answerbrand = 'banrd-error'
            Erroranswerdata.push(studentnum[i])
          }
        }
        this.$store.state.students = studentnum
        let slideNext = this.$store.state.carouselSlide
        this.switchoverpdf(slideNext)
        this.$store.state.rightanswernum = Rightanswerdata.length
        this.$store.state.erroranswernum = Erroranswerdata.length
        this.$store.state.noanswernum = Noanswerdata.length
      } else if (answerstatus === 0) {
        let l = ''
        for (l = 0; l < studentnum.length; l++) {
          if (studentnum[l].option !== '' || studentnum[l].statement !== '') {
            Answerdata.push(studentnum[l])
          } else if (studentnum[l].option === '' && studentnum[l].statement === '') {
            Noanswerdata.push(studentnum[l])
          }
        }
        this.$store.state.answernum = Answerdata.length
        this.$store.state.noanswernum = Noanswerdata.length
        console.log(this.$store.state.answernum, this.$store.state.noanswernum, '已答未答人数')
      }
    },
    /*实时修改echart数据*/
    answerSelect() {
      let studentselect = this.$store.state.students
      let i = ''
      let selectA = []
      let selectB = []
      let selectC = []
      let selectD = []
      let selectE = []
      let selectF = []
      let selectG = []
      let selectH = []
      let selectI = []
      let selectJ = []
      let AnswerselectData = this.$store.state.AnswerSelect
      let NumSelectData = this.$store.state.AnswerNumselect
      for (i = 0; i < studentselect.length; i++) {
        if (studentselect[i].option === '1' || studentselect[i].option === 'A') {
          selectA.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D']
          NumSelectData = ['1', '2', '3', '4']
        } else if (studentselect[i].option === '2' || studentselect[i].option === 'B') {
          selectB.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D']
          NumSelectData = ['1', '2', '3', '4']
        } else if (studentselect[i].option === '3' || studentselect[i].option === 'C') {
          selectC.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D']
          NumSelectData = ['1', '2', '3', '4']
        } else if (studentselect[i].option === '4' || studentselect[i].option === 'D') {
          selectD.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D']
          NumSelectData = ['1', '2', '3', '4']
        } else if (studentselect[i].option === '5' || studentselect[i].option === 'E') {
          selectE.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D', 'E']
          NumSelectData = ['1', '2', '3', '4', '5']
        } else if (studentselect[i].option === '6' || studentselect[i].option === 'F') {
          selectF.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D', 'E', 'F']
          NumSelectData = ['1', '2', '3', '4', '5', '6']
        } else if (studentselect[i].option === '7' || studentselect[i].option === 'G') {
          selectG.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
          NumSelectData = ['1', '2', '3', '4', '5', '6', '7']
        } else if (studentselect[i].option === '8' || studentselect[i].option === 'H') {
          selectH.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
          NumSelectData = ['1', '2', '3', '4', '5', '6', '7', '8']
        } else if (studentselect[i].option === '9' || studentselect[i].option === 'I') {
          selectI.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
          NumSelectData = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
        } else if (studentselect[i].option === '0' || studentselect[i].option === 'J') {
          selectJ.push(studentselect[i])
          AnswerselectData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
          NumSelectData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
        }
      }
      let a = Math.round((selectA.length / studentselect.length) * 100)
      let b = Math.round((selectB.length / studentselect.length) * 100)
      let c = Math.round((selectC.length / studentselect.length) * 100)
      let d = Math.round((selectD.length / studentselect.length) * 100)
      let e = Math.round((selectE.length / studentselect.length) * 100)
      let f = Math.round((selectF.length / studentselect.length) * 100)
      let g = Math.round((selectG.length / studentselect.length) * 100)
      let h = Math.round((selectH.length / studentselect.length) * 100)
      let is = Math.round((selectI.length / studentselect.length) * 100)
      let j = Math.round((selectJ.length / studentselect.length) * 100)
      let selectData = [a, b, c, d, e, f, g, h, is, j]
      //字母选项
      this.$store.state.AnswerSelect = AnswerselectData
      //数字选项
      this.$store.state.AnswerNumselect = NumSelectData
      this.$store.state.echartbaranswer = selectData
    },
    sendMsg(e) {
      let msg = this.mqmsg
      let payload = ''
      let directMethod = this.responderId
      let mqttInfo = JSON.parse(localStorage.getItem('mqtts'))
      let userdeviceId = mqttInfo.mqtt.connectInfo.clientID
      let ClassrommNum = localStorage.getItem('classNum')
      let sendMsg = 'devices/' + userdeviceId + '/messages/events/endpoint=coretopiciot&groupNum=' + ClassrommNum + '&deviceId=' + userdeviceId
      const timestamp = Math.floor(Date.now() / 1000)
      if (e === 'BackSeatnum') {
        var msgconfig = {
          Action: e,
          Sender: 'Teach',
          Timestamp: timestamp,
          Payload: { seatnum: msg }
        }
        payload = JSON.stringify(msgconfig)
      }
      let receiveId = {
        directMethod: directMethod
      }
      let pubTopic = sendMsg + '&$.to=' + JSON.stringify(receiveId)
      console.log('发送内容：' + payload)
      console.log('发送主题：' + pubTopic)
      let client = this.client
      client.publish(pubTopic, payload, { qos: 0 }, error => {
        if (!error) {
          console.log('发布成功')
        } else {
          console.log('发布失败')
        }
      })
    },
    handleToolPick(index) {
      if (!this.toolIndexList.includes(index)) {
        this.toolIndexList.push(index)
      } else {
        this.toolIndexList.splice(this.toolIndexList.indexOf(index), 1)
      }
    },
    handleCloseTool(index) {
      this.toolIndexList.splice(this.toolIndexList.indexOf(index), 1)
    },
    stickDown(e) {
      console.log(e)
    },
    renderText() {
      //报错暂时取消
      //html2canvas(document.querySelector('#capture')).then(canvas => {
      //    document.body.appendChild(canvas)
      //})
    },
    /*全屏方法*/
    screenfull() {
      this.inception = false
      if (!screenfull.isEnabled) {
        this.$Message.error('您的浏览器无法进入全屏模式')
        return false
      }
      screenfull.toggle()
      this.isfullnow = !this.isfullnow
      this.isFullscreen = true
      console.log(screenfull)
      localStorage.setItem('Fullscreen', 1)
    },
    checkFull() {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
    /*全屏点击图片切换*/
    screenbtn(e) {
      if (e === 'success') {
        this.ScreenSuccess = require('../assets/img/screenfull-success.png')
        this.ScreenError = require('../assets/img/screenfull-Derror.png')
        setTimeout(() => {
          this.screenfull()
        }, 300)
      } else if (e === 'error') {
        this.ScreenError = require('../assets/img/screenfull-error.png')
        this.ScreenSuccess = require('../assets/img/screenfull-Dsuccess.png')
        setTimeout(() => {
          this.inception = false
          localStorage.setItem('Fullscreen', 0)
        }, 300)
      }
    },
    // 微信 QR Code 弹出
    clickQRcode() {
      this.styleObj.isShow = true
      this.styleObj.width = '800px'
      this.styleObj.height = 'auto'
      this.styleObj.maxWidth = '800px'
      this.styleObj.marginLeft = '0px'
      this.styleObj.marginBottom = '20%'
      this.styleObj.backgroundColor = '#fff'
      this.componentIndex = 8
      this.isShowCard = true
    },
    /*实时监听人数和学生答题完成率*/
    studentPercentages() {
      let studentsData = this.$store.state.students.length
      //let answernumDatas = this.answernum
      let newstudent = this.$store.state.students
      let responseanswer = []
      for (var i = 0; i < newstudent.length; i++) {
        if (newstudent[i].option !== '' || newstudent[i].statement !== '') {
          console.log('进入到监听人数')
          responseanswer.push(newstudent[i])
        }
      }
      let answernumDatas = responseanswer.length
      this.answernum = responseanswer.length
      let percentagesdata = Number(answernumDatas / studentsData) * 100
      let percentagesnum = percentagesdata.toFixed(0)
      this.StudentPercentage = Number(percentagesnum)
      if (answernumDatas === 0) {
        this.StudentPercentage = 0
      }
    },
    /*页数动态数据*/
    pageinit() {
      let tatalpagenum = this.$store.state.totalpage
      this.totalpage = tatalpagenum
    },
    studenttext() {
      let that = this
      let positionw = this.$store.state.position.x + 5
      let positionh = this.$store.state.position.y + 20
      let positionname = this.$store.state.position.name
      let positionvalue = this.$store.state.position.value
      let stage = that.stage
      var layer = new Konva.Layer()
      stage.add(layer)
      var studentname = new Konva.Text({
        x: positionw,
        y: positionh,
        text: positionname,
        fontSize: 16, // 默认值为12
        fontweight: 'bold',
        fontFamily: '"微软雅黑"', // 默认是Arial
        fill: '#4A4D54'
      })
      var studenttext = new Konva.Text({
        x: positionw,
        y: positionh + 15,
        text: positionvalue,
        width: 130,
        fontSize: 14, // 默认值为12
        fontFamily: '"微软雅黑"', // 默认是Arial
        fill: '#333'
      })
      layer.add(studentname)
      layer.add(studenttext)
      layer.batchDraw()
    },
    closeScreenFull() {
      localStorage.setItem('Fullscreen', 0)
    },
    //IRS信息与文字模式内容 关联当前PDF页数
    switchoverpdf(leavepage) {
      let leavepagenum = leavepage
      let patternstustas = this.$store.state.answerpattern
      let irscontent = this.$store.state.students
      console.log(irscontent, '获取到的学生内容')
      let zooms = this.$store.state.zoom
      let textcontent = this.$store.state.irsBack
      let totalcontentinof = this.$store.state.totalcontent
      let thispagestatus = this.StudentPercentage
      let answerstatusdata = this.$store.state.answerstatus
      let answercorrects = this.$store.state.answervalue
      let IRSswitchs = this.$store.state.IRSswitch
      let worksData = this.$store.state.worksArr
      //柱状图动态选项渲染
      let NowpageSelect = this.$store.state.AnswerSelect
      let NowpageNumselect = this.$store.state.AnswerNumselect
      let pdfstatus = ''
      if (answerstatusdata === 0) {
        pdfstatus = 'underway'
      } else if (answerstatusdata === 1) {
        pdfstatus = 'finish'
      }
      let templist = JSON.parse(localStorage.getItem('msgBody') || '[]')
      let totalcontents = {
        page: leavepagenum,
        totalirs: irscontent,
        totaltext: textcontent,
        StudentPercentage: thispagestatus,
        answerstatus: answerstatusdata,
        workData: worksData,
        correctanswer: answercorrects,
        pattern: patternstustas,
        screenzoom: zooms,
        IRSbtn: IRSswitchs,
        letterselect: NowpageSelect,
        numberselect: NowpageNumselect,
        status: pdfstatus,
        irshintStatus: this.irshint,
        irsmodel: this.irsModel
      }
      for (var i = 0; i < templist.length; i++) {
        //if (templist[i].page === '') {
        // let DelData=templist.splice(i,1)
        //}
        if (leavepagenum === templist[i].page) {
          for (var l = 0; l < templist[i].totalirs.length; l++) {
            /*Q!*/
            //if (templist[i].totalirs[l].option !== '') {
            //    totalcontents.totalirs = templist[i].totalirs
            //}
          }
          let deletemplist = templist.splice(i, 1)
        }
      }
      templist.push(totalcontents)
      localStorage.setItem('msgBody', JSON.stringify(templist))
    },
    opennewpage() {
      let studentsinfo = this.$store.state.students
      for (var i = 0; i < studentsinfo.length; i++) {
        studentsinfo[i].class = 'studyboxone'
        studentsinfo[i].option = ''
        studentsinfo[i].statement = ''
        studentsinfo[i].showcardclass = 'brand'
        studentsinfo[i].score = 0
      }
      this.answernum = 0
      this.irshint = true
      this.StudentPercentage = 0
      this.$store.state.zoom = 1
      this.$store.state.IRSswitch = true
      this.$store.state.answerpattern = 'letter'
      this.$store.state.mode = 'pencil-alt'
      this.$store.state.answerstatus = 0
      this.$store.state.answervalue = ''
      this.$store.state.echartbaranswer = ''
      this.$store.state.students = studentsinfo
      this.worksData = []
      this.$store.state.worksArr = []
    },
    /*Hi 按钮方法*/
    Hibtn(e) {
      this.Hishow = !this.Hishow
      document.body.classList.remove('cursor-fdj')
    },
    /*清除页面重启互动*/
    eliminatepage() {
      if (this.stage) {
        console.log(this.stage)
      }
      let layers = this.$store.state.layer
      localStorage.removeItem('msgBody')
      localStorage.removeItem('stageInfo')
      this.saveArr = []
      this.$Message.success('页面数据已清除！')
      this.Hishow = false
      console.log(this.$store.state.imgArr)
      if (this.whiteboard === '1') {
        layers.children.length = 0
      } else {
        layers.children.length = 1
      }
      this.$store.state.mode = 'pencil-alt'
      this.$store.state.penType = 'pencil-alt'
      this.stage.destroyChildren()
      this.stage.clear()
      this.saveArr.splice(0, 1)
      localStorage.setItem('stageInfo', JSON.stringify(this.saveArr))
      this.$store.state.oldSlide = 1
      this.$store.state.carouselSlide = 1
      this.$store.state.imgArrOld.splice(1, this.$store.state.imgArr.length - 1)
      this.$store.state.imgArr.splice(1, this.$store.state.imgArr.length - 1)
      this.$store.state.imgArr.idArr.splice(1, this.$store.state.imgArr.length - 1)
      this.$store.state.imgArr.splice(0, 1, this.whiteBG)
      this.$store.state.imgArrOld.splice(0, 1, this.whiteBG)
      console.log(this.$store.state.imgArr)
      // this.addNewPage()
      this.saveStage()
      this.pen(0)
      this.$store.state.totalpage = this.$store.state.imgArr.length
      layers.draw()
    },
    /*退出教室按钮*/
    quitbtns() {
      localStorage.clear()
      this.saveArr = []
      this.Hishow = false
      this.$Message.success('账号正在退出！')
      let that = this
      setTimeout(function() {
        that.$router.push({ path: '/' })
      }, 2000)
    },
    add() {
      let type = this.$store.state.mode
      let zoominfo = this.$store.state.zoom
      if (type === 'zooms') {
        //alert('111111')
        if (zoominfo < 2) {
          zoominfo += 0.1
          this.$store.state.zoom = zoominfo
          console.log(this.$store.state.zoom)
        }
      }
    },
    /*调用子页面互动*/
    popuphd() {
      this.$refs.hd.handleFan()
    },
    /*关闭Hi按钮*/
    closeHi(e) {
      if (e === 'topic') {
        this.topicedit = false
        this.NowQuestion = ''
      } else {
        this.Hishow = false
      }
    },
    /*PDF加载提示动画*/
    PdfshowLoading(e, i) {
      if (e === 1) {
        this.$q.loading.show({
          message: '<p style="font-size:20px;color:#FFA07A;">正在努力加载，请稍等...</p><br/><p style="font-size:18px;color:#fff">' + i + '/' + this.$store.state.totalpage + '页</p>',
          backgroundColor: '#F5F5F5'
        })
      } else {
        // hiding in 3s
        this.timer = setTimeout(() => {
          this.$q.loading.hide()
          this.timer = void 0
        }, 2000)
      }
    },
    /*PDF加载提示动画*/
    beginPdfshowLoading(e) {
      if (e === 1) {
        this.$q.loading.show({
          message: '<p style="font-size:20px;color:#FFA07A;">正在努力加载，请稍等...</p>',
          backgroundColor: '#F5F5F5'
        })
      } else if (e === 0) {
        this.$q.loading.show({
          message: '<p style="font-size:20px;color:#FFA07A;">正在上传文件,请稍等....</p>',
          backgroundColor: '#F5F5F5'
        })
      } else {
        this.timer = setTimeout(() => {
          this.$q.loading.hide()
          this.timer = void 0
        }, 1000)
      }
    },
    downloadURI(uri, name) {
      var link = document.createElement('a')
      link.download = name
      link.href = uri
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    /*修改加载动画页面*/
    LoadingPage(e) {
      this.loadingpage = e
    },
    /*knova渲染json HTEX*/
    async initCanvas(page, spacename, initStatus) {
      var pagenow = ''
      console.log(page, '传输渲染的值')
      console.log(spacename, '命名值')
      page === 0 ? (pagenow = page) : (pagenow = page - 1)
      console.log(window.innerWidth, '屏幕的宽')
      console.log(window.innerHeight, '屏幕的高')
      this.prestraindata()
      return new Promise(async (r, j) => {
        var signature = '?sv=2019-02-02&st=2020-08-04T07%3A30%3A37Z&se=2024-08-05T07%3A30%3A00Z&sr=c&sp=rl&sig=x4PbJZ5qh8yjFdZwOy1EUca98MaLQyXKth2XGIZ%2Bt%2B4%3D'
        var NowptxData = ''
        var callUrl = ''
        let res = ''
        if (initStatus === 'init') {
          console.log('进入init内容')
          let jsoncallback = await this.getHistoryData(this.$store.state.fileAnalysis.index, 1)
          let laborderData = JSON.parse(jsoncallback)
          //给值到vuex的PPT整体带pageID的数据
          for (var y = 0; y < laborderData.slides.length; y++) {
            var pageId = this.genID()
            laborderData.slides[y].pageid = pageId
          }
          this.$store.state.AfterParsing = laborderData
          console.log(laborderData, this.$store.state.AfterParsing, '解析的结果')
          var pptUrl = this.$store.state.AfterParsing.slides
          this.$store.state.imgArr.length = pptUrl.length
          this.beginPage = pptUrl.length
          this.$store.state.totalpage = pptUrl.length
          var callUrls = this.$store.state.jointUrl
          callUrl = callUrls
          NowptxData = callUrls + pptUrl[pagenow].url
          this.nowpageRender.nowpageIds = laborderData.slides[0].pageid
        } else {
          var newReformdata = this.$store.state.AfterParsing.slides
          console.log(pagenow, '页数')
          console.log(newReformdata, '进入渲染方法里面的数组内容')
          var callUrlinfo = this.$store.state.jointUrl
          callUrl = callUrlinfo
          if (newReformdata[pagenow].url !== '') {
            NowptxData = callUrlinfo + newReformdata[pagenow].url
          }
          console.log(newReformdata[pagenow], '新数组的渲染当前内容')
          this.nowpageRender.nowpageIds = newReformdata[pagenow].pageid
        }
        console.log(NowptxData, '访问的地址')
        console.log(callUrl, '访问的地址前半段')
        if (NowptxData !== '') {
          res = await this.getHistoryData(NowptxData)
        }
        console.log(res, '单页JSON数据')
        localStorage.setItem('pageStatus', spacename)
        //console.log(ulrdz.width, '宽度赋值测试')
        //console.log(ulrdz.height, '高度赋值测试')
        var scaling = (window.innerHeight / res.height).toFixed(2) && res.height !== '' ? (window.innerHeight / res.height).toFixed(2) : 0
        var stageX = (window.innerWidth - res.width * scaling) / 2 && res.width !== '' ? (window.innerWidth - res.width * scaling) / 2 : 0
        console.log(res.height, '渲染的高')
        this.primevalInit.height = window.innerHeight
        this.primevalInit.width = res.width
        this.primevalInit.scale = scaling
        this.primevalInit.x = stageX
        localStorage.setItem('scalings', scaling)
        console.log(stageX, '定位画布的起始X')
        console.log(scaling, '高度比例')
        var stage = new Konva.Stage({
          container: spacename, // id of container <div>
          width: window.innerWidth,
          height: window.innerHeight,
          x: stageX,
          y: 0
        })
        this.$store.state.stage = stage
        console.log(stage, '打印的stage')
        var layer = new Konva.Layer()
        //var lastlayer = new Konva.FastLayer();
        this.layersinfo = layer
        this.layer = layer
        //this.FastLayer = lastlayer
        this.stage = stage
        layer.listening(false)
        //this.$store.state.totalpage = moreoage.pptx.page
        var trx = new Konva.Transformer()
        trx.nodes([])
        var that = this
        let promiseArr = []
        if (initStatus === 'additional' || this.$store.state.AfterParsing.slides[pagenow].url === '') {
          return
        }
        //console.log(res, '返回的json串')
        if (res.fill && initStatus !== 'additional') {
          console.log('进入有背景图')
          var imageObj = new Image()
          var backgroundGroup = {
            width: res.width * scaling,
            height: res.height * scaling,
            draggable: false,
            rotation: 0
          }
          var backgroup = new Konva.Group(backgroundGroup)
          if (res.fill.type === 3) {
            var imgSrcinfo = callUrl + res.fill.blipFill.url
            console.log(imgSrcinfo, '背景图片3333')
            imageObj.onload = async function() {
              //处理超过尺寸背景图
              var offsetxValue = 0
              var offsetyValue = 0
              if (res.fill.blipFill && res.fill.blipFill.fillRect) {
                if (res.fill.blipFill.fillRect.b !== 0 || res.fill.blipFill.fillRect.t !== 0) {
                  offsetyValue = (res.height * scaling * (Math.abs(res.fill.blipFill.fillRect.b) / 100)).toFixed(2)
                }
                if (res.fill.blipFill.fillRect.l !== 0 || res.fill.blipFill.fillRect.r !== 0) {
                  offsetxValue = (res.width * scaling * (Math.abs(res.fill.blipFill.fillRect.l) / 100)).toFixed(2)
                }
              }
              let screenshotW = res.width * scaling + offsetxValue
              let screenshotH = res.height * scaling + offsetyValue
              if (imageObj.width > screenshotW || imageObj.height > screenshotH) {
                var img = new Image()
                img.setAttribute('crossOrigin', 'anonymous')
                img.src = imgSrcinfo
                img.onload = () => {
                  let renderWidth = img.width > screenshotW ? screenshotW : img.width
                  let renderHeight = img.height > screenshotH ? screenshotH : img.height
                  var canvas = document.createElement('canvas')
                  canvas.width = renderWidth
                  canvas.height = renderHeight
                  var context = canvas.getContext('2d')
                  context.drawImage(img, 0, 0, renderWidth, renderHeight)
                  var newImage = canvas.toDataURL()
                  that.newBackgroundima = newImage
                  var img2 = new Image()
                  img2.setAttribute('crossOrigin', 'anonymous')
                  img2.src = newImage
                  img2.onload = () => {
                    var bgImage = new Konva.Image({
                      fillPatternImage: img2,
                      width: img2.width,
                      height: img2.height,
                      offsetX: offsetxValue,
                      offsetY: offsetyValue
                    })

                    backgroup.add(bgImage)
                    layer.add(backgroup)
                    backgroup.zIndex(0)
                    layer.batchDraw()
                  }
                  promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename, initStatus, page, scaling))
                  //处理超过尺寸背景图END
                }
              } else if (initStatus !== 'additional') {
                imageObj.setAttribute('crossOrigin', 'anonymous')
                var bgImage = new Konva.Image({
                  fillPatternImage: imageObj,
                  height: res.height,
                  width: res.width,
                  scaleY: scaling,
                  scaleX: scaling
                })
                //backgroup.add(bgImage);
                //layer.add(backgroup);
                //backgroup.zIndex(0)
                //layer.batchDraw();
                backgroup.add(bgImage)
                layer.add(backgroup)
                backgroup.zIndex(0)
                layer.batchDraw()
                promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename, initStatus, page, scaling))
              }
            }
            imageObj.setAttribute('crossOrigin', 'anonymous')
            imageObj.src = imgSrcinfo
          } else if (res.fill.type === 4) {
            imageObj.onload = async function() {
              var bgImage = new Konva.Image({
                fillPatternImage: imageObj,
                height: res.height * scaling,
                width: res.width * scaling
                //scaleY: scaling,
                //scaleX: scaling
              })
              //backgroup.add(bgImage);
              //layer.add(backgroup);
              //backgroup.zIndex(0)
              //layer.batchDraw();
              backgroup.add(bgImage)
              layer.add(backgroup)
              backgroup.zIndex(0)
              layer.batchDraw()
              console.log(trx, '图片打印tr')
              promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename, initStatus, page, scaling))
            }
            imageObj.crossOrigin = 'Anonymous'
            imageObj.src = res.fill.pattFill.base64
          } else if (res.fill.type === 1) {
            console.log('进入到纯色背景')
            var backgrounds = new Konva.Rect({
              width: res.width * scaling,
              height: res.height * scaling,
              fill: res.fill.solidFill
              //scaleY: scaling,
              //scaleX: scaling
            })
            //backgroup.add(backgrounds);
            //layer.add(backgroup);
            //backgroup.zIndex(0)
            //layer.batchDraw();
            backgroup.add(backgrounds)
            layer.add(backgroup)
            backgroup.zIndex(0)
            layer.batchDraw()
            promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename, initStatus, page, scaling))
          } else if (res.fill.type === 2) {
            var color0 = ''
            var color5 = ''
            var color1 = ''
            if (res.fill.gradientFill.colors) {
              color0 = res.fill.gradientFill.colors[0].color
              color5 = res.fill.gradientFill.colors[1].color
              color1 = res.fill.gradientFill.colors[2].color
            }
            var backgrounds = new Konva.Rect({
              width: res.width * scaling,
              height: res.height * scaling,
              fill: res.fill.solidFill,
              //scaleY: scaling,
              //scaleX: scaling,
              fillLinearGradientStartPoint: res.fill !== null && res.fill.gradientFill == null ? { x: 0, y: 0 } : { x: 0, y: 0 },
              fillLinearGradientEndPoint: res.fill !== null && res.fill.gradientFill == null ? { x: 0, y: 0 } : { x: 500, y: 500 },
              fillLinearGradientColorStops: res.fill !== null && res.fill.gradientFill == null ? null : [0, color0, 0.5, color5, 1, color1]
            })
            backgroup.add(backgrounds)
            layer.add(backgroup)
            backgroup.zIndex(0)
            layer.batchDraw()
            console.log(backgroup.zIndex(), '背景图片的层级')
            promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename, initStatus, page, scaling))
          } else {
            //type为-1时，进入的无背景渲染调用
            promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename, initStatus, page, scaling))
          }
        }
        //else if (initStatus !== 'additional') {
        //    console.log('进入无背景图')
        //    promiseArr.push(that.doRender(stage, layer, trx, res.item, callUrl, spacename, initStatus, page));
        //}
        if (res.exercise) {
          console.log('有题目。进入题目渲染')
          promiseArr.push(that.doRenderExercise(res.exercise, stage, layer, callUrl, spacename, initStatus, page, scaling))
        }
        //console.log(imageObj,'图片内容')
        stage.on('click tap', function(e) {
          // if click on empty area - remove all selections
          if (e.target === stage) {
            console.log(trx, '操作打印tr')
            trx.nodes([])
            layer.draw()
            return
          }
          const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey
          const isSelected = trx.nodes().indexOf(e.target) >= 0
          if (!metaPressed && !isSelected) {
            // 点击哪个就选中哪个
            trx.nodes([e.target])
          } else if (metaPressed) {
            // 取消选择操作
            const nodes = trx.nodes().slice()
            nodes.splice(nodes.indexOf(e.target), 1)
            trx.nodes(nodes)
          } else if (metaPressed && !isSelected) {
            // 多选操作
            const nodes = trx.nodes().concat([e.target])
            trx.nodes(nodes)
          }
          //layer.batchDraw();
        })
        stage.add(layer)
        console.log(this.blobPath, '删除的路径')
        Promise.all(promiseArr).then(res => {
          var slidePage = localStorage.getItem('slide')
          console.log(slidePage, '页数')
          var filelength = this.$store.state.imgArr.length
          //if (slidePage == 1 && initStatus !=='preparative') {
          //    if (spacename == 'container') { this.prestrain() }
          //} else if (slidePage === filelength && initStatus !=='preparative'){
          //    if (spacename == 'container') { this.prestrain() }
          //}else if(initStatus !=='preparative'){
          //    if (spacename == 'container' || spacename == 'nextPagebox') { this.prestrain() }
          //}
          console.log(this.$store.state.imgArr)
          console.log(res)
          //that.$refs.Pdf.$refs.pdfPreview.simgs('1')
          r(page)
        })
        //}
        //this.blobinit.deleteBlob(this.blobPath).then(res => {
        window.setInterval(() => {
          setTimeout(() => {
            console.log(this, '执行调用广播方法！')
            this.broadcastState()
          }, 0)
        }, 10000)

        //})
        //r(layer.children.length)
      })
      //setTimeout(() => {
      //    //console.log(stage.children[0].children.length, '截图之前的stage打印')
      //    var dataURL = stage.toDataURL();
      //    that.$store.state.imgArr[0] = dataURL
      //    //this.downloadURI(dataURL, 'stage.png');
      //    let layerInfo = layer.clone({ listening: false })// 画布内容提取
      //    //that.saveArr[i] = layerInfo
      //    localStorage.setItem('stageInfo', JSON.stringify(that.saveArr))
      //}, 4000);
      //}//layer.add(trx);
      //this.$refs.Pdf.thumbnailimage()
      //console.log(that.$store.state.imgArr, 'Vuex里面的缩略图')
      //return Promise.resolve("RenderTheComplete")
    },

    //加载
    async doRender(stage, layer, tr, items, callUrl, spacename, status, imageArpage, scaling) {
      console.log(items, imageArpage, '传进来渲染的值')
      let that = this
      return new Promise((r, j) => {
        let f = async function() {
          let promiseArr = []
          for (let k = 0; k < items.length; k++) {
            let promise = new Promise(async (r, j) => {
              let i = items[k]
              if (i.shapeType === 'Media' || i.mediaType === 'image') {
                switch (i.mediaType) {
                  case 'image':
                    console.log(k, '调用到图片渲染方法')
                    let result = await drawImage(stage, layer, i, tr, callUrl, k + 1, scaling)
                    r(200)
                    break
                  default:
                    break
                }
              } else if (i.type === 'Group') {
                //drawRect(stage, layer, i, tr);
                if (i.shapes) {
                  that.doRender(stage, layer, tr, i.shapesm)
                  console.log('进入到group  shapes')
                } else {
                  if (i.svg.d) {
                    let renderPathGroup = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                    console.log(i.uid, '进入到group path的ID')
                  } else {
                    let renderRect = await drawRect(stage, layer, i, tr, callUrl, k + 1, scaling)
                    console.log(i.uid, '进入到group rect的ID')
                  }
                }
                console.log(i, '传输的group')
              } else if (i.type === 'HtexText') {
                console.log('调用到了htextext')
                let renderRect = await drawRect(stage, layer, i, tr, callUrl, k + 1, scaling)
              } else if (i.type === 'CxnSp' && i.svg) {
                if (i.svg.type === 'polyline') {
                  console.log(i.svg.type, 'type的值')
                  let renderPath = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                } else if (i.svg.type === 'polygon' && i.svg.points) {
                  console.log(i.svg.type, 'type的值')
                  let renderPathinfo = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                } else {
                  let renderPaths = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                }
              } else if (i.type === 'Sp' && i.svg) {
                if (i.svg.type === 'polyline') {
                  console.log(i.svg.type, 'type的值')
                  let renderPathz = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                } else if (i.svg.type === 'polygon' && i.svg.points) {
                  console.log(i.svg.type, 'type的值')
                  let renderPathinfos = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                } else if (i.svg.type === 'path') {
                  let renderPatharray = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                } else if (i.svg.d) {
                  let renderPathdata = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                  console.log(i, '传递的path内容')
                } else if (i.shapeType === 'ellipse') {
                  let renderEllipse = await drawEllipse(stage, layer, i)
                } else if (i.shapeType === 'rect' || i.shapeType === 'roundRect') {
                  let renderRect = await (stage, layer, i, tr, callUrl, k + 1, scaling)
                } else {
                  let renderDraw = await drawPath(stage, layer, i, tr, callUrl, k + 1, scaling)
                }
                r(200)
              } else if (i.type === 'Math' && i.formula) {
                let renderMath = await drawMath(stage, layer, tr, i, callUrl, k + 1, scaling)
              } else if (i.charts && i.charts !== null) {
                let renderEchart = await drawEchart(stage, layer, tr, i, k + 1, scaling)
                console.log(renderEchart, 'echarts图表的返回')
                that.iframeValue.push(renderEchart)
              } else if (i.type === 'Table') {
                let renderTable = await drawTable(stage, layer, tr, i, k + 1, scaling)
              } else if (i.shapeType === 'Diagram') {
                let renderRectinfo = await drawRect(stage, layer, i, tr, callUrl, k + 1, scaling)
                this.doRender(stage, layer, tr, i.shapes)
              } else if (i.shapeType !== 'audio') {
                if (i.shapeType) {
                  switch (i.shapeType) {
                    //case "path":
                    //    drawPath(stage, layer, i, tr);
                    //    break;
                    case 'arc':
                      let renderArc = await drawArc(stage, layer, i, k + 1, scaling)
                      break
                    case 'rect':
                      let renderRectinfo = await drawRect(stage, layer, i, tr, callUrl, k + 1, scaling)
                      console.log(tr, '传输的i进去')
                      break
                    case 'ellipse':
                      let renderEllipseinfo = await drawEllipse(stage, layer, i, k + 1, scaling)
                      break
                    case 'roundRect':
                      let renderRound = await drawRect(stage, layer, i, tr, callUrl, k + 1, scaling)
                      break
                    default:
                      //drawLine(stage, layer, i);
                      //console.log(i, '调用的line方法')
                      break
                  }
                }
              }
              r(200)
            })
            promiseArr.push(promise)
          }
          Promise.all(promiseArr).then(res => {
            console.log('22222222222222')
            console.log(res)
            r(200)
            console.log('可以验证截图')
            setTimeout(() => {
              var snippingPage = JSON.parse(localStorage.getItem('slide'))
              var dataURL = stage.toDataURL()
              //console.log(dataURL, '截图')
              console.log(snippingPage, '页数！！！！')
              //console.log(that.$store.state.imgArr)
              if (spacename === 'container') {
                //that.$store.state.imgArr[snippingPage - 1] = dataURL
                that.$store.state.imgArr.splice(snippingPage - 1, 1, dataURL)
              } else if (spacename === 'nextPagebox') {
                //that.$store.state.imgArr[snippingPage] = dataURL
                that.$store.state.imgArr.splice(snippingPage, 1, dataURL)
              } else if (spacename === 'lastPagebox') {
                //that.$store.state.imgArr[snippingPage - 2] = dataURL
                that.$store.state.imgArr(snippingPage - 2, 1, dataURL)
              }
              if (status === 'preparative') {
                console.log(imageArpage, '截图的页数')
                //that.$store.state.imgArr[imageArpage-1] = dataURL
                that.$store.state.imgArr.splice(imageArpage - 1, 1, dataURL)
                console.log(that.$store.state.imgArr, '缩略图组')
              } else {
              }
            }, 1500)
            //that.$refs.Pdf.$refs.pdfPreview.simgs('1')
          })
        }
        f()
      })
    },

    //题目渲染加载
    //doRenderExercise(exercise, stage, layer, tr) {
    //    this.topics = exercise
    //    let that = this
    //    this.$nextTick(() => {
    //        html2canvas(document.getElementById("itemQuestion"), {
    //            backgroundColor: null,
    //        }).then((canvas) => {
    //            document.getElementById("itemQuestion").innerHTML = "";
    //            const img = canvas.toDataURL();
    //            var imageObj = new Image();
    //            imageObj.src = img;
    //            imageObj.setAttribute('crossOrigin', 'anonymous');
    //            //console.log(imageObj.src,'图片地址1')
    //            imageObj.onload = function () {
    //                var questioninfo = new Konva.Image({
    //                    x: 380,
    //                    y: 120,
    //                    image: imageObj,
    //                    width: imageObj.width,
    //                    height: imageObj.height,
    //                    draggable: true,
    //                });
    //                questioninfo.on('dblclick', (e) => {
    //                    console.log('触发了dblclick!')
    //                    console.log(that, 'this指针内容')
    //                    that.topicedit = true
    //                    that.TypeVerdict = 'question'
    //                    that.EditContent = exercise.question
    //                    //that.NowOption = exercise.option
    //                    //this.editorinfo = new Editors(this.$refs.editorElem)
    //                })
    //                // add the shape to the layer
    //                layer.add(questioninfo);
    //                layer.batchDraw();
    //            };
    //        });
    //        document.getElementsByClassName("item-option").forEach((i, index) => {
    //            html2canvas(i, { backgroundColor: null }).then((canvas) => {
    //                console.log(i, '打印的i')
    //                i.innerHTML = "";
    //                // layer.add(canvas)
    //                const img = canvas.toDataURL();
    //                var imageObj = new Image();
    //                imageObj.src = img;
    //                imageObj.setAttribute('crossOrigin', 'anonymous');
    //                //console.log(imageObj.src, '图片地址2')
    //                imageObj.onload = function () {
    //                    var choice = new Konva.Image({
    //                        x: 380,
    //                        y: 200 + index * 80,
    //                        image: imageObj,
    //                        width: imageObj.width,
    //                        height: imageObj.height,
    //                        draggable: true,
    //                    });
    //                    choice.on('dblclick', () => {
    //                        let SetAnswer = that.topics.option
    //                        console.log(SetAnswer[index].value, '答案内容')
    //                        that.topicedit = true
    //                        that.TypeVerdict = 'option'
    //                        that.OptionNum = index
    //                        that.EditContent = SetAnswer[index].value
    //                    })
    //                    // add the shape to the layer
    //                    layer.add(choice);
    //                    layer.batchDraw();
    //                };
    //            });
    //        });
    //        //console.log(document.getElementById("itemQuestion").getClientRects());
    //    });
    //},

    //渲染加载完成测试
    //async testpptx() {
    //    console.log('1111V1')
    //    const v1arr = await this.initCanvas();
    //    //const v2arr = await this.doRenderExercise();
    //    console.log(v1arr, '打印的V1')
    //    //console.log(v2arr,'打印的V2')
    //    if (v1arr === 'RenderTheComplete') {
    //        console.log('执行截图')
    //        let stageinof = this.stage
    //        var dataURL = stageinof.toDataURL();
    //        this.$store.state.imgArr[0] = dataURL
    //        //this.downloadURI(dataURL, 'stage.png');
    //    }
    //    this.$refs.Pdf.thumbnailimage()
    //    console.log('操作完成')
    //},

    //访问详细页的地址
    getHistoryData(url, status) {
      //return new Promise((resolve, reject) => {
      //    this.$api.fileJson(url, { params: {} }).then(res => {
      //        resolve(res)
      //    })
      //})
      if (status === 1) {
        return new Promise((resolve, reject) => {
          var xhr = new XMLHttpRequest()
          var formData = new FormData()
          xhr.open('get', url) //url填写后台的接口地址，如果是post，在formData append参数（参考原文地址）
          // xhr.responseType = 'arraybuffer';
          xhr.onload = function(e) {
            console.log(e)
            resolve(e.currentTarget.response)
          }
          xhr.send(formData)
        })
      } else {
        return new Promise((resolve, reject) => {
          var xhr = new XMLHttpRequest()
          var formData = new FormData()
          xhr.open('get', url) //url填写后台的接口地址，如果是post，在formData append参数（参考原文地址）
          // xhr.responseType = 'arraybuffer';
          xhr.onload = function(e) {
            console.log(e)
            resolve(JSON.parse(e.currentTarget.response))
          }
          xhr.send(formData)
        })
      }
    },

    //预加载
    prestrain() {
      console.log('调用到了预加载方法')
      var nPage = JSON.parse(localStorage.getItem('slide'))
      var pageStatusinfo = localStorage.getItem('pageStatus')
      var fileLength = this.$store.state.imgArr.length
      console.log(pageStatusinfo)
      console.log(fileLength)
      var stagename = name
      if (nPage === 1) {
        console.log('进去到预加载渲染方法')
        this.initCanvas(nPage + 1, 'nextPagebox')
      } else if (nPage === fileLength) {
        console.log('进入到最后一页的预加载')
        if (pageStatusinfo === 'container') {
          this.initCanvas(nPage - 1, 'lastPagebox')
        }
      } else {
        console.log('进入到其他预加载渲染方法')
        if (pageStatusinfo === 'nextPagebox') {
          this.initCanvas(nPage - 1, 'lastPagebox')
        } else if (pageStatusinfo === 'lastPagebox') {
          console.log('进入到上一页的渲染')
        } else if (pageStatusinfo === 'container') {
          this.initCanvas(nPage + 1, 'nextPagebox')
        }
      }
    },

    //生成唯一pageID
    genID(length) {
      var s = []
      var hexDigits = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4'
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
      s[8] = s[13] = s[18] = s[23] = '-'
      let uuid = s.join('')
      return uuid
    }
    //确认题目修改
    //topicalter() {
    //    this.$q.loading.show()
    //    //alert(this.Editorinfo.txt.getJSON())
    //    let VerdictStatus = this.TypeVerdict
    //    let OptionStatus = this.OptionNum
    //    let topicstage = this.stage
    //    let topiclayer = this.layersinfo
    //    let contentinfo = this.Editorinfo.txt.text()
    //    console.log(contentinfo, '内容获取的文字')
    //    if (VerdictStatus === 'question') {
    //        RenderKnova.exercise.question = contentinfo
    //        this.topics.question = contentinfo
    //    } else if (VerdictStatus === 'option') {
    //        RenderKnova.exercise.option[OptionStatus].value = contentinfo
    //        this.topics.option[OptionStatus].value = contentinfo
    //    }
    //    console.log(this.topics.option, '页面的选项')
    //    console.log(RenderKnova.exercise.option, 'json串里的选项')
    //    this.doRenderExercise(RenderKnova.exercise, topicstage, topiclayer)
    //    this.timer = setTimeout(() => {
    //        this.$q.loading.hide()
    //        this.timer = void 0
    //        this.topicedit = false
    //    }, 2000)
    //    this.EditContent = ''
    //}
  },
  created() {
    // this.loginCallback();
    this.init()
    this.signalRConnect()
    //this.getTMDToken()
    //this.MQTTconnect()
    // this.TMDInfo();
    // this.question();
    // this.showLoading();
    // this.renderText();
  },
  mounted() {
    var editor = new E('#editor')
    //editor.customConfig.onchange = (html) => {
    //    this.editorContent = html
    //}
    editor.create()
    this.Editorinfo = editor
    let self = this
    this.$nextTick(function() {
      document.addEventListener('keyup', function(e) {
        if (e.keyCode == 27) {
          self.closeScreenFull()
        }
      })
    })
    // this.CreateGroup();
    this.renderText()
    window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
        // 全屏下按键esc后要执行的动作
        this.isFullscreen = false
      }
    }
    //用户刷新
    window.onbeforeunload = function(e) {
      e = e || window.event
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = '关闭提示'
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示'
    }
    //浏览器变化
    window.onresize = () => {
      return (() => {
        /* this.screenWidth = document.body.clientWidth;*/
        console.log(this.stage, '获取现在的宽高')
        var size = this.stage.size()
        var scale = parseFloat((window.innerHeight / size.height).toFixed(2))
        var scaleData = scale <= 1 ? scale : 1
        var starting = (window.innerWidth - this.primevalInit.width * this.primevalInit.scale * scaleData) / 2
        console.log(window.innerHeight, window.innerWidth, starting, this.primevalInit.width, this.primevalInit.scale, scale, '起点的位置')
        /* this.stage.absolutePosition({ x: starting, y: 0 })*/
        // this.stage.x(starting);
        this.stage.x(0)
        this.stage.y(0)
        this.primevalInit.x = starting
        console.log(scale, starting, this.stage)
        var widths = size.width * scale
        var heights = size.height * scale
        this.stage.size({ width: widths, height: heights })
        if (window.innerHeight == this.primevalInit.height) {
          scale = 1
        }
        this.stage.scaleX(scale)
        this.stage.scaleY(scale)
        localStorage.setItem('scalings', scale)
        this.stage.draw()
      })()
    }
    window.setInterval(() => {
      setTimeout(() => {
        console.log(this, '执行调用广播方法！')
        /* this.broadcastState()*/
      }, 0)
    }, 10000)
  },
  computed: {
    watchUrl() {
      return this.$store.state.question.submit
    },
    watchSlide() {
      return this.$store.state.carouselSlide
    },
    watchZoom() {
      return this.$store.state.zoom
    },
    watchAdd() {
      return this.$store.state.addNew
    },
    watchDelete() {
      return this.$store.state.deletePage
    },
    watchCarousel() {
      return this.$store.state.carousel
    },
    watchAnswerStatus() {
      return this.$store.state.answerstatus
    },
    watchirstexts() {
      return this.$store.state.irsBack
    },
    watchanswernum() {
      return this.$store.state.answernum
    },
    watchstickup() {
      return this.$store.state.position.status
    },
    watchtotalpage() {
      return this.$store.state.totalpage
    },
    watchanswervalue() {
      return this.$store.state.answervalue
    },
    watchanswerpattern() {
      return this.$store.state.answerpattern
    },
    watchtatalpage() {
      return this.$store.state.totalpage
    }
  },
  watch: {
    watchUrl(e) {
      if (e) {
        this.question()
      }
    },
    watchSlide(e) {
      if (e) {
        console.log('11111111' + e)
        this.saveStage()
      }
    },
    watchZoom(e) {
      if (e) {
        this.zoomFuc()
      }
    },
    watchAdd(e) {
      if (e) {
        this.addNewPage()
        this.$store.state.addNew = false
      }
    },
    watchDelete(e) {
      if (e) {
        this.deleteSelectPage()

        this.$store.state.deletePage = false
      }
    },
    watchCarousel(e) {
      if (e) {
        this.carousel = this.$store.state.carousel
      }
    },
    watchAnswerStatus(e) {
      if (e === 1) {
        this.answer()
      } else if (e === 0) {
        this.answer()
      }
    },
    watchanswernum(e) {
      if (e) {
        this.answernum = e
      }
      this.studentPercentages()
    },
    watchtotalpage(e) {
      if (e) {
        this.totalpage = e
        this.pageinit()
      }
    },
    //watchstickup(e) {
    //    if (e === '1') {
    //        this.stickback()
    //    }
    //},
    watchanswervalue(e) {
      this.answer()
    },
    /*监听答案模式  字母或数字*/
    watchanswerpattern(e) {
      if (e) {
        this.answerpatterns()
      }
    },
    watchtatalpage(e) {
      console.log(e, '监听到总页数变化')
    }
    ///*监听页数变化*/
    //watchloadingpage(e) {
    //    this.PdfshowLoading()
    //}
  },
  beforeDestroy() {
    if (this.timer !== void 0) {
      clearTimeout(this.timer)
      this.$q.loading.hide()
    }
  }
}
</script>
<style lang="less" scoped>
@import '../assets/css/Board.less';
</style>
<style lang="less">
.q-circular-progress__text {
  color: #dcdcdc !important;
  &:hover {
    color: blue !important;
  }
}
.hicard-icon {
  font-size: 50px !important;
}
body {
  background: #fff !important;
}

li {
  float: left;
}

.boardArea {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0;
  overflow-y: hidden;
}

.konvajs-content {
  //height: 100% !important;
  width: 100% !important;
  background: rgb(255, 255, 255);
  /*background: red;*/
  position: absolute !important;
  top: 0;
  left: 0;
}

.vdr {
  z-index: 999999 !important;
  background: #ddd;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal {
  }
}

.ivu-modal-body {
  display: none;
}

.ivu-modal-footer {
  border-top: 0 !important;
  padding: 0px !important;
  /*.ivu-btn{margin-bottom: 20px;}*/
}

.ivu-modal-header {
  border: 0;
}

.ivu-modal-close {
  display: none;
  top: 15px !important;
  right: 15px !important;
  background: #d8d8d8;
  border-radius: 50%;
  .ivu-icon-ios-close {
    color: #000 !important;
    font-size: 39px !important;
  }

  .ivu-icon-ios-close:hover {
    font-size: 39px;
    font-weight: bold;
  }
}

.ivu-modal-close:hover {
  font-weight: bold;
  font-size: 18px;
}

.ivu-modal-content {
  background-color: #fcfcfc !important;
  box-shadow: 0 2px 5px rgba(128, 128, 128, 0.5) !important;
}

.ivu-upload {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.ivu-modal-mask {
  background: rgba(255, 255, 255, 0.5) !important;
}

.ivu-upload-list li {
  float: none;
}

.upload-box {
  overflow: hidden;
  padding: 40px 80px 0px 80px;
  display: flex;
  justify-content: center;
  button {
    transition: none;
    width: 120px;
    height: 120px;
    margin: 0 22px !important;
    border: 1px solid #ccc !important;
    background-color: #fcfcfc;
    font-size: 14px;
    color: rgb(20, 20, 20);
    font-weight: bold;
    border-width: 2px;
    border-radius: 10px;
    &:hover {
      background-color: darken(#fcfcfc, 10%);
      color: blue;
      border: 1px solid blue !important;
    }
  }
}
.picker-drag {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  .tool-icon-close {
    right: 120px !important;
    top: 120px !important;
  }
}
.drag-wrap {
  position: relative;
  border: 1px solid #ccc;
  background: #eee;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px 50px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  &:hover {
    cursor: move;
  }
  .tool-icon-close {
    position: absolute;
    right: -16px;
    top: -16px;
    font-size: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    z-index: 999;
    background: #d8d8d8;
    cursor: pointer;
  }
}

.timer-drag {
  border-radius: 50%;
  border: 13px solid rgb(88, 84, 84);
  background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
  opacity: 0.9;
  height: 400px;
  width: 400px;
  padding: 80px 50px;
}

.timer-drag .tool-icon-close {
  position: absolute;
  right: 30px;
  top: 30px;
  background: #5f5f5f;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
}

.timer-drag .tool-icon-resize {
  position: absolute;
  right: 30px;
  bottom: 30px;
  background: #5f5f5f;
  color: #fff;
  padding: 11px;
  border-radius: 50%;
  font-size: 22px;
  transform: rotate(90deg);
  cursor: pointer;
  display: none;
}
/*开局询问全屏样式*/
.screen-title {
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  .fullscreen-icon {
    margin-right: 8px;
  }
  &:hover {
    color: blue;
  }
}

.sueecess_btn {
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  margin-right: 15px;
  margin-top: 20px;
}

.error_btn {
  width: 75px;
  height: 75px;
  display: block;
  float: right;
  margin-left: 25px;
  margin-top: 20px;
}
.q-ma-md {
  margin: 3px 12px !important;
}

.ivu-upload-list {
  margin-top: 0px !important;
  width: 110px;
  margin-left: 10px;
}

.ivu-upload-list-file {
  padding: 0px !important;
}

.ivu-upload-list-file span {
  font-size: 10px !important;
}

.cursor-fdj {
  cursor: zoom-in !important;
}
</style>
