修改一次性合格率页面

src/api/statistic/firstPassYieldMockData.ts

@@ -1,105 +1,233 @@
-export const getMockData = async () => {
-  const records = [
-    {
-      productLineName: "微电子车间",
-      productName: "产品A",
-      productType: "类型1",
-      goodRate: "95%",
-      badRate: "5%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品B",
-      productType: "类型2",
-      goodRate: "90%",
-      badRate: "10%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品A",
-      productType: "类型1",
-      goodRate: "95%",
-      badRate: "5%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品B",
-      productType: "类型2",
-      goodRate: "90%",
-      badRate: "10%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品A",
-      productType: "类型1",
-      goodRate: "95%",
-      badRate: "5%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品B",
-      productType: "类型2",
-      goodRate: "90%",
-      badRate: "10%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品A",
-      productType: "类型1",
-      goodRate: "95%",
-      badRate: "5%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品B",
-      productType: "类型2",
-      goodRate: "90%",
-      badRate: "10%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品A",
-      productType: "类型1",
-      goodRate: "95%",
-      badRate: "5%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品B",
-      productType: "类型2",
-      goodRate: "90%",
-      badRate: "10%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品A",
-      productType: "类型1",
-      goodRate: "95%",
-      badRate: "5%",
-      timeStr: "2025-03-22",
-    },
-    {
-      productLineName: "微电子车间",
-      productName: "产品B",
-      productType: "类型2",
-      goodRate: "90%",
-      badRate: "10%",
-      timeStr: "2025-03-22",
-    },
-  ];
+// 用于模拟数据，实际开发中应从后端获取数据
+
+export const records = [
+  {
+    id: 1,
+    productLineName: "微电子车间",
+    productName: "产品A",
+    productType: "类型1",
+    productCode: "CODE1",
+    timeStr: "2025-03-22",
+    batchNo: "2001",
+    goodRate: "95%",
+    badRate: "5%",
+  },
+  {
+    id: 2,
+    productLineName: "微电子车间",
+    productName: "产品A",
+    productType: "类型2",
+    productCode: "CODE2",
+    timeStr: "2025-03-22",
+    batchNo: "2002",
+    goodRate: "90%",
+    badRate: "10%",
+  },
+  {
+    id: 3,
+    productLineName: "微电子车间",
+    productName: "产品A",
+    productType: "类型1",
+    productCode: "CODE3",
+    timeStr: "2025-03-22",
+    batchNo: "2003",
+    goodRate: "85%",
+    badRate: "15%",
+  },
+  {
+    id: 4,
+    productLineName: "微电子车间",
+    productName: "产品A",
+    productType: "类型2",
+    productCode: "CODE4",
+    timeStr: "2025-03-22",
+    batchNo: "2004",
+    goodRate: "80%",
+    badRate: "20%",
+  },
+  {
+    id: 5,
+    productLineName: "微电子车间",
+    productName: "产品A",
+    productType: "类型1",
+    productCode: "CODE5",
+    timeStr: "2025-03-22",
+    batchNo: "2005",
+    goodRate: "75%",
+    badRate: "25%",
+  },
+  {
+    id: 6,
+    productLineName: "微电子车间",
+    productName: "产品B",
+    productType: "类型2",
+    productCode: "CODE6",
+    timeStr: "2025-03-22",
+    batchNo: "2006",
+    goodRate: "70%",
+    badRate: "30%",
+  },
+  {
+    id: 7,
+    productLineName: "微电子车间",
+    productName: "产品B",
+    productType: "类型1",
+    productCode: "CODE7",
+    timeStr: "2025-03-22",
+    batchNo: "2007",
+    goodRate: "65%",
+    badRate: "35%",
+  },
+  {
+    id: 8,
+    productLineName: "微电子车间",
+    productName: "产品B",
+    productType: "类型2",
+    productCode: "CODE8",
+    timeStr: "2025-03-22",
+    batchNo: "2008",
+    goodRate: "60%",
+    badRate: "40%",
+  },
+  {
+    id: 9,
+    productLineName: "微电子车间",
+    productName: "产品B",
+    productType: "类型1",
+    productCode: "CODE9",
+    timeStr: "2025-03-22",
+    batchNo: "2009",
+    goodRate: "55%",
+    badRate: "45%",
+  },
+  {
+    id: 10,
+    productLineName: "微电子车间",
+    productName: "产品B",
+    productType: "类型2",
+    productCode: "CODE10",
+    timeStr: "2025-03-22",
+    batchNo: "2010",
+    goodRate: "50%",
+    badRate: "50%",
+  },
+  {
+    id: 11,
+    productLineName: "微电子车间",
+    productName: "产品C",
+    productType: "类型1",
+    productCode: "CODE11",
+    timeStr: "2025-03-22",
+    batchNo: "2011",
+    goodRate: "45%",
+    badRate: "55%",
+  },
+  {
+    id: 12,
+    productLineName: "微电子车间",
+    productName: "产品C",
+    productType: "类型2",
+    productCode: "CODE12",
+    timeStr: "2025-03-22",
+    batchNo: "2012",
+    goodRate: "40%",
+    badRate: "60%",
+  },
+  {
+    id: 13,
+    productLineName: "微电子车间",
+    productName: "产品C",
+    productType: "类型1",
+    productCode: "CODE13",
+    timeStr: "2025-03-22",
+    batchNo: "2013",
+    goodRate: "35%",
+    badRate: "65%",
+  },
+  {
+    id: 14,
+    productLineName: "微电子车间",
+    productName: "产品C",
+    productType: "类型2",
+    productCode: "CODE14",
+    timeStr: "2025-03-22",
+    batchNo: "2014",
+    goodRate: "30%",
+    badRate: "70%",
+  },
+  {
+    id: 15,
+    productLineName: "微电子车间",
+    productName: "产品C",
+    productType: "类型1",
+    productCode: "CODE15",
+    timeStr: "2025-03-22",
+    batchNo: "2015",
+    goodRate: "25%",
+    badRate: "75%",
+  },
+  {
+    id: 16,
+    productLineName: "微电子车间",
+    productName: "产品D",
+    productType: "类型2",
+    productCode: "CODE16",
+    timeStr: "2025-03-22",
+    batchNo: "2016",
+    goodRate: "20%",
+    badRate: "80%",
+  },
+  {
+    id: 17,
+    productLineName: "微电子车间",
+    productName: "产品D",
+    productType: "类型1",
+    productCode: "CODE17",
+    timeStr: "2025-03-22",
+    batchNo: "2017",
+    goodRate: "15%",
+    badRate: "85%",
+  },
+  {
+    id: 18,
+    productLineName: "微电子车间",
+    productName: "产品D",
+    productType: "类型2",
+    productCode: "CODE18",
+    timeStr: "2025-03-22",
+    batchNo: "2018",
+    goodRate: "10%",
+    badRate: "90%",
+  },
+  {
+    id: 19,
+    productLineName: "微电子车间",
+    productName: "产品D",
+    productType: "类型1",
+    productCode: "CODE19",
+    timeStr: "2025-03-22",
+    batchNo: "2019",
+    goodRate: "5%",
+    badRate: "95%",
+  },
+  {
+    id: 20,
+    productLineName: "微电子车间",
+    productName: "产品D",
+    productType: "类型2",
+    productCode: "CODE20",
+    timeStr: "2025-03-22",
+    batchNo: "2020",
+    goodRate: "50%",
+    badRate: "50%",
+  },
+];
+export const getMockData = async ({ page, limit }) => {
+  const start = (page - 1) * limit;
+  const end = page * limit;
   return {
     data: {
-      records: records,
+      records: records.slice(start, end),
       totalCount: records.length,
     },
   };

src/views/statistic/firstPassYield/index.vue

@@ -41,16 +41,19 @@
         </div>
         <div class="header" style="border-bottom: 0px">
           <div class="text">选择统计产品：</div>
-          <el-input size="small" placeholder="请输入产品名称" />
-          <!-- <el-tree
+          <el-input
+            size="small"
+            placeholder="请输入产品名称"
+            @click="openProdtForm"
+          />
+          <el-tree
             ref="treeRef2"
-            :data="data1"
-            show-checkbox
+            :data="treeData"
             default-expand-all
-            :default-checked-keys="['合格率']"
-            node-key="key"
+            node-key="productName"
             highlight-current
-          /> -->
+            style="margin-top: 20px"
+          />
           <!-- <el-tree
             v-if="prodt.prodtName"
             ref="treeRef2"
@@ -68,7 +71,7 @@
       <div class="box">
         <div class="boxheader">
           <div>
-            <el-button type="primary" class="btn" @click="getTableData"
+            <el-button type="primary" class="btn" @click="getTableDataSearch"
               >统计查询</el-button
             >
             <el-button class="btn" @click="reset">重置</el-button>
@@ -99,7 +102,8 @@
             /> -->
             <el-table-column prop="productLineName" label="车间名称" />
             <el-table-column prop="productName" label="产品名称" />
-            <el-table-column prop="productType" label="批次号" />
+            <el-table-column prop="productCode" label="产品编码" />
+            <el-table-column prop="batchNo" label="产品批次" />
             <el-table-column prop="goodRate" label="良率" />
             <el-table-column prop="badRate" label="不良率" />
             <el-table-column prop="timeStr" label="日期" />
@@ -119,6 +123,42 @@
       </div>
     </div>
   </div>
+  <el-dialog title="选择统计产品" v-model="dialogVisible" width="60%" center>
+    <div>
+      <Search :searchOptions="searchForm" ref="searchRef" />
+    </div>
+    <div>
+      <el-table
+        :data="tableProdtData"
+        row-key="id"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="productLineName" label="车间名称" />
+        <el-table-column prop="productName" label="产品名称" />
+        <el-table-column prop="productCode" label="产品编码" />
+        <el-table-column prop="batchNo" label="产品批次" />
+        <el-table-column prop="productType" label="产品类型" />
+        <el-table-column prop="timeStr" label="创建日期" />
+      </el-table>
+      <Pagination
+        :total="currentProdtOption.total"
+        :page="currentProdtOption.page"
+        :limit="currentProdtOption.limit"
+        :pageSizes="currentProdtOption.pageSizes"
+        v-model:page="currentProdtOption.page"
+        v-model:limit="currentProdtOption.limit"
+        @pagination="getProdtData"
+      />
+    </div>
+    <div>
+      <el-button type="primary" class="btn" @click="handleConfirm"
+        >确定</el-button
+      >
+      <el-button class="btn" @click="dialogVisible = false">取消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -126,6 +166,7 @@ import { getData, getStatLevel, getExport } from "@/api/statistic";
 import { getMockData } from "@/api/statistic/firstPassYieldMockData";
 import Pagination from "@/components/Pagination/index.vue";
 import { downFile } from "@/utils/common";
+import Search from "@/components/Search/index.vue";
 
 defineOptions({
   name: "Dashboard",
@@ -207,7 +248,10 @@ const queryIndexs = ref([]);
 // mock数据
 const getTableData = async () => {
   queryIndexs.value = getValue(treeRef1.value.getCheckedNodes());
-  const { data } = await getMockData(); // 使用假数据函数
+  const { data } = await getMockData({
+    page: currentOption.value.page,
+    limit: currentOption.value.limit,
+  }); // 使用假数据函数
   tableData.value = data.records;
   currentOption.value.total = data.totalCount;
 };
@@ -215,10 +259,13 @@ const getTableData = async () => {
 
 const reset = () => {
   value1.value = getCurrentMonthStartAndEndDates();
-  treeRef1.value.setCheckedKeys([statProductionLineData[0].key], true, true);
-  treeRef2.value.setCheckedKeys([statProductTypeData[0].key], true, true);
+  // treeRef1.value.setCheckedKeys([statProductionLineData[0].key], true, true);
+  // treeRef2.value.setCheckedKeys([statProductTypeData[0].key], true, true);
   radio.value = 1;
   currentOption.value.page = 1;
+  treeData.value = [];
+  selectedRows.value = [];
+  tableData.value = [];
   getTableData();
 };
 
@@ -231,23 +278,131 @@ const statProductionLineData = ref([
   },
 ]);
 
-// const statProductTypeData = ref([
-//   {
-//     key: "productType",
-//     label: "产品类型",
-//     children: [
-//       {
-//         key: "productType1",
-//         label: "类型1",
-//       },
-//       {
-//         key: "productType2",
-//         label: "类型2",
-//       },
-//     ],
-//   },
-// ]);
+const tableProdtData = ref([]);
+const dialogVisible = ref(false);
+const searchRef = ref(null);
+const openProdtForm = async () => {
+  dialogVisible.value = true;
+  getProdtData();
+};
+
+const getProdtData = async () => {
+  const { data } = await getMockData({
+    page: currentProdtOption.value.page,
+    limit: currentProdtOption.value.limit,
+  }); // 使用假数据函数
+  tableProdtData.value = data.records;
+  currentProdtOption.value.total = data.totalCount;
+};
+const searchForm = [
+  {
+    label: "产品名称",
+    type: "input",
+    key: "prodtName",
+  },
+  {
+    label: "产品编码",
+    type: "input",
+    key: "prodtCode",
+  },
+  {
+    label: "产品类型",
+    type: "select",
+    key: "prodtType",
+    options: [
+      {
+        label: "类型1",
+        value: "1",
+      },
+      {
+        label: "类型2",
+        value: "2",
+      },
+    ],
+  },
+];
+
+const currentProdtOption = ref({
+  total: 0,
+  page: 1,
+  limit: 10,
+  pageSizes: [10, 20, 30, 40, 50, 100],
+});
+// --------------------------------------------
+const statProductTypeData = ref([
+  {
+    key: "id",
+    label: "产品类型",
+    children: [
+      {
+        key: "productType1",
+        label: "类型1",
+      },
+      {
+        key: "productType2",
+        label: "类型2",
+      },
+    ],
+  },
+]);
+const selectedRows = ref([]); // 存储选中的行数据
+
+const handleSelectionChange = (rows) => {
+  selectedRows.value = rows; // 更新选中的行数据
+};
+
+const treeData = ref([]); // 存储转换后的 el-tree 数据
+const handleConfirm = () => {
+  const map = {};
+  const tree = [];
 
+  selectedRows.value.forEach((row) => {
+    const { productName, batchNo } = row;
+
+    // 如果父级节点不存在，创建父级节点
+    if (!map[productName]) {
+      const parentNode = {
+        label: productName, // 父级名称
+        key: productName, // 父级唯一标识
+        children: [], // 子级数组
+      };
+      map[productName] = parentNode;
+      tree.push(parentNode);
+    }
+
+    // 添加子级节点
+    map[productName].children.push({
+      label: batchNo, // 子级名称
+      key: batchNo, // 子级唯一标识
+    });
+  });
+
+  treeData.value = tree; // 更新 el-tree 数据源
+  dialogVisible.value = false; // 关闭对话框
+};
+
+const getTableDataSearch = () => {
+  if (treeData.value.length === 0) {
+    ElMessage.warning("请选择产品");
+    return;
+  }
+  // 提取 treeData 中的 productName 和 batchNo
+  const selectedProductMap = {};
+  treeData.value.forEach((parent) => {
+    selectedProductMap[parent.label] = parent.children.map(
+      (child) => child.label
+    );
+  });
+
+  // 筛选 tableProdtData 中符合条件的数据
+  const filteredData = tableProdtData.value.filter((item) => {
+    const productNameMatches = selectedProductMap[item.productName];
+    return productNameMatches && productNameMatches.includes(item.batchNo);
+  });
+
+  // 更新表格数据
+  tableData.value = filteredData;
+};
 //-------------------
 
 const checkedKeys = computed(() => {