bug fix

src/components/element/BaseDialog.vue

@@ -13,7 +13,10 @@
     <slot />
     <template v-if="props.footer !== false" #footer>
       <template v-if="!!props.canResize">
-        <div v-dialogResize="props.canResize" class="foot-box">
+        <div v-if="props.canResize == 'can-resize2'" v-dialogResizeImg="props.canResize" class="foot-box">
+          <slot name="footer"></slot>
+        </div>
+        <div v-else v-dialogResize="props.canResize" class="foot-box">
           <slot name="footer"></slot>
         </div>
       </template>

src/components/shared/ImagePreview.vue

@@ -5,11 +5,10 @@
     title="试卷预览"
     :can-resize="'can-resize2'"
     :modal="false"
-    :width="'300px'"
     class="preview-dialog"
   >
     <div class="preview-content" :class="{ 'is-big': isBig }">
-      <img v-show="!!url" :src="url" alt="" />
+      <img v-show="!!url" class="small-img" :src="url" alt="" />
     </div>
   </base-dialog>
 </template>
@@ -31,11 +30,15 @@ const visible = useVModel(props)
   flex-direction: column;
   .el-dialog__body {
     flex: 1;
+    padding: 2px !important;
     .preview-content {
       width: 100%;
       height: 100%;
     }
   }
+  .el-dialog__footer {
+    padding: 0 !important;
+  }
 }
 </style>
 <style scoped lang="scss">
@@ -62,9 +65,10 @@ const visible = useVModel(props)
     // }
     img {
       width: 100%;
-      height: 100%;
+      // height: 100%;
       // height: calc(50vh - 50px);
       // width: auto;
+      height: auto;
       object-fit: contain;
     }
   }

src/directives/dialogResize.ts

