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);
|