chore: update project changes

2026-06-09 08:37:50 +08:00
parent 6f9f8fe148
commit 0bf5f3f704
14 changed files with 3429 additions and 145 deletions
--- a/生产任务看板/dist.zip
+++ b/生产任务看板/dist.zip
--- a/生产任务看板/src/utils/request.js
+++ b/生产任务看板/src/utils/request.js
@@ -8,7 +8,7 @@ const request_config = window.g.API_WEB_URL + `/submit/MESCommonBase.ashx`
 export const name = name_config
 const service = axios.create({
    baseURL: request_config,
-    timeout: 1000 * 5 // 请求超时时间
+    timeout: 300000 // 请求超时时间，300秒
 })

 // && config.data.name !== '菜单系统模块_通知信息_查询数据' && config.data.name !== '菜单系统模块_首页信息_查询数据1' && config.data.name !== '菜单系统模块_首页信息_查询数据2'
--- a/生产任务看板/src/views/index.vue
+++ b/生产任务看板/src/views/index.vue
@@ -102,17 +102,20 @@

        <section class="table-area">
          <article class="panel table-panel">
-            <div class="panel-caption">未按期齐套任务</div>
-            <div class="table-wrap">
-              <table>
+            <div class="panel-caption">加急任务列表</div>
+            <div class="table-wrap urgent-task-wrap">
+              <table class="scroll-table urgent-scroll-table">
                <thead>
                  <tr>
-                    <th v-for="column in leftColumns" :key="column.key">{{ column.label }}</th>
+                    <th v-for="column in urgentColumns" :key="column.key" :class="`col-${column.key}`">{{ column.label }}</th>
                  </tr>
                </thead>
-                <tbody>
-                  <tr v-for="(row, index) in kitRows" :key="`${row.salesOrder}-${index}`">
-                    <td v-for="column in leftColumns" :key="column.key">{{ row[column.key] }}</td>
+                <tbody class="scroll-body" :style="{ '--scroll-duration': urgentScrollDuration }">
+                  <tr v-for="(row, index) in displayUrgentRows" :key="`${row.productionOrder}-${index}`">
+                    <td v-for="column in urgentColumns" :key="column.key" :class="`col-${column.key}`">
+                      <div v-if="column.key === 'progress'" class="process-detail" v-html="formatProcessDetail(row.progress)" />
+                      <template v-else>{{ row[column.key] }}</template>
+                    </td>
                  </tr>
                </tbody>
              </table>
@@ -120,17 +123,17 @@
          </article>

          <article class="panel table-panel">
-            <div class="panel-caption">加急件明细</div>
+            <div class="panel-caption">未按期齐套任务</div>
            <div class="table-wrap">
-              <table>
+              <table class="scroll-table kit-scroll-table">
                <thead>
                  <tr>
-                    <th v-for="column in urgentColumns" :key="column.key">{{ column.label }}</th>
+                    <th v-for="column in leftColumns" :key="column.key" :class="`col-${column.key}`">{{ column.label }}</th>
                  </tr>
                </thead>
-                <tbody>
-                  <tr v-for="(row, index) in urgentRows" :key="`${row.salesOrder}-${index}`">
-                    <td v-for="column in urgentColumns" :key="column.key">{{ row[column.key] }}</td>
+                <tbody class="scroll-body" :style="{ '--scroll-duration': kitScrollDuration }">
+                  <tr v-for="(row, index) in displayKitRows" :key="`${row.planNo}-${row.productionOrder}-${index}`">
+                    <td v-for="column in leftColumns" :key="column.key" :class="`col-${column.key}`">{{ row[column.key] }}</td>
                  </tr>
                </tbody>
              </table>
@@ -150,8 +153,8 @@ const tableData = ref([])
 const now = ref(new Date('2026-05-06 10:10:10'))
 let timer = null
 let resizeHandler = null
