diff --git a/gatsby-config.js b/gatsby-config.js index 0ec9d6b854..36baab2a7d 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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', diff --git a/site/components/analysis/components/Bar/index.tsx b/site/components/analysis/components/Bar/index.tsx deleted file mode 100644 index 96e57e7860..0000000000 --- a/site/components/analysis/components/Bar/index.tsx +++ /dev/null @@ -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(); - 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
; -} diff --git a/site/components/analysis/components/Line/index.tsx b/site/components/analysis/components/Line/index.tsx deleted file mode 100644 index f03969bb13..0000000000 --- a/site/components/analysis/components/Line/index.tsx +++ /dev/null @@ -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(); - - 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 ( - -
- - ); -} diff --git a/site/components/analysis/components/Pie/index.tsx b/site/components/analysis/components/Pie/index.tsx deleted file mode 100644 index 0738922d0f..0000000000 --- a/site/components/analysis/components/Pie/index.tsx +++ /dev/null @@ -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(); - - 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 ( - -
- - ); -} diff --git a/site/components/analysis/components/SingleLine/index.tsx b/site/components/analysis/components/SingleLine/index.tsx deleted file mode 100644 index f0513b1319..0000000000 --- a/site/components/analysis/components/SingleLine/index.tsx +++ /dev/null @@ -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(); - - - 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
; -} diff --git a/site/components/analysis/components/StackArea/index.tsx b/site/components/analysis/components/StackArea/index.tsx deleted file mode 100644 index 97ffaf2ce1..0000000000 --- a/site/components/analysis/components/StackArea/index.tsx +++ /dev/null @@ -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(); - 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
; -} diff --git a/site/components/analysis/configs/config.ts b/site/components/analysis/configs/config.ts deleted file mode 100644 index 78a6c16e0c..0000000000 --- a/site/components/analysis/configs/config.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { IConfig, SingleSequentialColorScale } from '@antv/dipper'; -import { CityList } from './mock'; -export const config: Partial = { - 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: [], -}; diff --git a/site/components/analysis/configs/mock.ts b/site/components/analysis/configs/mock.ts deleted file mode 100644 index 12c10f37b3..0000000000 --- a/site/components/analysis/configs/mock.ts +++ /dev/null @@ -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(data: T): Promise { - 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: [], - }, - ], - }, -]; diff --git a/site/components/analysis/index.tsx b/site/components/analysis/index.tsx deleted file mode 100644 index 7d75f24b9c..0000000000 --- a/site/components/analysis/index.tsx +++ /dev/null @@ -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>(); - // 初始化相关数据 - - useEffect(() => { - initWidgets(); - setMapConfig(config); - }, []); - - return ( -
- cfg={mapConfig!} /> -
- ); -} diff --git a/site/components/analysis/widgets/Filter.tsx b/site/components/analysis/widgets/Filter.tsx deleted file mode 100644 index 77aa663151..0000000000 --- a/site/components/analysis/widgets/Filter.tsx +++ /dev/null @@ -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 ( -
- - -
- ); -}; diff --git a/site/components/analysis/widgets/GridLayer.tsx b/site/components/analysis/widgets/GridLayer.tsx deleted file mode 100644 index 94f560867f..0000000000 --- a/site/components/analysis/widgets/GridLayer.tsx +++ /dev/null @@ -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(); - 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 <>; -} diff --git a/site/components/analysis/widgets/MeshChart/index.tsx b/site/components/analysis/widgets/MeshChart/index.tsx deleted file mode 100644 index 8443615146..0000000000 --- a/site/components/analysis/widgets/MeshChart/index.tsx +++ /dev/null @@ -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 ( -
-
-

行业市场份额

- -
-
-

各品牌营收

- -
-
- ); -} diff --git a/site/components/analysis/widgets/MeshIndicator.tsx b/site/components/analysis/widgets/MeshIndicator.tsx deleted file mode 100644 index ced8182214..0000000000 --- a/site/components/analysis/widgets/MeshIndicator.tsx +++ /dev/null @@ -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 ( -
-
-
交易笔数
- -
-
-
各场景覆盖数
- -
-
- ); -} diff --git a/site/components/analysis/widgets/MeshName/index.module.css b/site/components/analysis/widgets/MeshName/index.module.css deleted file mode 100644 index a03ab39e9d..0000000000 --- a/site/components/analysis/widgets/MeshName/index.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.meahname { - padding: 20px; -} -.closeicon { - padding: 0 8px; -} -.edit { - display: flex; - align-items: center; -} -.edit span:hover { - color: #1890ff; -} diff --git a/site/components/analysis/widgets/MeshName/index.tsx b/site/components/analysis/widgets/MeshName/index.tsx deleted file mode 100644 index 0f03f1a034..0000000000 --- a/site/components/analysis/widgets/MeshName/index.tsx +++ /dev/null @@ -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 ? ( -
setEdit(!edit)}> - {meshName} - -
- ) : ( -
- - - setEdit(false)} /> -
- )} - - ); - }; - - // show 多个网格名称 - const ShowMeshNames = () => { - return ( -
- {meshName.length >= 2 && - meshName.map((s) => { - return - {s}、 - ; - })} -
- ); - }; - - 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 ? ( -
- {meshName.length === 1 ? : } -
- ) : ( -

所有网格数据概览

- )} - - ); -} diff --git a/site/components/analysis/widgets/TotalPanel/index.module.css b/site/components/analysis/widgets/TotalPanel/index.module.css deleted file mode 100644 index b3f2430e6c..0000000000 --- a/site/components/analysis/widgets/TotalPanel/index.module.css +++ /dev/null @@ -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; -} diff --git a/site/components/analysis/widgets/TotalPanel/index.tsx b/site/components/analysis/widgets/TotalPanel/index.tsx deleted file mode 100644 index 8c0953f95c..0000000000 --- a/site/components/analysis/widgets/TotalPanel/index.tsx +++ /dev/null @@ -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(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 ( -
-
-

铺设进程

- -
-
-
-
团队榜单
-
- - -
-
- {orderData && ( - ( - -
-
- {index <= 2 ? ( - - ) : ( -
{index + 1}
- )} - - {item.name}({item.staff_no}) - -
-
作业成功{item.order_count}单
-
- - )} - /> - )} -
-
- ); -} diff --git a/site/components/analysis/widgets/index.ts b/site/components/analysis/widgets/index.ts deleted file mode 100644 index 6e220dcc52..0000000000 --- a/site/components/analysis/widgets/index.ts +++ /dev/null @@ -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) -} diff --git a/site/components/task/components/Bar/index.tsx b/site/components/task/components/Bar/index.tsx deleted file mode 100644 index be274f46b8..0000000000 --- a/site/components/task/components/Bar/index.tsx +++ /dev/null @@ -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(); - 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
; -} diff --git a/site/components/task/components/Line/index.tsx b/site/components/task/components/Line/index.tsx deleted file mode 100644 index 0b41073ace..0000000000 --- a/site/components/task/components/Line/index.tsx +++ /dev/null @@ -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(); - 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
; -} diff --git a/site/components/task/components/Pie/index.tsx b/site/components/task/components/Pie/index.tsx deleted file mode 100644 index d7c8d0250a..0000000000 --- a/site/components/task/components/Pie/index.tsx +++ /dev/null @@ -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(); - - 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
; -} diff --git a/site/components/task/components/StackArea/index.tsx b/site/components/task/components/StackArea/index.tsx deleted file mode 100644 index 4339f6f315..0000000000 --- a/site/components/task/components/StackArea/index.tsx +++ /dev/null @@ -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(); - 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
; -} diff --git a/site/components/task/configs/config.ts b/site/components/task/configs/config.ts deleted file mode 100644 index 0c3fd1c320..0000000000 --- a/site/components/task/configs/config.ts +++ /dev/null @@ -1,168 +0,0 @@ -import { IConfig, SingleSequentialColorScale } from '@antv/dipper'; -import { CityList } from './mock'; -export const config: Partial = { - 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: [], -}; diff --git a/site/components/task/configs/mock.ts b/site/components/task/configs/mock.ts deleted file mode 100644 index f91578ebcf..0000000000 --- a/site/components/task/configs/mock.ts +++ /dev/null @@ -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(data: T): Promise { - 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: [], - }, - ], - }, -]; diff --git a/site/components/task/index.tsx b/site/components/task/index.tsx deleted file mode 100644 index a3f5c06962..0000000000 --- a/site/components/task/index.tsx +++ /dev/null @@ -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>(); - // 初始化相关数据 - useEffect(() => { - - initWidgets(); - setMapConfig(config); - }, []); - - return ( -
- cfg={mapConfig!} /> -
- ); - // return

