76 changed files with 8311 additions and 4962 deletions
@ -0,0 +1,3 @@ |
|||||
|
export default { |
||||
|
onReachBottomDistance: 50 |
||||
|
} |
||||
|
After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 497 B |
|
Before Width: | Height: | Size: 1015 B After Width: | Height: | Size: 429 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 632 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 605 B |
|
After Width: | Height: | Size: 577 B |
|
After Width: | Height: | Size: 742 B |
|
After Width: | Height: | Size: 750 B |
@ -0,0 +1,40 @@ |
|||||
|
import React, { useState, useEffect, useRef } from "react"; |
||||
|
import { connect } from "react-redux"; |
||||
|
import moment from 'moment' |
||||
|
import { Button } from "antd"; |
||||
|
|
||||
|
const SimpleFileDownButton = (props) => { |
||||
|
const { src, user } = props |
||||
|
const [downloadUrl, setDownloadUrl] = useState('') |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<Button |
||||
|
style={{ |
||||
|
width: 65, |
||||
|
height: 32, |
||||
|
background: "#FFFFFF", |
||||
|
borderRadius: 3, |
||||
|
border: "1px solid #1859C1", |
||||
|
}} |
||||
|
onClick={() => { |
||||
|
setDownloadUrl(`${src}?token=${user.token}×tamp=${moment().valueOf()}`) |
||||
|
}} |
||||
|
> |
||||
|
导出 |
||||
|
</Button> |
||||
|
{ |
||||
|
downloadUrl ? <iframe src={`/_api/${downloadUrl}`} style={{ display: 'none' }} /> : '' |
||||
|
} |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth } = state; |
||||
|
return { |
||||
|
user: auth.user, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(SimpleFileDownButton); |
||||
@ -0,0 +1,106 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import { Form, Spin, Table } from 'antd'; |
||||
|
import { ModalForm, ProForm, ProFormText,ProFormSelect } from '@ant-design/pro-form'; |
||||
|
import { putOperaTional,putHighways } from "../../actions/infor" |
||||
|
|
||||
|
const HightModal = (props) => { |
||||
|
const { visible, onVisibleChange, typecard, rewkeys, recortd, dispatch, setRecortd } = props |
||||
|
const [success,setSuccess]=useState() |
||||
|
|
||||
|
useEffect(() => { |
||||
|
return () => { |
||||
|
setRecortd() |
||||
|
} |
||||
|
}, [setRecortd]) |
||||
|
// console.log(recortd)
|
||||
|
return ( |
||||
|
<Spin spinning={false}> |
||||
|
{/* { |
||||
|
newlysay ? */} |
||||
|
<ModalForm |
||||
|
width={'90rem'} |
||||
|
visible={visible} |
||||
|
onVisibleChange={onVisibleChange} |
||||
|
onFinish={(values) => { |
||||
|
if (rewkeys === 'passenger') { |
||||
|
|
||||
|
console.log(values) |
||||
|
const query = { ...values, id:recortd?.id } |
||||
|
dispatch(putOperaTional(query)).then((res) => { |
||||
|
setSuccess(res.success) |
||||
|
}) |
||||
|
return true |
||||
|
|
||||
|
} |
||||
|
if (rewkeys === 'highways') { |
||||
|
|
||||
|
console.log(values) |
||||
|
const query = { ...values, id:recortd?.id } |
||||
|
dispatch(putHighways(query)).then((res) => { |
||||
|
setSuccess(res.success) |
||||
|
}) |
||||
|
return true |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}} |
||||
|
initialValues={recortd} |
||||
|
> |
||||
|
{typecard == '111' ? |
||||
|
<ProForm.Group |
||||
|
> |
||||
|
<ProFormText |
||||
|
name='name' |
||||
|
width="md" |
||||
|
label='类型' |
||||
|
tooltip="最长为 24 位" |
||||
|
placeholder="请输入名称" |
||||
|
// value={recortd?.[0]?.value}
|
||||
|
disabled |
||||
|
rules={[{ required: true, message: "必填" }]} |
||||
|
/> |
||||
|
<ProFormText |
||||
|
name='count' |
||||
|
width="md" |
||||
|
label='数量' |
||||
|
tooltip="最长为 24 位" |
||||
|
placeholder="请输入名称" |
||||
|
/> |
||||
|
|
||||
|
</ProForm.Group> |
||||
|
: <ProForm.Group> |
||||
|
<ProFormText |
||||
|
name={newlys?.[0]?.type} |
||||
|
width="md" |
||||
|
label={newlys?.[0]?.name} |
||||
|
tooltip="最长为 24 位" |
||||
|
placeholder="请输入名称" |
||||
|
/> |
||||
|
</ProForm.Group>} |
||||
|
|
||||
|
</ModalForm> |
||||
|
{/* : '' |
||||
|
} */} |
||||
|
|
||||
|
</Spin> |
||||
|
) |
||||
|
} |
||||
|
function mapStateToProps(state) { |
||||
|
const { depMessage } = state; |
||||
|
const pakData = (dep) => { |
||||
|
return dep.map((d) => { |
||||
|
return { |
||||
|
title: d.name, |
||||
|
value: d.id, |
||||
|
children: pakData(d.subordinate) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
let depData = pakData(depMessage.data || []) |
||||
|
return { |
||||
|
loading: depMessage.isRequesting, |
||||
|
depData, |
||||
|
}; |
||||
|
} |
||||
|
export default connect(mapStateToProps)(HightModal); |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,189 @@ |
|||||
|
import React, { Component } from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { geoJson } from './mock_data'; |
||||
|
|
||||
|
export default class Bounds extends Component { |
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.map = props.map; |
||||
|
this.pl = {}; |
||||
|
this.textMarker = {}; |
||||
|
} |
||||
|
static propTypes = { |
||||
|
prop: PropTypes |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
if (!window.BoundPl) { |
||||
|
this.drawBounds(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
if (window.local_) |
||||
|
window.local_.remove(this.pl); |
||||
|
this.textMarker = null; |
||||
|
window.BoundPl = null; |
||||
|
} |
||||
|
|
||||
|
drawBounds = () => { |
||||
|
var map = this.map; |
||||
|
var loca = window.local_; |
||||
|
loca.ambLight = { |
||||
|
intensity: 0.3, |
||||
|
color: '#fff', |
||||
|
}; |
||||
|
loca.dirLight = { |
||||
|
intensity: 0.6, |
||||
|
color: '#fff', |
||||
|
target: [0, 0, 0], |
||||
|
position: [0, -1, 1], |
||||
|
}; |
||||
|
loca.pointLight = { |
||||
|
color: 'rgb(100,100,100)', |
||||
|
position: [120.24289, 30.341335, 20000], |
||||
|
intensity: 3, |
||||
|
// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
|
||||
|
distance: 50000, |
||||
|
}; |
||||
|
var geo = new Loca.GeoJSONSource({ |
||||
|
data: geoJson |
||||
|
}); |
||||
|
|
||||
|
var colors = ['#04398c', '#04398c', '#0542a5'].reverse(); |
||||
|
var height = [500]; |
||||
|
var pl = new Loca.PolygonLayer({ |
||||
|
// loca,
|
||||
|
zIndex: 1, |
||||
|
opacity: 0.6, |
||||
|
// cullface: 'none',
|
||||
|
shininess: 10, |
||||
|
hasSide: true, |
||||
|
}); |
||||
|
|
||||
|
pl.setSource(geo); |
||||
|
pl.setStyle({ |
||||
|
topColor: function (index, feature) { |
||||
|
var i = index % 3; |
||||
|
return colors[i]; |
||||
|
}, |
||||
|
sideColor: function (index, feature) { |
||||
|
return '#023890'; |
||||
|
}, |
||||
|
borderColor: function () { |
||||
|
return '#24dcf7' |
||||
|
}, |
||||
|
height: function (index, feature) { |
||||
|
return index == 0 ? height[0] : height[0] + index * 50; |
||||
|
}, |
||||
|
altitude: 0, |
||||
|
}); |
||||
|
loca.add(pl); |
||||
|
|
||||
|
// 创建纯文本标记
|
||||
|
var text = new AMap.Text({ |
||||
|
text: '纯文本标记', |
||||
|
anchor: 'center', // 设置文本标记锚点
|
||||
|
draggable: true, |
||||
|
cursor: 'pointer', |
||||
|
angle: 0, |
||||
|
visible: false, |
||||
|
offset: [60, 60], |
||||
|
extData: 'bounds_text', |
||||
|
style: { |
||||
|
'padding': '5px 10px', |
||||
|
'margin-bottom': '1rem', |
||||
|
'border-radius': '.25rem', |
||||
|
'background-color': 'rgba(0,0,0,0.5)', |
||||
|
// 'width': '12rem',
|
||||
|
'border-width': 0, |
||||
|
'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)', |
||||
|
'text-align': 'center', |
||||
|
'font-size': '16px', |
||||
|
'color': '#fff', |
||||
|
}, |
||||
|
}); |
||||
|
// text.setMap(map);
|
||||
|
if (!this.textMarker) |
||||
|
map.add(text); |
||||
|
this.textMarker = text; |
||||
|
console.log(text) |
||||
|
// 拾取
|
||||
|
map.on('mousemove', (e) => { |
||||
|
var feat = pl.queryFeature(e.pixel.toArray()); |
||||
|
// if (!text) {
|
||||
|
map.add(text); |
||||
|
// text = this.textMarker;
|
||||
|
// }
|
||||
|
|
||||
|
if (feat) { |
||||
|
text.show(); |
||||
|
text.setText(feat.properties.NAME); |
||||
|
text.setPosition(e.lnglat); |
||||
|
|
||||
|
pl.setStyle({ |
||||
|
topColor: (index, feature) => { |
||||
|
if (feature === feat) { |
||||
|
return [19, 43, 77, 1]; |
||||
|
} |
||||
|
// var v = feature.properties.health * 100;
|
||||
|
var i = index % 3; |
||||
|
return colors[i]; |
||||
|
}, |
||||
|
sideColor: (index, feature) => { |
||||
|
if (feature === feat) { |
||||
|
return '#023890'; |
||||
|
} |
||||
|
return '#023890'; |
||||
|
}, |
||||
|
borderColor: function () { |
||||
|
return '#24dcf7' |
||||
|
}, |
||||
|
height: function (index, feature) { |
||||
|
return index == 0 ? height[0] : height[0] + index * 50; |
||||
|
|
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
pl.setStyle({ |
||||
|
topColor: function (index, feature) { |
||||
|
var i = index % 3; |
||||
|
return colors[i]; |
||||
|
}, |
||||
|
sideColor: function (index, feature) { |
||||
|
return '#023890'; |
||||
|
}, |
||||
|
borderColor: function () { |
||||
|
return '#24dcf7' |
||||
|
}, |
||||
|
height: function (index, feature) { |
||||
|
return index == 0 ? height[0] : height[0] + index * 50; |
||||
|
}, |
||||
|
altitude: 0, |
||||
|
}); |
||||
|
|
||||
|
text.hide(); |
||||
|
map.remove(text); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
map.setZoom(11) |
||||
|
map.setCenter([115.912663,28.543149]); |
||||
|
map.setRotation(-68.7); |
||||
|
map.setPitch(42); |
||||
|
|
||||
|
this.pl = pl; |
||||
|
window.BoundPl = pl; |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,53 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import Bounds from './bounds'; |
||||
|
|
||||
|
const MAPID = 'screenGis' |
||||
|
const Gis = (props) => { |
||||
|
|
||||
|
const [mapObj, setMapObj] = useState(); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (AMap) loadMap(); |
||||
|
return () => { |
||||
|
if (window.local_) { |
||||
|
window.local_ = null |
||||
|
} |
||||
|
if (mapObj) |
||||
|
mapObj.clearMap(); |
||||
|
} |
||||
|
}, [true]) |
||||
|
|
||||
|
const loadMap = () => { |
||||
|
const map = new AMap.Map(MAPID, { |
||||
|
resizeEnable: true, |
||||
|
center: [115.912663,28.543149],//地图中心点，初始定位加载显示楼块
|
||||
|
zoom: 15,//地图显示的缩放级别
|
||||
|
zooms: [10, 12], |
||||
|
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
|
||||
|
viewMode: '3D', // 地图模式
|
||||
|
mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', |
||||
|
}); |
||||
|
|
||||
|
let windowOnload = false; |
||||
|
map.on('complete', function () { |
||||
|
if (!window.local_) { |
||||
|
window.local_ = new Loca.Container({ map }); |
||||
|
setMapObj(map); |
||||
|
} |
||||
|
}); |
||||
|
window.onload = function () { |
||||
|
windowOnload = true; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div style={{ position: 'absolute', width: '100%', backgroundColor: '#101824', height: '100%', minHeight: 700 }}> |
||||
|
<div id={MAPID} style={{ width: '100%', height: '100%', background: "#101824", minHeight: 700 }} /> |
||||
|
{mapObj ? <Bounds map={mapObj} /> : ''} |
||||
|
</div > |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export default Gis |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue