mirror of https://gitee.com/antv-l7/antv-l7
fix: 修改demo
This commit is contained in:
lzxue
parent
9de2360085
commit
86c5f97534
|
|
@ -63,42 +63,12 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
name: {
|
||||
zh: '地理可视分开发框架',
|
||||
zh: 'Dipper 地理可视分开发框架',
|
||||
en: 'Dipper',
|
||||
},
|
||||
url: 'http://antv.vision/Dipper',
|
||||
},
|
||||
],
|
||||
Dipper: [
|
||||
{
|
||||
name: {
|
||||
zh: 'L7 React组件',
|
||||
en: 'L7React L7 For React',
|
||||
},
|
||||
url: 'http://antv.vision/L7-react/',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
zh: 'L7Draw 地理围栏绘制组件库',
|
||||
en: 'L7Draw',
|
||||
},
|
||||
url: 'http://antv.vision/L7-draw/',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
zh: 'L7Plot',
|
||||
en: 'L7Plot',
|
||||
},
|
||||
url: 'http://antv.vision/L7-draw/',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
zh: 'L7Boundary 行政区划可视化库',
|
||||
en: 'L7Boundary',
|
||||
},
|
||||
url: 'http://antv.vision/L7-boundary/',
|
||||
},
|
||||
],
|
||||
docs: [
|
||||
{
|
||||
slug: 'api/l7',
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Bar } from '@antv/g2plot';
|
||||
|
||||
export interface ChatData {
|
||||
data: object[];
|
||||
legend?: boolean;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function BarCahrt({ data }: ChatData) {
|
||||
const id = useRef();
|
||||
const [barplot, setBarplot] = useState<Bar>();
|
||||
useEffect(() => {
|
||||
if (!barplot && id.current) {
|
||||
const bar = new Bar(id.current, {
|
||||
// @ts-ignore
|
||||
data: data.sort((a, b) => b.xField - a.xField),
|
||||
autoFit: true,
|
||||
xField: 'yField',
|
||||
yField: 'xField',
|
||||
xAxis: false,
|
||||
label: {
|
||||
position: 'left',
|
||||
style: {
|
||||
fill: '#fff',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top-left',
|
||||
},
|
||||
});
|
||||
|
||||
bar.render();
|
||||
setBarplot(bar);
|
||||
} else {
|
||||
barplot.update({
|
||||
data,
|
||||
});
|
||||
}
|
||||
}, [id.current, data]);
|
||||
|
||||
return <div ref={id} style={{ height: 300 }} />;
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Line } from '@antv/g2plot';
|
||||
import { ChatData } from '../Bar';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
export function LineCahrt({ data, loading }: ChatData) {
|
||||
const id = useRef();
|
||||
const [lineplot, setLinePlot] = useState<Line>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!lineplot && id.current && data) {
|
||||
const lineplot = new Line(id.current, {
|
||||
data,
|
||||
autoFit: true,
|
||||
xField: 'xField',
|
||||
yField: 'yField',
|
||||
seriesField: 'series',
|
||||
legend: {
|
||||
position: 'top-left',
|
||||
},
|
||||
});
|
||||
lineplot.render();
|
||||
setLinePlot(lineplot);
|
||||
} else {
|
||||
lineplot.update({
|
||||
data,
|
||||
});
|
||||
}
|
||||
}, [id.current, data]);
|
||||
|
||||
return (
|
||||
<Spin spinning={loading}>
|
||||
<div ref={id} style={{ height: 300 }} />
|
||||
</Spin>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Pie } from '@antv/g2plot';
|
||||
import { ChatData } from '../Bar';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
export function PieChart({ data, legend, loading }: ChatData) {
|
||||
const id = useRef();
|
||||
const [pieplot, setPiePlot] = useState<Pie>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!pieplot && id.current && data) {
|
||||
const pie = new Pie(id.current, {
|
||||
data,
|
||||
autoFit: true,
|
||||
angleField: 'xField',
|
||||
colorField: 'yField',
|
||||
radius: 0.7,
|
||||
label: {
|
||||
type: 'spider',
|
||||
labelHeight: 28,
|
||||
content: '{name}\n{percentage}',
|
||||
},
|
||||
legend: legend
|
||||
? {
|
||||
position: 'top-left',
|
||||
}
|
||||
: false,
|
||||
});
|
||||
|
||||
pie.render();
|
||||
setPiePlot(pie);
|
||||
} else {
|
||||
pieplot.update({
|
||||
data,
|
||||
});
|
||||
}
|
||||
}, [id.current, data]);
|
||||
|
||||
return (
|
||||
<Spin spinning={loading}>
|
||||
<div ref={id} style={{ height: 300 }} />
|
||||
</Spin>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Line } from '@antv/g2plot';
|
||||
import { ChatData } from '../Bar';
|
||||
|
||||
export function SingleLineCahrt({ data }: ChatData) {
|
||||
const id = useRef();
|
||||
const [lineplot, setLinePlot] = useState<Line>();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!lineplot && id.current && data) {
|
||||
const area = new Line(id.current, {
|
||||
data,
|
||||
autoFit: true,
|
||||
xField: 'xField',
|
||||
yField: 'yField',
|
||||
});
|
||||
area.render();
|
||||
setLinePlot(area);
|
||||
}else{
|
||||
lineplot.update({
|
||||
data
|
||||
})
|
||||
}
|
||||
}, [id.current,data]);
|
||||
|
||||
return <div ref={id} style={{height:300}}/>;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Area } from '@antv/g2plot';
|
||||
import { ChatData } from '../Bar';
|
||||
|
||||
export function StackAreaCahrt({ data }: ChatData) {
|
||||
const id = useRef();
|
||||
const [pieplot, setAreaPlot] = useState<Area>();
|
||||
const [list,setData] = useState([])
|
||||
|
||||
useEffect(()=>{
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setData(data);
|
||||
});
|
||||
},[])
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!pieplot && id.current && list) {
|
||||
const area = new Area(id.current, {
|
||||
data:list,
|
||||
autoFit: true,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'country',
|
||||
legend:{
|
||||
position:'top-left'
|
||||
}
|
||||
});
|
||||
area.render();
|
||||
setAreaPlot(area);
|
||||
}else{
|
||||
pieplot.update({
|
||||
data:list
|
||||
})
|
||||
}
|
||||
}, [id.current,data]);
|
||||
|
||||
return <div ref={id} style={{height:300}}/>;
|
||||
}
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
import { IConfig, SingleSequentialColorScale } from '@antv/dipper';
|
||||
import { CityList } from './mock';
|
||||
export const config: Partial<IConfig> = {
|
||||
viewData: {
|
||||
global: {
|
||||
filterData: [],
|
||||
areaCode: '330100',
|
||||
view: 'task',
|
||||
},
|
||||
widgets: {
|
||||
citySelect: {
|
||||
options: CityList,
|
||||
value: ['330000', '330100'],
|
||||
},
|
||||
},
|
||||
},
|
||||
headerbar: {
|
||||
display: true,
|
||||
title: {
|
||||
value: '数据分析',
|
||||
display: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: '选择城市',
|
||||
type: 'citySelect',
|
||||
event: {
|
||||
actionType: 'map',
|
||||
action: 'queryArea',
|
||||
},
|
||||
},
|
||||
{
|
||||
display: false,
|
||||
position: 'right',
|
||||
type: 'publishbar',
|
||||
event: {
|
||||
actionType: 'map',
|
||||
action: 'publish',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
panel: {
|
||||
display: true,
|
||||
options: {
|
||||
enableToggle: true,
|
||||
defaultTitle: '所有网格',
|
||||
opened: true,
|
||||
width: 426,
|
||||
},
|
||||
position: 'right',
|
||||
children: [
|
||||
{
|
||||
display: true,
|
||||
type: 'meshName',
|
||||
title: '网格名称',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
type: 'meshchart',
|
||||
title: '所有网格数据',
|
||||
},
|
||||
{
|
||||
display: false,
|
||||
type: 'panelTabContent',
|
||||
title: '所有网格',
|
||||
children: [
|
||||
{
|
||||
display: true,
|
||||
type: 'mesh_indicator',
|
||||
title: '业务数据',
|
||||
},
|
||||
{
|
||||
type: 'total_data_panel',
|
||||
title: '人员数据',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
toolbar: {
|
||||
display: false,
|
||||
children: [],
|
||||
},
|
||||
map: {
|
||||
zoom: 10,
|
||||
center: [120.153576, 30.287459],
|
||||
pitch: 0,
|
||||
style: 'normal',
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
display: true,
|
||||
position: 'topleft',
|
||||
type: 'filter',
|
||||
title: '筛选',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'bottomright',
|
||||
type: 'location',
|
||||
title: '定位',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'bottomright',
|
||||
type: 'mapStyle',
|
||||
title: '地图样式',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'topleft',
|
||||
type: 'searchPlaces',
|
||||
title: '地区搜索',
|
||||
},
|
||||
],
|
||||
defaultcontrols: [
|
||||
{
|
||||
type: 'zoom',
|
||||
position: 'bottomright',
|
||||
display: true,
|
||||
},
|
||||
{
|
||||
type: 'scale',
|
||||
position: 'bottomleft',
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
popup: {
|
||||
enable: false,
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
type: 'gridLayer',
|
||||
options: {
|
||||
label: {
|
||||
field: 'name',
|
||||
size: 12,
|
||||
color: '#000',
|
||||
},
|
||||
fill: {
|
||||
field: 'unit_price',
|
||||
color: ['#A9D3FF', '#82B1FF', '#6294FF', '#457BFF', '#2962FF'],
|
||||
bandNum: 5,
|
||||
scale: 'quantile',
|
||||
unknownName: '无类型',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legends: [],
|
||||
};
|
||||
|
|
@ -1,267 +0,0 @@
|
|||
import Mock from 'mockjs';
|
||||
|
||||
// 单折线图
|
||||
export const singleLineChart = () => {
|
||||
const data = Mock.mock({
|
||||
'list|9': [
|
||||
{
|
||||
// 生成长度在 100~1000 之间的小写字母
|
||||
yField: '@integer(0,5000)',
|
||||
},
|
||||
],
|
||||
});
|
||||
return data.list
|
||||
.sort((a, b) => a.yField - b.yField)
|
||||
.map((item, index) => {
|
||||
return {
|
||||
xField: `${index + 1}月`,
|
||||
...item,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// 条形图
|
||||
export const barChart = () => {
|
||||
let xField = ['餐饮', '影院', '百货购物中心', '国内旅游', '医疗'];
|
||||
const data = Mock.mock({
|
||||
'list|5': [
|
||||
{
|
||||
// 生成长度在 100~1000 之间的小写字母
|
||||
yField: '@integer(0,5000)',
|
||||
},
|
||||
],
|
||||
});
|
||||
return data.list
|
||||
.sort((a, b) => b.yField - a.yField)
|
||||
.map((item, index) => {
|
||||
return {
|
||||
xField: xField[index],
|
||||
...item,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// 多维折线图
|
||||
export const multidimensionalChart = () => {
|
||||
const series = ['铺设失败', '铺设中', '铺设成功', '虚假铺设'];
|
||||
const xField = new Array(12).fill('').map((item, index) => {
|
||||
return `${2 * index + 2}:00`;
|
||||
});
|
||||
|
||||
return series
|
||||
.map((a, k) => {
|
||||
return xField.map((b, index) => {
|
||||
return {
|
||||
xField: b,
|
||||
series: a,
|
||||
yField: Number(
|
||||
((index + 1) * 10 + 20 * Math.random() + k * 20).toFixed(),
|
||||
),
|
||||
};
|
||||
});
|
||||
})
|
||||
.flat();
|
||||
};
|
||||
|
||||
// 作业单数
|
||||
export const operation = () => {
|
||||
const data = Mock.mock({
|
||||
'list|15': [
|
||||
{
|
||||
name: '@cname',
|
||||
order_count: '@integer(0,100)',
|
||||
staff_no: '@integer(100000,1000000)',
|
||||
},
|
||||
],
|
||||
});
|
||||
return data.list;
|
||||
};
|
||||
|
||||
// 行业市场份额
|
||||
export const marketShare = () => {
|
||||
const data = Mock.mock({
|
||||
'list|3': [
|
||||
{
|
||||
// 生成长度在 100~1000 之间的小写字母
|
||||
xField: '@integer(0,100)',
|
||||
},
|
||||
],
|
||||
});
|
||||
const yField = ['街电', '怪兽', '小电'];
|
||||
return data.list
|
||||
.sort((a, b) => a.yField - b.yField)
|
||||
.map((item, index) => {
|
||||
return {
|
||||
yField: yField[index],
|
||||
...item,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// 各品牌营收
|
||||
export const brandRevenue = () => {
|
||||
const series = ['街电', '来电', '怪兽', '美团', '小电'];
|
||||
const xField = new Array(11).fill('').map((item, index) => {
|
||||
return `${2009 + index}`;
|
||||
});
|
||||
|
||||
return series
|
||||
.map((a, k) => {
|
||||
return xField.map((b, index) => {
|
||||
return {
|
||||
xField: b,
|
||||
series: a,
|
||||
yField: Number(
|
||||
((index + 1) * 10 + 30 * Math.random() + k * 20).toFixed(),
|
||||
),
|
||||
};
|
||||
});
|
||||
})
|
||||
.flat();
|
||||
};
|
||||
|
||||
export function randomData<T>(data: T): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve(data);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
// 生成范围内的随机数
|
||||
export const randomNumBoth = (min: number, max: number) => {
|
||||
const Range = max - min;
|
||||
const Rand = Math.random();
|
||||
const num = min + Math.round(Rand * Range);
|
||||
return num;
|
||||
}
|
||||
|
||||
export const brandOption = [
|
||||
{ label: '全部类型', value: '1' },
|
||||
{ label: '街电', value: '2' },
|
||||
{ label: '怪兽', value: '3' },
|
||||
{ label: '小电', value: '4' },
|
||||
];
|
||||
|
||||
export const CityList = [
|
||||
{
|
||||
value: '330000',
|
||||
areaLevel: 'province',
|
||||
label: '浙江省',
|
||||
children: [
|
||||
{
|
||||
value: '330100',
|
||||
areaLevel: 'city',
|
||||
label: '杭州市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '110000',
|
||||
areaLevel: 'province',
|
||||
label: '北京市',
|
||||
children: [
|
||||
{
|
||||
value: '110000',
|
||||
areaLevel: 'city',
|
||||
label: '北京市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '120000',
|
||||
areaLevel: 'province',
|
||||
label: '天津市',
|
||||
children: [
|
||||
{
|
||||
value: '120000',
|
||||
areaLevel: 'city',
|
||||
label: '天津市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '310000',
|
||||
areaLevel: 'province',
|
||||
label: '上海市',
|
||||
children: [
|
||||
{
|
||||
value: '310000',
|
||||
areaLevel: 'province',
|
||||
label: '上海市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '440000',
|
||||
areaLevel: 'province',
|
||||
label: '广东省',
|
||||
children: [
|
||||
{
|
||||
value: '440100',
|
||||
areaLevel: 'city',
|
||||
label: '广州市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '440300',
|
||||
areaLevel: 'city',
|
||||
label: '深圳市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '440400',
|
||||
areaLevel: 'city',
|
||||
label: '珠海市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '440600',
|
||||
areaLevel: 'city',
|
||||
label: '佛山市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '441300',
|
||||
areaLevel: 'city',
|
||||
label: '惠州市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '441900',
|
||||
areaLevel: 'city',
|
||||
label: '东莞市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '442000',
|
||||
areaLevel: 'city',
|
||||
label: '中山市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '130000',
|
||||
areaLevel: 'province',
|
||||
label: '河北省',
|
||||
children: [
|
||||
{
|
||||
value: '130100',
|
||||
areaLevel: 'city',
|
||||
label: '石家庄市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '131000',
|
||||
areaLevel: 'city',
|
||||
label: '廊坊市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { initWidgets } from './widgets';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { config } from './configs/config';
|
||||
import { DipperContainer, IConfig } from '@antv/dipper';
|
||||
import 'antd/dist/antd.css'
|
||||
interface IInitData {
|
||||
areaVOList: any[];
|
||||
sceneCode: string;
|
||||
areaCode: string;
|
||||
filterData: any[];
|
||||
}
|
||||
|
||||
export default function RumbMap() {
|
||||
const [mapConfig, setMapConfig] = useState<IConfig<IInitData>>();
|
||||
// 初始化相关数据
|
||||
|
||||
useEffect(() => {
|
||||
initWidgets();
|
||||
setMapConfig(config);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%',width:'100%',position:'absolute' }}>
|
||||
<DipperContainer<IInitData> cfg={mapConfig!} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { Select } from 'antd';
|
||||
import React from 'react';
|
||||
import { useConfigService } from '@antv/dipper';
|
||||
import { brandOption } from '../configs/mock';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
export const Filter = () => {
|
||||
const { setWidgetsValue } = useConfigService();
|
||||
|
||||
const onBrandChange = (e: any) => {
|
||||
setWidgetsValue('brand', e);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ background: '#fff', borderRadius: 3 }}>
|
||||
<Select
|
||||
defaultValue="全部地区"
|
||||
style={{ width: 100, color: 'rgba(0,0,0,0.65)' }}
|
||||
bordered={false}
|
||||
>
|
||||
<Option value="全部地区">全部地区</Option>
|
||||
<Option value="示例地区1">示例地区1</Option>
|
||||
<Option value="示例地区2">示例地区2</Option>
|
||||
</Select>
|
||||
<Select
|
||||
defaultValue="1"
|
||||
style={{ width: 100, color: 'rgba(0,0,0,0.65)' }}
|
||||
bordered={false}
|
||||
onChange={(e) => onBrandChange(e)}
|
||||
>
|
||||
{brandOption.map((item) => {
|
||||
return (
|
||||
<Option key={item.label} value={item.value}>
|
||||
{item.label}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
import {
|
||||
useSceneService,
|
||||
useConfigService,
|
||||
LayerGroupEventEnum,
|
||||
useLayerService,
|
||||
} from '@antv/dipper';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { GridLayerGroup } from '@antv/dipper';
|
||||
import { randomNumBoth } from '../configs/mock';
|
||||
const formatLegend = (data: any[]) => {
|
||||
return data.map((item) => {
|
||||
if (Array.isArray(item.value)) {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.map((v) => v.toFixed(2)),
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.toFixed(2),
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
export function GridLayer() {
|
||||
const { layerService } = useLayerService();
|
||||
const { sceneService } = useSceneService();
|
||||
const { globalConfig, updateLegend, getWidgetsValue } = useConfigService();
|
||||
const { layers } = globalConfig;
|
||||
const [gridLayer, setGridLayer] = useState<GridLayerGroup>();
|
||||
const cityValue = getWidgetsValue('citySelect');
|
||||
const brandValue = getWidgetsValue('brand');
|
||||
const [geoData, setGeoData] = useState();
|
||||
|
||||
const layerProps = useMemo(() => {
|
||||
return layers.find((item: any) => item.type === 'gridLayer');
|
||||
}, [layers]);
|
||||
|
||||
const updateLayerLegend = (items: any[]) => {
|
||||
updateLegend('gridLayerLegend', {
|
||||
type: 'classifyColor',
|
||||
display: true,
|
||||
position: 'bottomleft',
|
||||
options: {
|
||||
title: '充电宝投放数量',
|
||||
unkownName: layerProps.options.unkownName,
|
||||
items: items.map((item) => {
|
||||
return {
|
||||
color: item.color,
|
||||
value: item.value.map((v) => {
|
||||
return (v / 10000).toFixed(2);
|
||||
}),
|
||||
};
|
||||
}),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 根据筛选器条件请求数据
|
||||
useEffect(() => {
|
||||
// 可以根据业务需求配置接口
|
||||
fetch(
|
||||
`https://gw.alipayobjects.com/os/antvdemo/assets/dipper-city/${cityValue[1]}.json`,
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const geoDataList =
|
||||
data &&
|
||||
data.features?.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
properties: {
|
||||
...item.properties,
|
||||
brand_type: randomNumBoth(1, 4).toString(), // 充电宝品牌
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// 品牌 过滤
|
||||
if (brandValue && geoDataList) {
|
||||
// @ts-ignore
|
||||
const data =
|
||||
brandValue === '1'
|
||||
? geoDataList
|
||||
: geoDataList.filter(
|
||||
(item) => item.properties.brand_type === brandValue,
|
||||
);
|
||||
if (data.length) {
|
||||
// @ts-ignore
|
||||
setGeoData({ type: 'FeatureCollection', features: data });
|
||||
}
|
||||
} else {
|
||||
// @ts-ignore
|
||||
setGeoData({ type: 'FeatureCollection', features: geoDataList });
|
||||
}
|
||||
});
|
||||
// 切换城市 高德地图方法
|
||||
sceneService.getScene().map?.setCity(cityValue[1]);
|
||||
}, [JSON.stringify(cityValue), brandValue]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!geoData) {
|
||||
return;
|
||||
}
|
||||
if (gridLayer) {
|
||||
gridLayer.setData(geoData);
|
||||
return;
|
||||
}
|
||||
const layer = new GridLayerGroup({
|
||||
name: 'grid',
|
||||
data: geoData,
|
||||
options: layerProps.options,
|
||||
});
|
||||
layerService.addLayer(layer);
|
||||
|
||||
layer.on(LayerGroupEventEnum.DATAUPDATE, () => {
|
||||
layer.getLegendItem().map((item) => {
|
||||
if (Array.isArray(item.value)) {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.map((v) => v.toFixed(2)),
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.toFixed(2),
|
||||
};
|
||||
}
|
||||
});
|
||||
updateLayerLegend(formatLegend(layer.getLegendItem()));
|
||||
});
|
||||
|
||||
// 更新图例
|
||||
updateLayerLegend(formatLegend(layer.getLegendItem()));
|
||||
|
||||
setGridLayer(layer);
|
||||
}, [geoData]);
|
||||
|
||||
return <></>;
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { useLayerGroup } from '@antv/dipper';
|
||||
import { brandRevenue, marketShare } from '../../configs/mock';
|
||||
import { PieChart } from '../../components/Pie';
|
||||
import { LineCahrt } from '../../components/Line';
|
||||
|
||||
export function MeshChart() {
|
||||
const { selectFeatures } = useLayerGroup('grid');
|
||||
const [pieData, setPieData] = useState([]);
|
||||
const [lineData, setLineData] = useState([]);
|
||||
const [loding, setLoding] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLoding(true);
|
||||
setTimeout(() => {
|
||||
setLoding(false);
|
||||
setPieData(marketShare());
|
||||
setLineData(brandRevenue());
|
||||
}, 300);
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 15px' }}>
|
||||
<div>
|
||||
<h4>行业市场份额</h4>
|
||||
<PieChart data={pieData || []} legend={false} loading={loding} />
|
||||
</div>
|
||||
<div>
|
||||
<h4>各品牌营收</h4>
|
||||
<LineCahrt data={lineData} loading={loding} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useLayerGroup } from '@antv/dipper';
|
||||
import { SingleLineCahrt } from '../components/SingleLine';
|
||||
import { singleLineChart, barChart } from '../configs/mock';
|
||||
import { BarCahrt } from '../components/Bar';
|
||||
|
||||
export function MeshIndicator() {
|
||||
const { selectFeatures } = useLayerGroup('grid');
|
||||
|
||||
// lineChart
|
||||
const [lineData, setLineData] = useState([]);
|
||||
|
||||
const [barData, setBarData] = useState([]);
|
||||
|
||||
// lineChart
|
||||
useEffect(() => {
|
||||
setLineData(singleLineChart());
|
||||
setBarData(barChart());
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
return (
|
||||
<div style={{ overflow: 'auto', height:'630px'}}>
|
||||
<div>
|
||||
<div style={{ margin: '10px 0' }}>交易笔数</div>
|
||||
<SingleLineCahrt data={lineData} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ margin: '20px 0' }}>各场景覆盖数</div>
|
||||
<BarCahrt data={barData} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.meahname {
|
||||
padding: 20px;
|
||||
}
|
||||
.closeicon {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.edit span:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
import React, {
|
||||
useRef,
|
||||
useState,
|
||||
useMemo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react';
|
||||
import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons';
|
||||
import styles from './index.module.css'
|
||||
import { Input } from 'antd';
|
||||
import { useLayerGroup, useConfigService } from '@antv/dipper';
|
||||
import _ from 'loadsh';
|
||||
|
||||
export function MeshName() {
|
||||
const { selectFeatures, updateProperties } = useLayerGroup('grid');
|
||||
const [edit, setEdit] = useState(false);
|
||||
const ref = useRef();
|
||||
const { setConfig } = useConfigService();
|
||||
|
||||
/**
|
||||
* get meshname
|
||||
* type []string
|
||||
*/
|
||||
const meshName = useMemo(() => {
|
||||
if (!selectFeatures.length) return [];
|
||||
return selectFeatures.map((item) => {
|
||||
// @ts-ignore
|
||||
return item.feature.properties.name;
|
||||
});
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
// 修改 网格名称
|
||||
const editMeshName = useCallback(() => {
|
||||
// @ts-ignore
|
||||
const value = ref.current.state.value;
|
||||
selectFeatures.forEach((item) => {
|
||||
const properties = {
|
||||
...item.feature.properties,
|
||||
name: value,
|
||||
};
|
||||
updateProperties(item.feature, properties);
|
||||
});
|
||||
setEdit(false);
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
// select more meshname 编辑 网格名称
|
||||
const EditMeshName = () => {
|
||||
return (
|
||||
<>
|
||||
{!edit ? (
|
||||
<div onClick={() => setEdit(!edit)}>
|
||||
<span>{meshName}</span>
|
||||
<EditOutlined style={{ paddingLeft: 12 }} />
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.edit}>
|
||||
<Input defaultValue={meshName} ref={ref} />
|
||||
<CheckOutlined
|
||||
onClick={editMeshName}
|
||||
className={styles.closeicon}
|
||||
/>
|
||||
<CloseOutlined onClick={() => setEdit(false)} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// show 多个网格名称
|
||||
const ShowMeshNames = () => {
|
||||
return (
|
||||
<div style={{ padding: 15 }}>
|
||||
{meshName.length >= 2 &&
|
||||
meshName.map((s) => {
|
||||
return <span key={s}>
|
||||
{s}、
|
||||
</span>;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectFeatures.length) {
|
||||
// TODO 报错
|
||||
setConfig(`panel.children.1.display`, false);
|
||||
setConfig(`panel.children.2.display`, true);
|
||||
// setConfig(`panel.children.${findIdMeshchart}.display`, false)
|
||||
} else {
|
||||
setConfig(`panel.children.1.display`, true);
|
||||
setConfig(`panel.children.2.display`, false);
|
||||
}
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{meshName && meshName.length ? (
|
||||
<div className={styles.meahname}>
|
||||
{meshName.length === 1 ? <EditMeshName /> : <ShowMeshNames />}
|
||||
</div>
|
||||
) : (
|
||||
<h4 style={{ padding: 15 }}>所有网格数据概览</h4>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.teamcontainer {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.orderlist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 48px;
|
||||
width: 378px;
|
||||
background: #fafafa;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.orderlist .leftpart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.orderlist .leftpart > div {
|
||||
padding-right: 15px;
|
||||
}
|
||||
.orderlist .leftpart .ordericon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.sort:hover {
|
||||
color: #1e73f8;
|
||||
}
|
||||
.orderCon :global .ant-list-split .ant-list-item {
|
||||
border: none !important;
|
||||
}
|
||||
.orderCon :global .ant-list-item {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useLayerGroup } from '@antv/dipper'
|
||||
import { Button, List } from 'antd';
|
||||
import { multidimensionalChart, operation } from '../../configs/mock';
|
||||
import styles from './index.module.css'
|
||||
import { LineCahrt } from '../../components/Line';
|
||||
|
||||
enum Sort {
|
||||
Up,
|
||||
Dowm,
|
||||
}
|
||||
|
||||
const No1 =
|
||||
'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*grCBQ4izMjcAAAAAAAAAAAAAARQnAQ';
|
||||
const No2 =
|
||||
'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*r0DyQIluJ8QAAAAAAAAAAAAAARQnAQ';
|
||||
const No3 =
|
||||
'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*5R92QrzHW7YAAAAAAAAAAAAAARQnAQ';
|
||||
|
||||
export function TotalPanel() {
|
||||
const { selectFeatures = [] } = useLayerGroup('grid');
|
||||
|
||||
const [lineData, setLineData] = useState([]);
|
||||
const [orderData, setOrderData] = useState([]);
|
||||
const [ordersort, setOrderSort] = useState<Sort>(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// lineChart
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
setTimeout(()=>{
|
||||
setLoading(false)
|
||||
setLineData(multidimensionalChart());
|
||||
},300)
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
useEffect(() => {
|
||||
if (ordersort === undefined) {
|
||||
return setOrderData(operation());
|
||||
}
|
||||
const sortData = operation();
|
||||
if (ordersort === 0) {
|
||||
return setOrderData(
|
||||
sortData.sort((a, b) => a.order_count - b.order_count),
|
||||
);
|
||||
}
|
||||
if (ordersort === 1) {
|
||||
return setOrderData(
|
||||
sortData.sort((a, b) => b.order_count - a.order_count),
|
||||
);
|
||||
}
|
||||
}, [selectFeatures, ordersort]);
|
||||
|
||||
// 排序
|
||||
const sorts = (type: Sort) => {
|
||||
setOrderSort(type);
|
||||
};
|
||||
|
||||
// orderData index 与 icon 映射
|
||||
const iconOrder = { 1: No1, 2: No2, 3: No3 };
|
||||
|
||||
return (
|
||||
<div style={{ overflow: 'auto', height:'560px'}}>
|
||||
<div>
|
||||
<h4>铺设进程</h4>
|
||||
<LineCahrt data={lineData} loading={loading}/>
|
||||
</div>
|
||||
<div className={styles.orderCon}>
|
||||
<div className={styles.teamcontainer}>
|
||||
<div>团队榜单</div>
|
||||
<div>
|
||||
<Button
|
||||
type={ordersort === 1 ? 'link' : 'text'}
|
||||
className={styles.sort}
|
||||
onClick={() => sorts(1)}
|
||||
>
|
||||
正序
|
||||
</Button>
|
||||
<Button
|
||||
type={ordersort === 0 ? 'link' : 'text'}
|
||||
className={styles.sort}
|
||||
onClick={() => sorts(0)}
|
||||
>
|
||||
倒叙
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{orderData && (
|
||||
<List
|
||||
dataSource={orderData}
|
||||
renderItem={(item, index) => (
|
||||
<List.Item>
|
||||
<div className={styles.orderlist}>
|
||||
<div className={styles.leftpart}>
|
||||
{index <= 2 ? (
|
||||
<img
|
||||
src={iconOrder[index + 1]}
|
||||
className={styles.ordericon}
|
||||
/>
|
||||
) : (
|
||||
<div>{index + 1}</div>
|
||||
)}
|
||||
<span>
|
||||
{item.name}({item.staff_no})
|
||||
</span>
|
||||
</div>
|
||||
<div>作业成功{item.order_count}单</div>
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import { registerWidget } from '@antv/dipper-core';
|
||||
import {
|
||||
CitySelect,
|
||||
NavBar,
|
||||
ClassifyColor,
|
||||
DiscreteColor,
|
||||
Draw,
|
||||
MapStyle,
|
||||
SearchPlace,
|
||||
Location,
|
||||
} from '@antv/dipper-widgets';
|
||||
import { GridLayer } from './GridLayer';
|
||||
import { MeshIndicator } from './MeshIndicator';
|
||||
import { MeshName } from './MeshName';
|
||||
import { Filter } from './Filter';
|
||||
import { TotalPanel } from './TotalPanel/index';
|
||||
import { MeshChart } from './MeshChart';
|
||||
|
||||
export function initWidgets() {
|
||||
registerWidget('citySelect', CitySelect);
|
||||
registerWidget('navibar', NavBar);
|
||||
registerWidget('gridLayer', GridLayer);
|
||||
registerWidget('classifyColor', ClassifyColor);
|
||||
registerWidget('discreteColor', DiscreteColor);
|
||||
registerWidget('mapStyle', MapStyle);
|
||||
registerWidget('searchPlaces', SearchPlace);
|
||||
registerWidget('location', Location);
|
||||
registerWidget('filter', Filter);
|
||||
registerWidget('mesh_indicator', MeshIndicator);
|
||||
registerWidget('total_data_panel', TotalPanel);
|
||||
registerWidget('meshchart', MeshChart);
|
||||
registerWidget('draw', Draw);
|
||||
registerWidget('meshName',MeshName)
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Bar } from '@antv/g2plot';
|
||||
|
||||
export interface ChatData {
|
||||
data: object[];
|
||||
}
|
||||
|
||||
export function BarChart({ data }: ChatData) {
|
||||
const id = useRef();
|
||||
const [barplot, setBarplot] = useState<Bar>();
|
||||
useEffect(() => {
|
||||
if (!barplot && id.current) {
|
||||
const bar = new Bar(id.current, {
|
||||
// @ts-ignore
|
||||
data: data.sort((a, b) => b.xField - a.xField),
|
||||
autoFit: true,
|
||||
xField: 'xField',
|
||||
yField: 'yField',
|
||||
xAxis: false,
|
||||
label: {
|
||||
position: 'left',
|
||||
style: {
|
||||
fill: '#fff',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top-left',
|
||||
},
|
||||
});
|
||||
|
||||
bar.render();
|
||||
setBarplot(bar);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return <div ref={id} style={{ height: 300 }} />;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Line } from '@antv/g2plot';
|
||||
import { ChatData } from '../Bar';
|
||||
|
||||
export function LineChart({ data }: ChatData) {
|
||||
const id = useRef();
|
||||
const [lineplot, setLinePlot] = useState<Line>();
|
||||
const [list, setData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setData(data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!lineplot && id.current && list) {
|
||||
const area = new Line(id.current, {
|
||||
data: list,
|
||||
autoFit: true,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'country',
|
||||
legend: {
|
||||
position: 'top-left',
|
||||
},
|
||||
});
|
||||
area.render();
|
||||
setLinePlot(area);
|
||||
} else {
|
||||
lineplot.update({
|
||||
data: list,
|
||||
});
|
||||
}
|
||||
}, [id.current, list]);
|
||||
|
||||
return <div ref={id} style={{ height: 300 }} />;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Pie } from '@antv/g2plot';
|
||||
import { ChatData } from '../Bar';
|
||||
|
||||
export function PieChart({ data }: ChatData) {
|
||||
const id = useRef();
|
||||
const [pieplot, setPiePlot] = useState<Pie>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!pieplot && id.current && data) {
|
||||
const bar = new Pie(id.current, {
|
||||
data,
|
||||
autoFit: true,
|
||||
angleField: 'xField',
|
||||
colorField: 'yField',
|
||||
radius: 0.7,
|
||||
label: {
|
||||
type: 'spider',
|
||||
labelHeight: 28,
|
||||
content: '{name}\n{percentage}',
|
||||
},
|
||||
legend: {
|
||||
position: 'top-left',
|
||||
},
|
||||
});
|
||||
|
||||
bar.render();
|
||||
setPiePlot(bar);
|
||||
}
|
||||
}, [id.current, data]);
|
||||
|
||||
return <div ref={id} style={{ height: 300 }} />;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Area } from '@antv/g2plot';
|
||||
import { ChatData } from '../Bar';
|
||||
|
||||
export function StackAreaChart({ data }: ChatData) {
|
||||
const id = useRef();
|
||||
const [pieplot, setAreaPlot] = useState<Area>();
|
||||
const [list, setData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setData(data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pieplot && id.current && list) {
|
||||
const area = new Area(id.current, {
|
||||
data: list,
|
||||
autoFit: true,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'country',
|
||||
legend: {
|
||||
position: 'top-left',
|
||||
},
|
||||
});
|
||||
area.render();
|
||||
setAreaPlot(area);
|
||||
} else {
|
||||
pieplot.update({
|
||||
data: list,
|
||||
});
|
||||
}
|
||||
}, [id.current, data]);
|
||||
|
||||
return <div ref={id} style={{ height: 300 }} />;
|
||||
}
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
import { IConfig, SingleSequentialColorScale } from '@antv/dipper';
|
||||
import { CityList } from './mock';
|
||||
export const config: Partial<IConfig> = {
|
||||
viewData: {
|
||||
global: {
|
||||
filterData: [],
|
||||
areaCode: '110000',
|
||||
view: 'task',
|
||||
},
|
||||
widgets: {
|
||||
citySelect: {
|
||||
options: CityList,
|
||||
value: ['110000', '110000'],
|
||||
},
|
||||
},
|
||||
},
|
||||
headerbar: {
|
||||
display: true,
|
||||
title: {
|
||||
value: 'XX 管理地图地图',
|
||||
display: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: '选择城市',
|
||||
type: 'citySelect',
|
||||
event: {
|
||||
actionType: 'map',
|
||||
action: 'queryArea',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
panel: {
|
||||
display: true,
|
||||
|
||||
position: 'right',
|
||||
options: {
|
||||
enableToggle: true,
|
||||
defaultTitle: '所有网格',
|
||||
opened: true,
|
||||
width: 426,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
display: true,
|
||||
type: 'meshName',
|
||||
title: '网格名称',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
type: 'activityTask',
|
||||
title: '活动任务',
|
||||
},
|
||||
],
|
||||
},
|
||||
toolbar: {
|
||||
display: true,
|
||||
children: [
|
||||
{
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: '全部活动',
|
||||
type: 'activity',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: '全部状态',
|
||||
type: 'status',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: '地图展示',
|
||||
type: 'mapExhibit',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'left',
|
||||
title: '人员搜索',
|
||||
type: 'searchPerson',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'right',
|
||||
title: '保存',
|
||||
type: 'save',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'right',
|
||||
type: 'publishbar',
|
||||
title: '发布',
|
||||
event: {
|
||||
actionType: 'map',
|
||||
action: 'publish',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
map: {
|
||||
zoom: 10,
|
||||
center: [120.153576, 30.287459],
|
||||
pitch: 0,
|
||||
style: 'normal',
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
display: true,
|
||||
position: 'bottomright',
|
||||
type: 'mapStyle',
|
||||
title: '地图样式',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'rightcenter',
|
||||
type: 'meshTools',
|
||||
title: '网格工具',
|
||||
},
|
||||
{
|
||||
display: true,
|
||||
position: 'bottomright',
|
||||
type: 'location',
|
||||
title: '定位',
|
||||
},
|
||||
],
|
||||
defaultcontrols: [
|
||||
{
|
||||
type: 'zoom',
|
||||
position: 'bottomright',
|
||||
display: true,
|
||||
},
|
||||
{
|
||||
type: 'scale',
|
||||
position: 'bottomleft',
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
popup: {
|
||||
enable: false,
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
type: 'gridLayer',
|
||||
options: {
|
||||
label: {
|
||||
field: 'name',
|
||||
size: 12,
|
||||
color: '#000',
|
||||
},
|
||||
|
||||
fill: {
|
||||
field: 'unit_price',
|
||||
color: ['#CFE1B9', '#B0C298', '#90A276', '#718355'],
|
||||
unknownName: '无类型',
|
||||
scale: {
|
||||
type: 'cat',
|
||||
domain: ['C', 'B', 'A'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legends: [],
|
||||
};
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
import Mock from 'mockjs';
|
||||
|
||||
export const chartList = Mock.mock({
|
||||
// 生成长度在 0~32 之间的小写字母
|
||||
success: '@string("lower", 0, 32)',
|
||||
// 生成长度在 0~32 之间的小写字母
|
||||
errorMessage: '@string("lower", 0, 32)',
|
||||
data: {
|
||||
'list|4-7': [
|
||||
{
|
||||
// 生成长度在 100~1000 之间的小写字母
|
||||
xField: '@integer(100,1000)',
|
||||
// 生成长度在 3~5 之间的中文
|
||||
yField: '@ctitle(3, 5)',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
export const personOption = () => {
|
||||
const data = Mock.mock({
|
||||
'list|10': [
|
||||
{
|
||||
label: '@cname',
|
||||
staffNo: '@integer(100000,1000000)',
|
||||
value: '@integer(100000,1000000)'
|
||||
},
|
||||
],
|
||||
})
|
||||
return data.list
|
||||
}
|
||||
|
||||
export const selectActivityItem = [
|
||||
{
|
||||
label: '双十一赢金币',
|
||||
value: '双十一赢金币',
|
||||
icon: 'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*JYNuSaNAga8AAAAAAAAAAAAAARQnAQ'
|
||||
},
|
||||
{
|
||||
label: '充电桩铺设',
|
||||
value: '充电桩铺设',
|
||||
icon: 'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*eay2Q7nXeG4AAAAAAAAAAAAAARQnAQ'
|
||||
},
|
||||
{
|
||||
label: '1块钱升级月卡',
|
||||
value: '1块钱升级月卡',
|
||||
icon: 'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*nA0vQbl_hGMAAAAAAAAAAAAAARQnAQ'
|
||||
},
|
||||
{
|
||||
label: '免费充电1小时',
|
||||
value: '免费充电1小时',
|
||||
icon: 'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*snkKRYonMgEAAAAAAAAAAAAAARQnAQ'
|
||||
},
|
||||
]
|
||||
|
||||
export function randomData<T>(data: T): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve(data);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
export const ActivityOption = [
|
||||
{ label: '全部活动', value: '全部活动' },
|
||||
{ label: '双十一赢金币', value: '双十一赢金币' },
|
||||
{ label: '充电桩铺设', value: '充电桩铺设' },
|
||||
{ label: '1块钱升级月卡', value: '1块钱升级月卡' },
|
||||
{ label: '免费充电1小时', value: '免费充电1小时' }
|
||||
]
|
||||
|
||||
export const StatusOption = [
|
||||
{ label: '全部状态', value: '全部状态' },
|
||||
{ label: '未拓展', value: '未拓展' },
|
||||
{ label: '已拓展', value: '已拓展' },
|
||||
]
|
||||
|
||||
export const CityList = [
|
||||
{
|
||||
value: '330000',
|
||||
areaLevel: 'province',
|
||||
label: '浙江省',
|
||||
children: [
|
||||
{
|
||||
value: '330100',
|
||||
areaLevel: 'city',
|
||||
label: '杭州市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '110000',
|
||||
areaLevel: 'province',
|
||||
label: '北京市',
|
||||
children: [
|
||||
{
|
||||
value: '110000',
|
||||
areaLevel: 'city',
|
||||
label: '北京市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '120000',
|
||||
areaLevel: 'province',
|
||||
label: '天津市',
|
||||
children: [
|
||||
{
|
||||
value: '120000',
|
||||
areaLevel: 'city',
|
||||
label: '天津市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '310000',
|
||||
areaLevel: 'province',
|
||||
label: '上海市',
|
||||
children: [
|
||||
{
|
||||
value: '310000',
|
||||
areaLevel: 'province',
|
||||
label: '上海市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '440000',
|
||||
areaLevel: 'province',
|
||||
label: '广东省',
|
||||
children: [
|
||||
{
|
||||
value: '440100',
|
||||
areaLevel: 'city',
|
||||
label: '广州市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '440300',
|
||||
areaLevel: 'city',
|
||||
label: '深圳市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '440400',
|
||||
areaLevel: 'city',
|
||||
label: '珠海市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '440600',
|
||||
areaLevel: 'city',
|
||||
label: '佛山市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '441300',
|
||||
areaLevel: 'city',
|
||||
label: '惠州市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '441900',
|
||||
areaLevel: 'city',
|
||||
label: '东莞市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '442000',
|
||||
areaLevel: 'city',
|
||||
label: '中山市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '130000',
|
||||
areaLevel: 'province',
|
||||
label: '河北省',
|
||||
children: [
|
||||
{
|
||||
value: '130100',
|
||||
areaLevel: 'city',
|
||||
label: '石家庄市',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
value: '131000',
|
||||
areaLevel: 'city',
|
||||
label: '廊坊市',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { initWidgets } from './widgets';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { config } from './configs/config';
|
||||
import { DipperContainer, IConfig } from '@antv/dipper';
|
||||
import 'antd/dist/antd.css'
|
||||
|
||||
interface IInitData {
|
||||
areaVOList: any[];
|
||||
sceneCode: string;
|
||||
areaCode: string;
|
||||
filterData: any[];
|
||||
}
|
||||
|
||||
export default function RumbMap() {
|
||||
|
||||
const [mapConfig, setMapConfig] = useState<IConfig<IInitData>>();
|
||||
// 初始化相关数据
|
||||
useEffect(() => {
|
||||
|
||||
initWidgets();
|
||||
setMapConfig(config);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%',width:'100%',position:'absolute'}}>
|
||||
<DipperContainer<IInitData> cfg={mapConfig!} />
|
||||
</div>
|
||||
);
|
||||
// return <h1>测试</h1>
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { Select } from 'antd';
|
||||
import React, { useState,useEffect } from 'react';
|
||||
import { ActivityOption } from '../configs/mock';
|
||||
|
||||
const { Option } = Select
|
||||
|
||||
export function Activity() {
|
||||
|
||||
const [active,setActive] = useState<string>()
|
||||
|
||||
useEffect(()=>{
|
||||
setActive(ActivityOption[0].value)
|
||||
},[])
|
||||
|
||||
return(
|
||||
<Select value={active} bordered={false}
|
||||
onChange={(e)=> setActive(e)}>
|
||||
{ ActivityOption.map((item)=>{
|
||||
return(
|
||||
<Option value={item.value} key={item.label}>{item.label}</Option>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
.selectactivity {
|
||||
padding: 0 0 20px 20px ;
|
||||
}
|
||||
.selectactivity .select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.selectactivity .select .selectitem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 183px;
|
||||
height: 64px;
|
||||
margin: 0 15px 15px 0;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.selectactivity .select .selectitem .icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.selectactivity .select .selectitem .selecticon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: calc(674px - 80px);
|
||||
justify-content: center;
|
||||
}
|
||||
.empty img {
|
||||
width: 216px;
|
||||
height: 132px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.empty span {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.submit {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.task {
|
||||
height: calc(674px - 130px);
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
import React, { useState, useMemo } from 'react'
|
||||
import { useLayerGroup } from '@antv/dipper'
|
||||
import { Alert, Button, Select } from 'antd'
|
||||
import { personOption, selectActivityItem } from '../../configs/mock'
|
||||
import style from './index.module.css'
|
||||
|
||||
const { Option } = Select
|
||||
|
||||
export function ActivityTask() {
|
||||
const selecticon = 'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*kyI9T7Lrej4AAAAAAAAAAAAAARQnAQ'
|
||||
const emptyicon = 'https://gw.alipayobjects.com/mdn/rms_58ab56/afts/img/A*H9dxSp69pi0AAAAAAAAAAAAAARQnAQ'
|
||||
const { selectFeatures = [] } = useLayerGroup('grid')
|
||||
const [current, setCurrent] = useState(selectActivityItem[0]?.value)
|
||||
|
||||
const selectItem = (item) => {
|
||||
setCurrent(item)
|
||||
}
|
||||
|
||||
const alertMsg = useMemo(() => {
|
||||
if (selectFeatures.length === 2) {
|
||||
return '勾选多个网格中，批量分配后将一起更新数据'
|
||||
}
|
||||
if (selectFeatures.length >= 3) {
|
||||
return '你当前多选网格中包含已分配网格，无法批量分配，建议选择单个网格、或选择多个未分配网格的批量操作'
|
||||
}
|
||||
return '';
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
const HasSelectFeature = () => {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ margin: '0 20px 20px' }}>
|
||||
{selectFeatures.length >= 2 && <Alert
|
||||
style={{ display:'flex', alignItems:'baseline' }}
|
||||
message={alertMsg}
|
||||
type="warning" showIcon
|
||||
/>}
|
||||
</div>
|
||||
<div className={style.selectactivity}>
|
||||
<h4>选择活动</h4>
|
||||
<div className={style.select}>
|
||||
{selectActivityItem && selectActivityItem.map((item) => {
|
||||
return (
|
||||
<div key={item.label}
|
||||
onClick={() => selectItem(item.value)}
|
||||
style={{
|
||||
border: current === item.value ? '1px solid #1E73F8' : '1px solid rgba(0,0,0,0.15)',
|
||||
}}
|
||||
className={style.selectitem}>
|
||||
<img className={style.icon} src={item.icon} />
|
||||
<span>{item.label}</span>
|
||||
{current === item.value && <img className={style.selecticon} src={selecticon} />}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ margin: '0 20px' }}>
|
||||
<h4>分配人员</h4>
|
||||
<Select mode="multiple" style={{ width: '100%' }}
|
||||
showArrow defaultValue={['吴家豪', '周星星']}>
|
||||
{personOption().map((item) => {
|
||||
return (
|
||||
<Option key={item.label} value={item.value}>{item.label}</Option>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
<div className={style.submit}>
|
||||
<Button style={{ marginRight: 8 }}>取消</Button>
|
||||
<Button type='primary'>确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Empty = () => {
|
||||
return (
|
||||
<div className={style.empty}>
|
||||
<img src={emptyicon} />
|
||||
<span>暂无数据</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.task}>
|
||||
{!selectFeatures.length ? <Empty /> : <HasSelectFeature />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
import {
|
||||
useSceneService,
|
||||
useConfigService,
|
||||
LayerGroupEventEnum,
|
||||
useLayerService,
|
||||
} from '@antv/dipper';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { GridLayerGroup } from '@antv/dipper';
|
||||
const formatLegend = (data: any[]) => {
|
||||
return data.map((item) => {
|
||||
if (Array.isArray(item.value)) {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.map((v) => v.toFixed(2)),
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.toFixed(2),
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
export function GridLayer() {
|
||||
const { layerService } = useLayerService();
|
||||
const { sceneService } = useSceneService();
|
||||
const { globalConfig, updateLegend, getWidgetsValue } = useConfigService();
|
||||
const { layers } = globalConfig;
|
||||
const [gridLayer, setGridLayer] = useState<GridLayerGroup>();
|
||||
const cityValue = getWidgetsValue('citySelect');
|
||||
const [geoData, setGeoData] = useState();
|
||||
|
||||
const layerProps = useMemo(() => {
|
||||
return layers.find((item: any) => item.type === 'gridLayer');
|
||||
}, [layers]);
|
||||
|
||||
const testData = {
|
||||
title: '图例',
|
||||
items: [
|
||||
{
|
||||
colors: ['#fef0d9', '#fdcc8a', '#fc8d59', '#e34a33', '#b30000'],
|
||||
title: '已分配',
|
||||
},
|
||||
{
|
||||
colors: ['#f1eef6', '#bdc9e1', '#74a9cf', '#2b8cbe', '#045a8d'],
|
||||
title: '未分配',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const updateLayerLegend = (items: any[]) => {
|
||||
updateLegend('gridLayerLegend', {
|
||||
type: 'multiClassifyColor',
|
||||
display: true,
|
||||
position: 'bottomleft',
|
||||
options: {
|
||||
title: '网格',
|
||||
unkownName: layerProps.options.unkownName,
|
||||
items: [
|
||||
{
|
||||
colors: ['#BEC3BD', '#A1A6A0', '#828681', '#646763'],
|
||||
title: '已分配',
|
||||
},
|
||||
{
|
||||
colors: ['#CFE1B9', '#B0C298', '#90A276', '#718355'],
|
||||
title: '未分配',
|
||||
},
|
||||
],
|
||||
values: items.map((item) => {
|
||||
return item.value.map((v) => {
|
||||
return (v / 10000).toFixed(2);
|
||||
});
|
||||
}),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 根据筛选器条件请求数据
|
||||
useEffect(() => {
|
||||
// 可以根据业务需求配置接口
|
||||
fetch(
|
||||
`https://gw.alipayobjects.com/os/antvdemo/assets/dipper-city/${cityValue[1]}.json`,
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setGeoData(data);
|
||||
});
|
||||
// 切换城市 高德地图方法
|
||||
sceneService.getScene().map?.setCity(cityValue[1]);
|
||||
}, [JSON.stringify(cityValue)]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!geoData) {
|
||||
return;
|
||||
}
|
||||
if (gridLayer) {
|
||||
gridLayer.setData(geoData);
|
||||
return;
|
||||
}
|
||||
|
||||
const color = ['#CFE1B9','#B0C298','#90A276','#718355']
|
||||
|
||||
const layer = new GridLayerGroup({
|
||||
name: 'grid',
|
||||
data: geoData,
|
||||
options: {
|
||||
...layerProps.options,
|
||||
fill:{
|
||||
...layerProps.options.fill,
|
||||
color
|
||||
}
|
||||
},
|
||||
});
|
||||
layerService.addLayer(layer);
|
||||
|
||||
layer.on(LayerGroupEventEnum.DATAUPDATE, () => {
|
||||
layer.getLegendItem().map((item) => {
|
||||
if (Array.isArray(item.value)) {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.map((v) => v.toFixed(2)),
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
value: item.value.toFixed(2),
|
||||
};
|
||||
}
|
||||
});
|
||||
updateLayerLegend(formatLegend(layer.getLegendItem()));
|
||||
});
|
||||
|
||||
// 更新图例
|
||||
updateLayerLegend(formatLegend(layer.getLegendItem()));
|
||||
|
||||
setGridLayer(layer);
|
||||
}, [geoData]);
|
||||
|
||||
return <></>;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.exhibititem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.exhibititem :global .ant-switch-checked {
|
||||
background-color: #1E73F8;
|
||||
}
|
||||
.dropdown {
|
||||
border-left: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.dropicon {
|
||||
padding-left: 8px;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { DownOutlined } from "@ant-design/icons";
|
||||
import { Dropdown, Menu, Switch } from "antd";
|
||||
import React from "react";
|
||||
import style from './index.module.css'
|
||||
|
||||
export function MapExhibit() {
|
||||
const onChange = (e) => {
|
||||
// TODO 根据业务实现
|
||||
console.log(e)
|
||||
}
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">
|
||||
<div className={style.exhibititem}>
|
||||
<div style={{ marginRight: 50 }}>地图放大展示分配人员</div>
|
||||
<Switch defaultChecked size='small' onChange={onChange} />
|
||||
</div>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dropdown overlay={menu}>
|
||||
<div className={style.dropdown} >
|
||||
地图展示<DownOutlined className={style.dropicon} />
|
||||
</div>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.meahname {
|
||||
padding: 20px;
|
||||
}
|
||||
.closeicon {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.edit span:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import React, { useRef, useState, useMemo, useCallback } from 'react';
|
||||
import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons';
|
||||
import styles from './index.module.css'
|
||||
import { Input } from 'antd';
|
||||
import { useLayerGroup } from '@antv/dipper';
|
||||
|
||||
export function MeshName() {
|
||||
const { selectFeatures, updateProperties } = useLayerGroup('grid');
|
||||
const [edit, setEdit] = useState(false);
|
||||
const ref = useRef();
|
||||
|
||||
/**
|
||||
* get meshname
|
||||
* type []string
|
||||
*/
|
||||
const meshName = useMemo(() => {
|
||||
if (!selectFeatures.length) return [];
|
||||
return selectFeatures.map((item) => {
|
||||
// @ts-ignore
|
||||
return item.feature.properties.name;
|
||||
});
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
// 修改 网格名称
|
||||
const editMeshName = useCallback(() => {
|
||||
// @ts-ignore
|
||||
const value = ref.current.state.value;
|
||||
selectFeatures.forEach((item) => {
|
||||
const properties = {
|
||||
...item.feature.properties,
|
||||
name: value,
|
||||
};
|
||||
updateProperties(item.feature, properties);
|
||||
});
|
||||
setEdit(false);
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
// select more meshname 编辑 网格名称
|
||||
const EditMeshName = () => {
|
||||
return (
|
||||
<>
|
||||
{!edit ? (
|
||||
<div onClick={() => setEdit(!edit)}>
|
||||
<span>{meshName}</span>
|
||||
<EditOutlined style={{ paddingLeft: 12 }}/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.edit}>
|
||||
<Input defaultValue={meshName} ref={ref} />
|
||||
<CheckOutlined
|
||||
onClick={editMeshName}
|
||||
className={styles.closeicon}
|
||||
/>
|
||||
<CloseOutlined onClick={() => setEdit(false)} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// show 多个网格名称
|
||||
const ShowMeshNames = () => {
|
||||
return (
|
||||
<div>
|
||||
{meshName.length >= 2 && meshName.map((s) => {
|
||||
return (
|
||||
<span key={s}>{s},</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{meshName && meshName.length ? (
|
||||
<div className={styles.meahname}>
|
||||
{meshName.length === 1 ? <EditMeshName /> : <ShowMeshNames />}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import React from 'react';
|
||||
export function MeshSplitSvg() {
|
||||
return (
|
||||
<div style={{ marginLeft: 4 }}>
|
||||
<svg
|
||||
width="16px"
|
||||
height="20px"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.74074074,2.02 C8.01688312,2.02 8.24074074,2.24385763 8.24074074,2.52 L8.24,7.797 L13.5185185,7.79777778 C13.7946609,7.79777778 14.0185185,8.0216354 14.0185185,8.29777778 L14.0185185,14.0385185 C14.0185185,14.3146609 13.7946609,14.5385185 13.5185185,14.5385185 L2,14.5385185 C1.72385763,14.5385185 1.5,14.3146609 1.5,14.0385185 L1.5,2.52 C1.5,2.24385763 1.72385763,2.02 2,2.02 L7.74074074,2.02 Z M7.26727273,3.06 L2.54,3.06 L2.54,13.46 L12.94,13.46 L12.94,8.73272727 L7.267,8.732 L7.26727273,3.06 Z M14,1.5 C14.2761424,1.5 14.5,1.72385763 14.5,2 L14.5,6.2962963 C14.5,6.57243867 14.2761424,6.7962963 14,6.7962963 L9.7037037,6.7962963 C9.42756133,6.7962963 9.2037037,6.57243867 9.2037037,6.2962963 L9.2037037,2 C9.2037037,1.72385763 9.42756133,1.5 9.7037037,1.5 L14,1.5 Z M13.617284,2.38271605 L10.0864198,2.38271605 L10.0864198,5.91358025 L13.617284,5.91358025 L13.617284,2.38271605 Z"
|
||||
id="形状结合"
|
||||
fill="#333333"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MeshMergeSvg() {
|
||||
return (
|
||||
<div style={{ marginLeft: 4 }}>
|
||||
<svg
|
||||
width="14px"
|
||||
height="14px"
|
||||
viewBox="0 0 14 14"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>自动合并</title>
|
||||
<g
|
||||
id="设计方案"
|
||||
stroke="none"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="兼容性播报中心"
|
||||
transform="translate(-968.000000, -207.000000)"
|
||||
>
|
||||
<g id="自动合并" transform="translate(967.000000, 206.000000)">
|
||||
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
|
||||
<path
|
||||
d="M10.3121824,7.30025029 L10.3121824,13.8 C10.3121824,13.9104569 10.2226393,14 10.1121824,14 L2.2,14 C2.08954305,14 2,13.9104569 2,13.8 L2,5.64440342 C2,5.53394647 2.08954305,5.44440342 2.2,5.44440342 L8.27622473,5.44440342 L8.27622473,5.44440342 L8.27622473,2.2 C8.27622473,2.08954305 8.36576778,2 8.47622473,2 L13.8,2 C13.9104569,2 14,2.08954305 14,2.2 L14,7.10025029 C14,7.21070724 13.9104569,7.30025029 13.8,7.30025029 L10.3121824,7.30025029 L10.3121824,7.30025029 Z"
|
||||
id="路径-3"
|
||||
stroke="#333333"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.meshTools{
|
||||
width: 32px;
|
||||
height: 160px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding:15px 5px;
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import React, { useMemo, useState, useRef } from 'react';
|
||||
import styles from './index.module.css'
|
||||
import { MeshSplitSvg, MeshMergeSvg } from './SvgElement';
|
||||
import { useLayerGroup } from '@antv/dipper'
|
||||
import { Input, message, Modal, Popconfirm, Tooltip } from 'antd';
|
||||
|
||||
|
||||
export function MeshTools() {
|
||||
const { selectFeatures = [] } = useLayerGroup('grid')
|
||||
const [visible, setVisible] = useState(false)
|
||||
const refs = useRef()
|
||||
|
||||
const disable = { cursor: 'pointer', opacity: 1 }
|
||||
const noDisable = { cursor: 'not-allowed', opacity: 0.25 }
|
||||
|
||||
const cssPropsSplit = useMemo(() => {
|
||||
if (selectFeatures.length === 1) return disable;
|
||||
return noDisable;
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
const cssPropsMerge = useMemo(() => {
|
||||
if (selectFeatures.length >= 2) {
|
||||
return disable
|
||||
}
|
||||
return noDisable;
|
||||
}, [JSON.stringify(selectFeatures)]);
|
||||
|
||||
const splitMesh = () => {
|
||||
// TODO 根据业务实现
|
||||
}
|
||||
|
||||
const mergrMesh = () => {
|
||||
// @ts-ignore
|
||||
const value = refs.current.state.value
|
||||
if (!value) {
|
||||
return message.error('请输入要合并后的名称')
|
||||
}
|
||||
// TODO 根据业务实现
|
||||
setVisible(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.meshTools}>
|
||||
<Tooltip placement="left"
|
||||
title={selectFeatures.length === 1 ? '选择单个网格，可以拆分' : null}>
|
||||
<Popconfirm
|
||||
disabled={selectFeatures.length !== 1}
|
||||
placement='left'
|
||||
title='该网格将被拆分成xx个基础网格，你确定要拆分吗？'
|
||||
onConfirm={splitMesh}
|
||||
okText='确定'
|
||||
trigger='click'
|
||||
cancelText='取消'
|
||||
>
|
||||
<div style={{ ...cssPropsSplit }}>
|
||||
<MeshSplitSvg />
|
||||
<div style={{ width: 32 }}>网格拆分</div>
|
||||
</div>
|
||||
</Popconfirm>
|
||||
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip placement='left'
|
||||
title={selectFeatures.length >= 2 ? '选择多个网格，可以合并' : null}>
|
||||
<div style={{ ...cssPropsMerge }} onClick={() => setVisible(true)}>
|
||||
<MeshMergeSvg />
|
||||
<div style={{ width: 32 }}>网格合并</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Modal title='网格合并'
|
||||
okText='确认' cancelText='取消'
|
||||
visible={visible} onOk={mergrMesh}
|
||||
onCancel={() => setVisible(false)}
|
||||
>
|
||||
<h4>合并后的新网格名称</h4>
|
||||
<Input ref={refs} placeholder='请输入名称' />
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { SaveOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export function Save() {
|
||||
return (
|
||||
<Button type="text" icon={<SaveOutlined />}>
|
||||
保存
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Dropdown, Input, Menu, Select } from 'antd';
|
||||
import { SearchOutlined } from "@ant-design/icons";
|
||||
import { personOption } from "../configs/mock";
|
||||
|
||||
const { Search } = Input
|
||||
const { Option } = Select
|
||||
|
||||
// 此功能 仅做展示，以实际业务为准
|
||||
export function SearchPerson() {
|
||||
|
||||
const [persons, setPersons] = useState([])
|
||||
const [visible, setVisible] = useState(false)
|
||||
|
||||
const onSearch = (e) => {
|
||||
const value = e.target.value
|
||||
setTimeout(() => {
|
||||
if (value) {
|
||||
setPersons(personOption())
|
||||
setVisible(true)
|
||||
} else {
|
||||
setPersons([])
|
||||
setVisible(false)
|
||||
}
|
||||
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// 人员搜索
|
||||
const onSelect = (value) =>{
|
||||
// TODO 根据业务实现
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">
|
||||
{persons && persons.map((item) => {
|
||||
return (
|
||||
<div key={item.label}
|
||||
onClick={()=>onSelect(item.value)}
|
||||
style={{ paddingBottom: '5px' }}
|
||||
>{item.label}</div>
|
||||
)
|
||||
})}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ background:'#fff'}}>
|
||||
<Dropdown overlay={menu} visible={visible}>
|
||||
<Input bordered={false}
|
||||
placeholder="搜索网格名称/人员名称"
|
||||
prefix={<SearchOutlined />}
|
||||
onChange={onSearch}
|
||||
/>
|
||||
</Dropdown>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { SendOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export function Send() {
|
||||
return(
|
||||
<Button type='primary' icon={<SendOutlined rotate={-60} style={{color:'#fff'}}/>}>发布</Button>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { Select } from 'antd';
|
||||
import React,{ useState,useEffect } from 'react';
|
||||
import { StatusOption } from '../configs/mock';
|
||||
|
||||
const { Option } = Select
|
||||
|
||||
export function Status() {
|
||||
|
||||
const [status,setStatus] = useState<string>()
|
||||
|
||||
useEffect(()=>{
|
||||
setStatus(StatusOption[0].value)
|
||||
},[])
|
||||
|
||||
return(
|
||||
<Select value={status} bordered={false}
|
||||
onChange={(e)=> setStatus(e)}>
|
||||
{ StatusOption.map((item)=>{
|
||||
return(
|
||||
<Option value={item.value} key={item.label}>{item.label}</Option>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { registerWidget } from '@antv/dipper-core';
|
||||
import {
|
||||
CitySelect,
|
||||
ClassifyColor,
|
||||
DiscreteColor,
|
||||
} from '@antv/dipper-widgets';
|
||||
import { Activity } from './Activity';
|
||||
import { ActivityTask } from './ActivityTask';
|
||||
import { GridLayer } from './GridLayer';
|
||||
import { MeshName } from './MeshName/index';
|
||||
import { Save } from './Save';
|
||||
import { SearchPerson } from './SearchPerson';
|
||||
import { Send } from './Send';
|
||||
import { Status } from './Status';
|
||||
import { MeshTools } from './MeshTools';
|
||||
import { MapExhibit } from './MapExhibit/index';
|
||||
|
||||
export function initWidgets() {
|
||||
registerWidget('citySelect', CitySelect);
|
||||
registerWidget('gridLayer', GridLayer);
|
||||
registerWidget('classifyColor', ClassifyColor);
|
||||
registerWidget('discreteColor', DiscreteColor);
|
||||
registerWidget('meshName', MeshName);
|
||||
registerWidget('meshTools',MeshTools)
|
||||
|
||||
registerWidget('save', Save);
|
||||
registerWidget('publishbar', Send);
|
||||
registerWidget('activity', Activity);
|
||||
registerWidget('status',Status);
|
||||
registerWidget('mapExhibit', MapExhibit);
|
||||
registerWidget('searchPerson',SearchPerson)
|
||||
registerWidget('activityTask',ActivityTask)
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import Banner from '@antv/gatsby-theme-antv/site/components/Banner';
|
||||
import BannerSVG from '@antv/gatsby-theme-antv/site/components/BannerSVG';
|
||||
import Cases from '@antv/gatsby-theme-antv/site/components/Cases';
|
||||
import Companies from '@antv/gatsby-theme-antv/site/components/Companies';
|
||||
import Features from '@antv/gatsby-theme-antv/site/components/Features';
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
import React from 'react';
|
||||
import Loadable from "@loadable/component"
|
||||
const Map = Loadable(() => import("../components/analysis"))
|
||||
const Page: React.FC & { noLayout: boolean } = () => <Map/>;
|
||||
|
||||
Page.noLayout = true;
|
||||
|
||||
export default Page;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import React from 'react';
|
||||
import Loadable from "@loadable/component"
|
||||
const Map = Loadable(() => import("../components/task"))
|
||||
const Page: React.FC & { noLayout: boolean } = () => <Map/>;
|
||||
|
||||
Page.noLayout = true;
|
||||
|
||||
export default Page;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Index from './task.en';
|
||||
export default Index;
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const useConfig = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
// 通知
|
||||
const notifications = useMemo(() => {
|
||||
return [{
|
||||
type: t('推荐'),
|
||||
title: t('如何制作不一样的疫情世界地图-酷炫、动感的地理可视化'),
|
||||
date: '2020.03.12',
|
||||
link: 'https://www.yuque.com/antv/blog/wigku2',
|
||||
},
|
||||
{
|
||||
type: t('新版发布'),
|
||||
title: t('L7 2.1 正式版'),
|
||||
date: '2020.03.12',
|
||||
link: ' https://www.yuque.com/antv/blog/ows55v',
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
|
||||
// L7 特性
|
||||
const L7Features = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/ca2168d1-ae50-4929-8738-c6df62231de3.svg',
|
||||
title: t('架构灵活且自由'),
|
||||
description: t('支持地图底图，渲染引擎，图层自由定制、扩展，组合'),
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/0ccf4dcb-1bac-4f4e-8d8d-f1031c77c9c8.svg',
|
||||
title: t('业务专业且通用'),
|
||||
description: t(
|
||||
'以图形符号学地理设计体系理论基础，易用、易理解、专业、专注',
|
||||
),
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/fd232581-14b3-45ec-a85c-fb349c51b376.svg',
|
||||
title: t('视觉酷炫且动感'),
|
||||
description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染'),
|
||||
},
|
||||
];
|
||||
|
||||
}, [])
|
||||
|
||||
|
||||
const L7Case = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
logo:
|
||||
'https://antv-2018.alipay.com/assets/image/icon/l7.svg',
|
||||
title: t('指挥分配场景'),
|
||||
description: t(
|
||||
'区域化网格化数据管理指挥分配场景',
|
||||
),
|
||||
link: `/${i18n.language}/task`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*CLJESKDO1g4AAAAAAAAAAAAAARQnAQ',
|
||||
},
|
||||
{
|
||||
logo:
|
||||
'https://antv-2018.alipay.com/assets/image/icon/l7.svg',
|
||||
title: t('地图数据分析'),
|
||||
description: t(
|
||||
'区域化网格化数据分析场景',
|
||||
),
|
||||
link: `/${i18n.language}/view`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*jb4tS7BiNo4AAAAAAAAAAAAAARQnAQ',
|
||||
},
|
||||
{
|
||||
logo:
|
||||
'https://gw.alipayobjects.com/zos/bmw-prod/222865fc-15e9-44b9-b726-444e1512d937.ico',
|
||||
title: t('地理分析工具'),
|
||||
description: t(
|
||||
'地图可视化配置分析类场景',
|
||||
),
|
||||
link: `/${i18n.language}/examples/gallery/basic`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*MPWKQqh54vwAAAAAAAAAAAAAARQnAQ',
|
||||
},
|
||||
]
|
||||
|
||||
}, [])
|
||||
const companies = useMemo(() => [{
|
||||
name: '阿里云',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '支付宝',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '天猫',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '淘宝网',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '网商银行',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '盒马',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ePJMQZCb8vkAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: 'yunos',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '菜鸟',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ',
|
||||
}
|
||||
], []);
|
||||
|
||||
const ecosystems = useMemo(() => [{
|
||||
name: '阿里云',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '支付宝',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '天猫',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ',
|
||||
}
|
||||
], []);
|
||||
|
||||
return {
|
||||
ecosystems,
|
||||
L7Features,
|
||||
notifications,
|
||||
companies,
|
||||
L7Case,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Index from './view.zh';
|
||||
export default Index;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import React from 'react';
|
||||
import Loadable from "@loadable/component"
|
||||
const Map = Loadable(() => import("../components/analysis"))
|
||||
const Page: React.FC & { noLayout: boolean } = () => <Map/>;
|
||||
|
||||
Page.noLayout = true;
|
||||
|
||||
export default Page;
|
||||
Loading…
Reference in New Issue