测试

-} diff --git a/site/components/task/widgets/Activity.tsx b/site/components/task/widgets/Activity.tsx deleted file mode 100644 index 35964b621a..0000000000 --- a/site/components/task/widgets/Activity.tsx +++ /dev/null @@ -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() - - useEffect(()=>{ - setActive(ActivityOption[0].value) - },[]) - - return( - - ) -} diff --git a/site/components/task/widgets/ActivityTask/index.module.css b/site/components/task/widgets/ActivityTask/index.module.css deleted file mode 100644 index 6b4818609b..0000000000 --- a/site/components/task/widgets/ActivityTask/index.module.css +++ /dev/null @@ -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; -} diff --git a/site/components/task/widgets/ActivityTask/index.tsx b/site/components/task/widgets/ActivityTask/index.tsx deleted file mode 100644 index 94955be8f8..0000000000 --- a/site/components/task/widgets/ActivityTask/index.tsx +++ /dev/null @@ -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 ( -
-
- {selectFeatures.length >= 2 && } -
-
-

选择活动

-
- {selectActivityItem && selectActivityItem.map((item) => { - return ( -
selectItem(item.value)} - style={{ - border: current === item.value ? '1px solid #1E73F8' : '1px solid rgba(0,0,0,0.15)', - }} - className={style.selectitem}> - - {item.label} - {current === item.value && } -
- ) - })} -
-
-
-

