mcfxkh-Web/src/views/Home/components/Title/index.js

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&&lttd){
                  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>
  )
}