设置basetime, 设置变化总数。

package.json

@@ -25,9 +25,12 @@
     "element-plus": "2.9.9",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
+    "jquery": "^3.7.1",
+    "jquery-mousewheel": "^3.2.2",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "luckysheet": "^2.1.13",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
     "splitpanes": "4.0.4",

src/main.js

@@ -44,6 +44,19 @@ import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 
+import 'luckysheet/dist/plugins/css/pluginsCss.css';
+import 'luckysheet/dist/plugins/plugins.css';
+import 'luckysheet/dist/css/luckysheet.css';
+
+import jquery from 'jquery';
+
+// Make jQuery available globally
+// window.$ = window.jQuery = jquery;
+
+import 'jquery-mousewheel';
+
+window.$ = window.jQuery = jquery;
+
 const app = createApp(App)
 
 // 全局方法挂载

src/views/warehouse/WmsImportTable/index.vue

@@ -15,6 +15,21 @@
             :value="time"
         />
       </el-select>
+
+      <!-- Toggle 开关 -->
+      <el-switch
+          v-model="showDiff"
+          active-text="显示差值"
+          inactive-text="显示当前值"
+          style="margin-left: 20px"
+      />
+
+      <!-- 显示 matrixDiff 非零元素的总数 -->
+      <span style="margin-left: 20px">
+        非零差值总数: {{ nonZeroDiffCount }}
+      </span>
+
+
     </div>
 
     <el-table
@@ -40,9 +55,15 @@
           width="100"
           align="center"
       >
-        <template #default="scope">
+<!--        <template #default="scope">-->
-          {{ matrix[scope.$index][colIndex] || '' }}
+          <template #default="scope">
-        </template>
+            <span>
+                {{ showDiff
+                ? (matrixDiff[scope.$index]?.[colIndex] === 0 ? '' : matrixDiff[scope.$index]?.[colIndex] ?? '')
+                : matrix[scope.$index]?.[colIndex] ?? '' }}
+              </span>
+          </template>
+<!--        </template>-->
       </el-table-column>
     </el-table>
   </div>
@@ -62,9 +83,10 @@ const specifications = ref([
   '0.490', '0.500', '0.510', '0.530', '0.550', '0.570', '0.590', '0.600',
   '0.620', '0.630', '0.640', '0.650', '0.670', '0.690', '0.700', '0.710',
   '0.720', '0.740', '0.750', '0.770', '0.800', '0.850', '0.860',
-  '0.900', '0.930', '0.950', '1.000', '1.040', '1.060', '1.160', '1.180', '1.200', '1.250', '1.300', '1.350', '1.400', '1.450',
+  '0.900', '0.930', '0.950', '1.000', '1.040', '1.060', '1.160', '1.180',
+  '1.200', '1.250', '1.300', '1.350', '1.400', '1.450',
   '1.500', '1.560', '1.600', '1.680', '1.700', '1.740', '1.800', '1.900',
-  '2.000', '2.120', '2.165', '2.240', '2.360', '2.400', '4', '2.500', '2.000',
+  '2.000', '2.120', '2.165', '2.240', '2.360', '2.400', '2.500', '2.000',
   '3.000'
 ])
 
@@ -85,54 +107,115 @@ const updateTimes = ref([])
 // 选中的更新时间
 const selectedUpdateTime = ref('')
 
