upp

code/src/pages/B1Village/index.module.scss

@@ -19,12 +19,149 @@
       letter-spacing: 2px;
       text-shadow: 1px 1px black;
     }
+
+    .B1info {
+      opacity: 0;
+      pointer-events: none;
+      transition: all .3s;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+      display: flex;
+
+      &>div {
+        width: 50%;
+        height: 100%;
+      }
+
+      .B1infoMain {
+        background: linear-gradient(to right, rgba(47, 40, 30, 1), rgba(47, 40, 30, 0));
+        position: relative;
+        overflow: hidden;
+
+        // 线
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          top: -10%;
+          left: -32%;
+          width: 120%;
+          height: 120%;
+          border-radius: 50%;
+          border: 1px dashed var(--themeColor2);
+        }
+
+        .B1infoRow {
+          position: absolute;
+          opacity: 0;
+          pointer-events: none;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 10;
+
+          .B1infoMainName {
+            position: absolute;
+            top: 120px;
+            left: 60px;
+            z-index: -1;
+          }
+
+          .B1infoFloo {
+            cursor: pointer;
+            position: absolute;
+            z-index: 10;
+            bottom: 30px;
+            left: 40px;
+            width: 70%;
+            height: 200px;
+
+            .B1infoFloo1 {
+              width: 100%;
+              height: 120px;
+              padding: 0 80px;
+              color: #fff;
+              overflow-y: auto;
+              position: relative;
+
+
+            }
+
+            // 左右箭头
+            .B1infoAr {
+              position: absolute;
+              top: 40px;
+              left: 0px;
+              width: 30px;
+              height: 30px;
+              cursor: pointer;
+              background: url('../../assets/img/tab2/icon_left.png') no-repeat center center;
+              background-size: 18px 30px;
+            }
+
+            .B1infoAr2 {
+              left: auto;
+              right: 0;
+              background: url('../../assets/img/tab2/icon_right.png') no-repeat center center;
+              background-size: 18px 30px;
+            }
+
+            .B1infoArNone {
+              opacity: .5;
+              pointer-events: none;
+            }
+
+            .B1infoFlooBtn {
+              margin: 20px auto 0;
+              width: 120px;
+              height: 40px;
+              background-image: url('../../assets/img/tab2/btn_m.png');
+              background-size: 100% 100%;
+              cursor: pointer;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              letter-spacing: 2px;
+              color: var(--themeColor);
+              font-size: 18px;
+            }
+          }
+
+          // 右侧打点定位
+          .B1infoRloc{
+            width: 150px;
+            height: 150px;
+            position: absolute;
+            top: 10%;
+            right: 10%;
+            background-image: url('../../assets/img/tab2/btn-circle.png');
+            background-size: 100% 100%;
+            cursor: pointer;
+          }
+        }
+
+        .B1infoRowAc {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+
+    .B1infoAc {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }
 
 .villageKrpano {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 
 .hotspot {

code/src/pages/B1Village/index.tsx

@@ -6,6 +6,7 @@ import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import { HotSpot, Krpano } from "@dage/krpano";
 import classNames from "classnames";
+import { baseUrl } from "@/index";
 function B1Village() {
   const location = useLocation();
 
@@ -15,30 +16,34 @@ function B1Village() {
   const villageData = useSelector(
     (state: RootState) => state.A0Layout.dataAll.village
   );
+
+  //当前村落的 信息
   const curVillage = useMemo(
-    () => villageData.find((i) => i.id === Number(uId)) || villageData[0],
+    () =>
+      villageData.find((i) => i.id === Number(uId))?.info ||
+      villageData[0].info,
     [uId, villageData]
   );
 
-  const architec = useSelector(
-    (state: RootState) => state.A0Layout.dataAll.architec
-  );
-
   useEffect(() => {
     const query = new URLSearchParams(location.search);
     const param = query.get("id");
-    console.log("村落页面获取id", param);
+    // console.log("村落页面获取id", param);
     setUid(param!);
   }, [location.search]);
 
+  // 详情 索引
+  const [infoInd, setInfoInd] = useState(-1);
+
   return (
     <div className={styles.B1Village}>
+      {/* 全景相关 */}
       <Krpano
         className={styles.villageKrpano}
         xml="/scene.xml"
         currentScene={curScene}
       >
-        {curVillage.info.map((item) => {
+        {curVillage.map((item, index) => {
           const name = `hotspot${item.id}`;
 
           return (
@@ -46,24 +51,25 @@ function B1Village() {
               key={name}
               name={name}
               type="text"
-              // @ts-ignore
               atv={item.atv}
               ath={item.ath}
               scale={0.5}
               edge="top"
               bg={false}
               distorted={true}
-              onClick={() => alert("点击了 " + name)}
+              onClick={() => setInfoInd(index)}
               onOver={() => setHotspotHoverName(name)}
               onOut={() => setHotspotHoverName("")}
             >
               <div
                 className={classNames(
-                  name === hotspotHoverName && styles.hotspotActive,
+                  name === hotspotHoverName || index === infoInd
+                    ? styles.hotspotActive
+                    : "",
                   styles.hotspot
                 )}
               >
-                <span className={styles.hotspotLabel}>建筑名</span>
+                <span className={styles.hotspotLabel}>{item.label}</span>
                 <div className={styles.hotspotPointer} />
               </div>
             </HotSpot>
@@ -71,6 +77,67 @@ function B1Village() {
         })}
       </Krpano>
 
+      {/* 点击建筑出来的左侧详情 */}
+      <div className={classNames("B1info", infoInd !== -1 ? "B1infoAc" : "")}>
+        <div className="B1infoMain">
+          {curVillage.map((v, i) => (
+            <div
+              className={classNames(
+                "B1infoRow",
+                i === infoInd ? "B1infoRowAc" : ""
+              )}
+              key={v.id}
+            >
+              {/* 大名字 */}
+              <div className="B1infoMainName">
+                <img
+                  src={`${baseUrl}/B1Village/pc/${uId}/name${v.id}.png`}
+                  alt=""
+                />
+              </div>
+              {/* 底部介绍 */}
+              <div className="B1infoFloo">
+                <div
+                  className="B1infoFloo1 mySorrl"
+                  dangerouslySetInnerHTML={{ __html: v.txt }}
+                ></div>
+                {/* 左右箭头 */}
+                <div
+                  onClick={() => setInfoInd(infoInd - 1)}
+                  className={classNames(
+                    "B1infoAr B1infoAr1",
+                    infoInd === 0 ? "B1infoArNone" : ""
+                  )}
+                  hidden={curVillage.length <= 1}
+                ></div>
+                <div
+                  onClick={() => setInfoInd(infoInd + 1)}
+                  className={classNames(
+                    "B1infoAr B1infoAr2",
+                    infoInd >= curVillage.length - 1 ? "B1infoArNone" : ""
+                  )}
+                  hidden={curVillage.length <= 1}
+                ></div>
+                <div
+                  className="B1infoFlooBtn"
+                  onClick={() =>
+                    history.push(`/architecInfo?id=${v.architecId}`)
+                  }
+                >
+                  查看
+                </div>
+              </div>
+              {/* 右侧的打点定位 */}
+              <div className="B1infoRloc"></div>
+              {v.buildArr.map((v2) => (
+                <div className={classNames("B1infoRloc",)} key={v2.id}></div>
+              ))}
+            </div>
+          ))}
+        </div>
+        <div onClick={() => setInfoInd(-1)}></div>
+      </div>
+
       {/* 右下角的详情按钮 */}
       <div
         className="B1toTab3"

code/src/types/api/layot.d.ts

@@ -36,15 +36,10 @@ export type DataAllType = {
   // 待完善
   village: {
     id: number;
+    scene: string;
     name: string;
     infoTxt: string;
-    info: {
-      id: number;
-      code: string;
-      label: string;
-      atv: number;
-      ath: number;
-    }[];
+    info: Tab2InfoType[];
   }[];
   // 待完善
   architec: {
@@ -56,6 +51,19 @@ export type DataAllType = {
   build: InfoRowType[];
 };
 
+// 村落详情
+export type Tab2InfoType = {
+  id: number;
+  code: string;
+  label: string;
+  atv: number;
+  ath: number;
+  txt:string
+  architecId: string;
+  buildArr:{id:string,name:string}[]
+};
+
+// 建筑和构件详情
 export type InfoRowType = {
   id: string;
   name: string;
@@ -69,10 +77,11 @@ export type InfoRowType = {
   };
 };
 
+// 搜索列表
 export type SearchType = {
   id: string;
   name: string;
   type: "村落" | "建筑" | "构件";
   path: string;
-  txt:string
+  txt: string;
 };

静态资源/staticData/dataTemp.js

@@ -92,7 +92,16 @@ const staticDataTemp = {
           // 垂直方向
           atv: 0,
           // 水平方向
-          ath: 0
+          ath: 0,
+          // 建筑id，和下面的 architec 里的 data 里的 建筑 id一致
+          txt: '&emsp;&emsp;村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介<br/>&emsp;&emsp;绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落介绍村落',
+          architecId: '3_1',
+          // 构件id集合，没有就为空
+          buildArr: [
+            // id 和下面的 build 的id 一致。最多关联2个构件
+            { id: '4_1', name: '构件1' },
+            { id: '4_2', name: '构件2' },
+          ]
         },
         {
           id: 2,
@@ -102,7 +111,17 @@ const staticDataTemp = {
           // 垂直方向
           atv: 0,
           // 水平方向
-          ath: 30
+          ath: 30,
+          // 建筑id，和下面的 architec 里的 data 里的 建筑 id一致
+          txt: '',
+          architecId: '3_2',
+          // 构件id集合，没有就为空
+          buildArr: [
+            // id 和下面的 build 的id 一致。最多关联2个构件
+            { id: '4_3', name: '构件2-1' },
+            { id: '4_4', name: '构件2-2' },
+          ]
+
         }
       ]
     },