|
@@ -0,0 +1,506 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="quality-report-dialog">
|
|
|
+ <div class="dialog-header">
|
|
|
+ <div class="company-logo">
|
|
|
+ <!-- <span class="back-button" @click="goBack">返回</span> -->
|
|
|
+ <img src="@/assets/qy/image.png" alt="公司logo">
|
|
|
+ </div>
|
|
|
+ <div class="company-title">铨一电源科技有限公司</div>
|
|
|
+ <h2 class="report-title">进 料 质 量 月 报 表</h2>
|
|
|
+ <div class="report-info">
|
|
|
+ <span style="font-size: 18px">{{ masterInfo.reportDate }} </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="scroll-controls">
|
|
|
+ <div class="scroll-switch">
|
|
|
+ <span>滚动展示</span>
|
|
|
+ <label class="switch">
|
|
|
+ <input type="checkbox" v-model="isScrolling" @change="handleScrollChange">
|
|
|
+ <span class="slider"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="display-count" v-if="isScrolling">
|
|
|
+ <span>显示行数:</span>
|
|
|
+ <select v-model="displayRows" @change="handleRowsChange">
|
|
|
+ <option value="3">3行</option>
|
|
|
+ <option value="4">4行</option>
|
|
|
+ <option value="5">5行</option>
|
|
|
+ <option value="10">10行</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="table-container" :style="tableStyle" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr >
|
|
|
+<!-- <th>序号</th>-->
|
|
|
+ <th>订单号/数量</th>
|
|
|
+ <th>型号/名称</th>
|
|
|
+ <th>数量</th>
|
|
|
+ <th>不合格原因</th>
|
|
|
+ <th>不合格数</th>
|
|
|
+ <th>处理情况</th>
|
|
|
+ <th>检验日期</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody ref="tbody">
|
|
|
+ <tr v-for="(item,index) in displayData" :key="item.id" v-loading="loading">
|
|
|
+<!-- <td>{{ index+1 }}</td>-->
|
|
|
+ <td>{{ item.orderNumber }}</td>
|
|
|
+ <td>{{ item.modelName }}</td>
|
|
|
+ <td>{{ item.quantity }}</td>
|
|
|
+ <td>{{ item.causeOfNonconformity }}</td>
|
|
|
+ <td>{{ item.disqualificationNumber }}</td>
|
|
|
+ <td>{{ item.handlingSituation }}</td>
|
|
|
+ <td>{{ item.dateOfInspection }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加底部统计信息 -->
|
|
|
+ <div class="summary-section">
|
|
|
+ <table class="summary-table">
|
|
|
+ <tr>
|
|
|
+ <td style="width: 18.56%;" class="ct">一次不合格批次</td>
|
|
|
+ <td style="width: 25.6%;"><span>{{ masterInfo.jlOneFailedBatch }}</span></td>
|
|
|
+ <td style="width: 26%;" class="ct">废品/退货总数量</td>
|
|
|
+ <td><span>{{ masterInfo.jlQuantityOfRejectsReturns }} </span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="ct">报检总批次</td>
|
|
|
+ <td><span>{{ masterInfo.jlTotalBatchForInspection }}</span></td>
|
|
|
+ <td class="ct">本月合格率(批次)</td>
|
|
|
+ <td><span>{{ masterInfo.jlQualifiedRateOfTheMonth }}</span></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加底部签名 -->
|
|
|
+ <div class="signature-section">
|
|
|
+ <div class="signature-item">
|
|
|
+ <span>{{ masterInfo.inspector }}</span>
|
|
|
+ <span>{{masterInfo.examineDate}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="signature-item">
|
|
|
+ <span>{{ masterInfo.examine }}</span>
|
|
|
+ <span>{{masterInfo.inspectorDate}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getQualityinspectioninformation,
|
|
|
+ listQualityinspectioninformation
|
|
|
+} from "@/api/amichi/qualityinspectioninformation/qualityinspectioninformation";
|
|
|
+import {listInspection} from "@/api/amichi/qualityinspectioninformation/jlinspection";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'TcCom',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ loading:false,
|
|
|
+ tableData: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ isScrolling: false, // 控制是否滚动的开关
|
|
|
+ scrollData: [], // 用于滚动的数据
|
|
|
+ timer: null,
|
|
|
+ currentIndex: 0,
|
|
|
+ displayRows: 3, // 默认显示3行
|
|
|
+ isPaused: false, // 添加暂停状态标记
|
|
|
+ masterInfo:{
|
|
|
+ id:null,
|
|
|
+ manufacturingProcess:null,
|
|
|
+ inspector:null,
|
|
|
+ examine:null,
|
|
|
+ jlOneFailedBatch:null,
|
|
|
+ jlTotalBatchForInspection:null,
|
|
|
+ jlQuantityOfRejectsReturns:null,
|
|
|
+ jlQualifiedRateOfTheMonth:null,
|
|
|
+ reportDate:null,
|
|
|
+ examineDate:null,
|
|
|
+ inspectorDate:null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ displayData () {
|
|
|
+ return this.isScrolling ? this.scrollData : this.tableData
|
|
|
+ },
|
|
|
+ tableStyle () {
|
|
|
+ if (this.isScrolling) {
|
|
|
+ return {
|
|
|
+ height: `${this.displayRows * 40}px`,
|
|
|
+ overflow: 'hidden'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 非滚动展示时,如果数据超过10行则显示滚动条
|
|
|
+ return {
|
|
|
+ maxHeight: '400px', // 设置一个较大的最大高度
|
|
|
+ overflowY: 'auto', // 只允许垂直方向滚动
|
|
|
+ overflowX: 'hidden' // 禁止水平方向滚动
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleScrollChange () {
|
|
|
+ if (this.isScrolling) {
|
|
|
+ this.scrollData = [...this.tableData, ...this.tableData]
|
|
|
+ this.isPaused = false // 重置暂停状态
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tbody.style.transform = 'translateY(0)'
|
|
|
+ this.$refs.tbody.style.transition = 'none'
|
|
|
+ this.startScroll()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.stopScroll()
|
|
|
+ this.isPaused = false // 重置暂停状态
|
|
|
+ if (this.$refs.tbody) {
|
|
|
+ this.$refs.tbody.style.transform = 'translateY(0)'
|
|
|
+ this.$refs.tbody.style.transition = 'none'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startScroll () {
|
|
|
+ this.currentIndex = 0
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.currentIndex++
|
|
|
+ this.$refs.tbody.style.transition = 'transform 0.5s'
|
|
|
+ this.$refs.tbody.style.transform = `translateY(-${this.currentIndex * 40}px)`
|
|
|
+
|
|
|
+ if (this.currentIndex >= this.tableData.length) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.tbody.style.transition = 'none'
|
|
|
+ this.currentIndex = 0
|
|
|
+ this.$refs.tbody.style.transform = 'translateY(0)'
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ }, 2000)
|
|
|
+ },
|
|
|
+ stopScroll () {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goBack () {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ handleRowsChange () {
|
|
|
+ // if (!this.isPaused) { // 只有在非暂停状态下才重启滚动
|
|
|
+ // this.stopScroll()
|
|
|
+ // this.startScroll()
|
|
|
+ // }
|
|
|
+ if (!this.isPaused) {
|
|
|
+ this.stopScroll()
|
|
|
+ // 重置位置到第一条
|
|
|
+ this.currentIndex = 0
|
|
|
+ if (this.$refs.tbody) {
|
|
|
+ this.$refs.tbody.style.transition = 'none'
|
|
|
+ this.$refs.tbody.style.transform = 'translate3d(0, 0, 0)'
|
|
|
+ }
|
|
|
+ // 延迟启动滚动,确保重置生效
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.startScroll()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pauseScroll () {
|
|
|
+ if (this.isScrolling && !this.isPaused) {
|
|
|
+ this.isPaused = true
|
|
|
+ this.stopScroll()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resumeScroll () {
|
|
|
+ if (this.isScrolling && this.isPaused) {
|
|
|
+ this.isPaused = false
|
|
|
+ this.startScroll()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkMasterInfo () {
|
|
|
+ this.masterInfo.isEnablePaging=false;
|
|
|
+ getQualityinspectioninformation(this.masterInfo.id).then(response => {
|
|
|
+ this.masterInfo = response.data;
|
|
|
+ });
|
|
|
+ this.loading=true
|
|
|
+ listInspection({"fid":this.masterInfo.id,"isEnablePaging":"false"}).then(response => {
|
|
|
+ this.tableData = response.rows;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // 移除这里的初始化,改为在开关打开时初始化
|
|
|
+ this.masterInfo.id =this.$route.query.id;
|
|
|
+ this.checkMasterInfo();
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // 移除这里的自动开始滚动
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ this.stopScroll()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.quality-report-dialog {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 60px;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid black;
|
|
|
+}
|
|
|
+
|
|
|
+.back-button {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -25px;
|
|
|
+ padding: 5px 15px;
|
|
|
+ background-color: #409EFF;
|
|
|
+ color: white;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.back-button:hover {
|
|
|
+ background-color: #66b1ff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-header {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.company-logo {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.company-logo img {
|
|
|
+ width: 120px;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.company-title {
|
|
|
+ font-size: 30px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.report-title {
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 15px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.report-info {
|
|
|
+ text-align: right;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.table-container {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ transition: height 0.3s;
|
|
|
+ cursor: default;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: separate;
|
|
|
+ border-spacing: 0;
|
|
|
+ background: #fff;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+thead {
|
|
|
+ background: #f5f5f5;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+tbody {
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ transform-origin: 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+th, td {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+th {
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+tr {
|
|
|
+ height: 40px;
|
|
|
+ /* line-height: 40px; */
|
|
|
+}
|
|
|
+
|
|
|
+/* 设置列宽 */
|
|
|
+th:nth-child(1), td:nth-child(1) { width: 5%; } /* 序号 */
|
|
|
+th:nth-child(2), td:nth-child(2) { width: 10%; } /* 订单号/数量 */
|
|
|
+th:nth-child(3), td:nth-child(3) { width: 25%; } /* 型号/名称 */
|
|
|
+th:nth-child(4), td:nth-child(4) { width: 8%; } /* 数量 */
|
|
|
+th:nth-child(5), td:nth-child(5) { width: 22%; } /* 不合格原因 */
|
|
|
+th:nth-child(6), td:nth-child(6) { width: 10%; } /* 不合格数 */
|
|
|
+th:nth-child(7), td:nth-child(7) { width: 10%; } /* 处理情况 */
|
|
|
+th:nth-child(8), td:nth-child(8) { width: 10%; } /* 检验日期 */
|
|
|
+
|
|
|
+/* 美化滚动条样式 */
|
|
|
+.table-container::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ height: 0; /* 隐藏水平滚动条 */
|
|
|
+}
|
|
|
+
|
|
|
+.table-container::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #888;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.table-container::-webkit-scrollbar-track {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-section {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-table td {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ct {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+}
|
|
|
+
|
|
|
+.signature-section {
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.signature-item {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.signature-item span {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-controls {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-switch {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 开关样式 */
|
|
|
+.switch {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.switch input {
|
|
|
+ opacity: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.slider {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #ccc;
|
|
|
+ transition: .4s;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.slider:before {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ left: 2px;
|
|
|
+ bottom: 2px;
|
|
|
+ background-color: white;
|
|
|
+ transition: .4s;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+input:checked + .slider {
|
|
|
+ background-color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+input:checked + .slider:before {
|
|
|
+ transform: translateX(20px);
|
|
|
+}
|
|
|
+
|
|
|
+.display-count {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.display-count select {
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.display-count select:focus {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+</style>
|