fix: 新增区域任务组件

package.json

 {
   "name": "panda-xform",
-  "version": "6.0.34",
-  "description": "6.0.34 自动计算逻辑修复",
+  "version": "6.0.35",
+  "description": "6.0.35 新增区域任务组件",
   "keywords": [
     "panda-xform"
   ],

src/apis/process.js

@@ -620,6 +620,36 @@ export function GetLayerList(serviceName) {
   })
 }
 
+//获取多图层公共字段
+export function GetLayersShareField({ mapServer, layerNames }) {
+  return request({
+    url: `PandaGIS/MapServer/MetaData/GetLayersShareField?mapServer=${mapServer}&layerNames=${layerNames}`,
+    method: 'get'
+  })
+}
+
+//获取分区
+export function FetchAreaList({ userID, sourceType }) {
+  return request({
+    url: `PandaGIS/MapServer/PatrolInspection/FetchAreaList?userID=${userID}&sourceType=${sourceType}`,
+    method: 'get'
+  })
+}
+
+//获取图层区域数据（多图层查询）
+export function GetAreaLayerTaskData(data) {
+  return request({
+    headers: {
+      'Content-Type': 'application/json',
+      accept: 'text/plain',
+      'Server-Name': data?.mapServerName || localStorage.getItem('PipenetLayer') || '',
+    },
+    url: `PandaGIS/MapServer/GIS/Query/GetAreaLayerTaskData`,
+    method: 'post',
+    data,
+  })
+}
+
 //通过图层获取字段
 export function GetLayerFields({ mapServer, layerName }) {
   return request({

src/constant/index.js

@@ -177,6 +177,10 @@ const widgetData = {
     name: '设备选择',
     type: 'GIS控件',
   },
+  'AreaTask': {
+    name: '区域任务',
+    type: 'GIS控件',
+  },
   'RelationForm': {
     name: '关联表单',
     type: '高级控件',

src/core/Account/components/ExportTemplate/receipt.less

-.content{
+.content {
   width: auto;
   height: auto;
-}
-table {
-  border-collapse: collapse; /* 合并单元格边框 */
-  width: 100%;
-}
-th, td {
-  border-bottom: 1px solid #ddd; /* 添加底部边框 */
-  padding: 8px;
-  text-align: center;
-  font-size: 13px;
 
-}
-.headerLeft{
-  text-align: left !important;
-  font-weight: bold;
-}
+  table {
+    border-collapse: collapse;
+    /* 合并单元格边框 */
+    width: 100%;
+  }
+
+  th,
+  td {
+    border-bottom: 1px solid #ddd;
+    /* 添加底部边框 */
+    padding: 8px;
+    text-align: center;
+    font-size: 13px;
+
+  }
+
+  .headerLeft {
+    text-align: left !important;
+    font-weight: bold;
+  }
 
-.headerRight{
-  text-align: right !important;
-  font-weight: bold;
-}
-.headerTxt{
-  padding: 5px;
-  text-align: center;
-  font-size: 13px;
-  border: none !important;
-  span{
-    border-bottom: 1px solid gray;
+  .headerRight {
+    text-align: right !important;
     font-weight: bold;
-    width: auto;
+  }
+
+  .headerTxt {
+    padding: 5px;
+    text-align: center;
+    font-size: 13px;
+    border: none !important;
+
+    span {
+      border-bottom: 1px solid gray;
+      font-weight: bold;
+      width: auto;
+    }
   }
 }
\ No newline at end of file

src/core/FormDesigner/config/settings.js

@@ -2359,6 +2359,94 @@ const mapWidgets = [
       },
     },
   },
+  {
+    text: '区域任务',
+    name: '区域任务',
+    icon: <IconPack.DrawArea />,
+    schema: {
+      title: '区域任务',
+      type: 'string',
+      widget: 'AreaTask',
+      placeholder: '',
+      width: '100%',
+    },
+    setting: {
+      widget: {
+        title: '控件类型',
+        type: 'string',
+        widget: 'WidgetType',
+        displayType: 'row',
+        labelWidth: 75,
+      },
+      $id: {
+        title: '数据源',
+        type: 'string',
+        widget: 'FieldNames',
+        required: true,
+      },
+      title: {
+        title: '展示名称',
+        required: true,
+        type: 'string',
+      },
+      placeholder: {
+        title: '提示语',
+        type: 'string',
+      },
+      presetValue: {
+        title: '默认值',
+        type: 'string',
+      },
+      description: {
+        title: '字段说明',
+        type: 'string',
+      },
+      hiddenCondition: {
+        title: '隐藏条件',
+        type: 'string',
+        description: '所有形态默认显示',
+        widget: 'HiddenCondition'
+      },
+      // screenShot: {
+      //   title: '是否显示缩略图',
+      //   type: 'boolean',
+      //   widget: 'BooleanSwitch',
+      //   default: false,
+      //   description: '只读情况下会显示缩略图'
+      // },
+      areaTaskShine: {
+        title: '映射字段',
+        name: '映射字段',
+        type: 'array',
+        widget: 'AreaTaskShine',
+        default: [],
+      },
+      required: {
+        title: '必填',
+        type: 'boolean',
+        widget: 'checkbox',
+        default: false,
+        width: '33%',
+      },
+      disabled: {
+        title: '只读',
+        type: 'boolean',
+        widget: 'checkbox',
+        default: false,
+        width: '25%',
+      },
+      groupStyle: {
+        title: '控件样式',
+        type: 'object',
+        properties: {}
+      },
+      width: {
+        title: '控件占比',
+        type: 'string',
+        widget: 'RadioGroupW',
+      },
+    },
+  },
 ]
 
 const advancedWidgets = [

src/core/FormDesigner/index.js

@@ -319,7 +319,6 @@ const FormDesigner = (props, ref) => {
 
   const testSubmit = async () => {
     const { formValue, relationForm, errors } = await formRenderRef?.current?.getValues()
-    // console.log(formValue, relationForm)
     if (errors.length) {
       setTextShow(false)
       return message.error('表单校验未通过!')

src/core/FormRender/index.js

@@ -125,10 +125,18 @@ const XRender = (props, ref) => {
         })
       }
     })
+    let relForm = {
+      configs: data?.relationForm?.configs || [],
+      data: data?.relationForm?.data || []
+    }
     return {
       formValue,
       errors,
-      relationForm: data.relationForm
+      relationForm: {
+        ...data.relationForm,
+        configs: [...relForm.configs, ...window?.relationForm.configs],
+        data: [...relForm?.data, ...window?.relationForm.data],
+      },
     }
   }
 

src/core/widgets/coord/AreaTask/index.js

+import React, { useState, useEffect, useRef, useMemo } from 'react'
+import { Input, Button, Tree, Spin, Table } from 'antd'
+import { CompassOutlined, DownOutlined } from '@ant-design/icons'
+import styles from './index.less'
+import {
+  ArcGISSceneMap,
+  AutoCompleteSearch,
+  Drawtool as drawTool,
+  Graphic,
+  GraphicsLayer,
+  Point,
+  geomUtils,
+  SimpleLineSymbol,
+  SimpleFillSymbol,
+} from '@wisdom-map/arcgismap'
+import Drag from '../../../components/Drag'
+import { isJson, isObject, getNanoid, mercatorToLngLat } from '../../../../utils'
+import { FetchAreaList, GetAreaLayerTaskData, GetAccountPageList } from '../../../../apis/process'
+
+const AreaTask = (props) => {
+
+  const codes = window?.pandaXform?.codes || { 工单编号: '', 事件编号: '', }
+  const userID = window?.globalConfig?.userInfo?.OID || 1;
+  const { token, client } = window.globalConfig
+  const { value, onChange, schema, addons } = props
+  const {
+    disabled,
+    placeholder,
+    presetValue,
+    addressSync,
+    screenShot,
+    service,
+    layerName,
+    areaTaskShine,
+    accountName,
+  } = schema
+  const [visible, setVisible] = useState(false)
+  const [rings, setRings] = useState({})
+  const [text, setText] = useState(presetValue ? '已绘制' : '（空）')
+  const [put, setPut] = useState(true)
+  const [tab, setTab] = useState('一级')
+  const [areaList, setAreaList] = useState([])
+  const [selectedKeys, setSelectedKeys] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [dataSource, setDataSource] = useState([])
+  const viewRef = useRef(null)
+  const layers = useRef(null)
+
+  const treeData = useMemo(() => {
+    const ListToTree = (List, rootValue) => {
+      const treeData = []
+      if (List.length) {
+        List.forEach(v => {
+          if (v.parentID === rootValue) {
+            const children = ListToTree(List, v.id)
+            treeData.push({ key: v.id, title: v.name, parentID: v.parentID, areaPolygon: v.areaPolygon, children })
+          }
+        })
+      }
+      return treeData
+    }
+    const treeData = ListToTree(areaList, 0)
+    if (tab === '二级') {
+      let array = []
+      treeData.forEach(v => {
+        v.children.forEach(s => {
+          array.push({ ...s })
+        })
+      })
+      return array
+    }
+    if (tab === '三级') {
+      let array = []
+      treeData.forEach(v => {
+        v.children.forEach(s => {
+          s.children.forEach(j => {
+            array.push({ ...j })
+          })
+        })
+      })
+      return array
+    }
+    return treeData
+  }, [areaList, tab])
+
+  const columns = useMemo(() => {
+    let array = []
+    areaTaskShine?.forEach(v => {
+      array.push({
+        title: v.toField,
+        dataIndex: v.toField,
+        key: v.toField,
+      })
+    })
+    return array
+  }, [areaTaskShine])
+
+  const onSelect = (value, areaList) => {
+    setSelectedKeys(value)
+    let areaPolygon = areaList.find(v => v.id === value?.[0])?.areaPolygon
+    if (areaPolygon) {
+      let geometry = geomUtils.toGeometry(JSON.parse(areaPolygon))
+      setRings({ rings: geometry.rings })
+      let layer = new Graphic({
+        geometry: geometry,
+        symbol: new SimpleFillSymbol({
+          // color: [83, 164, 253, 0.5],
+          // outline: {
+          //   color: [255, 255, 255, 1],
+          //   width: 2,
+          // },
+        }),
+      })
+      viewRef.current.goTo({ target: geometry, zoom: viewRef.current.zoom > 20 ? 20 : viewRef.current.zoom > 15 ? viewRef.current.zoom : 15 }, { duration: 500 })
+      if (layers?.current) {
+        viewRef?.current?.map.remove(layers.current)
+      }
+      layers.current = new GraphicsLayer()
+      layers.current.add(layer)
+      viewRef.current.map.add(layers.current)
+    }
+  }
+
+  const createPaths = (view) => {
+    setTimeout(() => {
+      if (isJson(value)) {
+        let layer = new Graphic({
+          geometry: geomUtils.toGeometry(JSON.parse(value)),
+          symbol: new SimpleFillSymbol({
+
+          }),
+        })
+        layers.current = new GraphicsLayer()
+        layers.current.add(layer)
+        view.map.add(layers.current)
+      }
+    }, 2000)
+  }
+
+  const getView = (viewObject) => {
+    setRings(isJson(value) ? JSON.parse(value) : '')
+    viewRef.current = viewObject
+    createPaths(viewObject)
+  }
+
+  const getMapInfo = (viewObject) => {
+    setRings(isJson(value) ? JSON.parse(value) : '')
+    viewRef.current = viewObject
+    createPaths(viewObject)
+  }
+
+  const getPoints = (view) => {
+    if (view) {
+      view.map.remove(layers.current)
+      drawTool.activate({
+        view,
+        action: 'polygon',
+        target: 'erroSendUpWidget',// 随便写
+        toolTip: '左键选择位置',
+        drawEnd: geometry => {
+          setRings({ rings: geometry.rings })
+          let layer = new Graphic({
+            geometry: geometry,
+            symbol: new SimpleFillSymbol({
+
+            }),
+          })
+          layers.current = new GraphicsLayer()
+          layers.current.add(layer)
+          view.map.add(layers.current)
+        },
+        // rightClick: () => { getPoints(view, coordGetLayer) }
+      })
+    }
+  }
+
+  const start = () => {
+    setSelectedKeys([])
+    getPoints(viewRef.current)
+  }
+
+  const showMap = () => {
+    getData(value)
+    setVisible(true)
+  }
+
+  const onCancel = () => {
+    setVisible(false)
+  }
+
+  const getGISData = async () => {
+    window.relationForm = { configs: [], data: [] }
+    let layerWhere = []
+    if (layerName?.length) {
+      layerName.forEach(v => {
+        layerWhere.push({ layerName: v, where: [] })
+      })
+    }
+    let paramas = {
+      mapServerName: service,
+      geometry: JSON.stringify(rings),
+      geometryType: 'civGeometryPolygon',
+      layerWhereList: layerWhere
+    }
+    const { code, data } = await GetAreaLayerTaskData(paramas)
+    if (code === 0) {
+      let items = []
+      let array = []
+      data.forEach(v => {
+        let obj = {
+          ID: `${getNanoid(10, '前端ID')}`
+        }
+        let values = []
+        areaTaskShine.forEach(s => {
+          if (s.fromField === '工单编号') {
+            obj[s.toField] = codes['工单编号']
+          } else if (s.fromField === 'GIS图层') {
+            obj[s.toField] = v['gis图层'] || ''
+          } else if (s.fromField === 'GIS编号') {
+            obj[s.toField] = v['gis编号'] || ''
+          } else {
+            obj[s.toField] = v[s.fromField] || ''
+          }
+          values.push({ fieldName: s.toField, fieldValue: obj[s.toField] })
+        })
+        array.push(obj)
+        items.push({
+          type: 'add',
+          accountTable: accountName,
+          ID: `${getNanoid(10, '前端ID')}`,
+          values: values
+        })
+      })
+      window.relationForm = { configs: [{ ...schema, '台账名称': schema.accountName, '映射字段': schema.fieldshine }], data: items }
+      setDataSource(array)
+    }
+  }
+
+  const onOk = () => {
+    if (selectedKeys.length) {
+      onChange(`${selectedKeys[0]}`)
+    } else {
+      onChange(JSON.stringify(rings))
+    }
+    getGISData()
+    setVisible(false)
+  }
+
+  const getData = async (value) => {
+    const { code, data } = await FetchAreaList({ userID: userID, sourceType: '管网巡检,DMA分区' })
+    if (code === '0') {
+      setAreaList(data)
+      if (value && !isNaN(value)) {
+        setTimeout(() => {
+          onSelect([Number(value)], data)
+        }, 2000)
+      }
+    }
+  }
+
+  const getDataSource = async (presetValue) => {
+    // let areaPolygon = ''
+    // if (!isNaN(presetValue)) {
+    //   const { code, data } = await FetchAreaList({ userID: userID, sourceType: '管网巡检,DMA分区' })
+    //   if (code === '0') {
+    //     setAreaList(data)
+    //     setSelectedKeys([Number(presetValue)])
+    //     areaPolygon = data.find(v => v.id === Number(presetValue))?.areaPolygon
+    //   }
+    // } else {
+    //   areaPolygon = presetValue
+    // }
+    let params = {
+      user: userID,
+      condition: '',
+      accountName: accountName,
+      sortFields: '录入时间',
+      direction: 'desc',
+      timeField: '录入时间',
+      pageIndex: 0,
+      pageSize: 0,
+      // queryWheres: [{ field: '工单编号', type: '等于', value: codes['工单编号'] }],
+    }
+    console.log('params', params)
+    // if (!codes['工单编号']) return
+    const { code, data, msg } = await GetAccountPageList(params)
+    if (code === 0) {
+      let tableData = data?.jsonData ? JSON.parse(data?.jsonData) : []
+      setDataSource(tableData)
+    }
+  }
+
+  useEffect(() => {
+    if (addons) {
+      addons.setValueByPath(addons.dataPath, presetValue)
+      if (presetValue) {
+        getDataSource(presetValue)
+      }
+    } else {
+      onChange(presetValue)
+    }
+  }, [presetValue])
+
+  useEffect(() => {
+    if (disabled && screenShot) {
+      addons?.setSchemaByPath(addons.dataPath, { ...schema, width: '67%' })
+    }
+  }, [disabled, screenShot])
+
+
+  if (screenShot && disabled && addons) {
+    return (
+      <div className={styles.drawAreaShot}>
+        <div className={styles.content}>
+          <div className={styles.top}>
+            <div className={styles.text}>{text}</div>
+            <div
+              className={styles.icon}
+              onClick={() => setPut(!put)}
+              style={{ transform: `rotate(${put ? 0 : 180}deg)` }}
+            >
+              <DownOutlined />
+            </div>
+          </div>
+          <div className={styles.mapBox} style={{ height: put ? '208px' : '0px' }}>
+            <ArcGISSceneMap
+              getMapInfo={getMapInfo}
+              widgets={[]}
+              token={token}
+              client={token ? client : 'sandbox'}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.AreaTask}>
+      <div className={styles.areaBox}>
+        <div className={styles.areaInput}>
+          {
+            !disabled ?
+              <Input
+                disabled={disabled}
+                placeholder={disabled ? (placeholder || '') : (placeholder || '点击绘制区域')}
+                value={isJson(value) ? '已绘制' : (value ? '已选择' : '')}
+                addonAfter={disabled ? null : <CompassOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} onClick={showMap} />}
+                style={{ width: '100%' }}
+                onClick={() => showMap()}
+              />
+              :
+              <Button
+                icon={<CompassOutlined style={{ color: value ? '#0092fe' : 'rgba(0, 0, 0, 0.25)' }} />}
+                onClick={() => {
+                  if (value) {
+                    showMap()
+                  }
+                }}
+              >
+                {value ? '查看区域' : '无区域信息'}
+              </Button>
+          }
+        </div>
+        <div className={styles.areaTable}>
+          <Table
+            size='small'
+            rowKey='ID'
+            bordered
+            columns={columns}
+            dataSource={dataSource}
+          />
+        </div>
+      </div>
+      <Drag
+        width={'80%'}
+        title="选取区域"
+        visible={visible}
+        onOk={onOk}
+        onCancel={onCancel}
+        cancelText={'取消'}
+        okText={'确定'}
+        bodyStyle={{ height: 600, padding: '0' }}
+        destroyOnClose={true}
+        {...disabled ? { footer: null } : {}}
+      >
+        <div className={styles.AreaTaskMap}>
+          <Spin spinning={loading} tip="获取GIS数据中...">
+            <div className={styles.content}>
+              <div className={styles.left}>
+                <div className={styles.tabs}>
+                  {
+                    ['一级', '二级', '三级'].map(v => <div className={styles.tab} active={`${v === tab}`} key={v} onClick={() => setTab(v)}>{v}</div>)
+                  }
+                </div>
+                <div className={styles.tabContent}>
+                  <Tree
+                    defaultExpandAll
+                    blockNode
+                    selectedKeys={selectedKeys}
+                    onSelect={(value) => onSelect(value, areaList)}
+                    treeData={treeData}
+                  />
+                </div>
+              </div>
+              <div className={styles.right}>
+                <div>
+                  <ArcGISSceneMap
+                    getMapInfo={getView}
+                    widgets={[]}
+                    token={token}
+                    client={token ? client : 'sandbox'}
+                  />
+                </div>
+              </div>
+              <Button
+                style={{ position: 'absolute', zIndex: '99', right: '10px', top: '10px' }}
+                type='primary'
+                onClick={start}
+              >
+                开始绘制
+              </Button>
+            </div>
+          </Spin>
+        </div>
+      </Drag>
+    </div>
+  )
+
+}
+
+export default AreaTask
\ No newline at end of file

src/core/widgets/coord/AreaTask/index.less

+.AreaTask {
+  width: 100%;
+
+  .areaBox {
+    width: 100%;
+
+    .areaInput {
+      width: 100%;
+    }
+
+    .areaTable {}
+  }
+}
+
+.AreaTaskMap {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+  }
+
+  .left {
+    width: 250px;
+    height: 100%;
+    padding: 10px;
+
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid #f0f3f7;
+
+      .tab {
+        flex: 1;
+        text-align: center;
+        padding: 0 5px 5px 5px;
+
+        &[active='true'] {
+          color: #1685ff;
+          border-bottom: 2px solid #1685ff;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .tabContent {
+      height: calc(100% - 30px);
+      padding: 10px 0;
+      overflow: auto;
+    }
+  }
+
+  .right {
+    position: relative;
+    width: calc(100% - 250px);
+    height: 100%;
+  }
+
+}
\ No newline at end of file

src/core/widgets/coord/index.js

@@ -2,12 +2,14 @@ import Coordinate from './Coordinate'
 import Device from './Device'
 import DrawPath from './DrawPath'
 import DrawArea from './DrawArea'
+import AreaTask from './AreaTask'
 
 const coord = {
   Coordinate,
   Device,
   DrawPath,
   DrawArea,
+  AreaTask,
 }
 
 export default coord
\ No newline at end of file

src/core/widgets/settings/groupSource/AreaTaskShine/index.js

+import React, { useEffect, useState } from 'react'
+import { Form, Space, TreeSelect, Button, Input, Modal, message, Select } from 'antd'
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import styles from './index.less'
+import {
+  LoadLedgers,
+  ReloadTableFields,
+  QueryFields,
+  getMaplayerByTerminalType,
+  GetLayerList,
+  GetLayerFields,
+  GetLayersShareField
+} from '../../../../../apis/process'
+import Drag from '../../../../components/Drag'
+
+const { TreeNode } = TreeSelect
+
+const initField = [
+  { fromField: '工单编号', toField: '工单编号' },
+  { fromField: 'GIS图层', toField: 'GIS图层' },
+  { fromField: 'GIS编号', toField: 'GIS编号' },
+]
+
+const AreaTaskShine = (props) => {
+
+  const { addons, onChange, value } = props
+  const formData = addons.formData
+
+  const [form] = Form.useForm()
+  const [visible, setVisible] = useState(false)
+  const [tableName, setTableName] = useState(formData?.tableName)
+  const [accountName, setAccountName] = useState(formData?.accountName)
+  const [accountList, setAccountList] = useState([])
+  const [mapServers, setMapServers] = useState([])
+  const [service, setService] = useState(formData?.service)
+  const [layers, setLayers] = useState([])
+  const [layerName, setlayerName] = useState(formData?.layerName)
+  const [fromField, setFromField] = useState([])
+  const [toField, setToField] = useState([])
+
+  const onOk = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        const { field, accountName, service, layerName } = form.getFieldsValue()
+        if (!toField.some(v => v.name === '工单编号')) {
+          return message.error(`【${accountName}】台账不存在工单编号字段`)
+        }
+        addons.setValue('accountName', accountName)
+        addons.setValue('service', service)
+        addons.setValue('layerName', layerName)
+        onChange(field)
+        setVisible(false)
+      })
+      .catch((info) => {
+        console.log('Validate Failed:', info)
+      })
+  }
+
+  const inputClick = async () => {
+    form.setFieldsValue({
+      field: value.length ? value : initField,
+      accountName: formData?.accountName,
+      service: formData?.service,
+      layerName: formData?.layerName || []
+    })
+    getData()
+    setAccountName(formData?.accountName)
+    setService(formData?.service)
+    setlayerName(formData?.layerName)
+    setVisible(true)
+  }
+
+  const getData = () => {
+    getAccountList()
+    getServices()
+  }
+
+  const getAccountList = async () => {
+    const { code, data } = await LoadLedgers()
+    if (code === 0) {
+      setAccountList(data?.root)
+    }
+  }
+
+  const getServices = async () => {
+    const { code, data } = await getMaplayerByTerminalType()
+    if (code === '0') {
+      setMapServers(data?.map(v => ({ label: v.schemename, value: v.servicename })))
+    }
+  }
+
+  const layerNameFocus = async () => {
+    let { success, root } = await GetLayerList(service)
+    if (success === true) {
+      let array = []
+      root.forEach(v => {
+        let values = v.layerName.split(':')
+        if (values.length === 2) {
+          array.push({ layerID: v.layerID, layerName: values[1] })
+        }
+      })
+      setLayers(array)
+    }
+  }
+
+  const getToField = async () => {
+    const { code, data } = await ReloadTableFields({ tableName: tableName })
+    if (code === 0) {
+      setToField(data?.root)
+    }
+  }
+
+  const getFromField = async (value) => {
+    const { code, data } = await GetLayersShareField({ mapServer: service, layerNames: layerName })
+    if (code === '0') {
+      setFromField(data || [])
+    }
+  }
+
+  const fromFieldChange = (value) => {
+    const { field, service, layerName } = form.getFieldsValue()
+    let values = field.map(v => ({ ...v, layerName: v.fromField === value ? layerName : v.layerName }))
+    form.setFieldsValue({ field: values, service, layerName })
+  }
+
+  const clear = () => {
+    addons.setValue('tableName', '')
+    addons.setValue('accountName', '')
+    addons.setValue('service', '')
+    addons.setValue('layerName', [])
+    onChange([])
+    setVisible(false)
+  }
+
+  useEffect(() => {
+    if (visible) {
+      if (service && layerName) {
+        getFromField()
+      }
+      if (tableName) {
+        getToField()
+      }
+    }
+  }, [visible, service, layerName, tableName])
+
+  return (
+    <div className={styles.fieldshine}>
+      <Input
+        value={value && value.length ? JSON.stringify(value) : null}
+        onClick={inputClick}
+      />
+      <Drag
+        getContainer={false}
+        width='500px'
+        title='字段映射'
+        bodyStyle={{ maxHeight: 500, overflow: 'auto' }}
+        visible={visible}
+        footer={
+          <div>
+            <Button onClick={() => setVisible(false)}>取消</Button>
+            <Button onClick={() => clear()}>清空</Button>
+            <Button type="primary" onClick={() => onOk()}>确定</Button>
+          </div>
+        }
+        onCancel={() => setVisible(false)}
+      >
+        <Form name="dynamic_form_nest_item" form={form} autoComplete="off">
+          <Form.Item label='台账名称' name='accountName' rules={[{ required: true, message: '台账名称必填', }]}>
+            <Select
+              showSearch
+              options={accountList.map(v => ({ label: v.name, value: v.name }))}
+              onChange={(value) => {
+                let tableName = accountList.find(v => v.name === value)?.tableName
+                if (tableName) {
+                  addons.setValue('tableName', tableName)
+                  setTableName(tableName)
+                }
+                setAccountName(value)
+              }}
+            />
+          </Form.Item>
+          <Form.Item label='方案名称' name='service' rules={[{ required: true, message: '方案名称必填', },]}>
+            <Select options={mapServers} onChange={(value) => setService(value)} />
+          </Form.Item>
+          <Form.Item
+            label='图层名称'
+            name='layerName'
+            rules={[
+              {
+                required: true,
+                message: '图层名称必填',
+              },
+            ]}
+          >
+            <Select
+              mode="multiple"
+              onFocus={layerNameFocus}
+              onChange={(value) => {
+                setlayerName(value)
+              }}
+            >
+              {
+                layers.map(v => <Select.Option value={v.layerName}>{v.layerName}</Select.Option>)
+              }
+            </Select>
+          </Form.Item>
+          <Form.List name="field" label='字段映射'>
+            {(value, { add, remove }) => (
+              <>
+                {value.map(({ key, name, ...restField }, index) => (
+                  <Space
+                    key={key}
+                    style={{
+                      display: 'flex',
+                      marginBottom: '5px',
+                      justifyContent: 'center',
+                      position: 'relative',
+                      left: index === 0 ? '-11px' : '',
+                    }}
+                    align="baseline"
+                  >
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'fromField']}
+                      rules={[
+                        {
+                          required: true,
+                          message: '来源字段必填',
+                        }
+                      ]}
+                    >
+                      <TreeSelect
+                        showSearch
+                        style={{ width: '180px' }}
+                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                        placeholder="请选择字段名 "
+                        allowClear
+                        treeDefaultExpandAll
+                        showCheckedStrategy
+                        onChange={fromFieldChange}
+                        disabled={index <= 2}
+                      >
+                        {fromField.map(s => <TreeNode value={s.fieldName} title={s.fieldAliasName} key={s.fieldName} />)}
+                      </TreeSelect>
+                    </Form.Item>
+                    <div className={styles.centerImg}></div>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'toField']}
+                      rules={[
+                        {
+                          required: true,
+                          message: '目标字段必填',
+                        },
+                        {
+                          validator: (rules, value, callback) => {
+                            const { field } = form.getFieldsValue()
+                            let toFields = Array.from(new Set([...field.map(v => v.toField)]))
+                            if (toFields.length !== field.length) {
+                              return Promise.reject('目标字段不能重复！')
+                            }
+                            return Promise.resolve()
+                          }
+                        }
+                      ]}
+                    >
+                      <TreeSelect
+                        showSearch
+                        style={{ width: '180px' }}
+                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                        placeholder="请选择字段名 "
+                        allowClear
+                        treeDefaultExpandAll
+                        showCheckedStrategy
+                        disabled={index <= 2}
+                      >
+                        {toField.map(s => <TreeNode value={s.name} title={s.alias} key={s.name} />)}
+                      </TreeSelect>
+                    </Form.Item>
+                    <Form.Item
+                      hidden={true}
+                      {...restField}
+                      name={[name, 'layerName']}
+                    >
+                      <Input />
+                    </Form.Item>
+                    {index > 2 ? <MinusCircleOutlined onClick={() => remove(name)} /> : null}
+                  </Space>
+                ))}
+                <Form.Item style={{ padding: '0 10px' }}>
+                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                    添加映射
+                  </Button>
+                </Form.Item>
+              </>
+            )}
+          </Form.List>
+        </Form>
+      </Drag>
+    </div>
+  )
+
+}
+
+export default AreaTaskShine
\ No newline at end of file

