biji

litian

2024-05-14 68eee6caeec1753bfba8c937ab862ef05cb42bb8

 src/views/home.vue

@@ -285,7 +285,7 @@
            <div class="">已上课：{{ headerData.classTime }}</div>
          </div>
          <div class="progress">
            <div class="bookName">学前儿童卫生与保健（第三版）</div>
            <div class="bookName">{{bookName}}</div>
            <div>{{ headerData.process }}%</div>
          </div>
          <div class="rightBox">
@@ -402,14 +402,34 @@
              </div>
            </div>
            <template #reference>
              <div :class="floatingToolData.activeToolData == item.name ? 'floatToolActive floatToolItem' : 'floatToolItem'">
                <img :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" alt="" />
              <div
                :class="
                  floatingToolData.activeToolData == item.name
                    ? 'floatToolActive floatToolItem'
                    : 'floatToolItem'
                "
              >
                <img
                  :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon"
                  alt=""
                />
                <div class="text">{{ item.name }}</div>
              </div>
            </template>
          </el-popover>
          <div :class="floatingToolData.activeToolData == item.name ? 'floatToolActive floatToolItem' : 'floatToolItem'" v-else @click="floatItemHandle(item)">
            <img :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" alt="" />
          <div
            :class="
              floatingToolData.activeToolData == item.name
                ? 'floatToolActive floatToolItem'
                : 'floatToolItem'
            "
            v-else
            @click="floatItemHandle(item)"
          >
            <img
              :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon"
              alt=""
            />
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
@@ -761,8 +781,8 @@
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, inject } from 'vue'
import { ctxUrl } from '@/assets/js/config'
import { ref, reactive, watch, onMounted, onBeforeMount,inject } from 'vue'
import { ctxUrl,resourceUrl } from '@/assets/js/config'
import { useRouter, useRoute } from 'vue-router'
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()
@@ -876,15 +896,13 @@
)

let microApp = null // 微应用实例
const bookName = ref('')
const bookId = ref(1)
onMounted(() => {
  // canvasWith.value = window.innerWidth - 540
  // canvasheight.value = window.innerHeight - 110
  getNotesList() // 获取高亮
  getlineHeightList() //获取高亮
  getScribeList() //获取划线
  getCatalogueData()
  getResourceData()
  getScreenshotList()
  // setTimeout(() => {
  //   canvasWith.value = document.getElementById('container').offsetWidth
  //   canvasheight.value = document.getElementById('container').offsetHeight
@@ -903,17 +921,25 @@
  // 加载微应用
  microApp = loadMicroApp(microApps.book1, {
    sandbox: {
      strictStyleIsolation: true,
      experimentalStyleIsolation: true
      // strictStyleIsolation: true,
      // experimentalStyleIsolation: true
    }
  })
  window.qiankunActions.onGlobalStateChange((state, prev) => {
    bookName.value = state.bookName
    bookId.value = state.bookId
   
  })

  window.qiankunActions.setGlobalState({
    state: 1, // 加载子应用
    windowSelection: (data) => { // 绑定子应用选择监听事件
    windowSelection: (data) => {
      // 绑定子应用选择监听事件
      console.log(data, '子应用选择')
      getSelection(data)
    }
  })
 
})

watch(
@@ -926,11 +952,20 @@
    }
  }
)
watch(
  () => bookId.value,
  (val) => {
    getNotesList() // 获取笔记
    getlineHeightList() //获取高亮
    getScribeList() //获取划线
    getScreenshotList() //截图
  }
)
//获取目录
const catalogueData = ref([])
const getCatalogueData = () => {
  axios
    .get(ctxUrl + '/books/test/information.json')
    .get(ctxUrl + '/information.json')
    .then(function (response) {
      var json = response.data
      // 处理获取到的json数据
@@ -945,7 +980,6 @@
  label: 'label'
}
const handleNodeClick = (data) => {
  console.log(data.id, 12)
  document.getElementById(data.id).scrollIntoView()
}

@@ -983,7 +1017,7 @@
const testWord = ref('') //word链接
const getResourceData = () => {
  axios
    .get(ctxUrl + '/books/test/resource.json')
    .get(ctxUrl + '/resource.json')
    .then(function (response) {
      var json = response.data
      // 处理获取到的json数据
@@ -1004,9 +1038,9 @@
  resourVisble.value = true
  resourType.value = data.type
  if (data.type == 'video') {
    testVideo.value = ctxUrl + '/books/test/resourceData/' + data.name
    testVideo.value = resourceUrl + '/resourceData/' + data.name
  } else if (data.type == 'word') {
    testWord.value = ctxUrl + '/books/test/resourceData/' + data.name
    testWord.value = resourceUrl + '/resourceData/' + data.name
  }
}

@@ -1028,7 +1062,6 @@
      resourceDataList.value = resourceData.value.attachmentList
      break
  }
  console.log(resourceDataList.value)
}
const searchBtn = () => {
  if (searchShow.value) {
@@ -1067,7 +1100,6 @@
// 选中菜单
const activeMenu = ref(0)
//资源类型

const resourceType = ref('default')
// 菜单点击
const menuItemClick = (index) => {
@@ -1091,17 +1123,18 @@
}
//刷新当前页面
const reload = () => {
  if (microApp) {
    microApp.unmount() // 卸载微应用
    microApp = loadMicroApp(microApps.book1, {
      sandbox: {
        strictStyleIsolation: true,
        experimentalStyleIsolation: true
      }
    })
  } else {
    location.reload()
  }
  // if (microApp) {
  //   microApp.unmount() // 卸载微应用
  //   microApp = loadMicroApp(microApps.book1, {
  //     sandbox: {
  //       strictStyleIsolation: true,
  //       experimentalStyleIsolation: true
  //     }
  //   })
  // } else {
  //   location.reload()
  // }
}

const selectResourceType = (type) => {
@@ -1154,9 +1187,15 @@
})
const fontSizeSelect = (item) => {
  settingForm.fontSizeActive = item.key
  window.qiankunActions.setGlobalState({
    fontSizeNum: settingForm.fontSizeActive, // 加载子应用
  })
}
const bgColorSelect = (item) => {
  settingForm.bgColorActive = item.key
  window.qiankunActions.setGlobalState({
    bgColor: settingForm.bgColorActive, // 加载子应用
  })
}
//笔记颜色筛选
const searchClick = (item) => {
@@ -1407,7 +1446,6 @@
  }
}
const dragstart = (e) => {
  console.log(e)
  floatingToolData.startclientx = e.clientX
  floatingToolData.startclienty = e.clientY
}
@@ -1426,6 +1464,10 @@
    init()
      break
    case 'wenzi':
      break
    case 'tuichu':
    canvasShow.value = false
    floatingToolData.activeToolData = ''
      break
  }
}
@@ -1453,7 +1495,6 @@
  canvas.value.freeDrawingBrush.color = toolSelectData.lineColorActive
  canvas.value.freeDrawingBrush.width = toolSelectData.thicknessActive
}


