@titaui/pc 1.7.25 → 1.7.29

package/src/components/common-share/index.tsx

@@ -10,9 +10,10 @@ interface Props {
   uid: string;
   shareComponent: any;
   shareImage?:string 
+  defaultContent?:string
 }
 
-const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shareImage }: Props) {
+const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shareImage,defaultContent }: Props) {
   const [showPublish, setShowPublish] = useState(false);
   useEffect(() => {
     if(shareImage){
@@ -33,6 +34,7 @@ const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shar
           closeModal={closeModal}
           key='publish'
           uid={uid}
+          defaultContent={defaultContent}
         />
       )}
     </Queue>
@@ -58,8 +60,9 @@ interface ShareProps {
   visible:boolean;
   onClose: () => void
   shareComponent: (share:(img:string) => void) => any
+  defaultContent?:string
 }
-const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent }) => {
+const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent,defaultContent }) => {
   const [shareImage,setShareImage] = useState<string>()
   const modalRef = useRef<any>();
 
@@ -80,6 +83,7 @@ const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent })
             getModalRef={() => modalRef.current.getRef()}
             uid={uid}
             shareImage={shareImage}
+            defaultContent={defaultContent}
             shareComponent={shareComponent(setShareImage)}
           />
         ) : null}

package/src/components/common-share/publishMblog.tsx

