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 Box from './public/table-card'; |
|||
import './style.less'; |
|||
import React from 'react' |
|||
import { Box } from '$components'; |
|||
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]; |
|||
|
|||
|
|||
return <Box title={"特殊人群统计"}> |
|||
|
|||
const getSymbolData = (datas) => { |
|||
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> |
|||
} |
|||
|
|||
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); //左右卡片内容高度定义 目前卡片为等高 |
|||
|
|||
//节点资源 |
|||
.node-resource-container { |
|||
.item_left-container { |
|||
display: flex; |
|||
height: @card-height; |
|||
width: 100%; |
|||
height: 100%; |
|||
text-align: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
overflow: auto; |
|||
|
|||
._item { |
|||
width: 33%; |
|||
.alarm_time { |
|||
width: 98%; |
|||
height: 225px; |
|||
background: url('/assets/images/homePage/fire/alarmtime.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 48px; |
|||
color: #ECF7FF; |
|||
} |
|||
|
|||
._noderesource_data { |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 600; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
line-height: 43.2px; |
|||
display: flex; |
|||
align-items: center; |
|||
.end_event { |
|||
width: 202px; |
|||
height: 39px; |
|||
background-image: linear-gradient(180deg, #711313 0%, #b3000063 52%, #711313 100%); |
|||
border: 1.5px solid #A20000; |
|||
box-shadow: inset 0 1px 14px 0 #ff525259; |
|||
border-radius: 2px; |
|||
display: flex; |
|||
justify-self: center; |
|||
align-items: center; |
|||
color: #ECF7FF; |
|||
justify-content: center; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
._percent { |
|||
opacity: 0.8; |
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
color: #C8F0FF; |
|||
text-align: left; |
|||
line-height: 24px; |
|||
} |
|||
.event_title { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
width: 81%; |
|||
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 { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 20px; |
|||
color: #D8F0FF; |
|||
letter-spacing: 1.54px; |
|||
text-align: center; |
|||
text-shadow: 0 0 10px rgba(0, 145, 255, 0.5); |
|||
margin-bottom: 17px; |
|||
.event_title_right { |
|||
width: 70px; |
|||
height: 2.37px; |
|||
transform: scaleX(-1); |
|||
background-image: linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, #377EE8 97%); |
|||
} |
|||
} |
|||
|
|||
.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 { |
|||
width: 68.73px; |
|||
height: 62.77px; |
|||
background: url('/assets/images/homePage/bigscreen/disk.png'); |
|||
background-repeat: no-repeat; |
|||
.left_item_left2 { |
|||
width: 50px; |
|||
height: 50px; |
|||
background: url('/assets/images/homePage/fire/lefticon2.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.cpu_icon { |
|||
width: 68.73px; |
|||
height: 62.77px; |
|||
background: url('/assets/images/homePage/bigscreen/cpu.png'); |
|||
background-repeat: no-repeat; |
|||
.left_item_left3 { |
|||
width: 50px; |
|||
height: 50px; |
|||
background: url('/assets/images/homePage/fire/lefticon3.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.memory_icon { |
|||
width: 68.73px; |
|||
height: 62.77px; |
|||
background: url('/assets/images/homePage/bigscreen/memory.png'); |
|||
background-repeat: no-repeat; |
|||
.left_item_left4 { |
|||
width: 50px; |
|||
height: 50px; |
|||
background: url('/assets/images/homePage/fire/lefticon4.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.left_item_right1 { |
|||
width: calc(100% - 70px); |
|||
color: rgba(236, 247, 255, 1); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
//接入数据统计 |
|||
.access_data { |
|||
.fire_item_right_container { |
|||
display: flex; |
|||
height: @card-height; |
|||
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; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
.item_right { |
|||
width: calc(100% - 100px); |
|||
display: flex; |
|||
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 { |
|||
position: absolute; |
|||
top: 27%; |
|||
right: 21%; |
|||
.item_right_left { |
|||
width: 100px; |
|||
font-size: 14px; |
|||
color: #ECF7FF; |
|||
font-family: ''; |
|||
} |
|||
|
|||
.data_number { |
|||
line-height: 25px; |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 20px; |
|||
color: #3E86FF; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
.item_right_right { |
|||
width: 180px; |
|||
font-size: 14px; |
|||
color: #9CF2FF; |
|||
letter-spacing: 0; |
|||
font-family: ''; |
|||
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: absolute; |
|||
bottom: 13%; |
|||
left: 79%; |
|||
.position_bg { |
|||
position: absolute; |
|||
left: 0%; |
|||
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 { |
|||
line-height: 25px; |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 20px; |
|||
color: #FFDC4E; |
|||
letter-spacing: 0; |
|||
.position_icon { |
|||
width: 12px; |
|||
height: 12px; |
|||
background: url('/assets/images/homePage/fire/position.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.data_top5_unit { |
|||
position: absolute; |
|||
right: 4%; |
|||
top: 18%; |
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
color: #C8F0FF; |
|||
|
|||
.fire_item_right_container::-webkit-scrollbar { |
|||
width: 0 !important |
|||
} |
|||
|
|||
.hotspot_data_container { |
|||
display: flex; |
|||
height: @card-height; |
|||
.item_left-container::-webkit-scrollbar { |
|||
width: 0 !important |
|||
} |
|||
|
|||
|
|||
//警情数据分析 |
|||
.alarm_data_analysis { |
|||
width: 100%; |
|||
justify-content: center; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
._item_left { |
|||
width: 209px; |
|||
height: 100%; |
|||
|
|||
._img { |
|||
width: 203px; |
|||
height: 80%; |
|||
background: url('/assets/images/homePage/bigscreen/hotspotdatabg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
._img { |
|||
width: 209px; |
|||
height: 209px; |
|||
background: url('/assets/images/homepage/fire/realalarmbg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: D-DINExp-Italic; |
|||
font-weight: Italic; |
|||
font-size: 48px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
} |
|||
|
|||
.hotspot_title { |
|||
padding: 2px; |
|||
padding-left: 6px; |
|||
padding-right: 6px; |
|||
background: rgba(77, 241, 227, 0.08); |
|||
border: 1px solid rgba(77, 241, 227, 0.1); |
|||
box-shadow: inset 0 0 20px 0 rgba(28, 185, 196, 0.23); |
|||
._text { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 20px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
margin-top: -30px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
._item_right { |
|||
width: 200px; |
|||
|
|||
.hotspot_data_number { |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 18px; |
|||
color: #FFFFFF; |
|||
} |
|||
._iconphone { |
|||
width: 50.96px; |
|||
height: 45px; |
|||
background: url('/assets/images/homepage/fire/iconphone.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._top1 { |
|||
position: absolute; |
|||
top: 25%; |
|||
right: 63%; |
|||
text-align: right; |
|||
} |
|||
._iconreal { |
|||
width: 50.96px; |
|||
height: 45px; |
|||
background: url('/assets/images/homepage/fire/iconreal.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._top2 { |
|||
position: absolute; |
|||
bottom: 22%; |
|||
right: 67%; |
|||
text-align: center; |
|||
} |
|||
._iconmistake { |
|||
width: 50.96px; |
|||
height: 45px; |
|||
background: url('/assets/images/homepage/fire/iconmistake.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._top3 { |
|||
position: absolute; |
|||
bottom: 34%; |
|||
left: 73%; |
|||
} |
|||
} |
|||
.right_item_right { |
|||
width: 155px; |
|||
margin-left: 16px; |
|||
|
|||
//数据共享 |
|||
.data_share { |
|||
display: flex; |
|||
height: @card-height; |
|||
.alarm_title { |
|||
font-size: 14px; |
|||
color: #ECF7FF; |
|||
letter-spacing: 0; |
|||
} |
|||
|
|||
._left_content { |
|||
width: 50%; |
|||
height: 90%; |
|||
padding-left: 30px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.alarm_number { |
|||
font-family: D-DINExp-Italic; |
|||
font-weight: Italic; |
|||
font-size: 28px; |
|||
color: #24DCF7; |
|||
letter-spacing: 0; |
|||
margin-right: 50px; |
|||
} |
|||
|
|||
._right_content { |
|||
._today_text { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.5px; |
|||
position: absolute; |
|||
right: 6%; |
|||
top: 21%; |
|||
.alarm_unit { |
|||
font-size: 14px; |
|||
color: #5999C8; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
|
|||
padding-top: 23px; |
|||
|
|||
} |
|||
} |
|||
|
|||
//实时数据 |
|||
.realtime_data { |
|||
height: 100%; |
|||
padding: 12px 30px 12px 30px; |
|||
|
|||
.realtime_item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 47%; |
|||
height: 95%; |
|||
background: url(/assets/images/homePage/bigscreen/todaybg.png); |
|||
background-repeat: no-repeat; |
|||
background: url('/assets/images/homePage/fire/realtimebg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
justify-content: space-evenly; |
|||
height: 45%; |
|||
width: 100%; |
|||
margin-bottom: 5%; |
|||
align-items: center; |
|||
// padding: 16px 22px 16px 22px; |
|||
|
|||
._icon1 { |
|||
width: 80px; |
|||
height: 80px; |
|||
background: url('/assets/images/homePage/fire/icon1.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._icon2 { |
|||
width: 80px; |
|||
height: 80px; |
|||
background: url('/assets/images/homePage/fire/icon2.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._text { |
|||
width: calc(100% - 100px); |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
._row1 { |
|||
color: #C3E6FF; |
|||
width: 100%; |
|||
height: 22px; |
|||
background: rgba(0, 88, 204, 0.5); |
|||
justify-content: space-around; |
|||
display: flex; |
|||
|
|||
} |
|||
|
|||
._row2 { |
|||
font-size: 14px; |
|||
color: #00FF87; |
|||
justify-content: space-around; |
|||
display: flex; |
|||
height: 42px; |
|||
|
|||
._number { |
|||
font-family: D-DIN-Italic; |
|||
font-weight: Italic; |
|||
font-size: 28px; |
|||
color: #ECF7FF; |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
._item_content { |
|||
display: flex; |
|||
.realtime_data::-webkit-scrollbar { |
|||
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 { |
|||
width: 52px; |
|||
height: 52px; |
|||
background: url('/assets/images/homePage/bigscreen/2.png'); |
|||
background-repeat: no-repeat; |
|||
.today_item { |
|||
width: 91%; |
|||
height: 41px; |
|||
background: url('/assets/images/homePage/fire/alarmbg.png') 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%; |
|||
padding-left: 27px; |
|||
} |
|||
|
|||
._item_icon3 { |
|||
width: 52px; |
|||
height: 52px; |
|||
background: url('/assets/images/homePage/bigscreen/3.png'); |
|||
background-repeat: no-repeat; |
|||
.column1_alarm2 { |
|||
width: 83px; |
|||
height: 24px; |
|||
background: url('/assets/images/homePage/fire/alarm2.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
padding-left: 27px; |
|||
} |
|||
|
|||
._item_text { |
|||
color: #C8F0FF; |
|||
padding-left: 6px; |
|||
.text_blue { |
|||
width: 100px; |
|||
display: flex; |
|||
|
|||
.number_container { |
|||
._number { |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 22px; |
|||
color: #FFFFFF; |
|||
} |
|||
._icon1 { |
|||
width: 8px; |
|||
height: 8px; |
|||
background: url('/assets/images/homePage/fire/triangle1.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-evenly; |
|||
width: 112px; |
|||
height: 28px; |
|||
background-image: linear-gradient(227deg, #3196AB 0%, #2091cd00 100%); |
|||
._icon2 { |
|||
width: 8px; |
|||
height: 8px; |
|||
background: url('/assets/images/homePage/fire/triangle2.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//大屏中间上部分 |
|||
.center_top_data { |
|||
|
|||
._center_card1 { |
|||
width: 353px; |
|||
height: 74px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 22px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.46px; |
|||
text-align: center; |
|||
position: absolute; |
|||
top: -3%; |
|||
left: 32%; |
|||
background: url(/assets/images/homePage/bigscreen/centerdatabg1.png); |
|||
//小区人流量排名 |
|||
.water_traffic_ranking { |
|||
height: 100%; |
|||
padding: 14px 8px 14px 8px; |
|||
|
|||
._rank_title { |
|||
height: 34.64px; |
|||
background: url('/assets/images/homePage/communtity/ranktitle.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
color: #FFFFFF; |
|||
font-size: 16px; |
|||
display: flex; |
|||
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 { |
|||
width: 146px; |
|||
height: 35px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #35D0FF; |
|||
letter-spacing: 0.46px; |
|||
text-align: center; |
|||
position: absolute; |
|||
top: 26%; |
|||
left: 42%; |
|||
background: url(/assets/images/homePage/bigscreen/centerdatabg2.png); |
|||
.rank_content_overflow { |
|||
height: calc(100% - 35px); |
|||
overflow: auto; |
|||
} |
|||
|
|||
._rank_content { |
|||
margin-top: 12px; |
|||
height: 34.64px; |
|||
background: url('/assets/images/homePage/communtity/rankcontent.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
color: #E2F8FF; |
|||
font-size: 14px; |
|||
display: flex; |
|||
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 { |
|||
width: 146px; |
|||
height: 35px; |
|||
font-family: YouSheBiaoTiHei; |
|||
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); |
|||
.topbg1 { |
|||
width: 28px; |
|||
height: 10px; |
|||
background: url('/assets/images/homePage/communtity/top1.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
display: inline-block; |
|||
} |
|||
|
|||
._center_card4 { |
|||
width: 146px; |
|||
height: 35px; |
|||
font-family: YouSheBiaoTiHei; |
|||
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); |
|||
.topbg2 { |
|||
width: 28px; |
|||
height: 10px; |
|||
background: url('/assets/images/homePage/communtity/top2.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.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