完工汇报前端页面

src/api/submitLog.ts

@@ -19,8 +19,8 @@ export interface SubmitLog {
 // 派工工单汇报记录 API
 export const submitLogApi = {
   // 分页查询
-  page(params: { page: number; pageSize: number; id?: number }) {
+  page(params: { page: number; pageSize: number; assingStatus?: number }) {
-    return request({ url: '/biz/submitLog/page', method: 'get', params })
+    return request({ url: '/mes/report/page', method: 'get', params })
   },
 
   // 获取详情
@@ -66,5 +66,10 @@ export const submitLogApi = {
   // 下载导入模板
   downloadTemplate() {
     return request({ url: `/biz/submitLog/template`, method: 'get', responseType: 'blob' })
+  },
+
+  //汇报统计
+  statistics(params?: {time?:string; type?:string}){
+      return request({url:'/mes/report/statistics',method:'get',params})
   }
 }

src/views/biz/qualityTesting/index.vue

@@ -58,13 +58,28 @@
           :columns="columns"
           :data="tableData"
           :loading="loading"
-          :pagination="pagination"
+           size="small"
-          :row-key="(row) => row.id"
+            remote
-          :scroll-x="1200"
+            :border="false"
+            :single-line="false"
+            striped
+      />
+      <div class="pagination-container" style="display: flex; justify-content: flex-end; margin-top: 12px">
+          <n-pagination
+            v-model:page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :item-count="pagination.itemCount"
+            :page-sizes="[10, 20, 50, 100]"
+            show-size-picker
+            show-quick-jumper
             @update:page="handlePageChange"
             @update:page-size="handlePageSizeChange"
-          @update:checked-row-keys="handleCheck"
+          >
-      />
+            <template #prefix>
+              共 {{ pagination.itemCount }} 条
+            </template>
+          </n-pagination>
+         </div>
     </n-card>
 
     <!-- 新增/编辑弹窗 -->
@@ -338,8 +353,6 @@ const pagination = reactive({
 
 // 搜索表单
 const searchForm = reactive({
-  page:pagination.page,
-  pageSize:pagination.pageSize,
   qcNo:  null as number | null,
   status:  null as number | null,
 })
@@ -571,7 +584,12 @@ const columns: DataTableColumns<QualityTesting> = [
 async function loadData() {
   loading.value = true
   try {
-    const res = await qualityTestingApi.page(searchForm)
+    const res = await qualityTestingApi.page({
+      page:pagination.page,
+      pageSize: pagination.pageSize,
+      qcNo:searchForm.qcNo,
+      status: searchForm.status
+    })
     tableData.value = res.list
     pagination.itemCount = res.total
   } finally {
@@ -588,7 +606,6 @@ function handleSearch() {
 // 重置
 function handleReset() {
   searchForm.id =  null
-
   searchForm.status =  null
 
   handleSearch()

src/views/biz/submitLog/index.vue

@@ -4,8 +4,14 @@
       <!-- 搜索表单 -->
       <div class="search-form">
         <n-form inline :model="searchForm" label-placement="left">
-          <n-form-item label="主键id;主键id">
+          <n-form-item label="派工状态">
-            <n-input v-model:value="searchForm.id" placeholder="请输入主键id;主键id" clearable />
+            <n-select
+                v-model:value="searchForm.assingStatus"
+                :options="qcAssingStatusOptions"
+                placeholder="请选择派工状态"
+                clearable
+                style="width: 200px"
+            />
           </n-form-item>
           <n-form-item>
             <n-space>
@@ -25,11 +31,11 @@
       <!-- 工具栏 -->
       <div class="table-toolbar">
         <n-space>
-          <n-button type="primary" @click="handleAdd">
+          <n-button type="primary" @click="handleStatistics">
-            <template #icon><n-icon><AddOutline /></n-icon></template>
+            <template #icon></template>
-            新增
+              汇报统计
           </n-button>
-          <n-button @click="importModalVisible = true">
+          <!-- <n-button @click="importModalVisible = true">
             <template #icon><n-icon><CloudUploadOutline /></n-icon></template>
             导入
           </n-button>
@@ -40,7 +46,7 @@
           <n-button type="error" :disabled="selectedIds.length === 0" @click="handleBatchDelete">
             <template #icon><n-icon><TrashOutline /></n-icon></template>
             删除
-          </n-button>
+          </n-button> -->
         </n-space>
       </div>
 
@@ -49,13 +55,28 @@
         :columns="columns"
         :data="tableData"
         :loading="loading"
-        :pagination="pagination"
+        size="small"
-        :row-key="(row) => row.id"
+        remote
-        :scroll-x="1200"
+        :border="false"
+        :single-line="false"
+        striped
+      />
+        <div class="pagination-container" style="display: flex; justify-content: flex-end; margin-top: 12px">
+          <n-pagination
+            v-model:page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :item-count="pagination.itemCount"
+            :page-sizes="[10, 20, 50, 100]"
+            show-size-picker
+            show-quick-jumper
             @update:page="handlePageChange"
             @update:page-size="handlePageSizeChange"
-        @update:checked-row-keys="handleCheck"
+          >
-      />
+            <template #prefix>
+              共 {{ pagination.itemCount }} 条
+            </template>
+          </n-pagination>
+         </div>
     </n-card>
 
     <!-- 新增/编辑弹窗 -->
@@ -109,22 +130,71 @@
         <n-button @click="importModalVisible = false">关闭</n-button>
       </template>
     </n-modal>
+
+    <!--汇报详情面板 -->
+    <n-modal v-model:show="reportDetailVisible" preset="card" title="汇报详情" style="width: 1000px">
+         <n-card title="质检信息" hoverable style="margin-bottom: 12px" >
+            <div v-if="qualityTestings.length === 0" style="height:520px;display:flex;align-items:center;justify-content:center;color:#999">
+              暂无质检单据数据
+            </div>
+          <n-tabs 
+              type="line" 
+              animated
+              placement="left" 
+              style="height: 520px"
+              v-else
+            >
+              <n-tab-pane 
+                v-for="item in qualityTestings"
+                :name="item.qcNo"
+                :tab="item.qcNo">
+                   <n-card title="质检基础信息" style="margin-bottom:12px">
+                    <n-descriptions :column="3">
+                      <n-descriptions-item label="资源类型">{{formatDisplayValue("resourceType",item.resourceType)  }}</n-descriptions-item>
+                      <n-descriptions-item label="质检状态">{{formatDisplayValue("status",item.qcStatus)  }}</n-descriptions-item>
+                      <n-descriptions-item label="总数量">{{ item.totalQty }}</n-descriptions-item>
+                    </n-descriptions>
+                  </n-card>
+
+                    <!--汇报表格-->
+                    <n-card title="汇报列表">
+                      <n-data-table
+                        :columns="submitColumns"
+                        :data="item.submitLogs"
+                        :scroll-x="700"
+                        max-height="320"
+                        :pagination="{ pageSize:3 }"
+                      >
+                       <!--空数据提示插槽-->
+                      <template #empty>
+                        <div style="padding:40px;text-align:center;color:#999">
+                          当前没有数据
+                        </div>
+                      </template>
+                    
+                    </n-data-table>
+                     
+                    </n-card>
+              </n-tab-pane>
+            </n-tabs>
+         </n-card>
+    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, h, onMounted } from 'vue'
 import { NButton, NSpace, NIcon, NUpload, useMessage, useDialog, type DataTableColumns, type UploadCustomRequestOptions } from 'naive-ui'
-import { SearchOutline, RefreshOutline, AddOutline, TrashOutline, CreateOutline, CloudUploadOutline, DownloadOutline } from '@vicons/ionicons5'
+import { SearchOutline, RefreshOutline, AddOutline, TrashOutline, CreateOutline, CloudUploadOutline, DownloadOutline, Options } from '@vicons/ionicons5'
 import { submitLogApi, type SubmitLog } from '@/api/submitLog'
+import { dictDataApi } from '@/api/org'
+import router from '@/router'
+
 
 const message = useMessage()
 const dialog = useDialog()
 
-// 搜索表单
+
-const searchForm = reactive({
-  id:  null as number | null,
-})
 
 // 表格数据
 const tableData = ref<SubmitLog[]>([])
@@ -135,7 +205,12 @@ const pagination = reactive({
   pageSize: 10,
   itemCount: 0,
   showSizePicker: true,
-  pageSizes: [10, 20, 50]
+  pageSizes: [10, 20, 50,100]
+})
+
+// 搜索表单
+const searchForm = reactive({
+  page:pagination.page as number,
 })
 
 // 弹窗
@@ -149,9 +224,18 @@ const defaultFormData: SubmitLog = {
   quantity: undefined,
 }
 const formData = reactive<SubmitLog>({ ...defaultFormData })
+//汇报详情弹窗
+const reportDetailVisible = ref(false)
 
 // 字典选项（下拉框/单选框/复选框关联字典时使用）
-
+//判定状态字典
+const qcResultTypeOptions =  ref<{ label: string; value: any }[]>([])
+//业务来源字典
+const qcSourceTypeOptions = ref<{ label: string; value: any }[]>([])
+//质检状态字典
+const qcStatusOptions = ref<{ label: string; value: any }[]>([])
+//派工状态字典
+const qcAssingStatusOptions = ref<{ label: string; value: any }[]>([])
 // 表单校验规则
 const formRules = {
 }
@@ -159,12 +243,18 @@ const formRules = {
 // 表格列
 const columns: DataTableColumns<SubmitLog> = [
   { type: 'selection' },
-  { title: '主键id;主键id', key: 'id' },
+  { title: '工序名称', key: 'processName' },
-  { title: '派工id;派工id', key: 'assingWorkId' },
+  { title: '工序编号', key: 'processCode' },
-  { title: '工序id;工序id', key: 'processId' },
+  { title: '派工编号', key: 'assingCode' },
-  { title: '提交数量;提交数量', key: 'quantity' },
+  { title: '派工人', key: 'userName' },
-  { title: '提交时间', key: 'createTime', width: 180 },
+  { title: '派工状态', key: 'assingStatus',
-  { title: '提交人;提交人', key: 'createBy' },
+     render: (row) => {
+      const val = row.assingStatus
+      const opt = qcAssingStatusOptions.value.find(o => o.value === val || String(o.value) === String(val))
+      return opt ? opt.label : (val ?? '-')
+    }
+  },
+  { title: '派工完成时间', key: 'completedTime'},
   {
     title: '操作',
     key: 'actions',
@@ -172,17 +262,34 @@ const columns: DataTableColumns<SubmitLog> = [
     fixed: 'right',
     render(row) {
       return h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'nowrap' } }, [
-        h(NButton, { size: 'small', quaternary: true, onClick: () => handleEdit(row) }, {
+          h(NButton, { size: 'small', quaternary: true, onClick: () => handleViewReport(row) }, {
-          default: () => [h(NIcon, null, { default: () => h(CreateOutline) }), ' 编辑']
+          default: () => [h(NIcon, null, { default: () => h(null) }), ' 汇报信息']
         }),
-        h(NButton, { size: 'small', quaternary: true, type: 'error', onClick: () => handleDelete(row) }, {
+        // h(NButton, { size: 'small', quaternary: true, onClick: () => handleEdit(row) }, {
-          default: () => [h(NIcon, null, { default: () => h(TrashOutline) }), ' 删除']
+        //   default: () => [h(NIcon, null, { default: () => h(CreateOutline) }), ' 编辑']
-        })
+        // }),
+        // h(NButton, { size: 'small', quaternary: true, type: 'error', onClick: () => handleDelete(row) }, {
+        //   default: () => [h(NIcon, null, { default: () => h(TrashOutline) }), ' 删除']
+        // })
       ])
     }
   }
 ]
 
+//汇报详情属性
+const  qualityTestings = ref()
+const submitColumns = ref([
+  { title: "提交人", key: "sumbitUser" },
+  { title: "提交时间", key: "submitCreateTime" },
+  { title: "提交数量", key: "quantity" },
+  { title: "单据状态", key: "submitStatus",
+      render: (row) => {
+      const val = row.submitStatus
+      const opt = qcResultTypeOptions.value.find(o => o.value === val || String(o.value) === String(val))
+      return opt ? opt.label : (val ?? '-')
+    }
+   }
+])
 // 加载数据
 async function loadData() {
   loading.value = true
@@ -190,10 +297,12 @@ async function loadData() {
     const res = await submitLogApi.page({
       page: pagination.page,
       pageSize: pagination.pageSize,
-      id: searchForm.id || undefined,
+      assingStatus: searchForm.assingStatus
     })
     tableData.value = res.list
     pagination.itemCount = res.total
+    console.log(pagination.itemCount);
+    
   } finally {
     loading.value = false
   }
@@ -201,13 +310,13 @@ async function loadData() {
 
 // 搜索
 function handleSearch() {
-  pagination.page = 1
+  searchForm.page = 1
   loadData()
 }
 
 // 重置
 function handleReset() {
-  searchForm.id =  null
+  searchForm.assingStatus =  null
 
   handleSearch()
 }
@@ -312,7 +421,7 @@ async function handleExport() {
   try {
     const params: Record<string, any> = {}
     if (selectedIds.value.length > 0) params.ids = selectedIds.value
-    if (searchForm.id != null) params.id = searchForm.id
+    if (searchForm.assingStatus != null) params.id = searchForm.assingStatus
     const blob = await submitLogApi.export(params)
     const url = window.URL.createObjectURL(blob)
     const link = document.createElement('a')
@@ -363,6 +472,59 @@ async function handleImportUpload({ file }: UploadCustomRequestOptions) {
 
 // 加载字典选项
 async function loadDictOptions() {
+    try {
+    const data = await dictDataApi.listByType('qc_result_type')
+    qcResultTypeOptions.value = data.map(d => ({ label: d.dictLabel, value: (Number(d.dictValue) || d.dictValue) }))
+  }catch {}
+  try {
+    const data = await dictDataApi.listByType('source_type')
+    qcSourceTypeOptions.value = data.map(d => ({ label: d.dictLabel, value: (Number(d.dictValue) || d.dictValue) }))
+  }catch {}
+  try {
+    const data = await dictDataApi.listByType('qc_status')
+    qcStatusOptions.value = data.map(d => ({ label: d.dictLabel, value: (Number(d.dictValue) || d.dictValue) }))
+  }catch {}
+  try {
+    const data = await dictDataApi.listByType('assing_status')
+    qcAssingStatusOptions.value = data.map(d => ({ label: d.dictLabel, value: (Number(d.dictValue) || d.dictValue) }))
+  }catch {}
+}
+
+//查看汇报信息
+
+function handleViewReport(row) {
+  reportDetailVisible.value = true
+  
+  qualityTestings.value = row.qualityTestings
+      
+}
+
+
+function formatDisplayValue(key:string,value: any){
+  if (value === null || value === undefined) return '-'
+
+  //根据字段类型格式化
+  switch(key) {
+     case 'resourceType': {
+      const sourceOpt = qcSourceTypeOptions.value.find(o => o.value === value || String(o.value) === String(value))
+      return sourceOpt ? sourceOpt.label : String(value)
+    }
+    case 'status': {
+      const statusOpt = qcStatusOptions.value.find(o => o.value === value || String(o.value) === String(value))
+      return statusOpt ? statusOpt.label : String(value)
+    }
+
+    case 'qcNo':
+      return value ? new Date(value).toLocaleString('zh-CN') : '-'
+    default:
+      return String(value)
+  }
+}
+
+//汇报统计
+function handleStatistics() {
+  let path = 'statistic'
+  router.push(path)
 }
 
 onMounted(() => {

src/views/biz/submitLog/statistics.vue

@@ -0,0 +1,202 @@
+<template>
+    <div class="page-container">
+    <n-card class="page-layout">
+         <!-- 搜索表单 -->
+      <div class="search-form">
+        <n-form inline :model="searchForm" label-placement="left">
+          <n-form-item label="统计方式">
+             <n-select
+                v-model:value="searchForm.type"
+                :options="statisticTypeOptions"
+                placeholder="请选择统计方式"
+                clearable
+                style="width: 200px"
+            />
+          </n-form-item>
+          <n-form-item label="统计时间">
+            <n-date-picker
+                    v-model:formatted-value="searchForm.timestamp"
+                    format="yyyy-MM-dd"
+                    type="date"
+                    clearable
+                    style="width: 200px"
+                />
+          </n-form-item>
+
+          <n-form-item>
+            <n-space>
+              <n-button type="primary" @click="handleSearch">
+                <template #icon><n-icon><SearchOutline /></n-icon></template>
+                搜索
+              </n-button>
+              <n-button @click="handleReset">
+                <template #icon><n-icon><RefreshOutline /></n-icon></template>
+                重置
+              </n-button>
+            </n-space>
+          </n-form-item>
+        </n-form>
+      </div>
+        <div class="stats-section">
+            <div class="stats-cards">
+                 <n-card class="stat-card" size="small" :bordered="false" content-style="background: transparent">
+                    <div class="stat-item">
+                        <span class="stat-label">提交总数</span>
+                        <span class="stat-value">{{ stats.totalQty }}</span>
+                    </div>
+                </n-card>
+                 <n-card class="stat-card success" size="small" :bordered="false" content-style="background: transparent">
+                    <div class="stat-item">
+                        <span class="stat-label">合格</span>
+                        <span class="stat-value">{{ stats.successQty }}</span>
+                    </div>
+                </n-card>
+                <n-card class="stat-card fail" size="small" :bordered="false" content-style="background: transparent">
+                    <div class="stat-item">
+                        <span class="stat-label">报废</span>
+                        <span class="stat-value">{{ stats.scrapQty }}</span>
+                    </div>
+                </n-card>
+            </div>
+            <n-grid :cols="1" :x-gap="24" class="stats-charts">
+                <n-gi>
+                    <n-card title="汇报统计图" size="small" :bordered="false" content-style="background: transparent">
+                     <div ref="statisticChartRef" class="chart-box"></div>
+                    </n-card>
+                </n-gi>
+            </n-grid>
+        </div>
+    </n-card>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, h, onMounted } from 'vue'
+import { dictDataApi } from '@/api/org'
+import { submitLogApi } from '@/api/submitLog'
+
+//字典数据
+const statisticTypeOptions = ref<{ label: string; value: any }[]>([])
+
+//统计属性
+const searchForm =reactive({
+    type: null  as string,
+    timestamp: null as string 
+})
+
+const stats = reactive({
+    totalQty:0,
+    successQty:0,
+    scrapQty:0,
+    outputRate:0,
+    scrapRate:0,
+})
+
+const statisticChartRef = ref<HTMLElement | null>(null)
+
+let statisticChart: any = null
+
+function handleSearch() {
+     loadStatistics()
+}
+
+function handleReset(){
+    searchForm.type = null
+    searchForm.timestamp = null
+    handleSearch()
+}
+
+async function loadStatistics() {
+    try{
+        const res = await submitLogApi.statistics({
+            type: searchForm.type,
+            time: searchForm.timestamp
+        })
+
+        Object.assign(stats,res)
+        
+        updateCharts()
+    }catch{}
+}
+
+
+function updateCharts(){
+    import('echarts').then((echarts)=>{
+        if(statisticChartRef.value) {
+             if (!statisticChart) statisticChart = echarts.init(statisticChartRef.value)
+            
+             const data = [{name:"产出率",value:stats.outputRate},{name:"报废率",value:stats.scrapRate}]
+              statisticChart.setOption({
+                    tooltip: { trigger: 'item' },
+                    series: [{ type: 'pie', radius: '60%', data }]
+                })
+        }
+    })
+}
+
+
+//加载字典选项
+async function loadDictOptions() {
+
+    try{
+        const data = await dictDataApi.listByType('statistic_type')
+        statisticTypeOptions.value = data.map(d=>({label:d.dictLabel,value: (Number(d.dictValue) || d.dictValue) }))
+    }catch{}
+
+}
+
+
+
+
+onMounted(()=>{
+    loadStatistics()
+    loadDictOptions()
+})
+
+
+</script>
+<style lang="scss" scoped>
+.page-layout {
+  .stats-section {
+    margin-bottom: 20px;
+  }
+  .stats-cards {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+  .stat-card {
+    flex: 1;
+    .stat-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      .stat-value {
+        font-size: 24px;
+        font-weight: 700;
+        color: #111827;
+      }
+      .stat-label {
+        font-size: 13px;
+        color: #6b7280;
+      }
+    }
+    &.success .stat-value { color: #18a058; }
+    &.fail .stat-value { color: #d03050; }
+  }
+  .stats-charts {
+    margin-bottom: 16px;
+  }
+  .chart-box {
+    height: 260px;
+    text-align: center;
+  }
+  .search-form {
+    margin-bottom: 16px;
+  }
+  .pagination-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+  }
+}
+</style>