系统页面通知

src/layout/HeaderV2/ScrollNotifications.vue

@@ -1,77 +1,70 @@
 <template>
-  <transition name="el-zoom-in-center">
-    <div class="announcement" v-show="data.systemUpdatesMessage || data.scrollingMessages">
-      <el-popover :width="500">
-        <div v-if="data.systemUpdatesMessage">
-          系统更新通知:
-          <span style="color: red;text-decoration: underline">
+  <div class="announcement">
+    <el-popover :width="500">
+      <div v-if="data.systemUpdatesMessage">
+        系统更新通知:
+        <span style="color: red;text-decoration: underline">
           {{ data.systemUpdatesMessage }}
           </span>
-          <br>
-          <span style="color: red">
+        <br>
+        <span style="color: red">
           <span class="red-point">
             注意
           </span>
             系统更新期间请勿操作
           </span>
-        </div>
-        {{ data.scrollingMessages }}
-        <template #reference>
-          <div class='ad' ref="adRef">
-            <div ref="scrollRef" :style=" {
-
-            }">
-              {{
-                data.systemUpdatesMessage ? '系统更新通知:' + data.systemUpdatesMessage : data.systemUpdatesMessage
-              }}
-              {{ data.scrollingMessages }}
-            </div>
+      </div>
+      {{ data.scrollingMessages }}
+      <template #reference>
+        <div class='ad' ref="adRef" :style="scrollStyle">
+          <div ref="scrollRef" class="scroll">
+            {{
+              data.systemUpdatesMessage ? '系统更新通知:' + data.systemUpdatesMessage : data.systemUpdatesMessage
+            }}
+            {{ data.scrollingMessages }}
+          </div>
+          <div class="scroll" v-if="whetherToScroll">
+            {{
+              data.systemUpdatesMessage ? '系统更新通知:' + data.systemUpdatesMessage : data.systemUpdatesMessage
+            }}
+            {{ data.scrollingMessages }}
           </div>
-        </template>
-      </el-popover>
-    </div>
-  </transition>
+        </div>
+      </template>
+    </el-popover>
+  </div>
 </template>
 
 <script setup name='ScrollNotifications' lang="ts">
-import {setCallback} from "@/utils/websocket";
-import {getSystemAnnouncement} from "@/api/public-api";
-import {ref, watch, onMounted, Ref, nextTick} from "vue";
+
+import {ref, onMounted, Ref, nextTick} from "vue";
 import {$ref} from "vue/macros";
 
-let data = $ref({
-  systemUpdatesMessage: '',
-  scrollingMessages: ''
+const props = defineProps({
+  data: Object
 })
 
-let isShow = $ref(false)
 
 const scrollRef: Ref<HTMLElement> = ref(null)
 const adRef: Ref<HTMLElement> = ref(null)
 
-let scrollStyle: object = $ref()
+let scrollStyle: object = $ref({
+  '--xc-translateX': 0,
+})
+let whetherToScroll = $ref(false)
+let marginRight = 40
 
-watch(() => data, async () => {
-  // isShow = (data.systemUpdatesMessage || data.scrollingMessages)
+onMounted(async () => {
   await nextTick()
   let width = scrollRef.value?.clientWidth
   if (width >= 220) {
-    adRef.value.innerHTML += adRef.value.innerHTML
-    console.log('需要滚动')
+    scrollRef.value.style.marginRight = '40px'
+    whetherToScroll = true
+    await nextTick()
+    scrollStyle['--xc-translateX'] = -(width + marginRight) + 'px'
   }
-}, {deep: true, immediate: true})
-
-
-onMounted(() => {
-  setCallback("systemAnnouncement", ({data: res}) => {
-    data = res
-  })
-
-  getSystemAnnouncement().then((res) => {
-    data = res
-  })
-
 })
+
 </script>
 
 <style scoped lang="scss">
@@ -92,13 +85,12 @@ onMounted(() => {
 .announcement {
   display: flex;
   justify-content: center;
-  overflow: hidden;
-  padding: 5px;
+  align-items: center;
+  margin-left: 5px;
 
   .ad {
     width: max-content;
     max-width: 220px;
-    //overflow: hidden;
     align-items: center;
     display: flex;
     border-radius: 8px;
@@ -109,8 +101,12 @@ onMounted(() => {
     cursor: pointer;
     padding: 5px;
     white-space: nowrap;
-    animation: move 8s linear infinite normal;
-    animation-fill-mode: forwards;
+    overflow: hidden;
+
+    .scroll {
+      animation: move 8s linear infinite normal;
+      animation-fill-mode: forwards;
+    }
   }
 
   @keyframes move {
@@ -118,7 +114,7 @@ onMounted(() => {
       transform: translateX(0px);
     }
     100% {
-      transform: translateX(-100px);
+      transform: translateX(var(--xc-translateX));
     }
   }
 

src/layout/HeaderV2/ToolInfoBar.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="tool_info_bar">
-    <div>
-      <scroll-notifications/>
+
+    <!--        :style="{
+                width: (data.scrollingMessages || data.systemUpdatesMessage) ? 'max-content' : '40px'
+            }"-->
+    <div class="scroll-notifications">
+      <i class="iconfont icon-tongzhi"/>
+      <scroll-notifications :data="data" v-if="  (data.scrollingMessages || data.systemUpdatesMessage)"/>
     </div>
     <!-- 快捷功能按钮 -->
     <div class="function-list">
+
+
       <div class="function-list-item">
         <Download/>
       </div>
@@ -30,7 +37,7 @@
 </template>
 
 <script setup name='ToolInfoBar' lang="ts">
-import {computed, reactive} from 'vue'
+import {computed, onMounted, reactive} from 'vue'
 import {useStore} from 'vuex'
 import Download from './function-list/download.vue'
 import Message from './function-list/message.vue'
@@ -40,14 +47,13 @@ import Theme from './function-list/theme.vue'
 import PasswordLayer from './PasswordLayer.vue'
 import UserInfo from "./function-list/UserInfo.vue";
 import ScrollNotifications from "./ScrollNotifications.vue";
+import {setCallback} from "@/utils/websocket";
+import {getSystemAnnouncement} from "@/api/public-api";
+import {$ref} from "vue/macros";
+import sleep from "../../utils/sleep";
 
 const store = useStore()
 
-const userInfo = computed(() => {
-  return store.getters['user/info']
-})
-
-
 const layer = reactive({
   show: false,
   showButton: true,
@@ -61,6 +67,23 @@ const loginOut = () => {
   store.dispatch('user/loginOut')
 }
 
+let data = $ref({
+  systemUpdatesMessage: '',
+  scrollingMessages: ''
+})
+
+onMounted(() => {
+  setCallback("systemAnnouncement", async ({data: res}) => {
+    data.systemUpdatesMessage = null
+    data.scrollingMessages = null
+    await sleep(500)
+    data = res
+  })
+  getSystemAnnouncement().then((res) => {
+    data = res
+  })
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -70,6 +93,20 @@ const loginOut = () => {
   width: 100%;
 }
 
+.scroll-notifications {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  i {
+    margin: 0 7px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgb(245, 245, 245);
+  }
+}
 
 .function-list {
   display: flex;