zc

pages_safetyEducationExamination/views/home/component/academicYearStats.vue

@@ -14,7 +14,11 @@
 				<view v-if="!yearStatsList.length" class="empty-tip">暂无统计数据</view>
 			</view>
 		</view>
-		<dataStatisticsReport v-if="dialogType" :dataStatisticsReportPropsData="dataStatisticsReportPropsData"></dataStatisticsReport>
+		<dataStatisticsReport
+		:visible="dialogType"
+		:dataStatisticsReportPropsData="dataStatisticsReportPropsData"
+		@close="closeReport"
+	></dataStatisticsReport>
 	</view>
 </template>
 
@@ -23,7 +27,7 @@
 		examElLabEduRelationAcademicYearProgress, 
 		examElLabEduRelationGraduationReport,
 	} from '@/pages_safetyEducationExamination/api/index.js'
-	import { dataStatisticsReport } from './dataStatisticsReport'
+	import dataStatisticsReport from './dataStatisticsReport.vue'
 	export default {
 		components: {
 			dataStatisticsReport,
@@ -45,6 +49,9 @@
 			resetMethod(){
 				this.examElLabEduRelationAcademicYearProgress();
 			},
+			closeReport() {
+				this.dialogType = false;
+			},
 			//年度数据
 			async examElLabEduRelationAcademicYearProgress() {
 				try {

pages_safetyEducationExamination/views/home/component/dataStatisticsReport.vue

@@ -1,8 +1,11 @@
 <!-- 毕业教育考试数据统计报告 -->
 <template>
-  <view class="dataStatisticsReport-addPage">
-    <!-- 报告主体 -->
-    <view class="report-wrap" v-if="showType">
+  <view class="dataStatisticsReport-addPage" v-if="visible" @tap="onOverlayTap">
+    <!-- 弹窗容器 -->
+    <view class="report-wrap" @tap.stop="stopProp">
+      <!-- 关闭按钮 -->
+      <view class="close-btn" @tap="handleClose">✕</view>
+      <scroll-view scroll-y class="report-scroll">
       <view class="report-wrap-big-box">
         <view class="report-wrap-min-box">
           <!-- logo -->
@@ -87,6 +90,7 @@
           </view>
         </view>
       </view>
+      </scroll-view>
     </view>
   </view>
 </template>
@@ -95,6 +99,10 @@
   export default {
     name: 'dataStatisticsReport',
     props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
       dataStatisticsReportPropsData: {
         type: Object,
         default: () => ({})
@@ -115,16 +123,27 @@
           issuingUnit: '',
           issuingTime: '',
         },
-        showType: false,
       }
     },
-    mounted() {
-      this.initialize()
+    watch: {
+      dataStatisticsReportPropsData: {
+        immediate: true,
+        handler(val) {
+          if (val && Object.keys(val).length) {
+            this.$set(this, 'newData', val);
+          }
+        }
+      }
     },
     methods: {
-      initialize() {
-        this.$set(this, 'newData', this.dataStatisticsReportPropsData)
-        this.$set(this, 'showType', true)
+      stopProp(e) {
+        e.stopPropagation && e.stopPropagation();
+      },
+      handleClose() {
+        this.$emit('close');
+      },
+      onOverlayTap() {
+        this.$emit('close');
       },
     }
   }
@@ -132,28 +151,49 @@
 
 <style scoped lang="scss">
 .dataStatisticsReport-addPage {
-  background: #f5f7fa;
-  flex: 1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
   .report-wrap {
-    flex: 1;
+    position: relative;
+    width: 90%;
+    max-height: 80vh;
+    background: #fffdf5;
+    border-radius: 8rpx;
     display: flex;
     flex-direction: column;
 
+    .close-btn {
+      position: absolute;
+      top: 16rpx;
+      right: 24rpx;
+      z-index: 10;
+      font-size: 36rpx;
+      color: #8b452f;
+      line-height: 1;
+      padding: 8rpx;
+    }
+
+    .report-scroll {
+      flex: 1;
+      max-height: 80vh;
+    }
+
     .report-wrap-big-box {
       margin: 20rpx;
       border: 1rpx solid #c9a84c;
       border-radius: 4rpx;
-      position: relative;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
       background-color: #fffdf5;
 
       .report-wrap-min-box {
-        flex: 1;
         display: flex;
         flex-direction: column;
         border: 1rpx solid #c9a84c;
@@ -382,3 +422,4 @@
   }
 }
 </style>
+