消防报告代码优化

src/pages.json

@@ -289,6 +289,13 @@
         "enablePullDownRefresh": false
       }
     },
+    {
+      "path": "pages/business/mhxf/fireReport/components/detailedPath",
+      "style": {
+        "navigationBarTitleText": "消防报告",
+        "enablePullDownRefresh": false
+      }
+    },
     //消防报告 结束
 
     //待办事项 开始

src/pages/business/mhxf/fireReport/components/detailedPath.vue

@@ -0,0 +1,62 @@
+<template>
+  <view class="detailed" style="font-size: 30upx">
+    <view class="detailedContent">
+      <web-view :src="pathUrl"></web-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
+import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance, toRefs } from "vue";
+import publicStore from "@/store/modules/public";
+
+import lineEcharts from "./echarts.vue";
+
+import {} from "@/api/business/mhxf/informationSelect";
+
+const { proxy } = getCurrentInstance();
+
+const publicStores = publicStore(); //全局公共Store
+
+const dataList = reactive({
+  pathUrl: "",
+});
+
+const { pathUrl } = toRefs(dataList);
+
+watchEffect(() => {});
+
+// 自定义导航事件
+onNavigationBarButtonTap((e) => {
+  if (e.float == "right") {
+    uni.navigateTo({
+      url: "/pages/business/mhxf/xunJian/collect/components/collectRecord",
+    });
+  } else {
+  }
+});
+
+onLoad((options) => {
+  pathUrl.value = options.reportPath;
+});
+
+onReady(() => {});
+
+onMounted(() => {});
+</script>
+
+<style lang="scss">
+.detailed {
+  height: calc(100vh - 44px);
+  .detailedContent {
+  }
+}
+</style>
+
+<style scoped>
+uni-page-body,
+uni-page-refresh {
+  background-color: #f5f6f7;
+}
+</style>

src/pages/business/mhxf/fireReport/index.vue

@@ -6,11 +6,11 @@
         <view style="margin: auto 10px auto 0" @click="handleSelect()">
           <u-image src="@/static/images/fireReport/icon1.png" width="13px" height="13px"></u-image>
         </view>
-        <view style="margin: 0 auto 0 0" @click="handleSelect()">
+        <view style="margin: 0 auto 0 0" @click="handleSelect(li.reportPath)">
           <view>{{ li.reportName }}</view>
         </view>
         <view>
-          <view style="color: #3c9cff; cursor: pointer" @click="handleDownload">下载报告</view>
+          <view style="color: #3c9cff; cursor: pointer" @click="handleDownload(li.reportPath)">下载报告</view>
         </view>
       </view>
       <u-loadmore :status="status" />
@@ -30,82 +30,20 @@ const { proxy } = getCurrentInstance();
 const publicStores = publicStore(); //全局公共Store
 
 const dataRes = ref(true);
-const dataList = ref([
-  {
-    value: 1,
-    title: "2023年1月份单位消防报告",
-  },
-  {
-    value: 2,
-    title: "2023年2月份单位消防报告",
-  },
-  {
-    value: 3,
-    title: "2023年3月份单位消防报告",
-  },
-  {
-    value: 4,
-    title: "2023年4月份单位消防报告",
-  },
-  {
-    value: 5,
-    title: "2023年5月份单位消防报告",
-  },
-  {
-    value: 6,
-    title: "2023年6月份单位消防报告",
-  },
-  {
-    value: 7,
-    title: "2023年7月份单位消防报告",
-  },
-  {
-    value: 8,
-    title: "2023年8月份单位消防报告",
-  },
-  {
-    value: 9,
-    title: "2023年9月份单位消防报告",
-  },
-  {
-    value: 10,
-    title: "2023年10月份单位消防报告",
-  },
-  {
-    value: 11,
-    title: "2023年11月份单位消防报告",
-  },
-  {
-    value: 11,
-    title: "2023年11月份单位消防报告",
-  },
-  {
-    value: 11,
-    title: "2023年11月份单位消防报告",
-  },
-  {
-    value: 11,
-    title: "2023年11月份单位消防报告",
-  },
-  {
-    value: 11,
-    title: "2023年11月份单位消防报告",
-  },
-  {
-    value: 11,
-    title: "2023年11月份单位消防报告",
-  },
-]);
+const dataList = ref([]);
 const status = ref("loadmore");
 const pageSize = ref(20);
 const pageNum = ref(1);
 const total = ref(0);
 
+const isShowProgress = ref(false);
+const progress = ref(0);
+
 /**
  * @列表点击事件
  */
-function handleSelect() {
-  proxy.$tab.navigateTo("/pages/business/mhxf/fireReport/components/detailed");
+function handleSelect(reportPath) {
+  proxy.$tab.navigateTo("/pages/business/mhxf/fireReport/components/detailedPath?reportPath=" + reportPath);
 
   // uni.navigateBack({
   //   delta: 1,
@@ -133,10 +71,71 @@ function reportInfoListApi() {
  * @下载
  * @按钮点击事件
  */
-function handleDownload() {
+function handleDownload(reportPath) {
   proxy.$modal.loading("报告下载中，请耐心等待...");
 
   setTimeout(() => {
+    //  #ifdef H5
+    window.open(reportPath);
+    // #endif
+
+    // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
+    // #ifdef MP-WEIXIN
+    uni.downloadFile({
+      url: reportPath,
+      success: (res) => {
+        console.log(res);
+        if (res.statusCode === 200) {
+          // 预览pdf文件
+          uni.openDocument({
+            filePath: res.tempFilePath,
+            showMenu: true, // 右上角菜单，可以进行分享保存pdf
+            success: function (file) {
+              console.log("file-success", file);
+            },
+          });
+        }
+      },
+    });
+    // #endif
+
+    // #ifdef APP-PLUS
+    uni.downloadFile({
+      url: reportPath,
+      success: (res) => {
+        console.log(res);
+        if (res.statusCode === 200) {
+          // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
+          uni.saveImageToPhotosAlbum({
+            filePath: res.tempFilePath,
+            success: function () {
+              uni.showToast({
+                title: "文件已保存至/DCIM/CAMERA文件夹下",
+                icon: "none",
+              });
+              setTimeout(function () {
+                // 预览pdf文件
+                uni.openDocument({
+                  filePath: res.tempFilePath,
+                  showMenu: true,
+                  success: function (file) {
+                    console.log("file-success", file);
+                  },
+                });
+              }, 1500);
+            },
+            fail: function () {
+              uni.showToast({
+                title: "保存失败，请稍后重试！",
+                icon: "none",
+              });
+            },
+          });
+        }
+      },
+    });
+    // #endif
+
     proxy.$modal.closeLoading();
   }, 2000);
 }
@@ -196,6 +195,27 @@ onMounted(() => {});
       margin-bottom: 0px;
     }
   }
+
+  .progress-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.2);
+    width: 750rpx;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .progress-box {
+      background: #ffffff;
+      border-radius: 20rpx;
+      padding: 30rpx;
+      .text {
+        margin-bottom: 20rpx;
+      }
+    }
+  }
 }
 </style>