-let Urgentnum = null
-let notintimenum = null
+const Urgentnum = ref(0)
+const notintimenum = ref(0)
 let complete = reactive({
  completeset:100,
  tasknum:0,
@@ -200,8 +203,13 @@ onMounted(() => {
  resizeHandler = () => {
    setScale()
  }
+  
  window.addEventListener('resize', resizeHandler)
  searchDashboardData()
+  // setInterval(function(){
+  //   searchDashboardData()
+  // },600000)
+  
 })

 onUnmounted(() => {
@@ -223,7 +231,7 @@ const searchNoProcessData = () => {
  queryDashboardData('生产任务综合看板_未排产无工艺查询', applyNoProcessData)
 }
 const searchUrgentData = () => {
-  queryDashboardData('生产任务综合看板_加急任务查询', applyUrgentData)
+  queryDashboardData('机加设备生产运营看板_加急任务查询', applyUrgentData)
 }
 const searchNotInTimeData = () => {
  queryDashboardData('生产任务综合看板_未及时开工查询', applyNotInTimeData)
@@ -232,50 +240,43 @@ const searchUnCompleteData = () => {
  queryDashboardData('生产任务综合看板_未按期齐套任务', applyUnCompleteData)
 }
 const applyCompleteSetData = rows => {
-  complete.completeset = rows[0].齐套率
-  complete.untasknum = rows[0].未齐套任务数
-  complete.tasknum = rows[0].总任务数
+  const first = getFirstRow(rows)
+  complete.completeset = first.齐套率 || 0
+  complete.untasknum = first.未齐套任务数 || 0
+  complete.tasknum = first.总任务数 || 0
 }
 const applyNoProcessData = rows => {
-  const total = rows[0].未排产任务数
-  const assembly = rows[0].装配未排产数
+  const first = getFirstRow(rows)
+  const total = first.未排产任务数 || 0
+  const assembly = first.装配未排产数 || 0
  noProcessStats.total = total
  noProcessStats.machining = total - assembly
  noProcessStats.assembly = assembly
-  topStats[1].value = rows[0].无生产工艺计划数
+  topStats[1].value = first.无生产工艺计划数 || 0
 }
 const applyNotInTimeData = rows => {
-  notintimenum = rows[0].未及时开工总数
+  notintimenum.value = getFirstRow(rows).未及时开工总数 || 0
 }
 const applyUrgentData = rows => {
-    urgentRows = rows.map( item => ({
-      salesOrder: item.合同号,
-      productionOrder: item.订单编号,
-      productName: item.物料描述,
-      productCode: item.物料编号,
-      property: item.自制件属性,
-      planQty: item.计划数量,
-      releaseDate: item.下达日期,
-      startDate: item.计划开始,
-      finishDate: item.计划完成,
-    }))
-    Urgentnum = rows[0].加急订单总数
+  const first = getFirstRow(rows)
+  if (first.加急订单总数 !== undefined) {
+    Urgentnum.value = first.加急订单总数
+  }
+
+  urgentRows.value = rows.map(item => ({
+    productionOrder: `${item.订单编号 || ''}-${item.合同号 || ''}`,
+    materialName: item.物料描述,
+    materialCode: item.物料编号,
+    urgentQty: item.加急数量,
+    progress: decodeHtml(item.工序进度详情 || ''),
+  }))
 }
 const applyUnCompleteData = rows => {
-    kitRows = rows.map( item => ({
+    kitRows.value = rows.map( item => ({
      productionOrder: item.订单编号,
      productName: item.物料描述,
      productCode: item.物料编号,
-      property: item.自制件属性,
-      planQty: item.计划数量,
-      releaseDate: item.下达日期,
-      startDate: item.计划开始时间,
-      finishDate: item.计划完成时间,
      planNo: item.合同号,
-      stockQty: '0',
-      kitDate: item.计划开始时间,
-      pickStatus: item.拣配状态 == 1 ?'已拣配':'未拣配',
-      issueStatus: item.发料状态 == 2 ?'发料缺件':'未发料',
    }))
 }
 const queryDashboardData = (procedureName, applyData) => {
@@ -297,6 +298,240 @@ const getResponseRows = response => {
  return []
 }

+const getFirstRow = rows => {
+  if (Array.isArray(rows) && rows.length > 0) {
+    return rows[0]
+  }
+  return {}
+}
+
+const escapeHtml = value => String(value == null ? '' : value)
+  .replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+  .replace(/'/g, '&#39;')
+
+const decodeHtml = value => {
+  if (!value || typeof value !== 'string') {
+    return ''
+  }
+  if (typeof document === 'undefined') {
+    return value
+      .replace(/&gt;/g, '>')
+      .replace(/&lt;/g, '<')
+      .replace(/&amp;/g, '&')
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'")
+  }
+  const textarea = document.createElement('textarea')
+  textarea.innerHTML = value
+  return textarea.value
+}
+
+const blueProcessStyle = 'color: #09a8ff; font-weight: 700;'
+const greenProcessStyle = 'color: #28d961; font-weight: 700;'
+const redProcessStyle = 'color: #ff3f37; font-weight: 700;'
+
+const toNumber = value => {
+  const num = Number(value)
+  return Number.isFinite(num) ? num : 0
+}
+
+const parseProcessStep = step => {
+  const parts = step.split('|')
+  const hasLineNo = parts[4] !== undefined && parts[4] !== '' && !Number.isNaN(Number(parts[4]))
+
+  return {
+    name: parts[0] || '',
+    status: parts[1] || '0',
+    count: parts[2] || '0',
+    planDate: parts[3] || '',
+    assignee: hasLineNo ? '' : (parts[4] || ''),
+    outsourceGroup: hasLineNo ? (parts[5] || '') : (parts[5] || ''),
+    lineNo: hasLineNo ? toNumber(parts[4]) : null,
+    issueQty: hasLineNo ? toNumber(parts[6]) : 0,
+    badQty: hasLineNo ? toNumber(parts[7]) : 0
+  }
+}
+
+const isBlueProcess = (status, count) => {
+  const statusNum = parseInt(status)
+  const countNum = parseInt(count)
+  return statusNum === 6 || statusNum === 3 || countNum > 0
+}
+
+const isOutsourceProcess = process => (
+  process.assignee === '外协' ||
+  process.name.includes('(外协)') ||
+  process.name.includes('（外协）')
+)
+
+const isGreenProcess = process => (
+  isOutsourceProcess(process) &&
+  process.issueQty > toNumber(process.count) + toNumber(process.badQty)
+)
+
+const getProcessBaseStyle = process => {
+  if (isGreenProcess(process)) {
+    return greenProcessStyle
+  }
+  if (isBlueProcess(process.status, process.count)) {
+    return blueProcessStyle
+  }
+
+  const statusNum = parseInt(process.status)
+  if (statusNum === 2 || statusNum === 4) {
+    return greenProcessStyle
+  }
+
+  return redProcessStyle
+}
+
+const getOutsourceGroupStyleState = steps => {
+  const styles = new Map()
+  const processes = steps.map(parseProcessStep)
+
+  let currentIndexes = []
+  let lastProcess = null
+  const flushOutsourceRun = () => {
+    if (currentIndexes.length > 0 && lastProcess) {
+      const style = getProcessBaseStyle(lastProcess)
+      currentIndexes.forEach(index => styles.set(index, style))
+    }
+    currentIndexes = []
+    lastProcess = null
+  }
+
+  const isSameContinuousGroup = process => {
+    if (!lastProcess) {
+      return true
+    }
+    if (process.lineNo === null || lastProcess.lineNo === null) {
+      return false
+    }
+    return process.lineNo === lastProcess.lineNo + 1 &&
+      (process.outsourceGroup || '') === (lastProcess.outsourceGroup || '')
+  }
+
+  processes.forEach((process, index) => {
+    if (!isOutsourceProcess(process)) {
+      flushOutsourceRun()
+      return
+    }
+    if (!isSameContinuousGroup(process)) {
+      flushOutsourceRun()
+    }
+    currentIndexes.push(index)
+    lastProcess = process
+  })
+  flushOutsourceRun()
+
+  return { styles }
+}
+
+const getOutsourceGroupStyle = (process, index, outsourceGroupStyleState) => {
+  if (!isOutsourceProcess(process)) {
+    return ''
+  }
+  return outsourceGroupStyleState.styles.get(index) || ''
+}
+
+const getProcessColor = (status, count, process = null, groupStyle = '') => {
+  if (groupStyle) {
+    return groupStyle
+  }
+  if (process) {
+    return getProcessBaseStyle(process)
+  }
+
+  const statusNum = parseInt(status)
+  const countNum = parseInt(count)
+  if (statusNum === 2 || statusNum === 4) {
+    return greenProcessStyle
+  }
+  if (statusNum === 6 || statusNum === 3) {
+    return blueProcessStyle
+  }
+  if (countNum > 0) {
+    return blueProcessStyle
+  }
+  return redProcessStyle
+}
+
+const formatProcessDetail = processDetailStr => {
+  if (!processDetailStr || typeof processDetailStr !== 'string') {
+    return ''
+  }
+
+  const steps = processDetailStr.split(' -> ')
+  const outsourceGroupStyleState = getOutsourceGroupStyleState(steps)
+  const maxPerRow = 8
+  const rows = Math.ceil(steps.length / maxPerRow)
+  let tableHtml = '<div style="text-align: left; width: 100%; overflow: hidden;"><table class="process-table"><tbody>'
+
+  for (let row = 0; row < rows; row++) {
+    const startIndex = row * maxPerRow
+    const endIndex = Math.min(startIndex + maxPerRow, steps.length)
+    const rowSteps = steps.slice(startIndex, endIndex)
+
+    if (row > 0) {
+      tableHtml += '<tr style="height: 4px;"><td colspan="' + (maxPerRow * 2 - 1) + '" style="padding: 0; line-height: 1;"></td></tr>'
+    }
+
+    tableHtml += '<tr>'
+    rowSteps.forEach((step, index) => {
+      const process = parseProcessStep(step)
+      const colorStyle = getProcessColor(
+        process.status,
+        process.count,
+        process,
+        getOutsourceGroupStyle(process, startIndex + index, outsourceGroupStyleState)
+      )
+      tableHtml += `<td class="plan-date-cell" style="${colorStyle}">${escapeHtml(process.planDate)}</td>`
+      if (index < rowSteps.length - 1) {
+        tableHtml += '<td class="arrow-cell-hidden"></td>'
+      }
+    })
+    tableHtml += '</tr>'
+
+    tableHtml += '<tr>'
+    rowSteps.forEach((step, index) => {
+      const process = parseProcessStep(step)
+      const colorStyle = getProcessColor(
+        process.status,
+        process.count,
+        process,
+        getOutsourceGroupStyle(process, startIndex + index, outsourceGroupStyleState)
+      )
+      tableHtml += `<td style="${colorStyle}">${escapeHtml(process.name)}</td>`
+      if (index < rowSteps.length - 1) {
+        tableHtml += '<td class="arrow-cell">→</td>'
+      }
+    })
+    tableHtml += '</tr>'
+
+    tableHtml += '<tr>'
+    rowSteps.forEach((step, index) => {
+      const process = parseProcessStep(step)
+      const colorStyle = getProcessColor(
+        process.status,
+        process.count,
+        process,
+        getOutsourceGroupStyle(process, startIndex + index, outsourceGroupStyleState)
+      )
+      tableHtml += `<td class="count-cell" style="${colorStyle}">合格${escapeHtml(process.count)}</td>`
+      if (index < rowSteps.length - 1) {
+        tableHtml += '<td class="arrow-cell-hidden"></td>'
+      }
+    })
+    tableHtml += '</tr>'
+  }
+
+  tableHtml += '</tbody></table></div>'
+  return tableHtml
+}
+
 const startClock = () => {
  timer = window.setInterval(() => {
    now.value = new Date(now.value.getTime() + 1000)
@@ -314,60 +549,55 @@ const destroyDashboard = () => {
  }
 }

-const topStats = [
+const topStats = reactive([
  { title: '待处理销售订单', value: 12, icon: svgIcons.salesOrder },
  { title: '工艺BOM待完成', value: 9, icon: svgIcons.bom },
-]
+])

 const leftColumns = [
-  { label: '销售订单', key: 'salesOrder' },
-  { label: '计划号', key: 'planNo' },
+  { label: '销售订单', key: 'planNo' },
  { label: '生产订单', key: 'productionOrder' },
  { label: '产品名称', key: 'productName' },
-  { label: '产品编码', key: 'productCode' },
-  { label: '计划数', key: 'planQty' },
-  { label: '入库数', key: 'stockQty' },
-  { label: '预计齐套', key: 'kitDate' },
-  { label: '拣配状态', key: 'pickStatus' },
-  { label: '发料状态', key: 'issueStatus' },
+  { label: '产品编码', key: 'productCode' }
 ]

 const urgentColumns = [
-  { label: '销售订单', key: 'salesOrder' },
  { label: '生产订单', key: 'productionOrder' },
-  { label: '产品名称', key: 'productName' },
-  { label: '产品编码', key: 'productCode' },
-  { label: '属性', key: 'property' },
-  { label: '计划数', key: 'planQty' },
-  { label: '下达日期', key: 'releaseDate' },
-  { label: '计划开始', key: 'startDate' },
-  { label: '计划完成', key: 'finishDate' },
+  { label: '物料名称', key: 'materialName' },
+  { label: '物料编码', key: 'materialCode' },
+  { label: '加急数量', key: 'urgentQty' },
+  { label: '进度', key: 'progress' }
 ]

-let kitRows = Array.from({ length: 9 }, () => ({
-  salesOrder: 'SH260014',
+const makeScrollRows = (rows, minRows = 10) => {
+  if (!Array.isArray(rows) || rows.length === 0) {
+    return []
+  }
+
+  const baseRows = [...rows]
+  while (baseRows.length < minRows) {
+    baseRows.push(...rows.slice(0, minRows - baseRows.length))
+  }
+  return [...baseRows, ...baseRows]
+}
+
+const kitRows = ref(Array.from({ length: 9 }, () => ({
  planNo: '54023',
  productionOrder: '1075',
  productName: '垫铁+行程开关部装',
-  productCode: '213-YGLQ-DF150V1.2.18',
-  planQty: '1',
-  stockQty: '0',
-  kitDate: '2026-01-21',
-  pickStatus: '已拣配',
-  issueStatus: '未发料',
-}))
+  productCode: '213-YGLQ-DF150V1.2.18'
+})))

-let urgentRows = Array.from({ length: 10 }, () => ({
-  salesOrder: 'SH260014',
-  productionOrder: '1075',
-  productName: '垫铁+行程开关部装',
-  productCode: '213-YGLQ-DF150V1.2.18',
-  property: '机加',
-  planQty: '1',
-  releaseDate: '2026-01-21',
-  startDate: '2026-01-21',
-  finishDate: '2026-01-21',
-}))
+const urgentRows = ref([])
+
+const displayUrgentRows = computed(() => makeScrollRows(urgentRows.value, 8))
+const displayKitRows = computed(() => makeScrollRows(kitRows.value, 9))
+const getScrollDuration = (rows, minRows, secondsPerRow) => {
+  const rowCount = Math.max(Array.isArray(rows) ? rows.length : 0, minRows)
+  return `${Math.max(rowCount * secondsPerRow, 36)}s`
+}
+const urgentScrollDuration = computed(() => getScrollDuration(urgentRows.value, 8, 4.2))
+const kitScrollDuration = computed(() => getScrollDuration(kitRows.value, 9, 3.5))
 </script>

 <style scoped lang="scss">
@@ -630,7 +860,7 @@ let urgentRows = Array.from({ length: 10 }, () => ({

 .table-area {
  display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 17px;
  min-height: 0;
 }
@@ -661,6 +891,60 @@ table {
  border-collapse: collapse;
 }

+.scroll-table {
+  position: relative;
+  height: auto;
+}
+
+.scroll-table thead {
+  position: relative;
+  z-index: 3;
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  background: #061338;
+}
+
+.scroll-table thead::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  height: 2px;
+  content: '';
+  background: #061338;
+}
+
+.scroll-table tbody {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+}
+
+.scroll-table tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.scroll-body {
+  animation: table-scroll-up var(--scroll-duration, 36s) linear infinite;
+}
+
+.table-wrap:hover .scroll-body {
+  animation-play-state: paused;
+}
+
+@keyframes table-scroll-up {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-50%);
+  }
+}
+
 th,
 td {
  border: 1px solid rgba(53, 149, 217, 0.48);
@@ -675,12 +959,98 @@ td {
 th {
  height: 38px;
  font-size: 14px;
-  font-weight: 200;
-  background: rgba(12, 68, 119, 0.28);
+  font-weight: 700;
+  background: #082654;
+  box-shadow: inset 0 0 12px rgba(27, 130, 214, 0.36);
 }

 td {
  height: 50px;
+  background: #07001f;
+}
+
+.urgent-task-wrap {
+  padding: 0 7px 10px;
+}
+
+.urgent-task-wrap table {
+  table-layout: fixed;
+}
+
+.urgent-task-wrap .col-productionOrder {
+  width: 11.5%;
+}
+
+.urgent-task-wrap .col-materialName {
+  width: 10%;
+}
+
+.urgent-task-wrap .col-materialCode {
+  width: 15%;
+}
+
+.urgent-task-wrap .col-urgentQty {
+  width: 6.5%;
+}
+
+.urgent-task-wrap .col-progress {
+  width: 57%;
+}
+
+.urgent-task-wrap td {
+  height: 72px;
+}
+
+.process-detail {
+  width: 100%;
+  overflow: hidden;
+}
+
+:deep(.process-table) {
+  width: auto;
+  min-width: 0;
+  border-collapse: collapse;
+  text-align: left;
+  table-layout: auto;
+}
+
+:deep(.process-table td) {
+  height: auto;
+  max-width: 82px;
+  padding: 2px 3px;
+  border: 0;
+  color: #c2cbe0;
+  font-size: 11px;
+  line-height: 1.4;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.plan-date-cell) {
+  color: #8899aa !important;
+  font-size: 10px !important;
+}
+
+:deep(.count-cell) {
+  font-size: 12px !important;
+  font-weight: 700;
+}
+
+:deep(.arrow-cell) {
+  width: 10px;
+  max-width: 10px;
+  padding: 2px 0 !important;
+  color: rgba(0, 164, 255, 0.6) !important;
+  font-size: 10px !important;
+  text-align: center !important;
+}
+
+:deep(.arrow-cell-hidden) {
+  width: 10px;
+  max-width: 10px;
+  padding: 2px 0 !important;
 }

 .brand {