@@ -13,6 +13,7 @@ interface Props {
   getModalRef: Function;
   closeModal: Function;
   uid: any;
+  defaultContent?:string
 }
 
 function PublishMblog({
@@ -20,6 +21,7 @@ function PublishMblog({
   getModalRef,
   closeModal,
   uid,
+  defaultContent="秀一秀我的 OKR"
 }: Props): ReactElement {
   const [file, setFile] = useState({ url: "", pending: true });
   const [status, setStatus] = useState(0);
@@ -43,7 +45,7 @@ function PublishMblog({
         >
           <MBlog
             autoResizing={false}
-            defaultContent="秀一秀我的 OKR"
+            defaultContent={defaultContent}
             submitStatus={status}
             commentsTypeKey={"share-okr" + loginUserId + uid}
             autoFocus

package/src/components/nav-top/components/user-message/components/inform/inform-item.tsx

@@ -38,7 +38,11 @@ const Inform = (props) => {
 		// 	// @ts-ignore
 		// 	Talent.app.vent.trigger("global-daily-detail-pull-screen", feedId);
 		// }
-
+		if(messageType == 135){
+			const redisKey = item.content.match(/redisKey=(\S*?)"/g)[1]
+			// @ts-ignore
+			Talent.app.vent.trigger("open-weekly-report-modal", redisKey);
+		}
 		// 处理合并的消息
 		const isMessageMerging = messageType == 13018 || messageType == 30362 || messageType == 131;
 		if (!isMessageMerging) {

package/src/components/nav-top/components/user-message/index.tsx

@@ -81,7 +81,9 @@ const UserMessage = () => {
 				const blessIndicator = indicators.filter((item) => {
 					return item.type === 'mZhufu';
 				});
-
+				const weeklyReportIndicator = indicators.filter((item) => {
+					return item.type === 'mWeekStatisticIndicator';
+				});
 				if (blessIndicator.length === 1) {
 					const userInfo = getUserInfo();
 					const options = {
@@ -92,6 +94,9 @@ const UserMessage = () => {
 					// @ts-ignore
 					window.util.openGift(options);
 				}
+				if(weeklyReportIndicator.length){
+					window?.Talent.app.vent.trigger('open-weekly-report-modal')
+				}
 			}
 		});
 	};

package/src/components/nav-top/index.tsx

@@ -11,8 +11,7 @@ import "./index.scss";
 import defaultLogo from "./images/logo-white.png";
 import { rpost } from "../../utils/request";
 import Toast from "../toast";
-import { isLocal } from "../../utils/helpers";
-const Logo = isLocal() ? getTenantInfo().Logo : defaultLogo;
+const Logo = getTenantInfo().Logo || defaultLogo;
 const hasOKRApp = getBSGlobal("newNavigation").find(
   (item) => item.appId === 113
 );

package/src/components/weekly-report/card.tsx

@@ -1,124 +1,156 @@
-import React, { forwardRef, ReactElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import html2Canvas from 'html2canvas'
-import Board from './board';
-import { getLoginUserInfo } from '../../utils/helpers';
-import { drawAvatar } from './common-painter/darwAvatar';
-import drawName from './common-painter/drawName';
-import Statistics from './statistics';
-import {isWx} from '../../utils/bs-global'
-import './index.scss';
-import { rpost } from '../../utils/request';
+import React, {
+  forwardRef,
+  ReactElement,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import html2Canvas from "html2canvas";
+import Board from "./board";
+import { getLoginUserInfo } from "../../utils/helpers";
+import { drawAvatar } from "./common-painter/darwAvatar";
+import drawName from "./common-painter/drawName";
+import Statistics from "./statistics";
+import { isWx } from "../../utils/bs-global";
+import "./index.scss";
+import { rpost,rget } from "../../utils/request";
+import { IWeeklyReportData } from "./interface";
 
-const preCls = 'weekly-report-card';
+const preCls = "weekly-report-card";
 
-interface Props {}
-const getImageBase64ByUrl = toUserId => {
-  return rpost('v1')(`okr/share/getBase64Str`, { toUserId })
-    .then(getBase64Str => {
-      return getBase64Str.Data;
-    })
+interface Props {
+  data:IWeeklyReportData
 }
-function Card({}: Props,ref): ReactElement {
+const getImageBase64ByUrl = (toUserId) => {
+  return rpost("v1")(`okr/share/getBase64Str`, { toUserId }).then(
+    (getBase64Str) => {
+      return getBase64Str.Data;
+    }
+  );
+};
+function Card({data}: Props, ref): ReactElement {
   const [avatarSrc, setAvatarSrc] = useState<string>();
-  const [nameSrc,setNameSrc] = useState<string>()
+  const [nameSrc, setNameSrc] = useState<string>();
   const loginUserInfo = getLoginUserInfo();
-  const cardRef = useRef()
-  useImperativeHandle(ref,()=>({
-    getImage: async function(){
-      return new Promise(res => {
-        let shareContent = cardRef.current, //需要截图的包裹的（原生的）DOM 对象
-        // @ts-ignore
-        width = 375,          //获取dom 宽度
-        // @ts-ignore
-        height = 710,        //获取dom 高度
-        canvas = document.createElement("canvas"), //创建一个canvas节点
-        scale = 2;                                 //定义任意放大倍数 支持小数
-        canvas.width = width * scale;              //定义canvas 宽度 * 缩放
-        canvas.height = height * scale;            //定义canvas高度 *缩放
-        // @ts-ignore
-        canvas.style.width = width + "px";
-        // @ts-ignore
-        canvas.style.height = height + "px";
-        // @ts-ignore
-        let opts = {
-          backgroundColor: null, // 背景透明
-          scale: scale,          // 添加的scale 参数
-          canvas: canvas,        // 自定义 canvas
-          logging: false,        // 日志开关，便于查看html2canvas的内部执行流程
-          width: width,          // dom 原始宽度
-          height: height,
-          useCORS: true          // 【重要】开启跨域配置
-        }
-        html2Canvas(cardRef.current as any, opts).then(canvas => {
-          let imgUrl = canvas.toDataURL('image/png'); //得到图片的base64编码数据
-          res(imgUrl)
-        })
-      })
-      
-    }
-  }),[])
+  const cardRef = useRef<any>();
+  useImperativeHandle(
+    ref,
+    () => ({
+      getImage: async function () {
+        return new Promise((res) => {
+          let width = 375, //获取dom 宽度
+            height = 710, //获取dom 高度
+            canvas = document.createElement("canvas"), //创建一个canvas节点
+            scale = 2; //定义任意放大倍数 支持小数
+          canvas.width = width * scale; //定义canvas 宽度 * 缩放
+          canvas.height = height * scale; //定义canvas高度 *缩放
+          // @ts-ignore
+          canvas.style.width = width + "px";
+          // @ts-ignore
+          canvas.style.height = height + "px";
+          // @ts-ignore
+          let opts = {
+            backgroundColor: null, // 背景透明
+            scale: scale, // 添加的scale 参数
+            canvas: canvas, // 自定义 canvas
+            logging: false, // 日志开关，便于查看html2canvas的内部执行流程
+            width: width, // dom 原始宽度
+            height: height,
+            useCORS: true, // 【重要】开启跨域配置
+          };
+          html2Canvas(cardRef.current as any, opts).then((canvas) => {
+            let imgUrl = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+            res(imgUrl);
+          });
+        });
+      },
+    }),
+    []
+  );
   useEffect(() => {
     if (isWx()) {
-      window['WWOpenData'] && window['WWOpenData'].enableCanvasSharing && window['WWOpenData'].enableCanvasSharing()
+      window["WWOpenData"] &&
+        window["WWOpenData"].enableCanvasSharing &&
+        window["WWOpenData"].enableCanvasSharing();
     }
     if (loginUserInfo.UserAvatar.HasAvatar) {
-      getImageBase64ByUrl(loginUserInfo.Id).then((data) =>
-        drawAvatar(
-          {
-            name: loginUserInfo.Name,
-            userId: loginUserInfo.Id,
-            color: loginUserInfo.UserAvatar.Color,
-          },
-          'data:image/jpeg;base64,' + data.obj,
-        ),
-      ).then(setAvatarSrc);
-    }else {
+      getImageBase64ByUrl(loginUserInfo.Id)
+        .then((data) =>
+          drawAvatar(
+            {
+              name: loginUserInfo.Name,
+              userId: loginUserInfo.Id,
+              color: loginUserInfo.UserAvatar.Color,
+            },
+            "data:image/jpeg;base64," + data.obj
+          )
+        )
+        .then(setAvatarSrc);
+    } else {
       drawAvatar(
         {
           name: loginUserInfo.Name,
           userId: loginUserInfo.Id,
           color: loginUserInfo.UserAvatar.Color,
         },
-        '',
+        ""
       ).then(setAvatarSrc);
     }
-    drawName(loginUserInfo.Name,loginUserInfo.Id).then(setNameSrc)
+    drawName(loginUserInfo.Name, loginUserInfo.Id).then(setNameSrc);
     return () => {
       if (isWx()) {
-        window['WWOpenData'] && window['WWOpenData'].disableCanvasSharing && window['WWOpenData'].disableCanvasSharing()
+        window["WWOpenData"] &&
+          window["WWOpenData"].disableCanvasSharing &&
+          window["WWOpenData"].disableCanvasSharing();
       }
-    }
+    };
   }, []);
 
+
+
   return (
-      <div className={preCls + '-content'} ref={cardRef}>
-        <img className={preCls + '__title'} src={require('./img/title.png')} />
-        <div className={preCls + '__date-range'}>6月7日-6月11日</div>
-        <div className={preCls + '__shadow'} />
-        <img className={preCls + '__laba'} src={require('./img/laba.png')}/>
-        <img className={preCls + '__bofang'} src={require('./img/bofang.png')}/>
-        <div className={preCls + '__body'}>
-          <div className={preCls + '__avatar'}>
-            <img src={avatarSrc} />
-          </div>
-          <img className={preCls + '__userName'} src={nameSrc}/>
-          <img className={preCls + '__quote'} src={require('./img/quote.png')} alt="" />
-          <div className={preCls + '__text'}>
-            坚持每周反馈才是真正的优秀真正的优秀
-          </div>
-          <Board percent={80} />
-          <div className={preCls + '__comparison'}>
+    <div className={preCls + "-content"} ref={cardRef}>
+      <img className={preCls + "__title"} src={require("./img/title.png")} />
+      <div className={preCls + "__date-range"}>{data.WeekCycle}</div>
+      <div className={preCls + "__shadow"} />
+      <img className={preCls + "__laba"} src={require("./img/laba.png")} />
+      <img className={preCls + "__bofang"} src={require("./img/bofang.png")} />
+      <div className={preCls + "__avatar"}>
+          <img src={avatarSrc} />
+        </div>
+      <div className={preCls + "__body"}>
+       
+        <img className={preCls + "__userName"} src={nameSrc} />
+        <img
+          className={preCls + "__quote"}
+          src={require("./img/quote.png")}
+          alt=""
+        />
+        <div className={preCls + "__text"}>
+          {data.Quotations}
+        </div>
+        <Board percent={Number(data.Complete)} />
+        <div className={preCls + "__comparison"}>
+          {
+            data.Increase != '0' ? <>
             OKR 完成度
-            <img className={preCls + '__direction'} src={require('./img/up.png')} alt="" />
-            <span style={{color:'#4DC591'}}>20%</span>
-          </div>
-          <div className={preCls + '__colleague'}>
-            恭喜超越了 <span>80%</span> 的同事
-          </div>
-          <Statistics/>
+            <img
+              className={preCls + "__direction"}
+              src={Number( data.Increase) > 0 ? require("./img/up.png") : require('./img/down.png')}
+              alt=""
+            />
+            <span style={{ color: Number( data.Increase) > 0 ? "#4DC591" : '#F05E5E'}}>{Math.abs(Number(data.Increase))}%</span>
+            </> : ''
+          }
+        </div>
+        <div className={preCls + "__colleague"}>
+          {data.PromptLanguage}
         </div>
-        <img className={preCls + '__bottom'} src={require('./img/bottom.png')}/>
+        <Statistics data={data}/>
       </div>
+      <img className={preCls + "__bottom"} src={require("./img/bottom.png")} />
+    </div>
   );
 }
 

package/src/components/weekly-report/img/close.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 31</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="每周推送" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="暂定-员工视角" transform="translate(-871.000000, -106.000000)">
+            <g id="编组-31" transform="translate(871.000000, 106.000000)">
+                <circle id="椭圆形" fill-opacity="0.2" fill="#141C28" cx="16" cy="16" r="16"></circle>
+                <g id="canceled" transform="translate(7.000000, 7.000000)" filter="url(#filter-1)">
+                    <g>
+                        <rect id="矩形" x="0" y="0" width="18" height="18"></rect>
+                        <path d="M4.20533009,3.14466991 L8.978,7.917 L13.7512716,3.14466991 C14.0175382,2.87840335 14.4342019,2.8541973 14.7278134,3.07205176 L14.8119318,3.14466991 C15.104825,3.43756313 15.104825,3.91243687 14.8119318,4.20533009 L14.8119318,4.20533009 L10.038,8.978 L14.8119318,13.7512716 C15.104825,14.0441649 15.104825,14.5190386 14.8119318,14.8119318 C14.5190386,15.104825 14.0441649,15.104825 13.7512716,14.8119318 L8.978,10.038 L4.20533009,14.8119318 C3.93906352,15.0781984 3.52239984,15.1024044 3.22878835,14.88455 L3.14466991,14.8119318 C2.8517767,14.5190386 2.8517767,14.0441649 3.14466991,13.7512716 L3.14466991,13.7512716 L7.917,8.978 L3.14466991,4.20533009 C2.8517767,3.91243687 2.8517767,3.43756313 3.14466991,3.14466991 C3.43756313,2.8517767 3.91243687,2.8517767 4.20533009,3.14466991 Z" id="形状结合" fill="#444444"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/weekly-report/index.scss

@@ -16,6 +16,15 @@
       transform: scale(0.9);
     }
   }
+  &__close {
+    position: absolute;
+    right: -42px;
+    top: 0;
+    width: 32px;
+    height: 32px;
+    background-image: url('./img/close.svg');
+    cursor: pointer;
+  }
   &-content {
     display: flex;
     flex-direction: column;
@@ -48,13 +57,21 @@
     border-radius: 12px;
     background-image: url('./img/body.png');
     background-size: 100% 100%;
+    background-position-y: -1px;
   }
   &__avatar {
     position: absolute;
-    left: 129px;
-    top: 17px;
-    border: 3px solid #fff;
+    left: 150px;
+    top: 135px;
+    // border: 2px solid #fff;
+    width: 76px;
+    height: 76px;
+    background-color: #FFF;
     border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
     & > img {
       width: 72px;
       height: 72px;
@@ -84,6 +101,7 @@
     margin: 28px 0;
     max-width: 279px;
     text-align: center;
+    min-height: 52px;
   }
   &__quote {
     position: absolute;
@@ -107,8 +125,10 @@
     }
     &__undone {
       position: absolute;
-      width: 154px;
-      height: 77px;
+      left: -3px;
+      bottom: 50%;
+      width: 160px;
+      height: 80px;
       background-color: rgb(234, 241, 254);
       transform-origin: center bottom;
       transform: rotate(90deg);

package/src/components/weekly-report/index.tsx

@@ -1,50 +1,115 @@
-import React, { ReactElement, useRef,useState } from "react";
+import React, { ReactElement, useRef, useState, useEffect } from "react";
+import classnames from 'classnames'
 import RectBtn from "../button/rect-btn";
-import CommonShare from '../common-share'
+import CommonShare from "../common-share";
 import Card from "./card";
+import {rpost,rget, rput, rdelete} from '../../utils/request'
+import {getQueryString,changeQueryString} from '../../utils/tools'
 import "./index.scss";
 
-interface Props {}
+interface Props {
+  data:any
+}
 
 const preCls = "weekly-report-card";
 
-function WeeklyReportPreview({onShare}){
-  const cardRef = useRef();
+const getImageBase64ByUrl = base64 => {
+  return rpost('v1')(`/okr/share/imageDownLoadDfs`, { 'SharePicLink': base64 })
+    .then(res => {
+      return res.Data;
+    })
+}
+
+function WeeklyReportPreview({ onShare,onClose,data }) {
+  const cardRef = useRef<any>();
+  
+
   return (
-    <>
-    <div style={{ position: "absolute", left: "-999px" }}>
-        <Card ref={cardRef} />
+    <div style={{ position: "relative"}}>
+      <div className={classnames("tu-icon-circle",preCls + "__close")} onClick={onClose}/>
+      <div style={{ position: "absolute", left: "-99999999px" }}>
+        <Card data={data} ref={cardRef} />
       </div>
       <div className={preCls + "-wrapper"}>
-        <Card />
+        <Card data={data}/>
       </div>
       <div className={preCls + "__button-container"}>
         <RectBtn
           className={preCls + "__download"}
           onClick={async () => {
-            const img = await cardRef.current.getImage();
-            const ele = document.createElement("img");
-            ele.src = img;
-            ele.width = 375;
-            ele.style = "position:fixed;z-index:100000;top:0";
-            document.body.appendChild(ele);
+            const img = await cardRef?.current?.getImage();
+            const url = await getImageBase64ByUrl(img.split(',')[1])
+            let a = document.createElement('a');
+            a.href = url.obj;
+            a.download = 'okr.png';
+            a.click()
           }}
         >
           下载图片
         </RectBtn>
-        <RectBtn className={preCls + "__share"} onClick={async () => {
-          const img = await cardRef.current.getImage();
-          onShare(img)
-        }}>分享到动态</RectBtn>
+        <RectBtn
+          className={preCls + "__share"}
+          onClick={async () => {
+            const img = await cardRef.current.getImage();
+            onShare(img);
+          }}
+        >
+          分享到动态
+        </RectBtn>
       </div>
-    </>
-  )
+    </div>
+  );
 }
 
-function WeeklyReportModal({}: Props): ReactElement {
-  const [visible,setVisible] = useState<boolean>()
+function WeeklyReportModal({}: Props) {
+  const [visible, setVisible] = useState<boolean>(!!getQueryString().redisKey);
+  const [redisKey, setRedisKey] = useState<string>(getQueryString().redisKey||null)
+  const [data,setData] = useState<any>()
+  useEffect(() => {
+    window?.Talent?.app.vent.off('open-weekly-report-modal')
+    window?.Talent?.app.vent.on('open-weekly-report-modal',(redisKey)=>{
+      if(visible) return;
+      setRedisKey(redisKey)
+      setVisible(true)
+    })
+    return () => window?.Talent?.app.vent.off('open-weekly-report-modal')
+  }, [])
+
+  useEffect(()=>{
+    if(!visible) return
+    const current = new Date()
+    const dateTimeTicks=(current.getFullYear()+'/'+(current.getMonth()+1)+'/'+current.getDate())
+    let param = `redisKey=${redisKey||null}&dateTimeTicks=${dateTimeTicks||null}`
+    if(data) {
+      setData(null)
+    }
+   
+    rget('v1')('okr/wwsummary/get?'+param).then(res => {
+      if(res.Code == 1){
+        setData(res.Data)
+      }else {
+        setVisible(false)
+      }
+    })
+  },[redisKey,visible])
+
+  useEffect(() => {
+    if(!!getQueryString().redisKey){
+      location.replace(decodeURIComponent(location.href).replace(/&?redisKey=\S*(&|$)/g,''))
+    }
+    if(visible){
+      rdelete('v1')('Indicator/Clear?message_type=0&indicator_type=15')
+    }
+  },[visible])
+  if(!data) return null;
   return (
-    <CommonShare uid={1} visible onClose={()=>setVisible(false)} shareComponent={onShare => <WeeklyReportPreview onShare={onShare}/>}/>
+    <CommonShare
+      uid={new Date().getTime()}
+      visible={visible}
+      onClose={() => setVisible(false)}
+      defaultContent="Show 一下我这周的努力～"
+      shareComponent={(onShare) => <WeeklyReportPreview onShare={onShare} onClose={() => setVisible(false)} data={data}/>}
+    />
   );
 }
 

package/src/components/weekly-report/interface.ts

@@ -0,0 +1,31 @@
+
+export interface IWeeklyReportData {
+  WeekCycle: string;
+  Lnteraction: string;
+  LoveTopNum: string;
+  LoveNum: string;
+  TaskNum: string;
+  PromptLanguage: string;
+  Increase: string;
+  Quotations: string;
+  Complete: string;
+  User: User;
+}
+
+interface User {
+  UserId: number;
+  Name: string;
+  Avatar: Avatar;
+  UserMark?: any;
+}
+
+interface Avatar {
+  Original: string;
+  Small: string;
+  Medium: string;
+  Big: string;
+  Large: string;
+  Normal: string;
+  HasAvatar: boolean;
+  Color?: any;
+}

package/src/components/weekly-report/statistics.tsx

@@ -1,24 +1,25 @@
 import React, { ReactElement } from 'react'
 import classnames from 'classnames'
+import { IWeeklyReportData } from './interface'
 
 interface Props {
-  
+  data:IWeeklyReportData
 }
 const preCls = 'weekly-report-card__statistics'
-function Statistics({}: Props): ReactElement {
+function Statistics({data}: Props): ReactElement {
   return (
     <div className={preCls}>
       <div className={classnames(preCls+'__item',preCls+'__finish')}>
-        <div className={preCls+'__num'}>12</div>
+        <div className={preCls+'__num'}>{data.TaskNum}</div>
         <div className={preCls+'__text'}>完成任务</div>
       </div>
       <div className={classnames(preCls+'__item',preCls+'__praise')}>
-        <div className={preCls+'__num'}>12</div>
+        <div className={preCls+'__num'}>{data.LoveNum}</div>
         <div className={preCls+'__text'}>获得点赞</div>
-        <div className={preCls+'__tips'}>Top1</div>
+        {data.LoveTopNum && data.LoveTopNum != '0' && <div className={preCls+'__tips'}>Top{data.LoveTopNum}</div>}
       </div>
       <div className={classnames(preCls+'__item',preCls+'__communication')}>
-        <div className={preCls+'__num'}>12</div>
+        <div className={preCls+'__num'}>{data.Lnteraction}</div>
         <div className={preCls+'__text'}>参与互动</div>
       </div>
     </div>