分配人员

- -
-
- - -
-
- ) - } - - const Empty = () => { - return ( -
- - 暂无数据 -
- ) - } - - return ( -
- {!selectFeatures.length ? : } -
- ) -} diff --git a/site/components/task/widgets/GridLayer.tsx b/site/components/task/widgets/GridLayer.tsx deleted file mode 100644 index 0ee5096345..0000000000 --- a/site/components/task/widgets/GridLayer.tsx +++ /dev/null @@ -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(); - 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 <>; -} diff --git a/site/components/task/widgets/MapExhibit/index.module.css b/site/components/task/widgets/MapExhibit/index.module.css deleted file mode 100644 index ac0a3cda7f..0000000000 --- a/site/components/task/widgets/MapExhibit/index.module.css +++ /dev/null @@ -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); -} diff --git a/site/components/task/widgets/MapExhibit/index.tsx b/site/components/task/widgets/MapExhibit/index.tsx deleted file mode 100644 index 04b974271c..0000000000 --- a/site/components/task/widgets/MapExhibit/index.tsx +++ /dev/null @@ -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 = ( - - -
-
地图放大展示分配人员
- -
- - - ); - - return ( - -
- 地图展示 -
- - ) -} diff --git a/site/components/task/widgets/MeshName/index.module.css b/site/components/task/widgets/MeshName/index.module.css deleted file mode 100644 index a03ab39e9d..0000000000 --- a/site/components/task/widgets/MeshName/index.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.meahname { - padding: 20px; -} -.closeicon { - padding: 0 8px; -} -.edit { - display: flex; - align-items: center; -} -.edit span:hover { - color: #1890ff; -} diff --git a/site/components/task/widgets/MeshName/index.tsx b/site/components/task/widgets/MeshName/index.tsx deleted file mode 100644 index 0672803712..0000000000 --- a/site/components/task/widgets/MeshName/index.tsx +++ /dev/null @@ -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 ? ( -
setEdit(!edit)}> - {meshName} - -
- ) : ( -
- - - setEdit(false)} /> -
- )} - - ); - }; - - // show 多个网格名称 - const ShowMeshNames = () => { - return ( -
- {meshName.length >= 2 && meshName.map((s) => { - return ( - {s}, - ) - })} -
- ); - }; - - return ( - <> - {meshName && meshName.length ? ( -
- {meshName.length === 1 ? : } -
- ) : null} - - ); -} diff --git a/site/components/task/widgets/MeshTools/SvgElement.tsx b/site/components/task/widgets/MeshTools/SvgElement.tsx deleted file mode 100644 index e1a2b3551b..0000000000 --- a/site/components/task/widgets/MeshTools/SvgElement.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -export function MeshSplitSvg() { - return ( -
- - - -
- ); -} - -export function MeshMergeSvg() { - return ( -
- - 自动合并 - - - - - - - - - -
- ); -} diff --git a/site/components/task/widgets/MeshTools/index.module.css b/site/components/task/widgets/MeshTools/index.module.css deleted file mode 100644 index c378ada7cb..0000000000 --- a/site/components/task/widgets/MeshTools/index.module.css +++ /dev/null @@ -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; -} diff --git a/site/components/task/widgets/MeshTools/index.tsx b/site/components/task/widgets/MeshTools/index.tsx deleted file mode 100644 index fe0ec54f47..0000000000 --- a/site/components/task/widgets/MeshTools/index.tsx +++ /dev/null @@ -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 ( -
- - -
- -
网格拆分
-
- - - - - = 2 ? '选择多个网格，可以合并' : null}> -
setVisible(true)}> - -
网格合并
-
- - - setVisible(false)} - > -

