up

houtai/src/views/tab2/add.vue

@@ -373,6 +373,7 @@ export default {
       })
     })
     this.options = [...temp]
+
     // -------类别
     const res2 = await dictGetTree({ type: 'texture' })
     this.dictTextureArr = res2.data.map((v) => {

webNew/public/model.html

@@ -20,7 +20,7 @@
   <script>
     let number = getQueryVariable("m");
     window.autoRotate = true; // 是否自动旋转
-    fdage.embed('http://hnbwg.4dage.com/goods/model/' + number, {
+    fdage.embed('/goods/model/' + number, {
       transparentBackground: true,
       width: 800,
       height: 600,

webNew/src/assets/styles/base.css

@@ -64,7 +64,7 @@ ul {
   background-color: rgba(255, 255, 255, 0.7000);
   border: none;
 } */
-
+/* 
 .ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
   border-color: transparent;
@@ -76,7 +76,8 @@ ul {
 
 .ant-input {
   background-color: transparent;
-}
+} */
+
 .ant-pagination-item-active{
   color: #961014;
   border: none;

webNew/src/components/Model/index.module.scss

@@ -22,20 +22,20 @@
     .rightTxt {
       position: absolute;
       z-index: 2;
-      top: 60px;
-      right: 60px;
-      width: 300px;
-      height: 465px;
+      top: 30px;
+      right: 30px;
+      width: 400px;
+      height: 565px;
       background-image: url('../../assets//img//txtBac.png');
       background-size: 100% 100%;
 
       &::before {
         content: "";
         position: absolute;
-        left: 17px;
-        top: 98px;
+        left: 22px;
+        top: 121px;
         width: 1px;
-        height: 346px;
+        height: 413px;
         background-color: #BE262B;
       }
 
@@ -48,10 +48,10 @@
         letter-spacing: 4px;
         writing-mode: tb-rl;
         position: absolute;
-        top: 27px;
-        right: 30px;
-        width: 54px;
-        height: 290px;
+        top: 34px;
+        right: 40px;
+        width: 72px;
+        height: 351px;
         color: #020101;
         font-weight: 700;
         font-size: 24px;
@@ -73,57 +73,115 @@
       .model_txt {
         padding-left: 10px;
         position: absolute;
-        left: 17px;
-        top: 98px;
-        width: 176px;
-        height: 310px;
+        left: 24px;
+        top: 117px;
+        width: 247px;
+        height: 350px;
         overflow-y: auto;
         font-size: 16px;
       }
 
       .model_age {
-        text-align: center;
         position: absolute;
-        bottom: 14px;
+        bottom: 20px;
         padding-bottom: 6px;
-        border-bottom: 2px solid #a7191e;
-        right: 110px;
+        right: 125px;
         font-size: 16px;
         cursor: pointer;
-        width: 150px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        width: 240px;
+        height: 36px;
+        display: flex;
+        justify-content: center;
+
+        .model_ageRow {
+          max-width: 100%;
+          height: 100%;
+          border-bottom: 2px solid #a7191e;
+          padding: 0 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
-      .model_size{
-        transform: scale(.9);
+      .model_sort{
+        position: absolute;
+        bottom: 50px;
+        padding-bottom: 6px;
+        right: 125px;
+        font-size: 16px;
+        cursor: pointer;
+        width: 240px;
+        height: 36px;
+        display: flex;
+        justify-content: center;
+
+        .model_sortRow {
+          max-width: 100%;
+          height: 100%;
+          padding: 0 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+
+      .model_size {
+        transform: scale(0.9);
         position: absolute;
         right: 9px;
-        bottom: 15px;
-        width: 70px;
-        height: 93px;
+        bottom: 5px;
+        width: 96px;
+        height: 125px;
         font-size: 14px;
-        &>div{
+
+        &>div {
           cursor: pointer;
           width: 100%;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          margin-bottom: 5px;
+          margin-bottom: 8px;
         }
       }
     }
-    .flootBtnBox{
+
+    .flootBtnBox {
       position: absolute;
       z-index: 10;
-      bottom: 60px;
-      right: 60px;
+      bottom: 30px;
+      right: 30px;
       display: flex;
-      .flootRow{
-        width: 40px;
-        height: 40px;
+
+      .flootRow {
+        width: 38px;
+        height: 38px;
         cursor: pointer;
         margin-right: 6px;
+        background-size: 100% 100%;
+      }
+
+      .flootRow1 {
+        background-image: url('../../assets/img/inco1.png');
+      }
+
+      .flootRow2 {
+        background-image: url('../../assets/img/inco2.png');
+      }
+
+      .flootRow3 {
+        background-image: url('../../assets/img/inco3.png');
+      }
+
+      .flootRow4 {
+        background-image: url('../../assets/img/inco4.png');
+      }
+
+      .flootRowM {
+        &>img {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
   }

webNew/src/components/Model/index.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
 import { RootState } from '@/store';
 import { modelItem } from '@/types';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
+import musicImg from '@/assets/img/music.png'
+import musicImgAc from '@/assets/img/musicAc.png'
 import styles from './index.module.scss'
+import { baseURL } from '@/utils/http';
 
 type props = {
   modelId: number,
@@ -15,53 +18,104 @@ export default function Model({ modelId, closeModel }: props) {
   const { list } = modelInfo
   const [info, setInfo] = useState({} as modelItem)
 
-  const closeModelFu =()=>{
+  const closeModelFu = () => {
     setInfo({} as modelItem)
     closeModel()
   }
   useEffect(() => {
     if (modelId) {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       const info = list.filter(v => v.id === modelId)[0]
       setInfo(info)
-      console.log('-------', info);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modelId])
 
+  // 控制模型放大缩小和复位
+  const ifrBoxRef = useRef<any>(null)
+  const modelChangeFu = (val: number) => {
+    const dom = ifrBoxRef.current
+    
+    if (dom && dom.contentWindow && dom.contentWindow.webview) {
+      if (val === 1) dom.contentWindow.webview.zoomIn()  // 放大
+      else if (val === 2) dom.contentWindow.webview.zoomOut() // 缩小
+      else dom.contentWindow.webview.resetView() // 复位
+    }
+  }
+
+  // 控制音乐播放暂停
+  const musicRef = useRef<HTMLAudioElement>(null)
+
+  const [music, setMusic] = useState(false)
+  const musicPlayFu = (flag: boolean) => {
+    const dom = musicRef.current
+    if (dom) {
+      if (flag) {
+        // 打开音乐
+        setMusic(true)
+        dom.play()
+        dom.addEventListener('ended', function () {
+          setMusic(false)
+        }, false);
+      } else {
+        // 关闭音乐
+        setMusic(false)
+        dom.pause()
+      }
+    }
+  }
+
+
   return (
     <div className={styles.Model}>
+      {/* 音频 */}
+      {info.audioPath ? (<audio src={baseURL + info.audioPath} ref={musicRef}></audio>) : null}
+      {/* 模型盒子 */}
       <div className='ifrBox'>
-        {info.fileName?(<iframe src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>):null}
-        
+        {info.fileName ? (<iframe ref={ifrBoxRef} src={`model.html?m=${info.fileName}`} frameBorder='no'></iframe>) : null}
+
       </div>
+      {/* 右边介绍 */}
       <div className='rightTxt'>
         <div className='model_title'>{info.name}</div>
         {
-        info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
-        }
-        {
-          info.dictAgeFront ? (<div className='model_age' title={info.dictAgeFront}>年代：{info.dictAgeFront}</div>) : <div className='model_age'>暂无信息</div>
+          info.description ? (<div className='model_txt' dangerouslySetInnerHTML={{ __html: info.description }}></div>) : <div className='model_txt'>暂无信息</div>
         }
+        <div className='model_age'>
+          {
+            info.dictAgeFront ? (<div className='model_ageRow' title={info.dictAgeFront}>年代：{info.dictAgeFront}</div>) : <div className='model_ageRow'>年代：(空)</div>
+          }
+        </div>
+
+        <div className='model_sort'>
+          {
+            info.dictTextureName ? (<div className='model_sortRow' title={info.dictTextureName}>类别：{info.dictTextureName}</div>) : <div className='model_sortRow'>类别：(空)</div>
+          }
+        </div>
+
         {
           <div className='model_size'>
-            {info.sizeLength||info.sizeWidth||info.sizeHeight?(<div>尺寸</div>):'暂无信息'}
-            {info.sizeLength?(<div>长 {info.sizeLength.replace(',','')}</div>):null}
-            {info.sizeWidth?(<div>宽 {info.sizeWidth.replace(',','')}</div>):null}
-            {info.sizeHeight?(<div>高 {info.sizeHeight.replace(',','')}</div>):null}
+            {info.sizeLength || info.sizeWidth || info.sizeHeight ? (<div>尺寸</div>) : null}
+            {info.sizeLength ? (<div title={info.sizeLength.replace(',', '')}>长 {info.sizeLength.replace(',', '')}</div>) : null}
+            {info.sizeWidth ? (<div title={info.sizeWidth.replace(',', '')}>宽 {info.sizeWidth.replace(',', '')}</div>) : null}
+            {info.sizeHeight ? (<div title={info.sizeHeight.replace(',', '')}>高 {info.sizeHeight.replace(',', '')}</div>) : null}
           </div>
         }
 
       </div>
 
-        <div className='flootBtnBox'>
-        <div className='flootRow'>+</div>
-        <div className='flootRow'>-</div>
-        <div className='flootRow'>1</div>
-        <div className='flootRow'>2</div>
-        <div className='flootRow' onClick={() => closeModelFu()}>3</div>
-        </div>
-          
+      {/* 底部按钮 */}
+      <div className='flootBtnBox'>
+        <div className='flootRow flootRow1' title='放大' onClick={() => modelChangeFu(1)}></div>
+        <div className='flootRow flootRow2' title='缩小' onClick={() => modelChangeFu(2)}></div>
+        {info.audioPath ? (<div className='flootRow flootRowM' title={music ? '暂停音频' : '播放音频'}>
+          {music ? (<img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />) :
+            (<img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />)}
+        </div>) : null}
+
+        <div className='flootRow flootRow4' title='重置' onClick={() => modelChangeFu(3)}></div>
+        <div className='flootRow flootRow3' title='退出' onClick={() => closeModelFu()}></div>
+      </div>
+
     </div>
   )
 }

webNew/src/pages/Home/index.module.scss

@@ -54,13 +54,16 @@
         border-top: 6px solid #D9D9D9;
         box-shadow: 0px 0px 5px 3px #ccc;
         padding: 10px 24px;
-
-        .search {
-          position: absolute;
-          right: 0px;
-          top: -75px;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &>div{
           width: 300px;
           height: 30px;
+        }
+        .search {
+          position: relative;
 
           .searchBtn {
             position: absolute;
@@ -85,123 +88,12 @@
             align-items: center;
           }
         }
-      }
-
-      .sortBox {
-        background-color: #F8F8F8;
-        font-size: 18px;
-        position: relative;
-        transition: height .3s;
-        overflow: hidden;
-        padding-bottom: 4px;
-
-        &::before {
-          position: absolute;
-          content: "";
-          bottom: 1px;
-          left: 0;
-          width: 100%;
-          height: 2px;
-          background-color: rgba(217, 217, 217, 1);
-        }
-
-        .xian {
-          position: absolute;
-          left: 0;
-          top: 42px;
-          width: 1300px;
-          height: 2px;
-          background-color: rgba(217, 217, 217, 1);
-        }
-
-        .all {
-          cursor: pointer;
-          text-align: center;
-          position: absolute;
-          top: 10px;
-          padding-bottom: 5px;
-          font-weight: 700;
-
-          &.activeAll {
-            border-bottom: 4px solid #BE262B;
-          }
-        }
-
-
-        .sortBox_left {
-          padding-left: 100px;
-          width: 1330px;
-          display: flex;
-          flex-wrap: wrap;
-
-          &>div {
-            margin-top: 10px;
-            cursor: pointer;
-            margin-right: 26px;
-            padding-bottom: 10px;
-          }
-
-          .active {
-            position: relative;
-
-            &::before {
-              position: absolute;
-              content: "";
-              bottom: 0px;
-              left: 0;
-              width: 100%;
-              height: 4px;
-              background-color: #BE262B;
-            }
-          }
-        }
-
-
-
-        .sortBox_right {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-          position: absolute;
-          bottom: 8px;
-          right: 0;
-          width: 30px;
-          height: 30px;
-          background-color: rgba(217, 217, 217);
-          border-radius: 3px;
+        .sortBox{
+          margin: 0 40px;
         }
       }
 
 
-      // 年代
-      .ageBox {
-        margin-top: 16px;
-        font-size: 18px;
-        display: flex;
-        position: relative;
-
-        &::before {
-          position: absolute;
-          content: "";
-          bottom: 1px;
-          left: 0;
-          width: 520px;
-          height: 2px;
-          background-color: rgba(217, 217, 217, 1);
-        }
-
-        .ageBoxAll {
-          cursor: pointer;
-          font-weight: 700;
-        }
-
-        .ageRow {
-          cursor: pointer;
-          margin-left: 26px;
-          padding-bottom: 10px;
-        }
-      }
 
       .modelBox::-webkit-scrollbar {
         width: 6px;
@@ -222,7 +114,7 @@
         box-shadow: 0px 0px 5px 3px #ccc;
         background-color: rgba(255, 255, 255, 0.5000);
         width: 100%;
-        height: calc(100% - 160px);
+        height: calc(100% - 50px);
         overflow-y: auto;
         display: flex;
         flex-wrap: wrap;

webNew/src/pages/Home/index.tsx

@@ -2,12 +2,12 @@ import { baseURL } from '@/utils/http'
 import classNames from 'classnames'
 import styles from './index.module.scss'
 import logoImg from '@/assets/img/logo.png'
-import { Input, Pagination } from 'antd'
-import { SearchOutlined, UpOutlined, DownOutlined, ExclamationOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { Input, Pagination, Select } from 'antd'
+import { SearchOutlined, ExclamationOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { useEffect, useRef, useState } from 'react'
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { useDispatch, useSelector } from 'react-redux';
-import { getListAction, getSortAction } from '@/store/action/home';
+import { getListAction, getSortAction, getAgeAction } from '@/store/action/home';
 import { RootState } from '@/store';
 import Model from '@/components/Model'
 export default function Home() {
@@ -16,6 +16,7 @@ export default function Home() {
   // 进页面获取后端文物数据
   useEffect(() => {
     dispatch(getSortAction())
+    dispatch(getAgeAction())
   }, [dispatch])
 
   // 滚动盒子ref
@@ -30,7 +31,11 @@ export default function Home() {
     setPageNum(1)
     const sroolDom = modelBoxRef.current
     sroolDom!.scrollTop = 0
-    dispatch(getListAction({ ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: '', pageNum: 1 }))
+    dispatch(getListAction({
+      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId,
+      searchKey: '', pageNum: 1,
+      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
+    }))
 
   }
 
@@ -41,18 +46,38 @@ export default function Home() {
     getModelList()
   }
 
+
+
   // 分类的数据和高亮
-  const { sortList, modelInfo } = useSelector((state: RootState) => state.homeStore)
+  const { sortList, modelInfo, ageList } = useSelector((state: RootState) => state.homeStore)
   const { list, total } = modelInfo
+
+  // 分类
   const [sort, setSort] = useState(-1)
-  const [sortAll, setSortAll] = useState(false)
+  // 分类下拉框改变
+  const sortChangeFu = (value: number) => {
+    setSort(value)
+  }
+  // 年代
+  const [ageSerach, setAgeSerach] = useState(-1)
+  // 年代下拉框改变
+  const ageChangeFu = (value: number) => {
+    setAgeSerach(value)
+    fromData.current.dictAgeId = value
+    fromData.current.pageNum = 1
+    setPageNum(1)
+    getModelList()
+  }
+
   const [pageNum, setPageNum] = useState(1)
 
+
   const fromData = useRef({
     pageNum: 1,
     pageSize: 30,
     searchKey: '',
-    dictTextureId: -1
+    dictTextureId: -1,
+    dictAgeId: -1
   })
   const pageChangeFu = (page: number) => {
     fromData.current.pageNum = page
@@ -63,7 +88,10 @@ export default function Home() {
   const getModelList = () => {
     const sroolDom = modelBoxRef.current
     sroolDom!.scrollTop = 0
-    dispatch(getListAction({ ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: value }))
+    dispatch(getListAction({
+      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: value,
+      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
+    }))
   }
   useEffect(() => {
     fromData.current.dictTextureId = sort
@@ -73,6 +101,15 @@ export default function Home() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sort])
 
+
+  // useEffect(() => {
+  //   fromData.current.dictAgeId = ageSerach
+  //   fromData.current.pageNum = 1
+  //   setPageNum(1)
+  //   getModelList()
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [ageSerach])
+
   // 点击每个模型出来的页面
   const [modelId, setModelId] = useState(0)
 
@@ -92,39 +129,29 @@ export default function Home() {
       </div>
       <div className='mainBox'>
 
-      {/* 筛选的盒子 */}
+        {/* 筛选的盒子 */}
         <div className='screenBox'>
 
-        {/* 输入框 */}
-        <div className='search'>
-          <div className='searchBtn' onClick={searchBtnFu}></div>
-          {value.length > 0 ? (<div className='searchClear' onClick={clearValueFu}>
-            <CloseCircleOutlined />
-          </div>) : null}
+          {/* 输入框 */}
+          <div className='search'>
+            <div className='searchBtn' onClick={searchBtnFu}></div>
+            {value.length > 0 ? (<div className='searchClear' onClick={clearValueFu}>
+              <CloseCircleOutlined />
+            </div>) : null}
 
-          <Input maxLength={10} placeholder='请输入文物名称' value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} prefix={<SearchOutlined />} />
-        </div>
+            <Input maxLength={10} placeholder='请输入文物名称' value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} prefix={<SearchOutlined />} />
+          </div>
 
-          {/* <div className='sortBox' style={{ height: sortAll ? '90px' : '46px' }}>
-            <div className='xian' hidden={!sortAll}></div>
-            <div className={classNames('all', sort === -1 ? 'activeAll' : '')} onClick={() => setSort(-1)}>全部类别</div>
-            <div className='sortBox_left'>
-              {sortList.map((item) => (
-                <div className={classNames(sort === item.id ? 'active' : '')} onClick={() => setSort(item.id)} key={item.id}>{item.name}</div>
-              ))}
-            </div>
-            <div className='sortBox_right' onClick={() => setSortAll(!sortAll)}>
-              {sortAll ? <DownOutlined /> : <UpOutlined />}
-            </div>
+          {/* 分类下拉框 */}
+          <div className='sortBox'>
+            <Select style={{ width: '100%' }} value={sort} onChange={sortChangeFu} options={sortList} />
+          </div>
 
+          {/* 年代筛选下拉框 */}
+          <div className='ageSeachBox'>
+            <Select style={{ width: '100%' }} value={ageSerach} onChange={ageChangeFu} options={ageList} />
           </div>
 
-          <div className='ageBox'>
-            <div className='ageBoxAll'>全部年代</div>
-            {[1, 2, 3].map(item => (
-              <div className='ageRow' key={item}>{'中华明国年代' + item}</div>
-            ))}
-          </div> */}
         </div>
 
         {/* 页面渲染主体 */}

webNew/src/store/action/home.ts

@@ -1,23 +1,50 @@
 import { AppDispatch } from ".."
 import http from "@/utils/http"
+import { HomeSortType } from "@/types"
 
 // 获取分类
 export const getSortAction = () => {
 
   return async (dispatch: AppDispatch) => {
     const res = await http.post('/api/show/getTree', { type: 'texture' })
-    dispatch({ type: 'home/setSort', payload: res.data })
+    let data = res.data.map((v: HomeSortType) => ({
+      ...v,
+      value: v.id,
+      label: v.name
+    }))
+    data.unshift({ value: -1, label: '全部分类' })
+    dispatch({ type: 'home/setSort', payload: data })
   }
 }
 
+// 获取年代
+export const getAgeAction = () => {
+
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('/api/show/getTree', { type: 'age' })
+
+    const temp = [] as any
+    res.data.forEach((v: any) => {
+      v.children.forEach((p: any) => {
+        temp.push({ value: p.id, label: p.name })
+      })
+    })
+
+    let data = temp
+    data.unshift({ value: -1, label: '全部年代' })
+    dispatch({ type: 'home/setAge', payload: data })
+  }
+}
+
+
 // 获取列表数据
 export const getListAction = (data: any) => {
 
   return async (dispatch: AppDispatch) => {
     const res = await http.post('/api/show/goods/list', data)
-    const list =res.data.records
-    const total =res.data.total
-    dispatch({ type: 'home/setList', payload: {list,total} })
+    const list = res.data.records
+    const total = res.data.total
+    dispatch({ type: 'home/setList', payload: { list, total } })
 
   }
 }

webNew/src/store/reducer/home.ts

@@ -5,19 +5,23 @@ import { HomeSortType, HomeModelType } from "@/types"
 // 初始化状态应用注解
 const initState = {
   sortList: [] as HomeSortType[],
+  ageList: [] as HomeSortType[],
   modelInfo: {} as HomeModelType
 }
 
 type HomeActionType =
-  | { type: 'home/setSort', payload: HomeSortType[] }
-  | { type: 'home/setList', payload: HomeModelType }
+| { type: 'home/setSort', payload: HomeSortType[] }
+| { type: 'home/setAge', payload: HomeSortType[] }
+| { type: 'home/setList', payload: HomeModelType }
 
 // 频道 reducer
 export default function loginReducer(state = initState, action: HomeActionType) {
   switch (action.type) {
     case 'home/setSort':
       return { ...state, sortList: action.payload }
-    case 'home/setList':
+      case 'home/setAge':
+        return { ...state, ageList: action.payload }
+      case 'home/setList':
       return { ...state, modelInfo: action.payload }
     default:
       return state

webNew/src/types/store/home.d.ts

@@ -1,8 +1,10 @@
 export type HomeSortType = {
   children?: [];
-  id: number;
-  name: string;
-  type: string;
+  id?: number;
+  name?: string;
+  value?: number;
+  label?: string;
+  type?: string;
 }
 
 export type modelItem = {