From 24924ecdccc80e8a23e8b758122f8f87375928ce Mon Sep 17 00:00:00 2001 From: "peng.peng" Date: Thu, 17 Aug 2023 16:55:10 +0800 Subject: [PATCH] =?UTF-8?q?=EF=BC=88*=EF=BC=89=E6=B0=B4=E5=88=A9=E5=BA=94?= =?UTF-8?q?=E6=80=A5=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5=E5=92=8C=E5=BB=BA?= =?UTF-8?q?=E8=AE=BE=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts/ring.js | 3 +- .../components/emergency-right-top.js | 10 +- .../components/right-bottom.js | 44 ++--- .../water-prevention/components/right-top.js | 22 +-- .../water-prevention/components/style.less | 2 +- .../water-prevention/containers/gis.js | 161 +++++++++++++++++- .../client/src/utils/userDisplayHandle.js | 3 +- 7 files changed, 206 insertions(+), 39 deletions(-) diff --git a/super-screen/client/src/sections/water-prevention/components/charts/ring.js b/super-screen/client/src/sections/water-prevention/components/charts/ring.js index 3186f45..759c0c5 100644 --- a/super-screen/client/src/sections/water-prevention/components/charts/ring.js +++ b/super-screen/client/src/sections/water-prevention/components/charts/ring.js @@ -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) => (
{s.name}
-
{s.value}
+
{s.value}个 14%
)); diff --git a/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js b/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js index df80125..d5e14d3 100644 --- a/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js +++ b/super-screen/client/src/sections/water-prevention/components/emergency-right-top.js @@ -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 -
+ const getContent = () => { + return
{ emergencyList[emengencyTab]?.map((s, index) => { @@ -48,6 +48,10 @@ function CitySafty(props) { }
+ } + + return + 3} content={getContent()} divHeight={860} divId={`fire-left-bottom${emengencyTab}`} /> } diff --git a/super-screen/client/src/sections/water-prevention/components/right-bottom.js b/super-screen/client/src/sections/water-prevention/components/right-bottom.js index 65919ab..0b75344 100644 --- a/super-screen/client/src/sections/water-prevention/components/right-bottom.js +++ b/super-screen/client/src/sections/water-prevention/components/right-bottom.js @@ -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) { ); return -
- { - showVideoList?.map((v, i) => { - const src = `https://open.ys7.com/ezopen/h5/iframe?url=${v.url}&autoplay=1&accessToken=${accessToken}` - return
- -
- {v.name} + {showVideoList?.length > 0 ? +
+ { + showVideoList?.map((v, i) => { + const src = `https://open.ys7.com/ezopen/h5/iframe?url=${v.url}&autoplay=1&accessToken=${accessToken}` + return
+ +
+ {v.name} +
-
- }) - } - -
+ }) + } +
+ : + } } diff --git a/super-screen/client/src/sections/water-prevention/components/right-top.js b/super-screen/client/src/sections/water-prevention/components/right-top.js index e0da99e..a9adfa2 100644 --- a/super-screen/client/src/sections/water-prevention/components/right-top.js +++ b/super-screen/client/src/sections/water-prevention/components/right-top.js @@ -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 -
-
-
点位名称
-
时间
-
水位
-
未来1小时趋势
-
+ {trendData?.length > 0 ? +
+
+
点位名称
+
时间
+
水位
+
未来1小时趋势
+
+ {trendData?.length > 0 && } +
: + } - {trendData?.length > 0 && } -
} diff --git a/super-screen/client/src/sections/water-prevention/components/style.less b/super-screen/client/src/sections/water-prevention/components/style.less index 3a3c4d9..49779a9 100644 --- a/super-screen/client/src/sections/water-prevention/components/style.less +++ b/super-screen/client/src/sections/water-prevention/components/style.less @@ -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 { diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.js b/super-screen/client/src/sections/water-prevention/containers/gis.js index 70b27de..5d9c938 100644 --- a/super-screen/client/src/sections/water-prevention/containers/gis.js +++ b/super-screen/client/src/sections/water-prevention/containers/gis.js @@ -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) {
} + 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' } diff --git a/super-screen/client/src/utils/userDisplayHandle.js b/super-screen/client/src/utils/userDisplayHandle.js index 1ba43e9..da4a4b7 100644 --- a/super-screen/client/src/utils/userDisplayHandle.js +++ b/super-screen/client/src/utils/userDisplayHandle.js @@ -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), '****')