@@ -34,7 +34,6 @@ export const dialogResize = {
 
     el.style.overflow = 'initial'
     dragDom.className += ' el-drag-dialog'
-    console.log(el)
     // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
     // dragDom.style.overflow = 'auto'
     dragDom.style.background = '#fff'

src/directives/dialogResizeImg.ts

@@ -0,0 +1,265 @@
+export const dialogResizeImg = {
+  mounted(el: any, binding: any, vnode: any) {
+    const bValue = binding.value
+    const localKeyMap: any = {
+      positions: {
+        'can-resize': 'cet-keyboard-positions',
+        'can-resize2': 'cet-preview-positions',
+      },
+      resize: {
+        'can-resize': 'cet-keyboard-resize',
+        'can-resize2': 'cet-preview-resize',
+      },
+    }
+    const resizeEvent = new CustomEvent('drag-resize', {
+      detail: '尺寸变化',
+      bubbles: false,
+    })
+    // 初始化不最大化
+    el.fullscreen = false
+    // 弹框可拉伸最小宽高
+    const minWidth = binding.value === 'can-resize2' ? 290 : 336
+    const maxHeight = window.innerHeight
+    // const minHeight = 290
+    // 当前宽高
+    const nowWidth = minWidth
+    // eslint-disable-next-line no-unused-vars
+    // const nowHight = minHeight
+    // 当前顶部高度
+    const nowMarginTop = 0
+    // 获取弹框头部（这部分可双击全屏）
+    const hasSetBodyHight = false
+    // 弹窗
+    const dragDom: any = document.querySelector('.' + binding.value)
+    const dialogHeaderEl = dragDom.querySelector('.el-dialog__header')
+    const img = dragDom.querySelector('.small-img')
+    let ratio = 1
+    // console.log('img', getComputedStyle(img).width)
+
+    el.style.overflow = 'initial'
+    dragDom.className += ' el-drag-dialog'
+    // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
+    // dragDom.style.overflow = 'auto'
+    dragDom.style.background = '#fff'
+
+    const keyboardPositions = localStorage.getItem(localKeyMap.positions[bValue])
+    const keyboardResize = localStorage.getItem(localKeyMap.resize[bValue])
+    if (keyboardPositions) {
+      dragDom.style.left = JSON.parse(keyboardPositions).left || 0
+      dragDom.style.top = JSON.parse(keyboardPositions).top || 0
+    }
+    if (keyboardResize) {
+      const localW = JSON.parse(keyboardResize).width
+      const localH = JSON.parse(keyboardResize).height
+      localW && (dragDom.style.width = localW)
+      localH && (dragDom.style.height = localH)
+      //   dragDom.style.width = JSON.parse(keyboardResize).width || 'auto'
+      //   dragDom.style.height = JSON.parse(keyboardResize).height || 'auto'
+    } else {
+      //   dragDom.style.height = maxHeight / 2 + 'px'
+      dragDom.style.width = '290px'
+    }
+    setTimeout(() => {
+      ratio = dragDom.clientHeight / dragDom.clientWidth
+    }, 20)
+
+    // 清除选择头部文字效果
+    // eslint-disable-next-line no-new-func
+    dialogHeaderEl.onselectstart = new Function('return false')
+    // 头部加上可拖动cursor
+    dialogHeaderEl.style.cursor = 'move'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    // 头部插入最大化最小化元素
+    const maxMin = document.createElement('button')
+    maxMin.className += ' el-dialog__headerbtn el-dialog__minmax'
+    maxMin.style.right = '40px'
+    maxMin.style.color = '#ffffff'
+    maxMin.title = el.fullscreen ? '还原' : '最大化'
+    maxMin.innerHTML =
+      '<i class=' +
+      (el.fullscreen ? '"el-icon-crop"' : '"el-icon-full-screen"') +
+      ' onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"></i>'
+    dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1])
+    const moveDown = (e: any) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      // 获取到的值带px 正则匹配替换
+      let styL: any, styT: any
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null
+        document.onmouseup = null
+        console.log('dragDom.style.left:', dragDom.style.left, dragDom.style.top)
+        localStorage.setItem(
+          localKeyMap.positions[bValue],
+          JSON.stringify({
+            left: dragDom.style.left || 0,
+            top: dragDom.style.top || 0,
+          })
+        )
+      }
+    }
+    dialogHeaderEl.onmousedown = moveDown
+    // const bodyHeight = 'auto'
+
+    // function setMaxMin() {
+    //   if (el.fullscreen) {
+    //     const i: any = maxMin.querySelector('.el-icon-crop')
+    //     i.classList.remove('el-icon-crop')
+    //     i.classList.add('el-icon-full-screen')
+    //     maxMin.innerHTML = '<i class="el-icon-full-screen"></i>'
+    //     maxMin.title = '最大化'
+    //     dragDom.style.height = nowHight + 'px'
+    //     dragDom.style.width = nowWidth + 'px'
+    //     dragDom.style.marginTop = window.innerHeight * 0.07 + 'px'
+    //     el.fullscreen = false
+    //     dialogHeaderEl.style.cursor = 'move'
+    //     dialogHeaderEl.onmousedown = moveDown
+    //     dragDom.querySelector('.el-dialog__body').style.height = bodyHeight
+    //     hasSetBodyHight = false
+    //   } else {
+    //     const i: any = maxMin.querySelector('.el-icon-full-screen')
+    //     i.classList.remove('el-icon-full-screen')
+    //     i.classList.add('el-icon-crop')
+    //     maxMin.title = '还原'
+    //     bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px'
+    //     nowHight = dragDom.clientHeight
+    //     nowWidth = dragDom.clientWidth
+    //     nowMarginTop = dragDom.style.marginTop
+    //     dragDom.style.left = 0
+    //     dragDom.style.top = 0
+    //     dragDom.style.height = window.innerHeight + 'px'
+    //     dragDom.style.width = '100VW'
+    //     dragDom.style.marginTop = 0
+    //     el.fullscreen = true
+    //     dialogHeaderEl.style.cursor = 'initial'
+    //     dialogHeaderEl.onmousedown = null
+    //     if (!hasSetBodyHight) {
+    //       const footerHeight =
+    //         dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight
+    //       dragDom.querySelector('.el-dialog__body').style.height =
+    //         'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'
+    //       /*          dragDom.querySelector('.el-dialog__body').style.height =
+    //           window.innerHeight*0.9
+    //            - (dialogHeaderEl.offsetHeight + footerHeight) + 'px'*/
+    //       hasSetBodyHight = true
+    //     }
+    //   }
+    //   el.dispatchEvent(resizeEvent)
+    // }
+
+    // 点击放大缩小效果
+    // maxMin.onclick = setMaxMin
+    // 双击头部效果
+    // dialogHeaderEl.ondblclick = setMaxMin
+    // 拉伸
+    const resizeEl = document.createElement('div')
+    dragDom.appendChild(resizeEl)
+    // 在弹窗右下角加上一个10-10px的控制块
+    resizeEl.style.cursor = 'se-resize'
+    resizeEl.style.position = 'absolute'
+    resizeEl.style.height = '10px'
+    resizeEl.style.width = '10px'
+    resizeEl.style.right = '0px'
+    resizeEl.style.bottom = '0px'
+    resizeEl.style.zIndex = '99'
+    // 鼠标拉伸弹窗
+
+    resizeEl.onmousedown = (e) => {
+      // 记录初始x位置
+      const clientX = e.clientX
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - resizeEl.offsetLeft
+      const disY = e.clientY - resizeEl.offsetTop
+      //   let maxClientY = 0
+      //   if (dragDom.style.width) {
+      //     dragDom.style.width = dragDom.style.width - 2
+      //   }
+      let maxWW = 0
+      document.onmousemove = function (e) {
+        e.preventDefault() // 移动时禁用默认事件
+        // 通过事件委托，计算移动的距离
+        const x = e.clientX - disX + (e.clientX - clientX) // 这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
+        const y = e.clientY - disY
+
+        // console.log('e.clientY:', e.clientY, maxClientY)
+
+        // if (e.clientY > maxClientY && maxClientY > 0) {
+        //   return false
+        // }
+        // if (dragDom.clientHeight >= maxHeight && maxClientY == 0) {
+        //   maxClientY = e.clientY
+        //   console.log('maxClientY:', maxClientY)
+        //   //   return false
+        // }
+        if (dragDom.clientHeight >= maxHeight && maxWW == 0) {
+          maxWW = dragDom.clientWidth
+          console.log('maxWW', maxWW)
+          //   console.log('dragDom.clientWidth:', dragDom.clientWidth)
+
+          //   dragDom.style.width = 100
+          //   return false
+        }
+        // 比较是否小于最小宽高
+        if (x > maxWW && maxWW > 0) {
+          return
+        }
+        dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
+        // if (dragDom.clientHeight >= maxHeight && maxClientY == 0) {
+        //   console.log('到了')
+        //   maxClientY = e.clientY
+        // }
+        // dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
+        // dragDom.style.width = `${x}px`
+        // dragDom.style.height = `${y}px`
+        // if (!hasSetBodyHight) {
+        //   const footerHeight =
+        //     dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight
+        //   dragDom.querySelector('.el-dialog__body').style.height =
+        //     'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'
+        //   hasSetBodyHight = true
+        // }
+      }
+      // 拉伸结束
+      document.onmouseup = function (e) {
+        document.onmousemove = null
+        document.onmouseup = null
+        localStorage.setItem(
+          localKeyMap.resize[bValue],
+          JSON.stringify({
+            width: dragDom.style.width || 'auto',
+            height: dragDom.style.height || 'auto',
+          })
+        )
+        el.dispatchEvent(resizeEvent)
+      }
+    }
+  },
+}

