feature/质量统计

package.json

@@ -60,6 +60,7 @@
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "print-js": "^1.6.0",
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",

src/api/report/index.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function getData(data) {
+  return request({
+    url: "/api/v1/quality/report/page",
+    method: "post",
+    data,
+  });
+}

src/api/statistic/index.js

@@ -0,0 +1,31 @@
+
+import request from "@/utils/request";
+import axios from "axios";
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_API,
+  timeout: 50000,
+  headers: { "Content-Type": "application/json;charset=UTF-8" },
+  responseType: "blob",
+});
+export function getData(data) {
+  return request({
+    url: "/api/v1/quality/stat/page",
+    method: "post",
+    data,
+  });
+}
+export function getStatLevel() {
+  return request({
+    url: "/api/v1/quality/stat/statLevel",
+    method: "get",
+  });
+}
+export function getExport(data) {
+  return service({
+    url: "/api/v1/quality/stat/export",
+    method: "post",
+    data,
+  });
+}

src/components/ReportView/index.vue

@@ -29,34 +29,18 @@
               <table>
                 <thead>
                   <tr>
-                    <th>Name</th>
-                    <th>Age</th>
-                    <th>Country</th>
-                    <th>Country</th>
-                    <th>Country</th>
+                    <th>报告编码</th>
+                    <th>报告名称</th>
+                    <th>创建人</th>
+                    <th>创建时间</th>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="item in 30">
-                    <td>John Doe</td>
-                    <td>30</td>
-                    <td>USA</td>
-                    <td>Canada</td>
-                    <td>Canada</td>
-                  </tr>
-                  <tr>
-                    <td>Jane Smith</td>
-                    <td>25</td>
-                    <td>Canada</td>
-                    <td>Canada</td>
-                    <td>Canada</td>
-                  </tr>
-                  <tr>
-                    <td>Maria Garcia</td>
-                    <td>35</td>
-                    <td>Spain</td>
-                    <td>Canada</td>
-                    <td>Canada</td>
+                  <tr v-for="item in tableData">
+                    <td>{{ item.reportCode }}</td>
+                    <td>{{ item.reportName }}</td>
+                    <td>{{ item.creator }}</td>
+                    <td>{{ item.created }}</td>
                   </tr>
                 </tbody>
               </table>
@@ -73,6 +57,9 @@ const props = defineProps({
   modelValue: {
     type: [Boolean],
   },
+  tableData: {
+    type: [Object],
+  },
 });
 const emits = defineEmits(["update:modelValue"]);
 const close = () => {

src/utils/common.ts

@@ -64,3 +64,19 @@ export const html2CanvasPrint = (dom: HTMLElement, callback?: () => {}) => {
     printImg(url);
   });
 };
+
+export const downFile = (response: any) => {
+  const fileData = response.data;
+  const fileName = "质量统计.xlsx";
+  const fileType =
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+  const blob = new Blob([fileData], { type: fileType });
+  const downloadUrl = window.URL.createObjectURL(blob);
+  const downloadLink = document.createElement("a");
+  downloadLink.href = downloadUrl;
+  downloadLink.download = fileName;
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+  window.URL.revokeObjectURL(downloadUrl);
+};

src/utils/request.ts

