Browse Source

(*) 滚动列表 组件提交

master
peng.peng 1 year ago
parent
commit
4384cb8a70
  1. BIN
      super-screen/client/assets/images/homepage/enter/row1-select.png
  2. BIN
      super-screen/client/assets/images/homepage/enter/row1.png
  3. BIN
      super-screen/client/assets/images/homepage/enter/row2-1-select.png
  4. BIN
      super-screen/client/assets/images/homepage/enter/row2-1.png
  5. BIN
      super-screen/client/assets/images/homepage/enter/row2-2-select.png
  6. BIN
      super-screen/client/assets/images/homepage/enter/row2-2.png
  7. BIN
      super-screen/client/assets/images/homepage/enter/row2-3-select.png
  8. BIN
      super-screen/client/assets/images/homepage/enter/row2-3.png
  9. 31
      super-screen/client/index.ejs
  10. 31
      super-screen/client/index.html
  11. 2
      super-screen/client/src/app.js
  12. 4
      super-screen/client/src/components/index.js
  13. 112
      super-screen/client/src/components/rollComponent/index.js
  14. 76
      super-screen/client/src/components/rollComponent/style.less
  15. 9
      super-screen/client/src/sections/community-safty/components/city-safty.js
  16. 4
      super-screen/client/src/sections/community-safty/components/style.less
  17. 33
      super-screen/client/src/sections/community-safty/components/traffic-ranking.js
  18. 2
      super-screen/client/src/sections/community-safty/containers/homePage.js
  19. 15
      super-screen/client/src/sections/fire-control/components/left-bottom.js
  20. 17
      super-screen/client/src/sections/fire-control/components/style.less
  21. 2
      super-screen/client/src/sections/fire-control/containers/homePage.js
  22. 37
      super-screen/client/src/sections/water-prevention/components/right-top.js
  23. 8
      super-screen/client/src/sections/water-prevention/containers/gis.js
  24. 3
      super-screen/client/src/sections/water-prevention/containers/homePage.js
  25. 24
      super-screen/client/src/utils/webapi.js

BIN
super-screen/client/assets/images/homepage/enter/row1-select.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 450 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
super-screen/client/assets/images/homepage/enter/row1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 353 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
super-screen/client/assets/images/homepage/enter/row2-1-select.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 41 KiB

BIN
super-screen/client/assets/images/homepage/enter/row2-1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
super-screen/client/assets/images/homepage/enter/row2-2-select.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 253 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
super-screen/client/assets/images/homepage/enter/row2-2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 188 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
super-screen/client/assets/images/homepage/enter/row2-3-select.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 251 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
super-screen/client/assets/images/homepage/enter/row2-3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 185 KiB

After

Width:  |  Height:  |  Size: 38 KiB

31
super-screen/client/index.ejs

@ -5,6 +5,22 @@
<meta charset="UTF-8">
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
@font-face {
font-family: D-DIN-Italic;
src: url("/assets/font_sc/D-DIN.ttf");
}
</style>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "1321f0b6cd761e2f85496778dcb9bddb",
@ -15,22 +31,7 @@
<script src="https://webapi.amap.com/loca?v=2.0.0&key=173f32a9ff6f3a8c6b15aceb3353c715"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
</head>
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
@font-face {
font-family: D-DIN-Italic;
src: url("/assets/font_sc/D-DIN.ttf");
}
</style>
<body style="background: #000000">
<div id='App'></div>

31
super-screen/client/index.html

@ -6,6 +6,22 @@
<title></title>
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
@font-face {
font-family: D-DIN-Italic;
src: url("/assets/font_sc/D-DIN.ttf");
}
</style>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "1321f0b6cd761e2f85496778dcb9bddb",
@ -16,22 +32,7 @@
<script src="https://webapi.amap.com/loca?v=2.0.0&key=173f32a9ff6f3a8c6b15aceb3353c715"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
</head>
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
@font-face {
font-family: D-DIN-Italic;
src: url("/assets/font_sc/D-DIN.ttf");
}
</style>
<body style="background: #000000;">
<div id='App'></div>

2
super-screen/client/src/app.js