src/directives/index.ts

@@ -1,5 +1,7 @@
 import { dialogResize } from './dialogResize'
+import { dialogResizeImg } from './dialogResizeImg'
 
 export function setupDirectives(app: any) {
   app.directive('dialogResize', dialogResize)
+  app.directive('dialogResizeImg', dialogResizeImg)
 }

src/modules/marking/mark/index.vue

@@ -470,6 +470,7 @@ watch(enableRemark, (val) => {
   } else {
     clearInterval(timer)
     timer = null
+    getMarkStatus()
   }
 })
 </script>

src/modules/monitor/training-monitoring/index.vue

@@ -47,6 +47,7 @@
           size="small"
           :columns="columns"
           :data="trainingMonitor?.data"
+          :row-class-name="rowClassName"
           @selection-change="onSectionChange"
           @row-dblclick="onDbClick"
         >
@@ -93,6 +94,11 @@ const { fetch: putAssessMonitorPass, loading: putAssessIng } = useFetch('putAsse
 
 const { hasSelected, selectedList, onSectionChange } = useSection<TableDataType>()
 
+const rowClassName = (obj: any) => {
+  if (!obj.row.markerId) {
+    return 'fixed-row'
+  }
+}
 const columns = computed<EpTableColumn<TableDataType>[]>(() => {
   const standardScores = trainingMonitor?.value?.data?.[0]?.scoreList
   const cols: EpTableColumn<TableDataType>[] =
@@ -189,5 +195,13 @@ onBeforeUnmount(() => {
   :deep(.el-form-item--small) {
     margin-bottom: 10px;
   }
+  :deep(.el-table .fixed-row) {
+    display: table-row;
+    position: sticky;
+    position: '-webkit-sticky';
+    top: 0;
+    width: 100%;
+    z-index: 3;
+  }
 }
 </style>