Kwxx.jsx

//库位信息
import React, { useState, useEffect } from "react";
import logo1 from "./../../../public/img/logo1.png";
import logo2 from "./../../../public/img/logo2.png";
import logo3 from "./../../../public/img/logo3.png";
import logo4 from "./../../../public/img/logo4.png";
export default ({ data }) => {
  return (
    <>
      <div className="data-content">
        <div className="content-header"> 库位信息</div>
        <div className="content-div">
          <div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              <img src={logo1} alt="" />
              <p>空闲</p>
            </div>
            <span>{data?.idleNum ?? "--"}</span>
          </div>
          <div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              <img src={logo2} alt="" />
              <p>占用</p>
            </div>
            <span>{data?.occupyNum ?? "--"}</span>
          </div>
          <div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              <img src={logo3} alt="" />
              <p>入库</p>
            </div>
            <span>{data?.instoreNum ?? "--"}</span>
          </div>
          <div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              <img src={logo4} alt="" />
              <p>出库</p>
            </div>
            <span>{data?.outstoreNum ?? "--"}</span>
          </div>
        </div>
      </div>
    </>
  );
};