首页 - 政治生日轮播当月数据

ruoyi-admin/src/main/java/com/ruoyi/web/controller/branch/TBranchMemberController.java

@@ -39,6 +39,16 @@ public class TBranchMemberController extends BaseController
     @Autowired
     private ISysUserService userService;
 
+    /**
+     * 查询支部成员政治生日列表
+     */
+    @PreAuthorize("@ss.hasPermi('branch:member:list')")
+    @GetMapping("/listPoliticalBirthday")
+    public AjaxResult listPoliticalBirthday(TBranchMember tBranchMember)
+    {
+        return AjaxResult.success(tBranchMemberService.selectPoliticalBirthdayList(tBranchMember));
+    }
+
     /**
      * 查询支部成员管理列表
      */

ruoyi-system/src/main/java/com/ruoyi/branch/mapper/TBranchMemberMapper.java

@@ -19,6 +19,14 @@ public interface TBranchMemberMapper
      */
     public TBranchMember selectTBranchMemberByMemberId(Long memberId);
 
+    /**
+     * 查询支部成员政治生日列表
+     *
+     * @param tBranchMember 支部成员管理
+     * @return 支部成员管理集合
+     */
+    public List<TBranchMember> selectPoliticalBirthdayList(TBranchMember tBranchMember);
+
     /**
      * 查询支部成员管理列表
      * 

ruoyi-system/src/main/java/com/ruoyi/branch/service/ITBranchMemberService.java

@@ -19,6 +19,14 @@ public interface ITBranchMemberService
      */
     public TBranchMember selectTBranchMemberByMemberId(Long memberId);
 
