文物互动墙穿梭框

node_socket_io/NeiMengGuServer.js

@@ -32,26 +32,6 @@ let theme = [
 // {type:'switch',data:{ name: "空中成像", val: "open"|"close" }'} --单个开关
 // {type:'switch',data:{ name: "all", val: "open"|"close" }'} --全部开关
 
-// tcp协议---中控开关控制
-// "CMD=501"
-// 101:空中成像 开
-// 102:空中成像 关
-
-// 201:文物互动墙 开
-// 202:文物互动墙 关
-
-// 301:透明展示柜A 开
-// 302:透明展示柜A 关
-
-// 401:透明展示柜B 开
-// 402:透明展示柜B 关
-
-// 501:AI数字人 开
-// 502:AI数字人 关
-
-// 601:所有设备全部 开
-// 602:所有设备全部 关
-
 
 // 3-透明展示柜
 let show = [

后台管理/src/pages/A2content/A2tab3/index.module.scss

@@ -1,4 +1,16 @@
 .A2tab3 {
+  position: relative;
   :global {
+    .A23right {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+    .A23btn {
+      display: flex;
+      .ant-btn-primary {
+        background-color: var(--themeColor3) !important;
+      }
+    }
   }
 }

后台管理/src/pages/A2content/A2tab3/index.tsx

@@ -1,9 +1,130 @@
-import React from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import TopSearch from '@/pages/ZcomPage/TopSearch'
+import { A3topArr } from '@/pages/A3goods/data'
+import { Button } from 'antd'
+import A3add, { A3addType } from '@/pages/A3goods/A3add'
+import { goodsTableC } from '@/utils/tableData'
+import { API_A23getList } from '@/store/action/A2content'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import MoveTable from '@/pages/ZcomPage/MoveTable'
+import { API_A3getList } from '@/store/action/A3goods'
+
+const typeArr = [
+  { name: '历史主题', key: 'history' },
+  { name: '红色主题', key: 'red' },
+  { name: '非遗主题', key: 'ich' }
+]
+
 function A2tab3() {
+  const topDomRef = useRef<any>(null)
+
+  // 主题
+  const [type, setType] = useState('history')
+
+  useEffect(() => {
+    topDomRef.current.clickSearch({ topic: type })
+  }, [type])
+
+  // --------------右侧按钮
+  const rightBtn = useMemo(() => {
+    return (
+      <div className='A23right'>
+        <div className='A23btn'>
+          {typeArr.map(v => (
+            <Button
+              onClick={() => setType(v.key)}
+              type={type === v.key ? 'primary' : 'default'}
+              key={v.key}
+            >
+              {v.name}
+            </Button>
+          ))}
+        </div>
+        <div>
+          <Button type='primary' onClick={() => topDomRef.current.clickSearch()}>
+            查询
+          </Button>
+          <Button onClick={() => topDomRef.current.clickReset({ topic: type })}>重置</Button>
+          <Button type='primary' onClick={() => setSetShow(true)}>
+            设置
+          </Button>
+        </div>
+      </div>
+    )
+  }, [type])
+
+  // 点击设置
+  const [setShow, setSetShow] = useState(false)
+
+  // 点击查看
+  const [lookInfo, setLookInfo] = useState({} as A3addType)
+
+  const tableInfo = useSelector((state: RootState) => state.A2content.A23List)
+
+  const rightCan = useMemo(() => {
+    return { topic: type }
+  }, [type])
+
   return (
     <div className={styles.A2tab3}>
-      <h1>A2tab3</h1>
+      <TopSearch
+        yHeight={620}
+        ref={topDomRef}
+        leftArr={A3topArr}
+        rightBtn={rightBtn}
+        waiWidth={600}
+        sonWidth='15.8%'
+        getListAPI={API_A23getList}
+        tableInfo={tableInfo}
+        columnsTemp={goodsTableC}
+        baseNo={true}
+        tableLastBtn={[
+          {
+            title: '操作',
+            fixed: 'right',
+            width: 120,
+            render: (item: any) => {
+              return (
+                <>
+                  <Button
+                    size='small'
+                    type='text'
+                    onClick={() => setLookInfo({ id: item.id, txt: '查看' })}
+                  >
+                    查看
+                  </Button>
+                </>
+              )
+            }
+          }
+        ]}
+        widthSet={{ address: 300, intro: 300 }}
+      />
+
+      {/* 查看藏品  */}
+      {lookInfo.id ? (
+        <A3add
+          sInfo={lookInfo}
+          upTableFu={() => topDomRef.current.getListFu()}
+          addTableFu={() => topDomRef.current.clickReset()}
+          closeFu={() => setLookInfo({} as A3addType)}
+        />
+      ) : null}
+
+      {/* 点击设置 */}
+      {setShow ? (
+        <MoveTable
+          closeFu={flag => {
+            setSetShow(false)
+            if (flag) topDomRef.current.clickReset({ topic: type })
+          }}
+          leftApi={API_A3getList}
+          rightApi={API_A23getList}
+          rightCan={rightCan}
+        />
+      ) : null}
     </div>
   )
 }

后台管理/src/pages/A3goods/index.module.scss

@@ -2,6 +2,6 @@
   background-color: #fff;
   border-radius: 10px;
   position: relative;
-  :global {
-  }
+  // :global {
+  // }
 }

后台管理/src/pages/Layout/index.tsx

@@ -212,7 +212,6 @@ function Layout() {
     <div className={styles.Layout}>
       {isConnected ? (
         <>
-          {' '}
           <div className='layoutRightTop'>
             <img className='layLogo' src={require('@/assets/img/logo_red.png')} alt='' />
 

后台管理/src/pages/ZcomPage/MoveTable/index.module.scss

@@ -0,0 +1,98 @@
+.MoveTable {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 1400px !important;
+      top: 60px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .ant-table-body {
+      height: 550px;
+    }
+
+    .MTtop {
+      padding-top: 10px;
+      display: flex;
+      justify-content: space-between;
+      .MTtop1 {
+        width: calc(100% - 160px);
+        display: flex;
+        .MTtopRow {
+          width: 16%;
+          margin-right: 10px;
+          .ant-select {
+            width: 100%;
+          }
+        }
+      }
+      .MTtop2 {
+        .ant-btn {
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .MTmain {
+      margin-top: 15px;
+      display: flex;
+
+      .MTMtiti {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        & > span {
+          color: #999;
+          margin-left: 10px;
+          font-size: 16px;
+        }
+      }
+
+      .MTMll {
+        width: calc(50% - 60px);
+      }
+
+      .MTMmove {
+        width: 80px;
+        margin: 0 20px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        .ant-btn {
+          margin: 10px 0;
+        }
+      }
+
+      .MTMrr {
+        width: calc(50% - 60px);
+      }
+
+      .MTcheck {
+        cursor: pointer;
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .ant-table-cell {
+        padding: 8px !important;
+      }
+    }
+
+    .MTbtn {
+      margin-top: 30px;
+      text-align: center;
+      .ant-btn {
+        margin: 0 15px;
+      }
+    }
+  }
+}

后台管理/src/pages/ZcomPage/MoveTable/index.tsx

@@ -0,0 +1,349 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Cascader, Checkbox, Input, Modal, Select, Table } from 'antd'
+import { A3topArr } from '@/pages/A3goods/data'
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'
+import ImageLazy from '@/components/ImageLazy'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  leftApi: any
+  rightApi: any
+  closeFu: (flag: boolean) => void
+  rightCan?: any
+}
+
+function MoveTable({ leftApi, rightApi, closeFu, rightCan }: Props) {
+  const [formData, setFormData] = useState<any>({ pageNum: 1, pageSize: 99999 })
+  const formDataRef = useRef({ pageNum: 1, pageSize: 99999 })
+
+  useEffect(() => {
+    formDataRef.current = formData
+  }, [formData])
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(0)
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setFormData({ ...formData, pageNum: 1 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [formData])
+
+  const timeRef = useRef(0)
+
+  const [leftAll, setLeftAll] = useState<any[]>([])
+  const [leftAc, setLeftAc] = useState<any[]>([])
+  const [rightAll, setRightAll] = useState<any[]>([])
+  const [rightAc, setRightAc] = useState<any[]>([])
+
+  const [checkLeft, setCheckLeft] = useState<number[]>([])
+  const [checkRight, setCheckRight] = useState<number[]>([])
+
+  const checkLeftFu = useCallback(
+    (id: number) => {
+      if (checkLeft.includes(id)) setCheckLeft(checkLeft.filter(v => v !== id))
+      else setCheckLeft([...checkLeft, id])
+    },
+    [checkLeft]
+  )
+
+  const checkRightFu = useCallback(
+    (id: number) => {
+      if (checkRight.includes(id)) setCheckRight(checkRight.filter(v => v !== id))
+      else setCheckRight([...checkRight, id])
+    },
+    [checkRight]
+  )
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(async () => {
+    const obj1: any = { ...formDataRef.current }
+    const obj2: any = { ...formDataRef.current }
+
+    if (rightCan) {
+      for (const k in rightCan) {
+        obj1[k] = rightCan[k]
+      }
+    }
+
+    const res1 = await rightApi(obj1, true)
+    if (res1.code === 0) {
+      const list1 = res1.data.records || []
+
+      if (timeRef.current === 0) setRightAll(list1)
+
+      setRightAc(list1)
+
+      const res2 = await leftApi(obj2, true)
+
+      if (res2.code === 0) {
+        const rightIds: number[] = list1.map((v: any) => v.id)
+
+        let list2: any[] = res2.data.records || []
+
+        list2 = list2.filter(v => !rightIds.includes(v.id))
+
+        if (timeRef.current === 0) setLeftAll(list2)
+        setLeftAc(list2)
+
+        timeRef.current++
+      }
+    }
+  }, [leftApi, rightApi, rightCan])
+
+  useEffect(() => {
+    getListFu()
+    setCheckLeft([])
+    setCheckRight([])
+  }, [getListFu, timeKey])
+
+  // 输入框和下拉框的改变
+  const fromFu = useCallback(
+    (key: string, val: string) => {
+      setFormData({ ...formData, [key]: val })
+    },
+    [formData]
+  )
+
+  // 点击重置
+  const clickReset = useCallback(() => {
+    setFormData({ pageNum: 1, pageSize: 99999 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [])
+
+  // 级联变化
+  const dataChangeFu = useCallback(
+    (val: any, item: any) => {
+      // 省市区选择
+      if (item.type === 'Cascader2') {
+        const txt = val ? val[val.length - 1] : ''
+
+        setFormData({ ...formData, [item.key]: txt, [item.key2]: val })
+      }
+    },
+    [formData]
+  )
+
+  // 全选和反选
+  const checkAll = useCallback(
+    (type: 'left' | 'right') => {
+      if (type === 'left') {
+        if (checkLeft.length !== leftAc.length) setCheckLeft(leftAc.map(v => v.id))
+        else setCheckLeft([])
+      } else {
+        if (checkRight.length !== rightAc.length) setCheckRight(rightAc.map(v => v.id))
+        else setCheckRight([])
+      }
+    },
+    [checkLeft.length, checkRight.length, leftAc, rightAc]
+  )
+
+  // 右边的向左边移
+  const rightToLeft = useCallback(() => {
+    const rightAllIds = rightAll.filter(v => !checkRight.includes(v.id)).map(v => v.id)
+    console.log('右→左', rightAllIds)
+    setCheckRight([])
+    changeFlag.current = true
+    MessageFu.success('操作成功')
+  }, [checkRight, rightAll])
+
+  // 左边的向右边移
+  const leftToRight = useCallback(() => {
+    console.log('左→右', checkLeft)
+    setCheckLeft([])
+    changeFlag.current = true
+    MessageFu.success('操作成功')
+  }, [checkLeft])
+
+  const columns = useCallback(
+    (type: 'left' | 'right') => {
+      return [
+        {
+          width: 100,
+          title: (
+            <>
+              <Checkbox
+                onClick={() => checkAll(type)}
+                indeterminate={
+                  type === 'left'
+                    ? !!checkLeft.length && checkLeft.length !== leftAc.length
+                    : !!checkRight.length && checkRight.length !== rightAc.length
+                }
+                checked={
+                  type === 'left'
+                    ? !!checkLeft.length && checkLeft.length === leftAc.length
+                    : !!checkRight.length && checkRight.length === rightAc.length
+                }
+              >
+                选择
+              </Checkbox>
+            </>
+          ),
+          render: (item: any) => (
+            <div
+              className='MTcheck'
+              onClick={() => {
+                type === 'left' ? checkLeftFu(item.id) : checkRightFu(item.id)
+              }}
+            >
+              <Checkbox
+                checked={
+                  type === 'left' ? checkLeft.includes(item.id) : checkRight.includes(item.id)
+                }
+              />
+            </div>
+          )
+        },
+        {
+          width: 100,
+          title: '封面',
+          render: (item: any) => (
+            <div className='tableImgAuto'>
+              <ImageLazy
+                width={60}
+                height={60}
+                srcBig={item.thumbPc || item.thumb}
+                src={item.thumb || item.thumbPc}
+              />
+            </div>
+          )
+        },
+        {
+          title: '名称',
+          render: (item: any) => item.name || '（空）'
+        },
+        {
+          title: '总登记号',
+          render: (item: any) => item.num || '（空）'
+        }
+      ]
+    },
+    [checkAll, checkLeft, checkLeftFu, checkRight, checkRightFu, leftAc.length, rightAc.length]
+  )
+
+  // 数据是否改变了，关闭的时候需要重置外层列表
+  const changeFlag = useRef(false)
+
+  return (
+    <Modal
+      getContainer={() => document.getElementById('root') as HTMLElement}
+      wrapClassName={styles.MoveTable}
+      destroyOnClose
+      open={true}
+      title='设置展示藏品'
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='MTtop'>
+        <div className='MTtop1'>
+          {A3topArr.map(item => (
+            <div key={item.key} className='MTtopRow'>
+              {item.type === 'Select' ? (
+                <Select
+                  placeholder={item.placeholder}
+                  options={item.options}
+                  allowClear
+                  value={formData[item.key] || null}
+                  onChange={e => fromFu(item.key, e)}
+                />
+              ) : item.type === 'Input' ? (
+                <Input
+                  placeholder={item.placeholder}
+                  allowClear
+                  value={formData[item.key] || ''}
+                  onChange={e => fromFu(item.key, e.target.value.trim())}
+                />
+              ) : item.type === 'Cascader2' ? (
+                // 省市区选择
+                <Cascader
+                  changeOnSelect
+                  options={item.options}
+                  placeholder={item.placeholder}
+                  allowClear
+                  value={formData[item.key2!] || []}
+                  onChange={e => dataChangeFu(e, item)}
+                />
+              ) : null}
+            </div>
+          ))}
+        </div>
+        <div className='MTtop2'>
+          <Button type='primary' onClick={clickSearch}>
+            查询
+          </Button>
+          <Button onClick={clickReset}>重置</Button>
+        </div>
+      </div>
+
+      <div className='MTmain'>
+        <div className='MTMll'>
+          <div className='MTMtiti'>
+            <h3>藏品清单</h3>
+            <span>
+              共{leftAll.length}条藏品信息；当前选中{checkLeft.length}条
+            </span>
+          </div>
+
+          <Table
+            scroll={{ y: 550 }}
+            columns={columns('left')}
+            dataSource={leftAc}
+            rowKey='id'
+            size='middle'
+            pagination={false}
+          />
+        </div>
+
+        <div className='MTMmove'>
+          <Button
+            onClick={rightToLeft}
+            disabled={checkRight.length === 0}
+            type='primary'
+            icon={<ArrowLeftOutlined />}
+            size='large'
+          />
+          <Button
+            onClick={leftToRight}
+            disabled={checkLeft.length === 0}
+            type='primary'
+            icon={<ArrowRightOutlined />}
+            size='large'
+          />
+        </div>
+
+        <div className='MTMrr'>
+          <div className='MTMtiti'>
+            <h3>展示藏品</h3>
+            <span>
+              共{rightAll.length}条藏品信息；当前选中{checkRight.length}条
+            </span>
+          </div>
+
+          <Table
+            scroll={{ y: 550 }}
+            columns={columns('right')}
+            dataSource={rightAc}
+            rowKey='id'
+            size='middle'
+            pagination={false}
+          />
+        </div>
+      </div>
+
+      <div className='MTbtn'>
+        <Button onClick={() => closeFu(changeFlag.current)}>关闭</Button>
+        {/* <MyPopconfirm txtK='取消' onConfirm={closeFu} /> */}
+      </div>
+    </Modal>
+  )
+}
+
+const MemoMoveTable = React.memo(MoveTable)
+
+export default MemoMoveTable

后台管理/src/pages/ZcomPage/TopSearch/index.tsx

@@ -19,6 +19,7 @@ type Props = {
   yHeight?: number
   classKey?: string
   widthSet?: any
+  baseNo?: boolean
 }
 
 function TopSearch(
@@ -33,7 +34,8 @@ function TopSearch(
     tableInfo,
     classKey,
     widthSet,
-    yHeight = 670
+    yHeight = 670,
+    baseNo = false
   }: Props,
   ref: any
 ) {
@@ -51,12 +53,23 @@ function TopSearch(
   const [timeKey, setTimeKey] = useState(0)
 
   // 点击搜索
-  const clickSearch = useCallback(() => {
-    setFormData({ ...formData, pageNum: 1 })
-    setTimeout(() => {
-      setTimeKey(Date.now())
-    }, 50)
-  }, [formData])
+  const clickSearch = useCallback(
+    (moreCan?: any) => {
+      const data = { ...formData, pageNum: 1 }
+
+      if (moreCan) {
+        for (const k in moreCan) {
+          data[k] = moreCan[k]
+        }
+      }
+
+      setFormData(data)
+      setTimeout(() => {
+        setTimeKey(Date.now())
+      }, 50)
+    },
+    [formData]
+  )
 
   // 封装发送请求的函数
   const getListFu = useCallback(() => {
@@ -67,8 +80,11 @@ function TopSearch(
     if (getListAPI) dispatch(getListAPI(obj))
   }, [dispatch, getListAPI])
 
+  const baseRef = useRef(baseNo ? 0 : 1)
+
   useEffect(() => {
-    getListFu()
+    if (baseRef.current) getListFu()
+    else baseRef.current = 1
   }, [getListFu, timeKey])
 
   // 输入框和下拉框的改变
@@ -80,8 +96,16 @@ function TopSearch(
   )
 
   // 点击重置
-  const clickReset = useCallback(() => {
-    setFormData({ pageNum: 1, pageSize: 10 })
+  const clickReset = useCallback((moreCan?: any) => {
+    const data: any = { pageNum: 1, pageSize: 10 }
+
+    if (moreCan) {
+      for (const k in moreCan) {
+        data[k] = moreCan[k]
+      }
+    }
+
+    setFormData(data)
     setTimeout(() => {
       setTimeKey(Date.now())
     }, 50)

后台管理/src/store/action/A2content.ts

@@ -50,6 +50,7 @@ export const API_A21getMes = () => {
   return http.get('cms/ai/getContent')
 }
 
+// 没有聊天记录的时候 第一条记录消息
 export const oneMsgRes = (titArr: any[]) => {
   let tit = titArr.length ? '' : '你是一个乐于助人的助手'
 
@@ -114,7 +115,25 @@ export const API_A22getList = (): any => {
   return async (dispatch: AppDispatch) => {
     const res = await http.post('cms/exhibit/getList', { pageNum: 1, pageSize: 99999 })
     if (res.code === 0) {
-      dispatch({ type: 'A22/getList', payload: res.data || [] })
+      dispatch({ type: 'A22/getList', payload: res.data.records || [] })
+    }
+  }
+}
+
+// -------------------文物互动墙-----------------------------
+export const API_A23getList = (data: any, all?: boolean): any => {
+  const url = 'cms/wall/getList'
+
+  if (all) return http.post(url, data)
+
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post(url, data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records || [],
+        total: res.data.total
+      }
+      dispatch({ type: 'A23/getList', payload: obj })
     }
   }
 }

后台管理/src/store/action/A3goods.ts

@@ -2,9 +2,13 @@ import http from '@/utils/http'
 import { AppDispatch } from '..'
 
 // 藏品管理-获取列表
-export const API_A3getList = (data: any): any => {
+export const API_A3getList = (data: any, all?: boolean): any => {
+  const url = 'cms/good/pageList'
+
+  if (all) return http.post(url, data)
+
   return async (dispatch: AppDispatch) => {
-    const res = await http.post('cms/good/pageList', data)
+    const res = await http.post(url, data)
     if (res.code === 0) {
       const obj = {
         list: res.data.records,

后台管理/src/store/reducer/A2content.ts

@@ -3,11 +3,18 @@ import { A21InfoType } from '@/pages/A2content/data'
 // 初始化状态
 const initState = {
   A21info: {} as A21InfoType,
-  A22List: [] as any[]
+  A22List: [] as any[],
+  A23List: {
+    list: [] as any[],
+    total: 0
+  }
 }
 
 // 定义 action 类型
-type Props = { type: 'A21/getInfo'; payload: A21InfoType } | { type: 'A22/getList'; payload: any[] }
+type Props =
+  | { type: 'A21/getInfo'; payload: A21InfoType }
+  | { type: 'A22/getList'; payload: any[] }
+  | { type: 'A23/getList'; payload: { list: any[]; total: number } }
 
 // reducer
 export default function userReducer(state = initState, action: Props) {
@@ -16,6 +23,8 @@ export default function userReducer(state = initState, action: Props) {
       return { ...state, A21info: action.payload }
     case 'A22/getList':
       return { ...state, A22List: action.payload }
+    case 'A23/getList':
+      return { ...state, A23List: action.payload }
 
     default:
       return state

后台管理/src/utils/tableData.ts

@@ -34,8 +34,8 @@ export const Z7tableC = [
 
 export const goodsTableC = [
   ['txt2', '名称', 'name', 150],
+  ['txt2', '总登记号', 'num', 150],
   ['img', '封面', 'thumb'],
-  ['txt', '总登记号', 'num'],
   ['dict', '年代', 'ageDictId'],
   ['dict', '质地', 'textureDictId'],
   ['dict', '类别', 'typeDictId'],