综合管理大屏公告更换组件。

src/components/ShowScroll/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  scrollRef: {
+    type: [Object, null],
+    required: true,
+  },
+  innerRef: {
+    type: [Object, null],
+    required: true,
+  },
+});
+const now = ref(0);
+const max = ref(0);
+const scrollContainer = ref(null);
+const innerRefs = ref(null);
+const setActive = (duration) => {
+  if (innerRefs.value.clientHeight > props.scrollRef.wrapRef.clientHeight) {
+    max.value =
+      innerRefs.value.clientHeight - props.scrollRef.wrapRef.clientHeight + 20;
+    inputSlider(duration);
+  }
+};
+const inputSlider = (duration1) => {
+  const scrollAmountPerSecond = window.innerHeight * 0.07; // 每秒滚动的距离
+  const totalScrollDistance = max.value; // 内容的总高度
+  const duration =
+    (totalScrollDistance / scrollAmountPerSecond) * duration1 * 1000; // 动画总时长（毫秒）
+
+  let startTime;
+
+  function animate(time) {
+    if (!startTime) startTime = time;
+    const elapsed = time - startTime;
+
+    // 计算当前位置
+    const progress = Math.min(elapsed / duration, 1);
+    now.value = progress * totalScrollDistance;
+    props.scrollRef.setScrollTop(now.value);
+
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    } else {
+      now.value = 0; // 动画结束后重置位置
+      props.scrollRef.setScrollTop(now.value);
+
+      // 重置起始时间并重新开始动画
+      startTime = time;
+      requestAnimationFrame(animate);
+    }
+  }
+
+  requestAnimationFrame(animate); // 启动动画
+};
+nextTick(() => {
+  scrollContainer.value = props.scrollRef;
+  innerRefs.value = props.innerRef;
+});
+defineExpose({
+  setActive,
+});
+</script>
+
+<style scoped></style>

src/views/screens/screen-components/WeiDianZiCheJianGongGao.vue

@@ -1,11 +1,28 @@
 <template>
   <div class="screen-common-component">
     <ScreenComHeader :module-id="moduleId" title="微电子车间公告" />
-    <dv-scroll-board
-      :config="config"
-      style="width: 100%; height: calc(100% - 32px)"
-      @mouseover="tableHover"
-    />
+    <ShowScroll
+      ref="ShowScrollRef1"
+      :scrollRef="scrollbarRef1"
+      :innerRef="innerRef1"
+      class="message-container"
+    >
+      <el-scrollbar ref="scrollbarRef1" class="message-scroll">
+        <div ref="innerRef1" class="message-scroll">
+          <div
+            class="message-row"
+            v-for="(item, index) in taskRateArray"
+            :key="index"
+          >
+            <div class="message-title">
+              <span v-text="item.title"></span>
+              <span v-text="item.updateTime"></span>
+            </div>
+            <div id="m-g-g-content-box" v-html="item.content"></div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </ShowScroll>
   </div>
 </template>
 
@@ -26,70 +43,105 @@ const props = defineProps({
   },
 });
 const bigScreenData: any = inject("bigScreenData");