@@ -26,7 +26,6 @@ service.interceptors.request.use(
 service.interceptors.response.use(
   (response: AxiosResponse) => {
     const { code, msg } = response.data;
-
     if (code === "200") {
       return response.data;
     }

src/views/analysis/process/index.vue

@@ -588,9 +588,9 @@
               <el-form-item label="检查设备编号" prop="checkDeviceNo">
                 <el-input v-model="addData.checkDeviceNo" />
               </el-form-item>
-              <el-form-item label="是否异常" prop="abnormal">
+              <!-- <el-form-item label="是否异常" prop="abnormal">
                 <el-input v-model="addData.abnormal" />
-              </el-form-item>
+              </el-form-item> -->
               <el-form-item label="分析人" prop="analyseUser">
                 <el-input v-model="addData.analyseUser" />
               </el-form-item>
@@ -652,8 +652,10 @@ const getTableData = async () => {
   if (code == "200") {
     tableData.value = data.records;
     showData.value = { ...data, list: null };
-    setChart1();
-    setChart2();
+    if (tableData.value.length > 0) {
+      setChart1();
+      setChart2();
+    }
     currentOption.total = data.totalCount;
     currentOption.page = data.pageNo;
     oldDataJSON.value = JSON.stringify(data.records);
@@ -705,7 +707,7 @@ const tableData = ref([]);
 const ruleFormRef = ref(null);
 
 const addItem = {
-  abnormal: "",
+  // abnormal: "",
   accuracy1: 0,
   accuracy2: 0,
   accuracy3: 0,
@@ -791,13 +793,13 @@ const rules = {
       trigger: "change",
     },
   ],
-  abnormal: [
-    {
-      required: true,
+  // abnormal: [
+  //   {
+  //     required: true,
 
-      trigger: "change",
-    },
-  ],
+  //     trigger: "change",
+  //   },
+  // ],
   analyseUser: [
     {
       required: true,
@@ -814,7 +816,7 @@ const rules = {
   ],
 };
 const resItem = {
-  abnormal: "",
+  // abnormal: "",
   accuracy1: 0,
   accuracy2: 0,
   accuracy3: 0,
@@ -831,7 +833,7 @@ const resItem = {
   range: 0,
 };
 const addData = ref({
-  abnormal: "",
+  // abnormal: "",
   accuracy1: 0,
   accuracy2: 0,
   accuracy3: 0,
@@ -1053,7 +1055,20 @@ const chartsOption1 = ref({
       },
       symbolSize: 13,
       symbol: "circle",
-
+      itemStyle: {
+        color: (params) => {
+          const dataIndex = params.dataIndex;
+          if (dataIndex == 0) {
+            return "rgb(26, 122, 240)";
+          } else {
+            return tableData.value[dataIndex - 1]
+              ? tableData.value[dataIndex - 1].abnormal != "否"
+                ? "red"
+                : "rgb(26, 122, 240)"
+              : "rgb(26, 122, 240)";
+          }
+        },
+      },
       markLine: {
         silent: true,
         data: [
@@ -1165,7 +1180,20 @@ const chartsOption2 = ref({
       },
       symbolSize: 13,
       symbol: "circle",
-
+      itemStyle: {
+        color: (params) => {
+          const dataIndex = params.dataIndex;
+          if (dataIndex == 0) {
+            return "rgb(26, 122, 240)";
+          } else {
+            return tableData.value[dataIndex - 1]
+              ? tableData.value[dataIndex - 1].abnormal != "否"
+                ? "red"
+                : "rgb(26, 122, 240)"
+              : "rgb(26, 122, 240)";
+          }
+        },
+      },
       markLine: {
         silent: true,
         data: [
@@ -1249,6 +1277,7 @@ const addSubmit = async () => {
       const { data, code } = await addDatas({
         ...addData.value,
         yearStr: year.value,
+        operation: lableValue.value,
       });
       if (code == "200") {
         ElMessage.success("添加成功！");

src/views/analysis/spcRules/index.vue

@@ -280,6 +280,7 @@
             <el-button type="primary" class="btn" @click="tosubmit"
               >提交</el-button
             >
+            <el-button class="btn" @click="toCencel">取消</el-button>
           </div>
         </div>
       </div>
@@ -305,6 +306,7 @@
 <script setup>
 import { useSpcStore } from "@/store";
 import { getRuleData, addRuleData, deleteRuleData } from "@/api/spc";
+import router from "@/router";
 const store = useSpcStore();
 const dialogVisible = ref(false);
 const ruleTips = ref("");
@@ -316,6 +318,10 @@ const addRule = () => {
   formRefs.value = [];
   formData.value.push({ ...itemObj });
 };
+const toCencel = () => {
+  reset();
+  router.back();
+};
 const editRow = ref({});
 const validateSum2 = (rule, value, callback) => {
   if (value === "") {
@@ -440,30 +446,30 @@ const numericalOptions = [
     label: "三分之二下限值",
     value: "三分之二下限值",
   },
-  {
-    label: "上限范围C",
-    value: "上限范围C",
-  },
-  {
-    label: "上限范围B",
-    value: "上限范围B",
-  },
-  {
-    label: "上限范围A",
-    value: "上限范围A",
-  },
-  {
-    label: "下限范围C",
-    value: "下限范围C",
-  },
-  {
-    label: "下限范围B",
-    value: "下限范围B",
-  },
-  {
-    label: "下限范围A",
-    value: "下限范围A",
-  },
+  // {
+  //   label: "上限范围C",
+  //   value: "上限范围C",
+  // },
+  // {
+  //   label: "上限范围B",
+  //   value: "上限范围B",
+  // },
+  // {
+  //   label: "上限范围A",
+  //   value: "上限范围A",
+  // },
+  // {
+  //   label: "下限范围C",
+  //   value: "下限范围C",
+  // },
+  // {
+  //   label: "下限范围B",
+  //   value: "下限范围B",
+  // },
+  // {
+  //   label: "下限范围A",
+  //   value: "下限范围A",
+  // },
 ];
 const currentOption = reactive({
   total: 0,

src/views/statistic/report/index.vue

@@ -1,153 +1,144 @@
 <template>
   <div class="container">
     <div class="header">
-      <Search :searchOptions="searchForm" />
+      <Search
+        ref="searchref"
+        :searchOptions="searchOptons"
+        @data-list="getTableData"
+      />
     </div>
     <div class="table">
+      <!-- <el-button class="btn" style="margin-bottom: 5px" @click="showPrint"
+        >打印</el-button
+      > -->
       <el-table
         :data="tableData"
         border
         :style="{ height: maxHeight - 40 + 'px' }"
       >
-        <el-table-column prop="date" label="Date" width="180" />
-        <el-table-column prop="name" label="Name" width="180" />
-        <el-table-column prop="address" label="Address" />
+        <el-table-column prop="reportCode" label="报告编码" />
+        <el-table-column prop="reportName" label="报告名称" />
+        <el-table-column prop="creator" label="创建人" />
+        <el-table-column prop="created" label="创建时间" />
+        <el-table-column
+          align="center"
+          width="160"
+          prop=""
+          label="操作"
+          id="opear"
+        >
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              class="btn"
+              style="height: 25px"
+              @click="toLook(row)"
+              link
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
       </el-table>
       <Pagination />
     </div>
-    <ReportView v-model="showStatus" />
+    <ReportView v-model="showStatus" :tableData="tableData" />
   </div>
 </template>
 
 <script setup>
 import Search from "@/components/Search/index.vue";
 import ReportView from "@/components/ReportView/index.vue";
-const showStatus = ref(true);
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-];
+import { useDictionaryStore } from "@/store";
+import { getData } from "@/api/report";
+import Pagination from "@/components/Pagination/index.vue";
+const searchref = ref(null);
+const showPrint = () => {
+  showStatus.value = true;
+};
+const toLook = (row) => {
+  const fullUrl = window.location.href;
+  const parts = fullUrl.split("/");
+  const thirdSlashIndex = 2;
+  const truncatedUrl = parts.slice(0, thirdSlashIndex + 1).join("/");
+  window.open(truncatedUrl + "/" + row.fileUrl, "_blank");
+};
+const currentOption = reactive({
+  total: 0,
+  page: 1,
+  limit: 10,
+  pageSizes: [10, 20, 40],
+});
+const getCurrentMonthStartAndEndDates = () => {
+  // 获取当前日期
+  let now = new Date();
+
+  // 获取当前月份的第一天
+  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  // 获取当前月份的最后一天
+  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
 
-const searchForm = [
+  // 格式化日期为'YYYY-MM-DD'格式
+  function formatDate(date) {
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, "0");
+    let day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  // 返回包含开始和结束日期的数组
+  return [formatDate(startDate), formatDate(endDate)];
+};
+const tableData = ref([]);
+const getTableData = async () => {
+  const { data } = await getData({
+    pageNo: currentOption.page,
+    pageSize: currentOption.limit,
+    startTime: searchref.value.searchForm.time
+      ? searchref.value.searchForm.time[0]
+      : null,
+    endTime: searchref.value.searchForm.time
+      ? searchref.value.searchForm.time[1]
+      : null,
+    reportCode: searchref.value.searchForm.reportCode,
+    reportName: searchref.value.searchForm.reportName,
+  });
+  tableData.value = data.records;
+  currentOption.total = data.totalCount;
+};
+const showStatus = ref(false);
+const searchOptons = [
   {
     label: "创建时间",
-    prop: "sss",
+    prop: "time",
     type: "daterange",
   },
   {
     label: "报告编号",
-    prop: "sss",
+    prop: "reportCode",
     type: "input",
   },
   {
-    label: "报告类型",
-    prop: "sss",
-    type: "select",
+    label: "报告名称",
+    prop: "reportName",
+    type: "input",
   },
 ];
 const maxHeight = ref(null);
 const setHeight = () => {
-  maxHeight.value = document.querySelector(".table").clientHeight;
+  maxHeight.value = document.querySelector(".table").clientHeight - 30;
 };
-onMounted(() => {
+onMounted(async () => {
+  searchref.value.searchForm.time = getCurrentMonthStartAndEndDates();
   setHeight();
+  getTableData();
 });
 </script>
 
 <style scoped lang="scss">
+.btn {
+  height: 25px;
+}
 .container {
   background-color: white;
   width: 100%;

src/views/statistic/statistic/index.vue

@@ -11,6 +11,8 @@
               range-separator="-"
               start-placeholder="起始时间"
               end-placeholder="截止时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
               size="small"
             />
           </div>
@@ -19,35 +21,34 @@
           <div class="text">选择统计维度：</div>
           <div>
             <el-radio-group v-model="radio" style="display: flex">
-              <el-radio size="small" :value="3">天</el-radio>
-              <el-radio size="small" :value="6">周</el-radio>
-              <el-radio size="small" :value="9">月</el-radio>
-              <el-radio size="small" :value="12">年</el-radio>
+              <el-radio size="small" :value="1">天</el-radio>
+              <el-radio size="small" :value="2">周</el-radio>
+              <el-radio size="small" :value="3">月</el-radio>
+              <el-radio size="small" :value="4">年</el-radio>
             </el-radio-group>
           </div>
         </div>
         <div class="header">
           <div class="text">选择统计维度：</div>
           <el-tree
-            ref="treeRef"
-            :data="data"
+            ref="treeRef1"
+            :data="statLevelData"
             show-checkbox
             default-expand-all
-            node-key="id"
-            highlight-current
-            :props="defaultProps"
+            :default-checked-keys="checkedKeys"
+            node-key="key"
           />
         </div>
         <div class="header" style="border-bottom: 0px">
           <div class="text">选择统计指标：</div>
           <el-tree
-            ref="treeRef"
+            ref="treeRef2"
             :data="data1"
             show-checkbox
             default-expand-all
-            node-key="id"
+            :default-checked-keys="['合格率']"
+            node-key="key"
             highlight-current
-            :props="defaultProps"
           />
         </div>
       </el-scrollbar>
@@ -56,20 +57,38 @@
       <div class="box">
         <div class="boxheader">
           <div>
-            <el-button type="primary" class="btn">统计查询</el-button>
-            <el-button class="btn">重置</el-button>
+            <el-button type="primary" class="btn" @click="getTableData"
+              >统计查询</el-button
+            >
+            <el-button class="btn" @click="reset">重置</el-button>
           </div>
-          <el-button class="btn">导出</el-button>
+          <el-button class="btn" @click="exportFnc">导出</el-button>
         </div>
         <div class="info">
           <el-table
             :data="tableData"
             border
             :style="{ height: maxHeight + 'px' }"
+            style="width: calc(100% - 50)"
           >
-            <el-table-column prop="date" label="Date" width="180" />
-            <el-table-column prop="name" label="Name" width="180" />
-            <el-table-column prop="address" label="Address" />
+            <el-table-column
+              v-if="queryIndexs.includes('productLine')"
+              prop="productLineName"
+              label="产线名称"
+            />
+            <el-table-column
+              v-if="queryIndexs.includes('prodict')"
+              prop="materialName"
+              label="产品名称"
+            />
+            <el-table-column
+              v-if="queryIndexs.includes('operation')"
+              prop="operationName"
+              label="工序名称"
+            />
+            <el-table-column prop="goodRate" label="良率" />
+            <el-table-column prop="badRate" label="不良率" />
+            <el-table-column prop="timeStr" label="日期" />
           </el-table>
         </div>
         <div class="footer">
@@ -78,6 +97,9 @@
             :page="currentOption.page"
             :limit="currentOption.limit"
             :pageSizes="currentOption.pageSizes"
+            v-model:page="currentOption.page"
+            v-model:limit="currentOption.limit"
+            @pagination="getTableData"
           />
         </div>
       </div>
@@ -86,197 +108,121 @@
 </template>
 
 <script setup>
-import * as echarts from "echarts";
+import { getData, getStatLevel, getExport } from "@/api/statistic";
 import Pagination from "@/components/Pagination/index.vue";
-const value = ref("");
+import { downFile } from "@/utils/common";
+defineOptions({
+  name: "Dashboard",
+  inheritAttrs: false,
+});
+const exportFnc = async () => {
+  await getExport({
+    endTime: value1.value ? value1.value[1] : "",
+    startTime: value1.value ? value1.value[0] : "",
+    queryTypes: getValue(treeRef1.value.getCheckedNodes()),
+    queryIndex: getValue(treeRef2.value.getCheckedNodes()),
+    timeType: radio.value,
+  }).then((res) => downFile(res));
+};
+const treeRef1 = ref(null);
+const treeRef2 = ref(null);
 const currentOption = ref({
   total: 0,
-  page: 0,
-  limit: 12,
-  pageSizes: [12],
+  page: 1,
+  limit: 10,
+  pageSizes: [10, 20],
 });
-const data = [
-  {
-    id: 1,
-    label: "车间1",
-    children: [
-      {
-        id: 4,
-        label: "Level two 1-1",
-        children: [
-          {
-            id: 9,
-            label: "Level three 1-1-1",
-          },
-          {
-            id: 10,
-            label: "Level three 1-1-2",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: "Level one 2",
-    children: [
-      {
-        id: 5,
-        label: "Level two 2-1",
-      },
-      {
-        id: 6,
-        label: "Level two 2-2",
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: "Level one 3",
-    children: [
-      {
-        id: 7,
-        label: "Level two 3-1",
-      },
-      {
-        id: 8,
-        label: "Level two 3-2",
-      },
-    ],
-  },
-];
 const data1 = [
   {
-    id: 1,
-    label: "车间1",
-  },
-  {
-    id: 2,
+    value: "pass",
+    key: "合格率",
     label: "合格率",
   },
-  {
-    id: 3,
-    label: "PPM",
-  },
-  {
-    id: 4,
-    label: "Cpk",
-  },
 ];
 const maxHeight = ref(null);
 const maxWidth = ref(null);
 
 const value1 = ref(null);
-const radio = ref(3);
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-];
+const radio = ref(1);
+const tableData = ref([]);
 
-defineOptions({
-  name: "Dashboard",
-  inheritAttrs: false,
-});
 const setHeight = () => {
-  maxHeight.value = document.querySelector(".info").clientHeight;
-  maxWidth.value = document.querySelector(".info").clientWidth;
+  maxHeight.value = document.querySelector(".info").clientHeight - 30;
+  maxWidth.value = document.querySelector(".info").clientWidth - 120;
 };
+const getCurrentMonthStartAndEndDates = () => {
+  // 获取当前日期
+  let now = new Date();
 
-onMounted(() => {
+  // 获取当前月份的第一天
+  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  // 获取当前月份的最后一天
+  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  // 格式化日期为'YYYY-MM-DD'格式
+  function formatDate(date) {
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, "0");
+    let day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  // 返回包含开始和结束日期的数组
+  return [formatDate(startDate), formatDate(endDate)];
+};
+const getValue = (array) => {
+  let resarray = [];
+  for (let i = 0; i < array.length; i++) {
+    resarray.push(array[i].value);
+  }
+  return resarray;
+};
+const queryIndexs = ref([]);
+const getTableData = async () => {
+  queryIndexs.value = getValue(treeRef1.value.getCheckedNodes());
+  const { data } = await getData({
+    endTime: value1.value ? value1.value[1] : "",
+    startTime: value1.value ? value1.value[0] : "",
+    pageNo: currentOption.value.page,
+    pageSize: currentOption.value.limit,
+    queryTypes: getValue(treeRef1.value.getCheckedNodes()),
+    queryIndex: getValue(treeRef2.value.getCheckedNodes()),
+    timeType: radio.value,
+  });
+  tableData.value = data.records;
+  currentOption.value.total = data.totalCount;
+};
+const reset = () => {
+  value1.value = getCurrentMonthStartAndEndDates();
+  treeRef1.value.setCheckedKeys(checkedKeys.value, true, true);
+  treeRef2.value.setCheckedKeys([data1[0].key], true, true);
+  radio.value = 1;
+  currentOption.value.page = 1;
+  getTableData();
+};
+const statLevelData = ref([]);
+const getStatLevelData = async () => {
+  const { data } = await getStatLevel();
+  data.forEach((element) => {
+    element.label = element.key;
+  });
+  statLevelData.value = data;
+};
+const checkedKeys = computed(() => {
+  let array = [];
+  for (let i = 0; i < statLevelData.value.length; i++) {
+    array.push(statLevelData.value[i].key);
+  }
+  return array;
+});
+
+onMounted(async () => {
+  window.addEventListener("resize", setHeight);
+  value1.value = getCurrentMonthStartAndEndDates();
   setHeight();
+  await getStatLevelData();
+  getTableData();
 });
 </script>
 
@@ -291,8 +237,7 @@ onMounted(() => {
   display: flex;
   background-color: white;
   .infobox {
-    width: 200px;
-
+    width: 260px;
     .header {
       border-bottom: 2px solid #00000010;
       padding: 20px;
@@ -302,7 +247,7 @@ onMounted(() => {
     }
   }
   .databox {
-    flex: 1;
+    width: calc(100% - 260px);
     border-left: 2px solid #00000010;
     .box {
       height: 100%;