增加滚动提示组件

2024-12-10 09:19:55 +08:00 · 2024-12-10 09:19:55 +08:00 · 9efd40232f
parent e60bd7ef76
commit 9efd40232f
4 changed files with 217 additions and 33 deletions
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@ -4,16 +4,22 @@
    "version" : "0.0",
    "configurations" : [
        {
-            "app-plus" : {
-                "launchtype" : "local"
-            },
-            "default" : {
-                "launchtype" : "local"
-            },
-            "type" : "uniCloud"
+        	"app-plus" : 
+        	{
+        		"launchtype" : "local"
+        	},
+        	"default" : 
+        	{
+        		"launchtype" : "local"
+        	},
+        	"mp-weixin" : 
+        	{
+        		"launchtype" : "local"
+        	},
+        	"type" : "uniCloud"
        },
        {
-            "playground" : "standard",
+            "playground" : "custom",
            "type" : "uni-app:app-android"
        }
    ]
--- a/components/MultiColorNoticeBar/index.vue
+++ b/components/MultiColorNoticeBar/index.vue
@ -0,0 +1,129 @@
+<template>
+  <view class="notice-bar-container">
+    <view class="notice-bar-wrapper">
+      <view class="notice-bar-content" :style="scrollStyle">
+        <text v-for="(text, index) in textArray" :key="index" :style="textStyle[index]">
+          {{ text }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    textArray: {
+      type: Array,
+      default: () => []
+    },
+    textStyle: {
+      type: Array,
+      default: () => []
+    },
+    scrollSpeed: {
+      type: Number,
+      default: 1 // 滚动速度，越小越快
+    }
+  },
+  data() {
+    return {
+      scrollPosition: 0, // 当前滚动位置
+      totalWidth: 0, // 内容的总宽度
+      containerWidth: 0, // 容器的宽度
+      scrollInterval: null // 滚动定时器
+    }
+  },
+  computed: {
+    // 滚动样式，动态更新 transform
+    scrollStyle() {
+      return {
+        transform: `translateX(${this.scrollPosition}px)`,
+        transition: 'transform 0s linear' // 禁用 transition 来避免跳动
+      }
+    }
+  },
+  mounted() {
+    this.calculateDimensions() // 计算宽度并启动滚动
+  },
+  methods: {
+    // 获取容器和内容的宽度
+    calculateDimensions() {
+      const query = uni.createSelectorQuery().in(this)
+
+      // 获取内容的宽度
+      query
+        .select('.notice-bar-content')
+        .boundingClientRect(rect => {
+          this.totalWidth = rect.width
+          this.startScroll() // 启动滚动
+        })
+        .exec()
+
+      // 获取容器的宽度
+      query
+        .select('.notice-bar-container')
+        .boundingClientRect(rect => {
+          this.containerWidth = rect.width
+        })
+        .exec()
+    },
+
+    // 启动滚动效果
+    startScroll() {
+      let currentPosition = 0 // 从左侧开始
+      const speed = this.scrollSpeed
+      const updateScroll = () => {
+        // 每次滚动更新位置
+        currentPosition += speed
+
+        // 如果滚动到最右边，重置位置
+        if (currentPosition >= this.totalWidth) {
+          currentPosition = 0 // 重置位置到最左边
+        }
+
+        // 更新滚动位置
+        this.scrollPosition = -currentPosition
+      }
+
+      // 启动定时器进行滚动
+      if (this.scrollInterval) {
+        clearInterval(this.scrollInterval) // 清除之前的定时器
+      }
+      this.scrollInterval = setInterval(updateScroll, 20) // 每20ms更新一次位置，滚动速度由 `scrollSpeed` 控制
+    }
+  },
+  destroyed() {
+    if (this.scrollInterval) {
+      clearInterval(this.scrollInterval) // 清理定时器
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.notice-bar-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  background-color: #fff; /* 可根据需要修改背景颜色 */
+}
+
+.notice-bar-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.notice-bar-content {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  height: 56rpx;
+  line-height: 56rpx;
+
+  text {
+    margin-left: 20rpx;
+  }
+}
+</style>
--- a/pages/realName/index/index.vue
+++ b/pages/realName/index/index.vue
@ -115,15 +115,26 @@
      <!-- 风险提示 -->
      <view class="today-warning">
        <image class="warning-img" src="../../../static/images/img-phase-two/index_news.png" mode=""></image>
-        <text>今日风险</text>
+        <text style="margin-right: 20rpx">今日风险</text>
        <view class="uni-notice-bar" @tap="onJumpWorkPlan">
-          <uni-notice-bar
+          <!-- <uni-notice-bar
            style="height: 100%"
            :speed="30"
            background-color="#fff"
            scrollable
            :text="noticeText"
-          ></uni-notice-bar>
+          ></uni-notice-bar> -->
+
+          <MultiColorNoticeBar
+            :textArray="[
+              `高风险:${highRiskNum}`,
+              `中风险:${mediumRiskNum}`,
+              `低风险:${lowRiskNum}`,
+              `作业计划人数:${planPersonNum}`
+            ]"
+            :textStyle="[{ color: '#bc2843' }, { color: '#ffed51' }, { color: '#7dda76' }, { color: '#000000' }]"
+            :scrollSpeed="1"
+          />
        </view>
      </view>