+    /**
+     * 查询支部成员政治生日列表
+     *
+     * @param tBranchMember 支部成员管理
+     * @return 支部成员管理集合
+     */
+    public List<TBranchMember> selectPoliticalBirthdayList(TBranchMember tBranchMember);
+
     /**
      * 查询支部成员管理列表
      * 

ruoyi-system/src/main/java/com/ruoyi/branch/service/impl/TBranchMemberServiceImpl.java

@@ -34,6 +34,19 @@ public class TBranchMemberServiceImpl implements ITBranchMemberService
         return tBranchMemberMapper.selectTBranchMemberByMemberId(memberId);
     }
 
+    /**
+     * 查询支部成员政治生日列表
+     *
+     * @param tBranchMember 支部成员管理
+     * @return 支部成员管理集合
+     */
+    @Override
+    @DataScope(deptAlias = "d", userAlias = "u")
+    public List<TBranchMember> selectPoliticalBirthdayList(TBranchMember tBranchMember)
+    {
+        return tBranchMemberMapper.selectPoliticalBirthdayList(tBranchMember);
+    }
+
     /**
      * 查询支部成员管理列表
      * 

ruoyi-system/src/main/resources/mapper/branch/TBranchMemberMapper.xml

@@ -70,6 +70,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             left join sys_post p on p.post_id = up.post_id
     </sql>
 
+    <select id="selectPoliticalBirthdayList" parameterType="TBranchMember" resultMap="TBranchMemberResult">
+        <include refid="selectTBranchMemberVo"/>
+        where u.DEL_FLAG = 0
+        and extract(month from u.PARTY_ENTRY_TIME) = extract(month from sysdate)
+        <!-- 数据范围过滤 -->
+        ${params.dataScope}
+    </select>
+
     <select id="selectTBranchMemberList" parameterType="TBranchMember" resultMap="TBranchMemberResult">
         <include refid="selectTBranchMemberVo"/>
         <where>  

ruoyi-ui/src/api/branch/member.js

@@ -1,5 +1,14 @@
 import request from '@/utils/request'
 
+// 查询支部成员管理列表
+export function listPoliticalBirthday(query) {
+  return request({
+    url: '/branch/member/listPoliticalBirthday',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询支部成员管理列表
 export function listMember(query) {
   return request({

ruoyi-ui/src/views/dashboard/BrithChart.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <div class="text-container" :style="{height:height,width:width}">
+      <ul class="allBirth">
+        <li v-for="(item,index) in politicalBirthdayList" class="info">
+          <svg-icon icon-class="dangao" class="dangao"></svg-icon>
+          <span style="padding-left: 20px">{{item.nickName}}</span>
+          <span style="padding-left: 20px">{{item.partyEntryTime}}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { listPoliticalBirthday } from "@/api/branch/member";
+
+  const totalDuration = 2000;
+
+  export default {
+    name: "BrithChart",
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '210px'
+      }
+    },
+    data() {
+      return {
+        // 查询参数
+        queryParams: {},
+        // 政治生日列表
+        politicalBirthdayList: null,
+      }
+    },
+    created() {
+      this.listPoliticalBirthday();
+    },
+    methods: {
+      /** 查询政治生日列表 */
+      listPoliticalBirthday() {
+        listPoliticalBirthday(this.queryParams).then(response => {
+          this.politicalBirthdayList = response.data;
+          //判断是否需要滚动
+          if (this.politicalBirthdayList.length > 4) {
+            //设置文字滚动一轮时间
+            let elem = document.querySelector('.allBirth');
+            let state = elem.style['animation'];
+            let time = this.politicalBirthdayList.length * 2
+            elem.style['animation'] = 'myMove ' + time + 's linear infinite';
+            let state1 = elem.style['animation-fill-mode'];
+            elem.style['animation-fill-mode'] = 'forwards';
+            //设置文字无缝滚动高度
+            let param = this.politicalBirthdayList.length * 50
+            let myFirstkeyframes = "@keyframes myMove{0% {transform: translateY(200px);}100% {transform: translateY(-" + param +"px);}}";
+            let style = document.createElement("style");
+            style.setAttribute("type", "text/css");
+            document.head.appendChild(style);
+            const sheet = style.sheet;
+            sheet.insertRule(myFirstkeyframes, 0);
+          }
+        });
+      },
+    }
+  }
+</script>
+
+<style>
+  .text-container {
+    line-height: 30px;
+    overflow: hidden;
+  }
+
+  .dangao {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .info {
+    font-weight:bold;
+    list-style: none;
+    display: flex;
+    margin: 10px 0 0 0;
+    align-items: center;     /* 垂直居中 */
+    border-radius:5px 5px 5px 5px ;
+    /*border: 2px solid rgba(41, 107, 155, 0.71);*/
+    background-color: transparent;
+  }
+
+  .allBirth {
+    margin: -10px 0 0 0;
+    padding: 0 20px 0 20px;
+    /*animation: myMove 10s linear infinite;
+    animation-fill-mode: forwards;*/
+  }
+
+  /*文字无缝滚动*/
+  /*@keyframes myMove {
+    0% {
+      transform: translateY(200px);
+    }
+    100% {
+      transform: translateY(-300px);
+    }
+  }*/
+
+  /*文字停顿滚动*/
+  @keyframes myMove2 {
+    0% {
+      transform: translateY(0);
+    }
+    10% {
+      transform: translateY(-30px);
+    }
+    20% {
+      transform: translateY(-30px);
+    }
+    30% {
+      transform: translateY(-60px);
+    }
+    40% {
+      transform: translateY(-60px);
+    }
+    50% {
+      transform: translateY(-90px);
+    }
+    60% {
+      transform: translateY(-90px);
+    }
+    70% {
+      transform: translateY(-120px);
+    }
+    80% {
+      transform: translateY(-120px);
+    }
+    90% {
+      transform: translateY(-150px);
+    }
+    100% {
+      transform: translateY(-150px);
+    }
+  }
+
+  .info span {
+    padding-top: 5px;
+  }
+</style>

ruoyi-ui/src/views/index.vue

@@ -50,7 +50,7 @@
         <el-card class="update-log">
           <div slot="header" class="clearfix">
         <span class="title">
-          政治生日
+          先进风采
         </span>
           </div>
           <div class="body">
@@ -76,27 +76,14 @@
       <el-col :xs="24" :sm="24" :md="12" :lg="8">
         <el-card class="update-log">
           <div slot="header" class="clearfix">
-        <span class="title">
-          先进风采
-        </span>
+            <span class="title">
+              政治生日
+            </span>
           </div>
           <div class="body">
-            <p>
-              <a class="link">让党旗在疫情防控一线高高飘扬...</a>
-              <span class="date">2022-05-10</span>
-            </p>
-            <p>
-              <a class="link">我校王昕、李新宁作为“四进”攻坚工作组...</a>
-              <span class="date">2022-04-04</span>
-            </p>
-            <p>
-              <a class="link">“第一书记”帮包村客人来我校赠送锦旗</a>
-              <span class="date">2021-05-31</span>
-            </p>
-            <p>
-              <a class="link">我校第三轮“第一书记”载誉归来</a>
-              <span class="date">2019-04-25</span>
-            </p>
+            <div class="chart-wrapper">
+              <brith-chart />
+            </div>
           </div>
         </el-card>
       </el-col>
@@ -105,8 +92,11 @@
 </template>
 
 <script>
+import BrithChart from "./dashboard/BrithChart";
+
 export default {
   name: "Index",
+  components: { BrithChart },
   data() {
     return {
       urls: [
@@ -115,13 +105,10 @@ export default {
         'https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2022/6/23/1655955351125_157.jpg'
       ],
       // 版本号
-      version: "3.8.5"
+      version: "3.8.5",
     };
   },
   methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
-    }
   }
 };
 </script>
@@ -224,5 +211,23 @@ img{
   max-width: 100%;
   max-height: 100%;
 }
+
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
 </style>