import React, { useState, useContext, forwardRef } from 'react'; import classNames from 'classnames'; import { ConfigProvider } from 'antd'; import { Header } from './header'; import { LeftList } from './leftList'; import _ from 'lodash'; import './index.less'; const TipTool = forwardRef((props, ref) => { const { style } = props; const { leftSetting, headerSetting, events } = props.dataList; const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const prefixCls = getPrefixCls('panda-gis-tip'); const data = [ { name: 'middle', width: style.minWidth ?? '600px', height: style.minHeight ?? '300px', active: true, }, { name: 'large', width: style.maxWidth ?? '800px', height: style.maxHeight ?? '400px', active: false, }, ]; const scale = { name: 'small', width: '200px', height: '45px', active: true, }; const [styleState, setStyleState] = useState(data); const [styleScale, setScaleState] = useState(scale); const changeStyle = ({ name }) => { let data = styleState.slice(); data.map((item) => { if (name == item.name) { item.active = true; } else { item.active = false; } }); setStyleState(data); return getWidthAndHeight(data); }; const changeScale = (flag) => { let obj = { ...styleScale }; obj.active = flag; setScaleState(obj); if (flag) { return getWidthAndHeight(styleState); } else { return { height: obj.height, width: obj.width }; } }; const computedStyle = () => { if (!styleScale.active) { return { width: styleScale.width, height: styleScale.height }; } else { return getWidthAndHeight(styleState); } }; const getWidthAndHeight = (data) => { return data .filter((item) => item.active) .map(({ width, height }) => { return { width, height }; })[0]; }; const displayComput = () => { if (styleScale.active) { return { display: 'inline-block' }; } else { return { display: 'none' }; } }; return ( <div className={classNames(`${prefixCls}-Tipwripconter`)} ref={ref} style={computedStyle()}> <Header headerSetting={headerSetting} events={events} changeStyle={changeStyle} changeScale={changeScale} /> <div className={classNames(`${prefixCls}-TipAll`)} style={displayComput()}> <div className={classNames(`${prefixCls}-Tipconter`)}> <div className={classNames(`${prefixCls}-Tipleft`)}> <LeftList leftSetting={leftSetting} /> </div> </div> <div className={classNames(`${prefixCls}-tipfooter`)}></div> </div> </div> ); }); //分类可见与不可见属性的数组 export const getVisibleAttribues = function (attribuesArr, fields) { var attrs = []; fields.forEach(function (item, i, arr) { attribuesArr.forEach(function (attr, index) { if (i == 0) { attrs[index] = { show: {}, hide: {}, fields: [], }; } // 属性值 var attrValue = attr[item.name]; if (_.isUndefined(attrValue) || _.isNull(attrValue)) { attrValue = ''; } // 界面展示值-处理后的 var handleValue = attrValue; if (handleValue == '') { handleValue = '--'; } if (item.visible) { attrs[index]['show'][item.alias] = [attrValue, handleValue, item.name, item]; attrs[index]['fields'].push(item.alias); } else { attrs[index]['hide'][item.alias] = attrValue; } }); }); attrsFieldHandle(attrs); return attrs; }; //字段类型读取 function attrsFieldHandle(attrs) { attrs.forEach((item) => { var showFieldObj = item['show']; for (var k in showFieldObj) { var testField = showFieldObj[k][0]; if (typeof testField == 'number') { if (Number.isInteger(testField)) showFieldObj[k][1] = testField; else showFieldObj[k][1] = Number(testField.toFixed(3)); } } }); } export default TipTool;