线路管理

src/assets/styles/base.css

@@ -40,8 +40,8 @@ textarea {
 }
 /* 主题色 */
 :root {
-  --themeColor: #0A3B40;
-  --themeColor2: #2CD196;
+  --themeColor: #0a3b40;
+  --themeColor2: #2cd196;
 }
 /* 找不到页面 */
 .noFindPage {
@@ -94,49 +94,6 @@ textarea {
 #root .ant-btn-text.ant-btn-dangerous {
   color: #ff4d4d;
 }
-#root .ant-pagination .ant-pagination-item {
-  border-radius: 50%;
-  border: 1px solid #999;
-  background-color: transparent !important;
-}
-#root .ant-pagination .ant-pagination-item-active {
-  background-color: var(--themeColor) !important;
-}
-#root .ant-pagination .ant-pagination-item-active a {
-  color: #fff !important;
-}
-#root .ant-pagination .ant-pagination-item:hover {
-  background-color: var(--themeColor) !important;
-}
-#root .ant-pagination .ant-pagination-item:hover a {
-  color: #fff !important;
-}
-#root .ant-pagination-prev {
-  border-radius: 50% !important;
-  border: 1px solid #999;
-}
-#root .ant-pagination-prev:hover {
-  background-color: var(--themeColor);
-}
-#root .ant-pagination-prev:hover button {
-  color: #fff;
-}
-#root .ant-pagination-next {
-  border-radius: 50% !important;
-  border: 1px solid #999;
-}
-#root .ant-pagination-next:hover {
-  background-color: var(--themeColor);
-}
-#root .ant-pagination-next:hover button {
-  color: #fff;
-}
-#root .ant-pagination-disabled {
-  border: 1px solid #ccc;
-}
-#root .ant-pagination-disabled:hover {
-  background-color: transparent;
-}
 #root .tableImgAuto {
   display: flex;
   justify-content: center;

src/assets/styles/base.less

@@ -11,7 +11,8 @@ html {
 }
 
 body {
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
   color: black;
 }
