free-sun
/
GovernmentDataResourceCenter
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

（*）水利应急数据接入和建设数据展示优化

master
peng.peng 1 year ago
parent
e3daa9d45e
commit
24924ecdcc
7 changed files with 206 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      super-screen/client/src/sections/water-prevention/components/charts/ring.js
  2. 10
      super-screen/client/src/sections/water-prevention/components/emergency-right-top.js
  3. 44
      super-screen/client/src/sections/water-prevention/components/right-bottom.js
  4. 22
      super-screen/client/src/sections/water-prevention/components/right-top.js
  5. 2
      super-screen/client/src/sections/water-prevention/components/style.less
  6. 161
      super-screen/client/src/sections/water-prevention/containers/gis.js
  7. 3
      super-screen/client/src/utils/userDisplayHandle.js

3
super-screen/client/src/sections/water-prevention/components/charts/ring.js
View File

@ -92,13 +92,14 @@ function RingChart(props) {
};
const { height, width } = props;
const options = getOption();
const percent_colors = ['#F8C86B', '#24DDFA', '#267FD3',]
const renderList = () => data.map((s, index) => (
<div key={s.name || index} className="type-leagle-item flex-row flex-item-center">
<div className="flex-row flex-item-center">
<div className="type-leagle-dot" style={{ background: `linear-gradient(16deg, ${colors[index].linearGradientFrom} 0%, ${colors[index].linearGradientTo} 100%)` }} />
<div className="type-leagle-label">{s.name}</div>
</div>
<div className="type-leagle-value">{s.value}</div>
<div className="type-leagle-value">{s.value}个 <span style={{ fontSize: 14, color: percent_colors[index] }}>14%</span></div>
</div>
));

10
super-screen/client/src/sections/water-prevention/components/emergency-right-top.js
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import { Box, AutoRollComponent } from '$components';
import { getName, getPhone } from '$utils';
import './style.less';
@ -13,8 +13,8 @@ function CitySafty(props) {
yjbns: { name: '应急避难场所', items: [{ key: 'shelterName', name: '场所全称' }, { key: 'address', name: '场所地址' }, { key: 'eventType', name: '事件类型' }, { key: 'capacity', name: '容纳人数' }] },
}
return <Box title={tab_name[emengencyTab]?.name} >
<div className='water_item_right_container'>
const getContent = () => {
return <div className='water_item_right_container'>
{
emergencyList[emengencyTab]?.map((s, index) => {
@ -48,6 +48,10 @@ function CitySafty(props) {
}
</div>
}
return <Box title={tab_name[emengencyTab]?.name} >
<AutoRollComponent key={emengencyTab} canScroll={emergencyList[emengencyTab]?.length > 3} content={getContent()} divHeight={860} divId={`fire-left-bottom${emengencyTab}`} />
</Box>
}

44
super-screen/client/src/sections/water-prevention/components/right-bottom.js
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import { Box, NoData } from '$components';
import { Select } from 'antd';
import './style.less';
@ -30,27 +30,29 @@ function DataTop5(props) {
</Select>
);
return <Box title={"视频监控"} bodyPaddingTop={1} subtitleSelect={renderSubtitle()}>
<div className='water_video_container'>
{
showVideoList?.map((v, i) => {
const src = `https://open.ys7.com/ezopen/h5/iframe?url=${v.url}&autoplay=1&accessToken=${accessToken}`
return <div className='_item' key={v.url}>
<iframe
id={`myPlayer-${i}`}
src={src}
width='100%' // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
height='100%'
allowFullScreen
>
</iframe>
<div className='video_bottom'>
<span className='video_bottom_text'>{v.name}</span>
{showVideoList?.length > 0 ?
<div className='water_video_container'>
{
showVideoList?.map((v, i) => {
const src = `https://open.ys7.com/ezopen/h5/iframe?url=${v.url}&autoplay=1&accessToken=${accessToken}`
return <div className='_item' key={v.url}>
<iframe
id={`myPlayer-${i}`}
src={src}
width='100%' // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
height='100%'
allowFullScreen
>
</iframe>
<div className='video_bottom'>
<span className='video_bottom_text'>{v.name}</span>
</div>
</div>
</div>
})
}
</div>
})
}
</div>
: <NoData height={320} />
}
</Box>
}

22
super-screen/client/src/sections/water-prevention/components/right-top.js
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { Box, AutoRollComponent } from '$components';
import { Box, AutoRollComponent, NoData } from '$components';
import { Tooltip } from 'antd';
import moment from 'moment';
import './style.less';
@ -35,16 +35,18 @@ function CitySafty(props) {
}
return <Box title={"水位趋势预测图"} subtitleSelect={renderDate()} >
<div className='water_traffic_ranking'>
<div className='_rank_title'>
<div className='_rank_item1'>点位名称</div>
<div className='_rank_item2'>时间</div>
<div className='_rank_item3'>水位</div>
<div className='_rank_item4'>未来1小时趋势</div>
</div>
{trendData?.length > 0 ?
<div className='water_traffic_ranking'>
<div className='_rank_title'>
<div className='_rank_item1'>点位名称</div>
<div className='_rank_item2'>时间</div>
<div className='_rank_item3'>水位</div>
<div className='_rank_item4'>未来1小时趋势</div>
</div>
{trendData?.length > 0 && <AutoRollComponent canScroll={true} content={getContent()} divHeight={340} divId={`fire-right-top`} />}
</div> :
<NoData height={320} />}
{trendData?.length > 0 && <AutoRollComponent canScroll={true} content={getContent()} divHeight={340} divId={`fire-right-top`} />}
</div>
</Box>
}

