Skip to content

X
xform
Commit 16870930 authored by 田翔's avatar 田翔
Browse files
Options

fix: 样式调整

parent fd30c8f7
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 197 deletions
package.json
View file @ 16870930
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "4.0.6", "version": "4.0.7",
"description": "4.0.6: 取消表单设计器校验", "description": "4.0.7 样式调整",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
......
src/core/Account/index.js
View file @ 16870930
...@@ -34,7 +34,7 @@ const getFileInfo = (formJson) => { ...@@ -34,7 +34,7 @@ const getFileInfo = (formJson) => {
return obj return obj
} }
const TableRender = (props) => { const Account = (props) => {
const userID = window?.globalConfig?.userInfo?.OID || 1 const userID = window?.globalConfig?.userInfo?.OID || 1
const { accountName } = props const { accountName } = props
...@@ -331,4 +331,4 @@ const TableRender = (props) => { ...@@ -331,4 +331,4 @@ const TableRender = (props) => {
} }
export default TableRender export default Account
\ No newline at end of file \ No newline at end of file
src/core/FormDesigner/config/settings.js
View file @ 16870930
...@@ -779,8 +779,6 @@ const selectWidgets = [ ...@@ -779,8 +779,6 @@ const selectWidgets = [
hidden: '{{formData.sourceType !== "手动输入"}}', hidden: '{{formData.sourceType !== "手动输入"}}',
default: [{ value: '选项一' }], default: [{ value: '选项一' }],
widget: 'SimpleList', widget: 'SimpleList',
displayType: 'row',
labelWidth: 80,
dependencies: ['sourceType', 'color'] dependencies: ['sourceType', 'color']
}, },
dictionary: { dictionary: {
...@@ -2150,6 +2148,17 @@ const mapWidgets = [ ...@@ -2150,6 +2148,17 @@ const mapWidgets = [
}, },
}, },
}, },
// {
// text: '地图选线',
// name: '地图选线',
// icon: <IconPack.Coordinate />,
// schema: {
// title: '地图选线',
// type: 'string',
// widget: 'DrawPartition',
// placeholder: '绘制地图线段',
// },
// },
{ {
text: '设备选择', text: '设备选择',
name: '设备选择', name: '设备选择',
......
src/core/widgets/coord/DrawPartition/1js 0 → 100644
View file @ 16870930
import React, { useState, useEffect, useRef } from 'react';
import { Input, Modal, Spin, Button } from 'antd';
import { CompassOutlined, SearchOutlined } from '@ant-design/icons';
import { AMapScene, AMapDrawTool, VectorLayer } from '@wisdom-map/amap';
import Drag from '../../../components/Drag'
let amapDrawTool = null; // 存储绘制工具实例
let currentMapInstance = null; // 存储地图的实例
let AMapFunction = null; // 存储地图的构造函数
let coverLayer = {}; // 存储分区的地图对象
const DrawPartition = ({ value, onChange, name, schema }) => {
const mapSettings = window.globalConfig.mapsettings;
const [loading, setLoading] = useState(false);
const [visible, setVisible] = useState(false);
const [partition, setPartition] = useState([]);
const [initPath, setInitPath] = useState([]);
const [finalPathArray, setFinalPathArray] = useState([]);
const [selectedPartition, setSelectedPartition] = useState([]);
const [drawDisabled, setDrawDisabled] = useState(false);
let _temp = [];
/* let _tempCoordinateArray = [];
let _lnglatArray = [];*/
/*
* 问题：在getAMapInfo中，react的hook函数无法生效
* */
const drawFn = (AMap, map) => {
amapDrawTool.draw({
drawMethod: 'repeat',
saveOverlayStatus: 'saveMore',
type: 'Polygon',
drawByUser: true,
drawEnd(e) {
let _arr = map.getLayerByClass('AMap.VectorLayer').getAllOverlays(); // 获取所有矢量图形，这个会包含省市区的边框
// let _arr = []
let _temp = _arr.filter(item => {
let _lng = item.getOptions().extData.lng // 来判断是自己绘制的还是生成的范围框；
if (_lng) {
return true
}
return false
});
_temp = _temp.map(item => {
let _path = item.getPath();
return _path.map(obj => [obj.lng, obj.lat])
})
setFinalPathArray(_temp);
}
})
};
const getAMapInfo = (AMap, map, callback) => {
currentMapInstance = map;
AMapFunction = AMap;
amapDrawTool = new AMapDrawTool({
map, Amap: AMap,
})
let _value = JSON.parse(value);
callback(AMap, map, _value && Array.isArray(_value) && Array.length ? _value : 'init'); // 此时确保实例已经渲染完毕，使用回调绘制区域
setListener();
};
const showMap = () => {
let _array = JSON.parse(value || '');
renderCover(AMapFunction, currentMapInstance, _array)
setVisible(true);
};
const onCancel = () => {
onChange(JSON.stringify(initPath))
setVisible(false);
setDrawDisabled(false);
};
const onOk = () => {
onChange(JSON.stringify(finalPathArray))
setInitPath(finalPathArray);
setVisible(false);
};
const drawStart = (type) => {
setDrawDisabled(true);
currentMapInstance.remove(coverLayer.markers);
drawFn(AMapFunction, currentMapInstance);
renderCover(AMapFunction, currentMapInstance, finalPathArray);
};
const setListener = () => {
let allMarkers = currentMapInstance.getLayerByClass("AMap.VectorLayer").getAllOverlays();
allMarkers.forEach(item => {
item.on('click', function (e) {
if (item.getOptions().isSelected) {
this.setOptions({
strokeColor: '#80d8ff',
isSelected: false
});
} else {
this.setOptions({
strokeColor: 'rgba(115,121,131,0.92)',
isSelected: true
});
}
})
})
}
const drawPause = () => {
// 更新
setDrawDisabled(false);
setInitPath(finalPathArray);
// 结束绘制时，将信息
amapDrawTool.pause();
// 监听鼠标点击
setListener();
};
const deletePartition = () => {
let allMarkers = currentMapInstance.getLayerByClass("AMap.VectorLayer").getAllOverlays();
let _initPath = []
allMarkers.forEach(item => {
if (item.getOptions().isSelected) {
currentMapInstance.remove([item])
} else {
_initPath.push(item.getPath());
}
});
setInitPath(_initPath)
};
const renderCover = (AMap, map, pathData) => {
if (pathData === 'init' || pathData && Array.isArray(pathData) && pathData.length) {
let _pathArray;
if (pathData !== 'init') {
_pathArray = pathData.map((item, index) => ({
type: 'Polygon',
options: {
path: [...item],
fillColor: '#632345',
strokeWeight: 3,
strokeStyle: 'solid',
strokeColor: '#998761',
bubble: false, // 需要做事件监听时，开启冒泡，在地图对象上监听事件,
selfIndex: `marker_${index}`
},
}));
}
coverLayer = new VectorLayer({
Amap: AMap,
map,
datas: pathData !== 'init' ? [..._pathArray] : [],
});
}
};
useEffect(() => {
let _temp = value && JSON.parse(value);
if (_temp) {
setPartition(_temp)
setInitPath(_temp);
}
}, []);
return (
<div style={{ overflow: 'hidden' }}>
<Input
disabled={schema.disabled}
value={value && JSON.stringify(value) || ''}
style={{ width: 0, position: 'absolute', visibility: 'hidden', }}
/>
<Button icon={<SearchOutlined />} onClick={showMap} />
<span style={{ marginLeft: 5 }}>{initPath.length ? `已绘制${initPath.length}块区域` : '未绘制区域'}</span>
{
mapSettings ?
<Drag
width={'80%'}
title="绘制区域"
visible={visible}
onCancel={onCancel}
bodyStyle={{ height: 600, overflowY: 'auto' }}
destroyOnClose={true}
footer={null}
>
{/*{loading && <Spin/>}*/}
<Button type={'primary'} disabled={drawDisabled} style={{ marginBottom: 10, marginRight: 10 }}
onClick={() => drawStart('Polygon')}>开始绘制</Button>
<Button type={'primary'} disabled={!drawDisabled} style={{ marginBottom: 10, marginRight: 10 }}
onClick={() => drawPause('Polygon')}>结束绘制</Button>
<Button type={'danger'} style={{ marginBottom: 10 }} onClick={() => deletePartition()}>删除</Button>
<div style={{ height: '90%' }}>
<AMapScene
getMapInfo={(AMap, map) => getAMapInfo(AMap, map, renderCover)}
mapsettings={mapSettings}
config={mapSettings}
loading
/>
</div>
</Drag> : null
}
</div>
)
}
export default DrawPartition;
src/core/widgets/coord/DrawPartition/index.js
View file @ 16870930
import React, { useState, useEffect, useRef } from 'react'; import React from 'react'
import { Input, Modal, Spin, Button } from 'antd';
import { CompassOutlined, SearchOutlined } from '@ant-design/icons';
import { AMapScene, AMapDrawTool, VectorLayer } from '@wisdom-map/amap';
import Drag from '../../../components/Drag'
let amapDrawTool = null; // 存储绘制工具实例 const DrawPartition = (props) => {
let currentMapInstance = null; // 存储地图的实例
let AMapFunction = null; // 存储地图的构造函数 const { value, onChange, addons } = props
let coverLayer = {}; // 存储分区的地图对象
const DrawPartition = ({ value, onChange, name, schema }) => {
const mapSettings = window.globalConfig.mapsettings;
const [loading, setLoading] = useState(false);
const [visible, setVisible] = useState(false);
const [partition, setPartition] = useState([]);
const [initPath, setInitPath] = useState([]);
const [finalPathArray, setFinalPathArray] = useState([]);
const [selectedPartition, setSelectedPartition] = useState([]);
const [drawDisabled, setDrawDisabled] = useState(false);
let _temp = [];
/* let _tempCoordinateArray = [];
let _lnglatArray = [];*/
/*
* 问题：在getAMapInfo中，react的hook函数无法生效
* */
const drawFn = (AMap, map) => {
amapDrawTool.draw({
drawMethod: 'repeat',
saveOverlayStatus: 'saveMore',
type: 'Polygon',
drawByUser: true,
drawEnd(e) {
let _arr = map.getLayerByClass('AMap.VectorLayer').getAllOverlays(); // 获取所有矢量图形，这个会包含省市区的边框
// let _arr = []
let _temp = _arr.filter(item => {
let _lng = item.getOptions().extData.lng // 来判断是自己绘制的还是生成的范围框；
if (_lng) {
return true
}
return false
});
_temp = _temp.map(item => {
let _path = item.getPath();
return _path.map(obj => [obj.lng, obj.lat])
})
setFinalPathArray(_temp);
}
})
};
const getAMapInfo = (AMap, map, callback) => {
currentMapInstance = map;
AMapFunction = AMap;
amapDrawTool = new AMapDrawTool({
map, Amap: AMap,
})
let _value = JSON.parse(value);
callback(AMap, map, _value && Array.isArray(_value) && Array.length ? _value : 'init'); // 此时确保实例已经渲染完毕，使用回调绘制区域
setListener();
};
const showMap = () => {
let _array = JSON.parse(value || '');
renderCover(AMapFunction, currentMapInstance, _array)
setVisible(true);
};
const onCancel = () => {
onChange(JSON.stringify(initPath))
setVisible(false);
setDrawDisabled(false);
};
const onOk = () => {
onChange(JSON.stringify(finalPathArray))
setInitPath(finalPathArray);
setVisible(false);
};
const drawStart = (type) => {
setDrawDisabled(true);
currentMapInstance.remove(coverLayer.markers);
drawFn(AMapFunction, currentMapInstance);
renderCover(AMapFunction, currentMapInstance, finalPathArray);
};
const setListener = () => {
let allMarkers = currentMapInstance.getLayerByClass("AMap.VectorLayer").getAllOverlays();
allMarkers.forEach(item => {
item.on('click', function (e) {
if (item.getOptions().isSelected) {
this.setOptions({
strokeColor: '#80d8ff',
isSelected: false
});
} else {
this.setOptions({
strokeColor: 'rgba(115,121,131,0.92)',
isSelected: true
});
}
})
})
}
const drawPause = () => {
// 更新
setDrawDisabled(false);
setInitPath(finalPathArray);
// 结束绘制时，将信息
amapDrawTool.pause();
// 监听鼠标点击
setListener();
};
const deletePartition = () => {
let allMarkers = currentMapInstance.getLayerByClass("AMap.VectorLayer").getAllOverlays();
let _initPath = []
allMarkers.forEach(item => {
if (item.getOptions().isSelected) {
currentMapInstance.remove([item])
} else {
_initPath.push(item.getPath());
}
});
setInitPath(_initPath)
};
const renderCover = (AMap, map, pathData) => {
if (pathData === 'init' || pathData && Array.isArray(pathData) && pathData.length) {
let _pathArray;
if (pathData !== 'init') {
_pathArray = pathData.map((item, index) => ({
type: 'Polygon',
options: {
path: [...item],
fillColor: '#632345',
strokeWeight: 3,
strokeStyle: 'solid',
strokeColor: '#998761',
bubble: false, // 需要做事件监听时，开启冒泡，在地图对象上监听事件,
selfIndex: `marker_${index}`
},
}));
}
coverLayer = new VectorLayer({
Amap: AMap,
map,
datas: pathData !== 'init' ? [..._pathArray] : [],
});
}
};
useEffect(() => {
let _temp = value && JSON.parse(value);
if (_temp) {
setPartition(_temp)
setInitPath(_temp);
}
}, []);
return ( return (
<div style={{ overflow: 'hidden' }}> <div></div>
<Input
disabled={schema.disabled}
value={value && JSON.stringify(value) || ''}
style={{ width: 0, position: 'absolute', visibility: 'hidden', }}
/>
<Button icon={<SearchOutlined />} onClick={showMap} />
<span style={{ marginLeft: 5 }}>{initPath.length ? `已绘制${initPath.length}块区域` : '未绘制区域'}</span>
{
mapSettings ?
<Drag
width={'80%'}
title="绘制区域"
visible={visible}
onCancel={onCancel}
bodyStyle={{ height: 600, overflowY: 'auto' }}
destroyOnClose={true}
footer={null}
>
{/*{loading && <Spin/>}*/}
<Button type={'primary'} disabled={drawDisabled} style={{ marginBottom: 10, marginRight: 10 }}
onClick={() => drawStart('Polygon')}>开始绘制</Button>
<Button type={'primary'} disabled={!drawDisabled} style={{ marginBottom: 10, marginRight: 10 }}
onClick={() => drawPause('Polygon')}>结束绘制</Button>
<Button type={'danger'} style={{ marginBottom: 10 }} onClick={() => deletePartition()}>删除</Button>
<div style={{ height: '90%' }}>
<AMapScene
getMapInfo={(AMap, map) => getAMapInfo(AMap, map, renderCover)}
mapsettings={mapSettings}
config={mapSettings}
loading
/>
</div>
</Drag> : null
}
</div>
) )
} }
export default DrawPartition; export default DrawPartition
\ No newline at end of file
src/core/widgets/coord/index.js
View file @ 16870930
import Coordinate from './Coordinate' import Coordinate from './Coordinate'
import Device from './Device' import Device from './Device'
import DrawPartition from './DrawPartition' import DrawPartition from './DrawPartition/1js'
import SearchLocation from './SearchLocation' import SearchLocation from './SearchLocation'
const coord = { const coord = {
Coordinate, Coordinate,
Device,
DrawPartition, DrawPartition,
Device,
SearchLocation, SearchLocation,
} }
......
src/index.js
View file @ 16870930
import FormRender from './core/FormRender' import FormRender from './core/FormRender'
import FormDesigner from './core/FormDesigner' import FormDesigner from './core/FormDesigner'
import Account from './core/Account' import Account from './core/Account'
import './main.less'
export { export {
FormRender, FormRender,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment