react 单个li 高亮

高亮

import React, { useEffect, useState } from "react";
import http from "../../../utils/http";
import { useNavigate } from "react-router";
import { Button, Modal, Space,Input  } from "antd";
import axios from "axios";
import "./Home.css";
import MyUpload from "../../../components/upload/MyUpload";
import DiaLog from "../../../components/dialog/DiaLog";
import { getRandom, getTimeStamp, getSingature } from "../../helper";
import cover1 from "../../image/1.jpg";
import cover2 from "../../image/2.jpg";
import cover3 from "../../image/3.jpg";
import cover4 from "../../image/4.jpg";
import cover5 from "../../image/5.jpg";
import cover6 from "../../image/3d.jpg";
import iconCover from "../../image/icon-cover.png";
import iconRename from "../../image/icon-rename.png";
import iconImport from "../../image/icon-import.png";
import iconDel from "../../image/icon-del.png";


var images = [ cover1, cover2, cover3, cover4, cover2,cover5,cover1,cover2, cover3, cover5,  cover1,  cover3,  cover4,  cover2,
  cover4,  cover5,  cover6, cover6,]
 
// let index = Math.floor(Math.random() * images.length);
const timestamp = getTimeStamp();

console.log(timestamp,'timestamp')
const nonce = getRandom();

export default function Home() {
  //上传弹窗显示隐藏
  const [sonMsgStatus, setSonMsgStatus] = useState(false);
 

  //列表数据
  const [allData, setAlldata] = useState([]);

  // 子组件上传完毕，父组件根据状态更新数据；
  const [uploadStatus, setUploadStatus] = useState(0);

  const getSonMsg = (sonMsg) => {
    setSonMsgStatus(sonMsg);
  };

  let accountcode = sessionStorage.getItem("AccountCode");
  let SignToken = sessionStorage.getItem("SignToken");

  const uploadMask = (values) => {
    setSonMsgStatus(true);
  };

  // 子组件上传成功，更新父组件
  const finishUploadSon = () => {
    setUploadStatus(Date.now());
  };

  // 进入单个项目  模态框
   const [itemMask, setItemMask] = useState(false);
  const [isShow, setIshow] = useState(0)   
  const onEnter = (index) => {
    setIshow(index);
    // setItemMask(true)
  };
  const OnOut = (e) => {
    setItemMask(false);
  };

  const [visible, setVisible] = useState(false);
  const showModal = (e) => {
    setVisible(true);
    console.log(e.target.getAttribute("data-buildid"), "ccc1");
    
    let buildid =  e.target.getAttribute("data-buildid")
    // let str = `buildId${buildId}`;
    // let signature = getSingature(timestamp, nonce, accountcode, SignToken, str);

    // console.log(signature, "aaa");
    // let params = { buildId };
    // let headers = { accountcode, timestamp, nonce, signature };
    // console.log(params, headers, "bbb");
    // const res = http.post(`/api/project/ChangeBuildName?buildId=${buildId}`, null, headers);
    // res.then(() => {});
    return buildid
  };
  const okHideModal = () => {
    setVisible(false);
    // console.log('好看看看111',buildid)
  };

  const cancelHideModal = () => {
    setVisible(false);
  };
  const del = (e) => {
    // console.log(e.target.getAttribute("data-buildid"), "ccc");
    const buildId = e.target.getAttribute("data-buildid");

    let str = `buildId${buildId}`;
    let signature = getSingature(timestamp, nonce, accountcode, SignToken, '');

    console.log(signature, "aaa");
    let params = { buildId };
    let headers = { accountcode, timestamp, nonce, signature };
    console.log(params, headers, "bbb");
    const res = http.post(`/api/project/DeleteBuild?buildId=${buildId}`, null, headers);
    res.then(() => {});
  };

  let navigate = useNavigate();
  const seeProJ = (e) => {
      sessionStorage.setItem('projectCode',e.target.getAttribute("data-projectcode") );  //存储当前点击的项目编号
      navigate('/project')
  };
  const seeMoNy = (e) => {
    console.log('seeMoNy');
    // navigate('/project')
};
  
  useEffect(() => {
    axios({
      method: "get",
      url: "/api/account/GetToken",
      params: {
        accountCode: accountcode,
      },
      headers: { timestamp, nonce },
    })
      .then((res) => {
        sessionStorage.setItem("SignToken", res.data.Data.SignToken);
        const SignToken = res.data.Data.SignToken;
        let signature = getSingature(timestamp, nonce, accountcode, SignToken, "");
        axios({
          method: "get",
          url: "/api/project/GetBuildInfoByAccount",
          headers: {  accountcode,  timestamp, nonce,  signature},
        }).then((res) => {
          setAlldata(res.data.Data);
        });
      })
      .catch(function (error) {});
  }, [uploadStatus]);

  return (
    <div className="myhome">
      {sonMsgStatus === true ? (
        <>
          <DiaLog></DiaLog>
          <MyUpload className="uploadpage" getSonMsg={getSonMsg} finishUploadSon={finishUploadSon}></MyUpload>
        </>
      ) : null}

      <div> </div>
      {/* <Upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        listType="picture-card"
        fileList={fileList}
        onChange={onChange}
        onPreview={onPreview}
      >
        {fileList.length < 555555555555 && '+ 上传模型'}
      </Upload> */}

      {/* {JSON.stringify(allData)} */}
      <div className="item-add">
        <div className="cover " onClick={uploadMask}>
          上传模型
        </div>
      </div>

      {Object.values(allData).map((item, index) => {
        return (
          <>
          {/*  <li className='item' key={item.BuildId} onMouseEnter={(e) =>onEnter(index)}  onMouseLeave={OnOut}> */}
          <li className='item' key={item.BuildId} onMouseEnter={(e) =>onEnter(index)}  onMouseLeave={OnOut}>
              <div className="cover">
                <img src={images[index]} alt="" style={{ height: "100%", width: "100%" }} />
              </div>
                <div className={isShow === index ? ' item-mask' : 'hide'}>
                  <div className="see seeProJ" onClick={seeProJ} data-ProjectCode={item.ProjectCode}>查看项目</div>
                  <div className="see seeMoNy" onClick={seeMoNy}>查看资产</div>
                  <div className="footer">
                    <img src={iconCover} alt="更换封面" />
                    <img src={iconRename} onClick={showModal} data-buildid={item.BuildId} alt="重命名" />
                    <img src={iconImport} alt="重传模型" />
                    <img src={iconDel} onClick={del} data-buildid={item.BuildId} alt="删除" />
                  </div>
                </div>
              {/* <p className="mytxt"><span>{item.ProjectName}</span><span>{new Date(item.CreateTime)}</span></p> */}
              <p className="mytxt">
                <span>{item.ProjectName}-{item.BuildName}</span>
                <span>{new Date(item.CreateTime).toLocaleString()}</span>
              </p>
            </li>
            <Modal title="更改楼栋名称" visible={visible} onOk={okHideModal} onCancel={cancelHideModal} okText="确认" cancelText="取消">
              <p><Input placeholder="请输入要设置的楼栋名称" />;</p>
            </Modal>
          </>
        );
      })}
    </div>
  );
}