src/core/widgets/settings/groupSource/AreaTaskShine/index.less

+@imgSrc: '../../../../../assets/images/settting';
+
+.fieldshine {
+  .centerImg {
+    width: 24px;
+    height: 24px;
+    background: url('@{imgSrc}/值映射.png');
+    background-size: 100% 100%;
+    position: relative;
+    top: 7px;
+  }
+}
\ No newline at end of file

src/core/widgets/settings/groupSource/index.js

@@ -17,6 +17,7 @@ import SqlFilter from './SqlFilter'
 import OtherSource from './OtherSource'
 import TemplateFile from './TemplateFile'
 import AreaSync from './AreaSync'
+import AreaTaskShine from './AreaTaskShine'
 
 const groupSource = {
   Dictionary,
@@ -38,6 +39,7 @@ const groupSource = {
   SqlFilter,
   OtherSource,
   TemplateFile,
+  AreaTaskShine,
 }
 
 export default groupSource
\ No newline at end of file

src/core/widgets/settings/groupStyle/RadioGroupW/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { Radio } from 'antd'
 import styles from './index.less'
 
-const TableNames = (props) => {
+const RadioGroupW = (props) => {
 
   let num = sessionStorage.getItem('RadioButtonValue') || 3
   const { value, schema, onChange } = props
@@ -53,7 +53,7 @@ const TableNames = (props) => {
           {
             options.map((v, i) => {
               return (
-                <div style={{ flex: 1, marginLeft: i === 0 ? '0' : '-1px' }}>
+                <div key={i} style={{ flex: 1, marginLeft: i === 0 ? '0' : '-1px' }}>
                   <Radio.Button style={{ textAlign: 'center' }} value={v.value} key={i}>{v.label}</Radio.Button>
                 </div>
               )
@@ -67,4 +67,4 @@ const TableNames = (props) => {
 
 }
 
-export default TableNames
\ No newline at end of file
+export default RadioGroupW
\ No newline at end of file