@ -21,7 +21,7 @@ const App = props => {
homePage,
Auth,
waterprevention,
// communitysafty,
communitysafty,
firecontrol
]}
/>

4
super-screen/client/src/components/index.js

@ -11,6 +11,7 @@ import Box from './public/table-card';
import CarouselList from './public/carousel-list';
import NoData from './public/noData'
import FullScreenContainer from './full-screen-container'
import AutoRollComponent from './rollComponent/index'
export {
Upload,
Uploads,
@ -21,5 +22,6 @@ export {
Box,
CarouselList,
NoData,
FullScreenContainer
FullScreenContainer,
AutoRollComponent
};

112
super-screen/client/src/components/rollComponent/index.js

@ -0,0 +1,112 @@
'use strict'
import React, { Component } from 'react';
import { Row, Col, Tag, Tooltip, Icon } from 'antd';
import './style.less';
export default class AutoRollComponent extends Component {
constructor(props) {
super(props);
this.scrollElem = null;
this.stopscroll = false;
this.preTop = 0;
this.cloneEle = null;
this.currentTop = 0;
this.marqueesHeight = 0;
this.interval = null;
this.state = {
showContent: false,
dataObj: {}
}
}
marque = (height) => {
try {
this.scrollElem = document.getElementById(this.props.divId);
this.marqueesHeight = height;
if (this.scrollElem) {
this.scrollElem.style.height = this.marqueesHeight;
this.scrollElem.style.overflow = 'hidden';
}
if (!this.props.closeroll) {
if (this.props.canScroll) {
this.cloneEle = document.getElementById(this.props.divId);
this.scrollElem.appendChild(this.cloneEle.cloneNode(true));
this.repeat()
}
}
// let length = this.props.data.length;
// if (length > 5) {
// this.cloneEle = document.getElementById(this.props.divId);
// this.scrollElem.appendChild(this.cloneEle.cloneNode(true));
// this.repeat();
// }
} catch (e) { console.log(e) }
}
repeat = () => {
this.scrollElem.scrollTop = 0;
this.interval = setInterval(() => {
if (this.stopscroll) return;
this.currentTop = this.currentTop + 1;
this.preTop = this.scrollElem.scrollTop;
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1;
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
if (this.preTop === this.scrollElem.scrollTop) {
this.scrollElem.scrollTop = this.marqueesHeight;
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1;
}
}, 50);
}
componentWillUnmount() {
clearInterval(this.interval);
}
componentDidMount() {
this.marque(10);
}
onMouseOver = () => {
this.stopscroll = true;
}
onMouseOut = () => {
this.stopscroll = false;
}
handelShowContent = (q) => {
this.setState({ dataObj: q, showContent: true })
}
close = () => {
this.stopscroll = false;
this.setState({ showContent: false, begin: 0, end: 100, dataObj: {} })
}
render() {
const { dataObj } = this.state;
const { changeStyleCol, heads, spans, data, showWord, divId, divHeight, content, color, type, titleLeft, canScroll } = this.props;
return (
<div style={{ textAlign: 'left' }}>
{heads ?
<Row className={'bg-row'} style={{ lineHeight: '40px', height: 40, fontSize: 16, wordBreak: 'keep-all', whiteSpace: 'nowrap', textAlign: titleLeft ? 'left' : 'center', paddingLeft: titleLeft ? 5 : 0 }}>
{heads.map((c, index) => {
return <Col style={{ color: color ? color : '#fff', paddingLeft: titleLeft ? 10 : 'auto' }} span={spans[index]} key={index}>{c}</Col>
})
}
</Row>
: ''}
<div id={divId} className={'hidden-scroll-bar-y'} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<div>
{content ? content : ''}
</div>
</div>
</div >
)
}
}

76
super-screen/client/src/components/rollComponent/style.less

@ -0,0 +1,76 @@
.alarm-title-b{
font-size:15px;
font-family:PingFangSC-Regular,PingFang SC;
// font-weight:400;
color:rgba(255,255,255,1);
// line-height:25px;
}
.alarm-title-s{
font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
// font-weight:400;
color:rgba(175,196,215,1);
margin-right: 20px;
// line-height:22px;
}
.list-first{
width: 22px;
height: 22px;
background-size: cover;
display: inline-block;
}
.autovideo-modal .ant-modal, .autoimage-modal .ant-modal {
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.autovideo-modal .ant-modal, .autovideo-modal .ant-modal-body {
height: 450px;
}
.autovideo-modal .ant-modal-footer, .autoimage-modal .ant-modal-footer {
display: none;
}
.autovideo-modal .ant-modal-close, .autoimage-modal .ant-modal-close {
top: -10px;
right: -10px;
}
.autoimage-modal .ant-modal-body img {
width: 100%;
height: auto;
}
.punish-ybj {
background: url('/assets/images/ui/ybj.png') no-repeat;
background-size: 100% 100%;
padding: 5px;
text-align: center;
}
.punish-dcl {
background: url('/assets/images/ui/dcl.png') no-repeat;
background-size: 100% 100%;
padding: 5px;
text-align: center;
}
.bg-row {
background: url('/assets/images/ui/cjx.png') no-repeat;
background-size: 100% 100%;
}
.bg-qs {
margin-top: 15px;
background: url('/assets/images/ui/jxqs.png') no-repeat;
background-size: 100% 100%;
}
.margin-left-5 {
margin-left: 5px;
}
.hidden-scroll-bar-y{
overflow-y: scroll !important;
scrollbar-width: none !important;
}
.hidden-scroll-bar-y::-webkit-scrollbar { width: 0 !important }

9
super-screen/client/src/sections/community-safty/components/city-safty.js

@ -1,11 +1,11 @@
import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import { Box, AutoRollComponent } from '$components';
import './style.less';
function CitySafty(props) {
return <Box title={"城市安全"} >
<div className='_city_safty'>
const getContent = () => {
return <div className='_city_safty'>
<div className='alarm_handle'>
<div className='handle_img' />
<div className='alarm_content'>
@ -37,6 +37,9 @@ function CitySafty(props) {
</div>
</div>
</div>
}
return <Box title={"城市安全"} >
<AutoRollComponent canScroll={true} content={getContent()} divHeight={240} divId={`community-right-top`} />
</Box>
}

4
super-screen/client/src/sections/community-safty/components/style.less

@ -391,9 +391,9 @@
color: #E2F8FF;
letter-spacing: 1.17px;
line-height: 19px;
padding: 20px 14px 0px 14px;
// padding: 20px 14px 0px 14px;
overflow: auto;
height: 100%;
// height: 100%;
.alarm_handle {
display: flex;

33
super-screen/client/src/sections/community-safty/components/traffic-ranking.js

@ -1,10 +1,25 @@
import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import { Box, AutoRollComponent } from '$components';
import './style.less';
function DataTop5(props) {
const content = <div className='rank_content_overflow'>
{[1, 2, 3, 4, 5, 6, 7, 8].map(s => {
return <div className='_rank_content'>
<div className={`_rank_item1`}>
<div className={`topbg${s}`}>
<div style={{ marginTop: -9 }}>{s}</div>
</div>
</div>
<div className='_rank_item2'>小区名称{s}</div>
<div className='_rank_item3'>{1400 - s}</div>
</div>
})}
</div>
return <Box title={"小区人流量排名"} bodyPaddingTop={1} >
<div className='_traffic_ranking'>
@ -14,21 +29,7 @@ function DataTop5(props) {
<div className='_rank_item3'>人流量<span style={{ fontSize: 14 }}>/</span></div>
</div>
<div className='rank_content_overflow'>
{[1, 2, 3, 4, 5, 6, 7, 8].map(s => {
return <div className='_rank_content'>
<div className={`_rank_item1`}>
<div className={`topbg${s}`}>
<div style={{ marginTop: -9 }}>{s}</div>
</div>
</div>
<div className='_rank_item2'>小区名称{s}</div>
<div className='_rank_item3'>{1400 - s}</div>
</div>
})}
</div>
<AutoRollComponent canScroll={true} content={content} data={[]} divHeight={200} divId={`community-right-bottom`} />
</div>
</Box>
}

2
super-screen/client/src/sections/community-safty/containers/homePage.js

@ -27,7 +27,7 @@ function homePage(props) {
<span>流动人口</span>
</div>
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
<div onClick={() => { dispatch(push('/homepage')) }} className='_exit' >返回平台</div>
</div>
<div className='homepage-left homepage-left-left'>
<div className="list">

15
super-screen/client/src/sections/fire-control/components/left-bottom.js

@ -1,11 +1,10 @@
import React from 'react'
import { Box } from '$components';
import { Box, AutoRollComponent } from '$components';
function Infrastructure(props) {
return <Box title={"今日实时警情"} >
<div className='today_real_alarm'>
const getContent = () => {
return <div className='today_real_alarm'>
<div className='today_item'>
<div className='column1_alarm1'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
@ -26,7 +25,15 @@ function Infrastructure(props) {
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
<div className='today_item'>
<div className='column1_alarm2'>14:22</div>
<div className='text_blue'><div className='_icon1' />红花岗区大队</div>
<div className='text_blue'><div className='_icon2' />划龙桥路77号</div>
</div>
</div>
}
return <Box title={"今日实时警情"} >
<AutoRollComponent canScroll={true} content={getContent()} divHeight={340} divId={`fire-left-bottom`} />
</Box>
}

17
super-screen/client/src/sections/fire-control/components/style.less

@ -161,14 +161,14 @@
}
.fire_item_right_container {
display: flex;
width: 100%;
height: 100%;
text-align: center;
flex-direction: column;
align-items: center;
overflow: auto;
padding-top: 24px;
// display: flex;
// width: 100%;
// height: 100%;
// text-align: center;
// flex-direction: column;
// align-items: center;
// // overflow: auto;
// padding-top: 12px;
.fire_right_item {
width: 95%;
@ -445,6 +445,7 @@
justify-content: center;
.today_item {
margin-bottom: 15px;
width: 91%;
height: 41px;
background: url('/assets/images/homepage/fire/alarmbg.png') no-repeat;

2
super-screen/client/src/sections/fire-control/containers/homePage.js

@ -31,7 +31,7 @@ function homePage(props) {
<span>一键护航</span>
</div>
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
<div onClick={() => { dispatch(push('/homepage')) }} className='_exit' >返回平台</div>
</div>
<div className='homepage-left homepage-left-left'>
<div div className="list">

37
super-screen/client/src/sections/water-prevention/components/right-top.js

@ -1,11 +1,29 @@
import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import { Box, AutoRollComponent } from '$components';
import { Tooltip } from 'antd';
import './style.less';
function CitySafty(props) {
const { trendData } = props;
const getContent = () => {
return <div className='rank_content_overflow'>
{trendData?.map((s, index) => {
return <div className='_rank_content' key={s.index}>
<div className={`_rank_item1`}>
<Tooltip placement="topLeft" title={s.name}>{s.name}</Tooltip>
</div>
<div className='_rank_item2'>{s.currentTime}</div>
<div className='_rank_item3'>{s.waterLevel}{s.waterLevel && <div className={s.waterLevel - s.lastWaterLevel > 0 ? '_upicon' : '_downicon'} />}</div>
<div className='_rank_item4'>
<div className={s.futureState === '正常' ? 'normalbg' : 'warningbg'} >
{s.futureState === '正常' ? '正常' : s.futureState.length ? '告警' : '--'}
</div>
</div>
</div>
})}
</div>
}
return <Box title={"水位趋势预测图"} >
<div className='water_traffic_ranking'>
<div className='_rank_title'>
@ -15,22 +33,7 @@ function CitySafty(props) {
<div className='_rank_item4'>未来1小时趋势</div>
</div>
<div className='rank_content_overflow'>
{trendData?.map((s, index) => {
return <div className='_rank_content' key={s.index}>
<div className={`_rank_item1`}>
<Tooltip placement="topLeft" title={s.name}>{s.name}</Tooltip>
</div>
<div className='_rank_item2'>{s.currentTime}</div>
<div className='_rank_item3'>{s.waterLevel}{s.waterLevel && <div className={s.waterLevel - s.lastWaterLevel > 0 ? '_upicon' : '_downicon'} />}</div>
<div className='_rank_item4'>
<div className={s.futureState === '正常' ? 'normalbg' : 'warningbg'} >
{s.futureState === '正常' ? '正常' : s.futureState.length ? '告警' : '--'}
</div>
</div>
</div>
})}
</div>
<AutoRollComponent canScroll={true} content={getContent()} divHeight={340} divId={`fire-right-top`} />
</div>
</Box>
}

8
super-screen/client/src/sections/water-prevention/containers/gis.js

@ -408,8 +408,8 @@ function Map(props) {
}
const tabs = tab == 'overview' ? [
{ name: '房屋分布', tab: 'overview' },
{ name: '基础设施', tab: 'emergency' }
{ name: '实时监测', tab: 'overview' },
{ name: '应急抢险', tab: 'emergency' }
] : [
{ name: '应急机构', tab: 'yjjg', className: 'emergency_button' },
{ name: '应急队伍', tab: 'yjdw', className: 'emergency_button' },
@ -570,10 +570,10 @@ function Map(props) {
<div>{s.name}</div>
{s.className && <div className='dotbg'>7</div>}
</div>
{
{/* {
tab !== 'overview' && <> <div className='icon_left'></div>
<div className='icon_right'></div></>
}
} */}
</>
})
}

3
super-screen/client/src/sections/water-prevention/containers/homePage.js

@ -170,7 +170,7 @@ function homePage(props) {
水务防汛实时监测预警系统
</div>
<Weather />
<div onClick={() => { dispatch(push('/metadataManagement/homepage')) }} className='_exit' >返回平台</div>
<div onClick={() => { dispatch(push('/homepage')) }} className='_exit' >返回平台</div>
</div>
<div className='homepage-left homepage-left-left'>
<div div className="list">
@ -194,6 +194,7 @@ function homePage(props) {
}}
trendData={trendData}
waterLevelAlarms={waterLevelAlarms}
emerResource={emerResource}
/>
</div>
<div className='homepage-left homepage-left-right'>

24
super-screen/client/src/utils/webapi.js

@ -117,19 +117,19 @@ export const ApiTable = {
lookField: 'lookField',
//大屏-水务
waterLogin: '_water/login',
getWaterLevelTrend: '_water/overview/monitoring-station',
getWaterStructures: '_water/organizations/84/structures',
getWaterVideoList: '_water/structures/{struIds}/ipcs?stationIds=undefined',
getYsAccessToken: '_water/yingshi/accessToken',
getWaterAlarms: '_water/axy/alarm?userId=1134&orderBy=endTime&orderDirection=desc&limit=10&offset=0',
waterLogin: '_water/_api/login',
getWaterLevelTrend: '_water/_api/overview/monitoring-station',
getWaterStructures: '_water/_api/organizations/84/structures',
getWaterVideoList: '_water/_api/structures/{struIds}/ipcs?stationIds=undefined',
getYsAccessToken: '_water/_api/yingshi/accessToken',
getWaterAlarms: '_water/_api/axy/alarm?userId=1134&orderBy=endTime&orderDirection=desc&limit=10&offset=0',
//安监
worksafetyLogin: '_worksafety/project/login',
getEmerOrgList: '_worksafety/emergency/resource-org-list', // 应急机构
getEmerTeamList: '_worksafety/emergency/resource-team-list', // 应急队伍
getEmerExpertList: '_worksafety/emergency/resource-expert-list', // 应急专家
getEmerMedicalList: '_worksafety/emergency/resource-medical-list', // 医疗机构
getEmerRefugeList: '_worksafety/emergency/resource-refuge-list', // 避难场所
worksafetyLogin: '_worksafety/_api/project/login',
getEmerOrgList: '_worksafety/_api/emergency/resource-org-list', // 应急机构
getEmerTeamList: '_worksafety/_api/emergency/resource-team-list', // 应急队伍
getEmerExpertList: '_worksafety/_api/emergency/resource-expert-list', // 应急专家
getEmerMedicalList: '_worksafety/_api/emergency/resource-medical-list', // 医疗机构
getEmerRefugeList: '_worksafety/_api/emergency/resource-refuge-list', // 避难场所
};
export const RouteTable = {

Loading…
Cancel
Save