//标签显示隐藏
const labelShow = (str) => {}
@@ -1496,7 +1537,7 @@
        setKeyRequests: [
          {
            domain: 'screenshot',
            key: '2358',
            key: bookId.value,
            value: JSON.stringify(screenshotList.value)
          }
        ]
@@ -1519,7 +1560,7 @@
    method: 'post',
    data: {
      domain: 'screenshot',
      keys: ['2358']
      keys: [bookId.value]
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
@@ -1535,6 +1576,7 @@
//选中文字工具栏
const selectText = ref('') //选中文字
const selectNode = ref(null)
const selectPage = ref(1)
const showToolBox = ref(false)
const dialogToolData = reactive({
  left: 500,
@@ -1561,22 +1603,34 @@
  }
}

// const handleMouseUp = (e) => {
//   if (move.value) {
//     const txt = window.getSelection()?.toString()
//     selectText.value = txt
//     const node = window.getSelection()
//     let html = node.anchorNode.parentNode.parentNode
//     dialogToolData.chapter = html.firstChild.innerHTML
//     if (txt) {
//       showToolBox.value = true
//       dialogToolData.top = e.y
//       dialogToolData.left = e.x
//     }
//     isMouseDown.value = false
//   }
//   move.value = false
// }
const handleMouseUp = (e) => {
  if (move.value) {
    const txt = window.getSelection()?.toString()
    selectText.value = txt
    const node = window.getSelection()
    let html = node.anchorNode.parentNode.parentNode
    dialogToolData.chapter = html.firstChild.innerHTML
    if (txt) {
      showToolBox.value = true
      dialogToolData.top = e.y
      dialogToolData.left = e.x
    }
    isMouseDown.value = false
  }
  move.value = false
}

const getSelection =(data)=>{
  if (data.txt) {
    console.log(data.node,"data")
      showToolBox.value = true
      selectText.value = data.txt
      selectNode.value = data.node.innerHTML
      selectPage.value = data.page
      dialogToolData.top = data.y
      dialogToolData.left = data.x
    }
}

const pageScroll = (e) => {
  showToolBox.value = false
@@ -1752,13 +1806,16 @@
const clickSelect = (item) => {
  colorActive.value = item.key
  if (toolActive.value == '高亮') {
    dialogToolData.lineHeight.push({
    let lineHeightData = {
      selectNode: selectNode.value,
      selectText: selectText.value,
      selectPage: selectPage.value,
      color: colorActive.value,
      chapter: dialogToolData.chapter,
      createDate: new Date()
    })
    }
    dialogToolData.lineHeight.push(lineHeightData)
    console.log(dialogToolData.lineHeight,"前node")
    request({
      url: '/identity/api/ApiAppUserSetKey',
      method: 'post',
@@ -1766,7 +1823,7 @@
        setKeyRequests: [
          {
            domain: 'highLight',
            key: '2358',
            key: bookId.value,
            value: JSON.stringify(dialogToolData.lineHeight)
          }
        ]
@@ -1782,6 +1839,7 @@
    dialogToolData.scribeList.push({
      selectNode: selectNode.value,
      selectText: selectText.value,
      selectPage: selectPage.value,
      color: colorActive.value,
      chapter: dialogToolData.chapter,
      createDate: new Date()
@@ -1793,7 +1851,7 @@
        setKeyRequests: [
          {
            domain: 'underline',
            key: '2358',
            key: bookId.value,
            value: JSON.stringify(dialogToolData.scribeList)
          }
        ]
@@ -1812,12 +1870,18 @@
  const obj = {
    desc: formData.desc
  }
  if(!colorActive.value){
    ElMessage.error('请选择笔记颜色!')
    return
  }
  if (!lock.value) {
    lock.value = true
    if (formData.desc.replace(/^\s*|\s*$/g, '')) {
      dialogToolData.notesList.push({
        selectNode: selectNode.value,
        selectText: selectText.value,
        color: colorActive.value,
        selectPage: selectPage.value,
        chapter: dialogToolData.chapter,
        createDate: new Date(),
        note: formData.desc.replace(/^\s*|\s*$/g, '')
@@ -1829,7 +1893,7 @@
          setKeyRequests: [
            {
              domain: 'notes',
              key: '2358',
              key: bookId.value,
              value: JSON.stringify(dialogToolData.notesList)
            }
          ]
@@ -1859,13 +1923,13 @@
    method: 'post',
    data: {
      domain: 'notes',
      keys: ['2358']
      keys: [bookId.value]
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
      dialogToolData.notesList = JSON.parse(res[0].value)
      let list = JSON.parse(res[0].value)
      let textDom1 = document.getElementById('container')
      let textDom1 = document.querySelector('.temp-book')
      if (list.length > 0) {
        list.forEach((item, index) => {
          item.createDate = moment(item.createDate).format('YYYY-MM-DD')
@@ -1887,15 +1951,19 @@
            }
          }
          //页面添加笔记
          let containerElement = document.createElement('span')
          containerElement.style.textDecoration = 'underline'
          containerElement.innerText = item.selectText
          let rReg1 = new RegExp(`${item.selectText}`, 'ig')
          let text1 = textDom1.innerHTML
          let rHtml1 = ''
          rHtml1 = text1.replace(
          let nHtmlText1 = item.selectNode

          let nHtml1 = ''
          nHtml1 = nHtmlText1.replace(
            rReg1,
            `<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>`
          )
          let rHtml1 = ''
          rHtml1 = text1.replace(
            nHtmlText1,
            nHtml1
          )
          textDom1.innerHTML = rHtml1
        })
@@ -1912,26 +1980,29 @@
    method: 'post',
    data: {
      domain: 'underline',
      keys: ['2358']
      keys: [bookId.value]
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
      dialogToolData.scribeList = JSON.parse(res[0].value)
      scribeData.scribeDataList = JSON.parse(res[0].value)
      let textDom1 = document.getElementById('container')
      console.log(scribeData.scribeDataList, '划线')
      let textDom1 = document.querySelector('.temp-book')
      if (scribeData.scribeDataList.length > 0) {
        for (let i = 0; i < scribeData.scribeDataList.length; i++) {
          let item = scribeData.scribeDataList[i]
          let containerElement = document.createElement('span')
          containerElement.style.textDecoration = 'underline'
          containerElement.innerText = item.selectText
          let rReg1 = new RegExp(`${item.selectText}`, 'ig')
          let text1 = textDom1.innerHTML
          let nHtmlText1 = item.selectNode
          
          let nHtml1 = ''
          nHtml1 = nHtmlText1.replace(
            rReg1,
            `<el-popover placement="bottom" :width="100" trigger="click"><div><el-button onclick="deleteScribeShow('${item.selectText}')">删除</el-button></div><template #reference><span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer">${item.selectText}</span></template></el-popover>`
          )
          let rHtml1 = ''
          rHtml1 = text1.replace(
            rReg1,
            `<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer">${item.selectText}</span>`
            nHtmlText1,
            nHtml1
          )
          textDom1.innerHTML = rHtml1
        }
@@ -1947,26 +2018,31 @@
    method: 'post',
    data: {
      domain: 'highLight',
      keys: ['2358']
      keys: [bookId.value]
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
      dialogToolData.lineHeight = JSON.parse(res[0].value)
      scribeData.lineHeightList = JSON.parse(res[0].value)
      console.log(scribeData.lineHeightList, '高亮')
      let textDom = document.getElementById('container')
      let textDom = document.querySelector('.temp-book')
      console.log(textDom)
      if (scribeData.lineHeightList.length > 0) {
        for (let i = 0; i < scribeData.lineHeightList.length; i++) {
          let item = scribeData.lineHeightList[i]
          let heightLightElement = document.createElement('i')
          heightLightElement.style.backgroundColor = item.color
          heightLightElement.innerText = item.selectText
          let rReg = new RegExp(`${item.selectText}`, 'ig')
          let text = textDom.innerHTML
          let rHtml = ''
          rHtml = text.replace(
          let nHtmlText = item.selectNode
          let nHtml = ''
          nHtml = nHtmlText.replace(
            rReg,
            `<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>`
          )
          // nHtmlText = nHtml
          let rHtml = ''
          rHtml = text.replace(
            nHtmlText,
            nHtml
          )
          textDom.innerHTML = rHtml
        }
@@ -1980,7 +2056,13 @@
  addNoteVisble.value = true
  let notes = dialogToolData.notesList.find((item) => item.selectText == txt)
  formData.desc = notes.note
  colorActive.value = notes.color
  selectNode.value = notes.selectNode
  selectText.value = notes.selectText
  selectPage.value = notes.selectPage
  dialogToolData.chapter = notes.chapter
}

window.deleteScribeShow = function (txt) {
  console.log(txt, 2)
  let list = scribeData.scribeDataList.filter((item) => item.selectText != txt)
@@ -1991,7 +2073,7 @@
      setKeyRequests: [
        {
          domain: 'underline',
          key: '2358',
          key: bookId.value,
          value: JSON.stringify(list)
        }
      ]
@@ -2011,7 +2093,7 @@
      setKeyRequests: [
        {
          domain: 'highLight',
          key: '2358',
          key: bookId.value,
          value: JSON.stringify(list)
        }
      ]
@@ -2030,7 +2112,9 @@
    dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText),
    1
  )
  selectNode.value = item.selectNode
  selectText.value = item.selectText
  selectPage.value = item.selectPage
  colorActive.value = item.color
  dialogToolData.chapter = item.chapter
  formData.desc = item.note
@@ -2049,7 +2133,7 @@
        setKeyRequests: [
          {
            domain: 'notes',
            key: '2358',
            key: bookId.value,
            value: JSON.stringify(list)
          }
        ]
@@ -2058,6 +2142,15 @@
      ElMessage({
        message: '删除笔记成功!',
        type: 'success'
      })
      console.log(document.querySelectorAll('.underline'))
      let list = document.querySelectorAll('.underline')
      list.forEach(itemNode =>{
        console.log(itemNode.nextSibling)
        if(itemNode.innerText == item.selectText){
          itemNode.removeAttribute('style');
          itemNode.nextSibling?.remove()
        }
      })
      getNotesList()
    })
@@ -2745,13 +2838,12 @@
          margin-right: 5px;
        }
      }
      .floatToolItem:hover ,.floatToolActive{
      .floatToolItem:hover,
      .floatToolActive {
        background-color: #fff;
        color: #0093ff;
      }
    }


    
    .brushBox{
      position: fixed;
@@ -2762,7 +2854,7 @@
      background:#fff;
      // padding: 10px;
      overflow: hidden;
      border:1px solid #0093FF;
      border: 1px solid #0093ff;
      .toolList{
        display:flex;
        justify-content: center;
@@ -2783,7 +2875,7 @@
        }
        .layOutTool{
          padding-left:15px;
          border-left:1px solid #E0E0E0
          border-left: 1px solid #e0e0e0;
        }
      }
    }