42 changed files with 3597 additions and 4 deletions
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
// export function getMembers(orgId) {
|
|||
// return dispatch => basicAction({
|
|||
// type: 'get',
|
|||
// dispatch: dispatch,
|
|||
// actionType: 'GET_MEMBERS',
|
|||
// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
|
|||
// msg: { error: '获取用户列表失败' },
|
|||
// reducer: { name: 'members' }
|
|||
// });
|
|||
// }
|
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as example from './example' |
|||
|
|||
export default { |
|||
...example, |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
import './style.less' |
|||
function BasicInfo(props) { |
|||
|
|||
return <Box title={"事件概况"} > |
|||
<div className='item_left-container '> |
|||
<div className='end_event' onClick={() => { props.endEvent() }}>结束案件</div> |
|||
</div> |
|||
|
|||
</Box> |
|||
} |
|||
|
|||
export default BasicInfo; |
|||
|
|||
|
|||
@ -0,0 +1,13 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
|
|||
function BasicInfo() { |
|||
|
|||
return <Box title={"避难场所"} > |
|||
dd |
|||
</Box> |
|||
} |
|||
|
|||
export default BasicInfo; |
|||
|
|||
|
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
|
|||
function Infrastructure(props) { |
|||
|
|||
|
|||
return <Box title={"基础设施"} > |
|||
|
|||
</Box> |
|||
} |
|||
|
|||
export default Infrastructure; |
|||
|
|||
|
|||
@ -0,0 +1,144 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
import ReactEcharts from 'echarts-for-react'; |
|||
|
|||
function PopulationDynamics() { |
|||
|
|||
let Ydata = ['火灾扑救', '抢险救援', '公务执勤', '社会救助', '其他出动']; |
|||
let Xdata = [12, 19, 19, 13, 15] |
|||
const options = { |
|||
xAxis: { |
|||
type: 'value', |
|||
show: false, |
|||
}, |
|||
grid: { |
|||
left: -10, |
|||
top: 20, |
|||
bottom: 0, |
|||
right: 20, |
|||
containLabel: true, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'category', |
|||
inverse: true, |
|||
axisLabel: { |
|||
show: true, |
|||
margin: 25, |
|||
// textStyle: {
|
|||
color: '#ECF7FF', |
|||
fontSize: 12, |
|||
// },
|
|||
// 调整左侧文字的3个属性，缺一不可
|
|||
verticalAlign: 'center', |
|||
align: 'left', |
|||
//调整文字上右下左
|
|||
padding: [0, 0, 0, -30], |
|||
|
|||
|
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
data: Ydata |
|||
}, |
|||
{ |
|||
inverse: true, |
|||
// y轴最右侧的文字
|
|||
axisTick: "none", |
|||
axisLine: "none", |
|||
type: "category", |
|||
axisLabel: { |
|||
// margin: 10,
|
|||
// textStyle: {
|
|||
color: "#24DCF7", |
|||
fontSize: "12", |
|||
// },
|
|||
rich: { |
|||
|
|||
a1: { |
|||
color: '#24DCF7', |
|||
width: 5, |
|||
height: 5, |
|||
fontSize: 16, |
|||
}, |
|||
a2: { |
|||
color: '#5999C8', |
|||
width: 5, |
|||
height: 5, |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
formatter: function (value) { |
|||
return [`{a1|${value}} {a2|次}`]; |
|||
}, |
|||
}, |
|||
data: Xdata, |
|||
}, |
|||
|
|||
|
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
barWidth: 12, |
|||
zlevel: 2, |
|||
z: 2, |
|||
showBackground: true, |
|||
backgroundStyle: { |
|||
color: '#2B375C' |
|||
}, |
|||
color: '#005AC6', |
|||
|
|||
label: { |
|||
show: false, |
|||
|
|||
}, |
|||
data: Xdata, |
|||
}, |
|||
{ |
|||
type: "pictorialBar", |
|||
// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
|
|||
symbolSize: [15, 15], |
|||
symbolOffset: [0, 0], |
|||
symbolPosition: "right", |
|||
z: 20, |
|||
zlevel: 20, |
|||
itemStyle: { |
|||
// normal: {
|
|||
color: "#fff" |
|||
// }
|
|||
}, |
|||
data: (function () { |
|||
var list = []; |
|||
for (var i = 0; i < Xdata.length; i++) { |
|||
list.push(2.02 * Xdata[i]); |
|||
} |
|||
console.log(list) |
|||
return list; |
|||
})() |
|||
}, |
|||
|
|||
], |
|||
|
|||
}; |
|||
|
|||
return <Box title={"接警类型占比"} subtitle={true} > |
|||
<ReactEcharts |
|||
option={options} |
|||
notMerge |
|||
lazyUpdate |
|||
style={{ height: '100%' }} |
|||
/> |
|||
</Box> |
|||
} |
|||
|
|||
export default PopulationDynamics; |
|||
|
|||
|
|||
@ -0,0 +1,41 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
|
|||
function BasicInfo() { |
|||
|
|||
return <Box title={"警情数据分析"} subtitle={true} > |
|||
<div className='alarm_data_analysis'> |
|||
<div className='_item_left'> |
|||
<div className='_img' >65<span style={{ fontSize: 12 }}>%</span></div> |
|||
<div className='_text'>真警占比率</div> |
|||
</div> |
|||
<div className='_item_right'> |
|||
<div className='flex-row flex-item-center'> |
|||
<div className='_iconphone' /> |
|||
<div className='right_item_right'> |
|||
<div className='alarm_title'>电话联系数量</div> |
|||
<div><span className='alarm_number'>479</span><span className='alarm_unit'>个</span></div> |
|||
</div> |
|||
</div> |
|||
<div className='flex-row flex-item-center'> |
|||
<div className='_iconreal' /> |
|||
<div className='right_item_right'> |
|||
<div className='alarm_title'>真警数量</div> |
|||
<div><span className='alarm_number'>273</span><span className='alarm_unit'>个</span></div> |
|||
</div> |
|||
</div> |
|||
<div className='flex-row flex-item-center'> |
|||
<div className='_iconmistake' /> |
|||
<div className='right_item_right'> |
|||
<div className='alarm_title'>误报数量</div> |
|||
<div><span className='alarm_number'>276</span><span className='alarm_unit'>个</span></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default BasicInfo; |
|||
|
|||
|
|||
@ -0,0 +1,33 @@ |
|||
/* 轮播列表组件 */ |
|||
import React from 'react'; |
|||
import ScrollBoard from './scrollBoard'; |
|||
import NoData from './noData'; |
|||
import './index.less'; |
|||
function CarouselList(props) { |
|||
const { |
|||
header = [], data = [], rowNum = 4, height, columnWidth, multiellipsis, waitTime = 2000, marginTop, ...restProps |
|||
} = props; |
|||
|
|||
const config = { |
|||
header, |
|||
rowNum, |
|||
headerBGC: 'rgba(81, 200, 247, 0.2)', |
|||
oddRowBGC: 'transparent', |
|||
evenRowBGC: 'transparent', |
|||
headerHeight: 30, |
|||
data, |
|||
waitTime, |
|||
columnWidth: columnWidth || [], |
|||
}; |
|||
|
|||
return data.length > 0 ? ( |
|||
<ScrollBoard |
|||
config={config} |
|||
style={{ height }} |
|||
className={multiellipsis ? 'scroll-board-multi' : 'scroll-board'} |
|||
{...restProps} |
|||
/> |
|||
) : <NoData marginTop={marginTop || 0} />; |
|||
} |
|||
|
|||
export default CarouselList; |
|||
@ -0,0 +1,107 @@ |
|||
.opcityBackground { |
|||
background-color: rgba(8, 27, 55, 0.6); |
|||
} |
|||
|
|||
.card-title { |
|||
height: 31px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 2px; |
|||
} |
|||
|
|||
/* 滚动列表 */ |
|||
.scroll-board { |
|||
width: 533px; |
|||
height: 220px; |
|||
margin-top: 10px; |
|||
margin-left: 6px; |
|||
|
|||
.header { |
|||
height: 30px; |
|||
border-top: 1px solid #0047ba; |
|||
border-bottom: 1px solid #0047ba; |
|||
|
|||
.header-item { |
|||
// background: rgba(12, 49, 110, 0.3); |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.rows { |
|||
.row-item { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.row-item:hover { |
|||
background: linear-gradient(270deg, rgba(17, 183, 247, 0) 0%, rgba(17, 183, 247, 0.85) 100%); |
|||
color: #9ac8fc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.scroll-board-multi { |
|||
padding: 5px 0px 5px; |
|||
color: rgba(204, 228, 255, 1) !important; |
|||
|
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-size: 12px !important; |
|||
color: rgba(204, 228, 255, 1) !important; |
|||
// border-bottom: 1px solid #124C79 !important; |
|||
} |
|||
|
|||
.rows { |
|||
color: rgba(204, 228, 255, 1) !important; |
|||
|
|||
.row-item { |
|||
border-bottom: 1px solid #124C79 !important; |
|||
} |
|||
|
|||
.row-item:hover { |
|||
background: linear-gradient(270deg, rgba(17, 183, 247, 0) 0%, rgba(17, 183, 247, 0.85) 100%); |
|||
color: #9ac8fc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
._sorrow { |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
background: url('/assets/images/homePage/bigscreen/sorrow.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-left: 13px; |
|||
} |
|||
|
|||
.subtitle_ { |
|||
float: right; |
|||
margin-top: 12px; |
|||
margin-right: 20px; |
|||
width: 200px; |
|||
text-align: center; |
|||
|
|||
._item_select { |
|||
width: 60px; |
|||
height: 20px; |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
color: #24DCF7; |
|||
border: 1px solid #12B2E5; |
|||
background-color: rgba(91, 193, 255, 0.2); |
|||
margin-right: 3px; |
|||
} |
|||
|
|||
._item { |
|||
width: 60px; |
|||
height: 20px; |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
color: #4C9FFF; |
|||
border: 1px solid #0B6AEA; |
|||
background-color: rgba(35, 108, 254, 0.3); |
|||
margin-right: 3px; |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
/* 公共模块暂无数据组件 */ |
|||
import React from 'react'; |
|||
import { Empty } from 'antd'; |
|||
|
|||
function NoData({ height = 180, marginTop = 0 }) { |
|||
return ( |
|||
<Empty |
|||
image="/assets/images/homePage/bigscreen/empty.png" |
|||
imageStyle={{ |
|||
height, |
|||
marginTop |
|||
}} |
|||
description={false} |
|||
/> |
|||
); |
|||
} |
|||
|
|||
export default NoData; |
|||
@ -0,0 +1,469 @@ |
|||
import React, { |
|||
useEffect, useState, useRef, useMemo, forwardRef, |
|||
} from 'react'; |
|||
|
|||
import PropTypes from 'prop-types'; |
|||
|
|||
import classnames from 'classnames'; |
|||
|
|||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'; |
|||
|
|||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'; |
|||
|
|||
import { useAutoResize, co } from '@jiaminghi/data-view-react'; |
|||
|
|||
import './style.less'; |
|||
|
|||
const defaultConfig = { |
|||
/** |
|||
* @description Board header |
|||
* @type {Array<String>} |
|||
* @default header = [] |
|||
* @example header = ['column1', 'column2', 'column3'] |
|||
*/ |
|||
header: [], |
|||
/** |
|||
* @description Board data |
|||
* @type {Array<Array>} |
|||
* @default data = [] |
|||
*/ |
|||
data: [], |
|||
/** |
|||
* @description Row num |
|||
* @type {Number} |
|||
* @default rowNum = 5 |
|||
*/ |
|||
rowNum: 5, |
|||
/** |
|||
* @description Header background color |
|||
* @type {String} |
|||
* @default headerBGC = '#00BAFF' |
|||
*/ |
|||
headerBGC: '#00BAFF', |
|||
/** |
|||
* @description Odd row background color |
|||
* @type {String} |
|||
* @default oddRowBGC = '#003B51' |
|||
*/ |
|||
oddRowBGC: '#003B51', |
|||
/** |
|||
* @description Even row background color |
|||
* @type {String} |
|||
* @default evenRowBGC = '#003B51' |
|||
*/ |
|||
evenRowBGC: '#0A2732', |
|||
/** |
|||
* @description Scroll wait time |
|||
* @type {Number} |
|||
* @default waitTime = 2000 |
|||
*/ |
|||
waitTime: 2000, |
|||
/** |
|||
* @description Header height |
|||
* @type {Number} |
|||
* @default headerHeight = 35 |
|||
*/ |
|||
headerHeight: 35, |
|||
/** |
|||
* @description Column width |
|||
* @type {Array<Number>} |
|||
* @default columnWidth = [] |
|||
*/ |
|||
columnWidth: [], |
|||
/** |
|||
* @description Column align |
|||
* @type {Array<String>} |
|||
* @default align = [] |
|||
* @example align = ['left', 'center', 'right'] |
|||
*/ |
|||
align: [], |
|||
/** |
|||
* @description Show index |
|||
* @type {Boolean} |
|||
* @default index = false |
|||
*/ |
|||
index: false, |
|||
/** |
|||
* @description index Header |
|||
* @type {String} |
|||
* @default indexHeader = '#' |
|||
*/ |
|||
indexHeader: '#', |
|||
/** |
|||
* @description Carousel type |
|||
* @type {String} |
|||
* @default carousel = 'single' |
|||
* @example carousel = 'single' | 'page' |
|||
*/ |
|||
carousel: 'single', |
|||
/** |
|||
* @description Pause scroll when mouse hovered |
|||
* @type {Boolean} |
|||
* @default hoverPause = true |
|||
* @example hoverPause = true | false |
|||
*/ |
|||
hoverPause: true, |
|||
}; |
|||
|
|||
function calcHeaderData({ header, index, indexHeader }) { |
|||
if (!header.length) { |
|||
return []; |
|||
} |
|||
|
|||
header = [...header]; |
|||
|
|||
if (index) header.unshift(indexHeader); |
|||
|
|||
return header; |
|||
} |
|||
|
|||
function calcRows({ |
|||
data, index, headerBGC, rowNum, |
|||
}) { |
|||
if (index) { |
|||
data = data.map((row, i) => { |
|||
row = [...row]; |
|||
|
|||
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i |
|||
+ 1}</span>`; |
|||
|
|||
row.unshift(indexTag); |
|||
|
|||
return row; |
|||
}); |
|||
} |
|||
|
|||
data = data.map((ceils, i) => ({ ceils, rowIndex: i })); |
|||
|
|||
const rowLength = data.length; |
|||
|
|||
if (rowLength > rowNum && rowLength < 2 * rowNum) { |
|||
data = [...data, ...data]; |
|||
} |
|||
|
|||
return data.map((d, i) => ({ ...d, scroll: i })); |
|||
} |
|||
|
|||
function calcAligns(mergedConfig, header) { |
|||
const columnNum = header.length; |
|||
|
|||
const aligns = new Array(columnNum).fill('left'); |
|||
|
|||
const { align } = mergedConfig; |
|||
|
|||
return deepMerge(aligns, align); |
|||
} |
|||
|
|||
const ScrollBoard = forwardRef(({ |
|||
onClick, config = {}, className, style, onMouseOver, |
|||
}, ref) => { |
|||
const { width, height, domRef } = useAutoResize(ref); |
|||
|
|||
const [state, setState] = useState({ |
|||
mergedConfig: null, |
|||
|
|||
header: [], |
|||
|
|||
rows: [], |
|||
|
|||
rowsShow: [], |
|||
|
|||
widths: [], |
|||
|
|||
heights: [], |
|||
|
|||
aligns: [], |
|||
}); |
|||
|
|||
const { |
|||
mergedConfig, header, rows, widths, heights, aligns, rowsShow, |
|||
} = state; |
|||
|
|||
const stateRef = useRef({ |
|||
...state, |
|||
rowsData: [], |
|||
avgHeight: 0, |
|||
animationIndex: 0, |
|||
}); |
|||
|
|||
Object.assign(stateRef.current, state); |
|||
|
|||
function onResize() { |
|||
if (!mergedConfig) return; |
|||
|
|||
const widths = calcWidths(mergedConfig, stateRef.current.rowsData); |
|||
|
|||
const heights = calcHeights(mergedConfig, header); |
|||
|
|||
const data = { widths, heights }; |
|||
|
|||
Object.assign(stateRef.current, data); |
|||
setState((state) => ({ ...state, ...data })); |
|||
} |
|||
const [init, setInit] = useState(true); |
|||
|
|||
function calcData() { |
|||
// const mergedConfig = deepMerge(
|
|||
// deepClone(defaultConfig, true),
|
|||
// config || {},
|
|||
// );
|
|||
const mergedConfig = { |
|||
...defaultConfig, |
|||
...config, |
|||
}; |
|||
|
|||
const header = calcHeaderData(mergedConfig); |
|||
|
|||
const rows = calcRows(mergedConfig); |
|||
|
|||
const widths = calcWidths(mergedConfig, stateRef.current.rowsData); |
|||
|
|||
const heights = calcHeights(mergedConfig, header); |
|||
|
|||
const aligns = calcAligns(mergedConfig, header); |
|||
|
|||
const data = { |
|||
mergedConfig, |
|||
header, |
|||
rows, |
|||
widths, |
|||
aligns, |
|||
heights: init ? heights : state.heights.concat(heights), |
|||
rowsShow: init ? rows : state.rowsShow, |
|||
}; |
|||
setInit(false); |
|||
Object.assign(stateRef.current, data, { |
|||
rowsData: rows, |
|||
animationIndex: stateRef.current.animationIndex, |
|||
}); |
|||
|
|||
setState((state) => ({ ...state, ...data })); |
|||
} |
|||
|
|||
function calcWidths({ columnWidth, header }, rowsData) { |
|||
const usedWidth = columnWidth.reduce((all, w) => all + w, 0); |
|||
|
|||
let columnNum = 0; |
|||
if (rowsData[0]) { |
|||
columnNum = rowsData[0].ceils.length; |
|||
} else if (header.length) { |
|||
columnNum = header.length; |
|||
} |
|||
|
|||
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length); |
|||
|
|||
const widths = new Array(columnNum).fill(avgWidth); |
|||
|
|||
return deepMerge(widths, columnWidth); |
|||
} |
|||
|
|||
function calcHeights({ headerHeight, rowNum, data }, header) { |
|||
let allHeight = height; |
|||
|
|||
if (header.length) allHeight -= headerHeight; |
|||
|
|||
const avgHeight = allHeight / rowNum; |
|||
|
|||
Object.assign(stateRef.current, { avgHeight }); |
|||
|
|||
return new Array(data.length).fill(avgHeight); |
|||
} |
|||
|
|||
function* animation(start = false) { |
|||
let { |
|||
avgHeight, |
|||
animationIndex, |
|||
mergedConfig: { waitTime, carousel, rowNum }, |
|||
rowsData, |
|||
} = stateRef.current; |
|||
|
|||
const rowLength = rowsData.length; |
|||
|
|||
if (start) yield new Promise((resolve) => setTimeout(resolve, waitTime)); |
|||
|
|||
const animationNum = carousel === 'single' ? 1 : rowNum; |
|||
|
|||
let rows = rowsData.slice(animationIndex); |
|||
rows.push(...rowsData.slice(0, animationIndex)); |
|||
rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1); |
|||
|
|||
const heights = new Array(rowLength).fill(avgHeight); |
|||
setState((state) => ({ |
|||
...state, rows, heights, rowsShow: rows, |
|||
})); |
|||
|
|||
yield new Promise((resolve) => setTimeout(resolve, 300)); |
|||
|
|||
animationIndex += animationNum; |
|||
|
|||
const back = animationIndex - rowLength; |
|||
if (back >= 0) animationIndex = back; |
|||
|
|||
const newHeights = [...heights]; |
|||
newHeights.splice(0, animationNum, ...new Array(animationNum).fill(0)); |
|||
|
|||
Object.assign(stateRef.current, { animationIndex }); |
|||
setState((state) => ({ ...state, heights: newHeights })); |
|||
} |
|||
|
|||
function emitEvent(handle, ri, ci, row, ceil) { |
|||
const { ceils, rowIndex } = row; |
|||
|
|||
handle && handle({ |
|||
row: ceils, ceil, rowIndex, columnIndex: ci, |
|||
}); |
|||
} |
|||
|
|||
function handleHover(enter, ri, ci, row, ceil) { |
|||
if (enter) emitEvent(onMouseOver, ri, ci, row, ceil); |
|||
|
|||
if (!mergedConfig.hoverPause) return; |
|||
|
|||
const { pause, resume } = task.current; |
|||
|
|||
enter && pause && resume ? pause() : resume && resume(); |
|||
} |
|||
|
|||
// updateRows(rows, animationIndex) {
|
|||
// const { mergedConfig, animationHandler, animation } = this
|
|||
// this.mergedConfig = {
|
|||
// ...mergedConfig,
|
|||
// data: [...rows]
|
|||
// }
|
|||
// this.needCalc = true
|
|||
// if (typeof animationIndex === 'number') this.animationIndex = animationIndex
|
|||
// if (!animationHandler) animation(true)
|
|||
// }
|
|||
|
|||
const getBackgroundColor = (rowIndex) => mergedConfig[rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']; |
|||
|
|||
const task = useRef({}); |
|||
|
|||
useEffect(() => { |
|||
calcData(); |
|||
|
|||
let start = true; |
|||
|
|||
function* loop() { |
|||
while (true) { |
|||
yield* animation(start); |
|||
|
|||
start = false; |
|||
|
|||
const { waitTime } = stateRef.current.mergedConfig; |
|||
|
|||
yield new Promise((resolve) => setTimeout(resolve, waitTime - 300)); |
|||
} |
|||
} |
|||
|
|||
const { |
|||
mergedConfig: { rowNum }, |
|||
rows: rowsData, |
|||
} = stateRef.current; |
|||
|
|||
const rowLength = rowsData.length; |
|||
|
|||
if (rowNum >= rowLength) { |
|||
setState((prestate) => ({ |
|||
...prestate, rowsShow: state.rows, |
|||
})); |
|||
return; |
|||
} |
|||
|
|||
task.current = co(loop); |
|||
|
|||
return task.current.end; |
|||
}, [config, domRef.current]); |
|||
|
|||
useEffect(onResize, [width, height, domRef.current]); |
|||
|
|||
const classNames = useMemo(() => classnames('dv-scroll-board', className), [ |
|||
className, |
|||
]); |
|||
|
|||
return ( |
|||
<div className={classNames} style={style} ref={domRef}> |
|||
{!!header.length && !!mergedConfig && ( |
|||
<div |
|||
className="header" |
|||
style={{ backgroundColor: `${mergedConfig.headerBGC}` }} |
|||
> |
|||
{header.map((headerItem, i) => ( |
|||
<div |
|||
className="header-item" |
|||
key={`${headerItem}-${i}`} |
|||
style={{ |
|||
height: `${mergedConfig.headerHeight}px`, |
|||
lineHeight: `${mergedConfig.headerHeight}px`, |
|||
width: `${widths[i]}px`, |
|||
}} |
|||
align={aligns[i]} |
|||
dangerouslySetInnerHTML={{ __html: headerItem }} |
|||
/> |
|||
))} |
|||
</div> |
|||
)} |
|||
|
|||
{!!mergedConfig && ( |
|||
<div |
|||
className="rows" |
|||
style={{ |
|||
height: `${height |
|||
- (header.length ? mergedConfig.headerHeight : 0)}px`,
|
|||
}} |
|||
> |
|||
{rowsShow.map((row, ri) => ( |
|||
<div |
|||
className="row-item" |
|||
key={`${row.toString()}-${row.scroll}`} |
|||
style={{ |
|||
height: `${heights[ri]}px`, |
|||
lineHeight: `${heights[ri]}px`, |
|||
backgroundColor: `${getBackgroundColor(row.rowIndex)}`, |
|||
}} |
|||
> |
|||
{row.ceils.map((ceil, ci) => { |
|||
if (typeof (ceil) === 'string') { |
|||
return ( |
|||
<div |
|||
className="ceil" |
|||
key={`${ceil}-${ri}-${ci}`} |
|||
style={{ width: `${widths[ci]}px` }} |
|||
align={aligns[ci]} |
|||
dangerouslySetInnerHTML={{ __html: ceil }} |
|||
onClick={() => emitEvent(onClick, ri, ci, row, ceil)} |
|||
onMouseEnter={() => handleHover(true, ri, ci, row, ceil)} |
|||
onMouseLeave={() => handleHover(false)} |
|||
/> |
|||
); |
|||
} |
|||
return ( |
|||
<div |
|||
className="ceil" |
|||
style={{ width: `${widths[ci]}px` }} |
|||
align={aligns[ci]} |
|||
key={`${ri}-${ci}`} |
|||
onMouseEnter={() => handleHover(true, ri, ci, row, ceil)} |
|||
onMouseLeave={() => handleHover(false)} |
|||
> |
|||
{ceil} |
|||
</div> |
|||
); |
|||
})} |
|||
</div> |
|||
))} |
|||
</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}); |
|||
|
|||
ScrollBoard.propTypes = { |
|||
config: PropTypes.object, |
|||
onClick: PropTypes.func, |
|||
onMouseOver: PropTypes.func, |
|||
className: PropTypes.string, |
|||
style: PropTypes.object, |
|||
}; |
|||
|
|||
export default ScrollBoard; |
|||
@ -0,0 +1,44 @@ |
|||
.dv-scroll-board { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
color: #fff; |
|||
|
|||
.text { |
|||
padding: 0 10px; |
|||
box-sizing: border-box; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-size: 15px; |
|||
|
|||
.header-item { |
|||
.text; |
|||
transition: all 0.3s; |
|||
} |
|||
} |
|||
|
|||
.rows { |
|||
overflow: hidden; |
|||
|
|||
.row-item { |
|||
display: flex; |
|||
font-size: 14px; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.ceil { |
|||
.text; |
|||
} |
|||
|
|||
.index { |
|||
border-radius: 3px; |
|||
padding: 0px 3px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
'use strict' |
|||
|
|||
import React from 'react' |
|||
import './index.less' |
|||
class Box extends React.Component { |
|||
render() { |
|||
const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow, subtitle } = this.props |
|||
|
|||
const headerbg = { |
|||
background: 'url(/assets/images/homePage/bigscreen/headertitlebg.png) no-repeat', |
|||
backgroundSize: '100% 100%', |
|||
} |
|||
return ( |
|||
<div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}> |
|||
<div style={{ |
|||
height: height, listStyle: 'none', overflow: overflow || 'hidden', |
|||
|
|||
}}> |
|||
<div style={{ height: 42, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg, }}> |
|||
<span className='card-title'>{title}</span> |
|||
|
|||
{subtitle && <div className='subtitle_'> |
|||
<div className='_item_select'>本周</div> |
|||
<div className='_item'>本月</div> |
|||
<div className='_item'>本年</div> |
|||
</div>} |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 42px)', |
|||
backgroundImage: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)', |
|||
}}> |
|||
{children} |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
export default Box |
|||
|
|||
@ -0,0 +1,29 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import './style.less'; |
|||
|
|||
|
|||
function DataTop5(props) { |
|||
|
|||
|
|||
return <Box title={"视频监控"} bodyPaddingTop={1} > |
|||
<div className='video_container'> |
|||
<div className='_item'> |
|||
<div className='video_bottom'><span>南昌大道</span><span>14:12:32</span></div> |
|||
</div> |
|||
<div className='_item'> |
|||
<div className='video_bottom'><span>南昌大道</span><span>11:34:12</span></div> |
|||
</div> |
|||
<div className='_item'> |
|||
<div className='video_bottom'><span>南昌大道</span><span>08:34:12</span></div> |
|||
</div> |
|||
<div className='_item'> |
|||
<div className='video_bottom'><span>南昌大道</span><span>09:12:34</span></div> |
|||
</div> |
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default DataTop5; |
|||
|
|||
|
|||
@ -0,0 +1,15 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import './style.less'; |
|||
|
|||
function SpecialPerson(props) { |
|||
|
|||
|
|||
return <Box title={"特殊人群统计"}> |
|||
|
|||
</Box> |
|||
} |
|||
|
|||
export default SpecialPerson; |
|||
|
|||
|
|||
@ -0,0 +1,42 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import './style.less'; |
|||
|
|||
function CitySafty(props) { |
|||
|
|||
return <Box title={"城市安全"} > |
|||
<div className='realtime_data'> |
|||
<div className='realtime_item'> |
|||
<div className='_icon1' /> |
|||
<div className='_text'> |
|||
<div className='_row1'> |
|||
<span>拥堵指数</span> |
|||
<span>平均时速</span> |
|||
</div> |
|||
<div className='_row2'> |
|||
<span><span className='_number'>1.43</span>畅通</span> |
|||
<span><span className='_number'>30.5</span>km/h</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='realtime_item'> |
|||
<div className='_icon2' /> |
|||
|
|||
<div className='_text'> |
|||
<div className='_row1'> |
|||
<span>今日接警数</span> |
|||
<span>今日出警数</span> |
|||
</div> |
|||
<div className='_row2' style={{ color: 'rgba(89, 153, 200, 1)' }}> |
|||
<span><span className='_number'>143</span>个</span> |
|||
<span><span className='_number'>86</span>个</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default CitySafty; |
|||
|
|||
|
|||
@ -0,0 +1,210 @@ |
|||
.item_left-container { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
justify-content: center; |
|||
|
|||
.end_event { |
|||
width: 202px; |
|||
height: 39px; |
|||
background-image: linear-gradient(180deg, #711313 0%, #b3000063 52%, #711313 100%); |
|||
border: 1.5px solid #A20000; |
|||
box-shadow: inset 0 1px 14px 0 #ff525259; |
|||
border-radius: 2px; |
|||
display: flex; |
|||
justify-self: center; |
|||
align-items: center; |
|||
color: #ECF7FF; |
|||
justify-content: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
//警情数据分析 |
|||
.alarm_data_analysis { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
._item_left { |
|||
width: 209px; |
|||
height: 100%; |
|||
|
|||
._img { |
|||
width: 209px; |
|||
height: 209px; |
|||
background: url('/assets/images/homepage/fire/realalarmbg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: D-DINExp-Italic; |
|||
font-weight: Italic; |
|||
font-size: 48px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
} |
|||
|
|||
._text { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 20px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
margin-top: -30px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
._item_right { |
|||
width: 200px; |
|||
|
|||
._iconphone { |
|||
width: 50.96px; |
|||
height: 45px; |
|||
background: url('/assets/images/homepage/fire/iconphone.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._iconreal { |
|||
width: 50.96px; |
|||
height: 45px; |
|||
background: url('/assets/images/homepage/fire/iconreal.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._iconmistake { |
|||
width: 50.96px; |
|||
height: 45px; |
|||
background: url('/assets/images/homepage/fire/iconmistake.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.right_item_right { |
|||
width: 155px; |
|||
margin-left: 16px; |
|||
|
|||
.alarm_title { |
|||
font-size: 14px; |
|||
color: #ECF7FF; |
|||
letter-spacing: 0; |
|||
} |
|||
|
|||
.alarm_number { |
|||
font-family: D-DINExp-Italic; |
|||
font-weight: Italic; |
|||
font-size: 28px; |
|||
color: #24DCF7; |
|||
letter-spacing: 0; |
|||
margin-right: 50px; |
|||
} |
|||
|
|||
.alarm_unit { |
|||
font-size: 14px; |
|||
color: #5999C8; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
//实时数据 |
|||
.realtime_data { |
|||
height: 100%; |
|||
padding: 12px 30px 12px 30px; |
|||
|
|||
.realtime_item { |
|||
display: flex; |
|||
background: url('/assets/images/homePage/fire/realtimebg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
height: 45%; |
|||
width: 100%; |
|||
margin-bottom: 5%; |
|||
align-items: center; |
|||
// padding: 16px 22px 16px 22px; |
|||
|
|||
._icon1 { |
|||
width: 80px; |
|||
height: 80px; |
|||
background: url('/assets/images/homePage/fire/icon1.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._icon2 { |
|||
width: 80px; |
|||
height: 80px; |
|||
background: url('/assets/images/homePage/fire/icon2.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._text { |
|||
width: calc(100% - 100px); |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
._row1 { |
|||
color: #C3E6FF; |
|||
width: 100%; |
|||
height: 22px; |
|||
background: rgba(0, 88, 204, 0.5); |
|||
justify-content: space-around; |
|||
display: flex; |
|||
|
|||
} |
|||
|
|||
._row2 { |
|||
font-size: 14px; |
|||
color: #00FF87; |
|||
justify-content: space-around; |
|||
display: flex; |
|||
height: 42px; |
|||
|
|||
._number { |
|||
font-family: D-DIN-Italic; |
|||
font-weight: Italic; |
|||
font-size: 28px; |
|||
color: #ECF7FF; |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.realtime_data::-webkit-scrollbar { |
|||
width: 0 !important |
|||
} |
|||
|
|||
.video_container { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
._item { |
|||
width: 46%; |
|||
height: 45%; |
|||
background: url('/assets/images/homePage/fire/videobg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
|
|||
.video_bottom { |
|||
position: absolute; |
|||
bottom: 9%; |
|||
left: 4%; |
|||
width: 91%; |
|||
height: 20px; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
font-size: 12px; |
|||
color: #C3E6FF; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
export const mathRound = (number) => { |
|||
return number ? Math.round(number / 1000) / 10 : 0 |
|||
} |
|||
@ -0,0 +1,955 @@ |
|||
'use strict'; |
|||
|
|||
export const data = { |
|||
"type": "FeatureCollection", |
|||
"features": [ |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.882756, 28.515483 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.876061, 28.534185 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.897176, 28.545646 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.940155, 28.559386 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.874271, 28.412145 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.866911, 28.416826 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.835812, 28.597065 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.853493, 28.596462 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.965947, 28.445532 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.908495, 28.521435 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.861763, 28.530276 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.871634, 28.534348 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.90219, 28.55938 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.168147, 28.649128 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.16584, 28.648912 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 1 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.169467, 28.646074 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.92344, 28.561176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.870911, 28.536749 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.876233, 28.512466 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.920693, 28.499945 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.958459, 28.511712 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.955369, 28.508393 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.954296, 28.560894 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.943288, 28.560309 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.868006, 28.41507 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.861397, 28.411485 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.840533, 28.595369 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.852592, 28.597178 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.970474, 28.448221 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.9688, 28.447702 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.865064, 28.557025 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.879959, 28.526732 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.881762, 28.562395 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.923647, 28.558626 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.856614, 28.595408 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.9484, 28.504994 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.941405, 28.502354 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.954022, 28.511066 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.953078, 28.520191 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.929474, 28.506013 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.070607, 28.798914 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.068397, 28.798176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.143577, 28.657257 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.136303, 28.654546 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.110161, 28.654753 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.151446, 28.650158 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.939748, 28.551979 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.949189, 28.572182 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.92344, 28.561176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.930306, 28.541122 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.949146, 28.559932 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.940155, 28.559386 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.864508, 28.41843 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.840533, 28.595369 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.860016, 28.61029 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.971493, 28.449494 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.881887, 28.559889 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.874334, 28.541946 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.864549, 28.553104 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.908495, 28.521435 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 4 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.950219, 28.55605 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 4 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.836713, 28.606522 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 4 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.899053, 28.538176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 4 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.89871, 28.556874 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 4 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.884337, 28.522433 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 4 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.868287, 28.524017 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 4 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.868287, 28.524017 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.945584, 28.573991 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.896661, 28.520309 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.844304, 28.577308 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.927045, 28.540217 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.901982, 28.539614 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.949575, 28.558726 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.845039, 28.601888 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.851047, 28.605317 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.867527, 28.595181 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.857828, 28.594503 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
116.072222, 28.799295 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.857007, 28.607604 |
|||
] |
|||
} |
|||
}, |
|||
] |
|||
} |
|||
@ -0,0 +1,465 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { render } from 'react-dom'; |
|||
import { Row, Col } from 'antd'; |
|||
import { data as heatmapData } from './data' |
|||
import './gis.less' |
|||
const MAPDOMID = 'fs-amap-container'; |
|||
let map = null; |
|||
let heatmap = null; |
|||
let loca = null; |
|||
let interval = null; |
|||
const MARKER_IMG_NAME = { |
|||
markergreen: '回迁房', |
|||
markerblue: '城中村', |
|||
markeryellow: '廉租房', |
|||
} |
|||
function Map(props) { |
|||
const [delay, setDelay] = useState(true) |
|||
const [tab, setTab] = useState('home') |
|||
// 地图初始化
|
|||
const loadMap = () => { |
|||
// 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
|
|||
const imageLayer = new AMap.ImageLayer({ |
|||
url: '/assets/images/map.svg', |
|||
bounds: new AMap.Bounds( |
|||
[115.800221, 28.265659], |
|||
[116.334849, 28.973298], |
|||
), |
|||
zooms: [3, 14], |
|||
}); |
|||
|
|||
map = new AMap.Map(MAPDOMID, { |
|||
center: [116.054664, 28.538966], |
|||
zoomEnable: true, |
|||
dragEnable: true, |
|||
viewMode: '3D', |
|||
pitch: 22.9, |
|||
labelzIndex: 130, |
|||
zoom: 10.3, |
|||
cursor: 'pointer', |
|||
mapStyle: 'amap://styles/4eb48d1ef0a024c73376fd2256d0b5a5', |
|||
layers: [ |
|||
AMap.createDefaultLayer(), |
|||
imageLayer, |
|||
], |
|||
}); |
|||
|
|||
|
|||
map.on('complete', () => { |
|||
map.setZoom(17.4) |
|||
map.setCenter([115.922069, 28.554867]) |
|||
map.setPitch(47.30) |
|||
map.setRotation(1.7000) |
|||
setTimeout(() => { |
|||
setDelay(false) |
|||
}, 1000); |
|||
|
|||
}); |
|||
|
|||
map.on('click', (e) => { |
|||
if (!e && !e.lnglat) { |
|||
return |
|||
} |
|||
|
|||
const zoom = map.getZoom(); |
|||
const pitch = map.getPitch(); |
|||
const center = map.getCenter(); |
|||
const Rotation = map.getRotation(); |
|||
console.log('zoom' + zoom) |
|||
console.log('pitch' + pitch) |
|||
console.log('center' + center) |
|||
console.log('Rotation' + Rotation) |
|||
console.log('e.lnglat' + e.lnglat) |
|||
}) |
|||
|
|||
loca = new Loca.Container({ map: map }) |
|||
|
|||
}; |
|||
|
|||
|
|||
// 初始化GIS 组件销毁清空定时器
|
|||
useEffect(() => { |
|||
loadMap(); |
|||
}, []); |
|||
|
|||
const renderMarkers = () => { |
|||
map.clearMap(); |
|||
map.setZoom(10.3) |
|||
map.setCenter([116.054664, 28.538966]) |
|||
map.setPitch(22.9) |
|||
map.setRotation(1.7000) |
|||
if (loca && heatmap) loca.remove(heatmap) |
|||
if (tab == 'person') { |
|||
|
|||
var geo = new Loca.GeoJSONSource({ |
|||
data: heatmapData |
|||
}); |
|||
|
|||
heatmap = new Loca.HeatMapLayer({ |
|||
// loca,
|
|||
zIndex: 10, |
|||
opacity: 1, |
|||
visible: true, |
|||
zooms: [2, 22], |
|||
}); |
|||
|
|||
heatmap.setSource(geo, { |
|||
radius: 20, |
|||
unit: 'px', |
|||
height: 10, |
|||
// radius: 10,
|
|||
// unit: 'px',
|
|||
// height: 10,
|
|||
gradient: { |
|||
0.1: 'rgba(50,48,118,1)', |
|||
0.2: 'rgba(127,60,255,1)', |
|||
0.4: 'rgba(166,53,219,1)', |
|||
0.6: 'rgba(254,64,95,1)', |
|||
0.8: 'rgba(255,98,4,1)', |
|||
1: 'rgba(236,220,79,1)', |
|||
}, |
|||
value: function (index, feature) { |
|||
return feature.properties.count; |
|||
}, |
|||
min: 0, |
|||
max: 10, //4.6
|
|||
heightBezier: [0, .53, .37, .98], |
|||
}); |
|||
loca.add(heatmap); |
|||
|
|||
map.on('click', (e) => { |
|||
const feat = heatmap.queryFeature(e.pixel.toArray()); |
|||
const random = Math.random() |
|||
if (feat) { |
|||
let infowindow = new AMap.InfoWindow({ |
|||
isCustom: true, //使用自定义窗体
|
|||
content: `<div id="map-content" class="gis-infowindow">
|
|||
<div style="height:${330}px;" id="contentidheatmap${random}"></div></div>`, |
|||
offset: new AMap.Pixel(133, 260) |
|||
}); |
|||
|
|||
let position = map.getCenter(); |
|||
infowindow.open(map, position); |
|||
setTimeout(() => { |
|||
if (document.getElementById(`contentidheatmap${random}`)) { |
|||
render(<div> |
|||
<div className='gis_exit' onClick={() => { |
|||
map.clearInfoWindow(); |
|||
}} /> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>小区名称</span> |
|||
<span className='gis_text'>小区名称</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>人口</span> |
|||
<span className='gis_text'>2344人</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>新生儿</span> |
|||
<span className='gis_text'>23人</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>老人</span> |
|||
<span className='gis_text'>342人</span> |
|||
</div> |
|||
</div>, |
|||
document.getElementById(`contentidheatmap${random}`)); |
|||
} |
|||
}, 50) |
|||
|
|||
} |
|||
}); |
|||
} else { |
|||
//初始层级 zoom14以下显示聚合点
|
|||
const data = [ |
|||
{ lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' }, |
|||
{ lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' }, |
|||
{ lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' }, |
|||
{ lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', kind: 'markergreen' }, |
|||
{ lng: 115.989847, lat: 28.484411, type: 'home', name: '廉租房5', kind: 'markergreen' }, |
|||
|
|||
{ lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' }, |
|||
{ lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' }, |
|||
{ lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' }, |
|||
{ lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' }, |
|||
{ lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' }, |
|||
] |
|||
|
|||
//zoom14以上显示详情
|
|||
const databig = [ |
|||
{ lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' }, |
|||
{ lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' }, |
|||
{ lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' }, |
|||
] |
|||
//初始点位显示
|
|||
data.filter(s => s.type == tab).map((x, index) => { |
|||
var marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(x.lng, x.lat), |
|||
// 将一张图片的地址设置为 icon
|
|||
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|||
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|||
offset: new AMap.Pixel(-13, -30), |
|||
zooms: [3, 14], |
|||
}); |
|||
marker.setTitle(x.name); |
|||
map.add(marker); |
|||
marker.on('click', () => { |
|||
map.setZoom(17.4) |
|||
map.setCenter([115.922069, 28.554867]) |
|||
map.setPitch(47.30) |
|||
map.setRotation(1.7000) |
|||
}) |
|||
}) |
|||
//下钻点位显示
|
|||
databig.map((x, index) => { |
|||
var marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(x.lng, x.lat), |
|||
// 将一张图片的地址设置为 icon
|
|||
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|||
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|||
offset: new AMap.Pixel(-13, -30), |
|||
zooms: [15, 19], |
|||
}); |
|||
marker.setTitle(x.name); |
|||
map.add(marker); |
|||
|
|||
let infowindow = new AMap.InfoWindow({ |
|||
isCustom: true, //使用自定义窗体
|
|||
content: `<div id="map-content" class="gis-infowindow">
|
|||
<div style="height:${360}px;" id="contentid${x.name}"></div></div>`, |
|||
offset: new AMap.Pixel(233, 260) |
|||
}); |
|||
|
|||
marker.on('click', () => { |
|||
let position = marker.getPosition ? marker.getPosition() : marker.getCenter(); |
|||
infowindow.open(map, position); |
|||
map.setCenter(position) |
|||
setTimeout(() => { |
|||
if (document.getElementById(`contentid${x.name}`)) { |
|||
render(<div> |
|||
<div className='gis_exit' onClick={() => { |
|||
map.setCenter([115.922069, 28.554867]) |
|||
map.clearInfoWindow(); |
|||
}} /> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>小区名称</span> |
|||
<span className='gis_text'>{x.name}</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>人流量</span> |
|||
<span className='gis_text'>123次</span> |
|||
<span className='gis_title' style={{ marginLeft: 20 }}>房龄</span> |
|||
<span className='gis_text'>9年</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>租赁中房屋</span> |
|||
<span className='gis_text'>165套</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>网格员</span> |
|||
<span className='gis_text'>张三</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>手机号码</span> |
|||
<span className='gis_text'>15765845845</span> |
|||
</div> |
|||
</div>, |
|||
document.getElementById(`contentid${x.name}`)); |
|||
} |
|||
}, 50) |
|||
}) |
|||
}) |
|||
|
|||
if (tab == 'device') { |
|||
const data = [ |
|||
{ lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' }, |
|||
{ lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' }, |
|||
{ lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' }, |
|||
{ lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' }, |
|||
{ lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' }, |
|||
{ lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' }, |
|||
{ lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' }, |
|||
] |
|||
|
|||
data.filter(s => s.type == tab).map((x, index) => { |
|||
var marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(x.lng, x.lat), |
|||
// 将一张图片的地址设置为 icon
|
|||
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|||
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|||
offset: new AMap.Pixel(-13, -30), |
|||
zooms: [15, 19], |
|||
}); |
|||
marker.setTitle(x.name); |
|||
map.add(marker); |
|||
}) |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
const renderAlarms = () => { |
|||
|
|||
const alarms = [ |
|||
{ lng: 115.92365, lat: 28.557404, type: 'device', name: '廉租房1', kind: 'markeralarm' }, |
|||
] |
|||
|
|||
alarms.map((x, index) => { |
|||
var marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(x.lng, x.lat), |
|||
// 将一张图片的地址设置为 icon
|
|||
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|||
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|||
offset: new AMap.Pixel(-13, -30), |
|||
zooms: [15, 19], |
|||
}); |
|||
marker.setTitle(x.name); |
|||
map.add(marker); |
|||
|
|||
let infowindow = new AMap.InfoWindow({ |
|||
isCustom: true, //使用自定义窗体
|
|||
content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
|
|||
<div style="height:${360}px;" id="alarmcontentid${x.name}"></div></div>`, |
|||
offset: new AMap.Pixel(233, 260) |
|||
}); |
|||
|
|||
let alarmOk = new AMap.InfoWindow({ |
|||
isCustom: true, //使用自定义窗体
|
|||
// content: `<div id="map-content" class="gis-infowindow gis-infowindow-alarm">
|
|||
// <div style="height:${360}px;" id="contentid${x.name}"></div></div>`,
|
|||
offset: new AMap.Pixel(233, 440) |
|||
}); |
|||
|
|||
marker.on('click', () => { |
|||
let position = marker.getPosition ? marker.getPosition() : marker.getCenter(); |
|||
infowindow.open(map, position); |
|||
map.setCenter(position) |
|||
setTimeout(() => { |
|||
if (document.getElementById(`alarmcontentid${x.name}`)) { |
|||
render(<div> |
|||
<div className='gis_exit' onClick={() => { |
|||
map.setCenter([115.922069, 28.554867]) |
|||
map.clearInfoWindow(); |
|||
}} /> |
|||
|
|||
<div className='gis_item'> |
|||
<span className='gis_title'>地址信息：</span> |
|||
<span className='gis_text'>南湖大道</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>告警来源：</span> |
|||
<span className='gis_text'>烟雾报警</span> |
|||
</div> |
|||
<div className='gis_item'> |
|||
<span className='gis_title'>告警内容</span> |
|||
<span className='gis_text'>火情</span> |
|||
</div> |
|||
|
|||
|
|||
<div><span className='confirm_text'>请根据火灾态势，选择应急预案等级</span></div> |
|||
<Row> |
|||
<Col span={6}>I级</Col> |
|||
<Col span={6}>II级</Col> |
|||
<Col span={6}>III级</Col> |
|||
<Col span={6}>IV级</Col> |
|||
</Row> |
|||
<div className='alarm_confirm'> |
|||
<div className='alarm_cancel'>否</div> |
|||
<div className='alarm_ok' onClick={() => { props.alarmOk() }}>是</div> |
|||
</div> |
|||
</div>, |
|||
document.getElementById(`alarmcontentid${x.name}`)); |
|||
} |
|||
}, 50) |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
const renderLeftTop = () => { |
|||
return tab == 'person' ? |
|||
<div className='home_left'> |
|||
<div className='hometotalbg'>区域总人数</div> |
|||
<div className='home_total_number'>455 <span style={{ fontSize: 12 }}>万</span></div> |
|||
|
|||
<div className='hqtotal'>新生儿总数</div> |
|||
<div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div> |
|||
|
|||
<div className='cztotal'>老人总数</div> |
|||
<div className='home_total_number'>45<span style={{ fontSize: 12 }}>万</span></div> |
|||
</div> : |
|||
<div className='home_left'> |
|||
<div className='hometotalbg'>租赁房屋总数</div> |
|||
<div className='home_total_number'>4556</div> |
|||
|
|||
<div className='hqtotal'>回迁房总数</div> |
|||
<div className='home_total_number'>4556</div> |
|||
|
|||
<div className='cztotal'>城中村总数</div> |
|||
<div className='home_total_number'>4556</div> |
|||
|
|||
<div className='lztotal'>廉租房</div> |
|||
<div className='home_total_number'>4556</div> |
|||
|
|||
</div> |
|||
} |
|||
|
|||
const renderRightBottom = () => { |
|||
return <div className='home_right'> |
|||
<div className='_lz'> |
|||
<div className='_icon' /> |
|||
<span>廉租房</span> |
|||
</div> |
|||
<div className='_hq'> |
|||
<div className='_icon' /> |
|||
<span>回迁房</span> |
|||
</div> |
|||
<div className='_cz'> |
|||
<div className='_icon' /> |
|||
<span>城中村</span> |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
return ( |
|||
<> |
|||
{/* 延缓加载遮罩 */} |
|||
{delay && <div style={{ |
|||
width: '100%', height: '100%', left: 0, top: 0, zIndex: 1000, background: '#02152f', position: 'absolute', |
|||
display: 'flex', alignItems: 'center', justifyContent: 'center' |
|||
}}> |
|||
</div>} |
|||
|
|||
{/* 地图容器 */} |
|||
<div className="gis" id={MAPDOMID} /> |
|||
{/* {map && renderMarkers()} */} |
|||
{map && renderAlarms()} |
|||
|
|||
{/* 底部按钮 */} |
|||
{/* {!delay && [ |
|||
{ name: '房屋分布', tab: 'home' }, |
|||
{ name: '人口分布', tab: 'person' }, |
|||
{ name: '基础设施', tab: 'device' } |
|||
].map((s, index) => { |
|||
return <div className={'gis-button' + (index + 1)} |
|||
onClick={() => { setTab(s.tab) }} |
|||
> |
|||
<div className={`button_img ${tab == s.tab ? 'button_img_select' : ''}`} /> |
|||
<div>{s.name}</div> |
|||
</div> |
|||
}) |
|||
} */} |
|||
|
|||
{/* 左上角图例 */} |
|||
{/* {renderLeftTop()} |
|||
{renderRightBottom()} */} |
|||
{/* 四周遮罩 */} |
|||
<div className='gis-left'></div> |
|||
<div className='gis-right'></div> |
|||
<div className='gis-top'></div> |
|||
<div className='gis-bottom'></div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default connect()(Map); |
|||
@ -0,0 +1,408 @@ |
|||
.gis-left { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 100%; |
|||
width: 20%; |
|||
background: linear-gradient(270deg, rgba(0, 19, 46, 0) 0%, #000000 100%); |
|||
} |
|||
|
|||
.gis-right { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
height: 100%; |
|||
width: 20%; |
|||
background: linear-gradient(90deg, rgba(0, 19, 46, 0) 0%, #000000 100%); |
|||
} |
|||
|
|||
.gis-top { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 10%; |
|||
width: 100%; |
|||
background: linear-gradient(0deg, rgba(0, 19, 46, 0) 0%, #000000 100%); |
|||
} |
|||
|
|||
.gis-bottom { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
height: 10%; |
|||
width: 100%; |
|||
background: linear-gradient(180deg, rgba(0, 19, 46, 0) 0%, #000000 100%); |
|||
} |
|||
|
|||
.gis-button1 { |
|||
position: absolute; |
|||
left: 39%; |
|||
bottom: -5%; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 12px; |
|||
color: #ECF7FF; |
|||
letter-spacing: 0; |
|||
width: 76.95px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
z-index: 999; |
|||
|
|||
.button_img { |
|||
background: url('/assets/images/homePage/communtity/home.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 76.95px; |
|||
height: 64px; |
|||
} |
|||
|
|||
.button_img_select { |
|||
background: url('/assets/images/homePage/communtity/homeselect.png'); |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.gis-button2 { |
|||
position: absolute; |
|||
left: 48%; |
|||
bottom: -3%; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 12px; |
|||
color: #ECF7FF; |
|||
letter-spacing: 0; |
|||
width: 76.95px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
z-index: 999; |
|||
|
|||
.button_img { |
|||
background: url('/assets/images/homePage/communtity/personbutton.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 76.95px; |
|||
height: 64px; |
|||
} |
|||
|
|||
.button_img_select { |
|||
background: url('/assets/images/homePage/communtity/personbuttonselect.png'); |
|||
} |
|||
} |
|||
|
|||
.gis-button3 { |
|||
position: absolute; |
|||
left: 57%; |
|||
bottom: -5%; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 12px; |
|||
color: #ECF7FF; |
|||
letter-spacing: 0; |
|||
width: 76.95px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
z-index: 999; |
|||
|
|||
.button_img { |
|||
background: url('/assets/images/homePage/communtity/devicebutton.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 76.95px; |
|||
height: 64px; |
|||
} |
|||
|
|||
.button_img_select { |
|||
background: url('/assets/images/homePage/communtity/devicebuttonselect.png'); |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.gis-infowindow { |
|||
width: 302px; |
|||
height: 420px; |
|||
background: url('/assets/images/homepage/communtity/infowindowbg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
opacity: 0.8; |
|||
padding-left: 69px; |
|||
padding-left: 22px; |
|||
padding-top: 157px; |
|||
color: #fff; |
|||
|
|||
.gis_exit { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
right: 9px; |
|||
top: 42px; |
|||
width: 30.75px; |
|||
height: 23px; |
|||
background: url('/assets/images/homepage/communtity/exit.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.gis_item { |
|||
height: 35px; |
|||
background-image: linear-gradient(180deg, #0555a791 0%, #022a6f91 100%); |
|||
width: 93%; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 20px; |
|||
|
|||
.gis_title { |
|||
font-family: SourceHanSansCN-Regular; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #C3E6FF; |
|||
letter-spacing: 0; |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
.gis_text { |
|||
font-family: SourceHanSansCN-Regular; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
line-height: 21px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.gis-infowindow-alarm { |
|||
background: url('/assets/images/homepage/communtity/alarminfowindow.png') no-repeat; |
|||
height: 432px; |
|||
width: 311px; |
|||
padding-top: 107px; |
|||
|
|||
.gis_exit { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
right: 2px; |
|||
top: 15px; |
|||
width: 30.75px; |
|||
height: 23px; |
|||
background: url('/assets/images/homepage/communtity/exitalarm.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.gis_item { |
|||
margin-bottom: 10px; |
|||
height: 35px; |
|||
background-image: linear-gradient(180deg, #a7050591 0%, #48010191 100%); |
|||
; |
|||
|
|||
} |
|||
|
|||
.confirm_text { |
|||
font-family: SourceHanSansCN-Medium; |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
line-height: 21px; |
|||
} |
|||
|
|||
.alarm_confirm { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
margin-top: 15px; |
|||
|
|||
.alarm_cancel { |
|||
width: 81px; |
|||
height: 30px; |
|||
background-image: linear-gradient(180deg, #C50000 1%, #b600006e 52%, #C50000 100%); |
|||
box-shadow: inset 0 1px 14px 0 #ff2b2b59; |
|||
border-radius: 4px; |
|||
|
|||
font-family: SourceHanSansCN-Medium; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
color: #FFE8E8; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
|
|||
background: url('/assets/images/homepage/communtity/alarmcancel.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.alarm_ok { |
|||
text-align: center; |
|||
line-height: 30px; |
|||
width: 81px; |
|||
height: 30px; |
|||
background-image: linear-gradient(180deg, #C50000 1%, #b600006e 52%, #C50000 100%); |
|||
box-shadow: inset 0 1px 14px 0 #ff2b2b59; |
|||
border-radius: 4px; |
|||
font-family: SourceHanSansCN-Medium; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.alarm_button { |
|||
width: 103px; |
|||
height: 30px; |
|||
margin-top: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: SourceHanSansCN-Medium; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
background: url('/assets/images/homepage/communtity/alarmbutton.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-left: 89px; |
|||
cursor: pointer; |
|||
|
|||
.alarm_icon { |
|||
width: 18px; |
|||
height: 18px; |
|||
background: url('/assets/images/homepage/communtity/alarmicon.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.home_left { |
|||
position: absolute; |
|||
left: 26%; |
|||
top: 3%; |
|||
z-index: 999; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 1.33px; |
|||
text-shadow: -2px 0 0 #0C5FA6; |
|||
|
|||
.hometotalbg { |
|||
width: 126.45px; |
|||
height: 26.23px; |
|||
padding-left: 24px; |
|||
background: url('/assets/images/homepage/communtity/total.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.home_total_number { |
|||
font-family: D-DIN-Italic; |
|||
font-weight: Italic; |
|||
font-size: 28px; |
|||
color: #EAF2FF; |
|||
letter-spacing: 0; |
|||
margin-left: 40px; |
|||
} |
|||
|
|||
.hqtotal { |
|||
width: 126.45px; |
|||
height: 26.23px; |
|||
padding-left: 24px; |
|||
background: url('/assets/images/homepage/communtity/hqtotal.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.cztotal { |
|||
width: 126.45px; |
|||
height: 26.23px; |
|||
padding-left: 24px; |
|||
background: url('/assets/images/homepage/communtity/cztotal.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.lztotal { |
|||
width: 126.45px; |
|||
height: 26.23px; |
|||
padding-left: 24px; |
|||
background: url('/assets/images/homepage/communtity/lztotal.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
} |
|||
|
|||
.home_right { |
|||
position: absolute; |
|||
right: 26%; |
|||
bottom: 7%; |
|||
z-index: 999; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 14px; |
|||
background: #021d33ad; |
|||
// border: 1px solid rgba(2, 29, 51, 0.68); |
|||
padding: 7px 14px 7px 14px; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(133deg, rgba(0, 197, 255, 0.53) 0%, rgba(0, 138, 255, 0.62)) 1; |
|||
|
|||
._lz { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
._icon { |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
background: url('/assets/images/homepage/communtity/lzicon.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
span { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 14px; |
|||
letter-spacing: 0; |
|||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(250, 196, 110, 1) 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
} |
|||
} |
|||
|
|||
._hq { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
|
|||
._icon { |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
background: url('/assets/images/homepage/communtity/hqicon.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
span { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 14px; |
|||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(36, 220, 247, 1) 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
|
|||
._cz { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
|
|||
._icon { |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
background: url('/assets/images/homepage/communtity/czicon.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
span { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 14px; |
|||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(1, 140, 255, 1) 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { connect } from 'react-redux'; |
|||
import { push } from 'react-router-redux'; |
|||
import Left from '../components/item-left' |
|||
import Right from '../components/item-right' |
|||
import LeftTop from '../components/left-top' |
|||
import LeftMiddle from '../components/left-middle' |
|||
import LeftBottom from '../components/left-bottom' |
|||
import RightTop from '../components/right-top' |
|||
import RightMiddle from '../components/right-middle' |
|||
import RightBottom from '../components/right-bottom' |
|||
import Gis from './gis'; |
|||
import './style.less' |
|||
|
|||
function homePage(props) { |
|||
const { dispatch } = props; |
|||
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } |
|||
const cardHeight = document.body.clientHeight * 0.896 * 0.32 |
|||
const cardContentHeight = cardHeight - 42 - 13 |
|||
const [tab, setTab] = useState('overview') |
|||
return <> |
|||
<div className='homepage'> |
|||
<div className='_title'> |
|||
<div className='_title_text'> |
|||
<span>智慧消防</span> |
|||
<div className='_title_dot'></div> |
|||
<span>一键护航</span> |
|||
</div> |
|||
<div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >返回平台</div> |
|||
</div> |
|||
<div className='homepage-left homepage-left-left'> |
|||
<div div className="list"> |
|||
{tab == 'overview' ? |
|||
<> |
|||
<div className='child' style={childStyle}> |
|||
<LeftTop /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<LeftMiddle /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<LeftBottom cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
</> |
|||
: |
|||
<div className='child' style={{ height: '100%' }} > |
|||
<Left endEvent={() => { |
|||
setTab('overview') |
|||
}} cardContentHeight={document.body.clientHeight * 0.896} /> |
|||
</div> |
|||
} |
|||
</div> |
|||
</div> |
|||
<div className='homepage-center'> |
|||
<Gis |
|||
alarmOk={() => { |
|||
setTab('item') |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className='homepage-left homepage-left-right'> |
|||
{tab == 'overview' ? <div className="list"> |
|||
<div className='child-right' style={childStyle}> |
|||
<RightTop /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<RightMiddle cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<RightBottom /> |
|||
</div> |
|||
</div> : |
|||
<div className='child' style={{ height: '100%' }} > |
|||
<Right cardContentHeight={document.body.clientHeight * 0.896} /> |
|||
</div> |
|||
} |
|||
</div> |
|||
|
|||
</div > |
|||
</> |
|||
|
|||
|
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { |
|||
auth, global |
|||
} = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
actions: global.actions, |
|||
|
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(homePage); |
|||
|
|||
|
|||
@ -0,0 +1,6 @@ |
|||
'use strict'; |
|||
|
|||
import homePage from './homePage'; |
|||
|
|||
|
|||
export default homePage ; |
|||
@ -0,0 +1,303 @@ |
|||
.homepage { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
background: url('/assets/images/homePage/communtity/bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
overflow: hidden; |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// justify-content: center; |
|||
// align-items: center; |
|||
padding-top: 5%; |
|||
|
|||
._title_text { |
|||
position: absolute; |
|||
top: 0%; |
|||
width: 100%; |
|||
height: 62px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 48px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 12px; |
|||
z-index: 300; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
._title_dot { |
|||
display: inline-block; |
|||
width: 8px; |
|||
height: 8px; |
|||
background-image: linear-gradient(180deg, #FFFFFF 0%, #0d71ef00 100%); |
|||
margin-left: 14px; |
|||
margin-right: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
} |
|||
|
|||
._exit { |
|||
position: absolute; |
|||
right: 60px; |
|||
top: 38px; |
|||
cursor: pointer; |
|||
color: #C8F0FF; |
|||
display: flex; |
|||
width: 102px; |
|||
height: 33px; |
|||
background: url('/assets/images/homePage/bigscreen/exit.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
padding-left: 35px; |
|||
align-items: center; |
|||
z-index: 400; |
|||
} |
|||
|
|||
.homepage-left { |
|||
width: 21.8%; |
|||
height: 84.6%; |
|||
position: absolute; |
|||
top: 10.1%; |
|||
z-index: 300; |
|||
} |
|||
|
|||
.homepage-center { |
|||
width: 93.9%; |
|||
height: 84%; |
|||
position: absolute; |
|||
top: 10.4%; |
|||
left: 58px; |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
z-index: 200; |
|||
|
|||
._top { |
|||
margin-top: 5%; |
|||
height: calc(100% - 200px); |
|||
background: url('/assets/images/homePage/bigscreen/centerbg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
} |
|||
} |
|||
|
|||
.homepage-left-left { |
|||
left: 58px; |
|||
} |
|||
|
|||
.homepage-left-right { |
|||
right: 58px; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.list { |
|||
list-style: none; |
|||
height: 100%; |
|||
} |
|||
|
|||
.list .child { |
|||
box-sizing: border-box; |
|||
opacity: 0; |
|||
transform: translateX(-300px); |
|||
animation: show .5s forwards; |
|||
} |
|||
|
|||
.list .child.show { |
|||
animation-delay: 0s !important; |
|||
} |
|||
|
|||
.list .child.hide { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
animation-name: hide; |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
/*animation-delay*/ |
|||
.list .child:not(.hide):nth-child(5n + 1) { |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 2) { |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 3) { |
|||
animation-delay: .9s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 4) { |
|||
animation-delay: 1.2s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 5) { |
|||
animation-delay: 1.5s; |
|||
} |
|||
|
|||
.list .child-right { |
|||
box-sizing: border-box; |
|||
opacity: 0; |
|||
transform: translateX(300px); |
|||
animation: show .5s forwards; |
|||
} |
|||
|
|||
.list .child-right.show { |
|||
animation-delay: 0s !important; |
|||
} |
|||
|
|||
.list .child-right.hide { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
animation-name: hide; |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
/*animation-delay*/ |
|||
.list .child-right:not(.hide):nth-child(5n + 1) { |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 2) { |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 3) { |
|||
animation-delay: .9s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 4) { |
|||
animation-delay: 1.2s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 5) { |
|||
animation-delay: 1.5s; |
|||
} |
|||
|
|||
.list .child-top { |
|||
box-sizing: border-box; |
|||
opacity: 0; |
|||
transform: translateY(300px); |
|||
animation: show 1s forwards; |
|||
} |
|||
|
|||
.list .child-top.show { |
|||
animation-delay: 0s !important; |
|||
} |
|||
|
|||
.list .child-top.hide { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
animation-name: hide; |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
|
|||
@keyframes show { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes hide { |
|||
to { |
|||
opacity: 0; |
|||
transform: translateX(100px); |
|||
max-height: 0; |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
.center-card-title { |
|||
height: 31px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 5px; |
|||
|
|||
._icon_left { |
|||
width: 32px; |
|||
height: 17px; |
|||
background: url('/assets/images/homePage/bigscreen/center-left.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 11px; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
._icon_right { |
|||
width: 32px; |
|||
height: 17px; |
|||
background: url('/assets/images/homePage/bigscreen/center-right.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 11px; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.gis { |
|||
position: absolute; |
|||
width: 100vw; |
|||
height: calc(~"100% - 114px"); |
|||
left: 0; |
|||
top: 114px; |
|||
z-index: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
/* flex 基本布局样式 */ |
|||
.flex-column { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.flex-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.flex-content-between { |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.flex-content-around { |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.flex-content-start { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.flex-content-end { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.flex-item-center { |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-item-start { |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.flex-item-end { |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.flex-item-stretch { |
|||
align-items: stretch; |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'communitysafty', |
|||
name: '首页', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,11 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { HomeOutlined } from '@ant-design/icons'; |
|||
export function getNavItem(user) { |
|||
return ( |
|||
<Menu.Item key="firecontrol" icon={<HomeOutlined />}> |
|||
<Link to="/firecontrol">社区安全</Link> |
|||
</Menu.Item> |
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
'use strict'; |
|||
import homePage from './containers/index'; |
|||
|
|||
export default [{ |
|||
type: 'outer', |
|||
route: { |
|||
path: '/firecontrol', |
|||
key: 'firecontrol', |
|||
breadcrumb: '智慧消防', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
component: homePage |
|||
} |
|||
}]; |
|||
Loading…
Reference in new issue