diff --git a/super-screen/client/assets/images/homepage/bigscreen/exit.png b/super-screen/client/assets/images/homepage/bigscreen/exit.png new file mode 100644 index 0000000..5fc7635 Binary files /dev/null and b/super-screen/client/assets/images/homepage/bigscreen/exit.png differ diff --git a/super-screen/client/assets/images/homepage/bigscreen/headertitlebg.png b/super-screen/client/assets/images/homepage/bigscreen/headertitlebg.png new file mode 100644 index 0000000..686c5ab Binary files /dev/null and b/super-screen/client/assets/images/homepage/bigscreen/headertitlebg.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/basicimg.png b/super-screen/client/assets/images/homepage/communtity/basicimg.png new file mode 100644 index 0000000..2b736e2 Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/basicimg.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/basicinterval.png b/super-screen/client/assets/images/homepage/communtity/basicinterval.png new file mode 100644 index 0000000..fa2c6a9 Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/basicinterval.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/basictextbg.png b/super-screen/client/assets/images/homepage/communtity/basictextbg.png new file mode 100644 index 0000000..f85b76b Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/basictextbg.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/basictitlebg.png b/super-screen/client/assets/images/homepage/communtity/basictitlebg.png new file mode 100644 index 0000000..8be494b Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/basictitlebg.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/bg.png b/super-screen/client/assets/images/homepage/communtity/bg.png new file mode 100644 index 0000000..e0fef1d Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/bg.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/lift.png b/super-screen/client/assets/images/homepage/communtity/lift.png new file mode 100644 index 0000000..14d52de Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/lift.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/person.png b/super-screen/client/assets/images/homepage/communtity/person.png new file mode 100644 index 0000000..7a6acc8 Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/person.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/personbg.png b/super-screen/client/assets/images/homepage/communtity/personbg.png new file mode 100644 index 0000000..e97c4c6 Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/personbg.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/smoke.png b/super-screen/client/assets/images/homepage/communtity/smoke.png new file mode 100644 index 0000000..0ce7949 Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/smoke.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/special1.png b/super-screen/client/assets/images/homepage/communtity/special1.png new file mode 100644 index 0000000..67d6987 Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/special1.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/special2.png b/super-screen/client/assets/images/homepage/communtity/special2.png new file mode 100644 index 0000000..b59cb31 Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/special2.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/temp.png b/super-screen/client/assets/images/homepage/communtity/temp.png new file mode 100644 index 0000000..daa54af Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/temp.png differ diff --git a/super-screen/client/assets/images/homepage/communtity/video.png b/super-screen/client/assets/images/homepage/communtity/video.png new file mode 100644 index 0000000..b81729b Binary files /dev/null and b/super-screen/client/assets/images/homepage/communtity/video.png differ diff --git a/super-screen/client/assets/images/homepage/enter/bg.png b/super-screen/client/assets/images/homepage/enter/bg.png new file mode 100644 index 0000000..e31d45b Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/bg.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row1-select.png b/super-screen/client/assets/images/homepage/enter/row1-select.png new file mode 100644 index 0000000..455426e Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row1-select.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row1.png b/super-screen/client/assets/images/homepage/enter/row1.png new file mode 100644 index 0000000..646faa2 Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row1.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row2-1-select.png b/super-screen/client/assets/images/homepage/enter/row2-1-select.png new file mode 100644 index 0000000..9aa2967 Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row2-1-select.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row2-1.png b/super-screen/client/assets/images/homepage/enter/row2-1.png new file mode 100644 index 0000000..a3bb942 Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row2-1.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row2-2-select.png b/super-screen/client/assets/images/homepage/enter/row2-2-select.png new file mode 100644 index 0000000..c51f519 Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row2-2-select.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row2-2.png b/super-screen/client/assets/images/homepage/enter/row2-2.png new file mode 100644 index 0000000..95ce59d Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row2-2.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row2-3-select.png b/super-screen/client/assets/images/homepage/enter/row2-3-select.png new file mode 100644 index 0000000..3301a4a Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row2-3-select.png differ diff --git a/super-screen/client/assets/images/homepage/enter/row2-3.png b/super-screen/client/assets/images/homepage/enter/row2-3.png new file mode 100644 index 0000000..d6f7ccb Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/row2-3.png differ diff --git a/super-screen/client/assets/images/homepage/enter/title.png b/super-screen/client/assets/images/homepage/enter/title.png new file mode 100644 index 0000000..04e8167 Binary files /dev/null and b/super-screen/client/assets/images/homepage/enter/title.png differ diff --git a/super-screen/client/index.ejs b/super-screen/client/index.ejs index 540b704..7ecba49 100644 --- a/super-screen/client/index.ejs +++ b/super-screen/client/index.ejs @@ -5,6 +5,15 @@ + + + + diff --git a/super-screen/client/index.html b/super-screen/client/index.html index 28fcdf6..473bd7c 100644 --- a/super-screen/client/index.html +++ b/super-screen/client/index.html @@ -6,6 +6,15 @@ + + + +
- - + + \ No newline at end of file diff --git a/super-screen/client/src/app.js b/super-screen/client/src/app.js index c917bbc..4ace644 100644 --- a/super-screen/client/src/app.js +++ b/super-screen/client/src/app.js @@ -4,7 +4,8 @@ import React, { useEffect } from 'react'; import Layout from './layout'; import Auth from './sections/auth'; import homePage from './sections/homePage'; - +import waterprevention from './sections/water-prevention' +import communitysafty from './sections/community-safty' const App = props => { const { projectName } = props @@ -17,7 +18,9 @@ const App = props => { title={projectName} sections={[ homePage, - Auth + Auth, + waterprevention, + communitysafty ]} /> ) diff --git a/super-screen/client/src/layout/components/header/index.js b/super-screen/client/src/layout/components/header/index.js index 076e3b9..38499b3 100644 --- a/super-screen/client/src/layout/components/header/index.js +++ b/super-screen/client/src/layout/components/header/index.js @@ -7,7 +7,6 @@ import styles from './style.css'; import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons'; -import ResetPasswordModal from '../../../sections/memberManagement/components/resetPassword'; const Header = props => { const { dispatch, history, user, pathname, toggleCollapsed, collapsed, actions } = props @@ -27,7 +26,7 @@ const Header = props => { const handelClick = item => { if (item.key == 'logout') { dispatch(actions.auth.logout(user)); - history.push(`/signin`); + history.push(`/homepage`); } } @@ -67,17 +66,7 @@ const Header = props => { key: "user", icon: , children: [ - { - icon: , - label: 修改密码} - title="修改密码" - onFinish={onFinish} - key="resetPassword" - />, - key: 'resetPassword' - }, + { label: '退出', key: 'logout', icon: }, diff --git a/super-screen/client/src/layout/containers/layout/index.js b/super-screen/client/src/layout/containers/layout/index.js index cbade91..2334f58 100644 --- a/super-screen/client/src/layout/containers/layout/index.js +++ b/super-screen/client/src/layout/containers/layout/index.js @@ -49,7 +49,7 @@ const LayoutContainer = props => { useEffect(() => { NProgress.done(); if (!user || !user.authorized) { - history.push('/signin'); + history.push('/homepage'); } if (msg) { message.destroy(); diff --git a/super-screen/client/src/sections/community-safty/actions/example.js b/super-screen/client/src/sections/community-safty/actions/example.js new file mode 100644 index 0000000..6b3c25d --- /dev/null +++ b/super-screen/client/src/sections/community-safty/actions/example.js @@ -0,0 +1,15 @@ +'use strict'; + +import { basicAction } from '@peace/utils' +import { ApiTable } from '$utils' + +// export function getMembers(orgId) { +// return dispatch => basicAction({ +// type: 'get', +// dispatch: dispatch, +// actionType: 'GET_MEMBERS', +// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, +// msg: { error: '获取用户列表失败' }, +// reducer: { name: 'members' } +// }); +// } diff --git a/super-screen/client/src/sections/community-safty/actions/index.js b/super-screen/client/src/sections/community-safty/actions/index.js new file mode 100644 index 0000000..444af37 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/actions/index.js @@ -0,0 +1,7 @@ +'use strict'; + +import * as example from './example' + +export default { + ...example, +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/components/basic-info.js b/super-screen/client/src/sections/community-safty/components/basic-info.js new file mode 100644 index 0000000..e93a907 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/basic-info.js @@ -0,0 +1,45 @@ +import React from 'react' +import Box from './public/table-card'; + +function BasicInfo() { + + return +
+
+
+
+
+
南昌县
+ Nanchang county +
+ +
+ 区域面积： + 1742.3km³ +
+ +
+ 人口： + 14.43万 +
+
+
+ +
+
+ 社区数量 + 53个 +
+
+
+ 房屋数量 + 630座 +
+
+
+ +} + +export default BasicInfo; + + diff --git a/super-screen/client/src/sections/community-safty/components/city-safty.js b/super-screen/client/src/sections/community-safty/components/city-safty.js new file mode 100644 index 0000000..12711ba --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/city-safty.js @@ -0,0 +1,14 @@ +import React, { useEffect, useState } from 'react' +import Box from './public/table-card'; +import './style.less'; + +function CitySafty(props) { + + return + 城市安全 + +} + +export default CitySafty; + + diff --git a/super-screen/client/src/sections/community-safty/components/infrastructure.js b/super-screen/client/src/sections/community-safty/components/infrastructure.js new file mode 100644 index 0000000..518bd98 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/infrastructure.js @@ -0,0 +1,32 @@ +import React from 'react' +import Box from './public/table-card'; + +function Infrastructure(props) { + + const data = [ + { name: '烟感设备', number: 32 }, + { name: '温度设备', number: 32 }, + { name: '摄像头设备', number: 32 }, + { name: '电梯设备', number: 32 }, + ] + return +
+ { + data.map((s, index) => { + return
+
+
+
{s.name}
+
{s.number} 个
+
+
+ }) + } + +
+ +} + +export default Infrastructure; + + diff --git a/super-screen/client/src/sections/community-safty/components/population-dynamics.js b/super-screen/client/src/sections/community-safty/components/population-dynamics.js new file mode 100644 index 0000000..df5af18 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/population-dynamics.js @@ -0,0 +1,35 @@ +import React from 'react' +import Box from './public/table-card'; + +function PopulationDynamics() { + + const data = [ + { title: '常驻人口', number: 447 }, + { title: '流动人口', number: 447 }, + { title: '境外人口', number: 447 }, + { title: '未落户人口', number: 447 }, + { title: '贫困人口', number: 447 }, + { title: '老龄人口', number: 447 }, + ] + return +
+
+
+ { + data.map(s => { + return
+
{s.title}
+
{s.number}
+ 万人 +
+ }) + } + +
+
+ +} + +export default PopulationDynamics; + + diff --git a/super-screen/client/src/sections/community-safty/components/public/carousel-list.js b/super-screen/client/src/sections/community-safty/components/public/carousel-list.js new file mode 100644 index 0000000..8aaf397 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/public/carousel-list.js @@ -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 ? ( + + ) : ; +} + +export default CarouselList; diff --git a/super-screen/client/src/sections/community-safty/components/public/index.less b/super-screen/client/src/sections/community-safty/components/public/index.less new file mode 100644 index 0000000..c0f6859 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/public/index.less @@ -0,0 +1,77 @@ +.opcityBackground { + background-color: rgba(8, 27, 55, 0.6); +} + +.card-title { + height: 31px; + font-family: YouSheBiaoTiHei; + font-size: 24px; + color: #FFFFFF; + letter-spacing: 2px; +} + +/* 滚动列表 */ +.scroll-board { + width: 533px; + height: 220px; + margin-top: 10px; + margin-left: 6px; + + .header { + height: 30px; + border-top: 1px solid #0047ba; + border-bottom: 1px solid #0047ba; + + .header-item { + // background: rgba(12, 49, 110, 0.3); + margin-right: 10px; + } + } + + .rows { + .row-item { + font-size: 16px; + } + + .row-item:hover { + background: linear-gradient(270deg, rgba(17, 183, 247, 0) 0%, rgba(17, 183, 247, 0.85) 100%); + color: #9ac8fc; + } + } +} + +.scroll-board-multi { + padding: 5px 0px 5px; + color: rgba(204, 228, 255, 1) !important; + + .header { + display: flex; + flex-direction: row; + font-size: 12px !important; + color: rgba(204, 228, 255, 1) !important; + // border-bottom: 1px solid #124C79 !important; + } + + .rows { + color: rgba(204, 228, 255, 1) !important; + + .row-item { + border-bottom: 1px solid #124C79 !important; + } + + .row-item:hover { + background: linear-gradient(270deg, rgba(17, 183, 247, 0) 0%, rgba(17, 183, 247, 0.85) 100%); + color: #9ac8fc; + } + } +} + +._sorrow { + display: inline-block; + width: 15px; + height: 15px; + background: url('/assets/images/homePage/bigscreen/sorrow.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + margin-left: 13px; +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/components/public/noData.js b/super-screen/client/src/sections/community-safty/components/public/noData.js new file mode 100644 index 0000000..9d5bb13 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/public/noData.js @@ -0,0 +1,18 @@ +/* 公共模块暂无数据组件 */ +import React from 'react'; +import { Empty } from 'antd'; + +function NoData({ height = 180, marginTop = 0 }) { + return ( + + ); +} + +export default NoData; diff --git a/super-screen/client/src/sections/community-safty/components/public/scrollBoard/index.js b/super-screen/client/src/sections/community-safty/components/public/scrollBoard/index.js new file mode 100644 index 0000000..fbddde3 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/public/scrollBoard/index.js @@ -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} + * @default header = [] + * @example header = ['column1', 'column2', 'column3'] + */ + header: [], + /** + * @description Board data + * @type {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} + * @default columnWidth = [] + */ + columnWidth: [], + /** + * @description Column align + * @type {Array} + * @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 = `${i + + 1}`; + + 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 ( +
+ {!!header.length && !!mergedConfig && ( +
+ {header.map((headerItem, i) => ( +
+ ))} +
+ )} + + {!!mergedConfig && ( +
+ {rowsShow.map((row, ri) => ( +
+ {row.ceils.map((ceil, ci) => { + if (typeof (ceil) === 'string') { + return ( +
emitEvent(onClick, ri, ci, row, ceil)} + onMouseEnter={() => handleHover(true, ri, ci, row, ceil)} + onMouseLeave={() => handleHover(false)} + /> + ); + } + return ( +
handleHover(true, ri, ci, row, ceil)} + onMouseLeave={() => handleHover(false)} + > + {ceil} +
+ ); + })} +
+ ))} +
+ )} +
+ ); +}); + +ScrollBoard.propTypes = { + config: PropTypes.object, + onClick: PropTypes.func, + onMouseOver: PropTypes.func, + className: PropTypes.string, + style: PropTypes.object, +}; + +export default ScrollBoard; diff --git a/super-screen/client/src/sections/community-safty/components/public/scrollBoard/style.less b/super-screen/client/src/sections/community-safty/components/public/scrollBoard/style.less new file mode 100644 index 0000000..cb6eea5 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/public/scrollBoard/style.less @@ -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; + } + } +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/components/public/table-card.js b/super-screen/client/src/sections/community-safty/components/public/table-card.js new file mode 100644 index 0000000..bf21d58 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/public/table-card.js @@ -0,0 +1,35 @@ +'use strict' + +import React from 'react' +import './index.less' +class Box extends React.Component { + render() { + const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow } = this.props + + const headerbg = { + background: 'url(/assets/images/homePage/bigscreen/headertitlebg.png) no-repeat', + backgroundSize: '100% 100%', + } + return ( +
+
+
+ {title} +
+
+ {children} +
+ +
+
+ ) + } +} +export default Box + diff --git a/super-screen/client/src/sections/community-safty/components/special-person.js b/super-screen/client/src/sections/community-safty/components/special-person.js new file mode 100644 index 0000000..f61e042 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/special-person.js @@ -0,0 +1,31 @@ +import React, { useEffect, useState } from 'react' +import Box from './public/table-card'; +import './style.less'; + +function SpecialPerson(props) { + + const data = [ + { name: '刑满释放', number: 447 }, + { name: '社区矫正', number: 447 }, + { name: '吸毒人员', number: 447 }, + { name: '重点青少年', number: 447 }, + { name: '艾滋病人', number: 447 }, + ] + return +
+ { + data.map((s, index) => { + return
+ {s.name} + {s.number}人 +
+ }) + } + +
+ +} + +export default SpecialPerson; + + diff --git a/super-screen/client/src/sections/community-safty/components/style.less b/super-screen/client/src/sections/community-safty/components/style.less new file mode 100644 index 0000000..05ebd65 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/style.less @@ -0,0 +1,286 @@ +@card-height: calc(100% - 42px - 13px); //左右卡片内容高度定义 目前卡片为等高 + +//基本信息 +._basic_info { + padding: 21px 7px 0px 12px; + + //第一行 + ._basic_row1 { + display: flex; + width: 100%; + + ._item1 { + width: 128px; + height: 125px; + background: url('/assets/images/homePage/communtity/basicimg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._item2 { + width: calc(100% - 128px); + height: 125px; + padding-left: 20px; + + ._basictitlebg { + background: url('/assets/images/homePage/communtity/basictitlebg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 17.5px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + + ._basic_title { + font-family: YouSheBiaoTiHei; + font-size: 21px; + color: #FFFFFF; + letter-spacing: 0.74px; + width: 70px; + margin-top: -13px; + } + + ._basic_sub_title { + font-family: YouSheBiaoTiHei; + font-size: 14px; + color: #C0E2FF; + letter-spacing: 0; + } + } + + ._basic_text { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: 14px; + border-bottom: 1px solid #c3e6ff69; + font-size: 14px; + color: #C0E2FF; + margin-top: 14px; + padding-left: 5px; + padding-right: 5px; + + ._text_number_color { + font-family: D-DIN-Italic; + font-weight: DIN; + font-size: 16px; + color: #FFFFFF; + letter-spacing: 0.5px; + } + } + } + } + + //第二行 + ._basic_row2 { + width: 100%; + display: flex; + font-family: SourceHanSansCN-Medium; + font-weight: 500; + font-size: 13px; + color: #C0E2FF; + letter-spacing: 0; + margin-top: 19px; + background: url('/assets/images/homePage/communtity/basictextbg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + height: 43px; + align-items: center; + + ._item1 { + width: 50%; + display: flex; + justify-content: space-around; + } + + ._item2 { + width: calc(50% - 1px); + display: flex; + justify-content: space-around; + } + + .basicinterval { + background: url('/assets/images/homePage/communtity/basicinterval.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 1px; + height: 19px; + } + + ._number { + font-family: YouSheBiaoTiHei; + font-size: 16px; + color: #FFFFFF; + letter-spacing: 0; + text-align: right; + } + } +} + +//人口动态 +._person_trends { + display: flex; + padding: 10px 18px 0px 10px; + height: 100%; + + ._person_tends_item1 { + width: 123.5px; + height: 100%; + background: url('/assets/images/homePage/communtity/person.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._person_tends_item2 { + width: calc(100% - 123.5px); + padding-left: 21px; + padding-top: 30px; + + ._person_text { + margin-bottom: 10%; + background: url('/assets/images/homePage/communtity/personbg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 15px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + padding-left: 10px; + padding-right: 8px; + font-family: YouSheBiaoTiHei; + font-size: 12px; + color: #C0E2FF; + letter-spacing: 0; + + ._person_title { + width: 100px; + font-family: YouSheBiaoTiHei; + font-size: 16px; + color: #FFFFFF; + letter-spacing: 0.56px; + margin-top: -11px; + } + + ._person_number { + width: calc(100% - 150px); + height: 28px; + font-family: D-DIN-Italic; + font-weight: Italic; + font-size: 28px; + color: #24DCF7; + letter-spacing: 0.98px; + margin-top: -37px; + text-align: right; + } + + } + } +} + +//基础设施 +._basic_device { + display: flex; + flex-wrap: wrap; + height: 100%; + align-items: center; + + ._device_item { + width: 50%; + height: 82px; + display: flex; + + ._device_img1 { + width: 93.12px; + height: 82px; + background: url('/assets/images/homePage/communtity/smoke.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._device_img2 { + width: 93.12px; + height: 82px; + background: url('/assets/images/homePage/communtity/temp.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._device_img3 { + width: 93.12px; + height: 82px; + background: url('/assets/images/homePage/communtity/video.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._device_img4 { + width: 93.12px; + height: 82px; + background: url('/assets/images/homePage/communtity/lift.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._device_text { + color: #ECF7FF; + width: calc(100% - 94px); + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + + ._device_number { + font-family: D-DIN-Italic; + font-weight: Italic; + font-size: 28px; + color: #29E4FF; + letter-spacing: 0; + } + } + } +} + +._special { + height: 100%; + padding-left: 16px; + padding-right: 9px; + + ._special_item { + height: 19%; + margin-bottom: 0.6%; + display: flex; + font-family: YouSheBiaoTiHei; + font-size: 18px; + color: #ECF7FF; + letter-spacing: 0.4px; + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 3%; + padding-left: 15%; + + ._number { + font-family: D-DIN-Italic; + font-weight: Italic; + font-size: 26px; + color: #24DCF7; + letter-spacing: 0; + } + } + + ._special_bg1 { + background: url('/assets/images/homePage/communtity/special1.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._special_bg2 { + background: url('/assets/images/homePage/communtity/special2.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/components/traffic-ranking.js b/super-screen/client/src/sections/community-safty/components/traffic-ranking.js new file mode 100644 index 0000000..50dd203 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/traffic-ranking.js @@ -0,0 +1,15 @@ +import React, { useEffect, useState } from 'react' +import Box from './public/table-card'; +import './style.less'; + +function DataTop5(props) { + + + return + 小区人流量排名 + +} + +export default DataTop5; + + diff --git a/super-screen/client/src/sections/community-safty/components/util.js b/super-screen/client/src/sections/community-safty/components/util.js new file mode 100644 index 0000000..1a4c117 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/components/util.js @@ -0,0 +1,3 @@ +export const mathRound = (number) => { + return number ? Math.round(number / 1000) / 10 : 0 +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/containers/gis.js b/super-screen/client/src/sections/community-safty/containers/gis.js new file mode 100644 index 0000000..f8f69a4 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/containers/gis.js @@ -0,0 +1,48 @@ +import React, { useEffect, useState } from 'react'; +import { connect } from 'react-redux'; + +const MAPDOMID = 'fs-amap-container'; +let map = null; +let interval = null; +function Map(props) { + const [delay, setDelay] = useState(true) + // 地图初始化 + const loadMap = () => { + map = new AMap.Map(MAPDOMID, { + center: [115.89, 28.68], + zoomEnable: true, + dragEnable: true, + viewMode: '3D', + pitch: 30, + labelzIndex: 130, + zoom: 18, + cursor: 'pointer', + mapStyle: 'amap://styles/4eb48d1ef0a024c73376fd2256d0b5a5', + }); + map.on('complete', () => { + setTimeout(() => { + setDelay(false) + }, 1000); + + }); + }; + + + // 初始化GIS 组件销毁清空定时器 + useEffect(() => { + loadMap(); + }, []); + + return ( + <> + {delay &&
+
} +
+ + ); +} + +export default connect()(Map); diff --git a/super-screen/client/src/sections/community-safty/containers/homePage.js b/super-screen/client/src/sections/community-safty/containers/homePage.js new file mode 100644 index 0000000..9a28aaa --- /dev/null +++ b/super-screen/client/src/sections/community-safty/containers/homePage.js @@ -0,0 +1,77 @@ +import React, { useEffect, useState } from 'react' +import { connect } from 'react-redux'; +import { push } from 'react-router-redux'; +import LeftTop from '../components/basic-info' +import LeftMiddle from '../components/population-dynamics' +import LeftBottom from '../components/infrastructure' +import RightTop from '../components/city-safty' +import RightMiddle from '../components/special-person' +import RightBottom from '../components/traffic-ranking' +import Gis from './gis'; +import './style.less' + +function homePage(props) { + const { dispatch } = props; + const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } + const cardHeight = document.body.clientHeight * 0.896 * 0.32 + const cardContentHeight = cardHeight - 42 - 13 + return <> +
+
+
+ 社区安全 +
+ 流动人口 +
+
{ dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >返回平台
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+ + + +} + +function mapStateToProps(state) { + const { + auth, global + } = state; + return { + clientHeight: global.clientHeight, + actions: global.actions, + + }; +} + +export default connect(mapStateToProps)(homePage); + + diff --git a/super-screen/client/src/sections/community-safty/containers/index.js b/super-screen/client/src/sections/community-safty/containers/index.js new file mode 100644 index 0000000..e793d09 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/containers/index.js @@ -0,0 +1,6 @@ +'use strict'; + +import homePage from './homePage'; + + +export default homePage ; diff --git a/super-screen/client/src/sections/community-safty/containers/style.less b/super-screen/client/src/sections/community-safty/containers/style.less new file mode 100644 index 0000000..9b1cbaf --- /dev/null +++ b/super-screen/client/src/sections/community-safty/containers/style.less @@ -0,0 +1,260 @@ +.homepage { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: url('/assets/images/homePage/communtity/bg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + overflow: hidden; + // display: flex; + // flex-direction: column; + // justify-content: center; + // align-items: center; + padding-top: 5%; + + ._title_text { + position: absolute; + top: 0%; + width: 100%; + height: 62px; + font-family: YouSheBiaoTiHei; + font-size: 48px; + color: #FFFFFF; + letter-spacing: 12px; + z-index: 300; + display: flex; + align-items: center; + justify-content: center; + + ._title_dot { + display: inline-block; + width: 8px; + height: 8px; + background-image: linear-gradient(180deg, #FFFFFF 0%, #0d71ef00 100%); + margin-left: 14px; + margin-right: 14px; + border-radius: 4px; + } + + } + + ._exit { + position: absolute; + right: 60px; + top: 38px; + cursor: pointer; + color: #C8F0FF; + display: flex; + width: 102px; + height: 33px; + background: url('/assets/images/homePage/bigscreen/exit.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + padding-left: 35px; + align-items: center; + z-index: 400; + } + + .homepage-left { + width: 21.8%; + height: 84.6%; + position: absolute; + top: 10.1%; + z-index: 300; + } + + .homepage-center { + width: 93.9%; + height: 84%; + position: absolute; + top: 10.4%; + left: 58px; + padding-left: 16px; + padding-right: 16px; + z-index: 200; + + ._top { + margin-top: 5%; + height: calc(100% - 200px); + background: url('/assets/images/homePage/bigscreen/centerbg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + position: relative; + } + } + + .homepage-left-left { + left: 58px; + } + + .homepage-left-right { + right: 58px; + } + +} + + +.list { + list-style: none; + height: 100%; +} + +.list .child { + box-sizing: border-box; + opacity: 0; + transform: translateX(-300px); + animation: show .5s forwards; +} + +.list .child.show { + animation-delay: 0s !important; +} + +.list .child.hide { + opacity: 1; + transform: translateX(0); + animation-name: hide; + animation-delay: 0s; +} + +/*animation-delay*/ +.list .child:not(.hide):nth-child(5n + 1) { + animation-delay: .3s; +} + +.list .child:not(.hide):nth-child(5n + 2) { + animation-delay: .6s; +} + +.list .child:not(.hide):nth-child(5n + 3) { + animation-delay: .9s; +} + +.list .child:not(.hide):nth-child(5n + 4) { + animation-delay: 1.2s; +} + +.list .child:not(.hide):nth-child(5n + 5) { + animation-delay: 1.5s; +} + +.list .child-right { + box-sizing: border-box; + opacity: 0; + transform: translateX(300px); + animation: show .5s forwards; +} + +.list .child-right.show { + animation-delay: 0s !important; +} + +.list .child-right.hide { + opacity: 1; + transform: translateX(0); + animation-name: hide; + animation-delay: 0s; +} + +/*animation-delay*/ +.list .child-right:not(.hide):nth-child(5n + 1) { + animation-delay: .3s; +} + +.list .child-right:not(.hide):nth-child(5n + 2) { + animation-delay: .6s; +} + +.list .child-right:not(.hide):nth-child(5n + 3) { + animation-delay: .9s; +} + +.list .child-right:not(.hide):nth-child(5n + 4) { + animation-delay: 1.2s; +} + +.list .child-right:not(.hide):nth-child(5n + 5) { + animation-delay: 1.5s; +} + +.list .child-top { + box-sizing: border-box; + opacity: 0; + transform: translateY(300px); + animation: show 1s forwards; +} + +.list .child-top.show { + animation-delay: 0s !important; +} + +.list .child-top.hide { + opacity: 1; + transform: translateY(0); + animation-name: hide; + animation-delay: 0s; +} + + +@keyframes show { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes hide { + to { + opacity: 0; + transform: translateX(100px); + max-height: 0; + margin: 0; + } +} + +.center-card-title { + height: 31px; + font-family: YouSheBiaoTiHei; + font-size: 24px; + color: #FFFFFF; + display: flex; + align-items: center; + margin-top: 5px; + + ._icon_left { + width: 32px; + height: 17px; + background: url('/assets/images/homePage/bigscreen/center-left.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + margin-right: 11px; + margin-left: 10px; + } + + ._icon_right { + width: 32px; + height: 17px; + background: url('/assets/images/homePage/bigscreen/center-right.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + margin-right: 11px; + margin-left: 10px; + } +} + +.gis { + position: absolute; + width: 100vw; + height: calc(~"100% - 114px"); + left: 0; + top: 114px; + z-index: 0; + display: flex; + justify-content: center; + top: 0; + left: 0; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/index.js b/super-screen/client/src/sections/community-safty/index.js new file mode 100644 index 0000000..307bc46 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/index.js @@ -0,0 +1,15 @@ +'use strict'; + +import reducers from './reducers'; +import routes from './routes'; +import actions from './actions'; +import { getNavItem } from './nav-item'; + +export default { + key: 'communitysafty', + name: '首页', + reducers: reducers, + routes: routes, + actions: actions, + getNavItem: getNavItem +}; \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/nav-item.js b/super-screen/client/src/sections/community-safty/nav-item.js new file mode 100644 index 0000000..28cff28 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/nav-item.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Menu } from 'antd'; +import { HomeOutlined } from '@ant-design/icons'; +export function getNavItem(user) { + return ( + }> + 社区安全 + + ); +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/reducers/index.js b/super-screen/client/src/sections/community-safty/reducers/index.js new file mode 100644 index 0000000..7ed1088 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/reducers/index.js @@ -0,0 +1,5 @@ +'use strict'; + +export default { + +} \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/routes.js b/super-screen/client/src/sections/community-safty/routes.js new file mode 100644 index 0000000..09d45b8 --- /dev/null +++ b/super-screen/client/src/sections/community-safty/routes.js @@ -0,0 +1,13 @@ +'use strict'; +import homePage from './containers/index'; + +export default [{ + type: 'outer', + route: { + path: '/communitysafty', + key: 'communitysafty', + breadcrumb: '数据监控平台', + // 不设置 component 则面包屑禁止跳转 + component: homePage + } +}]; \ No newline at end of file diff --git a/super-screen/client/src/sections/community-safty/style.less b/super-screen/client/src/sections/community-safty/style.less new file mode 100644 index 0000000..e69de29 diff --git a/super-screen/client/src/sections/homePage/containers/homePage copy.js b/super-screen/client/src/sections/homePage/containers/homePage copy.js new file mode 100644 index 0000000..ef570f6 --- /dev/null +++ b/super-screen/client/src/sections/homePage/containers/homePage copy.js @@ -0,0 +1,74 @@ +import React, { useEffect, useState } from 'react' +import { connect } from 'react-redux'; +import { push } from 'react-router-redux'; +import AccessData from '../components/accessData' +import AlarmList from '../components/alarmList' +import DataShare from '../components/dataShare' +import DataTop5 from '../components/dataTop5' +import HotspotData from '../components/hotspotData' +import NodeResource from '../components/nodeResource' +import AbnormalMonitoring from '../components/abnormalMonitoring' +import CenterTop from '../components/centerTop' +import './style.less' + +function homePage(props) { + const { dispatch } = props; + const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } + const cardHeight = document.body.clientHeight * 0.896 * 0.32 + const cardContentHeight = cardHeight - 42 - 13 + return
+
+
{ dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >
进入后台
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +} + +function mapStateToProps(state) { + const { + auth, global + } = state; + return { + clientHeight: global.clientHeight, + actions: global.actions, + + }; +} + +export default connect(mapStateToProps)(homePage); + + diff --git a/super-screen/client/src/sections/homePage/containers/homePage.js b/super-screen/client/src/sections/homePage/containers/homePage.js index ef570f6..ec4a71b 100644 --- a/super-screen/client/src/sections/homePage/containers/homePage.js +++ b/super-screen/client/src/sections/homePage/containers/homePage.js @@ -1,14 +1,6 @@ import React, { useEffect, useState } from 'react' import { connect } from 'react-redux'; import { push } from 'react-router-redux'; -import AccessData from '../components/accessData' -import AlarmList from '../components/alarmList' -import DataShare from '../components/dataShare' -import DataTop5 from '../components/dataTop5' -import HotspotData from '../components/hotspotData' -import NodeResource from '../components/nodeResource' -import AbnormalMonitoring from '../components/abnormalMonitoring' -import CenterTop from '../components/centerTop' import './style.less' function homePage(props) { @@ -17,42 +9,14 @@ function homePage(props) { const cardHeight = document.body.clientHeight * 0.896 * 0.32 const cardContentHeight = cardHeight - 42 - 13 return
-
-
{ dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >
进入后台
+
+
+
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
- -
-
+
+
{ dispatch(push('/waterprevention')) }}>
+
{ dispatch(push('/communitysafty')) }}>
+
diff --git a/super-screen/client/src/sections/homePage/containers/style.less b/super-screen/client/src/sections/homePage/containers/style.less index be0cdd4..129aafd 100644 --- a/super-screen/client/src/sections/homePage/containers/style.less +++ b/super-screen/client/src/sections/homePage/containers/style.less @@ -4,10 +4,110 @@ position: absolute; top: 0; left: 0; - background: url('/assets/images/homePage/bigscreen/bg.png'); + background: url('/assets/images/homePage/enter/bg.png'); background-repeat: no-repeat; background-size: 100% 100%; overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 5%; + + ._enter_row1 { + height: 302px; + + ._row1_item { + width: 1434px; + height: 241px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row1.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row1_item:hover { + width: 1434px; + height: 302.6px; + background: url('/assets/images/homePage/enter/row1-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + } + + ._enter_row2 { + height: 427px; + display: flex; + width: 100%; + padding-left: 4%; + + ._row2_item1 { + width: 454px; + height: 371px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row2-1.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + margin-left: 60px; + } + + ._row2_item1:hover { + background: url('/assets/images/homePage/enter/row2-1-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item2 { + margin-left: 60px; + width: 454px; + height: 371px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row2-2.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item2:hover { + background: url('/assets/images/homePage/enter/row2-2-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item3 { + margin-left: 60px; + width: 454px; + height: 371px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row2-3.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item3:hover { + background: url('/assets/images/homePage/enter/row2-3-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + } + + ._enter_title { + position: absolute; + top: 4%; + left: 3%; + width: 575.35px; + height: 78px; + background: url('/assets/images/homePage/enter/title.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } ._title { width: 100%; diff --git a/super-screen/client/src/sections/water-prevention/actions/example.js b/super-screen/client/src/sections/water-prevention/actions/example.js new file mode 100644 index 0000000..6b3c25d --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/actions/example.js @@ -0,0 +1,15 @@ +'use strict'; + +import { basicAction } from '@peace/utils' +import { ApiTable } from '$utils' + +// export function getMembers(orgId) { +// return dispatch => basicAction({ +// type: 'get', +// dispatch: dispatch, +// actionType: 'GET_MEMBERS', +// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, +// msg: { error: '获取用户列表失败' }, +// reducer: { name: 'members' } +// }); +// } diff --git a/super-screen/client/src/sections/water-prevention/actions/index.js b/super-screen/client/src/sections/water-prevention/actions/index.js new file mode 100644 index 0000000..444af37 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/actions/index.js @@ -0,0 +1,7 @@ +'use strict'; + +import * as example from './example' + +export default { + ...example, +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/components/abnormalMonitoring.js b/super-screen/client/src/sections/water-prevention/components/abnormalMonitoring.js new file mode 100644 index 0000000..e2107ed --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/abnormalMonitoring.js @@ -0,0 +1,49 @@ +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 [ +
+ + {s?.acquisitionTask?.taskName?.length > 20 ? s?.acquisitionTask?.taskNamesubstring(0, 20) + '...' : s?.acquisitionTask?.taskName} + +
, + moment(s?.startTime).format('YYYY-MM-DD HH:mm:ss'), + moment(s?.endTime).valueOf() - moment(s?.startTime).valueOf() + '毫秒', +
+ + {s?.details?.length > 20 ? s?.details.substring(0, 20) + '...' : s?.details} + +
+ ] + }) : [] + return
+
异常监控
+ +
+} + +export default AbnormalMonitoring; + + diff --git a/super-screen/client/src/sections/water-prevention/components/accessData.js b/super-screen/client/src/sections/water-prevention/components/accessData.js new file mode 100644 index 0000000..2d37d29 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/accessData.js @@ -0,0 +1,36 @@ +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
+
+
+ 数据单位
{!accessdata?.projects ? '-' : accessdata?.projects?.split(',')?.length}
个 +
+
+ 今日数据
{!accessdata?.res?.stat?.today ? '-' : accessdata?.res?.stat?.today > 1000 ? mathRound(accessdata?.res?.stat?.today) : accessdata?.res?.stat?.today}
{accessdata?.res?.stat?.today > 1000 ? '万条' : '条'} +
+
+ 数据总量
{accessdata?.res?.stat?.datas ? Math.round(accessdata?.res?.stat?.datas / 10000) : '-'}
万条 +
+
+ } + + return + {renderBody()} + +} + +export default AccessData; + + diff --git a/super-screen/client/src/sections/water-prevention/components/alarmList.js b/super-screen/client/src/sections/water-prevention/components/alarmList.js new file mode 100644 index 0000000..55181b5 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/alarmList.js @@ -0,0 +1,52 @@ +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 { + return [ + + {s[0].length > 20 ? s[0]?.substring(0, 20) + '...' : s[0]} + , +
{s[1]}
, + s[2] + ] + })} + rowNum={6} + height={cardContentHeight} + multiellipsis + columnWidth={[180, 80, 150]} + /> + } + + return + {alarms?.length > 0 ? renderBody() : } + +} + +export default AlarmList; + + diff --git a/super-screen/client/src/sections/water-prevention/components/centerTop.js b/super-screen/client/src/sections/water-prevention/components/centerTop.js new file mode 100644 index 0000000..a70d656 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/centerTop.js @@ -0,0 +1,19 @@ +import React from 'react' +import './style.less' + +function CenterTop(props) { + + + return
+
+
共享交换
+
数据监控
+
数据治理
+
数据采集
+
+
+} + +export default CenterTop; + + diff --git a/super-screen/client/src/sections/water-prevention/components/dataShare.js b/super-screen/client/src/sections/water-prevention/components/dataShare.js new file mode 100644 index 0000000..c8f2b08 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/dataShare.js @@ -0,0 +1,54 @@ +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
+
+
+ {s.title} +
+ {s.data}{s.unit} +
+
+
+ } + + 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 +
+
+ {leftData.map(s => renderItem(s))} +
+
+
今日
+ {rightData.map(s => renderItem(s))} +
+
+ +} + +export default DataShare; + + diff --git a/super-screen/client/src/sections/water-prevention/components/dataTop5.js b/super-screen/client/src/sections/water-prevention/components/dataTop5.js new file mode 100644 index 0000000..bbe7a9e --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/dataTop5.js @@ -0,0 +1,262 @@ +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
') // 每 30 个字符添加一个换行符 + } + var content = name + + return content + ' : ' + params[0].value + '万条' + } + }, + 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 + } + + return + { + dataTotal?.top5?.length > 0 ? + <> +
数据量：万条
+ {renderBody()} + + : + } + + +} + +export default DataTop5; + + diff --git a/super-screen/client/src/sections/water-prevention/components/hotspotData.js b/super-screen/client/src/sections/water-prevention/components/hotspotData.js new file mode 100644 index 0000000..f8a7240 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/hotspotData.js @@ -0,0 +1,42 @@ +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 + {top3?.length > 0 ? +
+
+
+ {top3[0].name?.length > 8 ? top3[0].name.substring(0, 8) + '...' : top3[0].name} +
{top3[0].count}
+
+
+ {top3?.length > 2 && <> + {top3[2].name?.length > 8 ? top3[2].name.substring(0, 8) + '...' : top3[2].name} +
{top3[2].count}
+ } +
+
+ {top3?.length > 1 && <> + {top3[1].name?.length > 8 ? top3[1].name.substring(0, 8) + '...' : top3[1].name} +
{top3[1].count}
+ } +
+
: + } + +} + +export default HotspotData; + + diff --git a/super-screen/client/src/sections/water-prevention/components/nodeResource.js b/super-screen/client/src/sections/water-prevention/components/nodeResource.js new file mode 100644 index 0000000..e142a1e --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/nodeResource.js @@ -0,0 +1,39 @@ +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
+
+
{cluters?.disk}%
+
硬盘
+
+
+
+
{cluters?.memory}%
+
内存
+
+
+
+
{cluters?.cpu}%
+
CPU
+
+
+
+ + } + + return + {renderBody()} + +} + +export default NodeResource; + + diff --git a/super-screen/client/src/sections/water-prevention/components/public/carousel-list.js b/super-screen/client/src/sections/water-prevention/components/public/carousel-list.js new file mode 100644 index 0000000..8aaf397 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/public/carousel-list.js @@ -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 ? ( + + ) : ; +} + +export default CarouselList; diff --git a/super-screen/client/src/sections/water-prevention/components/public/index.less b/super-screen/client/src/sections/water-prevention/components/public/index.less new file mode 100644 index 0000000..e67fb57 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/public/index.less @@ -0,0 +1,80 @@ +.opcityBackground { + background-color: rgba(8, 27, 55, 0.6); +} + +.card-title { + // background: linear-gradient(to bottom, #fafafb, #92cbff); + // background-clip: border-box; + // -webkit-background-clip: text; + color: #fff; + font-size: 22px; + font-family: YouSheBiaoTiHei; + padding-left: 20px; + // font-weight: 600; +} + +/* 滚动列表 */ +.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; +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/components/public/noData.js b/super-screen/client/src/sections/water-prevention/components/public/noData.js new file mode 100644 index 0000000..9d5bb13 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/public/noData.js @@ -0,0 +1,18 @@ +/* 公共模块暂无数据组件 */ +import React from 'react'; +import { Empty } from 'antd'; + +function NoData({ height = 180, marginTop = 0 }) { + return ( + + ); +} + +export default NoData; diff --git a/super-screen/client/src/sections/water-prevention/components/public/scrollBoard/index.js b/super-screen/client/src/sections/water-prevention/components/public/scrollBoard/index.js new file mode 100644 index 0000000..fbddde3 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/public/scrollBoard/index.js @@ -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} + * @default header = [] + * @example header = ['column1', 'column2', 'column3'] + */ + header: [], + /** + * @description Board data + * @type {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} + * @default columnWidth = [] + */ + columnWidth: [], + /** + * @description Column align + * @type {Array} + * @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 = `${i + + 1}`; + + 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 ( +
+ {!!header.length && !!mergedConfig && ( +
+ {header.map((headerItem, i) => ( +
+ ))} +
+ )} + + {!!mergedConfig && ( +
+ {rowsShow.map((row, ri) => ( +
+ {row.ceils.map((ceil, ci) => { + if (typeof (ceil) === 'string') { + return ( +
emitEvent(onClick, ri, ci, row, ceil)} + onMouseEnter={() => handleHover(true, ri, ci, row, ceil)} + onMouseLeave={() => handleHover(false)} + /> + ); + } + return ( +
handleHover(true, ri, ci, row, ceil)} + onMouseLeave={() => handleHover(false)} + > + {ceil} +
+ ); + })} +
+ ))} +
+ )} +
+ ); +}); + +ScrollBoard.propTypes = { + config: PropTypes.object, + onClick: PropTypes.func, + onMouseOver: PropTypes.func, + className: PropTypes.string, + style: PropTypes.object, +}; + +export default ScrollBoard; diff --git a/super-screen/client/src/sections/water-prevention/components/public/scrollBoard/style.less b/super-screen/client/src/sections/water-prevention/components/public/scrollBoard/style.less new file mode 100644 index 0000000..cb6eea5 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/public/scrollBoard/style.less @@ -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; + } + } +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/components/public/table-card.js b/super-screen/client/src/sections/water-prevention/components/public/table-card.js new file mode 100644 index 0000000..ada8a4e --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/public/table-card.js @@ -0,0 +1,34 @@ +'use strict' + +import React from 'react' +import './index.less' +class Box extends React.Component { + render() { + const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow } = this.props + + const headerbg = { + background: 'url(/assets/images/homePage/bigscreen/headertitlebg.png) no-repeat', + backgroundSize: '100% 100%', + } + return ( +
+
+
+ {title}
+
+
+ {children} +
+
+ ) + } +} +export default Box + diff --git a/super-screen/client/src/sections/water-prevention/components/style.less b/super-screen/client/src/sections/water-prevention/components/style.less new file mode 100644 index 0000000..b544be6 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/style.less @@ -0,0 +1,373 @@ +@card-height: calc(100% - 42px - 13px); //左右卡片内容高度定义 目前卡片为等高 + +//节点资源 +.node-resource-container { + display: flex; + height: @card-height; + width: 100%; + align-items: center; + + ._item { + width: 33%; + display: flex; + flex-direction: column; + align-items: center; + + ._noderesource_data { + font-family: D-DINExp-Bold; + font-weight: 600; + font-size: 24px; + color: #FFFFFF; + line-height: 43.2px; + display: flex; + align-items: center; + + ._percent { + opacity: 0.8; + font-family: PingFangSC-Regular; + font-weight: 400; + font-size: 12px; + color: #C8F0FF; + text-align: left; + line-height: 24px; + } + } + + ._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; + } + + .disk_icon { + width: 68.73px; + height: 62.77px; + background: url('/assets/images/homePage/bigscreen/disk.png'); + background-repeat: 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; + background-size: 100% 100%; + } + + .memory_icon { + width: 68.73px; + height: 62.77px; + background: url('/assets/images/homePage/bigscreen/memory.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + } +} + +//接入数据统计 +.access_data { + display: flex; + height: @card-height; + width: 100%; + justify-content: center; + + font-family: PingFangSC-Regular; + font-weight: 400; + font-size: 14px; + color: #FFFFFF; + + ._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%; + + .data_number { + line-height: 25px; + font-family: D-DINExp-Bold; + font-weight: 700; + font-size: 20px; + color: #3E86FF; + letter-spacing: 0; + } + } + + .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%; + + .data_number { + line-height: 25px; + font-family: D-DINExp-Bold; + font-weight: 700; + font-size: 20px; + color: #FFDC4E; + letter-spacing: 0; + } + } +} + +.data_top5_unit { + position: absolute; + right: 4%; + top: 18%; + font-family: PingFangSC-Regular; + font-weight: 400; + font-size: 12px; + color: #C8F0FF; +} + +.hotspot_data_container { + display: flex; + height: @card-height; + width: 100%; + justify-content: center; + + font-family: PingFangSC-Regular; + font-weight: 400; + font-size: 14px; + color: #FFFFFF; + + ._img { + width: 203px; + height: 80%; + background: url('/assets/images/homePage/bigscreen/hotspotdatabg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + .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); + } + + + .hotspot_data_number { + font-family: D-DINExp-Bold; + font-weight: 700; + font-size: 18px; + color: #FFFFFF; + } + + ._top1 { + position: absolute; + top: 25%; + right: 63%; + text-align: right; + } + + ._top2 { + position: absolute; + bottom: 22%; + right: 67%; + text-align: center; + } + + ._top3 { + position: absolute; + bottom: 34%; + left: 73%; + } +} + +//数据共享 +.data_share { + display: flex; + height: @card-height; + + ._left_content { + width: 50%; + height: 90%; + padding-left: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + ._right_content { + ._today_text { + font-family: YouSheBiaoTiHei; + font-size: 24px; + color: #FFFFFF; + letter-spacing: 0.5px; + position: absolute; + right: 6%; + top: 21%; + } + + padding-top: 23px; + display: flex; + flex-direction: column; + width: 47%; + height: 95%; + background: url(/assets/images/homePage/bigscreen/todaybg.png); + background-repeat: no-repeat; + background-size: 100% 100%; + justify-content: space-evenly; + align-items: center; + + } + + ._item_content { + display: flex; + + + ._item_icon1 { + width: 52px; + height: 52px; + background: url('/assets/images/homePage/bigscreen/1.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._item_icon2 { + width: 52px; + height: 52px; + background: url('/assets/images/homePage/bigscreen/2.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._item_icon3 { + width: 52px; + height: 52px; + background: url('/assets/images/homePage/bigscreen/3.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._item_text { + color: #C8F0FF; + padding-left: 6px; + + .number_container { + ._number { + font-family: D-DINExp-Bold; + font-weight: 700; + font-size: 22px; + color: #FFFFFF; + } + + display: flex; + align-items: center; + justify-content: space-evenly; + width: 112px; + height: 28px; + background-image: linear-gradient(227deg, #3196AB 0%, #2091cd00 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); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; + } + + ._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); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; + } + + ._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); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; + } + + ._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); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; + } +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/components/util.js b/super-screen/client/src/sections/water-prevention/components/util.js new file mode 100644 index 0000000..1a4c117 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/components/util.js @@ -0,0 +1,3 @@ +export const mathRound = (number) => { + return number ? Math.round(number / 1000) / 10 : 0 +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/containers/homePage.js b/super-screen/client/src/sections/water-prevention/containers/homePage.js new file mode 100644 index 0000000..ef570f6 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/containers/homePage.js @@ -0,0 +1,74 @@ +import React, { useEffect, useState } from 'react' +import { connect } from 'react-redux'; +import { push } from 'react-router-redux'; +import AccessData from '../components/accessData' +import AlarmList from '../components/alarmList' +import DataShare from '../components/dataShare' +import DataTop5 from '../components/dataTop5' +import HotspotData from '../components/hotspotData' +import NodeResource from '../components/nodeResource' +import AbnormalMonitoring from '../components/abnormalMonitoring' +import CenterTop from '../components/centerTop' +import './style.less' + +function homePage(props) { + const { dispatch } = props; + const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } + const cardHeight = document.body.clientHeight * 0.896 * 0.32 + const cardContentHeight = cardHeight - 42 - 13 + return
+
+
{ dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >
进入后台
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +} + +function mapStateToProps(state) { + const { + auth, global + } = state; + return { + clientHeight: global.clientHeight, + actions: global.actions, + + }; +} + +export default connect(mapStateToProps)(homePage); + + diff --git a/super-screen/client/src/sections/water-prevention/containers/index.js b/super-screen/client/src/sections/water-prevention/containers/index.js new file mode 100644 index 0000000..e793d09 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/containers/index.js @@ -0,0 +1,6 @@ +'use strict'; + +import homePage from './homePage'; + + +export default homePage ; diff --git a/super-screen/client/src/sections/water-prevention/containers/style.less b/super-screen/client/src/sections/water-prevention/containers/style.less new file mode 100644 index 0000000..129aafd --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/containers/style.less @@ -0,0 +1,324 @@ +.homepage { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: url('/assets/images/homePage/enter/bg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 5%; + + ._enter_row1 { + height: 302px; + + ._row1_item { + width: 1434px; + height: 241px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row1.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row1_item:hover { + width: 1434px; + height: 302.6px; + background: url('/assets/images/homePage/enter/row1-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + } + + ._enter_row2 { + height: 427px; + display: flex; + width: 100%; + padding-left: 4%; + + ._row2_item1 { + width: 454px; + height: 371px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row2-1.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + margin-left: 60px; + } + + ._row2_item1:hover { + background: url('/assets/images/homePage/enter/row2-1-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item2 { + margin-left: 60px; + width: 454px; + height: 371px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row2-2.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item2:hover { + background: url('/assets/images/homePage/enter/row2-2-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item3 { + margin-left: 60px; + width: 454px; + height: 371px; + // opacity: 0.8; + background: url('/assets/images/homePage/enter/row2-3.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + + ._row2_item3:hover { + background: url('/assets/images/homePage/enter/row2-3-select.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + } + } + + ._enter_title { + position: absolute; + top: 4%; + left: 3%; + width: 575.35px; + height: 78px; + background: url('/assets/images/homePage/enter/title.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._title { + width: 100%; + height: 88px; + background: url('/assets/images/homePage/bigscreen/top.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + ._exit { + position: absolute; + right: 60px; + top: 38px; + cursor: pointer; + color: #C8F0FF; + display: flex; + + ._icon { + display: inline-block; + width: 28px; + height: 28px; + background: url('/assets/images/homePage/bigscreen/exit.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + margin-right: 3px; + } + } + + .homepage-left { + width: 21.8%; + height: 89.6%; + position: absolute; + top: 8.2%; + z-index: 300; + } + + .homepage-center { + width: 49.16%; + height: 89.6%; + position: absolute; + bottom: 2.4%; + left: 25.5%; + padding-left: 16px; + padding-right: 16px; + z-index: 400; + + ._top { + margin-top: 5%; + height: calc(100% - 200px); + background: url('/assets/images/homePage/bigscreen/centerbg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + position: relative; + } + } + + .homepage-left-left { + left: 48px; + } + + .homepage-left-right { + right: 48px; + } + +} + + +.list { + list-style: none; + height: 100%; +} + +.list .child { + box-sizing: border-box; + opacity: 0; + transform: translateX(-300px); + animation: show .5s forwards; +} + +.list .child.show { + animation-delay: 0s !important; +} + +.list .child.hide { + opacity: 1; + transform: translateX(0); + animation-name: hide; + animation-delay: 0s; +} + +/*animation-delay*/ +.list .child:not(.hide):nth-child(5n + 1) { + animation-delay: .3s; +} + +.list .child:not(.hide):nth-child(5n + 2) { + animation-delay: .6s; +} + +.list .child:not(.hide):nth-child(5n + 3) { + animation-delay: .9s; +} + +.list .child:not(.hide):nth-child(5n + 4) { + animation-delay: 1.2s; +} + +.list .child:not(.hide):nth-child(5n + 5) { + animation-delay: 1.5s; +} + +.list .child-right { + box-sizing: border-box; + opacity: 0; + transform: translateX(300px); + animation: show .5s forwards; +} + +.list .child-right.show { + animation-delay: 0s !important; +} + +.list .child-right.hide { + opacity: 1; + transform: translateX(0); + animation-name: hide; + animation-delay: 0s; +} + +/*animation-delay*/ +.list .child-right:not(.hide):nth-child(5n + 1) { + animation-delay: .3s; +} + +.list .child-right:not(.hide):nth-child(5n + 2) { + animation-delay: .6s; +} + +.list .child-right:not(.hide):nth-child(5n + 3) { + animation-delay: .9s; +} + +.list .child-right:not(.hide):nth-child(5n + 4) { + animation-delay: 1.2s; +} + +.list .child-right:not(.hide):nth-child(5n + 5) { + animation-delay: 1.5s; +} + +.list .child-top { + box-sizing: border-box; + opacity: 0; + transform: translateY(300px); + animation: show 1s forwards; +} + +.list .child-top.show { + animation-delay: 0s !important; +} + +.list .child-top.hide { + opacity: 1; + transform: translateY(0); + animation-name: hide; + animation-delay: 0s; +} + + +@keyframes show { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes hide { + to { + opacity: 0; + transform: translateX(100px); + max-height: 0; + margin: 0; + } +} + +.center-card-title { + height: 31px; + font-family: YouSheBiaoTiHei; + font-size: 24px; + color: #FFFFFF; + display: flex; + align-items: center; + margin-top: 5px; + + ._icon_left { + width: 32px; + height: 17px; + background: url('/assets/images/homePage/bigscreen/center-left.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + margin-right: 11px; + margin-left: 10px; + } + + ._icon_right { + width: 32px; + height: 17px; + background: url('/assets/images/homePage/bigscreen/center-right.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + margin-right: 11px; + margin-left: 10px; + } +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/index.js b/super-screen/client/src/sections/water-prevention/index.js new file mode 100644 index 0000000..02d8cf2 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/index.js @@ -0,0 +1,15 @@ +'use strict'; + +import reducers from './reducers'; +import routes from './routes'; +import actions from './actions'; +import { getNavItem } from './nav-item'; + +export default { + key: 'waterprevention', + name: '首页', + reducers: reducers, + routes: routes, + actions: actions, + getNavItem: getNavItem +}; \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/nav-item.js b/super-screen/client/src/sections/water-prevention/nav-item.js new file mode 100644 index 0000000..48c2b12 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/nav-item.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Menu } from 'antd'; +import { HomeOutlined } from '@ant-design/icons'; +export function getNavItem(user) { + return ( + }> + 数据监控平台 + + ); +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/reducers/index.js b/super-screen/client/src/sections/water-prevention/reducers/index.js new file mode 100644 index 0000000..7ed1088 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/reducers/index.js @@ -0,0 +1,5 @@ +'use strict'; + +export default { + +} \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/routes.js b/super-screen/client/src/sections/water-prevention/routes.js new file mode 100644 index 0000000..a4890f6 --- /dev/null +++ b/super-screen/client/src/sections/water-prevention/routes.js @@ -0,0 +1,13 @@ +'use strict'; +import homePage from './containers/index'; + +export default [{ + type: 'outer', + route: { + path: '/waterprevention', + key: 'waterprevention', + breadcrumb: '数据监控平台', + // 不设置 component 则面包屑禁止跳转 + component: homePage + } +}]; \ No newline at end of file diff --git a/super-screen/client/src/sections/water-prevention/style.less b/super-screen/client/src/sections/water-prevention/style.less new file mode 100644 index 0000000..e69de29 diff --git a/super-screen/middlewares/webpack-dev.js b/super-screen/middlewares/webpack-dev.js index 369a5c4..fc44fb3 100644 --- a/super-screen/middlewares/webpack-dev.js +++ b/super-screen/middlewares/webpack-dev.js @@ -44,7 +44,7 @@ module.exports = { const server = express(); server.use(middleware(compiler)); //server.use(require("webpack-hot-middleware")(compiler)); - server.listen('5401', function (err) { + server.listen('5501', function (err) { if (err) { console.log(err); } diff --git a/super-screen/package.json b/super-screen/package.json index 904f85f..b2a7a71 100644 --- a/super-screen/package.json +++ b/super-screen/package.json @@ -98,4 +98,4 @@ "xlsx": "^0.16.9", "xmlhttprequest": "^1.8.0" } -} \ No newline at end of file +}