314 lines
12 KiB
JavaScript
314 lines
12 KiB
JavaScript
|
import React, { useState, useEffect, useRef, Component } from "react";
|
|||
|
|
import { connect } from "dva";
|
|||
|
|
import { Icon, message } from 'antd/lib/index';
|
|||
|
|
import {
|
|||
|
|
initFilter,
|
|||
|
|
extendInclude,
|
|||
|
|
extendOrder
|
|||
|
|
} from "../../../utils/common";
|
|||
|
|
import config from "../../../config.js";
|
|||
|
|
class BI060MapeShow extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.state = {
|
|||
|
|
retData: [],//数据源
|
|||
|
|
picIndex: 0,//下一张
|
|||
|
|
picMax: 1,//最大图片数
|
|||
|
|
Title: '',//四色图说明（配置）
|
|||
|
|
RGBCOLOR_TL: '',
|
|||
|
|
OPACITY_TL: '',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
this.loadData();
|
|||
|
|
}
|
|||
|
|
renderSpeedColumn = () => {
|
|||
|
|
return { className: 'redTableCell' }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ShowInfo(msg) {
|
|||
|
|
if (msg && msg.length > 0) {
|
|||
|
|
message.info({
|
|||
|
|
content: (
|
|||
|
|
<div style={{ textAlign: 'left' }} dangerouslySetInnerHTML={{ __html: msg }}>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
loadData = () => {
|
|||
|
|
//信息获取
|
|||
|
|
const json = initFilter(this.props.login.OrgId);
|
|||
|
|
extendOrder(json, "CREATE_TIME", 1);
|
|||
|
|
extendInclude(json, 'Nav_Colors.Nav_ColorPoints');
|
|||
|
|
extendInclude(json, 'Nav_Colors.Nav_Areas.Nav_Area');
|
|||
|
|
this.props.dispatch({
|
|||
|
|
type: "app/getDataByPost",
|
|||
|
|
url: "PC/PCInfo/EntitiesShow",
|
|||
|
|
payload: json,
|
|||
|
|
onlyData: false,
|
|||
|
|
onComplete: (ret) => {
|
|||
|
|
if (ret && ret.IsSuccessful && ret.Data && ret.Data.length > 0) {
|
|||
|
|
var ulPic = document.getElementById('ulPic')
|
|||
|
|
//加载头部信息 并且支持点击
|
|||
|
|
ret.Data.forEach((item, index) => {
|
|||
|
|
var li = document.createElement('li')
|
|||
|
|
li.innerText = item.NAME
|
|||
|
|
li.style.color = "white"
|
|||
|
|
li.style.float = "left"
|
|||
|
|
li.style.fontSize = 20 + 'px'
|
|||
|
|
li.style.paddingLeft = 10 + 'px'
|
|||
|
|
li.style.paddingRight = 10 + 'px'
|
|||
|
|
li.style.render = 2
|
|||
|
|
li.style.marginLeft = 30 + 'px'
|
|||
|
|
li.style.backgroundColor = '#1890ff'
|
|||
|
|
li.style.cursor = "pointer"
|
|||
|
|
li.onclick = () => this.PicShow(index)
|
|||
|
|
ulPic.appendChild(li)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
this.PicShow(0, null, ret.Data)
|
|||
|
|
} else {
|
|||
|
|
message.error("请先配置四色图信息再查看！");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//根据数据显示图片
|
|||
|
|
PicShow = (indexP, opType, DataPic) => {
|
|||
|
|
if (indexP && opType == null && DataPic == null) {
|
|||
|
|
indexP = indexP
|
|||
|
|
} else {
|
|||
|
|
indexP = 0
|
|||
|
|
if (opType == null || opType == undefined) {
|
|||
|
|
} else if (opType == 1) {
|
|||
|
|
indexP = this.state.picIndex + 1
|
|||
|
|
} else if (opType == -1) {
|
|||
|
|
indexP = this.state.picIndex - 1
|
|||
|
|
if (indexP < 0) {
|
|||
|
|
message.error("已经是第一张图");
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
message.error("操作异常");
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (DataPic == null || DataPic == undefined) {
|
|||
|
|
DataPic = this.state.retData
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var picMax = 1
|
|||
|
|
var RGBCOLOR_TL = 'wheat'
|
|||
|
|
var OPACITY_TL = '0.6'
|
|||
|
|
if (DataPic.length > 0) { // 显示图片
|
|||
|
|
picMax = DataPic.length
|
|||
|
|
if (indexP >= picMax) {
|
|||
|
|
message.error("已经是最后一张图片");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var ShowInfo = DataPic[indexP]
|
|||
|
|
if (ShowInfo.FILE_PATH) {
|
|||
|
|
const divShow = document.getElementById('divPic');
|
|||
|
|
divShow.style.backgroundImage = 'url(' + config.picServerHost + ShowInfo.FILE_PATH + ')'
|
|||
|
|
divShow.style.width = ShowInfo.WIDTH + 'px'
|
|||
|
|
divShow.style.height = ShowInfo.HEIGHT + 'px'
|
|||
|
|
}
|
|||
|
|
const ulDescribe = document.getElementById('ulDescribe');
|
|||
|
|
// ulDescribe.style.width = ShowInfo.WIDTH + 'px'
|
|||
|
|
|
|||
|
|
//标记删除
|
|||
|
|
var arrNodes = ulDescribe.childNodes;
|
|||
|
|
for (var i = 0; i < arrNodes.length; i++) {
|
|||
|
|
ulDescribe.removeChild(arrNodes[i]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (ShowInfo.RGBCOLOR_TL != null && ShowInfo.RGBCOLOR_TL != '')
|
|||
|
|
RGBCOLOR_TL = ShowInfo.RGBCOLOR_TL
|
|||
|
|
if (ShowInfo.OPACITY_TL != null && ShowInfo.OPACITY_TL != '')
|
|||
|
|
OPACITY_TL = ShowInfo.OPACITY_TL
|
|||
|
|
var index = 0
|
|||
|
|
|
|||
|
|
const svg = document.getElementById('picSvg');
|
|||
|
|
if (svg.childNodes && svg.childNodes.length > 0) {
|
|||
|
|
for (var i = svg.childNodes.length - 1; i > -1; i--) {
|
|||
|
|
svg.removeChild(svg.childNodes[i])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
svg.style.width = ShowInfo.WIDTH + 'px'
|
|||
|
|
svg.style.height = ShowInfo.HEIGHT + 'px'
|
|||
|
|
|
|||
|
|
if (ShowInfo.Nav_Colors && ShowInfo.Nav_Colors.length > 0) {
|
|||
|
|
ShowInfo.Nav_Colors.forEach(e => {
|
|||
|
|
index++
|
|||
|
|
if (e.RGBCOLOR == null || e.RGBCOLOR != '') {
|
|||
|
|
var points = e.Nav_ColorPoints
|
|||
|
|
if (points == null || points.length < 1) {
|
|||
|
|
message.error("配置区域【" + e.NAME + "】未描点！");
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 获取SVG中的polygon元素
|
|||
|
|
const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');// const polygon = document.getElementById('myPolygon' + index);//找到画布
|
|||
|
|
//点位拼接
|
|||
|
|
let pointsString = points.map(coord => `${coord.X},${coord.Y}`).join(' ');// 注意：points属性的格式是"x1,y1 x2,y2 ..."
|
|||
|
|
polygon.setAttribute('points', pointsString); //描点
|
|||
|
|
polygon.setAttribute('fill', e.RGBCOLOR);//填充颜色
|
|||
|
|
// polygon.setAttribute('stroke', e.RGBCOLOR);//画笔颜色
|
|||
|
|
polygon.setAttribute('stroke-width', 0);//多个区域合成一起画 中间的颜色去除
|
|||
|
|
polygon.setAttribute('stroke', 'none');//画笔颜色
|
|||
|
|
polygon.style.opacity = e.OPACITY//透明度
|
|||
|
|
//点击提示
|
|||
|
|
polygon.onclick = () => {
|
|||
|
|
this.ShowInfo(e.DESCRIBE)
|
|||
|
|
}
|
|||
|
|
svg.appendChild(polygon);
|
|||
|
|
|
|||
|
|
//点位 num 为 1 设置标记
|
|||
|
|
|
|||
|
|
|
|||
|
|
//title配置
|
|||
|
|
if (e.DESCRIBE && e.DESCRIBE.length > 0) {
|
|||
|
|
const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
|
|||
|
|
// var innerHTML= e.DESCRIBE.replace('<br/>','\n')
|
|||
|
|
title.textContent = e.DESCRIBE_TITLE
|
|||
|
|
polygon.appendChild(title);
|
|||
|
|
}
|
|||
|
|
//直接显示标记
|
|||
|
|
// var XAll = 0
|
|||
|
|
// var YAll = 0
|
|||
|
|
// points.forEach(e => {
|
|||
|
|
// XAll += e.X
|
|||
|
|
// YAll += e.Y
|
|||
|
|
// });
|
|||
|
|
// const mark = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|||
|
|
// mark.setAttribute("x", XAll / points.length);
|
|||
|
|
// mark.setAttribute("y", YAll / points.length);
|
|||
|
|
// mark.setAttribute("text-anchor", "middle");
|
|||
|
|
// mark.setAttribute("dominant-baseline", "middle");
|
|||
|
|
// mark.style.fontSize = '16px'
|
|||
|
|
// mark.style.opacity = e.OPACITY
|
|||
|
|
// mark.textContent = e.DESCRIBE_TITLE;
|
|||
|
|
// svg.appendChild(mark);
|
|||
|
|
|
|||
|
|
//画图区域 标记 区域配置编号
|
|||
|
|
const mark = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|||
|
|
mark.setAttribute("x", points[0].X);
|
|||
|
|
mark.setAttribute("y", points[0].Y);
|
|||
|
|
mark.setAttribute("text-anchor", "middle");
|
|||
|
|
mark.setAttribute("dominant-baseline", "middle");
|
|||
|
|
mark.style.fontSize = '16px'
|
|||
|
|
mark.style.fontWeight = 'bold'
|
|||
|
|
// mark.style.opacity = e.OPACITY
|
|||
|
|
mark.textContent = e.ZNDEX // + "：" + e.NAME;
|
|||
|
|
svg.appendChild(mark);
|
|||
|
|
|
|||
|
|
//添加 区域的说明
|
|||
|
|
const lidescribe = document.createElement('li')
|
|||
|
|
lidescribe.style.float = "left"
|
|||
|
|
lidescribe.style.marginLeft = '20px'
|
|||
|
|
lidescribe.textContent = e.ZNDEX + "：" + e.NAME;
|
|||
|
|
ulDescribe.appendChild(lidescribe)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// picIndex: 0,//下一张
|
|||
|
|
// picMax:1,//最大图片数
|
|||
|
|
this.setState({
|
|||
|
|
retData: DataPic,
|
|||
|
|
picIndex: indexP,
|
|||
|
|
picMax: picMax,
|
|||
|
|
Title: ShowInfo.NAME,
|
|||
|
|
RGBCOLOR_TL: RGBCOLOR_TL,
|
|||
|
|
OPACITY_TL: OPACITY_TL,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
render() {
|
|||
|
|
const { Title, picIndex, picMax, RGBCOLOR_TL, OPACITY_TL } = this.state;
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div style={{ textAlign: 'center', width: '100%', minHeight: '30px' }}>
|
|||
|
|
<ul id="ulPic">
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h1 style={{ textAlign: 'center' }}>
|
|||
|
|
{/* {
|
|||
|
|
picIndex > 0 && <Icon type="left" style={{ width: '50px', height: '50px' }} onClick={() => this.PicShow(0, -1)}></Icon>
|
|||
|
|
}
|
|||
|
|
{Title}
|
|||
|
|
{
|
|||
|
|
picMax > (picIndex + 1) && <Icon type="right" style={{ width: '50px', height: '50px' }} onClick={() => this.PicShow(0, 1)}></Icon>
|
|||
|
|
} */}
|
|||
|
|
</h1>
|
|||
|
|
<div id="divPic"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
position: "relative",
|
|||
|
|
// top: "0",
|
|||
|
|
// bottom: "0",
|
|||
|
|
left: "0",
|
|||
|
|
right: "0",
|
|||
|
|
margin: "auto",
|
|||
|
|
borderStyle: "solid",
|
|||
|
|
borderColor: "#ccc",
|
|||
|
|
borderColor: "#ccc",
|
|||
|
|
borderWidth: "1px",
|
|||
|
|
backgroundSize: '100% 100%',
|
|||
|
|
backgroundRepeat: 'no-repeat',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
justifyContent: 'flex-end',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* <svg width="200" height="200" viewBox="0 0 200 200">
|
|||
|
|
<polygon
|
|||
|
|
points="100,10 40,198 190,78 10,78 160,198"
|
|||
|
|
fill="lightblue"
|
|||
|
|
stroke="blue"
|
|||
|
|
strokeWidth="2"
|
|||
|
|
>
|
|||
|
|
<title>这是一个SVG原生提示</title>
|
|||
|
|
</polygon>
|
|||
|
|
</svg> */}
|
|||
|
|
|
|||
|
|
{/* <svg width="200" height="200" viewBox="0 0 200 200">
|
|||
|
|
<polygon
|
|||
|
|
points="100,10 40,198 190,78 10,78 160,198"
|
|||
|
|
fill="lightblue"
|
|||
|
|
stroke="blue"
|
|||
|
|
strokeWidth="2"
|
|||
|
|
title="这是一个五边形" // 鼠标悬停时会显示默认浏览器提示
|
|||
|
|
/>
|
|||
|
|
</svg> */}
|
|||
|
|
|
|||
|
|
<svg width="1800" height="1500" id="picSvg" style={{ position: 'absolute', zIndex: 999 }} >
|
|||
|
|
{/* <text x="100" y="75" text-anchor="middle" fill="black" font-size="16">显示信息</text> */}
|
|||
|
|
{/* <polygon id="myPolygonr" fill="red" stroke="white" stroke-width="2" onClick={() => this.ShowInfo('点击提示信息3')} style={{ opacity: '0.3' }} /> */}
|
|||
|
|
{/* 显示自定义polygon */}{/* <polygon id="myPolygon" stroke-width="1" onClick={() => this.ShowInfo(warm)} /> */}
|
|||
|
|
</svg>
|
|||
|
|
<div id="divtl" style={{ width: '230px', position: 'absolute', backgroundColor: '' + RGBCOLOR_TL + '', opacity: '' + OPACITY_TL + '', border: '1px solid black' }}>
|
|||
|
|
<h2 style={{ marginLeft: '10px' }}>图例</h2>
|
|||
|
|
<h3> <a style={{ backgroundColor: 'red', color: 'red' }}>重大风险</a> 重大风险区城</h3>
|
|||
|
|
<h3 > <a style={{ backgroundColor: 'orange', color: 'orange' }}>较大风险</a> 较大风险区城</h3>
|
|||
|
|
<h3 > <a style={{ backgroundColor: 'yellow', color: 'yellow' }}>一般风险</a> 一般风险区城</h3>
|
|||
|
|
<h3 > <a style={{ backgroundColor: 'blue', color: 'blue' }}> 低风险</a> 低风险区城</h3>
|
|||
|
|
<div style={{ height: '1px' }}></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="divDescribe">
|
|||
|
|
<h3>注解:</h3>
|
|||
|
|
<ul id="ulDescribe" style={{ textAlign: 'center' }}></ul>
|
|||
|
|
</div>
|
|||
|
|
</div >
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
export default connect(({ login, app }) => ({ login, app }))(BI060MapeShow);
|