-// 生成最近24小时的更新时间（每小时的11分和41分）
+const basetime = ref('2025-06-26 09:11:00')
-function generateUpdateTimes() {
+const matrixDiff = ref([])
-  const times = []
+const baseMatrix = ref([])
-  const now = new Date()
+const showDiff = ref(false)  // 控制 toggle
-  now.setMinutes(now.getMinutes() <= 41 ? 41 : 11)
-  now.setSeconds(0)
-  now.setMilliseconds(0)
 
-  if (now.getMinutes() === 11) {
+// 新增：非零差值计数
-    now.setHours(now.getHours() + 1)
+const nonZeroDiffCount = ref(0);
-  }
 
-  for (let i = 0; i < 48; i++) {
+// 计算 matrixDiff 中非零元素的数量
-    const time = new Date(now.getTime() - i * 30 * 60 * 1000)
+function calculateNonZeroDiffCount(matrixDiff) {
-    const hours = String(time.getHours()).padStart(2, '0')
+  let count = 0;
-    const minutes = String(time.getMinutes()).padStart(2, '0')
+  matrixDiff.forEach(row => {
-    const formatted = `${time.getFullYear()}-${String(time.getMonth() + 1).padStart(2, '0')}-${String(time.getDate()).padStart(2, '0')} ${hours}:${minutes}:00`
+    row.forEach(val => {
-    times.push(formatted)
+      if (val !== '' && val !== 0 && !isNaN(val)) {
-  }
+        count++;
-  return times
+      }
+    });
+  });
+  return count;
 }
 
-// 转换数据为二维矩阵
+
-function transformData(rawData) {
+watch(selectedUpdateTime, async (newTime) => {
-  // 初始化矩阵，行数为 specifications 长度，列数为 modelWireDiscs 长度
+  if (!newTime) return
+  await fetchData()
+
+  // 如果 basetime 的 matrix 还未加载，加载一次
+  const response = await listWmsImportResultHistory({
+    type: 1,
+    pageNum: 1,
+    pageSize: 999,
+    updateTime:  basetime.value,
+  });
+  console.log('New date',(basetime.value))
+
+  if (response.rows) {
+    baseMatrix.value = transformToMatrix(response.rows);
+  }
+  // console.log('basematrix',baseMatrix)
+  // console.log('matrix',matrix)
+  // 计算差值矩阵
+  matrixDiff.value = matrix.value.map((row, i) =>
+      row.map((val, j) => {
+        const baseVal = baseMatrix.value?.[i]?.[j] || 0
+        const currVal = val || 0
+        const diff = parseFloat(currVal) - parseFloat(baseVal)
+        return isNaN(diff) ? '' : diff
+      })
+  )
+  // console.log(matrixDiff)
+  // 更新非零差值总数
+  nonZeroDiffCount.value = calculateNonZeroDiffCount(matrixDiff.value);
+})
+
+function transformToMatrix(rawData) {
   const newMatrix = Array(specifications.value.length).fill().map(() =>
       Array(modelWireDiscs.value.length).fill('')
   )
-
-  // 填充矩阵
   rawData.forEach(item => {
     const itemModelWireDisc = `${item.model}-${item.wireDisc}`.trim().replace(/\s+/g, '')
     const itemSpec = Number(item.specification)
     const rowIndex = specifications.value.indexOf(itemSpec.toFixed(3))
     const colIndex = modelWireDiscs.value.indexOf(itemModelWireDisc)
-
     if (rowIndex !== -1 && colIndex !== -1) {
       newMatrix[rowIndex][colIndex] = item.totalNumber
     }
   })
+  return newMatrix
+}
+
+// 生成最近24小时的更新时间（每小时的11分和41分）
+function generateUpdateTimes() {
+  const times = []
+  const now = new Date()
+  const currentMinutes = now.getMinutes();
+
+
+  if (currentMinutes >= 42) { // 如果当前分钟大于等于42
+    now.setMinutes(41); // 设置当前小时的41分钟
+  } else if (currentMinutes >= 11) { // 如果当前分钟大于等于11
+    now.setMinutes(11); // 设置当前小时的11分钟
+  } else {
+    now.setHours(now.getHours() - 1); // 如果当前分钟小于11，则设置为上一小时的41分钟
+    now.setMinutes(41); // 设置当前小时的41分钟
+  }
 
-  // 更新矩阵
+  now.setSeconds(0)
-  matrix.value = newMatrix
+  now.setMilliseconds(0)
+
+  // 从当前时间开始，向前推算48个时间点，每个时间点间隔30分钟。在每次循环中，它创建一个新的Date对象，
+  // 该对象表示当前时间减去循环索引乘以30分钟的时间（即向前推算30分钟）。然后，它格式化这个时间，
+  // 确保小时和分钟都是两位数，并将年份、月份、日期、小时和分钟组合成一个字符串，格式为'YYYY-MM-DD HH:MM:00'。
+  // 这个格式化后的时间字符串被添加到times数组中。
+  for (let i = 0; i < 48; i++) {
+    const time = new Date(now.getTime() - i * 30 * 60 * 1000) // 减去30分钟，即一个小时的11分和41分
+    const hours = String(time.getHours()).padStart(2, '0') // 确保小时是两位数格式，例如 '09' 或 '15'
+    const minutes = String(time.getMinutes()).padStart(2, '0') // 确保分钟是两位数格式，例如 '11' 或 '41'
+    const formatted = `${time.getFullYear()}-${String(time.getMonth() + 1).padStart(2, '0')}-${String(time.getDate()).padStart(2, '0')} ${hours}:${minutes}:00` // 格式化时间字符串
+    times.push(formatted) // 将格式化后的时间字符串添加到数组中
+  }
+  return times
+}
+
+function transformData(rawData) {
+  matrix.value = transformToMatrix(rawData)
 
-  // 生成 tableData 用于表格显示
   tableData.value = specifications.value.map((spec, index) => ({
     specification: spec,
-    rowIndex: index // 辅助字段，用于定位矩阵行
+    rowIndex: index
   }))
 }
 
@@ -146,7 +229,8 @@ async function fetchData() {
     }
 
     if (selectedUpdateTime.value) {
-      query.updateTime = selectedUpdateTime.value
+      query.updateTime = selectedUpdateTime.value;
+      // console.log('Query object:', query);
     }
 
     const response = await listWmsImportResultHistory(query)
@@ -160,6 +244,7 @@ async function fetchData() {
 
 // 处理时间选择变化
 function handleTimeChange() {
+
   fetchData()
 }