合并后的新网格名称

- - - -
- ) -} diff --git a/site/components/task/widgets/Save.tsx b/site/components/task/widgets/Save.tsx deleted file mode 100644 index cfaffaef62..0000000000 --- a/site/components/task/widgets/Save.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { SaveOutlined } from '@ant-design/icons'; -import { Button } from 'antd'; -import React from 'react'; - -export function Save() { - return ( - - ); -} diff --git a/site/components/task/widgets/SearchPerson.tsx b/site/components/task/widgets/SearchPerson.tsx deleted file mode 100644 index 5919b03c50..0000000000 --- a/site/components/task/widgets/SearchPerson.tsx +++ /dev/null @@ -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 = ( - - - {persons && persons.map((item) => { - return ( -
onSelect(item.value)} - style={{ paddingBottom: '5px' }} - >{item.label}
- ) - })} - - - ); - - return ( -
- - } - onChange={onSearch} - /> - -
- ) -} diff --git a/site/components/task/widgets/Send.tsx b/site/components/task/widgets/Send.tsx deleted file mode 100644 index 8375aff6de..0000000000 --- a/site/components/task/widgets/Send.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { SendOutlined } from '@ant-design/icons'; -import { Button } from 'antd'; -import React from 'react'; - -export function Send() { - return( - - ) -} diff --git a/site/components/task/widgets/Status.tsx b/site/components/task/widgets/Status.tsx deleted file mode 100644 index f43d784f66..0000000000 --- a/site/components/task/widgets/Status.tsx +++ /dev/null @@ -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() - - useEffect(()=>{ - setStatus(StatusOption[0].value) - },[]) - - return( - - ) -} diff --git a/site/components/task/widgets/index.ts b/site/components/task/widgets/index.ts deleted file mode 100644 index 4a21def18e..0000000000 --- a/site/components/task/widgets/index.ts +++ /dev/null @@ -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) -} diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx index 6cc4bddfd8..0bb62f35f5 100644 --- a/site/pages/index.zh.tsx +++ b/site/pages/index.zh.tsx @@ -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'; diff --git a/site/pages/map.zh.tsx b/site/pages/map.zh.tsx deleted file mode 100644 index d12c056c84..0000000000 --- a/site/pages/map.zh.tsx +++ /dev/null @@ -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 } = () => ; - -Page.noLayout = true; - -export default Page; \ No newline at end of file diff --git a/site/pages/task.en.tsx b/site/pages/task.en.tsx deleted file mode 100644 index e5d8e0bba6..0000000000 --- a/site/pages/task.en.tsx +++ /dev/null @@ -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 } = () => ; - -Page.noLayout = true; - -export default Page; \ No newline at end of file diff --git a/site/pages/task.zh.tsx b/site/pages/task.zh.tsx deleted file mode 100644 index f02b6a107e..0000000000 --- a/site/pages/task.zh.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import Index from './task.en'; -export default Index; diff --git a/site/pages/useConfig.ts b/site/pages/useConfig.ts deleted file mode 100644 index 5c3ecc2dbd..0000000000 --- a/site/pages/useConfig.ts +++ /dev/null @@ -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, - } -} - - - diff --git a/site/pages/view.en.tsx b/site/pages/view.en.tsx deleted file mode 100644 index 300b038621..0000000000 --- a/site/pages/view.en.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import Index from './view.zh'; -export default Index; diff --git a/site/pages/view.zh.tsx b/site/pages/view.zh.tsx deleted file mode 100644 index d12c056c84..0000000000 --- a/site/pages/view.zh.tsx +++ /dev/null @@ -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 } = () => ; - -Page.noLayout = true; - -export default Page; \ No newline at end of file