@ -352,6 +363,7 @@ import PieChartsModelRingTwo from './components/pie-charts-model-ring-two'
 import PieChartsModelMan from './components/pie-charts-model-man.vue'
 import PieChartsModelGirl from './components/pie-charts-model-girl.vue'
 import { getHomePageListApi } from '@/api/phaseTwo/homePage'
+import MultiColorNoticeBar from '../../../components/MultiColorNoticeBar'

 export default {
  components: {
@ -360,7 +372,8 @@ export default {
    PieChartsModelRing,
    PieChartsModelRingTwo,
    PieChartsModelMan,
-    PieChartsModelGirl
+    PieChartsModelGirl,
+    MultiColorNoticeBar
  },
  data() {
    return {
@ -1064,7 +1077,7 @@ export default {
  .today-warning {
    margin: 30rpx 0;
    height: 68rpx;
-    padding: 0 30rpx;
+    padding-left: 30rpx;
    display: flex;
    align-items: center;
    border: 1rpx solid #ccc;
@ -1077,8 +1090,10 @@ export default {
    }

    .uni-notice-bar {
-      flex: 1;
+      // flex: 1;
+      width: 65%;
      height: 50rpx;
+      padding-left: 20rpx;
      // line-height: 50rpx;
      // background-color: orange;
    }
--- a/pages/workPlan/index/components/home-notice-bar.vue
+++ b/pages/workPlan/index/components/home-notice-bar.vue
@ -2,22 +2,49 @@
  <view class="notice-container">
    <!-- <uni-notice-bar :showClose="showClose" :showIcon="showIcon" scrollable :text="noticeContent" /> -->
    <image class="warning-img" src="../../../../static/images/img-phase-two/index_news.png" mode=""></image>
-    <text>今日风险</text>
-    <view class="uni-notice-bar" @tap="onViewRiskDetails">
-      <uni-notice-bar
-        style="height: 100%"
-        :speed="50"
-        scrollable
-        :text="noticeContent"
-        :showClose="showClose"
-        :showIcon="showIcon"
-      ></uni-notice-bar>
+    <view style="width: 200rpx">今日风险</view>
+
+    <!-- <MultiColorNoticeBar :speed="30" backgroundColor="#fff" @tap="onViewRiskDetails">
+      <text style="color: red">重要通知：</text>
+      <text style="color: blue">这是一条</text>
+      <text style="color: green">多彩的</text>
+      <text style="color: orange">滚动公告！</text>
+      <text style="color: orange">滚动公告！</text>
+      <text style="color: orange">滚动公告！</text>
+      <text style="color: orange">滚动公告！</text>
+    </MultiColorNoticeBar> -->
+
+    <view @tap="onViewRiskDetails" style="width: 70%">
+      <MultiColorNoticeBar
+        :textArray="[
+          `风险总数：${tfx} `,
+          `可接受风险：${kjs} `,
+          `低风险：${dfx} `,
+          `中风险：${zfx} `,
+          `高风险：${gfx} `,
+          `特高风险：${tfx} `
+        ]"
+        :textStyle="[
+          { color: '#000000' },
+          { color: '#7dda76' },
+          { color: '#7dda76' },
+          { color: '#ffed51' },
+          { color: '#bc2843' },
+          { color: '#bc2843' }
+        ]"
+        :scrollSpeed="1"
+      />
    </view>
+    <!-- <view class="uni-notice-bar" >
+      
+    </view> -->
  </view>
 </template>

 <script>
 import { getTitleRiskApi } from '../../../../api/workPlan/homePage'
+import MultiColorNoticeBar from '../../../../components/MultiColorNoticeBar/index.vue'
+
 export default {
  props: {
    // /* 提示内容 */
@ -36,13 +63,17 @@ export default {
      default: false
    }
  },
+  components: {
+    MultiColorNoticeBar
+  },
  data() {
    return {
      kjs: 0,
      dfx: 0,
      zfx: 0,
      gfx: 0,
-      tfx: 0
+      tfx: 0,
+      amount: 0
    }
  },
  computed: {
@ -74,6 +105,8 @@ export default {
            this.tfx = e.num * 1
          }
        })
+
+        this.amount = this.kjs + this.dfx + +this.zfx + this.gfx + this.tfx
      }
    },
    onViewRiskDetails() {
@ -89,6 +122,7 @@ export default {

 <style lang="scss" scoped>
 .notice-container {
+  width: 100vw;
  height: 56rpx;
  margin: 20rpx 0;
  display: flex;
@ -98,15 +132,15 @@ export default {
  .warning-img {
    width: 48rpx;
    height: 48rpx;
-  }
-
-  .uni-notice-bar {
-    flex: 1;
-    height: 56rpx;
-  }
-
-  text {
    margin: 0 10rpx;
  }
+
+  // .uni-notice-bar {
+  //   flex: 1;
+  // }
+
+  // text {
+  //   margin: 0 10rpx;
+  // }
 }
 </style>