可视化展开

src/layout/Header.js

@@ -13,6 +13,7 @@ import config from "../config";
 import "./header.less";
 import Option from "./Option";
 import RiskFourPage from "./RiskFour";
+import FullScreenPage from "./FullScreen";
 
 // 投屏
 const DataV = (props) => {
@@ -370,6 +371,7 @@ const RiskFourColorOpton = (props) => {
             setshowModal(true);
             requestFullScreenMethod(document.body);     // 进入全屏
           }}
+          style={{ margin: "0px 36px", display: "flex", alignItems: "center" }}
         >
           <Icon type='global' className='header__right-icon'></Icon>
           {/* <IconFont
@@ -400,6 +402,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) => {
@@ -483,6 +573,7 @@ function Header(props) {
       {!props.matchLogin ? (
         <div className="header__right">
          <RiskFourColor/>
+         <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;}
+}
+