feats

src/pages/house/edit/components/EnDash/index.jsx

 
 export default function EnDash(props) {
     const { size = 1, color = '#999', style = {}, ...left } = props
-    const size = props.size || 1
-    const color = props.color || '#999'
 
-    const newSt = {
+    const newSt = { 
         ...style,
-        borderBottom: `${size}px dashed ${color}`,
-        transform: 'translateY(50%)'
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
     }
 
-    return <div style={newSt} { ...left } />
+    return <div style={newSt} { ...left }><hr style={{ border: 'none', borderBottom: `${size}px dashed ${color}`, width: '100%' }} /></div>
 }

src/pages/house/edit/components/HelpDoc/index.jsx

+import React, { PureComponent } from 'react'
+import { Modal, Row, Col } from 'antd'
+import EnDash from '../EnDash'
+
+import Style from './style.less'
+import HotBlock from '../HotBlock'
+
+const dataset = [
+  {
+    label: '(0)',
+    value: 0,
+  },
+  {
+    label: '(1)',
+    value: 1,
+  },
+  {
+    label: '(2)',
+    value: 2,
+  },
+  {
+    label: '(3)',
+    value: 3,
+  },
+  {
+    label: '(4)',
+    value: 4,
+  },
+  {
+    label: '(5)',
+    value: 5,
+  },
+  {
+    label: '(6~10)',
+    value: 8,
+  },
+  {
+    label: '(11~20)',
+    value: 15,
+  },
+  {
+    label: '(21~30)',
+    value: 25,
+  },
+  {
+    label: '(31~40)',
+    value: 35,
+  },
+  {
+    label: '(41~50)',
+    value: 45,
+  },
+  {
+    label: '(51~100)',
+    value: 80,
+  },
+  {
+    label: '(101~200)',
+    value: 150,
+  },
+  {
+    label: '(200以上)',
+    value: 201,
+  },
+]
+
+function Cell(props) {
+  return (
+    <Row type="flex" align="middle" gutter={20}>
+      <Col span={4}>{props.left}</Col>
+      <Col span={12}><EnDash /></Col>
+      <Col span={6}>{props.right}</Col>
+    </Row>
+  )
+}
+
+export default function HelpDoc(props) {
+  return (
+    <Modal footer={null} title="相关说明" visible={props.visible} onCancel={props.onCancel} width={800}>
+      <div className={Style.article}>
+        <div className={Style.section}>
+          <div className={Style.title}>1.图例解释：</div>
+          <div>
+            <Cell left="1号楼" right="楼栋/幢" />
+            <Cell left="2单元" right="单元" />
+            <Cell left="3楼" right="楼层" />
+            <Cell left="301" right="房号" />
+            <Cell left="1人" right="预选人数" />
+            <Cell left="234万" right="价格" />
+            <Cell left="A户型" right="户型名" />
+          </div>
+        </div>
+        <div className={Style.section}>
+          <div className={Style.title}>2.预选人数（热度）：</div>
+          <div>每有一位客户预选此房源，热度自动增加1，热度越大说明想购买此房源的用户越多，认筹摇号购买难度越大。</div>
+        </div>
+        <div className={Style.section}>
+          <div className={Style.title}>3.热度指标:</div>
+          <div className={Style.subtitle}>颜色越深代表热度越高。黑底白字代表房源未发布,未发布房源用户不会看到。</div>
+          <div className={Style.flex}>
+            {
+              dataset.map((block) => (<div className={Style['flex-item']} key={block.value}><HotBlock number={block.value}>{block.label}</HotBlock></div>))
+            }
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

src/pages/house/edit/components/HelpDoc/style.less

+.article {
+    .section {
+        font-size: 16px;
+        line-height: 1.8em;
+        color: #666;
+
+        & + .section {
+            margin-top: 24px;
+        }
+    }
+
+    .title {
+        font-size: 18px;
+        line-height: 2em;
+        color: #333;
+    }
+
+    .subtitle {
+        font-size: 14px;
+        line-height: 1.6em;
+        color: #999;
+    }
+
+    .flex {
+        display: flex;
+        flex-wrap: wrap;
+
+        .flex-item {
+            margin-top: 16px;
+            margin-right: 8px;
+            flex: none;
+            width: 100px;
+            text-align: center;
+        }
+    }
+}

src/pages/house/edit/components/HouseGrid/Floor.jsx

 
   return (
     <div className={Style.floor}>
-      <div className={Style.head}>{floorName}</div>
-      <div className={Style.body}>
+      <div className={Style['floor-head']}>{floorName}</div>
+      <div className={Style['floor-body']}>
         {roomList.map((room) => {
           return (
             <div className={Style.item} key={room.houseId} >

src/pages/house/edit/components/HouseGrid/Room.jsx

 import Style from './style.less'
 
 export default function Room(props) {
-  const { roomNumber, totalNum, price, apartmentName, status } = props.dataset || {}
-  const personNum = `(${totalNum}人)`
+  const { roomName, price, apartmentName, status, heat, realHeat } = props.dataset || {}
+  let personNum = props.hotType === 1 ? (heat || 0) : (realHeat || 0)
+  if (props.hotType === 3) {
+    personNum = 0 + heat + realHeat
+  }
 
   const handleClick = () => {
     if (props.onClick) {
     }
   }
 
+  const wanY = Number(price / 10000).toFixed(0)
+
   return (
-    <HotBlock number={totalNum}>
-      <div className={Style.room} onClick={handleClick}>
-        <div className={classNames(Style.warn, {[`${Style.offline}`]: status !== 1})}>{roomNumber}</div>
-        <div className={classNames(Style.warn, {[`${Style.offline}`]: status !== 1})}>{personNum}</div>
-        <div className={classNames(Style.info, {[`${Style.offline}`]: status !== 1})}>{price}</div>
-        <div className={classNames(Style.info, {[`${Style.offline}`]: status !== 1})}>{apartmentName}</div>
+    <HotBlock number={personNum}>
+      <div className={classNames(Style.room, { [`${Style.offline}`]: status !== 1 })} onClick={handleClick}>
+        <div className={Style.warn}>{roomName}</div>
+        <div className={Style.warn}>{`(${personNum}人)`}</div>
+        <div className={Style.info}>{`${wanY} 万`}</div>
+        <div className={Style.info}>{apartmentName}</div>
       </div>
     </HotBlock>
   )

src/pages/house/edit/components/HouseGrid/Unit.jsx

 
   return (
     <div className={Style.unit}>
-      <div className={Style.head}>{unitName}</div>
-      <div className={Style.body}>
+      <div className={Style['unit-head']}>{unitName}</div>
+      <div className={Style['unit-body']}>
         {floorList.map(floor => props.render(floor))}
       </div>
     </div>

src/pages/house/edit/components/HouseGrid/index.js

 
 
 export default function(props) {
-  const { blockList = [] } = props.dataset || {}
+  const blockList = props.dataset || []
   
   // 仅仅是一个函数, 不是函数式组件
   function renderRoom(room) {
     <div>
       {
         blockList.map((block) => (
-          <div>
-            <PageHeader key={block.blockId} title={`${block.termName} ${block.blockName}`} backIcon={false} />
+          <div key={block.blockId} style={{marginTop: '20px', overflowX: 'auto'}}>
+            <PageHeader title={`${block.termName} ${block.blockName}`} backIcon={false} />
+            <div style={{ display: 'flex', padding: '10px' }}>
             {
-              (block.unitList || []).map((unit) => (<Card key={unit.unitId}><Unit dataset={unit} render={renderFloor} /></Card>))
+              (block.unitList || []).map((unit) => (<div key={unit.unitId} style={{ flex: 'auto', marginRight: '30px' }} ><Unit dataset={unit} render={renderFloor} /></div>))
             }
+            </div>
           </div>
         ))
       }

src/pages/house/edit/components/HouseGrid/style.less

     color: #730000;
   }
 
-  .tip {
-    color: #BB9C79;
-  }
-
-  .offline {
+  &.offline {
     color: #fff;
     background: #000;
+    
+    .info, .warn {
+      color: #fff;
+    }
   }
 }
 
 .floor {
   display: flex;
 
-  .head {
+  &-head {
     font-size: 20px;
     padding-top: 36px;
     flex: none;
     width: 14%;
-    text-align: left;
+    min-width: 100px;
+    text-align: center;
   }
 
-  .body {
+  &-body {
+    padding-top: 10px;
     text-align: center;
     flex: auto;
     display: flex;
     justify-content: flex-start;
-    flex-wrap: wrap;
+    overflow-x: auto;
 
     .item {
-      width: 31%;
       flex: none;
+      width: 110px;
 
       & + .item {
           margin-left: 2%;
 }
 
 .unit {
-  .head {
-    padding: 12px 40px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  max-width: 600px;
+
+  &-head {
+    padding-left: 40px;
     font-size: 22px;
-    line-height: 1.8em;
+    line-height: 44px;
     color: #000;
-    background-color: #F8F8F8;
+    background: #f8f8f8;
   }
 
-  .body {
-    padding: 0 20px;
+  &-body {
+    // padding: 0 20px;
   }
 }

src/pages/house/edit/components/preselectionImg.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Button, Radio } from 'antd';
+import { Form, Button, Radio, Icon } from 'antd';
 import HouseGrid from './HouseGrid';
-import apis from '../../../../services/apis';
+import { fetch, apis } from '../../../../utils/request'
+import HelpDoc from './HelpDoc';
+
+const getHouseList = fetch(apis.house.listHouseResources)
+
+function groupHouseList(houseList = []) {
+  // 先按照楼层分组
+  const floorList = houseList.reduce((list, room) => {
+    let found = false
+
+    list.forEach((floor) => {
+      if (floor.floorId === room.floorId) {
+        found = true
+        floor.roomList.push(room)
+      }
+    })
+    
+    if (!found) {
+      list.push({ ...room, roomList: [ room ]})
+    }
+
+    return list
+  }, [])
+
+  // 再按照单元分组
+  const unitList = floorList.reduce((list, floor) => {
+    let found = false
+    list.forEach((unit) => {
+      if (unit.unitId === floor.unitId) {
+        found = true
+        unit.floorList.push(floor)
+      }
+    })
+    
+    if (!found) {
+      list.push({ ...floor, floorList: [ floor ]})
+    }
+
+    return list
+  }, [])
+
+  // 最后按照楼栋分组
+  return unitList.reduce((list, unit) => {
+    let found = false
+    list.forEach((block) => {
+      if (block.blockId === unit.blockId) {
+        found = true
+        block.unitList.push(unit)
+      }
+    })
+    
+    if (!found) {
+      list.push({ ...unit, unitList: [ unit ]})
+    }
+
+    return list
+  }, [])
+}
 
 const PreselectionImg = props => {
+  const salesBatchId = props.salesBatchId
   const [hotType, setHotType] = useState(1)
+  const [blockList, setBlockList] = useState([])
+  const [showHelp, setShowHelp] = useState(false)
+
+  useEffect(() => {
+    if (salesBatchId) {
+      getHouseList({ params: { salesBatchId } }).then(res => {
+        const groupedData = groupHouseList(res)
+        setBlockList(groupedData)
+      })
+    }
+  }, [salesBatchId])
 
   return (
     <div>
       <Form layout="inline">
         <Form.Item label="热度选择">
-          <Radio.Group onChange={setHotType} value={hotType}>
+          <Radio.Group onChange={e => setHotType(e.target.value)} value={hotType}>
             <Radio value={1}>基础热度</Radio>
             <Radio value={2}>实际热度</Radio>
             <Radio value={3}>显示热度</Radio>
-            <Button type="primary" shape="circle" icon="question-circle" size="small" />
+            <Icon type="question-circle" theme="filled" style={{ fontSize: '18px', color: '#F00' }} onClick={() => setShowHelp(true)} />
           </Radio.Group>
         </Form.Item>
         <div>基础热度即预设的预选数量，实际并不存在用户预选，用来美化数据。实际热度即真实用户预选数量，基础热度+实际热度=显示热度</div>
       </Form>
-      <HouseGrid dataset={} hotType={hotType} />
+      <HouseGrid dataset={blockList} hotType={hotType} />
+      <HelpDoc visible={showHelp} onCancel={() => setShowHelp(false)} />
     </div>
   )
 }

src/pages/house/edit/index.jsx

     setTab('preselectionRecord')
   }
 
+  const batchId = salesBatchData.salesBatchId || (props.location.query && props.location.query.id)
+
   return (
     <>
       <Radio.Group value={ tab } buttonStyle="solid" onChange={e => tabsCallback(e)}>
         <Radio.Button value="visitRecord">访问记录</Radio.Button>
       </Radio.Group>
       <div style={{ marginTop: '20px' }}>
-        { (tab === 'base' && <Base salesBatchId={{ salesBatchId: salesBatchData.salesBatchId || (props.location.query && props.location.query.id) }} onSuccess={e => buildingOnSuccess(e)}/>)} 
+        { (tab === 'base' && <Base salesBatchId={{ batchId }} onSuccess={e => buildingOnSuccess(e)}/>)} 
         { (tab === 'house' && <HouseTab salesBatchId={props.location.query.id} buildingId={props.location.query.buildingId} onSuccess={e => housTabChange(e)}/>)}
-        { (tab === 'poster' && <Poster salesBatchId={{ salesBatchId: salesBatchData.salesBatchId || (props.location.query && props.location.query.id) }}/>)}
-        { (tab === 'share' && <Share salesBatchId={{ salesBatchId: salesBatchData.salesBatchId || (props.location.query && props.location.query.id) }}/>)}
-        { (tab === 'preselectionImg' && <PreselectionImg />)}
-        { (tab === 'preselectionRecord' && <PreselectionRecord houseId={houseId} buildingId={props.location.query.buildingId} salesBatchId={{ salesBatchId: salesBatchData.salesBatchId || (props.location.query && props.location.query.id) }}/>)}
-        { (tab === 'shareRecord' && <ShareRecord salesBatchId={{ salesBatchId: salesBatchData.salesBatchId || (props.location.query && props.location.query.id) }}/>)}
-        { (tab === 'visitRecord' && <VisitRecord salesBatchId={{ salesBatchId: salesBatchData.salesBatchId || (props.location.query && props.location.query.id) }}/>)}
+        { (tab === 'poster' && <Poster salesBatchId={{ batchId }}/>)}
+        { (tab === 'share' && <Share salesBatchId={{ batchId }}/>)}
+        { (tab === 'preselectionImg' && <PreselectionImg salesBatchId={batchId} />)}
+        { (tab === 'preselectionRecord' && <PreselectionRecord houseId={houseId} buildingId={props.location.query.buildingId} salesBatchId={{ batchId }}/>)}
+        { (tab === 'shareRecord' && <ShareRecord salesBatchId={{ batchId }}/>)}
+        { (tab === 'visitRecord' && <VisitRecord salesBatchId={{ batchId }}/>)}
       </div>
     </>
   )

src/services/apis.js

     url: `${prefix}/house/saveExcelValue`,
     method: 'POST',
     action: 'upload',
+  },
+  listHouseResources: {
+    url: `${prefix}/listHousingResources`,
+    method: 'GET',
+    action: 'admin.taHousingResources.get',
   }
  },
 }