Merge branch 'main' of http://47.122.43.22:3000/wjn/mh-lcmk-sms-web

src/components/CustomPages/BI/BI009RiskAnalysis.js

@@ -39,19 +39,19 @@ class BI008RiskAnalysis extends React.Component {
         dataIndex: "NAME",
       },
       {
-        title: "一级风险",
+        title: "重大风险",
         dataIndex: "LEVEL1",
       },
       {
-        title: "二级风险",
+        title: "较大风险",
         dataIndex: "LEVEL2",
       },
       {
-        title: "三级风险",
+        title: "一般风险",
         dataIndex: "LEVEL3",
       },
       {
-        title: "四级风险",
+        title: "低风险",
         dataIndex: "LEVEL4",
       },
     ];
@@ -70,8 +70,6 @@ class BI008RiskAnalysis extends React.Component {
       onlyData: false,
       onComplete: (ret) => {
         if (ret) {
-          console.log(ret);
-          // this.state.retData = ret?.Data.RISKLEVELCOUNTS;
           this.setState({
             retData:ret.Data.RISKLEVELCOUNTS
           })
@@ -97,19 +95,19 @@ class BI008RiskAnalysis extends React.Component {
         this.chart2(
           ret?.Data.AREACOUNTS.filter((t) => t.AREATYPE == 0).slice(0, 10)
         );
-        this.chart3(
-          ret?.Data.AREACOUNTS.filter((t) => t.AREATYPE == 1).slice(0, 10)
-        );
+        // this.chart3(
+        //   ret?.Data.AREACOUNTS.filter((t) => t.AREATYPE == 1).slice(0, 10)
+        // );
         this.chart4(ret?.Data.DATECOUNTS);
       },
     });
   };
   chart1 = () => {
     let showData = [
-      { value: this.state.LEVEL1TOTAL, name: "一级风险" },
-      { value: this.state.LEVEL2TOTAL, name: "二级风险" },
-      { value: this.state.LEVEL3TOTAL, name: "三级风险" },
-      { value: this.state.LEVEL4TOTAL, name: "四级风险" },
+      { value: this.state.LEVEL1TOTAL, name: "重大风险" },
+      { value: this.state.LEVEL2TOTAL, name: "较大风险" },
+      { value: this.state.LEVEL3TOTAL, name: "一般风险" },
+      { value: this.state.LEVEL4TOTAL, name: "低风险" },
     ];
     let chart1s = document.getElementById("chart1");
     let myChart = echarts.init(chart1s);
@@ -219,7 +217,7 @@ class BI008RiskAnalysis extends React.Component {
       let myChart = echarts.init(chart2s);
       myChart.setOption({
         title: {
-          text: "矿山-风险区域统计TOP10",
+          text: "风险区域统计TOP10",
           left: "center",
           top: "2%",
         },
@@ -342,7 +340,7 @@ class BI008RiskAnalysis extends React.Component {
       let myChart = echarts.init(chart3s);
       myChart.setOption({
         title: {
-          text: "选矿-风险区域统计TOP10",
+          text: "风险区域统计TOP10",
           left: "center",
           top: "2%",
         },

src/components/CustomPages/BI/BI013RiskAnalysisModel.js

@@ -110,18 +110,18 @@ class BI013RiskAnalysisModel extends React.Component {
     let showData = [];
     let color = [];
     let allNum = 0;
-    showData.push({ value: this.state.LEVEL1TOTAL, name: "一级" });
-    showData.push({ value: this.state.LEVEL2TOTAL, name: "二级" });
-    showData.push({ value: this.state.LEVEL3TOTAL, name: "三级" });
-    showData.push({ value: this.state.LEVEL4TOTAL, name: "四级" });
+    showData.push({ value: this.state.LEVEL1TOTAL, name: "重大风险" });
+    showData.push({ value: this.state.LEVEL2TOTAL, name: "较大风险" });
+    showData.push({ value: this.state.LEVEL3TOTAL, name: "一般风险" });
+    showData.push({ value: this.state.LEVEL4TOTAL, name: "低风险" });
     showData.map((item) => {
-      if (item.name === "一级") {
+      if (item.name === "重大风险") {
         color.push("#c92a2a");
-      } else if (item.name === "二级") {
+      } else if (item.name === "较大风险") {
         color.push("#ffa94d");
-      } else if (item.name === "三级") {
+      } else if (item.name === "一般风险") {
         color.push("#ffe066");
-      } else if (item.name === "四级") {
+      } else if (item.name === "低风险") {
         color.push("#4285F4");
       }
       allNum = allNum + item.value;

src/components/CustomPages/BI/BI014RiskPerformanceModel.js

@@ -14,7 +14,6 @@ import {
 import echarts from "echarts";
 import moment from "moment";
 import IconFont from "../../../utils/iconFont";
-import { T } from "antd/lib/upload/utils";
 class BI014RiskPerformanceModel extends React.Component {
   constructor(props) {
     super(props);
@@ -62,8 +61,7 @@ class BI014RiskPerformanceModel extends React.Component {
           {
             NAME: ["一级", "二级", "三级", "四级"],
             LEVEL1: [3, 8, 181, 1112],
-          }
-          ,
+          },
           CHARTFXDJ2: [
             { name: "一级", value: 3 },
             { name: "二级", value: 8 },
@@ -267,7 +265,7 @@ class BI014RiskPerformanceModel extends React.Component {
   }
 
   componentDidMount() {
-    this.getBaseInfoData();
+    this.getBaseInfoDataOnline();
   }
 
   //获取数据
@@ -281,15 +279,17 @@ class BI014RiskPerformanceModel extends React.Component {
       payload: json2,
       onlyData: false,
       onComplete: (ret) => {
+        this.state.ret = ret;
         this.chart4(ret?.Data.DATECOUNTS);
         this.chartFXDJ1(ret?.Data.CHARTFXDJ1);
         this.chartFXDJ2(ret?.Data.CHARTFXDJ2);
         this.chartSCDY(ret?.Data.CHARTLIST[0]);
         this.chartFXLB1(ret?.Data.CHARTLIST[1]);
-        this.chartZRDW(ret?.Data.CHARTLIST[2]);
         this.chartCJ(ret?.Data.CHARTLIST[3]);
-        this.chartZYRW1(this.state.ret.Data.CHARTZYRW1);
-        this.chartZYRW2(this.state.ret.Data.CHARTZYRW2);
+        this.chartZRDW(ret?.Data.CHARTLIST[2]);
+        this.chartQY(ret?.Data.CHARTLIST[4]);
+        this.chartZYRW1(ret?.Data.CHARTZYRW1);
+        this.chartZYRW2(ret?.Data.CHARTZYRW2);
       },
     });
   };
@@ -2005,12 +2005,7 @@ class BI014RiskPerformanceModel extends React.Component {
   };
   //显示详情弹窗
   showDetailModal = (formCode) => {
-    var titleTemp =
-      this.state.mineType == 20
-        ? "尾矿库"
-        : this.state.mineType == 10
-          ? "选矿厂"
-          : "露天矿";
+    var titleTemp ="";
     if (formCode == "风险类别1") {
       titleTemp += "风险类别";
       this.chart25(this.state.ret.Data.CHARTLIST[1]);
@@ -2026,17 +2021,17 @@ class BI014RiskPerformanceModel extends React.Component {
     else if (formCode == "生产单元") {
       this.setState({ isShow1: true })
       titleTemp += "生产单元";
-      this.chart21(this.state.ret.Data.CHARTLIST[3], "露天矿", "1", "2", "3", "4");
-      this.chart22(this.state.ret.Data.CHARTLIST[3], "选矿厂", "1", "2", "3", "4");
-      this.chart23(this.state.ret.Data.CHARTLIST[3], "尾矿库", "1", "2", "3", "4");
-      this.chart24(this.state.ret.Data.CHARTLIST[3], "职能部门", "1", "2", "3", "4");
+      this.chart21(this.state.ret.Data.SCDYLIST[0], "露天矿", "1", "2", "3", "4");
+      this.chart22(this.state.ret.Data.SCDYLIST[1], "选矿厂", "1", "2", "3", "4");
+      this.chart23(this.state.ret.Data.SCDYLIST[2], "尾矿库", "1", "2", "3", "4");
+      this.chart24(this.state.ret.Data.SCDYLIST[3], "职能部门", "1", "2", "3", "4");
     } else if (formCode == "层级") {
       this.setState({ isShow1: true })
       titleTemp += "层级";
-      this.chart21(this.state.ret.Data.CHARTLIST[0], "公司", "1", "2", "3", "4");
-      this.chart22(this.state.ret.Data.CHARTLIST[0], "部门", "1", "2", "3", "4");
-      this.chart23(this.state.ret.Data.CHARTLIST[0], "车间", "1", "2", "3", "4");
-      this.chart24(this.state.ret.Data.CHARTLIST[0], "班组", "1", "2", "3", "4");
+      this.chart21(this.state.ret.Data.CJLIST[0], "公司", "1", "2", "3", "4");
+      this.chart22(this.state.ret.Data.CJLIST[1], "部门", "1", "2", "3", "4");
+      this.chart23(this.state.ret.Data.CJLIST[2], "车间", "1", "2", "3", "4");
+      this.chart24(this.state.ret.Data.CJLIST[3], "班组", "1", "2", "3", "4");
     } else if (formCode == "责任单位") {
       this.setState({ isShow1: true })
       titleTemp += "责任单位";

src/components/CustomPages/HM/HM061ShowPrint.js

@@ -51,6 +51,11 @@ class HM061ShowPrint extends React.Component {
                         this.props.data.loadDataDeal(1);
                     }
                     this.onClickApprove(false);
+                    for (let i = 0; i < ret.Nav_Detail.length; i++) {
+                        ret.Nav_Detail.sort((a, b) => {
+                            return a.LEVEL > b.LEVEL ? 1 : -1;
+                        });
+                    }
                     for (let i = 0; i < ret.Nav_Detail.length; i++) {
                         ret.Nav_Detail[i].Nav_Users.sort((a, b) => {
                             return a.ROW_NO > b.ROW_NO ? 1 : -1;

src/components/CustomPages/HM/HM121ShowPrint.js

@@ -121,7 +121,6 @@ class HM121ShowPrint extends React.Component {
                                         return ite.Nav_Facilities.NAME + '  '
                                     }
                                 })}</td> */}
-                            <td colSpan={1} rowSpan={1}>{item.Nav_OperationStep ? item.Nav_OperationStep.NAME : ''}</td>
                             <td colSpan={1} rowSpan={1}>{item.EVALUATE_L}</td>
                             <td colSpan={1} rowSpan={1}>{item.EVALUATE_E}</td>
                             <td colSpan={1} rowSpan={1}>{item.EVALUATE_C}</td>

src/layout/Header.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo ,useEffect} from "react";
+import React, { useState, useMemo, useEffect } from "react";
 import { connect } from "dva";
 import { withRouter } from "dva/router";
 import { Dropdown, Icon, Menu, message, Button, Modal, Input } from "antd";
@@ -8,11 +8,12 @@ import FoUserInfoShow from "../components/MainPage/FoUserInfoShow";
 import FeedbackQuestion from "../components/MainPage/FeedbackQuestion";
 import GuideCanvas from "../components/MainPage/GuideCanvas";
 import IconFont from "../utils/iconFont";
-import { initFilter,requestFullScreenMethod } from "../utils/common";
+import { initFilter, requestFullScreenMethod } from "../utils/common";
 import config from "../config";
 import "./header.less";
 import Option from "./Option";
 import RiskFourPage from "./RiskFour";
+import FullScreenPage from "./FullScreen";
 
 // 投屏
 const DataV = (props) => {
@@ -133,7 +134,7 @@ const SearchBox = (props) => {
     });
     props.history.push({ pathname: `/main/${menu.Node.ID}` });
     setInputVal("");
-    setAutoCompleteData([])
+    setAutoCompleteData([]);
   };
   if (window.navigator.userAgent.indexOf("Windows") < 1) {
     return <span></span>;
@@ -154,7 +155,7 @@ const SearchBox = (props) => {
       //   hasBorder={false}
       //   lists={autoCompleteData}
       // />
-      <Dropdown overlay={overMenu} placement="topLeft" trigger={['click']}>
+      <Dropdown overlay={overMenu} placement="topLeft" trigger={["click"]}>
         <div className="headerInput">
           {/* <Search
             placeholder={"请输入搜索内容"}
@@ -163,7 +164,12 @@ const SearchBox = (props) => {
           /> */}
           <Input
             placeholder="搜索菜单"
-            prefix={<Icon type="search" style={{ color: "#909399" ,fontSize:'18px'}} />}
+            prefix={
+              <Icon
+                type="search"
+                style={{ color: "#909399", fontSize: "18px" }}
+              />
+            }
             onChange={(e) => {
               handleSearchMenu(e);
             }}
@@ -329,8 +335,8 @@ const RiskFourColorOpton = (props) => {
       document.msFullScreen
     );
     if (isFull) {
-    // /
-    }else{
+      // /
+    } else {
       // requestFullScreenMethod(document.body);
       setshowModal(false);
     }
@@ -368,10 +374,11 @@ const RiskFourColorOpton = (props) => {
           type="primary"
           onClick={() => {
             setshowModal(true);
-            requestFullScreenMethod(document.body);     // 进入全屏
+            requestFullScreenMethod(document.body); // 进入全屏
           }}
+          style={{ margin: "0px 36px", display: "flex", alignItems: "center" }}
         >
-          <Icon type='global' className='header__right-icon'></Icon>
+          <Icon type="global" className="header__right-icon"></Icon>
           {/* <IconFont
             type="icon-line-108"
             style={{ fontSize: "22px", color: "#333333", cursor: "pointer" }}
@@ -400,6 +407,94 @@ const RiskFourColorOpton = (props) => {
 const RiskFourColor = withRouter(
   connect(({ login }) => ({ login }))(RiskFourColorOpton)
 );
+
+const FullScreenOpton = (props) => {
+  const [showModal, setshowModal] = useState(false);
+  const getChildCount = (val) => {
+    setshowModal(val);
+  };
+  const [fullScreen, setFullScreen] = useState(false);
+  const [originResizeFunc, setOriginResizeFunc] = useState();
+  const escFunction = () => {
+    let isFull = !!(
+      document.fullscreen ||
+      document.mozFullScreen ||
+      document.webkitIsFullScreen ||
+      document.webkitFullScreen ||
+      document.msFullScreen
+    );
+    if (isFull) {
+      // /
+    } else {
+      // requestFullScreenMethod(document.body);
+      setshowModal(false);
+    }
+  };
+  useEffect(() => {
+    // 监听退出全屏事件 --- chrome 用 esc 退出全屏并不会触发 keyup 事件
+    document.addEventListener(
+      "webkitfullscreenchange",
+      escFunction
+    ); /* Chrome, Safari and Opera */
+    document.addEventListener("mozfullscreenchange", escFunction); /* Firefox */
+    document.addEventListener(
+      "fullscreenchange",
+      escFunction
+    ); /* Standard syntax */
+    document.addEventListener(
+      "msfullscreenchange",
+      escFunction
+    ); /* IE / Edge */
+    return () => {
+      //销毁时清除监听
+      document.removeEventListener("webkitfullscreenchange", escFunction);
+      document.removeEventListener("mozfullscreenchange", escFunction);
+      document.removeEventListener("fullscreenchange", escFunction);
+      document.removeEventListener("MSFullscreenChange", escFunction);
+    };
+  }, []);
+
+  if (window.navigator.userAgent.indexOf("Windows") < 1) {
+    return <div></div>;
+  } else {
+    return (
+      <div>
+        <div
+          type="primary"
+          onClick={() => {
+            setshowModal(true);
+            requestFullScreenMethod(document.body); // 进入全屏
+          }}
+        >
+          <Icon type="alert" className="header__right-icon"></Icon>
+          {/* <IconFont
+            type="icon-line-108"
+            style={{ fontSize: "22px", color: "#333333", cursor: "pointer" }}
+          ></IconFont> */}
+        </div>
+        <Modal
+          title="功能导航"
+          visible={showModal}
+          width="100%"
+          centered={true}
+          onOk={() => {
+            setshowModal(false);
+          }}
+          onCancel={() => {
+            setshowModal(false);
+          }}
+          className="fullScreen"
+        >
+          <FullScreenPage />
+        </Modal>
+      </div>
+    );
+  }
+};
+
+const FullScreen = withRouter(
+  connect(({ login }) => ({ login }))(FullScreenOpton)
+);
 const NavOpton = (props) => {
   const [showModal, setshowModal] = useState(false);
   const getChildCount = (val) => {
@@ -482,7 +577,8 @@ function Header(props) {
       </div>
       {!props.matchLogin ? (
         <div className="header__right">
-         <RiskFourColor/>
+          <RiskFourColor />
+          {window.location.host == "47.122.43.22:7001" || 'localhost:7001' ? <FullScreen /> : ""} 
           <HeaderDataV />
           <HeaderSearch />
           <GuideCode />

src/layout/full.less

@@ -0,0 +1,452 @@
+@font-face {
+  font-family: pangmenzhengdao;
+  src: url("../assets/fonts/pangmenzhengdao.ttf");
+}
+
+@font-face {
+  font-family: "阿里妈妈东方大楷 Regular";
+  font-weight: normal;
+  src: url("../assets/fonts/AlimamaDongFangDaKai-Regular.ttf")
+    format("truetype");
+  font-display: swap;
+}
+@font-face {
+  font-family: "站酷庆科黄油体";
+  font-weight: normal;
+  src: url("../assets/fonts/站酷庆科黄油体.ttf") format("truetype");
+  font-display: swap;
+}
+
+.blackBack {
+  background-image: url("../assets/login/bg.png");
+  width: 100%;
+  // height: calc(100% - 10px); // 进入全屏
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.backImage {
+  background-color: #021428; //021428
+  width: 100%;
+  height: 100%;
+  opacity: 0.9;
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  background-image: url("../assets/layout/full-header.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100px;
+  width: 100%;
+  display: flex;
+  // align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+}
+.headerText {
+  color: #fff;
+  font-size: 32px;
+  //   font-weight: bold;
+  margin-top: 10px;
+  font-family: "pangmenzhengdao";
+}
+.row {
+  // height: calc(65% - 200px);
+  flex: 1;
+  width: 100%;
+}
+.rowTwo {
+  height: 30%;
+  width: 100%;
+}
+.boxleft {
+  height: 100%;
+  // width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.risklevel {
+  height: 60%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.risklevelOne {
+  height: 40%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.risklevelTwo {
+  height: 100%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.riskChange {
+  width: 40%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 20px 5px;
+}
+.riskChangeTwo {
+  width: 60%;
+  height: 100%;
+  padding: 20px 5px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.gradient {
+  background-image: linear-gradient(
+    250deg,
+    rgba(47, 109, 255, 1) 0%,
+    rgba(255, 255, 255, 54) 50%,
+    rgba(47, 109, 255, 1) 100%
+  );
+  width: 60%;
+  height: 30%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  // margin: 10px;
+}
+.gradientTwo {
+  background-image: linear-gradient(
+    250deg,
+    rgba(47, 109, 255, 1) 0%,
+    rgba(255, 255, 255, 54) 50%,
+    rgba(47, 109, 255, 1) 100%
+  );
+  width: 80%;
+  height: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 2px;
+}
+.gradientThree {
+  background-image: linear-gradient(
+    275deg,
+    rgba(47, 109, 255, 1) 0%,
+    rgba(255, 255, 255, 54) 50%,
+    rgba(47, 109, 255, 1) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 2px;
+}
+.gradientNext {
+  width: 100%;
+  height: 100%;
+  background-color: #021428;
+  // z-index: 999;
+}
+.gradientNextTwo {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(47, 109, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  color: #fff;
+}
+.gradientText {
+  font-size: 26px;
+  font-weight: bold;
+}
+.gradientName {
+  font-size: 12px;
+}
+.gradientTextTwo {
+  font-size: 86px;
+  font-weight: bold;
+  color: #ef595a;
+}
+.gradientNameTwo {
+  font-size: 18px;
+}
+.title {
+  background-image: url("../assets/layout/title.png");
+  background-size: cover;
+  background-position: bottom;
+  background-repeat: no-repeat;
+  width: 90%;
+  height: 25px;
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  // justify-content: center;
+}
+.circle {
+  width: 12px;
+  height: 12px;
+  background: #021428;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  margin-right: 5px;
+}
+.titlename {
+  color: #fff;
+  font-size: 16px;
+  font-family: "站酷庆科黄油体";
+  letter-spacing: 3px;
+}
+.risklevelOne {
+  height: 60%;
+  width: 90%;
+}
+.boxTwo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  //   width: 100%;
+}
+.capsuleChart {
+  width: 80%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0px;
+}
+.scrollboard {
+  width: 90%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0px 20px 20px 20px;
+  flex: 1;
+}
+.scrollboard :global(.header) {
+  height: auto;
+  padding: 0;
+}
+.scrollboard :global(.dv-scroll-board .rows .ceil) {
+  text-align: center;
+}
+.scrollboard :global(.dv-scroll-board .header .header-item) {
+  text-align: center;
+}
+
+.scoreBox {
+  // background-image: url("../assets/layout/score-box.png");
+  // background-size: cover;
+  // background-position: center;
+  // background-repeat: no-repeat;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.scoreBox1 {
+  background-image: url("../assets/layout/score-box.png");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 100%;
+  // height: 140px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 20px;
+  padding: 5px;
+}
+.score {
+  display: flex;
+  flex-direction: row;
+  // align-items: center;
+  // justify-content: space-between;
+  background-image: url("../assets/layout/ks.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  object-fit: cover;
+  // width: 230px;
+  width: 33%;
+  height: auto;
+  margin: 10px;
+}
+.score2 {
+  display: flex;
+  flex-direction: row;
+  // align-items: center;
+  // justify-content: space-between;
+  background-image: url("../assets/layout/xk.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  object-fit: cover;
+  width: 33%;
+  height: auto;
+  margin: 10px;
+}
+.score3 {
+  display: flex;
+  flex-direction: row;
+  // align-items: center;
+  // justify-content: space-between;
+  background-image: url("../assets/layout/wk.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  object-fit: cover;
+  width: 33%;
+  height: auto;
+  margin: 10px;
+}
+.score4 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background-image: url("../assets/layout/score.png");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 30%;
+  padding: 0px 15px;
+  // height: 100%;
+  // margin: 10px;
+}
+.scoreRight {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 40%;
+  margin-left: 50%;
+}
+.scoreLeft {
+  font-size: 12px;
+  font-weight: bold;
+  color: #6cc8d9;
+  margin-top: 5px;
+}
+.scoreText {
+  font-size: 13px;
+  font-weight: bold;
+  color: #6cc8d9;
+}
+.scoreText2 {
+  font-size: 33px;
+  color: #7fffff;
+  font-weight: bold;
+  // font-style: oblique;
+}
+.scoreText3 {
+  font-size: 12px;
+  color: #6cc8d9;
+  font-weight: bold;
+}
+.ulData {
+  li {
+    // transform: rotate(45deg);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    // margin-left: -20px;
+    // margin-right: -20px;
+    transform: translate(-50%, -50%);
+  }
+  li:nth-of-type(1) {
+    // transform: rotate(45deg);
+    transform: translate(-50%, -50%) rotate(12deg) translate(-280px)
+      rotate(-12deg);
+    // transform-origin: 20px 220px;
+  }
+  li:nth-of-type(2) {
+    transform: translate(-50%, -50%) rotate(38deg) translate(-280px)
+      rotate(-38deg);
+  }
+  li:nth-of-type(3) {
+    transform: translate(-50%, -50%) rotate(64deg) translate(-280px)
+      rotate(-64deg);
+  }
+  li:nth-of-type(4) {
+    transform: translate(-50%, -50%) rotate(90deg) translate(-280px)
+      rotate(-90deg);
+  }
+  li:nth-of-type(5) {
+    transform: translate(-50%, -50%) rotate(116deg) translate(-280px)
+      rotate(-116deg);
+  }
+  li:nth-of-type(6) {
+    transform: translate(-50%, -50%) rotate(142deg) translate(-280px)
+      rotate(-142deg);
+  }
+  li:nth-of-type(7) {
+    transform: translate(-50%, -50%) rotate(168deg) translate(-280px)
+      rotate(-168deg);
+  }
+  li:nth-of-type(8) {
+    transform: translate(-50%, -50%) rotate(-12deg) translate(-280px)
+      rotate(12deg);
+  }
+  li:nth-of-type(9) {
+    transform: translate(-50%, -50%) rotate(-38deg) translate(-280px)
+      rotate(38deg);
+  }
+  li:nth-of-type(10) {
+    transform: translate(-50%, -50%) rotate(-64deg) translate(-280px)
+      rotate(64deg);
+  }
+  li:nth-of-type(11) {
+    transform: translate(-50%, -50%) rotate(-116deg) translate(-280px)
+      rotate(116deg);
+  }
+
+  li:nth-of-type(12) {
+    transform: translate(-50%, -50%) rotate(-142deg) translate(-280px)
+      rotate(142deg);
+  }
+  li:nth-of-type(13) {
+    transform: translate(-50%, -50%) rotate(-168deg) translate(-280px)
+      rotate(168deg);
+  }
+}
+
+.roateData {
+  background-image: linear-gradient(
+    275deg,
+    rgba(47, 109, 255, 1) 0%,
+    rgba(255, 255, 255, 54) 50%,
+    rgba(47, 109, 255, 1) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 2px;
+  // background-color: rgba(47, 109, 255, 0.1);
+}
+.roatBack {
+  background-color: #021428;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+}

src/routes/dashboard.css

@@ -411,5 +411,31 @@
   background-color: #3c9cff;
   color: #fff;
 }
-:global() {
+:global(.slide-style){
+  /* margin-bottom: 10px; */
+  font-size: 24px;
+  font-weight: bold;
+  color:#de4e58;
+  /* -webkit-text-stroke: #E38C7A 1px; */
+  /* padding-left:30px; */
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
 }
+:global(.slide-text-style){
+  position:relative;
+  display:inline-block;
+  white-space:nowrap;
+  animation: slide-text-style 20s linear 1s infinite ;
+  width:'auto';
+  align-items: center;
+  margin-top: 1em;
+}
+
+@keyframes slide-text-style{
+  0%{margin-left:100%;}
+100%{margin-left:-1200px;}
+}
+