205 lines
8.2 KiB
JavaScript
205 lines
8.2 KiB
JavaScript
import { IconButton } from '@material-ui/core';
|
|
import { FirstPage, Language, LastPage, SaveAlt } from '@material-ui/icons';
|
|
import React, { useRef } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { Link } from 'react-router-dom';
|
|
import { hidePanels } from '../../../../models/map/selectors';
|
|
import { mgrHomePage } from '../../../../models/_/menu';
|
|
import { genLegend } from '../Legend/_';
|
|
import './Title.less';
|
|
import config from '../../../../config';
|
|
|
|
function downImg(url) {
|
|
let a = document.createElement("a")
|
|
let clickEvent = document.createEvent("MouseEvents");
|
|
a.setAttribute("href", url)
|
|
a.setAttribute("download", '图片快照')
|
|
a.setAttribute("target", '_blank')
|
|
clickEvent.initEvent('click', true, true)
|
|
a.dispatchEvent(clickEvent);
|
|
}
|
|
|
|
export default function Title() {
|
|
const dispatch = useDispatch();
|
|
const inputRef = useRef();
|
|
|
|
const hp = useSelector(hidePanels);
|
|
const layerVisible = useSelector(s => s.map.layerVisible);
|
|
|
|
const doSearch = () => dispatch.map.openSearch(inputRef.current.value);
|
|
const view = useSelector(s => s.map.view);
|
|
|
|
const searchPressed = (e) => {
|
|
if (e.keyCode === 13) {
|
|
doSearch();
|
|
}
|
|
}
|
|
|
|
const showLayersDlg = () => {
|
|
dispatch.runtime.setInfoDlg({ layerId: 'Layers' });
|
|
}
|
|
|
|
const toggleHidePanels = () => {
|
|
dispatch.map.setHidePanels(!hp);
|
|
}
|
|
|
|
const ExportImage = async () => {
|
|
const map = window.__mapref;
|
|
if (!map) {
|
|
return;
|
|
}
|
|
|
|
const sc = map.getCanvas();
|
|
const { width, height } = sc;
|
|
console.log(width, height);
|
|
|
|
const c = document.createElement('canvas');
|
|
c.width = width;
|
|
c.height = height;
|
|
const ctx = c.getContext('2d');
|
|
|
|
ctx.fillStyle = '#000';
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
|
|
ctx.drawImage(sc, 0, 0);
|
|
|
|
const legend = await genLegend(layerVisible);
|
|
if (legend) {
|
|
ctx.drawImage(legend.canvas, 0, 0, legend.width, legend.height, 32, 32, legend.width, legend.height);
|
|
}
|
|
|
|
const img = c.toDataURL('image/png');
|
|
downImg(img);
|
|
}
|
|
|
|
const fullMap = () => {
|
|
dispatch.runtime.setHome();
|
|
}
|
|
|
|
return (
|
|
<div className="dp-title">
|
|
<div className="action">
|
|
<div className="menu-bar">
|
|
<span className="cursor-pointer" onClick={showLayersDlg}>图层</span>
|
|
</div>
|
|
<div className="extra">
|
|
<IconButton size="small" onClick={toggleHidePanels}>
|
|
{
|
|
hp ? <LastPage className="button-color" /> : <FirstPage className="button-color" />
|
|
}
|
|
</IconButton>
|
|
<IconButton size="small" onClick={ExportImage}>
|
|
<SaveAlt className="button-color" />
|
|
</IconButton>
|
|
<IconButton size="small" onClick={fullMap}>
|
|
<Language className="button-color" />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
<div className="title">{`${config.title}`}</div>
|
|
<div className="action">
|
|
<div className="menu-bar">
|
|
<Link style={{ color: '#00deff' }} to={mgrHomePage()}>管理平台</Link>
|
|
</div>
|
|
<div className="extra">
|
|
{
|
|
!hp && (
|
|
<div className="title-search-input">
|
|
<input placeholder="搜索系统..." ref={inputRef} onKeyDown={searchPressed}></input>
|
|
<button type="submit">
|
|
<i className="ionicons search" onClick={doSearch}></i>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
{
|
|
view===301?
|
|
<div style={{position:'absolute',left:'50%',top:'6rem',transform:'translate(-50%, 0px)',display:'flex'}}>
|
|
<div style={{display:'flex',alignItems:'center',justifyContent:'center',marginLeft:'20px'}}>
|
|
<img src='/assets/title1.png' style={{width:'50px', height:'40px'}}/>
|
|
<div style={{marginLeft:'8px',}}>
|
|
<div style={{color:'rgba(255, 255, 255, 0.7)',fontSize:'10px',fontWeight:'400'}}><span style={{color:'#37D0E7',fontSize:'16px',fontWeight:'blod'}}>15 </span> 个</div>
|
|
<div style={{color:'#ffffff',fontSize:'12px',fontWeight:'400'}}>乡镇数量</div>
|
|
</div>
|
|
</div>
|
|
<div style={{display:'flex',alignItems:'center',justifyContent:'center',marginLeft:'20px'}}>
|
|
<img src='/assets/title2.png' style={{width:'50px', height:'40px'}}/>
|
|
<div style={{marginLeft:'8px',}}>
|
|
<div style={{color:'rgba(255, 255, 255, 0.7)',fontSize:'10px',fontWeight:'400'}}><span style={{color:'#37D0E7',fontSize:'16px',fontWeight:'blod'}}>16 </span> 个</div>
|
|
<div style={{color:'#ffffff',fontSize:'12px',fontWeight:'400'}}>水源地数量</div>
|
|
</div>
|
|
</div>
|
|
<div style={{display:'flex',alignItems:'center',justifyContent:'center',marginLeft:'20px'}}>
|
|
<img src='/assets/title3.png' style={{width:'50px', height:'40px'}}/>
|
|
<div style={{marginLeft:'8px',}}>
|
|
<div style={{color:'rgba(255, 255, 255, 0.7)',fontSize:'10px',fontWeight:'400'}}><span style={{color:'#37D0E7',fontSize:'16px',fontWeight:'blod'}}>221 </span> 座</div>
|
|
<div style={{color:'#ffffff',fontSize:'12px',fontWeight:'400'}}>水厂数量</div>
|
|
</div>
|
|
</div>
|
|
<div style={{display:'flex',alignItems:'center',justifyContent:'center',marginLeft:'20px'}}>
|
|
<img src='/assets/title4.png' style={{width:'50px', height:'40px'}}/>
|
|
<div style={{marginLeft:'8px',}}>
|
|
<div style={{color:'rgba(255, 255, 255, 0.7)',fontSize:'10px',fontWeight:'400'}}><span style={{color:'#37D0E7',fontSize:'16px',fontWeight:'blod'}}>33 </span> 万</div>
|
|
<div style={{color:'#ffffff',fontSize:'12px',fontWeight:'400'}}>服务人口</div>
|
|
</div>
|
|
</div>
|
|
<div style={{display:'flex',alignItems:'center',justifyContent:'center',marginLeft:'20px'}}>
|
|
<img src='/assets/title5.png' style={{width:'50px', height:'40px'}}/>
|
|
<div style={{marginLeft:'8px',}}>
|
|
<div style={{color:'rgba(255, 255, 255, 0.7)',fontSize:'10px',fontWeight:'400'}}><span style={{color:'#37D0E7',fontSize:'16px',fontWeight:'blod'}}>1026 </span> 万m³</div>
|
|
<div style={{color:'#ffffff',fontSize:'12px',fontWeight:'400'}}>年供水规模</div>
|
|
</div>
|
|
</div>
|
|
</div>:null
|
|
}
|
|
{
|
|
(view===203||view===205||view===206)?
|
|
<div style={{position:'absolute',left:'27.8rem',top:'7.6rem',transform:'translate(0px, 0px)',display:'flex',flexDirection:'column'}}>
|
|
{
|
|
[
|
|
{name:'返回',key:200,icon:'返回.png',icon2:'返回.png'},
|
|
{name:'水库监测',key:203,icon:'水库.png',icon2:'水库2.png'},
|
|
{name:'防汛调度',key:205,icon:'防汛.png',icon2:'防汛2.png'},
|
|
{name:'巡查维养',key:206,icon:'巡查.png',icon2:'巡查2.png'},
|
|
].map((item)=>
|
|
<>
|
|
<div style={{color:item.key===view?'#65dbfb':'#ffffff',cursor:'pointer',marginBottom:"-2px",display:'flex',flexDirection:'column',alignItems:'center',fontSize:'0.8rem'}} onClick={()=>{
|
|
dispatch.map.setView(item.key)
|
|
const map = window.__mapref;
|
|
if (map) {
|
|
const layer = map.getLayer('临时线')
|
|
if (layer) {
|
|
map.removeLayer('临时线');
|
|
map.removeSource('临时线');
|
|
}
|
|
}
|
|
if (item.key === 200) {
|
|
const {lgtd,lttd} = JSON.parse(sessionStorage.getItem('lastCenter'))
|
|
if(lgtd&<td){
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd+0.005],
|
|
zoom: 15,
|
|
pitch: 50,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}
|
|
}}>
|
|
{
|
|
item.key===200?
|
|
<img style={{width:'34px'}} src={`${process.env.PUBLIC_URL}/assets/bar/${item.key===view?item.icon:item.icon2}`} alt=""/>
|
|
:<img style={{width:'40px',marginTop:'-30px'}} src={`${process.env.PUBLIC_URL}/assets/bar/${item.key===view?item.icon:item.icon2}`} alt=""/>
|
|
}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
</div>:null
|
|
}
|
|
</div>
|
|
)
|
|
}
|