数据导入加上说明 + 列表底部加上说明

src/components/data/gab-import.vue

@@ -196,6 +196,23 @@
                 </el-result>
             </template>
         </div>
+        <div class="demo-image__error" flex gap-2>
+        <span class="link pointer" @click="openGuidePreview">
+          导入模板已兼容公安信访综合信息系统的台账，在公安部信访平台导出台账后直接在此导入。（点击查看示例图片）（共 {{ srcList.length }} 张）
+        </span>
+          <el-image-viewer
+              v-if="showPreview"
+              show-progress
+              :url-list="srcList"
+              @close="showPreview = false"
+              @switch="onPreviewChange"
+          >
+            <!-- 底部说明 -->
+<!--            <div class="image-desc">-->
+<!--              {{ imageList[currentIndex]?.desc }}-->
+<!--            </div>-->
+          </el-image-viewer>
+        </div>
         <footer class="flex end mt-20 v-center">
             <el-button size="large" @click="handlePrev" v-if="activeStep !== 3 && activeStep !== 0"
                 >上一步</el-button
@@ -284,6 +301,41 @@ watch(
         }
     }
 );
+
+const showPreview = ref(false)
+const currentIndex = ref(0);
+
+const onPreviewChange = (index) => {
+  currentIndex.value = index;
+};
+const imageList = [
+  {
+    url: "/imgs/gabxftp.jpg",
+  },
+];
+const srcList = imageList.map(i => i.url);
+const openGuidePreview = () => {
+  showPreview.value = true;
+};
 </script>
 <style lang="scss" scoped>
+.demo-image__error .el-image {
+  max-width: 300px;
+  max-height: 200px;
+  width: 100%;
+}
+
+.image-desc {
+  position: fixed;
+  left: 50%;
+  top: 20%;
+  transform: translateX(-50%);
+  max-width: 70%;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 14px;
+  border-radius: 6px;
+  text-align: center;
+}
 </style>

src/components/data/gj-import.vue

@@ -168,6 +168,24 @@
                 </el-result>
             </template>
         </div>
+        <div class="demo-image__error" flex gap-2>
+        <span class="link pointer" @click="openGuidePreview">
+          导入模板已兼容国家信访平台的台账，在国家信访平台导出后直接在此处导入。
+        </span>
+        <el-image-viewer
+            v-if="showPreview"
+            show-progress
+            :url-list="srcList"
+            @close="showPreview = false"
+            @switch="onPreviewChange"
+        >
+          <!-- 底部说明 -->
+          <div class="image-desc">
+            {{ imageList[currentIndex]?.desc }}
+          </div>
+        </el-image-viewer>
+      </div>
+
         <footer class="flex end mt-20 v-center">
             <el-button size="large" @click="handlePrev" v-if="activeStep !== 3 && activeStep !== 0"
                 >上一步</el-button
@@ -257,7 +275,43 @@ watch(
     }
 );
 
+const showPreview = ref(false)
+const currentIndex = ref(0);
+
+const onPreviewChange = (index) => {
+  currentIndex.value = index;
+};
+const imageList = [
+  {
+    url: "/imgs/5.jpg",
+    desc: "步骤一：下载并填写 Excel 模板",
+  },
+];
+const srcList = imageList.map(i => i.url);
+const openGuidePreview = () => {
+  // showPreview.value = true;
+};
 const router = useRouter();
 </script>
 <style lang="scss" scoped>
+.demo-image__error .el-image {
+  max-width: 300px;
+  max-height: 200px;
+  width: 100%;
+}
+
+.image-desc {
+  position: fixed;
+  left: 50%;
+  top: 20%;
+  transform: translateX(-50%);
+  max-width: 70%;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 14px;
+  border-radius: 6px;
+  text-align: center;
+}
+
 </style>

src/views/data/Gabxf.vue

@@ -268,6 +268,7 @@
             >
             </el-pagination>
         </div>
+      <p>公安信访综合信息系统数据，定期手动导入该平台台账，作为问题线索数据支持下发核查办理。</p>
     </div>
 
     <data-gab-import

src/views/data/Gjxf.vue

@@ -258,6 +258,7 @@
             >
             </el-pagination>
         </div>
+      <p> 国家信访平台数据，定期手动导入该平台台账，作为问题线索数据支持下发核查办理 </p>
     </div>
 
     <data-gj-import v-model="show" @close="show = false" @update="getList" />

src/views/data/ImportRecords.vue

@@ -63,6 +63,7 @@
             >
             </el-pagination>
         </div>
+      <p>展示本人导入的线索台账，记录定期导入的数据来源及数据量</p>
     </div>
 </template>
 <script setup>

src/views/data/Mailbox.vue

@@ -148,6 +148,7 @@
             >
             </el-pagination>
         </div>
+      <p>局长信箱即接即办平台数据，每天自动同步该平台数据，纳入大屏统计。</p>
     </div>
 
     <el-dialog v-model="detailShow" title="信访详情" width="50vw">

src/views/data/PoliceMeeting.vue

@@ -126,6 +126,7 @@
         >
         </el-pagination>
       </div>
+      <p>长沙警务评议系统数据，每天自动同步该平台数据，自动下发不满意样本进行核查办理。</p>
     </div>
 </template>
 <script lang="ts" setup>

src/views/data/VideoInspection.vue

@@ -349,6 +349,7 @@
                 </div>
             </el-tab-pane>
         </el-tabs>
+      <p>网上督察系统数据，自动同步该平台数据，人工筛查后进行问题下发核查办理。</p>
     </div>
 
     <el-dialog