2
super-screen/client/src/sections/water-prevention/components/style.less
View File

@ -505,7 +505,7 @@
width: 157px;
height: 24px;
background-image: linear-gradient(90deg, #19222F 0%, rgba(30, 41, 56, 0) 100%);
padding: 0 30px 0 8px;
padding: 0 2px 0 8px;
justify-content: space-between;
.type-leagle-dot {

161
super-screen/client/src/sections/water-prevention/containers/gis.js
View File

@ -52,9 +52,14 @@ function Map(props) {
map.on('complete', () => {
setTimeout(() => {
setDelay(false)
map && renderMarkers()
map && renderAlarms()
}, 1500);
map && renderMarkers()
map && renderAlarms()
setTimeout(() => {
renderLayer()
createText()
}, 1000);
});
map.on('click', (e) => {
@ -361,6 +366,158 @@ function Map(props) {
</div>
}
const createText = () => {
var text = new AMap.Text({
text: '南昌县',
anchor: 'center', // 设置文本标记锚点
draggable: false,
// cursor: 'pointer',
zooms: [3, 11],
style: {
'padding': '.75rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'rgba(238,77,90,0.001)',
'width': '8rem',
'border-width': 0,
//'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .1)',
'text-align': 'center',
'font-size': '14px',
'color': '#AFEFFF',
'opacity': 1,
// 'font-weight': 'bold'
},
position: [115.934664, 28.538966]
});
text.setMap(map);
}
const renderLayer = () => {
if (!loca) return;
const dataSource = trendData;
if (gridLayer && loca) loca.remove(gridLayer)
let data = []
dataSource.map(x => {
data.push({
"type": "Feature", "properties": { "time": 1534296083, x },
"geometry": { "coordinates": [x.lng, x.lat], "type": "Point", x }
})
})
var geo = new Loca.GeoJSONSource({
data: {
"features": data, "type": "FeatureCollection"
}
});
gridLayer = new Loca.GridLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
acceptLight: true,
// shinniness: 0,
// cullface: 'none',
// depth: true,
// hasSide: true,
});
var colors = ['#FAE200', '#D27E37', '#C53634', '#C12B6E', '#A92E9A', '#67238A', '#211A50', '#18244E'].reverse();
var heights = [100, 200, 400, 600, 800, 1400, 1800, 4000];
gridLayer.setSource(geo);
gridLayer.setStyle({
unit: 'meter',
radius: 600,
gap: 0,
altitude: 100,
// height: function (index, feature) {
// return 6000
// },
// topColor: function (index, feature) {
// console.log(feature)
// return 'red'
// },
// sideColor: function (index, feature) {
// return 'red'
// }
height: function (index, feature) {
const baseHeigh = 1400
return feature.coordinates[0].properties.x.waterLevel > 30 ? baseHeigh * 14 :
feature.coordinates[0].properties.x.waterLevel > 25 ? baseHeigh * 13 :
feature.coordinates[0].properties.x.waterLevel > 20 ? baseHeigh * 12 :
feature.coordinates[0].properties.x.waterLevel > 15 ? baseHeigh * 11 :
feature.coordinates[0].properties.x.waterLevel > 10 ? baseHeigh * 10 :
feature.coordinates[0].properties.x.waterLevel > 0 ? baseHeigh * 9 : 0
},
topColor: function (index, feature) {
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
},
sideColor: function (index, feature) {
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
},
sideTopColor: function (index, feature) {
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
},
sideBottomColor: function (index, feature) {
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,0.5)' : 'rgba(117,154,206,0.5)'
},
});
gridLayer = gridLayer
loca.add(gridLayer);
dataSource.map(s => {
// 创建纯文本标记
var text = new AMap.Text({
text: '纯文本标记',
anchor: 'center', // 设置文本标记锚点
// draggable: true,
cursor: 'pointer',
angle: 0,
// visible: false,
offset: [0, -s.waterLevel],
style: {
'padding': '2px 4px',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': '#143857',
// 'width': '12rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
'text-align': 'center',
'font-size': '14px',
'color': '#DCF2FD',
},
});
text.setMap(map);
text.show();
text.setText(`${s.waterLevel || '--'}m`)
text.setPosition(new AMap.LngLat(s.lng, s.lat));
})
// // 拾取
// map.on('mousemove', (e) => {
// text.setMap(map);
// var feat = gridLayer.queryFeature(e.pixel.toArray());
// if (feat) {
// text.show();
// text.setText(feat.coordinates[0].properties.x.waterLevel + 'm');
// text.setPosition(e.lnglat);
// } else {
// text.hide();
// }
// });
}
const tabs = tab == 'overview' ? [
{ name: '实时监测', tab: 'overview' },
{ name: '应急抢险', tab: 'emergency' }

3
super-screen/client/src/utils/userDisplayHandle.js
View File

@ -1,3 +1,4 @@
//姓名脱敏展示
function getName(name) {
let newStr
if (name.length === 2) {
@ -13,7 +14,7 @@ function getName(name) {
}
return newStr
}
//手机号码脱敏展示
function getPhone(tel) {
if (!tel) return tel;
const phone = tel.replace(tel.substring(3, 7), '****')

Write Preview
Loading…
Cancel
Save