优化

package.json

@@ -68,7 +68,7 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-use-electron": "0.0.3",
-    "vue-tsc": "^0.40.13"
+    "vue-tsc": "^1.2.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,vue}": [

src/App.vue

@@ -4,6 +4,7 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import useMainStore from '@/store/main'
 import useMainLayoutStore from '@/store/layout'
 import LockScreen from '@/layout/LockScreen.vue'
+import LoadingFlag from '@/components/common/LoadingFlag.vue'
 import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -68,6 +69,7 @@ onMounted(() => {
       </keep-alive>
     </router-view>
     <lock-screen v-if="mainStore.lockScreenStatus"></lock-screen>
+    <loading-flag v-if="mainStore.globalLoading"></loading-flag>
   </el-config-provider>
 </template>
 

src/assets/styles/element/custom.scss

@@ -267,4 +267,63 @@ body{
     padding:10px !important;
 
   }
+}
+
+.el-table-v2 {
+  .el-table-v2__header-row{
+    // border-bottom:1px solid #ddd !important;
+    // border-top:1px solid #ddd !important;
+    border-bottom:none;
+    .el-table-v2__header-cell{
+      border-left:1px solid #ddd;
+      border-top:1px solid #ddd;
+      border-bottom:1px solid #ddd;
+      &:last-child{
+        position:relative;
+        border-right:1px solid #ddd;
+      }
+    }
+  }
+  .el-table-v2__row{
+    border-bottom:1px solid #ddd !important;
+    .el-table-v2__row-cell{
+      border-left:1px solid #ddd;
+      &:last-child{
+        border-right:1px solid #ddd;
+      }
+    }
+  }
+  // .el-empty{
+  //   display:none;
+  // }
+  .el-table-v2__empty{
+    height:60px;
+    .el-empty{
+      display:none;
+    }
+    border-left:1px solid #ddd;
+    &:before{
+      content:'';
+      width:1px;
+      height:100%;
+      background:#ddd;
+      position:absolute;
+      right:1px;
+    }
+    &:after{
+      content:'';
+      height:1px;
+      width:calc(100% - 1px);
+      background:#ddd;
+      position:absolute;
+      bottom:0;
+    }
+  }
+  .el-table-v2__header-row{
+    font-size:12px;
+  }
+  .el-table-v2__row-cell{
+    color:#666;
+    font-size:13px;
+  }
 }

src/components/common/LoadingFlag.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="loading-flag flex justify-center items-center">
+    <div class="loading-content">
+      <img src="../../assets/images/screen_loading.png" />
+      <p>计算中，请稍等...</p>
+    </div>
+  </div>
+</template>
+<script setup lang="ts" name="LoadingFlag"></script>
+<style scoped lang="scss">
+.loading-flag {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.3);
+  .loading-content {
+    width: 140px;
+    height: 90px;
+    background: #fff;
+    border-radius: 4px;
+    text-align: center;
+    img {
+      width: 26px;
+      margin-top: 16px;
+    }
+    p {
+      color: #666;
+      font-size: 14px;
+      margin-top: 7px;
+    }
+  }
+}
+</style>

src/hooks/useFetch.ts

@@ -2,13 +2,14 @@ import { ref, onScopeDispose, shallowRef, unref, getCurrentInstance } from 'vue'
 import type { Ref, ShallowRef } from 'vue'
 import api from '@/api'
 import request from '@/plugins/request'
+import useMainStore from '@/store/main'
 import type { AxiosRequestConfig, Method } from 'axios'
 import type { ApiKeys, ExtractApiParams, ExtractApiResponse } from '@/api/api'
 
 interface ReturnType<K extends ApiKeys> {
   loading: Ref<boolean>
   error: ShallowRef<unknown>
-  result: ShallowRef<ExtractApiResponse<K>>
+  result: Ref<ExtractApiResponse<K>>
   fetch(data?: ExtractApiParams<K>, config?: AxiosRequestConfig): Promise<ExtractApiResponse<K>>
   cancel: () => void
   reset: () => void
@@ -19,13 +20,23 @@ type HttpMethod = Exclude<Lowercase<Method>, 'purge' | 'link' | 'unlink'>
 function isConfig(x?: string | AxiosRequestConfig): x is AxiosRequestConfig {
   return typeof x === 'object'
 }
-
+const needLoadingApiList: any[] = [
+  '/api/statistic/monitor/list',
+  '/api/statistic/monitor/list',
+  '/api/statistic/monitor/list/by/group',
+  '/api/statistic/marker/compare/list',
+  '/api/statistic/marking/progress',
+  '/api/statistic/marking/progress/by/marker',
+  '/api/statistic/monitor/for/group',
+  '/api/statistic/marking/progress/check/for/unmark/list',
+  '/api/statistic/marking/progress/ending',
+]
 function useFetch<K extends ApiKeys>(key: K): ReturnType<K>
 function useFetch<K extends ApiKeys>(key: K, config: AxiosRequestConfig, method?: HttpMethod): ReturnType<K>
 function useFetch<K extends ApiKeys>(key: K, method: HttpMethod): ReturnType<K>
 function useFetch<K extends ApiKeys>(k: K, ...args: any[]) {
   const loading = ref(false)
-  const result = shallowRef<ExtractApiResponse<K> | null>(null)
+  const result = ref<ExtractApiResponse<K> | null>(null)
   const error = shallowRef<unknown>()
   let abortcontroller: AbortController | null
   let method: HttpMethod = 'post'
@@ -44,7 +55,11 @@ function useFetch<K extends ApiKeys>(k: K, ...args: any[]) {
   }
 
   const fetch = async (data?: ExtractApiParams<K>, fetchConfig: AxiosRequestConfig = {}) => {
+    const mainStore = useMainStore()
+
     try {
+      const apiConfig = api[k]
+      console.log('apiConfig:', apiConfig)
       if (unref(loading)) {
         cancel()
       }
@@ -52,8 +67,10 @@ function useFetch<K extends ApiKeys>(k: K, ...args: any[]) {
       abortcontroller = new AbortController()
 
       loading.value = true
-
-      const apiConfig = api[k]
+      if (needLoadingApiList.indexOf(apiConfig) > -1) {
+        mainStore.setGlobalLoading(true)
+      }
+      // const apiConfig = api[k]
 
       const option: AxiosRequestConfig & { url: string } = {
         ...config,
@@ -74,6 +91,7 @@ function useFetch<K extends ApiKeys>(k: K, ...args: any[]) {
       return Promise.reject(failed)
     } finally {
       loading.value = false
+      mainStore.setGlobalLoading(false)
     }
   }
 

src/layout/LockScreen.vue

@@ -79,7 +79,7 @@ const submit = async () => {
   right: 0;
   bottom: 0;
   top: 0;
-  z-index: 3000;
+  z-index: 999999;
   background: rgba(0, 0, 0, 0.9);
   .pwd-input {
     width: 200px;

src/modules/analysis/group-monitoring-detail/index.vue

@@ -56,7 +56,7 @@
     </div>
     <div class="flex-1 p-t-base flex overflow-hidden">
       <div class="flex direction-column flex-1 overflow-hidden radius-base fill-blank relative paper-view">
-        <div class="flex-1 p-extra-small scroll-auto img-wrap">
+        <div ref="imgWrap" class="flex-1 p-extra-small scroll-auto img-wrap">
           <img :src="current?.filePath" alt="" class="paper-img relative" />
           <p v-if="current" class="absolute mark-score">{{ current.headerScore ?? current.markerScore }}</p>
         </div>
@@ -108,7 +108,7 @@ import type { EpTableColumn } from 'global-type'
 
 const { back } = useRouter()
 const { query } = useRoute()
-
+const imgWrap = ref()
 /** 给分板 */
 const scoringPanelVisible = ref<boolean>(true)
 
@@ -169,6 +169,9 @@ watch(
         startTime: '',
         endTime: '',
       })
+      if (imgWrap.value) {
+        imgWrap.value.scrollTop = 0
+      }
     }
   },
   { immediate: true, deep: true }

src/modules/monitor/system-check/index.vue

@@ -46,7 +46,7 @@
           @submit="onSubmit"
         ></scoring-panel-with-confirm>
       </div>
-      <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
+      <div v-loading="loading" class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
         <base-form size="small" :model="formModel" :items="formItems" :label-width="'52px'">
           <template #form-item-search>
             <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>

src/modules/quality/ending-check/components/EndCheck.vue

@@ -27,8 +27,8 @@
           highlight-current-row
           @current-change="onCheckTask"
         ></base-table> -->
-        <div class="table-wrap">
-          <base-table
+        <div v-loading="loading1" class="table-wrap">
+          <!-- <base-table
             ref="table1"
             v-loading="loading1"
             border
@@ -37,7 +37,16 @@
             :columns="columns1"
             :data="unMarkPaperList?.result"
             @selection-change="handleSelectionChange1"
-          ></base-table>
+          ></base-table> -->
+          <el-table-v2
+            :header-height="43"
+            :row-height="43"
+            :height="tableHeight"
+            :width="tableWidth"
+            :columns="columns1"
+            :data="unMarkPaperList ? unMarkPaperList.result : []"
+            fixed
+          ></el-table-v2>
         </div>
       </div>
       <div class="radius-base fill-blank p-base overflow-hidden m-l-base flex-1">
@@ -59,8 +68,8 @@
           highlight-current-row
           @current-change="onCheckTask2"
         ></base-table> -->
-        <div class="table-wrap">
-          <base-table
+        <div v-loading="loading4" class="table-wrap">
+          <!-- <base-table
             ref="table2"
             v-loading="loading4"
             border
@@ -69,7 +78,16 @@
             :columns="columns1"
             :data="unMarkBackPaperList?.result"
             @selection-change="handleSelectionChange2"
-          ></base-table>
+          ></base-table> -->
+          <el-table-v2
+            :header-height="43"
+            :row-height="43"
+            :height="tableHeight"
+            :width="tableWidth"
+            :columns="columns11"
+            :data="unMarkBackPaperList ? unMarkBackPaperList.result : []"
+            fixed
+          ></el-table-v2>
         </div>
       </div>
       <div class="radius-base fill-blank p-base overflow-hidden m-l-base flex-1">
@@ -142,10 +160,10 @@
   </base-dialog>
 </template>
 
-<script setup lang="ts" name="EndCheck">
+<script setup lang="tsx" name="EndCheck">
 /** 收尾检查 */
-import { reactive, ref, computed, watch } from 'vue'
-import { ElButton, ElMessage } from 'element-plus'
+import { reactive, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ElButton, ElMessage, ElTableV2, ElCheckbox } from 'element-plus'
 import BaseForm from '@/components/element/BaseForm.vue'
 import BaseTable from '@/components/element/BaseTable.vue'
 import BaseDialog from '@/components/element/BaseDialog.vue'
@@ -154,20 +172,72 @@ import useFetch from '@/hooks/useFetch'
 import useOptions from '@/hooks/useOptions'
 import useVW from '@/hooks/useVW'
 import useForm from '@/hooks/useForm'
-
+import useMainLayoutStore from '@/store/layout'
 import type { ExtractApiParams, ExtractMultipleApiResponse } from '@/api/api'
 import type { EpFormItem, EpTableColumn, EpFormRules } from 'global-type'
 
-const table1 = ref()
-const table2 = ref()
-const multipleSelection1 = ref<any[]>([])
-const multipleSelection2 = ref<any[]>([])
-const handleSelectionChange1 = (val: any[]) => {
-  multipleSelection1.value = val
+const SelectionCell: any = (obj: any) => {
+  const { value, intermediate = false, onChange } = obj
+  return <ElCheckbox onChange={onChange} modelValue={value} indeterminate={intermediate} />
 }
-const handleSelectionChange2 = (val: any[]) => {
-  multipleSelection2.value = val
+
+const mainLayout = useMainLayoutStore()
+// const table1 = ref()
+// const table2 = ref()
+let tableWidth = ref(1)
+let tableHeight = ref(window.innerHeight - 280)
+
+function setTableWidth() {
+  let winWidth = window.innerWidth > 1240 ? window.innerWidth : 1240
+  let leftWidth = mainLayout.collapse ? 220 : 0
+  tableWidth.value = parseInt((winWidth - leftWidth - 40) / 4 - 80 + '')
+  tableHeight.value = window.innerHeight - 280
+}
+// let tableWidth = computed(() => {
+//   let winWidth = window.innerWidth
+//   let leftWidth = mainLayout.collapse ? 220 : 0
+//   return parseInt((winWidth - leftWidth - 40) / 4 - 80 + '')
+// })
+setTableWidth()
+watch(
+  () => mainLayout.collapse,
+  () => {
+    setTimeout(setTableWidth, 400)
+  }
+)
+function listenResize() {
+  setTableWidth()
 }
+onMounted(() => {
+  window.addEventListener('resize', listenResize)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', listenResize)
+})
+const multipleSelection1 = computed(() => {
+  if (unMarkPaperList.value?.result && unMarkPaperList.value?.result.length) {
+    return unMarkPaperList.value?.result.filter((item: any) => {
+      return !!item.checked
+    })
+  } else {
+    return []
+  }
+})
+const multipleSelection2 = computed(() => {
+  if (unMarkBackPaperList.value?.result && unMarkBackPaperList.value?.result.length) {
+    return unMarkBackPaperList.value?.result.filter((item: any) => {
+      return !!item.checked
+    })
+  } else {
+    return []
+  }
+})
+// const handleSelectionChange1 = (val: any[]) => {
+//   multipleSelection1.value = val
+// }
+// const handleSelectionChange2 = (val: any[]) => {
+//   multipleSelection2.value = val
+// }
 
 /** 指定评卷员 */
 const visibleChangeMarker = ref<boolean>(false)
@@ -254,18 +324,89 @@ const items = computed<EpFormItem[]>(() => [
 ])
 
 /** 未评卷 table */
-const columns1: EpTableColumn[] = [
-  { type: 'selection', width: 55 },
-  {
-    label: '评卷员',
-    prop: 'markerName',
-    formatter(row) {
-      return `${row.loginName}-${row.markerName}`
+const columns1 = computed(() => {
+  const w = parseInt((tableWidth.value - 41) / 3 + '')
+
+  return [
+    {
+      key: 'selection',
+      width: 40,
+      cellRenderer: (rowObj: any) => {
+        const { rowData } = rowObj
+        const onChange = (value: any) => (rowData.checked = value)
+        return <SelectionCell value={rowData.checked} onChange={onChange} />
+      },
+
+      headerCellRenderer: () => {
+        let data = unMarkPaperList.value ? unMarkPaperList.value.result : []
+        // const _data = unref(data)
+        const onChange = (value: any) =>
+          (data = data.map((row: any) => {
+            row.checked = value
+            return row
+          }))
+        const allSelected = !data.length ? false : data.every((row: any) => row.checked)
+        const containsChecked = !data.length ? false : data.some((row: any) => row.checked)
+
+        return <SelectionCell value={allSelected} intermediate={containsChecked && !allSelected} onChange={onChange} />
+      },
     },
-  },
-  { label: '密号', prop: 'secretNumber' },
-  { label: '大题', prop: 'questionMainName' },
-]
+    {
+      title: '评卷员',
+      key: 'markerName',
+      dataKey: 'markerName',
+      width: w,
+      // formatter(row: any) {
+      //   return `${row.loginName}-${row.markerName}`
+      // },
+    },
+    { title: '密号', key: 'secretNumber', dataKey: 'secretNumber', width: w },
+    { title: '大题', key: 'questionMainName', dataKey: 'questionMainName', width: w + 1 },
+  ]
+})
+const columns11 = computed(() => {
+  const w = parseInt((tableWidth.value - 41) / 3 + '')
+  return [
+    {
+      key: 'selection',
+      width: 40,
+      cellRenderer: (rowObj: any) => {
+        const { rowData } = rowObj
+        const onChange = (value: any) => (rowData.checked = value)
+        return <SelectionCell value={rowData.checked} onChange={onChange} />
+      },
+
+      headerCellRenderer: () => {
+        let data = unMarkBackPaperList.value ? unMarkBackPaperList.value.result : []
+        // const _data = unref(data)
+        const onChange = (value: any) =>
+          (data = data.map((row: any) => {
+            row.checked = value
+            return row
+          }))
+        const allSelected = !data.length ? false : data.every((row: any) => row.checked)
+        const containsChecked = !data.length ? false : data.some((row: any) => row.checked)
+
+        return <SelectionCell value={allSelected} intermediate={containsChecked && !allSelected} onChange={onChange} />
+      },
+    },
+    {
+      title: '评卷员',
+      key: 'markerName',
+      dataKey: 'markerName',
+      width: w,
+      cellRenderer: (rowObj: any) => {
+        const { rowData } = rowObj
+        return <span>{`${rowData.loginName}-${rowData.markerName}`}</span>
+      },
+      // formatter(row: any) {
+      //   return `${row.loginName}-${row.markerName}`
+      // },
+    },
+    { title: '密号', key: 'secretNumber', dataKey: 'secretNumber', width: w },
+    { title: '大题', key: 'questionMainName', dataKey: 'questionMainName', width: w + 1 },
+  ]
+})
 /** 未处理问题卷table */
 const columns2: EpTableColumn[] = [
   { label: '密号', prop: 'secretNumber' },

src/router/analysis.ts

@@ -75,7 +75,7 @@ const routes: RouteRecordRaw[] = [
         path: 'group-monitoring',
         component: () => import('@/modules/analysis/group-monitoring/index.vue'),
         meta: {
-          label: '小组监控',
+          label: '小组长监控',
           menu: true,
           menuId: 'analysis-group_monitoring',
           sort: 6,

src/store/main.ts

@@ -15,6 +15,7 @@ interface MainStoreState {
   online: boolean
   lockScreenStatus: boolean
   keepAliveViews: any[]
+  globalLoading: boolean
 }
 
 interface MainStoreActions {
@@ -26,6 +27,7 @@ interface MainStoreActions {
   setLockScreen: (bool: boolean) => void
   setKeepAliveViews: (name: string) => void
   cutKeepAliveViews: (name: string) => void
+  setGlobalLoading: (name: boolean) => void
 }
 
 const useMainStore = defineStore<'main', MainStoreState, Record<string, any>, MainStoreActions>('main', {
@@ -49,9 +51,13 @@ const useMainStore = defineStore<'main', MainStoreState, Record<string, any>, Ma
       online: true,
       lockScreenStatus: sessionStorage.get('lockScreenStatus') == '1' ? true : false,
       keepAliveViews: ['MainLayout'],
+      globalLoading: false,
     }
   },
   actions: {
+    setGlobalLoading(bool) {
+      this.globalLoading = bool
+    },
     setKeepAliveViews(name) {
       if (!this.keepAliveViews.includes(name)) {
         this.keepAliveViews.push(name)