upp

src/pages/A1atlas/A1page/index.module.scss

@@ -0,0 +1,26 @@
+.A1page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  :global {
+    iframe {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 844px;
+      height: 390px;
+    }
+    .A1Pbtn {
+      position: absolute;
+      top: 30px;
+      right: 30px;
+      font-size: 30px;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+}

src/pages/A1atlas/A1page/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { CloseCircleOutlined } from '@ant-design/icons'
+
+type Props = {
+  closeFu: () => void
+}
+
+function A1page({ closeFu }: Props) {
+  return (
+    <div className={styles.A1page}>
+      <iframe
+        title='知识图谱'
+        src='https://houseoss.4dkankan.com/project/chengzhebei/index.html#/knowlege?l=look'
+        frameBorder='0'
+      ></iframe>
+      <div className='A1Pbtn' onClick={closeFu}>
+        <CloseCircleOutlined />
+      </div>
+    </div>
+  )
+}
+
+const MemoA1page = React.memo(A1page)
+
+export default MemoA1page

src/pages/A1atlas/index.tsx

@@ -9,6 +9,7 @@ import { A1_APIdel, A1_APIgetInfo, API_A1getTree } from '@/store/action/A1atlas'
 import { MessageFu } from '@/utils/message'
 import A1add from './A1add'
 import MyPopconfirm from '@/components/MyPopconfirm'
+import A1page from './A1page'
 
 function A1atlas() {
   const [loding, setLoding] = useState(false)
@@ -171,11 +172,7 @@ function A1atlas() {
     [resetFu]
   )
 
-  // 点击效果预览
-  const lookFu = useCallback(() => {
-    // 待完善
-    MessageFu.warning('正在开发中')
-  }, [])
+  const [lookPage, setLookPage] = useState(false)
 
   // 富文本返回
   const text = useCallback((rtf: string) => {
@@ -184,7 +181,9 @@ function A1atlas() {
       const obj = JSON.parse(rtf)
       // console.log(12465, obj)
       if (obj.txtArr && obj.txtArr.length) {
-        txt = obj.txtArr[0].txt || ''
+        let txt2 = obj.txtArr[0].txt || ''
+        txt2 = txt2.replace(' ', '').replace('<p></p>', '')
+        if (txt2) txt = txt2
       }
     } catch (error) {
       console.log(error)
@@ -287,7 +286,7 @@ function A1atlas() {
             &emsp;
             <p hidden={rightData.preset === '0'}>预设的初始节点不可删除</p>
           </div>
-          <Button type='primary' onClick={lookFu}>
+          <Button type='primary' onClick={() => setLookPage(true)}>
             效果预览
           </Button>
         </div>
@@ -308,7 +307,13 @@ function A1atlas() {
             </div>
             <div className='A1Rrow'>
               <div className='A1Rrow1'>详情页类型：</div>
-              <div className='A1Rrow2'>{rightData.typeSon === '2' ? '富文本' : '外链'}</div>
+              <div className='A1Rrow2'>
+                {rightData.typeSon === '2'
+                  ? '富文本'
+                  : rightData.typeSon === '1'
+                  ? '外链'
+                  : '（空）'}
+              </div>
             </div>
 
             <div className='A1Rrow'>
@@ -319,7 +324,7 @@ function A1atlas() {
                     className='A1Rrow2Text'
                     dangerouslySetInnerHTML={{ __html: text(rightData.rtf) }}
                   ></div>
-                ) : rightData.thumb ? (
+                ) : rightData.typeSon === '1' ? (
                   <a href={rightData.thumb} target='_blank' rel='noreferrer'>
                     {rightData.thumb}
                   </a>
@@ -340,6 +345,9 @@ function A1atlas() {
           closeFu={() => setAddInfo({} as A1AddInfoType)}
         />
       ) : null}
+
+      {/* 点击效果预览 */}
+      {lookPage ? <A1page closeFu={() => setLookPage(false)} /> : null}
     </div>
   )
 }