大屏可视化布局(地图颜色--高德)

布局及引用

import React, { useEffect, useState } from 'react'
import './index.less'
import { history } from 'umi'


import AMapLoader from "@amap/amap-jsapi-loader";
// import {Button} from 'andt'
export default function Home() {

  const [time, settime] = useState('')
  let map = null;
  useEffect(() => {
    AMapLoader.load({
      key: "9bc4b58f70634b73e3e7fc5f8d0c0e5c", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {

        map = new AMap.Map("home", {
          // 设置地图容器id
          mapStyle: "amap://styles/darkblue",//变颜色

          viewMode: "3D", // 是否为3D地图模式
          zoom: 17, // 初始化地图级别
          center: [115.485406, 38.814064], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);
  const gettime = () => {
    let Da = new Date()
    let nn = Da.getFullYear()
    let yy = Da.getMonth() + 1
    let dd = Da.getDate()
    let shi = Da.getHours()
    let ff = Da.getMinutes()
    let ss = Da.getSeconds()
    let getdate = nn + '-' + yy + '-' + dd + ':' + shi + ':' + ff + ':' + ss
    settime(getdate)
  }
  useEffect(() => {
    setInterval(() => {
      gettime()
    }, 1000)
  })
  return (
    <div id='home'>
      <div className="top">
        <div className="top-img">
          <div className="time">
            <h2>            {time}
            </h2>
          </div>
          <h1>智慧照明综合管理平台</h1>
          <div className="setting">
            <div className="botton" >
              进入管理系统
            </div>
            <div className="setting-img">

            </div>
          </div>
        </div>
      </div>
      <div className="left">
        <div className="content-item">
          <div className="inner">
            <div className="content-left">
              <h3>设备状态</h3>
            </div>
          </div>
        </div>
        <div className="content-item">
          <h3>实时功耗</h3>

        </div>
        <div className="content-item">


        </div>
      </div>
      <div className="right">
        <div className="content-item">
          <h3>KPI</h3>
        </div>
        <div className="content-item">
          <h3>区域分布</h3>
        </div>
        <div className="content-item">
          <h3>报警信息</h3>

        </div>
      </div>

    </div>
  )
}

样式如下(less)：

html{
  font-size: 100px;
}
#home{
  position: relative;
  color: #fff;
  width: 100%;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  z-index: 0;
  .top{
      position: absolute;
      z-index: 1;
      width: 100%;
      height: calc(100% - 92%);
      .top-img{
          width: 100%;
          height: 100%;
          background-image: url(~@/images/top_title.8d58eda.png);
          background-size: cover; /* 使背景图片充满整个容器 */
          display: flex;
          justify-content: space-around;
          align-items: center;
          text-align: center;
          .time{
              width: calc(100% - 65%);
              h2{
                  font-size: 16px;
                  color: #fff;
              }
          }
          h1{
              font-size: 22px;
              font-weight: 600;
              color: #fff;
              width: calc(100% - 70%);
              height: calc(100% - 40%);
          }
          .setting{
              width: calc(100% - 65%);
              display: flex;
              justify-content: space-around;
              align-items:start;
              .botton{
                  padding: 1.3% 2.5% ;
                  border-radius: 10px;
                  background-color: skyblue;
                  width: calc(100% - 70%);
              }
              .setting-img{
                  padding: 1.5% 2.5% ;
                  background-image: url(~@/images/xit_nav_icon.18f5906.png);
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center;
              }

          }
       
             
             
            
      }
  }
  .left{
      position: absolute;
      top: 8%;
      left: 0%;
      z-index: 1;
      width: calc(100% - 70%);
      height: 90%;
      .content-item{
          width: 70%;
          // margin-top: 10px;
          height: calc(100% / 3);
          margin: 0 auto;
          background-image: url(~@/images/content_bj.a8f4280.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          .inner{
              h3{
                  color: #2b8fb4;
              }
          }
      }
  }
  .right{
      position: absolute;
      top: 8%;
      right: 0%;
      z-index: 1;
      width: calc(100% - 70%);
      height: 90%;

      .content-item{
          
          width: 70%;

          height: calc(100% / 3);
          margin: 0 auto;
          // border: 25px #d2c8c8 solid;
          background-image: url(~@/images/content_bj.a8f4280.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
         
      }
  }

  
}
.content-item{
  h3{
      padding: 10px;
      color: #2b8fb4;
  }
}