Merge branch 'liucan' into 'main'

fix:数据展示页面添加引导导出提示

See merge request !36

src/layout/components/AppMain.vue

 <script setup lang="ts">
-import { ElNotification } from "element-plus";
-import { Manager, Socket } from "socket.io-client";
-import { computed, onMounted, onUnmounted, ref } from "vue";
-import { useRoute } from "vue-router";
+import { ElNotification } from 'element-plus'
+import { Manager, Socket } from 'socket.io-client'
+import { computed, h, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
-const route = useRoute();
-const key = computed(() => route.path);
+const route = useRoute()
+const key = computed(() => route.path)
 
-const socket = ref<Socket | null>(null);
+const socket = ref<Socket | null>(null)
 
 //错误消息通知
 const handleErrorMsgNotify = () => {
   //websocket连接
-  const manager = new Manager(import.meta.env.VITE_WEBSOCKET_API);
-  socket.value = manager.socket("/");
+  const manager = new Manager(import.meta.env.VITE_WEBSOCKET_API)
+  socket.value = manager.socket('/')
   //收到错误通知
-  socket.value.on("error_message", onErrorMsg);
-};
+  socket.value.on('error_message', onErrorMsg)
+}
 
 //错误消息处理
 const onErrorMsg = ({ message }: { message: any }) => {
   ElNotification({
-    title: "爬虫错误提示",
-    message,
-    type: "error",
-  });
-};
+    title: '爬虫错误提示',
+    message: h('i', { style: 'color: red' }, message),
+    type: 'error'
+  })
+}
 
 onMounted(() => {
-  handleErrorMsgNotify();
-});
+  handleErrorMsgNotify()
+})
 
 onUnmounted(() => {
   if (socket.value) {
-    socket.value.disconnect();
+    socket.value.disconnect()
   }
-});
+})
 </script>
 
 <template>
@@ -51,7 +51,7 @@ onUnmounted(() => {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  background-image: url("@/assets/picture/background1.png");
+  background-image: url('@/assets/picture/background1.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   min-height: calc(100vh - 50px);

src/views/os-dataDisplay/index.vue

@@ -28,58 +28,73 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useRoute } from "vue-router";
-import { useRouter } from "vue-router";
-import ituDataTab from "./components/ituDataTab.vue";
-import stDataTab from "./components/stDataTab.vue";
-import dsnDataTab from "./components/dsnData/dsnTab.vue";
-import esDataTab from "./components/esDataTab.vue";
-import exportDialog from "@/components/Export/index.vue";
-import MenuTitle from "@/components/MenuTitle.vue";
-import exportRecord from "./components/exportRecord.vue";
+import { ref, onMounted, watch, h, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
+import ituDataTab from './components/ituDataTab.vue'
+import stDataTab from './components/stDataTab.vue'
+import dsnDataTab from './components/dsnData/dsnTab.vue'
+import esDataTab from './components/esDataTab.vue'
+import exportDialog from '@/components/Export/index.vue'
+import MenuTitle from '@/components/MenuTitle.vue'
+import exportRecord from './components/exportRecord.vue'
+import { ElNotification } from 'element-plus'
 
-const mode = ref(sessionStorage.getItem("dataDisplayMode") || "DSN数据");
-const showDeleteDialog = ref(false);
-const sizeOptions = ["DSN数据", "ITU数据", "ST数据", "ESA数据"];
-const route = useRoute();
-const router = useRouter();
-const modeValue = ref<any>("数据展示");
+const mode = ref(sessionStorage.getItem('dataDisplayMode') || 'DSN数据')
+const showDeleteDialog = ref(false)
+const sizeOptions = ['DSN数据', 'ITU数据', 'ST数据', 'ESA数据']
+const route = useRoute()
+const router = useRouter()
+const modeValue = ref<any>('数据展示')
 
 //导出记录组件引用
-const expRec = ref<any>(null);
+const expRec = ref<any>(null)
 
 const goToStatus = () => {
   router.push({
-    path: "/osStatus/list",
-  });
-};
+    path: '/osStatus/list'
+  })
+}
 const handleExport = () => {
-  showDeleteDialog.value = true;
-};
-const handleExportConfirm = () => {};
+  showDeleteDialog.value = true
+}
+
+const noticeImpl = ref()
+const handleExportConfirm = () => {}
 onMounted(() => {
   if (route.query.mode) {
-    modeValue.value = route.query.mode;
-    mode.value = modeValue.value;
+    modeValue.value = route.query.mode
+    mode.value = modeValue.value
   }
-});
+
+  noticeImpl.value = ElNotification({
+    title: '温馨提示',
+    message: h('i', { style: 'color: teal' }, '爬虫数据可导出至本地，请点击【导出】按钮执行数据导出'),
+    duration: 0
+  })
+})
 
 //导出记录
 const handleExportRecord = () => {
-  expRec.value.openDialog();
-};
+  expRec.value.openDialog()
+}
 
 watch(
   mode,
   (newVal) => {
-    sessionStorage.setItem("dataDisplayMode", newVal);
-    modeValue.value = sessionStorage.getItem("dataDisplayMode") || "DSN数据";
+    sessionStorage.setItem('dataDisplayMode', newVal)
+    modeValue.value = sessionStorage.getItem('dataDisplayMode') || 'DSN数据'
   },
   {
-    immediate: true,
+    immediate: true
+  }
+)
+
+onUnmounted(() => {
+  if (noticeImpl.value) {
+    noticeImpl.value.close()
   }
-);
+})
 </script>
 
 <style scoped lang="scss">
@@ -109,7 +124,7 @@ watch(
 }
 
 .backStyle {
-  background-image: url("@/assets/picture/back.png");
+  background-image: url('@/assets/picture/back.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   height: 5vh;