-const bsFS = bigScreenData.value.fontSize * 1.5;
+const bsFS = bigScreenData.value.fontSize * 2;
+const bsFSLH = bigScreenData.value.fontSize * 2 + 5 + "px";
+
+const taskRateArray = ref<any[]>([]);
 onMounted(async () => {
   let res = await microelectronicWorkshopNotice();
-  if (res.data.length > 0) {
-    let bigData: any[] = [];
-    res.data.forEach((item: any) => {
-      let row = [
-        `<div  style='font-size:${bigScreenData.value.fontSize * 2}px;width: 100%;height: 100%;'>
-            <div style="display: flex;align-items: center;justify-content: space-between;height: 60px">
-                <span style="color: blue;font-size:150%;">${item.title}</span>
-            <span>${item.updated}</span>
-            </div>
-            <div id="scroll-table-id" style="word-break: break-all;white-space: normal;display: flex;flex-direction: column;align-items: start;justify-content: start;width: 100%;height: 100%;overflow: hidden;font-size: ${bigScreenData.value.fontSize * 2}px;line-height: ${bigScreenData.value.fontSize * 2 + 5}px">
-                ${item.content}
-            </div>
-        </div>`,
-      ];
-      bigData.push(row);
-    });
+  taskRateArray.value = [
+    {
+      title: "微电子车间公告",
+      content:
+        "多发点发的哦哦九点多奥迪倨傲道具哦爱的按揭房够咖啡豆IV好分的局拍的饭局怕对方飓风；阿道夫哦阿道夫 ",
+      updateTime: "2022-03-15",
+    },
+    {
+      title: "微电子车间公告",
+      content:
+        "多发点发的哦哦九点多奥迪倨傲道具哦爱的按揭房够咖啡豆IV好分的局拍的饭局怕对方飓风；阿道夫哦阿道夫 ",
+      updateTime: "2022-03-15",
+    },
+    {
+      title: "微电子车间公告",
+      content:
+        "多发点发的哦哦九点多奥迪倨傲道具哦爱的按揭房够咖啡豆IV好分的局拍的饭局怕对方飓风；阿道夫哦阿道夫 ",
+      updateTime: "2022-03-15",
+    },
+    {
+      title: "微电子车间公告",
+      content:
+        "多发点发的哦哦九点多奥迪倨傲道具哦爱的按揭房够咖啡豆IV好分的局拍的饭局怕对方飓风；阿道夫哦阿道夫 ",
+      updateTime: "2022-03-15",
+    },
+    {
+      title: "微电子车间公告",
+      content:
+        "多发点发的哦哦九点多奥迪倨傲道具哦爱的按揭房够咖啡豆IV好分的局拍的饭局怕对方飓风；阿道夫哦阿道夫 ",
+      updateTime: "2022-03-15",
+    },
+  ];
 
-    config.value = {
-      data: bigData,
-      rowNum: 1,
-      // index: true,
-      // columnWidth: [50],
-      waitTime: 5000,
-      align: ["left"],
-      carousel: "page",
-      click: (row: any, index: number) => {
-        console.log("mouseover", row, index);
-      },
-    };
-  }
+  nextTick(() => {
+    ShowScrollRef1.value.setActive(3);
+  });
 });
 
 const tableHover = (data: any) => {
   // console.log("mouseover", data.row[data.columnIndex]);
 };
+
+const scrollbarRef1 = ref(null);
+const ShowScrollRef1 = ref(null);
+const innerRef1 = ref(null);
 </script>
 
 <style lang="scss" scoped>
-.message-row {
+.message-container {
   width: 100%;
-  height: 60px;
-  border: 1px solid red;
+  height: calc(100% - 25px);
 }
-.scroll-table-id {
-  p {
-    font-size: 14px;
+.message-scroll {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+.message-row {
+  width: 100%;
+  overflow: hidden;
+
+  color: white;
+  font-size: v-bind("bsFS");
+  word-break: break-all;
+  margin-bottom: 15px;
+  border-bottom: 1px solid gray;
+  .message-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    line-height: v-bind("bsFSLH");
+    span {
+      line-height: v-bind("bsFSLH");
+    }
   }
 }
 </style>
 
 <style lang="scss">
-#scroll-table-id {
-  font-size: v-bind("bsFS"); /* 示例值，按需调整 */
+#m-g-g-content-box {
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  width: 100%;
+  overflow: hidden;
+  line-height: v-bind("bsFSLH");
+  word-break: break-all;
+  font-size: v-bind("bsFS");
 }
 
-#scroll-table-id h1 {
-  font-size: v-bind("bsFS") !important; /* 使用!important覆盖用户样式 */
-  margin: 0;
-}
-#scroll-table-id p {
-  font-size: v-bind("bsFS") !important; /* 使用!important覆盖用户样式 */
-  margin: 0;
+#container * {
+  font-size: inherit;
+  line-height: inherit; /* 强制继承 */
 }
 </style>