Browse Source

feature/质量日报

dengrui 1 year ago
parent
commit
b91de45aa4

+ 1 - 0
package.json

@@ -50,6 +50,7 @@
     "axios": "^1.6.7",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
+    "html2canvas": "^1.4.1",
     "lodash-es": "^4.17.21",
     "net": "^1.0.2",
     "nprogress": "^0.2.0",

+ 165 - 0
src/components/ReportView/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="bgColor">
+    <div class="body">
+      <div class="header">
+        <div class="text">报告预览</div>
+        <div class="delete">
+          <el-button
+            style="margin-right: 10px"
+            type="primary"
+            size="small"
+            class="btn"
+            v-print="'#print'"
+            >打印</el-button
+          >
+          <!-- <el-button
+            style="margin-right: 10px"
+            type="primary"
+            size="small"
+            class="btn"
+            @click="downloadPNG"
+            >导出</el-button
+          > -->
+          <span style="padding: 20px">X</span>
+        </div>
+      </div>
+      <div class="box">
+        <el-scrollbar>
+          <div id="print">
+            <div class="tableInfo">
+              <div class="title" style="text-align: center">质量日报</div>
+              <div class="info">
+                <div class="text">产品批次:</div>
+                <div class="text">产品型号:</div>
+                <div class="text">报告日期:2024年04月23日</div>
+              </div>
+
+              <table>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Age</th>
+                    <th>Country</th>
+                    <th>Country</th>
+                    <th>Country</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>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// import html2canvas from "html2canvas";
+
+// const downloadPNG = async () => {
+//   try {
+//     const canvas = await html2canvas(document.getElementById("print"));
+//     const imgData = canvas.toDataURL("image/png");
+//     const downloadLink = document.createElement("a");
+//     downloadLink.href = imgData;
+//     downloadLink.download = "download.png";
+//     downloadLink.click();
+//   } catch (error) {
+//     console.error("Error generating PNG:", error);
+//   }
+// };
+</script>
+
+<style lang="scss" scoped>
+@media print {
+  #print {
+    position: absolute; /* 或 absolute, fixed, 根据需要调整 */
+    top: 20px; /* 调整顶部位置 */
+    margin: 0; /* 重置边距 */
+    width: 700px;
+  }
+}
+table {
+  width: 100%;
+  border-collapse: collapse; /* 合并表格边框 */
+}
+th,
+td {
+  border: 1px solid rgba(0, 0, 0, 0.3); /* 设置所有单元格的边框 */
+  padding: 8px;
+  text-align: left;
+}
+th {
+  background-color: #f2f2f2; /* 设置表头的背景颜色 */
+}
+
+.bgColor {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99999;
+  background-color: rgba(0, 0, 0, 0.3);
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 0;
+  .body {
+    width: 800px;
+    height: 85vh;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    .header {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      padding-bottom: 10px;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    }
+    .box {
+      height: calc(100% - 40px);
+    }
+  }
+}
+.tableInfo {
+  width: 100%;
+  height: 60px;
+
+  .title {
+    margin: 10px 0;
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .info {
+    display: flex;
+    padding: 0 20px;
+    justify-content: space-between;
+  }
+}
+</style>

+ 9 - 0
src/router/modules/analysis.ts

@@ -36,6 +36,15 @@ export default {
             icon: "Guide",
           },
         },
+        {
+          path: "task",
+          component: () => import("@/views/analysis/target/aaaa/index.vue"),
+          name: "aaaaa",
+          meta: {
+            title: "aaaaa",
+            icon: "Guide",
+          },
+        },
       ],
     },
   ],

+ 2 - 0
src/views/statistic/report/index.vue

@@ -15,11 +15,13 @@
       </el-table>
       <Pagination />
     </div>
+    <ReportView />
   </div>
 </template>
 
 <script setup>
 import Search from "@/components/Search/index.vue";
+import ReportView from "@/components/ReportView/index.vue";
 const tableData = [
   {
     date: "2016-05-03",