增加滚动提示组件

.hbuilderx/launch.json

@@ -4,16 +4,22 @@
     "version" : "0.0",
     "configurations" : [
         {
-            "app-plus" : {
+        	"app-plus" : 
+        	{
         		"launchtype" : "local"
         	},
-            "default" : {
+        	"default" : 
+        	{
+        		"launchtype" : "local"
+        	},
+        	"mp-weixin" : 
+        	{
         		"launchtype" : "local"
         	},
         	"type" : "uniCloud"
         },
         {
-            "playground" : "standard",
+            "playground" : "custom",
             "type" : "uni-app:app-android"
         }
     ]

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>

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;
     }

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 style="width: 200rpx">今日风险</view>
-    <view class="uni-notice-bar" @tap="onViewRiskDetails">
+
-      <uni-notice-bar
+    <!-- <MultiColorNoticeBar :speed="30" backgroundColor="#fff" @tap="onViewRiskDetails">
-        style="height: 100%"
+      <text style="color: red">重要通知：</text>
-        :speed="50"
+      <text style="color: blue">这是一条</text>
-        scrollable
+      <text style="color: green">多彩的</text>
-        :text="noticeContent"
+      <text style="color: orange">滚动公告！</text>
-        :showClose="showClose"
+      <text style="color: orange">滚动公告！</text>
-        :showIcon="showIcon"
+      <text style="color: orange">滚动公告！</text>
-      ></uni-notice-bar>
+      <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>