@@ -50,21 +51,16 @@ textarea {
 
 /* 主题色 */
 :root {
-  --themeColor:  #0A3B40;
-  --themeColor2: #2CD196;
+  --themeColor: #0a3b40;
+  --themeColor2: #2cd196;
 }
 
-
-
-
-
 /* 找不到页面 */
 .noFindPage {
   opacity: 0;
-  transition: opacity .5s;
+  transition: opacity 0.5s;
 }
 
-
 /* 兼容360浏览器的下拉框 */
 .ant-select-selector {
   position: relative;
@@ -73,7 +69,6 @@ textarea {
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
-
 // 重置antd样式
 #root {
   width: 100vw;
@@ -120,66 +115,61 @@ textarea {
   }
 
   /* antd分页器样式 */
-  .ant-pagination .ant-pagination-item {
-    border-radius: 50%;
-    border: 1px solid #999;
-    background-color: transparent !important;
-  }
-
-  .ant-pagination .ant-pagination-item-active {
-    background-color: var(--themeColor) !important;
-  }
-
-
-  .ant-pagination .ant-pagination-item-active a {
-    color: #fff !important;
-  }
-
-  .ant-pagination .ant-pagination-item:hover {
-    background-color: var(--themeColor) !important;
-  }
-
-  .ant-pagination .ant-pagination-item:hover a {
-    color: #fff !important;
-  }
+  // .ant-pagination .ant-pagination-item {
+  //   border-radius: 50%;
+  //   border: 1px solid #999;
+  //   background-color: transparent !important;
+  // }
 
-  .ant-pagination-prev {
-    border-radius: 50% !important;
-    border: 1px solid #999;
-  }
+  // .ant-pagination .ant-pagination-item-active {
+  //   background-color: var(--themeColor) !important;
+  // }
 
-  .ant-pagination-prev:hover {
-    background-color: var(--themeColor);
-  }
+  // .ant-pagination .ant-pagination-item-active a {
+  //   color: #fff !important;
+  // }
 
-  .ant-pagination-prev:hover button {
-    color: #fff;
-  }
+  // .ant-pagination .ant-pagination-item:hover {
+  //   background-color: var(--themeColor) !important;
+  // }
 
+  // .ant-pagination .ant-pagination-item:hover a {
+  //   color: #fff !important;
+  // }
 
+  // .ant-pagination-prev {
+  //   border-radius: 50% !important;
+  //   border: 1px solid #999;
+  // }
 
-  .ant-pagination-next {
-    border-radius: 50% !important;
-    border: 1px solid #999;
-  }
+  // .ant-pagination-prev:hover {
+  //   background-color: var(--themeColor);
+  // }
 
+  // .ant-pagination-prev:hover button {
+  //   color: #fff;
+  // }
 
-  .ant-pagination-next:hover {
-    background-color: var(--themeColor);
-  }
+  // .ant-pagination-next {
+  //   border-radius: 50% !important;
+  //   border: 1px solid #999;
+  // }
 
-  .ant-pagination-next:hover button {
-    color: #fff;
-  }
+  // .ant-pagination-next:hover {
+  //   background-color: var(--themeColor);
+  // }
 
-  .ant-pagination-disabled {
-    border: 1px solid #ccc;
-  }
+  // .ant-pagination-next:hover button {
+  //   color: #fff;
+  // }
 
-  .ant-pagination-disabled:hover {
-    background-color: transparent;
-  }
+  // .ant-pagination-disabled {
+  //   border: 1px solid #ccc;
+  // }
 
+  // .ant-pagination-disabled:hover {
+  //   background-color: transparent;
+  // }
 
   /* 表格的图片居中 */
   .tableImgAuto {
@@ -198,7 +188,6 @@ textarea {
     text-align: center !important;
   }
 
-
   // 树型 表格 定制化
   #A2Table3 {
     .ant-table-row-expand-icon {
@@ -211,18 +200,12 @@ textarea {
       justify-content: flex-start;
     }
   }
-
-
 }
 
-
-
 [hidden] {
   display: none !important;
 }
 
-
-
 #upInput {
   display: none;
 }
@@ -273,4 +256,4 @@ textarea {
   -webkit-box-shadow: inset 0 0 5px transparent;
   border-radius: 10px;
   background: transparent;
-}
+}

src/components/MyTable/index.tsx

@@ -19,6 +19,8 @@ type Props = {
   merge?: { type: string; num: number; loc: 'rowSpan' | 'colSpan' }
   // 定制化表头
   myTitle?: { name: string; Com: React.ReactNode }
+  // 宽度设置
+  widthSet?: any
 }
 
 function MyTable({
@@ -38,7 +40,8 @@ function MyTable({
   lastBtn = [],
   classKey = '',
   merge,
-  myTitle
+  myTitle,
+  widthSet
 }: Props) {
   useEffect(() => {
     const dom = document.querySelector(`.MyTable${classKey} .ant-table-body`) as HTMLDivElement
@@ -105,6 +108,7 @@ function MyTable({
     const arr: any = columnsTemp.map((v: any) => ({
       title: myTitle && v.includes(myTitle.name) ? myTitle.Com : v[1],
       render: dataChangeFu(v),
+      width: widthSet && Reflect.get(widthSet, v[2]) ? Reflect.get(widthSet, v[2]) : 'auto',
       onCell:
         merge && v.includes(merge.type)
           ? // {rowSpan:3}
@@ -115,7 +119,7 @@ function MyTable({
     }))
 
     return arr
-  }, [columnsTemp, dataChangeFu, merge, myTitle])
+  }, [columnsTemp, dataChangeFu, merge, myTitle, widthSet])
 
   return (
     <Table

src/components/ZupOne/index.tsx

@@ -67,7 +67,7 @@ function ZupOne(
       if (e.target.files) {
         // 拿到files信息
         const filesInfo = e.target.files[0]
-        // console.log("-----", filesInfo.type);
+        // console.log('-----', filesInfo.type)
 
         // 校验格式
         const type = format

src/pages/B1panorama/B1add/index.module.scss

@@ -45,7 +45,7 @@
       }
       .B1Abtn {
         margin-top: 40px;
-        padding-left: 66px;
+        padding-left: 80px;
       }
     }
   }

src/pages/B1panorama/data.ts

@@ -1,4 +1,19 @@
-export type B1ListType = any
+export type B1ListType = {
+  content: string
+  createTime: string
+  creatorId: number
+  creatorName: string
+  id: number
+  link: string
+  mediaPath: string
+  module: string
+  name: string
+  sort: number
+  thumb: string
+  thumbPc: string
+  type: string
+  updateTime: string
+}
 
 export type B1keyType = 'pano' | 'line' | 'scene' | 'video'
 

src/pages/B2line/B2add/index.module.scss

@@ -0,0 +1,53 @@
+.B2add {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 800px !important;
+      top: 50px !important;
+    }
+    .B2Amain {
+      border-top: 1px solid #ccc;
+      padding-top: 20px;
+
+      .ant-form-item-label {
+        width: 81px;
+      }
+
+      .formRow {
+        display: flex;
+
+        .formLeft {
+          position: relative;
+          top: 3px;
+          width: 81px;
+          text-align: right;
+
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+
+        .formRight {
+          width: calc(100% - 81px);
+        }
+      }
+      .A3fromRow {
+        position: relative;
+
+        .A3_6Frow {
+          position: absolute;
+          left: 185px;
+          top: 5px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .B2Abtn {
+        margin-top: 40px;
+        padding-left: 80px;
+      }
+    }
+  }
+}

src/pages/B2line/B2add/index.tsx

@@ -0,0 +1,206 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { B1ListType } from '@/pages/B1panorama/data'
+import { Button, Form, FormInstance, InputNumber, Modal, Select } from 'antd'
+import { MessageFu } from '@/utils/message'
+import { B1_APIsave } from '@/store/action/B1panorama'
+import { B2Select } from '../data'
+import TextArea from 'antd/es/input/TextArea'
+import ZupOne from '@/components/ZupOne'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+type Props = {
+  info: B1ListType
+  closeFu: () => void
+  addTableFu: () => void
+  upTableFu: (type: string) => void
+}
+
+function B2add({ info, closeFu, addTableFu, upTableFu }: Props) {
+  const getInfoFu = useCallback((info: B1ListType) => {
+    FormBoxRef.current?.setFieldsValue(info)
+    // 设置封面图
+    ZupThumbRef.current?.setFileComFileFu({
+      fileName: '',
+      filePath: info.thumbPc,
+      thumb: info.thumb
+    })
+    // 设置音频
+    ZupAudioRef.current?.setFileComFileFu({
+      fileName: info.name,
+      filePath: info.mediaPath,
+      thumb: info.mediaPath
+    })
+  }, [])
+
+  useEffect(() => {
+    if (info.id > 0) getInfoFu(info)
+    else FormBoxRef.current?.setFieldsValue({ sort: 999 })
+  }, [getInfoFu, info])
+
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 封面图的ref
+  const ZupThumbRef = useRef<any>(null)
+
+  // 音频的ref
+  const ZupAudioRef = useRef<any>(null)
+
+  // 附件 是否 已经点击过确定
+  const [fileCheck, setFileCheck] = useState(false)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setFileCheck(true)
+  }, [])
+
+  //  通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      setFileCheck(true)
+
+      const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
+      // 没有传 封面图
+      if (!coverUrl1.filePath) return MessageFu.warning('请上传封面')
+
+      const audioInfo = ZupAudioRef.current?.fileComFileResFu()
+
+      const obj = {
+        ...values,
+        id: info.id > 0 ? info.id : null,
+        thumb: coverUrl1.thumb || '',
+        thumbPc: coverUrl1.filePath || '',
+        name: audioInfo.fileName || '',
+        mediaPath: audioInfo.filePath || '',
+        module: 'line'
+      }
+
+      // if (1 + 1 === 2) {
+      //   console.log('------222', obj)
+      //   return
+      // }
+
+      const res = await B1_APIsave(obj)
+
+      if (res.code === 0) {
+        MessageFu.success(`${info.id > 0 ? '编辑' : '新增'}成功`)
+        info.id > 0 ? upTableFu(values.type) : addTableFu()
+
+        closeFu()
+      }
+    },
+    [addTableFu, closeFu, info.id, upTableFu]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.B2add}
+      open={true}
+      title={info.id > 0 ? '编辑' : '新增'}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='B2Amain'>
+        <Form
+          ref={FormBoxRef}
+          name='basic'
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+          scrollToFirstError
+        >
+          <Form.Item label='板块' name='type' rules={[{ required: true, message: '请选择板块' }]}>
+            <Select style={{ width: 200 }} options={B2Select} placeholder='请选择' />
+          </Form.Item>
+
+          <Form.Item
+            label='内容'
+            name='content'
+            rules={[{ required: true, message: '请输入内容' }]}
+          >
+            <TextArea maxLength={1000} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          {/* 封面 */}
+          <div className='formRow'>
+            <div className='formLeft'>
+              <span>* </span>
+              封面：
+            </div>
+            <div className='formRight'>
+              <ZupOne
+                ref={ZupThumbRef}
+                isLook={false}
+                fileCheck={fileCheck}
+                size={5}
+                dirCode='B1panorama'
+                myUrl='cms/content/upload'
+                format={['image/jpeg', 'image/png']}
+                formatTxt='png、jpg和jpeg'
+                checkTxt='请上传封面'
+                upTxt='最多1张；建议尺寸：500 X 240'
+                myType='thumb'
+              />
+            </div>
+          </div>
+
+          {/* 音频 */}
+          <div className='formRow'>
+            <div className='formLeft'>音频：</div>
+            <div className='formRight'>
+              <ZupOne
+                ref={ZupAudioRef}
+                isLook={false}
+                fileCheck={false}
+                size={50}
+                dirCode='B1panoramaAudio'
+                myUrl='cms/content/upload'
+                format={['audio/mpeg']}
+                formatTxt='mp3'
+                checkTxt='请上传音频'
+                upTxt='最多1个。'
+                myType='audio'
+              />
+            </div>
+          </div>
+
+          <Form.Item
+            label='全景链接'
+            name='link'
+            rules={[{ required: true, message: '请输入内容' }]}
+          >
+            <TextArea maxLength={200} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='A3fromRow'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              rules={[{ required: true, message: '请输入排序值' }]}
+            >
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
+            </Form.Item>
+            <div className='A3_6Frow'>
+              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <Form.Item className='B2Abtn'>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoB2add = React.memo(B2add)
+
+export default MemoB2add

src/pages/B2line/data.ts

@@ -0,0 +1,22 @@
+export const B2Select = [
+  {
+    value: '梨子寨寨口',
+    label: '梨子寨寨口'
+  },
+  {
+    value: '石拔三家',
+    label: '石拔三家'
+  },
+  {
+    value: '杨老师家',
+    label: '杨老师家'
+  },
+  {
+    value: '水龙头处',
+    label: '水龙头处'
+  },
+  {
+    value: '精准坪广场',
+    label: '精准坪广场'
+  }
+]

src/pages/B2line/index.module.scss

@@ -1,4 +1,22 @@
 .B2line {
   :global {
+    .B2top {
+      border-radius: 10px;
+      padding: 15px 24px;
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+      .ant-select-selection-placeholder {
+        color: black;
+      }
+    }
+
+    .tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: #fff;
+    }
   }
 }

src/pages/B2line/index.tsx

@@ -1,9 +1,112 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import { useDispatch, useSelector } from 'react-redux'
+import { B1baseFromData, B1ListType } from '../B1panorama/data'
+import { B1_APIdel, B1_APIgetList } from '@/store/action/B1panorama'
+import { RootState } from '@/store'
+import { MessageFu } from '@/utils/message'
+import { Button, Select } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import MyTable from '@/components/MyTable'
+import { B2tableC } from '@/utils/tableData'
+import { B2Select } from './data'
+import B2add from './B2add'
 function B2line() {
+  const dispatch = useDispatch()
+
+  // 顶部筛选
+  const [fromData, setFromData] = useState(B1baseFromData)
+
+  // 封装发送请求的函数
+  const getList = useCallback(async () => {
+    dispatch(B1_APIgetList(fromData, 'line'))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getList()
+  }, [getList])
+
+  // 从仓库中获取表格数据
+  const tableInfo = useSelector((state: RootState) => state.B1panorama.tableInfo.line)
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await B1_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getList()
+      }
+    },
+    [getList]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: B1ListType) => {
+          return (
+            <>
+              <Button size='small' type='text' onClick={() => setEditInfo(item)}>
+                编辑
+              </Button>
+              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+            </>
+          )
+        }
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增/编辑
+  const [editInfo, setEditInfo] = useState({} as B1ListType)
   return (
     <div className={styles.B2line}>
-      <h1>B2line</h1>
+      <div className='pageTitle'>线路管理</div>
+      <div className='B2top'>
+        <div>
+          <span>板块：</span>
+          <Select
+            style={{ width: 200 }}
+            allowClear
+            placeholder='全部'
+            value={fromData.type || undefined}
+            onChange={e => setFromData({ ...fromData, pageNum: 1, type: e })}
+            options={B2Select}
+          />
+        </div>
+
+        <div>
+          <Button type='primary' onClick={() => setEditInfo({ id: -1 } as B1ListType)}>
+            新增
+          </Button>
+        </div>
+      </div>
+      {/* 表格主体 */}
+      <div className='tableBox'>
+        <MyTable
+          widthSet={{ content: 800 }}
+          yHeight={617}
+          list={tableInfo.list}
+          columnsTemp={B2tableC}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+        />
+      </div>
+      {editInfo.id ? (
+        <B2add
+          info={editInfo}
+          closeFu={() => setEditInfo({} as B1ListType)}
+          addTableFu={() => setFromData({ ...B1baseFromData })}
+          upTableFu={type => {
+            type === fromData.type ? getList() : setFromData({ ...B1baseFromData })
+          }}
+        />
+      ) : null}
     </div>
   )
 }

src/store/reducer/B1panorama.ts

@@ -5,19 +5,19 @@ const initState = {
   // 列表数据
   tableInfo: {
     pano: {
-      list: [] as B1ListType,
+      list: [] as B1ListType[],
       total: 0
     },
     line: {
-      list: [] as B1ListType,
+      list: [] as B1ListType[],
       total: 0
     },
     scene: {
-      list: [] as B1ListType,
+      list: [] as B1ListType[],
       total: 0
     },
     video: {
-      list: [] as B1ListType,
+      list: [] as B1ListType[],
       total: 0
     }
   }

src/utils/tableData.ts

@@ -35,6 +35,13 @@ export const B1tableC = [
   ['txt', '排序值', 'sort']
 ]
 
+export const B2tableC = [
+  ['txt', '板块', 'type'],
+  ['img', '图片', 'thumb'],
+  ['text', '内容', 'content', 100],
+  ['txt', '排序值', 'sort']
+]
+
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],
   ['txtChange', '角色', 'isAdmin', { 1: '管理员', 0: '普通成员' }],