81 changed files with 4559 additions and 1049 deletions
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 534 B |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 671 B |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 169 B |
|
After Width: | Height: | Size: 175 B |
|
After Width: | Height: | Size: 403 B |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 414 B |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 38 KiB |
@ -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,108 @@ |
|||||
|
.opcityBackground { |
||||
|
background-color: rgba(8, 27, 55, 0.6); |
||||
|
} |
||||
|
|
||||
|
.card-title { |
||||
|
height: 31px; |
||||
|
font-family: YouSheBiaoTiHei; |
||||
|
font-size: 24px; |
||||
|
color: #FFFFFF; |
||||
|
letter-spacing: 2px; |
||||
|
padding-left: 15px; |
||||
|
} |
||||
|
|
||||
|
/* 滚动列表 */ |
||||
|
.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,45 @@ |
|||||
|
'use strict' |
||||
|
|
||||
|
import React from 'react' |
||||
|
import './index.less' |
||||
|
class Box extends React.Component { |
||||
|
render() { |
||||
|
const { title, height = '100%', children, margin, overflow, subtitle, subtitleSelect } = 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>} |
||||
|
|
||||
|
{subtitleSelect && <div className='subtitle_' style={{ textAlign: 'right' }}> |
||||
|
{subtitleSelect} |
||||
|
</div>} |
||||
|
</div> |
||||
|
<div style={{ |
||||
|
height: 'calc(100% - 42px)', |
||||
|
backgroundImage: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)', |
||||
|
}}> |
||||
|
{children} |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
export default Box |
||||
|
|
||||
@ -1,15 +1,166 @@ |
|||||
import React, { useEffect, useState } from 'react' |
import React from 'react' |
||||
import Box from './public/table-card'; |
import { Box } from '$components'; |
||||
import './style.less'; |
import ReactEcharts from 'echarts-for-react'; |
||||
|
import * as echarts from 'echarts'; |
||||
|
function PopulationDynamics() { |
||||
|
|
||||
function SpecialPerson(props) { |
let xaxisData = ["民用建筑", "工业建筑", "森林", "地下建筑", "水上"]; |
||||
|
let yaxisData = [150, 150, 150, 150, 150]; |
||||
|
|
||||
|
const getSymbolData = (datas) => { |
||||
return <Box title={"特殊人群统计"}> |
let arr = []; |
||||
|
for (var i = 0; i < datas.length; i++) { |
||||
|
arr.push({ |
||||
|
value: datas[i], |
||||
|
symbolPosition: "end", |
||||
|
}); |
||||
|
} |
||||
|
return arr; |
||||
|
}; |
||||
|
|
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "shadow", |
||||
|
}, |
||||
|
backgroundColor: "rgba(255,255,255,0.75)", |
||||
|
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);", |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: "#000", |
||||
|
}, |
||||
|
formatter: (params) => { |
||||
|
const item = params[0]; |
||||
|
return item.name + " : " + item.value + " 条"; |
||||
|
}, |
||||
|
}, |
||||
|
legend: { |
||||
|
top: 10, |
||||
|
itemWidth: 20, |
||||
|
itemHeight: 10, |
||||
|
// icon: "roundRect",
|
||||
|
left: "center", |
||||
|
padding: 0, |
||||
|
textStyle: { |
||||
|
color: "#E6E6E7", |
||||
|
fontSize: 14, |
||||
|
padding: [2, 0, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 25, |
||||
|
right: 25, |
||||
|
top: 50, |
||||
|
bottom: 10, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: "category", |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
color: "rgba(195, 230, 255, 1)", |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: 'solid', |
||||
|
//y轴网格线设置
|
||||
|
color: "rgba(184, 185, 188, 0.5)", |
||||
|
width: 1, |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: xaxisData, |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
max: 225, |
||||
|
interval: 25, |
||||
|
type: "value", |
||||
|
|
||||
|
name: "单位:次", |
||||
|
nameGap: 30, |
||||
|
nameTextStyle: { |
||||
|
color: "rgba(195, 230, 255, 1)", |
||||
|
fontWeight: 400, |
||||
|
fontSize: 14, |
||||
|
padding: [-20, 20, 0, 0] |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
|
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: 'dashed', |
||||
|
color: 'rgba(89, 153, 200, 0.5)' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
fontSize: 12, |
||||
|
color: "rgba(195, 230, 255, 1)", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "bar", |
||||
|
barWidth: 16, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "top", |
||||
|
color: "#00A8FF", |
||||
|
|
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#00A8FF", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "rgba(0, 122, 255, 0)", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
data: yaxisData, |
||||
|
}, |
||||
|
{ |
||||
|
type: "pictorialBar", |
||||
|
symbol: "react", |
||||
|
symbolSize: [18, 8], |
||||
|
symbolOffset: [0, -5], |
||||
|
z: 12, |
||||
|
itemStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
data: getSymbolData(yaxisData), |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
return <Box title={"火灾分类"} subtitle> |
||||
|
<ReactEcharts |
||||
|
option={option} |
||||
|
notMerge |
||||
|
lazyUpdate |
||||
|
style={{ height: '100%' }} |
||||
|
/> |
||||
</Box> |
</Box> |
||||
} |
} |
||||
|
|
||||
export default SpecialPerson; |
export default PopulationDynamics; |
||||
|
|
||||
|
|
||||
|
|||||
@ -1,49 +0,0 @@ |
|||||
import React, { useEffect, useState } from 'react' |
|
||||
import CarouselList from './public/carousel-list'; |
|
||||
import { Tooltip } from 'antd'; |
|
||||
import { ApiTable, useFsRequest } from '$utils'; |
|
||||
import moment from 'moment'; |
|
||||
function AbnormalMonitoring(props) { |
|
||||
|
|
||||
const { data: logs = {} } = useFsRequest({ |
|
||||
url: ApiTable.getLogs, |
|
||||
query: { |
|
||||
logState: false, |
|
||||
startTime: moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), |
|
||||
endTime: moment().format('YYYY-MM-DD HH:mm:ss') |
|
||||
}, |
|
||||
pollingInterval: 1000 * 60 |
|
||||
}); |
|
||||
|
|
||||
const dataSource = logs?.rows ? logs?.rows?.map(s => { |
|
||||
return [ |
|
||||
<div style={{ color: '#fff' }}> |
|
||||
<Tooltip placement="top" title={s?.acquisitionTask?.taskName}> |
|
||||
{s?.acquisitionTask?.taskName?.length > 20 ? s?.acquisitionTask?.taskNamesubstring(0, 20) + '...' : s?.acquisitionTask?.taskName} |
|
||||
</Tooltip> |
|
||||
</div>, |
|
||||
moment(s?.startTime).format('YYYY-MM-DD HH:mm:ss'), |
|
||||
moment(s?.endTime).valueOf() - moment(s?.startTime).valueOf() + '毫秒', |
|
||||
<div style={{ color: 'rgba(245, 27, 27, 1)' }}> |
|
||||
<Tooltip placement="top" title={s?.details}> |
|
||||
{s?.details?.length > 20 ? s?.details.substring(0, 20) + '...' : s?.details} |
|
||||
</Tooltip> |
|
||||
</div> |
|
||||
] |
|
||||
}) : [] |
|
||||
return <div style={{ height: 149, border: '1px solid #50c9d74d', backgroundImage: 'linear-gradient(180deg, rgba(0, 32, 74, 0) 3%, rgba(80, 201, 247, 0.1) 100%)' }}> |
|
||||
<div className='center-card-title' style={{ marginBottom: 6 }}><div className='_icon_left' />异常监控<div className='_icon_right' /></div> |
|
||||
<CarouselList |
|
||||
header={['任务名称', '采集时间', '耗时', '异常日志']} |
|
||||
data={dataSource} |
|
||||
rowNum={2} |
|
||||
height={100} |
|
||||
multiellipsis |
|
||||
marginTop={-50} |
|
||||
/> |
|
||||
</div> |
|
||||
} |
|
||||
|
|
||||
export default AbnormalMonitoring; |
|
||||
|
|
||||
|
|
||||
@ -1,36 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import Box from './public/table-card'; |
|
||||
import { useFsRequest } from '$utils'; |
|
||||
import { mathRound } from './util' |
|
||||
function AccessData() { |
|
||||
|
|
||||
const { data: accessdata = [] } = useFsRequest({ |
|
||||
url: 'homepage/accessdata', |
|
||||
pollingInterval: 1000 * 60, |
|
||||
cacheKey: 'accessdata', |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
const renderBody = () => { |
|
||||
return <div className='access_data'> |
|
||||
<div className='_img'></div> |
|
||||
<div className='data_unit'> |
|
||||
数据单位<div className='data_number'>{!accessdata?.projects ? '-' : accessdata?.projects?.split(',')?.length}</div>个 |
|
||||
</div> |
|
||||
<div className='data_today'> |
|
||||
今日数据<div className='data_number'>{!accessdata?.res?.stat?.today ? '-' : accessdata?.res?.stat?.today > 1000 ? mathRound(accessdata?.res?.stat?.today) : accessdata?.res?.stat?.today}</div>{accessdata?.res?.stat?.today > 1000 ? '万条' : '条'} |
|
||||
</div> |
|
||||
<div className='data_total'> |
|
||||
数据总量<div className='data_number'>{accessdata?.res?.stat?.datas ? Math.round(accessdata?.res?.stat?.datas / 10000) : '-'}</div>万条 |
|
||||
</div> |
|
||||
</div> |
|
||||
} |
|
||||
|
|
||||
return <Box title={"接入数据统计"} > |
|
||||
{renderBody()} |
|
||||
</Box> |
|
||||
} |
|
||||
|
|
||||
export default AccessData; |
|
||||
|
|
||||
|
|
||||
@ -1,52 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import Box from './public/table-card'; |
|
||||
import CarouselList from './public/carousel-list'; |
|
||||
import { Tooltip } from 'antd'; |
|
||||
import moment from 'moment'; |
|
||||
import NoData from './public/noData'; |
|
||||
import { useFsRequest } from '$utils'; |
|
||||
|
|
||||
function AlarmList(props) { |
|
||||
const { cardContentHeight } = props; |
|
||||
const { data: alarms = [] } = useFsRequest({ |
|
||||
url: 'homepage/alarms', |
|
||||
pollingInterval: 1000 * 60, |
|
||||
cacheKey: 'alarms', |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
const data = alarms.map(s => { |
|
||||
return [ |
|
||||
s.content, |
|
||||
s.level == 1 ? '一级' : s.level == 2 ? '二级' : s.level == 3 ? '三级' : '四级', |
|
||||
moment(s.time).format('YYYY-MM-DD HH:mm:ss') |
|
||||
] |
|
||||
}) |
|
||||
|
|
||||
const renderBody = () => { |
|
||||
return <CarouselList |
|
||||
header={['预警内容', '预警等级', '预警时间']} |
|
||||
data={data?.map(s => { |
|
||||
return [ |
|
||||
<Tooltip placement="top" title={s[0]}> |
|
||||
{s[0].length > 20 ? s[0]?.substring(0, 20) + '...' : s[0]} |
|
||||
</Tooltip>, |
|
||||
<div style={{ color: s[1] == '一级' ? 'rgba(245, 27, 27, 1)' : s[1] == '二级' ? '#FF7900' : s[1] == '三级' ? '#FFCD00' : '#00DA9F' }}>{s[1]}</div>, |
|
||||
s[2] |
|
||||
] |
|
||||
})} |
|
||||
rowNum={6} |
|
||||
height={cardContentHeight} |
|
||||
multiellipsis |
|
||||
columnWidth={[180, 80, 150]} |
|
||||
/> |
|
||||
} |
|
||||
|
|
||||
return <Box title={"预警列表"}> |
|
||||
{alarms?.length > 0 ? renderBody() : <NoData />} |
|
||||
</Box> |
|
||||
} |
|
||||
|
|
||||
export default AlarmList; |
|
||||
|
|
||||
|
|
||||
@ -1,19 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import './style.less' |
|
||||
|
|
||||
function CenterTop(props) { |
|
||||
|
|
||||
|
|
||||
return <div className='_top'> |
|
||||
<div className='center_top_data'> |
|
||||
<div className='_center_card1'>共享交换</div> |
|
||||
<div className='_center_card2'>数据监控</div> |
|
||||
<div className='_center_card3'>数据治理</div> |
|
||||
<div className='_center_card4'>数据采集</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
} |
|
||||
|
|
||||
export default CenterTop; |
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,78 @@ |
|||||
|
export const RING_COLORS = [ |
||||
|
{ linearGradientTo: 'rgba(2, 14, 35, 1)', linearGradientFrom: 'rgba(23, 106, 231, 1)' }, |
||||
|
{ linearGradientTo: 'rgba(50, 40, 2, 1)', linearGradientFrom: 'rgba(255, 175, 0, 1)' }, |
||||
|
{ linearGradientTo: 'rgba(2, 71, 119, 1)', linearGradientFrom: 'rgba(0, 169, 255, 1)' }, |
||||
|
{ linearGradientTo: 'rgba(3, 56, 26, 1)', linearGradientFrom: 'rgba(0, 255, 110, 1)' }, |
||||
|
{ linearGradientTo: 'rgba(0, 48, 64, 1)', linearGradientFrom: 'rgba(0, 227, 255, 1)' }, |
||||
|
{ linearGradientTo: 'rgba(57, 2, 4, 1)', linearGradientFrom: 'rgba(254, 142, 145, 1)' }, |
||||
|
]; |
||||
|
|
||||
|
export const tooltip = { |
||||
|
backgroundColor: 'rgba(3, 65, 118, 0.8)', |
||||
|
borderColor: 'rgba(3, 65, 118, 0.8)', |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export const COMMON_COLOR = { |
||||
|
lineColor: '#2F5384', |
||||
|
labelColor: '#fff', |
||||
|
axisLineColor: '#0D4892', |
||||
|
splitLineColor: '#0D4892', |
||||
|
}; |
||||
|
|
||||
|
const getAreaColor = (color) => ({ |
||||
|
fromColor: color.replace('1)', '0)'), |
||||
|
toColor: color.replace('1)', '1)'), |
||||
|
}); |
||||
|
export const DEFAULT_COLOR = ['rgba(9,203,240, 1)', 'rgba(16,127,222, 1)', 'rgba(17,187,112, 1)', 'rgba(255, 143, 145, 1)', 'rgba(0, 168, 251, 1)', 'rgba(7, 246, 109, 1)', 'rgba(246, 136, 7, 1)']; |
||||
|
|
||||
|
export const DEFAULT_AREA_COLOR = DEFAULT_COLOR.map((color) => ({ |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, color: getAreaColor(color).fromColor, // 0% 处的颜色
|
||||
|
}, { |
||||
|
offset: 1, color: getAreaColor(color).toColor, // 100% 处的颜色
|
||||
|
}], |
||||
|
global: false, // 缺省为 false
|
||||
|
})); |
||||
|
|
||||
|
export const YAXIS_BLUE = { |
||||
|
axisTick: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: 'rgba(0, 133, 246, 1)', |
||||
|
dashOffset: 10, |
||||
|
type: 'dashed', |
||||
|
}, |
||||
|
inside: true, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: 'rgba(0, 133, 246, 1)', |
||||
|
}, |
||||
|
}, |
||||
|
nameTextStyle: { |
||||
|
color: '#FFFFFF', |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
type: 'dashed', |
||||
|
color: 'rgba(91, 180, 218, 0.1)', |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
export default { |
||||
|
RING_COLORS, tooltip, COMMON_COLOR, DEFAULT_COLOR, DEFAULT_AREA_COLOR, YAXIS_BLUE, |
||||
|
}; |
||||
|
|
||||
@ -0,0 +1,122 @@ |
|||||
|
import React from 'react'; |
||||
|
import ReactEcharts from 'echarts-for-react'; |
||||
|
import * as echarts from 'echarts'; |
||||
|
import { RING_COLORS, tooltip } from './constants'; |
||||
|
/** |
||||
|
* props |
||||
|
* height: 图表高度 |
||||
|
*/ |
||||
|
|
||||
|
function RingChart(props) { |
||||
|
const { data, image = {} } = props; |
||||
|
// eslint-disable-next-line react/destructuring-assignment
|
||||
|
const colors = props.colors || RING_COLORS; |
||||
|
const max = data.reduce((pre, cur) => pre + cur.value, 0); |
||||
|
const getOption = () => { |
||||
|
const option = { |
||||
|
graphic: { |
||||
|
type: 'image', |
||||
|
style: { |
||||
|
image: image.url, |
||||
|
width: image.width, |
||||
|
height: image.height, |
||||
|
}, |
||||
|
left: 'center', |
||||
|
top: 'center', |
||||
|
}, |
||||
|
title: { |
||||
|
text: max, |
||||
|
subtext: '站点总数', |
||||
|
textStyle: { |
||||
|
color: '#E2F8FF', |
||||
|
fontSize: 25, |
||||
|
align: 'center', |
||||
|
fontFamily: 'DINMediumItalic', |
||||
|
fontWeight: 'Italic', |
||||
|
letterSpacing: '2.08px', |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
fontSize: 14, |
||||
|
fontWeight: 400, |
||||
|
color: ['#E6EFFF'], |
||||
|
}, |
||||
|
x: 'center', |
||||
|
y: 'center', |
||||
|
top: '35%', |
||||
|
}, |
||||
|
tooltip: { |
||||
|
...tooltip, |
||||
|
trigger: 'item', |
||||
|
formatter: '{b} : {c}个 ({d}%)', |
||||
|
position: ['10%', '40%'], |
||||
|
}, |
||||
|
// 渐变色
|
||||
|
color: colors.map((s) => { |
||||
|
const cs = new echarts.graphic.LinearGradient(1, 1, 0, 0, [ |
||||
|
{ offset: 0, color: s.linearGradientFrom }, |
||||
|
{ offset: 0.9, color: s.linearGradientTo }, |
||||
|
]); |
||||
|
return cs; |
||||
|
}), |
||||
|
|
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: ['66%', '80%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
itemStyle: { |
||||
|
// 环图间隙
|
||||
|
borderColor: '#0A1024', |
||||
|
borderWidth: 3, |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center', |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: false, |
||||
|
fontSize: '40', |
||||
|
fontWeight: 'bold', |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
return option; |
||||
|
}; |
||||
|
const { height, width } = props; |
||||
|
const options = getOption(); |
||||
|
const renderList = () => data.map((s, index) => ( |
||||
|
<div key={s.name || index} className="type-leagle-item flex-row flex-item-center"> |
||||
|
<div className="flex-row flex-item-center"> |
||||
|
<div className="type-leagle-dot" style={{ background: `linear-gradient(16deg, ${colors[index].linearGradientFrom} 0%, ${colors[index].linearGradientTo} 100%)` }} /> |
||||
|
<div className="type-leagle-label">{s.name}</div> |
||||
|
</div> |
||||
|
<div className="type-leagle-value">{s.value}</div> |
||||
|
</div> |
||||
|
)); |
||||
|
|
||||
|
return ( |
||||
|
<div style={{ height: '100%' }} className="flex-column flex-item-center"> |
||||
|
<div className="type-chart-wrapper"> |
||||
|
<ReactEcharts |
||||
|
option={options} |
||||
|
notMerge |
||||
|
lazyUpdate |
||||
|
style={{ height: height || '174px', margin: '0', width: width || 'auto' }} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="type-leagle-wrapper flex-row flex-content-between"> |
||||
|
{renderList()} |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default RingChart; |
||||
@ -1,54 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import Box from './public/table-card'; |
|
||||
import { useFsRequest } from '$utils'; |
|
||||
import { mathRound } from './util'; |
|
||||
function DataShare(props) { |
|
||||
|
|
||||
const { data: dataTotal = {} } = useFsRequest({ |
|
||||
url: 'homepage/datatotal/top5', |
|
||||
pollingInterval: 1000 * 60, |
|
||||
cacheKey: 'datatotal', |
|
||||
}); |
|
||||
|
|
||||
const { data: restfulInfo = {} } = useFsRequest({ |
|
||||
url: 'homepage/restful/info', |
|
||||
pollingInterval: 1000 * 60, |
|
||||
cacheKey: 'restfulInfo', |
|
||||
}); |
|
||||
|
|
||||
const renderItem = (s) => { |
|
||||
return <div className='_item_content'> |
|
||||
<div className={'_item_icon' + s.key} /> |
|
||||
<div className='_item_text'> |
|
||||
{s.title} |
|
||||
<div className='number_container'> |
|
||||
<span className='_number'>{s.data}</span>{s.unit} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
} |
|
||||
|
|
||||
const leftData = [ |
|
||||
{ key: '1', data: mathRound(dataTotal?.total), unit: '万条', title: '共享库数据总量' }, |
|
||||
{ key: '2', data: restfulInfo?.total, unit: '次', title: '访问接口总次数' }, |
|
||||
{ key: '3', data: restfulInfo?.totalUser, unit: '个', title: '访问接口用户总数' }] |
|
||||
const rightData = [ |
|
||||
{ key: '2', data: restfulInfo?.todayTotal, unit: '次', title: '接口访问次数' }, |
|
||||
{ key: '3', data: restfulInfo?.todayUser, unit: '个', title: '访问接口用户总数' }] |
|
||||
|
|
||||
return <Box title={"数据共享"} > |
|
||||
<div className='data_share'> |
|
||||
<div className='_left_content'> |
|
||||
{leftData.map(s => renderItem(s))} |
|
||||
</div> |
|
||||
<div className='_right_content'> |
|
||||
<div className='_today_text'>今日</div> |
|
||||
{rightData.map(s => renderItem(s))} |
|
||||
</div> |
|
||||
</div> |
|
||||
</Box> |
|
||||
} |
|
||||
|
|
||||
export default DataShare; |
|
||||
|
|
||||
|
|
||||
@ -1,262 +0,0 @@ |
|||||
import React, { useEffect, useState } from 'react' |
|
||||
import Box from './public/table-card'; |
|
||||
import ReactEcharts from 'echarts-for-react'; |
|
||||
import './style.less'; |
|
||||
import { useFsRequest } from '$utils'; |
|
||||
import { mathRound } from './util'; |
|
||||
import NoData from './public/noData'; |
|
||||
function DataTop5(props) { |
|
||||
const { cardContentHeight } = props; |
|
||||
const { data: dataTotal = {} } = useFsRequest({ |
|
||||
url: 'homepage/datatotal/top5', |
|
||||
pollingInterval: 1000 * 60, |
|
||||
cacheKey: 'datatotal', |
|
||||
}); |
|
||||
|
|
||||
const renderBody = () => { |
|
||||
let chartData = dataTotal?.top5?.map(x => { |
|
||||
return { |
|
||||
name: x?.dataSource?.resourceCatalog?.name, |
|
||||
value: mathRound(x.dbRecordCount), |
|
||||
} |
|
||||
}) || [] |
|
||||
|
|
||||
let options = { |
|
||||
xAxis: { |
|
||||
splitLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
splitArea: { show: false }, |
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
tooltip: { |
|
||||
confine: true, |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'shadow', |
|
||||
}, |
|
||||
backgroundColor: 'rgba(13,30,44, 0.7)', |
|
||||
borderColor: 'rgba(3, 65, 118, 0.8)', |
|
||||
textStyle: { |
|
||||
color: '#fff', |
|
||||
}, |
|
||||
formatter: function (params) { |
|
||||
var name = params[0].name |
|
||||
if (name.length > 20) { |
|
||||
name = name.replace(/(.{20})/g, '$1<br>') // 每 30 个字符添加一个换行符
|
|
||||
} |
|
||||
var content = name |
|
||||
|
|
||||
return content + ' : <b>' + params[0].value + '</b>万条' |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
top: 13, |
|
||||
bottom: -10, |
|
||||
left: '5%', |
|
||||
}, |
|
||||
yAxis: { |
|
||||
inverse: true, |
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
textStyle: { |
|
||||
color: '#fff', |
|
||||
padding: [-5, 0, 35, 18], |
|
||||
}, |
|
||||
formatter(value, index) { |
|
||||
let str = '', num = 'TOP' + (index + 1) |
|
||||
let valueHandle = value.length > 10 ? value.substring(0, 10) + '...' : value |
|
||||
if (index === 0) { |
|
||||
str = '{a| ' + num + '}{title| ' + valueHandle + '}' |
|
||||
} else if (index === 1) { |
|
||||
str = '{b| ' + num + '}{title| ' + valueHandle + '}' |
|
||||
} else if (index === 2) { |
|
||||
str = '{c| ' + num + '}{title| ' + valueHandle + '}' |
|
||||
} else { |
|
||||
str = '{d| ' + num + '}{title| ' + valueHandle + '}' |
|
||||
} |
|
||||
return str |
|
||||
}, |
|
||||
rich: { |
|
||||
a: { |
|
||||
borderColor: '#EE6F7C', |
|
||||
borderWidth: 1, |
|
||||
borderRadius: [0, 10, 10, 0], |
|
||||
padding: [3.5, 10, 1, -13], |
|
||||
backgroundColor: 'rgba(238, 111, 124, 0.8)', |
|
||||
}, |
|
||||
b: { |
|
||||
borderColor: '#FFCF5F', |
|
||||
borderWidth: 1, |
|
||||
borderRadius: [0, 10, 10, 0], |
|
||||
padding: [3.5, 10, 1, -13], |
|
||||
backgroundColor: 'rgba(255, 207, 95, 0.7)', |
|
||||
}, |
|
||||
c: { |
|
||||
borderColor: '#00E8FF', |
|
||||
borderWidth: 1, |
|
||||
borderRadius: [0, 10, 10, 0], |
|
||||
padding: [3.5, 10, 1, -13], |
|
||||
backgroundColor: 'rgba(0, 232, 255, 0.7)', |
|
||||
}, |
|
||||
d: { |
|
||||
borderColor: '#1A90FF', |
|
||||
borderWidth: 1, |
|
||||
borderRadius: [0, 10, 10, 0], |
|
||||
padding: [3.5, 10, 1, -13], |
|
||||
backgroundColor: 'rgba(26, 144, 255, 0.7)', |
|
||||
}, |
|
||||
title: { |
|
||||
padding: [0, 0, 0, 3], |
|
||||
}, |
|
||||
}, |
|
||||
align: 'left', |
|
||||
}, |
|
||||
data: chartData.map((item) => item.name), |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
type: 'pictorialBar', |
|
||||
symbol: 'rect', |
|
||||
symbolRotate: 30, |
|
||||
symbolRepeat: 'fixed', |
|
||||
symbolClip: true, |
|
||||
symbolOffset: [0, -1.5], |
|
||||
symbolSize: [2, 12], |
|
||||
symbolMargin: '3', |
|
||||
itemStyle: { |
|
||||
normal: { |
|
||||
color: '#000726', |
|
||||
}, |
|
||||
}, |
|
||||
label: { |
|
||||
show: true, |
|
||||
color: '#C8F0FF', |
|
||||
fontFamily: 'Bebas', |
|
||||
fontSize: 12, |
|
||||
offset: [-9, 1], |
|
||||
position: 'right', |
|
||||
formatter(params) { |
|
||||
let result = '' |
|
||||
switch (params.dataIndex) { |
|
||||
case 0: |
|
||||
result = '{img|}{index0|' + params.value + '}{unit|}' |
|
||||
break |
|
||||
case 1: |
|
||||
result = '{img|}{index1|' + params.value + '}{unit|}' |
|
||||
break |
|
||||
case 2: |
|
||||
result = '{img|}{index2|' + params.value + '}{unit|}' |
|
||||
break |
|
||||
default: |
|
||||
result = '{img|}{index3|' + params.value + '}{unit|}' |
|
||||
break |
|
||||
} |
|
||||
return result |
|
||||
}, |
|
||||
rich: { |
|
||||
img: { |
|
||||
height: 18, |
|
||||
width: 20, |
|
||||
// backgroundColor: { image: arrow },这个图片自己切，这里上传不了（加了一个尾巴的形状）
|
|
||||
}, |
|
||||
unit: { |
|
||||
color: '#C8F0FF', |
|
||||
fontSize: 11, |
|
||||
}, |
|
||||
index0: { |
|
||||
color: '#FFF', |
|
||||
fontFamily: 'Bebas', |
|
||||
padding: [-2, 2, 0, 0], |
|
||||
fontWeight: 'bold', |
|
||||
fontSize: 16, |
|
||||
}, |
|
||||
index1: { |
|
||||
color: '#FFF', |
|
||||
fontFamily: 'Bebas', |
|
||||
padding: [-2, 2, 0, 0], |
|
||||
fontWeight: 'bold', |
|
||||
fontSize: 16, |
|
||||
}, |
|
||||
index2: { |
|
||||
color: '#FFF', |
|
||||
fontFamily: 'Bebas', |
|
||||
padding: [-2, 2, 0, 0], |
|
||||
fontWeight: 'bold', |
|
||||
fontSize: 16, |
|
||||
}, |
|
||||
index3: { |
|
||||
color: '#FFF', |
|
||||
fontFamily: 'Bebas', |
|
||||
padding: [-2, 2, 0, 0], |
|
||||
fontWeight: 'bold', |
|
||||
fontSize: 16, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
symbolBoundingData: Math.max(...chartData.map((item) => item.value)) * 1.3, |
|
||||
data: chartData.map((item) => item.value), |
|
||||
z: 2, |
|
||||
}, |
|
||||
{ |
|
||||
type: 'bar', |
|
||||
barWidth: 10, |
|
||||
data: chartData.map((item) => item.value), |
|
||||
itemStyle: { |
|
||||
normal: { |
|
||||
color: '#54DEFA', |
|
||||
}, |
|
||||
}, |
|
||||
z: 1, |
|
||||
}, |
|
||||
{ |
|
||||
type: 'bar', |
|
||||
barGap: '-125%', // 设置外框粗细
|
|
||||
data: chartData.map((items) => Math.max(...chartData.map((item) => item.value)) * 1.3), |
|
||||
barWidth: 15, |
|
||||
itemStyle: { |
|
||||
color: 'none', |
|
||||
borderColor: '#979797', |
|
||||
}, |
|
||||
z: 0, |
|
||||
}, |
|
||||
], |
|
||||
}; |
|
||||
|
|
||||
return <ReactEcharts |
|
||||
option={options} |
|
||||
notMerge |
|
||||
lazyUpdate |
|
||||
style={{ height: cardContentHeight }} |
|
||||
/> |
|
||||
} |
|
||||
|
|
||||
return <Box title={"数据量TOP5单位"} bodyPaddingTop={1} > |
|
||||
{ |
|
||||
dataTotal?.top5?.length > 0 ? |
|
||||
<> |
|
||||
<div className='data_top5_unit'>数据量：万条</div> |
|
||||
{renderBody()} |
|
||||
</> |
|
||||
: <NoData /> |
|
||||
} |
|
||||
|
|
||||
</Box> |
|
||||
} |
|
||||
|
|
||||
export default DataTop5; |
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,55 @@ |
|||||
|
import React from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
|
||||
|
function Infrastructure(props) { |
||||
|
|
||||
|
|
||||
|
return <Box title={"预警统计"} > |
||||
|
<div className='_city_safty'> |
||||
|
<div className='alarm_handle'> |
||||
|
<div className='handle_img' /> |
||||
|
<div className='alarm_content'> |
||||
|
<div className='alarm_bg'> |
||||
|
<div className='alarm_title1'>2023-06-20 17：00：00</div> |
||||
|
<div className='alarm_title2' style={{ color: '#FFEA00' }}>二级预警</div> |
||||
|
</div> |
||||
|
<div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className='alarm_unhandle'> |
||||
|
<div className='handle_img' /> |
||||
|
<div className='alarm_content'> |
||||
|
<div className='alarm_bg'> |
||||
|
<div className='alarm_title1'>2023-06-20 17：00：00</div> |
||||
|
<div className='alarm_title2' style={{ color: '#FF2C2C' }}>一级预警</div> |
||||
|
</div> |
||||
|
<div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className='alarm_unhandle'> |
||||
|
<div className='handle_img' /> |
||||
|
<div className='alarm_content'> |
||||
|
<div className='alarm_bg'> |
||||
|
<div className='alarm_title1'>2023-06-20 17：00：00</div> |
||||
|
<div className='alarm_title2' style={{ color: '#FF2C2C' }}>二级预警</div> |
||||
|
</div> |
||||
|
<div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className='alarm_unhandle'> |
||||
|
<div className='handle_img' /> |
||||
|
<div className='alarm_content'> |
||||
|
<div className='alarm_bg'> |
||||
|
<div className='alarm_title1'>2023-06-20 17：00：00</div> |
||||
|
<div className='alarm_title2' style={{ color: '#FF2C2C' }}>二级预警</div> |
||||
|
</div> |
||||
|
<div className='alarm_text'>萌萌小区25栋305等等等等等发生等等火灾扥大哥大呢个</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Box> |
||||
|
} |
||||
|
|
||||
|
export default Infrastructure; |
||||
|
|
||||
|
|
||||
@ -0,0 +1,13 @@ |
|||||
|
import React from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
|
||||
|
function BasicInfo() { |
||||
|
|
||||
|
return <Box title={"防汛预案"} subtitle={true} > |
||||
|
|
||||
|
</Box> |
||||
|
} |
||||
|
|
||||
|
export default BasicInfo; |
||||
|
|
||||
|
|
||||
@ -0,0 +1,37 @@ |
|||||
|
import React, { useEffect, useState } from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
import './style.less'; |
||||
|
|
||||
|
|
||||
|
function DataTop5(props) { |
||||
|
|
||||
|
|
||||
|
return <Box title={"周边小区"} bodyPaddingTop={1} > |
||||
|
<div className='_traffic_ranking'> |
||||
|
<div className='_rank_title'> |
||||
|
<div className='_rank_item1'>排名</div> |
||||
|
<div className='_rank_item2'>小区名称</div> |
||||
|
<div className='_rank_item3'>人流量<span style={{ fontSize: 14 }}>/人次</span></div> |
||||
|
</div> |
||||
|
|
||||
|
<div className='rank_content_overflow'> |
||||
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(s => { |
||||
|
return <div className='_rank_content'> |
||||
|
<div className={`_rank_item1`}> |
||||
|
<div className={`topbg${s}`}> |
||||
|
<div style={{ marginTop: -9 }}>{s}</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<div className='_rank_item2'>小区名称{s}</div> |
||||
|
<div className='_rank_item3'>{1400 - s}</div> |
||||
|
</div> |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
</Box> |
||||
|
} |
||||
|
|
||||
|
export default DataTop5; |
||||
|
|
||||
|
|
||||
@ -0,0 +1,43 @@ |
|||||
|
import React, { useEffect, useState } from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
import './style.less'; |
||||
|
|
||||
|
function CitySafty(props) { |
||||
|
|
||||
|
return <Box title={"避难场所"} > |
||||
|
<div className='fire_item_right_container'> |
||||
|
{ |
||||
|
[1, 2, 3, 4, 5, 6, 7].map((s, index) => { |
||||
|
return <div className='fire_right_item'> |
||||
|
<div className='item_left'></div> |
||||
|
<div className='item_right'> |
||||
|
<div className='flex-row'> |
||||
|
<div className='item_right_left'>场所名称</div> |
||||
|
<div className='item_right_right'>南昌县人民公园中心市场</div> |
||||
|
</div> |
||||
|
<div className='flex-row'> |
||||
|
<div className='item_right_left'>场所地点</div> |
||||
|
<div className='item_right_right'>南昌县中心街道人民路168号 |
||||
|
人民路168号人民路168号</div> |
||||
|
</div> |
||||
|
<div className='flex-row'> |
||||
|
<div className='item_right_left'>承载人数</div> |
||||
|
<div className='item_right_right'>2000 人</div> |
||||
|
</div> |
||||
|
<div className='flex-row'> |
||||
|
<div className='item_right_left'>目标距离</div> |
||||
|
<div className='item_right_right'>2.5 Km</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className='position_bg'><div className='position_icon' /> <span>场所{index + 1}</span> </div> |
||||
|
</div> |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
</div> |
||||
|
</Box> |
||||
|
} |
||||
|
|
||||
|
export default CitySafty; |
||||
|
|
||||
|
|
||||
@ -1,42 +0,0 @@ |
|||||
import React, { useEffect, useState } from 'react' |
|
||||
import Box from './public/table-card'; |
|
||||
import NoData from './public/noData'; |
|
||||
import './style.less'; |
|
||||
import { ApiTable, useFsRequest } from '$utils'; |
|
||||
function HotspotData(props) { |
|
||||
|
|
||||
const { data: restfulInfo = {} } = useFsRequest({ |
|
||||
url: 'homepage/restful/info', |
|
||||
pollingInterval: 1000 * 60, |
|
||||
cacheKey: 'restfulInfo', |
|
||||
}); |
|
||||
|
|
||||
const top3 = restfulInfo?.top3 |
|
||||
return <Box title={"热点数据"} bodyPaddingTop={25} > |
|
||||
{top3?.length > 0 ? |
|
||||
<div className='hotspot_data_container'> |
|
||||
<div className='_img'></div> |
|
||||
<div className='_top1'> |
|
||||
<span className='hotspot_title' title={top3[0].name}>{top3[0].name?.length > 8 ? top3[0].name.substring(0, 8) + '...' : top3[0].name}</span> |
|
||||
<div className='hotspot_data_number'>{top3[0].count}</div> |
|
||||
</div> |
|
||||
<div className='_top2'> |
|
||||
{top3?.length > 2 && <> |
|
||||
<span className='hotspot_title' title={top3[2].name}>{top3[2].name?.length > 8 ? top3[2].name.substring(0, 8) + '...' : top3[2].name}</span> |
|
||||
<div className='hotspot_data_number'>{top3[2].count}</div> |
|
||||
</>} |
|
||||
</div> |
|
||||
<div className='_top3'> |
|
||||
{top3?.length > 1 && <> |
|
||||
<span className='hotspot_title' title={top3[1].name}>{top3[1].name?.length > 8 ? top3[1].name.substring(0, 8) + '...' : top3[1].name}</span> |
|
||||
<div className='hotspot_data_number'>{top3[1].count}</div> |
|
||||
</>} |
|
||||
</div> |
|
||||
</div> : <NoData /> |
|
||||
} |
|
||||
</Box> |
|
||||
} |
|
||||
|
|
||||
export default HotspotData; |
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,58 @@ |
|||||
|
import React from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
import RingChart from './charts/ring' |
||||
|
function LeftBottom(props) { |
||||
|
|
||||
|
const colors = [ |
||||
|
{ |
||||
|
linearGradientTo: 'rgba(5, 207, 247, 0)', |
||||
|
linearGradientFrom: 'rgba(5, 207, 247, 1)', |
||||
|
}, |
||||
|
{ |
||||
|
linearGradientTo: 'rgba(23, 123, 238, 1)', |
||||
|
linearGradientFrom: 'rgba(23, 123, 238, 0)', |
||||
|
}, |
||||
|
{ |
||||
|
linearGradientTo: 'rgba(234, 185, 102, 1)', |
||||
|
linearGradientFrom: 'rgba(234, 185, 102, 0)', |
||||
|
}, |
||||
|
{ |
||||
|
linearGradientTo: 'rgba(108, 208, 106, 0)', |
||||
|
linearGradientFrom: 'rgba(108, 208, 106, 1)', |
||||
|
}, |
||||
|
{ |
||||
|
linearGradientTo: 'rgba(194, 208, 213, 0)', |
||||
|
linearGradientFrom: 'rgba(194, 208, 213, 1)', |
||||
|
}, |
||||
|
{ |
||||
|
linearGradientTo: 'rgba(213, 204, 92, 0)', |
||||
|
linearGradientFrom: 'rgba(213, 204, 92, 1)', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const data = [ |
||||
|
{ name: '泵站站点', value: 2560 }, |
||||
|
{ name: '雨量站点', value: 1560 }, |
||||
|
{ name: '水位站点', value: 3560 } |
||||
|
] |
||||
|
|
||||
|
return <Box title={"建设数据"} > |
||||
|
<RingChart |
||||
|
data={data} |
||||
|
colors={colors} |
||||
|
width="100%" |
||||
|
height="100%" |
||||
|
image={ |
||||
|
{ |
||||
|
url: '/assets/images/ring_bg.png', |
||||
|
width: 106, |
||||
|
height: 106, |
||||
|
} |
||||
|
} |
||||
|
/> |
||||
|
</Box> |
||||
|
} |
||||
|
|
||||
|
export default LeftBottom; |
||||
|
|
||||
|
|
||||
@ -0,0 +1,30 @@ |
|||||
|
import React from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
import { Select } from 'antd'; |
||||
|
const { Option } = Select; |
||||
|
function BasicInfo() { |
||||
|
|
||||
|
const renderSubtitle = () => ( |
||||
|
<Select |
||||
|
className="gis-search-select" |
||||
|
popupClassName="super-dropdownClassName" |
||||
|
style={{ width: 120, height: 24 }} |
||||
|
showSearch={false} |
||||
|
optionFilterProp="children" |
||||
|
key={Math.random()} |
||||
|
defaultValue={'小蓝经开区'} |
||||
|
> |
||||
|
<Option key={'小蓝经开区'} value={'小蓝经开区'}>小蓝经开区</Option> |
||||
|
<Option key={'东新乡'} value={'东新乡'}>东新乡</Option> |
||||
|
<Option key={'莲塘镇'} value={'莲塘镇'}>莲塘镇</Option> |
||||
|
</Select> |
||||
|
); |
||||
|
|
||||
|
return <Box title={"实时态势"} subtitleSelect={renderSubtitle()}> |
||||
|
|
||||
|
</Box> |
||||
|
} |
||||
|
|
||||
|
export default BasicInfo; |
||||
|
|
||||
|
|
||||
@ -1,39 +0,0 @@ |
|||||
import React, { useEffect, useState } from 'react' |
|
||||
import Box from './public/table-card'; |
|
||||
import { ApiTable, useFsRequest } from '$utils'; |
|
||||
import './style.less'; |
|
||||
function NodeResource(props) { |
|
||||
const { data: cluters = {} } = useFsRequest({ |
|
||||
url: 'homepage/datatotal/cluters', |
|
||||
pollingInterval: 1000 * 20, |
|
||||
}); |
|
||||
|
|
||||
const renderBody = () => { |
|
||||
return <div className='node-resource-container'> |
|
||||
<div className='_item'> |
|
||||
<div className='_noderesource_data'>{cluters?.disk}<span className='_percent'>%</span></div> |
|
||||
<div className='_noderesource_title'>硬盘</div> |
|
||||
<div className='disk_icon' /> |
|
||||
</div> |
|
||||
<div className='_item'> |
|
||||
<div className='_noderesource_data'>{cluters?.memory}<span className='_percent'>%</span></div> |
|
||||
<div className='_noderesource_title'>内存</div> |
|
||||
<div className='memory_icon' /> |
|
||||
</div> |
|
||||
<div className='_item'> |
|
||||
<div className='_noderesource_data'>{cluters?.cpu}<span className='_percent'>%</span></div> |
|
||||
<div className='_noderesource_title'>CPU</div> |
|
||||
<div className='cpu_icon' /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
} |
|
||||
|
|
||||
return <Box title={"节点资源"} > |
|
||||
{renderBody()} |
|
||||
</Box> |
|
||||
} |
|
||||
|
|
||||
export default NodeResource; |
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,35 @@ |
|||||
|
import React, { useEffect, useState } from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
import './style.less'; |
||||
|
|
||||
|
|
||||
|
function DataTop5(props) { |
||||
|
|
||||
|
|
||||
|
return <Box title={"视频监控"} bodyPaddingTop={1} > |
||||
|
<div className='water_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 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,38 @@ |
|||||
|
import React, { useEffect, useState } from 'react' |
||||
|
import { Box } from '$components'; |
||||
|
import './style.less'; |
||||
|
|
||||
|
function CitySafty(props) { |
||||
|
|
||||
|
return <Box title={"水位趋势预测图"} > |
||||
|
<div className='water_traffic_ranking'> |
||||
|
<div className='_rank_title'> |
||||
|
<div className='_rank_item1'>点位名称</div> |
||||
|
<div className='_rank_item2'>时间</div> |
||||
|
<div className='_rank_item3'>水位</div> |
||||
|
<div className='_rank_item4'>未来1小时趋势</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className='rank_content_overflow'> |
||||
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((s, index) => { |
||||
|
return <div className='_rank_content'> |
||||
|
<div className={`_rank_item1`}> |
||||
|
点位{index + 1} |
||||
|
</div> |
||||
|
<div className='_rank_item2'>2023-01-02 12:12:12</div> |
||||
|
<div className='_rank_item3'>111 <div className={index % 2 == 0 ? '_upicon' : '_downicon'} /> </div> |
||||
|
<div className='_rank_item4'> |
||||
|
<div className={index % 2 == 0 ? 'normalbg' : 'warningbg'} > |
||||
|
{index % 2 == 0 ? '正常' : '告警'} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
</Box> |
||||
|
} |
||||
|
|
||||
|
export default CitySafty; |
||||
|
|
||||
|
|
||||
@ -1,373 +1,661 @@ |
|||||
@card-height: calc(100% - 42px - 13px); //左右卡片内容高度定义 目前卡片为等高 |
.item_left-container { |
||||
|
|
||||
//节点资源 |
|
||||
.node-resource-container { |
|
||||
display: flex; |
display: flex; |
||||
height: @card-height; |
|
||||
width: 100%; |
width: 100%; |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
flex-direction: column; |
||||
align-items: center; |
align-items: center; |
||||
|
overflow: auto; |
||||
|
|
||||
._item { |
.alarm_time { |
||||
width: 33%; |
width: 98%; |
||||
|
height: 225px; |
||||
|
background: url('/assets/images/homePage/fire/alarmtime.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
justify-content: center; |
||||
align-items: center; |
align-items: center; |
||||
|
font-family: YouSheBiaoTiHei; |
||||
|
font-size: 48px; |
||||
|
color: #ECF7FF; |
||||
|
} |
||||
|
|
||||
._noderesource_data { |
.end_event { |
||||
font-family: D-DINExp-Bold; |
width: 202px; |
||||
font-weight: 600; |
height: 39px; |
||||
font-size: 24px; |
background-image: linear-gradient(180deg, #711313 0%, #b3000063 52%, #711313 100%); |
||||
color: #FFFFFF; |
border: 1.5px solid #A20000; |
||||
line-height: 43.2px; |
box-shadow: inset 0 1px 14px 0 #ff525259; |
||||
display: flex; |
border-radius: 2px; |
||||
align-items: center; |
display: flex; |
||||
|
justify-self: center; |
||||
|
align-items: center; |
||||
|
color: #ECF7FF; |
||||
|
justify-content: center; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
._percent { |
.event_title { |
||||
opacity: 0.8; |
color: #fff; |
||||
font-family: PingFangSC-Regular; |
font-size: 16px; |
||||
font-weight: 400; |
display: flex; |
||||
font-size: 12px; |
justify-content: space-around; |
||||
color: #C8F0FF; |
align-items: center; |
||||
text-align: left; |
width: 81%; |
||||
line-height: 24px; |
margin-top: 30px; |
||||
} |
margin-bottom: 10px; |
||||
|
|
||||
|
.event_title_left { |
||||
|
width: 70px; |
||||
|
height: 2.37px; |
||||
|
background-image: linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, #377EE8 97%); |
||||
} |
} |
||||
|
|
||||
._noderesource_title { |
.event_title_right { |
||||
font-family: YouSheBiaoTiHei; |
width: 70px; |
||||
font-size: 20px; |
height: 2.37px; |
||||
color: #D8F0FF; |
transform: scaleX(-1); |
||||
letter-spacing: 1.54px; |
background-image: linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, #377EE8 97%); |
||||
text-align: center; |
} |
||||
text-shadow: 0 0 10px rgba(0, 145, 255, 0.5); |
} |
||||
margin-bottom: 17px; |
|
||||
|
.left_second_bg { |
||||
|
width: 95%; |
||||
|
height: 160px; |
||||
|
background: url('/assets/images/homePage/fire/secondbg.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.left_third_bg { |
||||
|
width: 95%; |
||||
|
height: 80px; |
||||
|
background: url('/assets/images/homePage/fire/bg3.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
.left_item_left1 { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background: url('/assets/images/homePage/fire/lefticon1.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
.disk_icon { |
.left_item_left2 { |
||||
width: 68.73px; |
width: 50px; |
||||
height: 62.77px; |
height: 50px; |
||||
background: url('/assets/images/homePage/bigscreen/disk.png'); |
background: url('/assets/images/homePage/fire/lefticon2.png') no-repeat; |
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
.cpu_icon { |
.left_item_left3 { |
||||
width: 68.73px; |
width: 50px; |
||||
height: 62.77px; |
height: 50px; |
||||
background: url('/assets/images/homePage/bigscreen/cpu.png'); |
background: url('/assets/images/homePage/fire/lefticon3.png') no-repeat; |
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
.memory_icon { |
.left_item_left4 { |
||||
width: 68.73px; |
width: 50px; |
||||
height: 62.77px; |
height: 50px; |
||||
background: url('/assets/images/homePage/bigscreen/memory.png'); |
background: url('/assets/images/homePage/fire/lefticon4.png') no-repeat; |
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
|
.left_item_right1 { |
||||
|
width: calc(100% - 70px); |
||||
|
color: rgba(236, 247, 255, 1); |
||||
|
} |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
|
|
||||
//接入数据统计 |
.fire_item_right_container { |
||||
.access_data { |
|
||||
display: flex; |
display: flex; |
||||
height: @card-height; |
|
||||
width: 100%; |
width: 100%; |
||||
justify-content: center; |
height: 100%; |
||||
|
text-align: center; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
overflow: auto; |
||||
|
padding-top: 24px; |
||||
|
|
||||
|
.fire_right_item { |
||||
|
padding-top: 16px; |
||||
|
padding-bottom: 16px; |
||||
|
width: 95%; |
||||
|
height: 183px; |
||||
|
background: url('/assets/images/homePage/fire/rightbgbig.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
color: #ECF7FF; |
||||
|
position: relative; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
.item_left { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background: url('/assets/images/homePage/fire/iconhome.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
font-family: PingFangSC-Regular; |
.item_right { |
||||
font-weight: 400; |
width: calc(100% - 100px); |
||||
font-size: 14px; |
display: flex; |
||||
color: #FFFFFF; |
flex-wrap: wrap; |
||||
|
|
||||
._img { |
|
||||
width: 230px; |
|
||||
height: 95%; |
|
||||
background: url('/assets/images/homePage/bigscreen/accessdata.png'); |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
} |
|
||||
|
|
||||
.data_unit { |
.item_right_left { |
||||
position: absolute; |
width: 100px; |
||||
top: 27%; |
font-size: 14px; |
||||
right: 21%; |
color: #ECF7FF; |
||||
|
font-family: ''; |
||||
|
} |
||||
|
|
||||
.data_number { |
.item_right_right { |
||||
line-height: 25px; |
width: 180px; |
||||
font-family: D-DINExp-Bold; |
font-size: 14px; |
||||
font-weight: 700; |
color: #9CF2FF; |
||||
font-size: 20px; |
letter-spacing: 0; |
||||
color: #3E86FF; |
font-family: ''; |
||||
letter-spacing: 0; |
text-align: left; |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.data_today { |
|
||||
position: absolute; |
|
||||
bottom: 13%; |
|
||||
right: 79%; |
|
||||
text-align: right; |
|
||||
|
|
||||
.data_number { |
|
||||
line-height: 25px; |
|
||||
font-family: D-DINExp-Bold; |
|
||||
font-weight: 700; |
|
||||
font-size: 20px; |
|
||||
color: #00F6E4; |
|
||||
letter-spacing: 0; |
|
||||
} |
} |
||||
} |
|
||||
|
|
||||
.data_total { |
.position_bg { |
||||
position: absolute; |
position: absolute; |
||||
bottom: 13%; |
left: 0%; |
||||
left: 79%; |
bottom: 0%; |
||||
|
width: 85px; |
||||
|
height: 30px; |
||||
|
background: rgba(31, 237, 255, 0.1); |
||||
|
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, rgba(0, 255, 244, 0.98) 100%); |
||||
|
border-radius: 0 20px 0 0; |
||||
|
display: flex; |
||||
|
justify-content: space-evenly; |
||||
|
align-items: center; |
||||
|
|
||||
.data_number { |
.position_icon { |
||||
line-height: 25px; |
width: 12px; |
||||
font-family: D-DINExp-Bold; |
height: 12px; |
||||
font-weight: 700; |
background: url('/assets/images/homePage/fire/position.png') no-repeat; |
||||
font-size: 20px; |
background-size: 100% 100%; |
||||
color: #FFDC4E; |
} |
||||
letter-spacing: 0; |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.data_top5_unit { |
|
||||
position: absolute; |
.fire_item_right_container::-webkit-scrollbar { |
||||
right: 4%; |
width: 0 !important |
||||
top: 18%; |
|
||||
font-family: PingFangSC-Regular; |
|
||||
font-weight: 400; |
|
||||
font-size: 12px; |
|
||||
color: #C8F0FF; |
|
||||
} |
} |
||||
|
|
||||
.hotspot_data_container { |
.item_left-container::-webkit-scrollbar { |
||||
display: flex; |
width: 0 !important |
||||
height: @card-height; |
} |
||||
|
|
||||
|
|
||||
|
//警情数据分析 |
||||
|
.alarm_data_analysis { |
||||
width: 100%; |
width: 100%; |
||||
justify-content: center; |
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
|
||||
font-family: PingFangSC-Regular; |
._item_left { |
||||
font-weight: 400; |
width: 209px; |
||||
font-size: 14px; |
height: 100%; |
||||
color: #FFFFFF; |
|
||||
|
|
||||
._img { |
._img { |
||||
width: 203px; |
width: 209px; |
||||
height: 80%; |
height: 209px; |
||||
background: url('/assets/images/homePage/bigscreen/hotspotdatabg.png'); |
background: url('/assets/images/homepage/fire/realalarmbg.png') no-repeat; |
||||
background-repeat: no-repeat; |
background-size: 100% 100%; |
||||
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; |
||||
|
} |
||||
|
|
||||
.hotspot_title { |
._text { |
||||
padding: 2px; |
font-family: YouSheBiaoTiHei; |
||||
padding-left: 6px; |
font-size: 20px; |
||||
padding-right: 6px; |
color: #FFFFFF; |
||||
background: rgba(77, 241, 227, 0.08); |
letter-spacing: 0; |
||||
border: 1px solid rgba(77, 241, 227, 0.1); |
margin-top: -30px; |
||||
box-shadow: inset 0 0 20px 0 rgba(28, 185, 196, 0.23); |
text-align: center; |
||||
|
} |
||||
} |
} |
||||
|
|
||||
|
._item_right { |
||||
|
width: 200px; |
||||
|
|
||||
.hotspot_data_number { |
._iconphone { |
||||
font-family: D-DINExp-Bold; |
width: 50.96px; |
||||
font-weight: 700; |
height: 45px; |
||||
font-size: 18px; |
background: url('/assets/images/homepage/fire/iconphone.png') no-repeat; |
||||
color: #FFFFFF; |
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
._top1 { |
._iconreal { |
||||
position: absolute; |
width: 50.96px; |
||||
top: 25%; |
height: 45px; |
||||
right: 63%; |
background: url('/assets/images/homepage/fire/iconreal.png') no-repeat; |
||||
text-align: right; |
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
._top2 { |
._iconmistake { |
||||
position: absolute; |
width: 50.96px; |
||||
bottom: 22%; |
height: 45px; |
||||
right: 67%; |
background: url('/assets/images/homepage/fire/iconmistake.png') no-repeat; |
||||
text-align: center; |
background-size: 100% 100%; |
||||
} |
} |
||||
|
|
||||
._top3 { |
.right_item_right { |
||||
position: absolute; |
width: 155px; |
||||
bottom: 34%; |
margin-left: 16px; |
||||
left: 73%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
//数据共享 |
.alarm_title { |
||||
.data_share { |
font-size: 14px; |
||||
display: flex; |
color: #ECF7FF; |
||||
height: @card-height; |
letter-spacing: 0; |
||||
|
} |
||||
|
|
||||
._left_content { |
.alarm_number { |
||||
width: 50%; |
font-family: D-DINExp-Italic; |
||||
height: 90%; |
font-weight: Italic; |
||||
padding-left: 30px; |
font-size: 28px; |
||||
display: flex; |
color: #24DCF7; |
||||
flex-direction: column; |
letter-spacing: 0; |
||||
justify-content: space-between; |
margin-right: 50px; |
||||
} |
} |
||||
|
|
||||
._right_content { |
.alarm_unit { |
||||
._today_text { |
font-size: 14px; |
||||
font-family: YouSheBiaoTiHei; |
color: #5999C8; |
||||
font-size: 24px; |
letter-spacing: 0; |
||||
color: #FFFFFF; |
} |
||||
letter-spacing: 0.5px; |
|
||||
position: absolute; |
|
||||
right: 6%; |
|
||||
top: 21%; |
|
||||
} |
} |
||||
|
|
||||
padding-top: 23px; |
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//实时数据 |
||||
|
.realtime_data { |
||||
|
height: 100%; |
||||
|
padding: 12px 30px 12px 30px; |
||||
|
|
||||
|
.realtime_item { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
background: url('/assets/images/homePage/fire/realtimebg.png') no-repeat; |
||||
width: 47%; |
|
||||
height: 95%; |
|
||||
background: url(/assets/images/homePage/bigscreen/todaybg.png); |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
justify-content: space-evenly; |
height: 45%; |
||||
|
width: 100%; |
||||
|
margin-bottom: 5%; |
||||
align-items: center; |
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
} |
||||
|
|
||||
._item_content { |
.realtime_data::-webkit-scrollbar { |
||||
display: flex; |
width: 0 !important |
||||
|
} |
||||
|
|
||||
|
.water_video_container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
._item { |
||||
|
width: 46%; |
||||
|
height: 32%; |
||||
|
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; |
||||
|
|
||||
._item_icon1 { |
|
||||
width: 52px; |
|
||||
height: 52px; |
|
||||
background: url('/assets/images/homePage/bigscreen/1.png'); |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
} |
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.today_real_alarm { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
._item_icon2 { |
.today_item { |
||||
width: 52px; |
width: 91%; |
||||
height: 52px; |
height: 41px; |
||||
background: url('/assets/images/homePage/bigscreen/2.png'); |
background: url('/assets/images/homePage/fire/alarmbg.png') no-repeat; |
||||
background-repeat: no-repeat; |
background-size: 100% 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
color: #ECF7FF; |
||||
|
overflow: auto; |
||||
|
|
||||
|
.column1_alarm1 { |
||||
|
width: 83px; |
||||
|
height: 24px; |
||||
|
background: url('/assets/images/homePage/fire/alarm1.png') no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
|
padding-left: 27px; |
||||
} |
} |
||||
|
|
||||
._item_icon3 { |
.column1_alarm2 { |
||||
width: 52px; |
width: 83px; |
||||
height: 52px; |
height: 24px; |
||||
background: url('/assets/images/homePage/bigscreen/3.png'); |
background: url('/assets/images/homePage/fire/alarm2.png') no-repeat; |
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
|
padding-left: 27px; |
||||
} |
} |
||||
|
|
||||
._item_text { |
.text_blue { |
||||
color: #C8F0FF; |
width: 100px; |
||||
padding-left: 6px; |
display: flex; |
||||
|
|
||||
.number_container { |
._icon1 { |
||||
._number { |
width: 8px; |
||||
font-family: D-DINExp-Bold; |
height: 8px; |
||||
font-weight: 700; |
background: url('/assets/images/homePage/fire/triangle1.png') no-repeat; |
||||
font-size: 22px; |
background-size: 100% 100%; |
||||
color: #FFFFFF; |
} |
||||
} |
|
||||
|
|
||||
display: flex; |
._icon2 { |
||||
align-items: center; |
width: 8px; |
||||
justify-content: space-evenly; |
height: 8px; |
||||
width: 112px; |
background: url('/assets/images/homePage/fire/triangle2.png') no-repeat; |
||||
height: 28px; |
background-size: 100% 100%; |
||||
background-image: linear-gradient(227deg, #3196AB 0%, #2091cd00 100%); |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
//大屏中间上部分 |
|
||||
.center_top_data { |
|
||||
|
|
||||
._center_card1 { |
//小区人流量排名 |
||||
width: 353px; |
.water_traffic_ranking { |
||||
height: 74px; |
height: 100%; |
||||
font-family: YouSheBiaoTiHei; |
padding: 14px 8px 14px 8px; |
||||
font-size: 22px; |
|
||||
color: #FFFFFF; |
._rank_title { |
||||
letter-spacing: 0.46px; |
height: 34.64px; |
||||
text-align: center; |
background: url('/assets/images/homePage/communtity/ranktitle.png'); |
||||
position: absolute; |
|
||||
top: -3%; |
|
||||
left: 32%; |
|
||||
background: url(/assets/images/homePage/bigscreen/centerdatabg1.png); |
|
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
|
color: #FFFFFF; |
||||
|
font-size: 16px; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: space-around; |
||||
|
|
||||
|
._rank_item1 { |
||||
|
text-align: center; |
||||
|
width: 25%; |
||||
|
} |
||||
|
|
||||
|
._rank_item2 { |
||||
|
text-align: center; |
||||
|
width: 20%; |
||||
|
} |
||||
|
|
||||
|
._rank_item3 { |
||||
|
text-align: right; |
||||
|
width: 25%; |
||||
|
} |
||||
|
|
||||
|
._rank_item4 { |
||||
|
text-align: center; |
||||
|
width: 35%; |
||||
|
} |
||||
} |
} |
||||
|
|
||||
._center_card2 { |
.rank_content_overflow { |
||||
width: 146px; |
height: calc(100% - 35px); |
||||
height: 35px; |
overflow: auto; |
||||
font-family: YouSheBiaoTiHei; |
} |
||||
font-size: 16px; |
|
||||
color: #35D0FF; |
._rank_content { |
||||
letter-spacing: 0.46px; |
margin-top: 12px; |
||||
text-align: center; |
height: 34.64px; |
||||
position: absolute; |
background: url('/assets/images/homePage/communtity/rankcontent.png'); |
||||
top: 26%; |
|
||||
left: 42%; |
|
||||
background: url(/assets/images/homePage/bigscreen/centerdatabg2.png); |
|
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
|
color: #E2F8FF; |
||||
|
font-size: 14px; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: space-around; |
||||
|
|
||||
|
._rank_item1 { |
||||
|
text-align: center; |
||||
|
width: 15%; |
||||
|
} |
||||
|
|
||||
|
._rank_item2 { |
||||
|
// text-align: center; |
||||
|
width: 40%; |
||||
|
} |
||||
|
|
||||
|
._rank_item3 { |
||||
|
// text-align: center; |
||||
|
width: 20%; |
||||
|
|
||||
|
._upicon { |
||||
|
background: url('/assets/images/homePage/water/up.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
width: 13px; |
||||
|
height: 13px; |
||||
|
display: inline-block; |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
|
||||
|
._downicon { |
||||
|
background: url('/assets/images/homePage/water/down.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
width: 13px; |
||||
|
height: 13px; |
||||
|
display: inline-block; |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
._rank_item4 { |
||||
|
// text-align: center; |
||||
|
width: 20%; |
||||
|
padding-top: 8px; |
||||
|
|
||||
|
.normalbg { |
||||
|
background: url('/assets/images/homePage/water/normal.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
width: 70px; |
||||
|
height: 21.64px; |
||||
|
padding-left: 30px; |
||||
|
line-height: 9px; |
||||
|
color: #24DCF7; |
||||
|
} |
||||
|
|
||||
|
.warningbg { |
||||
|
background: url('/assets/images/homePage/water/warning.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
width: 70px; |
||||
|
height: 21.64px; |
||||
|
color: #FAC46E; |
||||
|
padding-left: 30px; |
||||
|
line-height: 9px; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|
||||
._center_card3 { |
.topbg1 { |
||||
width: 146px; |
width: 28px; |
||||
height: 35px; |
height: 10px; |
||||
font-family: YouSheBiaoTiHei; |
background: url('/assets/images/homePage/communtity/top1.png'); |
||||
font-size: 16px; |
|
||||
color: #35D0FF; |
|
||||
letter-spacing: 0.46px; |
|
||||
text-align: center; |
|
||||
position: absolute; |
|
||||
top: 52%; |
|
||||
left: 42%; |
|
||||
background: url(/assets/images/homePage/bigscreen/centerdatabg2.png); |
|
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
display: flex; |
display: inline-block; |
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
} |
||||
|
|
||||
._center_card4 { |
.topbg2 { |
||||
width: 146px; |
width: 28px; |
||||
height: 35px; |
height: 10px; |
||||
font-family: YouSheBiaoTiHei; |
background: url('/assets/images/homePage/communtity/top2.png'); |
||||
font-size: 16px; |
|
||||
color: #35D0FF; |
|
||||
letter-spacing: 0.46px; |
|
||||
text-align: center; |
|
||||
position: absolute; |
|
||||
top: 74%; |
|
||||
left: 42%; |
|
||||
background: url(/assets/images/homePage/bigscreen/centerdatabg2.png); |
|
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
display: flex; |
display: inline-block; |
||||
align-items: center; |
} |
||||
justify-content: center; |
|
||||
|
.topbg3 { |
||||
|
width: 28px; |
||||
|
height: 10px; |
||||
|
background: url('/assets/images/homePage/communtity/top3.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
//建设数据 |
||||
|
.type-chart-wrapper { |
||||
|
width: 220px; |
||||
|
height: 220px; |
||||
|
background-image: url("/assets/images/ring_chart_bg.png"); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.type-leagle-wrapper { |
||||
|
padding-left: 30px; |
||||
|
padding-right: 36px; |
||||
|
width: 100%; |
||||
|
height: 100px; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: space-between; |
||||
|
|
||||
|
.type-leagle-item { |
||||
|
width: 157px; |
||||
|
height: 24px; |
||||
|
background-image: linear-gradient(90deg, #19222F 0%, rgba(30, 41, 56, 0) 100%); |
||||
|
padding: 0 30px 0 8px; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.type-leagle-dot { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
|
||||
|
.type-leagle-label { |
||||
|
color: rgba(212, 237, 253, 0.6); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
} |
||||
|
|
||||
|
.type-leagle-value { |
||||
|
color: rgba(216, 240, 255, 1); |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.gis-search-select { |
||||
|
.ant-select-selector { |
||||
|
background-color: rgba(36, 220, 247, 0.3) !important; |
||||
|
border: rgba(36, 220, 247, 1) 1px solid !important; |
||||
|
height: 24px !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-selection-item { |
||||
|
color: rgba(36, 220, 247, 1) !important; |
||||
|
line-height: 24px !important; |
||||
|
} |
||||
|
|
||||
|
.ant-select-arrow { |
||||
|
color: inherit; |
||||
|
color: rgba(36, 220, 247, 1) !important; |
||||
} |
} |
||||
} |
} |
||||
@ -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,530 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import { render } from 'react-dom'; |
||||
|
import { data as heatmapData } from './data' |
||||
|
import './gis.less' |
||||
|
const MAPDOMID = 'fs-amap-container1'; |
||||
|
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('overview') |
||||
|
// 地图初始化
|
||||
|
const loadMap = () => { |
||||
|
// 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
|
||||
|
const imageLayer = new AMap.ImageLayer({ |
||||
|
url: '/assets/images/map1.svg', |
||||
|
bounds: new AMap.Bounds( |
||||
|
[115.800221, 28.225659], |
||||
|
[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/300b147a96946a4f1c1b1b8eb1f92f76', |
||||
|
layers: [ |
||||
|
AMap.createDefaultLayer(), |
||||
|
imageLayer, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
map.on('complete', () => { |
||||
|
setTimeout(() => { |
||||
|
setDelay(false) |
||||
|
}, 1500); |
||||
|
}); |
||||
|
|
||||
|
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 }) |
||||
|
createText() |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
const createText = () => { |
||||
|
var text = new AMap.Text({ |
||||
|
text: '南昌县', |
||||
|
anchor: 'center', // 设置文本标记锚点
|
||||
|
draggable: false, |
||||
|
// cursor: 'pointer',
|
||||
|
zooms: [3, 11], |
||||
|
style: { |
||||
|
'padding': '.75rem 1.25rem', |
||||
|
'margin-bottom': '1rem', |
||||
|
'border-radius': '.25rem', |
||||
|
'background-color': 'rgba(238,77,90,0.001)', |
||||
|
'width': '8rem', |
||||
|
'border-width': 0, |
||||
|
//'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .1)',
|
||||
|
'text-align': 'center', |
||||
|
'font-size': '14px', |
||||
|
'color': '#AFEFFF', |
||||
|
'opacity': 1, |
||||
|
// 'font-weight': 'bold'
|
||||
|
}, |
||||
|
position: [115.934664, 28.538966] |
||||
|
}); |
||||
|
text.setMap(map); |
||||
|
|
||||
|
} |
||||
|
const drawBounds = () => { |
||||
|
let district = null; |
||||
|
let polygons = []; |
||||
|
//加载行政区划插件
|
||||
|
if (!district) { |
||||
|
//实例化DistrictSearch
|
||||
|
let opts = { |
||||
|
subdistrict: 0, //获取边界不需要返回下级行政区
|
||||
|
extensions: 'all', //返回行政区边界坐标组等具体信息
|
||||
|
level: 'district' //查询行政级别为 市
|
||||
|
}; |
||||
|
district = new AMap.DistrictSearch(opts); |
||||
|
} |
||||
|
//行政区查询
|
||||
|
district.setLevel('district') |
||||
|
district.search('南昌县', function (status, result) { |
||||
|
map.remove(polygons)//清除上次结果
|
||||
|
polygons = []; |
||||
|
let bounds = result.districtList[0].boundaries; |
||||
|
if (bounds) { |
||||
|
for (let i = 0, l = bounds.length; i < l; i++) { |
||||
|
//生成行政区划polygon
|
||||
|
let polygon = new AMap.Polygon({ |
||||
|
strokeWeight: 1, |
||||
|
path: bounds[i], |
||||
|
fillOpacity: 0.4, |
||||
|
fillColor: '#1F2F4D', |
||||
|
strokeColor: '#DE7B35', |
||||
|
fillOpacity: 0.35, //填充透明度
|
||||
|
}); |
||||
|
polygons.push(polygon); |
||||
|
} |
||||
|
} |
||||
|
map.add(polygons) |
||||
|
// map.setFitView(polygons);//视口自适应
|
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 初始化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="personinfowindow">
|
||||
|
<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 = () => { |
||||
|
if (tab == 'person') { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
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'>{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><span className='confirm_text'>人流量较大，确认是否安装消防设施？</span></div> |
||||
|
<div className='alarm_confirm'> |
||||
|
<div className='alarm_cancel'>否</div> |
||||
|
<div className='alarm_ok'>是</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 id='delaydiv' style={{ |
||||
|
width: '100%', height: '100%', left: 0, top: 0, zIndex: 1000, background: '#000000', position: 'absolute', |
||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center' |
||||
|
}}> |
||||
|
</div>} |
||||
|
|
||||
|
{/* 地图容器 */} |
||||
|
<div className="gis" id={MAPDOMID} /> |
||||
|
{map && renderMarkers()} |
||||
|
{map && renderAlarms()} |
||||
|
|
||||
|
{/* 底部按钮 */} |
||||
|
{!delay && [ |
||||
|
{ name: '房屋分布', tab: 'overview' }, |
||||
|
// { name: '人口分布', tab: 'person' },
|
||||
|
{ name: '基础设施', tab: 'emergency' } |
||||
|
].map((s, index) => { |
||||
|
return <div className={'water-gis-button' + (index + 1)} |
||||
|
onClick={() => { |
||||
|
setTab(s.tab) |
||||
|
props.changeTab(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,434 @@ |
|||||
|
.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: 5%; |
||||
|
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%); |
||||
|
} |
||||
|
|
||||
|
.water-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'); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.water-gis-button2 { |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.personinfowindow { |
||||
|
width: 302px; |
||||
|
height: 420px; |
||||
|
background: url('/assets/images/homepage/communtity/personinfowindow.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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue